@fastkit/vui 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A simple, extensible UI kit for Vue applications.",
   "keywords": [
     "fastkit",
@@ -45,38 +45,38 @@
   ],
   "dependencies": {
     "@fastkit/color-scheme": "^2.1.0",
-    "@fastkit/color-scheme-gen": "^1.1.0",
-    "@fastkit/dom": "^0.3.0",
     "@fastkit/helpers": "^0.15.0",
+    "@fastkit/icon-font": "^2.1.0",
+    "@fastkit/color-scheme-gen": "^1.1.0",
     "@fastkit/media-match": "^2.1.0",
-    "@fastkit/media-match-gen": "^1.1.0",
+    "@fastkit/dom": "^0.3.0",
+    "@fastkit/vue-app-layout": "^0.18.0",
     "@fastkit/tiny-logger": "^0.15.0",
+    "@fastkit/vue-action": "^0.5.0",
+    "@fastkit/vue-disabled-reason": "^0.2.0",
+    "@fastkit/vue-body-scroll-lock": "^0.4.0",
+    "@fastkit/vue-click-outside": "^0.4.0",
+    "@fastkit/vue-color-scheme": "^0.17.0",
+    "@fastkit/vue-keyboard": "^0.4.0",
+    "@fastkit/vue-location": "^0.6.0",
+    "@fastkit/vue-loading": "^0.17.0",
+    "@fastkit/vue-resize": "^0.4.0",
+    "@fastkit/vue-stack": "^0.19.0",
+    "@fastkit/vue-form-control": "^0.23.0",
+    "@fastkit/vue-media-match": "^0.16.0",
+    "@fastkit/vue-scroller": "^0.17.0",
+    "@fastkit/media-match-gen": "^1.1.0",
     "@fastkit/rules": "^0.15.0",
-    "@fastkit/vue-body-scroll-lock": "^0.3.0",
-    "@fastkit/vue-app-layout": "^0.17.0",
-    "@fastkit/vue-action": "^0.4.0",
-    "@fastkit/vue-color-scheme": "^0.16.0",
-    "@fastkit/vue-click-outside": "^0.3.0",
-    "@fastkit/vue-form-control": "^0.22.0",
-    "@fastkit/vue-loading": "^0.16.0",
-    "@fastkit/vue-keyboard": "^0.3.0",
-    "@fastkit/vue-disabled-reason": "^0.1.0",
-    "@fastkit/vue-location": "^0.5.0",
-    "@fastkit/vue-resize": "^0.3.0",
-    "@fastkit/vue-media-match": "^0.15.0",
-    "@fastkit/vue-scroller": "^0.16.0",
-    "@fastkit/vue-stack": "^0.18.0",
-    "@fastkit/icon-font": "^2.1.0",
     "@fastkit/stylebase": "^0.13.1",
-    "@fastkit/vue-transitions": "^0.3.0",
-    "@fastkit/vue-utils": "^0.16.0"
+    "@fastkit/vue-transitions": "^0.4.0",
+    "@fastkit/vue-utils": "^0.17.0"
   },
   "devDependencies": {
-    "vue": "^3.5.21",
+    "vue": "^3.5.22",
     "vue-router": "^4.5.1"
   },
   "peerDependencies": {
-    "vue": "^3.4.0",
+    "vue": "^3.5.0",
     "vue-router": "^4.4.0"
   },
   "buildOptions": {
@@ -93,8 +93,8 @@
   "scripts": {
     "build": "plugboy build",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
-    "eslint": "eslint . --ext ts,tsx,js,vue,html,yaml",
-    "eslint:fix": "eslint . --ext ts,tsx,js,vue,html,yaml --fix",
+    "eslint": "eslint .",
+    "eslint:fix": "eslint . --fix",
     "format": "pnpm run \"/^(eslint:fix|stylelint:fix)$/\"",
     "lint": "pnpm run \"/^(eslint|stylelint)$/\"",
     "stub": "plugboy stub",

package/src/components/VAvatar/VAvatar.scss

@@ -1,4 +1,4 @@
-@use '../../styles/core.scss';
+@use '../../styles/core';
 
 @layer vui {
   .v-avatar {
@@ -22,15 +22,15 @@
       font-size: var(--avatar-font-size);
       font-weight: var(--avatar-font-weight);
       line-height: 1;
-      text-align: center;
       vertical-align: bottom;
+      text-align: center;
       cursor: default;
       border-style: solid;
       border-width: 1px;
       border-radius: var(--avatar-radius);
 
-      --shadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
-      --focusShadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
+      --shadow-color: rgb(0, 0, 0, 0) !important; // @TODO layer supports
+      --focusShadow-color: rgb(0, 0, 0, 0) !important; // @TODO layer supports
     }
 
     &--clickable {

package/src/components/VAvatar/VAvatar.tsx

@@ -8,7 +8,6 @@ import { VBusyImage } from '../VBusyImage';
 // @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 const AVATAR_SIZES = ['sm', 'md', 'lg'] as const;

package/src/components/VBreadcrumbs/VBreadcrumbs.scss

@@ -24,9 +24,9 @@
     &__link {
       display: inline-flex;
       align-items: center;
-      text-decoration: none;
-      white-space: nowrap;
       vertical-align: middle;
+      white-space: nowrap;
+      text-decoration: none;
     }
 
     &__item--disabled &__link {

package/src/components/VBreadcrumbs/VBreadcrumbs.tsx

@@ -62,7 +62,7 @@ export const VBreadcrumbs = defineComponent({
 
     return () => {
       if (lengthRef.value < 1) return;
-      // eslint-disable-next-line no-shadow
+
       let dividerSlot: (vui: VuiService) => VNodeChild;
       const propDivider = props.divider;
       if (propDivider) {

package/src/components/VBusyImage/VBusyImage.scss

@@ -20,7 +20,7 @@
       inset: 0;
       display: block;
       content: '';
-      background: rgba(0, 0, 0, 0.1);
+      background: rgb(0, 0, 0, 0.1);
       animation: v-tiny-image-blink normal 1.5s infinite ease-in-out;
     }
 

package/src/components/VButton/VButton.scss

@@ -30,17 +30,17 @@
     // font-size: calc(var(--root-em) * 0.875);
     font-weight: 500;
     line-height: 1;
-    text-decoration: none;
+    vertical-align: bottom;
     text-transform: uppercase;
     letter-spacing: math.div(1.25, 14) * 1em; // 1.25px;
-    vertical-align: bottom;
+    text-decoration: none;
     appearance: none;
     cursor: pointer;
     user-select: none;
+    outline: 0;
     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;

package/src/components/VButton/VButton.tsx

@@ -23,7 +23,6 @@ import type { IconName } from '../VIcon';
 // @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 VButtonSpacer = 'left' | 'right';

package/src/components/VCard/VCard.scss

@@ -1,4 +1,4 @@
-@use '../../styles/core.scss';
+@use '../../styles/core';
 
 @layer vui {
   .v-card {
@@ -13,8 +13,8 @@
       appearance: none;
       touch-action: manipulation;
       user-select: none;
-      border: 0;
       outline: 0;
+      border: 0;
     }
 
     &,

package/src/components/VCheckable/VCheckable.scss

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

package/src/components/VCheckbox/VCheckbox.scss

@@ -15,6 +15,9 @@
       display: block;
       width: 100%;
       height: 100%;
+      background: var(--my-faux-bg-color);
+      border: solid 2px var(--my-border-color);
+      border-radius: var(--control-field-radius);
       clip-path: polygon(
         0 0,
         0 100%,
@@ -29,9 +32,6 @@
         88.25% 28.25%,
         100% 0
       );
-      background: var(--my-faux-bg-color);
-      border: solid 2px var(--my-border-color);
-      border-radius: var(--control-field-radius);
       transition:
         border-color 0.2s,
         background-color 0.2s;

package/src/components/VCheckbox/VCheckbox.tsx

@@ -22,7 +22,6 @@ export const VCheckbox = defineComponent({
     indeterminate: Boolean,
   },
   emits,
-  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const nodeControl = useFormSelectorItemControl(props, ctx, {
       nodeType: VUI_CHECKBOX_SYMBOL,

package/src/components/VChip/VChip.scss

@@ -1,4 +1,4 @@
-@use '../../styles/core.scss';
+@use '../../styles/core';
 
 @layer vui {
   .v-chip {
@@ -19,16 +19,16 @@
       font-size: var(--chip-font-size);
       font-weight: var(--chip-font-weight);
       line-height: 1;
+      vertical-align: bottom;
       text-align: center;
       white-space: nowrap;
-      vertical-align: bottom;
       cursor: default;
       border-style: solid;
       border-width: 1px;
       border-radius: var(--chip-radius);
 
-      --shadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
-      --focusShadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
+      --shadow-color: rgb(0, 0, 0, 0) !important; // @TODO layer supports
+      --focusShadow-color: rgb(0, 0, 0, 0) !important; // @TODO layer supports
     }
 
     &--clickable {

package/src/components/VChip/VChip.tsx

@@ -9,7 +9,6 @@ import { VIcon } from '../VIcon';
 // @TODO Unable to resolve dts for `actionableInheritProps`.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-// eslint-disable-next-line import/order
 import { RouteLocationRaw } from 'vue-router';
 
 export const CHIP_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

package/src/components/VControlField/VControlField.scss

@@ -60,8 +60,8 @@
     &::after {
       height: 2px;
       background: var(--my-focused-color);
-      transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
       transform: scaleX(0);
+      transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
     }
 
     &--focused,

package/src/components/VControlField/VControlField.tsx

@@ -63,10 +63,10 @@ export const VControlField = defineComponent({
     ...slots(),
     error: Boolean,
   },
-  slots,
   emits: {
-    click: (ev: MouseEvent) => true,
+    click: (ev: PointerEvent) => true,
   },
+  slots,
   setup(props, ctx) {
     const parentNode = useParentFormNode();
     const control = useControl(props);
@@ -96,7 +96,6 @@ export const VControlField = defineComponent({
         },
         control.classes.value,
         colorProvider.className(
-          // eslint-disable-next-line no-nested-ternary
           props.error
             ? 'error'
             : invalid.value && !readonly.value
@@ -140,7 +139,7 @@ export const VControlField = defineComponent({
       );
     };
 
-    const handleClick = (ev: MouseEvent) => ctx.emit('click', ev);
+    const handleClick = (ev: PointerEvent) => ctx.emit('click', ev);
 
     return () => (
       <div

package/src/components/VDataTable/VDataTable.scss

@@ -118,10 +118,10 @@
 
       &__cell {
         position: relative;
+        vertical-align: middle;
         text-align: left;
         white-space: nowrap;
-        vertical-align: middle;
-        border-bottom: thin solid rgba(0, 0, 0, 0.12);
+        border-bottom: thin solid rgb(0, 0, 0, 0.12);
         transition: background 0.2s;
 
         &:first-child {
@@ -180,7 +180,7 @@
 
       &__header &__cell {
         user-select: none;
-        background: rgba(255, 255, 255, 0.85);
+        background: rgb(255, 255, 255, 0.85);
         backdrop-filter: blur(3px);
 
         // &--active[tabindex='0'] {

package/src/components/VDataTable/VDataTable.tsx

@@ -213,7 +213,6 @@ export const VDataTable = defineComponent({
     const footerHeightRef = ref(0);
     const internalValues = ref<string[]>(props.modelValue.slice());
     const rowSettings = computed<DataTableRowSettingsFn>(() => {
-      // eslint-disable-next-line no-shadow
       const { rowSettings } = props;
       if (!rowSettings) return () => ({});
       return typeof rowSettings === 'function'
@@ -494,7 +493,7 @@ export const VDataTable = defineComponent({
       }
     }
 
-    function handleClickSortHeader(header: DataTableHeader, ev: MouseEvent) {
+    function handleClickSortHeader(header: DataTableHeader, ev: PointerEvent) {
       const { sortQuery } = header;
       if (!sortQuery) return;
       if (sortByRef.value === sortQuery) {
@@ -689,7 +688,6 @@ export const VDataTable = defineComponent({
         }
 
         if (!cellChildren) {
-          // eslint-disable-next-line default-case
           switch (headerKey) {
             case SELECTABLE_HEADER_SYMBOL: {
               cellChildren = [

package/src/components/VDialog/VDialog.scss

@@ -5,8 +5,8 @@
   margin: 24px;
   text-align: left;
   pointer-events: auto;
-  border-radius: 2px;
   outline: 0;
+  border-radius: 2px;
   box-shadow: var(--dialog-shadow);
 
   &__header {

package/src/components/VDisabledReason/VDisabledReason.scss

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

package/src/components/VForm/VForm.tsx

@@ -1,4 +1,9 @@
-import { defineComponent, computed } from 'vue';
+import {
+  defineComponent,
+  computed,
+  type RenderFunction,
+  getCurrentInstance,
+} from 'vue';
 import {
   VueForm,
   createFormSettings,
@@ -12,6 +17,14 @@ const { props, emits } = createFormSettings({
   nodeType: VUI_FORM_SYMBOL,
 });
 
+/**
+ * @TODO Externalize
+ */
+function useRender(render: RenderFunction) {
+  const vm = getCurrentInstance() as any;
+  vm.render = render;
+}
+
 export type VFormSlots = DefineSlotsType<{
   default?: (form: VueForm) => any;
 }>;
@@ -31,7 +44,6 @@ export const VForm = defineComponent({
   props: createVFormProps(),
   emits,
   slots: formSlots,
-  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const nodeControl = useForm(props, ctx as any, {
       nodeType: VUI_FORM_SYMBOL,
@@ -49,14 +61,14 @@ export const VForm = defineComponent({
     ]);
     useControl(props);
 
-    ctx.expose({
-      control: nodeControl,
-    });
-
-    return () => (
+    useRender(() => (
       <form class={classes.value} {...nodeControl.formAttrs}>
         {ctx.slots.default?.(nodeControl)}
       </form>
-    );
+    ));
+
+    return {
+      control: nodeControl,
+    };
   },
 });

package/src/components/VFormControl/VFormControl.scss

@@ -39,10 +39,10 @@
         font-size: 80%;
         line-height: 1;
         color: inherit;
+        letter-spacing: normal;
 
         // color: var(--palette-muted);
         text-decoration: none;
-        letter-spacing: normal;
         cursor: pointer;
 
         // &:hover,

package/src/components/VFormControl/VFormControl.tsx

@@ -17,7 +17,6 @@ const { props, emits } = createFormNodeWrapperSettings();
 
 export function createRequiredChipRenderer(
   required: () => boolean,
-  // eslint-disable-next-line no-shadow
   props: {
     requiredChip?: RequiredChipSource;
   },
@@ -55,9 +54,9 @@ export const VFormControl = defineComponent({
     ...slots(),
     error: Boolean,
   },
-  slots,
   emits,
-  // eslint-disable-next-line no-shadow
+  slots,
+
   setup(props, ctx) {
     const vui = useVui();
     const control = useFormNodeWrapper(props, ctx, {
@@ -70,7 +69,6 @@ export const VFormControl = defineComponent({
     });
 
     const hinttipDelay = computed(() => {
-      // eslint-disable-next-line no-shadow
       let { hinttipDelay } = control;
       if (hinttipDelay == null) {
         hinttipDelay = vui.setting('hinttipDelay');
@@ -103,7 +101,6 @@ export const VFormControl = defineComponent({
         'v-form-control--valid': control.valid,
       },
       colorProvider.className(
-        // eslint-disable-next-line no-nested-ternary
         props.error
           ? 'error'
           : control.invalid && !control.isReadonly
@@ -118,7 +115,8 @@ export const VFormControl = defineComponent({
       vui,
     );
 
-    const handleClick = (ev: MouseEvent) => ctx.emit('clickLabel', ev, control);
+    const handleClick = (ev: PointerEvent) =>
+      ctx.emit('clickLabel', ev, control);
 
     return () => {
       const label = control.renderLabel();
@@ -146,7 +144,6 @@ export const VFormControl = defineComponent({
                     activator: (tooltip) => (
                       <a
                         class="v-form-control__label__hinttip"
-                        // eslint-disable-next-line no-script-url
                         href="javascript:void(0)"
                         {...tooltip.attrs}>
                         {hinttip.tip}

package/src/components/VFormGroup/VFormGroup.tsx

@@ -33,7 +33,6 @@ export const VFormGroup = defineComponent({
   props: createVFormGroupProps(),
   emits,
   slots: formGroupSlots,
-  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const nodeControl = useFormGroup(props, ctx as any, {
       nodeType: VUI_FORM_GROUP_SYMBOL,

package/src/components/VGrid/schemes.ts

@@ -14,7 +14,6 @@ export function extractRawGridValueClasses<
 >(
   value: NonNullable<RawGridValue<T>>,
   prefix: string,
-  // eslint-disable-next-line no-shadow
   getter?: (value: T) => string,
 ): string | string[] {
   if (typeof value !== 'object')

package/src/components/VIcon/VIcon.tsx

@@ -77,7 +77,7 @@ export const VIcon = defineComponent({
     ...iconProps,
   },
   emits: {} as {
-    click: (ev: MouseEvent) => true;
+    click: (ev: PointerEvent) => true;
   },
   setup(props, ctx) {
     const iconName = computed(() => props.name);

package/src/components/VListTile/VListTile.scss

@@ -23,11 +23,11 @@
     text-decoration: none;
     appearance: none;
     user-select: none;
+    outline: 0;
     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;

package/src/components/VListTile/VListTile.tsx

@@ -15,7 +15,6 @@ import { useVui } from '../../injections';
 // @TODO Unable to resolve dts for `actionableInheritProps`.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-// eslint-disable-next-line import/order
 import { RouteLocationRaw } from 'vue-router';
 import { rawIconProp, resolveRawIconProp } from '../VIcon';
 
@@ -87,7 +86,6 @@ export const VListTile = defineComponent({
 
     watch(
       () => isActive.value,
-      // eslint-disable-next-line no-shadow
       (isActive) => {
         ctx.emit('changeActive', isActive);
       },

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);
@@ -180,7 +177,7 @@ export const VNavigationItem = defineComponent({
       return opened.value ? close() : open();
     }
 
-    const onClick = (ev: MouseEvent) => {
+    const onClick = (ev: PointerEvent) => {
       if (!to.value) {
         return toggle();
       }

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 {