@voicenter-team/voicenter-ui-plus 3.0.0 → 3.0.2

package/library/components/VcSoundplayer/VcSoundPlayer.vue.mjs

@@ -1,7 +1,276 @@
-import _sfc_main from "./VcSoundPlayer.vue2.mjs";
-import '../../assets/components/VcSoundplayer/VcSoundPlayer.css';/* empty css                    */
-import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const VcSoundPlayer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2f635e81"]]);
+import '../../assets/components/VcSoundplayer/VcSoundPlayer.css';
+import { defineComponent, ref, computed, watch, openBlock, createElementBlock, createBlock, withCtx, createVNode, createCommentVNode, withDirectives, normalizeClass, vShow, createElementVNode, Fragment, renderList, withModifiers } from "vue";
+import _sfc_main$2 from "./VcSoundPlayerError.vue.mjs";
+import _sfc_main$3 from "./VcPlayerPlayStopButton.vue.mjs";
+import _sfc_main$4 from "./VcPlayerSkipButtons.vue.mjs";
+import '../../assets/components/VcIcon/VcIcon.css';import '../../assets/components/VcPopover/VcPopover.css';import '../../assets/components/VcSoundplayer/VcSoundPlayerWrapper.css';import '../../assets/components/VcSoundplayer/VcSoundPlayerProgress.css';import '../../assets/components/VcSoundplayer/VcSoundVolume.css';import '../../assets/components/VcSoundplayer/VcPlayerSkipButtons.css';/* empty css                          */
+import _sfc_main$6 from "./VcSoundCurrentTime.vue.mjs";
+import _sfc_main$8 from "./VcSoundDuration.vue.mjs";
+import _sfc_main$9 from "./VcSoundVolume.vue.mjs";
+/* empty css                    */
+import _sfc_main$7 from "./VcSoundPlayerProgress.vue.mjs";
+/* empty css                            */
+import _sfc_main$1 from "./VcSoundPlayerWrapper.vue.mjs";
+/* empty css                           */
+import { DEFAULT_OPTIONS } from "./player.options.mjs";
+import _sfc_main$a from "../VcPopover/VcPopover.vue.mjs";
+/* empty css                           */
+import _sfc_main$5 from "../VcIcon/VcIcon.vue.mjs";
+/* empty css                     */
+const _hoisted_1 = { class: "vc-sound-player" };
+const _hoisted_2 = {
+  key: 1,
+  class: "w-full flex items-center gap-x-2 relative"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "flex items-center px-1"
+};
+const _hoisted_4 = { key: 5 };
+const _hoisted_5 = { class: "cursor-pointer text-inactive-elements hover:text-primary-actions duration-200" };
+const _hoisted_6 = { class: "p-2" };
+const _hoisted_7 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcSoundPlayer",
+  props: {
+    soundId: { default: void 0 },
+    src: {},
+    currentPlay: { default: void 0 },
+    preIcon: { default: "" },
+    simple: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    showSkipButtons: { type: Boolean, default: false },
+    skipLength: { default: void 0 },
+    size: { default: "md" },
+    downloadLinks: { default: () => [] }
+  },
+  emits: ["ready", "start", "stop", "onPlay", "pause"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const SoundPlayerWrapper = ref();
+    const isError = ref(false);
+    const audioErrorMessage = ref("");
+    const height = computed(() => {
+      return props.size === "sm" ? "h-4" : "h-8";
+    });
+    const playerOptions = computed(() => {
+      const configColors = getComputedStyle(document.body);
+      const activeColor = configColors.getPropertyValue("--primary-actions");
+      const inActiveColor = configColors.getPropertyValue("--ui-lines");
+      return {
+        ...DEFAULT_OPTIONS,
+        height: props.size === "sm" ? 16 : 32,
+        waveColor: inActiveColor || DEFAULT_OPTIONS.waveColor,
+        progressColor: activeColor || DEFAULT_OPTIONS.progressColor
+      };
+    });
+    const showDownloadButton = computed(() => {
+      return props.downloadLinks.length > 0 && props.size === "md";
+    });
+    const iconClass = computed(() => {
+      const classes = {
+        md: "icon-2xl",
+        sm: "icon-lg"
+      };
+      return classes[props.size] || "icon-2md";
+    });
+    function onError(error) {
+      isError.value = true;
+      audioErrorMessage.value = error.message;
+    }
+    function initSound() {
+      var _a;
+      (_a = SoundPlayerWrapper.value) == null ? void 0 : _a.initSound();
+    }
+    function onStart(soundId, src) {
+      emit("start", soundId || "", src || "");
+    }
+    function onStop(soundId, src) {
+      emit("stop", soundId || "", src || "");
+    }
+    function onPlay(soundId, src) {
+      emit("onPlay", soundId || "", src || "");
+    }
+    function onPause(soundId, src) {
+      emit("pause", soundId || "", src || "");
+    }
+    function onReady(soundId) {
+      emit("ready", soundId);
+    }
+    function stop() {
+      var _a;
+      (_a = SoundPlayerWrapper.value) == null ? void 0 : _a.stop();
+    }
+    function pause() {
+      var _a;
+      (_a = SoundPlayerWrapper.value) == null ? void 0 : _a.pause();
+    }
+    function play() {
+      var _a;
+      (_a = SoundPlayerWrapper.value) == null ? void 0 : _a.play();
+    }
+    function setVolume() {
+      var _a;
+      (_a = SoundPlayerWrapper.value) == null ? void 0 : _a.setVolume();
+    }
+    function resetInitSound() {
+      var _a;
+      (_a = SoundPlayerWrapper.value) == null ? void 0 : _a.resetInitSound();
+    }
+    function skipBackward() {
+      var _a;
+      (_a = SoundPlayerWrapper.value) == null ? void 0 : _a.skipBackward();
+    }
+    function skipForward() {
+      var _a;
+      (_a = SoundPlayerWrapper.value) == null ? void 0 : _a.skipForward();
+    }
+    function toTime(time) {
+      var _a;
+      (_a = SoundPlayerWrapper.value) == null ? void 0 : _a.setTime(time);
+    }
+    async function download(sound) {
+      const response = await fetch(sound);
+      const dataBlob = await response.blob();
+      const url = window.URL.createObjectURL(dataBlob);
+      const link = document.createElement("a");
+      const splitedUrl = sound.split("/");
+      link.href = url;
+      link.setAttribute("download", splitedUrl[splitedUrl.length - 1]);
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      return dataBlob;
+    }
+    function downloadIconType(item) {
+      const splitUrl = item.split(".");
+      const type = splitUrl[splitUrl.length - 1];
+      if (type === "mp3") {
+        return "vc-icon-mp3";
+      }
+      return "vc-icon-wav";
+    }
+    watch(
+      () => props.src,
+      (newValue) => {
+        isError.value = false;
+        audioErrorMessage.value = "";
+        if (newValue) {
+          initSound();
+        }
+      }
+    );
+    __expose({
+      download,
+      skipForward,
+      skipBackward,
+      resetInitSound,
+      setVolume,
+      play,
+      pause,
+      stop,
+      initSound,
+      toTime
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        __props.src ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 0,
+          ref_key: "SoundPlayerWrapper",
+          ref: SoundPlayerWrapper,
+          disabled: __props.disabled,
+          src: __props.src,
+          "current-play": __props.currentPlay,
+          size: __props.size,
+          "sound-id": __props.soundId,
+          options: playerOptions.value,
+          "skip-seconds": __props.skipLength,
+          class: "w-full",
+          onReady,
+          onPause,
+          onOnPlay: onPlay,
+          onStart,
+          onStop,
+          onOnError: onError
+        }, {
+          default: withCtx(() => [
+            isError.value ? (openBlock(), createBlock(_sfc_main$2, {
+              key: 0,
+              "is-simple": __props.simple,
+              "audio-error-message": audioErrorMessage.value
+            }, null, 8, ["is-simple", "audio-error-message"])) : (openBlock(), createElementBlock("div", _hoisted_2, [
+              createVNode(_sfc_main$3, {
+                disabled: __props.disabled,
+                "icon-class": iconClass.value,
+                class: "gap-x-3"
+              }, null, 8, ["disabled", "icon-class"]),
+              __props.showSkipButtons ? (openBlock(), createBlock(_sfc_main$4, {
+                key: 0,
+                "icon-class": iconClass.value
+              }, null, 8, ["icon-class"])) : createCommentVNode("", true),
+              __props.preIcon && !__props.simple ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                createVNode(_sfc_main$5, {
+                  icon: __props.preIcon,
+                  class: "text-primary-actions icon-base"
+                }, null, 8, ["icon"])
+              ])) : createCommentVNode("", true),
+              !__props.simple ? (openBlock(), createBlock(_sfc_main$6, {
+                key: 2,
+                class: "sound-time-current"
+              })) : createCommentVNode("", true),
+              withDirectives(createVNode(_sfc_main$7, {
+                class: normalizeClass(height.value)
+              }, null, 8, ["class"]), [
+                [vShow, !__props.simple]
+              ]),
+              !__props.simple ? (openBlock(), createBlock(_sfc_main$8, {
+                key: 3,
+                class: "sound-duration"
+              })) : createCommentVNode("", true),
+              !__props.simple ? (openBlock(), createBlock(_sfc_main$9, {
+                key: 4,
+                disabled: __props.disabled
+              }, null, 8, ["disabled"])) : createCommentVNode("", true),
+              showDownloadButton.value && !__props.simple ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                createVNode(_sfc_main$a, {
+                  disabled: __props.disabled,
+                  "popover-class": "!min-w-max",
+                  "popover-width": "auto"
+                }, {
+                  reference: withCtx(() => [
+                    createElementVNode("span", _hoisted_5, [
+                      createVNode(_sfc_main$5, { icon: "vc-icon-menu" })
+                    ])
+                  ]),
+                  default: withCtx(() => [
+                    createElementVNode("div", _hoisted_6, [
+                      _cache[0] || (_cache[0] = createElementVNode("div", { class: "font-medium text-xs mb-1" }, " Download: ", -1)),
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(__props.downloadLinks, (item, index) => {
+                        return openBlock(), createElementBlock("div", {
+                          key: index,
+                          class: "cursor-pointer right-offset p-1 flex items-center hover:bg-primary-actions-bg--focus duration-200 rounded-sm",
+                          onClick: withModifiers(($event) => download(item), ["stop"])
+                        }, [
+                          createVNode(_sfc_main$5, {
+                            class: "text-primary-actions icon-xl",
+                            icon: downloadIconType(item)
+                          }, null, 8, ["icon"])
+                        ], 8, _hoisted_7);
+                      }), 128))
+                    ])
+                  ]),
+                  _: 1
+                }, 8, ["disabled"])
+              ])) : createCommentVNode("", true)
+            ]))
+          ]),
+          _: 1
+        }, 8, ["disabled", "src", "current-play", "size", "sound-id", "options", "skip-seconds"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
 export {
-  VcSoundPlayer as default
+  _sfc_main as default
 };

package/library/components/VcSoundplayer/VcSoundPlayer.vue3.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from "./VcSoundPlayer.vue.mjs";
+import '../../assets/components/VcSoundplayer/VcSoundPlayer.css';/* empty css                    */
+export {
+  _sfc_main as default
+};

package/library/components/VcSplitButton/VcSplitButton.vue.mjs

@@ -19,7 +19,7 @@ const _hoisted_7 = {
   key: 0,
   class: "vc-split-button--loader"
 };
-const DEFAULT_LOAD_ICON = "vc-icon-load";
+const DEFAULT_LOAD_ICON = "loader";
 const CLASS_FOR_COLOR = "vc-split-button--";
 const DEFAULT_COLOR = "primary";
 const DEFAULT_SIZE = "default";
@@ -166,8 +166,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "loader", {}, () => [
             createVNode(_sfc_main$1, {
               icon: __props.loaderIcon,
-              class: "text-current"
-            }, null, 8, ["icon"])
+              loading: __props.loading,
+              class: "loading-icon"
+            }, null, 8, ["icon", "loading"])
           ])
         ])) : createCommentVNode("", true)
       ], 2);