@farris/ui-vue/components/accordion/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as g, computed as a, provide as P, createVNode as n, ref as d, inject as I, onMounted as j } from "vue";
import { resolveAppearance as D, createPropsResolver as F } from "../dynamic-resolver/index.esm.js";
import { getCustomClass as S } from "../common/index.esm.js";
import { useDesignerComponent as N } from "../designer-canvas/index.esm.js";
const H = /* @__PURE__ */ new Map([
  ["appearance", D],
  ["size", (e, t) => {
    const i = {};
    return t.width && (i.width = Number(t.width)), t.height && (i.height = Number(t.height)), i;
  }]
]), B = "https://json-schema.org/draft/2020-12/schema", O = "https://farris-design.gitee.io/accordion.schema.json", R = "accordion", q = "A Farris Container Component", z = "object", M = {
  id: {
    description: "The unique identifier for a Accordion",
    type: "string"
  },
  type: {
    description: "The type string of Accordion component",
    type: "string",
    default: "accordion"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  contents: {
    description: "",
    type: "array",
    default: []
  },
  customClass: {
    description: "",
    type: "string",
    default: ""
  },
  size: {
    description: "",
    type: "object",
    properties: {
      width: {
        type: "number"
      },
      height: {
        type: "number"
      }
    },
    default: null
  },
  enableFold: {
    description: "",
    type: "boolean",
    default: !0
  },
  expanded: {
    description: "",
    type: "boolean",
    default: !1
  }
}, T = [
  "id",
  "type",
  "contents"
], U = {
  $schema: B,
  $id: O,
  title: R,
  description: q,
  type: z,
  properties: M,
  required: T
};
function E(e, t, i) {
  return t;
}
const V = "accordion", G = "A Farris Component", J = "object", K = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  }
}, L = {
  title: V,
  description: G,
  type: J,
  categories: K
}, A = {
  /**
   * 组件自定义样式，多个时使用空格分隔,如'class1 class2'
   * @default ''
   */
  customClass: { type: String, default: "" },
  /**
   * 是否允许收折
   * @default true
   */
  enableFold: { type: Boolean, default: !0 },
  /**
   * 是否展开所有面板
   * @default false
   */
  expanded: { type: Boolean, default: !1 },
  /**
   * 设置组件的高度
   */
  height: { type: Number },
  /**
   * 设置组件的宽度
   */
  width: { type: Number }
}, x = F(A, U, H, E, L), m = /* @__PURE__ */ g({
  name: "FAccordion",
  props: A,
  emits: [],
  setup(e, t) {
    const i = a(() => ({
      height: e.height ? `${e.height}px` : "",
      width: e.width ? `${e.width}px` : ""
    }));
    P("accordionContext", {
      parentProps: e
    });
    const o = a(() => S({
      "farris-panel": !0,
      accordion: !0
    }, e.customClass));
    return () => n("div", {
      class: o.value,
      style: i.value
    }, [t.slots.default && t.slots.default()]);
  }
}), Q = "https://json-schema.org/draft/2020-12/schema", W = "https://farris-design.gitee.io/accordion-item.schema.json", X = "AccordionItem", Y = "A Farris Container Component", Z = "object", _ = {
  id: {
    description: "The unique identifier for a Accordion Item",
    type: "string"
  },
  type: {
    description: "The type string of Accordion Item component",
    type: "string"
  },
  contents: {
    description: "",
    type: "array",
    default: []
  },
  size: {
    description: "",
    type: "object",
    properties: {
      width: {
        type: "number"
      },
      height: {
        type: "number"
      }
    },
    default: null
  },
  title: {
    description: "",
    type: "string",
    default: ""
  },
  disable: {
    description: "",
    type: "boolean",
    default: !1
  }
}, ee = [
  "id",
  "type",
  "contents"
], te = {
  $schema: Q,
  $id: W,
  title: X,
  description: Y,
  type: Z,
  properties: _,
  required: ee
}, w = {
  active: { type: Boolean, default: !1 },
  customClass: { type: String, default: "" },
  disabled: { type: Boolean, default: !1 },
  enableFold: { type: Boolean, default: !0 },
  height: { type: Number },
  iconUri: { type: String, default: "" },
  maxHeight: { type: Number },
  title: { type: String, default: "" },
  width: { type: Number }
}, k = F(w, te, H), $ = /* @__PURE__ */ g({
  name: "FAccordionItem",
  props: w,
  emits: ["ClickHeader"],
  setup(e, t) {
    const i = d(), o = I("accordionContext"), r = d(e.title), c = d(e.active), l = a(() => {
      var s;
      return !!((s = o == null ? void 0 : o.parentProps) != null && s.enableFold) && e.enableFold;
    });
    function h() {
      e.disabled || !l.value || (c.value = !c.value);
    }
    function u(s) {
      t.emit("ClickHeader"), h();
    }
    const p = a(() => {
      const s = {
        card: !0,
        "farris-panel-item": !0,
        "f-state-disabled": e.disabled,
        "f-state-selected": c.value
      };
      return S(s, e.customClass);
    }), f = a(() => !0), v = a(() => ({
      "f-icon": !0,
      "f-accordion-collapse": !c.value,
      "f-accordion-expand": c.value
    }));
    function y() {
      return i.value ? i.value.getBoundingClientRect().height : 0;
    }
    const b = a(() => {
      const s = e.maxHeight ? {
        transition: "maxHeight 0.36s ease 0s",
        "max-height": c.value ? `${e.maxHeight}px` : 0
      } : {
        transition: "height 0.36s ease 0s",
        height: c.value ? `${y()}px` : 0
      };
      return c.value || (s.overflow = "hidden"), s;
    });
    return j(() => {
      var s;
      (s = o == null ? void 0 : o.parentProps) != null && s.expanded && (c.value = !0);
    }), () => n("div", {
      class: p.value
    }, [n("div", {
      class: "card-header",
      onClick: u
    }, [n("div", {
      class: "panel-item-title"
    }, [e.iconUri && n("img", {
      class: "panel-item-title-image",
      src: e.iconUri,
      title: "title-icon"
    }, null), f.value && n("span", null, [r.value]), t.slots.head && t.slots.head(), l.value && n("i", {
      class: v.value
    }, null)]), n("div", {
      class: "panel-item-tool"
    }, [t.slots.toolbar && t.slots.toolbar()]), n("div", {
      class: "panel-item-clear"
    }, null)]), n("div", {
      style: b.value
    }, [n("div", {
      class: "card-body",
      ref: i
    }, [t.slots.default && t.slots.default()])])]);
  }
}), ne = /* @__PURE__ */ g({
  name: "FAccordionDesign",
  props: A,
  emits: [],
  setup(e, t) {
    const i = a(() => ({
      height: e.height ? `${e.height}px` : "",
      width: e.width ? `${e.width}px` : ""
    })), o = a(() => {
      const h = e.customClass.split(" "), u = {
        "farris-panel": !0,
        accordion: !0
      };
      return h.reduce((p, f) => (p[f] = !0, p), u), u;
    }), r = d(), c = I("design-item-context"), l = N(r, c);
    return j(() => {
      r.value.componentInstance = l;
    }), t.expose(l.value), () => n("div", {
      ref: r,
      class: o.value,
      style: i.value
    }, [t.slots.default && t.slots.default()]);
  }
}), oe = /* @__PURE__ */ g({
  name: "FAccordionItemDesign",
  props: w,
  emits: [],
  setup(e, t) {
    const i = d(e.title), o = d(!1), r = d(!1);
    function c() {
      o.value = !o.value;
    }
    function l(C) {
      c();
    }
    const h = a(() => ({
      "f-state-disabled": r.value,
      card: !0,
      "farris-panel-item": !0,
      "f-state-selected": o.value
    })), u = a(() => !0), p = a(() => !1), f = a(() => ({
      "f-icon": !0,
      "f-accordion-collapse": !o.value,
      "f-accordion-expand": o.value
    })), v = a(() => {
      const C = e.maxHeight ? {
        transition: "maxHeight 0.36s ease 0s",
        "max-height": o.value ? `${e.maxHeight}px` : 0
      } : {
        transition: "height 0.36s ease 0s",
        height: o.value ? `${e.height}px` : 0
      };
      return o.value || (C.overflow = "hidden"), C;
    });
    function y() {
      return !0;
    }
    function b() {
      return !1;
    }
    function s() {
      return !0;
    }
    return t.expose({
      canMove: y(),
      canSelectParent: b(),
      canDelete: s(),
      canNested: !0
    }), () => n("div", {
      class: h.value
    }, [n("div", {
      class: "card-header",
      onClick: l
    }, [n("div", {
      class: "panel-item-title"
    }, [u.value && n("span", null, [i.value]), p.value && t.slots.head && t.slots.head(), n("span", {
      class: f.value
    }, null)]), n("div", {
      class: "panel-item-tool"
    }, [t.slots.toolbar && t.slots.toolbar()]), n("div", {
      class: "panel-item-clear"
    }, null)]), n("div", {
      style: v.value
    }, [n("div", {
      class: "card-body drag-container"
    }, [t.slots.default && t.slots.default()])])]);
  }
});
m.install = (e) => {
  e.component(m.name, m), e.component($.name, $);
};
m.register = (e, t, i, o) => {
  e.accordion = m, e["accordion-item"] = $, t.accordion = x, t["accordion-item"] = k;
};
m.registerDesigner = (e, t, i) => {
  e.accordion = ne, e["accordion-item"] = oe, t.accordion = x, t["accordion-item"] = k;
};
export {
  m as FAccordion,
  $ as FAccordionItem,
  w as accordionItemProps,
  k as accordionItemPropsResolver,
  A as accordionProps,
  x as accordionPropsResolver,
  m as default
};