@globalbrain/sefirot 3.15.0 → 3.17.0

package/lib/components/SActionList.vue

@@ -15,6 +15,7 @@ defineProps<{
       v-for="item, index in list"
       :key="index"
       :lead-icon="item.leadIcon"
+      :label="item.label"
       :text="item.text"
       :link="item.link"
       :on-click="item.onClick"

package/lib/components/SActionListItem.vue

@@ -1,16 +1,25 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import { computed } from 'vue'
 import SIcon from './SIcon.vue'
 import SLink from './SLink.vue'
 
 export interface ActionListItem {
   leadIcon?: IconifyIcon
-  text: string
   link?: string
+  label?: string
+  disabled?: boolean
   onClick?(): void
+
+  /** @deprecated Use `:label` instead. */
+  text?: string
 }
 
-defineProps<ActionListItem>()
+const props = defineProps<ActionListItem>()
+
+const _label = computed(() => {
+  return props.label ?? props.text
+})
 </script>
 
 <template>
@@ -23,7 +32,7 @@ defineProps<ActionListItem>()
     <span v-if="leadIcon" class="lead-icon">
       <SIcon class="lead-icon-svg" :icon="leadIcon" />
     </span>
-    <span class="text">{{ text }}</span>
+    <span class="text">{{ _label }}</span>
   </component>
 </template>
 

package/lib/components/SActionMenu.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { type DropdownSection, useManualDropdownPosition } from '../composables/Dropdown'
+import { useFlyout } from '../composables/Flyout'
+import SButton, { type Mode, type Size, type Tooltip, type Type } from './SButton.vue'
+import SDropdown from './SDropdown.vue'
+
+export type { Mode, Size, Tooltip, Type }
+
+const props = defineProps<{
+  tag?: string
+  size?: Size
+  type?: Type
+  mode?: Mode
+  icon?: any
+  iconMode?: Mode
+  label?: string
+  labelMode?: Mode
+  rounded?: boolean
+  block?: boolean
+  loading?: boolean
+  disabled?: boolean
+  tooltip?: Tooltip
+  options: DropdownSection[]
+}>()
+
+const container = ref<any>(null)
+
+const { isOpen, toggle } = useFlyout(container)
+const { position, update: updatePosition } = useManualDropdownPosition(container)
+
+async function onOpen() {
+  if (!props.disabled) {
+    updatePosition()
+    toggle()
+  }
+}
+</script>
+
+<template>
+  <div class="SActionMenu" :class="[block]" ref="container">
+    <div class="button">
+      <SButton
+        :tag="tag"
+        :size="size"
+        :type="type"
+        :mode="mode"
+        :icon="icon"
+        :icon-mode="iconMode"
+        :label="label"
+        :label-mode="labelMode"
+        :rounded="rounded"
+        :block="block"
+        :loading="loading"
+        :disabled="disabled"
+        :tooltip="tooltip"
+        @click="onOpen"
+      />
+    </div>
+    <div v-if="isOpen" class="dropdown" :class="position">
+      <SDropdown :sections="options" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SActionMenu {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown {
+  position: absolute;
+  left: 0;
+  z-index: var(--z-index-dropdown);
+
+  &.top    { bottom: calc(100% + 8px); }
+  &.bottom { top: calc(100% + 8px); }
+}
+
+.SActionMenu.block {
+  display: block;
+}
+</style>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useControlSize } from '../composables/Control'
+import { type DropdownSection } from '../composables/Dropdown'
+import SActionMenu, { type Mode, type Tooltip, type Type } from './SActionMenu.vue'
+
+defineProps<{
+  tag?: string
+  type?: Type
+  mode?: Mode
+  icon?: any
+  iconMode?: Mode
+  label?: string
+  labelMode?: Mode
+  href?: string
+  loading?: boolean
+  disabled?: boolean
+  tooltip?: Tooltip
+  options: DropdownSection[]
+}>()
+
+const size = useControlSize()
+</script>
+
+<template>
+  <div class="SControlActionMenu">
+    <SActionMenu
+      :tag="tag"
+      :size="size"
+      :type="type"
+      :mode="mode"
+      :icon="icon"
+      :icon-mode="iconMode"
+      :label="label"
+      :label-mode="labelMode"
+      :href="href"
+      :tooltip="tooltip"
+      :options="options"
+      block
+      :loading="loading"
+      :disabled="disabled"
+    />
+  </div>
+</template>

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

@@ -21,7 +21,7 @@ defineProps<{
 .SDropdown {
   border: 1px solid var(--c-divider);
   border-radius: 6px;
-  min-width: 256px;
+  min-width: 288px;
   max-height: 384px;
   overflow-y: auto;
   white-space: normal;