@3df-spa/ui 1.0.7 → 1.2.0

package/dist/calendar.js

@@ -0,0 +1,416 @@
+import { defineComponent as j, useAttrs as E, computed as w, ref as A, watch as H, openBlock as f, createElementBlock as h, mergeProps as B, unref as p, createElementVNode as a, normalizeClass as U, Fragment as P, renderList as R, createCommentVNode as $, toDisplayString as S, createBlock as _, withCtx as y, createVNode as k } from "vue";
+import { startOfWeek as T, format as x, addDays as W, addMonths as F, startOfMonth as J, eachDayOfInterval as I, endOfMonth as K, endOfWeek as Q, isToday as X, isSameMonth as Y, isSameDay as V, subMonths as Z } from "date-fns";
+import { c as C } from "./utils-C9QoOYNG.js";
+import { _ as N, a as z, b as L } from "./UiPopoverTrigger.vue_vue_type_script_setup_true_lang-DKJgwMAw.js";
+function ee(t, n, e) {
+  if (n) {
+    if (t === "single" && n instanceof Date) return n;
+    if (t === "range" && "from" in n)
+      return n.from;
+  }
+  return e;
+}
+function te(t, n) {
+  const e = T(/* @__PURE__ */ new Date(), { weekStartsOn: t });
+  return Array.from({ length: 7 }, (r, s) => x(W(e, s), "EEEEEE", { locale: n }));
+}
+function ne(t, n, e) {
+  if (!e) return !1;
+  if (n === "single") return V(t, e);
+  const r = e;
+  return V(t, r.from) || (r.to ? V(t, r.to) : !1);
+}
+function oe(t, n, e) {
+  return n !== "range" || !e ? !1 : V(t, e.from);
+}
+function ae(t, n, e) {
+  if (n !== "range" || !e) return !1;
+  const r = e;
+  return r.to ? V(t, r.to) : !1;
+}
+function re(t, n, e) {
+  if (n !== "range" || !e) return !1;
+  const r = e;
+  return r.to ? t > r.from && t < r.to : !1;
+}
+function le(t, n, e, r, s, g, c, b) {
+  const i = [];
+  for (let l = 0; l < n; l++) {
+    const v = F(t, l), M = J(v), D = T(M, { weekStartsOn: e });
+    let u;
+    if (r)
+      u = I({ start: D, end: W(D, 41) });
+    else {
+      const d = K(v), O = Q(d, { weekStartsOn: e });
+      u = I({ start: D, end: O });
+    }
+    const m = u.map((d) => ({
+      date: d,
+      isCurrentMonth: Y(d, v),
+      isToday: X(d),
+      isSelected: ne(d, s, g),
+      isRangeStart: oe(d, s, g),
+      isRangeEnd: ae(d, s, g),
+      isInRange: re(d, s, g),
+      isDisabled: c ? c(d) : !1
+    }));
+    i.push({
+      month: v,
+      label: x(v, "MMMM yyyy", { locale: b }),
+      days: m
+    });
+  }
+  return i;
+}
+const se = { class: "relative flex items-center justify-center pt-1 pb-4" }, ie = {
+  "aria-live": "polite",
+  class: "text-sm font-medium capitalize"
+}, ue = {
+  class: "grid grid-cols-7",
+  role: "row"
+}, de = {
+  class: "grid grid-cols-7",
+  role: "grid"
+}, ce = {
+  key: 0,
+  class: "h-9 w-9",
+  role: "gridcell"
+}, fe = ["disabled", "aria-selected", "aria-current", "aria-label", "data-today", "data-outside", "onClick"], q = /* @__PURE__ */ j({
+  name: "UiCalendar",
+  inheritAttrs: !1,
+  __name: "UiCalendar",
+  props: {
+    mode: { default: "single" },
+    modelValue: { default: void 0 },
+    defaultMonth: { default: () => /* @__PURE__ */ new Date() },
+    numberOfMonths: { default: 1 },
+    weekStartsOn: { default: 1 },
+    showOutsideDays: { type: Boolean, default: !0 },
+    fixedWeeks: { type: Boolean, default: !0 },
+    disabled: { type: Function, default: void 0 },
+    locale: { default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: n }) {
+    const e = t, r = n, s = E(), g = w(() => {
+      const { class: u, ...m } = s;
+      return m;
+    }), c = A(
+      new Date(ee(e.mode, e.modelValue, e.defaultMonth))
+    );
+    H(
+      () => e.defaultMonth,
+      (u) => {
+        u && (c.value = new Date(u));
+      }
+    );
+    function b() {
+      c.value = Z(c.value, 1);
+    }
+    function i() {
+      c.value = F(c.value, 1);
+    }
+    const l = w(() => te(e.weekStartsOn, e.locale)), v = w(
+      () => le(
+        c.value,
+        e.numberOfMonths,
+        e.weekStartsOn,
+        e.fixedWeeks,
+        e.mode,
+        e.modelValue,
+        e.disabled,
+        e.locale
+      )
+    ), M = A(!1);
+    function D(u) {
+      if (!e.disabled?.(u))
+        if (e.mode === "single")
+          r("update:modelValue", u);
+        else if (!M.value || !e.modelValue)
+          r("update:modelValue", { from: u }), M.value = !0;
+        else {
+          const m = e.modelValue;
+          u < m.from ? r("update:modelValue", { from: u, to: m.from }) : r("update:modelValue", { from: m.from, to: u }), M.value = !1;
+        }
+    }
+    return (u, m) => (f(), h("div", B(g.value, {
+      class: p(C)("p-3", p(s).class)
+    }), [
+      a("div", {
+        class: U(p(C)("flex", t.numberOfMonths > 1 && "gap-4"))
+      }, [
+        (f(!0), h(P, null, R(v.value, (d, O) => (f(), h("div", {
+          key: d.label,
+          class: "w-full"
+        }, [
+          a("div", se, [
+            O === 0 ? (f(), h("button", {
+              key: 0,
+              type: "button",
+              "aria-label": "Mes anterior",
+              class: "text-muted-foreground hover:bg-accent hover:text-accent-foreground absolute left-0 inline-flex h-7 w-7 items-center justify-center rounded-md bg-transparent text-sm font-medium transition-colors",
+              onClick: b
+            }, [...m[0] || (m[0] = [
+              a("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "aria-hidden": "true",
+                class: "h-4 w-4"
+              }, [
+                a("path", { d: "m15 18-6-6 6-6" })
+              ], -1)
+            ])])) : $("", !0),
+            a("span", ie, S(d.label), 1),
+            O === v.value.length - 1 ? (f(), h("button", {
+              key: 1,
+              type: "button",
+              "aria-label": "Mes siguiente",
+              class: "text-muted-foreground hover:bg-accent hover:text-accent-foreground absolute right-0 inline-flex h-7 w-7 items-center justify-center rounded-md bg-transparent text-sm font-medium transition-colors",
+              onClick: i
+            }, [...m[1] || (m[1] = [
+              a("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "aria-hidden": "true",
+                class: "h-4 w-4"
+              }, [
+                a("path", { d: "m9 18 6-6-6-6" })
+              ], -1)
+            ])])) : $("", !0)
+          ]),
+          a("div", ue, [
+            (f(!0), h(P, null, R(l.value, (o) => (f(), h("div", {
+              key: o,
+              role: "columnheader",
+              class: "text-muted-foreground flex h-9 w-9 items-center justify-center text-[0.8rem] font-normal"
+            }, S(o), 1))), 128))
+          ]),
+          a("div", de, [
+            (f(!0), h(P, null, R(d.days, (o, G) => (f(), h(P, { key: G }, [
+              !o.isCurrentMonth && !t.showOutsideDays ? (f(), h("div", ce)) : (f(), h("button", {
+                key: 1,
+                type: "button",
+                role: "gridcell",
+                disabled: o.isDisabled,
+                "aria-selected": o.isSelected || void 0,
+                "aria-current": o.isToday ? "date" : void 0,
+                "aria-label": p(x)(o.date, "PPPP", { locale: t.locale }),
+                "data-today": o.isToday || void 0,
+                "data-outside": !o.isCurrentMonth || void 0,
+                class: U(
+                  p(C)(
+                    "inline-flex h-9 w-9 items-center justify-center rounded-md p-0 text-sm font-normal",
+                    "transition-colors duration-100",
+                    "hover:bg-accent hover:text-accent-foreground",
+                    "focus-visible:outline-2 focus-visible:outline-ring",
+                    o.isToday && !o.isSelected && "bg-accent text-accent-foreground font-medium",
+                    o.isSelected && !o.isInRange && "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground font-medium",
+                    o.isInRange && "bg-accent/50 rounded-none",
+                    o.isRangeStart && o.isSelected && "rounded-r-none",
+                    o.isRangeEnd && o.isSelected && "rounded-l-none",
+                    !o.isCurrentMonth && "text-muted-foreground/50",
+                    o.isDisabled && "pointer-events-none opacity-50"
+                  )
+                ),
+                onClick: (me) => D(o.date)
+              }, S(o.date.getDate()), 11, fe))
+            ], 64))), 128))
+          ])
+        ]))), 128))
+      ], 2)
+    ], 16));
+  }
+}), be = /* @__PURE__ */ j({
+  name: "UiDatePicker",
+  inheritAttrs: !1,
+  __name: "UiDatePicker",
+  props: {
+    modelValue: { default: void 0 },
+    placeholder: { default: "Pick a date" },
+    formatStr: { default: "PPP" },
+    locale: { default: void 0 },
+    disabled: { type: Function, default: void 0 },
+    weekStartsOn: { default: 1 }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: n }) {
+    const e = t, r = n, s = E(), g = w(() => {
+      const { class: i, ...l } = s;
+      return l;
+    }), c = w(() => e.modelValue ? x(e.modelValue, e.formatStr, { locale: e.locale }) : null);
+    function b(i) {
+      r("update:modelValue", i);
+    }
+    return (i, l) => (f(), _(N, null, {
+      default: y(() => [
+        k(z, null, {
+          default: y(() => [
+            a("button", B(g.value, {
+              type: "button",
+              class: p(C)(
+                "inline-flex h-10 w-full min-w-[240px] items-center justify-start gap-2 rounded-md border-ui border-input bg-foreground/5 px-3 py-2 text-left text-sm ring-offset-background transition-colors",
+                "hover:bg-accent/50",
+                "focus-visible:outline-2 focus-visible:outline-ring",
+                !t.modelValue && "text-muted-foreground",
+                p(s).class
+              )
+            }), [
+              l[0] || (l[0] = a("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                class: "h-4 w-4 shrink-0 opacity-50"
+              }, [
+                a("path", { d: "M8 2v4" }),
+                a("path", { d: "M16 2v4" }),
+                a("rect", {
+                  width: "18",
+                  height: "18",
+                  x: "3",
+                  y: "4",
+                  rx: "2"
+                }),
+                a("path", { d: "M3 10h18" })
+              ], -1)),
+              a("span", null, S(c.value ?? t.placeholder), 1)
+            ], 16)
+          ]),
+          _: 1
+        }),
+        k(L, {
+          align: "start",
+          class: "w-auto p-0"
+        }, {
+          default: y(() => [
+            k(q, {
+              mode: "single",
+              "model-value": t.modelValue,
+              disabled: t.disabled,
+              locale: t.locale,
+              "week-starts-on": t.weekStartsOn,
+              "onUpdate:modelValue": b
+            }, null, 8, ["model-value", "disabled", "locale", "week-starts-on"])
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }));
+  }
+}), we = /* @__PURE__ */ j({
+  name: "UiDateRangePicker",
+  inheritAttrs: !1,
+  __name: "UiDateRangePicker",
+  props: {
+    modelValue: { default: void 0 },
+    placeholder: { default: "Pick a date range" },
+    formatStr: { default: "PP" },
+    locale: { default: void 0 },
+    disabled: { type: Function, default: void 0 },
+    weekStartsOn: { default: 1 },
+    numberOfMonths: { default: 2 }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: n }) {
+    const e = t, r = n, s = E(), g = w(() => {
+      const { class: i, ...l } = s;
+      return l;
+    }), c = w(() => {
+      if (!e.modelValue) return null;
+      const i = { locale: e.locale }, l = x(e.modelValue.from, e.formatStr, i);
+      if (!e.modelValue.to) return l;
+      const v = x(e.modelValue.to, e.formatStr, i);
+      return `${l} – ${v}`;
+    });
+    function b(i) {
+      r("update:modelValue", i);
+    }
+    return (i, l) => (f(), _(N, null, {
+      default: y(() => [
+        k(z, null, {
+          default: y(() => [
+            a("button", B(g.value, {
+              type: "button",
+              class: p(C)(
+                "inline-flex h-10 w-full min-w-[300px] items-center justify-start gap-2 rounded-md border-ui border-input bg-foreground/5 px-3 py-2 text-left text-sm ring-offset-background transition-colors",
+                "hover:bg-accent/50",
+                "focus-visible:outline-2 focus-visible:outline-ring",
+                !t.modelValue && "text-muted-foreground",
+                p(s).class
+              )
+            }), [
+              l[0] || (l[0] = a("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                class: "h-4 w-4 shrink-0 opacity-50"
+              }, [
+                a("path", { d: "M8 2v4" }),
+                a("path", { d: "M16 2v4" }),
+                a("rect", {
+                  width: "18",
+                  height: "18",
+                  x: "3",
+                  y: "4",
+                  rx: "2"
+                }),
+                a("path", { d: "M3 10h18" })
+              ], -1)),
+              a("span", null, S(c.value ?? t.placeholder), 1)
+            ], 16)
+          ]),
+          _: 1
+        }),
+        k(L, {
+          align: "start",
+          class: "w-auto p-0"
+        }, {
+          default: y(() => [
+            k(q, {
+              mode: "range",
+              "model-value": t.modelValue,
+              "number-of-months": t.numberOfMonths,
+              disabled: t.disabled,
+              locale: t.locale,
+              "week-starts-on": t.weekStartsOn,
+              "onUpdate:modelValue": b
+            }, null, 8, ["model-value", "number-of-months", "disabled", "locale", "week-starts-on"])
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }));
+  }
+});
+export {
+  q as Calendar,
+  be as DatePicker,
+  we as DateRangePicker
+};

package/dist/carousel.d.ts

@@ -0,0 +1,103 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { EmblaCarouselType } from 'embla-carousel';
+import { EmblaOptionsType } from 'embla-carousel';
+import { EmblaPluginType } from 'embla-carousel';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+
+declare const __VLS_component: DefineComponent<UiCarouselProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"set-api": (api: EmblaCarouselType) => any;
+}, string, PublicProps, Readonly<UiCarouselProps> & Readonly<{
+"onSet-api"?: ((api: EmblaCarouselType) => any) | undefined;
+}>, {
+orientation: CarouselOrientation;
+opts: Partial<EmblaOptionsType>;
+plugins: EmblaPluginType[];
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_2: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+declare const __VLS_component_3: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_2(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_3(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+
+declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
+
+declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_3<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export declare const Carousel: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
+export declare const CarouselContent: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+
+export declare interface CarouselContext {
+    orientation: Ref<CarouselOrientation>;
+    viewportRef: Ref<HTMLElement | undefined>;
+    api: Ref<EmblaCarouselType | undefined>;
+    canScrollPrev: Ref<boolean>;
+    canScrollNext: Ref<boolean>;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+}
+
+export declare const CarouselItem: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
+
+export declare const CarouselNext: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+export declare type CarouselOrientation = 'horizontal' | 'vertical';
+
+export declare const CarouselPrevious: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+declare interface UiCarouselProps {
+    opts?: Partial<EmblaOptionsType>;
+    orientation?: CarouselOrientation;
+    plugins?: EmblaPluginType[];
+}
+
+export { }