add action option for retry things and fix other issues

globalbrain · Jan 27, 2025 · 4b6840d · 4b6840d
1 parent 96573a1
commit 4b6840d
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 7 deletions.
diff --git a/lib/components/SInputFileUpload.vue b/lib/components/SInputFileUpload.vue
@@ -5,7 +5,7 @@ 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'
@@ -23,10 +23,20 @@ export interface FileObject {
   file: File
   indicatorState?: IndicatorState | null
   canRemove?: boolean
+  action?: Action
   errorMessage?: string | null
 }
 
-const props = defineProps<{
+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
@@ -47,7 +57,9 @@ const props = defineProps<{
   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: ModelValue<T>[]]
@@ -166,7 +178,7 @@ function toFileObjects(files: File[]) {
         @change="onChange"
       >
       <SCard :mode="hasError ? 'danger' : undefined">
-        <SCardBlock v-if="droppable" class="drop-zone" ref="dropZoneEl">
+        <SCardBlock v-if="droppable" class="drop-zone" ref="dropZoneEl" @click="open">
           <div class="drop-zone-box">
             <STrans lang="en">
               <div class="drop-zone-text">

diff --git a/lib/components/SInputFileUploadItem.vue b/lib/components/SInputFileUploadItem.vue
@@ -2,20 +2,30 @@
 import IconFileText from '~icons/ph/file-text'
 import IconTrash from '~icons/ph/trash'
 import { type ValidationRuleWithParams } from '@vuelidate/core'
-import { computed } from 'vue'
+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'
 
 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>
@@ -31,6 +41,7 @@ const _file = computed(() => ({
   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
 }))
 
@@ -56,6 +67,18 @@ validation.value.$touch()
       <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 }}
@@ -132,6 +155,10 @@ validation.value.$touch()
   text-overflow: ellipsis;
 }
 
+.action {
+  flex-shrink: 0;
+}
+
 .meta {
   display: flex;
   align-items: center;

diff --git a/stories/components/SInputFileUpload.01_Playground.story.vue b/stories/components/SInputFileUpload.01_Playground.story.vue
@@ -21,7 +21,7 @@ function state() {
     info: null,
     note: null,
     text: undefined,
-    placeholder: 'Total 10MB max.',
+    placeholder: '1MB max per file.',
     emptyText: null,
     help: null,
     accept: null,