@globalbrain/sefirot 4.25.0 → 4.26.0

package/lib/components/SDataList.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { provideDataListState } from '../composables/DataList'
+
+const props = withDefaults(defineProps<{
+  labelWidth?: string
+}>(), {
+  labelWidth: '128px'
+})
+
+provideDataListState({
+  labelWidth: computed(() => props.labelWidth)
+})
+</script>
+
+<template>
+  <div class="SDataList">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SDataList :deep(.SDataListItem::after),
+.SDataList :deep(.SDataListItem:first-child::before) {
+  display: block;
+  border-top: 1px dashed var(--c-divider);
+  width: 100%;
+  content: "";
+}
+</style>

package/lib/components/SDataListItem.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { Comment, Text, computed, useSlots } from 'vue'
+import { useDataListState } from '../composables/DataList'
+
+const props = withDefaults(defineProps<{
+  dir?: 'row' | 'column'
+  maxWidth?: string
+  align?: 'left' | 'right'
+  preWrap?: boolean
+  lineClamp?: string | number
+  tnum?: boolean
+}>(), {
+  dir: 'row',
+  maxWidth: '100%'
+})
+
+const {
+  labelWidth
+} = useDataListState()
+
+const slots = useSlots()
+
+const classes = computed(() => [
+  props.dir,
+  props.align,
+  { 'pre-wrap': props.preWrap },
+  { 'line-clamp': !!props.lineClamp },
+  { tnum: props.tnum }
+])
+
+const labelStyles = computed(() => ({
+  width: props.dir === 'row' ? labelWidth.value : '100%'
+}))
+
+const valueStyles = computed(() => ({
+  'max-width': props.maxWidth,
+  '-webkit-line-clamp': props.lineClamp
+}))
+
+const hasValue = computed(() => hasSlotContent('value'))
+
+function hasSlotContent(name = 'default'): boolean {
+  return !!slots[name]?.().some((s) => {
+    if (s.type === Comment) {
+      return false
+    }
+    if (s.type === Text && typeof s.children === 'string') {
+      return !!s.children.trim()
+    }
+    return true
+  })
+}
+</script>
+
+<template>
+  <div class="SDataListItem" :class="classes">
+    <div class="content">
+      <div class="label" :style="labelStyles">
+        <slot name="label" />
+      </div>
+      <div v-if="!hasValue" class="empty">
+        —
+      </div>
+      <div v-else-if="hasValue" class="value" :style="valueStyles">
+        <slot name="value" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SDataListItem {
+  width: 100%;
+  max-width: 100%;
+}
+
+.content {
+  display: flex;
+  padding: 10px 0;
+  min-height: 48px;
+}
+
+.label {
+  flex-shrink: 0;
+  padding: 2px 0;
+  line-height: 24px;
+  font-size: 14px;
+  color: var(--c-text-2);
+}
+
+.empty {
+  flex-grow: 1;
+  padding: 2px 0;
+  line-height: 24px;
+  font-size: 14px;
+  color: var(--c-text-3);
+}
+
+.value {
+  flex-grow: 1;
+  padding: 2px 0;
+  line-height: 24px;
+  font-size: 14px;
+  color: var(--c-text-1);
+}
+
+.SDataListItem.row .content {
+  flex-direction: row;
+}
+
+.SDataListItem.column .content {
+  flex-direction: column;
+}
+
+.SDataListItem.left .value {
+  text-align: left;
+}
+
+.SDataListItem.right .value {
+  text-align: right;
+}
+
+.SDataListItem.pre-wrap .value {
+  white-space: pre-wrap;
+}
+
+.SDataListItem.line-clamp .value {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.SDataListItem.tnum .value {
+  font-feature-settings: "tnum";
+}
+</style>

package/lib/components/SInputDropdown.vue

@@ -141,6 +141,7 @@ function handleArray(value: OptionValue) {
     :check-text
     :check-color
     :validation
+    :hide-error
   >
     <div class="container" ref="container">
       <div

package/lib/components/SInputSegments.vue

@@ -61,6 +61,7 @@ function onSelect(value: T) {
   <SInputBase
     class="SInputSegments"
     :class="[size ?? 'small', { block }]"
+    :size
     :label
     :note
     :info

package/lib/components/STable.vue

@@ -61,6 +61,13 @@ const cellOfColToGrow = computed(() => {
 const colWidths = reactive<Record<string, string>>({})
 const blockWidth = ref<number | undefined>()
 
+watch(() => unref(props.options.columns), (columns) => {
+  Object.keys(columns).forEach((key) => {
+    const width = columns[key]?.width
+    if (width) { colWidths[key] = width }
+  })
+}, { immediate: true, deep: true, flush: 'pre' })
+
 const showHeader = computed(() => {
   const header = unref(props.options.header)
 
@@ -355,7 +362,7 @@ function removeSelected(item: any) {
 
 function getColWidth(key: string) {
   if (key === '__select') {
-    return '48px + var(--table-padding-left, 0)'
+    return '48px + var(--table-padding-left)'
   }
   const adjustedWidth = colWidths[key]
   if (adjustedWidth && adjustedWidth !== 'auto') {
@@ -631,7 +638,7 @@ function getStyles(key: string) {
 }
 
 .STable .col-__select {
-  --table-col-width: calc(48px + var(--table-padding-left, 0));
+  --table-col-width: calc(48px + var(--table-padding-left));
 
   :deep(.input) {
     align-items: center;

package/lib/components/STableItem.vue

@@ -25,14 +25,14 @@ const classes = computed(() => [
 <style scoped lang="postcss">
 .STableItem {
   position: var(--table-col-position, relative);
-  left: var(--table-col-left, 0);
+  left: var(--table-col-left, 0px);
   right: var(--table-col-right, auto);
   z-index: var(--table-col-z-index, auto);
   flex-shrink: 0;
   flex-grow: 1;
-  border-left: var(--table-col-border-left, 0) solid var(--c-gutter);
+  border-left: var(--table-col-border-left, 0px) solid var(--c-gutter);
   border-right: 1px solid var(--c-gutter);
-  margin-left: calc(var(--table-col-border-left, 0) * -1);
+  margin-left: calc(var(--table-col-border-left, 0px) * -1);
   min-width: var(--table-col-width);
   max-width: var(--table-col-width);
 

package/lib/composables/DataList.ts

@@ -0,0 +1,23 @@
+import { type ComputedRef, inject, provide } from 'vue'
+
+export interface DataListState {
+  labelWidth: ComputedRef<string>
+}
+
+export const DataListStateKey = 'sefirot-data-list-state-key'
+
+export function provideDataListState(state: DataListState): void {
+  provide(DataListStateKey, state)
+}
+
+export function useDataListState(): DataListState {
+  const state = inject<DataListState | null>(DataListStateKey, null) || null
+  if (!state) {
+    throw new Error(
+      'Unexpected call to `useDataListState`. This probably means you are using'
+      + '`<DDataList>` child component outside of `<DDataList>`. Make sure'
+      + ' to wrap the component within `<DDataList>` component.'
+    )
+  }
+  return state
+}

package/lib/composables/Table.ts

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

package/lib/mixins/DataList.ts

@@ -0,0 +1,15 @@
+import { type App } from 'vue'
+import SDataList from '../components/SDataList.vue'
+import SDataListItem from '../components/SDataListItem.vue'
+
+export function mixin(app: App): void {
+  app.component('SDataList', SDataList)
+  app.component('SDataListItem', SDataListItem)
+}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    SDataList: typeof SDataList
+    SDataListItem: typeof SDataListItem
+  }
+}

package/lib/mixins/Fundamental.ts

@@ -6,6 +6,7 @@ import SModal from '../components/SModal.vue'
 import STrans from '../components/STrans.vue'
 import { mixin as mixinCard } from './Card'
 import { mixin as mixinControl } from './Control'
+import { mixin as mixinDataList } from './DataList'
 import { mixin as mixinDesc } from './Desc'
 import { mixin as mixinDoc } from './Doc'
 import { mixin as mixinGrid } from './Grid'
@@ -14,6 +15,7 @@ import { mixin as mixinHead } from './Head'
 export function mixin(app: App): void {
   mixinCard(app)
   mixinControl(app)
+  mixinDataList(app)
   mixinDesc(app)
   mixinDoc(app)
   mixinGrid(app)

package/lib/styles/variables.css

@@ -871,8 +871,8 @@
   --table-border-left: var(--table-border);
   --table-border-radius: 6px;
 
-  --table-padding-right: 0;
-  --table-padding-left: 0;
+  --table-padding-right: 0px;
+  --table-padding-left: 0px;
 
   --table-cell-font-size: 14px;
   --table-cell-font-weight: 400;

package/package.json

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