@indielayer/ui 1.0.10 → 1.2.0

package/lib/components/collapse/Collapse.vue.js

@@ -0,0 +1,132 @@
+import { defineComponent as T, ref as f, watch as P, openBlock as i, createBlock as v, resolveDynamicComponent as V, normalizeStyle as z, unref as s, normalizeClass as l, withCtx as m, createElementVNode as r, renderSlot as d, createElementBlock as h, createCommentVNode as y, createVNode as A, Transition as D, withDirectives as H, vShow as I } from "vue";
+import { useTheme as M } from "../../composables/theme.js";
+import { useColors as X } from "../../composables/colors.js";
+import j from "../icon/Icon.vue.js";
+import q from "./Collapse.theme.js";
+const F = { class: "flex-1 overflow-hidden" }, G = {
+  key: 1,
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  fill: "none",
+  role: "presentation",
+  class: "stroke-2 w-5 h-5"
+}, J = /* @__PURE__ */ r("path", { d: "M19 9l-7 7-7-7" }, null, -1), K = [
+  J
+], O = {
+  ...X.props(),
+  tag: {
+    type: String,
+    default: "div"
+  },
+  disabled: Boolean,
+  expanded: Boolean,
+  showIcon: Boolean,
+  icon: String
+}, Q = { name: "XCollapse" }, ee = /* @__PURE__ */ T({
+  ...Q,
+  props: O,
+  emits: ["expand"],
+  setup(g, { expose: x, emit: k }) {
+    const a = g, t = f(!a.expanded), o = f(!0);
+    P(() => a.expanded, () => {
+      t.value = !a.expanded;
+    });
+    function w(e) {
+      o.value && (e.style.height = "0px");
+    }
+    function _(e, n) {
+      o.value ? (e.addEventListener("transitionend", n), setTimeout(() => {
+        e.style.height = `${e.scrollHeight}px`;
+      }, 1)) : n();
+    }
+    function B(e) {
+      o.value ? e.style.removeProperty("height") : o.value = !0;
+    }
+    function C(e) {
+      o.value && (e.style.height = `${e.scrollHeight}px`);
+    }
+    function E(e, n) {
+      o.value ? (e.addEventListener("transitionend", n), setTimeout(() => {
+        e.style.height = "0px";
+      }, 1)) : n();
+    }
+    function $(e) {
+      o.value ? e.style.removeProperty("height") : o.value = !0;
+    }
+    function c(e = !0) {
+      o.value = e, t.value = !1;
+    }
+    function b(e = !0) {
+      o.value = e, t.value = !0;
+    }
+    function p() {
+      a.disabled || (t.value = !t.value);
+    }
+    function L(e = !0) {
+      c(e), k("expand");
+    }
+    const { styles: S, classes: u, className: N } = M("collapse", q, a);
+    return x({ toggle: p, open: c, close: b }), (e, n) => (i(), v(V(e.tag), {
+      style: z(s(S)),
+      class: l(s(N)),
+      "aria-disabled": e.disabled,
+      "aria-expanded": t.value ? "false" : "true"
+    }, {
+      default: m(() => [
+        r("div", {
+          class: l(s(u).wrapper),
+          onClick: p
+        }, [
+          r("div", F, [
+            d(e.$slots, "default", { collapsed: t.value })
+          ]),
+          e.showIcon ? (i(), h("div", {
+            key: 0,
+            class: l(s(u).icon)
+          }, [
+            r("span", {
+              class: l(["flex transform transition-transform duration-150", [
+                {
+                  "rotate-180": !t.value,
+                  "text-gray-300": e.disabled
+                }
+              ]])
+            }, [
+              e.icon ? (i(), v(j, {
+                key: 0,
+                icon: e.icon
+              }, null, 8, ["icon"])) : (i(), h("svg", G, K))
+            ], 2)
+          ], 2)) : y("", !0)
+        ], 2),
+        e.$slots.summary ? d(e.$slots, "summary", { key: 0 }) : y("", !0),
+        A(D, {
+          onBeforeEnter: w,
+          onEnter: _,
+          onAfterEnter: B,
+          onBeforeLeave: C,
+          onLeave: E,
+          onAfterLeave: $
+        }, {
+          default: m(() => [
+            H(r("div", {
+              class: l(s(u).content)
+            }, [
+              d(e.$slots, "content", {
+                expand: L,
+                collapsed: t.value
+              })
+            ], 2), [
+              [I, !t.value]
+            ])
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 8, ["style", "class", "aria-disabled", "aria-expanded"]));
+  }
+});
+export {
+  ee as default
+};

package/lib/components/collapse/Collapse.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Collapse.vue.js";
+export {
+  f as default
+};

package/lib/components/collapse/index.d.ts

@@ -0,0 +1,3 @@
+export { default as XCollapse } from './Collapse.vue';
+export type { CollapseProps } from './Collapse.vue';
+export type { CollapseTheme } from './Collapse.theme';

package/lib/components/container/Container.theme.d.ts

@@ -1,6 +1,10 @@
-declare const _default: {
-    classes: {
-        wrapper: string;
-    };
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { ContainerProps } from './Container.vue';
+type InternalClasses = 'wrapper';
+interface InternalTheme extends ThemeComponent<ContainerProps, InternalClasses> {
+}
+export interface ContainerTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<ContainerProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

package/lib/components/container/Container.theme.js

@@ -0,0 +1,8 @@
+const e = {
+  classes: {
+    wrapper: "max-w-screen-2xl mx-auto px-4 md:px-8"
+  }
+}, s = e;
+export {
+  s as default
+};

package/lib/components/container/Container.vue.d.ts

@@ -1,3 +1,11 @@
+import type { ExtractPublicPropTypes } from 'vue';
+declare const containerProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+};
+export type ContainerProps = ExtractPublicPropTypes<typeof containerProps>;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
         type: StringConstructor;

package/lib/components/container/Container.vue.js

@@ -0,0 +1,30 @@
+import { defineComponent as l, openBlock as c, createBlock as m, resolveDynamicComponent as p, normalizeStyle as i, unref as e, normalizeClass as f, withCtx as u, renderSlot as d } from "vue";
+import { useTheme as _ } from "../../composables/theme.js";
+import y from "./Container.theme.js";
+const C = {
+  tag: {
+    type: String,
+    default: "div"
+  }
+}, h = { name: "XContainer" }, w = /* @__PURE__ */ l({
+  ...h,
+  props: C,
+  setup(o) {
+    const s = o, { styles: n, classes: r, className: a } = _("container", y, s);
+    return (t, g) => (c(), m(p(t.tag), {
+      style: i(e(n)),
+      class: f([
+        e(a),
+        e(r).wrapper
+      ])
+    }, {
+      default: u(() => [
+        d(t.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["style", "class"]));
+  }
+});
+export {
+  w as default
+};

package/lib/components/container/Container.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Container.vue.js";
+export {
+  f as default
+};

package/lib/components/container/index.d.ts

@@ -0,0 +1,3 @@
+export { default as XContainer } from './Container.vue';
+export type { ContainerProps } from './Container.vue';
+export type { ContainerTheme } from './Container.theme';

package/lib/components/divider/Divider.theme.d.ts

@@ -1,9 +1,10 @@
-import type { ThemeParams } from '../../composables/theme';
-declare const _default: {
-    classes: {
-        wrapper: ({ props }: ThemeParams) => string;
-        label: string;
-        line: string;
-    };
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { DividerProps } from './Divider.vue';
+type InternalClasses = 'wrapper' | 'label' | 'line';
+interface InternalTheme extends ThemeComponent<DividerProps, InternalClasses> {
+}
+export interface DividerTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<DividerProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

package/lib/components/divider/Divider.theme.js

@@ -0,0 +1,10 @@
+const t = {
+  classes: {
+    wrapper: ({ props: e }) => `flex justify-center items-center ${e.vertical ? "h-full flex-col" : "w-full"}`,
+    label: "font-medium text-sm text-gray-600 dark:text-gray-300",
+    line: "bg-gray-200 dark:bg-slate-700 flex-grow"
+  }
+}, l = t;
+export {
+  l as default
+};

package/lib/components/divider/Divider.vue.d.ts

@@ -1,3 +1,9 @@
+import type { ExtractPublicPropTypes } from 'vue';
+declare const dividerProps: {
+    label: StringConstructor;
+    vertical: BooleanConstructor;
+};
+export type DividerProps = ExtractPublicPropTypes<typeof dividerProps>;
 declare const _default: import("vue").DefineComponent<{
     label: StringConstructor;
     vertical: BooleanConstructor;

package/lib/components/divider/Divider.vue.js

@@ -0,0 +1,53 @@
+import { defineComponent as p, openBlock as o, createElementBlock as s, normalizeStyle as r, unref as t, normalizeClass as a, createElementVNode as i, toDisplayString as u, createCommentVNode as v } from "vue";
+import { useTheme as h } from "../../composables/theme.js";
+import y from "./Divider.theme.js";
+const f = ["textContent"], g = {
+  label: String,
+  vertical: Boolean
+}, C = { name: "XDivider" }, B = /* @__PURE__ */ p({
+  ...C,
+  props: g,
+  setup(n) {
+    const m = n, { styles: c, classes: l, className: d } = h("divider", y, m);
+    return (e, b) => (o(), s("div", {
+      style: r(t(c)),
+      class: a([
+        t(d),
+        t(l).wrapper
+      ])
+    }, [
+      i("div", {
+        class: a(t(l).line),
+        style: r([
+          {
+            width: e.vertical ? "1px" : "auto",
+            height: e.vertical ? "auto" : "1px"
+          }
+        ])
+      }, null, 6),
+      e.label ? (o(), s("div", {
+        key: 0,
+        class: a(["font-medium text-sm text-gray-600 dark:text-gray-300", [
+          t(l).label,
+          {
+            "my-2": e.vertical,
+            "mx-4": !e.vertical
+          }
+        ]]),
+        textContent: u(e.label)
+      }, null, 10, f)) : v("", !0),
+      i("div", {
+        class: a(t(l).line),
+        style: r([
+          {
+            width: e.vertical ? "1px" : "auto",
+            height: e.vertical ? "auto" : "1px"
+          }
+        ])
+      }, null, 6)
+    ], 6));
+  }
+});
+export {
+  B as default
+};

package/lib/components/divider/Divider.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Divider.vue.js";
+export {
+  f as default
+};

package/lib/components/divider/index.d.ts

@@ -0,0 +1,3 @@
+export { default as XDivider } from './Divider.vue';
+export type { DividerProps } from './Divider.vue';
+export type { DividerTheme } from './Divider.theme';

package/lib/components/drawer/Drawer.theme.d.ts

@@ -1,7 +1,10 @@
-declare const _default: {
-    classes: {
-        wrapper: string;
-        backdrop: string;
-    };
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { DrawerProps } from './Drawer.vue';
+type InternalClasses = 'wrapper' | 'backdrop';
+interface InternalTheme extends ThemeComponent<DrawerProps, InternalClasses> {
+}
+export interface DrawerTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<DrawerProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

package/lib/components/drawer/Drawer.theme.js

@@ -0,0 +1,9 @@
+const e = {
+  classes: {
+    wrapper: "flex flex-col max-h-full bg-white dark:bg-gray-800",
+    backdrop: "duration-150 ease-in-out"
+  }
+}, a = e;
+export {
+  a as default
+};

package/lib/components/drawer/Drawer.vue.d.ts

@@ -1,8 +1,35 @@
-import { type PropType } from 'vue';
+import { type PropType, type ExtractPublicPropTypes } from 'vue';
+declare const drawerPosition: readonly ["left", "right", "top", "bottom"];
+declare const drawerProps: {
+    modelValue: BooleanConstructor;
+    position: {
+        type: PropType<"left" | "right" | "top" | "bottom">;
+        default: string;
+    };
+    teleportTo: {
+        type: PropType<string | HTMLElement>;
+        default: string;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    breakpoint: (StringConstructor | NumberConstructor)[];
+    backdrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export type DrawerPosition = typeof drawerPosition[number];
+export type DrawerProps = ExtractPublicPropTypes<typeof drawerProps>;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: BooleanConstructor;
     position: {
-        type: PropType<"top" | "bottom" | "left" | "right">;
+        type: PropType<"left" | "right" | "top" | "bottom">;
         default: string;
     };
     teleportTo: {
@@ -10,14 +37,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     width: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     height: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    breakpoint: (NumberConstructor | StringConstructor)[];
+    breakpoint: (StringConstructor | NumberConstructor)[];
     backdrop: {
         type: BooleanConstructor;
         default: boolean;
@@ -28,7 +55,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: BooleanConstructor;
     position: {
-        type: PropType<"top" | "bottom" | "left" | "right">;
+        type: PropType<"left" | "right" | "top" | "bottom">;
         default: string;
     };
     teleportTo: {
@@ -36,14 +63,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     width: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
     height: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    breakpoint: (NumberConstructor | StringConstructor)[];
+    breakpoint: (StringConstructor | NumberConstructor)[];
     backdrop: {
         type: BooleanConstructor;
         default: boolean;
@@ -51,12 +78,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    modelValue: boolean;
     height: string | number;
     width: string | number;
-    position: "top" | "bottom" | "left" | "right";
-    modelValue: boolean;
-    teleportTo: string | HTMLElement;
+    position: "left" | "right" | "top" | "bottom";
     backdrop: boolean;
+    teleportTo: string | HTMLElement;
 }, {}>, {
     header?(_: {}): any;
     default?(_: {}): any;

package/lib/components/drawer/Drawer.vue.js

@@ -0,0 +1,171 @@
+import { defineComponent as P, ref as a, watchEffect as X, watch as j, computed as v, onMounted as K, openBlock as y, createBlock as M, Teleport as O, createVNode as w, Transition as q, withCtx as g, withDirectives as F, createElementVNode as k, normalizeClass as $, unref as n, createElementBlock as G, createCommentVNode as x, normalizeStyle as H, renderSlot as f, vShow as I } from "vue";
+import { useBreakpoints as J, breakpointsTailwind as Q, useEventListener as S, useSwipe as U } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.4/node_modules/@vueuse/core/index.js";
+import { useTheme as W } from "../../composables/theme.js";
+import Y from "../scroll/Scroll.vue.js";
+import Z from "./Drawer.theme.js";
+const ee = {
+  key: 0,
+  ref: "swipeRef",
+  class: "flex flex-col max-h-full"
+}, te = ["left", "right", "top", "bottom"], oe = {
+  modelValue: Boolean,
+  position: {
+    type: String,
+    default: "left"
+  },
+  teleportTo: {
+    type: [String, Object],
+    default: "body"
+  },
+  width: {
+    type: [String, Number],
+    default: 320
+  },
+  height: {
+    type: [String, Number],
+    default: 320
+  },
+  breakpoint: [String, Number],
+  backdrop: {
+    type: Boolean,
+    default: !0
+  }
+}, ie = {
+  name: "XDrawer",
+  inheritAttrs: !1,
+  validators: {
+    position: te
+  }
+}, fe = /* @__PURE__ */ P({
+  ...ie,
+  props: oe,
+  emits: ["update:modelValue"],
+  setup(E, { expose: L, emit: u }) {
+    const t = E, i = a(!0), s = a(t.modelValue), r = a(null), d = a(null), c = a(!1), h = typeof t.breakpoint == "string", p = J(h ? Q : { md: t.breakpoint || 768 }).smaller(h ? t.breakpoint : "md");
+    X(() => {
+      t.breakpoint && (p.value ? (i.value = !0, l()) : (i.value = !1, m()));
+    }), S(r, "pointerdown", l), j(() => t.modelValue, (e) => {
+      s.value = e;
+    }), typeof window < "u" && S(document, "keydown", B);
+    function B(e) {
+      e.key === "Escape" && s.value && l();
+    }
+    U(d, {
+      // passive: false,
+      // onSwipe(e: TouchEvent) {
+      //   if (lengthX.value < 0) {
+      //     const length = Math.abs(lengthX.value)
+      //     left.value = `${length}px`
+      //   } else {
+      //     left.value = '0'
+      //   }
+      // },
+      // onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
+      //   if (lengthX.value < 0 && props.width && (Math.abs(lengthX.value) / props.width) >= 0.5) {
+      //     left.value = '100%'
+      //   } else {
+      //     left.value = '0'
+      //   }
+      // },
+      onSwipeEnd(e, o) {
+        i.value && (t.position === "left" && o === "left" || t.position === "right" && o === "right" || t.position === "top" && o === "up" || t.position === "bottom" && o === "down") && l();
+      }
+    });
+    const T = v(() => {
+      const e = {};
+      return t.position === "left" || t.position === "right" ? e.width = `${t.width}px` : (t.position === "top" || t.position === "bottom") && (e.height = `${t.height}px`), e;
+    }), V = v(() => {
+      const e = [];
+      return i.value && (e.push("absolute shadow-lg"), t.position === "top" ? e.push("top-0 inset-x-0") : t.position === "bottom" ? e.push("bottom-0 inset-x-0") : t.position === "left" ? e.push("left-0 inset-y-0") : t.position === "right" && e.push("right-0 inset-y-0")), e;
+    });
+    function N(e) {
+      e.classList.add("inset-0"), t.position === "top" ? e.style.top = `-${t.height}px` : t.position === "bottom" ? e.style.bottom = `-${t.height}px` : t.position === "left" ? e.style.left = `-${t.width}px` : t.position === "right" && (e.style.right = `-${t.width}px`);
+    }
+    function _(e, o) {
+      if (!i.value) {
+        o();
+        return;
+      }
+      e.addEventListener("transitionend", o), setTimeout(() => {
+        t.backdrop && e.classList.add("bg-gray-500/30"), t.position === "top" ? e.style.top = "0" : t.position === "bottom" ? e.style.bottom = "0" : t.position === "left" ? e.style.left = "0" : t.position === "right" && (e.style.right = "0");
+      }, 1);
+    }
+    function C(e) {
+    }
+    function R(e, o) {
+      e.addEventListener("transitionend", o), setTimeout(() => {
+        t.backdrop && e.classList.remove("bg-gray-500/30"), t.position === "top" ? e.style.top = `-${t.height}px` : t.position === "bottom" ? e.style.bottom = `-${t.height}px` : t.position === "left" ? e.style.left = `-${t.width}px` : t.position === "right" && (e.style.right = `-${t.width}px`);
+      }, 1);
+    }
+    function z(e) {
+      e.classList.remove("inset-0");
+    }
+    function l(e) {
+      e && e.target !== r.value || (s.value = !1, u("update:modelValue", !1));
+    }
+    function m() {
+      s.value = !0, u("update:modelValue", !0);
+    }
+    K(() => {
+      c.value = !0;
+    });
+    const { styles: D, classes: b, className: A } = W("drawer", Z, t);
+    return L({ open: m, close: l }), (e, o) => c.value ? (y(), M(O, {
+      key: 0,
+      to: e.teleportTo,
+      disabled: !i.value
+    }, [
+      w(q, {
+        css: !1,
+        onBeforeEnter: N,
+        onEnter: _,
+        onBeforeLeave: C,
+        onLeave: R,
+        onAfterLeave: z
+      }, {
+        default: g(() => [
+          F(k("div", {
+            ref_key: "backdropRef",
+            ref: r,
+            class: $([
+              e.$attrs.class,
+              n(b).backdrop,
+              i.value || !e.breakpoint ? "absolute z-40" : ""
+            ])
+          }, [
+            i.value && s.value ? (y(), G("div", ee, null, 512)) : x("", !0),
+            k("div", {
+              ref_key: "drawerRef",
+              ref: d,
+              class: $([
+                n(A),
+                V.value,
+                n(b).wrapper
+              ]),
+              style: H([T.value, n(D)])
+            }, [
+              f(e.$slots, "header"),
+              w(Y, {
+                scrollbar: !1,
+                vertical: "",
+                class: "flex-1"
+              }, {
+                default: g(() => [
+                  f(e.$slots, "default")
+                ]),
+                _: 3
+              }),
+              f(e.$slots, "footer")
+            ], 6)
+          ], 2), [
+            [I, e.breakpoint ? s.value && n(p) || !n(p) : s.value]
+          ])
+        ]),
+        _: 3
+      })
+    ], 8, ["to", "disabled"])) : x("", !0);
+  }
+});
+export {
+  fe as default
+};

package/lib/components/drawer/Drawer.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Drawer.vue.js";
+export {
+  f as default
+};

package/lib/components/drawer/index.d.ts

@@ -0,0 +1,3 @@
+export { default as XDrawer } from './Drawer.vue';
+export type { DrawerProps, DrawerPosition } from './Drawer.vue';
+export type { DrawerTheme } from './Drawer.theme';

package/lib/components/form/Form.theme.d.ts

@@ -1,6 +1,10 @@
-declare const _default: {
-    classes: {
-        wrapper: string;
-    };
-};
-export default _default;
+import type { ThemeClasses, ThemeComponent } from '../../composables/theme';
+import type { FormProps } from './Form.vue';
+type InternalClasses = 'wrapper';
+interface InternalTheme extends ThemeComponent<FormProps, InternalClasses> {
+}
+export interface FormTheme extends Omit<InternalTheme, 'classes'> {
+    classes?: Partial<ThemeClasses<FormProps, InternalClasses>>;
+}
+declare const theme: InternalTheme;
+export default theme;

package/lib/components/form/Form.theme.js

@@ -0,0 +1,8 @@
+const e = {
+  classes: {
+    wrapper: ""
+  }
+}, s = e;
+export {
+  s as default
+};