@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/).
291 lines (290 loc) • 8.5 kB
JavaScript
import '../mt-checkbox.css';
import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, withModifiers, createVNode, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
import { _ as _sfc_main$1 } from "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import { M as MtBaseField, a as MtFormFieldMixin } from "../mt-base-field-7a978dcf.mjs";
import MtFieldError from "./MtFieldError.js";
import { c as createId } from "../id-1e5b8276.mjs";
import { u as useFutureFlags } from "../useFutureFlags-2be3e179.mjs";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
import "./MtInheritanceSwitch.js";
import "./MtTooltip.js";
import "../floating-ui.vue-fe27ebef.mjs";
import "../floating-ui.dom-f450fda4.mjs";
import "../useIsInsideTooltip-0c3bd290.mjs";
import "../index-221bad05.mjs";
import "vue-i18n";
import "./MtFieldCopyable.js";
import "../tooltip.directive-a5042569.mjs";
import "./MtHelpText.js";
import "./MtText.js";
const _sfc_main = defineComponent({
name: "MtCheckbox",
components: {
"mt-icon": _sfc_main$1,
"mt-base-field": MtBaseField,
"mt-field-error": MtFieldError
},
mixins: [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();
const checkboxClasses = 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 = 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 = resolveComponent("mt-icon");
const _component_mt_base_field = resolveComponent("mt-base-field");
const _component_mt_field_error = resolveComponent("mt-field-error");
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", {
class: normalizeClass(["mt-field--checkbox", { ..._ctx.MtCheckboxFieldClasses, ..._ctx.checkboxClasses }])
}, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
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] = withModifiers((...args) => _ctx.onChange && _ctx.onChange(...args), ["stop"]))
}, null, 40, _hoisted_4),
createElementVNode("div", _hoisted_5, [
createVNode(_component_mt_icon, { name: _ctx.iconName }, null, 8, ["name"])
])
]),
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: withCtx(() => [
renderSlot(_ctx.$slots, "label", {}, () => [
createTextVNode(toDisplayString(_ctx.label), 1)
])
]),
_: 3
}, 8, ["disabled", "is-inheritance-field", "is-inherited", "name", "help-text", "required"])
])
], 2),
createVNode(_component_mt_field_error, { error: _ctx.error }, null, 8, ["error"])
]);
}
const MtCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
MtCheckbox as default
};
//# sourceMappingURL=MtCheckbox.js.map