tuikit-atomicx-vue3 0.1.0

package/dist/DialogPortal-8bLejP4P.js

@@ -0,0 +1,496 @@
+import { a as useVModel, c as createContext, u as useForwardExpose, g as getActiveElement, F as FocusScope_default, D as DismissableLayer_default, f as useEmitAsProps, d as useHideOthers, e as Presence_default, b as useBodyScrollLock, P as Primitive, T as Teleport_default } from "./Teleport-BnT1MTUO.js";
+import { u as useId } from "./useId-DlA8vN1W.js";
+import { g as getOpenState } from "./utils-CnPWv_hZ.js";
+import { defineComponent, ref, toRefs, renderSlot, unref, onMounted, createBlock, openBlock, withCtx, createVNode, mergeProps, createCommentVNode, normalizeProps, guardReactiveProps } from "vue";
+const [injectDialogRootContext, provideDialogRootContext] = createContext("DialogRoot");
+var DialogRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  inheritAttrs: false,
+  __name: "DialogRoot",
+  props: {
+    open: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    defaultOpen: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modal: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const open = useVModel(props, "open", emit, {
+      defaultValue: props.defaultOpen,
+      passive: props.open === void 0
+    });
+    const triggerElement = ref();
+    const contentElement = ref();
+    const { modal } = toRefs(props);
+    provideDialogRootContext({
+      open,
+      modal,
+      openModal: () => {
+        open.value = true;
+      },
+      onOpenChange: (value) => {
+        open.value = value;
+      },
+      onOpenToggle: () => {
+        open.value = !open.value;
+      },
+      contentId: "",
+      titleId: "",
+      descriptionId: "",
+      triggerElement,
+      contentElement
+    });
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default", {
+        open: unref(open),
+        close: () => open.value = false
+      });
+    };
+  }
+});
+var DialogRoot_default = DialogRoot_vue_vue_type_script_setup_true_lang_default;
+const DEFAULT_TITLE_NAME = "DialogTitle";
+const DEFAULT_CONTENT_NAME = "DialogContent";
+function useWarning({ titleName = DEFAULT_TITLE_NAME, contentName = DEFAULT_CONTENT_NAME, componentLink = "dialog.html#title", titleId, descriptionId, contentElement }) {
+  const TITLE_MESSAGE = `Warning: \`${contentName}\` requires a \`${titleName}\` for the component to be accessible for screen reader users.
+
+If you want to hide the \`${titleName}\`, you can wrap it with our VisuallyHidden component.
+
+For more information, see https://www.reka-ui.com/docs/components/${componentLink}`;
+  const DESCRIPTION_MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby="undefined"\` for ${contentName}.`;
+  onMounted(() => {
+    var _a;
+    const hasTitle = document.getElementById(titleId);
+    if (!hasTitle) console.warn(TITLE_MESSAGE);
+    const describedById = (_a = contentElement.value) == null ? void 0 : _a.getAttribute("aria-describedby");
+    if (descriptionId && describedById) {
+      const hasDescription = document.getElementById(descriptionId);
+      if (!hasDescription) console.warn(DESCRIPTION_MESSAGE);
+    }
+  });
+}
+var DialogContentImpl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "DialogContentImpl",
+  props: {
+    forceMount: {
+      type: Boolean,
+      required: false
+    },
+    trapFocus: {
+      type: Boolean,
+      required: false
+    },
+    disableOutsidePointerEvents: {
+      type: Boolean,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  emits: [
+    "escapeKeyDown",
+    "pointerDownOutside",
+    "focusOutside",
+    "interactOutside",
+    "openAutoFocus",
+    "closeAutoFocus"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const rootContext = injectDialogRootContext();
+    const { forwardRef, currentElement: contentElement } = useForwardExpose();
+    rootContext.titleId || (rootContext.titleId = useId(void 0, "reka-dialog-title"));
+    rootContext.descriptionId || (rootContext.descriptionId = useId(void 0, "reka-dialog-description"));
+    onMounted(() => {
+      rootContext.contentElement = contentElement;
+      if (getActiveElement() !== document.body) rootContext.triggerElement.value = getActiveElement();
+    });
+    if (process.env.NODE_ENV !== "production") useWarning({
+      titleName: "DialogTitle",
+      contentName: "DialogContent",
+      componentLink: "dialog.html#title",
+      titleId: rootContext.titleId,
+      descriptionId: rootContext.descriptionId,
+      contentElement
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(FocusScope_default), {
+        "as-child": "",
+        loop: "",
+        trapped: props.trapFocus,
+        onMountAutoFocus: _cache[5] || (_cache[5] = ($event) => emits("openAutoFocus", $event)),
+        onUnmountAutoFocus: _cache[6] || (_cache[6] = ($event) => emits("closeAutoFocus", $event))
+      }, {
+        default: withCtx(() => [createVNode(unref(DismissableLayer_default), mergeProps({
+          id: unref(rootContext).contentId,
+          ref: unref(forwardRef),
+          as: _ctx.as,
+          "as-child": _ctx.asChild,
+          "disable-outside-pointer-events": _ctx.disableOutsidePointerEvents,
+          role: "dialog",
+          "aria-describedby": unref(rootContext).descriptionId,
+          "aria-labelledby": unref(rootContext).titleId,
+          "data-state": unref(getOpenState)(unref(rootContext).open.value)
+        }, _ctx.$attrs, {
+          onDismiss: _cache[0] || (_cache[0] = ($event) => unref(rootContext).onOpenChange(false)),
+          onEscapeKeyDown: _cache[1] || (_cache[1] = ($event) => emits("escapeKeyDown", $event)),
+          onFocusOutside: _cache[2] || (_cache[2] = ($event) => emits("focusOutside", $event)),
+          onInteractOutside: _cache[3] || (_cache[3] = ($event) => emits("interactOutside", $event)),
+          onPointerDownOutside: _cache[4] || (_cache[4] = ($event) => emits("pointerDownOutside", $event))
+        }), {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16, [
+          "id",
+          "as",
+          "as-child",
+          "disable-outside-pointer-events",
+          "aria-describedby",
+          "aria-labelledby",
+          "data-state"
+        ])]),
+        _: 3
+      }, 8, ["trapped"]);
+    };
+  }
+});
+var DialogContentImpl_default = DialogContentImpl_vue_vue_type_script_setup_true_lang_default;
+var DialogContentModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "DialogContentModal",
+  props: {
+    forceMount: {
+      type: Boolean,
+      required: false
+    },
+    trapFocus: {
+      type: Boolean,
+      required: false
+    },
+    disableOutsidePointerEvents: {
+      type: Boolean,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  emits: [
+    "escapeKeyDown",
+    "pointerDownOutside",
+    "focusOutside",
+    "interactOutside",
+    "openAutoFocus",
+    "closeAutoFocus"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const rootContext = injectDialogRootContext();
+    const emitsAsProps = useEmitAsProps(emits);
+    const { forwardRef, currentElement } = useForwardExpose();
+    useHideOthers(currentElement);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(DialogContentImpl_default, mergeProps({
+        ...props,
+        ...unref(emitsAsProps)
+      }, {
+        ref: unref(forwardRef),
+        "trap-focus": unref(rootContext).open.value,
+        "disable-outside-pointer-events": true,
+        onCloseAutoFocus: _cache[0] || (_cache[0] = (event) => {
+          var _a;
+          if (!event.defaultPrevented) {
+            event.preventDefault();
+            (_a = unref(rootContext).triggerElement.value) == null ? void 0 : _a.focus();
+          }
+        }),
+        onPointerDownOutside: _cache[1] || (_cache[1] = (event) => {
+          const originalEvent = event.detail.originalEvent;
+          const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+          const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+          if (isRightClick) event.preventDefault();
+        }),
+        onFocusOutside: _cache[2] || (_cache[2] = (event) => {
+          event.preventDefault();
+        })
+      }), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16, ["trap-focus"]);
+    };
+  }
+});
+var DialogContentModal_default = DialogContentModal_vue_vue_type_script_setup_true_lang_default;
+var DialogContentNonModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "DialogContentNonModal",
+  props: {
+    forceMount: {
+      type: Boolean,
+      required: false
+    },
+    trapFocus: {
+      type: Boolean,
+      required: false
+    },
+    disableOutsidePointerEvents: {
+      type: Boolean,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  emits: [
+    "escapeKeyDown",
+    "pointerDownOutside",
+    "focusOutside",
+    "interactOutside",
+    "openAutoFocus",
+    "closeAutoFocus"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const emitsAsProps = useEmitAsProps(emits);
+    useForwardExpose();
+    const rootContext = injectDialogRootContext();
+    const hasInteractedOutsideRef = ref(false);
+    const hasPointerDownOutsideRef = ref(false);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(DialogContentImpl_default, mergeProps({
+        ...props,
+        ...unref(emitsAsProps)
+      }, {
+        "trap-focus": false,
+        "disable-outside-pointer-events": false,
+        onCloseAutoFocus: _cache[0] || (_cache[0] = (event) => {
+          var _a;
+          if (!event.defaultPrevented) {
+            if (!hasInteractedOutsideRef.value) (_a = unref(rootContext).triggerElement.value) == null ? void 0 : _a.focus();
+            event.preventDefault();
+          }
+          hasInteractedOutsideRef.value = false;
+          hasPointerDownOutsideRef.value = false;
+        }),
+        onInteractOutside: _cache[1] || (_cache[1] = (event) => {
+          var _a;
+          if (!event.defaultPrevented) {
+            hasInteractedOutsideRef.value = true;
+            if (event.detail.originalEvent.type === "pointerdown") hasPointerDownOutsideRef.value = true;
+          }
+          const target = event.target;
+          const targetIsTrigger = (_a = unref(rootContext).triggerElement.value) == null ? void 0 : _a.contains(target);
+          if (targetIsTrigger) event.preventDefault();
+          if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.value) event.preventDefault();
+        })
+      }), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+var DialogContentNonModal_default = DialogContentNonModal_vue_vue_type_script_setup_true_lang_default;
+var DialogContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "DialogContent",
+  props: {
+    forceMount: {
+      type: Boolean,
+      required: false
+    },
+    disableOutsidePointerEvents: {
+      type: Boolean,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  emits: [
+    "escapeKeyDown",
+    "pointerDownOutside",
+    "focusOutside",
+    "interactOutside",
+    "openAutoFocus",
+    "closeAutoFocus"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const rootContext = injectDialogRootContext();
+    const emitsAsProps = useEmitAsProps(emits);
+    const { forwardRef } = useForwardExpose();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Presence_default), { present: _ctx.forceMount || unref(rootContext).open.value }, {
+        default: withCtx(() => [unref(rootContext).modal.value ? (openBlock(), createBlock(DialogContentModal_default, mergeProps({
+          key: 0,
+          ref: unref(forwardRef)
+        }, {
+          ...props,
+          ...unref(emitsAsProps),
+          ..._ctx.$attrs
+        }), {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16)) : (openBlock(), createBlock(DialogContentNonModal_default, mergeProps({
+          key: 1,
+          ref: unref(forwardRef)
+        }, {
+          ...props,
+          ...unref(emitsAsProps),
+          ..._ctx.$attrs
+        }), {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16))]),
+        _: 3
+      }, 8, ["present"]);
+    };
+  }
+});
+var DialogContent_default = DialogContent_vue_vue_type_script_setup_true_lang_default;
+var DialogOverlayImpl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "DialogOverlayImpl",
+  props: {
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  setup(__props) {
+    const rootContext = injectDialogRootContext();
+    useBodyScrollLock(true);
+    useForwardExpose();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), {
+        as: _ctx.as,
+        "as-child": _ctx.asChild,
+        "data-state": unref(rootContext).open.value ? "open" : "closed",
+        style: { "pointer-events": "auto" }
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 8, [
+        "as",
+        "as-child",
+        "data-state"
+      ]);
+    };
+  }
+});
+var DialogOverlayImpl_default = DialogOverlayImpl_vue_vue_type_script_setup_true_lang_default;
+var DialogOverlay_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "DialogOverlay",
+  props: {
+    forceMount: {
+      type: Boolean,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  setup(__props) {
+    const rootContext = injectDialogRootContext();
+    const { forwardRef } = useForwardExpose();
+    return (_ctx, _cache) => {
+      var _a;
+      return ((_a = unref(rootContext)) == null ? void 0 : _a.modal.value) ? (openBlock(), createBlock(unref(Presence_default), {
+        key: 0,
+        present: _ctx.forceMount || unref(rootContext).open.value
+      }, {
+        default: withCtx(() => [createVNode(DialogOverlayImpl_default, mergeProps(_ctx.$attrs, {
+          ref: unref(forwardRef),
+          as: _ctx.as,
+          "as-child": _ctx.asChild
+        }), {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16, ["as", "as-child"])]),
+        _: 3
+      }, 8, ["present"])) : createCommentVNode("v-if", true);
+    };
+  }
+});
+var DialogOverlay_default = DialogOverlay_vue_vue_type_script_setup_true_lang_default;
+var DialogPortal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "DialogPortal",
+  props: {
+    to: {
+      type: null,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    defer: {
+      type: Boolean,
+      required: false
+    },
+    forceMount: {
+      type: Boolean,
+      required: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Teleport_default), normalizeProps(guardReactiveProps(props)), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+var DialogPortal_default = DialogPortal_vue_vue_type_script_setup_true_lang_default;
+export {
+  DialogRoot_default as D,
+  DialogPortal_default as a,
+  DialogOverlay_default as b,
+  DialogContent_default as c,
+  injectDialogRootContext as i
+};

package/dist/FilePicker.vue_vue_type_script_setup_true_lang-D0cP-aFi.js

@@ -0,0 +1,71 @@
+import { defineComponent, ref, createElementBlock, openBlock, createBlock, createElementVNode, normalizeStyle, normalizeClass, unref, createVNode, toDisplayString } from "vue";
+import { IconFile } from "@tencentcloud/uikit-base-component-vue3";
+import { useMessageInputState, MessageContentType } from "./states/MessageInputState/MessageInputState.js";
+import { s as styles } from "./AttachmentPicker.module-0_DWsAtr.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(), createElementBlock("div", null, [
+        _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)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/GroupTipMessage.vue_vue_type_style_index_0_lang-BqyPcZln.js

@@ -0,0 +1,30 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, toDisplayString } from "vue";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { c as cs } from "./index-BF6QB9jF.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GroupTipMessage",
+  props: {
+    message: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useUIKit();
+    const messageContent = props.message.getMessageContent();
+    const renderText = () => {
+      switch (messageContent.businessID) {
+        case "group_create":
+          return `${messageContent.showName || ""} ${t("TUIChat.create group")}`;
+        default:
+          return messageContent.text;
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(cs)("group-tip-message"))
+      }, toDisplayString(renderText()), 3);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/GroupTipMessage.vue_vue_type_style_index_0_lang-Dw2-5Ner.js

@@ -0,0 +1,30 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, toDisplayString } from "vue";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { c as cs } from "./index-BF6QB9jF.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GroupTipMessage",
+  props: {
+    message: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useUIKit();
+    const messageContent = props.message.getMessageContent();
+    const renderText = () => {
+      switch (messageContent.businessID) {
+        case "group_create":
+          return `${messageContent.showName || ""} ${t("TUIChat.create group")}`;
+        default:
+          return messageContent.text;
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(cs)("group-tip-message"))
+      }, toDisplayString(renderText()), 3);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/ImagePicker.vue_vue_type_script_setup_true_lang-DzBHwcSi.js

@@ -0,0 +1,71 @@
+import { defineComponent, ref, createElementBlock, openBlock, createBlock, createElementVNode, normalizeStyle, normalizeClass, unref, createVNode, toDisplayString } from "vue";
+import { IconImage } from "@tencentcloud/uikit-base-component-vue3";
+import { useMessageInputState, MessageContentType } from "./states/MessageInputState/MessageInputState.js";
+import { s as styles } from "./AttachmentPicker.module-0_DWsAtr.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(), createElementBlock("div", null, [
+        _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)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};