@qikdev/vue-ui 0.2.259 → 0.2.262

package/dist/style.css

@@ -915,12 +915,12 @@ tr.inactive[data-v-fbdf91c9]:after {
 .ux-spinner[xxl][data-v-594a0385] {
   font-size: 6em;
 }
-.basic-input-style[data-v-3eb810bd] {
+.basic-input-style[data-v-beb835e7] {
   color: inherit;
   background: color-mix(in lab, currentColor 4%, transparent);
   border: 1px solid color-mix(in lab, currentColor 18%, transparent);
 }
-.ux-btn[data-v-3eb810bd] {
+.ux-btn[data-v-beb835e7] {
   font-family: inherit;
   padding: 0.7em 1.3em;
   background: color-mix(in lab, currentColor 8%, transparent);
@@ -938,64 +938,67 @@ tr.inactive[data-v-fbdf91c9]:after {
   overflow: hidden;
   vertical-align: top;
 }
-.ux-btn[data-v-3eb810bd]:hover {
+.ux-btn[data-v-beb835e7]:hover {
   opacity: 0.9;
 }
-.ux-btn .ux-spinner[data-v-3eb810bd] {
+.ux-btn .ux-spinner[data-v-beb835e7] {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%) translateY(-50%);
 }
-.ux-btn[data-v-3eb810bd]:last-child {
+.ux-btn[data-v-beb835e7]:last-child {
   margin-right: 0;
 }
-.ux-btn.ux-btn-block[data-v-3eb810bd] {
+.ux-btn.ux-btn-block[data-v-beb835e7] {
   display: block;
   width: 100%;
   box-sizing: border-box;
   text-align: center;
 }
-.ux-btn-color-primary[data-v-3eb810bd] {
+.ux-btn.ux-btn-icon[data-v-beb835e7] {
+  letter-spacing: 0;
+}
+.ux-btn-color-primary[data-v-beb835e7] {
   background: var(--primary);
   color: #fff;
 }
-.ux-btn-color-default[data-v-3eb810bd] {
+.ux-btn-color-default[data-v-beb835e7] {
   background: color-mix(in lab, currentColor 8%, transparent);
   color: color-mix(in lab, currentColor 70%, transparent);
 }
-.ux-btn-color-default[data-v-3eb810bd]:hover {
+.ux-btn-color-default[data-v-beb835e7]:hover {
   background: color-mix(in lab, currentColor 15%, transparent);
 }
-.ux-btn-loading[data-v-3eb810bd] {
+.ux-btn-loading[data-v-beb835e7] {
   cursor: none;
   pointer-events: none;
 }
-.ux-btn-loading .ux-btn-text[data-v-3eb810bd] {
+.ux-btn-loading .ux-btn-text[data-v-beb835e7] {
   opacity: 0 !important;
 }
-.ux-btn-xxs[data-v-3eb810bd] {
+.ux-btn-xxs[data-v-beb835e7] {
   font-size: 0.6em;
 }
-.ux-btn-xs[data-v-3eb810bd] {
+.ux-btn-xs[data-v-beb835e7] {
   font-size: 0.7em;
 }
-.ux-btn-sm[data-v-3eb810bd] {
+.ux-btn-sm[data-v-beb835e7] {
   font-size: 0.8em;
 }
-.ux-btn-md[data-v-3eb810bd] {
+.ux-btn-md[data-v-beb835e7] {
   font-size: 1em;
 }
-.ux-btn-lg[data-v-3eb810bd] {
+.ux-btn-lg[data-v-beb835e7] {
   font-size: 1.2em;
 }
-.ux-btn-xl[data-v-3eb810bd] {
+.ux-btn-xl[data-v-beb835e7] {
   font-size: 1.3em;
 }
-.ux-btn-xxl[data-v-3eb810bd] {
+.ux-btn-xxl[data-v-beb835e7] {
   font-size: 1.5em;
 }
-.ux-btn-icon[data-v-3eb810bd] {
+.ux-btn-icon[data-v-beb835e7] {
   border-radius: 50%;
   position: relative;
   width: 2.4em;
@@ -1005,22 +1008,22 @@ tr.inactive[data-v-fbdf91c9]:after {
   text-align: center;
   line-height: 2.4em;
 }
-.ux-btn-icon .ux-button-text[data-v-3eb810bd] {
+.ux-btn-icon .ux-button-text[data-v-beb835e7] {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%) translateY(-50%);
 }
-.ux-btn-icon[data-v-3eb810bd] i {
+.ux-btn-icon[data-v-beb835e7] i {
   line-height: inherit !important;
 }
-.ux-btn-disabled[data-v-3eb810bd] {
+.ux-btn-disabled[data-v-beb835e7] {
   cursor: none;
   pointer-events: none;
   opacity: 0.3;
   filter: grayscale(100%);
 }
-.ux-btn-disabled .ux-btn-text[data-v-3eb810bd] {
+.ux-btn-disabled .ux-btn-text[data-v-beb835e7] {
   opacity: 0.3;
 }
 .basic-input-style[data-v-831dacfa] {
@@ -2143,43 +2146,43 @@ input[data-v-b6688859]:focus {
 .ux-text-input-single[data-v-b6688859] {
   width: 100%;
 }
-.basic-input-style[data-v-eea9057e] {
+.basic-input-style[data-v-a323c6c7] {
   color: inherit;
   background: color-mix(in lab, currentColor 4%, transparent);
   border: 1px solid color-mix(in lab, currentColor 18%, transparent);
 }
-.date-section[data-v-eea9057e] {
+.date-section[data-v-a323c6c7] {
   padding: 0.7em 0.5em;
   background: color-mix(in lab, currentColor 8%, transparent);
   min-width: 0.5em;
   text-align: center;
 }
-.date-section .ux-icon[data-v-eea9057e] {
+.date-section .ux-icon[data-v-a323c6c7] {
   opacity: 0.3;
   font-size: 0.6em;
   margin: 0;
   display: none;
 }
-.date-section.shrink[data-v-eea9057e] {
+.date-section.shrink[data-v-a323c6c7] {
   min-width: none;
   padding-left: 0;
   padding-right: 0;
 }
-.native-select[data-v-eea9057e]:focus-within {
+.native-select[data-v-a323c6c7]:focus-within {
   outline: 1px solid var(--primary);
 }
-.native-select:hover .date-section[data-v-eea9057e] {
+.native-select:hover .date-section[data-v-a323c6c7] {
   background: rgba(0, 0, 0, 0.07);
 }
-.spacer[data-v-eea9057e] {
+.spacer[data-v-a323c6c7] {
   flex: none;
   width: 1em;
 }
-.first .date-section[data-v-eea9057e] {
+.first .date-section[data-v-a323c6c7] {
   border-radius: 0.4em 0 0 0.4em;
   padding-left: 0.7em;
 }
-.last .date-section[data-v-eea9057e] {
+.last .date-section[data-v-a323c6c7] {
   border-radius: 0 0.4em 0.4em 0;
   padding-right: 0.7em;
 }
@@ -2219,19 +2222,19 @@ textarea[data-v-a44b8610]:focus {
 .ux-text-area-single[data-v-a44b8610] {
   width: 100%;
 }
-.basic-input-style[data-v-611ccfb6] {
+.basic-input-style[data-v-0a1f6c52] {
   color: inherit;
   background: color-mix(in lab, currentColor 4%, transparent);
   border: 1px solid color-mix(in lab, currentColor 18%, transparent);
 }
-.filter-condition[data-v-611ccfb6] {
+.filter-condition[data-v-0a1f6c52] {
   padding: 0.2em;
   border-radius: 0.3em;
   background: var(--bg1, #fff);
   border: 1px solid rgba(0, 0, 0, 0.1);
   margin: 0.2em 0.5em;
 }
-label[data-v-611ccfb6] {
+label[data-v-0a1f6c52] {
   display: block;
   text-transform: uppercase;
   font-weight: 700;
@@ -2622,58 +2625,58 @@ input.ux-color-input[data-v-91624210] {
 .files .file-item[data-v-d29a9855]:last-child {
   border-bottom: none;
 }
-.basic-input-style[data-v-1aa4716a] {
+.basic-input-style[data-v-f907b51b] {
   color: inherit;
   background: color-mix(in lab, currentColor 4%, transparent);
   border: 1px solid color-mix(in lab, currentColor 18%, transparent);
 }
-.ux-multi-group[data-v-1aa4716a],
-.ux-single-group[data-v-1aa4716a] {
+.ux-multi-group[data-v-f907b51b],
+.ux-single-group[data-v-f907b51b] {
   margin: 2.5em 0;
 }
-.ux-multi-group[data-v-1aa4716a]:first-child,
-.ux-single-group[data-v-1aa4716a]:first-child {
+.ux-multi-group[data-v-f907b51b]:first-child,
+.ux-single-group[data-v-f907b51b]:first-child {
   margin-top: 0;
 }
-.ux-multi-group[data-v-1aa4716a]:last-child,
-.ux-single-group[data-v-1aa4716a]:last-child {
+.ux-multi-group[data-v-f907b51b]:last-child,
+.ux-single-group[data-v-f907b51b]:last-child {
   margin-bottom: 0;
 }
-.ux-group-title[data-v-1aa4716a] {
+.ux-group-title[data-v-f907b51b] {
   font-size: 1.2em;
   margin-bottom: 1em;
   margin-top: 1em;
 }
-.arrows .ux-icon[data-v-1aa4716a] {
+.arrows .ux-icon[data-v-f907b51b] {
   opacity: 0.3;
 }
-[data-v-1aa4716a] .panel {
+[data-v-f907b51b] .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] {
@@ -2942,12 +2945,12 @@ input[data-v-c8feb6c2]:focus {
 a {
   cursor: pointer;
 }
-.basic-input-style[data-v-ad0f1d56] {
+.basic-input-style[data-v-eac978e1] {
   color: inherit;
   background: color-mix(in lab, currentColor 4%, transparent);
   border: 1px solid color-mix(in lab, currentColor 18%, transparent);
 }
-.teleport-results[data-v-ad0f1d56] {
+.teleport-results[data-v-eac978e1] {
   position: relative;
   margin-bottom: 0.5em;
 }
@@ -3207,41 +3210,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 +3261,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,7 +1,9 @@
 {
   "name": "@qikdev/vue-ui",
-  "version": "0.2.259",
-  "files": ["dist"],
+  "version": "0.2.262",
+  "files": [
+    "dist"
+  ],
   "main": "./dist/lib.es.js",
   "module": "./dist/lib.es.js",
   "exports": {
@@ -20,7 +22,11 @@
     "type": "git",
     "url": "git+https://gitlab.com/qikdevelopers/vue-ui.git"
   },
-  "keywords": ["qik", "vue", "ui"],
+  "keywords": [
+    "qik",
+    "vue",
+    "ui"
+  ],
   "author": "qik.dev",
   "license": "ISC",
   "scripts": {