@globalbrain/sefirot 4.14.2 → 4.15.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/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

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

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