srcdev-nuxt-forms 2.4.6 → 2.4.8

package/components/utils/colour-scheme-select/ColourSchemeSelect.vue

@@ -4,7 +4,7 @@
 
     <form class="colour-scheme-select-form mbe-20" ref="colourSchemeWrapper">
       <div class="select-scheme-marker-wrapper">
-        <div class="select-scheme-marker"></div>
+        <div class="select-scheme-marker" :class="[{ show: showMarker }]"></div>
       </div>
       <div class="select-scheme-group-wrapper">
         <div class="select-scheme-group">
@@ -59,6 +59,7 @@ const { currentColourScheme } = useColourScheme();
 
 const colourSchemeWrapper = ref<HTMLFormElement | null>(null);
 const colourSchemeInputElements = ref<HTMLDivElement[]>([]);
+const showMarker = ref(false);
 
 // console.log('colourSchemeInputElements');
 // console.log(colourSchemeInputElements);
@@ -82,8 +83,12 @@ const findIndexOfInputValueFromCurrentColourScheme = () => {
 const setColourSchemeAttr = () => {
   const index = findIndexOfInputValueFromCurrentColourScheme() ?? 0;
   const wrapperLeftPosition = colourSchemeWrapper.value?.getBoundingClientRect().left ?? 0;
+  const parentLeftPosition = colourSchemeWrapper.value?.parentElement?.getBoundingClientRect().left ?? 0;
+  const relativeLeftPosition = wrapperLeftPosition - parentLeftPosition;
+  // const relativeLeftPosition = 0;
+
   colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-position', index !== undefined ? index.toString() : '0');
-  colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-left-offset', colourSchemeInputElements.value?.[index - 1]?.offsetLeft - wrapperLeftPosition + 'px');
+  colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-left-offset', colourSchemeInputElements.value?.[index - 1]?.offsetLeft - relativeLeftPosition + 'px');
   colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-width', colourSchemeInputElements.value?.[index - 1]?.getBoundingClientRect().width + 'px');
 };
 
@@ -92,6 +97,9 @@ onMounted(() => {
 
   if (colourSchemeWrapper.value !== null) {
     setColourSchemeAttr();
+    setTimeout(() => {
+      showMarker.value = true;
+    }, 300);
   }
 });
 
@@ -133,7 +141,7 @@ watch(currentColourScheme, () => {
   --_scheme-icon-colour: white;
 
   .colour-scheme-select-form {
-    display: grid;
+    display: inline-grid;
     grid-template-areas: 'select-stack';
     width: fit-content;
 
@@ -141,6 +149,7 @@ watch(currentColourScheme, () => {
     border: var(--_form-border-width) solid var(--_form-border-colour);
     outline: var(--_form-outline-width) solid var(--_form-outline-colour);
     border-radius: var(--_form-border-radius);
+    padding: var(--_form-padding);
 
     .select-scheme-marker-wrapper {
       grid-area: select-stack;
@@ -171,7 +180,16 @@ watch(currentColourScheme, () => {
         border-radius: 50%;
 
         position: absolute;
-        left: calc(var(--_select-scheme-marker-left-offset) - var(--_form-border-width) - var(--_form-outline-width) - 1px);
+        /* left: calc(var(--_select-scheme-marker-left-offset) - var(--_form-border-width) - var(--_form-outline-width) - 1px); */
+        /* left: calc(var(--_select-scheme-marker-left-offset) - calc(var(--_select-scheme-group-border-width) * 1.5) - var(--_scheme-icon-font-size)); */
+        /* left: calc(var(--_select-scheme-marker-left-offset) - var(--_form-items-gap) - var(--_scheme-icon-font-size) + var(--_select-scheme-group-border-width) - 1px); */
+        left: calc(var(--_select-scheme-marker-left-offset) - 29px);
+
+        opacity: 0;
+
+        &.show {
+          opacity: 1;
+        }
       }
     }
 
@@ -181,7 +199,7 @@ watch(currentColourScheme, () => {
       grid-template-columns: repeat(3, 1fr);
       align-items: center;
       width: fit-content;
-      padding: var(--_form-padding);
+      /* padding: var(--_form-padding); */
       z-index: 2;
       gap: var(--_form-items-gap);
 

package/package.json

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