tuikit-atomicx-vue3 3.3.0-beta.3 → 3.3.1

package/dist/AttachmentPicker.module-BesmtGyl.js

@@ -0,0 +1,11 @@
+const styles = {
+  "attachment-picker": "_attachment-picker_1bduq_1",
+  "attachment-picker__icon": "_attachment-picker__icon_1bduq_5",
+  "attachment-picker__popup": "_attachment-picker__popup_1bduq_9",
+  "attachment-picker--expanded": "_attachment-picker--expanded_1bduq_19",
+  "attachment-picker__item": "_attachment-picker__item_1bduq_24",
+  "attachment-picker__item-icon": "_attachment-picker__item-icon_1bduq_48"
+};
+export {
+  styles as s
+};

package/dist/FilePicker.vue_vue_type_script_setup_true_lang-CdJ4DUzE.js

@@ -0,0 +1,76 @@
+import { defineComponent, ref, createBlock, openBlock, unref, withCtx, createElementBlock, createElementVNode, normalizeStyle, normalizeClass, createVNode, toDisplayString } from "vue";
+import { IconFile } from "@tencentcloud/uikit-base-component-vue3";
+import { View as _sfc_main$1 } from "./baseComp/View/index.js";
+import { s as styles } from "./AttachmentPicker.module-BesmtGyl.js";
+import { useMessageInputState } from "./states/MessageInputState/MessageInputState.js";
+import { MessageContentType } from "./states/MessageInputState/type.js";
+const _hoisted_1 = ["accept"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "FilePicker",
+  props: {
+    label: { default: "" },
+    iconSize: { default: 24 },
+    onClose: { type: Function, default: () => {
+    } },
+    className: { default: "" },
+    style: { default: void 0 }
+  },
+  setup(__props) {
+    const PICKER_CONSTANTS = {
+      ACCEPT_TYPE: "*/*"
+    };
+    const props = __props;
+    const { sendMessage } = useMessageInputState();
+    const fileInputRef = ref(null);
+    function handleButtonClick() {
+      var _a;
+      (_a = fileInputRef.value) == null ? void 0 : _a.click();
+    }
+    function handleFileInput(e) {
+      var _a, _b;
+      const target = e.target;
+      const file = (_a = target.files) == null ? void 0 : _a[0];
+      if (!file) {
+        return;
+      }
+      sendMessage([{ type: MessageContentType.FILE, content: file }]);
+      target.value = "";
+      (_b = props.onClose) == null ? void 0 : _b.call(props);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), null, {
+        default: withCtx(() => [
+          _ctx.label ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            class: normalizeClass([unref(styles)["attachment-picker__item"], _ctx.className]),
+            style: normalizeStyle(_ctx.style),
+            onClick: handleButtonClick
+          }, [
+            createVNode(unref(IconFile), {
+              size: _ctx.iconSize,
+              class: normalizeClass(unref(styles)["attachment-picker__item-icon"])
+            }, null, 8, ["size", "class"]),
+            createElementVNode("div", null, toDisplayString(_ctx.label), 1)
+          ], 6)) : (openBlock(), createBlock(unref(IconFile), {
+            key: 1,
+            size: _ctx.iconSize,
+            class: normalizeClass(unref(styles)["attachment-picker__item-icon"]),
+            onClick: handleButtonClick
+          }, null, 8, ["size", "class"])),
+          createElementVNode("input", {
+            ref_key: "fileInputRef",
+            ref: fileInputRef,
+            type: "file",
+            accept: PICKER_CONSTANTS.ACCEPT_TYPE,
+            hidden: "",
+            onChange: handleFileInput
+          }, null, 40, _hoisted_1)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/ImagePicker.vue_vue_type_script_setup_true_lang-CbNUofpK.js

@@ -0,0 +1,76 @@
+import { defineComponent, ref, createBlock, openBlock, unref, withCtx, createElementBlock, createElementVNode, normalizeStyle, normalizeClass, createVNode, toDisplayString } from "vue";
+import { IconImage } from "@tencentcloud/uikit-base-component-vue3";
+import { View as _sfc_main$1 } from "./baseComp/View/index.js";
+import { s as styles } from "./AttachmentPicker.module-BesmtGyl.js";
+import { useMessageInputState } from "./states/MessageInputState/MessageInputState.js";
+import { MessageContentType } from "./states/MessageInputState/type.js";
+const _hoisted_1 = ["accept"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ImagePicker",
+  props: {
+    label: { default: "" },
+    iconSize: { default: 24 },
+    onClose: { type: Function, default: () => {
+    } },
+    className: { default: "" },
+    style: { default: void 0 }
+  },
+  setup(__props) {
+    const PICKER_CONSTANTS = {
+      ACCEPT_TYPE: ".jpg,.jpeg,.gif,.png,.bmp,.webp"
+    };
+    const props = __props;
+    const { sendMessage } = useMessageInputState();
+    const fileInputRef = ref(null);
+    function handleButtonClick() {
+      var _a;
+      (_a = fileInputRef.value) == null ? void 0 : _a.click();
+    }
+    function handleFileInput(e) {
+      var _a, _b;
+      const target = e.target;
+      const file = (_a = target.files) == null ? void 0 : _a[0];
+      if (!file) {
+        return;
+      }
+      sendMessage([{ type: MessageContentType.IMAGE, content: file }]);
+      target.value = "";
+      (_b = props.onClose) == null ? void 0 : _b.call(props);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), null, {
+        default: withCtx(() => [
+          _ctx.label ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            class: normalizeClass([unref(styles)["attachment-picker__item"], _ctx.className]),
+            style: normalizeStyle(_ctx.style),
+            onClick: handleButtonClick
+          }, [
+            createVNode(unref(IconImage), {
+              size: _ctx.iconSize,
+              class: normalizeClass(unref(styles)["attachment-picker__item-icon"])
+            }, null, 8, ["size", "class"]),
+            createElementVNode("div", null, toDisplayString(_ctx.label), 1)
+          ], 6)) : (openBlock(), createBlock(unref(IconImage), {
+            key: 1,
+            size: _ctx.iconSize,
+            class: normalizeClass(unref(styles)["attachment-picker__item-icon"]),
+            onClick: handleButtonClick
+          }, null, 8, ["size", "class"])),
+          createElementVNode("input", {
+            ref_key: "fileInputRef",
+            ref: fileInputRef,
+            type: "file",
+            accept: PICKER_CONSTANTS.ACCEPT_TYPE,
+            hidden: "",
+            onChange: handleFileInput
+          }, null, 40, _hoisted_1)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/{MessageInput.vue_vue_type_script_setup_true_lang-XRL7A5Gj.js → MessageInput.vue_vue_type_script_setup_true_lang-wUJPjWbx.js}

@@ -1,8 +1,8 @@
-import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, renderSlot, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, mergeProps, createVNode, createCommentVNode } from "vue";
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, unref, renderSlot, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, mergeProps, createVNode, withCtx, createCommentVNode } from "vue";
 import { AttachmentPicker as _sfc_main$1 } from "./components/MessageInput/AttachmentPicker/index.js";
-import { _ as _sfc_main$5 } from "./FilePicker.vue_vue_type_script_setup_true_lang-CaSj3Gh_.js";
-import { _ as _sfc_main$6 } from "./ImagePicker.vue_vue_type_script_setup_true_lang-CrzGMmrh.js";
-import { _ as _sfc_main$7 } from "./VideoPicker.vue_vue_type_script_setup_true_lang-DTv6TJKr.js";
+import { _ as _sfc_main$5 } from "./FilePicker.vue_vue_type_script_setup_true_lang-CdJ4DUzE.js";
+import { _ as _sfc_main$6 } from "./ImagePicker.vue_vue_type_script_setup_true_lang-CbNUofpK.js";
+import { _ as _sfc_main$7 } from "./VideoPicker.vue_vue_type_script_setup_true_lang-CmxjbNDJ.js";
 import EmojiPickerComponent from "./components/MessageInput/EmojiPicker/EmojiPicker.js";
 import { QuotedMessagePreview as _sfc_main$2 } from "./components/MessageInput/QuotedMessagePreview/index.js";
 import { SendButton as _sfc_main$4 } from "./components/MessageInput/SendButton/index.js";
@@ -24,8 +24,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean, default: false },
     hideSendButton: { type: Boolean, default: false },
     placeholder: { default: "" },
-    className: { default: "" },
-    style: { default: () => ({}) },
     attachmentPickerMode: { default: "collapsed" },
     actions: { default: () => ["EmojiPicker", "ImagePicker", "FilePicker", "VideoPicker"] },
     slots: {}
@@ -66,10 +64,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      var _a, _b;
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass([unref(styles)["message-input"], _ctx.className]),
-        style: normalizeStyle(_ctx.style)
+        class: normalizeClass([unref(styles)["message-input"]])
       }, [
         renderSlot(_ctx.$slots, "headerToolbar", {}, () => [
           createElementVNode("div", {
@@ -89,13 +85,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "leftInline")
           ], 2),
-          createVNode(unref(_sfc_main$3), {
-            autoFocus: _ctx.autoFocus,
-            disabled: _ctx.disabled,
-            placeholder: _ctx.placeholder,
-            prefix: (_a = _ctx.slots) == null ? void 0 : _a.inputPrefix,
-            suffix: (_b = _ctx.slots) == null ? void 0 : _b.inputSuffix
-          }, null, 8, ["autoFocus", "disabled", "placeholder", "prefix", "suffix"]),
+          renderSlot(_ctx.$slots, "textEditor", {}, () => [
+            (openBlock(), createBlock(unref(_sfc_main$3), {
+              autoFocus: _ctx.autoFocus,
+              disabled: _ctx.disabled,
+              placeholder: _ctx.placeholder,
+              key: _ctx.disabled ? "disabled-editor" : "enabled-editor"
+            }, {
+              inputPrefix: withCtx(() => [
+                renderSlot(_ctx.$slots, "inputPrefix")
+              ]),
+              inputSuffix: withCtx(() => [
+                renderSlot(_ctx.$slots, "inputSuffix")
+              ]),
+              _: 3
+            }, 8, ["autoFocus", "disabled", "placeholder"]))
+          ]),
           createElementVNode("div", {
             class: normalizeClass(unref(styles)["message-input__rightInline"])
           }, [
@@ -109,12 +114,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             !_ctx.hideSendButton ? (openBlock(), createBlock(unref(_sfc_main$4), {
               key: 0,
               class: normalizeClass(unref(styles)["message-input__send-button"]),
-              disabled: !unref(inputRawValue),
+              disabled: props.disabled,
               onClick: sendInputMessage
             }, null, 8, ["class", "disabled"])) : createCommentVNode("", true)
           ], 2)
         ])
-      ], 6);
+      ], 2);
     };
   }
 });

package/dist/VideoPicker.vue_vue_type_script_setup_true_lang-CmxjbNDJ.js

@@ -0,0 +1,76 @@
+import { defineComponent, ref, createBlock, openBlock, unref, withCtx, createElementBlock, createElementVNode, normalizeStyle, normalizeClass, createVNode, toDisplayString } from "vue";
+import { IconVideo } from "@tencentcloud/uikit-base-component-vue3";
+import { View as _sfc_main$1 } from "./baseComp/View/index.js";
+import { s as styles } from "./AttachmentPicker.module-BesmtGyl.js";
+import { useMessageInputState } from "./states/MessageInputState/MessageInputState.js";
+import { MessageContentType } from "./states/MessageInputState/type.js";
+const _hoisted_1 = ["accept"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VideoPicker",
+  props: {
+    label: { default: "" },
+    iconSize: { default: 24 },
+    onClose: { type: Function, default: () => {
+    } },
+    className: { default: "" },
+    style: { default: void 0 }
+  },
+  setup(__props) {
+    const PICKER_CONSTANTS = {
+      ACCEPT_TYPE: ".mp4,.mov,.qt"
+    };
+    const props = __props;
+    const { sendMessage } = useMessageInputState();
+    const fileInputRef = ref(null);
+    function handleButtonClick() {
+      var _a;
+      (_a = fileInputRef.value) == null ? void 0 : _a.click();
+    }
+    function handleFileInput(e) {
+      var _a, _b;
+      const target = e.target;
+      const file = (_a = target.files) == null ? void 0 : _a[0];
+      if (!file) {
+        return;
+      }
+      sendMessage([{ type: MessageContentType.VIDEO, content: file }]);
+      target.value = "";
+      (_b = props.onClose) == null ? void 0 : _b.call(props);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), null, {
+        default: withCtx(() => [
+          _ctx.label ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            class: normalizeClass([unref(styles)["attachment-picker__item"], _ctx.className]),
+            style: normalizeStyle(_ctx.style),
+            onClick: handleButtonClick
+          }, [
+            createVNode(unref(IconVideo), {
+              size: _ctx.iconSize,
+              class: normalizeClass(unref(styles)["attachment-picker__item-icon"])
+            }, null, 8, ["size", "class"]),
+            createElementVNode("div", null, toDisplayString(_ctx.label), 1)
+          ], 6)) : (openBlock(), createBlock(unref(IconVideo), {
+            key: 1,
+            size: _ctx.iconSize,
+            class: normalizeClass(unref(styles)["attachment-picker__item-icon"]),
+            onClick: handleButtonClick
+          }, null, 8, ["size", "class"])),
+          createElementVNode("input", {
+            ref_key: "fileInputRef",
+            ref: fileInputRef,
+            type: "file",
+            accept: PICKER_CONSTANTS.ACCEPT_TYPE,
+            hidden: "",
+            onChange: handleFileInput
+          }, null, 40, _hoisted_1)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as _
+};