@globalbrain/sefirot 4.43.5 → 4.44.0

package/lib/blocks/lens/FieldData.ts

@@ -20,6 +20,7 @@ export interface FieldDataRegistry {
   content: ContentFieldData
   date: DateFieldData
   datetime: DatetimeFieldData
+  decimal: DecimalFieldData
   file_upload: FileUploadFieldData
   id: IdFieldData
   link: LinkFieldData
@@ -88,6 +89,24 @@ export interface LinkFieldData extends FieldDataBase {
 
 export interface NumberFieldData extends FieldDataBase {
   type: 'number'
+  align: 'left' | 'center' | 'right' | null
+  separator: boolean | null
+  abbr: 'en' | 'ja' | null
+  fractionDigits: number | null
+}
+
+/**
+ * A `decimal` field is rendered identically to a `number` field on the
+ * client. The distinction exists so backends can preserve arbitrary
+ * precision (e.g. sending the value as a string instead of a JS number)
+ * without losing the type-level signal at the spec layer.
+ */
+export interface DecimalFieldData extends FieldDataBase {
+  type: 'decimal'
+  align: 'left' | 'center' | 'right' | null
+  separator: boolean | null
+  abbr: 'en' | 'ja' | null
+  fractionDigits: number | null
 }
 
 export interface SelectFieldData extends FieldDataBase {

package/lib/blocks/lens/components/LensFormOverrideBase.vue

@@ -152,6 +152,12 @@ async function onSave() {
               <SInputCheckbox v-model="freeze" />
             </div>
           </div>
+          <!--
+            Default slot — field-specific override forms (e.g. number /
+            decimal) inject their own `.item` rows here so they line up
+            visually with the base inputs.
+          -->
+          <slot />
         </div>
       </SDoc>
     </SCardBlock>

package/lib/blocks/lens/components/LensFormOverrideNumber.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts" generic="T extends DecimalFieldData | NumberFieldData">
+import { computed, reactive } from 'vue'
+import SInputCheckbox from '../../../components/SInputCheckbox.vue'
+import SInputNumber from '../../../components/SInputNumber.vue'
+import SInputSelect from '../../../components/SInputSelect.vue'
+import { useTrans } from '../../../composables/Lang'
+import { type DecimalFieldData, type NumberFieldData } from '../FieldData'
+import LensFormOverrideBase from './LensFormOverrideBase.vue'
+
+const props = defineProps<{
+  name: string
+  field: T
+  override: T
+}>()
+
+const emit = defineEmits<{
+  cancel: []
+  saved: [field: Partial<T>]
+}>()
+
+const { t } = useTrans({
+  en: {
+    i_align_label: 'Alignment',
+    i_separator_text: 'Separate by comma',
+    i_abbr_label: 'Abbreviation',
+    i_fraction_digits: 'Fraction digits'
+  },
+  ja: {
+    i_align_label: '配置',
+    i_separator_text: 'カンマで区切る',
+    i_abbr_label: '省略表記',
+    i_fraction_digits: '小数点以下の桁数'
+  }
+})
+
+// Local state for the number-specific inputs. Base inputs
+// (label, width, freeze) keep their own state inside
+// `LensFormOverrideBase`; we receive their changes via the `saved`
+// event and merge in our four extras here.
+//
+// `separator` keeps its original `boolean | null` value so a no-op
+// submit (user opens the modal and clicks Finish without touching
+// the checkbox) doesn't promote `null` to `false`. The
+// `separatorModel` computed below adapts `null` to `false` only for
+// the `SInputCheckbox` v-model.
+const data = reactive({
+  align: props.override.align,
+  separator: props.override.separator,
+  abbr: props.override.abbr,
+  fractionDigits: props.override.fractionDigits
+})
+
+// `SInputCheckbox` accepts `boolean | 'indeterminate' | undefined`
+// (not `null`), so adapt at the binding boundary. The model writes
+// the user's `true`/`false` straight into `data.separator`, while
+// `null` from the field-level default stays `null` until the user
+// actually flips the checkbox.
+const separatorModel = computed({
+  get: () => data.separator ?? false,
+  set: (v) => { data.separator = v }
+})
+
+const { t: alignOptions } = useTrans({
+  en: [
+    { label: 'Left', value: 'left' },
+    { label: 'Center', value: 'center' },
+    { label: 'Right', value: 'right' }
+  ],
+  ja: [
+    { label: '左寄せ', value: 'left' },
+    { label: '中央寄せ', value: 'center' },
+    { label: '右寄せ', value: 'right' }
+  ]
+})
+
+// `null` represents "no abbreviation". We expose it as a real option
+// so users can switch back to plain rendering after picking a locale.
+// `SInputSelect` accepts `null` values when the option carries
+// `value: null`.
+const { t: abbrOptions } = useTrans({
+  en: [
+    { label: 'None', value: null },
+    { label: 'English (1K, 1M, 1B)', value: 'en' },
+    { label: 'Japanese (1万, 1億, 1兆)', value: 'ja' }
+  ],
+  ja: [
+    { label: 'なし', value: null },
+    { label: '英語スタイル (1K, 1M, 1B)', value: 'en' },
+    { label: '日本語スタイル (1万, 1億, 1兆)', value: 'ja' }
+  ]
+})
+
+function onSaved(override: Partial<T>): void {
+  // Only include keys whose value diverged from the underlying field
+  // definition — matches what `LensFormOverrideBase` does for the
+  // base inputs. We mutate the payload from the base in place rather
+  // than re-allocating so any keys it already populated (label,
+  // width, freeze) carry through unchanged.
+  //
+  // Plain `!==` (not the base's `isNotNullOrSame`) is intentional: the
+  // four formatting options are tri-state, so clearing a previous
+  // `align: 'right'` back to `null` must actually persist `align: null`
+  // rather than silently inherit the field-level default.
+  const o = override as Record<string, any>
+  if (data.align !== props.field.align) {
+    o.align = data.align
+  }
+  if (data.separator !== props.field.separator) {
+    o.separator = data.separator
+  }
+  if (data.abbr !== props.field.abbr) {
+    o.abbr = data.abbr
+  }
+  if (data.fractionDigits !== props.field.fractionDigits) {
+    o.fractionDigits = data.fractionDigits
+  }
+  emit('saved', o as Partial<T>)
+}
+</script>
+
+<template>
+  <LensFormOverrideBase
+    class="LensFormOverrideNumber"
+    :name
+    :field
+    :label-en="override.labelEn"
+    :label-ja="override.labelJa"
+    :width="override.width"
+    :freeze="override.freeze"
+    @cancel="$emit('cancel')"
+    @saved="onSaved"
+  >
+    <div class="item">
+      <div class="key">{{ t.i_align_label }}</div>
+      <div class="value">
+        <SInputSelect
+          v-model="data.align"
+          size="mini"
+          :options="alignOptions"
+        />
+      </div>
+    </div>
+    <div class="item">
+      <div class="key">{{ t.i_separator_text }}</div>
+      <div class="value">
+        <SInputCheckbox v-model="separatorModel" />
+      </div>
+    </div>
+    <div class="item">
+      <div class="key">{{ t.i_abbr_label }}</div>
+      <div class="value">
+        <SInputSelect
+          v-model="data.abbr"
+          size="mini"
+          :options="abbrOptions"
+        />
+      </div>
+    </div>
+    <div class="item">
+      <div class="key">{{ t.i_fraction_digits }}</div>
+      <div class="value">
+        <SInputNumber v-model="data.fractionDigits" size="mini" />
+      </div>
+    </div>
+  </LensFormOverrideBase>
+</template>

package/lib/blocks/lens/composables/SetupLens.ts

@@ -4,6 +4,7 @@ import { provideFieldRegistry } from '../composables/FieldRegistry'
 import { ContentField } from '../fields/ContentField'
 import { DateField } from '../fields/DateField'
 import { DatetimeField } from '../fields/DatetimeField'
+import { DecimalField } from '../fields/DecimalField'
 import { FileUploadField } from '../fields/FileUploadField'
 import { IdField } from '../fields/IdField'
 import { LinkField } from '../fields/LinkField'
@@ -34,6 +35,7 @@ export function useSetupLens(): SetupLens {
     fieldRegistry.register('content', (ctx, field) => new ContentField(ctx, field))
     fieldRegistry.register('date', (ctx, field) => new DateField(ctx, field))
     fieldRegistry.register('datetime', (ctx, field) => new DatetimeField(ctx, field))
+    fieldRegistry.register('decimal', (ctx, field) => new DecimalField(ctx, field))
     fieldRegistry.register('file_upload', (ctx, field) => new FileUploadField(ctx, field, fileDownloader))
     fieldRegistry.register('link', (ctx, field) => new LinkField(ctx, field))
     fieldRegistry.register('number', (ctx, field) => new NumberField(ctx, field))

package/lib/blocks/lens/fields/DecimalField.ts

@@ -0,0 +1,60 @@
+import { defineComponent, h } from 'vue'
+import { type TableCell } from '../../../composables/Table'
+import { type DecimalFieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import LensFormOverrideNumber from '../components/LensFormOverrideNumber.vue'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { NumberFilterInput } from '../filter-inputs/NumberFilterInput'
+import { Field } from './Field'
+import { renderNumberLikeTableCell } from './support/Renderers'
+
+/**
+ * A decimal field is rendered identically to a number field on the
+ * client — `renderNumberLikeTableCell` covers both. The type exists so
+ * backends can preserve arbitrary precision (e.g. send the value as a
+ * string instead of a JS number) without losing the type-level signal
+ * at the spec layer.
+ */
+export class DecimalField extends Field<DecimalFieldData> {
+  override tableCell(v: any, _r: any): TableCell {
+    return renderNumberLikeTableCell(this.data, v)
+  }
+
+  override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    const number = new NumberFilterInput()
+
+    return {
+      '=': number,
+      '!=': number
+    }
+  }
+
+  /**
+   * Renders the override form with extra inputs for `align`,
+   * `separator`, `abbr` and `fractionDigits` on top of the base
+   * label / width / freeze controls.
+   */
+  override overrideForm(): any {
+    return defineComponent((props) => {
+      return () => h(LensFormOverrideNumber, {
+        name: props.name,
+        field: props.field,
+        override: props.override
+      })
+    }, {
+      props: [
+        'name',
+        'field',
+        'override'
+      ]
+    })
+  }
+
+  override dataListItemComponent(): any {
+    throw new Error('Not implemented.')
+  }
+
+  override formInputComponent() {
+    throw new Error('Not implemented.')
+  }
+}

package/lib/blocks/lens/fields/NumberField.ts

@@ -1,16 +1,16 @@
+import { defineComponent, h } from 'vue'
 import { type TableCell } from '../../../composables/Table'
 import { type NumberFieldData } from '../FieldData'
 import { type FilterOperator } from '../FilterOperator'
+import LensFormOverrideNumber from '../components/LensFormOverrideNumber.vue'
 import { type FilterInput } from '../filter-inputs/FilterInput'
 import { NumberFilterInput } from '../filter-inputs/NumberFilterInput'
 import { Field } from './Field'
+import { renderNumberLikeTableCell } from './support/Renderers'
 
 export class NumberField extends Field<NumberFieldData> {
   override tableCell(v: any, _r: any): TableCell {
-    return {
-      type: 'number',
-      value: v
-    }
+    return renderNumberLikeTableCell(this.data, v)
   }
 
   override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
@@ -22,6 +22,27 @@ export class NumberField extends Field<NumberFieldData> {
     }
   }
 
+  /**
+   * Renders the override form with extra inputs for `align`,
+   * `separator`, `abbr` and `fractionDigits` on top of the base
+   * label / width / freeze controls.
+   */
+  override overrideForm(): any {
+    return defineComponent((props) => {
+      return () => h(LensFormOverrideNumber, {
+        name: props.name,
+        field: props.field,
+        override: props.override
+      })
+    }, {
+      props: [
+        'name',
+        'field',
+        'override'
+      ]
+    })
+  }
+
   override dataListItemComponent(): any {
     throw new Error('Not implemented.')
   }

package/lib/blocks/lens/fields/support/Renderers.ts

@@ -0,0 +1,78 @@
+import { type TableCell } from '../../../../composables/Table'
+import { abbreviate } from '../../../../support/Num'
+import { type DecimalFieldData, type NumberFieldData } from '../../FieldData'
+
+/**
+ * `Intl.NumberFormat`'s `maximumFractionDigits` accepts integers in
+ * the range `0..20` (inclusive) and throws `RangeError` outside it.
+ * The override UI can in principle accept any number — including
+ * negative values via `SInputNumber` — so we clamp defensively on
+ * the rendering path. `null` / `undefined` stays untouched so the
+ * cell component can route through the "no formatting" path.
+ */
+function clampFractionDigits(digits: number | null | undefined): number | null {
+  if (digits == null) {
+    return null
+  }
+  return Math.max(0, Math.min(20, Math.trunc(digits)))
+}
+
+/**
+ * Coerces an incoming cell value to a finite number, or `null` when
+ * the value is missing / blank / non-numeric. We intentionally treat
+ * empty and whitespace-only strings the same as `null` — otherwise
+ * `Number('') === 0` would render blank numeric cells as a literal
+ * `0`, which is a regression from the pre-formatting renderer that
+ * passed values through untouched. `NaN` (from `Number('abc')` and
+ * friends) collapses to `null` too so the cell renders blank instead
+ * of the string `"NaN"`.
+ */
+function toNumberOrNull(v: any): number | null {
+  if (v == null) {
+    return null
+  }
+  if (typeof v === 'string' && v.trim() === '') {
+    return null
+  }
+  const num = Number(v)
+  return Number.isFinite(num) ? num : null
+}
+
+/**
+ * Renders a `number` or `decimal` field as a table cell. The two share
+ * the same rendering rules so this helper covers both.
+ *
+ * - When `abbr` is `null`, we emit a `number` cell. The cell component
+ *   applies `separator` and `maximumFractionDigits` via
+ *   `toLocaleString`. The raw incoming value is coerced with `Number()`
+ *   so decimal fields delivered as strings still render.
+ * - When `abbr` is `'en'` or `'ja'`, we emit a `text` cell with the
+ *   compact-notation string baked in. We fall back to a 1-digit
+ *   precision when `fractionDigits` is `null` — matches what the
+ *   default user-facing column-format UI would set.
+ */
+export function renderNumberLikeTableCell(
+  data: NumberFieldData | DecimalFieldData,
+  v: any
+): TableCell {
+  const num = toNumberOrNull(v)
+  const cap = clampFractionDigits(data.fractionDigits)
+
+  if (data.abbr != null) {
+    return {
+      type: 'text',
+      align: data.align ?? 'left',
+      value: num != null
+        ? abbreviate(num, cap ?? 1, data.abbr)
+        : null
+    }
+  }
+
+  return {
+    type: 'number',
+    align: data.align ?? 'left',
+    value: num,
+    separator: data.separator ?? false,
+    maximumFractionDigits: cap
+  }
+}

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

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "4.43.5",
+  "version": "4.44.0",
   "description": "Vue Components for Global Brain Design System.",
   "keywords": [
     "components",