@nextcloud/vue
Version:
Nextcloud vue components
148 lines (147 loc) • 4.76 kB
JavaScript
;
const mdi = require("./mdi-BBwE-MZC.cjs");
const NcInputField = require("./NcInputField-Dry3uU_8.cjs");
const useModelMigration = require("./useModelMigration-D5zhrNXr.cjs");
const _l10n = require("./_l10n-DM-VRK9x.cjs");
const NcIconSvgWrapper = require("./NcIconSvgWrapper-D-aKMbf3.cjs");
const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
_l10n.register(_l10n.t17, _l10n.t50);
const NcInputFieldProps = new Set(Object.keys(NcInputField.NcInputField.props));
const _sfc_main = {
name: "NcTextField",
components: {
NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper,
NcInputField: NcInputField.NcInputField
},
// Allow forwarding all attributes
inheritAttrs: false,
model: {
prop: "modelValue",
event: "update:modelValue"
},
props: {
/**
* Any [NcInputField](#/Components/NcFields?id=ncinputfield) props
*/
// Not an actual prop but needed to show in vue-styleguidist docs
// eslint-disable-next-line
" ": {},
// Reuse all the props from NcInputField for better typing and documentation
...NcInputField.NcInputField.props,
/**
* The `aria-label` to set on the trailing button
* If no explicit value is set it will default to the one matching the `trailingButtonIcon`:
*
* @default 'Clear text'|'Save changes'|'Undo changes'
*/
trailingButtonLabel: {
type: String,
default: ""
},
// Custom props
/**
* Specifies which material design icon should be used for the trailing
* button.
*
* The `'arrowRight'` value is deprecated and will be removed in the next major version.
* Use `'arrowEnd'` instead.
*
* @type {'close'|'arrowEnd'|'arrowRight'|'undo'}
*/
trailingButtonIcon: {
type: String,
default: "close",
validator: (value) => [
"close",
"arrowEnd",
"arrowRight",
"undo"
].includes(value)
}
},
emits: [
/**
* Removed in v9 - use `update:modelValue` (`v-model`) instead
*
* @deprecated
*/
"update:value",
"update:modelValue",
/** Same as update:modelValue for Vue 2 compatibility */
"update:model-value"
],
setup() {
const model = useModelMigration.useModelMigration("value", "update:value");
return {
model,
mdiArrowRight: mdi.mdiArrowRight,
mdiClose: mdi.mdiClose,
mdiUndo: mdi.mdiUndo
};
},
computed: {
/**
* Is the trailing button icon directional.
* Meaning the icon needs to be flipped on RTL text flow.
*/
isArrow() {
return this.trailingButtonIcon === "arrowEnd" || this.trailingButtonIcon === "arrowRight";
},
propsAndAttrsToForward() {
const predefinedLabels = {
arrowEnd: _l10n.t("Save changes"),
arrowRight: _l10n.t("Save changes"),
close: _l10n.t("Clear text"),
undo: _l10n.t("Undo changes")
};
return {
// Proxy all the HTML attributes
...this.$attrs,
// Proxy original NcInputField's props
...Object.fromEntries(Object.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key))),
// Adjust aria-label for predefined trailing buttons
trailingButtonLabel: this.trailingButtonLabel || predefinedLabels[this.trailingButtonIcon]
};
}
},
methods: {
/**
* Focus the input element
*
* @public
*/
focus() {
this.$refs.inputField.focus();
},
/**
* Select all the text in the input
*
* @public
*/
select() {
this.$refs.inputField.select();
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("NcInputField", _vm._g(_vm._b({ ref: "inputField", scopedSlots: _vm._u([!!_vm.$scopedSlots.icon || !!_vm.$slots.default || !!_vm.$scopedSlots.default ? { key: "icon", fn: function() {
return [_vm._t("icon", function() {
return [_vm._t("default")];
})];
}, proxy: true } : null, _vm.type !== "search" ? { key: "trailing-button-icon", fn: function() {
return [_vm.isArrow ? _c("NcIconSvgWrapper", { attrs: { "directional": "", "path": _vm.mdiArrowRight } }) : _c("NcIconSvgWrapper", { attrs: { "path": _vm.trailingButtonIcon === "undo" ? _vm.mdiUndo : _vm.mdiClose } })];
}, proxy: true } : null], null, true) }, "NcInputField", _vm.propsAndAttrsToForward, false), _vm.$listeners));
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
null
);
const NcTextField = __component__.exports;
exports.NcTextField = NcTextField;
//# sourceMappingURL=NcTextField-Cp3tulze.cjs.map