djm-ui 0.72.0 → 0.73.0

package/dist/djm-ui.umd.js

@@ -1,4 +1,4 @@
-/*! DJM UI v0.72.0 · MIT · 2026-10-26 */
+/*! DJM UI v0.73.0 · MIT · 2026-10-26 */
 "use strict";
 var DjmUI = (() => {
   var __defProp = Object.defineProperty;
@@ -1040,6 +1040,7 @@ Minimum version required to store current data is: ` + i + `.
     djmMessage: () => djmMessage,
     djmMessages: () => djmMessages,
     getLocale: () => getLocale,
+    glass: () => glass,
     hasPermission: () => hasPermission,
     initTheme: () => initTheme,
     install: () => install,
@@ -1049,6 +1050,7 @@ Minimum version required to store current data is: ` + i + `.
     primaryColor: () => primaryColor,
     resetPrimaryColor: () => resetPrimaryColor,
     sanitizeHtml: () => sanitizeHtml,
+    setGlass: () => setGlass,
     setLocale: () => setLocale,
     setPermissions: () => setPermissions,
     setPrimaryColor: () => setPrimaryColor,
@@ -4253,12 +4255,18 @@ Minimum version required to store current data is: ` + i + `.
     name: "DjmProgress",
     props: {
       percent: { type: Number, default: 0 },
+      // line 横向 / circle 环形
+      type: { type: String, default: "line" },
       // '' / success / error / warning
       status: { type: String, default: "" },
       showText: { type: Boolean, default: true },
       strokeWidth: { type: Number, default: 6 },
       // 自定义进度色，不传由状态决定
-      color: { type: String, default: "" }
+      color: { type: String, default: "" },
+      // 环形直径（px）
+      size: { type: Number, default: 96 },
+      // 无障碍名称，默认「进度」
+      label: { type: String, default: "" }
     },
     computed: {
       safePercent() {
@@ -4271,10 +4279,72 @@ Minimum version required to store current data is: ` + i + `.
       },
       trackStyle() {
         return { height: this.strokeWidth + "px" };
+      },
+      circleSize() {
+        return Math.max(48, Number(this.size) || 96);
+      },
+      circleRadius() {
+        return (this.circleSize - this.strokeWidth) / 2;
+      },
+      circleLength() {
+        return 2 * Math.PI * this.circleRadius;
+      },
+      circleOffset() {
+        return this.circleLength * (1 - this.safePercent / 100);
+      },
+      circleStyle() {
+        return { width: this.circleSize + "px", height: this.circleSize + "px" };
+      },
+      circleLabelStyle() {
+        return { fontSize: Math.max(12, Math.round(this.circleSize / 5)) + "px" };
       }
     },
     template: `
-    <div class="djm-progress-line" :class="status ? 'djm-is-' + status : ''">
+    <div
+      v-if="type === 'circle'"
+      class="djm-progress-circle"
+      :class="status ? 'djm-is-' + status : ''"
+      :style="circleStyle"
+      role="progressbar"
+      :aria-label="label || '\u8FDB\u5EA6'"
+      :aria-valuenow="safePercent"
+      aria-valuemin="0"
+      aria-valuemax="100"
+    >
+      <svg :viewBox="'0 0 ' + circleSize + ' ' + circleSize" aria-hidden="true">
+        <circle
+          class="djm-progress-circle-track"
+          :cx="circleSize / 2"
+          :cy="circleSize / 2"
+          :r="circleRadius"
+          :stroke-width="strokeWidth"
+          fill="none"
+        />
+        <circle
+          class="djm-progress-circle-bar"
+          :cx="circleSize / 2"
+          :cy="circleSize / 2"
+          :r="circleRadius"
+          :stroke-width="strokeWidth"
+          fill="none"
+          stroke-linecap="round"
+          :stroke-dasharray="circleLength"
+          :stroke-dashoffset="circleOffset"
+          :style="color ? { stroke: color } : null"
+        />
+      </svg>
+      <span v-if="showText" class="djm-progress-circle-label" :style="circleLabelStyle">{{ safePercent }}%</span>
+    </div>
+    <div
+      v-else
+      class="djm-progress-line"
+      :class="status ? 'djm-is-' + status : ''"
+      role="progressbar"
+      :aria-label="label || '\u8FDB\u5EA6'"
+      :aria-valuenow="safePercent"
+      aria-valuemin="0"
+      aria-valuemax="100"
+    >
       <div class="djm-progress" :style="trackStyle">
         <div class="djm-progress-bar" :style="barStyle"></div>
       </div>
@@ -5480,39 +5550,81 @@ Minimum version required to store current data is: ` + i + `.
     name: "DjmSpin",
     props: {
       spinning: { type: Boolean, default: true },
-      size: { type: String, default: "md" },
       // sm | md | lg
-      tip: { type: String, default: "" }
+      size: { type: String, default: "md" },
+      // ring 环形 / dots 点状 / bars 柱状 / pulse 脉冲
+      type: { type: String, default: "ring" },
+      tip: { type: String, default: "" },
+      // 延迟多少毫秒后显示，0 表示立即
+      delay: { type: Number, default: 0 },
+      // 全屏加载：遮罩铺满视口
+      fullscreen: { type: Boolean, default: false },
+      // 自定义指示器颜色，默认跟随品牌色
+      color: { type: String, default: "" }
+    },
+    setup(props) {
+      const visible = ref(false);
+      let timer = null;
+      function sync() {
+        window.clearTimeout(timer);
+        timer = null;
+        if (!props.spinning) {
+          visible.value = false;
+          return;
+        }
+        if (props.delay > 0) {
+          timer = window.setTimeout(() => {
+            visible.value = true;
+          }, props.delay);
+        } else {
+          visible.value = true;
+        }
+      }
+      watch(() => [props.spinning, props.delay], sync, { immediate: true });
+      onBeforeUnmount(() => window.clearTimeout(timer));
+      return { visible };
     },
     computed: {
-      // 有默认插槽即为包裹模式
       wrapped() {
         return !!this.$slots.default;
+      },
+      rootClass() {
+        return [
+          "djm-spin",
+          "djm-spin-" + this.size,
+          {
+            "djm-spin-wrap": this.wrapped && !this.fullscreen,
+            "djm-spin-inline": !this.wrapped && !this.fullscreen,
+            "djm-spin-fullscreen": this.fullscreen
+          }
+        ];
       }
     },
     template: `
     <div
-      v-if="wrapped"
-      class="djm-spin-wrap"
-      :class="'djm-spin-' + size"
-      :aria-busy="String(spinning)"
+      v-if="fullscreen || wrapped || visible"
+      :class="rootClass"
+      :aria-busy="String(visible)"
+      :role="visible ? 'status' : undefined"
+      :aria-label="!wrapped && !fullscreen && !tip && visible ? '\u52A0\u8F7D\u4E2D' : undefined"
     >
-      <slot />
-      <div v-if="spinning" class="djm-spin-mask" role="status">
-        <span class="djm-spinner"></span>
+      <slot v-if="wrapped && !fullscreen" />
+      <div v-if="visible" class="djm-spin-mask">
+        <span class="djm-spin-indicator" :class="'djm-spin-' + type" :style="color ? { color } : null">
+          <slot name="indicator">
+            <i v-if="type === 'ring'" class="djm-spinner"></i>
+            <template v-else-if="type === 'dots'">
+              <i></i><i></i><i></i>
+            </template>
+            <template v-else-if="type === 'bars'">
+              <i></i><i></i><i></i><i></i>
+            </template>
+            <i v-else class="djm-spin-core"></i>
+          </slot>
+        </span>
         <span v-if="tip" class="djm-spin-tip">{{ tip }}</span>
       </div>
     </div>
-    <span
-      v-else
-      class="djm-spin-inline"
-      :class="'djm-spin-' + size"
-      role="status"
-      :aria-label="tip ? undefined : '\u52A0\u8F7D\u4E2D'"
-    >
-      <span class="djm-spinner"></span>
-      <span v-if="tip" class="djm-spin-tip">{{ tip }}</span>
-    </span>
   `
   };
 
@@ -6118,7 +6230,9 @@ Minimum version required to store current data is: ` + i + `.
   // src/theme/index.js
   var KEY = "djm-theme";
   var COLOR_KEY = "djm-primary";
+  var GLASS_KEY = "djm-glass";
   var theme = ref("light");
+  var glass = ref(false);
   var PRESET_COLORS = [
     { name: "\u9ED8\u8BA4\u84DD", value: "#1a6fc4" },
     { name: "\u79D1\u6280\u84DD", value: "#2563eb" },
@@ -6251,6 +6365,15 @@ Minimum version required to store current data is: ` + i + `.
   function toggleTheme() {
     setTheme(theme.value === "dark" ? "light" : "dark");
   }
+  function setGlass(enabled) {
+    glass.value = !!enabled;
+    document.documentElement.dataset.djmGlass = glass.value ? "on" : "";
+    try {
+      if (glass.value) localStorage.setItem(GLASS_KEY, "1");
+      else localStorage.removeItem(GLASS_KEY);
+    } catch (error) {
+    }
+  }
   function initTheme() {
     let saved = "";
     try {
@@ -6270,9 +6393,16 @@ Minimum version required to store current data is: ` + i + `.
     } catch (error) {
       color = "";
     }
+    let glassSaved = false;
+    try {
+      glassSaved = localStorage.getItem(GLASS_KEY) === "1";
+    } catch (error) {
+      glassSaved = false;
+    }
     if (color) primaryColor.value = color;
     const next = param === "dark" || param === "light" ? param : saved || "light";
     setTheme(next);
+    setGlass(glassSaved);
   }
 
   // src/components/watermark/index.js
@@ -8167,7 +8297,9 @@ Minimum version required to store current data is: ` + i + `.
       // 点击遮罩关闭
       maskClosable: { type: Boolean, default: true },
       showClose: { type: Boolean, default: true },
-      closeOnEsc: { type: Boolean, default: true }
+      closeOnEsc: { type: Boolean, default: true },
+      // 毛玻璃底
+      glass: { type: Boolean, default: false }
     },
     emits: ["update:modelValue", "open", "close"],
     setup(props, { emit }) {
@@ -8230,7 +8362,7 @@ Minimum version required to store current data is: ` + i + `.
           <aside
             ref="panelRef"
             class="djm-drawer"
-            :class="'djm-drawer-' + placement"
+            :class="['djm-drawer-' + placement, { 'djm-is-glass': glass }]"
             :style="panelStyle"
             role="dialog"
             aria-modal="true"
@@ -8279,7 +8411,9 @@ Minimum version required to store current data is: ` + i + `.
       // 是否允许 Esc 关闭
       closeOnEsc: { type: Boolean, default: true },
       // 全屏铺满，适合配置类大表单
-      fullscreen: { type: Boolean, default: false }
+      fullscreen: { type: Boolean, default: false },
+      // 毛玻璃底：需要显示背后页面时使用
+      glass: { type: Boolean, default: false }
     },
     emits: ["update:modelValue", "open", "close"],
     setup(props, { emit }) {
@@ -8345,7 +8479,7 @@ Minimum version required to store current data is: ` + i + `.
           <div
             ref="dialogRef"
             class="djm-modal"
-            :class="{ 'djm-is-fullscreen': fullscreen }"
+            :class="{ 'djm-is-fullscreen': fullscreen, 'djm-is-glass': glass }"
             :style="dialogStyle"
             role="dialog"
             aria-modal="true"
@@ -16031,7 +16165,7 @@ Minimum version required to store current data is: ` + i + `.
     org_chart_default,
     page_tabs_default
   ];
-  var version = "0.72.0";
+  var version = "0.73.0";
   function install(app, options = {}) {
     if (options.locale) setLocale(options.locale);
     components.forEach((component) => app.component(component.name, component));