@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 l, inject as w, onMounted as I } from "vue";
import { resolveAppearance as D, createPropsResolver as j } 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 F = /* @__PURE__ */ new Map([
  ["appearance", D],
  ["size", (e, t) => {
    const o = {};
    return t.width && (o.width = Number(t.width)), t.height && (o.height = Number(t.height)), o;
  }]
]), O = "https://json-schema.org/draft/2020-12/schema", R = "https://farris-design.gitee.io/accordion.schema.json", q = "accordion", B = "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: O,
  $id: R,
  title: q,
  description: B,
  type: z,
  properties: M,
  required: T
};
function E(e, t, o) {
  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
}, $ = {
  customClass: { type: String, default: "" },
  enableFold: { type: Boolean, default: !0 },
  expanded: { type: Boolean, default: !1 },
  height: { type: Number },
  width: { type: Number }
}, H = j($, U, F, E, L), m = /* @__PURE__ */ g({
  name: "FAccordion",
  props: $,
  emits: [],
  setup(e, t) {
    const o = a(() => ({
      height: e.height ? `${e.height}px` : "",
      width: e.width ? `${e.width}px` : ""
    }));
    P("accordionContext", {
      parentProps: e
    });
    const i = a(() => S({
      "farris-panel": !0,
      accordion: !0
    }, e.customClass));
    return () => n("div", {
      class: i.value,
      style: o.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
}, A = {
  active: { type: Boolean, default: !1 },
  customClass: { type: String, default: "" },
  disabled: { type: Boolean, default: !1 },
  height: { type: Number },
  iconUri: { type: String, default: "" },
  maxHeight: { type: Number },
  title: { type: String, default: "" },
  width: { type: Number }
}, x = j(A, te, F), C = /* @__PURE__ */ g({
  name: "FAccordionItem",
  props: A,
  emits: ["ClickHeader"],
  setup(e, t) {
    const o = l(), i = w("accordionContext"), r = l(e.title), c = l(e.active);
    function d() {
      var s;
      e.disabled || !((s = i == null ? void 0 : i.parentProps) != null && s.enableFold) || (c.value = !c.value);
    }
    function h(s) {
      t.emit("ClickHeader"), d();
    }
    const u = a(() => {
      const s = {
        card: !0,
        "farris-panel-item": !0,
        "f-state-disabled": e.disabled,
        "f-state-selected": c.value
      };
      return S(s, e.customClass);
    }), p = a(() => !0), f = a(() => ({
      "f-icon": !0,
      "f-accordion-collapse": !c.value,
      "f-accordion-expand": c.value
    }));
    function v() {
      return o.value ? o.value.getBoundingClientRect().height : 0;
    }
    const y = 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 ? `${v()}px` : 0
      };
      return c.value || (s.overflow = "hidden"), s;
    });
    return I(() => {
      var s;
      (s = i == null ? void 0 : i.parentProps) != null && s.expanded && (c.value = !0);
    }), () => n("div", {
      class: u.value
    }, [n("div", {
      class: "card-header",
      onClick: h
    }, [n("div", {
      class: "panel-item-title"
    }, [e.iconUri && n("img", {
      class: "panel-item-title-image",
      src: e.iconUri,
      title: "title-icon"
    }, null), p.value && n("span", null, [r.value]), t.slots.head && t.slots.head(), n("i", {
      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: y.value
    }, [n("div", {
      class: "card-body",
      ref: o
    }, [t.slots.default && t.slots.default()])])]);
  }
}), ne = /* @__PURE__ */ g({
  name: "FAccordionDesign",
  props: $,
  emits: [],
  setup(e, t) {
    const o = a(() => ({
      height: e.height ? `${e.height}px` : "",
      width: e.width ? `${e.width}px` : ""
    })), i = a(() => {
      const h = e.customClass.split(" "), u = {
        "farris-panel": !0,
        accordion: !0
      };
      return h.reduce((p, f) => (p[f] = !0, p), u), u;
    }), r = l(), c = w("design-item-context"), d = N(r, c);
    return I(() => {
      r.value.componentInstance = d;
    }), t.expose(d.value), () => n("div", {
      ref: r,
      class: i.value,
      style: o.value
    }, [t.slots.default && t.slots.default()]);
  }
}), ie = /* @__PURE__ */ g({
  name: "FAccordionItemDesign",
  props: A,
  emits: [],
  setup(e, t) {
    const o = l(e.title), i = l(!1), r = l(!1);
    function c() {
      i.value = !i.value;
    }
    function d(b) {
      c();
    }
    const h = a(() => ({
      "f-state-disabled": r.value,
      card: !0,
      "farris-panel-item": !0,
      "f-state-selected": i.value
    })), u = a(() => !0), p = a(() => !1), f = a(() => ({
      "f-icon": !0,
      "f-accordion-collapse": !i.value,
      "f-accordion-expand": i.value
    })), v = a(() => {
      const b = e.maxHeight ? {
        transition: "maxHeight 0.36s ease 0s",
        "max-height": i.value ? `${e.maxHeight}px` : 0
      } : {
        transition: "height 0.36s ease 0s",
        height: i.value ? `${e.height}px` : 0
      };
      return i.value || (b.overflow = "hidden"), b;
    });
    function y() {
      return !0;
    }
    function s() {
      return !1;
    }
    function k() {
      return !0;
    }
    return t.expose({
      canMove: y(),
      canSelectParent: s(),
      canDelete: k(),
      canNested: !0
    }), () => n("div", {
      class: h.value
    }, [n("div", {
      class: "card-header",
      onClick: d
    }, [n("div", {
      class: "panel-item-title"
    }, [u.value && n("span", null, [o.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(C.name, C);
};
m.register = (e, t, o, i) => {
  e.accordion = m, e["accordion-item"] = C, t.accordion = H, t["accordion-item"] = x;
};
m.registerDesigner = (e, t, o) => {
  e.accordion = ne, e["accordion-item"] = ie, t.accordion = H, t["accordion-item"] = x;
};
export {
  m as FAccordion,
  C as FAccordionItem,
  A as accordionItemProps,
  x as accordionItemPropsResolver,
  $ as accordionProps,
  H as accordionPropsResolver,
  m as default
};