@nextcloud/vue
Version:
Nextcloud vue components
96 lines (95 loc) • 3.14 kB
JavaScript
require('../assets/NcAppNavigationNewItem-Ce17FkDl.css');
;
const NcInputConfirmCancel = require("./NcInputConfirmCancel-bHJNQ1vm.cjs");
const Components_NcLoadingIcon = require("../Components/NcLoadingIcon.cjs");
const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
const _sfc_main = {
name: "NcAppNavigationNewItem",
components: {
NcInputConfirmCancel: NcInputConfirmCancel.NcInputConfirmCancel,
NcLoadingIcon: Components_NcLoadingIcon
},
props: {
/**
* The name of the element.
*/
name: {
type: String,
required: true
},
/**
* Refers to the icon on the left, this prop accepts a class
* like 'icon-category-enabled'.
*/
icon: {
type: String,
default: ""
},
/**
* Displays a loading animated icon on the left of the element
* instead of the icon.
*/
loading: {
type: Boolean,
default: false
},
/**
* Only for 'editable' items, sets label for the edit action button.
*/
editLabel: {
type: String,
default: ""
},
/**
* Sets the placeholder text for the editing form.
*/
editPlaceholder: {
type: String,
default: ""
}
},
emits: ["new-item"],
data() {
return {
newItemValue: "",
newItemActive: false
};
},
methods: {
handleNewItem() {
if (!this.loading) {
this.newItemActive = true;
this.$nextTick(() => {
this.$refs.newItemInput.focusInput();
});
}
},
cancelNewItem() {
this.newItemActive = false;
},
handleNewItemDone() {
this.$emit("new-item", this.newItemValue);
this.newItemValue = "";
this.newItemActive = false;
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("li", { staticClass: "app-navigation-entry", class: {
"app-navigation-entry--newItemActive": _vm.newItemActive
} }, [_c("button", { staticClass: "app-navigation-entry-button", on: { "click": _vm.handleNewItem } }, [_c("span", { staticClass: "app-navigation-entry-icon", class: { [_vm.icon]: !_vm.loading } }, [_vm.loading ? _c("NcLoadingIcon") : _vm._t("icon")], 2), !_vm.newItemActive ? _c("span", { staticClass: "app-navigation-new-item__name", attrs: { "title": _vm.name } }, [_vm._v(" " + _vm._s(_vm.name) + " ")]) : _vm._e(), _vm.newItemActive ? _c("span", { staticClass: "newItemContainer" }, [_c("NcInputConfirmCancel", { ref: "newItemInput", attrs: { "placeholder": _vm.editPlaceholder !== "" ? _vm.editPlaceholder : _vm.name }, on: { "cancel": _vm.cancelNewItem, "confirm": _vm.handleNewItemDone }, model: { value: _vm.newItemValue, callback: function($$v) {
_vm.newItemValue = $$v;
}, expression: "newItemValue" } })], 1) : _vm._e()])]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"fe96d301"
);
const NcAppNavigationNewItem = __component__.exports;
exports.NcAppNavigationNewItem = NcAppNavigationNewItem;