vuux/dist/es/SplitButton/src/index.vue.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { defineComponent as M, useTemplateRef as x, createElementBlock as n, openBlock as e, createElementVNode as r, createVNode as k, normalizeClass as i, unref as t, createCommentVNode as a, renderSlot as z, Fragment as y, createBlock as B, createStaticVNode as E, Transition as N, withCtx as S, renderList as V, toDisplayString as I } from "vue";
import { useSplitButton as L } from "./hook/useSplitButton.mjs";
import { Icon as p } from "@vuux/icons";
const T = {
  key: 1,
  xmlns: "http://www.w3.org/2000/svg",
  class: "is-loading",
  width: "14",
  height: "14",
  viewBox: "0 0 24 24",
  fill: "currentColor",
  stroke: "currentColor",
  "stroke-width": "2",
  "stroke-linecap": "round",
  "stroke-linejoin": "round"
}, $ = ["ke", "onClick"], q = /* @__PURE__ */ M({
  name: "SplitButton",
  __name: "index",
  props: {
    items: { default: () => [] },
    type: { default: "primary" },
    icon: {},
    loading: { type: Boolean },
    disabled: { type: Boolean },
    size: { default: "l" },
    shadow: { type: Boolean, default: !0 }
  },
  emits: ["change"],
  setup(g, { emit: v }) {
    const l = g, w = v, d = x("splitButtonEl"), { classNames: c, isLoading: u, lists: C, isMore: m, handleMore: h, handleClick: b } = L(l, d, w);
    return (_, s) => (e(), n("div", {
      class: "app-split-button",
      ref_key: "splitButtonEl",
      ref: d
    }, [
      r("button", {
        class: i(["split-button", t(c)])
      }, [
        t(u) ? a("", !0) : (e(), n(y, { key: 0 }, [
          l.icon ? (e(), B(t(p), {
            key: 0,
            name: l.icon,
            size: 15,
            color: "rgba(255, 255, 255)"
          }, null, 8, ["name"])) : a("", !0)
        ], 64)),
        t(u) ? (e(), n("svg", T, [...s[1] || (s[1] = [
          E('<path d="M12 2v4"></path><path d="m16.2 7.8 2.9-2.9"></path><path d="M18 12h4"></path><path d="m16.2 16.2 2.9 2.9"></path><path d="M12 18v4"></path><path d="m4.9 19.1 2.9-2.9"></path><path d="M2 12h4"></path><path d="m4.9 4.9 2.9 2.9"></path>', 8)
        ])])) : a("", !0),
        z(_.$slots, "default")
      ], 2),
      r("button", {
        class: i(["split-button", t(c)]),
        onClick: s[0] || (s[0] = //@ts-ignore
        (...o) => t(h) && t(h)(...o))
      }, [
        k(t(p), {
          class: i(["more-button", { "is-active": t(m) }]),
          name: "Icon1336922",
          size: 16,
          color: "#fff"
        }, null, 8, ["class"])
      ], 2),
      k(N, { name: "ease-drop" }, {
        default: S(() => [
          t(m) ? (e(), n("div", {
            key: 0,
            class: i(["split-data", { "is-shadow": l.shadow }])
          }, [
            (e(!0), n(y, null, V(t(C), (o, f) => (e(), n("div", {
              ke: f,
              class: "split-item",
              onClick: (j) => t(b)(o.name, f)
            }, [
              o.icon ? (e(), B(t(p), {
                key: 0,
                name: o.icon,
                size: 15,
                color: "var(--app-icon-color)"
              }, null, 8, ["name"])) : a("", !0),
              r("p", null, I(o.name), 1)
            ], 8, $))), 256))
          ], 2)) : a("", !0)
        ]),
        _: 1
      })
    ], 512));
  }
});
export {
  q as default
};