webcake-ui-kit 1.2.16 → 1.2.18

package/src/components/upload/upload-utils.js

@@ -0,0 +1,216 @@
+// Pure, framework-agnostic helpers for WkUpload.
+// No Vue, no component state, no DOM component refs — everything here is unit-testable
+// in isolation. The SFC (Upload.vue) wires these into Options-API lifecycle.
+
+// Sentinel returned from `beforeUpload` to drop a file entirely (not added to the list).
+// Mirrors Ant Design's `Upload.LIST_IGNORE` but as a plain string so it survives being
+// passed through props/Promises without identity issues across Vue 2 / Vue 3.
+export const LIST_IGNORE = 'WK_UPLOAD_LIST_IGNORE'
+
+export const STATUS_UPLOADING = 'uploading'
+export const STATUS_DONE = 'done'
+export const STATUS_ERROR = 'error'
+export const STATUS_REMOVED = 'removed'
+
+let uidSeed = 0
+
+// Stable-ish unique id for a file entry. Not cryptographic — only needs to be unique
+// within a single Upload instance's lifetime so we can track/replace items by uid.
+export function genUid() {
+  uidSeed += 1
+  return `wk-upload-${Date.now().toString(36)}-${uidSeed}`
+}
+
+// Does `file` satisfy the `accept` attribute? `accept` is a comma list of extensions
+// (`.png`), exact MIME (`image/png`), or wildcard MIME (`image/*`). Empty accept = allow all.
+export function attrAccept(file, accept) {
+  if (!accept || !file) return true
+  const accepts = String(accept)
+    .split(',')
+    .map(t => t.trim())
+    .filter(Boolean)
+  if (!accepts.length) return true
+  const name = file.name || ''
+  const mime = file.type || ''
+  const baseMime = mime.replace(/\/.*$/, '')
+  return accepts.some(type => {
+    if (type.charAt(0) === '.') {
+      return name.toLowerCase().slice(-type.length) === type.toLowerCase()
+    }
+    if (/\/\*$/.test(type)) {
+      return baseMime === type.replace(/\/.*$/, '')
+    }
+    if (/^[^/]+\/[^/]+$/.test(type)) {
+      return mime === type
+    }
+    return false
+  })
+}
+
+export function isImageFileType(type) {
+  return typeof type === 'string' && type.indexOf('image/') === 0
+}
+
+const IMAGE_EXT = /\.(webp|svg|png|gif|jpe?g|jfif|bmp|ico|heic|heif|avif)$/i
+
+// Heuristic: should this file be rendered as an image thumbnail?
+export function isImageUrl(file) {
+  if (!file) return false
+  if (isImageFileType(file.type)) return true
+  const url = file.thumbUrl || file.url || ''
+  if (!url) return false
+  if (/^data:image\//.test(url)) return true
+  if (/^data:/.test(url)) return false
+  if (IMAGE_EXT.test(url.split('?')[0])) return true
+  // Unknown remote URL with no extension — don't assume it's an image.
+  return false
+}
+
+// Read a File into a data URL for thumbnail preview. Resolves '' when not previewable
+// or when running outside a browser (jsdom without FileReader).
+export function previewImage(file) {
+  return new Promise(resolve => {
+    const raw = file && file.originFileObj ? file.originFileObj : file
+    if (!raw || !isImageFileType(raw.type) || typeof FileReader === 'undefined') {
+      resolve('')
+      return
+    }
+    const reader = new FileReader()
+    reader.onload = () => resolve(typeof reader.result === 'string' ? reader.result : '')
+    reader.onerror = () => resolve('')
+    reader.readAsDataURL(raw)
+  })
+}
+
+// Human-readable byte size, e.g. 25600 -> "25 KB", 1234567 -> "1.2 MB".
+export function formatSize(bytes) {
+  if (bytes == null || isNaN(bytes)) return ''
+  if (bytes <= 0) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
+  const val = bytes / Math.pow(1024, i)
+  const rounded = val >= 10 || i === 0 ? Math.round(val) : Math.round(val * 10) / 10
+  return `${rounded} ${units[i]}`
+}
+
+// Wrap a raw File in the normalized upload-item shape used throughout the component.
+export function file2Obj(file, uid) {
+  return {
+    uid: uid || file.uid || genUid(),
+    name: file.name,
+    size: file.size,
+    type: file.type,
+    lastModified: file.lastModified,
+    percent: 0,
+    status: STATUS_UPLOADING,
+    originFileObj: file,
+    url: undefined,
+    thumbUrl: undefined,
+    response: undefined,
+    error: undefined
+  }
+}
+
+// Immutable "replace item with matching uid, else append". Never mutates `fileList`.
+export function updateFileList(file, fileList) {
+  const next = (fileList || []).slice()
+  const idx = next.findIndex(item => item.uid === file.uid)
+  if (idx === -1) next.push(file)
+  else next[idx] = file
+  return next
+}
+
+export function getFileItem(file, fileList) {
+  const uid = file && file.uid
+  return (fileList || []).filter(item => item.uid === uid)[0]
+}
+
+// Immutable removal by uid. Returns null when nothing was removed (caller can no-op).
+export function removeFileItem(file, fileList) {
+  const uid = file && file.uid
+  const next = (fileList || []).filter(item => item.uid !== uid)
+  return next.length === (fileList || []).length ? null : next
+}
+
+function getBody(xhr) {
+  const text = xhr.responseText || xhr.response
+  if (!text) return text
+  try {
+    return JSON.parse(text)
+  } catch (e) {
+    return text
+  }
+}
+
+function getError(option, xhr) {
+  const msg = `cannot ${option.method} ${option.action} ${xhr.status}`
+  const err = new Error(msg)
+  err.status = xhr.status
+  err.method = option.method
+  err.url = option.action
+  return err
+}
+
+// Default XHR-based uploader. Returns a handle with `.abort()` so the caller can cancel
+// on remove/unmount. Fires onProgress/onSuccess/onError. Never throws synchronously.
+export function defaultRequest(option) {
+  const {
+    action,
+    method = 'post',
+    filename,
+    file,
+    data,
+    headers = {},
+    withCredentials = false,
+    name = 'file',
+    onProgress,
+    onSuccess,
+    onError
+  } = option
+
+  const xhr = new XMLHttpRequest()
+
+  if (onProgress && xhr.upload) {
+    xhr.upload.onprogress = e => {
+      let percent = 0
+      if (e.total > 0) percent = (e.loaded / e.total) * 100
+      onProgress({ percent, loaded: e.loaded, total: e.total })
+    }
+  }
+
+  const formData = new FormData()
+  if (data) {
+    Object.keys(data).forEach(key => {
+      const val = data[key]
+      if (Array.isArray(val)) val.forEach(v => formData.append(`${key}[]`, v))
+      else formData.append(key, val)
+    })
+  }
+  const raw = file && file.originFileObj ? file.originFileObj : file
+  formData.append(name, raw, (raw && raw.name) || filename)
+
+  xhr.onerror = e => {
+    if (onError) onError(e)
+  }
+  xhr.onload = () => {
+    if (xhr.status < 200 || xhr.status >= 300) {
+      if (onError) onError(getError(option, xhr), getBody(xhr))
+      return
+    }
+    if (onSuccess) onSuccess(getBody(xhr), xhr)
+  }
+
+  xhr.open(method, action, true)
+  if (withCredentials && 'withCredentials' in xhr) xhr.withCredentials = true
+  Object.keys(headers).forEach(h => {
+    if (headers[h] !== null && headers[h] !== undefined) xhr.setRequestHeader(h, headers[h])
+  })
+
+  xhr.send(formData)
+
+  return {
+    abort() {
+      xhr.abort()
+    }
+  }
+}

package/src/components/upload/upload.css

@@ -0,0 +1,149 @@
+.ui-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  width: 100%;
+  font-family: var(--font-family-body);
+}
+
+.ui-upload__input {
+  display: none;
+}
+
+/* ---- Dropzone trigger (default / picture) ---- */
+.ui-upload__dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-md);
+  border: 1px dashed var(--border-primary);
+  border-radius: var(--rounded-xl);
+  background: var(--accent-0);
+  cursor: pointer;
+  outline: none;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.ui-upload__dropzone:hover,
+.ui-upload__dropzone--over {
+  background: var(--secondary-hover);
+}
+
+.ui-upload__dropzone:focus-visible {
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+.ui-upload__dropzone--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ui-upload__dropzone-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+}
+
+.ui-upload__feature-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--spacing-36);
+  min-height: var(--spacing-36);
+  padding: var(--spacing-xs);
+  color: var(--secondary-fg);
+  background: var(--muted-bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--rounded-full);
+}
+
+.ui-upload__dropzone-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2xs);
+  width: 100%;
+  text-align: center;
+}
+
+.ui-upload__dropzone-title {
+  margin: 0;
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  color: var(--primary-fg);
+}
+
+.ui-upload__link {
+  color: var(--primary-brand-fg);
+  font-weight: var(--paragraph-medium-font-weight);
+}
+
+.ui-upload__dropzone-hint {
+  margin: 0;
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  color: var(--muted-fg);
+}
+
+/* ---- Add-tile trigger (picture-card / picture-circle) ---- */
+.ui-upload__card-trigger {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  width: 140px;
+  height: 140px;
+  color: var(--muted-fg);
+  background: var(--primary-bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--rounded-xl);
+  cursor: pointer;
+  outline: none;
+  transition: background 0.15s ease;
+}
+
+.ui-upload__card-trigger:hover,
+.ui-upload__card-trigger--over {
+  background: var(--primary-hover);
+}
+
+.ui-upload__card-trigger:focus-visible {
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+.ui-upload__card-trigger--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ui-upload__card-trigger-text {
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+}
+
+.ui-upload--picture-circle .ui-upload__card-trigger {
+  border-radius: var(--rounded-full);
+}
+
+/* ---- Preview dialog body ---- */
+.ui-upload__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-upload__preview-img {
+  display: block;
+  max-width: 100%;
+  max-height: 70vh;
+  border-radius: var(--rounded-lg);
+}

package/src/icons/Popup.vue

@@ -0,0 +1,32 @@
+<template>
+  <BaseIcon v-bind="$attrs" v-on="listeners">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M11.625 2.125C12.1082 2.125 12.5 2.51675 12.5 3C12.5 3.48325 12.1082 3.875 11.625 3.875H5C4.37868 3.875 3.875 4.37868 3.875 5V19C3.875 19.6213 4.37868 20.125 5 20.125H19C19.6213 20.125 20.125 19.6213 20.125 19V11.875C20.125 11.3918 20.5168 11 21 11C21.4832 11 21.875 11.3918 21.875 11.875V19C21.875 20.5878 20.5878 21.875 19 21.875H5C3.41218 21.875 2.125 20.5878 2.125 19V5C2.125 3.41218 3.41218 2.125 5 2.125H11.625Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.875 2.125C20.0151 2.125 21.75 3.8599 21.75 6C21.75 8.1401 20.0151 9.875 17.875 9.875C15.7349 9.875 14 8.1401 14 6C14 3.8599 15.7349 2.125 17.875 2.125ZM17.875 3.875C16.7014 3.875 15.75 4.8264 15.75 6C15.75 6.45107 15.8912 6.86887 16.1309 7.21289C16.1531 7.24478 16.1773 7.27508 16.2012 7.30566C16.3675 7.51859 16.573 7.6982 16.8076 7.83496C16.8234 7.84415 16.8385 7.85449 16.8545 7.86328C17.1575 8.02958 17.505 8.125 17.875 8.125C19.0486 8.125 20 7.1736 20 6C20 4.8264 19.0486 3.875 17.875 3.875Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'Popup',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/index.js

@@ -1774,5 +1774,6 @@ export { default as WkiSkewWidth } from './SkewWidth.vue'
 export { default as WkiStrokeLine } from './StrokeLine.vue'
 export { default as WkiTopline } from './Topline.vue'
 export { default as WkiLettersSpacing } from './LettersSpacing.vue'
+export { default as WkiPopup } from './Popup.vue'
 
 // --- AUTO-GENERATED LUCIDE EXPORTS END ---

package/src/index.js

@@ -48,6 +48,7 @@ export { default as WkToggle } from './components/toggle/Toggle.vue'
 export { default as WkToggleGroup } from './components/toggle-group/ToggleGroup.vue'
 export { default as WkTooltip } from './components/tooltip/Tooltip.vue'
 export { default as WkTypography } from './components/typography/Typography.vue'
+export { default as WkUpload } from './components/upload/Upload.vue'
 export { default as WkDatePicker } from './components/date-picker/DatePicker.vue'
 
 // Imperative singleton service (no SFC export — mounts its own container to body).