feat(action-menu,control): allow specifying leading and trailing icons (

#569)

docs/components/control.md

@@ -151,7 +151,7 @@ interface Props {
   tag?: string
   type?: Type
   mode?: Mode
-  icon?: any
+  icon?: Component
   iconMode?: Mode
   label?: string
   labelMode?: Mode
@@ -204,7 +204,7 @@ import SButton, {
 
 interface Props {
   as?: string
-  icon?: any
+  icon?: Component
   href?: string
   disabled?: boolean
   tooltip?: string | Tooltip

docs/components/table.md

@@ -372,7 +372,7 @@ export interface TableCellText {
   align?: 'left' | 'center' | 'right'
 
   // Icon to display in front of the value.
-  icon?: any
+  icon?: Component
 
   // The value for the cell. If omitted, it will use the value
   // from the record.
@@ -432,7 +432,7 @@ export interface TableCellNumber {
   align?: 'left' | 'center' | 'right'
 
   // Icon to display in front of the value.
-  icon?: any
+  icon?: Component
 
   // The value for the cell. If omitted, it will use the value
   // from the record.

lib/components/SActionMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { type Component, ref } from 'vue'
 import { type DropdownSection, useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import SButton, { type Mode, type Size, type Tooltip, type Type } from './SButton.vue'
@@ -12,7 +12,9 @@ const props = defineProps<{
   size?: Size
   type?: Type
   mode?: Mode
-  icon?: any
+  icon?: Component
+  leadIcon?: Component
+  trailIcon?: Component
   iconMode?: Mode
   label?: string
   labelMode?: Mode
@@ -46,6 +48,8 @@ async function onOpen() {
         :type="type"
         :mode="mode"
         :icon="icon"
+        :lead-icon="leadIcon"
+        :trail-icon="trailIcon"
         :icon-mode="iconMode"
         :label="label"
         :label-mode="labelMode"

lib/components/SButton.vue

@@ -116,9 +116,7 @@ function handleClick(): void {
         <span v-if="_leadIcon" class="icon" :class="iconMode">
           <component :is="_leadIcon" class="icon-svg" />
         </span>
-        <span v-if="label" class="label" :class="labelMode">
-          {{ label }}
-        </span>
+        <span v-if="label" class="label" :class="labelMode" v-html="label" />
         <span v-if="trailIcon" class="icon" :class="iconMode">
           <component :is="trailIcon" class="icon-svg" />
         </span>

lib/components/SControlActionBarButton.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import { type Component } from 'vue'
 import { useControlSize } from '../composables/Control'
 import SButton, { type Tooltip } from './SButton.vue'
 
 defineProps<{
   as?: string
-  icon?: any
+  icon?: Component
   href?: string
   disabled?: boolean
   tooltip?: string | Tooltip

lib/components/SControlActionMenu.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type Component } from 'vue'
 import { useControlSize } from '../composables/Control'
 import { type DropdownSection } from '../composables/Dropdown'
 import SActionMenu, { type Mode, type Tooltip, type Type } from './SActionMenu.vue'
@@ -7,7 +8,9 @@ defineProps<{
   tag?: string
   type?: Type
   mode?: Mode
-  icon?: any
+  icon?: Component
+  leadIcon?: Component
+  trailIcon?: Component
   iconMode?: Mode
   label?: string
   labelMode?: Mode
@@ -29,6 +32,8 @@ const size = useControlSize()
       :type="type"
       :mode="mode"
       :icon="icon"
+      :lead-icon="leadIcon"
+      :trail-icon="trailIcon"
       :icon-mode="iconMode"
       :label="label"
       :label-mode="labelMode"

lib/components/SControlButton.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
+import { type Component } from 'vue'
 import { useControlSize } from '../composables/Control'
 import SButton, { type Mode, type Tooltip, type Type } from './SButton.vue'
 
 defineProps<{
   tag?: string
   type?: Type
   mode?: Mode
-  icon?: any
+  icon?: Component
+  leadIcon?: Component
+  trailIcon?: Component
   iconMode?: Mode
   label?: string
   labelMode?: Mode
@@ -31,6 +34,8 @@ const size = useControlSize()
       :type="type"
       :mode="mode"
       :icon="icon"
+      :lead-icon="leadIcon"
+      :trail-icon="trailIcon"
       :icon-mode="iconMode"
       :label="label"
       :label-mode="labelMode"

lib/components/SFragment.vue

@@ -1,9 +1,7 @@
-<script lang="ts">
-export default { inheritAttrs: false }
-</script>
-
 <script setup lang="ts">
 defineProps<{ is?: any }>()
+defineSlots()
+defineOptions({ inheritAttrs: false })
 </script>
 
 <template>

lib/composables/Table.ts

@@ -96,7 +96,7 @@ export interface TableCellBase {
 export interface TableCellText<V = any, R = any> extends TableCellBase {
   type: 'text'
   align?: 'left' | 'center' | 'right'
-  icon?: any
+  icon?: Component
   value?: string | null
   link?: string | null
   color?: TableCellValueColor
@@ -107,7 +107,7 @@ export interface TableCellText<V = any, R = any> extends TableCellBase {
 export interface TableCellNumber<V = any, R = any> extends TableCellBase {
   type: 'number'
   align?: 'left' | 'center' | 'right'
-  icon?: any
+  icon?: Component
   value?: number | null
   separator?: boolean
   link?: string | null
@@ -194,7 +194,7 @@ export interface TableCellActions<R = any> extends TableCellBase {
 
 export interface TableCellAction<R = any> {
   mode?: Mode
-  icon?: any
+  icon?: Component
   iconMode?: Mode
   label?: string
   labelMode?: Mode

package.json

@@ -2,7 +2,7 @@
   "name": "@globalbrain/sefirot",
   "type": "module",
   "version": "4.7.1",
-  "packageManager": "pnpm@9.14.4",
+  "packageManager": "pnpm@9.15.3",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <[email protected]>",
   "license": "MIT",
@@ -43,58 +43,58 @@
     "release": "release-it"
   },
   "peerDependencies": {
-    "@iconify-json/ph": "^1.2.1",
-    "@iconify-json/ri": "^1.2.3",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify-json/ri": "^1.2.5",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
     "@vue/reactivity": "^3.5.13",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^12.0.0",
+    "@vueuse/core": "^12.4.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "dayjs": "^1.11.13",
     "fuse.js": "^7.0.0",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
-    "pinia": "^2.2.8",
+    "pinia": "^2.3.0",
     "postcss": "^8.4.49",
     "postcss-nested": "^7.0.2",
     "v-calendar": "3.0.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
   "dependencies": {
-    "@sentry/browser": "^8.41.0",
+    "@sentry/browser": "^8.48.0",
     "@tanstack/vue-virtual": "3.0.0-beta.62",
     "@tinyhttp/content-disposition": "^2.2.2",
     "@tinyhttp/cookie": "^2.1.1",
     "@types/file-saver": "^2.0.7",
     "@types/qs": "^6.9.17",
     "file-saver": "^2.0.5",
-    "magic-string": "^0.30.14",
+    "magic-string": "^0.30.17",
     "ofetch": "^1.4.1",
     "qs": "^6.13.1",
-    "unplugin-icons": "^0.20.2"
+    "unplugin-icons": "^22.0.0"
   },
   "devDependencies": {
     "@globalbrain/eslint-config": "^1.7.1",
     "@histoire/plugin-vue": "0.16.5",
-    "@iconify-json/ph": "^1.2.1",
-    "@iconify-json/ri": "^1.2.3",
-    "@release-it/conventional-changelog": "^9.0.3",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify-json/ri": "^1.2.5",
+    "@release-it/conventional-changelog": "^10.0.0",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^22.10.1",
+    "@types/node": "^22.10.5",
     "@vitejs/plugin-vue": "^5.2.1",
-    "@vitest/coverage-v8": "^2.1.6",
+    "@vitest/coverage-v8": ">=3.0.0-beta.0",
     "@vue/reactivity": "^3.5.13",
     "@vue/test-utils": "^2.4.6",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^12.0.0",
+    "@vueuse/core": "^12.4.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "dayjs": "^1.11.13",
     "eslint": "8.57.0",
@@ -104,18 +104,18 @@
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
-    "pinia": "^2.2.8",
+    "pinia": "^2.3.0",
     "postcss": "^8.4.49",
     "postcss-nested": "^7.0.2",
     "punycode": "^2.3.1",
-    "release-it": "^17.10.0",
+    "release-it": "^18.1.1",
     "typescript": "~5.6.3",
     "v-calendar": "3.0.1",
-    "vite": "^6.0.1",
+    "vite": "^6.0.7",
     "vitepress": "^1.5.0",
-    "vitest": "^2.1.6",
+    "vitest": ">=3.0.0-beta.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
-    "vue-tsc": "^2.1.10"
+    "vue-tsc": "^2.2.0"
   }
 }