@globalbrain/sefirot 4.14.2 → 4.16.0

package/lib/components/SButton.vue

@@ -51,8 +51,8 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'click'): void
-  (e: 'disabled-click'): void
+  'click': []
+  'disabled-click': []
 }>()
 
 const _leadIcon = computed(() => props.leadIcon ?? props.icon)

package/lib/components/SChartBar.vue

@@ -3,6 +3,7 @@ import { useElementSize } from '@vueuse/core'
 import * as d3 from 'd3'
 import { useTemplateRef, watch } from 'vue'
 import { type ChartColor, type KV, type Margins, c, scheme } from '../support/Chart'
+import { getTextSize } from '../support/Text'
 
 const props = withDefaults(defineProps<{
   // State
@@ -42,7 +43,7 @@ const props = withDefaults(defineProps<{
   tickFontSize: '14px',
 
   tooltip: true,
-  tooltipFormat: (d: KV) => `${d.key} – ${d.value}`,
+  tooltipFormat: (d: KV) => `${d.key}&nbsp;&ndash; ${d.value}`,
 
   animate: true,
   debug: false
@@ -67,6 +68,7 @@ function renderChart({
 
   // Create color scale
   const color = scheme(props.data, props.colors)
+  const font = getComputedStyle(chartRef.value).fontFamily
 
   // Clear any existing SVG
   d3
@@ -77,25 +79,37 @@ function renderChart({
   // Set dimensions and margins
   const vertical = props.type === 'vertical'
 
+  const maxKeyLength = props.data.reduce((a, b) => Math.max(a, b.key.length), Number.NEGATIVE_INFINITY)
+  const maxValueLength = props.data.reduce((a, b) => Math.max(a, b.value.toLocaleString().length), Number.NEGATIVE_INFINITY)
+
+  const maxVerticalTickWidthInCh = vertical ? maxValueLength : maxKeyLength
+  const maxVerticalTickWidthInPx = getTextSize('0'.repeat(maxVerticalTickWidthInCh), `400 ${props.tickFontSize} ${font}`).width
+  const verticalLabelWidthInPx = props.yLabel ? getTextSize(props.yLabel, `400 ${props.yLabelFontSize} ${font}`).height : 0
+  const gapBetweenVerticalLabelAndTicks = props.yLabel ? 20 : 0
+
+  const maxHorizontalTickHeightInPx = getTextSize('0', `400 ${props.tickFontSize} ${font}`).height // wrapping isn't supported
+  const horizontalLabelHeightInPx = props.xLabel ? getTextSize(props.xLabel, `400 ${props.xLabelFontSize} ${font}`).height : 0
+  const gapBetweenHorizontalLabelAndTicks = props.xLabel ? 20 : 0
+
+  const xLabelOffset = props.xLabelOffset ?? horizontalLabelHeightInPx + 9 + maxHorizontalTickHeightInPx + gapBetweenHorizontalLabelAndTicks
+  const yLabelOffset = props.yLabelOffset ?? 9 + maxVerticalTickWidthInPx + gapBetweenVerticalLabelAndTicks
+
   const margin = {
     top: props.margins?.top ?? 30,
-    right: props.margins?.right ?? 40,
-    bottom: props.margins?.bottom ?? (props.xLabel ? 80 : 60),
-    left: props.margins?.left ?? (props.yLabel ? (vertical ? 80 : 100) : (vertical ? 60 : 80))
+    right: props.margins?.right ?? 30,
+    bottom: props.margins?.bottom ?? (30 + horizontalLabelHeightInPx + xLabelOffset - (props.xLabel ? 9 : 0)),
+    left: props.margins?.left ?? (30 + verticalLabelWidthInPx + yLabelOffset)
   }
 
   const width = clientWidth - margin.left - margin.right
   const height = clientHeight - margin.top - margin.bottom
 
-  const xLabelOffset = props.xLabelOffset ?? 46
-  const yLabelOffset = props.yLabelOffset ?? (vertical ? 40 : 56)
-
   // Create SVG
   const svg = d3
     .select(chartRef.value)
     .append('svg')
     .attr('width', '100%')
-    .attr('height', height + margin.top + margin.bottom)
+    .attr('height', clientHeight)
     .append('g')
     .attr('transform', `translate(${margin.left},${margin.top})`)
 

package/lib/components/SChartPie.vue

@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<{
   legendFontSize: '14px',
 
   tooltip: true,
-  tooltipFormat: (d: KV) => `${d.key} – ${d.value}`,
+  tooltipFormat: (d: KV) => `${d.key}&nbsp;&ndash; ${d.value}`,
 
   animate: true,
   debug: false

package/lib/components/SControlActionBarButton.vue

@@ -12,7 +12,7 @@ defineProps<{
 }>()
 
 defineEmits<{
-  (e: 'click'): void
+  click: []
 }>()
 
 const size = useControlSize()

package/lib/components/SControlActionBarClose.vue

@@ -7,7 +7,7 @@ defineProps<{
 }>()
 
 defineEmits<{
-  (e: 'click'): void
+  click: []
 }>()
 </script>
 

package/lib/components/SControlActionBarCollapse.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
 }>()
 
 defineEmits<{
-  (e: 'click'): void
+  click: []
 }>()
 
 const { isCollapsed, setCollapse, toggleCollapse } = useCardState()

package/lib/components/SControlButton.vue

@@ -20,7 +20,7 @@ defineProps<{
 }>()
 
 defineEmits<{
-  (e: 'click'): void
+  click: []
 }>()
 
 const size = useControlSize()

package/lib/components/SControlInputSearch.vue

@@ -19,10 +19,10 @@ const props = defineProps<{
 }>()
 
 defineEmits<{
-  (e: 'update:model-value', value: string | null): void
-  (e: 'input', value: string | null): void
-  (e: 'blur', value: string | null): void
-  (e: 'enter', value: string | null): void
+  'update:model-value': [value: string | null]
+  'input': [value: string | null]
+  'blur': [value: string | null]
+  'enter': [value: string | null]
 }>()
 
 const { t } = useTrans({

package/lib/components/SControlPagination.vue

@@ -10,8 +10,8 @@ defineProps<{
 }>()
 
 defineEmits<{
-  (e: 'prev'): void
-  (e: 'next'): void
+  prev: []
+  next: []
 }>()
 
 const size = useControlSize()

package/lib/components/SDropdownSectionDateRangeDateFromTo.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'change', value: DateFromTo): void
+  change: [value: DateFromTo]
 }>()
 
 const { validation } = useValidation(() => ({

package/lib/components/SDropdownSectionDateRangeYear.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'change', value: Year): void
+  change: [value: Year]
 }>()
 
 const { validation } = useValidation(() => ({

package/lib/components/SDropdownSectionDateRangeYearHalf.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'change', value: YearHalf): void
+  change: [value: YearHalf]
 }>()
 
 const { validation } = useValidation(() => ({

package/lib/components/SDropdownSectionDateRangeYearQuarter.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'change', value: YearQuarter): void
+  change: [value: YearQuarter]
 }>()
 
 const { validation } = useValidation(() => ({

package/lib/components/SErrorBoundary.vue

@@ -3,7 +3,7 @@ import { onErrorCaptured, shallowRef } from 'vue'
 import { useRouter } from 'vue-router'
 
 const emit = defineEmits<{
-  (e: 'error', value: any): void
+  error: [value: any]
 }>()
 
 const error = shallowRef<Error>()

package/lib/components/SInputAddon.vue

@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'click'): void
+  click: []
 }>()
 
 const container = ref<any>(null)

package/lib/components/SInputCheckbox.vue

@@ -29,8 +29,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: boolean): void
-  (e: 'change', value: boolean): void
+  'update:model-value': [value: boolean]
+  'change': [value: boolean]
 }>()
 
 const classes = computed(() => [

package/lib/components/SInputCheckboxes.vue

@@ -37,8 +37,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: Value[]): void
-  (e: 'change', value: Value[]): void
+  'update:model-value': [value: Value[]]
+  'change': [value: Value[]]
 }>()
 
 const _value = computed(() => {

package/lib/components/SInputDate.vue

@@ -26,7 +26,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: Day | null): void
+  'update:model-value': [value: Day | null]
 }>()
 
 const classes = computed(() => [

package/lib/components/SInputFile.vue

@@ -26,8 +26,8 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:model-value', file: File | File[] | null): void
-  (e: 'change', file: File | File[] | null): void
+  'update:model-value': [file: File | File[] | null]
+  'change': [file: File | File[] | null]
 }>()
 
 const _value = computed(() => {

package/lib/components/SInputFileUploadItem.vue

@@ -32,7 +32,7 @@ const props = defineProps<{
 }>()
 
 defineEmits<{
-  'remove': []
+  remove: []
 }>()
 
 const _file = computed(() => ({

package/lib/components/SInputHMS.vue

@@ -41,8 +41,8 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: Value): void
-  (e: 'change', value: Value): void
+  'update:model-value': [value: Value]
+  'change': [value: Value]
 }>()
 
 const _value = computed(() => {

package/lib/components/SInputImage.vue

@@ -42,8 +42,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: File | null): void
-  (e: 'change', value: File | null): void
+  'update:model-value': [file: File | null]
+  'change': [file: File | null]
 }>()
 
 const fileInput = ref<HTMLInputElement | null>(null)

package/lib/components/SInputRadio.vue

@@ -24,8 +24,8 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: boolean): void
-  (e: 'change', value: boolean): void
+  'update:model-value': [value: boolean]
+  'change': [value: boolean]
 }>()
 
 const classes = computed(() => [

package/lib/components/SInputRadios.vue

@@ -47,8 +47,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: ValueType | NullValue): void
-  (e: 'change', value: ValueType | NullValue): void
+  'update:model-value': [value: ValueType | NullValue]
+  'change': [value: ValueType | NullValue]
 }>()
 
 const _value = computed(() => {

package/lib/components/SInputSegments.vue

@@ -35,8 +35,8 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: T): void
-  (e: 'change', value: T): void
+  'update:model-value': [value: T]
+  'change': [value: T]
 }>()
 
 const _value = computed(() => {

package/lib/components/SInputSegmentsOption.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'click'): void
+  click: []
 }>()
 
 function onClick() {

package/lib/components/SInputSelect.vue

@@ -38,8 +38,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: Value): void
-  (e: 'change', value: Value): void
+  'update:model-value': [value: Value]
+  'change': [value: Value]
 }>()
 
 const _value = computed(() => {

package/lib/components/SInputSwitch.vue

@@ -30,8 +30,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: boolean): void
-  (e: 'change', value: boolean): void
+  'update:model-value': [value: boolean]
+  'change': [value: boolean]
 }>()
 
 const _value = computed(() => {

package/lib/components/SInputSwitches.vue

@@ -30,7 +30,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: any[]): void
+  'update:modelValue': [value: any[]]
 }>()
 
 const classes = computed(() => [

package/lib/components/SInputYMD.vue

@@ -42,8 +42,8 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: Value): void
-  (e: 'change', value: Value): void
+  'update:model-value': [value: Value]
+  'change': [value: Value]
 }>()
 
 const _value = computed(() => {

package/lib/components/SMarkdown.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'clicked', payload: LinkSubscriberPayload): void
+  clicked: [payload: LinkSubscriberPayload]
 }>()
 
 const container = shallowRef<Element | null>(null)

package/lib/components/SModal.vue

@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  (e: 'close'): void
+  close: []
 }>()
 
 const el = ref<any>(null)

package/lib/components/SPagination.vue

@@ -21,8 +21,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'prev'): void
-  (e: 'next'): void
+  prev: []
+  next: []
 }>()
 
 const { t } = useTrans({

package/lib/components/SPill.vue

@@ -15,7 +15,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'click'): void
+  click: []
 }>()
 
 const classes = computed(() => [

package/lib/components/STable.vue

@@ -5,7 +5,7 @@ import xor from 'lodash-es/xor'
 import { computed, nextTick, reactive, ref, shallowRef, toValue, unref, watch } from 'vue'
 import { type Table } from '../composables/Table'
 import { smartComputed } from '../support/Reactivity'
-import { getTextWidth } from '../support/Text'
+import { getTextSize } from '../support/Text'
 import SInputCheckbox from './SInputCheckbox.vue'
 import SInputRadio from './SInputRadio.vue'
 import SSpinner from './SSpinner.vue'
@@ -184,6 +184,21 @@ watch(() => unref(props.options.records), () => {
   isSyncingBody = false
 }, { flush: 'post' })
 
+const frozenColumns = smartComputed(() => {
+  const columns = unref(props.options.columns)
+  const keys = Object.keys(columns).filter((key) => columns[key].freeze)
+  if (selected.value !== undefined && keys.length) {
+    keys.unshift('__select')
+  }
+  return keys.filter((key) => ordersToShow.value.includes(key))
+})
+
+const frozenColWidths = smartComputed(() => {
+  // eslint-disable-next-line no-void
+  void blockWidth.value
+  return frozenColumns.value.map((key) => getColWidth(key))
+})
+
 useResizeObserver(block, ([entry]) => {
   blockWidth.value = entry.contentRect.width
 })
@@ -216,12 +231,12 @@ const actionsColumnWidth = computed(() => {
 
     // has only label
     if (label && !icon) {
-      return 1 /* border */ + 12 /* padding */ + getTextWidth(label, font) + 12 /* padding */ + 1 /* border */
+      return 1 /* border */ + 12 /* padding */ + getTextSize(label, font).width + 12 /* padding */ + 1 /* border */
     }
 
     // has both icon and label
     if (icon && label) {
-      return 1 /* border */ + 8 /* padding */ + 16 /* icon */ + 4 /* padding */ + getTextWidth(label, font) + 10 /* padding */ + 1 /* border */
+      return 1 /* border */ + 8 /* padding */ + 16 /* icon */ + 4 /* padding */ + getTextSize(label, font).width + 10 /* padding */ + 1 /* border */
     }
 
     return 0
@@ -337,6 +352,34 @@ function addSelected(item: any) {
 function removeSelected(item: any) {
   updateSelected((selected.value as any[]).filter((i) => i !== item))
 }
+
+function getColWidth(key: string) {
+  if (key === '__select') {
+    return '48px + var(--table-padding-left, 0)'
+  }
+  const adjustedWidth = colWidths[key]
+  if (adjustedWidth && adjustedWidth !== 'auto') {
+    return adjustedWidth
+  }
+  const el = row.value?.children?.[ordersToShow.value.indexOf(key)]
+  if (!el) {
+    return '0px'
+  }
+  return `${el.getBoundingClientRect().width}px`
+}
+
+function getStyles(key: string) {
+  const length = frozenColumns.value.length
+  if (length === 0) { return }
+  const i = frozenColumns.value.indexOf(key)
+  if (i < 0) { return }
+  const widthSum = frozenColWidths.value.slice(0, i).join(' + ')
+  return {
+    '--table-col-position': 'sticky',
+    '--table-col-z-index': length - i, // left to right decreasing
+    '--table-col-left': widthSum ? `calc(${widthSum})` : '0px'
+  }
+}
 </script>
 
 <template>
@@ -361,6 +404,7 @@ function removeSelected(item: any) {
                 :key="key"
                 :name="key"
                 :class-name="unref(options.columns)[key]?.className"
+                :style="getStyles(key)"
                 :width="colWidths[key]"
               >
                 <STableColumn
@@ -419,6 +463,7 @@ function removeSelected(item: any) {
                   :key="key"
                   :name="key"
                   :class-name="unref(options.columns)[key]?.className"
+                  :style="getStyles(key)"
                   :width="colWidths[key]"
                 >
                   <STableCell
@@ -586,8 +631,7 @@ function removeSelected(item: any) {
 }
 
 .STable .col-__select {
-  --table-padding-left: 0;
-  --table-col-width: 48px;
+  --table-col-width: calc(48px + var(--table-padding-left, 0));
 
   :deep(.input) {
     align-items: center;

package/lib/components/STableColumn.vue

@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'resize', value: string): void
+  resize: [value: string]
 }>()
 
 const { container, isOpen, toggle } = useFlyout()

package/lib/composables/Table.ts

@@ -44,6 +44,7 @@ export interface TableColumn<V, R, SV, SR> {
   label?: string
   className?: string
   dropdown?: DropdownSection[]
+  freeze?: boolean
   grow?: boolean
   resizable?: boolean
   cell?: TableCell<V, R> | TableColumnCellFn<V, R>

package/lib/support/Text.ts

@@ -2,16 +2,16 @@
 
 let _canvas: HTMLCanvasElement
 
-export function getTextWidth(text: string, font: string): number
-export function getTextWidth(text: string, el: HTMLElement): number
-
-export function getTextWidth(text: string, fontOrEl: string | HTMLElement): number {
+export function getTextSize(text: string, fontOrEl: string | HTMLElement) {
   const canvas = _canvas || (_canvas = document.createElement('canvas'))
   const context = canvas.getContext('2d')!
   context.font = typeof fontOrEl === 'string' ? fontOrEl : getCanvasFont(fontOrEl)
   const metrics = context.measureText(text)
 
-  return metrics.width
+  return {
+    width: metrics.width,
+    height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
+  }
 }
 
 function getCanvasFont(el: HTMLElement) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
   "type": "module",
-  "version": "4.14.2",
+  "version": "4.16.0",
   "packageManager": "pnpm@9.15.4",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",