npm - @nextcloud/vue - Versions diffs - 9.0.0-alpha.3 → 9.0.0-alpha.4 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (568) hide show

package/dist/chunks/NcDateTimePickerNative-DwJ_yIEg.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcDateTimePickerNative-DwJ_yIEg.mjs","sources":["../../src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue"],"sourcesContent":["\n\n<docs>\n\n### General description\n\nThis components provides a wrapper around the native browser datetime picker. <br>\nThis is an input with some type of date e.g. https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-(type=datetime-local). <br>\nAll available types are: 'date', 'datetime-local', 'month', 'time' and 'week', please check them here: https://html.spec.whatwg.org/multipage/input.html# <br>\n\n### Examples\n\n#### Usage: type='datetime-local'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t\tThe date selected is {{ value }}\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='datetime-local' with min date and max date\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:min=\"yesterdayDate\"\n\t\t\t:max=\"someDate\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t\tyesterdayDate: new Date(new Date().setDate(new Date().getDate() - 1)),\n\t\t\t\tsomeDate: new Date(new Date().setDate(new Date().getDate() + 7)),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='week'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"week\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='month'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"month\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"native-datetime-picker\">\n\t\t<label :class=\"{ 'hidden-visually': hideLabel }\" :for=\"id\">{{ label }}</label>\n\t\t<input :id=\"id\"\n\t\t\tclass=\"native-datetime-picker--input\"\n\t\t\t:class=\"inputClass\"\n\t\t\t:type=\"type\"\n\t\t\t:value=\"formattedValue\"\n\t\t\t:min=\"formattedMin\"\n\t\t\t:max=\"formattedMax\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@input=\"onInput\">\n\t</div>\n</template>\n\n<script>\nimport ScopeComponent from '../../utils/ScopeComponent.js'\n\nconst inputDateTypes = ['date', 'datetime-local', 'month', 'time', 'week']\n\nexport default ScopeComponent({\n\tname: 'NcDateTimePickerNative',\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The date is – like the `Date` object in JavaScript – tied to UTC.\n\t\t * The selected time zone does not have an influence of the selected time and date value.\n\t\t * You have to translate the time yourself when you want to factor in time zones.\n\t\t * Pass null to clear the input field.\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Date,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the input field\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * type attribute of the input field\n\t\t * default type: String\n\t\t * The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date',\n\t\t\tvalidate: (name) => inputDateTypes.includes(name),\n\t\t},\n\t\t/**\n\t\t * text inside the label element\n\t\t * default type: String\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: 'Please choose a date',\n\t\t},\n\t\t/**\n\t\t * min attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmin: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * max attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmax: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Flag to hide the label\n\t\t * default type: String\n\t\t * The hidden input label for accessibility purposes.\n\t\t */\n\t\thideLabel: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcDateTimePickerNative in the NcActionInput component.\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\tformattedValue() {\n\t\t\treturn this.formatValue(this.modelValue)\n\t\t},\n\t\tformattedMin() {\n\t\t\tif (this.min) {\n\t\t\t\treturn this.formatValue(this.min)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\tformattedMax() {\n\t\t\tif (this.max) {\n\t\t\t\treturn this.formatValue(this.max)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle the input event\n\t\t *\n\t\t * @param {InputEvent} $event input event payload\n\t\t * @return {Date|null} new chosen Date() or null\n\t\t */\n\t\tonInput($event) {\n\t\t\tif (isNaN($event.target.valueAsNumber)) {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {null} null value\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', null)\n\t\t\t}\n\t\t\tif (this.type === 'time') {\n\t\t\t\tconst time = $event.target.value\n\t\t\t\tif (this.modelValue === '') {\n\t\t\t\t\t// this case is because of Chrome bug\n\t\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(this.modelValue)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t} else if (this.type === 'month') {\n\t\t\t\tconst MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tif (this.modelValue === '') {\n\t\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(this.value)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t}\n\t\t\tconst timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1000 * 60\n\t\t\tconst inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds\n\t\t\t/**\n\t\t\t * Emitted when the input value changes\n\t\t\t *\n\t\t\t * @return {Date} new chosen Date()\n\t\t\t */\n\t\t\treturn this.$emit('update:modelValue', new Date(inputDateWithTimezone))\n\t\t},\n\t\t/**\n\t\t * Returns Object with string values of a Date\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {object|undefined}\n\t\t */\n\t\tgetReadableDate(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst yyyy = value.getFullYear().toString().padStart(4, '0')\n\t\t\t\tconst MM = (value.getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tconst dd = value.getDate().toString().padStart(2, '0')\n\t\t\t\tconst hh = value.getHours().toString().padStart(2, '0')\n\t\t\t\tconst mm = value.getMinutes().toString().padStart(2, '0')\n\n\t\t\t\treturn { yyyy, MM, dd, hh, mm }\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Returns preformatted value for the input field\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {string|undefined}\n\t\t */\n\t\tformatValue(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst { yyyy, MM, dd, hh, mm } = this.getReadableDate(value)\n\t\t\t\tif (this.type === 'datetime-local') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}T${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'date') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}`\n\t\t\t\t} else if (this.type === 'month') {\n\t\t\t\t\treturn `${yyyy}-${MM}`\n\t\t\t\t} else if (this.type === 'time') {\n\t\t\t\t\treturn `${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'week') {\n\t\t\t\t\tconst startDate = new Date(yyyy, 0, 1)\n\t\t\t\t\tconst daysSinceBeginningOfYear = Math.floor((value - startDate)\n\t\t\t\t\t\t/ (24 * 60 * 60 * 1000))\n\t\t\t\t\tconst weekNumber = Math.ceil(daysSinceBeginningOfYear / 7)\n\t\t\t\t\treturn `${yyyy}-W${weekNumber}`\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t},\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n\t.native-datetime-picker {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t.native-datetime-picker .native-datetime-picker--input {\n\t\twidth: 100%;\n\t\tflex: 0 0 auto;\n\t\tpadding-right: 4px;\n\t}\n\n\t[data-theme-light],\n\t[data-themes*=light] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: light;\n\t\t}\n\t}\n\n\t[data-theme-dark],\n\t[data-themes*=dark] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: dark;\n\t\t}\n\t}\n\n\t[data-theme-default],\n\t[data-themes*=default] {\n\t\t@media (prefers-color-scheme: light) {\n\t\t\t.native-datetime-picker--input {\n\t\t\t\tcolor-scheme: light;\n\t\t\t}\n\t\t}\n\t\t@media (prefers-color-scheme: dark) {\n\t\t\t.native-datetime-picker--input {\n\t\t\t\tcolor-scheme: dark;\n\t\t\t}\n\t\t}\n\t}\n</style>\n"],"names":["yyyy","MM","dd","hh","mm","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_toDisplayString","_mergeProps"],"mappings":"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"}

package/dist/chunks/{NcDialog-Dq3Qnbke.mjs → NcDialog-CE2gyz2g.mjs} RENAMED Viewed

@@ -1,9 +1,9 @@
-import '../assets/NcDialog-CvmjNcgn.css';
+import '../assets/NcDialog-BmN7gR6_.css';
 import { useElementSize } from "@vueuse/core";
 import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createElementVNode, toDisplayString, normalizeClass, createElementBlock, renderSlot, createCommentVNode, Fragment, renderList } from "vue";
 import NcModal from "../Components/NcModal.mjs";
-import { N as NcDialogButton } from "./NcDialogButton-C6SudZTq.mjs";
-import { G as GenRandomId } from "./GenRandomId-CXkjMlAT.mjs";
+import { N as NcDialogButton } from "./NcDialogButton-DAb0CNtg.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = defineComponent({
   name: "NcDialog",
@@ -267,7 +267,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 16, ["onClose", "onUpdate:show"])) : createCommentVNode("", true);
 }
-const NcDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-96e99cbf"]]);
+const NcDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-4cc1c6a1"]]);
 export {
   NcDialog as N
 };

package/dist/chunks/NcDialog-CE2gyz2g.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcDialog-CE2gyz2g.mjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["\n\n<docs>\n### General description\n\nThis component uses the `NcModal` under the hood for allowing users to create generic dialogs.\n\n### Basic example\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog v-model:open=\"showDialog\" name=\"Confirmation\" message=\"Are you sure to proceed?\" :buttons=\"buttons\" />\n\t\t<p>Last response: {{ lastResponse }}</p>\n\t</div>\n</template>\n<script>\nimport IconCancel from '@mdi/svg/svg/cancel.svg?raw'\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tlastResponse: 'None',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Cancel',\n\t\t\t\t\ticon: IconCancel,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Cancel\"' },\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Ok',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Ok\"' },\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Use custom actions and content\nInstead of using the buttons property, you can also inject your custom actions using a named slot.\nYou can also use the default slot to inject custom content.\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 12px;\">\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcButton @click=\"showLongDialog = true\">Show long dialog</NcButton>\n\t\t<NcDialog v-if=\"showDialog\" name=\"Warning\" :can-close=\"false\">\n\t\t\t<template #actions>\n\t\t\t\t<NcButton @click=\"showDialog = false\">Ok</NcButton>\n\t\t\t</template>\n\t\t\t<div style=\"color: red; font-weight: bold;\">This is serious</div>\n\t\t</NcDialog>\n\t\t<NcDialog :open.sync=\"showLongDialog\" name=\"Lorem Ipsum\">\n\t\t\t<p v-for=\"i in new Array(63)\" :key=\"i\">Lorem ipsum dolor sit amet.</p>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tshowLongDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcModal v-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\t:enable-slideshow=\"false\"\n\t\t:enable-swipe=\"false\"\n\t\tv-bind=\"modalProps\"\n\t\t@close=\"handleClosed\"\n\t\t@update:show=\"handleClosing\">\n\t\t\n\t\t<h2 :id=\"navigationId\" class=\"dialog__name\" v-text=\"name\" />\n\t\t<div class=\"dialog\" :class=\"dialogClasses\">\n\t\t\t<div ref=\"wrapper\" :class=\"['dialog__wrapper', { 'dialog__wrapper--collapsed': isNavigationCollapsed }]\">\n\t\t\t\t\n\t\t\t\t<nav v-if=\"hasNavigation\"\n\t\t\t\t\tclass=\"dialog__navigation\"\n\t\t\t\t\t:class=\"navigationClasses\"\n\t\t\t\t\t:aria-label=\"navigationAriaLabelAttr\"\n\t\t\t\t\t:aria-labelledby=\"navigationAriaLabelledbyAttr\">\n\t\t\t\t\t<slot name=\"navigation\" :is-collapsed=\"isNavigationCollapsed\" />\n\t\t\t\t</nav>\n\t\t\t\t\n\t\t\t\t<div class=\"dialog__content\" :class=\"contentClasses\">\n\t\t\t\t\t<slot>\n\t\t\t\t\t\t<p class=\"dialog__text\">\n\t\t\t\t\t\t\t{{ message }}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t\n\t\t\t<div class=\"dialog__actions\">\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcDialogButton v-for=\"(button, idx) in buttons\"\n\t\t\t\t\t\t:key=\"idx\"\n\t\t\t\t\t\tv-bind=\"button\"\n\t\t\t\t\t\t@click=\"handleButtonClose\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</div>\n\t</NcModal>\n</template>\n\n<script>\nimport { useElementSize } from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\nimport NcModal from '../NcModal/index.js'\nimport NcDialogButton from '../NcDialogButton/index.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default defineComponent({\n\tname: 'NcDialog',\n\n\tcomponents: {\n\t\tNcDialogButton,\n\t\tNcModal,\n\t},\n\n\tprops: {\n\t\t/** Name of the dialog (the heading) */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/** Text of the dialog */\n\t\tmessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Additional elements to add to the focus trap */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tvalidator: (arr) => {\n\t\t\t\treturn (\n\t\t\t\t\tArray.isArray(arr) && arr.every(\n\t\t\t\t\t\t(element) =>\n\t\t\t\t\t\t\ttypeof element === 'string' || element instanceof HTMLElement,\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t},\n\t\t\tdefault: () => ([]),\n\t\t},\n\n\t\t/**\n\t\t * The element where to mount the dialog, if `null` is passed the dialog is mounted in place\n\t\t * @default 'body'\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Whether the dialog should be shown\n\t\t * @default true\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Size of the underlying NcModal\n\t\t * @default 'small'\n\t\t * @type {'small'|'normal'|'large'|'full'}\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'small',\n\t\t\tvalidator: (value) => typeof value === 'string' && ['small', 'normal', 'large', 'full'].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * Buttons to display\n\t\t * @default []\n\t\t */\n\t\tbuttons: {\n\t\t\ttype: Array,\n\t\t\trequired: false,\n\t\t\tdefault: () => ([]),\n\t\t\tvalidator: (value) => Array.isArray(value) && value.every((element) => typeof element === 'object'),\n\t\t},\n\n\t\t/**\n\t\t * Set to false to no show a close button on the dialog\n\t\t * @default true\n\t\t */\n\t\tcanClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Close the dialog if the user clicked outside of the dialog\n\t\t * Only relevant if `canClose` is set to true.\n\t\t */\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Declare if hiding the modal should be animated\n\t\t * @default false\n\t\t */\n\t\toutTransition: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additionaly classes which will be set on the navigation for custom styling\n\t\t * @default ''\n\t\t * @example\n\t\t * ```html\n\t\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"></DialogBase>\n\t\t * \n\t\t * <style lang=\"scss\">\n\t\t * :deep(.mydialog-navigation) {\n\t\t * flex-direction: row-reverse;\n\t\t * }\n\t\t * </style>\n\t\t * ```\n\t\t */\n\t\tnavigationClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-label for the dialog navigation.\n\t\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t\t *\n\t\t * By default, navigation is labeled by the dialog name.\n\t\t */\n\t\tnavigationAriaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-labelledby for the dialog navigation.\n\t\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t\t *\n\t\t * By default, navigation is labeled by the dialog name.\n\t\t */\n\t\tnavigationAriaLabelledby: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additionaly classes which will be set on the content wrapper for custom styling\n\t\t * @default ''\n\t\t */\n\t\tcontentClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Optionally pass additionaly classes which will be set on the dialog itself\n\t\t * (the default `class` attribute will be set on the modal wrapper)\n\t\t * @default ''\n\t\t */\n\t\tdialogClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['closing', 'update:open'],\n\n\tsetup(props, { emit, slots }) {\n\t\t/**\n\t\t * The dialog wrapper element\n\t\t * @type {import('vue').Ref<HTMLDivElement>}\n\t\t */\n\t\tconst wrapper = ref()\n\n\t\t/**\n\t\t * We use the dialog width to decide if we collapse the navigation (flex direction row)\n\t\t */\n\t\tconst { width: dialogWidth } = useElementSize(wrapper, { width: 900 })\n\n\t\t/**\n\t\t * Whether the navigation is collapsed due to dialog and window size\n\t\t * (collapses when modal is below: 900px modal width - 2x 12px margin)\n\t\t */\n\t\tconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n\t\t/**\n\t\t * Whether a navigation was passed and the element should be displayed\n\t\t */\n\t\tconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n\t\t/**\n\t\t * The unique id of the nav element\n\t\t */\n\t\tconst navigationId = ref(GenRandomId())\n\n\t\t/**\n\t\t * aria-label attribute for the nav element\n\t\t */\n\t\tconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || undefined)\n\n\t\t/**\n\t\t * aria-labelledby attribute for the nav element\n\t\t */\n\t\tconst navigationAriaLabelledbyAttr = computed(() => {\n\t\t\tif (props.navigationAriaLabel) {\n\t\t\t\t// Not needed, already labelled by aria-label\n\t\t\t\treturn undefined\n\t\t\t}\n\t\t\t// Use dialog name as a fallback label for navigation\n\t\t\treturn props.navigationAriaLabelledby || navigationId.value\n\t\t})\n\n\t\t/**\n\t\t * If the underlaying modal is shown\n\t\t */\n\t\tconst showModal = ref(true)\n\n\t\t// Because NcModal does not emit `close` when show prop is changed\n\t\t/**\n\t\t * Handle clicking a dialog button -> should close\n\t\t */\n\t\tconst handleButtonClose = () => {\n\t\t\thandleClosing()\n\t\t\twindow.setTimeout(() => handleClosed(), 300)\n\t\t}\n\n\t\t/**\n\t\t * Handle closing the dialog, optional out transition did not run yet\n\t\t */\n\t\tconst handleClosing = () => {\n\t\t\tshowModal.value = false\n\t\t\t/**\n\t\t\t * Emitted when the dialog is closing, so the out transition did not finish yet\n\t\t\t */\n\t\t\temit('closing')\n\t\t}\n\n\t\t/**\n\t\t * Handle dialog closed (out transition finished)\n\t\t */\n\t\tconst handleClosed = () => {\n\t\t\tshowModal.value = true\n\t\t\t/**\n\t\t\t * Emitted then the dialog is fully closed and the out transition run\n\t\t\t */\n\t\t\temit('update:open', false)\n\t\t}\n\n\t\t/**\n\t\t * Properties to pass to the underlying NcModal\n\t\t */\n\t\tconst modalProps = computed(() => ({\n\t\t\tcanClose: props.canClose,\n\t\t\tcontainer: props.container === undefined ? 'body' : props.container,\n\t\t\t// we do not pass the name as we already have the name as the headline\n\t\t\t// name: props.name,\n\t\t\tsize: props.size,\n\t\t\tshow: props.open && showModal.value,\n\t\t\toutTransition: props.outTransition,\n\t\t\tcloseOnClickOutside: props.closeOnClickOutside,\n\t\t\tadditionalTrapElements: props.additionalTrapElements,\n\t\t}))\n\n\t\treturn {\n\t\t\thandleButtonClose,\n\t\t\thandleClosing,\n\t\t\thandleClosed,\n\t\t\thasNavigation,\n\t\t\tnavigationId,\n\t\t\tnavigationAriaLabelAttr,\n\t\t\tnavigationAriaLabelledbyAttr,\n\t\t\tisNavigationCollapsed,\n\t\t\tmodalProps,\n\t\t\twrapper,\n\t\t}\n\t},\n})\n</script>\n\n<style lang=\"scss\">\n/** When having the small dialog style we override the modal styling so dialogs look more dialog like */\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.dialog__modal .modal-wrapper--small .modal-container {\n\t\twidth: fit-content;\n\t\theight: unset;\n\t\tmax-height: 90%;\n\t\tposition: relative;\n\t\ttop: unset;\n\t\tborder-radius: var(--border-radius-large);\n\t}\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.dialog {\n\theight: 100%;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\toverflow: hidden;\n\n\t&__modal {\n\t\t:deep(.modal-wrapper .modal-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 0; // 4px to align with close button, 0 block-end to make overflowing content on scroll look nice\n\t\t\tpadding-inline: 12px 0; // Same as with padding-block, we need the actions to have a margin of 4px for the button outline\n\t\t}\n\t\t:deep(.modal-wrapper .modal-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: hidden; // Only overflow on the .dialog__content\n\t\t}\n\t}\n\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\t// Auto scale to fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: hidden;\n\n\t\t&--collapsed {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-shrink: 0;\n\t}\n\n\t// Navigation styling when side-by-side with content\n\t&__wrapper:not(&__wrapper--collapsed) &__navigation {\n\t\tflex-direction: column;\n\n\t\toverflow: hidden auto;\n\t\theight: 100%;\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: 20px;\n\t}\n\n\t// Navigation styling when on top of content\n\t&__wrapper#{&}__wrapper--collapsed &__navigation {\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\n\t\toverflow: auto hidden;\n\t\twidth: 100%;\n\t\tmin-width: 100%;\n\t}\n\n\t&__name {\n\t\tfont-size: 21px;\n\n\t\ttext-align: center;\n\t\theight: fit-content;\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\n\t\toverflow-wrap: break-word;\n\t\tmargin-block: 0 12px;\n\t}\n\n\t&__content {\n\t\t// Auto fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: auto;\n\t\t// see .dialog__modal, we can not set the padding there to prevent floating scroll bars\n\t\tpadding-inline-end: 12px;\n\t}\n\n\t// In case only text content is show\n\t&__text {\n\t\t// Also add padding to the bottom to make it more readable\n\t\tpadding-block-end: 6px;\n\t}\n\n\t&__actions {\n\t\tbox-sizing: border-box;\n\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\talign-content: center;\n\t\tjustify-content: end;\n\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t\tpadding-inline: 0 12px; // 12px to align with the overall modal padding\n\t\tmargin-inline: 0;\n\t\tmargin-block: 0;\n\n\t\t&:not(:empty) {\n\t\t\tmargin-block: 6px 12px; // only if there are actions, we add margin so if it is empty scroll content looks nice\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t// Ensure the dialog name does not interfere with the close button\n\t.dialog__name {\n\t\ttext-align: start;\n\t\tmargin-inline-end: var(--default-clickable-area);\n\t}\n}\n</style>\n"],"names":["_openBlock","_createBlock","_mergeProps","_withCtx","_createElementVNode","_toDisplayString","_normalizeClass","_createElementBlock","_renderSlot","_createCommentVNode","_Fragment","_renderList"],"mappings":"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"}

package/dist/chunks/{NcDialogButton-C6SudZTq.mjs → NcDialogButton-DAb0CNtg.mjs} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, renderSlot, createCommentVNode, createTextVNode, toDisplayString } from "vue";
-import { N as NcButton } from "./NcButton-B27fpd1m.mjs";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-C0csZ9zg.mjs";
+import { N as NcButton } from "./NcButton-DvO0XwJf.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-DbL6OP85.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = defineComponent({
   name: "NcDialogButton",
@@ -41,6 +41,13 @@ const _sfc_main = defineComponent({
       required: false,
       default: "secondary",
       validator: (type) => typeof type === "string" && ["primary", "secondary", "error", "warning", "success"].includes(type)
+    },
+    /**
+     * If the button should be shown as disabled
+     */
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["click"],
@@ -57,6 +64,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_NcButton = resolveComponent("NcButton");
   return openBlock(), createBlock(_component_NcButton, {
     "aria-label": _ctx.label,
+    disabled: _ctx.disabled,
     type: _ctx.type,
     onClick: _ctx.handleClick
   }, {
@@ -72,7 +80,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createTextVNode(toDisplayString(_ctx.label) + " ", 1)
     ]),
     _: 3
-  }, 8, ["aria-label", "type", "onClick"]);
+  }, 8, ["aria-label", "disabled", "type", "onClick"]);
 }
 const NcDialogButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/chunks/NcDialogButton-DAb0CNtg.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcDialogButton-DAb0CNtg.mjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["\n\n<docs>\nDialog button component used by NcDialog in the actions slot to display the buttons passed by the `buttons` prop.\n</docs>\n\n<template>\n\t<NcButton :aria-label=\"label\"\n\t\t:disabled=\"disabled\"\n\t\t:type=\"type\"\n\t\t@click=\"handleClick\">\n\t\t{{ label }}\n\t\t<template #icon>\n\t\t\t\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nexport default defineComponent({\n\tname: 'NcDialogButton',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The function that will be called when the button is pressed\n\t\t * @type {() => void}\n\t\t */\n\t\tcallback: {\n\t\t\ttype: Function,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The label of the button\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Optional inline SVG icon for the button\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The button type, see NcButton\n\t\t * @type {'primary'|'secondary'|'error'|'warning'|'success'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'secondary',\n\t\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'error', 'warning', 'success'].includes(type),\n\t\t},\n\n\t\t/**\n\t\t * If the button should be shown as disabled\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tsetup(props, { emit }) {\n\t\t/**\n\t\t * Handle clicking the button\n\t\t * @param {MouseEvent} e The click event\n\t\t */\n\t\tconst handleClick = (e) => {\n\t\t\tprops.callback?.()\n\t\t\temit('click', e)\n\t\t}\n\n\t\treturn { handleClick }\n\t},\n})\n</script>\n"],"names":["_createBlock","_renderSlot","_createCommentVNode","_withCtx","_createTextVNode","_toDisplayString"],"mappings":";;;;AA6BA,MAAK,YAAa,gBAAa;AAAA,EAC9B,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,EACA;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,UAAU;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,OAAO,SAAS,YAAY,CAAC,WAAW,aAAa,SAAS,WAAW,SAAS,EAAE,SAAS,IAAI;AAAA,IACtH;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO,CAAC,OAAO;AAAA,EAEf,MAAM,OAAO,EAAE,QAAQ;AAKtB,UAAM,cAAc,CAAC,MAAM;AAC1B,YAAM,WAAW;AACjB,WAAK,SAAS,CAAC;AAAA,IAChB;AAEA,WAAO,EAAE,YAAY;AAAA,EACrB;AACF,CAAC;;;;sBAxFAA,YAWW,qBAAA;AAAA,IAXA,cAAY,KAAK;AAAA,IAC1B,UAAU,KAAQ;AAAA,IAClB,MAAM,KAAI;AAAA,IACV,SAAO,KAAW;AAAA;IAER,cAEV,MAEO;AAAA,MAFPC,WAEO,yBAFP,MAEO;AAAA,QADkB,KAAA,SAAS,uBAAjCD,YAA0D,6BAAA;AAAA,UAlB9D,KAAA;AAAA,UAkBiD,KAAK,KAAI;AAAA,gCAlB1DE,mBAAA,IAAA,IAAA;AAAA;;IAAA,SAAAC,QAcE,MAAW;AAAA,MAdbC,gBAcKC,gBAAA,KAAA,KAAK,IAAG,KACX,CAAA;AAAA;IAfF,GAAA;AAAA;;;"}

package/dist/chunks/{NcEllipsisedOption-DsCFqgUF.mjs → NcEllipsisedOption-CufdpPBu.mjs} RENAMED Viewed

@@ -1,5 +1,5 @@
-import '../assets/NcEllipsisedOption-ClDzkIX6.css';
-import { _ as _sfc_main$1, F as FindRanges } from "./NcHighlight-CR5kySMp.mjs";
+import '../assets/NcEllipsisedOption-DZK2vWD1.css';
+import { _ as _sfc_main$1, F as FindRanges } from "./NcHighlight-BHtRIzqk.mjs";
 import { resolveComponent, openBlock, createElementBlock, createVNode, createBlock, createCommentVNode } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
@@ -8,10 +8,16 @@ const _sfc_main = {
     NcHighlight: _sfc_main$1
   },
   props: {
+    /**
+     * The text to be display in one line. If it is longer than 10 characters, it is be truncated with ellipsis in the end but keeping up to 10 last characters to fit the parent container.
+     */
     name: {
       type: String,
       default: ""
     },
+    /**
+     * The search value to highlight in the text
+     */
     search: {
       type: String,
       default: ""
@@ -92,7 +98,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["text", "search", "highlight"])) : createCommentVNode("", true)
   ], 8, _hoisted_1);
 }
-const NcEllipsisedOption = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-08c4259e"]]);
+const NcEllipsisedOption = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-0c4478a6"]]);
 export {
   NcEllipsisedOption as N
 };

package/dist/chunks/NcEllipsisedOption-CufdpPBu.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcEllipsisedOption-CufdpPBu.mjs","sources":["../../src/components/NcEllipsisedOption/NcEllipsisedOption.vue"],"sourcesContent":["\n\n<docs>\nA component to display a long text with highlight support in one line truncated with ellipsis in the end but keeping up to 10 last characters.\n\nIt is supposed to be used as an `NcSelect`'s option in first place.\n\n### General usage\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Plain text</h4>\n\t\t<p>{{ text }}</p>\n\n\t\t<h4>Truncated text with <code>text-overflow: ellipsis</code></h4>\n\t\t<p style=\"text-overflow: ellipsis; overflow: hidden; white-space: pre;\">{{ text }}</p>\n\n\t\t<h4>NcEllipsisedOption searching for \"Nineteen\"</h4>\n\t\t<NcEllipsisedOption :name=\"text\" :search=\"search\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty',\n\t\t\tsearch: 'Nineteen',\n\t\t}\n\t},\n}\n</script>\n```\n\n### Usage in `NcSelect`\n\n```vue\n<template>\n\t<NcSelect v-model=\"selected\" :options=\"options\">\n\t\t<template #option=\"option\">\n\t\t\t<NcEllipsisedOption :name=\"option.label\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcEllipsisedOption :name=\"selectedOption.label\" />\n\t\t</template>\n\t</NcSelect>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: [\n\t\t\t\t'Option 1 - a short opt.',\n\t\t\t\t'Option 2 - a very very very very long opt.',\n\t\t\t].map((label) => ({ label })),\n\t\t\tselected: '',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\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\t/**\n\t\t * The text to be display in one line. If it is longer than 10 characters, it is be truncated with ellipsis in the end but keeping up to 10 last characters to fit the parent container.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The search value to highlight in the text\n\t\t */\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":";;;AAqFA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,iBACXA;AAAAA,EACA;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,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;AAlKA,MAAA,aAAA,CAAA,OAAA;;;sBAqECC,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,MA9E7B,KAAA;AAAA,MA2EG,OAAM;AAAA,MACL,MAAM,SAAK;AAAA,MACX,QAAQ,OAAM;AAAA,MACd,WAAW,SAAU;AAAA,oDA9EzBC,mBAAA,IAAA,IAAA;AAAA,EAAA,GAAA,GAAA,UAAA;;;"}

package/dist/chunks/{NcEmojiPicker-BwQ8VxQZ.mjs → NcEmojiPicker-DNbUUyLY.mjs} RENAMED Viewed

@@ -1,13 +1,13 @@
-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 '../assets/NcEmojiPicker-C18M6LHu.css';
+import { g as getCurrentSkinTone, s as setCurrentSkinTone } from "./emoji-Ba55f8iV.mjs";
+import { C as Color } from "./GenColors-BidEIqUL.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 { N as NcButton } from "./NcButton-DvO0XwJf.mjs";
+import { N as NcColorPicker } from "./NcColorPicker-Bq2-21Np.mjs";
+import { N as NcPopover } from "./NcPopover-BXfbq-Vs.mjs";
+import { N as NcTextField } from "./NcTextField-W5cVvjob.mjs";
+import { r as register, w as t36, x as t31, y as t6, a as t } from "./_l10n-C3nxU4O-.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 = {
@@ -374,7 +374,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["shown", "container", "onAfterShow", "onAfterHide"]);
 }
-const NcEmojiPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e7ed86bd"]]);
+const NcEmojiPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b6734161"]]);
 export {
   NcEmojiPicker as N
 };

package/dist/chunks/NcEmojiPicker-DNbUUyLY.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcEmojiPicker-DNbUUyLY.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\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 → NcEmptyContent-BoGB3vFC.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import '../assets/NcEmptyContent-CMM4BKRc.css';
+import '../assets/NcEmptyContent-C-nruaFh.css';
 import { openBlock, createElementBlock, renderSlot, createCommentVNode, toDisplayString, createTextVNode } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
@@ -61,7 +61,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("", true)
   ]);
 }
-const NcEmptyContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-7d921573"]]);
+const NcEmptyContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3dc730de"]]);
 export {
   NcEmptyContent as N
 };

package/dist/chunks/NcEmptyContent-BoGB3vFC.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcEmptyContent-BoGB3vFC.mjs","sources":["../../src/components/NcEmptyContent/NcEmptyContent.vue"],"sourcesContent":["\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\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\t\t\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\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\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":";;AAqJA,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;;;EA5HjC,KAAA;AAAA,EA6H0B,OAAM;AAAA,EAAsB,eAAY;;;EA7HlE,KAAA;AAAA,EAmI4B,OAAM;;;EAnIlC,KAAA;AAAA,EAuIqD,OAAM;;;EAvI3D,KAAA;AAAA,EA6I4B,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,UA/HvBC,mBAAA,IAAA,IAAA;AAAA,IAkIED,WAIO,yBAJP,MAIO;AAAA,MAHM,OAAI,SAAA,mBAAhBD,mBAEO,QAFP,YAEOG,gBADH,OAAI,IAAA,GAAA,CAAA,KApIXD,mBAAA,IAAA,IAAA;AAAA;IAuIW,OAAW,gBAAA,MAAW,KAAM,OAAC,eAAtCH,aAAAC,mBAKI,KALJ,YAKI;AAAA,MAHHC,WAEO,gCAFP,MAEO;AAAA,QA3IVG,gBAAAD,gBA0IO,OAAW,WAAA,GAAA,CAAA;AAAA;UA1IlBD,mBAAA,IAAA,IAAA;AAAA,IA6Ia,KAAA,OAAO,UAAlBH,aAAAC,mBAGM,OAHN,YAGM;AAAA,MADLC,WAAsB,KAAA,QAAA,UAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UA/IzBC,mBAAA,IAAA,IAAA;AAAA;;;"}

package/dist/chunks/{NcGuestContent-DfnVEtGM.mjs → NcGuestContent-DVqg5Bq4.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import '../assets/NcGuestContent-BTahASdv.css';
+import '../assets/NcGuestContent-Dh5z5Dgm.css';
 import { openBlock, createElementBlock, renderSlot } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
@@ -16,7 +16,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ]);
 }
-const NcGuestContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-4e2c883b"]]);
+const NcGuestContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-d19aa4ee"]]);
 export {
   NcGuestContent as N
 };

package/dist/chunks/NcGuestContent-DVqg5Bq4.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcGuestContent-DVqg5Bq4.mjs","sources":["../../src/components/NcGuestContent/NcGuestContent.vue"],"sourcesContent":["\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":";;AAmCA,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;;;"}

package/dist/chunks/{NcHeaderMenu-CJVtnKpb.mjs → NcHeaderMenu-CIWkk8T1.mjs} RENAMED Viewed

@@ -1,8 +1,8 @@
-import '../assets/NcMentionBubble-DmzU72Mw.css';
-import '../assets/NcHeaderMenu-fYpidmuR.css';
+import '../assets/NcMentionBubble-B-xYaJDc.css';
+import '../assets/NcHeaderMenu-C-0GR7Si.css';
 import { vOnClickOutside } from "@vueuse/components";
 import { createFocusTrap } from "focus-trap";
-import { G as GenRandomId } from "./GenRandomId-CXkjMlAT.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
 import clickOutsideOptions from "../Mixins/clickOutsideOptions.mjs";
 import "@nextcloud/router";
 import { resolveComponent, resolveDirective, withDirectives, openBlock, createBlock, resolveDynamicComponent, mergeProps, toHandlers, withCtx, createVNode, withModifiers, renderSlot, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, vShow } from "vue";
@@ -14,8 +14,8 @@ import "striptags";
 import "@nextcloud/auth";
 import "@nextcloud/axios";
 import "@nextcloud/capabilities";
-import { g as getTrapStack } from "./focusTrap-hWDNhn4t.mjs";
-import { N as NcButton } from "./NcButton-B27fpd1m.mjs";
+import { g as getTrapStack } from "./focusTrap-Cecv_gjR.mjs";
+import { N as NcButton } from "./NcButton-DvO0XwJf.mjs";
 const _sfc_main = {
   name: "NcHeaderMenu",
   components: {
@@ -253,7 +253,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     [_directive_click_outside, $options.clickOutsideConfig]
   ]);
 }
-const NcHeaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-194cb04b"]]);
+const NcHeaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b00d3724"]]);
 export {
   NcHeaderMenu as N
 };

package/dist/chunks/NcHeaderMenu-CIWkk8T1.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcHeaderMenu-CIWkk8T1.mjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":["\n\n<docs>\nThis component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<input placeholder=\"Search for files, comments, contacts...\" type=\"search\" style=\"width: 99%;\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\tdescription=\"Start typing to search\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': opened }\"\n\t\tclass=\"header-menu\"\n\t\tv-on=\"listeners\">\n\t\t\n\t\t<NcButton :id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger\"\n\t\t\ttype=\"tertiary-no-background\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"description ? descriptionId : null\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-expanded=\"opened.toString()\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span v-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t\n\t\t<div v-show=\"opened\" class=\"header-menu__carret\" />\n\n\t\t\n\t\t<div v-show=\"opened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"content\" class=\"header-menu__content\">\n\t\t\t\t\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\n\nimport NcButton from '../NcButton/index.ts'\n\nexport default {\n\tname: 'NcHeaderMenu',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * aria-label attribute of the menu open button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Current menu open state\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Pass `true` if the header menu is used for website navigation\n\t\t *\n\t\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t\t * will be associated with the menu open button\n\t\t */\n\t\tisNav: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the menu\n\t\t * open button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'open',\n\t\t'opened',\n\t\t'update:open',\n\t\t'cancel',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tfocusTrap: null,\n\t\t\topened: this.open,\n\t\t\tshortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),\n\t\t\ttriggerId: GenRandomId(),\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isNav ? 'nav' : 'div'\n\t\t},\n\n\t\tclickOutsideConfig() {\n\t\t\treturn [\n\t\t\t\tthis.closeMenu,\n\t\t\t\tthis.clickOutsideOptions,\n\t\t\t]\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isNav) {\n\t\t\t\treturn {\n\t\t\t\t\tfocusout: this.onFocusOut,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(open) {\n\t\t\tif (open) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tdocument.addEventListener('keydown', this.onKeyDown)\n\t},\n\tbeforeUnmount() {\n\t\tdocument.removeEventListener('keydown', this.onKeyDown)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the current menu open state\n\t\t */\n\t\ttoggleMenu() {\n\t\t\t// Toggling current state\n\t\t\tif (!this.opened) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Close the current menu\n\t\t *\n\t\t * @param {boolean} cancelled emit a cancel event instead of close\n\t\t */\n\t\tcloseMenu(cancelled = false) {\n\t\t\t// Close the menu\n\t\t\tthis.opened = false\n\t\t\tthis.$emit(cancelled ? 'cancel' : 'close')\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t// Kill focus trap\n\t\t\tthis.clearFocusTrap()\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('closed')\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Open the current menu\n\t\t */\n\t\topenMenu() {\n\t\t\t// Open the menu\n\t\t\tthis.opened = true\n\t\t\tthis.$emit('open')\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.$emit('opened')\n\t\t\t})\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\tif (this.shortcutsDisabled || !this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If escape have been pressed, we close\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.preventDefault()\n\n\t\t\t\t/** User cancelled the menu by pressing escape */\n\t\t\t\tthis.closeMenu(true)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event The focus event\n\t\t */\n\t\tonFocusOut(event) {\n\t\t\tif (!this.$refs.headerMenu.contains(event.relatedTarget)) {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t * Shall only be used when all children are mounted\n\t\t * and available in the DOM. We use $nextTick for that.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tif (this.isNav || this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Init focus trap\n\t\t\tconst contentContainer = this.$refs.content\n\t\t\tthis.focusTrap = createFocusTrap(contentContainer, {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallbackFocus: this.$refs.trigger,\n\t\t\t})\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\t\tclearFocusTrap() {\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n.header-menu {\n\tposition: relative;\n\twidth: var(--header-height);\n\theight: var(--header-height);\n\n\t#{&}__trigger {\n\t\twidth: 100% !important;\n\t\theight: var(--header-height);\n\t\topacity: .85;\n\n\t\t// header is filled with primary or image background\n\t\tfilter: none !important;\n\t\tcolor: var(--color-primary-text) !important;\n\t}\n\n\t&--opened &__trigger,\n\t&__trigger:hover,\n\t&__trigger:focus,\n\t&__trigger:active {\n\t\topacity: 1;\n\t}\n\n\t#{&}__trigger:focus-visible {\n\t\toutline: none !important;\n\t\tbox-shadow: none !important;\n\t}\n\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: 50px;\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tpadding: 8px;\n\t\tborder-radius: 0 0 var(--border-radius) var(--border-radius);\n\t\tborder-radius: var(--border-radius-large);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__carret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tinset-inline-start: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 * $externalMargin);\n\t\tmin-height: calc(44px * 1.5);\n\t\tmax-height: calc(100vh - 50px * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.header-menu {\n\t\twidth: $clickable-area;\n\t}\n}\n</style>\n"],"names":["ClickOutside","_withDirectives","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createVNode","_withModifiers","_renderSlot","_createElementBlock","_toDisplayString","_createCommentVNode","_createElementVNode"],"mappings":"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"}

package/dist/chunks/{NcHighlight-CR5kySMp.mjs → NcHighlight-BHtRIzqk.mjs} RENAMED Viewed

@@ -1,25 +1,4 @@
 import { h } from "vue";
-/**
- * @copyright Copyright (c) 2020 Raimund Schlüßler <raimund.schluessler@mailbox.org>
- *
- * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
 const FindRanges = (text, search) => {
   const ranges = [];
   let currentIndex = 0;

package/dist/chunks/NcHighlight-BHtRIzqk.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcHighlight-BHtRIzqk.mjs","sources":["../../src/utils/FindRanges.js","../../src/components/NcHighlight/NcHighlight.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\n/**\n * Find the ranges of a substr in a given string\n *\n * @param {string} text The text to search in\n * @param {string} search The text to search for\n * @return {Array} The array of ranges to highlight\n */\nconst FindRanges = (text, search) => {\n\tconst ranges = []\n\tlet currentIndex = 0\n\tlet index = text.toLowerCase().indexOf(search.toLowerCase(), currentIndex)\n\t// Variable to track that we don't iterate more often than the length of the text.\n\t// Shouldn't happen anyway, but just to be sure to not hang the browser for some reason.\n\tlet i = 0\n\twhile (index > -1 && i < text.length) {\n\t\tcurrentIndex = index + search.length\n\t\tranges.push({ start: index, end: currentIndex })\n\n\t\tindex = text.toLowerCase().indexOf(search.toLowerCase(), currentIndex)\n\t\ti++\n\t}\n\treturn ranges\n}\n\nexport default FindRanges\n","\n\n<docs>\n\n### General description\n\nHighlight a string with html <strong>. Accepts a substring to highlight or an array with ranges.\n\n### Usage\n\n```vue\n<template>\n\t<div>\n\t\t<NcHighlight text=\"Highlight me please!\" search=\"me\" />\n\t\t<br />\n\t\t<NcHighlight text=\"Highlight me please!\" :highlight=\"[{ start: 4, end: 12 }]\" />\n\t</div>\n</template>\n```\n</docs>\n\n<script>\nimport FindRanges from '../../utils/FindRanges.js'\n\nimport { h } from 'vue'\n\nexport default {\n\tname: 'NcHighlight',\n\tprops: {\n\t\t/**\n\t\t * The string to display\n\t\t */\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The string to match and highlight\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The ranges to highlight, takes precedence over the search prop.\n\t\t */\n\t\thighlight: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\t},\n\tcomputed: {\n\t\t/**\n\t\t * The indice ranges which should be highlighted.\n\t\t * If an array with ranges is provided, we use it. Otherwise\n\t\t * we calculate it based on the provided substring to highlight.\n\t\t *\n\t\t * @return {Array} The array of ranges to highlight\n\t\t */\n\t\tranges() {\n\t\t\tlet ranges = []\n\t\t\t// If the search term and the highlight array is empty, return early with empty array\n\t\t\tif (!this.search && this.highlight.length === 0) {\n\t\t\t\treturn ranges\n\t\t\t}\n\n\t\t\t// If there are ranges to highlight provided, we use this array.\n\t\t\tif (this.highlight.length > 0) {\n\t\t\t\tranges = this.highlight\n\t\t\t// Otherwise we check the text to highlight for matches of the search term.\n\t\t\t} else {\n\t\t\t\tranges = FindRanges(this.text, this.search)\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * Ensure that the start of each range is equal to or smaller than the end\n\t\t\t */\n\t\t\tranges.forEach((range, i) => {\n\t\t\t\tif (range.end < range.start) {\n\t\t\t\t\tranges[i] = {\n\t\t\t\t\t\tstart: range.end,\n\t\t\t\t\t\tend: range.start,\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})\n\n\t\t\t/**\n\t\t\t * Validate the ranges array to be within the string length\n\t\t\t * and discard ranges which are completely out of bonds.\n\t\t\t */\n\t\t\tranges = ranges.reduce((validRanges, range) => {\n\t\t\t\tif (range.start < this.text.length && range.end > 0) {\n\t\t\t\t\tvalidRanges.push({\n\t\t\t\t\t\tstart: (range.start < 0) ? 0 : range.start,\n\t\t\t\t\t\tend: (range.end > this.text.length) ? this.text.length : range.end,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t\treturn validRanges\n\t\t\t}, [])\n\n\t\t\t/**\n\t\t\t * Sort ranges ascendingly (necessary for next step)\n\t\t\t */\n\t\t\tranges.sort((a, b) => {\n\t\t\t\treturn a.start - b.start\n\t\t\t})\n\n\t\t\t/**\n\t\t\t * Merge overlapping or adjacent ranges\n\t\t\t */\n\t\t\tranges = ranges.reduce((mergedRanges, range) => {\n\t\t\t\t// If there are no ranges, just add the range\n\t\t\t\tif (!mergedRanges.length) {\n\t\t\t\t\tmergedRanges.push(range)\n\t\t\t\t} else {\n\t\t\t\t\t// If the range overlaps the last range, merge them\n\t\t\t\t\tconst idx = mergedRanges.length - 1\n\t\t\t\t\tif (mergedRanges[idx].end >= range.start) {\n\t\t\t\t\t\tmergedRanges[idx] = {\n\t\t\t\t\t\t\tstart: mergedRanges[idx].start,\n\t\t\t\t\t\t\tend: Math.max(mergedRanges[idx].end, range.end),\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tmergedRanges.push(range)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn mergedRanges\n\t\t\t}, [])\n\n\t\t\treturn ranges\n\t\t},\n\t\t/**\n\t\t * Calculate the different chunks to show based on the ranges to highlight.\n\t\t *\n\t\t * @return {Array} The chunks\n\t\t */\n\t\tchunks() {\n\t\t\t// If the ranges array is empty, show only one chunk with all text\n\t\t\tif (this.ranges.length === 0) {\n\t\t\t\treturn [{\n\t\t\t\t\tstart: 0,\n\t\t\t\t\tend: this.text.length,\n\t\t\t\t\thighlight: false,\n\t\t\t\t\ttext: this.text,\n\t\t\t\t}]\n\t\t\t}\n\t\t\t// Calculate the chunks\n\t\t\tconst chunks = []\n\t\t\tlet currentIndex = 0\n\t\t\tlet currentRange = 0\n\t\t\t// Iterate over all characters in the text\n\t\t\twhile (currentIndex < this.text.length) {\n\t\t\t\t// Get the first range to highlight\n\t\t\t\tconst range = this.ranges[currentRange]\n\t\t\t\t// If the range starts at the current index, construct a chunk to highlight,\n\t\t\t\t// set the next range and continue with the next iteration.\n\t\t\t\tif (range.start === currentIndex) {\n\t\t\t\t\tchunks.push({\n\t\t\t\t\t\t...range,\n\t\t\t\t\t\thighlight: true,\n\t\t\t\t\t\ttext: this.text.slice(range.start, range.end),\n\t\t\t\t\t})\n\t\t\t\t\tcurrentRange++\n\t\t\t\t\tcurrentIndex = range.end\n\t\t\t\t\t// If this was the last range to highlight and we haven't reached the end of the text,\n\t\t\t\t\t// add the rest of the text without highlighting.\n\t\t\t\t\tif (currentRange >= this.ranges.length && currentIndex < this.text.length) {\n\t\t\t\t\t\tchunks.push({\n\t\t\t\t\t\t\tstart: currentIndex,\n\t\t\t\t\t\t\tend: this.text.length,\n\t\t\t\t\t\t\thighlight: false,\n\t\t\t\t\t\t\ttext: this.text.slice(currentIndex),\n\t\t\t\t\t\t})\n\t\t\t\t\t\t// Set the current index so the while loop ends.\n\t\t\t\t\t\tcurrentIndex = this.text.length\n\t\t\t\t\t}\n\t\t\t\t\tcontinue\n\t\t\t\t}\n\t\t\t\t// If the current range does start after the current index, construct a chunk without\n\t\t\t\t// highlighting and set the current index to the start of the current range.\n\t\t\t\tchunks.push({\n\t\t\t\t\tstart: currentIndex,\n\t\t\t\t\tend: range.start,\n\t\t\t\t\thighlight: false,\n\t\t\t\t\ttext: this.text.slice(currentIndex, range.start),\n\t\t\t\t})\n\t\t\t\tcurrentIndex = range.start\n\t\t\t}\n\t\t\treturn chunks\n\t\t},\n\t},\n\t/**\n\t * The render function to display the component\n\t *\n\t * @return {object} The created VNode\n\t */\n\trender() {\n\t\tif (!this.ranges.length) {\n\t\t\treturn h('span', {}, this.text)\n\t\t}\n\n\t\treturn h('span', {}, this.chunks.map(chunk => {\n\t\t\treturn chunk.highlight ? h('strong', {}, chunk.text) : chunk.text\n\t\t}))\n\t},\n}\n</script>\n"],"names":[],"mappings":";AAYK,MAAC,aAAa,CAAC,MAAM,WAAW;AACpC,QAAM,SAAS,CAAE;AACjB,MAAI,eAAe;AACnB,MAAI,QAAQ,KAAK,YAAa,EAAC,QAAQ,OAAO,YAAa,GAAE,YAAY;AAGzE,MAAI,IAAI;AACR,SAAO,QAAQ,MAAM,IAAI,KAAK,QAAQ;AACrC,mBAAe,QAAQ,OAAO;AAC9B,WAAO,KAAK,EAAE,OAAO,OAAO,KAAK,cAAc;AAE/C,YAAQ,KAAK,YAAa,EAAC,QAAQ,OAAO,YAAa,GAAE,YAAY;AACrE;AAAA,EACA;AACD,SAAO;AACR;ACEK,MAAA,YAAU;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,IACjB;AAAA,EACD;AAAA,EACD,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQT,SAAS;AACR,UAAI,SAAS,CAAC;AAEd,UAAI,CAAC,KAAK,UAAU,KAAK,UAAU,WAAW,GAAG;AAChD,eAAO;AAAA,MACR;AAGA,UAAI,KAAK,UAAU,SAAS,GAAG;AAC9B,iBAAS,KAAK;AAAA,aAER;AACN,iBAAS,WAAW,KAAK,MAAM,KAAK,MAAM;AAAA,MAC3C;AAKA,aAAO,QAAQ,CAAC,OAAO,MAAM;AAC5B,YAAI,MAAM,MAAM,MAAM,OAAO;AAC5B,iBAAO,CAAC,IAAI;AAAA,YACX,OAAO,MAAM;AAAA,YACb,KAAK,MAAM;AAAA,UACZ;AAAA,QACD;AAAA,OACA;AAMD,eAAS,OAAO,OAAO,CAAC,aAAa,UAAU;AAC9C,YAAI,MAAM,QAAQ,KAAK,KAAK,UAAU,MAAM,MAAM,GAAG;AACpD,sBAAY,KAAK;AAAA,YAChB,OAAQ,MAAM,QAAQ,IAAK,IAAI,MAAM;AAAA,YACrC,KAAM,MAAM,MAAM,KAAK,KAAK,SAAU,KAAK,KAAK,SAAS,MAAM;AAAA,WAC/D;AAAA,QACF;AACA,eAAO;AAAA,MACP,GAAE,EAAE;AAKL,aAAO,KAAK,CAAC,GAAG,MAAM;AACrB,eAAO,EAAE,QAAQ,EAAE;AAAA,OACnB;AAKD,eAAS,OAAO,OAAO,CAAC,cAAc,UAAU;AAE/C,YAAI,CAAC,aAAa,QAAQ;AACzB,uBAAa,KAAK,KAAK;AAAA,eACjB;AAEN,gBAAM,MAAM,aAAa,SAAS;AAClC,cAAI,aAAa,GAAG,EAAE,OAAO,MAAM,OAAO;AACzC,yBAAa,GAAG,IAAI;AAAA,cACnB,OAAO,aAAa,GAAG,EAAE;AAAA,cACzB,KAAK,KAAK,IAAI,aAAa,GAAG,EAAE,KAAK,MAAM,GAAG;AAAA,YAC/C;AAAA,iBACM;AACN,yBAAa,KAAK,KAAK;AAAA,UACxB;AAAA,QACD;AACA,eAAO;AAAA,MACP,GAAE,EAAE;AAEL,aAAO;AAAA,IACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,SAAS;AAER,UAAI,KAAK,OAAO,WAAW,GAAG;AAC7B,eAAO,CAAC;AAAA,UACP,OAAO;AAAA,UACP,KAAK,KAAK,KAAK;AAAA,UACf,WAAW;AAAA,UACX,MAAM,KAAK;AAAA,SACX;AAAA,MACF;AAEA,YAAM,SAAS,CAAC;AAChB,UAAI,eAAe;AACnB,UAAI,eAAe;AAEnB,aAAO,eAAe,KAAK,KAAK,QAAQ;AAEvC,cAAM,QAAQ,KAAK,OAAO,YAAY;AAGtC,YAAI,MAAM,UAAU,cAAc;AACjC,iBAAO,KAAK;AAAA,YACX,GAAG;AAAA,YACH,WAAW;AAAA,YACX,MAAM,KAAK,KAAK,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,WAC5C;AACD;AACA,yBAAe,MAAM;AAGrB,cAAI,gBAAgB,KAAK,OAAO,UAAU,eAAe,KAAK,KAAK,QAAQ;AAC1E,mBAAO,KAAK;AAAA,cACX,OAAO;AAAA,cACP,KAAK,KAAK,KAAK;AAAA,cACf,WAAW;AAAA,cACX,MAAM,KAAK,KAAK,MAAM,YAAY;AAAA,aAClC;AAED,2BAAe,KAAK,KAAK;AAAA,UAC1B;AACA;AAAA,QACD;AAGA,eAAO,KAAK;AAAA,UACX,OAAO;AAAA,UACP,KAAK,MAAM;AAAA,UACX,WAAW;AAAA,UACX,MAAM,KAAK,KAAK,MAAM,cAAc,MAAM,KAAK;AAAA,SAC/C;AACD,uBAAe,MAAM;AAAA,MACtB;AACA,aAAO;AAAA,IACP;AAAA,EACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,SAAS;AACR,QAAI,CAAC,KAAK,OAAO,QAAQ;AACxB,aAAO,EAAE,QAAQ,IAAI,KAAK,IAAI;AAAA,IAC/B;AAEA,WAAO,EAAE,QAAQ,CAAE,GAAE,KAAK,OAAO,IAAI,WAAS;AAC7C,aAAO,MAAM,YAAY,EAAE,UAAU,CAAE,GAAE,MAAM,IAAI,IAAI,MAAM;AAAA,IAC9D,CAAC,CAAC;AAAA,EACF;AACF;"}

package/dist/chunks/{NcIconSvgWrapper-C0csZ9zg.mjs → NcIconSvgWrapper-DbL6OP85.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import '../assets/NcIconSvgWrapper-C95UOHYS.css';
+import '../assets/NcIconSvgWrapper-CtTf2c7f.css';
 import { warn, openBlock, createElementBlock, normalizeProps, mergeProps, createElementVNode, useCssVars } from "vue";
 import DOMPurify from "dompurify";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
@@ -79,7 +79,7 @@ const _sfc_main = {
 };
 const __injectCSSVars__ = () => {
   useCssVars((_ctx) => ({
-    "58b5890d": _ctx.iconSize
+    "69f4fa15": _ctx.iconSize
   }));
 };
 const __setup__ = _sfc_main.setup;
@@ -100,7 +100,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ]))
   ], 16)) : (openBlock(), createElementBlock("span", mergeProps({ key: 1 }, $options.attributes, { innerHTML: $options.cleanSvg }), null, 16, _hoisted_3));
 }
-const NcIconSvgWrapper = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-48c40866"]]);
+const NcIconSvgWrapper = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-fe28ab32"]]);
 export {
   NcIconSvgWrapper as N
 };

package/dist/chunks/NcIconSvgWrapper-DbL6OP85.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcIconSvgWrapper-DbL6OP85.mjs","sources":["../../src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue"],"sourcesContent":["\n\n<docs>\n### Description\n\nRender raw SVG string icons.\n\n### Usage within `icon`-slot\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<NcButton aria-label=\"Close\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"closeSvg\" name=\"Close\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Settings\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"cogSvg\" name=\"Cog\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Add\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"plusSvg\" name=\"Plus\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Send\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiSend\" name=\"Send\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Star\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiStar\" name=\"Star\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport closeSvg from '@mdi/svg/svg/close.svg?raw'\nimport cogSvg from '@mdi/svg/svg/cog.svg?raw'\nimport plusSvg from '@mdi/svg/svg/plus.svg?raw'\nimport { mdiSend } from '@mdi/js'\nimport { mdiStar } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\t// This icons are static data, so you do not need to put them into `data` which will make them reactive\n\t\treturn {\n\t\t\tcloseSvg,\n\t\t\tcogSvg,\n\t\t\tplusSvg,\n\t\t\tmdiSend,\n\t\t\tmdiStar,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(5, max-content);\n\tgap: 10px;\n}\n</style>\n```\n\n### Inline usage inside text\n\n```vue\n<template>\n\t<p>\n\t\tThis is my <NcIconSvgWrapper inline :path=\"mdiStar\" /> Favorite\n\t</p>\n</template>\n<script>\nimport { mdiStar } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiStar,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<span v-if=\"!cleanSvg\"\n\t\tv-bind=\"attributes\">\n\t\t<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path :d=\"path\" />\n\t\t</svg>\n\t</span>\n\t<span v-else\n\t\tv-bind=\"attributes\"\n\t\tv-html=\"cleanSvg\" /> \n</template>\n\n<script>\nimport { warn } from 'vue'\nimport DOMPurify from 'dompurify'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\n\t\t/**\n\t\t * Set if the icon should be used as inline content e.g. within text.\n\t\t * By default the icon is made a block element for use inside `icon`-slots.\n\t\t */\n\t\tinline: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Raw SVG string to render\n\t\t */\n\t\tsvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Label of the icon, used in aria-label\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 * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.\n\t\t */\n\t\tpath: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Size of the icon to show. Only use if not using within an icon slot.\n\t\t * Defaults to 20px which is the Nextcloud icon size for all icon slots.\n\t\t * @default 20\n\t\t */\n\t\tsize: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 20,\n\t\t\tvalidator: (value) => typeof value === 'number' || value === 'auto',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Icon size used in CSS\n\t\t */\n\t\ticonSize() {\n\t\t\treturn typeof this.size === 'number' ? `${this.size}px` : this.size\n\t\t},\n\n\t\tcleanSvg() {\n\t\t\tif (!this.svg || this.path) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst svg = DOMPurify.sanitize(this.svg)\n\n\t\t\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\t\t\tif (svgDocument.querySelector('parsererror')) {\n\t\t\t\twarn('SVG is not valid')\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (svgDocument.documentElement.id) {\n\t\t\t\tsvgDocument.documentElement.removeAttribute('id')\n\t\t\t}\n\n\t\t\treturn svgDocument.documentElement.outerHTML\n\t\t},\n\t\tattributes() {\n\t\t\treturn {\n\t\t\t\tclass: ['icon-vue', { 'icon-vue--inline': this.inline }],\n\t\t\t\trole: 'img',\n\t\t\t\t'aria-hidden': !this.name ? true : undefined,\n\t\t\t\t'aria-label': this.name || undefined,\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tmin-width: var(--default-clickable-area);\n\tmin-height: var(--default-clickable-area);\n\topacity: 1;\n\n\t&--inline {\n\t\tdisplay: inline-flex;\n\t\tmin-width: fit-content;\n\t\tmin-height: fit-content;\n\t\tvertical-align: text-bottom;\n\t}\n\n\t&:deep(svg) {\n\t\tfill: currentColor;\n\t\twidth: v-bind('iconSize');\n\t\theight: v-bind('iconSize');\n\t\tmax-width: v-bind('iconSize');\n\t\tmax-height: v-bind('iconSize');\n\t}\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_normalizeProps","_mergeProps","_createElementVNode"],"mappings":";;;AA+GA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,KAAK;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,MAAM;AAAA,MACL,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAAC,UAAU,OAAO,UAAU,YAAY,UAAU;AAAA,IAC7D;AAAA,EACD;AAAA,EAED,UAAU;AAAA;AAAA;AAAA;AAAA,IAIT,WAAW;AACV,aAAO,OAAO,KAAK,SAAS,WAAW,GAAG,KAAK,IAAI,OAAO,KAAK;AAAA,IAC/D;AAAA,IAED,WAAW;AACV,UAAI,CAAC,KAAK,OAAO,KAAK,MAAM;AAC3B;AAAA,MACD;AAEA,YAAM,MAAM,UAAU,SAAS,KAAK,GAAG;AAEvC,YAAM,cAAc,IAAI,UAAS,EAAG,gBAAgB,KAAK,eAAe;AAExE,UAAI,YAAY,cAAc,aAAa,GAAG;AAC7C,aAAK,kBAAkB;AACvB,eAAO;AAAA,MACR;AAEA,UAAI,YAAY,gBAAgB,IAAI;AACnC,oBAAY,gBAAgB,gBAAgB,IAAI;AAAA,MACjD;AAEA,aAAO,YAAY,gBAAgB;AAAA,IACnC;AAAA,IACD,aAAa;AACZ,aAAO;AAAA,QACN,OAAO,CAAC,YAAY,EAAE,oBAAoB,KAAK,OAAO,CAAC;AAAA,QACvD,MAAM;AAAA,QACN,eAAe,CAAC,KAAK,OAAO,OAAO;AAAA,QACnC,cAAc,KAAK,QAAQ;AAAA,MAC5B;AAAA,IACA;AAAA,EACD;AACF;;;;;;;;;;;;EAnGO,SAAQ;AAAA,EAAY,OAAM;;AAlGjC,MAAA,aAAA,CAAA,GAAA;AAAA,MAAA,aAAA,CAAA,WAAA;;UAgGc,SAAQ,YAArBA,aAAAC,mBAKO,QArGRC,eAAAC,WAAA,EAAA,KAAA,KAiGU,SAAU,UAAA,CAAA,GAAA;AAAA,KAClBH,aAAAC,mBAEM,OAFN,YAEM;AAAA,MADLG,mBAAkB,QAAX,EAAA,GAAG,OAAA,QAnGb,MAAA,GAAA,UAAA;AAAA;0BAsGCH,mBAEqB,QAFrBE,WAEqB,EAxGtB,KAAA,EAAA,GAuGU,qBACR,EAAA,WAAQ,SAAA,SAAQ,CAxGlB,GAAA,MAAA,IAAA,UAAA;;;"}

package/dist/chunks/{NcInputConfirmCancel-Rk8B1Q0j.mjs → NcInputConfirmCancel-Cwh6_J6A.mjs} RENAMED Viewed

@@ -1,6 +1,6 @@
-import '../assets/NcInputConfirmCancel-dYsxq6pH.css';
-import { N as NcButton } from "./NcButton-B27fpd1m.mjs";
-import { r as register, m as t12, a as t } from "./_l10n-ipRV_dfs.mjs";
+import '../assets/NcInputConfirmCancel-DBjIHKvN.css';
+import { N as NcButton } from "./NcButton-DvO0XwJf.mjs";
+import { r as register, m as t12, a as t } from "./_l10n-C3nxU4O-.mjs";
 import { A as ArrowRight } from "./ArrowRight-Cg6xGDcS.mjs";
 import { C as Close } from "./Close-pmiXntgw.mjs";
 import { resolveComponent, openBlock, createElementBlock, createElementVNode, withModifiers, withKeys, withDirectives, vModelText, createVNode, withCtx } from "vue";
@@ -110,7 +110,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ], 32)
   ]);
 }
-const NcInputConfirmCancel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-5be11683"]]);
+const NcInputConfirmCancel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-cd55dad8"]]);
 export {
   NcInputConfirmCancel as N
 };

package/dist/chunks/NcInputConfirmCancel-Cwh6_J6A.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcInputConfirmCancel-Cwh6_J6A.mjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["\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.ts'\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\tmodelValue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'cancel',\n\t\t'confirm',\n\t\t'update:modelValue',\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.modelValue },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('update:modelValue', 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":["_openBlock","_createElementBlock","_createElementVNode","_withModifiers","_withKeys","_createVNode"],"mappings":";;;;;;;AAkDA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,SAAS;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA,IACN;AAAA,IAED,aAAa;AAAA,MACZ,SAAS;AAAA,MACT,MAAM;AAAA,IACN;AAAA,IAED,YAAY;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA,IACN;AAAA,EACD;AAAA,EAED,OAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAED,OAAO;AACN,WAAO;AAAA,MACN,cAAc,EAAE,iBAAiB;AAAA,MACjC,aAAa,EAAE,gBAAgB;AAAA,IAChC;AAAA,EACA;AAAA,EAED,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM;AAAE,eAAO,KAAK;AAAA,MAAY;AAAA,MAChC,IAAI,UAAU;AACb,aAAK,MAAM,qBAAqB,QAAQ;AAAA,MACxC;AAAA,IACD;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACR,UAAU;AACT,WAAK,MAAM,SAAS;AAAA,IACpB;AAAA,IACD,SAAS;AACR,WAAK,MAAM,QAAQ;AAAA,IACnB;AAAA,IACD,aAAa;AACZ,WAAK,MAAM,MAAM,MAAM;AAAA,IACvB;AAAA,EACD;AACF;AAnGM,MAAA,aAAA,EAAA,OAAM,+BAA8B;AAb1C,MAAA,aAAA,CAAA,aAAA;;;;;AAaC,SAAAA,UAAA,GAAAC,mBA4BM,OA5BN,YA4BM;AAAA,IA3BLC,mBA0BO,QAAA;AAAA,MA1BA,UAAM,OAAA,CAAA,MAAA,OAAA,CAAA,IAdfC,2BAcyB,SAAO,WAAA,SAAA,QAAA,GAAA,IAAA,GAAA,CAAA,SAAA,CAAA;AAAA,MAC5B,WAAO,OAAA,CAAA,MAAA,OAAA,CAAA,IAfXC,SAAAD,cAAA,IAAA,SAeoC,SAAM,UAAA,SAAA,OAAA,GAAA,IAAA,GAAA,CAAA,SAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,CAAA;AAAA,MACtC,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAhBTA,cAgBG,MAAmB;AAAA,MAAA,GAAA,CAAA,QAAA,SAAA,CAAA;AAAA;qBACnBD,mBAI4B,SAAA;AAAA,QAJrB,KAAI;AAAA,QAjBd,uBAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAkBa,SAAU,aAAA;AAAA,QACnB,MAAK;AAAA,QACL,OAAM;AAAA,QACL,aAAa,OAAW;AAAA,MArB7B,GAAA,MAAA,GAAA,UAAA,GAAA;AAAA,qBAkBa,SAAU,UAAA;AAAA;MAKpBG,YAOW,qBAAA;AAAA,QAPD,eAAY;AAAA,QACrB,MAAK;AAAA,QACJ,cAAY,MAAY;AAAA,QACxB,SA1BLF,cA0ByB,SAAO,SAAA,CAAA,QAAA,SAAA,CAAA;AAAA;QACjB,cACV,MAAyB;AAAA,UAAzBE,YAAyB,uBAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;QA5B1B,GAAA;AAAA;MAgCGA,YAOW,qBAAA;AAAA,QAPD,eAAY;AAAA,QACpB,MAAM,OAAO,UAAA,YAAA;AAAA,QACb,cAAY,MAAW;AAAA,QACvB,SAnCLF,cAmCyB,SAAM,QAAA,CAAA,QAAA,SAAA,CAAA;AAAA;QAChB,cACV,MAAoB;AAAA,UAApBE,YAAoB,kBAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;QArCrB,GAAA;AAAA;;;;;"}

package/dist/chunks/{NcInputField-DX0Brmlk.mjs → NcInputField-BrAvsgA4.mjs} RENAMED Viewed

@@ -1,6 +1,6 @@
-import '../assets/NcInputField-CSuJUlgW.css';
-import { N as NcButton } from "./NcButton-B27fpd1m.mjs";
-import { G as GenRandomId } from "./GenRandomId-CXkjMlAT.mjs";
+import '../assets/NcInputField-DXzhRkiY.css';
+import { N as NcButton } from "./NcButton-DvO0XwJf.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
 import { A as AlertCircle } from "./AlertCircleOutline-DWBCJkLM.mjs";
 import { C as Check } from "./Check-_j2mQvkT.mjs";
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, toDisplayString, createCommentVNode, withDirectives, renderSlot, vShow, createBlock, withCtx, createTextVNode } from "vue";
@@ -302,7 +302,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ], 10, _hoisted_6)) : createCommentVNode("", true)
   ], 2);
 }
-const NcInputField = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-53a71842"]]);
+const NcInputField = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-1fe8c510"]]);
 export {
   NcInputField as N
 };