@3df-spa/ui 1.0.7 → 1.1.0

package/dist/UiPopoverTrigger.vue_vue_type_script_setup_true_lang-DKJgwMAw.js

@@ -0,0 +1,258 @@
+import { defineComponent as y, ref as h, watch as b, onBeforeUnmount as _, provide as L, openBlock as P, createElementBlock as x, renderSlot as O, nextTick as g, inject as C, useAttrs as B, computed as T, createBlock as S, Teleport as A, mergeProps as F, unref as m, createCommentVNode as U, watchEffect as z, withKeys as $, withModifiers as k } from "vue";
+import { c as H } from "./utils-C9QoOYNG.js";
+const E = /* @__PURE__ */ Symbol("popover");
+let I = 0;
+const Z = /* @__PURE__ */ y({
+  name: "UiPopover",
+  __name: "UiPopover",
+  props: {
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: !1 }
+  },
+  emits: ["update:open"],
+  setup(e, { emit: t }) {
+    const o = e, s = t, i = h(o.defaultOpen);
+    b(
+      () => o.open,
+      (u) => {
+        u !== void 0 && (i.value = u);
+      }
+    ), b(i, (u) => {
+      s("update:open", u);
+    });
+    const n = h(), l = h(), r = `popover-trigger-${++I}`;
+    function c() {
+      i.value = !0;
+    }
+    function a() {
+      i.value = !1, (n.value?.querySelector(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      ) ?? n.value)?.focus();
+    }
+    function p() {
+      i.value ? a() : c();
+    }
+    function v(u) {
+      u.key === "Escape" && i.value && (u.preventDefault(), a());
+    }
+    function f(u) {
+      const d = u.target;
+      n.value && !n.value.contains(d) && l.value && !l.value.contains(d) && a();
+    }
+    return b(i, (u) => {
+      u ? document.addEventListener("click", f, !0) : document.removeEventListener("click", f, !0);
+    }), _(() => {
+      document.removeEventListener("click", f, !0);
+    }), L(E, {
+      isOpen: i,
+      triggerRef: n,
+      contentRef: l,
+      triggerId: r,
+      toggle: p,
+      open: c,
+      close: a
+    }), (u, d) => (P(), x("div", {
+      class: "inline-block",
+      onKeydown: v
+    }, [
+      O(u.$slots, "default")
+    ], 32));
+  }
+});
+function K(e) {
+  let t;
+  function o() {
+    t || (t = requestAnimationFrame(() => {
+      e.updatePosition(), t = void 0;
+    }));
+  }
+  const s = e.onScrollClose ?? V(e);
+  b(
+    () => e.isOpen.value,
+    async (i) => {
+      i ? (await g(), e.updatePosition(), await g(), e.updatePosition(), s && window.addEventListener("scroll", s, !0), window.addEventListener("resize", o)) : (s && window.removeEventListener("scroll", s, !0), window.removeEventListener("resize", o));
+    }
+  ), _(() => {
+    s && window.removeEventListener("scroll", s, !0), window.removeEventListener("resize", o), t && cancelAnimationFrame(t);
+  });
+}
+function V(e) {
+  if (!e.contentRef || !e.closeFn) return;
+  const t = e.contentRef, o = e.closeFn;
+  return (s) => {
+    const i = s.target;
+    t.value && i && t.value.contains(i) || o();
+  };
+}
+function q(e, t, o) {
+  const s = h({});
+  function i() {
+    const n = e.value, l = t.value;
+    if (!n || !l) return;
+    const r = o(), c = n.getBoundingClientRect(), a = l.getBoundingClientRect(), p = window.innerWidth, v = window.innerHeight, f = r.viewportPadding, u = r.sideOffset, d = D(c, a, p, v, f, u, r);
+    s.value = {
+      position: "fixed",
+      top: `${d.top}px`,
+      left: `${d.left}px`
+    };
+  }
+  return { positionStyle: s, updatePosition: i };
+}
+function D(e, t, o, s, i, n, l) {
+  const r = M(e, t, o, s, i, n, l.side), c = W(e, t, o, i, l.align);
+  let a, p;
+  return r === "top" || r === "bottom" ? (a = r === "top" ? e.top - t.height - n : e.bottom + n, p = j(e, t, c)) : (p = r === "left" ? e.left - t.width - n : e.right + n, a = N(e, t, l.align)), Y(a, p, t, o, s, i);
+}
+function M(e, t, o, s, i, n, l) {
+  if (l === "top") {
+    if (e.top - n < t.height + i && s - e.bottom - n > e.top - n)
+      return "bottom";
+  } else if (l === "bottom") {
+    const r = s - e.bottom - n;
+    if (r < t.height && e.top - n > r) return "top";
+  } else if (l === "left") {
+    if (e.left - n < t.width + i && o - e.right - n > e.left - n)
+      return "right";
+  } else if (l === "right" && o - e.right - n < t.width + i && e.left - n > o - e.right - n)
+    return "left";
+  return l;
+}
+function W(e, t, o, s, i) {
+  if (i === "start") {
+    if (e.left + t.width > o - s) return "end";
+  } else if (i === "end") {
+    if (e.right - t.width < s) return "start";
+  } else {
+    const n = e.left + e.width / 2, l = t.width / 2;
+    if (n - l < s) return "start";
+    if (n + l > o - s) return "end";
+  }
+  return i;
+}
+function j(e, t, o) {
+  return o === "start" ? e.left : o === "end" ? e.right - t.width : e.left + (e.width - t.width) / 2;
+}
+function N(e, t, o) {
+  return o === "start" ? e.top : o === "end" ? e.bottom - t.height : e.top + (e.height - t.height) / 2;
+}
+function Y(e, t, o, s, i, n) {
+  let l = t, r = e;
+  return l < n ? l = n : l + o.width > s - n && (l = s - n - o.width), r < n ? r = n : r + o.height > i - n && (r = i - n - o.height), { top: r, left: l };
+}
+function R(e, t, o) {
+  const s = h({});
+  function i() {
+    const n = e.value, l = t.value;
+    if (!n || !l) return;
+    const r = o(), c = n.getBoundingClientRect(), a = l.getBoundingClientRect(), p = window.innerWidth, v = window.innerHeight, f = r.viewportPadding, u = r.sideOffset;
+    let d = c.right + u;
+    d + a.width > p - f && (d = c.left - a.width - u), d < f && (d = f);
+    let w = c.top;
+    w + a.height > v - f && (w = v - f - a.height), w < f && (w = f), s.value = { position: "fixed", top: `${w}px`, left: `${d}px` };
+  }
+  return { positionStyle: s, updatePosition: i };
+}
+const G = ["aria-labelledby"], ee = /* @__PURE__ */ y({
+  name: "UiPopoverContent",
+  inheritAttrs: !1,
+  __name: "UiPopoverContent",
+  props: {
+    align: { default: "center" },
+    side: { default: "bottom" },
+    sideOffset: { default: 4 },
+    viewportPadding: { default: 8 }
+  },
+  setup(e) {
+    const t = e, o = C(E), s = B(), i = T(() => {
+      const { class: v, ...f } = s;
+      return f;
+    }), n = h(!1), l = h(!1);
+    let r;
+    b(
+      () => o.isOpen.value,
+      async (v) => {
+        clearTimeout(r), v ? (n.value = !0, await g(), l.value = !0) : (l.value = !1, r = setTimeout(() => {
+          n.value = !1;
+        }, 150));
+      },
+      { immediate: !0 }
+    ), _(() => {
+      clearTimeout(r);
+    });
+    const c = h(), { positionStyle: a, updatePosition: p } = q(
+      o.triggerRef,
+      c,
+      () => ({
+        side: t.side,
+        align: t.align,
+        sideOffset: t.sideOffset,
+        viewportPadding: t.viewportPadding
+      })
+    );
+    return K({
+      isOpen: n,
+      updatePosition: p,
+      contentRef: c,
+      closeFn: o.close
+    }), (v, f) => (P(), S(A, { to: "body" }, [
+      n.value ? (P(), x("div", F({
+        key: 0,
+        ref: (u) => {
+          const d = u;
+          m(o).contentRef.value = d, c.value = d;
+        }
+      }, i.value, {
+        role: "dialog",
+        "aria-labelledby": m(o).triggerId,
+        tabindex: "-1",
+        style: m(a),
+        class: m(H)(
+          "z-50 w-72 max-w-[calc(100vw-1rem)]",
+          "bg-popover text-popover-foreground",
+          "border-ui border-border rounded-md p-4 shadow-lg",
+          "transition-all duration-150",
+          l.value ? "opacity-100 scale-100 ease-out" : "opacity-0 scale-[0.97] ease-in",
+          m(s).class
+        )
+      }), [
+        O(v.$slots, "default")
+      ], 16, G)) : U("", !0)
+    ]));
+  }
+}), J = ["id", "aria-expanded"], te = /* @__PURE__ */ y({
+  name: "UiPopoverTrigger",
+  __name: "UiPopoverTrigger",
+  setup(e) {
+    const t = C(E), o = h();
+    return z(() => {
+      o.value && (t.triggerRef.value = o.value);
+    }), (s, i) => (P(), x("div", {
+      ref_key: "el",
+      ref: o,
+      id: m(t).triggerId,
+      class: "inline-flex outline-none",
+      role: "button",
+      tabindex: "0",
+      "aria-expanded": m(t).isOpen.value,
+      "aria-haspopup": "dialog",
+      onClick: i[0] || (i[0] = (n) => m(t).toggle()),
+      onKeydown: [
+        i[1] || (i[1] = $(k((n) => m(t).toggle(), ["prevent"]), ["enter"])),
+        i[2] || (i[2] = $(k((n) => m(t).toggle(), ["prevent"]), ["space"]))
+      ]
+    }, [
+      O(s.$slots, "default", {
+        open: m(t).isOpen.value
+      })
+    ], 40, J));
+  }
+});
+export {
+  E as P,
+  Z as _,
+  te as a,
+  ee as b,
+  K as c,
+  R as d,
+  q as u
+};

package/dist/calendar.d.ts

@@ -0,0 +1,88 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { Locale } from 'date-fns/locale';
+import { PublicProps } from 'vue';
+
+export declare const Calendar: DefineComponent<UiCalendarProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: Date | DateRange | undefined) => any;
+}, string, PublicProps, Readonly<UiCalendarProps> & Readonly<{
+"onUpdate:modelValue"?: ((value: Date | DateRange | undefined) => any) | undefined;
+}>, {
+disabled: (date: Date) => boolean;
+modelValue: Date | DateRange;
+mode: CalendarMode;
+weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+locale: Locale;
+defaultMonth: Date;
+numberOfMonths: number;
+showOutsideDays: boolean;
+fixedWeeks: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+export declare type CalendarMode = 'single' | 'range';
+
+export declare const DatePicker: DefineComponent<UiDatePickerProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: Date | undefined) => any;
+}, string, PublicProps, Readonly<UiDatePickerProps> & Readonly<{
+"onUpdate:modelValue"?: ((value: Date | undefined) => any) | undefined;
+}>, {
+disabled: (date: Date) => boolean;
+modelValue: Date;
+placeholder: string;
+weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+locale: Locale;
+formatStr: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+export declare interface DateRange {
+    from: Date;
+    to?: Date;
+}
+
+export declare const DateRangePicker: DefineComponent<UiDateRangePickerProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: DateRange | undefined) => any;
+}, string, PublicProps, Readonly<UiDateRangePickerProps> & Readonly<{
+"onUpdate:modelValue"?: ((value: DateRange | undefined) => any) | undefined;
+}>, {
+disabled: (date: Date) => boolean;
+modelValue: DateRange;
+placeholder: string;
+weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+locale: Locale;
+numberOfMonths: number;
+formatStr: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare interface UiCalendarProps {
+    mode?: CalendarMode;
+    modelValue?: Date | DateRange;
+    defaultMonth?: Date;
+    numberOfMonths?: number;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    showOutsideDays?: boolean;
+    fixedWeeks?: boolean;
+    disabled?: (date: Date) => boolean;
+    locale?: Locale;
+}
+
+declare interface UiDatePickerProps {
+    modelValue?: Date;
+    placeholder?: string;
+    formatStr?: string;
+    locale?: Locale;
+    disabled?: (date: Date) => boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+declare interface UiDateRangePickerProps {
+    modelValue?: DateRange;
+    placeholder?: string;
+    formatStr?: string;
+    locale?: Locale;
+    disabled?: (date: Date) => boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    numberOfMonths?: number;
+}
+
+export { }