@globalbrain/sefirot 4.0.0-3 → 4.1.0

package/lib/components/SInputBase.vue

@@ -72,7 +72,7 @@ function getErrorMsg(validation: Validatable) {
       </span>
     </label>
 
-    <slot />
+    <slot :has-error="error?.has" />
 
     <div class="help">
       <slot name="before-help" />

package/lib/components/SInputFileUpload.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+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 SCard from './SCard.vue'
+import SCardBlock from './SCardBlock.vue'
+import SInputBase from './SInputBase.vue'
+import SInputFileUploadItem from './SInputFileUploadItem.vue'
+
+export type Size = 'mini' | 'small' | 'medium'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+
+const props = defineProps<{
+  size?: Size
+  label?: string
+  info?: string
+  note?: string
+  help?: string
+  text?: string
+  placeholder?: string
+  emptyText?: string
+  accept?: string
+  multiple?: boolean
+  checkIcon?: Component
+  checkText?: string
+  checkColor?: Color
+  value?: File[]
+  modelValue?: File[]
+  hideError?: boolean
+  validation?: Validatable
+}>()
+
+const emit = defineEmits<{
+  'update:model-value': [files: File[]]
+  'change': [files: File[]]
+}>()
+
+const { t } = useTrans({
+  en: {
+    button_text: 'Choose File',
+    empty_text: 'No file selected',
+    selected_files: (c: number) => c === 1 ? `${c} file` : `${c} files`
+  },
+  ja: {
+    button_text: 'ファイルを選択',
+    empty_text: 'ファイルが選択されていません',
+    selected_files: (c: number) => `ファイル数: ${c}`
+  }
+})
+
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : []
+})
+
+const input = ref<HTMLInputElement | null>(null)
+
+const classes = computed(() => [props.size ?? 'small'])
+
+const totalFileCountText = computed(() => {
+  return t.selected_files(_value.value.length)
+})
+
+const totalFileSizeText = computed(() => {
+  return formatSize(_value.value)
+})
+
+function open() {
+  input.value!.click()
+}
+
+function onChange(e: Event) {
+  const files = Array.from((e.target as HTMLInputElement).files ?? [])
+
+  // When files are empty, that means user have "canceled" the file selection
+  // so we should do nothing in this case.
+  if (files.length === 0) {
+    return
+  }
+
+  const newFiles = [..._value.value, ...files]
+
+  emit('update:model-value', newFiles)
+  emit('change', newFiles)
+
+  props.validation?.$touch()
+}
+
+function onRemove(index: number) {
+  const files = _value.value.filter((_, i) => i !== index)
+
+  emit('update:model-value', files)
+  emit('change', files)
+}
+</script>
+
+<template>
+  <SInputBase
+    class="SInputFile"
+    :class="classes"
+    :label="label"
+    :note="note"
+    :info="info"
+    :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
+    :validation="validation"
+    :hide-error="hideError"
+  >
+    <template #default="{ hasError }">
+      <input
+        ref="input"
+        class="input"
+        type="file"
+        :accept="accept"
+        multiple
+        @change="onChange"
+      >
+      <SCard :mode="hasError ? 'danger' : undefined">
+        <SCardBlock class="header">
+          <SButton
+            size="small"
+            :label="text ?? t.button_text"
+            @click="open"
+          />
+          <p v-if="placeholder" class="placeholder">
+            {{ placeholder }}
+          </p>
+        </SCardBlock>
+        <template v-if="_value.length">
+          <SInputFileUploadItem
+            v-for="file, i in _value"
+            :key="file.name"
+            :file="file"
+            @remove="() => { onRemove(i) }"
+          />
+        </template>
+        <template v-else>
+          <SCardBlock class="empty">
+            <p class="empty-text">
+              {{ emptyText ?? t.empty_text }}
+            </p>
+          </SCardBlock>
+        </template>
+        <SCardBlock class="footer">
+          <div class="footer-left">
+            <p class="footer-file-count">
+              {{ totalFileCountText }}
+            </p>
+          </div>
+          <div class="footer-right">
+            <p class="footer-file-size">
+              {{ totalFileSizeText }}
+            </p>
+            <div class="footer-spacer" />
+          </div>
+        </SCardBlock>
+      </SCard>
+    </template>
+    <template v-if="$slots.info" #info>
+      <slot name="info" />
+    </template>
+  </SInputBase>
+</template>
+
+<style lang="postcss" scoped>
+.input {
+  display: none;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 48px;
+  padding: 0 8px;
+}
+
+.placeholder {
+  line-height: 24px;
+  font-size: 12px;
+  color: var(--c-text-2);
+}
+
+.empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 48px;
+  padding: 0 16px;
+}
+
+.empty-text {
+  line-height: 20px;
+  font-size: 12px;
+  color: var(--c-text-2);
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 48px;
+  padding: 0 8px 0 16px;
+}
+
+.footer-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.footer-file-count,
+.footer-file-size {
+  line-height: 24px;
+  font-size: 12px;
+  color: var(--c-text-2);
+}
+
+.footer-spacer {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+}
+</style>

package/lib/components/SInputFileUploadItem.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { formatSize } from '../support/File'
+import SButton from './SButton.vue'
+import SCardBlock from './SCardBlock.vue'
+import IconFileText from '~icons/ph/file-text'
+import IconTrash from '~icons/ph/trash'
+
+const props = defineProps<{
+  file: File
+}>()
+
+defineEmits<{
+  'remove': []
+}>()
+
+const fileSize = computed(() => {
+  return formatSize(props.file)
+})
+</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')"
+    />
+  </SCardBlock>
+</template>
+
+<style lang="postcss" scoped>
+.SInputFileUploadItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 48px;
+  padding: 0 8px 0 16px;
+}
+
+.name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.name-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--c-text-2);
+}
+
+.name-text {
+  line-height: 24px;
+  font-size: 14px;
+  color: var(--c-text-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.size {
+  line-height: 24px;
+  font-size: 12px;
+  color: var(--c-text-2);
+}
+</style>

package/lib/support/File.ts

@@ -6,3 +6,19 @@ export function getExtension(file: File): string {
 
   return name.slice((name.lastIndexOf('.') - 1 >>> 0) + 2)
 }
+
+/**
+ * Formats the file size in bytes to a human-readable format. It also accepts
+ * array of files and returns the total size.
+ */
+export function formatSize(files: File | File[]): string {
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB']
+  files = Array.isArray(files) ? files : [files]
+  let size = files.reduce((previous, file) => previous + file.size, 0)
+  let index = 0
+  while (size >= 1024 && index < units.length) {
+    size /= 1024
+    index++
+  }
+  return `${size.toFixed(2)}${units[index]}`
+}

package/package.json

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