@rhino-design/vue 0.2.1 → 0.2.3

package/dist/components/XCheckboxGroup.vue.d.ts

@@ -1,19 +1,42 @@
+import { XCheckboxDirection, XCheckboxOption, XCheckboxValue } from './x-checkbox-context';
 type __VLS_Props = {
-    modelValue?: Array<string | number | boolean>;
-    options: Array<{
-        label: string;
-        value: string | number | boolean;
-        disabled?: boolean;
-    }>;
+    modelValue?: XCheckboxValue[];
+    defaultValue?: XCheckboxValue[];
+    max?: number;
+    options?: Array<string | number | XCheckboxOption>;
+    direction?: XCheckboxDirection;
     disabled?: boolean;
 };
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    change: (value: (string | number | boolean)[]) => any;
-    "update:modelValue": (value: (string | number | boolean)[]) => any;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        label?(_: {
+            data: XCheckboxOption;
+        }): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLSpanElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: XCheckboxValue[], ev: Event) => any;
+    "update:modelValue": (value: XCheckboxValue[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onChange?: ((value: (string | number | boolean)[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: (string | number | boolean)[]) => any) | undefined;
+    onChange?: ((value: XCheckboxValue[], ev: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: XCheckboxValue[]) => any) | undefined;
 }>, {
-    modelValue: Array<string | number | boolean>;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+    disabled: boolean;
+    direction: XCheckboxDirection;
+    options: Array<string | number | XCheckboxOption>;
+    max: number;
+    modelValue: XCheckboxValue[];
+    defaultValue: XCheckboxValue[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+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/components/XCheckboxGroup.vue.js

@@ -0,0 +1,87 @@
+import { defineComponent as f, useSlots as B, ref as S, computed as o, provide as $, watch as A, openBlock as r, createElementBlock as s, normalizeClass as F, Fragment as b, renderList as L, createBlock as v, withCtx as X, renderSlot as p, unref as z, createTextVNode as G, toDisplayString as O } from "vue";
+import { useXFormField as R } from "../composables/form.js";
+import w from "./XCheckbox.vue.js";
+import { xCheckboxGroupKey as D } from "./x-checkbox-context.js";
+const N = /* @__PURE__ */ f({
+  __name: "XCheckboxGroup",
+  props: {
+    modelValue: { default: void 0 },
+    defaultValue: { default: () => [] },
+    max: { default: void 0 },
+    options: { default: void 0 },
+    direction: { default: "horizontal" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(h, { emit: y }) {
+    const l = h, c = y, k = B(), t = R(), n = S([...l.defaultValue]), d = o(() => Array.isArray(l.modelValue) ? l.modelValue : n.value), i = o(() => l.max === void 0 ? !1 : d.value.length >= l.max), x = o(() => !!(l.disabled || t != null && t.disabled.value)), m = o(() => (l.options ?? []).map((e) => typeof e == "string" || typeof e == "number" ? {
+      label: e,
+      value: e
+    } : e));
+    function g(e, u) {
+      n.value = e, c("update:modelValue", e), c("change", e, u), t == null || t.notifyChange(u);
+    }
+    $(D, {
+      name: "XCheckboxGroup",
+      computedValue: d,
+      disabled: x,
+      isMaxed: i,
+      checkboxSlot: k.checkbox,
+      handleChange: g
+    }), A(
+      () => l.modelValue,
+      (e) => {
+        Array.isArray(e) ? n.value = [...e] : n.value = [];
+      }
+    );
+    const V = o(() => [
+      "x-checkbox-group",
+      "x-choice-group",
+      `x-checkbox-group-direction-${l.direction}`
+    ]), C = f({
+      name: "XCheckboxOptionLabelRenderer",
+      props: {
+        render: {
+          type: Function,
+          required: !0
+        }
+      },
+      setup(e) {
+        return () => {
+          var u;
+          return (u = e.render) == null ? void 0 : u.call(e);
+        };
+      }
+    });
+    function _(e) {
+      return typeof e == "function";
+    }
+    return (e, u) => (r(), s("span", {
+      class: F(V.value)
+    }, [
+      m.value.length > 0 ? (r(!0), s(b, { key: 0 }, L(m.value, (a) => (r(), v(w, {
+        key: String(a.value),
+        value: a.value,
+        disabled: a.disabled || !d.value.includes(a.value) && i.value,
+        indeterminate: a.indeterminate,
+        "model-value": d.value.includes(a.value)
+      }, {
+        default: X(() => [
+          e.$slots.label ? p(e.$slots, "label", {
+            key: 0,
+            data: a
+          }) : _(a.label) ? (r(), v(z(C), {
+            key: 1,
+            render: a.label
+          }, null, 8, ["render"])) : (r(), s(b, { key: 2 }, [
+            G(O(a.label), 1)
+          ], 64))
+        ]),
+        _: 2
+      }, 1032, ["value", "disabled", "indeterminate", "model-value"]))), 128)) : p(e.$slots, "default", { key: 1 })
+    ], 2));
+  }
+});
+export {
+  N as default
+};

package/dist/components/XCheckboxGroup.vue2.js

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

package/dist/components/XCollapse.vue.d.ts

@@ -1,8 +1,12 @@
-import { XCollapseKey } from '../composables/collapse';
+import { XCollapseExpandIconPosition, XCollapseKey } from '../composables/collapse';
 type __VLS_Props = {
-    modelValue?: XCollapseKey[] | XCollapseKey | null;
+    activeKey?: XCollapseKey[];
+    defaultActiveKey?: XCollapseKey[];
     accordion?: boolean;
+    showExpandIcon?: boolean;
+    expandIconPosition?: XCollapseExpandIconPosition;
     bordered?: boolean;
+    destroyOnHide?: boolean;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -14,15 +18,18 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    change: (value: XCollapseKey | XCollapseKey[] | null) => any;
-    "update:modelValue": (value: XCollapseKey | XCollapseKey[] | null) => any;
+    change: (value: XCollapseKey[], event: Event) => any;
+    "update:activeKey": (value: XCollapseKey[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onChange?: ((value: XCollapseKey | XCollapseKey[] | null) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: XCollapseKey | XCollapseKey[] | null) => any) | undefined;
+    onChange?: ((value: XCollapseKey[], event: Event) => any) | undefined;
+    "onUpdate:activeKey"?: ((value: XCollapseKey[]) => any) | undefined;
 }>, {
-    modelValue: XCollapseKey[] | XCollapseKey | null;
     bordered: boolean;
+    defaultActiveKey: XCollapseKey[];
     accordion: boolean;
+    showExpandIcon: boolean;
+    expandIconPosition: XCollapseExpandIconPosition;
+    destroyOnHide: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/XCollapse.vue.js

@@ -0,0 +1,54 @@
+import { defineComponent as v, useSlots as y, ref as m, computed as s, provide as x, openBlock as K, createElementBlock as h, normalizeClass as A, renderSlot as B } from "vue";
+import { xCollapseKey as I } from "../composables/collapse.js";
+const E = /* @__PURE__ */ v({
+  __name: "XCollapse",
+  props: {
+    activeKey: {},
+    defaultActiveKey: { default: () => [] },
+    accordion: { type: Boolean, default: !1 },
+    showExpandIcon: { type: Boolean, default: void 0 },
+    expandIconPosition: { default: "left" },
+    bordered: { type: Boolean, default: !0 },
+    destroyOnHide: { type: Boolean, default: !1 }
+  },
+  emits: ["update:activeKey", "change"],
+  setup(i, { emit: r }) {
+    const t = i, n = r, p = y(), l = m([...t.defaultActiveKey]), a = s(() => {
+      const e = t.activeKey ?? l.value;
+      return Array.isArray(e) ? e : [];
+    });
+    function u(e, c) {
+      let o = [];
+      if (t.accordion)
+        a.value.includes(e) || (o = [e]);
+      else {
+        o = [...a.value];
+        const d = o.indexOf(e);
+        d > -1 ? o.splice(d, 1) : o.push(e);
+      }
+      l.value = o, n("update:activeKey", o), n("change", o, c);
+    }
+    x(I, {
+      activeKeys: a,
+      slots: p,
+      showExpandIcon: s(() => t.showExpandIcon),
+      expandIconPosition: s(() => t.expandIconPosition),
+      destroyOnHide: s(() => t.destroyOnHide),
+      handleClick: u
+    });
+    const f = s(() => [
+      "x-collapse",
+      {
+        "x-collapse-borderless": !t.bordered
+      }
+    ]);
+    return (e, c) => (K(), h("div", {
+      class: A(f.value)
+    }, [
+      B(e.$slots, "default")
+    ], 2));
+  }
+});
+export {
+  E as default
+};

package/dist/components/XCollapse.vue2.js

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

package/dist/components/XCollapseItem.vue.d.ts

@@ -1,19 +1,31 @@
-import { XCollapseKey } from '../composables/collapse';
 type __VLS_Props = {
-    itemKey: XCollapseKey;
-    title: string;
+    header?: string;
     disabled?: boolean;
+    showExpandIcon?: boolean;
+    destroyOnHide?: boolean;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
+        'expand-icon'?(_: {
+            active: boolean;
+            disabled: boolean;
+            position: import('../composables/collapse').XCollapseExpandIconPosition;
+        }): any;
+        header?(_: {}): any;
+        extra?(_: {}): any;
         default?(_: {}): any;
     };
     refs: {};
     rootEl: HTMLElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    header: string;
+    disabled: boolean;
+    showExpandIcon: boolean;
+    destroyOnHide: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/XCollapseItem.vue.js

@@ -0,0 +1,152 @@
+import { defineComponent as C, getCurrentInstance as N, computed as n, ref as O, watch as V, onBeforeUnmount as X, openBlock as i, createElementBlock as v, normalizeClass as m, createElementVNode as x, renderSlot as p, normalizeProps as z, mergeProps as E, createBlock as I, unref as w, createCommentVNode as f, createTextVNode as L, toDisplayString as _, createVNode as A, Transition as U, toHandlers as j, withCtx as q, withDirectives as F, vShow as G } from "vue";
+import J from "./XIcon.js";
+import { useXCollapse as M } from "../composables/collapse.js";
+const Q = ["aria-disabled", "aria-expanded", "tabindex"], R = { class: "x-collapse-item-header-title" }, W = {
+  key: 1,
+  class: "x-collapse-item-header-extra"
+}, Y = {
+  key: 0,
+  class: "x-collapse-item-content-box"
+}, ae = /* @__PURE__ */ C({
+  __name: "XCollapseItem",
+  props: {
+    header: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    showExpandIcon: { type: Boolean, default: !0 },
+    destroyOnHide: { type: Boolean, default: !1 }
+  },
+  setup(d) {
+    const s = d, t = M(), h = N(), y = n(() => {
+      const e = h == null ? void 0 : h.vnode.key;
+      return typeof e == "number" ? e : String(e ?? "");
+    }), l = n(() => (t == null ? void 0 : t.activeKeys.value.includes(y.value)) ?? !1), c = n(() => (t == null ? void 0 : t.expandIconPosition.value) ?? "left"), u = n(() => !!(t != null && t.destroyOnHide.value || s.destroyOnHide)), g = n(() => (t == null ? void 0 : t.showExpandIcon.value) ?? s.showExpandIcon), r = O(u.value ? l.value : !0);
+    let o = null;
+    V(l, (e) => {
+      if (o && (clearTimeout(o), o = null), e && !r.value) {
+        r.value = !0;
+        return;
+      }
+      !e && u.value && (o = setTimeout(() => {
+        !l.value && u.value && (r.value = !1), o = null;
+      }, 220));
+    }), X(() => {
+      o && (clearTimeout(o), o = null);
+    });
+    function b(e) {
+      s.disabled || !t || t.handleClick(y.value, e);
+    }
+    function B(e) {
+      e.key !== "Enter" && e.key !== " " || (e.preventDefault(), b(e));
+    }
+    const $ = {
+      onEnter: (e) => {
+        const a = e;
+        a.style.height = `${a.scrollHeight}px`;
+      },
+      onAfterEnter: (e) => {
+        const a = e;
+        a.style.height = "auto";
+      },
+      onBeforeLeave: (e) => {
+        const a = e;
+        a.style.height = `${a.scrollHeight}px`;
+      },
+      onLeave: (e) => {
+        const a = e;
+        a.style.height = "0";
+      },
+      onAfterLeave: () => {
+        o && (clearTimeout(o), o = null), u.value && (r.value = !1);
+      }
+    }, H = n(() => [
+      "x-collapse-item",
+      {
+        "x-collapse-item-active": l.value,
+        "x-collapse-item-disabled": s.disabled,
+        "x-collapse-item-no-icon": !g.value
+      }
+    ]), P = n(() => [
+      "x-collapse-item-header",
+      `x-collapse-item-header-${c.value}`,
+      {
+        "x-collapse-item-header-disabled": s.disabled
+      }
+    ]), S = n(() => [
+      "x-collapse-item-icon-hover",
+      {
+        "x-collapse-item-icon-right": c.value === "right"
+      }
+    ]), T = n(() => [
+      "x-collapse-item-content",
+      {
+        "x-collapse-item-content-expanded": l.value
+      }
+    ]), k = n(() => ({
+      active: l.value,
+      disabled: s.disabled,
+      position: c.value
+    })), D = n(() => {
+      var e;
+      return !!((e = t == null ? void 0 : t.slots) != null && e["expand-icon"]);
+    }), K = C({
+      name: "XCollapseParentExpandIcon",
+      setup() {
+        return () => {
+          var e, a;
+          return ((a = (e = t == null ? void 0 : t.slots) == null ? void 0 : e["expand-icon"]) == null ? void 0 : a.call(e, k.value)) ?? null;
+        };
+      }
+    });
+    return (e, a) => (i(), v("section", {
+      class: m(H.value)
+    }, [
+      x("div", {
+        role: "button",
+        "aria-disabled": d.disabled,
+        "aria-expanded": l.value,
+        tabindex: d.disabled ? -1 : 0,
+        class: m(P.value),
+        onClick: b,
+        onKeydown: B
+      }, [
+        g.value ? (i(), v("span", {
+          key: 0,
+          class: m(S.value)
+        }, [
+          e.$slots["expand-icon"] ? p(e.$slots, "expand-icon", z(E({ key: 0 }, k.value))) : D.value ? (i(), I(w(K), { key: 1 })) : (i(), I(w(J), {
+            key: 2,
+            name: c.value === "right" ? "fanhui" : "gengduo",
+            class: "x-collapse-item-expand-icon",
+            size: 14
+          }, null, 8, ["name"]))
+        ], 2)) : f("", !0),
+        x("div", R, [
+          p(e.$slots, "header", {}, () => [
+            L(_(d.header), 1)
+          ])
+        ]),
+        e.$slots.extra ? (i(), v("div", W, [
+          p(e.$slots, "extra")
+        ])) : f("", !0)
+      ], 42, Q),
+      A(U, E({ name: "collapse-slider" }, j($)), {
+        default: q(() => [
+          F(x("div", {
+            role: "region",
+            class: m(T.value)
+          }, [
+            r.value ? (i(), v("div", Y, [
+              p(e.$slots, "default")
+            ])) : f("", !0)
+          ], 2), [
+            [G, l.value]
+          ])
+        ]),
+        _: 3
+      }, 16)
+    ], 2));
+  }
+});
+export {
+  ae as default
+};

package/dist/components/XCollapseItem.vue2.js

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

package/dist/components/XColorGroup.vue.d.ts

@@ -22,8 +22,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     disabled: boolean;
-    modelValue: string;
     max: number;
+    modelValue: string;
     plus: boolean;
     angle: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;

package/dist/components/XColorGroup.vue.js

@@ -0,0 +1,7 @@
+import o from "./XColorGroup.vue2.js";
+/* empty css                 */
+import r from "../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-473789ee"]]);
+export {
+  m as default
+};