@nextcloud/vue
Version:
Nextcloud vue components
127 lines (126 loc) • 4.2 kB
JavaScript
import '../assets/NcActionTextEditable-1TXeJ5zp.css';
import { u as useModelMigration } from "./useModelMigration-EhAWvqDD.mjs";
import { A as ActionTextMixin } from "./actionText-fFcUPi2g.mjs";
import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
import { A as ArrowLeft } from "./ArrowLeft-DuT2LZOm.mjs";
import { A as ArrowRight } from "./ArrowRight-CY2b9hgN.mjs";
import { isRTL } from "@nextcloud/l10n";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
const _sfc_main = {
name: "NcActionTextEditable",
components: {
ArrowLeft,
ArrowRight
},
mixins: [ActionTextMixin],
model: {
prop: "modelValue",
event: "update:modelValue"
},
props: {
/**
* id attribute of the checkbox element
*/
id: {
type: String,
default: () => "action-" + GenRandomId(),
validator: (id) => id.trim() !== ""
},
/**
* disabled state of the text area
*/
disabled: {
type: Boolean,
default: false
},
/**
* Removed in v9 - use `modelValue` (`v-model`) instead
* @deprecated
*/
value: {
type: String,
default: void 0
},
/**
* value attribute of the input field
*/
modelValue: {
type: String,
default: ""
}
},
emits: [
"input",
/**
* Removed in v9 - use `update:modelValue` (`v-model`) instead
* @deprecated
*/
"update:value",
/**
* Emitted when the inputs value changes
*
* @type {string|Date}
*/
"update:modelValue",
/** Same as `update:modelValue` but with a different event name */
"update:model-value",
"submit"
],
setup() {
const model = useModelMigration("value", "update:value");
return {
model,
isRTL: isRTL()
};
},
computed: {
/**
* determines if the action is focusable
*
* @return {boolean} is the action focusable ?
*/
isFocusable() {
return !this.disabled;
},
computedId() {
return GenRandomId();
}
},
methods: {
onInput(event) {
this.$emit("input", event);
this.model = event.target.value;
},
onSubmit(event) {
event.preventDefault();
event.stopPropagation();
if (!this.disabled) {
this.$emit("submit", event);
} else {
return false;
}
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("li", { staticClass: "action", class: { "action--disabled": _vm.disabled } }, [_c("span", { staticClass: "action-text-editable", on: { "click": _vm.onClick } }, [_vm._t("icon", function() {
return [_c("span", { staticClass: "action-text-editable__icon", class: [_vm.isIconUrl ? "action-text-editable__icon--url" : _vm.icon], style: { backgroundImage: _vm.isIconUrl ? `url(${_vm.icon})` : null } })];
}), _c("form", { ref: "form", staticClass: "action-text-editable__form", attrs: { "disabled": _vm.disabled }, on: { "submit": function($event) {
$event.preventDefault();
return _vm.onSubmit.apply(null, arguments);
} } }, [_c("input", { staticClass: "action-text-editable__submit", attrs: { "id": _vm.id, "type": "submit" } }), _vm.name ? _c("label", { staticClass: "action-text-editable__name", attrs: { "for": _vm.computedId } }, [_vm._v(" " + _vm._s(_vm.name) + " ")]) : _vm._e(), _c("textarea", _vm._b({ class: ["action-text-editable__textarea", { focusable: _vm.isFocusable }], attrs: { "id": _vm.computedId, "disabled": _vm.disabled }, domProps: { "value": _vm.model }, on: { "input": _vm.onInput } }, "textarea", _vm.$attrs, false)), _c("label", { directives: [{ name: "show", rawName: "v-show", value: !_vm.disabled, expression: "!disabled" }], staticClass: "action-text-editable__label", attrs: { "for": _vm.id } }, [_vm.isRTL ? _c("ArrowLeft", { attrs: { "size": 20 } }) : _c("ArrowRight", { attrs: { "size": 20 } })], 1)])], 2)]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"35e22bd7"
);
const NcActionTextEditable = __component__.exports;
export {
NcActionTextEditable as N
};