@fastkit/vui 1.0.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "A simple, extensible UI kit for Vue applications.",
   "keywords": [
     "fastkit",
@@ -44,32 +44,36 @@
     "src"
   ],
   "dependencies": {
-    "@fastkit/dom": "^0.2.6",
-    "@fastkit/color-scheme": "^2.0.10",
-    "@fastkit/helpers": "^0.14.5",
-    "@fastkit/media-match": "^2.0.7",
-    "@fastkit/icon-font": "^2.0.7",
-    "@fastkit/rules": "^0.14.7",
+    "@fastkit/color-scheme": "^2.1.0",
+    "@fastkit/helpers": "^0.15.0",
+    "@fastkit/color-scheme-gen": "^1.1.0",
+    "@fastkit/icon-font": "^2.1.0",
+    "@fastkit/dom": "^0.3.0",
+    "@fastkit/media-match": "^2.1.0",
+    "@fastkit/tiny-logger": "^0.15.0",
+    "@fastkit/media-match-gen": "^1.1.0",
     "@fastkit/stylebase": "^0.13.1",
-    "@fastkit/color-scheme-gen": "^1.0.0",
-    "@fastkit/vue-action": "^0.3.20",
-    "@fastkit/media-match-gen": "^1.0.0",
-    "@fastkit/vue-app-layout": "^0.16.3",
-    "@fastkit/tiny-logger": "^0.14.5",
-    "@fastkit/vue-body-scroll-lock": "^0.2.14",
-    "@fastkit/vue-click-outside": "^0.2.13",
-    "@fastkit/vue-color-scheme": "^0.15.16",
-    "@fastkit/vue-disabled-reason": "^0.0.1",
-    "@fastkit/vue-form-control": "^0.21.1",
-    "@fastkit/vue-loading": "^0.15.16",
-    "@fastkit/vue-location": "^0.4.3",
-    "@fastkit/vue-keyboard": "^0.2.5",
-    "@fastkit/vue-media-match": "^0.14.10",
-    "@fastkit/vue-scroller": "^0.15.13",
-    "@fastkit/vue-resize": "^0.2.13",
-    "@fastkit/vue-utils": "^0.15.13",
-    "@fastkit/vue-transitions": "^0.2.14",
-    "@fastkit/vue-stack": "^0.17.4"
+    "@fastkit/vue-action": "^0.4.0",
+    "@fastkit/rules": "^0.15.0",
+    "@fastkit/vue-click-outside": "^0.3.0",
+    "@fastkit/vue-disabled-reason": "^0.1.0",
+    "@fastkit/vue-form-control": "^0.22.1",
+    "@fastkit/vue-body-scroll-lock": "^0.3.0",
+    "@fastkit/vue-keyboard": "^0.3.0",
+    "@fastkit/vue-loading": "^0.16.0",
+    "@fastkit/vue-app-layout": "^0.17.0",
+    "@fastkit/vue-location": "^0.5.0",
+    "@fastkit/vue-color-scheme": "^0.16.0",
+    "@fastkit/vue-media-match": "^0.15.0",
+    "@fastkit/vue-scroller": "^0.16.0",
+    "@fastkit/vue-resize": "^0.3.0",
+    "@fastkit/vue-stack": "^0.18.0",
+    "@fastkit/vue-utils": "^0.16.0",
+    "@fastkit/vue-transitions": "^0.3.0"
+  },
+  "devDependencies": {
+    "vue": "^3.5.21",
+    "vue-router": "^4.5.1"
   },
   "peerDependencies": {
     "vue": "^3.4.0",
@@ -89,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/VCheckable/VCheckable.tsx

@@ -2,6 +2,7 @@ import './VCheckable.scss';
 import { computed, defineComponent } from 'vue';
 import { defineSlots } from '@fastkit/vue-utils';
 import { FormNodeErrorSlotsSource } from '@fastkit/vue-form-control';
+import { DISABLED_REASON_CONTAINER_BIND } from '@fastkit/vue-disabled-reason';
 import { useVuiColorProvider } from '../../injections';
 
 export const CHECKABLE_SLOTS = defineSlots<
@@ -44,7 +45,9 @@ export const VCheckable = defineComponent({
     ]);
 
     return () => (
-      <label class={['v-checkable', classes.value]}>
+      <label
+        class={['v-checkable', classes.value]}
+        {...DISABLED_REASON_CONTAINER_BIND}>
         <span class="v-checkable__faux">
           {ctx.slots.input?.()}
           {ctx.slots.icon ? (

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

@@ -9,6 +9,7 @@ import {
   defineSlots,
   DefineSlotsType,
 } from '@fastkit/vue-utils';
+import { DISABLED_REASON_CONTAINER_BIND } from '@fastkit/vue-disabled-reason';
 import {
   createControlProps,
   useControl,
@@ -62,10 +63,10 @@ export const VControlField = defineComponent({
     ...slots(),
     error: Boolean,
   },
-  slots,
   emits: {
     click: (ev: MouseEvent) => true,
   },
+  slots,
   setup(props, ctx) {
     const parentNode = useParentFormNode();
     const control = useControl(props);
@@ -95,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
@@ -146,7 +146,8 @@ export const VControlField = defineComponent({
         class={classes.value}
         onClick={handleClick}
         // tabindex={this.computedTabindex}
-        ref={hostElRef}>
+        ref={hostElRef}
+        {...DISABLED_REASON_CONTAINER_BIND}>
         {renderAdornment('start')}
         <div class="v-control-field__body">{ctx.slots.default?.()}</div>
         {renderAdornment('end')}

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'
@@ -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/VDisabledReason/VDisabledReason.tsx

@@ -1,7 +1,20 @@
 import './VDisabledReason.scss';
-import { type PropType } from 'vue';
-import { defineDisabledReasonComponent } from '@fastkit/vue-disabled-reason';
+import {
+  type PropType,
+  type ExtractPublicPropTypes,
+  type VNodeChild,
+} from 'vue';
+import {
+  defineDisabledReasonComponent,
+  DISABLED_REASON_BASE_PROPS,
+} from '@fastkit/vue-disabled-reason';
 import { createMenuProps } from '@fastkit/vue-stack';
+import { createPropsOptions } from '@fastkit/vue-utils';
+import {
+  registerActionableAttrsResolver,
+  registerActionableRenderWrapper,
+  type ActionableCustomProps as _ActionableCustomProps,
+} from '@fastkit/vue-action';
 import { VTooltip } from '../VTooltip';
 
 const menuProps = createMenuProps();
@@ -13,10 +26,9 @@ const menuProps = createMenuProps();
  */
 export type DisabledReasonType = 'tooltip';
 
-export const VDisabledReason = defineDisabledReasonComponent({
-  name: 'VDisabledReason',
-  props: {
-    ...menuProps,
+export const DISABLED_REASON_PROPS = {
+  ...menuProps,
+  ...createPropsOptions({
     /**
      * Display type
      *
@@ -28,7 +40,17 @@ export const VDisabledReason = defineDisabledReasonComponent({
       type: String as PropType<DisabledReasonType>,
       default: 'tooltip' satisfies DisabledReasonType,
     },
-  },
+  }),
+};
+
+export interface DisabledReasonInput
+  extends ExtractPublicPropTypes<
+    typeof DISABLED_REASON_PROPS & typeof DISABLED_REASON_BASE_PROPS
+  > {}
+
+export const VDisabledReason = defineDisabledReasonComponent({
+  name: 'VDisabledReason',
+  props: DISABLED_REASON_PROPS,
   setup(api) {
     return (reason) => {
       const { type: _type, ...tooltipProps } = api.props;
@@ -52,3 +74,52 @@ export const VDisabledReason = defineDisabledReasonComponent({
     };
   },
 });
+
+// Customize '@fastkit/vue-action' so that when the custom attribute
+// "disabledReason" is set, it wraps the element with `VDisabledReason`
+// to display the reason for being disabled.
+
+// 1. Extend the '@fastkit/vue-action' interface
+declare module '@fastkit/vue-action' {
+  interface ActionableCustomProps {
+    /**
+     * Reason why this element is disabled.
+     *
+     * If set, hovering over the disabled element will display the reason
+     * using `VDisabledReason`.
+     */
+    disabledReason: PropType<string | (() => VNodeChild) | DisabledReasonInput>;
+  }
+}
+
+// 2. Handle `disabledReason` as a custom attribute of '@fastkit/vue-action'
+registerActionableAttrsResolver((attrs, ctx) => {
+  const disabledReason = ctx.getAttr('disabledReason');
+  if (disabledReason) {
+    // Remove disabledReason from the original attrs
+    // (to prevent adding unnecessary attributes to the element)
+    delete attrs.disabledReason;
+    return [
+      undefined,
+      {
+        disabledReason,
+      },
+    ];
+  }
+});
+
+// 3. Register a custom render wrapper for '@fastkit/vue-action'
+registerActionableRenderWrapper((customProps, currentNode) => {
+  const { disabledReason } = customProps;
+  const disabledReasonInput =
+    typeof disabledReason === 'string' || typeof disabledReason === 'function'
+      ? { reason: disabledReason }
+      : disabledReason;
+
+  if (disabledReasonInput) {
+    return (
+      <VDisabledReason {...disabledReasonInput}>{currentNode}</VDisabledReason>
+    );
+  }
+  return currentNode;
+});

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
@@ -146,7 +143,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/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);
       },