@globalbrain/sefirot 4.7.0 → 4.8.0

package/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"

package/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>

package/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

package/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"

package/lib/components/SControlButton.vue

@@ -1,4 +1,5 @@
 <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'
 
@@ -6,7 +7,9 @@ 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"

package/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>

package/lib/components/SInputHMS.vue

@@ -51,14 +51,6 @@ const _value = computed(() => {
     : props.value !== undefined ? props.value : null
 })
 
-const padValue = computed(() => {
-  return {
-    hour: _value.value?.hour?.padStart(2, '0') ?? null,
-    minute: _value.value?.minute?.padStart(2, '0') ?? null,
-    second: _value.value?.second?.padStart(2, '0') ?? null
-  }
-})
-
 const padPlaceholder = computed(() => {
   return {
     hour: props.placeholder?.hour?.toString().padStart(2, '0') ?? '00',
@@ -102,7 +94,7 @@ function update(type: ValueType, value: string | null) {
 
   const newValue = {
     ..._value.value,
-    [type]: value ?? null
+    [type]: value?.padStart(2, '0') ?? null
   }
 
   emit('update:model-value', newValue)
@@ -166,7 +158,7 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noHour"
         class="input hour"
-        :value="padValue?.hour"
+        :value="_value?.hour"
         :placeholder="padPlaceholder.hour"
         :maxlength="2"
         :disabled="disabled"
@@ -177,7 +169,7 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noMinute"
         class="input minute"
-        :value="padValue?.minute"
+        :value="_value?.minute"
         :placeholder="padPlaceholder.minute"
         :maxlength="2"
         :disabled="disabled"
@@ -188,7 +180,7 @@ function createRequiredTouched(): boolean[] {
       <input
         v-if="!noSecond"
         class="input second"
-        :value="padValue?.second"
+        :value="_value?.second"
         :placeholder="padPlaceholder.second"
         :maxlength="2"
         :disabled="disabled"

package/lib/components/SLocalNav.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import SLocalNavActions, { type Action } from './SLocalNavActions.vue'
 import SLocalNavAvatar from './SLocalNavAvatar.vue'
 import SLocalNavDescription from './SLocalNavDescription.vue'
 import SLocalNavMenu, { type MenuItem } from './SLocalNavMenu.vue'
 import SLocalNavTitle, { type Title } from './SLocalNavTitle.vue'
 
-export type { Title, MenuItem }
+export type { Title, Action, MenuItem }
 
 export interface Avatar {
   image?: string | null
@@ -16,6 +17,7 @@ const props = defineProps<{
   avatar?: Avatar
   title: Title[]
   description?: string
+  actions?: Action[]
   menu?: MenuItem[][]
 }>()
 
@@ -37,7 +39,10 @@ const normalizedMenu = computed(() => {
         />
       </div>
       <div class="title-bar-body">
-        <SLocalNavTitle :title="title" />
+        <div class="title-bar-title">
+          <SLocalNavTitle :title="title" />
+          <SLocalNavActions v-if="actions?.length" :actions="actions" />
+        </div>
         <SLocalNavDescription v-if="description" :text="description" />
       </div>
     </div>
@@ -71,4 +76,15 @@ const normalizedMenu = computed(() => {
   align-items: center;
   gap: 16px;
 }
+
+.title-bar-body {
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+.title-bar-title {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
 </style>

package/lib/components/SLocalNavActions.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { type Component } from 'vue'
+import SButton, { type Mode, type Tooltip, type Type } from './SButton.vue'
+
+export interface Action {
+  tag?: string
+  type?: Type
+  mode?: Mode
+  icon?: Component
+  leadIcon?: Component
+  trailIcon?: Component
+  iconMode?: Mode
+  label?: string
+  labelMode?: Mode
+  href?: string
+  loading?: boolean
+  disabled?: boolean
+  tooltip?: string | Tooltip
+  onClick?(): void
+}
+
+defineProps<{
+  actions: Action[]
+}>()
+</script>
+
+<template>
+  <div class="SLocalNavActions">
+    <div v-for="action, i in actions" :key="i" class="action">
+      <SButton
+        size="small"
+        :type="action.type"
+        :mode="action.mode"
+        :icon="action.icon"
+        :lead-icon="action.leadIcon"
+        :trail-icon="action.trailIcon"
+        :icon-mode="action.iconMode"
+        :label="action.label"
+        :label-mode="action.labelMode"
+        :href="action.href"
+        :loading="action.loading"
+        :disabled="action.disabled"
+        :tooltip="action.tooltip"
+        @click="() => { action.onClick?.() }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SLocalNavActions {
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+}
+</style>

package/lib/components/SLocalNavTitle.vue

@@ -24,6 +24,8 @@ defineProps<{
 <style scoped lang="postcss">
 .SLocalNavTitle {
   display: flex;
+  flex-grow: 1;
+  width: 100%;
   overflow: hidden;
 }
 

package/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/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@globalbrain/sefirot",
   "type": "module",
-  "version": "4.7.0",
-  "packageManager": "pnpm@9.14.4",
+  "version": "4.8.0",
+  "packageManager": "pnpm@9.15.3",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -43,22 +43,22 @@
     "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",
@@ -66,35 +66,35 @@
     "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"
   }
 }