@qikdev/vue-ui 0.2.272 → 0.2.276

package/dist/style.css

@@ -173,23 +173,23 @@
     border-top: 1px solid color-mix(in lab, currentColor 18%, transparent);
   }
 }
-.basic-input-style[data-v-dd52e89f] {
+.basic-input-style[data-v-1d7eba43] {
   color: inherit;
   background: color-mix(in lab, currentColor 4%, transparent);
   border: 1px solid color-mix(in lab, currentColor 18%, transparent);
 }
-.ux-tabset[data-v-dd52e89f] {
+.ux-tabset[data-v-1d7eba43] {
   flex: 1;
   overflow: hidden;
 }
-.ux-tabset.horizontal[data-v-dd52e89f] {
+.ux-tabset.horizontal[data-v-1d7eba43] {
   display: flex;
   flex-direction: column;
 }
-.ux-tabset.horizontal.block > .tabset-menu[data-v-dd52e89f] {
+.ux-tabset.horizontal.block > .tabset-menu[data-v-1d7eba43] {
   background: color-mix(in lab, currentColor 7%, transparent);
 }
-.ux-tabset.horizontal.block > .tabset-menu a[data-v-dd52e89f] {
+.ux-tabset.horizontal.block > .tabset-menu a[data-v-1d7eba43] {
   display: block;
   padding: 1em;
   cursor: pointer;
@@ -200,18 +200,18 @@
   flex: 1;
   align-items: center;
 }
-.ux-tabset.horizontal.block > .tabset-menu a[data-v-dd52e89f]:hover {
+.ux-tabset.horizontal.block > .tabset-menu a[data-v-1d7eba43]:hover {
   color: color-mix(in lab, currentColor 60%, transparent);
 }
-.ux-tabset.horizontal.block > .tabset-menu a.active[data-v-dd52e89f] {
+.ux-tabset.horizontal.block > .tabset-menu a.active[data-v-1d7eba43] {
   background: var(--bg1, #fff);
   color: var(--primary);
   border-top: 3px solid var(--primary);
 }
-.ux-tabset.horizontal.inline > .tabset-menu[data-v-dd52e89f] {
+.ux-tabset.horizontal.inline > .tabset-menu[data-v-1d7eba43] {
   overflow-x: auto;
 }
-.ux-tabset.horizontal.inline > .tabset-menu a[data-v-dd52e89f] {
+.ux-tabset.horizontal.inline > .tabset-menu a[data-v-1d7eba43] {
   display: block;
   padding: 1em 0;
   margin: 0 1.5em 0 0;
@@ -224,20 +224,20 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.ux-tabset.horizontal.inline > .tabset-menu a.active[data-v-dd52e89f] {
+.ux-tabset.horizontal.inline > .tabset-menu a.active[data-v-1d7eba43] {
   opacity: 1;
   border-bottom: 3px solid var(--primary);
 }
-.ux-tabset.vertical[data-v-dd52e89f] {
+.ux-tabset.vertical[data-v-1d7eba43] {
   display: flex;
   flex-direction: row;
 }
-.ux-tabset.vertical > .tabset-menu[data-v-dd52e89f] {
-  max-width: 200px;
+.ux-tabset.vertical > .tabset-menu[data-v-1d7eba43] {
+  max-width: 150px;
   min-width: 100px;
   background: color-mix(in lab, currentColor 7%, transparent);
 }
-.ux-tabset.vertical > .tabset-menu a[data-v-dd52e89f] {
+.ux-tabset.vertical > .tabset-menu a[data-v-1d7eba43] {
   display: block;
   padding: 1em;
   cursor: pointer;
@@ -245,10 +245,10 @@
   font-weight: 700;
   border-left: 3px solid transparent;
 }
-.ux-tabset.vertical > .tabset-menu a[data-v-dd52e89f]:hover {
+.ux-tabset.vertical > .tabset-menu a[data-v-1d7eba43]:hover {
   color: color-mix(in lab, currentColor 60%, transparent);
 }
-.ux-tabset.vertical > .tabset-menu a.active[data-v-dd52e89f] {
+.ux-tabset.vertical > .tabset-menu a.active[data-v-1d7eba43] {
   background: var(--bg1, #fff);
   color: var(--primary);
   border-left: 3px solid var(--primary);
@@ -578,22 +578,22 @@ td.failed .pill[data-v-bec5c4d1] {
     background: none;
   }
 }
-.basic-input-style[data-v-743aaea7] {
+.basic-input-style[data-v-206fbd94] {
   color: inherit;
   background: color-mix(in lab, currentColor 4%, transparent);
   border: 1px solid color-mix(in lab, currentColor 18%, transparent);
 }
-td[data-v-743aaea7] {
+td[data-v-206fbd94] {
   line-height: 1.4em !important;
 }
-.title[data-v-743aaea7] {
+.title[data-v-206fbd94] {
   font-weight: 700;
   font-size: 1.1em;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.subtitle[data-v-743aaea7] {
+.subtitle[data-v-206fbd94] {
   font-size: 0.9em;
   opacity: 0.5;
 }
@@ -1640,68 +1640,130 @@ input[data-v-4bea995b]:focus {
   bottom: 0;
   right: 0;
 }
-.basic-input-style[data-v-cf0f8f29] {
+.basic-input-style[data-v-df4b8b3a] {
   color: inherit;
   background: color-mix(in lab, currentColor 4%, transparent);
   border: 1px solid color-mix(in lab, currentColor 18%, transparent);
 }
-.content-item[data-v-cf0f8f29] {
+.content-item[data-v-df4b8b3a] {
   padding: 0.5em 0.8em;
   border-radius: 0.3em;
   cursor: pointer;
   margin-bottom: 1px;
 }
-.content-item .item-summary[data-v-cf0f8f29] {
+.content-item .item-summary[data-v-df4b8b3a] {
   opacity: 0.5;
   font-size: 0.9em;
 }
-.content-item .item-title[data-v-cf0f8f29] {
+.content-item .item-title[data-v-df4b8b3a] {
   font-weight: 500;
 }
 @media (prefers-color-scheme: light) {
-  .content-item[data-v-cf0f8f29] {
+  .content-item[data-v-df4b8b3a] {
     background: var(--bg1, #fff);
     border: 1px solid color-mix(in lab, currentColor 15%, transparent);
   }
 }
 @media (prefers-color-scheme: dark) {
-  .content-item[data-v-cf0f8f29] {
+  .content-item[data-v-df4b8b3a] {
     background: color-mix(in lab, #000 1%, transparent);
     border: 1px solid color-mix(in lab, currentColor 18%, transparent);
   }
 }
-.content-item[data-v-cf0f8f29]:last-child {
+.content-item[data-v-df4b8b3a]:last-child {
   margin-bottom: 0;
 }
-.content-item .text[data-v-cf0f8f29] {
+.content-item.deleted .text[data-v-df4b8b3a] {
+  color: var(--error, red);
+  text-decoration: line-through;
+}
+.content-item.inactive .text[data-v-df4b8b3a] {
+  opacity: 0.5;
+}
+.content-item .text[data-v-df4b8b3a] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: pre-line;
 }
-.content-item .icon-wrapper[data-v-cf0f8f29] {
+.content-item .icon-wrapper[data-v-df4b8b3a] {
   width: 25px;
   font-size: 20px;
   text-align: center;
 }
-.content-item .icon-wrapper.complete[data-v-cf0f8f29] {
+.content-item .icon-wrapper.complete[data-v-df4b8b3a] {
   color: var(--success, green);
 }
-.content-item .icon-wrapper.pending[data-v-cf0f8f29] {
+.content-item .icon-wrapper.pending[data-v-df4b8b3a] {
   color: var(--warning, orange);
 }
-.content-item .image-wrapper[data-v-cf0f8f29] {
+.content-item .image-wrapper[data-v-df4b8b3a] {
   width: 50px;
 }
-.content-item .image-wrapper.profile[data-v-cf0f8f29] {
+.content-item .image-wrapper.profile[data-v-df4b8b3a] {
   width: 40px;
   height: 40px;
   background: rgba(0, 0, 0, 0.1);
   border-radius: 100%;
 }
-.content-item[data-v-cf0f8f29]:hover {
+.content-item[data-v-df4b8b3a]:hover {
   cursor: pointer;
   background: color-mix(in lab, currentColor 2%, transparent);
 }
+.content-item .pill[data-v-df4b8b3a] {
+  border-radius: 3em;
+  padding: 0.3em 0.6em;
+  display: block;
+  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  font-size: 0.7em;
+  background: color-mix(in lab, currentColor 10%, transparent);
+  color: color-mix(in lab, currentColor, transparent);
+  border: 1px solid;
+}
+.content-item .pill.live[data-v-df4b8b3a],
+.content-item .pill.success[data-v-df4b8b3a],
+.content-item .pill.paid[data-v-df4b8b3a],
+.content-item .pill.active[data-v-df4b8b3a] {
+  background: #e0f3bf;
+  color: #569e2f;
+}
+@media (prefers-color-scheme: dark) {
+  .content-item .pill.live[data-v-df4b8b3a],
+  .content-item .pill.success[data-v-df4b8b3a],
+  .content-item .pill.paid[data-v-df4b8b3a],
+  .content-item .pill.active[data-v-df4b8b3a] {
+    background: none;
+  }
+}
+.content-item .pill.sandbox[data-v-df4b8b3a],
+.content-item .pill.pending[data-v-df4b8b3a],
+.content-item .pill.cancelling[data-v-df4b8b3a] {
+  background: #fbecbb;
+  color: #d17a0e;
+}
+@media (prefers-color-scheme: dark) {
+  .content-item .pill.sandbox[data-v-df4b8b3a],
+  .content-item .pill.pending[data-v-df4b8b3a],
+  .content-item .pill.cancelling[data-v-df4b8b3a] {
+    background: none;
+  }
+}
+.content-item .pill.error[data-v-df4b8b3a],
+.content-item .pill.unpaid[data-v-df4b8b3a],
+.content-item .pill.deleted[data-v-df4b8b3a],
+.content-item .pill.failed[data-v-df4b8b3a] {
+  background: #ffdddd;
+  color: #b14e4e;
+}
+@media (prefers-color-scheme: dark) {
+  .content-item .pill.error[data-v-df4b8b3a],
+  .content-item .pill.unpaid[data-v-df4b8b3a],
+  .content-item .pill.deleted[data-v-df4b8b3a],
+  .content-item .pill.failed[data-v-df4b8b3a] {
+    background: none;
+  }
+}
 .basic-input-style[data-v-38242855],
 input[data-v-38242855] {
   color: inherit;
@@ -1893,32 +1955,35 @@ input[data-v-38242855]:focus {
 .empty-text[data-v-70c07a8e] {
   opacity: 0.5;
 }
-.basic-input-style[data-v-0e820a8c] {
+.basic-input-style[data-v-13dbe8a6] {
   color: inherit;
   background: color-mix(in lab, currentColor 4%, transparent);
   border: 1px solid color-mix(in lab, currentColor 18%, transparent);
 }
-.circles[data-v-0e820a8c] {
+.invisible[data-v-13dbe8a6] {
+  display: none;
+}
+.circles[data-v-13dbe8a6] {
   display: inline-block;
   margin-right: 0.5em;
 }
-.circles[data-v-0e820a8c]:empty {
+.circles[data-v-13dbe8a6]:empty {
   display: none;
 }
-.circles[data-v-0e820a8c] .ux-circle {
+.circles[data-v-13dbe8a6] .ux-circle {
   margin-left: -0.35em;
 }
-.circles[data-v-0e820a8c] .ux-circle:first-child {
+.circles[data-v-13dbe8a6] .ux-circle:first-child {
   margin-left: 0;
 }
-[data-v-0e820a8c] .ux-btn-text {
+[data-v-13dbe8a6] .ux-btn-text {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   max-width: 150px;
   display: block;
 }
-.empty-text[data-v-0e820a8c] {
+.empty-text[data-v-13dbe8a6] {
   opacity: 0.5;
 }
 .basic-input-style[data-v-6361df61] {
@@ -3307,20 +3372,20 @@ td[data-v-f5a130e8]:first-child {
   flex: none;
   width: 100%;
 }
-.basic-input-style[data-v-091267f5] {
+.basic-input-style[data-v-478e89d4] {
   color: inherit;
   background: color-mix(in lab, currentColor 4%, transparent);
   border: 1px solid color-mix(in lab, currentColor 18%, transparent);
 }
-.intent-submit[data-v-091267f5] {
+.intent-submit[data-v-478e89d4] {
   margin-top: 1em;
 }
-[tooltip][data-v-091267f5] {
+[tooltip][data-v-478e89d4] {
   position: relative;
   cursor: help;
   display: block;
 }
-[tooltip][data-v-091267f5]:after {
+[tooltip][data-v-478e89d4]:after {
   position: absolute;
   opacity: 0;
   pointer-events: none;
@@ -3337,58 +3402,58 @@ 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-091267f5]:hover:after {
+[tooltip][data-v-478e89d4]:hover:after {
   opacity: 1;
   transform: translateY(0);
   transition-duration: 0.3s;
 }
-.multistep-form-wrapper[data-v-091267f5] {
+.multistep-form-wrapper[data-v-478e89d4] {
   display: grid;
   position: relative;
 }
-.multistep-form-section[data-v-091267f5] {
+.multistep-form-section[data-v-478e89d4] {
   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[data-v-091267f5] button {
+.multistep-form-section[data-v-478e89d4] 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-091267f5] button:nth-child(1) {
+.multistep-form-section[data-v-478e89d4] button:nth-child(1) {
   transition-delay: 0.4s;
 }
-.multistep-form-section[data-v-091267f5] button:nth-child(2) {
+.multistep-form-section[data-v-478e89d4] button:nth-child(2) {
   transition-delay: 0.6s;
 }
-.multistep-form-section[data-v-091267f5] button:nth-child(3) {
+.multistep-form-section[data-v-478e89d4] button:nth-child(3) {
   transition-delay: 0.8s;
 }
-.multistep-form-section[data-v-091267f5] button:nth-child(4) {
+.multistep-form-section[data-v-478e89d4] button:nth-child(4) {
   transition-delay: 1s;
 }
-.multistep-form-section[data-v-091267f5] button:nth-child(5) {
+.multistep-form-section[data-v-478e89d4] button:nth-child(5) {
   transition-delay: 1.2s;
 }
-.multistep-form-section[data-v-091267f5] button:nth-child(6) {
+.multistep-form-section[data-v-478e89d4] button:nth-child(6) {
   transition-delay: 1.4s;
 }
-.multistep-form-section[data-v-091267f5] button:nth-child(7) {
+.multistep-form-section[data-v-478e89d4] button:nth-child(7) {
   transition-delay: 1.6s;
 }
-.multistep-form-section[data-v-091267f5] button:nth-child(8) {
+.multistep-form-section[data-v-478e89d4] button:nth-child(8) {
   transition-delay: 1.8s;
 }
-.multistep-form-section[data-v-091267f5] button:nth-child(9) {
+.multistep-form-section[data-v-478e89d4] button:nth-child(9) {
   transition-delay: 2s;
 }
-.multistep-form-section[data-v-091267f5] button:nth-child(10) {
+.multistep-form-section[data-v-478e89d4] button:nth-child(10) {
   transition-delay: 2.2s;
 }
-.multistep-form-section.inactive[data-v-091267f5] {
+.multistep-form-section.inactive[data-v-478e89d4] {
   pointer-events: none;
   opacity: 0;
   position: absolute;
@@ -3396,23 +3461,23 @@ td[data-v-f5a130e8]:first-child {
   left: 0;
   width: 100%;
 }
-.multistep-form-section.inactive[data-v-091267f5] button {
+.multistep-form-section.inactive[data-v-478e89d4] button {
   opacity: 0;
   translate: 0 2em;
 }
-.multistep-form-section.active[data-v-091267f5] {
+.multistep-form-section.active[data-v-478e89d4] {
   opacity: 1;
   translate: 0 0;
   position: relative;
 }
-.multistep-form-section.active[data-v-091267f5] button {
+.multistep-form-section.active[data-v-478e89d4] button {
   opacity: 1;
   translate: 0 0;
 }
-.multistep-form-section.past[data-v-091267f5] {
+.multistep-form-section.past[data-v-478e89d4] {
   translate: -3em 0;
 }
-.multistep-form-section.future[data-v-091267f5] {
+.multistep-form-section.future[data-v-478e89d4] {
   translate: 3em 0;
 }
 .basic-input-style[data-v-0fd69158] {
@@ -3514,18 +3579,18 @@ td[data-v-f5a130e8]:first-child {
   opacity: 0.5;
   font-size: 0.8em;
 }
-.basic-input-style[data-v-10d1c729] {
+.basic-input-style[data-v-665d3903] {
   color: inherit;
   background: color-mix(in lab, currentColor 4%, transparent);
   border: 1px solid color-mix(in lab, currentColor 18%, transparent);
 }
-.content-browser[data-v-10d1c729] {
+.content-browser[data-v-665d3903] {
   position: relative;
 }
-.loading[data-v-10d1c729] {
+.loading[data-v-665d3903] {
   opacity: 0.5;
 }
-.filter-column[data-v-10d1c729] {
+.filter-column[data-v-665d3903] {
   padding: 1em;
   background: color-mix(in lab, #000 1%, transparent);
   border-left: 1px solid color-mix(in lab, currentColor 18%, transparent);
@@ -3534,27 +3599,27 @@ td[data-v-f5a130e8]:first-child {
   flex: none;
   font-size: clamp(13px, 0.8em, 17px);
 }
-.large-icon[data-v-10d1c729] {
+.large-icon[data-v-665d3903] {
   font-size: 6em;
   margin-bottom: 1rem;
   opacity: 0.5;
 }
-.column-panel[data-v-10d1c729] {
+.column-panel[data-v-665d3903] {
   background: #fff;
   font-size: 0.9em;
 }
-.empty[data-v-10d1c729] {
+.empty[data-v-665d3903] {
   background: rgba(0, 0, 0, 0.05);
   text-align: center;
   white-space: pre-line;
   align-items: center;
   justify-content: center;
 }
-.empty .panel[data-v-10d1c729] {
+.empty .panel[data-v-665d3903] {
   max-width: 400px;
   background: var(--bg1, #fff);
 }
-.footer[data-v-10d1c729] {
+.footer[data-v-665d3903] {
   padding: 0.5em 1em;
   border-top: 1px solid color-mix(in lab, currentColor 18%, transparent);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qikdev/vue-ui",
-  "version": "0.2.272",
+  "version": "0.2.276",
   "files": [
     "dist"
   ],