x-next 1.0.1 → 1.2.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,64 @@
+import v from "./TimeColumn.vue2.js";
+import { resolveComponent as u, openBlock as n, createElementBlock as t, withKeys as o, withModifiers as s, normalizeClass as i, createVNode as b, withCtx as p, createElementVNode as c, Fragment as f, renderList as $, toDisplayString as y } from "vue";
+import I from "../../_virtual/_plugin-vue_export-helper.js";
+const N = ["aria-label", "aria-activedescendant", "aria-disabled", "tabindex"], g = ["id", "aria-selected", "aria-disabled", "disabled", "onClick"];
+function B(e, a, C, k, w, S) {
+  const d = u("Scrollbar");
+  return n(), t("div", {
+    ref: "columnRef",
+    class: i(e.className.element("column")),
+    role: "listbox",
+    "aria-label": e.label,
+    "aria-activedescendant": e.activeItem ? e.getItemId(e.activeItem) : void 0,
+    "aria-disabled": !e.activeItem || void 0,
+    tabindex: e.activeItem ? 0 : -1,
+    onKeydown: [
+      a[1] || (a[1] = o(s((l) => e.moveActive(-1), ["prevent"]), ["up"])),
+      a[2] || (a[2] = o(s((l) => e.moveActive(1), ["prevent"]), ["down"])),
+      a[3] || (a[3] = o(s((...l) => e.selectActive && e.selectActive(...l), ["prevent"]), ["enter"])),
+      a[4] || (a[4] = o(s((l) => e.moveBoundary(!1), ["prevent"]), ["home"])),
+      a[5] || (a[5] = o(s((l) => e.moveBoundary(!0), ["prevent"]), ["end"]))
+    ]
+  }, [
+    b(d, {
+      tabindex: "-1",
+      "outer-class": e.className.element("column-scrollbar"),
+      "outer-style": { height: "100%" },
+      "disable-horizontal": ""
+    }, {
+      default: p(() => [
+        c("div", {
+          class: i(e.className.element("column-list"))
+        }, [
+          (n(!0), t(f, null, $(e.items, (l) => (n(), t("button", {
+            key: String(l.value),
+            id: e.getItemId(l),
+            tabindex: "-1",
+            type: "button",
+            class: i([
+              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: (m) => e.handleSelect(l),
+            onFocus: a[0] || (a[0] = (m) => {
+              var r;
+              return (r = e.columnRef) == null ? void 0 : r.focus();
+            })
+          }, y(l.label), 43, g))), 128))
+        ], 2)
+      ]),
+      _: 1
+    }, 8, ["outer-class"])
+  ], 42, N);
+}
+const F = /* @__PURE__ */ I(v, [["render", B]]);
+export {
+  F as default
+};

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

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