@routa/ui-vue 0.1.0

package/dist/switch/index.mjs

@@ -0,0 +1,285 @@
+import '../style/switch.css';
+import { defineComponent as z, ref as I, computed as y, openBlock as m, createElementBlock as b, mergeProps as K, unref as s, createElementVNode as k, withModifiers as M, toDisplayString as x, createCommentVNode as _, createVNode as $, Transition as P, withCtx as H, renderSlot as j } from "vue";
+import "../chunks/manager-BUdQK4AD.mjs";
+import { s as v, e as C } from "../chunks/index-B0yEC3RG.mjs";
+import { u as q } from "../chunks/use-signals-CE1T2jXK.mjs";
+import { u as A } from "../chunks/use-form-item-CqDbWCiU.mjs";
+import { u as G } from "../chunks/use-id-D3casveg.mjs";
+function J(e = {}) {
+  const i = v(typeof e.checked == "function" ? e.checked() : e.checked ?? !1), l = v(typeof e.disabled == "function" ? e.disabled() : e.disabled ?? !1), c = v(typeof e.loading == "function" ? e.loading() : e.loading ?? !1), r = v(typeof e.name == "function" ? e.name() : e.name ?? ""), f = v(!1), o = v(!1);
+  typeof e.checked == "function" && C(() => {
+    i.value = e.checked();
+  }), typeof e.disabled == "function" && C(() => {
+    l.value = e.disabled();
+  }), typeof e.loading == "function" && C(() => {
+    c.value = e.loading();
+  }), typeof e.name == "function" && C(() => {
+    r.value = e.name();
+  });
+  const u = (a) => {
+    var h;
+    if (l.value || c.value) return;
+    const n = a !== void 0 ? a : !i.value;
+    i.value = n, (h = e.onChange) == null || h.call(e, n);
+  };
+  return {
+    state: {
+      get checked() {
+        return i.value;
+      },
+      set checked(a) {
+        i.value = a;
+      },
+      get disabled() {
+        return l.value;
+      },
+      set disabled(a) {
+        l.value = a;
+      },
+      get loading() {
+        return c.value;
+      },
+      set loading(a) {
+        c.value = a;
+      },
+      get focused() {
+        return f.value;
+      },
+      get hovered() {
+        return o.value;
+      },
+      get name() {
+        return r.value;
+      },
+      set name(a) {
+        r.value = a;
+      }
+    },
+    props: {
+      role: "switch",
+      get "aria-checked"() {
+        return i.value;
+      },
+      get "aria-disabled"() {
+        return l.value || c.value;
+      },
+      get tabIndex() {
+        return l.value || c.value ? -1 : 0;
+      },
+      onClick: () => u(),
+      onKeyDown: (a) => {
+        l.value || c.value || (a.key === " " || a.key === "Enter") && (a.preventDefault(), u());
+      },
+      onFocus: (a) => {
+        var n;
+        f.value = !0, (n = e.onFocus) == null || n.call(e, a);
+      },
+      onBlur: (a) => {
+        var n;
+        f.value = !1, (n = e.onBlur) == null || n.call(e, a);
+      },
+      onMouseEnter: () => {
+        o.value = !0;
+      },
+      onMouseLeave: () => {
+        o.value = !1;
+      }
+    },
+    actions: {
+      toggle: u
+    }
+  };
+}
+const O = {
+  /**
+   * 绑定值
+   */
+  modelValue: {
+    type: [Boolean, String, Number],
+    default: !1
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * 是否处于加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * 组件尺寸
+   */
+  size: {
+    type: String
+  },
+  /**
+   * 选中时的值
+   */
+  activeValue: {
+    type: [Boolean, String, Number],
+    default: !0
+  },
+  /**
+   * 未选中时的值
+   */
+  inactiveValue: {
+    type: [Boolean, String, Number],
+    default: !1
+  },
+  /**
+   * 选中时的文字提示
+   */
+  activeText: String,
+  /**
+   * 未选中时的文字提示
+   */
+  inactiveText: String,
+  /**
+   * 选中时的背景色
+   */
+  activeColor: String,
+  /**
+   * 未选中时的背景色
+   */
+  inactiveColor: String,
+  /**
+   * 原生 name 属性
+   */
+  name: String,
+  /**
+   * 切换前的钩子，返回 false 或返回 Promise 且被 reject 则停止切换
+   */
+  beforeChange: {
+    type: Function
+  },
+  /**
+   * 唯一 ID
+   */
+  id: String
+}, Q = {
+  "update:modelValue": (e) => !0,
+  change: (e) => !0
+}, R = ["id", "name", "checked", "disabled"], U = { class: "l-switch__track" }, W = {
+  key: 0,
+  class: "l-switch__label l-switch__label--inner"
+}, X = { class: "l-switch__thumb" }, Y = {
+  key: 0,
+  class: "l-switch__loading-icon",
+  viewBox: "0 0 24 24"
+}, Z = {
+  key: 1,
+  class: "l-switch__label l-switch__label--inner"
+}, ee = {
+  key: 0,
+  class: "l-switch__label--outer"
+}, ae = /* @__PURE__ */ z({
+  name: "Switch",
+  __name: "Switch",
+  props: O,
+  emits: Q,
+  setup(e, { emit: i }) {
+    const l = e, c = i, { formItem: r, size: f, disabled: o, inputId: u } = A(l), p = G("switch"), a = (u == null ? void 0 : u.value) || p, n = I(!1), h = y(() => l.loading || n.value), V = y(() => l.modelValue === l.activeValue), w = J({
+      checked: () => V.value,
+      disabled: () => o.value,
+      loading: () => h.value,
+      name: () => l.name || "",
+      onChange: async (t) => {
+        const d = t ? l.activeValue : l.inactiveValue;
+        if (l.beforeChange) {
+          n.value = !0;
+          try {
+            if (await l.beforeChange() === !1) {
+              w.state.checked = !t;
+              return;
+            }
+          } catch {
+            w.state.checked = !t;
+            return;
+          } finally {
+            n.value = !1;
+          }
+        }
+        c("update:modelValue", d), c("change", d), r == null || r.validate("change").catch(() => {
+        });
+      }
+    }), {
+      checked: g,
+      disabled: B,
+      loading: S,
+      focused: D,
+      hovered: N
+    } = q(w, {
+      checked: () => V.value,
+      disabled: () => o.value,
+      loading: () => h.value
+    }), L = y(() => ({
+      "--l-switch-bg-color": g.value ? l.activeColor || "var(--l-color-primary, #3b82f6)" : l.inactiveColor || "var(--l-color-neutral-border, #d1d5db)"
+    })), E = y(() => [
+      "l-switch",
+      `l-switch--${f.value}`,
+      {
+        "is-checked": g.value,
+        "is-disabled": B.value,
+        "is-loading": S.value,
+        "is-focused": D.value,
+        "is-hovered": N.value
+      }
+    ]);
+    return (t, d) => (m(), b("div", K({
+      class: E.value,
+      style: L.value
+    }, s(w).props), [
+      k("input", {
+        id: s(a),
+        type: "checkbox",
+        class: "l-switch__input",
+        name: t.name,
+        checked: s(g),
+        disabled: s(B) || s(S),
+        tabindex: "-1",
+        onClick: d[0] || (d[0] = M(() => {
+        }, ["stop"]))
+      }, null, 8, R),
+      k("div", U, [
+        t.activeText && s(g) ? (m(), b("span", W, x(t.activeText), 1)) : _("", !0),
+        k("div", X, [
+          $(P, { name: "l-switch-fade" }, {
+            default: H(() => [
+              s(S) ? (m(), b("svg", Y, [...d[1] || (d[1] = [
+                k("circle", {
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "4",
+                  "stroke-dasharray": "31.415, 31.415"
+                }, null, -1)
+              ])])) : _("", !0)
+            ]),
+            _: 1
+          })
+        ]),
+        t.inactiveText && !s(g) ? (m(), b("span", Z, x(t.inactiveText), 1)) : _("", !0)
+      ]),
+      !t.activeText && !t.inactiveText && t.$slots.default ? (m(), b("span", ee, [
+        j(t.$slots, "default")
+      ])) : _("", !0)
+    ], 16));
+  }
+}), T = ae;
+T.install = (e) => {
+  e.component("LSwitch", T);
+};
+export {
+  T as LSwitch,
+  T as default,
+  Q as switchEmits,
+  O as switchProps
+};

package/dist/switch/types.d.ts

@@ -0,0 +1,81 @@
+import { ExtractPropTypes, PropType } from 'vue';
+export type SwitchSize = 'sm' | 'md' | 'lg';
+export declare const switchProps: {
+    /**
+     * 绑定值
+     */
+    readonly modelValue: {
+        readonly type: PropType<boolean | string | number>;
+        readonly default: false;
+    };
+    /**
+     * 是否禁用
+     */
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /**
+     * 是否处于加载状态
+     */
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /**
+     * 组件尺寸
+     */
+    readonly size: {
+        readonly type: PropType<SwitchSize>;
+    };
+    /**
+     * 选中时的值
+     */
+    readonly activeValue: {
+        readonly type: PropType<boolean | string | number>;
+        readonly default: true;
+    };
+    /**
+     * 未选中时的值
+     */
+    readonly inactiveValue: {
+        readonly type: PropType<boolean | string | number>;
+        readonly default: false;
+    };
+    /**
+     * 选中时的文字提示
+     */
+    readonly activeText: StringConstructor;
+    /**
+     * 未选中时的文字提示
+     */
+    readonly inactiveText: StringConstructor;
+    /**
+     * 选中时的背景色
+     */
+    readonly activeColor: StringConstructor;
+    /**
+     * 未选中时的背景色
+     */
+    readonly inactiveColor: StringConstructor;
+    /**
+     * 原生 name 属性
+     */
+    readonly name: StringConstructor;
+    /**
+     * 切换前的钩子，返回 false 或返回 Promise 且被 reject 则停止切换
+     */
+    readonly beforeChange: {
+        readonly type: PropType<() => Promise<boolean> | boolean>;
+    };
+    /**
+     * 唯一 ID
+     */
+    readonly id: StringConstructor;
+};
+export type SwitchProps = ExtractPropTypes<typeof switchProps>;
+export declare const switchEmits: {
+    'update:modelValue': (_val: boolean | string | number) => boolean;
+    change: (_val: boolean | string | number) => boolean;
+};
+export type SwitchEmits = typeof switchEmits;

package/dist/table/Table.vue.d.ts

@@ -0,0 +1,102 @@
+import { TableColumn } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Partial<Record<`header-${string}`, (_: {
+        column: TableColumn;
+        columnIndex: number;
+    }) => any>> & Partial<Record<`cell-${string}`, (_: {
+        row: Record<string, unknown>;
+        column: TableColumn;
+        value: unknown;
+        rowIndex: number;
+        columnIndex: number;
+    }) => any>> & {
+        empty?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly columns: {
+        readonly type: import('vue').PropType<TableColumn[]>;
+        readonly default: () => never[];
+    };
+    readonly data: {
+        readonly type: import('vue').PropType<Record<string, unknown>[]>;
+        readonly default: () => never[];
+    };
+    readonly rowKey: {
+        readonly type: import('vue').PropType<import('./types').TableRowKey | undefined>;
+        readonly default: undefined;
+    };
+    readonly size: {
+        readonly type: import('vue').PropType<import('./types').TableSize>;
+        readonly default: "md";
+    };
+    readonly stripe: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly border: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly height: {
+        readonly type: import('vue').PropType<string | number | undefined>;
+        readonly default: undefined;
+    };
+    readonly emptyText: {
+        readonly type: StringConstructor;
+        readonly default: "暂无数据";
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly columns: {
+        readonly type: import('vue').PropType<TableColumn[]>;
+        readonly default: () => never[];
+    };
+    readonly data: {
+        readonly type: import('vue').PropType<Record<string, unknown>[]>;
+        readonly default: () => never[];
+    };
+    readonly rowKey: {
+        readonly type: import('vue').PropType<import('./types').TableRowKey | undefined>;
+        readonly default: undefined;
+    };
+    readonly size: {
+        readonly type: import('vue').PropType<import('./types').TableSize>;
+        readonly default: "md";
+    };
+    readonly stripe: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly border: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly height: {
+        readonly type: import('vue').PropType<string | number | undefined>;
+        readonly default: undefined;
+    };
+    readonly emptyText: {
+        readonly type: StringConstructor;
+        readonly default: "暂无数据";
+    };
+}>> & Readonly<{}>, {
+    readonly data: Record<string, unknown>[];
+    readonly size: import('./types').TableSize;
+    readonly border: boolean;
+    readonly height: string | number | undefined;
+    readonly columns: TableColumn[];
+    readonly emptyText: string;
+    readonly rowKey: import('./types').TableRowKey<Record<string, unknown>> | undefined;
+    readonly stripe: boolean;
+}, {}, {}, {}, 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/table/index.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from 'vue';
+import { default as Table } from './Table.vue';
+export declare const LTable: typeof Table & Plugin;
+export * from './types';
+export default LTable;

package/dist/table/index.js

@@ -0,0 +1,2 @@
+require('../style/table.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../chunks/manager-C0AUxQ1I.js");const m=require("../chunks/index-DWAWrVaT.js"),N=require("../chunks/use-signals-Bz1smiXh.js");function P(p){const l=m.signal(p.data),n=m.signal(p.columns),c=m.signal(0),u=m.signal(0);return{state:{get data(){return l.value},set data(o){l.value=o},get columns(){return n.value},set columns(o){n.value=o},get focusedRowIndex(){return c.value},set focusedRowIndex(o){c.value=o},get focusedColIndex(){return u.value},set focusedColIndex(o){u.value=o}},actions:{moveFocus:o=>{const i=l.value.length,g=n.value.length;if(!(i===0||g===0))switch(o){case"up":c.value=Math.max(0,c.value-1);break;case"down":c.value=Math.min(i-1,c.value+1);break;case"left":u.value=Math.max(0,u.value-1);break;case"right":u.value=Math.min(g-1,u.value+1);break}},setFocus:(o,i)=>{c.value=o,u.value=i}},props:{role:"grid",get"aria-rowcount"(){return l.value.length},get"aria-colcount"(){return n.value.length}},getRowProps:o=>({role:"row","aria-rowindex":o+1}),getCellProps:(o,i)=>({role:"gridcell","aria-colindex":i+1,tabindex:c.value===o&&u.value===i?0:-1,onFocus:()=>{c.value=o,u.value=i}})}}const _={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:"暂无数据"}},T={class:"l-table__thead"},$={class:"l-table__tr",role:"row"},K={key:0,class:"l-table__tbody"},V={key:1,class:"l-table__tbody"},x={class:"l-table__tr l-table__tr--empty"},F=["colspan"],R=e.defineComponent({name:"Table",__name:"Table",props:_,setup(p){const l=p,n=P({data:l.data,columns:l.columns}),{data:c,columns:u,focusedRowIndex:b,focusedColIndex:o}=N.useController(n,{data:()=>l.data,columns:()=>l.columns}),i=t=>{const a={ArrowUp:"up",ArrowDown:"down",ArrowLeft:"left",ArrowRight:"right"}[t.key];if(a){t.preventDefault(),n.actions.moveFocus(a);const s=document.querySelector(`[aria-rowindex="${n.state.focusedRowIndex+1}"] [aria-colindex="${n.state.focusedColIndex+1}"]`);s==null||s.focus()}},g=e.computed(()=>["l-table",`l-table--${l.size}`,{"is-bordered":l.border,"is-striped":l.stripe,"is-empty":l.data.length===0}]),k=e.computed(()=>({...n.props,"aria-rowcount":c.value.length,"aria-colcount":u.value.length})),B=e.computed(()=>{if(l.height)return{maxHeight:typeof l.height=="number"?`${l.height}px`:l.height}}),f=(t,r)=>{const a=r.dataIndex??r.dataKey;if(a)return t[a]},C=(t,r)=>typeof l.rowKey=="function"?l.rowKey(t,r):typeof l.rowKey=="string"&&l.rowKey in t?t[l.rowKey]:r,h=t=>`is-align-${t??"left"}`,S=t=>{if(t)return{width:typeof t=="number"?`${t}px`:t}},w=(t,r)=>({...n.getCellProps(t,r),tabindex:b.value===t&&o.value===r?0:-1}),E=(t,r,a,s)=>{var y;const d=f(t,r);return(y=r.render)==null?void 0:y.call(r,{row:t,column:r,value:d,rowIndex:a,columnIndex:s})};return(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(g.value),onKeydown:i},[e.createElementVNode("div",{class:"l-table__body",style:e.normalizeStyle(B.value)},[e.createElementVNode("table",e.mergeProps({class:"l-table__table"},k.value),[e.createElementVNode("thead",T,[e.createElementVNode("tr",$,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,(a,s)=>(e.openBlock(),e.createElementBlock("th",{key:a.key,class:e.normalizeClass(["l-table__th",[h(a.align),a.headerClassName]]),style:e.normalizeStyle(S(a.width)),scope:"col",role:"columnheader"},[e.renderSlot(t.$slots,`header-${a.key}`,{column:a,columnIndex:s},()=>[e.createTextVNode(e.toDisplayString(a.title),1)])],6))),128))])]),t.data.length?(e.openBlock(),e.createElementBlock("tbody",K,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.data,(a,s)=>(e.openBlock(),e.createElementBlock("tr",e.mergeProps({key:C(a,s),class:"l-table__tr"},{ref_for:!0},e.unref(n).getRowProps(s)),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,(d,y)=>(e.openBlock(),e.createElementBlock("td",e.mergeProps({key:d.key,class:["l-table__td",[h(d.align),d.className]]},{ref_for:!0},w(s,y)),[d.render?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(E(a,d,s,y)),{key:0})):e.renderSlot(t.$slots,`cell-${d.key}`,{key:1,row:a,column:d,value:f(a,d),rowIndex:s,columnIndex:y},()=>[e.createTextVNode(e.toDisplayString(f(a,d)??"-"),1)])],16))),128))],16))),128))])):(e.openBlock(),e.createElementBlock("tbody",V,[e.createElementVNode("tr",x,[e.createElementVNode("td",{class:"l-table__td l-table__empty",colspan:Math.max(t.columns.length,1)},[e.renderSlot(t.$slots,"empty",{},()=>[e.createTextVNode(e.toDisplayString(t.emptyText),1)])],8,F)])]))],16)],4)],34))}}),v=R;v.install=p=>{p.component("LTable",v)};exports.LTable=v;exports.default=v;exports.tableProps=_;