tuikit-atomicx-vue3 0.1.0

package/dist/PopoverTrigger-BhQt39dx.js

@@ -0,0 +1,679 @@
+import { a as useVModel, c as createContext, r as reactiveOmit, u as useForwardExpose, F as FocusScope_default, D as DismissableLayer_default, b as useBodyScrollLock, d as useHideOthers, e as Presence_default, T as Teleport_default, P as Primitive } from "./Teleport-BnT1MTUO.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-C59duB_H.js";
+import { u as useId } from "./useId-DlA8vN1W.js";
+import { defineComponent, toRefs, ref, createBlock, openBlock, unref, withCtx, renderSlot, createVNode, mergeProps, withModifiers, normalizeProps, guardReactiveProps, onMounted, resolveDynamicComponent } from "vue";
+const [injectPopoverRootContext, providePopoverRootContext] = createContext("PopoverRoot");
+var PopoverRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "PopoverRoot",
+  props: {
+    defaultOpen: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    open: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    modal: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { modal } = toRefs(props);
+    const open = useVModel(props, "open", emit, {
+      defaultValue: props.defaultOpen,
+      passive: props.open === void 0
+    });
+    const triggerElement = ref();
+    const hasCustomAnchor = ref(false);
+    providePopoverRootContext({
+      contentId: "",
+      triggerId: "",
+      modal,
+      open,
+      onOpenChange: (value) => {
+        open.value = value;
+      },
+      onOpenToggle: () => {
+        open.value = !open.value;
+      },
+      triggerElement,
+      hasCustomAnchor
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(PopperRoot_default), null, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
+          open: unref(open),
+          close: () => open.value = false
+        })]),
+        _: 3
+      });
+    };
+  }
+});
+var PopoverRoot_default = PopoverRoot_vue_vue_type_script_setup_true_lang_default;
+var PopoverContentImpl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "PopoverContentImpl",
+  props: {
+    trapFocus: {
+      type: Boolean,
+      required: false
+    },
+    side: {
+      type: null,
+      required: false
+    },
+    sideOffset: {
+      type: Number,
+      required: false
+    },
+    sideFlip: {
+      type: Boolean,
+      required: false
+    },
+    align: {
+      type: null,
+      required: false
+    },
+    alignOffset: {
+      type: Number,
+      required: false
+    },
+    alignFlip: {
+      type: Boolean,
+      required: false
+    },
+    avoidCollisions: {
+      type: Boolean,
+      required: false
+    },
+    collisionBoundary: {
+      type: null,
+      required: false
+    },
+    collisionPadding: {
+      type: [Number, Object],
+      required: false
+    },
+    arrowPadding: {
+      type: Number,
+      required: false
+    },
+    sticky: {
+      type: String,
+      required: false
+    },
+    hideWhenDetached: {
+      type: Boolean,
+      required: false
+    },
+    positionStrategy: {
+      type: String,
+      required: false
+    },
+    updatePositionStrategy: {
+      type: String,
+      required: false
+    },
+    disableUpdateOnLayoutShift: {
+      type: Boolean,
+      required: false
+    },
+    prioritizePosition: {
+      type: Boolean,
+      required: false
+    },
+    reference: {
+      type: null,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    },
+    disableOutsidePointerEvents: {
+      type: Boolean,
+      required: false
+    }
+  },
+  emits: [
+    "escapeKeyDown",
+    "pointerDownOutside",
+    "focusOutside",
+    "interactOutside",
+    "openAutoFocus",
+    "closeAutoFocus"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const forwarded = useForwardProps(reactiveOmit(props, "trapFocus", "disableOutsidePointerEvents"));
+    const { forwardRef } = useForwardExpose();
+    const rootContext = injectPopoverRootContext();
+    useFocusGuards();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(FocusScope_default), {
+        "as-child": "",
+        loop: "",
+        trapped: _ctx.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), {
+          "as-child": "",
+          "disable-outside-pointer-events": _ctx.disableOutsidePointerEvents,
+          onPointerDownOutside: _cache[0] || (_cache[0] = ($event) => emits("pointerDownOutside", $event)),
+          onInteractOutside: _cache[1] || (_cache[1] = ($event) => emits("interactOutside", $event)),
+          onEscapeKeyDown: _cache[2] || (_cache[2] = ($event) => emits("escapeKeyDown", $event)),
+          onFocusOutside: _cache[3] || (_cache[3] = ($event) => emits("focusOutside", $event)),
+          onDismiss: _cache[4] || (_cache[4] = ($event) => unref(rootContext).onOpenChange(false))
+        }, {
+          default: withCtx(() => [createVNode(unref(PopperContent_default), mergeProps(unref(forwarded), {
+            id: unref(rootContext).contentId,
+            ref: unref(forwardRef),
+            "data-state": unref(rootContext).open.value ? "open" : "closed",
+            "aria-labelledby": unref(rootContext).triggerId,
+            style: {
+              "--reka-popover-content-transform-origin": "var(--reka-popper-transform-origin)",
+              "--reka-popover-content-available-width": "var(--reka-popper-available-width)",
+              "--reka-popover-content-available-height": "var(--reka-popper-available-height)",
+              "--reka-popover-trigger-width": "var(--reka-popper-anchor-width)",
+              "--reka-popover-trigger-height": "var(--reka-popper-anchor-height)"
+            },
+            role: "dialog"
+          }), {
+            default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+            _: 3
+          }, 16, [
+            "id",
+            "data-state",
+            "aria-labelledby"
+          ])]),
+          _: 3
+        }, 8, ["disable-outside-pointer-events"])]),
+        _: 3
+      }, 8, ["trapped"]);
+    };
+  }
+});
+var PopoverContentImpl_default = PopoverContentImpl_vue_vue_type_script_setup_true_lang_default;
+var PopoverContentModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "PopoverContentModal",
+  props: {
+    side: {
+      type: null,
+      required: false
+    },
+    sideOffset: {
+      type: Number,
+      required: false
+    },
+    sideFlip: {
+      type: Boolean,
+      required: false
+    },
+    align: {
+      type: null,
+      required: false
+    },
+    alignOffset: {
+      type: Number,
+      required: false
+    },
+    alignFlip: {
+      type: Boolean,
+      required: false
+    },
+    avoidCollisions: {
+      type: Boolean,
+      required: false
+    },
+    collisionBoundary: {
+      type: null,
+      required: false
+    },
+    collisionPadding: {
+      type: [Number, Object],
+      required: false
+    },
+    arrowPadding: {
+      type: Number,
+      required: false
+    },
+    sticky: {
+      type: String,
+      required: false
+    },
+    hideWhenDetached: {
+      type: Boolean,
+      required: false
+    },
+    positionStrategy: {
+      type: String,
+      required: false
+    },
+    updatePositionStrategy: {
+      type: String,
+      required: false
+    },
+    disableUpdateOnLayoutShift: {
+      type: Boolean,
+      required: false
+    },
+    prioritizePosition: {
+      type: Boolean,
+      required: false
+    },
+    reference: {
+      type: null,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    },
+    disableOutsidePointerEvents: {
+      type: Boolean,
+      required: false
+    }
+  },
+  emits: [
+    "escapeKeyDown",
+    "pointerDownOutside",
+    "focusOutside",
+    "interactOutside",
+    "openAutoFocus",
+    "closeAutoFocus"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const rootContext = injectPopoverRootContext();
+    const isRightClickOutsideRef = ref(false);
+    useBodyScrollLock(true);
+    const forwarded = useForwardPropsEmits(props, emits);
+    const { forwardRef, currentElement } = useForwardExpose();
+    useHideOthers(currentElement);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(PopoverContentImpl_default, mergeProps(unref(forwarded), {
+        ref: unref(forwardRef),
+        "trap-focus": unref(rootContext).open.value,
+        "disable-outside-pointer-events": "",
+        onCloseAutoFocus: _cache[0] || (_cache[0] = withModifiers((event) => {
+          var _a;
+          emits("closeAutoFocus", event);
+          if (!isRightClickOutsideRef.value) (_a = unref(rootContext).triggerElement.value) == null ? void 0 : _a.focus();
+        }, ["prevent"])),
+        onPointerDownOutside: _cache[1] || (_cache[1] = (event) => {
+          emits("pointerDownOutside", event);
+          const originalEvent = event.detail.originalEvent;
+          const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+          const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+          isRightClickOutsideRef.value = isRightClick;
+        }),
+        onFocusOutside: _cache[2] || (_cache[2] = withModifiers(() => {
+        }, ["prevent"]))
+      }), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16, ["trap-focus"]);
+    };
+  }
+});
+var PopoverContentModal_default = PopoverContentModal_vue_vue_type_script_setup_true_lang_default;
+var PopoverContentNonModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "PopoverContentNonModal",
+  props: {
+    side: {
+      type: null,
+      required: false
+    },
+    sideOffset: {
+      type: Number,
+      required: false
+    },
+    sideFlip: {
+      type: Boolean,
+      required: false
+    },
+    align: {
+      type: null,
+      required: false
+    },
+    alignOffset: {
+      type: Number,
+      required: false
+    },
+    alignFlip: {
+      type: Boolean,
+      required: false
+    },
+    avoidCollisions: {
+      type: Boolean,
+      required: false
+    },
+    collisionBoundary: {
+      type: null,
+      required: false
+    },
+    collisionPadding: {
+      type: [Number, Object],
+      required: false
+    },
+    arrowPadding: {
+      type: Number,
+      required: false
+    },
+    sticky: {
+      type: String,
+      required: false
+    },
+    hideWhenDetached: {
+      type: Boolean,
+      required: false
+    },
+    positionStrategy: {
+      type: String,
+      required: false
+    },
+    updatePositionStrategy: {
+      type: String,
+      required: false
+    },
+    disableUpdateOnLayoutShift: {
+      type: Boolean,
+      required: false
+    },
+    prioritizePosition: {
+      type: Boolean,
+      required: false
+    },
+    reference: {
+      type: null,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    },
+    disableOutsidePointerEvents: {
+      type: Boolean,
+      required: false
+    }
+  },
+  emits: [
+    "escapeKeyDown",
+    "pointerDownOutside",
+    "focusOutside",
+    "interactOutside",
+    "openAutoFocus",
+    "closeAutoFocus"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const rootContext = injectPopoverRootContext();
+    const hasInteractedOutsideRef = ref(false);
+    const hasPointerDownOutsideRef = ref(false);
+    const forwarded = useForwardPropsEmits(props, emits);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(PopoverContentImpl_default, mergeProps(unref(forwarded), {
+        "trap-focus": false,
+        "disable-outside-pointer-events": false,
+        onCloseAutoFocus: _cache[0] || (_cache[0] = (event) => {
+          var _a;
+          emits("closeAutoFocus", event);
+          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] = async (event) => {
+          var _a;
+          emits("interactOutside", event);
+          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 PopoverContentNonModal_default = PopoverContentNonModal_vue_vue_type_script_setup_true_lang_default;
+var PopoverContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "PopoverContent",
+  props: {
+    forceMount: {
+      type: Boolean,
+      required: false
+    },
+    side: {
+      type: null,
+      required: false
+    },
+    sideOffset: {
+      type: Number,
+      required: false
+    },
+    sideFlip: {
+      type: Boolean,
+      required: false
+    },
+    align: {
+      type: null,
+      required: false
+    },
+    alignOffset: {
+      type: Number,
+      required: false
+    },
+    alignFlip: {
+      type: Boolean,
+      required: false
+    },
+    avoidCollisions: {
+      type: Boolean,
+      required: false
+    },
+    collisionBoundary: {
+      type: null,
+      required: false
+    },
+    collisionPadding: {
+      type: [Number, Object],
+      required: false
+    },
+    arrowPadding: {
+      type: Number,
+      required: false
+    },
+    sticky: {
+      type: String,
+      required: false
+    },
+    hideWhenDetached: {
+      type: Boolean,
+      required: false
+    },
+    positionStrategy: {
+      type: String,
+      required: false
+    },
+    updatePositionStrategy: {
+      type: String,
+      required: false
+    },
+    disableUpdateOnLayoutShift: {
+      type: Boolean,
+      required: false
+    },
+    prioritizePosition: {
+      type: Boolean,
+      required: false
+    },
+    reference: {
+      type: null,
+      required: false
+    },
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    },
+    disableOutsidePointerEvents: {
+      type: Boolean,
+      required: false
+    }
+  },
+  emits: [
+    "escapeKeyDown",
+    "pointerDownOutside",
+    "focusOutside",
+    "interactOutside",
+    "openAutoFocus",
+    "closeAutoFocus"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const rootContext = injectPopoverRootContext();
+    const forwarded = useForwardPropsEmits(props, emits);
+    const { forwardRef } = useForwardExpose();
+    rootContext.contentId || (rootContext.contentId = useId(void 0, "reka-popover-content"));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Presence_default), { present: _ctx.forceMount || unref(rootContext).open.value }, {
+        default: withCtx(() => [unref(rootContext).modal.value ? (openBlock(), createBlock(PopoverContentModal_default, mergeProps({ key: 0 }, unref(forwarded), { ref: unref(forwardRef) }), {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16)) : (openBlock(), createBlock(PopoverContentNonModal_default, mergeProps({ key: 1 }, unref(forwarded), { ref: unref(forwardRef) }), {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16))]),
+        _: 3
+      }, 8, ["present"]);
+    };
+  }
+});
+var PopoverContent_default = PopoverContent_vue_vue_type_script_setup_true_lang_default;
+var PopoverPortal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "PopoverPortal",
+  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 PopoverPortal_default = PopoverPortal_vue_vue_type_script_setup_true_lang_default;
+var PopoverTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+  __name: "PopoverTrigger",
+  props: {
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false,
+      default: "button"
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const rootContext = injectPopoverRootContext();
+    const { forwardRef, currentElement: triggerElement } = useForwardExpose();
+    rootContext.triggerId || (rootContext.triggerId = useId(void 0, "reka-popover-trigger"));
+    onMounted(() => {
+      rootContext.triggerElement.value = triggerElement.value;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(unref(rootContext).hasCustomAnchor.value ? unref(Primitive) : unref(PopperAnchor_default)), { "as-child": "" }, {
+        default: withCtx(() => [createVNode(unref(Primitive), {
+          id: unref(rootContext).triggerId,
+          ref: unref(forwardRef),
+          type: _ctx.as === "button" ? "button" : void 0,
+          "aria-haspopup": "dialog",
+          "aria-expanded": unref(rootContext).open.value,
+          "aria-controls": unref(rootContext).contentId,
+          "data-state": unref(rootContext).open.value ? "open" : "closed",
+          as: _ctx.as,
+          "as-child": props.asChild,
+          onClick: unref(rootContext).onOpenToggle
+        }, {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 8, [
+          "id",
+          "type",
+          "aria-expanded",
+          "aria-controls",
+          "data-state",
+          "as",
+          "as-child",
+          "onClick"
+        ])]),
+        _: 3
+      });
+    };
+  }
+});
+var PopoverTrigger_default = PopoverTrigger_vue_vue_type_script_setup_true_lang_default;
+export {
+  PopoverRoot_default as P,
+  PopoverTrigger_default as a,
+  PopoverPortal_default as b,
+  PopoverContent_default as c
+};