@matechat/core/List/index.js

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

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