@fangzhongya/fang-ui 0.0.97 → 0.0.98

package/dist/components/alert/style/element.scss

@@ -0,0 +1,2 @@
+@use 'element-plus/theme-chalk/src/base.scss' as *;
+@use 'element-plus/theme-chalk/src/alert.scss' as *;

package/dist/components/alert/style/index2.scss

@@ -1,4 +1,2 @@
-@use 'element-plus/theme-chalk/src/base.scss' as *;
-@use 'element-plus/theme-chalk/src/alert.scss' as *;
 @use './element.scss' as *;
 @use '../index.scss' as *;

package/dist/components/audios/index.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+;/* empty css                   */
+const withInstall = require("../../utils/vues/withInstall.cjs");
+require("./src/index.cjs");
+const index_vue_vue_type_script_setup_true_lang = require("./src/index2.cjs");
+const Audios = withInstall.withInstall(index_vue_vue_type_script_setup_true_lang.default, "Audios");
+exports.Audios = Audios;
+exports.default = Audios;

package/dist/components/audios/index.css

@@ -0,0 +1,52 @@
+:root {
+  --on: rgb(91, 189, 246);
+  --color-primary: #409eff;
+  --bag-primary: #409eff;
+  --bag-primary-text: #fff;
+  --border: #eee;
+  --layout-panel-gap: 10px;
+  --layout-panel-padding: 20px;
+  --layout-form-item-padding-right: var(
+  	--layout-panel-gap
+  );
+  --g-main-bg: var(--bg-color-page);
+}
+
+.audios.is-playing .audios-name {
+  background-color: antiquewhite;
+}
+.audios-slider {
+  display: flex;
+  align-items: center;
+}
+.audios-duration {
+  margin-left: 20px;
+  display: flex;
+  align-items: center;
+}
+.audios-control {
+  display: flex;
+  align-items: center;
+}
+.audios-control-buts {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.audios-control-volume {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.audios-control-volume-but {
+  margin-left: 10px;
+  margin-right: 15px;
+}
+.audios-control-volume-slider {
+  min-width: 40px;
+  max-width: 160px;
+}
+.audios-list-li.is-active {
+  background-color: aqua;
+}

package/dist/components/audios/index.d.ts

@@ -0,0 +1,4 @@
+import { SFCWithInstall } from '../../utils/vues';
+import { DefineComponent } from 'vue';
+declare const Audios: SFCWithInstall<DefineComponent<{}, {}, any>>;
+export { Audios, Audios as default };

package/dist/components/audios/index.js

@@ -0,0 +1,9 @@
+/* empty css                 */
+import { withInstall } from "../../utils/vues/withInstall.js";
+import "./src/index.js";
+import _sfc_main from "./src/index2.js";
+const Audios = withInstall(_sfc_main, "Audios");
+export {
+  Audios,
+  Audios as default
+};

package/dist/components/audios/index.scss

@@ -0,0 +1,49 @@
+@use '../scss/common.scss' as *;
+
+$audios: 'audios';
+@include b($audios) {
+	&.#{is('playing')} {
+		.#{z($audios, 'name')} {
+			background-color: antiquewhite;
+		}
+	}
+	&-slider {
+		display: flex;
+		align-items: center;
+	}
+	&-duration {
+		margin-left: 20px;
+		display: flex;
+		align-items: center;
+	}
+	&-control {
+		display: flex;
+		align-items: center;
+		&-buts {
+			flex: 1;
+			display: flex;
+			align-items: center;
+		}
+		&-volume {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			&-but {
+				margin-left: 10px;
+				margin-right: 15px;
+			}
+			&-slider {
+				min-width: 40px;
+				max-width: 160px;
+			}
+		}
+	}
+	&-list {
+		&-li {
+			&.#{is('active')} {
+				background-color: aqua;
+			}
+		}
+	}
+}

package/dist/components/audios/src/data.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const buildProps = require("../../../utils/vues/buildProps.cjs");
+const dataProps = buildProps.buildProps({
+  /**
+   * @props {  Array<ObjAny> } list= ( )
+   * 值
+   */
+  list: {
+    type: Array,
+    default() {
+      return [];
+    }
+  }
+});
+const dataEmits = {
+  change: (evt) => {
+  }
+};
+const dataSlot = {
+  default: "default"
+};
+const dataExpose = {};
+exports.dataEmits = dataEmits;
+exports.dataExpose = dataExpose;
+exports.dataProps = dataProps;
+exports.dataSlot = dataSlot;

package/dist/components/audios/src/data.d.ts

@@ -0,0 +1,46 @@
+import { ExtractPublicPropTypes } from 'vue';
+export declare const dataProps: {
+    /**
+     * @props {  Array<ObjAny> } list= ( )
+     * 值
+     */
+    list: {
+        type: {
+            (arrayLength: number): ObjAny[];
+            (...items: ObjAny[]): ObjAny[];
+            new (arrayLength: number): ObjAny[];
+            new (...items: ObjAny[]): ObjAny[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default(): never[];
+    };
+};
+export type DataProps = ExtractPublicPropTypes<typeof dataProps>;
+/**
+ * @emits change (val:[String, Array])
+ * 选择的时间
+ */
+export declare const dataEmits: {
+    change: (evt: string | string[]) => void;
+};
+export type DataEmits = typeof dataEmits;
+/**
+ * @slot default 默认插槽
+ */
+export declare const dataSlot: {
+    default: string;
+};
+/**
+ * @expose setValue (val:<string>设置的数据 )
+ * 设置值
+ */
+export declare const dataExpose: {};

package/dist/components/audios/src/data.js

@@ -0,0 +1,27 @@
+import { buildProps } from "../../../utils/vues/buildProps.js";
+const dataProps = buildProps({
+  /**
+   * @props {  Array<ObjAny> } list= ( )
+   * 值
+   */
+  list: {
+    type: Array,
+    default() {
+      return [];
+    }
+  }
+});
+const dataEmits = {
+  change: (evt) => {
+  }
+};
+const dataSlot = {
+  default: "default"
+};
+const dataExpose = {};
+export {
+  dataEmits,
+  dataExpose,
+  dataProps,
+  dataSlot
+};

package/dist/components/audios/src/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const index_vue_vue_type_script_setup_true_lang = require("./index2.cjs");
+exports.default = index_vue_vue_type_script_setup_true_lang.default;

package/dist/components/audios/src/index.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./index2.js";
+export {
+  _sfc_main as default
+};

package/dist/components/audios/src/index2.cjs

@@ -0,0 +1,238 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vues = require("vue");
+const index$2 = require("../../sliders/index.cjs");
+const index$3 = require("../../button/index.cjs");
+const up = require("../../../icons/vue/up.cjs");
+const down = require("../../../icons/vue/down.cjs");
+const play = require("../../../icons/vue/play.cjs");
+const pause = require("../../../icons/vue/pause.cjs");
+const sound = require("../../../icons/vue/sound.cjs");
+const mute = require("../../../icons/vue/mute.cjs");
+const hourFormat = require("@fangzhongya/utils/date/hourFormat");
+const data = require("./data.cjs");
+const index$1 = require("../../../hooks/cssname/index.cjs");
+const index = require("../../../hooks/locale/index.cjs");
+const util = require("../../players/common/util.cjs");
+const _hoisted_1 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ vues.defineComponent({
+  __name: "index",
+  props: data.dataProps,
+  emits: data.dataEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const { getLocale } = index.useLocale();
+    const cs = index$1.useCssName("audios");
+    const props = __props;
+    const emit = __emit;
+    const audioRef = vues.ref(null);
+    const current = vues.ref(0);
+    const list = vues.computed(() => {
+      return util.getListValue(props.list);
+    });
+    const value = vues.computed(() => {
+      return list.value[current.value];
+    });
+    const slider = vues.ref(0);
+    const duration = vues.ref(0);
+    const currentTime = vues.ref(0);
+    const isPlaying = vues.ref(false);
+    const volume = vues.ref(50);
+    const isMuted = vues.ref(false);
+    const isMouse = vues.ref(true);
+    const onMousedown = () => {
+      isMouse.value = false;
+    };
+    const toggleMute = () => {
+      if (!audioRef.value) return;
+      isMuted.value = !isMuted.value;
+      audioRef.value.muted = isMuted.value;
+    };
+    const togglePlay = () => {
+      if (!audioRef.value) return;
+      if (isPlaying.value) {
+        audioRef.value.pause();
+      } else {
+        audioRef.value.play();
+      }
+      isPlaying.value = !isPlaying.value;
+    };
+    const onReplay = () => {
+      var _a;
+      (_a = audioRef.value) == null ? void 0 : _a.play();
+      isPlaying.value = true;
+    };
+    const playTrack = (i) => {
+      current.value = i;
+      if (audioRef.value) {
+        audioRef.value.src = value.value.url;
+        audioRef.value.load();
+        vues.nextTick(() => {
+          onReplay();
+        });
+      }
+    };
+    const onTrack = (is) => {
+      if (is) {
+        current.value--;
+      } else {
+        current.value++;
+      }
+      playTrack(current.value);
+    };
+    const formatTooltip = (number) => {
+      return hourFormat.hourFormat(number * duration.value / 100);
+    };
+    const onChangeSlider = () => {
+      if (audioRef.value) {
+        const v = slider.value * duration.value / 100;
+        console.log("v", v);
+        audioRef.value.currentTime = v;
+      }
+      isMouse.value = true;
+    };
+    const onChange = () => {
+      if (audioRef.value) {
+        audioRef.value.volume = volume.value / 100;
+      }
+    };
+    const handleTimeUpdate = () => {
+      if (audioRef.value) {
+        currentTime.value = audioRef.value.currentTime;
+        console.log("handleTimeUpdate", currentTime.value);
+        if (isMouse.value) {
+          slider.value = currentTime.value / duration.value * 100;
+        }
+      }
+    };
+    const handleLoadedMetadata = () => {
+      if (audioRef.value) {
+        duration.value = audioRef.value.duration;
+        console.log("handleLoadedMetadata", duration.value);
+      }
+    };
+    const handleEnded = () => {
+      isPlaying.value = false;
+      console.log("handleEnded", handleEnded);
+    };
+    vues.onMounted(() => {
+      var _a;
+      audioRef.value = new Audio();
+      audioRef.value.volume = volume.value / 100;
+      audioRef.value.src = (_a = value.value) == null ? void 0 : _a.url;
+      audioRef.value.addEventListener("timeupdate", handleTimeUpdate);
+      audioRef.value.addEventListener("loadedmetadata", handleLoadedMetadata);
+      audioRef.value.addEventListener("ended", handleEnded);
+      audioRef.value.addEventListener("canplaythrough", function() {
+        console.log("音频可以播放到结束，可以安全跳转");
+      });
+      audioRef.value.load();
+    });
+    vues.onUnmounted(() => {
+      if (audioRef.value) {
+        audioRef.value.removeEventListener("timeupdate", handleTimeUpdate);
+        audioRef.value.removeEventListener(
+          "loadedmetadata",
+          handleLoadedMetadata
+        );
+        audioRef.value.removeEventListener("ended", handleEnded);
+        audioRef.value.pause();
+      }
+    });
+    __expose({
+      ...data.dataExpose
+    });
+    return (_ctx, _cache) => {
+      var _a;
+      return vues.openBlock(), vues.createElementBlock("div", {
+        class: vues.normalizeClass([vues.unref(cs).z(), vues.unref(cs).is("playing", isPlaying.value)])
+      }, [
+        vues.createElementVNode("div", {
+          class: vues.normalizeClass(vues.unref(cs).z("name"))
+        }, vues.toDisplayString((_a = value.value) == null ? void 0 : _a.name), 3),
+        vues.createElementVNode("div", {
+          class: vues.normalizeClass(vues.unref(cs).z("slider"))
+        }, [
+          vues.createVNode(vues.unref(index$2.Sliders), {
+            class: vues.normalizeClass(vues.unref(cs).z("slider-slider")),
+            onChange: onChangeSlider,
+            onMousedown,
+            "format-tooltip": formatTooltip,
+            modelValue: slider.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => slider.value = $event)
+          }, null, 8, ["class", "modelValue"]),
+          vues.createElementVNode("div", {
+            class: vues.normalizeClass(vues.unref(cs).z("duration"))
+          }, [
+            vues.createElementVNode("span", {
+              class: vues.normalizeClass(vues.unref(cs).z("duration-began"))
+            }, vues.toDisplayString(vues.unref(hourFormat.hourFormat)(currentTime.value)), 3),
+            _cache[4] || (_cache[4] = vues.createElementVNode("span", null, "/", -1)),
+            vues.createElementVNode("span", {
+              class: vues.normalizeClass(vues.unref(cs).z("duration-end"))
+            }, vues.toDisplayString(vues.unref(hourFormat.hourFormat)(duration.value)), 3)
+          ], 2)
+        ], 2),
+        vues.createElementVNode("div", {
+          class: vues.normalizeClass(vues.unref(cs).z("control"))
+        }, [
+          vues.createElementVNode("div", {
+            class: vues.normalizeClass(vues.unref(cs).z("control-buts"))
+          }, [
+            vues.createVNode(vues.unref(index$3.Button), {
+              size: "small",
+              icon: up.default,
+              disabled: current.value == 0,
+              circle: "",
+              onClick: _cache[1] || (_cache[1] = ($event) => onTrack(true))
+            }, null, 8, ["disabled"]),
+            vues.createVNode(vues.unref(index$3.Button), {
+              icon: isPlaying.value ? pause.default : play.default,
+              circle: "",
+              onClick: togglePlay
+            }, null, 8, ["icon"]),
+            vues.createVNode(vues.unref(index$3.Button), {
+              size: "small",
+              icon: down.default,
+              circle: "",
+              disabled: current.value + 1 == list.value.length,
+              onClick: _cache[2] || (_cache[2] = ($event) => onTrack(false))
+            }, null, 8, ["disabled"])
+          ], 2),
+          vues.createElementVNode("div", {
+            class: vues.normalizeClass(vues.unref(cs).z("control-volume"))
+          }, [
+            vues.createVNode(vues.unref(index$3.Button), {
+              class: vues.normalizeClass(vues.unref(cs).z("control-volume-but")),
+              icon: isMuted.value ? mute.default : sound.default,
+              circle: "",
+              onClick: toggleMute,
+              size: "small"
+            }, null, 8, ["class", "icon"]),
+            vues.createVNode(vues.unref(index$2.Sliders), {
+              class: vues.normalizeClass(vues.unref(cs).z("control-volume-slider")),
+              size: "small",
+              onChange,
+              modelValue: volume.value,
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => volume.value = $event)
+            }, null, 8, ["class", "modelValue"])
+          ], 2)
+        ], 2),
+        list.value.length > 1 ? (vues.openBlock(), vues.createElementBlock("div", {
+          key: 0,
+          class: vues.normalizeClass(vues.unref(cs).z("list"))
+        }, [
+          (vues.openBlock(true), vues.createElementBlock(vues.Fragment, null, vues.renderList(list.value, (item, index2) => {
+            return vues.openBlock(), vues.createElementBlock("div", {
+              class: vues.normalizeClass([vues.unref(cs).z("list-li"), vues.unref(cs).is("active", current.value === index2)]),
+              key: index2,
+              onClick: ($event) => playTrack(index2)
+            }, [
+              vues.createElementVNode("div", null, vues.toDisplayString(item.name), 1)
+            ], 10, _hoisted_1);
+          }), 128))
+        ], 2)) : vues.createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+exports.default = _sfc_main;