@routa/ui-vue 0.1.0

package/dist/table/index.mjs

@@ -0,0 +1,263 @@
+import '../style/table.css';
+import { defineComponent as z, computed as _, openBlock as i, createElementBlock as p, normalizeClass as A, createElementVNode as g, normalizeStyle as P, mergeProps as m, Fragment as C, renderList as k, renderSlot as w, createTextVNode as $, toDisplayString as K, unref as L, createBlock as V, resolveDynamicComponent as E } from "vue";
+import "../chunks/manager-BUdQK4AD.mjs";
+import { s as h } from "../chunks/index-B0yEC3RG.mjs";
+import { u as q } from "../chunks/use-signals-CE1T2jXK.mjs";
+function H(y) {
+  const t = h(y.data), s = h(y.columns), n = h(0), u = h(0);
+  return {
+    state: {
+      get data() {
+        return t.value;
+      },
+      set data(l) {
+        t.value = l;
+      },
+      get columns() {
+        return s.value;
+      },
+      set columns(l) {
+        s.value = l;
+      },
+      get focusedRowIndex() {
+        return n.value;
+      },
+      set focusedRowIndex(l) {
+        n.value = l;
+      },
+      get focusedColIndex() {
+        return u.value;
+      },
+      set focusedColIndex(l) {
+        u.value = l;
+      }
+    },
+    actions: {
+      moveFocus: (l) => {
+        const c = t.value.length, v = s.value.length;
+        if (!(c === 0 || v === 0))
+          switch (l) {
+            case "up":
+              n.value = Math.max(0, n.value - 1);
+              break;
+            case "down":
+              n.value = Math.min(c - 1, n.value + 1);
+              break;
+            case "left":
+              u.value = Math.max(0, u.value - 1);
+              break;
+            case "right":
+              u.value = Math.min(v - 1, u.value + 1);
+              break;
+          }
+      },
+      setFocus: (l, c) => {
+        n.value = l, u.value = c;
+      }
+    },
+    props: {
+      role: "grid",
+      get "aria-rowcount"() {
+        return t.value.length;
+      },
+      get "aria-colcount"() {
+        return s.value.length;
+      }
+    },
+    getRowProps: (l) => ({
+      role: "row",
+      "aria-rowindex": l + 1
+    }),
+    getCellProps: (l, c) => ({
+      role: "gridcell",
+      "aria-colindex": c + 1,
+      tabindex: n.value === l && u.value === c ? 0 : -1,
+      onFocus: () => {
+        n.value = l, u.value = c;
+      }
+    })
+  };
+}
+const U = {
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  data: {
+    type: Array,
+    default: () => []
+  },
+  rowKey: {
+    type: [String, Function],
+    default: void 0
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  stripe: {
+    type: Boolean,
+    default: !1
+  },
+  border: {
+    type: Boolean,
+    default: !1
+  },
+  height: {
+    type: [String, Number],
+    default: void 0
+  },
+  emptyText: {
+    type: String,
+    default: "暂无数据"
+  }
+}, W = { class: "l-table__thead" }, j = {
+  class: "l-table__tr",
+  role: "row"
+}, G = {
+  key: 0,
+  class: "l-table__tbody"
+}, I = {
+  key: 1,
+  class: "l-table__tbody"
+}, J = { class: "l-table__tr l-table__tr--empty" }, O = ["colspan"], Q = /* @__PURE__ */ z({
+  name: "Table",
+  __name: "Table",
+  props: U,
+  setup(y) {
+    const t = y, s = H({
+      data: t.data,
+      columns: t.columns
+    }), {
+      data: n,
+      columns: u,
+      focusedRowIndex: S,
+      focusedColIndex: l
+    } = q(s, {
+      data: () => t.data,
+      columns: () => t.columns
+    }), c = (e) => {
+      const a = {
+        ArrowUp: "up",
+        ArrowDown: "down",
+        ArrowLeft: "left",
+        ArrowRight: "right"
+      }[e.key];
+      if (a) {
+        e.preventDefault(), s.actions.moveFocus(a);
+        const r = document.querySelector(`[aria-rowindex="${s.state.focusedRowIndex + 1}"] [aria-colindex="${s.state.focusedColIndex + 1}"]`);
+        r == null || r.focus();
+      }
+    }, v = _(() => [
+      "l-table",
+      `l-table--${t.size}`,
+      {
+        "is-bordered": t.border,
+        "is-striped": t.stripe,
+        "is-empty": t.data.length === 0
+      }
+    ]), x = _(() => ({
+      ...s.props,
+      "aria-rowcount": n.value.length,
+      "aria-colcount": u.value.length
+    })), F = _(() => {
+      if (t.height)
+        return {
+          maxHeight: typeof t.height == "number" ? `${t.height}px` : t.height
+        };
+    }), b = (e, o) => {
+      const a = o.dataIndex ?? o.dataKey;
+      if (a)
+        return e[a];
+    }, D = (e, o) => typeof t.rowKey == "function" ? t.rowKey(e, o) : typeof t.rowKey == "string" && t.rowKey in e ? e[t.rowKey] : o, R = (e) => `is-align-${e ?? "left"}`, B = (e) => {
+      if (e)
+        return {
+          width: typeof e == "number" ? `${e}px` : e
+        };
+    }, M = (e, o) => ({
+      ...s.getCellProps(e, o),
+      tabindex: S.value === e && l.value === o ? 0 : -1
+    }), N = (e, o, a, r) => {
+      var f;
+      const d = b(e, o);
+      return (f = o.render) == null ? void 0 : f.call(o, {
+        row: e,
+        column: o,
+        value: d,
+        rowIndex: a,
+        columnIndex: r
+      });
+    };
+    return (e, o) => (i(), p("div", {
+      class: A(v.value),
+      onKeydown: c
+    }, [
+      g("div", {
+        class: "l-table__body",
+        style: P(F.value)
+      }, [
+        g("table", m({ class: "l-table__table" }, x.value), [
+          g("thead", W, [
+            g("tr", j, [
+              (i(!0), p(C, null, k(e.columns, (a, r) => (i(), p("th", {
+                key: a.key,
+                class: A(["l-table__th", [R(a.align), a.headerClassName]]),
+                style: P(B(a.width)),
+                scope: "col",
+                role: "columnheader"
+              }, [
+                w(e.$slots, `header-${a.key}`, {
+                  column: a,
+                  columnIndex: r
+                }, () => [
+                  $(K(a.title), 1)
+                ])
+              ], 6))), 128))
+            ])
+          ]),
+          e.data.length ? (i(), p("tbody", G, [
+            (i(!0), p(C, null, k(e.data, (a, r) => (i(), p("tr", m({
+              key: D(a, r),
+              class: "l-table__tr"
+            }, { ref_for: !0 }, L(s).getRowProps(r)), [
+              (i(!0), p(C, null, k(e.columns, (d, f) => (i(), p("td", m({
+                key: d.key,
+                class: ["l-table__td", [R(d.align), d.className]]
+              }, { ref_for: !0 }, M(r, f)), [
+                d.render ? (i(), V(E(N(a, d, r, f)), { key: 0 })) : w(e.$slots, `cell-${d.key}`, {
+                  key: 1,
+                  row: a,
+                  column: d,
+                  value: b(a, d),
+                  rowIndex: r,
+                  columnIndex: f
+                }, () => [
+                  $(K(b(a, d) ?? "-"), 1)
+                ])
+              ], 16))), 128))
+            ], 16))), 128))
+          ])) : (i(), p("tbody", I, [
+            g("tr", J, [
+              g("td", {
+                class: "l-table__td l-table__empty",
+                colspan: Math.max(e.columns.length, 1)
+              }, [
+                w(e.$slots, "empty", {}, () => [
+                  $(K(e.emptyText), 1)
+                ])
+              ], 8, O)
+            ])
+          ]))
+        ], 16)
+      ], 4)
+    ], 34));
+  }
+}), T = Q;
+T.install = (y) => {
+  y.component("LTable", T);
+};
+export {
+  T as LTable,
+  T as default,
+  U as tableProps
+};

package/dist/table/types.d.ts

@@ -0,0 +1,64 @@
+import { ExtractPropTypes, PropType, VNodeChild } from 'vue';
+export type TableAlign = 'left' | 'center' | 'right';
+export type TableSize = 'sm' | 'md' | 'lg';
+export interface TableColumn {
+    key: string;
+    title: string;
+    dataIndex?: string;
+    dataKey?: string;
+    align?: TableAlign;
+    width?: string | number;
+    className?: string;
+    headerClassName?: string;
+    render?: TableCellRenderer;
+}
+export interface TableCellSlotProps<T = Record<string, unknown>> {
+    row: T;
+    column: TableColumn;
+    value: unknown;
+    rowIndex: number;
+    columnIndex: number;
+}
+export interface TableHeaderSlotProps {
+    column: TableColumn;
+    columnIndex: number;
+}
+export type TableRowKey<T = Record<string, unknown>> = keyof T | string | ((row: T, index: number) => string | number);
+export declare const tableProps: {
+    readonly columns: {
+        readonly type: PropType<TableColumn[]>;
+        readonly default: () => never[];
+    };
+    readonly data: {
+        readonly type: PropType<Record<string, unknown>[]>;
+        readonly default: () => never[];
+    };
+    readonly rowKey: {
+        readonly type: PropType<TableRowKey | undefined>;
+        readonly default: undefined;
+    };
+    readonly size: {
+        readonly type: PropType<TableSize>;
+        readonly default: "md";
+    };
+    readonly stripe: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly border: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly height: {
+        readonly type: PropType<string | number | undefined>;
+        readonly default: undefined;
+    };
+    readonly emptyText: {
+        readonly type: StringConstructor;
+        readonly default: "暂无数据";
+    };
+};
+export type TableProps = ExtractPropTypes<typeof tableProps>;
+export interface TableCellRenderer<T = Record<string, unknown>> {
+    (slotProps: TableCellSlotProps<T>): VNodeChild;
+}

package/dist/tabs/TabPane.vue.d.ts

@@ -0,0 +1,55 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly name: {
+        readonly type: import('vue').PropType<import('./types').TabName>;
+        readonly required: true;
+    };
+    readonly label: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly lazy: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly name: {
+        readonly type: import('vue').PropType<import('./types').TabName>;
+        readonly required: true;
+    };
+    readonly label: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly lazy: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    readonly label: string;
+    readonly disabled: boolean;
+    readonly lazy: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+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/tabs/Tabs.vue.d.ts

@@ -0,0 +1,92 @@
+import { TabName } from './types';
+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 modelValue: {
+        readonly type: import('vue').PropType<TabName | undefined>;
+        readonly default: undefined;
+    };
+    readonly defaultValue: {
+        readonly type: import('vue').PropType<TabName | undefined>;
+        readonly default: undefined;
+    };
+    readonly type: {
+        readonly type: import('vue').PropType<"line" | "card" | "chrome">;
+        readonly default: "line";
+    };
+    readonly size: {
+        readonly type: import('vue').PropType<"sm" | "md" | "lg">;
+        readonly default: "md";
+    };
+    readonly stretch: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly bg: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly activeBg: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (_name: TabName) => void;
+    "update:modelValue": (_name: TabName) => void;
+    "tab-click": (_name: TabName) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly modelValue: {
+        readonly type: import('vue').PropType<TabName | undefined>;
+        readonly default: undefined;
+    };
+    readonly defaultValue: {
+        readonly type: import('vue').PropType<TabName | undefined>;
+        readonly default: undefined;
+    };
+    readonly type: {
+        readonly type: import('vue').PropType<"line" | "card" | "chrome">;
+        readonly default: "line";
+    };
+    readonly size: {
+        readonly type: import('vue').PropType<"sm" | "md" | "lg">;
+        readonly default: "md";
+    };
+    readonly stretch: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly bg: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly activeBg: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+}>> & Readonly<{
+    onChange?: ((_name: TabName) => any) | undefined;
+    "onUpdate:modelValue"?: ((_name: TabName) => any) | undefined;
+    "onTab-click"?: ((_name: TabName) => any) | undefined;
+}>, {
+    readonly size: "sm" | "md" | "lg";
+    readonly type: "line" | "card" | "chrome";
+    readonly modelValue: TabName | undefined;
+    readonly stretch: boolean;
+    readonly defaultValue: TabName | undefined;
+    readonly bg: string;
+    readonly activeBg: 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/tabs/index.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'vue';
+import { default as Tabs } from './Tabs.vue';
+import { default as TabPane } from './TabPane.vue';
+export declare const LTabs: typeof Tabs & Plugin;
+export declare const LTabPane: typeof TabPane & Plugin;
+export * from './types';
+export default LTabs;

package/dist/tabs/index.js

@@ -0,0 +1,2 @@
+require('../style/tabs.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../chunks/manager-C0AUxQ1I.js");const T=require("../chunks/index-DWAWrVaT.js"),z=require("../chunks/use-signals-Bz1smiXh.js"),E=require("../chunks/use-id-BycaM3-h.js");function N(n={}){const o=T.signal([]),l=T.signal(typeof n.value=="function"?n.value():n.value??n.defaultValue),m=t=>{const a=o.value.filter(s=>!s.disabled);if(a.length)return a.some(s=>s.name===t)?t:a[0].name};if(typeof n.value=="function"){const t=n.value;T.effect(()=>{l.value=m(t())})}const c=()=>{l.value=m(l.value)},y=t=>{o.value.findIndex(s=>s.id===t.id)===-1?o.value=[...o.value,t]:o.value=o.value.map(s=>s.id===t.id?t:s),c()},g=t=>{o.value=o.value.filter(a=>a.id!==t),c()},f=(t,a)=>{o.value=o.value.map(s=>s.id!==t?s:{...s,...a}),c()},p=t=>{var s,d;const a=o.value.find(b=>b.name===t);!a||a.disabled||((s=n.onTabClick)==null||s.call(n,t),l.value!==t&&(l.value=t,(d=n.onChange)==null||d.call(n,t)))};return{state:{get panes(){return o.value},get activeValue(){return l.value},set activeValue(t){l.value=t}},actions:{registerPane:y,unregisterPane:g,updatePane:f,activateTab:p,moveActiveTab:t=>{const a=o.value.filter(b=>!b.disabled);if(!a.length)return;const s=a.findIndex(b=>b.name===l.value);let d=a[0];return t==="first"?d=a[0]:t==="last"?d=a[a.length-1]:s!==-1&&(d=a[(s+(t==="next"?1:-1)+a.length)%a.length]),p(d.name),d.name}}}}const B={modelValue:{type:[String,Number],default:void 0},defaultValue:{type:[String,Number],default:void 0},type:{type:String,default:"line"},size:{type:String,default:"md"},stretch:{type:Boolean,default:!1},bg:{type:String,default:""},activeBg:{type:String,default:""}},S={"update:modelValue":n=>!0,change:n=>!0,"tab-click":n=>!0},w={name:{type:[String,Number],required:!0},label:{type:String,default:""},disabled:{type:Boolean,default:!1},lazy:{type:Boolean,default:!1}},P=Symbol("TabsKey"),A={class:"l-tabs__nav"},L={class:"l-tabs__tablist",role:"tablist","aria-orientation":"horizontal"},I=["id","aria-selected","aria-controls","tabindex","disabled","onClick"],R={class:"l-tabs__nav-label"},$={class:"l-tabs__content"},q=e.defineComponent({name:"Tabs",__name:"Tabs",props:B,emits:S,setup(n,{emit:o}){const l=n,m=o,c=N({value:()=>l.modelValue,defaultValue:l.defaultValue,onChange:i=>{m("update:modelValue",i),m("change",i)},onTabClick:i=>{m("tab-click",i)}}),{panes:y,activeValue:g}=z.useController(c),f=g,p=c.actions.activateTab,v=new Map,t=e.computed(()=>l.size),a=e.computed(()=>l.type),s=e.computed(()=>l.stretch),d=e.computed(()=>["l-tabs",`l-tabs--${l.type}`,`l-tabs--${l.size}`,{"is-stretch":l.stretch}]),b=(i,u)=>{if(u){v.set(i,u);return}v.delete(i)},C=async i=>{var r;await e.nextTick();const u=y.value.find(_=>_.name===i);u&&((r=v.get(u.id))==null||r.focus())},x=async i=>{let u=null;if(i.key==="ArrowRight"||i.key==="ArrowDown"?u="next":i.key==="ArrowLeft"||i.key==="ArrowUp"?u="prev":i.key==="Home"?u="first":i.key==="End"&&(u="last"),u){i.preventDefault();const r=c.actions.moveActiveTab(u);r!==void 0&&await C(r)}};return e.provide(P,{activeName:f,size:t,type:a,stretch:s,registerPane:c.actions.registerPane,unregisterPane:c.actions.unregisterPane,updatePane:c.actions.updatePane}),(i,u)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(d.value),style:e.normalizeStyle({"--l-tabs-bg":l.bg||void 0,"--l-tabs-active-bg":l.activeBg||void 0})},[e.createElementVNode("div",A,[e.createElementVNode("div",L,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(y),r=>{var _;return e.openBlock(),e.createElementBlock("button",{key:r.id,ref_for:!0,ref:V=>b(r.id,V),type:"button",class:e.normalizeClass(["l-tabs__nav-item",{"is-active":e.unref(f)===r.name,"is-disabled":r.disabled}]),role:"tab",id:r.tabId,"aria-selected":e.unref(f)===r.name,"aria-controls":r.panelId,tabindex:e.unref(f)===r.name?0:-1,disabled:r.disabled,onClick:V=>e.unref(p)(r.name),onKeydown:x},[e.createElementVNode("span",R,[(_=r.slots)!=null&&_.label?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.slots.label),{key:0})):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(r.label||String(r.name)),1)],64))])],42,I)}),128))])]),e.createElementVNode("div",$,[e.renderSlot(i.$slots,"default")])],6))}}),D=e.defineComponent({name:"TabPane",__name:"TabPane",props:w,setup(n){const o=n,l=e.inject(P),m=e.useSlots();if(!l)throw new Error("[Routa] LTabPane must be used within LTabs");const c=Symbol("tab-pane"),y=E.useId("tabs-pane"),g=`${y}-tab`,f=`${y}-panel`,p=e.ref(!1),v=e.computed(()=>l.activeName.value===o.name),t=e.computed(()=>!o.lazy||p.value||v.value);return e.watch(v,a=>{a&&(p.value=!0)},{immediate:!0}),e.watch(()=>[o.name,o.label,o.disabled,o.lazy],([a,s,d,b])=>{l.registerPane({id:c,name:a,label:s,disabled:d,lazy:b,tabId:g,panelId:f,slots:m})},{immediate:!0}),e.onBeforeUnmount(()=>{l.unregisterPane(c)}),(a,s)=>t.value?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["l-tab-pane",{"is-active":v.value}]),role:"tabpanel",id:f,"aria-labelledby":g},[e.renderSlot(a.$slots,"default")],2)),[[e.vShow,v.value]]):e.createCommentVNode("",!0)}}),h=q,k=D;h.install=n=>{n.component("LTabs",h),n.component("LTabPane",k)};k.install=n=>{n.component("LTabPane",k)};exports.LTabPane=k;exports.LTabs=h;exports.TabsKey=P;exports.default=h;exports.tabPaneProps=w;exports.tabsEmits=S;exports.tabsProps=B;