@globalbrain/sefirot 4.6.0 → 4.7.1

package/lib/components/SContent.vue

@@ -110,4 +110,41 @@
   font-feature-settings: "tnum";
   content: counter(s-medium-counter)". ";
 }
+
+.SContent :deep(table) {
+  margin: 8px 0;
+  border-style: hidden;
+  border-radius: 6px;
+  text-align: left;
+  font-size: 14px;
+  color: var(--c-text-1);
+  overflow: clip;
+  box-shadow: 0 0 0 1px var(--c-divider);
+}
+
+.SContent :deep(table tr:hover td) {
+  background-color: var(--c-bg-elv-4);
+}
+
+.SContent :deep(table thead > tr > th) {
+  vertical-align: middle;
+}
+
+.SContent :deep(table th),
+.SContent :deep(table td) {
+  border: 1px solid var(--c-gutter);
+  padding: 8px 16px;
+  height: 40px;
+  vertical-align: top;
+  text-wrap: pretty;
+  background-color: var(--c-bg-elv-3);
+  overflow-wrap: break-word;
+}
+
+.SContent :deep(table th) {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--c-text-2);
+  text-wrap: balance;
+}
 </style>

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/validation/rules/maxLength.ts

@@ -1,14 +1,15 @@
+import { format } from '../../support/Num'
 import { createRule } from '../Rule'
 import { maxLength as baseMaxLength } from '../validators'
 
 export const message = {
-  en: (length: number) => `The value must be less than or equal to ${length} characters.`,
-  ja: (length: number) => `この値は最大${length}文字までです。`
+  en: (length: string) => `The value must be less than or equal to ${length} characters.`,
+  ja: (length: string) => `この値は最大${length}文字までです。`
 }
 
 export function maxLength(length: number, msg?: string) {
   return createRule({
-    message: ({ lang }) => msg ?? message[lang](length),
+    message: ({ lang }) => msg ?? message[lang](format(length)),
     optional: true,
     validation: (value) => baseMaxLength(value, length)
   })

package/lib/validation/rules/maxValue.ts

@@ -1,14 +1,15 @@
+import { format } from '../../support/Num'
 import { createRule } from '../Rule'
 import { maxValue as baseMaxValue } from '../validators'
 
 export const message = {
-  en: (max: number) => `The value must be less than or equal to ${max}.`,
-  ja: (max: number) => `この値は最大${max}です。`
+  en: (max: string) => `The value must be less than or equal to ${max}.`,
+  ja: (max: string) => `この値は最大${max}です。`
 }
 
 export function maxValue(max: number, msg?: string) {
   return createRule({
-    message: ({ lang }) => msg ?? message[lang](max),
+    message: ({ lang }) => msg ?? message[lang](format(max)),
     optional: true,
     validation: (value) => baseMaxValue(value, max)
   })

package/lib/validation/rules/minLength.ts

@@ -1,14 +1,15 @@
+import { format } from '../../support/Num'
 import { createRule } from '../Rule'
 import { minLength as baseMinLength } from '../validators'
 
 export const message = {
-  en: (min: number) => `The value must be greater than or equal to ${min} characters.`,
-  ja: (min: number) => `この値は最小${min}文字です。`
+  en: (min: string) => `The value must be greater than or equal to ${min} characters.`,
+  ja: (min: string) => `この値は最小${min}文字です。`
 }
 
 export function minLength(length: number, msg?: string) {
   return createRule({
-    message: ({ lang }) => msg ?? message[lang](length),
+    message: ({ lang }) => msg ?? message[lang](format(length)),
     optional: true,
     validation: (value) => baseMinLength(value, length)
   })

package/lib/validation/rules/minValue.ts

@@ -1,14 +1,15 @@
+import { format } from '../../support/Num'
 import { createRule } from '../Rule'
 import { minValue as baseMinValue } from '../validators'
 
 export const message = {
-  en: (min: number) => `The value must be greater than or equal to ${min}.`,
-  ja: (min: number) => `この値は最大${min}です。`
+  en: (min: string) => `The value must be greater than or equal to ${min}.`,
+  ja: (min: string) => `この値は最大${min}です。`
 }
 
 export function minValue(min: number, msg?: string) {
   return createRule({
-    message: ({ lang }) => msg ?? message[lang](min),
+    message: ({ lang }) => msg ?? message[lang](format(min)),
     optional: true,
     validation: (value) => baseMinValue(value, min)
   })

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@globalbrain/sefirot",
   "type": "module",
-  "version": "4.6.0",
-  "packageManager": "pnpm@9.12.1",
+  "version": "4.7.1",
+  "packageManager": "pnpm@9.14.4",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -43,58 +43,58 @@
     "release": "release-it"
   },
   "peerDependencies": {
-    "@iconify-json/ph": "^1.2.0",
-    "@iconify-json/ri": "^1.2.0",
+    "@iconify-json/ph": "^1.2.1",
+    "@iconify-json/ri": "^1.2.3",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
-    "@vue/reactivity": "^3.5.11",
+    "@vue/reactivity": "^3.5.13",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^11.1.0",
+    "@vueuse/core": "^12.0.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.4",
-    "postcss": "^8.4.47",
-    "postcss-nested": "^6.2.0",
+    "pinia": "^2.2.8",
+    "postcss": "^8.4.49",
+    "postcss-nested": "^7.0.2",
     "v-calendar": "3.0.1",
-    "vue": "^3.5.11",
-    "vue-router": "^4.4.5"
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   },
   "dependencies": {
-    "@sentry/browser": "^8.33.1",
+    "@sentry/browser": "^8.41.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.16",
+    "@types/qs": "^6.9.17",
     "file-saver": "^2.0.5",
-    "magic-string": "^0.30.11",
-    "ofetch": "^1.4.0",
-    "qs": "^6.13.0",
-    "unplugin-icons": "^0.19.3"
+    "magic-string": "^0.30.14",
+    "ofetch": "^1.4.1",
+    "qs": "^6.13.1",
+    "unplugin-icons": "^0.20.2"
   },
   "devDependencies": {
     "@globalbrain/eslint-config": "^1.7.1",
     "@histoire/plugin-vue": "0.16.5",
-    "@iconify-json/ph": "^1.2.0",
-    "@iconify-json/ri": "^1.2.0",
-    "@release-it/conventional-changelog": "^8.0.2",
+    "@iconify-json/ph": "^1.2.1",
+    "@iconify-json/ri": "^1.2.3",
+    "@release-it/conventional-changelog": "^9.0.3",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^22.7.5",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitest/coverage-v8": "^2.1.2",
-    "@vue/reactivity": "^3.5.11",
+    "@types/node": "^22.10.1",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/coverage-v8": "^2.1.6",
+    "@vue/reactivity": "^3.5.13",
     "@vue/test-utils": "^2.4.6",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^11.1.0",
+    "@vueuse/core": "^12.0.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.4",
-    "postcss": "^8.4.47",
-    "postcss-nested": "^6.2.0",
+    "pinia": "^2.2.8",
+    "postcss": "^8.4.49",
+    "postcss-nested": "^7.0.2",
     "punycode": "^2.3.1",
-    "release-it": "^17.7.0",
-    "typescript": "~5.6.2",
+    "release-it": "^17.10.0",
+    "typescript": "~5.6.3",
     "v-calendar": "3.0.1",
-    "vite": "^5.4.8",
-    "vitepress": "^1.4.0",
-    "vitest": "^2.1.2",
-    "vue": "^3.5.11",
-    "vue-router": "^4.4.5",
-    "vue-tsc": "^2.1.6"
+    "vite": "^6.0.1",
+    "vitepress": "^1.5.0",
+    "vitest": "^2.1.6",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "vue-tsc": "^2.1.10"
   }
 }