@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/).
363 lines (362 loc) • 10.4 kB
JavaScript
import './mt-base-field.css';
import { Comment, Text, Fragment, defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, mergeProps, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createVNode } from "vue";
import MtInheritanceSwitch from "./esm/MtInheritanceSwitch.js";
import MtFieldCopyable from "./esm/MtFieldCopyable.js";
import MtHelpText from "./esm/MtHelpText.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";
function hasSlotContent(slot, props = {}) {
return !isSlotEmpty(slot, props);
}
function isSlotEmpty(slot, props = {}) {
return isVNodeEmpty(slot == null ? void 0 : slot(props));
}
function isVNodeEmpty(vnode) {
return !vnode || asArray(vnode).every(
(vnode2) => {
var _a, _b;
return vnode2.type === Comment || vnode2.type === Text && !((_a = vnode2.children) == null ? void 0 : _a.length) || vnode2.type === Fragment && !((_b = vnode2.children) == null ? void 0 : _b.length);
}
);
}
function asArray(arg) {
return Array.isArray(arg) ? arg : arg !== null ? [arg] : [];
}
function useEmptySlotCheck() {
return {
hasSlotContent,
isSlotEmpty
};
}
function required(value) {
if (typeof value === "string" && value.length <= 0) {
return false;
}
if (typeof value === "boolean") {
return value === true;
}
if (value instanceof Object) {
return Object.keys(value).length > 0;
}
return typeof value !== "undefined" && value !== null;
}
function regex(value, expression) {
if (expression instanceof RegExp) {
return expression.test(value);
}
return new RegExp(expression).test(value);
}
function email(value) {
const emailValidation = (
// eslint-disable-next-line no-useless-escape
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
);
return regex(value, emailValidation);
}
const validationService = {
required,
regex,
email
};
const MtValidationMixin = defineComponent({
props: {
validation: {
type: [String, Array, Object, Boolean],
required: false,
default: null
}
},
computed: {
isValid() {
const value = this.currentValue || this.value || this.selections;
return this.validate(value);
}
},
methods: {
validate(value) {
let { validation } = this;
let valid = true;
if (typeof validation === "boolean") {
return validation;
}
if (typeof validation === "string") {
const validationList = validation.split(",");
if (validationList.length > 1) {
validation = validationList;
} else {
valid = this.validateRule(value, this.validation);
}
}
if (Array.isArray(validation)) {
valid = validation.every((validationRule) => {
if (typeof validationRule === "boolean") {
return validationRule;
}
return this.validateRule(value, validationRule.trim());
});
}
return valid;
},
validateRule(value, rule) {
if (typeof validationService[rule] === "undefined") {
return false;
}
return validationService[rule](value);
}
}
});
const MtFormFieldMixin = defineComponent({
props: {
mapInheritance: {
type: Object,
required: false,
default: null
},
name: {
type: String,
required: false,
default: null
}
},
computed: {
formFieldName() {
if (this.$attrs.name) {
return this.$attrs.name;
}
if (this.name) {
return this.name;
}
return void 0;
}
}
});
const _sfc_main = defineComponent({
name: "MtBaseField",
components: {
"mt-inheritance-switch": MtInheritanceSwitch,
"mt-help-text": MtHelpText,
"mt-field-copyable": MtFieldCopyable
},
mixins: [MtFormFieldMixin, MtValidationMixin],
props: {
/**
* Determines if the field is disabled.
*/
disabled: {
type: Boolean,
required: false,
default: false
},
/**
* Determines if the field is required.
*/
required: {
type: Boolean,
required: false,
default: false
},
/**
* Toggles the inheritance visualization.
*/
isInherited: {
type: Boolean,
required: false,
default: false
},
/**
* Determines if the field is inheritable.
*/
isInheritanceField: {
type: Boolean,
required: false,
default: false
},
/**
* Determines the active state of the inheritance toggle.
*/
disableInheritanceToggle: {
type: Boolean,
required: false,
default: false
},
/**
* Toggles the copy function of the text field.
*/
copyable: {
type: Boolean,
required: false,
default: false
},
/**
* If set to true the tooltip will change on successful copy.
*/
copyableTooltip: {
type: Boolean,
required: false,
default: false
},
hasFocus: {
type: Boolean,
required: true
},
/**
* A text that helps the user to understand what this field does.
*/
helpText: {
type: String,
required: false,
default: ""
},
copyableText: {
type: String,
required: false,
default: ""
},
/**
* The size of the text field.
*
* @values small, default
*/
size: {
type: String,
required: false,
default: "default",
validator(value) {
return ["small", "default"].includes(value);
}
},
/**
* @ignore
*/
name: {
type: String,
required: false,
default: null
}
},
data() {
return {
id: void 0
};
},
mounted() {
this.id = createId();
},
computed: {
identification() {
if (this.name) {
return this.name;
}
return `mt-field--${this.id}`;
},
showLabel() {
var _a, _b;
return !!this.$slots.label || !!((_b = (_a = this.$slots).label) == null ? void 0 : _b.call(_a));
},
mtFieldLabelClasses() {
return {
"is--required": this.required
};
},
mtBlockSize() {
return `mt-field--${this.size}`;
},
hasError() {
return this.hasSlotContent(this.$slots.error);
}
},
setup() {
const { hasSlotContent: hasSlotContent2 } = useEmptySlotCheck();
const future = useFutureFlags();
return {
hasSlotContent: hasSlotContent2,
future
};
}
});
const mtBaseField_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = { class: "mt-field__label" };
const _hoisted_2 = ["for"];
const _hoisted_3 = { class: "mt-block-field__block" };
const _hoisted_4 = { class: "mt-field__addition is--prefix" };
const _hoisted_5 = {
key: 0,
class: "mt-field__addition"
};
const _hoisted_6 = {
key: 1,
class: "mt-field__addition"
};
const _hoisted_7 = { class: "mt-field__hint-wrapper" };
const _hoisted_8 = { class: "mt-field__hint" };
const _hoisted_9 = { class: "mt-field__hint-right" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_mt_inheritance_switch = resolveComponent("mt-inheritance-switch");
const _component_mt_help_text = resolveComponent("mt-help-text");
const _component_mt_field_copyable = resolveComponent("mt-field-copyable");
return openBlock(), createElementBlock("div", {
class: normalizeClass(["mt-field", [
{
"has--error": _ctx.hasError,
"is--disabled": _ctx.disabled,
"is--inherited": _ctx.isInherited,
"has--focus": _ctx.hasFocus,
"mt-field--future-remove-default-margin": _ctx.future.removeDefaultMargin
},
_ctx.mtBlockSize
]])
}, [
createElementVNode("div", _hoisted_1, [
_ctx.isInheritanceField ? (openBlock(), createBlock(_component_mt_inheritance_switch, mergeProps({
key: 0,
disabled: _ctx.disableInheritanceToggle,
class: "mt-field__inheritance-icon",
"is-inherited": _ctx.isInherited
}, { ..._ctx.$attrs, class: "" }), null, 16, ["disabled", "is-inherited"])) : createCommentVNode("", true),
_ctx.showLabel ? (openBlock(), createElementBlock("label", {
key: 1,
for: _ctx.identification,
class: normalizeClass(_ctx.mtFieldLabelClasses)
}, [
renderSlot(_ctx.$slots, "label")
], 10, _hoisted_2)) : createCommentVNode("", true),
_ctx.helpText ? (openBlock(), createBlock(_component_mt_help_text, {
key: 2,
class: "mt-field__help-text",
text: _ctx.helpText,
placement: "right"
}, null, 8, ["text"])) : createCommentVNode("", true)
]),
createElementVNode("div", _hoisted_3, [
createElementVNode("div", _hoisted_4, [
renderSlot(_ctx.$slots, "field-prefix", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, identification: _ctx.identification })))
]),
renderSlot(_ctx.$slots, "element", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, identification: _ctx.identification }))),
_ctx.copyable ? (openBlock(), createElementBlock("div", _hoisted_5, [
createVNode(_component_mt_field_copyable, {
"display-name": _ctx.identification,
"copyable-text": _ctx.copyableText,
tooltip: _ctx.copyableTooltip
}, null, 8, ["display-name", "copyable-text", "tooltip"])
])) : (openBlock(), createElementBlock("div", _hoisted_6, [
renderSlot(_ctx.$slots, "field-suffix", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, identification: _ctx.identification })))
]))
]),
renderSlot(_ctx.$slots, "error"),
createElementVNode("div", _hoisted_7, [
createElementVNode("div", _hoisted_8, [
renderSlot(_ctx.$slots, "field-hint")
]),
createElementVNode("div", _hoisted_9, [
renderSlot(_ctx.$slots, "field-hint-right")
])
])
], 2);
}
const MtBaseField = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
MtBaseField as M,
MtFormFieldMixin as a
};
//# sourceMappingURL=mt-base-field-7a978dcf.mjs.map