t-fighting-design/es/list/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

import { defineComponent as _, provide as u, computed as a, openBlock as r, createElementBlock as l, normalizeClass as h, unref as c, normalizeStyle as y, renderSlot as n, createCommentVNode as f } from "vue";
import { Props as z, listPropsKey as $ } from "./index3.js";
import { sizeChange as C } from "../../_utils/index3.js";
const g = {
  key: 0,
  class: "f-list__header"
}, k = {
  key: 1,
  class: "f-list__footer"
}, b = _({
  name: "FList"
}), B = /* @__PURE__ */ _({
  ...b,
  props: z,
  setup(m) {
    const s = m;
    u($, s);
    const d = a(() => {
      const { maxHeight: e, zebra: t, center: o, size: i } = s;
      return [
        "f-list",
        {
          [`f-list__${i}`]: i,
          "f-list__scroll": e,
          "f-list__zebra": t,
          "f-list__center": o
        }
      ];
    }), p = a(() => {
      const { maxHeight: e, borderColor: t, listStyle: o } = s;
      return {
        borderColor: t,
        maxHeight: C(e),
        listStyle: o
      };
    });
    return (e, t) => (r(), l("ul", {
      role: "list",
      class: h(c(d)),
      style: y(c(p))
    }, [
      e.$slots.header ? (r(), l("header", g, [
        n(e.$slots, "header")
      ])) : f("", !0),
      n(e.$slots, "default"),
      e.$slots.footer ? (r(), l("footer", k, [
        n(e.$slots, "footer")
      ])) : f("", !0)
    ], 6));
  }
});
export {
  B as default
};