@fastkit/vui 0.16.26 → 0.16.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.16.26",
+  "version": "0.16.28",
   "description": "A simple, extensible UI kit for Vue applications.",
   "keywords": [
     "fastkit",
@@ -44,31 +44,31 @@
     "src"
   ],
   "dependencies": {
-    "@fastkit/color-scheme": "1.0.8",
-    "@fastkit/dom": "0.1.1",
-    "@fastkit/color-scheme-gen": "0.13.8",
-    "@fastkit/helpers": "0.13.1",
-    "@fastkit/icon-font": "1.0.7",
-    "@fastkit/media-match": "1.0.7",
-    "@fastkit/media-match-gen": "0.13.8",
-    "@fastkit/rules": "0.13.2",
+    "@fastkit/color-scheme": "1.0.9",
+    "@fastkit/color-scheme-gen": "0.13.9",
+    "@fastkit/dom": "0.1.2",
+    "@fastkit/helpers": "0.13.2",
+    "@fastkit/icon-font": "1.0.8",
+    "@fastkit/media-match": "1.0.8",
+    "@fastkit/media-match-gen": "0.13.9",
+    "@fastkit/rules": "0.13.3",
     "@fastkit/stylebase": "0.13.0",
-    "@fastkit/tiny-logger": "0.13.1",
-    "@fastkit/vue-action": "0.2.3",
-    "@fastkit/vue-app-layout": "0.14.2",
-    "@fastkit/vue-body-scroll-lock": "0.1.3",
-    "@fastkit/vue-click-outside": "0.1.3",
-    "@fastkit/vue-color-scheme": "0.14.3",
-    "@fastkit/vue-form-control": "0.15.15",
-    "@fastkit/vue-keyboard": "0.1.1",
-    "@fastkit/vue-location": "0.1.3",
-    "@fastkit/vue-loading": "0.14.4",
-    "@fastkit/vue-media-match": "0.13.8",
-    "@fastkit/vue-resize": "0.1.3",
-    "@fastkit/vue-scroller": "0.14.2",
-    "@fastkit/vue-stack": "0.15.14",
-    "@fastkit/vue-transitions": "0.1.4",
-    "@fastkit/vue-utils": "0.14.1"
+    "@fastkit/tiny-logger": "0.13.2",
+    "@fastkit/vue-action": "0.2.4",
+    "@fastkit/vue-app-layout": "0.14.3",
+    "@fastkit/vue-body-scroll-lock": "0.1.4",
+    "@fastkit/vue-click-outside": "0.1.4",
+    "@fastkit/vue-color-scheme": "0.14.4",
+    "@fastkit/vue-form-control": "0.15.17",
+    "@fastkit/vue-keyboard": "0.1.2",
+    "@fastkit/vue-loading": "0.14.5",
+    "@fastkit/vue-location": "0.1.4",
+    "@fastkit/vue-media-match": "0.13.9",
+    "@fastkit/vue-resize": "0.1.4",
+    "@fastkit/vue-scroller": "0.14.3",
+    "@fastkit/vue-stack": "0.15.15",
+    "@fastkit/vue-transitions": "0.1.5",
+    "@fastkit/vue-utils": "0.14.2"
   },
   "peerDependencies": {
     "vue": "^3.3.0",

package/src/components/VAvatar/VAvatar.scss

@@ -2,7 +2,7 @@
 
 @layer vui {
   .v-avatar {
-    @include core.button-reset();
+    @include core.button-reset;
 
     --avatar-radius: 50%;
     --avatar-font-weight: var(--typo-medium-weight);

package/src/components/VBreadcrumbs/VBreadcrumbs.scss

@@ -31,6 +31,7 @@
 
     &__item--disabled &__link {
       color: inherit;
+
       // color: get-color(text-muted);
       pointer-events: none;
     }

package/src/components/VButton/VButton.scss

@@ -15,20 +15,24 @@
     align-items: center;
     justify-content: center;
     min-width: calc(var(--root-em) * 4);
+
     // height: calc(var(--root-em) * 2);
     height: var(--height);
+
     // padding: 0 var(--root-em);
     padding: 0 var(--padding);
+
     // margin: 0;
     margin: calc(var(--root-em) * 0.375) calc(var(--root-em) * 0.5);
     overflow: hidden;
     font: inherit;
+
     // font-size: calc(var(--root-em) * 0.875);
     font-weight: 500;
     line-height: 1;
     text-decoration: none;
     text-transform: uppercase;
-    letter-spacing: math.div(1.25, 14) * 1em; //1.25px;
+    letter-spacing: math.div(1.25, 14) * 1em; // 1.25px;
     vertical-align: bottom;
     cursor: pointer;
     user-select: none;
@@ -49,6 +53,7 @@
 
     &--plain {
       color: inherit !important;
+
       // color: inherit !important;
 
       &[disabled] {

package/src/components/VCard/VCard.scss

@@ -2,7 +2,7 @@
 
 @layer vui {
   .v-card {
-    @include core.remove-tap-highlight();
+    @include core.remove-tap-highlight;
 
     position: relative;
     width: 100%;
@@ -48,6 +48,7 @@
         content: none;
       }
     }
+
     // noop
   }
 }

package/src/components/VCheckable/VCheckable.scss

@@ -22,6 +22,7 @@
 
     &--disabled {
       --color: var(--control-disabled-color);
+
       // --color: var(--main-color);
 
       pointer-events: none;

package/src/components/VChip/VChip.scss

@@ -2,7 +2,7 @@
 
 @layer vui {
   .v-chip {
-    @include core.button-reset();
+    @include core.button-reset;
 
     $chip-sizes: xs, sm, md, lg, xl;
 

package/src/components/VControlField/VControlField.scss

@@ -34,6 +34,7 @@
     &--disabled {
       color: var(--control-disabled-color);
       pointer-events: none;
+
       // cursor: not-allowed !important;
       user-select: none;
     }
@@ -46,6 +47,7 @@
       left: 0;
       pointer-events: none;
       content: '';
+
       // transition: all 0.2s;
     }
 
@@ -89,8 +91,10 @@
       flex: 1 1 auto;
       align-items: stretch;
       align-self: stretch;
+
       // margin: 0 8px;
       margin: 0;
+
       // pointer-events: none;
 
       // color: #f00;
@@ -160,6 +164,7 @@
       &:focus-within {
         box-shadow: 0 0 1px var(--shadow-color),
           0 0 2px 2px var(--focusShadow-color);
+
         // border-color: var(--my-focused-color);
       }
     }

package/src/components/VDataTable/VDataTable.scss

@@ -7,11 +7,11 @@
       margin-left: calc(var(--card-content-padding) * -1);
     }
 
-    &__empty--message {
-      // @include container;
+    // &__empty--message {
+    //   @include container;
 
-      // color: get-color(text-muted);
-    }
+    //   color: get-color(text-muted);
+    // }
 
     &__controls {
       display: flex;
@@ -49,7 +49,7 @@
         flex: 1 1 100%;
         margin-left: auto;
 
-        @media screen and (min-width: 320px) {
+        @media screen and (width >= 320px) {
           flex: 0 0 50%;
           width: 50%;
         }
@@ -78,6 +78,7 @@
       &::before,
       &::after {
         display: block;
+
         // flex: 0 0 $view-padding-narrow;
         // width: $view-padding-narrow;
         height: 1px;
@@ -103,8 +104,10 @@
 
     &__table {
       width: 100%;
+
       // min-width: calc(100% - #{$view-padding-narrow * 2});
       margin: 0;
+
       // border-collapse: separate;
       background: var(--palette-background);
       border-radius: var(--control-field-radius);
@@ -148,11 +151,11 @@
         &[tabindex='0'] {
           cursor: pointer;
 
-          &:hover,
-          &:focus {
-            // background: var(--shadow-color);
-            // background: get-color(light);
-          }
+          // &:hover,
+          // &:focus {
+          //   background: var(--shadow-color);
+          //   background: get-color(light);
+          // }
         }
 
         &__tile {
@@ -178,10 +181,10 @@
         background: rgba(255, 255, 255, 0.85);
         backdrop-filter: blur(3px);
 
-        &--active[tabindex='0'] {
-          // color: get-color(invert-text);
-          // background: get-color(primary);
-        }
+        // &--active[tabindex='0'] {
+        //   color: get-color(invert-text);
+        //   background: get-color(primary);
+        // }
       }
 
       &__header &__cell--active &__sort-icon {
@@ -197,26 +200,26 @@
         border-bottom: none;
       }
 
-      &__item {
-        &:hover {
-          td {
-            // background: get-color(tocuh-0);
-          }
-        }
-
-        &--selected {
-          // stylelint-disable-next-line no-descending-specificity
-          td {
-            // background: get-color(light);
-          }
-
-          &:hover {
-            td {
-              // background: get-color(light);
-            }
-          }
-        }
-      }
+      // &__item {
+      //   &:hover {
+      //     td {
+      //       background: get-color(tocuh-0);
+      //     }
+      //   }
+
+      //   &--selected {
+      //     stylelint-disable-next-line no-descending-specificity
+      //     td {
+      //       background: get-color(light);
+      //     }
+
+      //     &:hover {
+      //       td {
+      //         background: get-color(light);
+      //       }
+      //     }
+      //   }
+      // }
     }
 
     // stylelint-disable-next-line no-descending-specificity

package/src/components/VFormControl/VFormControl.scss

@@ -34,10 +34,12 @@
         align-items: center;
         margin-top: -0.2em;
         margin-left: 0.6em;
+
         // font-size: calc(var(--root-em) * 0.5);
         font-size: 80%;
         line-height: 1;
         color: inherit;
+
         // color: var(--palette-muted);
         text-decoration: none;
         letter-spacing: normal;
@@ -89,6 +91,7 @@
 
     &__message {
       flex: 1 0;
+
       // margin: 0 var(--control-message-horizontal-margin);
       // font-size: var(--control-message-font-size);
       // line-height: 1.66;

package/src/components/VIcon/VIcon.scss

@@ -5,6 +5,7 @@
     justify-content: center;
     width: 1.25em;
     aspect-ratio: 1 / 1;
+
     // -webkit-user-drag: none;
     // pointer-events: none;
     user-select: none;

package/src/components/VListTile/VListTile.scss

@@ -58,6 +58,7 @@
 
     &__body {
       font-size: 0.8125rem;
+
       // font-size: 0.75rem;
       font-weight: 500;
       line-height: 1.5;

package/src/components/VNavigation/VNavigation.scss

@@ -5,6 +5,7 @@
       display: block;
       padding: calc(var(--root-em) * 0.625) calc(var(--root-em) * 1.5625);
       margin: 1em 0 0;
+
       // font-size: 0.6875rem;
       font-size: 0.75rem;
       color: var(--caption-color);

package/src/components/VOption/VOption.scss

@@ -2,12 +2,13 @@
 
 @layer vui {
   .v-option {
-    @include core.button-reset();
+    @include core.button-reset;
 
     position: relative;
     display: flex;
     width: 100%;
     padding: 0.75em 1em;
+
     // font-size: 0.875em;
 
     input {

package/src/components/VOptionGroup/VOptionGroup.scss

@@ -4,6 +4,7 @@
 
     &__label {
       padding: 1em;
+
       // padding: 0.875em 1em;
       font-size: 0.875em;
       color: var(--palette-caption);

package/src/components/VPagination/VPagination.tsx

@@ -181,7 +181,9 @@ export const VPagination = defineComponent({
           let result = beforeChange(newPage);
           if (isPromise(result)) result = await result;
           if (result === false) return;
-        } catch (e) {}
+        } catch (e) {
+          // noop
+        }
       }
       if (routeQuery) {
         const to = createRoutableLocationByPage(newPage, routeQuery);

package/src/components/VRadio/VRadio.scss

@@ -15,12 +15,14 @@
 
     &__faux {
       position: relative;
+
       // display: flex;
       // align-items: center;
       // justify-content: center;
       display: block;
       width: 100%;
       height: 100%;
+
       // background: var(--my-faux-bg-color);
       // border: solid 2px currentColor;
       // border-radius: 100%;
@@ -37,6 +39,7 @@
       &::before {
         inset: 0;
         border: solid 2px currentColor;
+
         // display: block;
         // width: 60%;
         // height: 60%;

package/src/components/VSelect/VSelect.scss

@@ -48,6 +48,7 @@
       display: table;
       width: 100%;
       table-layout: fixed;
+
       // display: flex;
       // align-items: center;
       // width: 100%;

package/src/components/VSwitch/VSwitch.scss

@@ -3,6 +3,7 @@
 @layer vui {
   .v-switch {
     --my-pin-color: var(--palette-background);
+
     // --my-faux-bg-color: transparent;
 
     &--selected {
@@ -39,6 +40,7 @@
         justify-content: center;
         width: var(--outer-size);
         height: var(--outer-size);
+
         // background: #f00;
         border-radius: 50%;
         transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,

package/src/components/VTabs/VTab.scss

@@ -11,6 +11,7 @@
     position: relative;
     z-index: 3;
     display: flex;
+
     // flex: 1 1 auto;
     align-items: center;
     justify-content: center;
@@ -18,6 +19,7 @@
     padding: 0 1.25em;
     font: inherit;
     font-size: var(--tabs-font-size);
+
     // color: inherit;
     white-space: nowrap;
     user-select: none;
@@ -27,6 +29,7 @@
       position: absolute;
       right: 0;
       bottom: 0;
+
       // top: 0;
       left: 0;
       z-index: 1;

package/src/components/VTabs/VTabs.tsx

@@ -190,7 +190,6 @@ export const VTabs = defineComponent({
         if (isPromise(result)) {
           result = await result;
         }
-        console.log(result);
         if (result === false) {
           return;
         }

package/src/components/VTextField/VTextField.scss

@@ -8,10 +8,12 @@
       &__element {
         width: 100%;
         min-width: 0;
+
         // width: calc(100% - 8px);
         padding: 0;
         margin: 0;
         overflow: hidden;
+
         // margin: 0 8px;
         font-size: inherit;
         line-height: inherit;
@@ -25,6 +27,7 @@
 
         &:-webkit-autofill {
           @include core.auto-fill-cancel;
+
           // color: inherit !important;
           // box-shadow: 0 0 0 1000px get-color(field) inset;
         }

package/src/components/VTextarea/VTextarea.scss

@@ -21,6 +21,7 @@
 
         &:-webkit-autofill {
           @include core.auto-fill-cancel;
+
           // color: inherit !important;
           // box-shadow: 0 0 0 1000px get-color(field) inset;
         }

package/src/components/VToolbar/VToolbarTitle.scss

@@ -5,10 +5,13 @@
     display: flex;
     flex-grow: 1;
     margin: 0;
+
     // font-size: var(--typo-h3-size);
     font-size: 1.25rem;
+
     // font-weight: var(--typo-h3-weight);
     font-weight: 400;
+
     // font-size: 16px;
     // font-weight: 500;
     line-height: 1;

package/src/components/VTooltip/VTooltip.scss

@@ -9,6 +9,7 @@
   }
 
   border-radius: var(--tooltip-radius);
+
   // opacity: var(--tooltip-opacity);
 
   &__inner {

package/src/styles/core/functions.scss

@@ -49,6 +49,7 @@
   touch-action: manipulation;
   cursor: pointer;
   user-select: none;
+
   // background-color: transparent;
   border-width: 0;
   outline: 0;

package/src/styles/elevation.scss

@@ -6,5 +6,6 @@ $z: 24;
   .elevation-#{$z} {
     @include core.elevation($z, true);
   }
+
   $z: $z - 1;
 }

package/src/styles/index.scss

@@ -1,5 +1,4 @@
 @use 'sass:meta';
-
 @layer vui-normalize, vui-color-scheme, vue-loading, vue-app-layout, vui;
 
 @layer vui-normalize {

package/src/styles/variables.scss

@@ -318,6 +318,7 @@
   // tabs
   --tabs-height: calc(var(--root-em) * 3);
   --tabs-bar-height: calc(var(--root-em) * 0.375);
+
   // --tabs-color: var(--main-color);
   --tabs-font-size: calc(var(--root-em) * 0.875);