@fastkit/vui 1.1.0 → 1.2.0

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',
         {
@@ -268,7 +267,7 @@ export const VPagination = defineComponent({
             });
           })();
 
-      const onClick = (ev: MouseEvent) => {
+      const onClick = (ev: PointerEvent) => {
         ev.preventDefault();
         if (page === undefined || active || disabled) return;
         setPage(page);
@@ -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,11 +248,10 @@ export const VSelect = defineComponent({
       );
 
       if (currentEl) {
-        // eslint-disable-next-line no-shadow
-        const ev = new MouseEvent('click', {
-          view: window,
+        const ev = new PointerEvent('click', {
           bubbles: true,
           cancelable: true,
+          view: window,
         });
         currentEl.dispatchEvent(ev);
         ev.preventDefault();
@@ -285,7 +283,7 @@ export const VSelect = defineComponent({
       closeMenu,
     });
 
-    const handleClickLabel = (ev: MouseEvent) => {
+    const handleClickLabel = (ev: PointerEvent) => {
       focus();
     };
 

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/VTab.tsx

@@ -28,7 +28,7 @@ export const VTab = defineComponent({
     icon: [String, Function] as PropType<RawIconProp>,
   },
   emits: {
-    click: (ev: MouseEvent) => true,
+    click: (ev: PointerEvent) => true,
   },
   setup(props, ctx) {
     const classesRef = computed(() => ({

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,
@@ -61,7 +60,7 @@ export const VTextField = defineComponent({
 
     const classes = computed(() => ['v-text-field', control.classes.value]);
 
-    const handleClickLabel = (ev: MouseEvent) => {
+    const handleClickLabel = (ev: PointerEvent) => {
       inputControl.focus();
     };
 

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,9 +438,8 @@ 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);
+        const onClick = (ev: PointerEvent) => _onClick(control, ev);
 
         const _attrs: any = {
           disabled: control.guardInProgress,

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

@@ -5,9 +5,10 @@
   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 {
@@ -40,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;
@@ -56,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

@@ -161,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
@@ -200,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);
@@ -335,34 +335,34 @@
   // 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);
+    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);
+    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);
+    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);
+    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,