@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/).
207 lines (206 loc) • 8.44 kB
JavaScript
import '../mt-email-field.css';
;
const vue = require("vue");
const MtFieldError = require("./MtFieldError.js");
const MtFieldLabel = require("./MtFieldLabel.js");
const MtHelpText = require("./MtHelpText.js");
const mtIcon_vue_vue_type_style_index_0_lang = require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
const MtTooltip = require("./MtTooltip.js");
const MtFieldAffix = require("./MtFieldAffix.js");
const vueI18n = require("vue-i18n");
const index = require("../index-d39b6c26.js");
const useFutureFlags = require("../useFutureFlags-35232480.js");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
require("./MtText.js");
require("./MtInheritanceSwitch.js");
require("../floating-ui.vue-48d5c774.js");
require("../floating-ui.dom-fe395b67.js");
require("../useIsInsideTooltip-f4674e27.js");
require("../index-ab705c2a.js");
const _hoisted_1 = ["id", "required", "disabled", "name", "placeholder", "aria-invalid", "aria-describedby"];
const _hoisted_2 = ["aria-label"];
const _hoisted_3 = {
key: 3,
class: "mt-email-field__hint",
style: { gridArea: "hint" }
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "mt-email-field",
props: /* @__PURE__ */ vue.mergeModels({
disabled: { type: Boolean },
required: { type: Boolean },
modelValue: {},
name: {},
label: {},
error: {},
helpText: {},
copyable: { type: Boolean },
copyableTooltip: { type: Boolean },
placeholder: {},
small: { type: Boolean },
isInherited: { type: Boolean },
isInheritanceField: { type: Boolean }
}, {
"modelValue": {
type: String
},
"modelModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change", "blur", "focus", "inheritance-restore", "inheritance-remove"], ["update:modelValue"]),
setup(__props) {
const futureFlags = useFutureFlags.useFutureFlags();
const model = vue.useModel(__props, "modelValue");
const id = vue.useId();
const errorId = vue.useId();
const inputRef = vue.ref(null);
const errorMessage = vue.ref(void 0);
function checkValidity() {
var _a, _b;
if (!inputRef.value)
return;
const isValid = (_a = inputRef.value) == null ? void 0 : _a.checkValidity();
if (isValid) {
errorMessage.value = void 0;
return;
}
errorMessage.value = { detail: (_b = inputRef.value) == null ? void 0 : _b.validationMessage };
}
const { copy, copied } = index.useClipboard();
const { t } = vueI18n.useI18n({
messages: {
de: {
copyTooltip: "In Zwischenablage kopieren",
copyButtonDescription: "In Zwischenablage kopieren",
copyButtonDescriptionValueCopied: "In Zwischenablage kopiert"
},
en: {
copyTooltip: "Copy to clipboard",
copyButtonDescription: "Copy to clipboard",
copyButtonDescriptionValueCopied: "Copied to clipboard"
}
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([
"mt-email-field",
{
"mt-email-field--future-no-default-margin": vue.unref(futureFlags).removeDefaultMargin
}
])
}, [
_ctx.label ? (vue.openBlock(), vue.createBlock(MtFieldLabel, {
key: 0,
for: vue.unref(id) ?? "",
"has-error": !!_ctx.error || !!errorMessage.value,
required: _ctx.required,
style: { gridArea: "label", marginBottom: "var(--scale-size-2)" },
inheritance: !_ctx.isInheritanceField ? "none" : _ctx.isInherited ? "linked" : "unlinked",
"onUpdate:inheritance": _cache[0] || (_cache[0] = ($event) => {
if (_ctx.isInherited) {
_ctx.$emit("inheritance-remove");
} else {
_ctx.$emit("inheritance-restore");
}
})
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
]),
_: 1
}, 8, ["for", "has-error", "required", "inheritance"])) : vue.createCommentVNode("", true),
!!_ctx.helpText ? (vue.openBlock(), vue.createBlock(MtHelpText, {
key: 1,
text: _ctx.helpText,
style: { gridArea: "help-text" }
}, null, 8, ["text"])) : vue.createCommentVNode("", true),
vue.createElementVNode("div", {
class: vue.normalizeClass([
"mt-email-field__block",
{
"mt-email-field__block--error": !!_ctx.error || !!errorMessage.value,
"mt-email-field__block--small": _ctx.small
}
]),
style: { gridArea: "input" }
}, [
_ctx.$slots.prefix ? (vue.openBlock(), vue.createBlock(MtFieldAffix, {
key: 0,
type: "prefix"
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prefix", {}, void 0, true)
]),
_: 3
})) : vue.createCommentVNode("", true),
vue.withDirectives(vue.createElementVNode("input", {
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => model.value = $event),
class: "mt-email-field__input",
type: "email",
ref_key: "inputRef",
ref: inputRef,
id: vue.unref(id),
required: _ctx.required,
disabled: _ctx.disabled || _ctx.isInherited,
name: _ctx.name,
placeholder: _ctx.placeholder,
"aria-invalid": !!errorMessage.value || !!_ctx.error,
"aria-describedby": !!errorMessage.value || !!_ctx.error ? vue.unref(errorId) : void 0,
onChange: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("change", $event.target.value)),
onFocus: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("focus")),
onBlur: _cache[4] || (_cache[4] = () => {
checkValidity();
_ctx.$emit("blur");
})
}, null, 40, _hoisted_1), [
[vue.vModelText, model.value]
]),
_ctx.copyable ? (vue.openBlock(), vue.createBlock(MtTooltip, {
key: 1,
content: vue.unref(t)("copyTooltip")
}, {
default: vue.withCtx((params) => [
vue.createElementVNode("button", vue.mergeProps({ type: "button" }, params, {
class: "mt-email-field__copy-button",
"aria-label": vue.unref(copied) ? vue.unref(t)("copyButtonDescriptionValueCopied") : vue.unref(t)("copyButtonDescription"),
onClick: _cache[5] || (_cache[5] = () => {
if (!model.value)
return;
vue.unref(copy)(model.value);
})
}), [
vue.createVNode(mtIcon_vue_vue_type_style_index_0_lang._sfc_main, {
name: vue.unref(copied) ? "regular-checkmark" : "regular-copy",
size: "var(--scale-size-18)",
color: "var(--color-icon-primary-default)"
}, null, 8, ["name"])
], 16, _hoisted_2)
]),
_: 1
}, 8, ["content"])) : _ctx.$slots.suffix ? (vue.openBlock(), vue.createBlock(MtFieldAffix, {
key: 2,
type: "suffix"
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "suffix", {}, void 0, true)
]),
_: 3
})) : vue.createCommentVNode("", true)
], 2),
_ctx.error || errorMessage.value ? (vue.openBlock(), vue.createBlock(MtFieldError, {
key: 2,
id: vue.unref(errorId),
error: errorMessage.value || _ctx.error,
style: { gridArea: "error" }
}, null, 8, ["id", "error"])) : vue.createCommentVNode("", true),
_ctx.$slots.hint ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
vue.renderSlot(_ctx.$slots, "hint", {}, void 0, true)
])) : vue.createCommentVNode("", true)
], 2);
};
}
});
const mtEmailField_vue_vue_type_style_index_0_scoped_1b9aeef9_lang = "";
const mtEmailField = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-1b9aeef9"]]);
module.exports = mtEmailField;
//# sourceMappingURL=MtEmailField.js.map