@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/).
292 lines (291 loc) • 8.1 kB
JavaScript
import { defineComponent, resolveComponent, openBlock, createBlock, createSlots, withCtx, createTextVNode, toDisplayString, renderSlot, createElementVNode, withModifiers, createCommentVNode } from "vue";
import { M as MtBaseField } from "../mt-base-field-7a978dcf.mjs";
import MtFieldError from "./MtFieldError.js";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
import "./MtInheritanceSwitch.js";
import "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import "./MtTooltip.js";
import "../floating-ui.vue-fe27ebef.mjs";
import "../floating-ui.dom-f450fda4.mjs";
import "../useIsInsideTooltip-0c3bd290.mjs";
import "../index-221bad05.mjs";
import "vue-i18n";
import "./MtFieldCopyable.js";
import "../tooltip.directive-a5042569.mjs";
import "../id-1e5b8276.mjs";
import "./MtHelpText.js";
import "../useFutureFlags-2be3e179.mjs";
import "./MtText.js";
const _sfc_main = defineComponent({
name: "MtTextField",
components: {
"mt-field-error": MtFieldError,
"mt-base-field": 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 = resolveComponent("mt-field-error");
const _component_mt_base_field = resolveComponent("mt-base-field");
return openBlock(), 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))
}, createSlots({
label: withCtx(() => [
createTextVNode(toDisplayString(_ctx.label), 1)
]),
"field-prefix": withCtx(() => [
renderSlot(_ctx.$slots, "prefix")
]),
element: withCtx(({ identification }) => [
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] = 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": withCtx(() => [
renderSlot(_ctx.$slots, "suffix")
]),
error: withCtx(() => [
_ctx.error ? (openBlock(), createBlock(_component_mt_field_error, {
key: 0,
error: _ctx.error
}, null, 8, ["error"])) : createCommentVNode("", true)
]),
"field-hint": withCtx(() => [
renderSlot(_ctx.$slots, "hint")
]),
_: 2
}, [
_ctx.maxLength ? {
name: "field-hint-right",
fn: withCtx(() => {
var _a;
return [
createTextVNode(toDisplayString(((_a = String(_ctx.modelValue)) == null ? void 0 : _a.length) ?? 0) + "/" + 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__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
mtTextField as default
};
//# sourceMappingURL=MtTextField.js.map