@fastkit/vui 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "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/color-scheme-gen": "^1.1.0",
+    "@fastkit/dom": "^0.3.0",
+    "@fastkit/helpers": "^0.15.0",
+    "@fastkit/media-match": "^2.1.0",
+    "@fastkit/media-match-gen": "^1.1.0",
+    "@fastkit/tiny-logger": "^0.15.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/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-transitions": "^0.3.0",
+    "@fastkit/vue-utils": "^0.16.0"
+  },
+  "devDependencies": {
+    "vue": "^3.5.21",
+    "vue-router": "^4.5.1"
   },
   "peerDependencies": {
     "vue": "^3.4.0",

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/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,
@@ -146,7 +147,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/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/styles/core/functions.scss

@@ -1,3 +1,5 @@
+@use 'sass:string';
+
 @mixin hidden-input-element {
   position: absolute;
   width: 1px;
@@ -25,7 +27,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(

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;
@@ -333,20 +334,23 @@
   // =============================================
   // 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 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);
 
   // =============================================
   // 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 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);
 
   // =============================================
   // 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 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);
 
   // =============================================
   // tooltips
@@ -356,8 +360,9 @@
   --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 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);
 }
 
 :root,