tuikit-atomicx-vue3 3.4.1 → 3.5.0-beta.7

package/dist/components/MessageInput/TextEditor/index.js

@@ -1,73 +1,83 @@
-import { defineComponent as F, ref as p, computed as g, onMounted as B, onUnmounted as k, watch as c, createElementBlock as f, openBlock as m, normalizeClass as d, unref as i, createElementVNode as _, renderSlot as h } from "vue";
+import { defineComponent as F, ref as f, computed as S, onMounted as B, onUnmounted as L, watch as r, createElementBlock as m, openBlock as h, normalizeClass as d, unref as s, createElementVNode as _, renderSlot as x } from "vue";
 import { useUIKit as M } from "@tencentcloud/uikit-base-component-vue3";
-import { createEditor as S } from "./EditorCore.js";
+import { createEditor as k } from "./EditorCore.js";
 import { useMessageInputState as D } from "../../../states/MessageInputState/MessageInputState.js";
-import { useConversationListState as R } from "../../../states/ConversationListState/ConversationListState.js";
-const T = "_disabled_ihh75_11", U = "_editor_ihh75_21", o = {
+import { useConversationListState as P } from "../../../states/ConversationListState/ConversationListState.js";
+const R = "_disabled_ihh75_11", U = "_editor_ihh75_21", i = {
   "input-wrapper": "_input-wrapper_ihh75_1",
-  disabled: T,
+  disabled: R,
   "input-prefix": "_input-prefix_ihh75_15",
   "input-suffix": "_input-suffix_ihh75_16",
   editor: U
-}, K = /* @__PURE__ */ F({
+}, A = /* @__PURE__ */ F({
   __name: "TextEditor",
   props: {
     autoFocus: { type: Boolean, default: !0 },
     disabled: { type: Boolean, default: !1 },
-    placeholder: { default: "" }
+    placeholder: { default: void 0 },
+    maxLength: { default: void 0 }
   },
   setup(b) {
-    const t = b, { t: x } = M(), { activeConversation: E } = R(), { updateRawValue: v, sendMessage: I, setEditorInstance: l, setContent: r } = D(), u = p(null), n = p(t.autoFocus), y = g(() => t.disabled ? "" : t.placeholder || x("MessageInput.enter_a_message"));
-    let s = null;
+    const t = b, { t: v, language: g } = M(), { activeConversation: E } = P(), { updateRawValue: y, sendMessage: I, setEditorInstance: u, setContent: l } = D(), n = f(null), p = f(t.autoFocus), c = S(() => t.placeholder ?? v("MessageInput.enter_a_message"));
+    let a = null;
     return B(() => {
-      const e = u.value;
-      e && (e.classList.add("message-input"), e.dataset.editorCreated || (s = S({
+      const e = n.value;
+      e && (e.classList.add("message-input"), e.dataset.editorCreated || (a = k({
         element: e,
-        placeholder: y.value,
+        placeholder: c.value,
+        isPlaceholderOnlyShowWhenEditable: t.placeholder === void 0,
         autoFocus: t.autoFocus,
         disabled: t.disabled,
-        onUpdate: (a) => {
-          v(a);
+        maxLength: t.maxLength,
+        onUpdate: (o) => {
+          y(o);
         },
         onEnter: () => {
-          I(), r("");
+          I(), l("");
         },
         onFocus: () => {
-          n.value = !0;
+          p.value = !0;
         },
         onBlur: () => {
-          n.value = !1;
+          p.value = !1;
         }
-      }), e.dataset.editorCreated = "true", l(s)));
-    }), k(() => {
-      const e = u.value;
-      s && e && (s.destroy(), e.removeAttribute("data-editor-created"), l(null));
-    }), c(E, (e, a) => {
-      (e == null ? void 0 : e.conversationID) !== (a == null ? void 0 : a.conversationID) && r("");
-    }), c(() => t.disabled, (e) => {
-      s && (s.setEditable(!e), e && r(""));
-    }), (e, a) => (m(), f("div", {
-      class: d([i(o)["input-wrapper"], t.disabled && i(o).disabled])
+      }), e.dataset.editorCreated = "true", u(a)));
+    }), L(() => {
+      const e = n.value;
+      a && e && (a.destroy(), e.removeAttribute("data-editor-created"), u(null));
+    }), r(E, (e, o) => {
+      (e == null ? void 0 : e.conversationID) !== (o == null ? void 0 : o.conversationID) && l("");
+    }), r(g, () => {
+      if (a && t.placeholder === void 0) {
+        const e = a.extensionManager.extensions.find(
+          (o) => o.name === "placeholder"
+        );
+        e && (e.options.placeholder = c.value, a.view.updateState(a.state));
+      }
+    }), r(() => t.disabled, (e) => {
+      a && (a.setEditable(!e), e && l(""));
+    }), (e, o) => (h(), m("div", {
+      class: d([s(i)["input-wrapper"], t.disabled && s(i).disabled])
     }, [
       _("div", {
-        class: d(i(o)["input-prefix"])
+        class: d(s(i)["input-prefix"])
       }, [
-        h(e.$slots, "inputPrefix")
+        x(e.$slots, "inputPrefix")
       ], 2),
-      (m(), f("div", {
+      (h(), m("div", {
         ref_key: "editorDomRef",
-        ref: u,
+        ref: n,
         key: t.disabled ? "disabled" : "enabled",
-        class: d(i(o).editor)
+        class: d(s(i).editor)
       }, null, 2)),
       _("div", {
-        class: d(i(o)["input-suffix"])
+        class: d(s(i)["input-suffix"])
       }, [
-        h(e.$slots, "inputSuffix")
+        x(e.$slots, "inputSuffix")
       ], 2)
     ], 2));
   }
 });
 export {
-  K as TextEditor
+  A as TextEditor
 };

package/dist/components/MessageInput/VideoCallPicker/VideoCallPicker.js

@@ -1,14 +1,14 @@
-import { defineComponent as A, useCssModule as B, ref as M, computed as f, createBlock as O, openBlock as z, unref as t, withCtx as g, createElementVNode as N, createVNode as m, normalizeClass as I, renderSlot as $ } from "vue";
-import { useUIKit as F, IconVideoDefault as K, TUIDialog as X } from "@tencentcloud/uikit-base-component-vue3";
-import { c as Y } from "../../../index-DPczIrgX.js";
-import { View as Z } from "../../../baseComp/View/index.js";
+import { defineComponent as B, useCssModule as O, ref as M, computed as f, createBlock as z, openBlock as N, unref as r, withCtx as g, createElementVNode as $, createVNode as m, normalizeClass as I, renderSlot as F } from "vue";
+import { useUIKit as K, IconVideoDefault as X, TUIDialog as Y } from "@tencentcloud/uikit-base-component-vue3";
+import { c as Z } from "../../../index-DPczIrgX.js";
+import { View as j } from "../../../baseComp/View/index.js";
 import { ConversationType as _ } from "../../../types/engine.js";
 import { startCall as k } from "../../../utils/call.js";
-import { UserPicker as j } from "../../UserPicker/index.js";
-import { useGroupSettingState as q } from "../../../states/GroupSettingState/GroupSettingState.js";
-import { useConversationListState as H } from "../../../states/ConversationListState/ConversationListState.js";
-import { _ as J } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const y = 2, Q = 80, W = 9, ee = 1, oe = /* @__PURE__ */ A({
+import { UserPicker as q } from "../../UserPicker/index.js";
+import { useGroupSettingState as H } from "../../../states/GroupSettingState/GroupSettingState.js";
+import { useConversationListState as J } from "../../../states/ConversationListState/ConversationListState.js";
+import { _ as Q } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const y = 2, W = 80, ee = 9, oe = 1, te = /* @__PURE__ */ B({
   __name: "VideoCallPicker",
   props: {
     label: { default: "" },
@@ -16,26 +16,24 @@ const y = 2, Q = 80, W = 9, ee = 1, oe = /* @__PURE__ */ A({
     disabled: { type: Boolean, default: !1 }
   },
   setup(G) {
-    const s = G, n = B(), { t: i } = F(), { activeConversation: r } = H(), { allMembers: v, getGroupMemberList: P, memberCount: h } = q(), c = M(!1), u = M(), D = f(
+    const s = G, n = O(), { t: i } = K(), { activeConversation: l } = J(), { allMembers: v, getGroupMemberList: D, memberCount: P, currentUserID: h } = H(), c = M(!1), u = M(), E = f(
       () => {
         var e;
-        return ((e = r.value) == null ? void 0 : e.type) === _.C2C;
+        return ((e = l.value) == null ? void 0 : e.type) === _.C2C;
       }
-    ), E = f(
-      () => {
-        var e;
-        return ((e = v.value) == null ? void 0 : e.map((o) => ({
-          key: o.userID,
-          label: o.nick || o.userID,
-          avatarUrl: o.avatar
-        }))) ?? [];
-      }
-    ), L = f(() => !(!r.value || s.disabled));
+    ), U = f(() => {
+      var o;
+      return (((o = v.value) == null ? void 0 : o.map((t) => ({
+        key: t.userID,
+        label: t.nick || t.userID,
+        avatarUrl: t.avatar
+      }))) ?? []).filter((t) => t.key !== h.value);
+    }), L = f(() => !(!l.value || s.disabled));
     function S() {
       var e, o;
-      return (o = (e = r.value) == null ? void 0 : e.userProfile) == null ? void 0 : o.userID;
+      return (o = (e = l.value) == null ? void 0 : e.userProfile) == null ? void 0 : o.userID;
     }
-    function U() {
+    function R() {
       const e = S();
       if (!e) {
         console.warn("No peer user ID found for private call");
@@ -52,24 +50,24 @@ const y = 2, Q = 80, W = 9, ee = 1, oe = /* @__PURE__ */ A({
       }
     }
     function C() {
-      var a, l;
-      if (((a = r.value) == null ? void 0 : a.type) !== _.GROUP)
+      var t, a;
+      if (((t = l.value) == null ? void 0 : t.type) !== _.GROUP)
         return;
-      const e = ((l = v.value) == null ? void 0 : l.length) || 0, o = h.value || 0;
-      e < o && P({
-        count: Q,
+      const e = ((a = v.value) == null ? void 0 : a.length) || 0, o = P.value || 0;
+      e < o && D({
+        count: W,
         offset: e
       });
     }
-    function R() {
+    function V() {
       C(), c.value = !0;
     }
-    function p() {
+    function d() {
       c.value = !1;
     }
-    function V() {
-      var l, b;
-      const e = (b = (l = r.value) == null ? void 0 : l.groupProfile) == null ? void 0 : b.groupID;
+    function w() {
+      var a, b;
+      const e = (b = (a = l.value) == null ? void 0 : a.groupProfile) == null ? void 0 : b.groupID;
       if (!u.value || !e) {
         console.warn("Missing group information for group call");
         return;
@@ -79,65 +77,65 @@ const y = 2, Q = 80, W = 9, ee = 1, oe = /* @__PURE__ */ A({
         console.warn("No members selected for group call");
         return;
       }
-      const a = o.map((d) => d.key);
+      const t = o.map((p) => p.key);
       try {
         k({
-          userIDList: a,
+          userIDList: t,
           chatGroupID: e,
           type: y
-        }), p();
-      } catch (d) {
-        console.error("Failed to start group video call:", d);
+        }), d();
+      } catch (p) {
+        console.error("Failed to start group video call:", p);
       }
     }
-    function w() {
+    function x() {
       if (!L.value) {
         console.warn("Cannot start video call");
         return;
       }
-      D.value ? U() : R();
+      E.value ? R() : V();
     }
-    const x = () => {
+    const T = () => {
       var e;
-      ((e = r.value) == null ? void 0 : e.type) === _.GROUP && C();
-    }, T = () => V();
-    return (e, o) => (z(), O(t(Z), null, {
+      ((e = l.value) == null ? void 0 : e.type) === _.GROUP && C();
+    }, A = () => w();
+    return (e, o) => (N(), z(r(j), null, {
       default: g(() => [
-        N("div", {
-          class: I(t(Y)(t(n)["video-call-picker__button"], {
-            [t(n).disabled]: s.disabled
+        $("div", {
+          class: I(r(Z)(r(n)["video-call-picker__button"], {
+            [r(n).disabled]: s.disabled
           })),
-          onClick: w
+          onClick: x
         }, [
-          $(e.$slots, "default", {}, () => [
-            m(t(K), {
+          F(e.$slots, "default", {}, () => [
+            m(r(X), {
               size: s.iconSize,
-              class: I(t(n)["video-call-picker__icon"])
+              class: I(r(n)["video-call-picker__icon"])
             }, null, 8, ["size", "class"])
           ])
         ], 2),
-        m(t(X), {
+        m(r(Y), {
           visible: c.value,
-          title: t(i)("MessageInput.select_call_members"),
-          cancelText: t(i)("MessageInput.cancel"),
-          cancel: p,
-          close: p,
-          confirmText: t(i)("MessageInput.initiate_call"),
-          confirm: T,
+          title: r(i)("MessageInput.select_call_members"),
+          cancelText: r(i)("MessageInput.cancel"),
+          cancel: d,
+          close: d,
+          confirmText: r(i)("MessageInput.initiate_call"),
+          confirm: A,
           customClasses: ["group-call-dialog"],
           appendTo: "body"
         }, {
           default: g(() => [
-            m(t(j), {
+            m(r(q), {
               ref_key: "groupMemberPickerRef",
               ref: u,
               "display-mode": "list",
-              "data-source": E.value,
-              "max-count": W,
-              "min-count": ee,
+              "data-source": U.value,
+              "max-count": ee,
+              "min-count": oe,
               class: "group-member-picker",
               style: { width: "100%" },
-              onReachEnd: x
+              onReachEnd: T
             }, null, 8, ["data-source"])
           ]),
           _: 1
@@ -146,13 +144,13 @@ const y = 2, Q = 80, W = 9, ee = 1, oe = /* @__PURE__ */ A({
       _: 3
     }));
   }
-}), te = "_disabled_18fa2_16", re = {
+}), re = "_disabled_18fa2_16", le = {
   "video-call-picker__button": "_video-call-picker__button_18fa2_1",
-  disabled: te,
+  disabled: re,
   "video-call-picker__icon": "_video-call-picker__icon_18fa2_22"
-}, le = {
-  $style: re
-}, _e = /* @__PURE__ */ J(oe, [["__cssModules", le]]);
+}, ae = {
+  $style: le
+}, ve = /* @__PURE__ */ Q(te, [["__cssModules", ae]]);
 export {
-  _e as default
+  ve as default
 };

package/dist/components/MessageInput/i18n/index.d.ts

@@ -24,5 +24,9 @@ export declare const resources: {
         unknown: string;
         enter_a_message: string;
         send: string;
+        select_call_members: string;
+        cancel: string;
+        confirm: string;
+        initiate_call: string;
     };
 };

package/dist/components/MessageInput/i18n/zh-CN.d.ts

@@ -8,5 +8,9 @@ declare const MessageInput: {
     unknown: string;
     enter_a_message: string;
     send: string;
+    select_call_members: string;
+    cancel: string;
+    confirm: string;
+    initiate_call: string;
 };
 export default MessageInput;

package/dist/components/MessageInput/i18n/zh-CN.js

@@ -7,7 +7,11 @@ const e = {
   custom_message: "自定义消息",
   unknown: "未知",
   enter_a_message: "输入消息",
-  send: "发送"
+  send: "发送",
+  select_call_members: "选择成员",
+  cancel: "取消",
+  confirm: "确认",
+  initiate_call: "发起通话"
 };
 export {
   e as default

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

@@ -5,7 +5,7 @@ declare const MessageInput: {
         };
         placeholder: {
             type: import('vue').PropType<string>;
-            default: string;
+            default: undefined;
         };
         disabled: {
             type: import('vue').PropType<boolean>;
@@ -15,6 +15,10 @@ declare const MessageInput: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
+        maxLength: {
+            type: import('vue').PropType<number>;
+            default: undefined;
+        };
         actions: {
             type: import('vue').PropType<import('./types').MessageInputActions>;
             default: () => string[];
@@ -31,6 +35,7 @@ declare const MessageInput: {
         placeholder: string;
         disabled: boolean;
         autoFocus: boolean;
+        maxLength: number;
         actions: import('./types').MessageInputActions;
         attachmentPickerMode: import('./types').MessageInputAttachmentPickerMode;
         hideSendButton: boolean;
@@ -47,7 +52,7 @@ declare const MessageInput: {
         };
         placeholder: {
             type: import('vue').PropType<string>;
-            default: string;
+            default: undefined;
         };
         disabled: {
             type: import('vue').PropType<boolean>;
@@ -57,6 +62,10 @@ declare const MessageInput: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
+        maxLength: {
+            type: import('vue').PropType<number>;
+            default: undefined;
+        };
         actions: {
             type: import('vue').PropType<import('./types').MessageInputActions>;
             default: () => string[];
@@ -73,6 +82,7 @@ declare const MessageInput: {
         placeholder: string;
         disabled: boolean;
         autoFocus: boolean;
+        maxLength: number;
         actions: import('./types').MessageInputActions;
         attachmentPickerMode: import('./types').MessageInputAttachmentPickerMode;
         hideSendButton: boolean;
@@ -86,7 +96,7 @@ declare const MessageInput: {
     };
     placeholder: {
         type: import('vue').PropType<string>;
-        default: string;
+        default: undefined;
     };
     disabled: {
         type: import('vue').PropType<boolean>;
@@ -96,6 +106,10 @@ declare const MessageInput: {
         type: import('vue').PropType<boolean>;
         default: boolean;
     };
+    maxLength: {
+        type: import('vue').PropType<number>;
+        default: undefined;
+    };
     actions: {
         type: import('vue').PropType<import('./types').MessageInputActions>;
         default: () => string[];
@@ -112,6 +126,7 @@ declare const MessageInput: {
     placeholder: string;
     disabled: boolean;
     autoFocus: boolean;
+    maxLength: number;
     actions: import('./types').MessageInputActions;
     attachmentPickerMode: import('./types').MessageInputAttachmentPickerMode;
     hideSendButton: boolean;
@@ -402,7 +417,7 @@ declare const TextEditor: {
     new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
         placeholder: {
             type: import('vue').PropType<string>;
-            default: string;
+            default: undefined;
         };
         disabled: {
             type: import('vue').PropType<boolean>;
@@ -412,10 +427,15 @@ declare const TextEditor: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
+        maxLength: {
+            type: import('vue').PropType<number>;
+            default: undefined;
+        };
     }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
         placeholder: string;
         disabled: boolean;
         autoFocus: boolean;
+        maxLength: number;
     }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};
@@ -426,7 +446,7 @@ declare const TextEditor: {
     }, Readonly<import('vue').ExtractPropTypes<{
         placeholder: {
             type: import('vue').PropType<string>;
-            default: string;
+            default: undefined;
         };
         disabled: {
             type: import('vue').PropType<boolean>;
@@ -436,10 +456,15 @@ declare const TextEditor: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
+        maxLength: {
+            type: import('vue').PropType<number>;
+            default: undefined;
+        };
     }>> & Readonly<{}>, {}, {}, {}, {}, {
         placeholder: string;
         disabled: boolean;
         autoFocus: boolean;
+        maxLength: number;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -447,7 +472,7 @@ declare const TextEditor: {
 } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
     placeholder: {
         type: import('vue').PropType<string>;
-        default: string;
+        default: undefined;
     };
     disabled: {
         type: import('vue').PropType<boolean>;
@@ -457,10 +482,15 @@ declare const TextEditor: {
         type: import('vue').PropType<boolean>;
         default: boolean;
     };
+    maxLength: {
+        type: import('vue').PropType<number>;
+        default: undefined;
+    };
 }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
     placeholder: string;
     disabled: boolean;
     autoFocus: boolean;
+    maxLength: number;
 }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
     $slots: {
         inputPrefix?(_: {}): any;

package/dist/components/MessageInput/index.js

@@ -6,7 +6,7 @@ import n from "./EmojiPicker/EmojiPicker.js";
 import { TextEditor as c } from "./TextEditor/index.js";
 import s from "./AudioCallPicker/AudioCallPicker.js";
 import a from "./VideoCallPicker/VideoCallPicker.js";
-import { _ as p } from "../../MessageInput.vue_vue_type_script_setup_true_lang-D1G-LitO.js";
+import { _ as p } from "../../MessageInput.vue_vue_type_script_setup_true_lang-jPzZ5INK.js";
 import { addI18n as o } from "../../i18n/index.js";
 import { resources as t } from "./i18n/index.js";
 o("en-US", { translation: { MessageInput: t["en-US"] } });

package/dist/components/MessageList/Message/AudioMessage/WaveForm.js

@@ -1,6 +1,6 @@
-import { defineComponent as g, computed as i, ref as b, onMounted as y, createElementBlock as a, openBlock as n, normalizeStyle as c, createElementVNode as C, Fragment as k, renderList as x, normalizeClass as B } from "vue";
-import { _ as E } from "../../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const F = /* @__PURE__ */ g({
+import { defineComponent as g, computed as l, createElementBlock as a, openBlock as n, normalizeStyle as i, Fragment as w, renderList as C, unref as b, normalizeClass as y } from "vue";
+import { _ as k } from "../../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const x = /* @__PURE__ */ g({
   __name: "WaveForm",
   props: {
     progress: {},
@@ -9,41 +9,31 @@ const F = /* @__PURE__ */ g({
   },
   emits: ["seek"],
   setup(m, { emit: u }) {
-    const t = m, d = u, f = i(() => ({
-      width: typeof t.width == "number" ? `${t.width}px` : t.width
-    })), l = b([]);
-    y(() => {
-      const e = [];
-      for (let r = 0; r < t.barsCount; r++)
-        e.push(Math.random() * 16 + 8);
-      l.value = e;
-    });
-    const p = (e) => {
-      const r = (e + 1) / t.barsCount;
-      return (t.progress || 0) >= r;
-    }, v = i(() => ({
-      left: `${(t.progress || 0) * 100}%`
-    })), h = (e) => {
-      const s = e.currentTarget.getBoundingClientRect(), _ = (e.clientX - s.left) / s.width, w = Math.max(0, Math.min(1, _));
-      d("seek", w);
+    const e = m, f = u, d = l(() => ({
+      width: typeof e.width == "number" ? `${e.width}px` : e.width
+    })), p = Array.from({ length: e.barsCount }, () => Math.random() * 16 + 4), v = l(() => {
+      const t = e.progress || 0;
+      return t === 0 ? Array(e.barsCount).fill(!1) : Array.from({ length: e.barsCount }, (r, s) => {
+        const o = s / e.barsCount;
+        return t >= o;
+      });
+    }), _ = (t) => {
+      const r = t.currentTarget.getBoundingClientRect(), o = (t.clientX - r.left) / r.width, h = Math.max(0, Math.min(1, o));
+      f("seek", h);
     };
-    return (e, r) => (n(), a("div", {
+    return (t, c) => (n(), a("div", {
       class: "wave-form",
-      onClick: h,
-      style: c(f.value)
+      style: i(d.value),
+      onClick: _
     }, [
-      (n(!0), a(k, null, x(l.value, (s, o) => (n(), a("div", {
-        key: o,
-        class: B(["wave-form__bar", { "wave-form__bar--active": p(o) }]),
-        style: c({ height: `${s}px` })
-      }, null, 6))), 128)),
-      C("div", {
-        class: "wave-form__cursor",
-        style: c(v.value)
-      }, null, 4)
+      (n(!0), a(w, null, C(b(p), (r, s) => (n(), a("div", {
+        key: s,
+        class: y(["wave-form__bar", { "wave-form__bar--active": v.value[s] }]),
+        style: i({ height: `${r}px` })
+      }, null, 6))), 128))
     ], 4));
   }
-}), S = /* @__PURE__ */ E(F, [["__scopeId", "data-v-5bc04a79"]]);
+}), F = /* @__PURE__ */ k(x, [["__scopeId", "data-v-93c67ced"]]);
 export {
-  S as default
+  F as default
 };