@globalbrain/sefirot 3.15.0 → 3.16.0

package/lib/components/SButton.vue

@@ -36,6 +36,8 @@ const props = defineProps<{
   type?: Type
   mode?: Mode
   icon?: any
+  leadIcon?: any
+  trailIcon?: any
   iconMode?: Mode
   label?: string
   labelMode?: Mode
@@ -52,12 +54,15 @@ const emit = defineEmits<{
   (e: 'disabled-click'): void
 }>()
 
+const _leadIcon = computed(() => props.leadIcon ?? props.icon)
+
 const classes = computed(() => [
   props.size ?? 'medium',
   props.type ?? 'fill',
   props.mode ?? 'default',
   { 'has-label': props.label },
-  { 'has-icon': props.icon },
+  { 'has-lead-icon': _leadIcon.value },
+  { 'has-trail-icon': props.trailIcon },
   { loading: props.loading },
   { rounded: props.rounded },
   { block: props.block },
@@ -104,12 +109,15 @@ function handleClick(): void {
       @click="handleClick"
     >
       <span class="content">
-        <span v-if="icon" class="icon" :class="iconMode">
-          <SIcon :icon="icon" class="icon-svg" />
+        <span v-if="_leadIcon" class="icon" :class="iconMode">
+          <SIcon :icon="_leadIcon" class="icon-svg" />
         </span>
         <span v-if="label" class="label" :class="labelMode">
           {{ label }}
         </span>
+        <span v-if="trailIcon" class="icon" :class="iconMode">
+          <SIcon :icon="trailIcon" class="icon-svg" />
+        </span>
       </span>
 
       <transition name="fade">
@@ -192,11 +200,12 @@ function handleClick(): void {
   min-height: 28px;
   font-size: var(--button-font-size, var(--button-mini-font-size));
 
-  &.rounded            { border-radius: 16px; }
-  &.has-label          { padding: var(--button-padding, 0 12px); }
-  &.has-label.has-icon { padding: var(--button-padding, 0 10px 0 8px); }
-  .content             { gap: 4px; }
-  .icon-svg            { width: 16px; height: 16px; }
+  &.rounded                  { border-radius: 16px; }
+  &.has-label                { padding: var(--button-padding, 0 12px); }
+  &.has-label.has-lead-icon  { padding: var(--button-padding, 0 10px 0 8px); }
+  &.has-label.has-trail-icon { padding: var(--button-padding, 0 8px 0 10px); }
+  .content                   { gap: 4px; }
+  .icon-svg                  { width: 16px; height: 16px; }
 }
 
 .SButton.small {
@@ -204,11 +213,12 @@ function handleClick(): void {
   min-height: 32px;
   font-size: var(--button-font-size, var(--button-small-font-size));
 
-  &.rounded            { border-radius: 16px; }
-  &.has-label          { padding: var(--button-padding, 0 12px); }
-  &.has-label.has-icon { padding: var(--button-padding, 0 10px 0 8px); }
-  .content             { gap: 6px; }
-  .icon-svg            { width: 16px; height: 16px; }
+  &.rounded                  { border-radius: 16px; }
+  &.has-label                { padding: var(--button-padding, 0 12px); }
+  &.has-label.has-lead-icon  { padding: var(--button-padding, 0 10px 0 8px); }
+  &.has-label.has-trail-icon { padding: var(--button-padding, 0 8px 0 10px); }
+  .content                   { gap: 6px; }
+  .icon-svg                  { width: 16px; height: 16px; }
 }
 
 .SButton.medium {
@@ -216,11 +226,12 @@ function handleClick(): void {
   min-height: 40px;
   font-size: var(--button-font-size, var(--button-medium-font-size));
 
-  &.rounded            { border-radius: 20px; }
-  &.has-label          { padding: var(--button-padding, 0 16px); }
-  &.has-label.has-icon { padding: var(--button-padding, 0 12px 0 10px); }
-  .content             { gap: 6px; }
-  .icon-svg            { width: 18px; height: 18px; }
+  &.rounded                  { border-radius: 20px; }
+  &.has-label                { padding: var(--button-padding, 0 16px); }
+  &.has-label.has-lead-icon  { padding: var(--button-padding, 0 12px 0 10px); }
+  &.has-label.has-trail-icon { padding: var(--button-padding, 0 10px 0 12px); }
+  .content                   { gap: 6px; }
+  .icon-svg                  { width: 18px; height: 18px; }
 }
 
 .SButton.large {
@@ -228,11 +239,12 @@ function handleClick(): void {
   min-height: 48px;
   font-size: var(--button-font-size, var(--button-large-font-size));
 
-  &.rounded            { border-radius: 24px; }
-  &.has-label          { padding: var(--button-padding, 0 20px); }
-  &.has-label.has-icon { padding: var(--button-padding, 0 14px 0 12px); }
-  .content             { gap: 6px; }
-  .icon-svg            { width: 18px; height: 18px; }
+  &.rounded                  { border-radius: 24px; }
+  &.has-label                { padding: var(--button-padding, 0 20px); }
+  &.has-label.has-lead-icon  { padding: var(--button-padding, 0 14px 0 12px); }
+  &.has-label.has-trail-icon { padding: var(--button-padding, 0 12px 0 14px); }
+  .content                   { gap: 6px; }
+  .icon-svg                  { width: 18px; height: 18px; }
 }
 
 .SButton.jumbo {
@@ -240,11 +252,12 @@ function handleClick(): void {
   min-height: 64px;
   font-size: var(--button-font-size, var(--button-jumbo-font-size));
 
-  &.rounded            { border-radius: 32px; }
-  &.has-label          { padding: var(--button-padding, 0 24px); }
-  &.has-label.has-icon { padding: var(--button-padding, 0 20px 0 18px); }
-  .content             { gap: 8px; }
-  .icon-svg            { width: 20px; height: 20px; }
+  &.rounded                  { border-radius: 32px; }
+  &.has-label                { padding: var(--button-padding, 0 24px); }
+  &.has-label.has-lead-icon  { padding: var(--button-padding, 0 20px 0 18px); }
+  &.has-label.has-trail-icon { padding: var(--button-padding, 0 18px 0 20px); }
+  .content                   { gap: 8px; }
+  .icon-svg                  { width: 20px; height: 20px; }
 }
 
 .SButton.disabled {

package/lib/components/SCard.vue

@@ -10,13 +10,13 @@ const props = defineProps<{
   mode?: Mode
 }>()
 
-const { isCollapsed } = provideCardState()
-
 const classes = computed(() => [
   props.size,
   props.mode ?? 'neutral',
   { collapsed: isCollapsed.value }
 ])
+
+const { isCollapsed } = provideCardState()
 </script>
 
 <template>

package/lib/components/SCardBlock.vue

@@ -1,25 +1,35 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { type CardBlockSize, provideCardBlockSize } from '../composables/Card'
+
+export type { CardBlockSize as Size }
+
+// @deprecated Use CSS utility classes instead.
 export type Space = 'compact' | 'wide' | 'xwide'
 
-defineProps<{
+const props = defineProps<{
+  size?: CardBlockSize
+
+  // @deprecated Use CSS utility classes instead.
   space?: Space
 }>()
+
+provideCardBlockSize(computed(() => props.size ?? null))
 </script>
 
 <template>
-  <div class="SCardBlock" :class="[space]">
+  <div class="SCardBlock" :class="[size, space]">
     <slot />
   </div>
 </template>
 
 <style scoped lang="postcss">
 .SCardBlock {
-  padding: var(--card-padding, 0);
   background-color: var(--c-bg-elv-3);
 
-  &.compact { padding: 24px; }
-  &.wide    { padding: 32px; }
-  &.xwide   { padding: 48px; }
+  &.compact { padding: 12px; }
+  &.wide    { padding: 16px; }
+  &.xwide   { padding: 24px; }
 }
 
 .SCard > .SCardBlock:first-child {
@@ -31,4 +41,20 @@ defineProps<{
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
 }
+
+.SCardBlock.xsmall,
+.SCardBlock.small,
+.SCardBlock.medium,
+.SCardBlock.large,
+.SCardBlock.xlarge {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.SCardBlock.xsmall { height: 40px; }
+.SCardBlock.small  { height: 48px; }
+.SCardBlock.medium { height: 56px; }
+.SCardBlock.large  { height: 64px; }
+.SCardBlock.xlarge { height: 80px; }
 </style>

package/lib/components/SControl.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useCardBlockSize } from '../composables/Card'
+import { type ControlSize, provideControlSize } from '../composables/Control'
+
+export type { ControlSize as Size }
+
+const props = defineProps<{
+  size?: ControlSize
+}>()
+
+const cardSize = useCardBlockSize()
+
+const sizeDict = {
+  xsmall: 'small',
+  small: 'small',
+  medium: 'small',
+  large: 'medium',
+  xlarge: 'medium',
+  null: null
+} as const
+
+const _size = computed(() => {
+  return props.size ?? sizeDict[cardSize.value ?? 'null'] ?? 'small'
+})
+
+const classes = computed(() => [
+  _size.value,
+  cardSize.value ? `card-size-${cardSize.value}` : null
+])
+
+provideControlSize(_size)
+</script>
+
+<template>
+  <div class="SControl" :class="classes">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SControl {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.SControl.small  { gap: 8px; height: 32px; }
+.SControl.medium { gap: 12px; height: 40px; }
+</style>

package/lib/components/SControlButton.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { useControlSize } from '../composables/Control'
+import SButton, { type Mode, type Tooltip, type Type } from './SButton.vue'
+
+defineProps<{
+  tag?: string
+  type?: Type
+  mode?: Mode
+  icon?: any
+  iconMode?: Mode
+  label?: string
+  labelMode?: Mode
+  href?: string
+  loading?: boolean
+  disabled?: boolean
+  tooltip?: Tooltip
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+
+const size = useControlSize()
+</script>
+
+<template>
+  <div class="SControlButton">
+    <SButton
+      :tag="tag"
+      :size="size"
+      :type="type"
+      :mode="mode"
+      :icon="icon"
+      :icon-mode="iconMode"
+      :label="label"
+      :label-mode="labelMode"
+      :href="href"
+      :tooltip="tooltip"
+      block
+      :loading="loading"
+      :disabled="disabled"
+      @click="$emit('click')"
+    />
+  </div>
+</template>

package/lib/components/SControlCenter.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { provideControlPosition } from '../composables/Control'
+
+provideControlPosition('center')
+</script>
+
+<template>
+  <div class="SControlCenter">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SControlCenter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.SControl.small .SControlCenter  { gap: 8px; }
+.SControl.medium .SControlCenter { gap: 12px; }
+</style>

package/lib/components/SControlInputSearch.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import IconMagnifyingGlass from '@iconify-icons/ph/magnifying-glass-bold'
+import { computed } from 'vue'
+import { useControlSize } from '../composables/Control'
+import { useTrans } from '../composables/Lang'
+import { type Validatable } from '../composables/V'
+import SInputText, { type Align, type TextColor } from './SInputText.vue'
+
+const props = defineProps<{
+  placeholder?: string
+  unitAfter?: any
+  textColor?: TextColor | ((value: string | null) => TextColor)
+  align?: Align
+  disabled?: boolean
+  value?: string | null
+  modelValue?: string | null
+  displayValue?: string | null
+  validation?: Validatable
+}>()
+
+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
+}>()
+
+const { t } = useTrans({
+  en: { placeholder: 'Search items' },
+  ja: { placeholder: '検索する' }
+})
+
+const size = useControlSize()
+
+const sizeDict = {
+  small: 'mini',
+  medium: 'small'
+} as const
+
+const _value = computed(() => {
+  return props.modelValue ?? props.value ?? null
+})
+</script>
+
+<template>
+  <div class="SControlInputSearch">
+    <SInputText
+      :size="sizeDict[size]"
+      type="search"
+      :placeholder="placeholder ?? t.placeholder"
+      :unit-before="IconMagnifyingGlass"
+      :model-value="_value"
+      :validation="validation"
+      hide-error
+      @update:model-value="$emit('update:model-value', $event)"
+      @input="$emit('input', $event)"
+      @blur="$emit('blur', $event)"
+      @enter="$emit('enter', $event)"
+    />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SControlInputSearch {
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+</style>

package/lib/components/SControlLeft.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { provideControlPosition } from '../composables/Control'
+
+provideControlPosition('left')
+</script>
+
+<template>
+  <div class="SControlLeft">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SControlLeft {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.SControl.small .SControlLeft  { gap: 8px; }
+.SControl.medium .SControlLeft { gap: 12px; }
+</style>

package/lib/components/SControlPagination.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useControlPosition, useControlSize } from '../composables/Control'
+import SPagination, { type Size } from './SPagination.vue'
+
+defineProps<{
+  size?: Size
+  total: number
+  page: number
+  perPage: number
+}>()
+
+const size = useControlSize()
+const position = useControlPosition()
+</script>
+
+<template>
+  <div class="SControlPagination">
+    <SPagination
+      :size="size"
+      :align="position"
+      :total="total"
+      :page="page"
+      :per-page="perPage"
+    />
+  </div>
+</template>

package/lib/components/SControlRight.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { provideControlPosition } from '../composables/Control'
+
+provideControlPosition('right')
+</script>
+
+<template>
+  <div class="SControlRight">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SControlRight {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.SControl.small .SControlRight  { gap: 8px; }
+.SControl.medium .SControlRight { gap: 12px; }
+</style>

package/lib/components/SControlText.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="SControlText">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SControlText {
+  line-height: 24px;
+  font-size: 14px;
+}
+</style>

package/lib/components/SInputText.vue

@@ -6,12 +6,7 @@ import { isString } from '../support/Utils'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
-export type Align = 'left' | 'center' | 'right'
-export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
-export type TextColor = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-
-const props = defineProps<{
+export interface Props {
   size?: Size
   name?: string
   label?: string
@@ -32,7 +27,14 @@ const props = defineProps<{
   displayValue?: string | null
   hideError?: boolean
   validation?: Validatable
-}>()
+}
+
+export type Size = 'mini' | 'small' | 'medium'
+export type Align = 'left' | 'center' | 'right'
+export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type TextColor = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   (e: 'update:model-value', value: string | null): void

package/lib/components/SPagination.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import IconCaretLeft from '@iconify-icons/ph/caret-left-bold'
+import IconCaretRight from '@iconify-icons/ph/caret-right-bold'
+import { computed } from 'vue'
+import { useTrans } from '../composables/Lang'
+import { format } from '../support/Num'
+import SButton from './SButton.vue'
+
+export type Size = 'mini' | 'small' | 'medium'
+export type Align = 'left' | 'center' | 'right'
+
+const props = withDefaults(defineProps<{
+  size?: Size
+  align?: Align
+  total: number
+  page: number
+  perPage: number
+}>(), {
+  size: 'medium',
+  align: 'center'
+})
+
+const emit = defineEmits<{
+  (e: 'prev'): void
+  (e: 'next'): void
+}>()
+
+const { t } = useTrans({
+  en: { prev: 'Prev', next: 'Next' },
+  ja: { prev: '前へ', next: '次へ' }
+})
+
+const from = computed(() => {
+  return props.page === 1 ? 1 : (props.page - 1) * props.perPage + 1
+})
+
+const to = computed(() => {
+  const value = props.page * props.perPage
+
+  return value > props.total ? props.total : value
+})
+
+const hasPrev = computed(() => {
+  return props.page > 1
+})
+
+const hasNext = computed(() => {
+  return to.value < props.total
+})
+
+function prev() {
+  hasPrev.value && emit('prev')
+}
+
+function next() {
+  hasNext.value && emit('next')
+}
+</script>
+
+<template>
+  <div class="SPagination" :class="[size, align]">
+    <div class="button prev">
+      <SButton
+        type="outline"
+        mode="mute"
+        :size="size"
+        :lead-icon="IconCaretLeft"
+        :label="t.prev"
+        :disabled="!hasPrev"
+        @click="prev"
+      />
+    </div>
+    <div class="text">
+      {{ format(from) }}–{{ format(to) }} of {{ format(props.total) }}
+    </div>
+    <div class="button next">
+      <SButton
+        type="outline"
+        mode="mute"
+        :size="size"
+        :trail-icon="IconCaretRight"
+        :label="t.next"
+        :disabled="!hasNext"
+        @click="next"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SPagination {
+  display: flex;
+  align-items: center;
+}
+
+.text {
+  padding: 0 8px;
+  line-height: 24px;
+  font-size: 14px;
+  color: var(--c-text-2);
+}
+
+.SPagination.mini {
+  gap: 8px;
+}
+
+.SPagination.small {
+  gap: 8px;
+}
+
+.SPagination.medium {
+  gap: 12px;
+}
+
+.SPagination.left {
+  .prev { order: 1; }
+  .next { order: 2; }
+  .text { order: 3; }
+}
+
+.SPagination.center {
+  .prev { order: 1; }
+  .text { order: 2; }
+  .next { order: 3; }
+}
+
+.SPagination.right {
+  .text { order: 1; }
+  .prev { order: 2; }
+  .next { order: 3; }
+}
+</style>

package/lib/components/STable.vue

@@ -491,7 +491,9 @@ function updateSelected(selected: unknown[]) {
   width: 100%;
 
   .STable.borderless & {
+    border-top: 0;
     border-right: 0;
+    border-bottom: 0;
     border-left: 0;
     border-radius: 0;
   }
@@ -523,7 +525,8 @@ function updateSelected(selected: unknown[]) {
     display: none;
   }
 
-  .STable.has-header & {
+  .STable.has-header &,
+  .STable.borderless & {
     border-radius: 0;
   }
 }
@@ -533,7 +536,8 @@ function updateSelected(selected: unknown[]) {
   line-height: 0;
   max-height: var(--table-max-height, 100%);
 
-  .STable.has-footer & {
+  .STable.has-footer &,
+  .STable.borderless & {
     border-radius: 0;
   }
 }

package/lib/components/STableColumn.vue

@@ -148,7 +148,7 @@ function stopDialogPositionListener() {
 
 <style scoped lang="postcss">
 .STableColumn {
-  background-color: var(--c-bg-elv-4);
+  background-color: var(--c-bg-elv-3);
 
   &.has-header {
     border-top: 1px solid var(--c-gutter);

package/lib/components/SW.vue

@@ -1,3 +1,3 @@
 <template>
-  <wbr><span class="u-nowrap"><slot /></span>
+  <wbr><span class="s-nowrap"><slot /></span>
 </template>

package/lib/composables/Card.ts

@@ -1,4 +1,4 @@
-import { type Ref, inject, provide, ref } from 'vue'
+import { type ComputedRef, type Ref, computed, inject, provide, ref, toValue } from 'vue'
 
 export interface CardState {
   isCollapsed: Ref<boolean>
@@ -6,7 +6,10 @@ export interface CardState {
   toggleCollapse(): void
 }
 
-export const CardStateKey = 'card-state'
+export type CardBlockSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
+
+export const CardStateKey = 'sefirot-card-state-key'
+export const CardBlockSizeKey = 'sefirot-card-block-size-key'
 
 export function provideCardState(): CardState {
   const isCollapsed = ref(false)
@@ -30,8 +33,12 @@ export function provideCardState(): CardState {
   return cardState
 }
 
+export function provideCardBlockSize(cardBlockSize: ComputedRef<CardBlockSize | null>): void {
+  provide(CardBlockSizeKey, cardBlockSize)
+}
+
 export function useCardState(): CardState {
-  const cardState = inject<CardState | null>(CardStateKey, null)
+  const cardState = inject<CardState | null>(CardStateKey, null) || null
 
   if (!cardState) {
     throw new Error(
@@ -43,3 +50,8 @@ export function useCardState(): CardState {
 
   return cardState
 }
+
+export function useCardBlockSize(): ComputedRef<CardBlockSize | null> {
+  const cardSize = inject<ComputedRef<CardBlockSize | null> | null>(CardBlockSizeKey, null) || null
+  return computed(() => toValue(cardSize))
+}

package/lib/composables/Control.ts

@@ -0,0 +1,43 @@
+import { type ComputedRef, computed, inject, provide, toValue } from 'vue'
+
+export type ControlSize = 'small' | 'medium'
+export type ControlPosition = 'left' | 'center' | 'right'
+
+export const ControlSizeKey = 'sefirot-control-size-key'
+export const ControlPositionKey = 'sefirot-control-position-key'
+
+export function provideControlSize(controlSize: ComputedRef<ControlSize>): void {
+  provide(ControlSizeKey, controlSize)
+}
+
+export function provideControlPosition(controlPosition: ControlPosition): void {
+  provide(ControlPositionKey, controlPosition)
+}
+
+export function useControlSize(): ComputedRef<ControlSize> {
+  const controlSize = inject<ComputedRef<ControlSize> | null>(ControlSizeKey, null) || null
+
+  if (!controlSize) {
+    throw new Error(
+      '[sefirot] Unexpected call to `useControlSize`. This probably means'
+      + ' you are using `<SControl>` child component outside of `<SControl>`.'
+      + ' Make sure to wrap the component within `<SControl>` component.'
+    )
+  }
+
+  return computed(() => toValue(controlSize))
+}
+
+export function useControlPosition(): ControlPosition {
+  const controlPosition = inject<ControlPosition | null>(ControlPositionKey, null) || null
+
+  if (!controlPosition) {
+    throw new Error(
+      '[sefirot] Unexpected call to `useControlPosition`. This probably means'
+      + ' you are using `<SControl>` child component outside of `<SControl>`.'
+      + ' Make sure to wrap the component within `<SControl>` component.'
+    )
+  }
+
+  return controlPosition
+}

package/lib/composables/Table.ts

@@ -8,27 +8,29 @@ export interface Table<
   R extends Record<string, any> = any,
   SR extends Record<string, any> = any
 > {
+  records?: MaybeRef<R[] | null | undefined>
   orders: MaybeRef<O[]>
   columns: MaybeRef<TableColumns<O, R, SR>>
-  menu?: MaybeRef<TableMenu[] | TableMenu[][]>
+  summary?: MaybeRef<SR | null | undefined>
+  indexField?: keyof R
+  loading?: MaybeRef<boolean | undefined>
+  rowSize?: MaybeRef<number | undefined>
+  borderless?: MaybeRef<boolean>
+
+  /**
+   * @deprecated Use `<SControl>` to add equivalent features.
+  */
   actions?: MaybeRef<TableHeaderAction[]>
-  records?: MaybeRef<R[] | null | undefined>
+  menu?: MaybeRef<TableMenu[] | TableMenu[][]>
   header?: MaybeRef<boolean | undefined>
   footer?: MaybeRef<boolean | undefined>
-  summary?: MaybeRef<SR | null | undefined>
   total?: MaybeRef<number | null | undefined>
   page?: MaybeRef<number | null | undefined>
   perPage?: MaybeRef<number | null | undefined>
-  /** @deprecated use `actions` instead */
   reset?: MaybeRef<boolean | undefined>
-  borderless?: MaybeRef<boolean>
-  loading?: MaybeRef<boolean | undefined>
-  rowSize?: MaybeRef<number | undefined>
   borderSize?: MaybeRef<number | undefined>
-  indexField?: keyof R
   onPrev?(): void
   onNext?(): void
-  /** @deprecated use `actions` instead */
   onReset?(): void
 }
 

package/lib/mixins/Control.ts

@@ -0,0 +1,30 @@
+import { type App } from 'vue'
+import SControl from '../components/SControl.vue'
+import SControlButton from '../components/SControlButton.vue'
+import SControlCenter from '../components/SControlCenter.vue'
+import SControlInputSearch from '../components/SControlInputSearch.vue'
+import SControlLeft from '../components/SControlLeft.vue'
+import SControlRight from '../components/SControlRight.vue'
+import SControlText from '../components/SControlText.vue'
+
+export function mixin(app: App): void {
+  app.component('SControl', SControl)
+  app.component('SControlButton', SControlButton)
+  app.component('SControlCenter', SControlCenter)
+  app.component('SControlInputSearch', SControlInputSearch)
+  app.component('SControlLeft', SControlLeft)
+  app.component('SControlRight', SControlRight)
+  app.component('SControlText', SControlText)
+}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    SControl: typeof SControl
+    SControlButton: typeof SControlButton
+    SControlCenter: typeof SControlCenter
+    SControlInputSearch: typeof SControlInputSearch
+    SControlLeft: typeof SControlLeft
+    SControlRight: typeof SControlRight
+    SControlText: typeof SControlText
+  }
+}

package/lib/styles/utilities.css

@@ -1,3 +1,113 @@
-.u-nowrap {
-  white-space: nowrap;
-}
+.bg-elv-1 { background-color: var(--c-bg-elv-1); }
+.bg-elv-2 { background-color: var(--c-bg-elv-2); }
+.bg-elv-3 { background-color: var(--c-bg-elv-3); }
+.bg-elv-4 { background-color: var(--c-bg-elv-4); }
+
+.s-flex { display: flex; }
+
+.s-font-12 { font-size: 12px; }
+.s-font-14 { font-size: 14px; }
+.s-font-16 { font-size: 16px; }
+.s-font-20 { font-size: 20px; }
+.s-font-24 { font-size: 24px; }
+.s-font-32 { font-size: 32px; }
+
+.s-font-w-100 { font-weight: 100; }
+.s-font-w-200 { font-weight: 200; }
+.s-font-w-300 { font-weight: 300; }
+.s-font-w-400 { font-weight: 400; }
+.s-font-w-500 { font-weight: 500; }
+.s-font-w-600 { font-weight: 600; }
+.s-font-w-700 { font-weight: 700; }
+.s-font-w-800 { font-weight: 800; }
+.s-font-w-900 { font-weight: 900; }
+
+.s-gap-4  { gap: 4px; }
+.s-gap-8  { gap: 8px; }
+.s-gap-12 { gap: 12px; }
+.s-gap-16 { gap: 16px; }
+
+.s-grow   { flex-grow: 1; }
+.s-grow-0 { flex-grow: 0; }
+
+.s-nowrap { white-space: nowrap; }
+
+.s-overflow-hidden { overflow: hidden; }
+
+.s-p-8  { padding: 8px; }
+.s-p-12 { padding: 12px; }
+.s-p-16 { padding: 16px; }
+.s-p-24 { padding: 24px; }
+.s-p-32 { padding: 32px; }
+.s-p-48 { padding: 48px; }
+.s-p-56 { padding: 56px; }
+.s-p-64 { padding: 64px; }
+
+.s-pb-8  { padding-bottom: 8px; }
+.s-pb-12 { padding-bottom: 12px; }
+.s-pb-16 { padding-bottom: 16px; }
+.s-pb-24 { padding-bottom: 24px; }
+.s-pb-32 { padding-bottom: 32px; }
+.s-pb-48 { padding-bottom: 48px; }
+.s-pb-56 { padding-bottom: 56px; }
+.s-pb-64 { padding-bottom: 64px; }
+
+.s-pl-8  { padding-left: 8px; }
+.s-pl-12 { padding-left: 12px; }
+.s-pl-16 { padding-left: 16px; }
+.s-pl-24 { padding-left: 24px; }
+.s-pl-32 { padding-left: 32px; }
+.s-pl-48 { padding-left: 48px; }
+.s-pl-56 { padding-left: 56px; }
+.s-pl-64 { padding-left: 64px; }
+
+.s-pr-8  { padding-right: 8px; }
+.s-pr-12 { padding-right: 12px; }
+.s-pr-16 { padding-right: 16px; }
+.s-pr-24 { padding-right: 24px; }
+.s-pr-32 { padding-right: 32px; }
+.s-pr-48 { padding-right: 48px; }
+.s-pr-56 { padding-right: 56px; }
+.s-pr-64 { padding-right: 64px; }
+
+.s-pt-8  { padding-top: 8px; }
+.s-pt-12 { padding-top: 12px; }
+.s-pt-16 { padding-top: 16px; }
+.s-pt-24 { padding-top: 24px; }
+.s-pt-32 { padding-top: 32px; }
+.s-pt-48 { padding-top: 48px; }
+.s-pt-56 { padding-top: 56px; }
+.s-pt-64 { padding-top: 64px; }
+
+.s-px-8  { padding-right: 8px; padding-left: 8px; }
+.s-px-12 { padding-right: 12px; padding-left: 12px; }
+.s-px-16 { padding-right: 16px; padding-left: 16px; }
+.s-px-24 { padding-right: 24px; padding-left: 24px; }
+.s-px-32 { padding-right: 32px; padding-left: 32px; }
+.s-px-48 { padding-right: 48px; padding-left: 48px; }
+.s-px-56 { padding-right: 56px; padding-left: 56px; }
+.s-px-64 { padding-right: 64px; padding-left: 64px; }
+
+.s-py-8  { padding-top: 8px; padding-bottom: 8px; }
+.s-py-12 { padding-top: 12px; padding-bottom: 12px; }
+.s-py-16 { padding-top: 16px; padding-bottom: 16px; }
+.s-py-24 { padding-top: 24px; padding-bottom: 24px; }
+.s-py-32 { padding-top: 32px; padding-bottom: 32px; }
+.s-py-48 { padding-top: 48px; padding-bottom: 48px; }
+.s-py-56 { padding-top: 56px; padding-bottom: 56px; }
+.s-py-64 { padding-top: 64px; padding-bottom: 64px; }
+
+.s-shrink   { flex-shrink: 1; }
+.s-shrink-0 { flex-shrink: 0; }
+
+.s-text-1 { color: var(--c-text-1); }
+.s-text-2 { color: var(--c-text-2); }
+.s-text-3 { color: var(--c-text-3); }
+
+.s-w-256 { width: 256px; }
+.s-w-320 { width: 320px; }
+.s-w-512 { width: 512px; }
+
+.s-max-w-256 { max-width: 256px; }
+.s-max-w-320 { max-width: 320px; }
+.s-max-w-512 { max-width: 512px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.15.0",
+  "version": "3.16.0",
   "packageManager": "pnpm@8.12.1",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",