webcake-ui-kit 1.2.16 → 1.2.17

package/src/components/upload/UploadItem.vue

@@ -0,0 +1,262 @@
+<template>
+  <!-- Card tile (picture-card / picture-circle) -->
+  <div
+    v-if="isCard"
+    class="ui-upload-item ui-upload-item--card"
+    :class="[`ui-upload-item--${listType}`, `ui-upload-item--${file.status}`, { 'ui-upload-item--has-thumb': !!thumb }]"
+  >
+    <div class="ui-upload-item__card-inner">
+      <img v-if="thumb" :src="thumb" :alt="file.name" class="ui-upload-item__card-img" />
+      <span v-else class="ui-upload-item__card-file">
+        <component :is="fileIcon" :size="24" />
+      </span>
+
+      <Button
+        v-if="showRemoveIcon && file.status !== 'uploading'"
+        type="button"
+        class="ui-upload-item__remove"
+        aria-label="Remove"
+        @click="onRemove"
+        size="mini"
+        variant="secondary"
+      >
+        <template #icon>
+          <WkiX :size="16" />
+        </template>
+      </Button>
+
+      <div v-if="file.status === 'uploading'" class="ui-upload-item__card-mask ui-upload-item__card-mask--loading">
+        <Spinner size="sm" type="mirrored" />
+        <span class="ui-upload-item__card-percent">{{ percentLabel }}</span>
+      </div>
+      <div v-else-if="file.status === 'error'" class="ui-upload-item__card-mask ui-upload-item__card-mask--error">
+        <WkiCircleAlert :size="18" />
+      </div>
+
+      <div v-if="file.status !== 'uploading'" class="ui-upload-item__card-actions">
+        <button
+          v-if="showPreviewIcon && canPreview"
+          type="button"
+          class="ui-upload-item__card-action"
+          aria-label="Preview"
+          @click="onPreview"
+        >
+          <WkiEye :size="16" />
+        </button>
+        <button
+          v-if="!multiple"
+          type="button"
+          class="ui-upload-item__card-action"
+          aria-label="Replace"
+          @click="onReplace"
+        >
+          <WkiPencil :size="16" />
+        </button>
+        <button
+          v-if="showDownloadIcon && file.url"
+          type="button"
+          class="ui-upload-item__card-action"
+          aria-label="Download"
+          @click="onDownload"
+        >
+          <WkiDownload :size="16" />
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Row (default / picture) -->
+  <div
+    v-else
+    class="ui-upload-item ui-upload-item--row"
+    :class="[`ui-upload-item--${listType}`, `ui-upload-item--${file.status}`]"
+  >
+    <div class="ui-upload-item__row">
+      <span class="ui-upload-item__media" :class="{ 'ui-upload-item__media--thumb': !!thumb }">
+        <img v-if="thumb" :src="thumb" :alt="file.name" class="ui-upload-item__thumb" />
+        <component :is="fileIcon" v-else :size="24" class="ui-upload-item__file-icon" />
+      </span>
+
+      <div class="ui-upload-item__info">
+        <p class="ui-upload-item__name" :title="file.name">{{ file.name }}</p>
+        <p class="ui-upload-item__desc" :class="`ui-upload-item__desc--${file.status}`">{{ descText }}</p>
+      </div>
+
+      <div class="ui-upload-item__actions">
+        <template v-if="file.status === 'uploading'">
+          <Button variant="ghost" size="xs" @click="onCancel">
+            <template #icon-left><WkiX :size="14" /></template>
+            Cancel
+          </Button>
+          <Spinner size="sm" type="mirrored" />
+        </template>
+        <template v-else-if="file.status === 'error'">
+          <Button variant="ghost" size="xs" @click="onRetry">
+            <template #icon-left><WkiRotateCw :size="14" /></template>
+            Try again
+          </Button>
+          <span class="ui-upload-item__status-icon ui-upload-item__status-icon--error">
+            <WkiCircleAlert :size="16" />
+          </span>
+          <button
+            v-if="showRemoveIcon"
+            type="button"
+            class="ui-upload-item__icon-btn ui-upload-item__remove"
+            aria-label="Remove"
+            @click="onRemove"
+          >
+            <WkiX :size="16" />
+          </button>
+        </template>
+        <template v-else>
+          <button
+            v-if="showDownloadIcon && file.url"
+            type="button"
+            class="ui-upload-item__icon-btn"
+            aria-label="Download"
+            @click="onDownload"
+          >
+            <WkiDownload :size="16" />
+          </button>
+          <span class="ui-upload-item__status-icon ui-upload-item__status-icon--done">
+            <WkiCheck :size="12" />
+          </span>
+          <button
+            v-if="showRemoveIcon"
+            type="button"
+            class="ui-upload-item__icon-btn ui-upload-item__remove"
+            aria-label="Remove"
+            @click="onRemove"
+          >
+            <WkiX :size="16" />
+          </button>
+        </template>
+      </div>
+    </div>
+
+    <div v-if="file.status === 'uploading'" class="ui-upload-item__progress">
+      <Progress :value="file.percent || 0" />
+      <div class="ui-upload-item__progress-text">
+        <span>{{ progressLeft }}</span>
+        <span>{{ percentLabel }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Progress from '../progress/Progress.vue'
+import Spinner from '../spinner/Spinner.vue'
+import Button from '../button/Button.vue'
+import WkiFileText from '../../icons/FileText.vue'
+import WkiFileImage from '../../icons/FileImage.vue'
+import WkiX from '../../icons/X.vue'
+import WkiCheck from '../../icons/Check.vue'
+import WkiCircleAlert from '../../icons/CircleAlert.vue'
+import WkiRotateCw from '../../icons/RotateCw.vue'
+import WkiDownload from '../../icons/Download.vue'
+import WkiEye from '../../icons/Eye.vue'
+import WkiPencil from '../../icons/Pencil.vue'
+import { formatSize, isImageFileType, isImageUrl } from './upload-utils.js'
+
+export default {
+  name: 'UploadItem',
+
+  components: {
+    Progress,
+    Spinner,
+    Button,
+    WkiFileText,
+    WkiFileImage,
+    WkiX,
+    WkiCheck,
+    WkiCircleAlert,
+    WkiRotateCw,
+    WkiDownload,
+    WkiEye,
+    WkiPencil
+  },
+
+  inject: {
+    wkUpload: { default: null }
+  },
+
+  props: {
+    file: { type: Object, required: true },
+    listType: { type: String, default: 'default' },
+    showPreviewIcon: { type: Boolean, default: true },
+    showRemoveIcon: { type: Boolean, default: true },
+    showDownloadIcon: { type: Boolean, default: false }
+  },
+
+  emits: [],
+
+  computed: {
+    isCard() {
+      return this.listType === 'picture-card' || this.listType === 'picture-circle'
+    },
+    multiple() {
+      return this.wkUpload ? this.wkUpload.multiple : true
+    },
+    isImage() {
+      return isImageFileType(this.file.type) || this.canPreview
+    },
+    canPreview() {
+      if (this.wkUpload && typeof this.wkUpload.resolveIsImage === 'function') {
+        return this.wkUpload.resolveIsImage(this.file)
+      }
+      return isImageUrl(this.file)
+    },
+    thumb() {
+      return this.file.thumbUrl || (this.canPreview ? this.file.url : '') || ''
+    },
+    fileIcon() {
+      return this.isImage ? 'WkiFileImage' : 'WkiFileText'
+    },
+    percentLabel() {
+      return `${Math.round(this.file.percent || 0)}%`
+    },
+    progressLeft() {
+      if (this.file.total) {
+        return `${formatSize(this.file.loaded || 0)} of ${formatSize(this.file.total)}`
+      }
+      if (this.file.size) return formatSize(this.file.size)
+      return ''
+    },
+    descText() {
+      const s = this.file.status
+      if (s === 'error') {
+        return (this.file.error && this.file.error.message) || 'Upload failed, please try again'
+      }
+      if (s === 'uploading') {
+        const size = this.file.size ? `${formatSize(this.file.size)} · ` : ''
+        return `${size}${this.percentLabel} uploaded`
+      }
+      return 'File uploaded successfully'
+    }
+  },
+
+  methods: {
+    onPreview() {
+      if (this.wkUpload) this.wkUpload.handlePreview(this.file)
+    },
+    onRemove() {
+      if (this.wkUpload) this.wkUpload.handleRemove(this.file)
+    },
+    onCancel() {
+      if (this.wkUpload) this.wkUpload.handleRemove(this.file)
+    },
+    onRetry() {
+      if (this.wkUpload) this.wkUpload.handleRetry(this.file)
+    },
+    onDownload() {
+      if (this.wkUpload) this.wkUpload.handleDownload(this.file)
+    },
+    onReplace() {
+      if (this.wkUpload) this.wkUpload.openFileDialog()
+    }
+  }
+}
+</script>
+
+<style src="./upload-item.css" scoped></style>

package/src/components/upload/UploadList.vue

@@ -0,0 +1,51 @@
+<template>
+  <div v-if="hasItems || hasTrigger()" class="ui-upload-list" :class="`ui-upload-list--${listType}`">
+    <template v-if="hasItems">
+      <UploadItem
+        v-for="file in items"
+        :key="file.uid"
+        :file="file"
+        :list-type="listType"
+        :show-preview-icon="showPreviewIcon"
+        :show-remove-icon="showRemoveIcon"
+        :show-download-icon="showDownloadIcon"
+      />
+    </template>
+    <slot name="trigger" />
+  </div>
+</template>
+
+<script>
+import UploadItem from './UploadItem.vue'
+
+export default {
+  name: 'UploadList',
+
+  components: { UploadItem },
+
+  props: {
+    items: { type: Array, default: () => [] },
+    listType: { type: String, default: 'default' },
+    showPreviewIcon: { type: Boolean, default: true },
+    showRemoveIcon: { type: Boolean, default: true },
+    showDownloadIcon: { type: Boolean, default: false },
+    hideList: { type: Boolean, default: false }
+  },
+
+  emits: [],
+
+  computed: {
+    hasItems() {
+      return !this.hideList && this.items.length > 0
+    }
+  },
+
+  methods: {
+    hasTrigger() {
+      return !!((this.$scopedSlots && this.$scopedSlots.trigger) || this.$slots.trigger)
+    }
+  }
+}
+</script>
+
+<style src="./upload-list.css" scoped></style>

package/src/components/upload/upload-item.css

@@ -0,0 +1,250 @@
+/* ============================ Row (default / picture) ============================ */
+.ui-upload-item--row {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  width: 100%;
+}
+
+.ui-upload-item__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  width: 100%;
+}
+
+/* Base: used as absolute corner button inside the card tile. */
+.ui-upload-item__remove {
+  position: absolute;
+  top: var(--spacing-2xs);
+  right: var(--spacing-2xs);
+  z-index: 1;
+  opacity: 0;
+}
+
+/* Row mode: remove button sits inline inside __actions — reset to normal flow. */
+.ui-upload-item--row .ui-upload-item__remove {
+  position: static;
+  opacity: 1;
+}
+
+.ui-upload-item__media {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--rounded-lg);
+  color: var(--muted-fg);
+}
+
+.ui-upload-item__media--thumb {
+  overflow: hidden;
+  background: var(--sidebar);
+  border: 1px solid var(--border-primary);
+}
+
+.ui-upload-item__thumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ui-upload-item__file-icon {
+  color: var(--secondary-fg);
+}
+
+.ui-upload-item__info {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+}
+
+.ui-upload-item__name {
+  margin: 0;
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  color: var(--primary-fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ui-upload-item__desc {
+  margin: 0;
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  color: var(--muted-fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ui-upload-item__desc--error {
+  color: var(--destructive);
+}
+
+.ui-upload-item__actions {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.ui-upload-item__icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  min-height: 28px;
+  padding: var(--spacing-6);
+  color: var(--secondary-fg);
+  background: transparent;
+  border: none;
+  border-radius: var(--rounded-md);
+  cursor: pointer;
+}
+
+.ui-upload-item__icon-btn:hover {
+  background: var(--ghost-hover);
+}
+
+.ui-upload-item__icon-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+.ui-upload-item__status-icon {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--rounded-full);
+}
+
+.ui-upload-item__status-icon--done {
+  color: var(--inverse-fg);
+  background: var(--primary-brand-bg);
+}
+
+.ui-upload-item__status-icon--error {
+  color: var(--destructive);
+}
+
+.ui-upload-item__progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  width: 100%;
+}
+
+.ui-upload-item__progress-text {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  color: var(--muted-fg);
+}
+
+/* ============================ Card tile (picture-card / picture-circle) ============================ */
+.ui-upload-item--card {
+  flex: none;
+}
+
+.ui-upload-item__card-inner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 140px;
+  height: 140px;
+  overflow: hidden;
+  background: var(--sidebar);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--rounded-xl);
+}
+
+.ui-upload-item--picture-circle .ui-upload-item__card-inner {
+  border-radius: var(--rounded-full);
+}
+
+.ui-upload-item__card-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ui-upload-item__card-file {
+  color: var(--muted-fg);
+}
+
+.ui-upload-item__card-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2xs);
+  color: var(--inverse-fg);
+  background: var(--backdrop);
+}
+
+.ui-upload-item__card-mask--error {
+  color: var(--destructive);
+  background: var(--destructive-subtle);
+}
+
+.ui-upload-item__card-percent {
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+}
+
+.ui-upload-item__card-actions {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  opacity: 0;
+  background: var(--backdrop);
+  transition: opacity 0.15s ease;
+}
+
+.ui-upload-item__card-inner:hover .ui-upload-item__card-actions,
+.ui-upload-item__card-inner:focus-within .ui-upload-item__card-actions,
+.ui-upload-item__card-inner:hover .ui-upload-item__remove,
+.ui-upload-item__card-inner:focus-within .ui-upload-item__remove {
+  opacity: 1;
+}
+
+.ui-upload-item__card-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  color: var(--inverse-fg);
+  background: transparent;
+  border: none;
+  border-radius: var(--rounded-md);
+  cursor: pointer;
+}
+
+.ui-upload-item__card-action:hover {
+  background: var(--outline-hover);
+}
+
+.ui-upload-item__card-action:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--focus-ring);
+}

package/src/components/upload/upload-list.css

@@ -0,0 +1,17 @@
+.ui-upload-list {
+  display: flex;
+  width: 100%;
+}
+
+.ui-upload-list--default,
+.ui-upload-list--picture {
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.ui-upload-list--picture-card,
+.ui-upload-list--picture-circle {
+  flex-flow: row wrap;
+  gap: var(--spacing-sm);
+  align-items: flex-start;
+}