srcdev-nuxt-components 1.0.3 → 1.1.0

package/components/functional/display-dialog/DisplayDialogCore.vue

@@ -1,5 +1,5 @@
 <template>
-  <dialog class="display-dialog-core" :class="[variant, elementClasses]" :align-dialog :open ref="dialogRef">
+  <dialog class="display-dialog-core" :class="[variant, elementClasses]" role="dialog" :align-dialog :open :data-dialog-id="dataDialogId" ref="dialogRef">
     <focus-trap v-model:active="open" :clickOutsideDeactivates="true" @deactivate="closeDialog()">
       <div class="inner">
         <div class="header">
@@ -58,6 +58,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  dataDialogId: {
+    type: String,
+    required: true,
+  },
 });
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);

package/components/functional/display-dialog/variants/DisplayDialogConfirm.vue

@@ -1,5 +1,5 @@
 <template>
-  <DisplayDialogCore variant="confirm" :styleClassPassthrough :lockViewport="true">
+  <DisplayDialogCore variant="confirm" :styleClassPassthrough :lockViewport="true" :dataDialogId>
     <template #dialogTitle>
       <slot name="dialogTitle">
         <p class="text-normal wght-700">Confirm</p>
@@ -21,6 +21,10 @@ const props = defineProps({
     type: Array as PropType<string[]>,
     default: () => [],
   },
+  dataDialogId: {
+    type: String,
+    required: true,
+  },
 });
 </script>
 

package/components/functional/display-dialog/variants/DisplayDialogScrollableContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <DisplayDialogCore variant="dialog" :styleClassPassthrough :lockViewport="true" :allowContentScroll>
+  <DisplayDialogCore variant="dialog" :styleClassPassthrough :lockViewport="true" :allowContentScroll :dataDialogId>
     <template #dialogTitle>
       <slot name="dialogTitle">
         <p class="text-normal wght-700">Confirm</p>
@@ -25,6 +25,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  dataDialogId: {
+    type: String,
+    required: true,
+  },
 });
 </script>
 

package/components/presentation/tabs/TabsCore.vue

@@ -6,7 +6,7 @@
           @click.prevent="navItemClicked($event)"
           @mouseover="navItemHovered($event)"
           :id="`tab-${key}-trigger`"
-          :data-tab-index="index"
+          :data-tab-index="key"
           data-nav-item
           role="tab"
           aria-selected="false"
@@ -32,6 +32,10 @@ const props = defineProps({
     type: String as PropType<string>,
     default: 'button',
   },
+  transitionDuration: {
+    type: Number as PropType<number>,
+    default: 200,
+  },
   navItems: {
     type: Array as PropType<ITabNav[]>,
     required: true,
@@ -59,7 +63,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 const tabsNavRef = ref<HTMLElement | null>(null);
 const tabsContentRefs = ref<HTMLElement[] | null>(null);
 
-const { initNavDecorators, navItemClicked, navItemHovered, resetHoverToActivePosition } = useTabs(tabsNavRef, tabsContentRefs);
+const { initNavDecorators, navItemClicked, navItemHovered, resetHoverToActivePosition } = useTabs(tabsNavRef, tabsContentRefs, props.transitionDuration);
 
 onMounted(() => {
   initNavDecorators();
@@ -140,7 +144,7 @@ onMounted(() => {
     .tabs-list-item {
       opacity: 0.7;
       position: relative;
-      transition: color 0.2s;
+      transition: color 100ms;
       z-index: 4;
 
       &:hover {
@@ -187,6 +191,10 @@ onMounted(() => {
       &[aria-selected='true'] {
         color: var(--_tabs-active-text);
       }
+
+      &.transitioning {
+        color: var(--_tabs-hovered-text);
+      }
     }
   }
 

package/composables/useDialogControls.ts

@@ -0,0 +1,23 @@
+export const useDialogControls = () => {
+  interface DialogConfig {
+    [key: string]: boolean;
+  }
+
+  const dialogsConfig = reactive<DialogConfig>({});
+
+  function initialiseDialogs(dialogIds: string[]) {
+    dialogIds.forEach((id) => {
+      dialogsConfig[id] = false;
+    });
+  }
+
+  const controlDialogs = (name: string, state: boolean) => {
+    dialogsConfig[name] = state;
+  };
+
+  return {
+    dialogsConfig,
+    controlDialogs,
+    initialiseDialogs,
+  };
+};

package/composables/useTabs.ts

@@ -1,6 +1,6 @@
 import { useResizeObserver } from '@vueuse/core';
 
-const useTabs = (tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLElement[] | null>, duration: number = 200) => {
+const useTabs = (tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLElement[] | null>, duration: number) => {
   const navItems = ref<HTMLElement[] | null>(null);
   const previousActiveTab = useState<HTMLElement | null>('previousActiveTab', () => null);
   const currentActiveTab = ref<HTMLElement>();
@@ -79,6 +79,37 @@ const useTabs = (tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLE
     setActiveTabContent();
   };
 
+  const handleTransitioningClass = (transitionDuration: number = 200) => {
+    if (previousHoveredTab.value && currentHoveredTab.value) {
+      const newTabPosition = previousHoveredTab.value.compareDocumentPosition(currentHoveredTab.value);
+      const navItemsArray = navItems.value || [];
+
+      const timeout = Math.floor(transitionDuration / Math.abs(navItemsArray.indexOf(currentHoveredTab.value) - navItemsArray.indexOf(previousHoveredTab.value)));
+
+      if (newTabPosition === 4) {
+        for (let i = navItemsArray.indexOf(previousHoveredTab.value); i < navItemsArray.indexOf(currentHoveredTab.value); i++) {
+          navItemsArray[i].classList.add('transitioning');
+          if (i >= navItemsArray.indexOf(previousHoveredTab.value) && i < navItemsArray.indexOf(currentHoveredTab.value)) {
+            setTimeout(() => {
+              navItemsArray[i].classList.remove('transitioning');
+              // }, timeout * (i - navItemsArray.indexOf(previousHoveredTab.value) - 1));
+            }, duration * 1.5);
+          }
+        }
+      } else {
+        for (let i = navItemsArray.indexOf(previousHoveredTab.value); i > navItemsArray.indexOf(currentHoveredTab.value); i--) {
+          navItemsArray[i].classList.add('transitioning');
+          if (i <= navItemsArray.indexOf(previousHoveredTab.value) && i > navItemsArray.indexOf(currentHoveredTab.value)) {
+            setTimeout(() => {
+              navItemsArray[i].classList.remove('transitioning');
+              // }, timeout * (i - navItemsArray.indexOf(previousHoveredTab.value) - 1));
+            }, duration * 1.5);
+          }
+        }
+      }
+    }
+  };
+
   const setFinalHoveredPositions = (resized: boolean = false) => {
     const setDuration = resized ? 0 : duration;
     const newTabWidth = currentHoveredTab.value && tabsNavRef.value ? currentHoveredTab.value.offsetWidth / tabsNavRef.value.offsetWidth : 0;
@@ -110,6 +141,8 @@ const useTabs = (tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLE
 
     tabsNavRef.value?.style.setProperty('--_width-active', String(transitionWidth / tabsNavRef.value.offsetWidth));
 
+    handleTransitioningClass(duration);
+
     setTimeout(() => {
       setFinalActivePositions();
     }, Math.floor(duration + 20));
@@ -130,6 +163,8 @@ const useTabs = (tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLE
 
     tabsNavRef.value?.style.setProperty('--_width-hovered', String(transitionWidth / tabsNavRef.value.offsetWidth));
 
+    handleTransitioningClass(duration);
+
     setTimeout(() => {
       setFinalHoveredPositions();
     }, Math.floor(duration + 20));
@@ -142,10 +177,6 @@ const useTabs = (tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLE
     });
   };
 
-  const animationRunning = (running: boolean) => {
-    console.log('animationRunning', running);
-  };
-
   useResizeObserver(tabsNavRef, () => {
     setFinalActivePositions(true);
     setFinalHoveredPositions(true);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",