@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/).
158 lines (157 loc) • 6.58 kB
JavaScript
import '../mt-password-field.css';
"use strict";
const vue = require("vue");
const MtBaseField = require("../mt-base-field-6a3a56a0.js");
const MtFieldError = require("./MtFieldError.js");
const mtIcon_vue_vue_type_style_index_0_lang = require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
const vueI18n = require("vue-i18n");
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("./MtFieldCopyable.js");
require("../tooltip.directive-7b51326d.js");
require("../id-8e80f112.js");
require("./MtHelpText.js");
require("../useFutureFlags-35232480.js");
require("./MtText.js");
const _hoisted_1 = ["id", "type", "name", "placeholder", "disabled", "value", "aria-label"];
const _hoisted_2 = ["aria-label", "disabled"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "mt-password-field",
props: /* @__PURE__ */ vue.mergeModels({
label: { default: null },
placeholder: { default: "" },
disabled: { type: Boolean },
error: { default: null },
hint: { default: null },
toggable: { type: Boolean, default: true },
name: { default: void 0 },
required: { type: Boolean, default: false },
helpText: { default: "" },
size: { default: "default" },
isInherited: { type: Boolean, default: false },
isInheritanceField: { type: Boolean, default: false },
disableInheritanceToggle: { type: Boolean, default: false },
idSuffix: { default: "" }
}, {
"modelValue": {},
"modelModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change", "submit", "inheritance-restore", "inheritance-remove", "update:modelValue"], ["update:modelValue"]),
setup(__props, { emit: __emit }) {
const model = vue.useModel(__props, "modelValue");
const props = __props;
const emit = __emit;
const showPassword = vue.ref(false);
const hasFocus = vue.ref(false);
function onInput(event) {
const target = event.target;
emit("update:modelValue", target == null ? void 0 : target.value);
}
function onChange(event) {
const target = event.target;
emit("change", target == null ? void 0 : target.value);
}
function setFocus() {
hasFocus.value = true;
}
function removeFocus() {
hasFocus.value = false;
}
function createInputId(identification) {
if (!props.idSuffix || props.idSuffix.length <= 0) {
return identification;
}
return `${identification}-${props.idSuffix}`;
}
const { t } = vueI18n.useI18n({
messages: {
en: {
showPassword: "Show password",
hidePassword: "Hide password"
},
de: {
showPassword: "Passwort anzeigen",
hidePassword: "Passwort verbergen"
}
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(MtBaseField.MtBaseField, {
class: "mt-password-field",
disabled: _ctx.disabled,
required: _ctx.required,
"is-inherited": _ctx.isInherited,
"is-inheritance-field": _ctx.isInheritanceField,
"disable-inheritance-toggle": _ctx.disableInheritanceToggle,
"has-focus": hasFocus.value,
"help-text": _ctx.helpText,
name: _ctx.name,
size: _ctx.size,
onInheritanceRestore: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("inheritance-restore", $event)),
onInheritanceRemove: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("inheritance-remove", $event))
}, {
label: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
]),
"field-prefix": vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prefix", {}, void 0, true)
]),
element: vue.withCtx(({ identification }) => [
vue.createElementVNode("input", {
id: createInputId(identification),
type: showPassword.value ? "text" : "password",
name: identification,
placeholder: _ctx.placeholder,
disabled: _ctx.disabled || _ctx.isInherited,
value: model.value ?? "",
"aria-label": _ctx.label || void 0,
class: "mt-password-field__input",
onInput,
onChange: vue.withModifiers(onChange, ["stop"]),
onKeyup: _cache[0] || (_cache[0] = vue.withKeys(($event) => _ctx.$emit("submit"), ["enter"])),
onFocus: setFocus,
onBlur: removeFocus
}, null, 40, _hoisted_1),
_ctx.toggable ? (vue.openBlock(), vue.createElementBlock("button", {
key: 0,
type: "button",
class: "mt-password-field__visibility-toggle",
"aria-label": showPassword.value ? vue.unref(t)("hidePassword") : vue.unref(t)("showPassword"),
disabled: _ctx.disabled || _ctx.isInherited,
onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => showPassword.value = !showPassword.value, ["prevent"]))
}, [
vue.createVNode(mtIcon_vue_vue_type_style_index_0_lang._sfc_main, {
name: showPassword.value ? "solid-eye-slash" : "solid-eye",
size: "1.125rem",
"aria-hidden": "true"
}, null, 8, ["name"])
], 8, _hoisted_2)) : vue.createCommentVNode("", true)
]),
"field-suffix": vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "suffix", {}, void 0, true)
]),
error: vue.withCtx(() => [
!!_ctx.error ? (vue.openBlock(), vue.createBlock(MtFieldError, {
key: 0,
error: _ctx.error
}, null, 8, ["error"])) : vue.createCommentVNode("", true)
]),
"field-hint": vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "hint", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.hint), 1)
], true)
]),
_: 3
}, 8, ["disabled", "required", "is-inherited", "is-inheritance-field", "disable-inheritance-toggle", "has-focus", "help-text", "name", "size"]);
};
}
});
const mtPasswordField_vue_vue_type_style_index_0_scoped_4c5260c9_lang = "";
const mtPasswordField = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-4c5260c9"]]);
module.exports = mtPasswordField;
//# sourceMappingURL=MtPasswordField.js.map