@globalbrain/sefirot 4.8.0 → 4.10.0

package/lib/components/SIndicator.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import IconCheckCircleFill from '~icons/ph/check-circle-fill'
-import IconCircle from '~icons/ph/circle-bold'
-import IconCircleDashed from '~icons/ph/circle-dashed-bold'
-import IconCircleNotch from '~icons/ph/circle-notch-bold'
-import IconXCircle from '~icons/ph/x-circle-bold'
+import IconCircle from '~icons/ph/circle'
+import IconCircleDashed from '~icons/ph/circle-dashed'
+import IconCircleNotch from '~icons/ph/circle-notch'
+import IconMinusCircle from '~icons/ph/minus-circle'
+import IconXCircle from '~icons/ph/x-circle'
 import { computed } from 'vue'
 
-export type Size = 'nano' | 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
-export type State = 'pending' | 'ready' | 'queued' | 'running' | 'completed' | 'failed'
+export type Size = 'nano' | 'mini' | 'small' | 'medium' | 'large' | 'jumbo' | 'fill'
+export type State = 'pending' | 'ready' | 'queued' | 'running' | 'completed' | 'failed' | 'aborted'
 export type Mode = 'colored' | 'monochrome'
 
 const props = withDefaults(defineProps<{
@@ -33,6 +34,7 @@ const classes = computed(() => [
     <IconCircleNotch v-if="props.state === 'running'" class="icon" />
     <IconCheckCircleFill v-if="props.state === 'completed'" class="icon" />
     <IconXCircle v-if="props.state === 'failed'" class="icon" />
+    <IconMinusCircle v-if="props.state === 'aborted'" class="icon aborted" />
   </div>
 </template>
 
@@ -51,6 +53,10 @@ const classes = computed(() => [
 .icon {
   width: 100%;
   height: 100%;
+
+  &.aborted {
+    transform: rotate(-45deg);
+  }
 }
 
 .SIndicator.nano   { width: 20px; height: 20px; }
@@ -59,6 +65,7 @@ const classes = computed(() => [
 .SIndicator.medium { width: 32px; height: 32px; }
 .SIndicator.large  { width: 40px; height: 40px; }
 .SIndicator.jumbo  { width: 48px; height: 48px; }
+.SIndicator.fill   { width: 100%; height: 100%; }
 
 .SIndicator.queued {
   animation: indicator-blink 1.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
@@ -75,6 +82,7 @@ const classes = computed(() => [
   &.running   { color: var(--c-fg-info-1); }
   &.completed { color: var(--c-fg-success-1); }
   &.failed    { color: var(--c-fg-danger-1); }
+  &.aborted   { color: var(--c-fg-gray-1); }
 }
 
 .SIndicator.monochrome {

package/lib/components/SInputFileUpload.vue

@@ -1,18 +1,42 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends ModelType = 'file'">
+import { type ValidationRuleWithParams } from '@vuelidate/core'
+import { useDropZone } from '@vueuse/core'
 import { type Component, computed, ref } from 'vue'
 import { useTrans } from '../composables/Lang'
 import { type Validatable } from '../composables/Validation'
 import { formatSize } from '../support/File'
-import SButton from './SButton.vue'
+import SButton, { type Mode as ButtonMode } from './SButton.vue'
 import SCard from './SCard.vue'
 import SCardBlock from './SCardBlock.vue'
+import { type State as IndicatorState } from './SIndicator.vue'
 import SInputBase from './SInputBase.vue'
 import SInputFileUploadItem from './SInputFileUploadItem.vue'
+import STrans from './STrans.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
-const props = defineProps<{
+export type ModelType = 'file' | 'object'
+export type ModelValue<T extends ModelType> = T extends 'file' ? File : FileObject
+
+export interface FileObject {
+  file: File
+  indicatorState?: IndicatorState | null
+  canRemove?: boolean
+  action?: Action
+  errorMessage?: string | null
+}
+
+export interface Action {
+  mode?: ButtonMode
+  icon?: Component
+  leadIcon?: Component
+  trailIcon?: Component
+  label?: string
+  onClick(): void
+}
+
+const props = withDefaults(defineProps<{
   size?: Size
   label?: string
   info?: string
@@ -26,15 +50,20 @@ const props = defineProps<{
   checkIcon?: Component
   checkText?: string
   checkColor?: Color
-  value?: File[]
-  modelValue?: File[]
-  hideError?: boolean
+  droppable?: boolean
+  value?: ModelValue<T>[]
+  modelType?: T
+  modelValue?: ModelValue<T>[]
+  rules?: Record<string, ValidationRuleWithParams>
   validation?: Validatable
-}>()
+  hideError?: boolean
+}>(), {
+  modelType: 'file' as any // `ModelType` doesn't work so stubbing it.
+})
 
 const emit = defineEmits<{
-  'update:model-value': [files: File[]]
-  'change': [files: File[]]
+  'update:model-value': [files: ModelValue<T>[]]
+  'change': [files: ModelValue<T>[]]
 }>()
 
 const { t } = useTrans({
@@ -50,28 +79,46 @@ const { t } = useTrans({
   }
 })
 
+const dropZoneEl = ref<HTMLDivElement | null>(null)
+
+const { isOverDropZone } = useDropZone(dropZoneEl, {
+  multiple: true,
+  onDrop: (files) => onDrop(files)
+})
+
 const _value = computed(() => {
   return props.modelValue !== undefined
     ? props.modelValue
-    : props.value !== undefined ? props.value : []
+    : props.value !== undefined ? props.value : [] as ModelValue<T>[]
 })
 
 const input = ref<HTMLInputElement | null>(null)
 
-const classes = computed(() => [props.size ?? 'small'])
+const classes = computed(() => [
+  props.size ?? 'small',
+  { droppable: props.droppable },
+  { 'is-over-drop-zone': isOverDropZone.value }
+])
 
 const totalFileCountText = computed(() => {
   return t.selected_files(_value.value.length)
 })
 
 const totalFileSizeText = computed(() => {
-  return formatSize(_value.value)
+  const files = _value.value.map((file) => file instanceof File ? file : file.file)
+  return formatSize(files)
 })
 
 function open() {
   input.value!.click()
 }
 
+function onDrop(files: File[] | null) {
+  if (files !== null && files.length > 0) {
+    emitChange(append(files))
+  }
+}
+
 function onChange(e: Event) {
   const files = Array.from((e.target as HTMLInputElement).files ?? [])
 
@@ -81,25 +128,35 @@ function onChange(e: Event) {
     return
   }
 
-  const newFiles = [..._value.value, ...files]
-
-  emit('update:model-value', newFiles)
-  emit('change', newFiles)
-
-  props.validation?.$touch()
+  emitChange(append(files))
 }
 
 function onRemove(index: number) {
   const files = _value.value.filter((_, i) => i !== index)
+  emitChange(files)
+}
 
+function emitChange(files: ModelValue<T>[]) {
   emit('update:model-value', files)
   emit('change', files)
+  props.validation?.$touch()
+}
+
+function append(files: File[]) {
+  return [
+    ..._value.value,
+    ...(props.modelType === 'file' ? files : toFileObjects(files))
+  ] as ModelValue<T>[]
+}
+
+function toFileObjects(files: File[]) {
+  return files.map((file) => ({ file } as ModelValue<T>))
 }
 </script>
 
 <template>
   <SInputBase
-    class="SInputFile"
+    class="SInputFileUpload"
     :class="classes"
     :label="label"
     :note="note"
@@ -121,8 +178,29 @@ function onRemove(index: number) {
         @change="onChange"
       >
       <SCard :mode="hasError ? 'danger' : undefined">
-        <SCardBlock class="header">
+        <SCardBlock v-if="droppable" class="drop-zone" ref="dropZoneEl" @click="open">
+          <div class="drop-zone-box">
+            <STrans lang="en">
+              <div class="drop-zone-text">
+                Drag and drop files here, or
+              </div>
+              <div class="drop-zone-action">
+                <SButton size="mini" label="Select files" />
+              </div>
+            </STrans>
+            <STrans lang="ja">
+              <div class="drop-zone-text">
+                ファイルをドラック＆ドロップ、または
+              </div>
+              <div class="drop-zone-action">
+                <SButton size="mini" label="ファイルを選択" />
+              </div>
+            </STrans>
+          </div>
+        </SCardBlock>
+        <SCardBlock v-if="!droppable || placeholder" class="header">
           <SButton
+            v-if="!droppable"
             size="small"
             :label="text ?? t.button_text"
             @click="open"
@@ -134,8 +212,9 @@ function onRemove(index: number) {
         <template v-if="_value.length">
           <SInputFileUploadItem
             v-for="file, i in _value"
-            :key="file.name"
+            :key="i"
             :file="file"
+            :rules="rules"
             @remove="() => { onRemove(i) }"
           />
         </template>
@@ -172,6 +251,35 @@ function onRemove(index: number) {
   display: none;
 }
 
+.drop-zone {
+  padding: 12px;
+
+  &:hover .drop-zone-box {
+    border-color: var(--c-border-info-1);
+    cursor: pointer;
+  }
+}
+
+.drop-zone-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  border: 1px dashed var(--c-border-mute-1);
+  border-radius: 3px;
+  padding: 24px 0;
+  min-height: 192px;
+  text-align: center;
+  transition: border-color 0.25s;
+}
+
+.drop-zone-text {
+  text-align: center;
+  font-size: 14px;
+  color: var(--c-text-2);
+}
+
 .header {
   display: flex;
   align-items: center;
@@ -226,4 +334,16 @@ function onRemove(index: number) {
   width: 32px;
   height: 32px;
 }
+
+.SInputFileUpload.droppable {
+  .header {
+    padding-left: 16px;
+  }
+}
+
+.SInputFileUpload.is-over-drop-zone {
+  .drop-zone-box {
+    border-color: var(--c-border-info-1);
+  }
+}
 </style>

package/lib/components/SInputFileUploadItem.vue

@@ -1,38 +1,99 @@
 <script setup lang="ts">
 import IconFileText from '~icons/ph/file-text'
 import IconTrash from '~icons/ph/trash'
-import { computed } from 'vue'
+import { type ValidationRuleWithParams } from '@vuelidate/core'
+import { type Component, computed } from 'vue'
+import { useValidation } from '../composables/Validation'
 import { formatSize } from '../support/File'
-import SButton from './SButton.vue'
+import SButton, { type Mode as ButtonMode } from './SButton.vue'
 import SCardBlock from './SCardBlock.vue'
+import SIndicator, { type State as IndicatorState } from './SIndicator.vue'
 
-const props = defineProps<{
+export interface FileObject {
   file: File
+  indicatorState?: IndicatorState | null
+  canRemove?: boolean
+  action?: Action | null
+  errorMessage?: string | null
+}
+
+export interface Action {
+  mode?: ButtonMode
+  icon?: Component
+  leadIcon?: Component
+  trailIcon?: Component
+  label?: string
+  onClick(): void
+}
+
+const props = defineProps<{
+  file: File | FileObject
+  rules?: Record<string, ValidationRuleWithParams>
 }>()
 
 defineEmits<{
   'remove': []
 }>()
 
-const fileSize = computed(() => {
-  return formatSize(props.file)
+const _file = computed(() => ({
+  name: props.file instanceof File ? props.file.name : props.file.file.name,
+  file: props.file instanceof File ? props.file : props.file.file,
+  size: formatSize(props.file instanceof File ? props.file : props.file.file),
+  indicatorState: props.file instanceof File ? null : props.file.indicatorState,
+  canRemove: props.file instanceof File ? true : props.file.canRemove ?? true,
+  action: props.file instanceof File ? null : props.file.action,
+  errorMessage: props.file instanceof File ? null : props.file.errorMessage
+}))
+
+const { validation } = useValidation(() => ({
+  file: _file.value.file
+}), {
+  file: props.rules ?? {}
 })
+
+validation.value.$touch()
 </script>
 
 <template>
   <SCardBlock class="SInputFileUploadItem">
-    <p class="name">
-      <IconFileText class="name-icon" />
-      <span class="name-text">{{ file.name }}</span>
-    </p>
-    <div class="size">{{ fileSize }}</div>
-    <SButton
-      size="small"
-      type="text"
-      mode="mute"
-      :icon="IconTrash"
-      @click="$emit('remove')"
-    />
+    <div class="name">
+      <div class="name-label">
+        <div class="name-icon">
+          <IconFileText v-if="_file.indicatorState == null" class="name-icon-svg" />
+          <SIndicator size="fill" v-else :state="_file.indicatorState" />
+        </div>
+        <p class="name-text">{{ _file.name }}</p>
+      </div>
+      <p v-if="_file.errorMessage" class="error">{{ _file.errorMessage }}</p>
+      <p v-else-if="validation.$errors.length" class="error">{{ validation.$errors[0]?.$message }}</p>
+    </div>
+    <div v-if="_file.action" class="action">
+      <SButton
+        type="text"
+        size="small"
+        :mode="_file.action.mode"
+        :icon="_file.action.icon"
+        :lead-icon="_file.action.leadIcon"
+        :trail-icon="_file.action.trailIcon"
+        :label="_file.action.label"
+        @click="_file.action.onClick"
+      />
+    </div>
+    <div class="meta">
+      <div class="size">
+        {{ _file.size }}
+      </div>
+      <div class="delete">
+        <SButton
+          size="small"
+          type="text"
+          mode="mute"
+          :icon="IconTrash"
+          :disabled="!_file.canRemove"
+          @click="$emit('remove')"
+        />
+      </div>
+    </div>
   </SCardBlock>
 </template>
 
@@ -40,12 +101,20 @@ const fileSize = computed(() => {
 .SInputFileUploadItem {
   display: flex;
   align-items: center;
-  gap: 8px;
-  height: 48px;
-  padding: 0 8px 0 16px;
+  gap: 16px;
+  padding: 8px 8px 8px 16px;
 }
 
 .name {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.name-label {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -56,6 +125,12 @@ const fileSize = computed(() => {
 }
 
 .name-icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.name-icon-svg {
   width: 16px;
   height: 16px;
   color: var(--c-text-2);
@@ -70,9 +145,35 @@ const fileSize = computed(() => {
   text-overflow: ellipsis;
 }
 
+.error {
+  padding-left: 24px;
+  line-height: 20px;
+  font-size: 12px;
+  color: var(--c-text-danger-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.action {
+  flex-shrink: 0;
+}
+
+.meta {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 8px;
+}
+
 .size {
+  flex-shrink: 0;
   line-height: 24px;
   font-size: 12px;
   color: var(--c-text-2);
 }
+
+.delete {
+  flex-shrink: 0;
+}
 </style>

package/lib/components/STableCell.vue

@@ -7,7 +7,9 @@ import STableCellAvatars from './STableCellAvatars.vue'
 import STableCellCustom from './STableCellCustom.vue'
 import STableCellDay from './STableCellDay.vue'
 import STableCellEmpty from './STableCellEmpty.vue'
+import STableCellIndicator from './STableCellIndicator.vue'
 import STableCellNumber from './STableCellNumber.vue'
+import STableCellPath from './STableCellPath.vue'
 import STableCellPill from './STableCellPill.vue'
 import STableCellPills from './STableCellPills.vue'
 import STableCellState from './STableCellState.vue'
@@ -56,6 +58,10 @@ const computedCell = computed<TableCell | undefined>(() =>
       :icon-color="computedCell.iconColor"
       :on-click="computedCell.onClick"
     />
+    <STableCellPath
+      v-else-if="computedCell.type === 'path'"
+      :segments="computedCell.segments"
+    />
     <STableCellDay
       v-else-if="computedCell.type === 'day'"
       :align="computedCell.align"
@@ -77,6 +83,11 @@ const computedCell = computed<TableCell | undefined>(() =>
       :state="computedCell.label"
       :mode="computedCell.mode"
     />
+    <STableCellIndicator
+      v-else-if="computedCell.type === 'indicator'"
+      :state="computedCell.state"
+      :label="computedCell.label"
+    />
     <STableCellAvatar
       v-else-if="computedCell.type === 'avatar'"
       :value="value"

package/lib/components/STableCellIndicator.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import SIndicator, { type State } from './SIndicator.vue'
+
+defineProps<{
+  state: State
+  label?: string | null
+}>()
+</script>
+
+<template>
+  <div class="STableCellIndicator" :class="[state]">
+    <SIndicator size="nano" :state="state" />
+    <div v-if="label" class="text">{{ label }}</div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableCellIndicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 16px;
+  min-height: 40px;
+}
+
+.text {
+  line-height: 24px;
+  font-size: 14px;
+}
+
+.STableCellIndicator.pending .text   { color: var(--c-text-1); }
+.STableCellIndicator.ready .text     { color: var(--c-text-1); }
+.STableCellIndicator.queued .text    { color: var(--c-text-1); }
+.STableCellIndicator.running .text   { color: var(--c-text-1); }
+.STableCellIndicator.completed .text { color: var(--c-text-1); }
+.STableCellIndicator.failed .text    { color: var(--c-text-3); }
+.STableCellIndicator.aborted .text   { color: var(--c-text-3); }
+</style>

package/lib/components/STableCellPath.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { type TableCellPathSegment } from '../composables/Table'
+import SLink from './SLink.vue'
+
+defineProps<{
+  segments: TableCellPathSegment[]
+}>()
+
+function classes(item: TableCellPathSegment) {
+  return [
+    item.color ?? 'neutral',
+    { link: !!item.link || !!item.onClick }
+  ]
+}
+</script>
+
+<template>
+  <div class="STableCellPath">
+    <template v-for="segment, index in segments" :key="index">
+      <div v-if="index > 0" class="divider">/</div>
+      <SLink
+        class="text"
+        :class="classes(segment)"
+        :href="segment.link"
+        @click="segment.onClick"
+      >
+        {{ segment.text }}
+      </SLink>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableCellPath {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 16px;
+  min-height: 40px;
+}
+
+.divider {
+  color: var(--c-text-3);
+}
+
+.text {
+  line-height: 24px;
+  font-size: 14px;
+  transition: color 0.25s;
+
+  &.neutral { color: var(--c-text-1); }
+  &.soft    { color: var(--c-text-2); }
+  &.mute    { color: var(--c-text-3); }
+  &.info    { color: var(--c-text-info-1); }
+  &.success { color: var(--c-text-success-1); }
+  &.warning { color: var(--c-text-warning-1); }
+  &.danger  { color: var(--c-text-danger-1); }
+
+  &.link {
+    cursor: pointer;
+  }
+
+  &.link.neutral:hover { color: var(--c-text-info-1); }
+  &.link.soft:hover    { color: var(--c-text-info-1); }
+  &.link.mute:hover    { color: var(--c-text-info-1); }
+  &.link.info:hover    { color: var(--c-text-info-2); }
+  &.link.success:hover { color: var(--c-text-success-2); }
+  &.link.warning:hover { color: var(--c-text-warning-2); }
+  &.link.danger:hover  { color: var(--c-text-danger-2); }
+}
+</style>

package/lib/composables/Table.ts

@@ -1,5 +1,6 @@
 import { type Component, type MaybeRef, type MaybeRefOrGetter } from 'vue'
-import { type Mode } from '../components/SButton.vue'
+import { type Mode as ButtonMode } from '../components/SButton.vue'
+import { type State as IndicatorState } from '../components/SIndicator.vue'
 import { type Day } from '../support/Day'
 import { type DropdownSection } from './Dropdown'
 import { type Position } from './Tooltip'
@@ -55,10 +56,12 @@ export type TableColumnCellFn<V, R> = (value: V, record: R) => TableCell<V, R>
 export type TableCell<V = any, R = any> =
   | TableCellText<V, R>
   | TableCellNumber<V, R>
+  | TableCellPath
   | TableCellDay
   | TableCellPill
   | TableCellPills
   | TableCellState
+  | TableCellIndicator
   | TableCellAvatar<V, R>
   | TableCellAvatars
   | TableCellCustom
@@ -69,10 +72,12 @@ export type TableCell<V = any, R = any> =
 export type TableCellType =
   | 'text'
   | 'number'
+  | 'path'
   | 'day'
   | 'pill'
   | 'pills'
   | 'state'
+  | 'indicator'
   | 'avatar'
   | 'avatars'
   | 'custom'
@@ -116,6 +121,18 @@ export interface TableCellNumber<V = any, R = any> extends TableCellBase {
   onClick?(value: V, record: R): void
 }
 
+export interface TableCellPath extends TableCellBase {
+  type: 'path'
+  segments: TableCellPathSegment[]
+}
+
+export interface TableCellPathSegment {
+  text: string
+  link?: string | null
+  color?: TableCellValueColor
+  onClick?(): void
+}
+
 export type TableCellValueColor = ColorModes | 'soft'
 
 export interface TableCellDay extends TableCellBase {
@@ -187,17 +204,23 @@ export interface TableCellState extends TableCellBase {
   mode?: ColorModes
 }
 
+export interface TableCellIndicator extends TableCellBase {
+  type: 'indicator'
+  state: IndicatorState
+  label?: string | null
+}
+
 export interface TableCellActions<R = any> extends TableCellBase {
   type: 'actions'
   actions: TableCellAction<R>[]
 }
 
 export interface TableCellAction<R = any> {
-  mode?: Mode
+  mode?: ButtonMode
   icon?: Component
-  iconMode?: Mode
+  iconMode?: ButtonMode
   label?: string
-  labelMode?: Mode
+  labelMode?: ButtonMode
   onClick(record: R): void
   show?(record: R): boolean
 }
@@ -210,9 +233,9 @@ export interface TableMenu {
 
 export interface TableHeaderAction {
   show?: boolean
-  mode?: Mode
+  mode?: ButtonMode
   label: string
-  labelMode?: Mode
+  labelMode?: ButtonMode
   onClick(): void
 }
 

package/package.json

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