@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/).
208 lines (207 loc) • 8.32 kB
JavaScript
import '../mt-email-field.css';
import { defineComponent, mergeModels, useModel, useId, ref, openBlock, createElementBlock, normalizeClass, unref, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, renderSlot, withDirectives, vModelText, mergeProps, createVNode } from "vue";
import MtFieldError from "./MtFieldError.js";
import MtFieldLabel from "./MtFieldLabel.js";
import MtHelpText from "./MtHelpText.js";
import { _ as _sfc_main$1 } from "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import MtTooltip from "./MtTooltip.js";
import MtFieldAffix from "./MtFieldAffix.js";
import { useI18n } from "vue-i18n";
import { u as useClipboard } from "../index-c0f92ea5.mjs";
import { u as useFutureFlags } from "../useFutureFlags-2be3e179.mjs";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
import "./MtText.js";
import "./MtInheritanceSwitch.js";
import "../floating-ui.vue-fe27ebef.mjs";
import "../floating-ui.dom-f450fda4.mjs";
import "../useIsInsideTooltip-0c3bd290.mjs";
import "../index-221bad05.mjs";
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__ */ defineComponent({
__name: "mt-email-field",
props: /* @__PURE__ */ 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__ */ mergeModels(["change", "blur", "focus", "inheritance-restore", "inheritance-remove"], ["update:modelValue"]),
setup(__props) {
const futureFlags = useFutureFlags();
const model = useModel(__props, "modelValue");
const id = useId();
const errorId = useId();
const inputRef = ref(null);
const errorMessage = 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 } = useClipboard();
const { t } = 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 openBlock(), createElementBlock("div", {
class: normalizeClass([
"mt-email-field",
{
"mt-email-field--future-no-default-margin": unref(futureFlags).removeDefaultMargin
}
])
}, [
_ctx.label ? (openBlock(), createBlock(MtFieldLabel, {
key: 0,
for: 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: withCtx(() => [
createTextVNode(toDisplayString(_ctx.label), 1)
]),
_: 1
}, 8, ["for", "has-error", "required", "inheritance"])) : createCommentVNode("", true),
!!_ctx.helpText ? (openBlock(), createBlock(MtHelpText, {
key: 1,
text: _ctx.helpText,
style: { gridArea: "help-text" }
}, null, 8, ["text"])) : createCommentVNode("", true),
createElementVNode("div", {
class: 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 ? (openBlock(), createBlock(MtFieldAffix, {
key: 0,
type: "prefix"
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "prefix", {}, void 0, true)
]),
_: 3
})) : createCommentVNode("", true),
withDirectives(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: 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 ? 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), [
[vModelText, model.value]
]),
_ctx.copyable ? (openBlock(), createBlock(MtTooltip, {
key: 1,
content: unref(t)("copyTooltip")
}, {
default: withCtx((params) => [
createElementVNode("button", mergeProps({ type: "button" }, params, {
class: "mt-email-field__copy-button",
"aria-label": unref(copied) ? unref(t)("copyButtonDescriptionValueCopied") : unref(t)("copyButtonDescription"),
onClick: _cache[5] || (_cache[5] = () => {
if (!model.value)
return;
unref(copy)(model.value);
})
}), [
createVNode(_sfc_main$1, {
name: 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 ? (openBlock(), createBlock(MtFieldAffix, {
key: 2,
type: "suffix"
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "suffix", {}, void 0, true)
]),
_: 3
})) : createCommentVNode("", true)
], 2),
_ctx.error || errorMessage.value ? (openBlock(), createBlock(MtFieldError, {
key: 2,
id: unref(errorId),
error: errorMessage.value || _ctx.error,
style: { gridArea: "error" }
}, null, 8, ["id", "error"])) : createCommentVNode("", true),
_ctx.$slots.hint ? (openBlock(), createElementBlock("div", _hoisted_3, [
renderSlot(_ctx.$slots, "hint", {}, void 0, true)
])) : createCommentVNode("", true)
], 2);
};
}
});
const mtEmailField_vue_vue_type_style_index_0_scoped_1b9aeef9_lang = "";
const mtEmailField = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1b9aeef9"]]);
export {
mtEmailField as default
};
//# sourceMappingURL=MtEmailField.js.map