@nextcloud/vue/dist/Components/NcActionTextEditable.cjs

Nextcloud vue components

require('../assets/NcActionTextEditable-Dud9NOdm.css');
"use strict";
const actionText = require("../chunks/actionText-BcrK4uH1.cjs");
const GenRandomId = require("../chunks/GenRandomId-BQDud3d4.cjs");
const ArrowRight = require("../chunks/ArrowRight-Bj5G_mG0.cjs");
const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-V0q-tHlQ.cjs");
const _sfc_main = {
  name: "NcActionTextEditable",
  components: {
    ArrowRight: ArrowRight.ArrowRight
  },
  mixins: [actionText.ActionTextMixin],
  props: {
    /**
     * id attribute of the checkbox element
     */
    id: {
      type: String,
      default: () => "action-" + GenRandomId.GenRandomId(),
      validator: (id) => id.trim() !== ""
    },
    /**
     * disabled state of the text area
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * value attribute of the input field
     */
    value: {
      type: String,
      default: ""
    }
  },
  emits: [
    "input",
    "update:value",
    "submit"
  ],
  computed: {
    /**
     * determines if the action is focusable
     *
     * @return {boolean} is the action focusable ?
     */
    isFocusable() {
      return !this.disabled;
    },
    computedId() {
      return GenRandomId.GenRandomId();
    }
  },
  methods: {
    onInput(event) {
      this.$emit("input", event);
      this.$emit("update:value", 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(".concat(_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.value }, 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 } }, [_c("ArrowRight", { attrs: { "size": 20 } })], 1)])], 2)]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns,
  false,
  null,
  "c9d92b93"
);
const NcActionTextEditable = __component__.exports;
module.exports = NcActionTextEditable;