@fastkit/vui 0.12.7 → 0.12.9

package/src/components/VFormControl/VFormControl.scss

@@ -1,101 +1,103 @@
-.v-form-control {
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-  margin: var(--control-horizontal-margin) 0;
-
-  // --control-label-font-size: calc(var(--control-field-font-size) * 0.75); // 12
-  --my-label-color: var(--control-label-color);
-  --my-message-color: var(--control-message-color);
+@layer vui {
+  .v-form-control {
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    margin: var(--control-horizontal-margin) 0;
 
-  &--invalid:not(#{&}--readonly) {
-    --my-label-color: var(--main-color);
-    --my-message-color: var(--main-color);
-  }
+    // --control-label-font-size: calc(var(--control-field-font-size) * 0.75); // 12
+    --my-label-color: var(--control-label-color);
+    --my-message-color: var(--control-message-color);
 
-  &--disabled {
-    --my-label-color: var(--control-disabled-color);
-    --my-message-color: var(--control-disabled-color);
-  }
+    &--invalid:not(#{&}--readonly) {
+      --my-label-color: var(--main-color);
+      --my-message-color: var(--main-color);
+    }
 
-  &__label {
-    display: flex;
-    align-items: center;
-    align-self: flex-start;
-    font-size: var(--control-label-font-size);
-    font-weight: var(--control-label-font-weight);
-    line-height: var(--control-label-height);
-    color: var(--my-label-color);
-    letter-spacing: 0.00938em;
+    &--disabled {
+      --my-label-color: var(--control-disabled-color);
+      --my-message-color: var(--control-disabled-color);
+    }
 
-    &__hinttip {
-      display: inline-flex;
+    &__label {
+      display: flex;
       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;
-      cursor: pointer;
-
-      // &:hover,
-      // &:focus {
-      //   text-decoration: underline;
-      // }
+      align-self: flex-start;
+      font-size: var(--control-label-font-size);
+      font-weight: var(--control-label-font-weight);
+      line-height: var(--control-label-height);
+      color: var(--my-label-color);
+      letter-spacing: 0.00938em;
 
-      &__icon {
-        position: relative;
-        display: flex;
+      &__hinttip {
+        display: inline-flex;
         align-items: center;
-        justify-content: center;
-        font-size: 120%;
-        text-decoration: none !important;
-      }
+        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;
+        cursor: pointer;
 
-      &:hover &__icon,
-      &:focus &__icon {
-        &::before {
-          opacity: 0.1;
+        // &:hover,
+        // &:focus {
+        //   text-decoration: underline;
+        // }
+
+        &__icon {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 120%;
+          text-decoration: none !important;
         }
-      }
 
-      &__hint {
-        font-size: calc(var(--root-em) * 0.75);
+        &:hover &__icon,
+        &:focus &__icon {
+          &::before {
+            opacity: 0.1;
+          }
+        }
+
+        &__hint {
+          font-size: calc(var(--root-em) * 0.75);
+        }
       }
     }
-  }
 
-  // &--disabled &__body {
-  //   user-select: none;
-  // }
+    // &--disabled &__body {
+    //   user-select: none;
+    // }
 
-  &__info {
-    display: flex;
-    padding-top: 3px;
-  }
+    &__info {
+      display: flex;
+      padding-top: 3px;
+    }
 
-  &__message,
-  &__appends {
-    margin: 0 var(--control-message-horizontal-margin);
-    font-size: var(--control-message-font-size);
-    line-height: 1.66;
-    color: var(--my-message-color);
-  }
+    &__message,
+    &__appends {
+      margin: 0 var(--control-message-horizontal-margin);
+      font-size: var(--control-message-font-size);
+      line-height: 1.66;
+      color: var(--my-message-color);
+    }
 
-  &__message {
-    flex: 1 0;
-    // margin: 0 var(--control-message-horizontal-margin);
-    // font-size: var(--control-message-font-size);
-    // line-height: 1.66;
-    // color: var(--my-message-color);
-  }
+    &__message {
+      flex: 1 0;
+      // margin: 0 var(--control-message-horizontal-margin);
+      // font-size: var(--control-message-font-size);
+      // line-height: 1.66;
+      // color: var(--my-message-color);
+    }
 
-  &__appends {
-    flex: 0 1;
-    margin-left: auto;
+    &__appends {
+      flex: 0 1;
+      margin-left: auto;
+    }
   }
 }

package/src/components/VFormControl/VFormControl.tsx

@@ -4,11 +4,10 @@ import {
   createFormControlSettings,
   useFormControl,
   FormControlSlots,
-  defineSlotsProps,
   FormControl,
-  renderSlotOrEmpty,
   RequiredChipSource,
-} from '@fastkit/vue-kit';
+} from '@fastkit/vue-form-control';
+import { defineSlotsProps, renderSlotOrEmpty } from '@fastkit/vue-utils';
 import { useVuiColorProvider, useVui } from '../../injections';
 import type { VuiService } from '../../service';
 import { VIcon } from '../VIcon';

package/src/components/VGrid/VGridContainer.scss

@@ -1,4 +1,6 @@
-.v-grid-container {
-  display: flex;
-  flex-wrap: wrap;
+@layer vui {
+  .v-grid-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
 }

package/src/components/VGrid/VGridItem.scss

@@ -1,3 +1,5 @@
-.v-grid-item {
-  display: block;
+@layer vui {
+  .v-grid-item {
+    display: block;
+  }
 }

package/src/components/VHero/VHero.scss

@@ -1,26 +1,28 @@
-.v-hero {
-  --hero-background-color: var(--main-color);
-  --hero-text-color: var(--text-color);
+@layer vui {
+  .v-hero {
+    --hero-background-color: var(--main-color);
+    --hero-text-color: var(--text-color);
 
-  display: flex;
-  align-items: center;
-  padding: 20px 30px;
-  margin: 0;
-  color: var(--hero-text-color);
-  background-color: var(--hero-background-color);
-
-  &__title {
-    flex: 1 1 100%;
+    display: flex;
+    align-items: center;
+    padding: 20px 30px;
     margin: 0;
-    font-size: 1.75rem;
-    font-weight: 300;
-    line-height: 1;
-    color: inherit;
-  }
+    color: var(--hero-text-color);
+    background-color: var(--hero-background-color);
+
+    &__title {
+      flex: 1 1 100%;
+      margin: 0;
+      font-size: 1.75rem;
+      font-weight: 300;
+      line-height: 1;
+      color: inherit;
+    }
 
-  &__adornment {
-    flex: 0 0 auto;
-    padding-left: 10px;
-    margin-left: auto;
+    &__adornment {
+      flex: 0 0 auto;
+      padding-left: 10px;
+      margin-left: auto;
+    }
   }
 }

package/src/components/VIcon/VIcon.scss

@@ -1,22 +1,24 @@
-.v-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.25em;
-  aspect-ratio: 1 / 1;
-  // -webkit-user-drag: none;
-  // pointer-events: none;
-  user-select: none;
-
-  &--clickable {
-    // pointer-events: auto;
-    cursor: pointer;
-  }
-
-  &__body {
+@layer vui {
+  .v-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    transition: transform 150ms linear;
+    width: 1.25em;
+    aspect-ratio: 1 / 1;
+    // -webkit-user-drag: none;
+    // pointer-events: none;
+    user-select: none;
+
+    &--clickable {
+      // pointer-events: auto;
+      cursor: pointer;
+    }
+
+    &__body {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform 150ms linear;
+    }
   }
 }

package/src/components/VListTile/VListTile.scss

@@ -1,73 +1,75 @@
-.v-list-tile {
-  --tile-background: var(--main-color, transparent);
-  --tile-active-background: var(--deep-color, transparent);
-  --tile-text-color: var(--text-color);
-  --tile-text-active-color: var(--text-color);
-  --tile-pin-color: transparent;
-  --paper-link-color: var(--tile-text-color);
-  --depth-padding: var(--list-tile-padding);
+@layer vui {
+  .v-list-tile {
+    --tile-background: var(--main-color, transparent);
+    --tile-active-background: var(--deep-color, transparent);
+    --tile-text-color: var(--text-color);
+    --tile-text-active-color: var(--text-color);
+    --tile-pin-color: transparent;
+    --paper-link-color: var(--tile-text-color);
+    --depth-padding: var(--list-tile-padding);
 
-  // &--has-color {
-  //   --tile-text-color: var(--nav-color);
-  //   --tile-text-active-color: var(--navActive-color, var(--nav-color));
-  // }
+    // &--has-color {
+    //   --tile-text-color: var(--nav-color);
+    //   --tile-text-active-color: var(--navActive-color, var(--nav-color));
+    // }
 
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: var(--list-tile-padding);
-  padding-left: var(--depth-padding);
-  color: var(--tile-text-color);
-  text-align: left;
-  text-decoration: none;
-  user-select: none;
-  background: var(--tile-background);
-  border: 0;
-  border-left: 3px solid var(--tile-pin-color);
-  border-radius: 0;
-  outline: 0;
-  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  appearance: none;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: var(--list-tile-padding);
+    padding-left: var(--depth-padding);
+    color: var(--tile-text-color) !important;
+    text-align: left;
+    text-decoration: none;
+    user-select: none;
+    background: var(--tile-background);
+    border: 0;
+    border-left: 3px solid var(--tile-pin-color);
+    border-radius: 0;
+    outline: 0;
+    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    appearance: none;
 
-  &--clickable {
-    cursor: pointer;
+    &--clickable {
+      cursor: pointer;
 
-    --tile-text-color: var(--nav-color);
-    --tile-text-active-color: var(--navActive-color, var(--nav-color));
+      --tile-text-color: var(--nav-color);
+      --tile-text-active-color: var(--navActive-color, var(--nav-color));
 
-    // --tile-text-active-color: var(--navActive-color, var(--tile-text-color));
+      // --tile-text-active-color: var(--navActive-color, var(--tile-text-color));
 
-    &:hover,
-    &:focus {
-      --tile-background: var(--tile-active-background);
-      --tile-text-color: var(--tile-text-active-color);
+      &:hover,
+      &:focus {
+        --tile-background: var(--tile-active-background);
+        --tile-text-color: var(--tile-text-active-color);
+      }
     }
-  }
 
-  &--active {
-    --tile-pin-color: var(--pin-color);
-    --tile-text-color: var(--tile-text-active-color);
-    --tile-background: var(--tile-active-background);
-  }
+    &--active {
+      --tile-pin-color: var(--pin-color);
+      --tile-text-color: var(--tile-text-active-color);
+      --tile-background: var(--tile-active-background);
+    }
 
-  // .v-list-tile--opened & {
-  //   --tile-pin-color: var(--pin-color);
-  // }
+    // .v-list-tile--opened & {
+    //   --tile-pin-color: var(--pin-color);
+    // }
 
-  &__body {
-    font-size: 0.8125rem;
-    // font-size: 0.75rem;
-    font-weight: 500;
-    line-height: 1.5;
-  }
+    &__body {
+      font-size: 0.8125rem;
+      // font-size: 0.75rem;
+      font-weight: 500;
+      line-height: 1.5;
+    }
 
-  &__icon {
-    min-width: 2em;
+    &__icon {
+      min-width: 2em;
 
-    &--end {
-      margin-left: auto;
-      text-align: right;
+      &--end {
+        margin-left: auto;
+        text-align: right;
+      }
     }
   }
 }

package/src/components/VListTile/VListTile.tsx

@@ -18,6 +18,11 @@ import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
 import { VLink } from '@fastkit/vue-utils';
 import { useVui } from '../../injections';
 
+// @TODO Unable to resolve dts for `navigationableInheritProps`.
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { RouteLocationRaw } from 'vue-router';
+
 export function createListTileProps() {
   const icon = rawIconProp();
   return {

package/src/components/VNavigation/VNavigation.scss

@@ -1,12 +1,14 @@
-.v-navigation {
-  // noop
-  &__caption {
-    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);
-    text-transform: uppercase;
+@layer vui {
+  .v-navigation {
+    // noop
+    &__caption {
+      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);
+      text-transform: uppercase;
+    }
   }
 }

package/src/components/VNavigation/VNavigationItem.scss

@@ -1,28 +1,30 @@
-.v-navigation-item {
-  &--opened {
-    --tile-background: var(--tile-active-background);
-    --tile-text-color: var(--tile-text-active-color);
-  }
-
-  &__expand {
-    transition: height 0.2s;
-
-    .v-navigation-item {
+@layer vui {
+  .v-navigation-item {
+    &--opened {
       --tile-background: var(--tile-active-background);
+      --tile-text-color: var(--tile-text-active-color);
     }
-  }
 
-  &--depth {
-    &-1 {
-      --depth-padding: calc(var(--list-tile-padding) * 2);
-    }
+    &__expand {
+      transition: height 0.2s;
 
-    &-2 {
-      --depth-padding: calc(var(--list-tile-padding) * 3);
+      .v-navigation-item {
+        --tile-background: var(--tile-active-background);
+      }
     }
 
-    &-3 {
-      --depth-padding: calc(var(--list-tile-padding) * 4);
+    &--depth {
+      &-1 {
+        --depth-padding: calc(var(--list-tile-padding) * 2);
+      }
+
+      &-2 {
+        --depth-padding: calc(var(--list-tile-padding) * 3);
+      }
+
+      &-3 {
+        --depth-padding: calc(var(--list-tile-padding) * 4);
+      }
     }
   }
 }

package/src/components/VNavigation/VNavigationItem.tsx

@@ -19,6 +19,11 @@ import { useVui } from '../../injections';
 import { useRoute } from 'vue-router';
 import { ScopeName } from '@fastkit/color-scheme';
 
+// @TODO Unable to resolve dts for `navigationableInheritProps`.
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { RouteLocationRaw } from 'vue-router';
+
 export function createNavigationItemProps() {
   return {
     ...createListTileProps(),