@globalbrain/sefirot 4.25.1 → 4.27.0

package/lib/components/SContent.vue

@@ -104,6 +104,7 @@
 }
 
 .SContent :deep(ol > li::before) {
+  position: absolute;
   margin-right: 3px;
   margin-left: -20px;
   color: var(--c-text-1);

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/SMarkdown.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { type Component, computed } from 'vue'
-import { useMarkdown } from '../composables/Markdown'
+import { type UseMarkdownOptions, useMarkdown } from '../composables/Markdown'
 
-const props = withDefaults(defineProps<{
+export interface SMarkdownProps extends UseMarkdownOptions {
   tag?: Component | string
   content: string
-  html?: boolean
-  inline?: boolean
-}>(), {
+}
+
+const props = withDefaults(defineProps<SMarkdownProps>(), {
   tag: 'div',
   html: true
 })
 
-const markdown = useMarkdown({ html: props.html, inline: props.inline })
+const markdown = useMarkdown(props)
 const rendered = computed(() => markdown(props.content))
 </script>
 

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)
 

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/Markdown.ts

@@ -1,8 +1,71 @@
 import DOMPurify, { type Config } from 'dompurify'
-import MarkdownIt, { type Options as MarkdownItOptions } from 'markdown-it'
+import MarkdownIt from 'markdown-it'
 
 export type UseMarkdown = (source: string, inline?: boolean) => string
 
+// vendored for vue compatibility
+export interface MarkdownItOptions {
+  /**
+   * Set `true` to enable HTML tags in source. Be careful!
+   * That's not safe! You may need external sanitizer to protect output from XSS.
+   * It's better to extend features via plugins, instead of enabling HTML.
+   * @default false
+   */
+  html?: boolean | undefined
+
+  /**
+   * Set `true` to add '/' when closing single tags
+   * (`<br />`). This is needed only for full CommonMark compatibility. In real
+   * world you will need HTML output.
+   * @default false
+   */
+  xhtmlOut?: boolean | undefined
+
+  /**
+   * Set `true` to convert `\n` in paragraphs into `<br>`.
+   * @default false
+   */
+  breaks?: boolean | undefined
+
+  /**
+   * CSS language class prefix for fenced blocks.
+   * Can be useful for external highlighters.
+   * @default 'language-'
+   */
+  langPrefix?: string | undefined
+
+  /**
+   * Set `true` to autoconvert URL-like text to links.
+   * @default false
+   */
+  linkify?: boolean | undefined
+
+  /**
+   * Set `true` to enable [some language-neutral replacement](https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/replacements.js) +
+   * quotes beautification (smartquotes).
+   * @default false
+   */
+  typographer?: boolean | undefined
+
+  /**
+   * Double + single quotes replacement
+   * pairs, when typographer enabled and smartquotes on. For example, you can
+   * use `'«»„“'` for Russian, `'„“‚‘'` for German, and
+   * `['«\xA0', '\xA0»', '‹\xA0', '\xA0›']` for French (including nbsp).
+   * @default '“”‘’'
+   */
+  quotes?: string | string[]
+
+  /**
+   * Highlighter function for fenced code blocks.
+   * Highlighter `function (str, lang, attrs)` should return escaped HTML. It can
+   * also return empty string if the source was not changed and should be escaped
+   * externally. If result starts with <pre... internal wrapper is skipped.
+   * @default null
+   */
+  highlight?: ((str: string, lang: string, attrs: string) => string) | null | undefined
+}
+
 export interface UseMarkdownOptions extends MarkdownItOptions {
   config?: (md: MarkdownIt) => void
   /** @default false */
@@ -40,6 +103,16 @@ export function useMarkdown({
   //
 
   const md = new MarkdownIt({ html: true, linkify: true, ...options })
+
+  md.renderer.rules.ordered_list_open = (tokens, idx, options, env, self) => {
+    const token = tokens[idx]
+    const start = Number(token.attrGet('start')) - 1
+    if (start >= 0) {
+      token.attrSet('style', `counter-reset: s-medium-counter ${start}`)
+    }
+    return self.renderToken(tokens, idx, options)
+  }
+
   config?.(md)
 
   return (source, inline = _inline) => {

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

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