@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
76 lines (75 loc) • 2.09 kB
JavaScript
import { defineComponent as u, useAttrs as s, computed as m } from "vue";
import { NeonSize as p } from "../../../common/enums/NeonSize.es.js";
import { NeonFunctionalColor as c } from "../../../common/enums/NeonFunctionalColor.es.js";
import { NeonToggleStyle as f } from "../../../common/enums/NeonToggleStyle.es.js";
import { NeonOrientation as g } from "../../../common/enums/NeonOrientation.es.js";
import y from "../../presentation/icon/NeonIcon.vue.es.js";
const C = u({
name: "NeonToggle",
components: {
NeonIcon: y
},
props: {
/**
* The name of the radio button group.
*/
name: { type: String, required: !0 },
/**
* The key of the selected option.
*/
modelValue: { type: String, required: !0 },
/**
* The list of options to present to the user.
*/
model: { type: Array, required: !0 },
/**
* The style of toggle to display to the user.
*/
toggleStyle: { type: String, default: () => f.Toggle },
/**
* The size of the toggle.
*/
size: { type: String, default: () => p.Medium },
/**
* The orientation of the toggle if the style is a radio button group.
*/
orientation: { type: String, default: () => g.Vertical },
/**
* The color of the toggle.
*/
color: { type: String, default: () => c.Neutral },
/**
* Whether the toggle is disabled.
*/
disabled: { type: Boolean, default: !1 }
},
emits: [
/**
* Emitted when the selected value changes.
* @type {string} The key of the selected model item.
*/
"update:modelValue"
],
setup(t, { emit: n, slots: r }) {
const i = s(), o = (e) => {
n("update:modelValue", e);
}, l = (e) => {
t.disabled || o(e);
}, a = m(() => {
const { onClick: e, ...d } = i;
return d;
});
return {
selectOption: (e) => {
!t.disabled && !e.disabled && o(e.key);
},
onInput: l,
sanitizedAttributes: a,
slots: r
};
}
});
export {
C as default
};
//# sourceMappingURL=NeonToggle.es.js.map