@globalbrain/sefirot 3.14.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/SInputBase.vue

@@ -2,7 +2,7 @@
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import IconQuestion from '@iconify-icons/ph/question'
 import { type DefineComponent, computed, unref, useSlots } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SIcon from './SIcon.vue'
 import STooltip from './STooltip.vue'
 

package/lib/components/SInputCheckbox.vue

@@ -3,7 +3,7 @@ import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import IconCheck from '@iconify-icons/ph/check-bold'
 import IconMinus from '@iconify-icons/ph/minus-bold'
 import { computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 

package/lib/components/SInputCheckboxes.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SInputBase from './SInputBase.vue'
 import SInputCheckbox from './SInputCheckbox.vue'
 

package/lib/components/SInputDate.vue

@@ -2,7 +2,7 @@
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { DatePicker } from 'v-calendar'
 import { computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import { type Day, day } from '../support/Day'
 import SInputBase from './SInputBase.vue'
 

package/lib/components/SInputDropdown.vue

@@ -6,7 +6,7 @@ import xor from 'lodash-es/xor'
 import { type DefineComponent, computed, ref } from 'vue'
 import { type DropdownSectionFilter, useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import { isArray } from '../support/Utils'
 import SDropdown from './SDropdown.vue'
 import SIcon from './SIcon.vue'

package/lib/components/SInputFile.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { type DefineComponent, computed, ref } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'

package/lib/components/SInputHMS.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { type DefineComponent, computed, ref } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'

package/lib/components/SInputImage.vue

@@ -3,7 +3,7 @@ import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import IconImage from '@iconify-icons/ph/image-bold'
 import { computed, ref } from 'vue'
 import { useImageSrcFromFile } from '../composables/Image'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SButton from './SButton.vue'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'

package/lib/components/SInputNumber.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { type DefineComponent, computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import { isNullish, isString } from '../support/Utils'
 import SInputText from './SInputText.vue'
 

package/lib/components/SInputRadio.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { type DefineComponent, computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'

package/lib/components/SInputRadios.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { type DefineComponent, computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SInputBase from './SInputBase.vue'
 import SInputRadio from './SInputRadio.vue'
 

package/lib/components/SInputSegments.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T extends string | number | boolean">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SInputBase from './SInputBase.vue'
 import SInputSegmentsOption, { type Mode } from './SInputSegmentsOption.vue'
 

package/lib/components/SInputSelect.vue

@@ -3,7 +3,7 @@ import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
 import IconCaretUp from '@iconify-icons/ph/caret-up-bold'
 import { type DefineComponent, computed, ref } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 

package/lib/components/SInputSwitch.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { type DefineComponent, computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'

package/lib/components/SInputSwitches.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { type DefineComponent, computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { type Validatable } from '../composables/V'
 import SInputBase from './SInputBase.vue'
 import SInputSwitch from './SInputSwitch.vue'