@nextcloud/vue
Version:
Nextcloud vue components
97 lines (96 loc) • 3.01 kB
JavaScript
import '../assets/NcAppNavigationNewItem-fUP3wQTQ.css';
import { N as NcInputConfirmCancel } from "./NcInputConfirmCancel-C7a7Nha7.mjs";
import NcLoadingIcon from "../Components/NcLoadingIcon.mjs";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
const _sfc_main = {
name: "NcAppNavigationNewItem",
components: {
NcInputConfirmCancel,
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__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"46fee9ac"
);
const NcAppNavigationNewItem = __component__.exports;
export {
NcAppNavigationNewItem as N
};