zartui 3.1.23-beta.1 → 3.1.23-beta.2

package/es/slider/Slider.mjs

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
 import { ref, computed, defineComponent } from "vue";
-import { clamp, addUnit, addNumber, numericProp, isSameValue, getSizeStyle, preventDefault, stopPropagation, createNamespace, makeNumericProp, makeStringProp, truthProp } from "../utils/index.mjs";
+import { clamp, addUnit, addNumber, numericProp, isSameValue, getSizeStyle, preventDefault, stopPropagation, createNamespace, makeNumericProp, makeStringProp, truthProp, makeNumberProp } from "../utils/index.mjs";
 import { useRect, useCustomFieldValue, useEventListener } from "@zartui/use";
 import { useTouch } from "../composables/use-touch.mjs";
 const [name, bem] = createNamespace("slider");
@@ -24,7 +24,10 @@ const sliderProps = {
   title: String,
   // 标题跟进度与主体进度条的排列方式
   direction: makeStringProp("horizontal"),
-  showPercent: truthProp
+  showPercent: truthProp,
+  // 进度条在边缘时，为了防止进度条显示被挤压，对进度条边缘进行扩充，扩充的宽度
+  barEdgeOffset: makeNumberProp(4),
+  barEdgeOffsetBoundary: makeNumberProp(10)
 };
 var stdin_default = defineComponent({
   name,
@@ -50,15 +53,21 @@ var stdin_default = defineComponent({
       };
     });
     const isRange = (val) => props.range && Array.isArray(val);
+    function calcBarWidthInEdge(originWidth) {
+      if (originWidth < props.barEdgeOffsetBoundary && originWidth > 0) {
+        return props.barEdgeOffset + originWidth;
+      }
+      return originWidth;
+    }
     const calcMainAxis = () => {
       const {
         modelValue,
         min
       } = props;
       if (isRange(modelValue)) {
-        return `${(modelValue[1] - modelValue[0]) * 100 / scope.value}%`;
+        return `${calcBarWidthInEdge(modelValue[1] - modelValue[0]) * 100 / scope.value}%`;
       }
-      return `${(modelValue - Number(min)) * 100 / scope.value}%`;
+      return `${calcBarWidthInEdge(modelValue - Number(min)) * 100 / scope.value}%`;
     };
     const calcOffset = () => {
       const {
@@ -66,7 +75,8 @@ var stdin_default = defineComponent({
         min
       } = props;
       if (isRange(modelValue)) {
-        return `${(modelValue[0] - Number(min)) * 100 / scope.value}%`;
+        const diff = modelValue[0] - Number(min);
+        return `${diff * 100 / scope.value}%`;
       }
       return "0%";
     };

package/es/slider/index.d.ts

@@ -36,7 +36,15 @@ export declare const Slider: import("../utils").WithInstall<import("vue").Define
         type: BooleanConstructor;
         default: true;
     };
-}, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "dragStart" | "dragEnd")[], "update:modelValue" | "change" | "dragStart" | "dragEnd", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    barEdgeOffset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    barEdgeOffsetBoundary: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "dragEnd" | "dragStart")[], "update:modelValue" | "change" | "dragEnd" | "dragStart", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     min: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -74,11 +82,19 @@ export declare const Slider: import("../utils").WithInstall<import("vue").Define
         type: BooleanConstructor;
         default: true;
     };
+    barEdgeOffset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    barEdgeOffsetBoundary: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onDragStart?: ((...args: any[]) => any) | undefined;
     onDragEnd?: ((...args: any[]) => any) | undefined;
+    onDragStart?: ((...args: any[]) => any) | undefined;
 }, {
     reverse: boolean;
     range: boolean;
@@ -88,9 +104,11 @@ export declare const Slider: import("../utils").WithInstall<import("vue").Define
     direction: import("./Slider").SliderDirection;
     modelValue: number | [number, number];
     readonly: boolean;
-    step: string | number;
     min: string | number;
+    step: string | number;
     showPercent: boolean;
+    barEdgeOffset: number;
+    barEdgeOffsetBoundary: number;
 }, {}>>;
 export default Slider;
 export { sliderProps } from './Slider';

package/es/stepper/Stepper.d.ts

@@ -165,9 +165,9 @@ declare const _default: import("vue").DefineComponent<{
     name: string | number;
     max: string | number;
     disabled: boolean;
-    longPress: boolean;
-    step: string | number;
     min: string | number;
+    step: string | number;
+    longPress: boolean;
     integer: boolean;
     showPlus: boolean;
     showMinus: boolean;

package/es/stepper/index.d.ts

@@ -110,9 +110,9 @@ export declare const Stepper: import("../utils").WithInstall<import("vue").Defin
     name: string | number;
     max: string | number;
     disabled: boolean;
-    longPress: boolean;
-    step: string | number;
     min: string | number;
+    step: string | number;
+    longPress: boolean;
     integer: boolean;
     showPlus: boolean;
     showMinus: boolean;

package/es/swipe/Swipe.d.ts

@@ -73,7 +73,7 @@ declare const _default: import("vue").DefineComponent<{
         default: true;
     };
     title: ArrayConstructor;
-}, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "dragStart" | "dragEnd")[], "change" | "dragStart" | "dragEnd", import("vue").PublicProps, Readonly<ExtractPropTypes<{
+}, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "dragEnd" | "dragStart")[], "change" | "dragEnd" | "dragStart", import("vue").PublicProps, Readonly<ExtractPropTypes<{
     loop: {
         type: BooleanConstructor;
         default: true;
@@ -110,8 +110,8 @@ declare const _default: import("vue").DefineComponent<{
     title: ArrayConstructor;
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
-    onDragStart?: ((...args: any[]) => any) | undefined;
     onDragEnd?: ((...args: any[]) => any) | undefined;
+    onDragStart?: ((...args: any[]) => any) | undefined;
 }, {
     autoplay: string | number;
     loop: boolean;

package/es/swipe/index.d.ts

@@ -34,7 +34,7 @@ export declare const Swipe: import("../utils").WithInstall<import("vue").DefineC
         default: true;
     };
     title: ArrayConstructor;
-}, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "dragStart" | "dragEnd")[], "change" | "dragStart" | "dragEnd", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "dragEnd" | "dragStart")[], "change" | "dragEnd" | "dragStart", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     loop: {
         type: BooleanConstructor;
         default: true;
@@ -71,8 +71,8 @@ export declare const Swipe: import("../utils").WithInstall<import("vue").DefineC
     title: ArrayConstructor;
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
-    onDragStart?: ((...args: any[]) => any) | undefined;
     onDragEnd?: ((...args: any[]) => any) | undefined;
+    onDragStart?: ((...args: any[]) => any) | undefined;
 }, {
     autoplay: string | number;
     loop: boolean;

package/es/table/Table.mjs

@@ -5,6 +5,7 @@ import { Icon } from "../icon/index.mjs";
 import { SortOrderEnum } from "./types.mjs";
 import TextEllipsis from "../text-ellipsis/index.mjs";
 const [name, bem] = createNamespace("table");
+const BODY_CELL_SLOTS_NAME = "bodyCell";
 const tableProps = {
   headList: makeArrayProp(),
   dataList: makeArrayProp(),
@@ -151,10 +152,20 @@ var stdin_default = defineComponent({
         }, null)]) : ""])]);
       }
     };
-    const getElement = (rowData, colData) => {
+    const getElement = (rowData, colData, rowIndex) => {
       if (rowData[colData.key] && rowData[colData.key].id && slots[`data-${rowData[colData.key].id}`]) {
         return slots[`data-${rowData[colData.key].id}`](rowData[colData.key]);
       }
+      const slotProps = {
+        column: colData,
+        record: rowData,
+        text: rowData[colData.key],
+        index: rowIndex
+      };
+      const bodyCellSlots = slots[BODY_CELL_SLOTS_NAME] && slots[BODY_CELL_SLOTS_NAME](slotProps);
+      if (bodyCellSlots && bodyCellSlots.length) {
+        return bodyCellSlots[0];
+      }
       return colData.ellipsis ? _createVNode(TextEllipsis, {
         "content": rowData[colData.key],
         "expandType": "dialog"
@@ -176,7 +187,7 @@ var stdin_default = defineComponent({
         "colspan": (additionalCellProps == null ? void 0 : additionalCellProps.colSpan) !== 1 ? additionalCellProps == null ? void 0 : additionalCellProps.colSpan : null,
         "rowspan": (additionalCellProps == null ? void 0 : additionalCellProps.rowSpan) !== 1 ? additionalCellProps == null ? void 0 : additionalCellProps.rowSpan : null,
         "style": style
-      }, [getElement(rowData, colData)]);
+      }, [getElement(rowData, colData, rowIndex)]);
     })]);
     const getCol = () => {
       const cols = [];

package/es/utils/format.d.ts

@@ -11,3 +11,4 @@ export declare function padZero(num: Numeric, targetLength?: number): string;
 export declare const clamp: (num: number, min: number, max: number) => number;
 export declare function formatNumber(value: string, allowDot?: boolean, allowMinus?: boolean): string;
 export declare function addNumber(num1: number, num2: number): number;
+export declare function formatSeconds(value?: string | number): string;

package/es/utils/format.mjs

@@ -106,12 +106,27 @@ function addNumber(num1, num2) {
   const cardinal = 10 ** 10;
   return Math.round((num1 + num2) * cardinal) / cardinal;
 }
+function formatSeconds(value = 0) {
+  if (!value) {
+    return "00:00:00";
+  }
+  const time = typeof value === "number" ? value : parseInt(value);
+  const hours = Math.floor(time / 3600);
+  const minutes = Math.floor((time - hours * 3600) / 60);
+  const seconds = time - hours * 3600 - minutes * 60;
+  let result = "";
+  result += ("0" + hours.toString()).slice(-2) + ":";
+  result += ("0" + minutes.toString()).slice(-2) + ":";
+  result += ("0" + seconds.toString()).slice(-2);
+  return result;
+}
 export {
   addNumber,
   addUnit,
   camelize,
   clamp,
   formatNumber,
+  formatSeconds,
   getSizeStyle,
   getZIndexStyle,
   kebabCase,

package/es/video/Video.mjs

@@ -4,10 +4,10 @@ import { useExpose } from "../composables/use-expose.mjs";
 import { useGlobalZIndex } from "../composables/use-global-z-index.mjs";
 import Icon from "../icon/index.mjs";
 import { throttle } from "../lazyload/vue-lazyload/util.mjs";
-import { createNamespace, makeStringProp } from "../utils/index.mjs";
+import { createNamespace, makeStringProp, formatSeconds } from "../utils/index.mjs";
 const [name, bem] = createNamespace("video");
 const videoProps = {
-  src: makeStringProp("star"),
+  src: makeStringProp(""),
   // 控制控制器和标题的显示
   showToolBox: Boolean,
   options: {
@@ -174,27 +174,6 @@ var stdin_default = defineComponent({
         }
       }
     };
-    const timeFormat = (t = 0) => {
-      let h = Math.floor(t / 3600);
-      if (+h < 10) {
-        h = "0" + h;
-      }
-      let m = Math.floor(t % 3600 / 60);
-      if (+m < 10) {
-        m = "0" + m;
-      }
-      let s = Math.round(t % 3600 % 60);
-      if (+s < 10) {
-        s = "0" + s;
-      }
-      let str = "";
-      if (h != 0) {
-        str = h + ":" + m + ":" + s;
-      } else {
-        str = m + ":" + s;
-      }
-      return str;
-    };
     const getLoadTime = () => {
       var _a, _b;
       state.videoSet.loaded = (((_a = root.value) == null ? void 0 : _a.buffered.end(0)) || 0) / (((_b = root.value) == null ? void 0 : _b.duration) || 1) * 100;
@@ -205,8 +184,8 @@ var stdin_default = defineComponent({
       const currentTime = Number.isNaN((_c = root.value) == null ? void 0 : _c.currentTime) ? 0 : (_d = root.value) == null ? void 0 : _d.currentTime;
       const percent = (currentTime || 0) / (durationTime || 1);
       state.videoSet.progress.current = Math.round(state.videoSet.progress.width * percent);
-      state.videoSet.totalTime = timeFormat(durationTime);
-      state.videoSet.displayTime = timeFormat((_e = root.value) == null ? void 0 : _e.currentTime);
+      state.videoSet.totalTime = formatSeconds(durationTime);
+      state.videoSet.displayTime = formatSeconds((_e = root.value) == null ? void 0 : _e.currentTime);
       emit("time", currentTime, durationTime, state.videoSet.displayTime, state.videoSet.totalTime);
     };
     const playEnded = () => {

package/lib/audio/Audio.d.ts

@@ -0,0 +1,82 @@
+import type { ExtractPropTypes } from 'vue';
+import { AudioType } from './types';
+declare const audioProps: {
+    src: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    muted: BooleanConstructor;
+    autoplay: BooleanConstructor;
+    loop: BooleanConstructor;
+    preload: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    second: {
+        type: NumberConstructor;
+        default: number;
+    };
+    type: {
+        type: import("vue").PropType<AudioType>;
+        default: AudioType;
+    };
+};
+export type AudioProps = ExtractPropTypes<typeof audioProps>;
+declare const _default: import("vue").DefineComponent<{
+    src: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    muted: BooleanConstructor;
+    autoplay: BooleanConstructor;
+    loop: BooleanConstructor;
+    preload: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    second: {
+        type: NumberConstructor;
+        default: number;
+    };
+    type: {
+        type: import("vue").PropType<AudioType>;
+        default: AudioType;
+    };
+}, () => import("vue/jsx-runtime").JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("ended" | "play" | "forward" | "mute" | "fastBack" | "changeProgress" | "canPlay")[], "ended" | "play" | "forward" | "mute" | "fastBack" | "changeProgress" | "canPlay", import("vue").PublicProps, Readonly<ExtractPropTypes<{
+    src: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    muted: BooleanConstructor;
+    autoplay: BooleanConstructor;
+    loop: BooleanConstructor;
+    preload: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    second: {
+        type: NumberConstructor;
+        default: number;
+    };
+    type: {
+        type: import("vue").PropType<AudioType>;
+        default: AudioType;
+    };
+}>> & {
+    onEnded?: ((...args: any[]) => any) | undefined;
+    onPlay?: ((...args: any[]) => any) | undefined;
+    onForward?: ((...args: any[]) => any) | undefined;
+    onMute?: ((...args: any[]) => any) | undefined;
+    onFastBack?: ((...args: any[]) => any) | undefined;
+    onChangeProgress?: ((...args: any[]) => any) | undefined;
+    onCanPlay?: ((...args: any[]) => any) | undefined;
+}, {
+    type: AudioType;
+    autoplay: boolean;
+    loop: boolean;
+    muted: boolean;
+    preload: string;
+    src: string;
+    second: number;
+}, {}>;
+export default _default;

package/lib/audio/Audio.js

@@ -0,0 +1,253 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_icon = __toESM(require("../icon"));
+var import_slider = __toESM(require("../slider"));
+var import_utils = require("../utils");
+var import_types = require("./types");
+const [name, bem] = (0, import_utils.createNamespace)("audio");
+const audioProps = {
+  src: (0, import_utils.makeStringProp)(""),
+  muted: Boolean,
+  autoplay: Boolean,
+  loop: Boolean,
+  preload: (0, import_utils.makeStringProp)("auto"),
+  second: (0, import_utils.makeNumberProp)(0),
+  type: (0, import_utils.makeStringProp)("progress")
+};
+var stdin_default = (0, import_vue2.defineComponent)({
+  name,
+  props: audioProps,
+  emits: ["fastBack", "play", "forward", "ended", "changeProgress", "mute", "canPlay"],
+  setup(props, {
+    emit,
+    slots,
+    expose
+  }) {
+    const audioRef = (0, import_vue2.ref)();
+    const audioData = (0, import_vue2.reactive)({
+      currentTime: 0,
+      currentDuration: "00:00:00",
+      percent: 0,
+      duration: "00:00:00",
+      second: 0,
+      hanMuted: props.muted,
+      playing: props.autoplay,
+      handPlaying: false
+    });
+    const onCanplay = (e) => {
+      var _a, _b, _c;
+      if (props.autoplay) {
+        if (audioRef.value && audioRef.value.paused) {
+          audioRef.value.play();
+        }
+      }
+      audioData.second = ((_a = audioRef.value) == null ? void 0 : _a.duration) || 0;
+      audioData.duration = (0, import_utils.formatSeconds)(((_c = (_b = audioRef.value) == null ? void 0 : _b.duration) == null ? void 0 : _c.toString()) || "");
+      emit("canPlay", e);
+    };
+    const onTimeupdate = (e) => {
+      audioData.currentTime = parseInt(e.target.currentTime);
+    };
+    const fastBack = (val) => {
+      if (audioData.currentTime > 0) {
+        if (val) {
+          audioData.currentTime = (0, import_utils.clamp)(audioData.currentTime - val, 0, audioData.second);
+        } else {
+          audioData.currentTime--;
+        }
+      }
+      if (audioRef.value) {
+        audioRef.value.currentTime = audioData.currentTime;
+      }
+      emit("fastBack", audioData.currentTime);
+    };
+    const changeStatus = () => {
+      if (audioRef.value) {
+        if (audioData.playing) {
+          audioRef.value.pause();
+          audioData.handPlaying = false;
+        } else {
+          audioRef.value.play();
+          audioData.handPlaying = true;
+        }
+      }
+      audioData.playing = !audioData.playing;
+      emit("play", audioData.playing);
+    };
+    const forward = (val) => {
+      if (val) {
+        audioData.currentTime = (0, import_utils.clamp)(audioData.currentTime + val, 0, audioData.second);
+      } else {
+        audioData.currentTime++;
+      }
+      if (audioRef.value) {
+        audioRef.value.currentTime = audioData.currentTime;
+      }
+      emit("forward", audioData.currentTime);
+    };
+    const handle = (val) => {
+      audioData.currentDuration = (0, import_utils.formatSeconds)(val);
+      audioData.percent = val / audioData.second * 100;
+    };
+    const audioEnd = () => {
+      audioData.playing = false;
+      emit("ended");
+    };
+    const progressChange = (val) => {
+      var _a;
+      audioData.percent = val;
+      if (audioRef.value) {
+        audioRef.value.currentTime = audioData.second * val / 100;
+      }
+      emit("changeProgress", ((_a = audioRef.value) == null ? void 0 : _a.currentTime) || 0);
+    };
+    const handleMute = () => {
+      audioData.hanMuted = !audioData.hanMuted;
+      emit("mute", audioData.hanMuted);
+    };
+    function renderProgress() {
+      if (props.type === "progress") {
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("progress")
+        }, [(0, import_vue.createVNode)("div", {
+          "class": bem("time")
+        }, [audioData.currentDuration]), (0, import_vue.createVNode)("div", {
+          "class": bem("bar")
+        }, [(0, import_vue.createVNode)(import_slider.default, {
+          "modelValue": audioData.percent,
+          "showPercent": false,
+          "readonly": false,
+          "onUpdate:modelValue": progressChange
+        }, null)]), (0, import_vue.createVNode)("div", {
+          "class": bem("time")
+        }, [audioData.duration])]);
+      }
+    }
+    function renderIcon() {
+      if (props.type === "icon") {
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("icon")
+        }, [(0, import_vue.createVNode)("div", {
+          "class": bem("icon-box", {
+            play: audioData.playing,
+            stop: !audioData.playing
+          }),
+          "onClick": () => changeStatus()
+        }, [(0, import_vue.createVNode)(import_icon.default, {
+          "name": "audio",
+          "class": bem("", {
+            rotate: audioData.playing
+          })
+        }, null)])]);
+      }
+    }
+    function renderSlots() {
+      var _a, _b;
+      if (props.type === "none") {
+        return (0, import_vue.createVNode)("div", {
+          "onClick": () => changeStatus()
+        }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+      } else {
+        return (_b = slots.default) == null ? void 0 : _b.call(slots);
+      }
+    }
+    (0, import_vue2.watch)(() => audioData.currentTime, (value) => {
+      handle(value);
+    });
+    (0, import_vue2.onMounted)(() => {
+      const arr = ["webkitVisibilityState", "visibilitychange"];
+      try {
+        for (let i = 0; i < arr.length; i++) {
+          document.addEventListener(arr[i], () => {
+            var _a;
+            if (document.hidden) {
+              (_a = audioRef.value) == null ? void 0 : _a.pause();
+            } else {
+              if (audioData.playing) {
+                setTimeout(() => {
+                  var _a2;
+                  (_a2 = audioRef.value) == null ? void 0 : _a2.play();
+                }, 200);
+              }
+            }
+          });
+        }
+      } catch (e) {
+        console.log(e.message);
+      }
+    });
+    (0, import_vue2.provide)(import_types.ZT_AUDIO_KEY, {
+      children: [],
+      props,
+      audioData,
+      handleMute,
+      forward,
+      fastBack,
+      changeStatus
+    });
+    expose({
+      audioData,
+      audioRef,
+      handleMute,
+      forward,
+      fastBack,
+      changeStatus
+    });
+    return () => {
+      const {
+        src,
+        type,
+        preload,
+        autoplay,
+        loop
+      } = props;
+      return (0, import_vue.createVNode)("div", {
+        "class": bem()
+      }, [renderProgress(), renderIcon(), renderSlots(), (0, import_vue.createVNode)("audio", {
+        "ref": audioRef,
+        "class": bem("audio-main"),
+        "controls": type === "controls",
+        "src": src,
+        "preload": preload,
+        "autoplay": autoplay,
+        "loop": loop,
+        "muted": audioData.hanMuted,
+        "onTimeupdate": onTimeupdate,
+        "onCanplay": onCanplay,
+        "onEnded": audioEnd
+      }, null)]);
+    };
+  }
+});

package/lib/audio/index.css

@@ -0,0 +1 @@
+:root{--zt-audio-icon-disabled-background: var(--zt-gray-a4);--zt-audio-icon-size: var(--zt-font-size-xl);--zt-audio-icon-box-shadow: 0 0 8px var(--zt-gray-a4);--zt-audio-icon-playing-duration: 2s;--zt-audio-icon-box-size: 30px}.zt-audio{padding:0}.zt-audio .zt-audio__progress{display:flex;align-items:center;width:100%;margin:0 auto;padding:10px 0}.zt-audio .zt-audio__progress .zt-audio__bar{flex:1;margin:0 10px}.zt-audio .zt-audio__progress .zt-audio__time{min-width:50px;font-size:12px;text-align:center}.zt-audio .zt-audio__icon{position:relative;display:inline-block}.zt-audio .zt-audio__icon-box{display:flex;align-items:center;justify-content:center;width:var(--zt-audio-icon-box-size);height:var(--zt-audio-icon-box-size);background:#fff;border-radius:50%;box-shadow:var(--zt-audio-icon-box-shadow)}.zt-audio .zt-audio__icon-box>i{font-size:var(--zt-audio-icon-size)}.zt-audio .zt-audio__icon-box--play>i{animation:rotation var(--zt-audio-icon-playing-duration) linear infinite}.zt-audio .zt-audio__icon-box--stop:after{position:absolute;left:50%;top:50%;content:"";height:2px;width:var(--zt-audio-icon-box-size);background:var(--zt-audio-icon-disabled-background);transform:translate(-50%,-50%) rotate(45deg)}@keyframes rotation{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}