@fastkit/vui 0.20.4 → 0.20.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.20.4",
+  "version": "0.20.6",
   "description": "A simple, extensible UI kit for Vue applications.",
   "keywords": [
     "fastkit",
@@ -44,31 +44,32 @@
     "src"
   ],
   "dependencies": {
-    "@fastkit/color-scheme-gen": "^0.14.13",
     "@fastkit/color-scheme": "^2.0.10",
-    "@fastkit/helpers": "^0.14.5",
     "@fastkit/dom": "^0.2.6",
-    "@fastkit/media-match-gen": "^0.14.13",
-    "@fastkit/media-match": "^2.0.7",
+    "@fastkit/color-scheme-gen": "^0.14.13",
     "@fastkit/icon-font": "^2.0.7",
+    "@fastkit/helpers": "^0.14.5",
+    "@fastkit/media-match": "^2.0.7",
     "@fastkit/rules": "^0.14.7",
-    "@fastkit/vue-action": "^0.3.19",
-    "@fastkit/tiny-logger": "^0.14.5",
     "@fastkit/stylebase": "^0.13.1",
-    "@fastkit/vue-app-layout": "^0.16.2",
-    "@fastkit/vue-click-outside": "^0.2.12",
-    "@fastkit/vue-body-scroll-lock": "^0.2.13",
-    "@fastkit/vue-color-scheme": "^0.15.15",
-    "@fastkit/vue-form-control": "^0.21.0",
+    "@fastkit/tiny-logger": "^0.14.5",
+    "@fastkit/vue-action": "^0.3.20",
+    "@fastkit/vue-app-layout": "^0.16.3",
+    "@fastkit/vue-body-scroll-lock": "^0.2.14",
+    "@fastkit/vue-click-outside": "^0.2.13",
+    "@fastkit/vue-disabled-reason": "^0.0.1",
+    "@fastkit/vue-form-control": "^0.21.1",
+    "@fastkit/vue-color-scheme": "^0.15.16",
+    "@fastkit/vue-loading": "^0.15.16",
     "@fastkit/vue-keyboard": "^0.2.5",
+    "@fastkit/vue-location": "^0.4.3",
     "@fastkit/vue-media-match": "^0.14.10",
-    "@fastkit/vue-location": "^0.4.2",
-    "@fastkit/vue-loading": "^0.15.15",
-    "@fastkit/vue-resize": "^0.2.12",
-    "@fastkit/vue-transitions": "^0.2.13",
-    "@fastkit/vue-scroller": "^0.15.12",
-    "@fastkit/vue-stack": "^0.17.2",
-    "@fastkit/vue-utils": "^0.15.12"
+    "@fastkit/vue-resize": "^0.2.13",
+    "@fastkit/vue-scroller": "^0.15.13",
+    "@fastkit/vue-stack": "^0.17.4",
+    "@fastkit/vue-transitions": "^0.2.14",
+    "@fastkit/vue-utils": "^0.15.13",
+    "@fastkit/media-match-gen": "^0.14.13"
   },
   "peerDependencies": {
     "vue": "^3.4.0",

package/src/components/VDisabledReason/VDisabledReason.scss

@@ -0,0 +1,23 @@
+@use '../../styles/core.scss';
+
+@layer vui {
+  .v-disabled-reason {
+    @include core.remove-tap-highlight;
+
+    /* stylelint-disable-next-line no-duplicate-selectors */
+    & {
+      position: absolute;
+      inset: 0;
+      z-index: 10;
+      display: block;
+      pointer-events: none;
+      cursor: default;
+      border-radius: inherit;
+    }
+
+    // Match elements with tabindex 0 or greater
+    &[tabindex]:not([tabindex^='-']) {
+      pointer-events: auto;
+    }
+  }
+}

package/src/components/VDisabledReason/VDisabledReason.tsx

@@ -0,0 +1,54 @@
+import './VDisabledReason.scss';
+import { type PropType } from 'vue';
+import { defineDisabledReasonComponent } from '@fastkit/vue-disabled-reason';
+import { createMenuProps } from '@fastkit/vue-stack';
+import { VTooltip } from '../VTooltip';
+
+const menuProps = createMenuProps();
+
+/**
+ * Display type
+ *
+ * Currently, only tooltip is supported
+ */
+export type DisabledReasonType = 'tooltip';
+
+export const VDisabledReason = defineDisabledReasonComponent({
+  name: 'VDisabledReason',
+  props: {
+    ...menuProps,
+    /**
+     * Display type
+     *
+     * Currently, only tooltip is supported
+     *
+     * @see {@link DisabledReasonType}
+     */
+    type: {
+      type: String as PropType<DisabledReasonType>,
+      default: 'tooltip' satisfies DisabledReasonType,
+    },
+  },
+  setup(api) {
+    return (reason) => {
+      const { type: _type, ...tooltipProps } = api.props;
+      return (
+        <VTooltip
+          {...tooltipProps}
+          disabled={!reason || !api.disabled}
+          v-slots={{
+            activator: ({ attrs }) => (
+              <span
+                class="v-disabled-reason"
+                // If tabindex is 0 or greater, enable pointer-events via CSS
+                tabindex={api.disabled ? 0 : -1}
+                {...attrs}
+              />
+            ),
+            default: () => reason,
+          }}
+        />
+      );
+    };
+  },
+});

package/src/components/VDisabledReason/index.ts

@@ -0,0 +1 @@
+export * from './VDisabledReason';

package/src/components/index.ts

@@ -5,6 +5,7 @@ export * from './VSnackbar';
 export * from './VTooltip';
 export * from './VSheetModal';
 export * from './VSkeltonLoader';
+export * from './VDisabledReason';
 export * from './VBusyImage';
 export * from './VGrid';
 export * from './VPaper';

package/src/styles/index.scss

@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@layer vui-normalize, vui-color-scheme, vue-loading, vue-app-layout, vui;
+@layer vui-normalize, vui-color-scheme, vue-disabled-reason, vue-loading, vue-app-layout, vui;
 
 @layer vui-normalize {
   @include meta.load-css('@fastkit/stylebase/normalize.css');