@matechat/core/List/index.js

前端智能化场景解决方案UI库，轻松构建你的AI应用。

import "./index.css";
import { computed as E, ref as L, onMounted as p, defineComponent as w, createElementBlock as u, openBlock as f, unref as c, normalizeClass as g, Fragment as b, renderList as z, renderSlot as h, createTextVNode as C, toDisplayString as T } from "vue";
var v = /* @__PURE__ */ ((e) => (e.Horizontal = "horizontal", e.Vertical = "vertical", e))(v || {}), k = /* @__PURE__ */ ((e) => (e.Transparent = "transparent", e.Filled = "filled", e.Bordered = "bordered", e.None = "none", e))(k || {});
const A = {
  direction: {
    type: String,
    default: "vertical"
    /* Vertical */
  },
  autoWrap: {
    type: Boolean,
    default: !0
  },
  variant: {
    type: String,
    default: "transparent"
    /* Transparent */
  },
  enableLazyLoad: {
    type: Boolean,
    default: !1
  },
  data: {
    type: Array,
    default: () => []
  },
  enableShortKey: {
    type: Boolean,
    default: !1
  },
  inputEl: {
    type: Object
  },
  selectable: {
    type: Boolean,
    default: !0
  }
}, B = 50, H = ["TEXTAREA", "INPUT"], I = "ArrowUp", _ = "ArrowDown", N = "Enter";
function M(e, o) {
  const n = L(e.enableShortKey ? 0 : -1), i = (t) => {
    if (!t.disabled) {
      if (e.selectable)
        for (let l = 0; l < e.data.length; l++)
          e.data[l].active = e.data[l].value === t.value;
      o("select", { ...t });
    }
  }, s = (t) => {
    if (!e.enableLazyLoad || e.direction !== v.Vertical)
      return;
    const l = t.target, r = l.scrollHeight, d = l.clientHeight, a = l.scrollTop;
    r - d - a < B && o("loadMore", t);
  }, m = (t) => {
    t.code === I && (n.value = n.value === 0 ? e.data.length - 1 : n.value - 1), t.code === _ && (n.value = n.value === e.data.length - 1 ? 0 : n.value + 1), t.code === N && (e.selectable && (e.data[n.value].active = !0), o("select", { ...e.data[n.value] }));
  };
  return p(() => {
    let t;
    if (e.inputEl) {
      const l = e.inputEl.$el ?? e.inputEl;
      H.includes(l.tagName) ? t = l : t = l.querySelector("textarea") || l.querySelector("input") || document;
    } else
      t = document;
    e.enableShortKey && t.addEventListener("keydown", m);
  }), { preSelectIndex: n, onItemClick: i, onListScroll: s };
}
function D(e) {
  return { listClasses: E(() => ({
    "mc-list": !0,
    "mc-list-horizontal": e.direction === v.Horizontal,
    "mc-list-nowrap": e.direction === v.Horizontal && !e.autoWrap
  })) };
}
const K = ["onClick"], U = /* @__PURE__ */ w({
  __name: "List",
  props: A,
  emits: ["select", "loadMore"],
  setup(e, { emit: o }) {
    const n = e, i = o, { listClasses: s } = D(n), { preSelectIndex: m, onItemClick: t, onListScroll: l } = M(n, i);
    return (r, d) => (f(), u(
      "div",
      {
        class: g(c(s)),
        onScroll: d[0] || (d[0] = //@ts-ignore
        (...a) => c(l) && c(l)(...a))
      },
      [
        (f(!0), u(
          b,
          null,
          z(r.data, (a, y) => (f(), u(
            b,
            { key: y },
            [
              r.variant === c(k).None ? h(r.$slots, "item", {
                key: 0,
                item: a
              }, void 0, !0) : (f(), u("div", {
                key: 1,
                class: g([
                  "mc-list-item",
                  {
                    "mc-list-item-disabled": a.disabled,
                    "mc-list-item-active": a.active,
                    "mc-list-item-pre-selection": y === c(m)
                  },
                  r.variant
                ]),
                onClick: () => c(t)(a)
              }, [
                h(r.$slots, "item", { item: a }, () => [
                  C(
                    T(a.label),
                    1
                    /* TEXT */
                  )
                ], !0)
              ], 10, K))
            ],
            64
            /* STABLE_FRAGMENT */
          ))),
          128
          /* KEYED_FRAGMENT */
        ))
      ],
      34
      /* CLASS, NEED_HYDRATION */
    ));
  }
}), $ = (e, o) => {
  const n = e.__vccOpts || e;
  for (const [i, s] of o)
    n[i] = s;
  return n;
}, S = /* @__PURE__ */ $(U, [["__scopeId", "data-v-1a543233"]]);
S.install = (e) => {
  e.component("McList", S);
};
export {
  v as ListDirection,
  k as ListVariant,
  S as McList,
  A as listProps
};