x-next 1.0.0 → 1.1.0

package/dist/es/components/tabs/tabs-tab.vue2.js

@@ -0,0 +1,54 @@
+import { defineComponent as m, inject as f, computed as i } from "vue";
+import u from "../_components/icon-hover/index.vue.js";
+import k from "../../icons/default/close.js";
+import { tabsInjectionKey as y } from "./context.js";
+import { getClassNameMixin as C } from "../../_utils/config.js";
+import { useLocale as g } from "../../locale/index.js";
+const h = m({
+  name: "TabsTab",
+  components: {
+    IconHover: u,
+    IconClose: k
+  },
+  props: {
+    tab: {
+      type: Object,
+      required: !0
+    },
+    active: Boolean,
+    editable: Boolean
+  },
+  emits: ["click", "delete"],
+  setup(t, { emit: n }) {
+    const o = C("tabs--tab"), { t: c } = g(), l = f(y, {}), a = (e) => {
+      t.tab.disabled || n("click", t.tab.key, e);
+    }, s = (e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), a(e));
+    }, b = i(() => {
+      var e;
+      return Object.assign(
+        ((e = l.trigger) == null ? void 0 : e.value) === "click" ? { onClick: a } : { onMouseenter: a },
+        { onKeydown: s }
+      );
+    }), r = (e) => {
+      t.tab.disabled || n("delete", t.tab.key, e);
+    }, d = i(() => [
+      o.block,
+      {
+        [o.modifier("active")]: t.active,
+        [o.modifier("closable")]: t.editable && t.tab.closable,
+        [o.modifier("disabled")]: t.tab.disabled
+      }
+    ]);
+    return {
+      className: o,
+      cls: d,
+      eventHandlers: b,
+      handleDelete: r,
+      t: c
+    };
+  }
+});
+export {
+  h as default
+};

package/dist/es/components/tabs/utils.js

@@ -0,0 +1,12 @@
+const s = ({
+  direction: t,
+  type: r,
+  offset: l
+}) => t === "vertical" ? { transform: `translateY(${-l}px)` } : { transform: `translateX(${-l}px)` }, a = (t, r) => {
+  const { scrollTop: l, scrollLeft: o } = t;
+  r === "horizontal" && o && t.scrollTo({ left: -1 * o }), r === "vertical" && l && t.scrollTo({ top: -1 * l });
+};
+export {
+  s as getTabListStyle,
+  a as updateScrollOffset
+};

package/dist/es/components/tag/Tag.vue.js

@@ -0,0 +1,50 @@
+import k from "./Tag.vue2.js";
+import { resolveComponent as t, openBlock as o, createElementBlock as l, normalizeStyle as f, normalizeClass as s, renderSlot as n, createCommentVNode as a, createBlock as u, withModifiers as C, withCtx as g, createVNode as r } from "vue";
+import y from "../../_virtual/_plugin-vue_export-helper.js";
+function $(e, i, h, N, b, v) {
+  const m = t("close"), c = t("icon-hover"), p = t("animation-loading");
+  return e.computedVisible ? (o(), l("span", {
+    key: 0,
+    class: s(e.cls),
+    style: f(e.style),
+    onClick: i[0] || (i[0] = (...d) => e.handleClick && e.handleClick(...d))
+  }, [
+    e.$slots.icon ? (o(), l("span", {
+      key: 0,
+      class: s(e.className.element("icon"))
+    }, [
+      n(e.$slots, "icon")
+    ], 2)) : a("", !0),
+    e.nowrap ? (o(), l("span", {
+      key: 1,
+      class: s(e.className.element("text"))
+    }, [
+      n(e.$slots, "default")
+    ], 2)) : n(e.$slots, "default", { key: 2 }),
+    e.closable ? (o(), u(c, {
+      key: 3,
+      as: "button",
+      "aria-label": e.t("common.closeTarget", { target: e.t("common.tag") }),
+      prefix: "tag",
+      class: s(e.className.element("close-icon")),
+      onClick: C(e.handleClose, ["stop"])
+    }, {
+      default: g(() => [
+        n(e.$slots, "close-icon", {}, () => [
+          r(m)
+        ])
+      ]),
+      _: 3
+    }, 8, ["aria-label", "class", "onClick"])) : a("", !0),
+    e.loading ? (o(), l("span", {
+      key: 4,
+      class: s(e.className.element("loading-icon"))
+    }, [
+      r(p)
+    ], 2)) : a("", !0)
+  ], 6)) : a("", !0);
+}
+const z = /* @__PURE__ */ y(k, [["render", $]]);
+export {
+  z as default
+};

package/dist/es/components/tag/Tag.vue2.js

@@ -0,0 +1,180 @@
+import { defineComponent as g, toRefs as B, computed as l, ref as f } from "vue";
+import _ from "../_components/icon-hover/index.vue.js";
+import z from "../../icons/animation/animation-loading.js";
+import I from "../../icons/default/close.js";
+import { TAG_COLORS as r } from "./interface.js";
+import { getClassNameMixin as L } from "../../_utils/config.js";
+import { useLocale as S } from "../../locale/index.js";
+const T = g({
+  name: "Tag",
+  components: {
+    IconHover: _,
+    Close: I,
+    AnimationLoading: z
+  },
+  props: {
+    /**
+     * @zh 标签的颜色
+     * @en Label color
+     * @values 'red','orangered','orange','gold','lime','green','cyan','blue','better-blue','purple','pink-purple','magenta','gray'
+     */
+    color: {
+      type: String
+    },
+    /**
+     * @zh 标签的大小
+     * @en Label size
+     * @values 'small','medium','large'
+     * @defaultValue 'medium'
+     */
+    size: {
+      type: String,
+      default: "medium"
+    },
+    /**
+     * @zh 是否显示边框
+     * @en Whether the tag is bordered
+     * @version 2.33.0
+     */
+    bordered: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 标签是否可见
+     * @en Whether the tag is visible
+     * @vModel
+     */
+    visible: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * @zh 标签默认是否可见
+     * @en Whether the tag is visible by default
+     */
+    defaultVisible: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 标签是否为加载中状态
+     * @en Whether the tag is loading state
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 标签是否可关闭
+     * @en Whether the tag can be closed
+     */
+    closable: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 标签是否可选中
+     * @en Whether the tag can be checked
+     */
+    selectable: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 标签是否选中（标签可选中时可用）
+     * @en Whether the tag is checked (available when the tag is selectable)
+     * @vModel
+     */
+    checked: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * @zh 标签默认选中状态（标签可选中时可用）
+     * @en Whether the tag is checked by default (available when the tag is selectable)
+     */
+    defaultChecked: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 标签内容不换行
+     * @en Tag content does not wrap
+     * @version 2.56.1
+     */
+    nowrap: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: {
+    "update:visible": (e) => !0,
+    "update:checked": (e) => !0,
+    /**
+     * @zh 点击关闭按钮时触发
+     * @en Emitted when the close button is clicked
+     * @param {MouseEvent} ev
+     */
+    close: (e) => !0,
+    /**
+     * @zh 用户选中时触发（仅在可选中模式下触发）
+     * @en Emitted when the user check (emit only in the selectable mode)
+     * @param {boolean} checked
+     * @param {MouseEvent} ev
+     */
+    check: (e, t) => !0
+  },
+  /**
+   * @zh 图标
+   * @en Icon
+   * @slot icon
+   */
+  /**
+   * @zh 关闭按钮的图标
+   * @en Close button icon
+   * @slot close-icon
+   */
+  setup(e, { emit: t }) {
+    const { size: m } = B(e), o = L("tag"), { t: v } = S(), b = l(() => e.color && r.includes(e.color)), d = l(() => e.color && !r.includes(e.color)), n = f(e.defaultVisible), u = f(e.defaultChecked), s = l(() => e.visible ?? n.value), c = l(
+      () => e.selectable ? e.checked ?? u.value : !0
+    ), h = (a) => {
+      n.value = !1, t("update:visible", !1), t("close", a);
+    }, k = (a) => {
+      if (e.selectable) {
+        const i = !c.value;
+        u.value = i, t("update:checked", i), t("check", i, a);
+      }
+    }, C = l(() => [
+      o.block,
+      o.modifier(`size-${m.value}`),
+      {
+        [o.modifier("loading")]: e.loading,
+        [o.modifier("hide")]: !s.value,
+        [o.modifier(`color-${e == null ? void 0 : e.color}`)]: b.value,
+        [o.modifier("bordered")]: e.bordered,
+        [o.modifier("selectable")]: e.selectable,
+        [o.modifier("checked")]: c.value,
+        [o.modifier("custom-color")]: d.value
+      }
+    ]), y = l(() => {
+      if (d.value)
+        return {
+          backgroundColor: e.color
+        };
+    });
+    return {
+      className: o,
+      cls: C,
+      style: y,
+      computedVisible: s,
+      computedChecked: c,
+      handleClick: k,
+      handleClose: h,
+      t: v
+    };
+  }
+});
+export {
+  T as default
+};

package/dist/es/components/tag/index.js

@@ -0,0 +1,8 @@
+import o from "./Tag.vue.js";
+import { generateComponent as t } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as e } from "../../_utils/config.js";
+const n = t(e("Tag"), o);
+export {
+  n as Tag,
+  n as default
+};

package/dist/es/components/tag/interface.js

@@ -0,0 +1,18 @@
+const e = [
+  "red",
+  "orangered",
+  "orange",
+  "gold",
+  "lime",
+  "green",
+  "cyan",
+  "blue",
+  "better-blue",
+  "purple",
+  "pink-purple",
+  "magenta",
+  "gray"
+];
+export {
+  e as TAG_COLORS
+};

package/dist/es/components/time-picker/TimeColumn.vue.js

@@ -0,0 +1,53 @@
+import d from "./TimeColumn.vue2.js";
+import { resolveComponent as c, openBlock as o, createElementBlock as a, withKeys as t, withModifiers as n, normalizeClass as r, createVNode as m, withCtx as b, createElementVNode as u, Fragment as p, renderList as v, toDisplayString as f } from "vue";
+import N from "../../_virtual/_plugin-vue_export-helper.js";
+const $ = ["aria-label"], y = ["aria-selected", "aria-disabled", "disabled", "onClick"];
+function C(e, s, k, w, S, g) {
+  const i = c("Scrollbar");
+  return o(), a("div", {
+    ref: "columnRef",
+    class: r(e.className.element("column")),
+    role: "listbox",
+    "aria-label": e.label,
+    tabindex: "0",
+    onKeydown: [
+      s[0] || (s[0] = t(n((l) => e.moveActive(-1), ["prevent"]), ["up"])),
+      s[1] || (s[1] = t(n((l) => e.moveActive(1), ["prevent"]), ["down"])),
+      s[2] || (s[2] = t(n((...l) => e.selectActive && e.selectActive(...l), ["prevent"]), ["enter"]))
+    ]
+  }, [
+    m(i, {
+      "outer-class": e.className.element("column-scrollbar"),
+      "outer-style": { height: "100%" },
+      "disable-horizontal": ""
+    }, {
+      default: b(() => [
+        u("div", {
+          class: r(e.className.element("column-list"))
+        }, [
+          (o(!0), a(p, null, v(e.items, (l) => (o(), a("button", {
+            key: String(l.value),
+            type: "button",
+            class: r([
+              e.className.element("cell"),
+              {
+                [e.className.is("selected")]: l.selected,
+                [e.className.is("disabled")]: l.disabled
+              }
+            ]),
+            role: "option",
+            "aria-selected": !!l.selected,
+            "aria-disabled": !!l.disabled,
+            disabled: l.disabled,
+            onClick: (h) => e.handleSelect(l)
+          }, f(l.label), 11, y))), 128))
+        ], 2)
+      ]),
+      _: 1
+    }, 8, ["outer-class"])
+  ], 42, $);
+}
+const E = /* @__PURE__ */ N(d, [["render", C]]);
+export {
+  E as default
+};

package/dist/es/components/time-picker/TimeColumn.vue2.js

@@ -0,0 +1,55 @@
+import { defineComponent as p, ref as b, onMounted as g, watch as y, nextTick as x } from "vue";
+import { getClassNameMixin as I } from "../../_utils/config.js";
+import { Scrollbar as S } from "../scrollbar-v2/index.js";
+const k = p({
+  name: "TimeColumn",
+  components: {
+    Scrollbar: S
+  },
+  props: {
+    type: {
+      type: String,
+      required: !0
+    },
+    label: {
+      type: String,
+      required: !0
+    },
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: {
+    select: (n, c) => !0
+  },
+  setup(n, { emit: c }) {
+    const o = I("time-picker"), i = b(), r = () => {
+      x(() => {
+        var t, l;
+        const e = (t = i.value) == null ? void 0 : t.querySelector(`.${o.is("selected")}`);
+        (l = e == null ? void 0 : e.scrollIntoView) == null || l.call(e, { block: "nearest" });
+      });
+    }, a = () => n.items.filter((e) => !e.disabled), s = (e) => {
+      e.disabled || c("select", n.type, e.value);
+    }, d = (e) => {
+      const t = a();
+      if (t.length === 0) return;
+      const l = t.findIndex((f) => f.selected), u = l === -1 ? e > 0 ? 0 : t.length - 1 : (l + e + t.length) % t.length;
+      s(t[u]);
+    }, m = () => {
+      const e = n.items.find((t) => t.selected && !t.disabled);
+      e && s(e);
+    };
+    return g(r), y(() => n.items, r, { deep: !0 }), {
+      className: o,
+      columnRef: i,
+      handleSelect: s,
+      moveActive: d,
+      selectActive: m
+    };
+  }
+});
+export {
+  k as default
+};

package/dist/es/components/time-picker/TimePanel.vue.js

@@ -0,0 +1,69 @@
+import k from "./TimePanel.vue2.js";
+import { resolveComponent as m, openBlock as o, createElementBlock as l, withModifiers as C, normalizeClass as t, createElementVNode as d, Fragment as N, renderList as y, createBlock as r, withCtx as c, createTextVNode as u, toDisplayString as p, createCommentVNode as n, renderSlot as w } from "vue";
+import h from "../../_virtual/_plugin-vue_export-helper.js";
+function v(e, a, $, B, S, F) {
+  const f = m("TimeColumn"), i = m("Button");
+  return o(), l("div", {
+    class: t(e.className.element("panel")),
+    onMousedown: a[0] || (a[0] = C(() => {
+    }, ["prevent"]))
+  }, [
+    d("div", {
+      class: t(e.className.element("columns"))
+    }, [
+      (o(!0), l(N, null, y(e.columns, (s) => (o(), r(f, {
+        key: s,
+        type: s,
+        label: e.columnLabels[s],
+        items: e.lists[s],
+        onSelect: e.handleColumnSelect
+      }, null, 8, ["type", "label", "items", "onSelect"]))), 128))
+    ], 2),
+    !e.hideFooter || e.$slots.extra ? (o(), l("div", {
+      key: 0,
+      class: t(e.className.element("footer"))
+    }, [
+      d("div", {
+        class: t(e.className.element("footer-left"))
+      }, [
+        e.hideFooter ? n("", !0) : (o(), r(i, {
+          key: 0,
+          type: "text",
+          size: "mini",
+          narrow: "",
+          class: t(e.className.element("now")),
+          onClick: e.handleNow
+        }, {
+          default: c(() => [
+            u(p(e.t("timePicker.now")), 1)
+          ]),
+          _: 1
+        }, 8, ["class", "onClick"])),
+        e.$slots.extra ? (o(), l("div", {
+          key: 1,
+          class: t(e.className.element("extra"))
+        }, [
+          w(e.$slots, "extra")
+        ], 2)) : n("", !0)
+      ], 2),
+      e.hideFooter ? n("", !0) : (o(), r(i, {
+        key: 0,
+        type: "text",
+        status: "info",
+        size: "mini",
+        narrow: "",
+        class: t(e.className.element("confirm")),
+        onClick: e.handleConfirm
+      }, {
+        default: c(() => [
+          u(p(e.t("timePicker.ok")), 1)
+        ]),
+        _: 1
+      }, 8, ["class", "onClick"]))
+    ], 2)) : n("", !0)
+  ], 34);
+}
+const P = /* @__PURE__ */ h(k, [["render", v]]);
+export {
+  P as default
+};

package/dist/es/components/time-picker/TimePanel.vue2.js

@@ -0,0 +1,89 @@
+import { defineComponent as b, toRefs as h, computed as u } from "vue";
+import { getClassNameMixin as H } from "../../_utils/config.js";
+import { getVisibleColumns as y, getNowTime as d, setHourByMeridiem as c, getMeridiem as C, get12HourValue as M } from "./utils.js";
+import g from "./hooks/use-time-list.js";
+import S from "./TimeColumn.vue.js";
+import { Button as v } from "../button/index.js";
+import { useLocale as B } from "../../locale/index.js";
+const _ = b({
+  name: "TimePanel",
+  components: {
+    TimeColumn: S,
+    Button: v
+  },
+  props: {
+    value: {
+      type: Object
+    },
+    format: {
+      type: String,
+      required: !0
+    },
+    use12Hours: {
+      type: Boolean
+    },
+    step: {
+      type: Object
+    },
+    disabledHours: {
+      type: Function
+    },
+    disabledMinutes: {
+      type: Function
+    },
+    disabledSeconds: {
+      type: Function
+    },
+    hideDisabledOptions: {
+      type: Boolean
+    },
+    hideFooter: {
+      type: Boolean
+    }
+  },
+  emits: {
+    select: (o) => !0,
+    confirm: () => !0
+  },
+  setup(o, { emit: n }) {
+    const a = H("time-picker"), { t: i } = B(), t = h(o), m = u(() => y(o.format, o.use12Hours)), p = u(() => ({
+      hour: i("timePicker.hour"),
+      minute: i("timePicker.minute"),
+      second: i("timePicker.second"),
+      meridiem: "AM PM"
+    })), l = u(() => o.value ?? d()), { lists: f } = g({
+      value: l,
+      columns: m,
+      step: t.step,
+      use12Hours: t.use12Hours,
+      disabledHours: t.disabledHours,
+      disabledMinutes: t.disabledMinutes,
+      disabledSeconds: t.disabledSeconds,
+      hideDisabledOptions: t.hideDisabledOptions
+    });
+    return {
+      t: i,
+      className: a,
+      columns: m,
+      columnLabels: p,
+      lists: f,
+      handleColumnSelect: (r, s) => {
+        let e = l.value;
+        r === "hour" ? e = o.use12Hours ? c(e, s, C(e)) : e.hour(s) : r === "minute" ? e = e.minute(s) : r === "second" ? e = e.second(s) : e = c(
+          e,
+          M(e),
+          s
+        ), n("select", e.millisecond(0));
+      },
+      handleConfirm: () => {
+        n("confirm");
+      },
+      handleNow: () => {
+        n("select", d());
+      }
+    };
+  }
+});
+export {
+  _ as default
+};