epic-designer-cjh/dist/Card-651a7a6c.js

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

import { h as n, defineComponent as B, toRef as J, computed as $ } from "vue";
import { a as m, e as d, c as t, f as Q, k as U, b as l, l as oo, m as eo, u as ro, g as to } from "./use-rtl-d05cb593.js";
import { c as no, u as L, a as ao, b as lo } from "./light-76d75dc8.js";
import { c as w } from "./create-key-76a2bf3d.js";
import { a as so } from "./index-7c742dc7.js";
import { r as p } from "./resolve-slot-d8544b74.js";
import { u as io } from "./use-style-b9e822e4.js";
import { N as co } from "./Icon-6fe59076.js";
import { r as bo } from "./replaceable-3545da1a.js";
function go(o) {
  return Object.keys(o);
}
const fo = bo("close", n(
  "svg",
  { viewBox: "0 0 12 12", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": !0 },
  n(
    "g",
    { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
    n(
      "g",
      { fill: "currentColor", "fill-rule": "nonzero" },
      n("path", { d: "M2.08859116,2.2156945 L2.14644661,2.14644661 C2.32001296,1.97288026 2.58943736,1.95359511 2.7843055,2.08859116 L2.85355339,2.14644661 L6,5.293 L9.14644661,2.14644661 C9.34170876,1.95118446 9.65829124,1.95118446 9.85355339,2.14644661 C10.0488155,2.34170876 10.0488155,2.65829124 9.85355339,2.85355339 L6.707,6 L9.85355339,9.14644661 C10.0271197,9.32001296 10.0464049,9.58943736 9.91140884,9.7843055 L9.85355339,9.85355339 C9.67998704,10.0271197 9.41056264,10.0464049 9.2156945,9.91140884 L9.14644661,9.85355339 L6,6.707 L2.85355339,9.85355339 C2.65829124,10.0488155 2.34170876,10.0488155 2.14644661,9.85355339 C1.95118446,9.65829124 1.95118446,9.34170876 2.14644661,9.14644661 L5.293,6 L2.14644661,2.85355339 C1.97288026,2.67998704 1.95359511,2.41056264 2.08859116,2.2156945 L2.14644661,2.14644661 L2.08859116,2.2156945 Z" })
    )
  )
)), vo = m("base-close", `
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 background-color: transparent;
 color: var(--n-close-icon-color);
 border-radius: var(--n-close-border-radius);
 height: var(--n-close-size);
 width: var(--n-close-size);
 font-size: var(--n-close-icon-size);
 outline: none;
 border: none;
 position: relative;
 padding: 0;
`, [d("absolute", `
 height: var(--n-close-icon-size);
 width: var(--n-close-icon-size);
 `), t("&::before", `
 content: "";
 position: absolute;
 width: var(--n-close-size);
 height: var(--n-close-size);
 left: 50%;
 top: 50%;
 transform: translateY(-50%) translateX(-50%);
 transition: inherit;
 border-radius: inherit;
 `), Q("disabled", [t("&:hover", `
 color: var(--n-close-icon-color-hover);
 `), t("&:hover::before", `
 background-color: var(--n-close-color-hover);
 `), t("&:focus::before", `
 background-color: var(--n-close-color-hover);
 `), t("&:active", `
 color: var(--n-close-icon-color-pressed);
 `), t("&:active::before", `
 background-color: var(--n-close-color-pressed);
 `)]), d("disabled", `
 cursor: not-allowed;
 color: var(--n-close-icon-color-disabled);
 background-color: transparent;
 `), d("round", [t("&::before", `
 border-radius: 50%;
 `)])]), uo = B({
  name: "BaseClose",
  props: {
    isButtonTag: {
      type: Boolean,
      default: !0
    },
    clsPrefix: {
      type: String,
      required: !0
    },
    disabled: {
      type: Boolean,
      default: void 0
    },
    focusable: {
      type: Boolean,
      default: !0
    },
    round: Boolean,
    onClick: Function,
    absolute: Boolean
  },
  setup(o) {
    return io("-base-close", vo, J(o, "clsPrefix")), () => {
      const { clsPrefix: c, disabled: s, absolute: e, round: b, isButtonTag: i } = o;
      return n(
        i ? "button" : "div",
        { type: i ? "button" : void 0, tabindex: s || !o.focusable ? -1 : 0, "aria-disabled": s, "aria-label": "close", role: i ? void 0 : "button", disabled: s, class: [
          `${c}-base-close`,
          e && `${c}-base-close--absolute`,
          s && `${c}-base-close--disabled`,
          b && `${c}-base-close--round`
        ], onMousedown: (g) => {
          o.focusable || g.preventDefault();
        }, onClick: o.onClick },
        n(co, { clsPrefix: c }, {
          default: () => n(fo, null)
        })
      );
    };
  }
}), po = {
  paddingSmall: "12px 16px 12px",
  paddingMedium: "19px 24px 20px",
  paddingLarge: "23px 32px 24px",
  paddingHuge: "27px 40px 28px",
  titleFontSizeSmall: "16px",
  titleFontSizeMedium: "18px",
  titleFontSizeLarge: "18px",
  titleFontSizeHuge: "18px",
  closeIconSize: "18px",
  closeSize: "22px"
}, mo = (o) => {
  const { primaryColor: c, borderRadius: s, lineHeight: e, fontSize: b, cardColor: i, textColor2: f, textColor1: g, dividerColor: a, fontWeightStrong: r, closeIconColor: v, closeIconColorHover: h, closeIconColorPressed: x, closeColorHover: C, closeColorPressed: z, modalColor: S, boxShadow1: y, popoverColor: k, actionColor: u } = o;
  return Object.assign(Object.assign({}, po), {
    lineHeight: e,
    color: i,
    colorModal: S,
    colorPopover: k,
    colorTarget: c,
    colorEmbedded: u,
    colorEmbeddedModal: u,
    colorEmbeddedPopover: u,
    textColor: f,
    titleTextColor: g,
    borderColor: a,
    actionColor: u,
    titleFontWeight: r,
    closeColorHover: C,
    closeColorPressed: z,
    closeBorderRadius: s,
    closeIconColor: v,
    closeIconColorHover: h,
    closeIconColorPressed: x,
    fontSizeSmall: b,
    fontSizeMedium: b,
    fontSizeLarge: b,
    fontSizeHuge: b,
    boxShadow: y,
    borderRadius: s
  });
}, ho = {
  name: "Card",
  common: no,
  self: mo
}, xo = ho, Co = t([m("card", `
 font-size: var(--n-font-size);
 line-height: var(--n-line-height);
 display: flex;
 flex-direction: column;
 width: 100%;
 box-sizing: border-box;
 position: relative;
 border-radius: var(--n-border-radius);
 background-color: var(--n-color);
 color: var(--n-text-color);
 word-break: break-word;
 transition: 
 color .3s var(--n-bezier),
 background-color .3s var(--n-bezier),
 box-shadow .3s var(--n-bezier),
 border-color .3s var(--n-bezier);
 `, [U({
  background: "var(--n-color-modal)"
}), d("hoverable", [t("&:hover", "box-shadow: var(--n-box-shadow);")]), d("content-segmented", [t(">", [l("content", {
  paddingTop: "var(--n-padding-bottom)"
})])]), d("content-soft-segmented", [t(">", [l("content", `
 margin: 0 var(--n-padding-left);
 padding: var(--n-padding-bottom) 0;
 `)])]), d("footer-segmented", [t(">", [l("footer", {
  paddingTop: "var(--n-padding-bottom)"
})])]), d("footer-soft-segmented", [t(">", [l("footer", `
 padding: var(--n-padding-bottom) 0;
 margin: 0 var(--n-padding-left);
 `)])]), t(">", [m("card-header", `
 box-sizing: border-box;
 display: flex;
 align-items: center;
 font-size: var(--n-title-font-size);
 padding:
 var(--n-padding-top)
 var(--n-padding-left)
 var(--n-padding-bottom)
 var(--n-padding-left);
 `, [l("main", `
 font-weight: var(--n-title-font-weight);
 transition: color .3s var(--n-bezier);
 flex: 1;
 min-width: 0;
 color: var(--n-title-text-color);
 `), l("extra", `
 display: flex;
 align-items: center;
 font-size: var(--n-font-size);
 font-weight: 400;
 transition: color .3s var(--n-bezier);
 color: var(--n-text-color);
 `), l("close", `
 margin: 0 0 0 8px;
 transition:
 background-color .3s var(--n-bezier),
 color .3s var(--n-bezier);
 `)]), l("action", `
 box-sizing: border-box;
 transition:
 background-color .3s var(--n-bezier),
 border-color .3s var(--n-bezier);
 background-clip: padding-box;
 background-color: var(--n-action-color);
 `), l("content", "flex: 1; min-width: 0;"), l("content, footer", `
 box-sizing: border-box;
 padding: 0 var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left);
 font-size: var(--n-font-size);
 `, [t("&:first-child", {
  paddingTop: "var(--n-padding-bottom)"
})]), l("action", `
 background-color: var(--n-action-color);
 padding: var(--n-padding-bottom) var(--n-padding-left);
 border-bottom-left-radius: var(--n-border-radius);
 border-bottom-right-radius: var(--n-border-radius);
 `)]), m("card-cover", `
 overflow: hidden;
 width: 100%;
 border-radius: var(--n-border-radius) var(--n-border-radius) 0 0;
 `, [t("img", `
 display: block;
 width: 100%;
 `)]), d("bordered", `
 border: 1px solid var(--n-border-color);
 `, [t("&:target", "border-color: var(--n-color-target);")]), d("action-segmented", [t(">", [l("action", [t("&:not(:first-child)", {
  borderTop: "1px solid var(--n-border-color)"
})])])]), d("content-segmented, content-soft-segmented", [t(">", [l("content", {
  transition: "border-color 0.3s var(--n-bezier)"
}, [t("&:not(:first-child)", {
  borderTop: "1px solid var(--n-border-color)"
})])])]), d("footer-segmented, footer-soft-segmented", [t(">", [l("footer", {
  transition: "border-color 0.3s var(--n-bezier)"
}, [t("&:not(:first-child)", {
  borderTop: "1px solid var(--n-border-color)"
})])])]), d("embedded", `
 background-color: var(--n-color-embedded);
 `)]), oo(m("card", `
 background: var(--n-color-modal);
 `, [d("embedded", `
 background-color: var(--n-color-embedded-modal);
 `)])), eo(m("card", `
 background: var(--n-color-popover);
 `, [d("embedded", `
 background-color: var(--n-color-embedded-popover);
 `)]))]), P = {
  title: String,
  contentStyle: [Object, String],
  headerStyle: [Object, String],
  headerExtraStyle: [Object, String],
  footerStyle: [Object, String],
  embedded: Boolean,
  segmented: {
    type: [Boolean, Object],
    default: !1
  },
  size: {
    type: String,
    default: "medium"
  },
  bordered: {
    type: Boolean,
    default: !0
  },
  closable: Boolean,
  hoverable: Boolean,
  role: String,
  onClose: [Function, Array],
  tag: {
    type: String,
    default: "div"
  }
}, Ro = go(P), zo = Object.assign(Object.assign({}, L.props), P), Eo = B({
  name: "Card",
  props: zo,
  setup(o) {
    const c = () => {
      const { onClose: r } = o;
      r && lo(r);
    }, { inlineThemeDisabled: s, mergedClsPrefixRef: e, mergedRtlRef: b } = ro(o), i = L("Card", "-card", Co, xo, o, e), f = to("Card", b, e), g = $(() => {
      const { size: r } = o, { self: { color: v, colorModal: h, colorTarget: x, textColor: C, titleTextColor: z, titleFontWeight: S, borderColor: y, actionColor: k, borderRadius: u, lineHeight: T, closeIconColor: R, closeIconColorHover: E, closeIconColorPressed: M, closeColorHover: O, closeColorPressed: _, closeBorderRadius: j, closeIconSize: I, closeSize: F, boxShadow: H, colorPopover: N, colorEmbedded: V, colorEmbeddedModal: W, colorEmbeddedPopover: D, [w("padding", r)]: K, [w("fontSize", r)]: q, [w("titleFontSize", r)]: A }, common: { cubicBezierEaseInOut: X } } = i.value, { top: Y, left: Z, bottom: G } = so(K);
      return {
        "--n-bezier": X,
        "--n-border-radius": u,
        "--n-color": v,
        "--n-color-modal": h,
        "--n-color-popover": N,
        "--n-color-embedded": V,
        "--n-color-embedded-modal": W,
        "--n-color-embedded-popover": D,
        "--n-color-target": x,
        "--n-text-color": C,
        "--n-line-height": T,
        "--n-action-color": k,
        "--n-title-text-color": z,
        "--n-title-font-weight": S,
        "--n-close-icon-color": R,
        "--n-close-icon-color-hover": E,
        "--n-close-icon-color-pressed": M,
        "--n-close-color-hover": O,
        "--n-close-color-pressed": _,
        "--n-border-color": y,
        "--n-box-shadow": H,
        // size
        "--n-padding-top": Y,
        "--n-padding-bottom": G,
        "--n-padding-left": Z,
        "--n-font-size": q,
        "--n-title-font-size": A,
        "--n-close-size": F,
        "--n-close-icon-size": I,
        "--n-close-border-radius": j
      };
    }), a = s ? ao("card", $(() => o.size[0]), g, o) : void 0;
    return {
      rtlEnabled: f,
      mergedClsPrefix: e,
      mergedTheme: i,
      handleCloseClick: c,
      cssVars: s ? void 0 : g,
      themeClass: a == null ? void 0 : a.themeClass,
      onRender: a == null ? void 0 : a.onRender
    };
  },
  render() {
    const { segmented: o, bordered: c, hoverable: s, mergedClsPrefix: e, rtlEnabled: b, onRender: i, embedded: f, tag: g, $slots: a } = this;
    return i == null || i(), n(
      g,
      { class: [
        `${e}-card`,
        this.themeClass,
        f && `${e}-card--embedded`,
        {
          [`${e}-card--rtl`]: b,
          [`${e}-card--content${typeof o != "boolean" && o.content === "soft" ? "-soft" : ""}-segmented`]: o === !0 || o !== !1 && o.content,
          [`${e}-card--footer${typeof o != "boolean" && o.footer === "soft" ? "-soft" : ""}-segmented`]: o === !0 || o !== !1 && o.footer,
          [`${e}-card--action-segmented`]: o === !0 || o !== !1 && o.action,
          [`${e}-card--bordered`]: c,
          [`${e}-card--hoverable`]: s
        }
      ], style: this.cssVars, role: this.role },
      p(a.cover, (r) => r && n("div", { class: `${e}-card-cover`, role: "none" }, r)),
      p(a.header, (r) => r || this.title || this.closable ? n(
        "div",
        { class: `${e}-card-header`, style: this.headerStyle },
        n("div", { class: `${e}-card-header__main`, role: "heading" }, r || this.title),
        p(a["header-extra"], (v) => v && n("div", { class: `${e}-card-header__extra`, style: this.headerExtraStyle }, v)),
        this.closable ? n(uo, { clsPrefix: e, class: `${e}-card-header__close`, onClick: this.handleCloseClick, absolute: !0 }) : null
      ) : null),
      p(a.default, (r) => r && n("div", { class: `${e}-card__content`, style: this.contentStyle, role: "none" }, r)),
      p(a.footer, (r) => r && [
        n("div", { class: `${e}-card__footer`, style: this.footerStyle, role: "none" }, r)
      ]),
      p(a.action, (r) => r && n("div", { class: `${e}-card__action`, role: "none" }, r))
    );
  }
});
export {
  Eo as N,
  uo as a,
  P as b,
  xo as c,
  Ro as d,
  go as k
};