@fastkit/vui 1.0.0 → 1.1.1

package/src/components/VNavigation/VNavigation.tsx

@@ -56,7 +56,6 @@ export const VNavigation = defineComponent({
     }
 
     function onItemActivated(item: NavigationItemInput) {
-      // eslint-disable-next-line no-shadow
       itemsRef.value.forEach(({ key, ref }) => {
         if (key === item.key) return;
         ref.close();
@@ -72,7 +71,7 @@ export const VNavigation = defineComponent({
             renderNavigationItemInput(item, {
               class: 'v-navigation__item',
               startIconEmptySpace: startIconEmptySpace.value,
-              // eslint-disable-next-line no-shadow
+
               ref: (ref: any) => {
                 setItemRef(item, ref);
               },

package/src/components/VNavigation/VNavigationItem.tsx

@@ -16,7 +16,6 @@ import { ScopeName } from '@fastkit/color-scheme';
 // @TODO Unable to resolve dts for `actionableInheritProps`.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-// eslint-disable-next-line import/no-duplicates
 import { useRoute, RouteLocationRaw } from 'vue-router';
 import { useVui } from '../../injections';
 import { createListTileProps, listTileEmits, VListTile } from '../VListTile';
@@ -34,7 +33,6 @@ export function createNavigationItemProps() {
   };
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface NavigationItemInput
   extends ExtractPropInput<ReturnType<typeof createNavigationItemProps>> {
   key: string | number;
@@ -98,9 +96,8 @@ export const VNavigationItem = defineComponent({
     const to = computed(() => ctx.attrs.to);
 
     const match = computed<string[] | undefined>(() => {
-      // eslint-disable-next-line no-shadow
       const { match } = props;
-      // eslint-disable-next-line no-shadow
+
       const { to } = ctx.attrs;
       if (match) {
         return (Array.isArray(match) ? match : [match]).map(trimEndSlash);

package/src/components/VNumberField/VNumberField.tsx

@@ -44,7 +44,6 @@ export const VNumberField = defineComponent({
     });
 
     const inputmode = computed<TextFieldInput['inputmode']>(() => {
-      // eslint-disable-next-line no-shadow
       const { inputmode } = ctx.attrs as TextFieldInput;
       if (inputmode) return inputmode;
       return hasNumberMask.value ? 'decimal' : undefined;

package/src/components/VOption/VOption.scss

@@ -1,4 +1,4 @@
-@use '../../styles/core.scss';
+@use '../../styles/core';
 
 @layer vui {
   .v-option {

package/src/components/VOption/VOption.tsx

@@ -16,7 +16,6 @@ export const VOption = defineComponent({
     ...createControlProps(),
   },
   emits,
-  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const nodeControl = useFormSelectorItemControl(props, ctx, {
       nodeType: VUI_OPTION_SYMBOL,

package/src/components/VPagination/VPagination.scss

@@ -1,4 +1,4 @@
-@use '../../styles/core.scss';
+@use '../../styles/core';
 
 @layer vui {
   .v-pagination {
@@ -51,7 +51,7 @@
 
       &:hover,
       &:focus {
-        background: rgba(0, 0, 0, 0.1);
+        background: rgb(0, 0, 0, 0.1);
       }
 
       &--active {

package/src/components/VPagination/VPagination.tsx

@@ -245,7 +245,6 @@ export const VPagination = defineComponent({
     function genItem(source: ItemSource, index: number) {
       const { number, page, active, disabled } = createPageInfo(source);
       const type = number ? 'num' : source;
-      // eslint-disable-next-line no-shadow
       const classes = [
         'v-pagination__item',
         {
@@ -335,7 +334,7 @@ export const VPagination = defineComponent({
             const el = elRef.value;
             if (el) {
               const style = window.getComputedStyle(el, 'before');
-              // eslint-disable-next-line no-shadow
+
               const width = style.getPropertyValue('width');
               const margin = style.getPropertyValue('margin');
               const size = parseFloat(width) + parseFloat(margin) * 0.5;

package/src/components/VRadio/VRadio.scss

@@ -56,8 +56,8 @@
         width: 50%;
         height: 50%;
         background: currentColor;
-        transition: transform 0.2s;
         transform: translate(-50%, -50%) scale(0);
+        transition: transform 0.2s;
       }
     }
 

package/src/components/VRadio/VRadio.tsx

@@ -18,7 +18,6 @@ export const VRadio = defineComponent({
     ...createControlProps(),
   },
   emits,
-  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const nodeControl = useFormSelectorItemControl(props, ctx, {
       nodeType: VUI_RADIO_SYMBOL,

package/src/components/VSelect/VSelect.scss

@@ -1,4 +1,4 @@
-@use '../../styles/core.scss';
+@use '../../styles/core';
 
 @layer vui {
   .v-select {
@@ -57,8 +57,8 @@
         display: table-cell;
         overflow: hidden;
         text-overflow: ellipsis;
-        white-space: nowrap;
         vertical-align: middle;
+        white-space: nowrap;
       }
 
       .v-select--multiple & {

package/src/components/VSelect/VSelect.tsx

@@ -83,9 +83,8 @@ export const VSelect = defineComponent({
     }),
     closeOnNavigation: Boolean,
   },
-  slots,
   emits,
-  // eslint-disable-next-line no-shadow
+  slots,
   setup(props, ctx) {
     const menuRef: Ref<{ menu: MenuAPI } | null> = ref(null);
     const menuOpened = ref(false);
@@ -249,7 +248,6 @@ export const VSelect = defineComponent({
       );
 
       if (currentEl) {
-        // eslint-disable-next-line no-shadow
         const ev = new MouseEvent('click', {
           view: window,
           bubbles: true,

package/src/components/VSheetModal/VSheetModal.tsx

@@ -31,7 +31,6 @@ export const VSheetModal = defineComponent({
   inheritAttrs: false,
   props: sheetModalProps,
   emits,
-  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const stackControl = useStackControl(props, ctx, {
       stackType: SHEET_STACK_TYPE,

package/src/components/VSkeltonLoader/VSkeltonLoaderBone.scss

@@ -3,7 +3,7 @@
     position: relative;
     overflow: hidden;
     cursor: progress;
-    background: rgba(0, 0, 0, 0.12);
+    background: rgb(0, 0, 0, 0.12);
     border-radius: inherit;
 
     &::after {
@@ -16,9 +16,9 @@
       content: '';
       background: linear-gradient(
         90deg,
-        hsla(0deg, 0%, 100%, 0),
-        hsla(0deg, 0%, 100%, 0.3),
-        hsla(0deg, 0%, 100%, 0)
+        hsl(0deg, 0%, 100%, 0),
+        hsl(0deg, 0%, 100%, 0.3),
+        hsl(0deg, 0%, 100%, 0)
       );
       transform: translateX(-100%);
       animation: v-skelton-loader-bone-loading 1.5s infinite;

package/src/components/VSwitch/VSwitch.scss

@@ -92,7 +92,7 @@
 
       &__pin {
         &::after {
-          background-color: rgba(245, 245, 245, 1);
+          background-color: rgb(245, 245, 245, 1);
         }
       }
     }

package/src/components/VSwitch/VSwitch.tsx

@@ -18,7 +18,6 @@ export const VSwitch = defineComponent({
     ...createControlProps(),
   },
   emits,
-  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const nodeControl = useFormSelectorItemControl(props, ctx, {
       nodeType: VUI_SWITCH_SYMBOL,

package/src/components/VTabs/VTab.scss

@@ -1,4 +1,4 @@
-@use '../../styles/core.scss';
+@use '../../styles/core';
 
 @layer vui {
   .v-tab {
@@ -40,8 +40,8 @@
       content: '';
       background-color: var(--tab-content-focus-color);
       border-radius: inherit;
-      transition: all 0.25s;
       transform: scaleX(0);
+      transition: all 0.25s;
     }
 
     &__content {
@@ -66,7 +66,7 @@
     }
 
     &--active {
-      --tab-content-color: rgba(0, 0, 0, 0.87);
+      --tab-content-color: rgb(0, 0, 0, 0.87);
 
       pointer-events: none;
       background: var(--tabs-color);

package/src/components/VTabs/VTabs.tsx

@@ -124,7 +124,6 @@ export const VTabs = defineComponent({
           | undefined;
 
         if (router) {
-          // eslint-disable-next-line no-shadow
           const to = router(value);
           const route = vui.router.resolve(to);
           location = { to, route };
@@ -138,7 +137,6 @@ export const VTabs = defineComponent({
       });
     });
 
-    // eslint-disable-next-line no-shadow
     const setTabRef = (ref: VTabRef) => {
       tabRefs.value.push(ref);
     };
@@ -162,7 +160,7 @@ export const VTabs = defineComponent({
           if (!hit) return;
           const { location } = hit;
           if (!location) return;
-          // eslint-disable-next-line no-shadow
+
           const { to, route } = location;
           if (route.fullPath === vui.location.currentRoute.fullPath) return;
           vui.router[to.replace ? 'replace' : 'push'](to);
@@ -295,7 +293,6 @@ export const VTabs = defineComponent({
           label = itemSlot;
         }
 
-        // eslint-disable-next-line no-shadow
         const children =
           typeof label === 'function' ? label({ value, active, vui }) : label;
 

package/src/components/VTextField/VTextField.scss

@@ -1,4 +1,4 @@
-@use '../../styles/core.scss';
+@use '../../styles/core';
 
 @layer vui {
   .v-text-field {
@@ -13,17 +13,17 @@
         padding: 0;
         margin: 0;
         overflow: hidden;
+        text-overflow: ellipsis;
 
         // margin: 0 8px;
         font-size: inherit;
         line-height: inherit;
-        text-overflow: ellipsis;
         letter-spacing: inherit;
         white-space: nowrap;
+        outline: 0;
         background: transparent;
         border: 0;
         border-radius: 0;
-        outline: 0;
 
         &:-webkit-autofill {
           @include core.auto-fill-cancel;

package/src/components/VTextField/VTextField.tsx

@@ -51,7 +51,6 @@ export const VTextField = defineComponent({
   props: createTextFieldProps(),
   emits,
   slots,
-  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const inputControl = useTextInputNodeControl(props, ctx, {
       nodeType: VUI_TEXT_FIELD_SYMBOL,

package/src/components/VTextarea/VTextarea.scss

@@ -1,4 +1,4 @@
-@use '../../styles/core.scss';
+@use '../../styles/core';
 
 @layer vui {
   .v-textarea {
@@ -14,10 +14,10 @@
         line-height: inherit;
         letter-spacing: inherit;
         resize: none;
+        outline: 0;
         background: transparent;
         border: 0;
         border-radius: 0;
-        outline: 0;
 
         &:-webkit-autofill {
           @include core.auto-fill-cancel;

package/src/components/VTextarea/VTextarea.tsx

@@ -37,7 +37,6 @@ export const VTextarea = defineComponent({
     ...slots(),
   },
   emits,
-  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const vui = useVui();
     const inputControl = useTextareaNodeControl(props, ctx, {

package/src/components/VToolbar/VToolbarMenu.tsx

@@ -6,7 +6,6 @@ import { useVui } from '../../injections';
 // @TODO Unable to resolve dts for `navigationableInheritProps`.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-// eslint-disable-next-line import/order
 import { RouteLocationRaw } from 'vue-router';
 
 export type VToolbarMenuEdge = 'start' | 'end';

package/src/composables/form-selector.tsx

@@ -70,9 +70,8 @@ export function defineFormSelectorComponent(
       failedToLoadItemsMessage: {} as PropType<VNodeChildOrSlot>,
       ...slots(),
     },
-    slots,
     emits,
-    // eslint-disable-next-line no-shadow
+    slots,
     setup(props, ctx) {
       const selectorControl = useFormSelectorControl(props, ctx, {
         nodeType,

package/src/plugin.tsx

@@ -26,7 +26,6 @@ import {
 setDefaultActionableClassName('clickable');
 const scroller = getDocumentScroller();
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface VuiPluginStackOptions extends VueStackServiceOptions {}
 
 export interface VuiPluginOptions extends VuiServiceOptions {
@@ -80,7 +79,7 @@ export class VuiPlugin {
         options: {
           behavior: 'smooth',
         },
-        // eslint-disable-next-line no-shadow
+
         fn: (el, opts) => {
           if (window.getComputedStyle(el).scrollMargin) return;
           const duration = opts?.behavior === 'smooth' ? undefined : 0;

package/src/service.tsx

@@ -438,7 +438,6 @@ export class VuiService {
     const _onClick = BUILTIN_ACTION_HANDLERS[key];
     const action: VStackAction = {
       key,
-      // eslint-disable-next-line no-shadow
       content: ({ control, key }) => {
         const onClick = (ev: MouseEvent) => _onClick(control, ev);
 

package/src/styles/base.scss

@@ -1,10 +1,10 @@
-@use './core.scss';
+@use './core';
 
 html {
   text-size-adjust: 100%;
   font-size: var(--root-em);
   text-rendering: optimizeLegibility;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: rgb(0, 0, 0, 0);
 }
 
 body {

package/src/styles/core/functions.scss

@@ -1,11 +1,14 @@
+@use 'sass:string';
+
 @mixin hidden-input-element {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
+  white-space: nowrap;
+  /* stylelint-disable-next-line property-no-deprecated */
   clip: rect(0 0 0 0);
   clip-path: inset(100%);
-  white-space: nowrap;
 }
 
 @mixin auto-fill-cancel {
@@ -25,7 +28,8 @@
   box-shadow:
     var(--shadow-key-umbra-#{$z}),
     var(--shadow-key-penumbra-#{$z}),
-    var(--shadow-key-ambient-#{$z}) if($important, unquote('!important'), null);
+    var(--shadow-key-ambient-#{$z})
+      if($important, string.unquote('!important'), null);
 }
 
 @mixin elevation-transition(
@@ -37,7 +41,7 @@
 }
 
 @mixin remove-tap-highlight() {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: rgb(0, 0, 0, 0);
 
   &::-moz-focus-inner {
     border: 0;
@@ -53,10 +57,10 @@
     touch-action: manipulation;
     cursor: pointer;
     user-select: none;
+    outline: 0;
 
     // background-color: transparent;
     border-width: 0;
-    outline: 0;
   }
 
   &,

package/src/styles/core.scss

@@ -1,2 +1,2 @@
-@forward './core/functions.scss';
-@forward './core/typo.scss';
+@forward './core/functions';
+@forward './core/typo';

package/src/styles/elevation.scss

@@ -1,4 +1,4 @@
-@use './core.scss';
+@use './core';
 
 $z: 24;
 

package/src/styles/group.scss

@@ -9,8 +9,8 @@ code {
   padding: 0.2em 0.4em;
   font-size: 85%;
   font-weight: 400;
-  color: rgba(0, 0, 0, 0.87); // @TODO
-  background-color: rgba(0, 0, 0, 0.05); // @TODO
+  color: rgb(0, 0, 0, 0.87); // @TODO
+  background-color: rgb(0, 0, 0, 0.05); // @TODO
   border-radius: 3px; // @TODO
 }
 
@@ -39,8 +39,8 @@ td {
   height: var(--table-cell-height);
   padding: var(--table-cell-vertial-padding)
     var(--table-cell-horizontal-padding);
-  text-align: left;
   vertical-align: middle;
+  text-align: left;
   border: 0;
 }
 

package/src/styles/index.scss

@@ -12,11 +12,11 @@
 @layer vui {
   // @include meta.load-css('@fastkit/stylebase/normalize.css');
 
-  @include meta.load-css('./variables.scss');
-  @include meta.load-css('./base.scss');
-  @include meta.load-css('./typo.scss');
-  @include meta.load-css('./elevation.scss');
-  @include meta.load-css('./group.scss');
-  @include meta.load-css('./control.scss');
-  @include meta.load-css('./wysiwyg.scss');
+  @include meta.load-css('./variables');
+  @include meta.load-css('./base');
+  @include meta.load-css('./typo');
+  @include meta.load-css('./elevation');
+  @include meta.load-css('./group');
+  @include meta.load-css('./control');
+  @include meta.load-css('./wysiwyg');
 }

package/src/styles/typo.scss

@@ -1,4 +1,4 @@
-@use './core.scss';
+@use './core';
 
 @for $level from 1 through 6 {
   // h#{$level} {

package/src/styles/variables.scss

@@ -18,11 +18,12 @@
   // =============================================
   // typographies
   // =============================================
-  --typo-fallback-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, sans-serif;
+  --typo-fallback-font:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, sans-serif;
   --type-emoji-font: 'Apple Color Emoji', 'Segoe UI Emoji';
-  --typo-font: var(--typo-base-font), var(--typo-fallback-font),
-    var(--type-emoji-font);
+  --typo-font:
+    var(--typo-base-font), var(--typo-fallback-font), var(--type-emoji-font);
 
   // base
   --typo-base-size: 1rem;
@@ -160,30 +161,30 @@
   --control-field-rem-lg: 1.125rem; // 18
 
   // control defaults
-  --control-disabled-color: rgba(0, 0, 0, 0.38);
+  --control-disabled-color: rgb(0, 0, 0, 0.38);
   --control-horizontal-margin: 0.5em; // 16
   --control-field-radius: 2px;
-  --control-field-fill-color: rgba(0, 0, 0, 0.06);
-  --control-field-fill-hover-color: rgba(0, 0, 0, 0.09);
-  --control-field-outline-color: rgba(114, 106, 106, 0.23);
-  --control-field-outline-hover-color: rgba(0, 0, 0, 0.87);
-  --control-field-bottom-color: rgba(0, 0, 0, 0.42);
-  --control-field-bottom-hover-color: rgba(0, 0, 0, 0.87);
+  --control-field-fill-color: rgb(0, 0, 0, 0.06);
+  --control-field-fill-hover-color: rgb(0, 0, 0, 0.09);
+  --control-field-outline-color: rgb(114, 106, 106, 0.23);
+  --control-field-outline-hover-color: rgb(0, 0, 0, 0.87);
+  --control-field-bottom-color: rgb(0, 0, 0, 0.42);
+  --control-field-bottom-hover-color: rgb(0, 0, 0, 0.87);
   --control-field-height: 2.25em;
   --control-field-line-height: 1.4375em;
   --control-field-letter-spacing: 0.00938em;
-  --control-label-color: rgba(0, 0, 0, 0.6);
+  --control-label-color: rgb(0, 0, 0, 0.6);
   --control-label-font-weight: 500;
   --control-label-font-size: 0.75em; // 12
   --control-label-height: 1.4375em;
-  --control-message-color: rgba(0, 0, 0, 0.6);
+  --control-message-color: rgb(0, 0, 0, 0.6);
   --control-message-font-size: 0.75em; // 12
   --control-message-horizontal-margin: calc(var(--root-spacing) * 0.5);
   --control-checkable-outer-size: 2em; // 42
   --control-checkable-icon-size: 1em; // 20
   --control-checkable-faux-scale: 1.2;
   --control-checkable-faux-margin: 0.2em;
-  --control-checkable-base-color: rgba(0, 0, 0, 0.6);
+  --control-checkable-base-color: rgb(0, 0, 0, 0.6);
   --control-switch-width: 3.625em; // 58
   --control-switch-track-width: 2.125em; // 34
   --control-switch-track-height: 0.875em; // 14
@@ -199,9 +200,9 @@
   --wysiwyg-max-height-lg: 16em;
 
   // shadows
-  --shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2);
-  --shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14);
-  --shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);
+  --shadow-key-umbra-opacity: rgb(0, 0, 0, 0.2);
+  --shadow-key-penumbra-opacity: rgb(0, 0, 0, 0.14);
+  --shadow-key-ambient-opacity: rgb(0, 0, 0, 0.12);
 
   // shadows(umbra)
   --shadow-key-umbra-0: 0px 0px 0px 0px var(--shadow-key-umbra-opacity);
@@ -333,31 +334,35 @@
   // =============================================
   // snackbar
   // =============================================
-  --snackbar-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
-    0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
+  --snackbar-shadow:
+    0 3px 5px -1px rgb(0, 0, 0, 0.2), 0 6px 10px 0 rgb(0, 0, 0, 0.14),
+    0 1px 18px 0 rgb(0, 0, 0, 0.12);
 
   // =============================================
   // dialogs
   // =============================================
-  --dialog-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
-    0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  --dialog-shadow:
+    0 11px 15px -7px rgb(0, 0, 0, 0.2), 0 24px 38px 3px rgb(0, 0, 0, 0.14),
+    0 9px 46px 8px rgb(0, 0, 0, 0.12);
 
   // =============================================
   // menus
   // =============================================
-  --menu-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  --menu-shadow:
+    0 5px 5px -3px rgb(0, 0, 0, 0.2), 0 8px 10px 1px rgb(0, 0, 0, 0.14),
+    0 3px 14px 2px rgb(0, 0, 0, 0.12);
 
   // =============================================
   // tooltips
   // =============================================
-  --tooltip-background: rgba(35, 47, 52, 0.9);
+  --tooltip-background: rgb(35, 47, 52, 0.9);
   --tooltip-color: #fff;
   --tooltip-radius: 4px;
   --tooltip-padding: 5px 16px;
   --tooltip-font-size: calc(var(--root-em) * 0.875);
-  --tooltip-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-    0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  --tooltip-shadow:
+    0 3px 1px -2px rgb(0, 0, 0, 0.2), 0 2px 2px 0 rgb(0, 0, 0, 0.14),
+    0 1px 5px 0 rgb(0, 0, 0, 0.12);
 }
 
 :root,