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

package/dist/MessageInput.vue_vue_type_script_setup_true_lang-XRL7A5Gj.js

@@ -0,0 +1,123 @@
+import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, renderSlot, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, mergeProps, createVNode, 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 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";
+import { TextEditor as _sfc_main$3 } from "./components/MessageInput/TextEditor/index.js";
+import { useMessageInputState } from "./states/MessageInputState/MessageInputState.js";
+const styles = {
+  "message-input": "_message-input_v23we_1",
+  "message-input__toolbar": "_message-input__toolbar_v23we_11",
+  "message-input__wrapper": "_message-input__wrapper_v23we_18",
+  "message-input__leftInline": "_message-input__leftInline_v23we_23",
+  "message-input__rightInline": "_message-input__rightInline_v23we_23",
+  "message-input__actions": "_message-input__actions_v23we_27",
+  "message-input__footerToolbar": "_message-input__footerToolbar_v23we_33"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MessageInput",
+  props: {
+    autoFocus: { type: Boolean, default: true },
+    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: {}
+  },
+  setup(__props) {
+    const DEFAULT_ACTIONS = [
+      { key: "EmojiPicker", component: EmojiPickerComponent },
+      { key: "AttachmentPicker", component: _sfc_main$1 },
+      { key: "FilePicker", component: _sfc_main$5 },
+      { key: "ImagePicker", component: _sfc_main$6 },
+      { key: "VideoPicker", component: _sfc_main$7 }
+    ];
+    const props = __props;
+    const { inputRawValue, setContent, sendMessage } = useMessageInputState();
+    const pickProps = (sourceObject, propertyKeys) => Object.fromEntries(
+      propertyKeys.map((key) => [key, sourceObject[key]]).filter(([, value]) => value !== void 0)
+    );
+    const resolveStringAction = (actionKey) => {
+      const { component = () => null } = DEFAULT_ACTIONS.find(({ key }) => key === actionKey) ?? {};
+      return { Component: component, props: {} };
+    };
+    const resolveObjectAction = (action) => {
+      var _a;
+      const { key: actionKey, component, ...restProps } = action;
+      const defaultComponent = ((_a = DEFAULT_ACTIONS.find(({ key }) => key === actionKey)) == null ? void 0 : _a.component) ?? (() => null);
+      return {
+        Component: component ?? defaultComponent,
+        props: pickProps(restProps, ["label", "className", "style", "iconSize"])
+      };
+    };
+    const actionList = computed(
+      () => props.actions.map((action) => typeof action === "string" ? resolveStringAction(action) : resolveObjectAction(action)).filter(({ Component }) => Component !== null)
+    );
+    const sendInputMessage = () => {
+      if (inputRawValue.value) {
+        sendMessage();
+        setContent("");
+      }
+    };
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([unref(styles)["message-input"], _ctx.className]),
+        style: normalizeStyle(_ctx.style)
+      }, [
+        renderSlot(_ctx.$slots, "headerToolbar", {}, () => [
+          createElementVNode("div", {
+            class: normalizeClass(unref(styles)["message-input__toolbar"])
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(actionList.value, (action, index) => {
+              return openBlock(), createBlock(resolveDynamicComponent(action.Component), mergeProps({ key: index }, { ref_for: true }, { ...action.props, ...action.Component === unref(_sfc_main$1) ? { attachmentPickerMode: _ctx.attachmentPickerMode } : {} }), null, 16);
+            }), 128))
+          ], 2)
+        ]),
+        createElementVNode("div", {
+          class: normalizeClass(unref(styles)["message-input__wrapper"])
+        }, [
+          createVNode(unref(_sfc_main$2)),
+          createElementVNode("div", {
+            class: normalizeClass(unref(styles)["message-input__leftInline"])
+          }, [
+            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"]),
+          createElementVNode("div", {
+            class: normalizeClass(unref(styles)["message-input__rightInline"])
+          }, [
+            renderSlot(_ctx.$slots, "rightInline")
+          ], 2)
+        ], 2),
+        renderSlot(_ctx.$slots, "footerToolbar", {}, () => [
+          createElementVNode("div", {
+            class: normalizeClass(unref(styles)["message-input__footerToolbar"])
+          }, [
+            !_ctx.hideSendButton ? (openBlock(), createBlock(unref(_sfc_main$4), {
+              key: 0,
+              class: normalizeClass(unref(styles)["message-input__send-button"]),
+              disabled: !unref(inputRawValue),
+              onClick: sendInputMessage
+            }, null, 8, ["class", "disabled"])) : createCommentVNode("", true)
+          ], 2)
+        ])
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/{PopoverTrigger-ByOI-vdB.js → PopoverTrigger-BKOIHfdS.js}

@@ -1,5 +1,5 @@
 import { u as useVModel, c as createContext, r as reactiveOmit, a as useForwardExpose, F as FocusScope_default, D as DismissableLayer_default, b as useBodyScrollLock, d as useHideOthers, P as Presence_default, T as Teleport_default, e as Primitive } from "./Teleport-CMvGsENT.js";
-import { P as PopperRoot_default, u as useForwardProps, a as useFocusGuards, b as PopperContent_default, c as useForwardPropsEmits, d as PopperAnchor_default } from "./PopperContent-BaiCn-CA.js";
+import { P as PopperRoot_default, u as useForwardProps, a as useFocusGuards, b as PopperContent_default, c as useForwardPropsEmits, d as PopperAnchor_default } from "./PopperContent-DtL7HVWz.js";
 import { u as useId } from "./useId-CsgLY8y3.js";
 import { defineComponent, toRefs, ref, createBlock, openBlock, unref, withCtx, renderSlot, createVNode, mergeProps, withModifiers, normalizeProps, guardReactiveProps, onMounted, resolveDynamicComponent } from "vue";
 const [injectPopoverRootContext, providePopoverRootContext] = createContext("PopoverRoot");

package/dist/{PopperContent-BaiCn-CA.js → PopperContent-DtL7HVWz.js}

@@ -1087,7 +1087,7 @@ function isOverflowElement(element) {
     overflowX,
     overflowY,
     display
-  } = getComputedStyle(element);
+  } = getComputedStyle$1(element);
   return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
 }
 const tableElements = /* @__PURE__ */ new Set(["table", "td", "th"]);
@@ -1109,7 +1109,7 @@ const willChangeValues = ["transform", "translate", "scale", "rotate", "perspect
 const containValues = ["paint", "layout", "strict", "content"];
 function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
-  const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
   return transformProperties.some((value) => css[value] ? css[value] !== "none" : false) || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || willChangeValues.some((value) => (css.willChange || "").includes(value)) || containValues.some((value) => (css.contain || "").includes(value));
 }
 function getContainingBlock(element) {
@@ -1132,7 +1132,7 @@ const lastTraversableNodeNames = /* @__PURE__ */ new Set(["html", "body", "#docu
 function isLastTraversableNode(node) {
   return lastTraversableNodeNames.has(getNodeName(node));
 }
-function getComputedStyle(element) {
+function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
 }
 function getNodeScroll(element) {
@@ -1191,7 +1191,7 @@ function getFrameElement(win) {
   return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
 }
 function getCssDimensions(element) {
-  const css = getComputedStyle(element);
+  const css = getComputedStyle$1(element);
   let width = parseFloat(css.width) || 0;
   let height = parseFloat(css.height) || 0;
   const hasOffset = isHTMLElement(element);
@@ -1287,7 +1287,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle(currentIFrame);
+      const css = getComputedStyle$1(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
@@ -1314,15 +1314,9 @@ function getWindowScrollBarX(element, rect) {
   }
   return rect.left + leftScroll;
 }
-function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
-  if (ignoreScrollbarX === void 0) {
-    ignoreScrollbarX = false;
-  }
+function getHTMLOffset(documentElement, scroll) {
   const htmlRect = documentElement.getBoundingClientRect();
-  const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 : (
-    // RTL <body> scrollbar.
-    getWindowScrollBarX(documentElement, htmlRect)
-  ));
+  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
   const y = htmlRect.top + scroll.scrollTop;
   return {
     x,
@@ -1360,7 +1354,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
       offsets.y = offsetRect.y + offsetParent.clientTop;
     }
   }
-  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   return {
     width: rect.width * scale.x,
     height: rect.height * scale.y,
@@ -1379,7 +1373,7 @@ function getDocumentRect(element) {
   const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
-  if (getComputedStyle(body).direction === "rtl") {
+  if (getComputedStyle$1(body).direction === "rtl") {
     x += max(html.clientWidth, body.clientWidth) - width;
   }
   return {
@@ -1389,6 +1383,7 @@ function getDocumentRect(element) {
     y
   };
 }
+const SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
   const html = getDocumentElement(element);
@@ -1406,6 +1401,19 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline = doc.compatMode === "CSS1Compat" ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    width += windowScrollbarX;
+  }
   return {
     width,
     height,
@@ -1454,7 +1462,7 @@ function hasFixedPositionAncestor(element, stopNode) {
   if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
     return false;
   }
-  return getComputedStyle(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
+  return getComputedStyle$1(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
 }
 function getClippingElementAncestors(element, cache) {
   const cachedResult = cache.get(element);
@@ -1463,10 +1471,10 @@ function getClippingElementAncestors(element, cache) {
   }
   let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
   let currentContainingBlockComputedStyle = null;
-  const elementIsFixed = getComputedStyle(element).position === "fixed";
+  const elementIsFixed = getComputedStyle$1(element).position === "fixed";
   let currentNode = elementIsFixed ? getParentNode(element) : element;
   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    const computedStyle = getComputedStyle(currentNode);
+    const computedStyle = getComputedStyle$1(currentNode);
     const currentNodeIsContaining = isContainingBlock(currentNode);
     if (!currentNodeIsContaining && computedStyle.position === "fixed") {
       currentContainingBlockComputedStyle = null;
@@ -1556,10 +1564,10 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
   };
 }
 function isStaticPositioned(element) {
-  return getComputedStyle(element).position === "static";
+  return getComputedStyle$1(element).position === "static";
 }
 function getTrueOffsetParent(element, polyfill) {
-  if (!isHTMLElement(element) || getComputedStyle(element).position === "fixed") {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === "fixed") {
     return null;
   }
   if (polyfill) {
@@ -1610,7 +1618,7 @@ const getElementRects = async function(data) {
   };
 };
 function isRTL(element) {
-  return getComputedStyle(element).direction === "rtl";
+  return getComputedStyle$1(element).direction === "rtl";
 }
 const platform = {
   convertOffsetParentRelativeRectToViewportRelativeRect,

package/dist/baseComp/TuiSwitch.js

@@ -16,9 +16,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass([props.modelValue ? "switch-container" : "switch-container-active"]),
         onClick: toggleSwitch
-      }, _cache[0] || (_cache[0] = [
+      }, [..._cache[0] || (_cache[0] = [
         createElementVNode("div", { class: "switch-core" }, null, -1)
-      ]), 2);
+      ])], 2);
     };
   }
 });

package/dist/baseComp/index.d.ts

@@ -1,2 +1 @@
-export { Popup } from './Popup';
 export { default as Input } from './Input';

package/dist/baseComp/index.js

@@ -1,6 +1,4 @@
 import { default as default2 } from "./Input/index.js";
-import { default as default3 } from "./Popup/Popup.js";
 export {
-  default2 as Input,
-  default3 as Popup
+  default2 as Input
 };