epic-designer-cjh/dist/Collapse-7efa8c5a.js

基于vue3的设计器,可视化开发页面表单

import { defineComponent as U, ref as H, computed as R, provide as $, h as j } from "vue";
import { a as n, e as m, b as o, c as y, u as M, g as O } from "./use-rtl-d05cb593.js";
import { f as V } from "./fade-in-height-expand.cssr-52e7384f.js";
import { u as k } from "./use-merged-state-7348d957.js";
import { c as B, u as I, a as L, b as C } from "./light-76d75dc8.js";
import { ca as W, b$ as _ } from "./index-97ce4605.js";
const K = (t) => {
  const { fontWeight: b, textColor1: l, textColor2: c, textColorDisabled: x, dividerColor: u, fontSize: g } = t;
  return {
    titleFontSize: g,
    titleFontWeight: b,
    dividerColor: u,
    titleTextColor: l,
    titleTextColorDisabled: x,
    fontSize: g,
    textColor: c,
    arrowColor: c,
    arrowColorDisabled: x,
    itemMargin: "16px 0 0 0",
    titlePadding: "16px 0 0 0"
  };
}, q = {
  name: "Collapse",
  common: B,
  self: K
}, G = q, J = n("collapse", "width: 100%;", [n("collapse-item", `
 font-size: var(--n-font-size);
 color: var(--n-text-color);
 transition:
 color .3s var(--n-bezier),
 border-color .3s var(--n-bezier);
 margin: var(--n-item-margin);
 `, [m("disabled", [o("header", "cursor: not-allowed;", [o("header-main", `
 color: var(--n-title-text-color-disabled);
 `), n("collapse-item-arrow", `
 color: var(--n-arrow-color-disabled);
 `)])]), n("collapse-item", "margin-left: 32px;"), y("&:first-child", "margin-top: 0;"), y("&:first-child >", [o("header", "padding-top: 0;")]), m("left-arrow-placement", [o("header", [n("collapse-item-arrow", "margin-right: 4px;")])]), m("right-arrow-placement", [o("header", [n("collapse-item-arrow", "margin-left: 4px;")])]), o("content-wrapper", [o("content-inner", "padding-top: 16px;"), V({
  duration: "0.15s"
})]), m("active", [o("header", [m("active", [n("collapse-item-arrow", "transform: rotate(90deg);")])])]), y("&:not(:first-child)", "border-top: 1px solid var(--n-divider-color);"), o("header", `
 font-size: var(--n-title-font-size);
 display: flex;
 flex-wrap: nowrap;
 align-items: center;
 transition: color .3s var(--n-bezier);
 position: relative;
 padding: var(--n-title-padding);
 color: var(--n-title-text-color);
 cursor: pointer;
 `, [o("header-main", `
 display: flex;
 flex-wrap: nowrap;
 align-items: center;
 font-weight: var(--n-title-font-weight);
 transition: color .3s var(--n-bezier);
 flex: 1;
 color: var(--n-title-text-color);
 `), o("header-extra", `
 display: flex;
 align-items: center;
 transition: color .3s var(--n-bezier);
 color: var(--n-text-color);
 `), n("collapse-item-arrow", `
 display: flex;
 transition:
 transform .15s var(--n-bezier),
 color .3s var(--n-bezier);
 font-size: 18px;
 color: var(--n-arrow-color);
 `)])])]), Q = Object.assign(Object.assign({}, I.props), {
  defaultExpandedNames: {
    type: [Array, String],
    default: null
  },
  expandedNames: [Array, String],
  arrowPlacement: {
    type: String,
    default: "left"
  },
  accordion: {
    type: Boolean,
    default: !1
  },
  displayDirective: {
    type: String,
    default: "if"
  },
  onItemHeaderClick: [Function, Array],
  "onUpdate:expandedNames": [Function, Array],
  onUpdateExpandedNames: [Function, Array],
  // deprecated
  onExpandedNamesChange: {
    type: [Function, Array],
    validator: () => (process.env.NODE_ENV !== "production" && W("collapse", "`on-expanded-names-change` is deprecated, please use `on-update:expanded-names` instead."), !0),
    default: void 0
  }
}), X = _("n-collapse"), re = U({
  name: "Collapse",
  props: Q,
  setup(t, { slots: b }) {
    const { mergedClsPrefixRef: l, inlineThemeDisabled: c, mergedRtlRef: x } = M(t), u = H(t.defaultExpandedNames), g = R(() => t.expandedNames), N = k(g, u), z = I("Collapse", "-collapse", J, G, t, l);
    function p(a) {
      const { "onUpdate:expandedNames": e, onUpdateExpandedNames: r, onExpandedNamesChange: d } = t;
      r && C(r, a), e && C(e, a), d && C(d, a), u.value = a;
    }
    function f(a) {
      const { onItemHeaderClick: e } = t;
      e && C(e, a);
    }
    function S(a, e, r) {
      const { accordion: d } = t, { value: h } = N;
      if (d)
        a ? (p([e]), f({ name: e, expanded: !0, event: r })) : (p([]), f({ name: e, expanded: !1, event: r }));
      else if (!Array.isArray(h))
        p([e]), f({ name: e, expanded: !0, event: r });
      else {
        const i = h.slice(), v = i.findIndex((w) => e === w);
        ~v ? (i.splice(v, 1), p(i), f({ name: e, expanded: !1, event: r })) : (i.push(e), p(i), f({ name: e, expanded: !0, event: r }));
      }
    }
    $(X, {
      props: t,
      mergedClsPrefixRef: l,
      expandedNamesRef: N,
      slots: b,
      toggleItem: S
    });
    const T = O("Collapse", x, l), E = R(() => {
      const { common: { cubicBezierEaseInOut: a }, self: { titleFontWeight: e, dividerColor: r, titlePadding: d, titleTextColor: h, titleTextColorDisabled: i, textColor: v, arrowColor: w, fontSize: A, titleFontSize: D, arrowColorDisabled: F, itemMargin: P } } = z.value;
      return {
        "--n-font-size": A,
        "--n-bezier": a,
        "--n-text-color": v,
        "--n-divider-color": r,
        "--n-title-padding": d,
        "--n-title-font-size": D,
        "--n-title-text-color": h,
        "--n-title-text-color-disabled": i,
        "--n-title-font-weight": e,
        "--n-arrow-color": w,
        "--n-arrow-color-disabled": F,
        "--n-item-margin": P
      };
    }), s = c ? L("collapse", void 0, E, t) : void 0;
    return {
      rtlEnabled: T,
      mergedTheme: z,
      mergedClsPrefix: l,
      cssVars: c ? void 0 : E,
      themeClass: s == null ? void 0 : s.themeClass,
      onRender: s == null ? void 0 : s.onRender
    };
  },
  render() {
    var t;
    return (t = this.onRender) === null || t === void 0 || t.call(this), j("div", { class: [
      `${this.mergedClsPrefix}-collapse`,
      this.rtlEnabled && `${this.mergedClsPrefix}-collapse--rtl`,
      this.themeClass
    ], style: this.cssVars }, this.$slots);
  }
});
export {
  re as N,
  X as c
};