@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
71 lines (70 loc) • 2.2 kB
JavaScript
import { defineComponent as t } from "vue";
import { NeonVerticalPosition as n } from "../../../common/enums/NeonVerticalPosition.es.js";
import { NeonSize as l } from "../../../common/enums/NeonSize.es.js";
import i from "../expansion-indicator/NeonExpansionIndicator.vue.es.js";
import a from "../icon/NeonIcon.vue.es.js";
import { NeonFunctionalColor as r } from "../../../common/enums/NeonFunctionalColor.es.js";
const g = t({
name: "NeonExpansionPanel",
components: {
NeonExpansionIndicator: i,
NeonIcon: a
},
props: {
/**
* A boolean indicating whether the expansion panel is expanded.
*/
modelValue: { type: Boolean, required: !0 },
/**
* The label of the expansion button
*/
label: { type: String, required: !0 },
/**
* 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: n.Top },
/**
* The size of the expansion panel button.
*/
size: { type: String, default: l.Medium },
/**
* The color of the expansion panel button.
*/
color: { type: String, default: r.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 }
},
emits: [
/**
* Emitted when the expansion panel button is clicked.
* @type {boolean} The new open state of the expansion panel.
*/
"update:modelValue"
],
setup(e, { emit: o }) {
return {
toggleExpanded: () => {
e.disabled || o("update:modelValue", !e.modelValue);
}
};
}
});
export {
g as default
};
//# sourceMappingURL=NeonExpansionPanel.es.js.map