@globalbrain/sefirot 4.9.0 → 4.10.0

package/lib/components/SIndicator.vue

@@ -7,7 +7,7 @@ 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 Size = 'nano' | 'mini' | 'small' | 'medium' | 'large' | 'jumbo' | 'fill'
 export type State = 'pending' | 'ready' | 'queued' | 'running' | 'completed' | 'failed' | 'aborted'
 export type Mode = 'colored' | 'monochrome'
 
@@ -65,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;

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

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
   "type": "module",
-  "version": "4.9.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>",