@shopware-ag/meteor-component-library
Version:
The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).
290 lines (289 loc) • 8.51 kB
JavaScript
import '../mt-checkbox.css';
"use strict";
const vue = require("vue");
const mtIcon_vue_vue_type_style_index_0_lang = require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
const MtBaseField = require("../mt-base-field-6a3a56a0.js");
const MtFieldError = require("./MtFieldError.js");
const id = require("../id-8e80f112.js");
const useFutureFlags = require("../useFutureFlags-35232480.js");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
require("./MtInheritanceSwitch.js");
require("./MtTooltip.js");
require("../floating-ui.vue-48d5c774.js");
require("../floating-ui.dom-fe395b67.js");
require("../useIsInsideTooltip-f4674e27.js");
require("../index-ab705c2a.js");
require("vue-i18n");
require("./MtFieldCopyable.js");
require("../tooltip.directive-7b51326d.js");
require("./MtHelpText.js");
require("./MtText.js");
const _sfc_main = vue.defineComponent({
name: "MtCheckbox",
components: {
"mt-icon": mtIcon_vue_vue_type_style_index_0_lang._sfc_main,
"mt-base-field": MtBaseField.MtBaseField,
"mt-field-error": MtFieldError
},
mixins: [MtBaseField.MtFormFieldMixin],
props: {
/**
* The name of the input field when submitting a form.
*/
name: {
type: String,
required: false,
default: void 0
},
/**
* A label for the checkbox.
*/
label: {
type: String,
required: false,
default: void 0
},
/**
* Toggles the disabled state of the checkbox.
*/
disabled: {
type: Boolean,
required: false,
default: false
},
/**
* Determines the checked state of the checkbox.
*/
checked: {
type: Boolean,
required: false,
default: void 0
},
/**
* v-model binding for the checkbox value.
*/
modelValue: {
type: Boolean,
required: false,
default: void 0
},
/**
* Determines if the field is partially checked.
*/
partial: {
type: Boolean,
required: false,
default: false
},
/**
* Inherited value from another SalesChannel.
*/
inheritedValue: {
type: Boolean,
required: false,
default: null
},
/**
* Determines if the field is inherited.
*/
isInherited: {
type: Boolean,
required: false,
default: false
},
/**
* Error object for this field.
*/
error: {
type: Object,
required: false,
default: null
},
/**
* Determines if the field is surrounded by a border.
*/
bordered: {
type: Boolean,
required: false,
default: false
},
/**
* Help text with additional information for the field.
*/
helpText: {
type: String,
required: false,
default: null
},
/**
* Marks the field as required with an asterix.
*/
required: {
type: Boolean,
required: false,
default: false
}
},
emits: [
"update:modelValue",
"update:checked",
// @deprecated - Will be removed. Use `update:modelValue` instead.
"change",
"inheritance-remove",
"inheritance-restore"
],
setup() {
const futureFlags = useFutureFlags.useFutureFlags();
const checkboxClasses = vue.computed(() => ({
"mt-switch--future-remove-default-margin": futureFlags.removeDefaultMargin
}));
return {
checkboxClasses
};
},
data() {
return {
currentValue: this.checked,
id: void 0
};
},
computed: {
MtCheckboxFieldClasses() {
return {
"has--error": !!this.hasError,
"is--disabled": this.disabled,
"is--inherited": !!this.isInheritedComputed,
"is--bordered": this.bordered,
"is--partly-checked": this.isPartlyChecked
};
},
identification() {
return this.name || `mt-field--${this.id}`;
},
hasError() {
return this.error && this.error.code !== 0;
},
inputState() {
if (this.isInheritedComputed) {
return this.inheritedValue;
}
if (this.checked !== void 0) {
return this.currentValue ?? false;
}
if (this.modelValue !== void 0) {
return this.modelValue;
}
return this.currentValue ?? false;
},
isInheritanceField() {
if (this.$attrs.isInheritanceField) {
return true;
}
return this.inheritedValue !== null;
},
isInheritedComputed() {
if (this.isInherited) {
return true;
}
return this.isInheritanceField && this.currentValue === null;
},
isDisabled() {
return this.disabled || this.isInheritedComputed;
},
isPartlyChecked() {
return this.partial && !this.inputState;
},
iconName() {
return this.isPartlyChecked ? "regular-minus-xxs" : "regular-checkmark-xxs";
}
},
watch: {
checked: {
handler() {
this.currentValue = this.checked;
},
immediate: true
},
modelValue: {
handler() {
if (this.checked === void 0) {
this.currentValue = this.modelValue;
}
},
immediate: true
}
},
mounted() {
this.id = id.createId();
if (this.checked !== void 0) {
console.warn(
"[MtCheckbox] The `checked` prop is deprecated and will be removed. Please use v-model (modelValue/update:modelValue) instead."
);
}
},
methods: {
onChange(changeEvent) {
const target = changeEvent.target;
const next = target.checked;
this.$emit("update:modelValue", next);
this.$emit("update:checked", next);
this.$emit("change", next);
}
}
});
const mtCheckbox_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = { class: "mt-field--checkbox__container" };
const _hoisted_2 = { class: "mt-field--checkbox__content" };
const _hoisted_3 = { class: "mt-field__checkbox" };
const _hoisted_4 = ["id", "name", "checked", "disabled", ".indeterminate", "required"];
const _hoisted_5 = { class: "mt-field__checkbox-state" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_mt_icon = vue.resolveComponent("mt-icon");
const _component_mt_base_field = vue.resolveComponent("mt-base-field");
const _component_mt_field_error = vue.resolveComponent("mt-field-error");
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createElementVNode("div", {
class: vue.normalizeClass(["mt-field--checkbox", { ..._ctx.MtCheckboxFieldClasses, ..._ctx.checkboxClasses }])
}, [
vue.createElementVNode("div", _hoisted_2, [
vue.createElementVNode("div", _hoisted_3, [
vue.createElementVNode("input", {
id: _ctx.identification,
type: "checkbox",
name: _ctx.identification,
checked: _ctx.inputState,
disabled: _ctx.isDisabled,
".indeterminate": _ctx.partial,
required: _ctx.required,
onChange: _cache[0] || (_cache[0] = vue.withModifiers((...args) => _ctx.onChange && _ctx.onChange(...args), ["stop"]))
}, null, 40, _hoisted_4),
vue.createElementVNode("div", _hoisted_5, [
vue.createVNode(_component_mt_icon, { name: _ctx.iconName }, null, 8, ["name"])
])
]),
vue.createVNode(_component_mt_base_field, {
disabled: _ctx.isDisabled,
"is-inheritance-field": _ctx.isInheritanceField,
"is-inherited": _ctx.isInherited,
name: _ctx.identification,
"has-focus": false,
"help-text": _ctx.helpText,
required: _ctx.required,
onInheritanceRestore: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("inheritance-restore", $event)),
onInheritanceRemove: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("inheritance-remove", $event))
}, {
label: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "label", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
])
]),
_: 3
}, 8, ["disabled", "is-inheritance-field", "is-inherited", "name", "help-text", "required"])
])
], 2),
vue.createVNode(_component_mt_field_error, { error: _ctx.error }, null, 8, ["error"])
]);
}
const MtCheckbox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = MtCheckbox;
//# sourceMappingURL=MtCheckbox.js.map