Merge pull request #8 from novaui-org/develop

xmajzel · web-flow · commit 296e414c04ee · 2024-10-06T15:56:25.000+02:00
Develop
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -39,17 +39,17 @@
     "@nova-org/icons": "^0.0.1",
     "@oku-ui/motion": "^0.3.4",
     "color2k": "^2.0.3",
-    "vue": "^3.4.21"
+    "vue": "^3.5.11"
   },
   "devDependencies": {
-    "@types/node": "^20.12.11",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@types/node": "^20.16.10",
+    "@vitejs/plugin-vue": "^5.1.4",
     "rollup-plugin-visualizer": "^5.12.0",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.11",
-    "vite-plugin-dts": "^3.9.1",
-    "vite-plugin-static-copy": "^1.0.4",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.8",
+    "vite-plugin-dts": "^4.2.3",
+    "vite-plugin-static-copy": "^1.0.6",
     "vite-svg-loader": "^5.1.0",
-    "vue-tsc": "^2.0.17"
+    "vue-tsc": "^2.1.6"
   }
 }
diff --git a/packages/components/src/components/NSlideTransition/use-slide-transition.ts b/packages/components/src/components/NSlideTransition/use-slide-transition.ts
@@ -1,5 +1,4 @@
 import type {NSlideTransitionProps} from 'src/components'
-import {ref} from 'vue'
 
 const CLOSED_SIZE = '0px'
 
@@ -51,7 +50,7 @@ function prepareElement(element: HTMLElement, initialStyle: initialStyle) {
   return initialStyle.height && initialStyle.height != CLOSED_SIZE ? initialStyle.height : height
 }
 
-function getEnterKeyframes(height: string, initialStyle: initialStyle) {
+function getEnterKeyframes(height: string, initialStyle: initialStyle, parentGap: string | null) {
   return [
     {
       height: CLOSED_SIZE,
@@ -60,7 +59,8 @@ function getEnterKeyframes(height: string, initialStyle: initialStyle) {
       paddingBottom: CLOSED_SIZE,
       borderTopWidth: CLOSED_SIZE,
       borderBottomWidth: CLOSED_SIZE,
-      marginTop: CLOSED_SIZE,
+      /* Handle case, where item is inside flexbox and gap is used */
+      marginTop: parentGap ? `-${parentGap}` : CLOSED_SIZE,
       marginBottom: CLOSED_SIZE,
     },
     {
@@ -94,11 +94,25 @@ function animateTransition(
   return animation
 }
 
+function getParentGap(element: Element): string | null {
+  const parentElement = element.parentElement
+  if (!parentElement) {
+    return null
+  }
+
+  const {rowGap, display} = getComputedStyle(element.parentElement!)
+  if (display !== 'flex' || rowGap === 'normal') {
+    return null
+  }
+
+  return rowGap
+}
+
 export function useSlideTransition(props: NSlideTransitionProps) {
   function enterTransition(element: Element, doneCallback: () => void) {
     const initialStyle = getElementStyle(<HTMLElement>element)
     const height = prepareElement(<HTMLElement>element, initialStyle)
-    const keyframes = getEnterKeyframes(height, initialStyle)
+    const keyframes = getEnterKeyframes(height, initialStyle, getParentGap(element))
     const options = {duration: props.duration, easing: 'ease-in-out'}
 
     animateTransition(<HTMLElement>element, initialStyle, doneCallback, keyframes, options)
@@ -111,7 +125,7 @@ export function useSlideTransition(props: NSlideTransitionProps) {
     ;(<HTMLElement>element).style.height = height
     ;(<HTMLElement>element).style.overflow = 'hidden'
 
-    const keyframes = getEnterKeyframes(height, initialStyle).reverse()
+    const keyframes = getEnterKeyframes(height, initialStyle, getParentGap(element)).reverse()
     const options = {duration: props.duration, easing: 'ease-in-out'}
     animateTransition(<HTMLElement>element, initialStyle, doneCallback, keyframes, options)
   }
diff --git a/packages/components/src/components/NSlideTransitionHorizontal/use-slide-transition-horizontal.ts b/packages/components/src/components/NSlideTransitionHorizontal/use-slide-transition-horizontal.ts
@@ -35,7 +35,7 @@ function getElementStyle(element: HTMLElement) {
   }
 }
 
-function getEnterKeyframes(width: string, initialStyle: initialStyle) {
+function getEnterKeyframes(width: string, initialStyle: initialStyle, parentGap: string | null) {
   return [
     {
       width: CLOSED_SIZE,
@@ -45,7 +45,8 @@ function getEnterKeyframes(width: string, initialStyle: initialStyle) {
       paddingRight: CLOSED_SIZE,
       borderLeftWidth: CLOSED_SIZE,
       borderRightWidth: CLOSED_SIZE,
-      marginLeft: CLOSED_SIZE,
+      /* Handle case, where item is inside flexbox and gap is used */
+      marginLeft: parentGap ? `-${parentGap}` : CLOSED_SIZE,
       marginRight: CLOSED_SIZE,
     },
     {
@@ -80,6 +81,20 @@ function animateTransition(
   return animation
 }
 
+function getParentGap(element: Element): string | null {
+  const parentElement = element.parentElement
+  if (!parentElement) {
+    return null
+  }
+
+  const {columnGap, display} = getComputedStyle(element.parentElement!)
+  if (display !== 'flex' || columnGap === 'normal') {
+    return null
+  }
+
+  return columnGap
+}
+
 export function useSlideTransitionHorizontal(props: NSlideTransitionProps) {
   function enterTransition(element: Element, doneCallback: () => void) {
     const initialStyle = getElementStyle(<HTMLElement>element)
@@ -88,7 +103,7 @@ export function useSlideTransitionHorizontal(props: NSlideTransitionProps) {
     ;(<HTMLElement>element).style.width = width
     ;(<HTMLElement>element).style.overflow = 'hidden'
 
-    const keyframes = getEnterKeyframes(width, initialStyle)
+    const keyframes = getEnterKeyframes(width, initialStyle, getParentGap(element))
     const options = {duration: props.duration, easing: 'ease-in-out'}
     animateTransition(<HTMLElement>element, initialStyle, doneCallback, keyframes, options)
   }
@@ -100,7 +115,7 @@ export function useSlideTransitionHorizontal(props: NSlideTransitionProps) {
     ;(<HTMLElement>element).style.width = width
     ;(<HTMLElement>element).style.overflow = 'hidden'
 
-    const keyframes = getEnterKeyframes(width, initialStyle).reverse()
+    const keyframes = getEnterKeyframes(width, initialStyle, getParentGap(element)).reverse()
     const options = {duration: props.duration, easing: 'ease-in-out'}
     animateTransition(<HTMLElement>element, initialStyle, doneCallback, keyframes, options)
   }
diff --git a/packages/docs/.vitepress/config.mts b/packages/docs/.vitepress/config.mts
@@ -58,6 +58,7 @@ export default defineConfig({
       preprocessorOptions: {
         scss: {
           additionalData: '@import "@nova-org/components/scss/index.variables.scss";',
+          api: 'modern-compiler',
         },
       },
     },
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -17,16 +17,16 @@
     "preview": "vitepress preview"
   },
   "devDependencies": {
-    "sass": "^1.75.0",
-    "vitepress": "^1.1.0"
+    "sass": "^1.79.4",
+    "vitepress": "^1.3.4"
   },
   "dependencies": {
     "@nova-org/components": "^0.0.1",
     "@nova-org/icons": "^0.0.1",
     "@oku-ui/motion": "^0.3.4"
   },
   "peerDependencies": {
-    "vue": "^3.4.21"
+    "vue": "^3.5.11"
   },
   "nx": {
     "targets": {
diff --git a/packages/docs/transitions/SlideHorizontal.md b/packages/docs/transitions/SlideHorizontal.md
@@ -25,8 +25,7 @@ Slide transition (horizontal) animates element's:
 - **Width**
 - **Margin** (left, right)
 - **Padding** (left, right)
-
-[//]: # (TODO: Add animating flex - or wrap single into separate DIV)
+- **Flex gap** - when an element is placed inside a flexbox element with a gap property set, it will also animate it
 
 <display-container>
     <single/>
diff --git a/packages/docs/transitions/SlideVertical.md b/packages/docs/transitions/SlideVertical.md
@@ -7,8 +7,8 @@ import Multiple from '../examples/transitions/slide-vertical/Multiple.vue'
 
 # Slide transition - vertical
 
-Slide transition (vertical) provides a simple way to **animate height** of single or multiple components or HTML elements when
-using conditional rendering.
+Slide transition (vertical) provides a simple way to **animate height** of single or multiple components or HTML
+elements when using conditional rendering.
 
 ## Import
 
@@ -25,8 +25,7 @@ Slide transition (vertical) animates element's:
 - **Height**
 - **Margin** (top, bottom)
 - **Padding** (top, bottom)
-
-[//]: # (TODO: Add animating flex - or wrap single into separate DIV)
+- **Flex gap** - when an element is placed inside a flexbox element with a gap property set, it will also animate it
 
 <display-container vertical>
     <single/>
diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -35,11 +35,11 @@
     "icons:generate": "npx ts-node --esm ./scripts/index.mts icons"
   },
   "devDependencies": {
-    "@types/node": "^20.11.28",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.6",
-    "vite-plugin-dts": "^3.7.3",
+    "@types/node": "^20.16.10",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.8",
+    "vite-plugin-dts": "^4.2.3",
     "vite-svg-loader": "^5.1.0",
-    "vue-tsc": "^2.0.6"
+    "vue-tsc": "^2.1.6"
   }
 }
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -22,19 +22,19 @@
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-interactions": "^7.4.6",
-    "@storybook/addon-links": "^7.4.6",
-    "@storybook/blocks": "^7.4.6",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/vue3": "^7.4.6",
-    "@storybook/vue3-vite": "^7.4.6",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^7.4.6",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5",
-    "vue-tsc": "^1.8.5"
+    "@storybook/vue3": "^8.3.5",
+    "@storybook/vue3-vite": "^8.3.5",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^8.3.5",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.8",
+    "vue-tsc": "^2.1.6"
   }
 }
