@nextcloud/vue 9.0.0-alpha.1 → 9.0.0-alpha.3

package/dist/chunks/NcEllipsisedOption-DsCFqgUF.mjs

@@ -0,0 +1,98 @@
+import '../assets/NcEllipsisedOption-ClDzkIX6.css';
+import { _ as _sfc_main$1, F as FindRanges } from "./NcHighlight-CR5kySMp.mjs";
+import { resolveComponent, openBlock, createElementBlock, createVNode, createBlock, createCommentVNode } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcEllipsisedOption",
+  components: {
+    NcHighlight: _sfc_main$1
+  },
+  props: {
+    name: {
+      type: String,
+      default: ""
+    },
+    search: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    needsTruncate() {
+      return this.name && this.name.length >= 10;
+    },
+    /**
+     * Index at which to split the name if it is longer than 10 characters.
+     *
+     * @return {number} The position at which to split
+     */
+    split() {
+      return this.name.length - Math.min(Math.floor(this.name.length / 2), 10);
+    },
+    part1() {
+      if (this.needsTruncate) {
+        return this.name.slice(0, this.split);
+      }
+      return this.name;
+    },
+    part2() {
+      if (this.needsTruncate) {
+        return this.name.slice(this.split);
+      }
+      return "";
+    },
+    /**
+     * The ranges to highlight. Since we split the string for ellipsising,
+     * the Highlight component cannot figure this out itself and needs the ranges provided.
+     *
+     * @return {Array} The array with the ranges to highlight
+     */
+    highlight1() {
+      if (!this.search) {
+        return [];
+      }
+      return FindRanges(this.name, this.search);
+    },
+    /**
+     * We shift the ranges for the second part by the position of the split.
+     * Ranges out of the string length are discarded by the Highlight component,
+     * so we don't need to take care of this here.
+     *
+     * @return {Array} The array with the ranges to highlight
+     */
+    highlight2() {
+      return this.highlight1.map((range) => {
+        return {
+          start: range.start - this.split,
+          end: range.end - this.split
+        };
+      });
+    }
+  }
+};
+const _hoisted_1 = ["title"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcHighlight = resolveComponent("NcHighlight");
+  return openBlock(), createElementBlock("span", {
+    class: "name-parts",
+    title: $props.name
+  }, [
+    createVNode(_component_NcHighlight, {
+      class: "name-parts__first",
+      text: $options.part1,
+      search: $props.search,
+      highlight: $options.highlight1
+    }, null, 8, ["text", "search", "highlight"]),
+    $options.part2 ? (openBlock(), createBlock(_component_NcHighlight, {
+      key: 0,
+      class: "name-parts__last",
+      text: $options.part2,
+      search: $props.search,
+      highlight: $options.highlight2
+    }, null, 8, ["text", "search", "highlight"])) : createCommentVNode("", true)
+  ], 8, _hoisted_1);
+}
+const NcEllipsisedOption = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-08c4259e"]]);
+export {
+  NcEllipsisedOption as N
+};

package/dist/chunks/NcEllipsisedOption-DsCFqgUF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcEllipsisedOption-DsCFqgUF.mjs","sources":["../../src/components/NcEllipsisedOption/NcEllipsisedOption.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\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<template>\n\t<span class=\"name-parts\" :title=\"name\">\n\t\t<NcHighlight class=\"name-parts__first\"\n\t\t\t:text=\"part1\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight1\" />\n\t\t<NcHighlight v-if=\"part2\"\n\t\t\tclass=\"name-parts__last\"\n\t\t\t:text=\"part2\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight2\" />\n\t</span>\n</template>\n<script>\nimport NcHighlight from '../NcHighlight/index.js'\nimport FindRanges from '../../utils/FindRanges.js'\n\nexport default {\n\tname: 'NcEllipsisedOption',\n\n\tcomponents: {\n\t\tNcHighlight,\n\t},\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tneedsTruncate() {\n\t\t\treturn this.name && this.name.length >= 10\n\t\t},\n\t\t/**\n\t\t * Index at which to split the name if it is longer than 10 characters.\n\t\t *\n\t\t * @return {number} The position at which to split\n\t\t */\n\t\tsplit() {\n\t\t\t// leave maximum 10 letters\n\t\t\treturn this.name.length - Math.min(Math.floor(this.name.length / 2), 10)\n\t\t},\n\t\tpart1() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(0, this.split)\n\t\t\t}\n\t\t\treturn this.name\n\t\t},\n\t\tpart2() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(this.split)\n\t\t\t}\n\t\t\treturn ''\n\t\t},\n\t\t/**\n\t\t * The ranges to highlight. Since we split the string for ellipsising,\n\t\t * the Highlight component cannot figure this out itself and needs the ranges provided.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight1() {\n\t\t\tif (!this.search) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\treturn FindRanges(this.name, this.search)\n\t\t},\n\t\t/**\n\t\t * We shift the ranges for the second part by the position of the split.\n\t\t * Ranges out of the string length are discarded by the Highlight component,\n\t\t * so we don't need to take care of this here.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight2() {\n\t\t\treturn this.highlight1.map(range => {\n\t\t\t\treturn {\n\t\t\t\t\tstart: range.start - this.split,\n\t\t\t\t\tend: range.end - this.split,\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.name-parts {\n\tdisplay: flex;\n\tmax-width: 100%;\n\tcursor: inherit;\n\t&__first {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t&__first,\n\t&__last {\n\t\t// prevent whitespace from being trimmed\n\t\twhite-space: pre;\n\t\tcursor: inherit;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcHighlight","_createElementBlock","_createVNode","_createBlock","_createCommentVNode"],"mappings":";;;AAuCA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,iBACXA;AAAAA,EACA;AAAA,EAED,OAAO;AAAA,IACN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,IAED,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACT,gBAAgB;AACf,aAAO,KAAK,QAAQ,KAAK,KAAK,UAAU;AAAA,IACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAEP,aAAO,KAAK,KAAK,SAAS,KAAK,IAAI,KAAK,MAAM,KAAK,KAAK,SAAS,CAAC,GAAG,EAAE;AAAA,IACvE;AAAA,IACD,QAAQ;AACP,UAAI,KAAK,eAAe;AACvB,eAAO,KAAK,KAAK,MAAM,GAAG,KAAK,KAAK;AAAA,MACrC;AACA,aAAO,KAAK;AAAA,IACZ;AAAA,IACD,QAAQ;AACP,UAAI,KAAK,eAAe;AACvB,eAAO,KAAK,KAAK,MAAM,KAAK,KAAK;AAAA,MAClC;AACA,aAAO;AAAA,IACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAa;AACZ,UAAI,CAAC,KAAK,QAAQ;AACjB,eAAO,CAAC;AAAA,MACT;AACA,aAAO,WAAW,KAAK,MAAM,KAAK,MAAM;AAAA,IACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,aAAa;AACZ,aAAO,KAAK,WAAW,IAAI,WAAS;AACnC,eAAO;AAAA,UACN,OAAO,MAAM,QAAQ,KAAK;AAAA,UAC1B,KAAK,MAAM,MAAM,KAAK;AAAA,QACvB;AAAA,OACA;AAAA,IACD;AAAA,EACD;AACF;AA/GA,MAAA,aAAA,CAAA,OAAA;;;sBAuBCC,mBAUO,QAAA;AAAA,IAVD,OAAM;AAAA,IAAc,OAAO,OAAI;AAAA;IACpCC,YAG2B,wBAAA;AAAA,MAHd,OAAM;AAAA,MACjB,MAAM,SAAK;AAAA,MACX,QAAQ,OAAM;AAAA,MACd,WAAW,SAAU;AAAA;IACJ,SAAK,sBAAxBC,YAI2B,wBAAA;AAAA,MAhC7B,KAAA;AAAA,MA6BG,OAAM;AAAA,MACL,MAAM,SAAK;AAAA,MACX,QAAQ,OAAM;AAAA,MACd,WAAW,SAAU;AAAA,oDAhCzBC,mBAAA,IAAA,IAAA;AAAA,EAAA,GAAA,GAAA,UAAA;;;"}

package/dist/chunks/NcEmojiPicker-BwQ8VxQZ.mjs

@@ -0,0 +1,380 @@
+import '../assets/NcEmojiPicker-DPDnLnba.css';
+import { g as getCurrentSkinTone, s as setCurrentSkinTone } from "./emoji-BjUFGMrw.mjs";
+import { C as Color } from "./GenColors-BjorWIgA.mjs";
+import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, resolveComponent, createBlock, withCtx, renderSlot, normalizeProps, guardReactiveProps, createVNode, createSlots, normalizeStyle } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { N as NcButton } from "./NcButton-B27fpd1m.mjs";
+import { N as NcColorPicker } from "./NcColorPicker-D4IB1shI.mjs";
+import { N as NcPopover } from "./NcPopover-B9UbiGTv.mjs";
+import { N as NcTextField } from "./NcTextField-5CbWAUlw.mjs";
+import { r as register, u as t36, v as t31, w as t6, a as t } from "./_l10n-ipRV_dfs.mjs";
+import { Emoji, Picker, EmojiIndex } from "emoji-mart-vue-fast/src/index.js";
+import data from "emoji-mart-vue-fast/data/all.json";
+const _sfc_main$1 = {
+  name: "CircleIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$1 = ["aria-hidden", "aria-label"];
+const _hoisted_2$1 = ["fill", "width", "height"];
+const _hoisted_3$1 = { d: "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" };
+const _hoisted_4 = { key: 0 };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : true,
+    "aria-label": $props.title,
+    class: "material-design-icon circle-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$1, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$1))
+  ], 16, _hoisted_1$1);
+}
+const IconCircle = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+register(t6, t31, t36);
+let emojiIndex;
+const i18n = {
+  search: t("Search emoji"),
+  notfound: t("No emoji found"),
+  categories: {
+    search: t("Search results"),
+    recent: t("Frequently used"),
+    smileys: t("Smileys & Emotion"),
+    people: t("People & Body"),
+    nature: t("Animals & Nature"),
+    foods: t("Food & Drink"),
+    activity: t("Activities"),
+    places: t("Travel & Places"),
+    objects: t("Objects"),
+    symbols: t("Symbols"),
+    flags: t("Flags"),
+    custom: t("Custom")
+  }
+};
+const skinTonePalette = [
+  new Color(255, 222, 52, t("Neutral skin color")),
+  new Color(228, 205, 166, t("Light skin tone")),
+  new Color(250, 221, 192, t("Medium light skin tone")),
+  new Color(174, 129, 87, t("Medium skin tone")),
+  new Color(158, 113, 88, t("Medium dark skin tone")),
+  new Color(96, 79, 69, t("Dark skin tone"))
+];
+const _sfc_main = {
+  name: "NcEmojiPicker",
+  components: {
+    IconCircle,
+    NcButton,
+    NcColorPicker,
+    NcPopover,
+    NcTextField,
+    Emoji,
+    Picker
+  },
+  props: {
+    /**
+     * The emoji-set
+     */
+    activeSet: {
+      type: String,
+      default: "native"
+    },
+    /**
+     * Show preview section when hovering emoji
+     */
+    showPreview: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Allow unselecting the selected emoji
+     */
+    allowUnselect: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Selected emoji to allow unselecting
+     */
+    selectedEmoji: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The fallback emoji in the preview section
+     */
+    previewFallbackEmoji: {
+      type: String,
+      default: "grinning"
+    },
+    /**
+     * The fallback text in the preview section
+     */
+    previewFallbackName: {
+      type: String,
+      default: t("Pick an emoji")
+    },
+    /**
+     * Whether to close the emoji picker after picking one
+     */
+    closeOnSelect: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Selector for the popover container
+     */
+    container: {
+      type: [String, Object, Element, Boolean],
+      default: "body"
+    }
+  },
+  emits: [
+    "select",
+    "select-data",
+    "unselect"
+  ],
+  setup() {
+    if (!emojiIndex) {
+      emojiIndex = new EmojiIndex(data);
+    }
+    return {
+      // Non-reactive constants
+      emojiIndex,
+      skinTonePalette,
+      i18n
+    };
+  },
+  data() {
+    const currentSkinTone = getCurrentSkinTone();
+    return {
+      /**
+       * The current active color from the skin tone palette
+       */
+      currentColor: skinTonePalette[currentSkinTone - 1],
+      /**
+       * The current active skin tone
+       * @type {1|2|3|4|5|6}
+       */
+      currentSkinTone,
+      search: "",
+      open: false
+    };
+  },
+  computed: {
+    native() {
+      return this.activeSet === "native";
+    }
+  },
+  methods: {
+    t,
+    clearSearch() {
+      this.search = "";
+      const input = this.$refs.search?.$refs.inputField?.$refs.input;
+      if (input) {
+        input.focus();
+      }
+    },
+    /**
+     * Update the current skin tone by the result of the color picker
+     * @param {string} color Color set
+     */
+    onChangeSkinTone(color) {
+      const index = this.skinTonePalette.findIndex((tone) => tone.color.toLowerCase() === color.toLowerCase());
+      if (index > -1) {
+        this.currentSkinTone = index + 1;
+        this.currentColor = this.skinTonePalette[index];
+        setCurrentSkinTone(this.currentSkinTone);
+      }
+    },
+    select(emojiObject) {
+      this.$emit("select", emojiObject.native);
+      this.$emit("select-data", emojiObject);
+      if (this.closeOnSelect) {
+        this.open = false;
+      }
+    },
+    unselect() {
+      this.$emit("unselect");
+    },
+    afterShow() {
+      const picker = this.$refs.picker;
+      picker.$el.addEventListener("keydown", this.checkKeyEvent);
+      const input = this.$refs.search?.$refs.inputField?.$refs.input;
+      if (input) {
+        input.focus();
+      }
+    },
+    afterHide() {
+      const picker = this.$refs.picker;
+      picker.$el.removeEventListener("keydown", this.checkKeyEvent);
+    },
+    checkKeyEvent(event) {
+      if (event.key !== "Tab") {
+        return;
+      }
+      const picker = this.$refs.picker;
+      const focusableList = picker.$el.querySelectorAll(
+        "button, input"
+      );
+      const last = focusableList.length - 1;
+      if (focusableList.length <= 1) {
+        event.preventDefault();
+        return;
+      }
+      if (event.shiftKey === false && event.target === focusableList[last]) {
+        event.preventDefault();
+        focusableList[0].focus();
+      } else if (event.shiftKey === true && event.target === focusableList[0]) {
+        event.preventDefault();
+        focusableList[last].focus();
+      }
+    }
+  }
+};
+const _hoisted_1 = { class: "search__wrapper" };
+const _hoisted_2 = { class: "emoji-mart-category-label" };
+const _hoisted_3 = { class: "emoji-mart-category-label" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcTextField = resolveComponent("NcTextField");
+  const _component_IconCircle = resolveComponent("IconCircle");
+  const _component_NcButton = resolveComponent("NcButton");
+  const _component_NcColorPicker = resolveComponent("NcColorPicker");
+  const _component_Emoji = resolveComponent("Emoji");
+  const _component_Picker = resolveComponent("Picker");
+  const _component_NcPopover = resolveComponent("NcPopover");
+  return openBlock(), createBlock(_component_NcPopover, {
+    shown: $data.open,
+    "onUpdate:shown": _cache[1] || (_cache[1] = ($event) => $data.open = $event),
+    container: $props.container,
+    "popup-role": "dialog",
+    onAfterShow: $options.afterShow,
+    onAfterHide: $options.afterHide
+  }, {
+    trigger: withCtx((slotProps) => [
+      renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
+    ]),
+    default: withCtx(() => [
+      createVNode(_component_Picker, mergeProps({
+        ref: "picker",
+        "auto-focus": false,
+        color: "var(--color-primary-element)",
+        data: $setup.emojiIndex,
+        emoji: $props.previewFallbackEmoji,
+        i18n: $setup.i18n,
+        native: $options.native,
+        "emoji-size": 20,
+        "per-line": 8,
+        "picker-styles": { width: "320px" },
+        "show-preview": $props.showPreview,
+        skin: $data.currentSkinTone,
+        "show-skin-tones": false,
+        title: $props.previewFallbackName,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": $options.t("Emoji picker")
+      }, _ctx.$attrs, { onSelect: $options.select }), createSlots({
+        searchTemplate: withCtx((slotProps) => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(_component_NcTextField, {
+              ref: "search",
+              modelValue: $data.search,
+              "onUpdate:modelValue": [
+                _cache[0] || (_cache[0] = ($event) => $data.search = $event),
+                ($event) => slotProps.onSearch($data.search)
+              ],
+              class: "search",
+              label: $options.t("Search"),
+              "label-visible": true,
+              placeholder: $setup.i18n.search,
+              "trailing-button-icon": "close",
+              "trailing-button-label": $options.t("Clear search"),
+              "show-trailing-button": $data.search !== "",
+              onTrailingButtonClick: ($event) => {
+                $options.clearSearch();
+                slotProps.onSearch($data.search);
+              }
+            }, null, 8, ["modelValue", "label", "placeholder", "trailing-button-label", "show-trailing-button", "onTrailingButtonClick", "onUpdate:modelValue"]),
+            createVNode(_component_NcColorPicker, {
+              "palette-only": "",
+              container: $props.container,
+              palette: $setup.skinTonePalette,
+              "model-value": $data.currentColor.color,
+              "onUpdate:modelValue": $options.onChangeSkinTone
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_NcButton, {
+                  "aria-label": $options.t("Skin tone"),
+                  type: "tertiary-no-background"
+                }, {
+                  icon: withCtx(() => [
+                    createVNode(_component_IconCircle, {
+                      style: normalizeStyle({ color: $data.currentColor.color }),
+                      title: $data.currentColor.name,
+                      size: 20
+                    }, null, 8, ["style", "title"])
+                  ]),
+                  _: 1
+                }, 8, ["aria-label"])
+              ]),
+              _: 1
+            }, 8, ["container", "palette", "model-value", "onUpdate:modelValue"])
+          ])
+        ]),
+        _: 2
+      }, [
+        $props.allowUnselect && $props.selectedEmoji ? {
+          name: "customCategory",
+          fn: withCtx(() => [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("h3", _hoisted_3, toDisplayString($options.t("Selected")), 1)
+            ]),
+            createVNode(_component_Emoji, {
+              class: "emoji-selected",
+              data: $setup.emojiIndex,
+              emoji: $props.selectedEmoji,
+              native: true,
+              size: 32,
+              onClick: $options.unselect
+            }, null, 8, ["data", "emoji", "onClick"]),
+            createVNode(_component_Emoji, {
+              class: "emoji-delete",
+              data: $setup.emojiIndex,
+              emoji: ":x:",
+              native: true,
+              size: 10,
+              onClick: $options.unselect
+            }, null, 8, ["data", "onClick"])
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["data", "emoji", "i18n", "native", "show-preview", "skin", "title", "aria-label", "onSelect"])
+    ]),
+    _: 3
+  }, 8, ["shown", "container", "onAfterShow", "onAfterHide"]);
+}
+const NcEmojiPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e7ed86bd"]]);
+export {
+  NcEmojiPicker as N
+};

package/dist/chunks/NcEmojiPicker-BwQ8VxQZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcEmojiPicker-BwQ8VxQZ.mjs","sources":["../../node_modules/vue-material-design-icons/Circle.vue","../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon circle-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CircleIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com>\n -\n - @author 2020 Georg Ehrke <oc.list@georgehrke.com>\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### General description\n\nThis component allows the user to pick an emoji.\n\n### Usage\n\n* Listen to the select event and pass in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker @select=\"select\" style=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Showing a preview and keeping it open after a user selected an emoji\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:close-on-select=\"false\"\n\t\t\t:show-preview=\"true\"\n\t\t\t@select=\"select\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Allow unselecting a previously set emoji.\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:show-preview=\"true\"\n\t\t\t:allow-unselect=\"true\"\n\t\t\t:selected-emoji=\"emoji\"\n\t\t\t@select=\"select\"\n\t\t\t@unselect=\"unselect\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t\tunselect() {\n\t\t\t\tthis.emoji = ''\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<NcPopover v-model:shown=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<Picker ref=\"picker\"\n\t\t\t:auto-focus=\"false /* We manage the input focus ourselves */\"\n\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t:data=\"emojiIndex\"\n\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t:i18n=\"i18n\"\n\t\t\t:native=\"native\"\n\t\t\t:emoji-size=\"20\"\n\t\t\t:per-line=\"8\"\n\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t:show-preview=\"showPreview\"\n\t\t\t:skin=\"currentSkinTone\"\n\t\t\t:show-skin-tones=\"false\"\n\t\t\t:title=\"previewFallbackName\"\n\t\t\trole=\"dialog\"\n\t\t\taria-modal=\"true\"\n\t\t\t:aria-label=\"t('Emoji picker')\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@select=\"select\">\n\t\t\t<template #searchTemplate=\"slotProps\">\n\t\t\t\t<div class=\"search__wrapper\">\n\t\t\t\t\t<NcTextField ref=\"search\"\n\t\t\t\t\t\tv-model=\"search\"\n\t\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t\t@trailing-button-click=\"clearSearch(); slotProps.onSearch(search);\"\n\t\t\t\t\t\t@update:model-value=\"slotProps.onSearch(search)\" />\n\t\t\t\t\t<NcColorPicker palette-only\n\t\t\t\t\t\t:container=\"container\"\n\t\t\t\t\t\t:palette=\"skinTonePalette\"\n\t\t\t\t\t\t:model-value=\"currentColor.color\"\n\t\t\t\t\t\t@update:model-value=\"onChangeSkinTone\">\n\t\t\t\t\t\t<NcButton :aria-label=\"t('Skin tone')\" type=\"tertiary-no-background\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<IconCircle :style=\"{ color: currentColor.color }\" :title=\"currentColor.name\" :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</NcColorPicker>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t</h3>\n\t\t\t\t</div>\n\t\t\t\t<Emoji class=\"emoji-selected\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t<Emoji class=\"emoji-delete\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t</template>\n\t\t</Picker>\n\t</NcPopover>\n</template>\n\n<script>\nimport { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'\nimport { Color } from '../../utils/GenColors.js'\n\nimport IconCircle from 'vue-material-design-icons/Circle.vue'\nimport NcButton from '../NcButton/index.ts'\nimport NcColorPicker from '../NcColorPicker/NcColorPicker.vue'\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.js'\nimport { t } from '../../l10n.js'\n\nimport { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast/src/index.js'\nimport data from 'emoji-mart-vue-fast/data/all.json'\n\n// Shared emoji index and skinTone for all NcEmojiPicker instances\n// Will be initialized on the first NcEmojiPicker creating\nlet emojiIndex\n\nconst i18n = {\n\tsearch: t('Search emoji'),\n\tnotfound: t('No emoji found'),\n\tcategories: {\n\t\tsearch: t('Search results'),\n\t\trecent: t('Frequently used'),\n\t\tsmileys: t('Smileys & Emotion'),\n\t\tpeople: t('People & Body'),\n\t\tnature: t('Animals & Nature'),\n\t\tfoods: t('Food & Drink'),\n\t\tactivity: t('Activities'),\n\t\tplaces: t('Travel & Places'),\n\t\tobjects: t('Objects'),\n\t\tsymbols: t('Symbols'),\n\t\tflags: t('Flags'),\n\t\tcustom: t('Custom'),\n\t},\n}\n\nconst skinTonePalette = [\n\tnew Color(255, 222, 52, t('Neutral skin color')),\n\tnew Color(228, 205, 166, t('Light skin tone')),\n\tnew Color(250, 221, 192, t('Medium light skin tone')),\n\tnew Color(174, 129, 87, t('Medium skin tone')),\n\tnew Color(158, 113, 88, t('Medium dark skin tone')),\n\tnew Color(96, 79, 69, t('Dark skin tone')),\n]\n\nexport default {\n\tname: 'NcEmojiPicker',\n\n\tcomponents: {\n\t\tIconCircle,\n\t\tNcButton,\n\t\tNcColorPicker,\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tEmoji,\n\t\tPicker,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The emoji-set\n\t\t */\n\t\tactiveSet: {\n\t\t\ttype: String,\n\t\t\tdefault: 'native',\n\t\t},\n\t\t/**\n\t\t * Show preview section when hovering emoji\n\t\t */\n\t\tshowPreview: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Allow unselecting the selected emoji\n\t\t */\n\t\tallowUnselect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Selected emoji to allow unselecting\n\t\t */\n\t\tselectedEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The fallback emoji in the preview section\n\t\t */\n\t\tpreviewFallbackEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: 'grinning',\n\t\t},\n\t\t/**\n\t\t * The fallback text in the preview section\n\t\t */\n\t\tpreviewFallbackName: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Pick an emoji'),\n\t\t},\n\t\t/**\n\t\t * Whether to close the emoji picker after picking one\n\t\t */\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\temits: [\n\t\t'select',\n\t\t'select-data',\n\t\t'unselect',\n\t],\n\n\tsetup() {\n\t\t// If this is the first instance of NcEmojiPicker - setup EmojiIndex\n\t\tif (!emojiIndex) {\n\t\t\temojiIndex = new EmojiIndex(data)\n\t\t}\n\n\t\treturn {\n\t\t\t// Non-reactive constants\n\t\t\temojiIndex,\n\t\t\tskinTonePalette,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\tconst currentSkinTone = getCurrentSkinTone()\n\n\t\treturn {\n\t\t\t/**\n\t\t\t * The current active color from the skin tone palette\n\t\t\t */\n\t\t\tcurrentColor: skinTonePalette[currentSkinTone - 1],\n\t\t\t/**\n\t\t\t * The current active skin tone\n\t\t\t * @type {1|2|3|4|5|6}\n\t\t\t */\n\t\t\tcurrentSkinTone,\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Update the current skin tone by the result of the color picker\n\t\t * @param {string} color Color set\n\t\t */\n\t\tonChangeSkinTone(color) {\n\t\t\tconst index = this.skinTonePalette.findIndex((tone) => tone.color.toLowerCase() === color.toLowerCase())\n\t\t\tif (index > -1) {\n\t\t\t\tthis.currentSkinTone = index + 1\n\t\t\t\tthis.currentColor = this.skinTonePalette[index]\n\t\t\t\tsetCurrentSkinTone(this.currentSkinTone)\n\t\t\t}\n\t\t},\n\n\t\tselect(emojiObject) {\n\t\t\t/**\n\t\t\t * Emits a string containing the emoji e.g. '👩🏿‍💻'\n\t\t\t */\n\t\t\tthis.$emit('select', emojiObject.native)\n\n\t\t\t/**\n\t\t\t * Emits a object with more data about the picked emoji\n\t\t\t */\n\t\t\tthis.$emit('select-data', emojiObject)\n\n\t\t\tif (this.closeOnSelect) {\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t},\n\n\t\tunselect() {\n\t\t\tthis.$emit('unselect')\n\t\t},\n\n\t\tafterShow() {\n\t\t\t// add focus trap in modal\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.addEventListener('keydown', this.checkKeyEvent)\n\n\t\t\t// set focus on input search field\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// remove keydown listner if popover is hidden\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.removeEventListener('keydown', this.checkKeyEvent)\n\t\t},\n\n\t\tcheckKeyEvent(event) {\n\t\t\tif (event.key !== 'Tab') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst picker = this.$refs.picker\n\t\t\tconst focusableList = picker.$el.querySelectorAll(\n\t\t\t\t'button, input',\n\t\t\t)\n\t\t\tconst last = focusableList.length - 1\n\t\t\t// escape early if only 1 or no elements to focus\n\t\t\tif (focusableList.length <= 1) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (event.shiftKey === false && event.target === focusableList[last]) {\n\t\t\t\t// Jump to first item when pressing tab on the latest item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[0].focus()\n\t\t\t} else if (event.shiftKey === true && event.target === focusableList[0]) {\n\t\t\t\t// Jump to the last item if pressing shift+tab on the first item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[last].focus()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n@import 'emoji-mart-vue-fast/css/emoji-mart.css';\n\n.emoji-mart {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\tdisplay: flex !important;\n\n\t// default style reset\n\tbutton {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\n\t\theight: 36px;\n\t\twidth: auto;\n\n\t\t* {\n\t\t\tcursor: pointer !important;\n\t\t}\n\t}\n\n\t.emoji-mart-bar,\n\t.emoji-mart-anchors,\n\t.emoji-mart-search,\n\t.emoji-mart-search input,\n\t.emoji-mart-category,\n\t.emoji-mart-category-label,\n\t.emoji-mart-category-label span,\n\t.emoji-mart-skin-swatches {\n\t\tbackground-color: transparent !important;\n\t\tborder-color: var(--color-border) !important;\n\t\tcolor: inherit !important;\n\t}\n\n\t.emoji-mart-search input:focus-visible {\n\t\tbox-shadow: inset 0 0 0 2px var(--color-primary-element);\n\t\toutline: none;\n\t}\n\n\t.emoji-mart-bar {\n\t\t&:first-child {\n\t\t\tborder-top-left-radius: var(--border-radius) !important;\n\t\t\tborder-top-right-radius: var(--border-radius) !important;\n\t\t}\n\t}\n\n\t.emoji-mart-anchors {\n\t\tbutton {\n\t\t\tborder-radius: 0;\n\t\t\tpadding: 12px 4px;\n\t\t\theight: auto;\n\t\t\t&:focus-visible {\n\t\t\t\t/* box-shadow: inset 0 0 0 2px var(--color-primary-element); */\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: start;\n\n\t\t.emoji-mart-category-label,\n\t\t.emoji-mart-emoji {\n\t\t\tuser-select: none;\n\t\t\tflex-grow: 0;\n\t\t\tflex-shrink: 0;\n\t\t}\n\n\t\t.emoji-mart-category-label {\n\t\t\tflex-basis: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t.emoji-mart-emoji {\n\t\t\t// 8 emoji per row\n\t\t\tflex-basis: calc(100% / 8);\n\t\t\ttext-align: center;\n\n\t\t\t&:hover::before,\n\t\t\t&.emoji-mart-emoji-selected::before{\n\t\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t\tbutton {\n\n\t\t\t&:focus-visible {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\tborder: 2px solid var(--color-primary-element) !important;\n\t\t\t\tborder-radius: 50%;\n\t\t\t}\n\t\t}\n\t}\n\n}\n</style>\n\n<style scoped lang=\"scss\">\n.search {\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 4px; // for focus-visible outlines\n\t\talign-items: end;\n\t\tpadding: 4px 8px;\n\t}\n}\n\n.row-selected {\n\tbutton, span {\n\t\tvertical-align: middle;\n\t}\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-left: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_createCommentVNode","_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode","_createSlots","_normalizeStyle","_toDisplayString"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/NcEmptyContent-CdgacgQe.mjs

@@ -0,0 +1,67 @@
+import '../assets/NcEmptyContent-CMM4BKRc.css';
+import { openBlock, createElementBlock, renderSlot, createCommentVNode, toDisplayString, createTextVNode } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcEmptyContent",
+  props: {
+    /**
+     * A header message about an empty content shown
+     * @example 'No comments'
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Desription of the empty content
+     * @example 'No comments yet, start the conversation!'
+     */
+    description: {
+      type: String,
+      default: ""
+    }
+  }
+};
+const _hoisted_1 = {
+  class: "empty-content",
+  role: "note"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "empty-content__icon",
+  "aria-hidden": "true"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "empty-content__name"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "empty-content__description"
+};
+const _hoisted_5 = {
+  key: 2,
+  class: "empty-content__action"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_2, [
+      renderSlot(_ctx.$slots, "icon", {}, void 0, true)
+    ])) : createCommentVNode("", true),
+    renderSlot(_ctx.$slots, "name", {}, () => [
+      $props.name !== "" ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString($props.name), 1)) : createCommentVNode("", true)
+    ], true),
+    $props.description !== "" || _ctx.$slots.description ? (openBlock(), createElementBlock("p", _hoisted_4, [
+      renderSlot(_ctx.$slots, "description", {}, () => [
+        createTextVNode(toDisplayString($props.description), 1)
+      ], true)
+    ])) : createCommentVNode("", true),
+    _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_5, [
+      renderSlot(_ctx.$slots, "action", {}, void 0, true)
+    ])) : createCommentVNode("", true)
+  ]);
+}
+const NcEmptyContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-7d921573"]]);
+export {
+  NcEmptyContent as N
+};

package/dist/chunks/NcEmptyContent-CdgacgQe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcEmptyContent-CdgacgQe.mjs","sources":["../../src/components/NcEmptyContent/NcEmptyContent.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2020 Greta Doci <gretadoci@gmail.com>\n  -\n  - @author 2020 Greta Doci <gretadoci@gmail.com>\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### Basic use\n\nUse this component to display a message about an empty content.\nProviding an icon, name, and a description is strongly advised.\n\n```\n<template>\n\t<NcEmptyContent name=\"No comments\"\n\t\tdescription=\"Start writing comments and they will appear here.\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n#### With custom svg\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No files in here\">\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :svg=\"folderSvg\" />\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport folderSvg from '@mdi/svg/svg/folder.svg?raw'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfolderSvg,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also customize the name using the `#name` slot\nand add actions. But to keep the style consistent across Nextcloud\nconsider only using header elements as the root elements for the name slot.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tdescription=\"No comments in here\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #name>\n\t\t\t<h1 class=\"empty-content__name\">\n\t\t\t\tNo comments\n\t\t\t</h1>\n\t\t</template>\n\t\t<template #action>\n\t\t\t<NcButton type=\"primary\">\n\t\t\t\tAdd a comment!\n\t\t\t</NcButton>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n\nSimilar to the `#name` slot, you could also use the `#description` slot.\nThe content will be rendered within a paragraph so you can use any inline element,\nlike a link.\n\n```\n<template>\n\t<NcEmptyContent\n\t\tname=\"No comments\">\n\t\t<template #icon>\n\t\t\t<Comment />\n\t\t</template>\n\t\t<template #description>\n\t\t\t<a href=\"https://en.wikipedia.org/wiki/Comment\">What is even a comment?</a>\n\t\t</template>\n\t</NcEmptyContent>\n</template>\n\n<script>\nimport Comment from 'vue-material-design-icons/Comment.vue'\n\nexport default {\n\tcomponents: {\n\t\tComment,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div class=\"empty-content\" role=\"note\">\n\t\t<div v-if=\"$slots.icon\" class=\"empty-content__icon\" aria-hidden=\"true\">\n\t\t\t<!-- @slot Optional material design icon -->\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\t\t<!-- @slot Optional name if not set as property, shall be enclosed by a header element -->\n\t\t<slot name=\"name\">\n\t\t\t<span v-if=\"name !== ''\" class=\"empty-content__name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\t\t</slot>\n\t\t<p v-if=\"description !== '' || $slots.description\" class=\"empty-content__description\">\n\t\t\t<!-- @slot Optional formatted description rendered inside a paragraph -->\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</p>\n\t\t<div v-if=\"$slots.action\" class=\"empty-content__action\">\n\t\t\t<!-- @slot Optional slot for a button or the like -->\n\t\t\t<slot name=\"action\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcEmptyContent',\n\n\tprops: {\n\t\t/**\n\t\t * A header message about an empty content shown\n\t\t * @example 'No comments'\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Desription of the empty content\n\t\t * @example 'No comments yet, start the conversation!'\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.empty-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\tjustify-content: center;\n\t/* In case of using in a flex container - flex in advance */\n\tflex-grow: 1;\n\n\t.modal-wrapper & {\n\t\tmargin-top: 5vh;\n\t\tmargin-bottom: 5vh;\n\t}\n\n\t&__icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tmargin: 0 auto 15px;\n\t\topacity: .4;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\tbackground-size: 64px;\n\n\t\t:deep(svg) {\n\t\t\twidth: 64px !important;\n\t\t\theight: 64px !important;\n\t\t\tmax-width: 64px !important;\n\t\t\tmax-height: 64px !important;\n\t\t}\n\t}\n\n\t&__name {\n\t\tmargin-bottom: 10px;\n\t\ttext-align: center;\n\t\tfont-weight: bold;\n\t\tfont-size: 20px;\n\t\tline-height: 30px;\n\t}\n\n\t&__description {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__action {\n\t\tmargin-top: 8px;\n\n\t\t.modal-wrapper & {\n\t\t\tmargin-top: 20px;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_toDisplayString","_createTextVNode"],"mappings":";;AAsKA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AACF;;EA/CM,OAAM;AAAA,EAAgB,MAAK;;;EA7IjC,KAAA;AAAA,EA8I0B,OAAM;AAAA,EAAsB,eAAY;;;EA9IlE,KAAA;AAAA,EAoJ4B,OAAM;;;EApJlC,KAAA;AAAA,EAwJqD,OAAM;;;EAxJ3D,KAAA;AAAA,EA8J4B,OAAM;;;AAjBjC,SAAAA,UAAA,GAAAC,mBAqBM,OArBN,YAqBM;AAAA,IApBM,KAAA,OAAO,QAAlBD,aAAAC,mBAGM,OAHN,YAGM;AAAA,MADLC,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAhJvBC,mBAAA,IAAA,IAAA;AAAA,IAmJED,WAIO,yBAJP,MAIO;AAAA,MAHM,OAAI,SAAA,mBAAhBD,mBAEO,QAFP,YAEOG,gBADH,OAAI,IAAA,GAAA,CAAA,KArJXD,mBAAA,IAAA,IAAA;AAAA;IAwJW,OAAW,gBAAA,MAAW,KAAM,OAAC,eAAtCH,aAAAC,mBAKI,KALJ,YAKI;AAAA,MAHHC,WAEO,gCAFP,MAEO;AAAA,QA5JVG,gBAAAD,gBA2JO,OAAW,WAAA,GAAA,CAAA;AAAA;UA3JlBD,mBAAA,IAAA,IAAA;AAAA,IA8Ja,KAAA,OAAO,UAAlBH,aAAAC,mBAGM,OAHN,YAGM;AAAA,MADLC,WAAsB,KAAA,QAAA,UAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAhKzBC,mBAAA,IAAA,IAAA;AAAA;;;"}

package/dist/chunks/NcGuestContent-DfnVEtGM.mjs

@@ -0,0 +1,22 @@
+import '../assets/NcGuestContent-BTahASdv.css';
+import { openBlock, createElementBlock, renderSlot } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcGuestContent",
+  mounted() {
+    document.getElementById("content").classList.add("nc-guest-content");
+  },
+  unmounted() {
+    document.getElementById("content").classList.remove("nc-guest-content");
+  }
+};
+const _hoisted_1 = { id: "guest-content-vue" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    renderSlot(_ctx.$slots, "default", {}, void 0, true)
+  ]);
+}
+const NcGuestContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-4e2c883b"]]);
+export {
+  NcGuestContent as N
+};

package/dist/chunks/NcGuestContent-DfnVEtGM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcGuestContent-DfnVEtGM.mjs","sources":["../../src/components/NcGuestContent/NcGuestContent.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2022 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n - @author Richard Steinmetz <richard@steinmetz.cloud>\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<docs>\n### General description\n\nThis components provides a wrapper around guest page content.\nIt should be used as the main wrapper for public pages, similar to `NcContent`.\n\nIt can't be used multiple times on the same page.\n\n### Usage\n\n```vue\n<template>\n\t<NcGuestContent>\n\t\t<h2>Hello guest</h2>\n\t\t<span>How are you?</span>\n\t</NcGuestContent>\n</template>\n```\n</docs>\n\n<template>\n\t<div id=\"guest-content-vue\">\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n/**\n * Guest content container to be used for the guest content of your app\n */\nexport default {\n\tname: 'NcGuestContent',\n\tmounted() {\n\t\tdocument.getElementById('content').classList.add('nc-guest-content')\n\t},\n\tunmounted() {\n\t\tdocument.getElementById('content').classList.remove('nc-guest-content')\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n#guest-content-vue {\n\tcolor: var(--color-main-text);\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\tborder-radius: var(--border-radius-large);\n\tbox-shadow: 0 0 10px var(--color-box-shadow);\n\theight: fit-content;\n\tpadding: 15px;\n\tmargin: 20px auto;\n}\n</style>\n\n<style lang=\"scss\">\n#content.nc-guest-content {\n\t// Enable scrolling\n\toverflow: auto;\n\n\t// Fix box being cutoff at the bottom\n\tmargin-bottom: 0;\n\theight: calc(var(--body-height) + var(--body-container-margin));\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_renderSlot"],"mappings":";;AAoDA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EACN,UAAU;AACT,aAAS,eAAe,SAAS,EAAE,UAAU,IAAI,kBAAkB;AAAA,EACnE;AAAA,EACD,YAAY;AACX,aAAS,eAAe,SAAS,EAAE,UAAU,OAAO,kBAAkB;AAAA,EACtE;AACF;AAjBM,MAAA,aAAA,EAAA,IAAG,oBAAmB;;AAA3B,SAAAA,UAAA,GAAAC,mBAEM,OAFN,YAEM;AAAA,IADLC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;"}