@fastkit/vui 0.12.8 → 0.12.9

package/src/components/VButton/VButton.scss

@@ -1,146 +1,148 @@
 @use 'sass:math';
 
-.v-button {
-  // $base-height: 2.285714285714286em;
-  $base-height: 2.571428571428571em;
-
-  --padding: 1em;
-  --height: #{$base-height};
-  --icon-margin: 0.6em;
-
-  position: relative;
-  display: inline-flex;
-  flex: 0 0 auto;
-  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;
-  vertical-align: bottom;
-  cursor: pointer;
-  user-select: none;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: var(--control-field-radius);
-  outline: 0;
-  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), color 1ms;
-  appearance: none;
-
-  &--align-left {
-    justify-content: flex-start;
-  }
+@layer vui {
+  .v-button {
+    // $base-height: 2.285714285714286em;
+    $base-height: 2.571428571428571em;
+
+    --padding: 1em;
+    --height: #{$base-height};
+    --icon-margin: 0.6em;
+
+    position: relative;
+    display: inline-flex;
+    flex: 0 0 auto;
+    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;
+    vertical-align: bottom;
+    cursor: pointer;
+    user-select: none;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: var(--control-field-radius);
+    outline: 0;
+    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), color 1ms;
+    appearance: none;
+
+    &--align-left {
+      justify-content: flex-start;
+    }
 
-  &--align-right {
-    justify-content: flex-end;
-  }
+    &--align-right {
+      justify-content: flex-end;
+    }
 
-  &--plain {
-    color: inherit !important;
-    // color: inherit !important;
+    &--plain {
+      color: inherit !important;
+      // color: inherit !important;
 
-    &[disabled] {
-      opacity: 0.5;
+      &[disabled] {
+        opacity: 0.5;
+      }
     }
-  }
 
-  &--sm {
-    // height: 2em;
-    // height: calc(var(--root-em) * 1.5); // 24
-    font-size: calc(var(--root-em) * 0.75); // 12
-  }
+    &--sm {
+      // height: 2em;
+      // height: calc(var(--root-em) * 1.5); // 24
+      font-size: calc(var(--root-em) * 0.75); // 12
+    }
 
-  &--md {
-    // height: 2.285714285714286em;
-    // height: calc(var(--root-em) * 2); // 32
-    // font-size: calc(var(--root-em) * 0.875); // 14
-    font-size: calc(var(--root-em) * 0.875); // 14
-  }
+    &--md {
+      // height: 2.285714285714286em;
+      // height: calc(var(--root-em) * 2); // 32
+      // font-size: calc(var(--root-em) * 0.875); // 14
+      font-size: calc(var(--root-em) * 0.875); // 14
+    }
 
-  &--lg {
-    // height: calc(var(--root-em) * 2.875); // 46
-    font-size: calc(var(--root-em) * 1.375); // 20
-  }
+    &--lg {
+      // height: calc(var(--root-em) * 2.875); // 46
+      font-size: calc(var(--root-em) * 1.375); // 20
+    }
 
-  &--rounded {
-    --padding: 0;
+    &--rounded {
+      --padding: 0;
 
-    min-width: 0;
-    aspect-ratio: 1 / 1;
-    margin: calc(var(--root-em) * 0.125) calc(var(--root-em) * 0.125);
-    border-radius: 50%;
+      min-width: 0;
+      aspect-ratio: 1 / 1;
+      margin: calc(var(--root-em) * 0.125) calc(var(--root-em) * 0.125);
+      border-radius: 50%;
 
-    --height: auto;
-  }
+      --height: auto;
+    }
 
-  &--icon {
-    // aspect-ratio: 1 / 1;
-    min-width: #{$base-height * 0.75};
-    margin: calc(var(--root-em) * 0.125) calc(var(--root-em) * 0.125);
+    &--icon {
+      // aspect-ratio: 1 / 1;
+      min-width: #{$base-height * 0.75};
+      margin: calc(var(--root-em) * 0.125) calc(var(--root-em) * 0.125);
 
-    // --height: #{$base-height};
-    // --height: calc(var);
-    --height: #{$base-height * 0.75};
-    --padding: 0em;
-  }
+      // --height: #{$base-height};
+      // --height: calc(var);
+      --height: #{$base-height * 0.75};
+      --padding: 0em;
+    }
 
-  &::-moz-focus-inner {
-    border: 0;
-  }
+    &::-moz-focus-inner {
+      border: 0;
+    }
 
-  &[disabled] {
-    cursor: default;
-  }
+    &[disabled] {
+      cursor: default;
+    }
+
+    &--spacer {
+      &-left {
+        margin-left: auto;
+      }
 
-  &--spacer {
-    &-left {
-      margin-left: auto;
+      &-right {
+        margin-right: auto;
+      }
     }
 
-    &-right {
-      margin-right: auto;
+    &__content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      justify-self: stretch;
+      pointer-events: none;
     }
-  }
 
-  &__content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    justify-self: stretch;
-    pointer-events: none;
-  }
+    &--loading &__content {
+      // pointer-events: none;
+      opacity: 0;
+    }
 
-  &--loading &__content {
-    // pointer-events: none;
-    opacity: 0;
-  }
+    &__icon {
+      &--start {
+        margin-right: var(--icon-margin);
+      }
 
-  &__icon {
-    &--start {
-      margin-right: var(--icon-margin);
+      &--end {
+        margin-left: var(--icon-margin);
+      }
     }
 
-    &--end {
-      margin-left: var(--icon-margin);
+    &__loading {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 1;
+      transform: translate(-50%, -50%);
     }
   }
-
-  &__loading {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: 1;
-    transform: translate(-50%, -50%);
-  }
 }

package/src/components/VButton/VButton.tsx

@@ -8,12 +8,12 @@ import {
 } from 'vue';
 import { colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
 import {
-  navigationableInheritProps,
   ExtractPropInput,
   createPropsOptions,
   renderSlotOrEmpty,
   htmlAttributesPropOptions,
   VLink,
+  navigationableInheritProps,
 } from '@fastkit/vue-utils';
 import { useVui } from '../../injections';
 import { createControlProps, useControl } from '../../composables';
@@ -22,6 +22,11 @@ import { ControlSize } from '../../schemes/control';
 import { VIcon } from '../VIcon';
 import type { IconName } from '../VIcon';
 
+// @TODO Unable to resolve dts for `navigationableInheritProps`.
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { RouteLocationRaw } from 'vue-router';
+
 export type VButtonSpacer = 'left' | 'right';
 
 export type RawVButtonSpacer = boolean | VButtonSpacer;

package/src/components/VButton/VButtonGroup.scss

@@ -1,27 +1,29 @@
-.v-button-group {
-  display: inline-flex;
-  align-items: stretch;
+@layer vui {
+  .v-button-group {
+    display: inline-flex;
+    align-items: stretch;
 
-  &__item {
-    position: relative;
-    margin: 0;
+    &__item {
+      position: relative;
+      margin: 0;
 
-    &--has-left {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
+      &--has-left {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
 
-    &--has-right {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+      &--has-right {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
 
-    &:focus {
-      z-index: 1;
+      &:focus {
+        z-index: 1;
+      }
     }
-  }
 
-  // &--has-icon &__item {
+    // &--has-icon &__item {
 
-  // }
+    // }
+  }
 }

package/src/components/VCard/VCard.scss

@@ -1,54 +1,53 @@
 @use '../../styles/core.scss';
 
-.v-card {
-  @include core.remove-tap-highlight();
-
-  position: relative;
-  width: 100%;
-  padding: 0;
-  text-align: left;
-  touch-action: manipulation;
-  user-select: none;
-  border: 0;
-  outline: 0;
-  appearance: none;
-
-  &,
-  &:hover,
-  &:focus {
-    text-decoration: none;
-  }
-
-  &.clickable {
-    cursor: pointer;
-
-    &::before {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      content: '';
-      background: currentColor;
-      border-radius: inherit;
-      opacity: 0;
-      transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-    }
-
+@layer vui {
+  .v-card {
+    @include core.remove-tap-highlight();
+
+    position: relative;
+    width: 100%;
+    padding: 0;
+    text-align: left;
+    touch-action: manipulation;
+    user-select: none;
+    border: 0;
+    outline: 0;
+    appearance: none;
+
+    &,
     &:hover,
     &:focus {
+      text-decoration: none;
+    }
+
+    &.clickable {
+      cursor: pointer;
+
       &::before {
-        opacity: 0.125;
+        position: absolute;
+        inset: 0;
+        content: '';
+        background: currentColor;
+        border-radius: inherit;
+        opacity: 0;
+        transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+      }
+
+      &:hover,
+      &:focus {
+        &::before {
+          opacity: 0.125;
+        }
       }
     }
-  }
 
-  &[disabled] {
-    pointer-events: none;
+    &[disabled] {
+      pointer-events: none;
 
-    &::before {
-      content: none;
+      &::before {
+        content: none;
+      }
     }
+    // noop
   }
-  // noop
 }

package/src/components/VCard/VCard.tsx

@@ -3,6 +3,11 @@ import { defineComponent, computed } from 'vue';
 import { VPaper, createPaperProps } from '../VPaper';
 import { navigationableInheritProps, VLink } from '@fastkit/vue-utils';
 
+// @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 createCardProps() {
   return {
     ...createPaperProps(),

package/src/components/VCard/VCardActions.scss

@@ -1,10 +1,12 @@
-.v-card-actions {
-  display: flex;
-  align-items: center;
-  padding: var(--card-actions-padding);
+@layer vui {
+  .v-card-actions {
+    display: flex;
+    align-items: center;
+    padding: var(--card-actions-padding);
 
-  .v-btn {
-    margin-top: 0;
-    margin-bottom: 0;
+    .v-btn {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
   }
 }

package/src/components/VCard/VCardContent.scss

@@ -1,3 +1,5 @@
-.v-card-content {
-  padding: var(--card-content-padding);
+@layer vui {
+  .v-card-content {
+    padding: var(--card-content-padding);
+  }
 }

package/src/components/VCheckable/VCheckable.scss

@@ -1,103 +1,102 @@
 @use '../../styles/core.scss';
 
-.v-checkable {
-  --outer-size: var(--control-checkable-outer-size);
-  --icon-size: var(--control-checkable-icon-size);
-  --color: var(--control-checkable-base-color);
-
-  &--checked {
-    --color: var(--main-color);
-  }
-
-  display: inline-flex;
-  align-items: center;
-  padding-right: 1em;
-  cursor: pointer;
-  user-select: none;
-
-  &--invalid:not(#{&}--readonly) {
-    --color: var(--main-color);
-  }
-
-  &--disabled {
-    --color: var(--control-disabled-color);
-    // --color: var(--main-color);
-
-    pointer-events: none;
-    cursor: default;
-  }
-
-  &--readonly {
-    pointer-events: none;
-    cursor: default;
-  }
-
-  input {
-    @include core.hidden-input-element;
-  }
+@layer vui {
+  .v-checkable {
+    --outer-size: var(--control-checkable-outer-size);
+    --icon-size: var(--control-checkable-icon-size);
+    --color: var(--control-checkable-base-color);
+
+    &--checked {
+      --color: var(--main-color);
+    }
 
-  &__faux {
-    position: relative;
     display: inline-flex;
-    flex: 0 0 var(--outer-size);
     align-items: center;
-    justify-content: center;
-    width: var(--outer-size);
-    height: var(--outer-size);
-    margin: var(--control-checkable-faux-margin);
-    margin-left: 0;
-    color: var(--color);
+    padding-right: 1em;
     cursor: pointer;
+    user-select: none;
+
+    &--invalid:not(#{&}--readonly) {
+      --color: var(--main-color);
+    }
+
+    &--disabled {
+      --color: var(--control-disabled-color);
+      // --color: var(--main-color);
 
-    &__icon {
-      position: relative;
-      display: block;
-      width: var(--icon-size);
-      height: var(--icon-size);
       pointer-events: none;
-      transform: scale(var(--control-checkable-faux-scale));
+      cursor: default;
     }
 
-    &::before {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      display: block;
+    &--readonly {
       pointer-events: none;
-      content: '';
-      background: currentColor;
-      border-radius: 50%;
-      opacity: 0;
-      transition: opacity 0.2s;
+      cursor: default;
     }
 
-    &:hover::before {
-      opacity: 0.1;
+    input {
+      @include core.hidden-input-element;
     }
-  }
 
-  &--custom-icon &__faux {
-    flex-basis: auto;
-    width: auto;
+    &__faux {
+      position: relative;
+      display: inline-flex;
+      flex: 0 0 var(--outer-size);
+      align-items: center;
+      justify-content: center;
+      width: var(--outer-size);
+      height: var(--outer-size);
+      margin: var(--control-checkable-faux-margin);
+      margin-left: 0;
+      color: var(--color);
+      cursor: pointer;
+
+      &__icon {
+        position: relative;
+        display: block;
+        width: var(--icon-size);
+        height: var(--icon-size);
+        pointer-events: none;
+        transform: scale(var(--control-checkable-faux-scale));
+      }
+
+      &::before {
+        position: absolute;
+        inset: 0;
+        display: block;
+        pointer-events: none;
+        content: '';
+        background: currentColor;
+        border-radius: 50%;
+        opacity: 0;
+        transition: opacity 0.2s;
+      }
+
+      &:hover::before {
+        opacity: 0.1;
+      }
+    }
 
-    &::before {
-      content: none;
+    &--custom-icon &__faux {
+      flex-basis: auto;
+      width: auto;
+
+      &::before {
+        content: none;
+      }
     }
-  }
 
-  &:focus-within &__faux {
-    &::before {
-      opacity: 0.2;
+    &:focus-within &__faux {
+      &::before {
+        opacity: 0.2;
+      }
     }
-  }
 
-  &__label {
-    line-height: 1.5;
-  }
+    &__label {
+      line-height: 1.5;
+    }
 
-  &--disabled &__label {
-    color: var(--color);
+    &--disabled &__label {
+      color: var(--color);
+    }
   }
 }

package/src/components/VCheckable/VCheckable.tsx

@@ -1,6 +1,6 @@
 import './VCheckable.scss';
 import { computed, defineComponent } from 'vue';
-import { defineSlotsProps, renderSlotOrEmpty } from '@fastkit/vue-kit';
+import { defineSlotsProps, renderSlotOrEmpty } from '@fastkit/vue-utils';
 import { useVuiColorProvider } from '../../injections';
 
 export const VCheckable = defineComponent({