@globalbrain/sefirot 4.43.5 → 4.45.0

package/lib/components/SInputFileUploadItem.vue

@@ -2,7 +2,7 @@
 import IconFileText from '~icons/ph/file-text'
 import IconTrash from '~icons/ph/trash'
 import { type ValidationRuleWithParams } from '@vuelidate/core'
-import { type Component, computed } from 'vue'
+import { type Component, computed, watch } from 'vue'
 import { useValidation } from '../composables/Validation'
 import { formatSize } from '../support/File'
 import SButton, { type Mode as ButtonMode } from './SButton.vue'
@@ -27,7 +27,7 @@ export interface Action {
 }
 
 const props = defineProps<{
-  file: File | FileObject
+  file: File | FileObject | string
   rules?: Record<string, ValidationRuleWithParams>
 }>()
 
@@ -35,23 +35,64 @@ defineEmits<{
   remove: []
 }>()
 
-const _file = computed(() => ({
-  name: props.file instanceof File ? props.file.name : props.file.file.name,
-  file: props.file instanceof File ? props.file : props.file.file,
-  size: formatSize(props.file instanceof File ? props.file : props.file.file),
-  indicatorState: props.file instanceof File ? null : props.file.indicatorState,
-  canRemove: props.file instanceof File ? true : (props.file.canRemove ?? true),
-  action: props.file instanceof File ? null : props.file.action,
-  errorMessage: props.file instanceof File ? null : props.file.errorMessage
-}))
+const _file = computed(() => {
+  const value = props.file
+
+  if (value instanceof File) {
+    return {
+      name: value.name,
+      file: value as File | null,
+      size: formatSize(value) as string | null,
+      indicatorState: null as IndicatorState | null,
+      canRemove: true,
+      action: null as Action | null,
+      errorMessage: null as string | null
+    }
+  }
+
+  // A plain string references an already-uploaded file: show its basename
+  // and skip the size (unknown for server-side files).
+  if (typeof value === 'string') {
+    return {
+      name: value.split('/').pop() || value,
+      file: null,
+      size: null,
+      indicatorState: null,
+      canRemove: true,
+      action: null,
+      errorMessage: null
+    }
+  }
+
+  return {
+    name: value.file.name,
+    file: value.file as File | null,
+    size: formatSize(value.file) as string | null,
+    indicatorState: value.indicatorState ?? null,
+    canRemove: value.canRemove ?? true,
+    action: value.action ?? null,
+    errorMessage: value.errorMessage ?? null
+  }
+})
 
+// Rules are passed as a getter so validation reacts when the item's
+// identity changes — the parent keys items by index, so a single instance
+// can be reused for a different item after a removal. Per-file rules apply
+// to newly selected `File`s only; an already-uploaded `string` reference
+// has no local file to validate, so it's skipped (the server validates it).
 const { validation } = useValidation(() => ({
   file: _file.value.file
-}), {
-  file: props.rules ?? {}
-})
+}), () => ({
+  file: typeof props.file === 'string' ? {} : (props.rules ?? {})
+}))
 
-validation.value.$touch()
+// Surface validation immediately, and re-touch whenever the item changes:
+// when an index-keyed instance is reused for a different item, switching
+// rules resets the dirty state, so a post-flush re-touch is needed to keep
+// the new item's errors visible.
+watch(() => props.file, () => {
+  validation.value.$touch()
+}, { immediate: true, flush: 'post' })
 </script>
 
 <template>
@@ -84,7 +125,7 @@ validation.value.$touch()
       />
     </div>
     <div class="meta">
-      <div class="size">
+      <div v-if="_file.size" class="size">
         {{ _file.size }}
       </div>
       <div class="delete">

package/lib/components/STableCell.vue

@@ -54,6 +54,7 @@ const valueIsImagePath = computed(() => {
       :icon="computedCell.icon"
       :number="computedCell.value ?? value"
       :separator="computedCell.separator"
+      :maximum-fraction-digits="computedCell.maximumFractionDigits"
       :link="computedCell.link"
       :color="computedCell.color"
       :icon-color="computedCell.iconColor"

package/lib/components/STableCellNumber.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { type Component, computed } from 'vue'
 import { type TableCellValueColor } from '../composables/Table'
-import { format } from '../support/Num'
 import SLink from './SLink.vue'
 
 const props = defineProps<{
@@ -11,6 +10,7 @@ const props = defineProps<{
   icon?: Component
   number?: number | null
   separator?: boolean
+  maximumFractionDigits?: number | null
   color?: TableCellValueColor
   iconColor?: TableCellValueColor
   link?: string | null
@@ -25,6 +25,29 @@ const classes = computed(() => [
   _color,
   { link: !!(props.link || props.onClick) }
 ])
+
+// We format the value inline (rather than via `Num.format`) so we can
+// thread `useGrouping` and `maximumFractionDigits` through the same
+// `toLocaleString` call. `Num.format` is kept for callers that just
+// want the default separator-on / unbounded-digits behavior.
+//
+// When neither `separator` nor `maximumFractionDigits` is requested we
+// return the raw number and let Vue's template interpolation stringify
+// it. `toLocaleString` would otherwise round very small numbers to
+// `"0"` (e.g. `1e-25` → `"0"` at 20 digits), losing information that
+// the plain `String(number)` form preserves via scientific notation.
+const formatted = computed(() => {
+  if (props.number == null) {
+    return ''
+  }
+  if (!props.separator && props.maximumFractionDigits == null) {
+    return props.number
+  }
+  return props.number.toLocaleString('en-US', {
+    useGrouping: props.separator === true,
+    maximumFractionDigits: props.maximumFractionDigits ?? 20
+  })
+})
 </script>
 
 <template>
@@ -40,7 +63,7 @@ const classes = computed(() => [
         <component :is="icon" class="svg" />
       </div>
       <div class="value" :class="_color">
-        {{ separator ? format(number) : number }}
+        {{ formatted }}
       </div>
     </SLink>
   </div>

package/lib/composables/Table.ts

@@ -115,6 +115,12 @@ export interface TableCellNumber<V = any, R = any> extends TableCellBase {
   icon?: Component
   value?: number | null
   separator?: boolean
+  /**
+   * Caps the displayed fractional digits using
+   * `Intl.NumberFormat`-style "maximum fractional digits" semantics.
+   * `null` / `undefined` shows the value as-is (no rounding).
+   */
+  maximumFractionDigits?: number | null
   link?: string | null
   color?: TableCellValueColor
   iconColor?: TableCellValueColor

package/lib/http/Http.ts

@@ -1,8 +1,8 @@
 import { parse as parseContentDisposition } from '@tinyhttp/content-disposition'
 import { parse as parseCookie } from '@tinyhttp/cookie'
-import FileSaver from 'file-saver'
 import { FetchError, type FetchOptions, type FetchResponse } from 'ofetch'
 import { stringify } from 'qs'
+import { saveAs } from '../support/File'
 import { objectToFormData } from '../support/Http'
 
 type Config = ReturnType<typeof import('../stores/HttpConfig').useHttpConfig>
@@ -116,20 +116,15 @@ export class Http {
   }
 
   async download(url: string, options?: FetchOptions): Promise<void> {
-    const { _data: blob, headers } = await this.performRequestRaw<Blob>(url, {
-      method: 'GET',
-      responseType: 'blob',
-      ...options
-    })
-
-    if (!blob) {
-      throw new Error('No blob')
-    }
+    const { _data: blob, headers } =
+      await this.performRequestRaw<Blob>(url, { method: 'GET', responseType: 'blob', ...options })
 
-    const { filename = 'download' } =
-      parseContentDisposition(headers.get('Content-Disposition') || '')?.parameters || {}
+    let filename
+    try {
+      filename = parseContentDisposition(headers.get('Content-Disposition') || '').parameters.filename
+    } catch {}
 
-    FileSaver.saveAs(blob, filename as string)
+    saveAs(blob, filename as string | undefined)
   }
 }
 

package/lib/support/Chart.ts

@@ -6,8 +6,8 @@
  *     https://github.com/radix-ui/colors/blob/main/LICENSE
  */
 
-import FileSaver from 'file-saver'
 import html2canvas from 'html2canvas'
+import { saveAs } from './File'
 
 export const c = {
   text1: 'light-dark(#1c2024, #edeef0)',
@@ -86,6 +86,10 @@ export async function exportAsPng(_el: any, fileName = 'chart.png', delay = 0):
     }
   })
 
-  const dataUrl = canvas.toDataURL('image/png')
-  FileSaver.saveAs(dataUrl, fileName)
+  const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/png'))
+  if (!blob) {
+    throw new Error('Failed to export chart as PNG: unable to create blob from canvas')
+  }
+
+  saveAs(blob, fileName)
 }

package/lib/support/Day.ts

@@ -1,7 +1,8 @@
-import dayjs, { type ConfigType, type Dayjs } from 'dayjs'
-import PluginRelativeTime from 'dayjs/plugin/relativeTime'
-import PluginTimezone from 'dayjs/plugin/timezone'
-import PluginUtc from 'dayjs/plugin/utc'
+import dayjs, { type ConfigType, type Dayjs } from 'dayjs/esm'
+import PluginRelativeTime from 'dayjs/esm/plugin/relativeTime'
+import PluginTimezone from 'dayjs/esm/plugin/timezone'
+import PluginUtc from 'dayjs/esm/plugin/utc'
+import 'dayjs/esm/locale/ja'
 
 dayjs.extend(PluginUtc)
 dayjs.extend(PluginTimezone)

package/lib/support/File.ts

@@ -13,3 +13,28 @@ export function formatSize(files: File | File[]): string {
   const i = Math.min(Math.floor(Math.log(size) / Math.log(1000)), units.length - 1)
   return `${(size / 1000 ** i).toFixed(2)} ${units[i]}`
 }
+
+export function saveAs(blob: Blob | undefined, filename: string | undefined): void {
+  if (typeof window === 'undefined') {
+    throw new TypeError('saveAs can only be used in a browser environment.')
+  }
+
+  if (!(blob instanceof Blob)) {
+    throw new TypeError('The first argument must be a Blob.')
+  }
+
+  const url = URL.createObjectURL(blob)
+  const anchor = document.createElement('a')
+  anchor.href = url
+  anchor.download = filename || 'download'
+  anchor.rel = 'noopener'
+  anchor.style.display = 'none'
+
+  document.body.appendChild(anchor)
+  anchor.click()
+
+  setTimeout(() => {
+    anchor.remove()
+    URL.revokeObjectURL(url)
+  }, 4e4)
+}

package/lib/support/Num.ts

@@ -2,8 +2,9 @@ export function format(value: number): string {
   return value.toLocaleString('en-US', { maximumFractionDigits: 20 })
 }
 
-export function abbreviate(value: number, precision = 0): string {
-  return value.toLocaleString('en-US', {
+export function abbreviate(value: number, precision = 0, lang: 'en' | 'ja' = 'en'): string {
+  const locale = lang === 'ja' ? 'ja-JP' : 'en-US'
+  return value.toLocaleString(locale, {
     notation: 'compact',
     maximumFractionDigits: precision
   })

package/lib/support/Utils.ts

@@ -14,3 +14,16 @@ export function isObject(value: unknown): value is Record<PropertyKey, unknown>
 export function isString(value: unknown): value is string {
   return typeof value === 'string'
 }
+
+export function getLength(value: unknown): number {
+  if (typeof value === 'string') {
+    // Count Unicode code points, not UTF-16 code units (which `String.length`
+    // returns). This matches how the database measures column length (MySQL
+    // `CHAR_LENGTH`, PostgreSQL `length`) and the backend's PHP `mb_strlen`.
+    return [...value].length
+  }
+  if (Array.isArray(value)) {
+    return value.length
+  }
+  throw new TypeError('Value must be a string or an array')
+}

package/lib/validation/validators/maxLength.ts

@@ -1,3 +1,5 @@
+import { getLength } from '../../support/Utils'
+
 export function maxLength(value: unknown, length: number): boolean {
-  return (typeof value === 'string' || Array.isArray(value)) && value.length <= length
+  try { return getLength(value) <= length } catch { return false }
 }

package/lib/validation/validators/maxTotalFileSize.ts

@@ -1,8 +1,16 @@
 export function maxTotalFileSize(value: unknown, size: string): boolean {
-  if (!Array.isArray(value) || !value.every((v) => v instanceof File)) { return false }
+  // The model may mix freshly selected `File`s with `string` references to
+  // already-uploaded files (see `SInputFileUpload`). Reject anything else,
+  // but allow string references through — only `File`s contribute to the
+  // total, since an already-uploaded file has no client-side size (the
+  // server validates its real size). This means the total under-counts kept
+  // files, which is accepted for now.
+  if (!Array.isArray(value) || !value.every((v) => v instanceof File || typeof v === 'string')) {
+    return false
+  }
 
   const factor = /gb/i.test(size) ? 1e9 : /mb/i.test(size) ? 1e6 : /kb/i.test(size) ? 1e3 : 1
-  const total = value.reduce((total, file) => total + file.size, 0)
+  const total = value.reduce((total, file) => total + (file instanceof File ? file.size : 0), 0)
 
   return total <= factor * Number.parseFloat(size.replace(/[^\d.]/g, ''))
 }

package/lib/validation/validators/minLength.ts

@@ -1,3 +1,5 @@
+import { getLength } from '../../support/Utils'
+
 export function minLength(value: unknown, length: number): boolean {
-  return (typeof value === 'string' || Array.isArray(value)) && value.length >= length
+  try { return getLength(value) >= length } catch { return false }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "4.43.5",
+  "version": "4.45.0",
   "description": "Vue Components for Global Brain Design System.",
   "keywords": [
     "components",
@@ -37,11 +37,11 @@
     "./*": "./*"
   },
   "scripts": {
-    "docs": "pnpm run docs:dev",
+    "docs": "pnpm docs:dev",
     "docs:dev": "vitepress dev docs --port 4011",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress serve docs --port 4011",
-    "story": "pnpm run story:dev",
+    "story": "pnpm story:dev",
     "story:dev": "NODE_NO_WARNINGS=1 VITE_CJS_IGNORE_WARNING=1 histoire dev --port 4010",
     "story:build": "NODE_NO_WARNINGS=1 VITE_CJS_IGNORE_WARNING=1 histoire build",
     "story:preview": "NODE_NO_WARNINGS=1 VITE_CJS_IGNORE_WARNING=1 histoire preview --port 4010",
@@ -51,72 +51,71 @@
     "test": "vitest",
     "test:fail": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "check": "pnpm run type && pnpm run lint:fail && pnpm run test:fail",
+    "check": "pnpm run --aggregate-output '/^(type|lint|test:fail)$/'",
+    "check:fail": "pnpm run --aggregate-output '/^(type|lint:fail|test:fail)$/'",
     "release": "pnpm whoami >/dev/null 2>&1 || pnpm login && release-it"
   },
   "dependencies": {
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/ri": "^1.2.10",
     "@popperjs/core": "^2.11.8",
-    "@sentry/browser": "^10.47.0",
-    "@sentry/vue": "^10.47.0",
+    "@sentry/browser": "^10.55.0",
+    "@sentry/vue": "^10.55.0",
     "@tanstack/vue-virtual": "3.0.0-beta.62",
     "@tinyhttp/content-disposition": "^2.2.4",
     "@tinyhttp/cookie": "^2.1.1",
     "@total-typescript/ts-reset": "^0.6.1",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/d3": "^7.4.3",
-    "@types/file-saver": "^2.0.7",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
-    "@types/qs": "^6.15.0",
-    "@vitejs/plugin-vue": "^6.0.5",
-    "@vue/reactivity": "^3.5.32",
+    "@types/qs": "^6.15.1",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/reactivity": "^3.5.35",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^14.2.1",
+    "@vueuse/core": "^14.3.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "d3": "^7.9.0",
-    "dayjs": "^1.11.20",
-    "dompurify": "^3.3.3",
-    "file-saver": "^2.0.5",
-    "fuse.js": "^7.2.0",
+    "dayjs": "^1.11.21",
+    "dompurify": "^3.4.7",
+    "fuse.js": "^7.3.0",
     "html2canvas": "^1.4.1",
-    "jsdom": "^29.0.1",
+    "jsdom": "^29.1.1",
     "lodash-es": "^4.18.1",
     "magic-string": "^0.30.21",
-    "markdown-it": "^14.1.1",
+    "markdown-it": "^14.2.0",
     "normalize.css": "^8.0.1",
     "ofetch": "^1.5.1",
     "pinia": "^3.0.4",
-    "postcss": "^8.5.8",
+    "postcss": "^8.5.15",
     "postcss-nested": "^7.0.2",
     "punycode": "^2.3.1",
-    "qs": "^6.15.0",
+    "qs": "^6.15.2",
     "unplugin-icons": "^23.0.1",
     "v-calendar": "3.0.1",
-    "vite": "^7.3.1",
-    "vue": "^3.5.32",
+    "vite": "^7.3.3",
+    "vue": "^3.5.35",
     "vue-draggable-plus": "^0.6.1",
-    "vue-router": "^5.0.4"
+    "vue-router": "^5.1.0"
   },
   "devDependencies": {
-    "@globalbrain/eslint-config": "^3.0.1",
+    "@globalbrain/eslint-config": "^3.1.0",
     "@histoire/plugin-vue": "1.0.0-beta.1",
-    "@release-it/conventional-changelog": "^10.0.6",
-    "@types/jsdom": "^28.0.1",
-    "@types/node": "^25.5.1",
-    "@typescript-eslint/rule-tester": "^8.58.0",
-    "@vitest/coverage-v8": "^4.1.2",
-    "@vue/test-utils": "^2.4.6",
+    "@release-it/conventional-changelog": "^11.0.1",
+    "@types/jsdom": "^28.0.3",
+    "@types/node": "^25.9.1",
+    "@typescript-eslint/rule-tester": "^8.60.0",
+    "@vitest/coverage-v8": "^4.1.7",
+    "@vue/test-utils": "^2.4.10",
     "eslint": "^9.39.4",
-    "happy-dom": "^20.8.9",
+    "happy-dom": "^20.9.0",
     "histoire": "1.0.0-beta.1",
-    "release-it": "^19.2.4",
-    "typescript": "~5.9.3",
+    "release-it": "^20.2.0",
+    "typescript": "~6.0.3",
     "vitepress": "^2.0.0-alpha.17",
-    "vitest": "^4.1.2",
-    "vue-tsc": "^3.2.6"
+    "vitest": "^4.1.7",
+    "vue-tsc": "^3.3.3"
   },
-  "packageManager": "pnpm@10.33.0"
+  "packageManager": "pnpm@11.5.0"
 }