@qikdev/vue-ui 0.2.259 → 0.2.260

package/dist/style.css

@@ -2650,30 +2650,30 @@ input.ux-color-input[data-v-91624210] {
 [data-v-1aa4716a] .panel {
   margin-bottom: 0.5em;
 }
-.basic-input-style[data-v-4f57f0c4] {
+.basic-input-style[data-v-491bd3a3] {
   color: inherit;
   background: color-mix(in lab, currentColor 4%, transparent);
   border: 1px solid color-mix(in lab, currentColor 18%, transparent);
 }
-.buttons[data-v-4f57f0c4] {
+.buttons[data-v-491bd3a3] {
   display: flex;
   gap: 0.2em;
   flex-wrap: wrap;
 }
-.buttons .ux-btn[data-v-4f57f0c4] {
+.buttons .ux-btn[data-v-491bd3a3] {
   margin: 0;
 }
-.buttons .ux-btn .ux-icon[data-v-4f57f0c4] {
+.buttons .ux-btn .ux-icon[data-v-491bd3a3] {
   opacity: 0;
 }
-.buttons .ux-btn:hover .ux-icon[data-v-4f57f0c4] {
+.buttons .ux-btn:hover .ux-icon[data-v-491bd3a3] {
   opacity: 0.5;
 }
-.buttons .ux-btn.active[data-v-4f57f0c4] {
+.buttons .ux-btn.active[data-v-491bd3a3] {
   background: var(--primary);
   color: #fff;
 }
-.buttons .ux-btn.active .ux-icon[data-v-4f57f0c4] {
+.buttons .ux-btn.active .ux-icon[data-v-491bd3a3] {
   opacity: 1;
 }
 .basic-input-style[data-v-aae5394a] {
@@ -3207,41 +3207,41 @@ td[data-v-f5a130e8]:first-child {
 .ux-field.ux-field-error[data-v-17f3c6e4] > .ux-field-title {
   color: red;
 }
-.basic-input-style[data-v-e774caf1] {
+.basic-input-style[data-v-f0b9d2cd] {
   color: inherit;
   background: color-mix(in lab, currentColor 4%, transparent);
   border: 1px solid color-mix(in lab, currentColor 18%, transparent);
 }
-.ux-form-flex[data-v-e774caf1] {
+.ux-form-flex[data-v-f0b9d2cd] {
   display: flex;
   flex-wrap: wrap;
   flex: 1;
   gap: 2em;
 }
-.ux-form-flex .ux-field-flex[data-v-e774caf1] {
+.ux-form-flex .ux-field-flex[data-v-f0b9d2cd] {
   flex: 1;
 }
-.ux-form-flex .ux-field-flex.ux-field-widget-value[data-v-e774caf1] {
+.ux-form-flex .ux-field-flex.ux-field-widget-value[data-v-f0b9d2cd] {
   display: none;
 }
-.ux-form-flex .ux-field-clear[data-v-e774caf1] {
+.ux-form-flex .ux-field-clear[data-v-f0b9d2cd] {
   flex: none;
   width: 100%;
 }
-.basic-input-style[data-v-1f4433f5] {
+.basic-input-style[data-v-75856e6b] {
   color: inherit;
   background: color-mix(in lab, currentColor 4%, transparent);
   border: 1px solid color-mix(in lab, currentColor 18%, transparent);
 }
-.intent-submit[data-v-1f4433f5] {
+.intent-submit[data-v-75856e6b] {
   margin-top: 1em;
 }
-[tooltip][data-v-1f4433f5] {
+[tooltip][data-v-75856e6b] {
   position: relative;
   cursor: help;
   display: block;
 }
-[tooltip][data-v-1f4433f5]:after {
+[tooltip][data-v-75856e6b]:after {
   position: absolute;
   opacity: 0;
   pointer-events: none;
@@ -3258,30 +3258,83 @@ td[data-v-f5a130e8]:first-child {
   transform: translateY(-20px);
   transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
-[tooltip][data-v-1f4433f5]:hover:after {
+[tooltip][data-v-75856e6b]:hover:after {
   opacity: 1;
   transform: translateY(0);
   transition-duration: 0.3s;
 }
-.multistep-form-section[data-v-1f4433f5] {
-  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
+.multistep-form-wrapper[data-v-75856e6b] {
+  display: grid;
+  position: relative;
+}
+.multistep-form-section[data-v-75856e6b] {
+  transition:
+    opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
+    translate 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
   opacity: 0;
+  grid-area: 1/1/2/2;
 }
-.multistep-form-section.active[data-v-1f4433f5] {
-  opacity: 1;
-  translate: 0 0;
+.multistep-form-section[data-v-75856e6b] button {
+  transition:
+    opacity 0.7s cubic-bezier(0.25, 0.8, 0.25, 1),
+    translate 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.multistep-form-section[data-v-75856e6b] button:nth-child(1) {
+  transition-delay: 0.4s;
+}
+.multistep-form-section[data-v-75856e6b] button:nth-child(2) {
+  transition-delay: 0.6s;
+}
+.multistep-form-section[data-v-75856e6b] button:nth-child(3) {
+  transition-delay: 0.8s;
+}
+.multistep-form-section[data-v-75856e6b] button:nth-child(4) {
+  transition-delay: 1s;
+}
+.multistep-form-section[data-v-75856e6b] button:nth-child(5) {
+  transition-delay: 1.2s;
+}
+.multistep-form-section[data-v-75856e6b] button:nth-child(6) {
+  transition-delay: 1.4s;
+}
+.multistep-form-section[data-v-75856e6b] button:nth-child(7) {
+  transition-delay: 1.6s;
+}
+.multistep-form-section[data-v-75856e6b] button:nth-child(8) {
+  transition-delay: 1.8s;
 }
-.multistep-form-section.inactive[data-v-1f4433f5] {
+.multistep-form-section[data-v-75856e6b] button:nth-child(9) {
+  transition-delay: 2s;
+}
+.multistep-form-section[data-v-75856e6b] button:nth-child(10) {
+  transition-delay: 2.2s;
+}
+.multistep-form-section.inactive[data-v-75856e6b] {
   pointer-events: none;
   opacity: 0;
   position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
 }
-.multistep-form-section.inactive.past[data-v-1f4433f5] {
-  translate: 0 -100px;
+.multistep-form-section.inactive[data-v-75856e6b] button {
+  opacity: 0;
+  translate: 0 2em;
+}
+.multistep-form-section.active[data-v-75856e6b] {
+  opacity: 1;
+  translate: 0 0;
+  position: relative;
+}
+.multistep-form-section.active[data-v-75856e6b] button {
+  opacity: 1;
+  translate: 0 0;
+}
+.multistep-form-section.past[data-v-75856e6b] {
+  translate: -3em 0;
 }
-.multistep-form-section.inactive.future[data-v-1f4433f5] {
-  translate: 0 100px;
+.multistep-form-section.future[data-v-75856e6b] {
+  translate: 3em 0;
 }
 .basic-input-style[data-v-0fd69158] {
   color: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qikdev/vue-ui",
-  "version": "0.2.259",
+  "version": "0.2.260",
   "files": ["dist"],
   "main": "./dist/lib.es.js",
   "module": "./dist/lib.es.js",