@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.1 kB
JavaScript
;
const vue = require("vue");
const MtBaseField = require("../mt-base-field-6a3a56a0.js");
const MtFieldError = require("./MtFieldError.js");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
require("./MtInheritanceSwitch.js");
require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.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("vue-i18n");
require("./MtFieldCopyable.js");
require("../tooltip.directive-7b51326d.js");
require("../id-8e80f112.js");
require("./MtHelpText.js");
require("../useFutureFlags-35232480.js");
require("./MtText.js");
const _sfc_main = vue.defineComponent({
name: "MtTextField",
components: {
"mt-field-error": MtFieldError,
"mt-base-field": MtBaseField.MtBaseField
},
props: {
/**
* The value of the text field.
*/
modelValue: {
type: String,
required: false,
default: ""
},
/**
* A placeholder text being displayed if no value is set.
*/
placeholder: {
type: String,
required: false,
default: ""
},
/**
* A label for your text field. Usually used to guide the user what value this field controls.
*/
label: {
type: String,
required: false,
default: null
},
/**
* A text that helps the user to understand what this field does.
*/
helpText: {
type: String,
required: false,
default: null
},
/**
* The size of the text field.
*
* @values small, default
*/
size: {
type: String,
required: false,
default: "default",
validator(value) {
return ["small", "default"].includes(value);
}
},
/**
* 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
},
/**
* An error in your business logic related to this field.
*
* @example {"code": 500, "detail": "Error while saving"}
*/
error: {
type: Object,
required: false,
default: null
},
/**
* 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
},
/**
* If set to a value a character counter will be displayed.
*/
maxLength: {
type: Number,
required: false,
default: void 0
},
/**
* @ignore
*/
idSuffix: {
type: String,
required: false,
default: ""
},
/**
* @ignore
*/
name: {
type: String,
required: false,
default: null
}
},
emits: [
"update:modelValue",
"change",
"focus",
"blur",
"inheritance-restore",
"inheritance-remove"
],
data() {
return {
currentValue: this.modelValue,
hasFocus: false
};
},
computed: {
hasError() {
return !this.isValid || !!this.error;
},
hasDisabledInput() {
return this.disabled || this.isInherited;
}
},
watch: {
modelValue(value) {
this.currentValue = value;
}
},
methods: {
onChange(event) {
this.$emit("change", event.target.value || "");
},
onInput(event) {
this.$emit("update:modelValue", event.target.value);
},
handleFocus(event) {
this.setFocusClass(event);
},
restoreInheritance() {
this.$emit("update:modelValue", null);
},
createInputId(identification) {
if (!this.idSuffix || this.idSuffix.length <= 0) {
return identification;
}
return `${identification}-${this.idSuffix}`;
},
setFocusClass(event) {
this.$emit("focus", event);
this.hasFocus = true;
},
removeFocusClass(event) {
this.$emit("blur", event);
this.hasFocus = false;
}
}
});
const _hoisted_1 = ["id", "name", "disabled", "value", "placeholder", "maxlength", "aria-label"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_mt_field_error = vue.resolveComponent("mt-field-error");
const _component_mt_base_field = vue.resolveComponent("mt-base-field");
return vue.openBlock(), vue.createBlock(_component_mt_base_field, {
class: "mt-text-field",
disabled: _ctx.disabled,
required: _ctx.required,
"is-inherited": _ctx.isInherited,
"is-inheritance-field": _ctx.isInheritanceField,
"disable-inheritance-toggle": _ctx.disableInheritanceToggle,
copyable: _ctx.copyable,
"copyable-tooltip": _ctx.copyableTooltip,
"copyable-text": String(_ctx.currentValue),
"has-focus": _ctx.hasFocus,
"help-text": _ctx.helpText,
name: _ctx.name,
size: _ctx.size,
onInheritanceRestore: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("inheritance-restore", $event)),
onInheritanceRemove: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("inheritance-remove", $event))
}, vue.createSlots({
label: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
]),
"field-prefix": vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prefix")
]),
element: vue.withCtx(({ identification }) => [
vue.createElementVNode("input", {
id: _ctx.createInputId(identification),
type: "text",
name: identification,
disabled: _ctx.hasDisabledInput,
value: _ctx.currentValue,
placeholder: _ctx.placeholder,
maxlength: _ctx.maxLength,
"aria-label": _ctx.label,
onInput: _cache[0] || (_cache[0] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
onChange: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.onChange && _ctx.onChange(...args), ["stop"])),
onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
onBlur: _cache[3] || (_cache[3] = (...args) => _ctx.removeFocusClass && _ctx.removeFocusClass(...args))
}, null, 40, _hoisted_1)
]),
"field-suffix": vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "suffix")
]),
error: vue.withCtx(() => [
_ctx.error ? (vue.openBlock(), vue.createBlock(_component_mt_field_error, {
key: 0,
error: _ctx.error
}, null, 8, ["error"])) : vue.createCommentVNode("", true)
]),
"field-hint": vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "hint")
]),
_: 2
}, [
_ctx.maxLength ? {
name: "field-hint-right",
fn: vue.withCtx(() => {
var _a;
return [
vue.createTextVNode(vue.toDisplayString(((_a = String(_ctx.modelValue)) == null ? void 0 : _a.length) ?? 0) + "/" + vue.toDisplayString(_ctx.maxLength), 1)
];
}),
key: "0"
} : void 0
]), 1032, ["disabled", "required", "is-inherited", "is-inheritance-field", "disable-inheritance-toggle", "copyable", "copyable-tooltip", "copyable-text", "has-focus", "help-text", "name", "size"]);
}
const mtTextField = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = mtTextField;
//# sourceMappingURL=MtTextField.js.map