@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
81 lines (80 loc) • 2.74 kB
JavaScript
import { NeonFunctionalColor as n } from "../../../model/common/color/NeonFunctionalColor.es.js";
import { NeonHorizontalPosition as l } from "../../../model/common/position/NeonHorizontalPosition.es.js";
import { NeonSize as i } from "../../../model/common/size/NeonSize.es.js";
import { NeonVerticalPosition as a } from "../../../model/common/position/NeonVerticalPosition.es.js";
import r from "../expansion-indicator/NeonExpansionIndicator.vue.es.js";
import d from "../icon/NeonIcon.vue.es.js";
import { defineComponent as p } from "vue";
const S = p({
name: "NeonExpansionPanel",
components: {
NeonExpansionIndicator: r,
NeonIcon: d
},
props: {
/**
* A boolean indicating whether the expansion panel is expanded.
*/
modelValue: { type: Boolean, required: !0 },
/**
* The label of the expansion button
*/
label: { type: String },
/**
* Provide an id to support aria-controls. The id will be placed on the expansion panel content wrapper and the
* aria-controls on the header (triggering the expansion).
*/
id: { type: String, default: null },
/**
* An icon to display to the left of the label
*/
icon: { type: String, default: null },
/**
* The position of the expansion button. This can be located above the content to expand or below it.
*/
position: { type: String, default: a.Top },
/**
* The position of the expansion button. This can be located above the content to expand or below it.
*/
indicatorPosition: { type: String, default: l.Right },
/**
* The size of the expansion panel button.
*/
size: { type: String, default: i.Medium },
/**
* The color of the expansion panel button.
*/
color: { type: String, default: n.Neutral },
/**
* Whether the label and expansion indicator should be flush with the width of the container.
*/
fullWidth: { type: Boolean, default: !1 },
/**
* The disabled state of the expansion panel
*/
disabled: { type: Boolean, default: !1 },
/**
* Indent the expansion panel content
*/
indent: { type: Boolean, default: !1 }
},
emits: [
/**
* Emitted when the expansion panel button is clicked.
* @type {boolean} The new open state of the expansion panel.
*/
"update:modelValue"
],
setup(e, { emit: t, slots: o }) {
return !e.label && !o.header && console.error("A label or a header slot most be provided to the NeonExpansionPanel component"), {
toggleExpanded: () => {
e.disabled || t("update:modelValue", !e.modelValue);
},
slots: o
};
}
});
export {
S as default
};
//# sourceMappingURL=NeonExpansionPanel.es.js.map