@routa/ui-vue 0.1.0

package/dist/dropdown/index.mjs

@@ -0,0 +1,310 @@
+import '../style/index.css';
+import '../style/menu.css';
+import { defineComponent as S, inject as V, computed as f, onMounted as Z, onUnmounted as j, watch as E, unref as c, openBlock as u, createElementBlock as h, Fragment as D, createBlock as $, createCommentVNode as T, createVNode as W, createSlots as ue, withCtx as y, renderSlot as w, withModifiers as ce, normalizeClass as H, useSlots as me, ref as _, nextTick as A, provide as B, createElementVNode as R, Teleport as pe, Transition as fe, normalizeStyle as ve, renderList as ge, createTextVNode as he, toDisplayString as we } from "vue";
+import "../chunks/manager-BUdQK4AD.mjs";
+import { u as Ie } from "../chunks/z-index-D9ecXoNe.mjs";
+import { a as ye } from "../chunks/auto-update-Dw-2qIsQ.mjs";
+import { a as be, D as q, d as ke, b as Ce, c as _e } from "../chunks/index-B4GP5rXr.mjs";
+import { u as De } from "../chunks/use-signals-CE1T2jXK.mjs";
+import { useTeleportedConfig as $e } from "../config-provider/index.mjs";
+import { M as Me, b as Le } from "../chunks/types-CXAGM03M.mjs";
+import { u as ze } from "../chunks/use-id-D3casveg.mjs";
+import { LMenuDivider as Re, LMenuItem as Se } from "../menu/index.mjs";
+const Ee = ["id", "aria-disabled"], F = /* @__PURE__ */ S({
+  name: "DropdownItem",
+  __name: "DropdownItem",
+  props: be,
+  setup(m) {
+    const a = m, t = V(Me, null), n = t ? null : V(q, null), i = Symbol("dropdown-item"), v = f(() => n ? n.getItemIndex(i) : -1), M = f(() => (n == null ? void 0 : n.highlightedIndex.value) === v.value);
+    Z(() => {
+      n == null || n.registerItem({
+        id: i,
+        command: a.command,
+        disabled: a.disabled
+      });
+    }), j(() => {
+      n == null || n.unregisterItem(i);
+    }), E(
+      () => a.command,
+      (o) => {
+        n == null || n.updateItem(i, { command: o });
+      }
+    ), E(
+      () => a.disabled,
+      (o) => {
+        n == null || n.updateItem(i, { disabled: o });
+      }
+    );
+    const l = f(() => [
+      "l-dropdown-item",
+      `l-dropdown-item--${(n == null ? void 0 : n.size.value) ?? "md"}`,
+      {
+        "is-active": M.value,
+        "is-disabled": a.disabled,
+        "is-danger": a.danger,
+        "is-divided": a.divided
+      }
+    ]), p = () => {
+      !n || v.value < 0 || a.disabled || n.setHighlightedIndex(v.value);
+    }, b = () => {
+      n == null || n.selectItem(a.command, a.disabled);
+    };
+    return (o, L) => {
+      var k;
+      return c(t) ? (u(), h(D, { key: 0 }, [
+        o.divided ? (u(), $(c(Re), { key: 0 })) : T("", !0),
+        W(c(Se), {
+          value: o.command,
+          disabled: o.disabled,
+          danger: o.danger
+        }, ue({
+          default: y(() => [
+            w(o.$slots, "default")
+          ]),
+          _: 2
+        }, [
+          o.$slots.icon ? {
+            name: "icon",
+            fn: y(() => [
+              w(o.$slots, "icon")
+            ]),
+            key: "0"
+          } : void 0,
+          o.$slots.suffix ? {
+            name: "suffix",
+            fn: y(() => [
+              w(o.$slots, "suffix")
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1032, ["value", "disabled", "danger"])
+      ], 64)) : (u(), h("div", {
+        key: 1,
+        id: (k = c(n)) == null ? void 0 : k.getItemId(v.value),
+        class: H(l.value),
+        role: "menuitem",
+        "aria-disabled": o.disabled,
+        tabindex: "-1",
+        onMouseenter: p,
+        onClick: ce(b, ["stop"])
+      }, [
+        w(o.$slots, "default")
+      ], 42, Ee));
+    };
+  }
+}), Te = { class: "l-dropdown" }, He = ["aria-expanded", "aria-activedescendant"], Oe = ["data-theme"], xe = ["role"], Ke = /* @__PURE__ */ S({
+  name: "Dropdown",
+  __name: "Dropdown",
+  props: Ce,
+  emits: ke,
+  setup(m, { emit: a }) {
+    const t = m, n = a, i = me(), { teleportedCssVars: v, teleportedTheme: M } = $e(), l = _(null), p = _(null), b = _(2e3), o = _([]), L = f(() => t.size), k = ze("dropdown"), x = (e) => `${k}-item-${e}`, G = S({
+      name: "DropdownRenderContent",
+      props: {
+        content: {
+          type: null,
+          required: !1
+        }
+      },
+      setup(e) {
+        return () => e.content ?? null;
+      }
+    }), K = (e) => e ? e.some((d) => {
+      if (Array.isArray(d.children) && K(d.children))
+        return !0;
+      if (typeof d.type == "object" && d.type) {
+        const s = d.type.name ?? d.type.__name;
+        return s === "Menu" || s === "LMenu";
+      }
+      return !1;
+    }) : !1, r = _e({
+      trigger: t.trigger,
+      disabled: () => t.disabled,
+      closeOnSelect: t.hideOnClick,
+      placement: t.placement,
+      offset: t.offset,
+      flip: !0,
+      shift: !0,
+      getItems: () => o.value.map((e) => ({
+        command: e.command,
+        disabled: e.disabled
+      })),
+      onCommand: (e) => {
+        n("command", e);
+      },
+      onOpenChange: (e) => {
+        n("visible-change", e);
+      }
+    }), { nextZIndex: J } = Ie(), { isOpen: g, highlightedIndex: C, x: Q, y: X } = De(r), z = () => {
+      l.value && p.value && (r.actions.setReference(l.value), r.actions.updatePosition(p.value));
+    };
+    let I = null;
+    E(g, (e) => {
+      e ? (b.value = J(), A(() => {
+        l.value && p.value && (I = ye(l.value, p.value, z));
+      })) : (I == null || I(), I = null);
+    });
+    const N = (e) => {
+      r.actions.handleInteractOutside(
+        e.target,
+        l.value,
+        p.value
+      );
+    };
+    Z(() => {
+      document.addEventListener("click", N), window.addEventListener("resize", z);
+    }), j(() => {
+      document.removeEventListener("click", N), window.removeEventListener("resize", z);
+    });
+    const Y = () => {
+      t.trigger !== "click" || t.disabled || r.actions.toggle();
+    }, ee = (e) => {
+      t.trigger !== "contextmenu" || t.disabled || (e.preventDefault(), r.actions.open());
+    }, ne = (e) => {
+      if (!t.disabled) {
+        if (e.key === "ArrowDown") {
+          if (e.preventDefault(), !g.value) {
+            r.actions.open();
+            return;
+          }
+          r.actions.moveHighlight("next");
+        }
+        if (e.key === "ArrowUp") {
+          if (e.preventDefault(), !g.value) {
+            r.actions.open();
+            return;
+          }
+          r.actions.moveHighlight("prev");
+        }
+        if (e.key === "Enter" || e.key === " ") {
+          if (e.preventDefault(), !g.value) {
+            r.actions.open();
+            return;
+          }
+          r.actions.selectHighlighted();
+        }
+        e.key === "Escape" && r.actions.close();
+      }
+    }, te = f(() => [
+      "l-dropdown__menu",
+      `l-dropdown__menu--${t.size}`
+    ]), P = f(() => {
+      var e;
+      return K((e = i.default) == null ? void 0 : e.call(i, {}));
+    }), oe = f(() => !i.default && t.items.length > 0), de = f(() => ({
+      top: `${X.value}px`,
+      left: `${Q.value}px`,
+      minWidth: t.width ? typeof t.width == "number" ? `${t.width}px` : t.width : l.value ? `${l.value.offsetWidth}px` : void 0,
+      zIndex: b.value,
+      ...v.value
+    })), re = (e) => {
+      o.value = [...o.value, e];
+    }, se = (e) => {
+      o.value = o.value.filter((d) => d.id !== e);
+    }, ae = (e, d) => {
+      o.value = o.value.map((s) => s.id !== e ? s : {
+        ...s,
+        ...d
+      });
+    }, ie = (e) => o.value.findIndex((d) => d.id === e), le = (e) => {
+      var d;
+      return (d = t.renderItem) == null ? void 0 : d.call(t, e);
+    };
+    return B(q, {
+      highlightedIndex: C,
+      size: L,
+      registerItem: re,
+      unregisterItem: se,
+      updateItem: ae,
+      getItemIndex: ie,
+      getItemId: x,
+      setHighlightedIndex: (e) => {
+        C.value = e;
+      },
+      selectItem: (e, d) => {
+        d || r.actions.select(e);
+      }
+    }), B(Le, {
+      size: L,
+      onSelect: (e) => {
+        n("command", e), t.hideOnClick && A(() => {
+          r.actions.close();
+        });
+      },
+      close: () => {
+        r.actions.close();
+      }
+    }), (e, d) => (u(), h(D, null, [
+      R("div", Te, [
+        R("div", {
+          ref_key: "triggerRef",
+          ref: l,
+          class: H(["l-dropdown__trigger", { "is-disabled": e.disabled }]),
+          role: "button",
+          tabindex: "0",
+          "aria-haspopup": "menu",
+          "aria-expanded": c(g) ? "true" : "false",
+          "aria-activedescendant": c(C) >= 0 ? x(c(C)) : void 0,
+          onClick: Y,
+          onContextmenu: ee,
+          onKeydown: ne
+        }, [
+          w(e.$slots, "trigger")
+        ], 42, He)
+      ]),
+      (u(), $(pe, { to: "body" }, [
+        W(fe, { name: "l-dropdown-fade" }, {
+          default: y(() => [
+            c(g) ? (u(), h("div", {
+              key: 0,
+              ref_key: "popperRef",
+              ref: p,
+              class: "l-dropdown__popper",
+              "data-theme": c(M),
+              style: ve(de.value)
+            }, [
+              R("div", {
+                class: H(P.value ? "l-dropdown__content" : te.value),
+                role: P.value ? void 0 : "menu"
+              }, [
+                e.$slots.default ? w(e.$slots, "default", { key: 0 }) : oe.value ? (u(!0), h(D, { key: 1 }, ge(e.items, (s) => (u(), $(F, {
+                  key: String(s.command ?? s.label),
+                  command: s.command,
+                  disabled: s.disabled,
+                  danger: s.danger,
+                  divided: s.divided
+                }, {
+                  default: y(() => [
+                    e.renderItem ? (u(), $(c(G), {
+                      key: 0,
+                      content: le(s)
+                    }, null, 8, ["content"])) : (u(), h(D, { key: 1 }, [
+                      he(we(s.label), 1)
+                    ], 64))
+                  ]),
+                  _: 2
+                }, 1032, ["command", "disabled", "danger", "divided"]))), 128)) : T("", !0)
+              ], 10, xe)
+            ], 12, Oe)) : T("", !0)
+          ]),
+          _: 3
+        })
+      ]))
+    ], 64));
+  }
+}), U = Ke, O = F;
+U.install = (m) => {
+  m.component("LDropdown", U), m.component("LDropdownItem", O);
+};
+O.install = (m) => {
+  m.component("LDropdownItem", O);
+};
+export {
+  q as DropdownKey,
+  U as LDropdown,
+  O as LDropdownItem,
+  U as default,
+  ke as dropdownEmits,
+  be as dropdownItemProps,
+  Ce as dropdownProps
+};

package/dist/dropdown/types.d.ts

@@ -0,0 +1,87 @@
+import { ExtractPropTypes, InjectionKey, PropType, Ref, VNodeChild } from 'vue';
+import { Placement } from '../../../headless/src/index.ts';
+export type DropdownCommand = string | number | symbol;
+export interface DropdownItemInput {
+    command?: DropdownCommand;
+    label?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    divided?: boolean;
+}
+export declare const dropdownProps: {
+    readonly trigger: {
+        readonly type: PropType<"click" | "contextmenu">;
+        readonly default: "click";
+    };
+    readonly placement: {
+        readonly type: PropType<Placement>;
+        readonly default: "bottom-start";
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly hideOnClick: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly width: {
+        readonly type: PropType<string | number | undefined>;
+        readonly default: undefined;
+    };
+    readonly size: {
+        readonly type: PropType<"sm" | "md" | "lg">;
+        readonly default: "md";
+    };
+    readonly offset: {
+        readonly type: NumberConstructor;
+        readonly default: 8;
+    };
+    readonly items: {
+        readonly type: PropType<DropdownItemInput[]>;
+        readonly default: () => never[];
+    };
+    readonly renderItem: PropType<(item: DropdownItemInput) => VNodeChild>;
+};
+export declare const dropdownEmits: {
+    readonly command: (_command: DropdownCommand | undefined) => boolean;
+    readonly 'visible-change': (_visible: boolean) => boolean;
+};
+export type DropdownProps = ExtractPropTypes<typeof dropdownProps>;
+export type DropdownEmits = typeof dropdownEmits;
+export declare const dropdownItemProps: {
+    readonly command: {
+        readonly type: PropType<DropdownCommand | undefined>;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly danger: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly divided: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+};
+export type DropdownItemProps = ExtractPropTypes<typeof dropdownItemProps>;
+export interface DropdownRegistryItem {
+    id: symbol;
+    command: DropdownCommand | undefined;
+    disabled: boolean;
+}
+export interface DropdownContext {
+    highlightedIndex: Ref<number>;
+    size: Ref<DropdownProps['size']>;
+    registerItem: (item: DropdownRegistryItem) => void;
+    unregisterItem: (id: symbol) => void;
+    updateItem: (id: symbol, patch: Partial<Omit<DropdownRegistryItem, 'id'>>) => void;
+    getItemIndex: (id: symbol) => number;
+    getItemId: (index: number) => string;
+    setHighlightedIndex: (index: number) => void;
+    selectItem: (command: DropdownCommand | undefined, disabled: boolean) => void;
+}
+export declare const DropdownKey: InjectionKey<DropdownContext>;

package/dist/empty/Empty.vue.d.ts

@@ -0,0 +1,47 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly title: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly description: {
+        readonly type: StringConstructor;
+        readonly default: "No data";
+    };
+    readonly size: {
+        readonly type: import('vue').PropType<"sm" | "md" | "lg">;
+        readonly default: "md";
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly title: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly description: {
+        readonly type: StringConstructor;
+        readonly default: "No data";
+    };
+    readonly size: {
+        readonly type: import('vue').PropType<"sm" | "md" | "lg">;
+        readonly default: "md";
+    };
+}>> & Readonly<{}>, {
+    readonly size: "sm" | "md" | "lg";
+    readonly title: string;
+    readonly description: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/empty/index.d.ts

@@ -0,0 +1,70 @@
+export declare const LEmpty: import('../utils/install').SFCWithInstall<{
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        readonly title: {
+            readonly type: StringConstructor;
+            readonly default: "";
+        };
+        readonly description: {
+            readonly type: StringConstructor;
+            readonly default: "No data";
+        };
+        readonly size: {
+            readonly type: import('vue').PropType<"sm" | "md" | "lg">;
+            readonly default: "md";
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        readonly size: "sm" | "md" | "lg";
+        readonly title: string;
+        readonly description: string;
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        readonly title: {
+            readonly type: StringConstructor;
+            readonly default: "";
+        };
+        readonly description: {
+            readonly type: StringConstructor;
+            readonly default: "No data";
+        };
+        readonly size: {
+            readonly type: import('vue').PropType<"sm" | "md" | "lg">;
+            readonly default: "md";
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, {
+        readonly size: "sm" | "md" | "lg";
+        readonly title: string;
+        readonly description: string;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    readonly title: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly description: {
+        readonly type: StringConstructor;
+        readonly default: "No data";
+    };
+    readonly size: {
+        readonly type: import('vue').PropType<"sm" | "md" | "lg">;
+        readonly default: "md";
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    readonly size: "sm" | "md" | "lg";
+    readonly title: string;
+    readonly description: string;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+})>;
+export * from './types';
+export default LEmpty;

package/dist/empty/index.js

@@ -0,0 +1,2 @@
+require('../style/empty.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("../chunks/install-gnn2dOg9.js"),e=require("vue"),s={title:{type:String,default:""},description:{type:String,default:"No data"},size:{type:String,default:"md"}},n={key:0,class:"l-empty__title"},p={class:"l-empty__description"},m={key:1,class:"l-empty__actions"},d=e.defineComponent({name:"Empty",__name:"Empty",props:s,setup(o){const r=o,c=e.computed(()=>["l-empty",`l-empty--${r.size}`]);return(t,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(c.value),role:"status","aria-live":"polite"},[l[0]||(l[0]=e.createStaticVNode('<div class="l-empty__visual" aria-hidden="true"><svg viewBox="0 0 120 120" class="l-empty__illustration"><rect x="18" y="24" width="84" height="64" rx="12" class="l-empty__frame"></rect><rect x="30" y="40" width="60" height="8" rx="4" class="l-empty__line"></rect><rect x="30" y="56" width="48" height="8" rx="4" class="l-empty__line l-empty__line--soft"></rect><circle cx="92" cy="82" r="10" class="l-empty__accent"></circle></svg></div>',1)),t.title?(e.openBlock(),e.createElementBlock("div",n,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.createElementVNode("div",p,e.toDisplayString(t.description),1),t.$slots.default?(e.openBlock(),e.createElementBlock("div",m,[e.renderSlot(t.$slots,"default")])):e.createCommentVNode("",!0)],2))}}),i=a.withInstall(d);exports.LEmpty=i;exports.default=i;exports.emptyProps=s;

package/dist/empty/index.mjs

@@ -0,0 +1,50 @@
+import '../style/empty.css';
+import { w as n } from "../chunks/install-DJNxamQ0.mjs";
+import { defineComponent as p, computed as m, openBlock as e, createElementBlock as s, normalizeClass as d, createStaticVNode as y, toDisplayString as i, createCommentVNode as r, createElementVNode as _, renderSlot as u } from "vue";
+const h = {
+  title: {
+    type: String,
+    default: ""
+  },
+  description: {
+    type: String,
+    default: "No data"
+  },
+  size: {
+    type: String,
+    default: "md"
+  }
+}, f = {
+  key: 0,
+  class: "l-empty__title"
+}, v = { class: "l-empty__description" }, g = {
+  key: 1,
+  class: "l-empty__actions"
+}, w = /* @__PURE__ */ p({
+  name: "Empty",
+  __name: "Empty",
+  props: h,
+  setup(o) {
+    const a = o, c = m(() => [
+      "l-empty",
+      `l-empty--${a.size}`
+    ]);
+    return (t, l) => (e(), s("div", {
+      class: d(c.value),
+      role: "status",
+      "aria-live": "polite"
+    }, [
+      l[0] || (l[0] = y('<div class="l-empty__visual" aria-hidden="true"><svg viewBox="0 0 120 120" class="l-empty__illustration"><rect x="18" y="24" width="84" height="64" rx="12" class="l-empty__frame"></rect><rect x="30" y="40" width="60" height="8" rx="4" class="l-empty__line"></rect><rect x="30" y="56" width="48" height="8" rx="4" class="l-empty__line l-empty__line--soft"></rect><circle cx="92" cy="82" r="10" class="l-empty__accent"></circle></svg></div>', 1)),
+      t.title ? (e(), s("div", f, i(t.title), 1)) : r("", !0),
+      _("div", v, i(t.description), 1),
+      t.$slots.default ? (e(), s("div", g, [
+        u(t.$slots, "default")
+      ])) : r("", !0)
+    ], 2));
+  }
+}), E = n(w);
+export {
+  E as LEmpty,
+  E as default,
+  h as emptyProps
+};

package/dist/empty/types.d.ts

@@ -0,0 +1,16 @@
+import { ExtractPropTypes, PropType } from 'vue';
+export declare const emptyProps: {
+    readonly title: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly description: {
+        readonly type: StringConstructor;
+        readonly default: "No data";
+    };
+    readonly size: {
+        readonly type: PropType<"sm" | "md" | "lg">;
+        readonly default: "md";
+    };
+};
+export type EmptyProps = ExtractPropTypes<typeof emptyProps>;