@nextcloud/vue 8.11.2 → 8.12.0

package/dist/chunks/NcInputConfirmCancel-CJ7nPGEd.cjs

@@ -0,0 +1,112 @@
+require('../assets/NcInputConfirmCancel-UcHrm0al.css');
+"use strict";
+const Components_NcButton = require("../Components/NcButton.cjs");
+const _l10n = require("./_l10n-BYPqjHzt.cjs");
+const ArrowRight = require("./ArrowRight-DaYrccVG.cjs");
+const Close = require("./Close-C2VrgKj3.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-DbFIE4_M.cjs");
+_l10n.register(_l10n.t12);
+const _sfc_main = {
+  name: "NcInputConfirmCancel",
+  components: {
+    NcButton: Components_NcButton,
+    ArrowRight: ArrowRight.ArrowRight,
+    Close: Close.Close
+  },
+  props: {
+    /**
+     * If this element is used on a primary element set to true for primary styling.
+     */
+    primary: {
+      default: false,
+      type: Boolean
+    },
+    placeholder: {
+      default: "",
+      type: String
+    },
+    value: {
+      default: "",
+      type: String
+    }
+  },
+  emits: [
+    "input",
+    "confirm",
+    "cancel"
+  ],
+  data() {
+    return {
+      labelConfirm: _l10n.t("Confirm changes"),
+      labelCancel: _l10n.t("Cancel changes")
+    };
+  },
+  computed: {
+    valueModel: {
+      get() {
+        return this.value;
+      },
+      set(newValue) {
+        this.$emit("input", newValue);
+      }
+    }
+  },
+  methods: {
+    confirm() {
+      this.$emit("confirm");
+    },
+    cancel() {
+      this.$emit("cancel");
+    },
+    focusInput() {
+      this.$refs.input.focus();
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "app-navigation-input-confirm" }, [_c("form", { on: { "submit": function($event) {
+    $event.preventDefault();
+    return _vm.confirm.apply(null, arguments);
+  }, "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+      return null;
+    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey)
+      return null;
+    $event.stopPropagation();
+    $event.preventDefault();
+    return _vm.cancel.apply(null, arguments);
+  }, "click": function($event) {
+    $event.stopPropagation();
+    $event.preventDefault();
+  } } }, [_c("input", { directives: [{ name: "model", rawName: "v-model", value: _vm.valueModel, expression: "valueModel" }], ref: "input", staticClass: "app-navigation-input-confirm__input", attrs: { "type": "text", "placeholder": _vm.placeholder }, domProps: { "value": _vm.valueModel }, on: { "input": function($event) {
+    if ($event.target.composing)
+      return;
+    _vm.valueModel = $event.target.value;
+  } } }), _c("NcButton", { attrs: { "native-type": "submit", "type": "primary", "aria-label": _vm.labelConfirm }, on: { "click": function($event) {
+    $event.stopPropagation();
+    $event.preventDefault();
+    return _vm.confirm.apply(null, arguments);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("ArrowRight", { attrs: { "size": 20 } })];
+  }, proxy: true }]) }), _c("NcButton", { attrs: { "native-type": "reset", "type": _vm.primary ? "primary" : "tertiary", "aria-label": _vm.labelCancel }, on: { "click": function($event) {
+    $event.stopPropagation();
+    $event.preventDefault();
+    return _vm.cancel.apply(null, arguments);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("Close", { attrs: { "size": 20 } })];
+  }, proxy: true }]) })], 1)]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "dcf0becf",
+  null,
+  null
+);
+const NcInputConfirmCancel = __component__.exports;
+exports.NcInputConfirmCancel = NcInputConfirmCancel;

package/dist/chunks/{NcInputConfirmCancel-DVmY85-V.cjs.map → NcInputConfirmCancel-CJ7nPGEd.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcInputConfirmCancel-DVmY85-V.cjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @author Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n# Usage\n\n```\n<NcInputConfirmCancel @confirm=\"alert('confirm')\" @cancel=\"alert('cancel')\" />\n```\n</docs>\n<template>\n\t<div class=\"app-navigation-input-confirm\">\n\t\t<form @submit.prevent=\"confirm\"\n\t\t\t@keydown.esc.exact.stop.prevent=\"cancel\"\n\t\t\t@click.stop.prevent>\n\t\t\t<input ref=\"input\"\n\t\t\t\tv-model=\"valueModel\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tclass=\"app-navigation-input-confirm__input\"\n\t\t\t\t:placeholder=\"placeholder\">\n\n\t\t\t<NcButton native-type=\"submit\"\n\t\t\t\ttype=\"primary\"\n\t\t\t\t:aria-label=\"labelConfirm\"\n\t\t\t\t@click.stop.prevent=\"confirm\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<NcButton native-type=\"reset\"\n\t\t\t\t:type=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t:aria-label=\"labelCancel\"\n\t\t\t\t@click.stop.prevent=\"cancel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</form>\n\t</div>\n</template>\n<script>\nimport NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tArrowRight,\n\t\tClose,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * If this element is used on a primary element set to true for primary styling.\n\t\t */\n\t\tprimary: {\n\t\t\tdefault: false,\n\t\t\ttype: Boolean,\n\t\t},\n\n\t\tplaceholder: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\n\t\tvalue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'confirm',\n\t\t'cancel',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelConfirm: t('Confirm changes'),\n\t\t\tlabelCancel: t('Cancel changes'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tvalueModel: {\n\t\t\tget() { return this.value },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('input', newValue)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\tconfirm() {\n\t\t\tthis.$emit('confirm')\n\t\t},\n\t\tcancel() {\n\t\t\tthis.$emit('cancel')\n\t\t},\n\t\tfocusInput() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n$input-height: 34px;\n$input-padding: 7px;\n$input-margin: 5px;\n\n.app-navigation-input-confirm {\n\tflex: 1 0 100%;\n\twidth: 100%;\n\n\tform {\n\t\tdisplay: flex;\n\t}\n\n\t&__input {\n\t\theight: $input-height;\n\t\tflex: 1 1 100%;\n\t\tfont-size: 100% !important;\n\t\tmargin: $input-margin !important;\n\t\tmargin-left: -1px - $input-padding !important;\n\t\tpadding: $input-padding !important;\n\n\t\t&:active,\n\t\t&:focus,\n\t\t&:hover {\n\t\t\toutline: none;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcButton","ArrowRight","Close","t","newValue"],"mappings":";;;AAmEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAAA,IACA,YAAAC,EAAA;AAAA,IACA,OAAAC,EAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAAC,EAAA,EAAA,iBAAA;AAAA,MACA,aAAAA,EAAA,EAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AAAA,MACA,MAAA;AAAA,eAAA,KAAA;AAAA,MAAA;AAAA,MACA,IAAAC,GAAA;AACA,aAAA,MAAA,SAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,WAAA,MAAA,SAAA;AAAA,IACA;AAAA,IACA,SAAA;AACA,WAAA,MAAA,QAAA;AAAA,IACA;AAAA,IACA,aAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcInputConfirmCancel-CJ7nPGEd.cjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @author Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n# Usage\n\n```\n<NcInputConfirmCancel @confirm=\"alert('confirm')\" @cancel=\"alert('cancel')\" />\n```\n</docs>\n<template>\n\t<div class=\"app-navigation-input-confirm\">\n\t\t<form @submit.prevent=\"confirm\"\n\t\t\t@keydown.esc.exact.stop.prevent=\"cancel\"\n\t\t\t@click.stop.prevent>\n\t\t\t<input ref=\"input\"\n\t\t\t\tv-model=\"valueModel\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tclass=\"app-navigation-input-confirm__input\"\n\t\t\t\t:placeholder=\"placeholder\">\n\n\t\t\t<NcButton native-type=\"submit\"\n\t\t\t\ttype=\"primary\"\n\t\t\t\t:aria-label=\"labelConfirm\"\n\t\t\t\t@click.stop.prevent=\"confirm\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<NcButton native-type=\"reset\"\n\t\t\t\t:type=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t:aria-label=\"labelCancel\"\n\t\t\t\t@click.stop.prevent=\"cancel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</form>\n\t</div>\n</template>\n<script>\nimport NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tArrowRight,\n\t\tClose,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * If this element is used on a primary element set to true for primary styling.\n\t\t */\n\t\tprimary: {\n\t\t\tdefault: false,\n\t\t\ttype: Boolean,\n\t\t},\n\n\t\tplaceholder: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\n\t\tvalue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'confirm',\n\t\t'cancel',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelConfirm: t('Confirm changes'),\n\t\t\tlabelCancel: t('Cancel changes'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tvalueModel: {\n\t\t\tget() { return this.value },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('input', newValue)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\tconfirm() {\n\t\t\tthis.$emit('confirm')\n\t\t},\n\t\tcancel() {\n\t\t\tthis.$emit('cancel')\n\t\t},\n\t\tfocusInput() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n$input-height: 34px;\n$input-padding: 7px;\n$input-margin: 5px;\n\n.app-navigation-input-confirm {\n\tflex: 1 0 100%;\n\twidth: 100%;\n\n\tform {\n\t\tdisplay: flex;\n\t}\n\n\t&__input {\n\t\theight: $input-height;\n\t\tflex: 1 1 100%;\n\t\tfont-size: 100% !important;\n\t\tmargin: $input-margin !important;\n\t\tmargin-left: -1px - $input-padding !important;\n\t\tpadding: $input-padding !important;\n\n\t\t&:active,\n\t\t&:focus,\n\t\t&:hover {\n\t\t\toutline: none;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcButton","ArrowRight","Close","t"],"mappings":";;;;;;;AAmEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA;AAAAA,IACA,YAAAC,WAAA;AAAA,IACA,OAAAC,MAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAAC,MAAA,EAAA,iBAAA;AAAA,MACA,aAAAA,MAAA,EAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AAAA,MACA,MAAA;AAAA,eAAA,KAAA;AAAA,MAAA;AAAA,MACA,IAAA,UAAA;AACA,aAAA,MAAA,SAAA,QAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,WAAA,MAAA,SAAA;AAAA,IACA;AAAA,IACA,SAAA;AACA,WAAA,MAAA,QAAA;AAAA,IACA;AAAA,IACA,aAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcInputConfirmCancel-XXXgXoSw.mjs

@@ -0,0 +1,113 @@
+import '../assets/NcInputConfirmCancel-UcHrm0al.css';
+import NcButton from "../Components/NcButton.mjs";
+import { r as register, m as t12, a as t } from "./_l10n-hRR5zBTZ.mjs";
+import { A as ArrowRight } from "./ArrowRight-Clf455e1.mjs";
+import { C as Close } from "./Close-1V1F2F-M.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-D637Qkok.mjs";
+register(t12);
+const _sfc_main = {
+  name: "NcInputConfirmCancel",
+  components: {
+    NcButton,
+    ArrowRight,
+    Close
+  },
+  props: {
+    /**
+     * If this element is used on a primary element set to true for primary styling.
+     */
+    primary: {
+      default: false,
+      type: Boolean
+    },
+    placeholder: {
+      default: "",
+      type: String
+    },
+    value: {
+      default: "",
+      type: String
+    }
+  },
+  emits: [
+    "input",
+    "confirm",
+    "cancel"
+  ],
+  data() {
+    return {
+      labelConfirm: t("Confirm changes"),
+      labelCancel: t("Cancel changes")
+    };
+  },
+  computed: {
+    valueModel: {
+      get() {
+        return this.value;
+      },
+      set(newValue) {
+        this.$emit("input", newValue);
+      }
+    }
+  },
+  methods: {
+    confirm() {
+      this.$emit("confirm");
+    },
+    cancel() {
+      this.$emit("cancel");
+    },
+    focusInput() {
+      this.$refs.input.focus();
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "app-navigation-input-confirm" }, [_c("form", { on: { "submit": function($event) {
+    $event.preventDefault();
+    return _vm.confirm.apply(null, arguments);
+  }, "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+      return null;
+    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey)
+      return null;
+    $event.stopPropagation();
+    $event.preventDefault();
+    return _vm.cancel.apply(null, arguments);
+  }, "click": function($event) {
+    $event.stopPropagation();
+    $event.preventDefault();
+  } } }, [_c("input", { directives: [{ name: "model", rawName: "v-model", value: _vm.valueModel, expression: "valueModel" }], ref: "input", staticClass: "app-navigation-input-confirm__input", attrs: { "type": "text", "placeholder": _vm.placeholder }, domProps: { "value": _vm.valueModel }, on: { "input": function($event) {
+    if ($event.target.composing)
+      return;
+    _vm.valueModel = $event.target.value;
+  } } }), _c("NcButton", { attrs: { "native-type": "submit", "type": "primary", "aria-label": _vm.labelConfirm }, on: { "click": function($event) {
+    $event.stopPropagation();
+    $event.preventDefault();
+    return _vm.confirm.apply(null, arguments);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("ArrowRight", { attrs: { "size": 20 } })];
+  }, proxy: true }]) }), _c("NcButton", { attrs: { "native-type": "reset", "type": _vm.primary ? "primary" : "tertiary", "aria-label": _vm.labelCancel }, on: { "click": function($event) {
+    $event.stopPropagation();
+    $event.preventDefault();
+    return _vm.cancel.apply(null, arguments);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("Close", { attrs: { "size": 20 } })];
+  }, proxy: true }]) })], 1)]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "dcf0becf",
+  null,
+  null
+);
+const NcInputConfirmCancel = __component__.exports;
+export {
+  NcInputConfirmCancel as N
+};

package/dist/chunks/{NcInputConfirmCancel-Nn_JgG9d.mjs.map → NcInputConfirmCancel-XXXgXoSw.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcInputConfirmCancel-Nn_JgG9d.mjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @author Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n# Usage\n\n```\n<NcInputConfirmCancel @confirm=\"alert('confirm')\" @cancel=\"alert('cancel')\" />\n```\n</docs>\n<template>\n\t<div class=\"app-navigation-input-confirm\">\n\t\t<form @submit.prevent=\"confirm\"\n\t\t\t@keydown.esc.exact.stop.prevent=\"cancel\"\n\t\t\t@click.stop.prevent>\n\t\t\t<input ref=\"input\"\n\t\t\t\tv-model=\"valueModel\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tclass=\"app-navigation-input-confirm__input\"\n\t\t\t\t:placeholder=\"placeholder\">\n\n\t\t\t<NcButton native-type=\"submit\"\n\t\t\t\ttype=\"primary\"\n\t\t\t\t:aria-label=\"labelConfirm\"\n\t\t\t\t@click.stop.prevent=\"confirm\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<NcButton native-type=\"reset\"\n\t\t\t\t:type=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t:aria-label=\"labelCancel\"\n\t\t\t\t@click.stop.prevent=\"cancel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</form>\n\t</div>\n</template>\n<script>\nimport NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tArrowRight,\n\t\tClose,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * If this element is used on a primary element set to true for primary styling.\n\t\t */\n\t\tprimary: {\n\t\t\tdefault: false,\n\t\t\ttype: Boolean,\n\t\t},\n\n\t\tplaceholder: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\n\t\tvalue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'confirm',\n\t\t'cancel',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelConfirm: t('Confirm changes'),\n\t\t\tlabelCancel: t('Cancel changes'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tvalueModel: {\n\t\t\tget() { return this.value },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('input', newValue)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\tconfirm() {\n\t\t\tthis.$emit('confirm')\n\t\t},\n\t\tcancel() {\n\t\t\tthis.$emit('cancel')\n\t\t},\n\t\tfocusInput() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n$input-height: 34px;\n$input-padding: 7px;\n$input-margin: 5px;\n\n.app-navigation-input-confirm {\n\tflex: 1 0 100%;\n\twidth: 100%;\n\n\tform {\n\t\tdisplay: flex;\n\t}\n\n\t&__input {\n\t\theight: $input-height;\n\t\tflex: 1 1 100%;\n\t\tfont-size: 100% !important;\n\t\tmargin: $input-margin !important;\n\t\tmargin-left: -1px - $input-padding !important;\n\t\tpadding: $input-padding !important;\n\n\t\t&:active,\n\t\t&:focus,\n\t\t&:hover {\n\t\t\toutline: none;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcButton","ArrowRight","Close","t","newValue"],"mappings":";;;;;;AAmEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAAC,EAAA,iBAAA;AAAA,MACA,aAAAA,EAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AAAA,MACA,MAAA;AAAA,eAAA,KAAA;AAAA,MAAA;AAAA,MACA,IAAAC,GAAA;AACA,aAAA,MAAA,SAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,WAAA,MAAA,SAAA;AAAA,IACA;AAAA,IACA,SAAA;AACA,WAAA,MAAA,QAAA;AAAA,IACA;AAAA,IACA,aAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcInputConfirmCancel-XXXgXoSw.mjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @author Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n# Usage\n\n```\n<NcInputConfirmCancel @confirm=\"alert('confirm')\" @cancel=\"alert('cancel')\" />\n```\n</docs>\n<template>\n\t<div class=\"app-navigation-input-confirm\">\n\t\t<form @submit.prevent=\"confirm\"\n\t\t\t@keydown.esc.exact.stop.prevent=\"cancel\"\n\t\t\t@click.stop.prevent>\n\t\t\t<input ref=\"input\"\n\t\t\t\tv-model=\"valueModel\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tclass=\"app-navigation-input-confirm__input\"\n\t\t\t\t:placeholder=\"placeholder\">\n\n\t\t\t<NcButton native-type=\"submit\"\n\t\t\t\ttype=\"primary\"\n\t\t\t\t:aria-label=\"labelConfirm\"\n\t\t\t\t@click.stop.prevent=\"confirm\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<NcButton native-type=\"reset\"\n\t\t\t\t:type=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t:aria-label=\"labelCancel\"\n\t\t\t\t@click.stop.prevent=\"cancel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</form>\n\t</div>\n</template>\n<script>\nimport NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tArrowRight,\n\t\tClose,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * If this element is used on a primary element set to true for primary styling.\n\t\t */\n\t\tprimary: {\n\t\t\tdefault: false,\n\t\t\ttype: Boolean,\n\t\t},\n\n\t\tplaceholder: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\n\t\tvalue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'confirm',\n\t\t'cancel',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelConfirm: t('Confirm changes'),\n\t\t\tlabelCancel: t('Cancel changes'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tvalueModel: {\n\t\t\tget() { return this.value },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('input', newValue)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\tconfirm() {\n\t\t\tthis.$emit('confirm')\n\t\t},\n\t\tcancel() {\n\t\t\tthis.$emit('cancel')\n\t\t},\n\t\tfocusInput() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n$input-height: 34px;\n$input-padding: 7px;\n$input-margin: 5px;\n\n.app-navigation-input-confirm {\n\tflex: 1 0 100%;\n\twidth: 100%;\n\n\tform {\n\t\tdisplay: flex;\n\t}\n\n\t&__input {\n\t\theight: $input-height;\n\t\tflex: 1 1 100%;\n\t\tfont-size: 100% !important;\n\t\tmargin: $input-margin !important;\n\t\tmargin-left: -1px - $input-padding !important;\n\t\tpadding: $input-padding !important;\n\n\t\t&:active,\n\t\t&:focus,\n\t\t&:hover {\n\t\t\toutline: none;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;;;;AAmEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAA,EAAA,iBAAA;AAAA,MACA,aAAA,EAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AAAA,MACA,MAAA;AAAA,eAAA,KAAA;AAAA,MAAA;AAAA,MACA,IAAA,UAAA;AACA,aAAA,MAAA,SAAA,QAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,WAAA,MAAA,SAAA;AAAA,IACA;AAAA,IACA,SAAA;AACA,WAAA,MAAA,QAAA;AAAA,IACA;AAAA,IACA,aAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcListItem-CxpC4EKk.cjs

@@ -0,0 +1,275 @@
+require('../assets/NcListItem-DMYcn1cc.css');
+"use strict";
+const NcActions = require("./NcActions-JX6wbAVA.cjs");
+const Components_NcCounterBubble = require("../Components/NcCounterBubble.cjs");
+const Components_NcVNodes = require("../Components/NcVNodes.cjs");
+const _l10n = require("./_l10n-BYPqjHzt.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-DbFIE4_M.cjs");
+_l10n.register(_l10n.t5);
+const _sfc_main = {
+  name: "NcListItem",
+  components: {
+    NcActions: NcActions.NcActions,
+    NcCounterBubble: Components_NcCounterBubble,
+    NcVNodes: Components_NcVNodes
+  },
+  props: {
+    /**
+     * The details text displayed in the upper right part of the component
+     */
+    details: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Name (first line of text)
+     */
+    name: {
+      type: String,
+      required: true
+    },
+    /**
+     * Pass in `true` if you want the matching behavior to
+     * be non-inclusive: https://router.vuejs.org/api/#exact
+     */
+    exact: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The route for the router link.
+     */
+    to: {
+      type: [String, Object],
+      default: null
+    },
+    /**
+     * The value for the external link
+     */
+    href: {
+      type: String,
+      default: "#"
+    },
+    target: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Id for the `<a>` element
+     */
+    anchorId: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Make subname bold
+     */
+    bold: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Show the NcListItem in compact design
+     */
+    compact: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Toggle the active state of the component
+     */
+    active: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Aria label for the wrapper element
+     */
+    linkAriaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Aria label for the actions toggle
+     */
+    actionsAriaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * If different from 0 this component will display the
+     * NcCounterBubble component
+     */
+    counterNumber: {
+      type: [Number, String],
+      default: 0
+    },
+    /**
+     * Outlined or highlighted state of the counter
+     */
+    counterType: {
+      type: String,
+      default: "",
+      validator(value) {
+        return ["highlighted", "outlined", ""].indexOf(value) !== -1;
+      }
+    },
+    /**
+     * To be used only when the elements in the actions menu are very important
+     */
+    forceDisplayActions: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Show the list component layout
+     */
+    oneLine: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+    "click",
+    "update:menuOpen"
+  ],
+  data() {
+    return {
+      hovered: false,
+      hasActions: false,
+      hasSubname: false,
+      displayActionsOnHoverFocus: false,
+      menuOpen: false,
+      hasIndicator: false,
+      hasDetails: false
+    };
+  },
+  computed: {
+    showAdditionalElements() {
+      return !this.displayActionsOnHoverFocus || this.forceDisplayActions;
+    },
+    showDetails() {
+      return (this.details !== "" || this.hasDetails) && (!this.displayActionsOnHoverFocus || this.forceDisplayActions);
+    },
+    computedActionsAriaLabel() {
+      return this.actionsAriaLabel || _l10n.t('Actions for item with name "{name}"', { name: this.name });
+    }
+  },
+  watch: {
+    menuOpen(newValue) {
+      if (!newValue && !this.hovered) {
+        this.displayActionsOnHoverFocus = false;
+      }
+    }
+  },
+  mounted() {
+    this.checkSlots();
+  },
+  updated() {
+    this.checkSlots();
+  },
+  methods: {
+    /**
+     * Handle link click
+     *
+     * @param {MouseEvent|KeyboardEvent} event - Native click or keydown event
+     * @param {Function} [navigate] - VueRouter link's navigate if any
+     * @param {string} [routerLinkHref] - VueRouter link's href
+     */
+    onClick(event, navigate, routerLinkHref) {
+      this.$emit("click", event);
+      if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {
+        return;
+      }
+      if (routerLinkHref) {
+        navigate == null ? void 0 : navigate(event);
+        event.preventDefault();
+      }
+    },
+    showActions() {
+      if (this.hasActions) {
+        this.displayActionsOnHoverFocus = true;
+      }
+      this.hovered = false;
+    },
+    hideActions() {
+      this.displayActionsOnHoverFocus = false;
+    },
+    /**
+     * @param {FocusEvent} event UI event
+     */
+    handleBlur(event) {
+      if (this.menuOpen) {
+        return;
+      }
+      if (this.$refs["list-item"].contains(event.relatedTarget)) {
+        return;
+      }
+      this.hideActions();
+    },
+    /**
+     * Hide the actions on mouseleave unless the menu is open
+     */
+    handleMouseleave() {
+      if (!this.menuOpen) {
+        this.displayActionsOnHoverFocus = false;
+      }
+      this.hovered = false;
+    },
+    handleMouseover() {
+      this.showActions();
+      this.hovered = true;
+    },
+    handleActionsUpdateOpen(e) {
+      this.menuOpen = e;
+      this.$emit("update:menuOpen", e);
+    },
+    // Check if subname and actions slots are populated
+    checkSlots() {
+      if (this.hasActions !== !!this.$slots.actions) {
+        this.hasActions = !!this.$slots.actions;
+      }
+      if (this.hasSubname !== !!this.$slots.subname) {
+        this.hasSubname = !!this.$slots.subname;
+      }
+      if (this.hasIndicator !== !!this.$slots.indicator) {
+        this.hasIndicator = !!this.$slots.indicator;
+      }
+      if (this.hasDetails !== !!this.$slots.details) {
+        this.hasDetails = !!this.$slots.details;
+      }
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c(_vm.to ? "router-link" : "NcVNodes", { tag: "component", attrs: { "custom": _vm.to ? true : null, "to": _vm.to, "exact": _vm.to ? _vm.exact : null }, scopedSlots: _vm._u([{ key: "default", fn: function({ href: routerLinkHref, navigate, isActive }) {
+    return [_c("li", { staticClass: "list-item__wrapper", class: { "list-item__wrapper--active": isActive || _vm.active } }, [_c("div", { ref: "list-item", staticClass: "list-item", class: {
+      "list-item--compact": _vm.compact,
+      "list-item--one-line": _vm.oneLine
+    }, on: { "mouseover": _vm.handleMouseover, "mouseleave": _vm.handleMouseleave } }, [_c("a", { staticClass: "list-item__anchor", attrs: { "id": _vm.anchorId || void 0, "aria-label": _vm.linkAriaLabel, "href": routerLinkHref || _vm.href, "target": _vm.target || (_vm.href === "#" ? void 0 : "_blank"), "rel": _vm.href === "#" ? void 0 : "noopener noreferrer" }, on: { "focus": _vm.showActions, "focusout": _vm.handleBlur, "click": function($event) {
+      return _vm.onClick($event, navigate, routerLinkHref);
+    }, "keydown": function($event) {
+      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+        return null;
+      return _vm.hideActions.apply(null, arguments);
+    } } }, [_vm._t("icon"), _c("div", { staticClass: "list-item-content" }, [_c("div", { staticClass: "list-item-content__main" }, [_c("div", { staticClass: "list-item-content__name" }, [_vm._t("name", function() {
+      return [_vm._v(_vm._s(_vm.name))];
+    })], 2), _vm.hasSubname ? _c("div", { staticClass: "list-item-content__subname", class: { "list-item-content__subname--bold": _vm.bold } }, [_vm._t("subname")], 2) : _vm._e()]), _c("div", { staticClass: "list-item-content__details" }, [_vm.showDetails ? _c("div", { staticClass: "list-item-details__details" }, [_vm._t("details", function() {
+      return [_vm._v(_vm._s(_vm.details))];
+    })], 2) : _vm._e(), _vm.counterNumber != 0 || _vm.hasIndicator ? _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.showAdditionalElements, expression: "showAdditionalElements" }], staticClass: "list-item-details__extra" }, [_vm.counterNumber != 0 ? _c("NcCounterBubble", { staticClass: "list-item-details__counter", attrs: { "active": isActive || _vm.active, "type": _vm.counterType } }, [_vm._v(" " + _vm._s(_vm.counterNumber) + " ")]) : _vm._e(), _vm.hasIndicator ? _c("span", { staticClass: "list-item-details__indicator" }, [_vm._t("indicator")], 2) : _vm._e()], 1) : _vm._e()])])], 2), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.forceDisplayActions || _vm.displayActionsOnHoverFocus, expression: "forceDisplayActions || displayActionsOnHoverFocus" }], staticClass: "list-item-content__actions", on: { "focusout": _vm.handleBlur } }, [_c("NcActions", { ref: "actions", attrs: { "primary": isActive || _vm.active, "aria-label": _vm.computedActionsAriaLabel }, on: { "update:open": _vm.handleActionsUpdateOpen } }, [_vm._t("actions")], 2)], 1), _vm.$slots.extra ? _c("div", { staticClass: "list-item__extra" }, [_vm._t("extra")], 2) : _vm._e()])])];
+  } }], null, true) });
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "6eacaffe",
+  null,
+  null
+);
+const NcListItem = __component__.exports;
+exports.NcListItem = NcListItem;