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

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

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 (228) hide show

package/dist/chunks/{NcDateTimePicker-CjuFbS-2.mjs.map → NcDateTimePicker-D9gDwRl4.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcDateTimePicker-CjuFbS-2.mjs","sources":["../../node_modules/vue-material-design-icons/CalendarBlank.vue","../../node_modules/vue-material-design-icons/Web.vue","../../src/components/NcDateTimePicker/NcDateTimePicker.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon calendar-blank-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=\"M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"CalendarBlankIcon\",\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>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon web-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=\"M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 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: \"WebIcon\",\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 - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n> We're wrapping the awesome datepicker library here https://github.com/mengxiong10/vue-datepicker-next\n> Please check there for all the available options.\n\n### Defaults\n- cleareable: false\n- minute-step: 10\n\n### Example\n```vue\n<template>\n\t<span>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\ttype=\"datetime\" />\n\t\t{{ time }}\n\t</span>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttime: new Date('2022-10-10 10:10:10'),\n\t\t}\n\t},\n}\n</script>\n```\n\n### Example with confirm button\n```vue\n<template>\n\t<span>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\ttype=\"datetime\"\n\t\t\tconfirm />\n\t\t{{ time }}\n\t</span>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttime: null,\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### Range picker\n```vue\n<template>\n\t<span>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\trange\n\t\t\ttype=\"date\" />\n\t\t{{ time }}\n\t</span>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttime: null,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Time zone aware date picker\n\nThe datepicker can optionally include a picker for the preferred time zone. The selected time does not factor in the\npicked time zone, but you will have to convert it yourself when necessary.\n\n```vue\n<template>\n\t<span>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\ttype=\"datetime\"\n\t\t\t:show-timezone-select=\"true\"\n\t\t\tv-model:timezone-id=\"tz\" /><br>\n\t\t{{ time }} \| {{ tz }}\n\t</span>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttime: undefined,\n\t\t\ttz: 'Europe/Berlin',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<DatePicker ref=\"datepicker\"\n\t\t:append-to-body=\"appendToBody\"\n\t\t:clearable=\"clearable\"\n\t\t:format=\"format ? format : formatTypeMap\"\n\t\t:formatter=\"internalFormatter\"\n\t\t:lang=\"lang ? lang : defaultLang\"\n\t\t:minute-step=\"minuteStep\"\n\t\t:placeholder=\"placeholder ? placeholder : defaultPlaceholder\"\n\t\t:popup-class=\"{ 'show-week-number': showWeekNumber }\"\n\t\t:show-week-number=\"showWeekNumber\"\n\t\t:type=\"type\"\n\t\t:value=\"modelValue\"\n\t\t@select-year=\"handleSelectYear\"\n\t\t@select-month=\"handleSelectMonth\"\n\t\t@update:value=\"$emit('update:modelValue', $event)\">\n\t\t<template #icon-calendar>\n\t\t\t<NcPopover v-if=\"showTimezoneSelect\"\n\t\t\t\tv-model:shown=\"showTimezonePopover\"\n\t\t\t\tpopup-role=\"dialog\"\n\t\t\t\tpopover-base-class=\"timezone-select__popper\">\n\t\t\t\t<template #trigger=\"{ attrs }\">\n\t\t\t\t\t<button class=\"datetime-picker-inline-icon\"\n\t\t\t\t\t\t:class=\"{'datetime-picker-inline-icon--highlighted': highlightTimezone}\"\n\t\t\t\t\t\tv-bind=\"attrs\"\n\t\t\t\t\t\t@mousedown.stop.prevent=\"() => {}\">\n\t\t\t\t\t\t<Web :size=\"20\" />\n\t\t\t\t\t</button>\n\t\t\t\t</template>\n\n\t\t\t\t<div role=\"dialog\"\n\t\t\t\t\t:aria-labelledby=\"timezoneDialogHeaderId\">\n\t\t\t\t\t<div class=\"timezone-popover-wrapper__label\">\n\t\t\t\t\t\t<strong :id=\"timezoneDialogHeaderId\">\n\t\t\t\t\t\t\t{{ t('Please select a time zone:') }}\n\t\t\t\t\t\t</strong>\n\t\t\t\t\t</div>\n\t\t\t\t\t<NcTimezonePicker :model-value=\"tzVal\"\n\t\t\t\t\t\tclass=\"timezone-popover-wrapper__timezone-select\"\n\t\t\t\t\t\t@update:model-value=\"$emit('update:timezone-id', $event)\" />\n\t\t\t\t</div>\n\t\t\t</NcPopover>\n\t\t\t<CalendarBlank v-else :size=\"20\" />\n\t\t</template>\n\t\t<template v-for=\"(_, slot) of $slots\" #[slot]=\"scope\">\n\t\t\t<slot :name=\"slot\" v-bind=\"scope\" />\n\t\t</template>\n\t</DatePicker>\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport NcTimezonePicker from '../NcTimezonePicker/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport ScopeComponent from '../../utils/ScopeComponent.js'\n\nimport CalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'\nimport Web from 'vue-material-design-icons/Web.vue'\n\nimport {\n\tgetFirstDay,\n\tgetDayNames,\n\tgetDayNamesShort,\n\tgetDayNamesMin,\n\tgetMonthNames,\n\tgetMonthNamesShort,\n} from '@nextcloud/l10n'\n\nimport DatePicker from 'vue-datepicker-next'\nimport './index.scss'\n\nconst formatMap = {\n\tdate: 'YYYY-MM-DD',\n\tdatetime: 'YYYY-MM-DD H:mm:ss',\n\tyear: 'YYYY',\n\tmonth: 'YYYY-MM',\n\ttime: 'H:mm:ss',\n\tweek: 'w',\n}\n\nexport default ScopeComponent({\n\tname: 'NcDateTimePicker',\n\n\tcomponents: {\n\t\tCalendarBlank,\n\t\tDatePicker,\n\t\tNcPopover,\n\t\tNcTimezonePicker,\n\t\tWeb,\n\t},\n\n\tprops: {\n\t\tclearable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\tminuteStep: {\n\t\t\ttype: Number,\n\t\t\tdefault: 10,\n\t\t},\n\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date',\n\t\t},\n\n\t\tformat: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\tformatter: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\tlang: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/*\n\t\t The value to initialize, but also two-way bind the selected date. The date is – like the `Date` object in\n\t\t * JavaScript – tied to UTC. The selected time zone does not have an influence of the selected time and date\n\t\t * value. You have to translate the time yourself when you want to factor in time zones.\n\t\t /\n\t\t// eslint-disable-next-line\n\t\tmodelValue: {\n\t\t\tdefault: () => new Date(),\n\t\t},\n\n\t\t/\n\t\t The preselected IANA time zone ID for the time zone picker, only relevant in combination with `:show-timezone-select=\"true\"`. Example: `Europe/Berlin`. The prop supports two-way binding through v-model directive.\n\t\t /\n\t\ttimezoneId: {\n\t\t\ttype: String,\n\t\t\tdefault: 'UTC',\n\t\t},\n\n\t\tshowTimezoneSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\thighlightTimezone: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\tappendToBody: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\tshowWeekNumber: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t\t'update:timezone-id',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\ttimezoneDialogHeaderId: `timezone-dialog-header-${GenRandomId()}`,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tshowTimezonePopover: false,\n\t\t\ttzVal: this.timezoneId,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Datepicker language\n\t\t * https://github.com/mengxiong10/vue2-datepicker/blob/master/locale.md\n\t\t \n\t\t @return {object}\n\t\t /\n\t\tdefaultLang() {\n\t\t\treturn {\n\t\t\t\tformatLocale: {\n\t\t\t\t\tmonths: getMonthNames(),\n\t\t\t\t\tmonthsShort: getMonthNamesShort(),\n\t\t\t\t\tweekdays: getDayNames(),\n\t\t\t\t\tweekdaysShort: getDayNamesShort(),\n\t\t\t\t\tweekdaysMin: getDayNamesMin(),\n\t\t\t\t\t// 0 = sunday, 1 = monday\n\t\t\t\t\tfirstDayOfWeek: getFirstDay(),\n\t\t\t\t},\n\t\t\t\tmonthFormat: 'MMM',\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Translated placeholder\n\t\t \n\t\t @return {string}\n\t\t /\n\t\tdefaultPlaceholder() {\n\t\t\tif (this.type === 'time') {\n\t\t\t\treturn t('Pick a time')\n\t\t\t}\n\t\t\tif (this.type === 'month') {\n\t\t\t\treturn t('Pick a month')\n\t\t\t}\n\t\t\tif (this.type === 'year') {\n\t\t\t\treturn t('Pick a year')\n\t\t\t}\n\t\t\tif (this.type === 'week') {\n\t\t\t\treturn t('Pick a week')\n\t\t\t}\n\t\t\tif (this.type === 'date') {\n\t\t\t\treturn t('Pick a date')\n\t\t\t}\n\t\t\treturn t('Pick a date and a time')\n\t\t},\n\n\t\t/\n\t\t If format is not provided, try to match the type\n\t\t * or fallback to 'date'\n\t\t \n\t\t @return {string}\n\t\t /\n\t\tformatTypeMap() {\n\t\t\treturn formatMap[this.type] ?? formatMap.date\n\t\t},\n\n\t\t/\n\t\t The formatter used for the vue-datepicker to fix nextcloud-libraries/nextcloud-vue#5044\n\t\t /\n\t\tinternalFormatter() {\n\t\t\t/\n\t\t\t Get the ISO week number of the date\n\t\t\t * @param {Date} date The date to format\n\t\t\t /\n\t\t\tconst getWeek = (date) => {\n\t\t\t\t// Adjust to nearest Thursday\n\t\t\t\tconst firstThursday = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))\n\t\t\t\tfirstThursday.setUTCDate(firstThursday.getUTCDate() + 4 - (firstThursday.getUTCDay() \|\| 7))\n\n\t\t\t\tconst yearStart = new Date(Date.UTC(firstThursday.getUTCFullYear(), 0, 1))\n\n\t\t\t\t// Full weeks to nearest Thursday\n\t\t\t\treturn Math.ceil((((firstThursday - yearStart) / 86400000) + 1) / 7)\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tgetWeek,\n\t\t\t\t// allow to override it by users using the `formatter` prop\n\t\t\t\t...(this.formatter ?? {}),\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\thandleSelectYear(year) {\n\t\t\tconst value = this.$refs.datepicker.currentValue\n\t\t\tif (value) {\n\t\t\t\ttry {\n\t\t\t\t\tconst date = new Date(new Date(value).setFullYear(year))\n\t\t\t\t\tthis.$refs.datepicker.selectDate(date)\n\t\t\t\t} catch (error) {\n\t\t\t\t\tconsole.error('Invalid value', value, year)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\thandleSelectMonth(month) {\n\t\t\tconst value = this.$refs.datepicker.currentValue\n\t\t\tif (value) {\n\t\t\t\ttry {\n\t\t\t\t\tconst date = new Date(new Date(value).setMonth(month))\n\t\t\t\t\tthis.$refs.datepicker.selectDate(date)\n\t\t\t\t} catch (error) {\n\t\t\t\t\tconsole.error('Invalid value', value, month)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Toggles the visibility of the time zone popover\n\t\t */\n\t\ttoggleTimezonePopover() {\n\t\t\tif (!this.showTimezoneSelect) {\n\t\t\t\t// Just a click on the icon, but not for time zones -> ignore\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.showTimezonePopover = !this.showTimezonePopover\n\t\t},\n\t},\n})\n\n</script>\n\n<style lang=\"scss\" scoped>\n.mx-datepicker :deep(.mx-input-wrapper .mx-input) {\n\tbackground-clip: border-box;\n}\n\n.datetime-picker-inline-icon {\n\topacity: .3;\n\tborder: none;\n\tbackground-color: transparent;\n\tborder-radius: 0;\n\tpadding: 0 !important;\n\tmargin: 0;\n\n\t&--highlighted {\n\t\topacity: .7;\n\t}\n\n\t&:focus,\n\t&:hover {\n\t\topacity: 1;\n\t}\n}\n</style>\n\n<style lang=\"scss\">\n// We overwrite the popover base class, so we can style\n// the popover for the timezone select only.\n.v-popper--theme-dropdown.v-popper__popper.timezone-select__popper .v-popper__wrapper {\n\tborder-radius: var(--border-radius-large);\n\n\t.v-popper__inner {\n\t\tpadding: 4px;\n\t\tborder-radius: var(--border-radius-large);\n\n\t\t.timezone-popover-wrapper {\n\t\t\t&__label {\n\t\t\t\tpadding: 4px 0;\n\t\t\t\tpadding-left: 14px; // Left-align with NcSelect text\n\t\t\t}\n\n\t\t\t// We overwrite the border radius of the input to account for the popover border-radius minus the padding\n\t\t\t&__timezone-select.v-select {\n\t\t\t\t.vs__dropdown-toggle {\n\t\t\t\t\tborder-radius: calc(var(--border-radius-large) - 4px);\n\t\t\t\t}\n\n\t\t\t\t&.vs--open {\n\t\t\t\t\t.vs__dropdown-toggle {\n\t\t\t\t\t\tborder-bottom-left-radius: 0;\n\t\t\t\t\t\tborder-bottom-right-radius: 0;\n\t\t\t\t\t}\n\t\t\t\t\t&.select--drop-up .vs__dropdown-toggle {\n\t\t\t\t\t\tborder-radius: 0 0 calc(var(--border-radius-large) - 4px) calc(var(--border-radius-large) - 4px);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n// TODO: This should be scoped or targeted by a specific selector, but the NcSelect component does not allow this yet.\n.vs__dropdown-menu--floating {\n\t// Higher z-index than the popover in which the NcSelect is located.\n\tz-index: 100001 !important;\n}\n</style>\n"],"names":["_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_hoisted_4","_createCommentVNode","_createBlock","_createSlots","_withCtx","_withModifiers","_createVNode","_toDisplayString","_renderList","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":"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","x_google_ignoreList":[0,1]}
1	+ {"version":3,"file":"NcDateTimePicker-D9gDwRl4.mjs","sources":["../../node_modules/vue-material-design-icons/CalendarBlank.vue","../../node_modules/vue-material-design-icons/Web.vue","../../src/components/NcDateTimePicker/NcDateTimePicker.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon calendar-blank-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=\"M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"CalendarBlankIcon\",\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>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon web-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=\"M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 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: \"WebIcon\",\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 - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n> We're wrapping the awesome datepicker library here https://github.com/mengxiong10/vue-datepicker-next\n> Please check there for all the available options.\n\n### Defaults\n- cleareable: false\n- minute-step: 10\n\n### Example\n```vue\n<template>\n\t<span>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\ttype=\"datetime\" />\n\t\t{{ time }}\n\t</span>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttime: new Date('2022-10-10 10:10:10'),\n\t\t}\n\t},\n}\n</script>\n```\n\n### Example with confirm button\n```vue\n<template>\n\t<span>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\ttype=\"datetime\"\n\t\t\tconfirm />\n\t\t{{ time }}\n\t</span>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttime: null,\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### Range picker\n```vue\n<template>\n\t<span>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\trange\n\t\t\ttype=\"date\" />\n\t\t{{ time }}\n\t</span>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttime: null,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Time zone aware date picker\n\nThe datepicker can optionally include a picker for the preferred time zone. The selected time does not factor in the\npicked time zone, but you will have to convert it yourself when necessary.\n\n```vue\n<template>\n\t<span>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\ttype=\"datetime\"\n\t\t\t:show-timezone-select=\"true\"\n\t\t\tv-model:timezone-id=\"tz\" /><br>\n\t\t{{ time }} \| {{ tz }}\n\t</span>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttime: undefined,\n\t\t\ttz: 'Europe/Berlin',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<DatePicker ref=\"datepicker\"\n\t\t:append-to-body=\"appendToBody\"\n\t\t:clearable=\"clearable\"\n\t\t:format=\"format ? format : formatTypeMap\"\n\t\t:formatter=\"internalFormatter\"\n\t\t:lang=\"lang ? lang : defaultLang\"\n\t\t:minute-step=\"minuteStep\"\n\t\t:placeholder=\"placeholder ? placeholder : defaultPlaceholder\"\n\t\t:popup-class=\"{ 'show-week-number': showWeekNumber }\"\n\t\t:show-week-number=\"showWeekNumber\"\n\t\t:type=\"type\"\n\t\t:value=\"modelValue\"\n\t\t@select-year=\"handleSelectYear\"\n\t\t@select-month=\"handleSelectMonth\"\n\t\t@update:value=\"$emit('update:modelValue', $event)\">\n\t\t<template #icon-calendar>\n\t\t\t<NcPopover v-if=\"showTimezoneSelect\"\n\t\t\t\tv-model:shown=\"showTimezonePopover\"\n\t\t\t\tpopup-role=\"dialog\"\n\t\t\t\tpopover-base-class=\"timezone-select__popper\">\n\t\t\t\t<template #trigger=\"{ attrs }\">\n\t\t\t\t\t<button class=\"datetime-picker-inline-icon\"\n\t\t\t\t\t\t:class=\"{'datetime-picker-inline-icon--highlighted': highlightTimezone}\"\n\t\t\t\t\t\tv-bind=\"attrs\"\n\t\t\t\t\t\t@mousedown.stop.prevent=\"() => {}\">\n\t\t\t\t\t\t<Web :size=\"20\" />\n\t\t\t\t\t</button>\n\t\t\t\t</template>\n\n\t\t\t\t<div role=\"dialog\"\n\t\t\t\t\t:aria-labelledby=\"timezoneDialogHeaderId\">\n\t\t\t\t\t<div class=\"timezone-popover-wrapper__label\">\n\t\t\t\t\t\t<strong :id=\"timezoneDialogHeaderId\">\n\t\t\t\t\t\t\t{{ t('Please select a time zone:') }}\n\t\t\t\t\t\t</strong>\n\t\t\t\t\t</div>\n\t\t\t\t\t<NcTimezonePicker :model-value=\"tzVal\"\n\t\t\t\t\t\tclass=\"timezone-popover-wrapper__timezone-select\"\n\t\t\t\t\t\t@update:model-value=\"$emit('update:timezone-id', $event)\" />\n\t\t\t\t</div>\n\t\t\t</NcPopover>\n\t\t\t<CalendarBlank v-else :size=\"20\" />\n\t\t</template>\n\t\t<template v-for=\"(_, slot) of $slots\" #[slot]=\"scope\">\n\t\t\t<slot :name=\"slot\" v-bind=\"scope\" />\n\t\t</template>\n\t</DatePicker>\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport NcTimezonePicker from '../NcTimezonePicker/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport ScopeComponent from '../../utils/ScopeComponent.js'\n\nimport CalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'\nimport Web from 'vue-material-design-icons/Web.vue'\n\nimport {\n\tgetFirstDay,\n\tgetDayNames,\n\tgetDayNamesShort,\n\tgetDayNamesMin,\n\tgetMonthNames,\n\tgetMonthNamesShort,\n} from '@nextcloud/l10n'\n\nimport DatePicker from 'vue-datepicker-next'\nimport './index.scss'\n\nconst formatMap = {\n\tdate: 'YYYY-MM-DD',\n\tdatetime: 'YYYY-MM-DD H:mm:ss',\n\tyear: 'YYYY',\n\tmonth: 'YYYY-MM',\n\ttime: 'H:mm:ss',\n\tweek: 'w',\n}\n\nexport default ScopeComponent({\n\tname: 'NcDateTimePicker',\n\n\tcomponents: {\n\t\tCalendarBlank,\n\t\tDatePicker,\n\t\tNcPopover,\n\t\tNcTimezonePicker,\n\t\tWeb,\n\t},\n\n\tprops: {\n\t\tclearable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\tminuteStep: {\n\t\t\ttype: Number,\n\t\t\tdefault: 10,\n\t\t},\n\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date',\n\t\t},\n\n\t\tformat: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\tformatter: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\tlang: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/*\n\t\t The value to initialize, but also two-way bind the selected date. The date is – like the `Date` object in\n\t\t * JavaScript – tied to UTC. The selected time zone does not have an influence of the selected time and date\n\t\t * value. You have to translate the time yourself when you want to factor in time zones.\n\t\t /\n\t\t// eslint-disable-next-line\n\t\tmodelValue: {\n\t\t\tdefault: () => new Date(),\n\t\t},\n\n\t\t/\n\t\t The preselected IANA time zone ID for the time zone picker, only relevant in combination with `:show-timezone-select=\"true\"`. Example: `Europe/Berlin`. The prop supports two-way binding through v-model directive.\n\t\t /\n\t\ttimezoneId: {\n\t\t\ttype: String,\n\t\t\tdefault: 'UTC',\n\t\t},\n\n\t\tshowTimezoneSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\thighlightTimezone: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\tappendToBody: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\tshowWeekNumber: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t\t'update:timezone-id',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\ttimezoneDialogHeaderId: `timezone-dialog-header-${GenRandomId()}`,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tshowTimezonePopover: false,\n\t\t\ttzVal: this.timezoneId,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t Datepicker language\n\t\t * https://github.com/mengxiong10/vue2-datepicker/blob/master/locale.md\n\t\t \n\t\t @return {object}\n\t\t /\n\t\tdefaultLang() {\n\t\t\treturn {\n\t\t\t\tformatLocale: {\n\t\t\t\t\tmonths: getMonthNames(),\n\t\t\t\t\tmonthsShort: getMonthNamesShort(),\n\t\t\t\t\tweekdays: getDayNames(),\n\t\t\t\t\tweekdaysShort: getDayNamesShort(),\n\t\t\t\t\tweekdaysMin: getDayNamesMin(),\n\t\t\t\t\t// 0 = sunday, 1 = monday\n\t\t\t\t\tfirstDayOfWeek: getFirstDay(),\n\t\t\t\t},\n\t\t\t\tmonthFormat: 'MMM',\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Translated placeholder\n\t\t \n\t\t @return {string}\n\t\t /\n\t\tdefaultPlaceholder() {\n\t\t\tif (this.type === 'time') {\n\t\t\t\treturn t('Pick a time')\n\t\t\t}\n\t\t\tif (this.type === 'month') {\n\t\t\t\treturn t('Pick a month')\n\t\t\t}\n\t\t\tif (this.type === 'year') {\n\t\t\t\treturn t('Pick a year')\n\t\t\t}\n\t\t\tif (this.type === 'week') {\n\t\t\t\treturn t('Pick a week')\n\t\t\t}\n\t\t\tif (this.type === 'date') {\n\t\t\t\treturn t('Pick a date')\n\t\t\t}\n\t\t\treturn t('Pick a date and a time')\n\t\t},\n\n\t\t/\n\t\t If format is not provided, try to match the type\n\t\t * or fallback to 'date'\n\t\t \n\t\t @return {string}\n\t\t /\n\t\tformatTypeMap() {\n\t\t\treturn formatMap[this.type] ?? formatMap.date\n\t\t},\n\n\t\t/\n\t\t The formatter used for the vue-datepicker to fix nextcloud-libraries/nextcloud-vue#5044\n\t\t /\n\t\tinternalFormatter() {\n\t\t\t/\n\t\t\t Get the ISO week number of the date\n\t\t\t * @param {Date} date The date to format\n\t\t\t /\n\t\t\tconst getWeek = (date) => {\n\t\t\t\t// Adjust to nearest Thursday\n\t\t\t\tconst firstThursday = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))\n\t\t\t\tfirstThursday.setUTCDate(firstThursday.getUTCDate() + 4 - (firstThursday.getUTCDay() \|\| 7))\n\n\t\t\t\tconst yearStart = new Date(Date.UTC(firstThursday.getUTCFullYear(), 0, 1))\n\n\t\t\t\t// Full weeks to nearest Thursday\n\t\t\t\treturn Math.ceil((((firstThursday - yearStart) / 86400000) + 1) / 7)\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tgetWeek,\n\t\t\t\t// allow to override it by users using the `formatter` prop\n\t\t\t\t...(this.formatter ?? {}),\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\thandleSelectYear(year) {\n\t\t\tconst value = this.$refs.datepicker.currentValue\n\t\t\tif (value) {\n\t\t\t\ttry {\n\t\t\t\t\tconst date = new Date(new Date(value).setFullYear(year))\n\t\t\t\t\tthis.$refs.datepicker.selectDate(date)\n\t\t\t\t} catch (error) {\n\t\t\t\t\tconsole.error('Invalid value', value, year)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\thandleSelectMonth(month) {\n\t\t\tconst value = this.$refs.datepicker.currentValue\n\t\t\tif (value) {\n\t\t\t\ttry {\n\t\t\t\t\tconst date = new Date(new Date(value).setMonth(month))\n\t\t\t\t\tthis.$refs.datepicker.selectDate(date)\n\t\t\t\t} catch (error) {\n\t\t\t\t\tconsole.error('Invalid value', value, month)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Toggles the visibility of the time zone popover\n\t\t */\n\t\ttoggleTimezonePopover() {\n\t\t\tif (!this.showTimezoneSelect) {\n\t\t\t\t// Just a click on the icon, but not for time zones -> ignore\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.showTimezonePopover = !this.showTimezonePopover\n\t\t},\n\t},\n})\n\n</script>\n\n<style lang=\"scss\" scoped>\n.mx-datepicker :deep(.mx-input-wrapper .mx-input) {\n\tbackground-clip: border-box;\n}\n\n.datetime-picker-inline-icon {\n\topacity: .3;\n\tborder: none;\n\tbackground-color: transparent;\n\tborder-radius: 0;\n\tpadding: 0 !important;\n\tmargin: 0;\n\n\t&--highlighted {\n\t\topacity: .7;\n\t}\n\n\t&:focus,\n\t&:hover {\n\t\topacity: 1;\n\t}\n}\n</style>\n\n<style lang=\"scss\">\n// We overwrite the popover base class, so we can style\n// the popover for the timezone select only.\n.v-popper--theme-dropdown.v-popper__popper.timezone-select__popper .v-popper__wrapper {\n\tborder-radius: var(--border-radius-large);\n\n\t.v-popper__inner {\n\t\tpadding: 4px;\n\t\tborder-radius: var(--border-radius-large);\n\n\t\t.timezone-popover-wrapper {\n\t\t\t&__label {\n\t\t\t\tpadding: 4px 0;\n\t\t\t\tpadding-left: 14px; // Left-align with NcSelect text\n\t\t\t}\n\n\t\t\t// We overwrite the border radius of the input to account for the popover border-radius minus the padding\n\t\t\t&__timezone-select.v-select {\n\t\t\t\t.vs__dropdown-toggle {\n\t\t\t\t\tborder-radius: calc(var(--border-radius-large) - 4px);\n\t\t\t\t}\n\n\t\t\t\t&.vs--open {\n\t\t\t\t\t.vs__dropdown-toggle {\n\t\t\t\t\t\tborder-bottom-left-radius: 0;\n\t\t\t\t\t\tborder-bottom-right-radius: 0;\n\t\t\t\t\t}\n\t\t\t\t\t&.select--drop-up .vs__dropdown-toggle {\n\t\t\t\t\t\tborder-radius: 0 0 calc(var(--border-radius-large) - 4px) calc(var(--border-radius-large) - 4px);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n// TODO: This should be scoped or targeted by a specific selector, but the NcSelect component does not allow this yet.\n.vs__dropdown-menu--floating {\n\t// Higher z-index than the popover in which the NcSelect is located.\n\tz-index: 100001 !important;\n}\n</style>\n"],"names":["_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_hoisted_4","_createCommentVNode","_createBlock","_createSlots","_withCtx","_withModifiers","_createVNode","_toDisplayString","_renderList","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/chunks/{NcDateTimePickerNative-DwJ_yIEg.mjs → NcDateTimePickerNative-d04KsMAl.mjs} RENAMED Viewed

@@ -1,5 +1,5 @@
 import '../assets/NcDateTimePickerNative-DLch-JRA.css';
-import { S as ScopeComponent } from "./ScopeComponent-C5tGtO7l.mjs";
+import { S as ScopeComponent } from "./ScopeComponent-59SnWk9S.mjs";
 import { openBlock, createElementBlock, createElementVNode, normalizeClass, toDisplayString, mergeProps } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const inputDateTypes = ["date", "datetime-local", "month", "time", "week"];

package/dist/chunks/{NcDateTimePickerNative-DwJ_yIEg.mjs.map → NcDateTimePickerNative-d04KsMAl.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcDateTimePickerNative-DwJ_yIEg.mjs","sources":["../../src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\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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"}
1	+ {"version":3,"file":"NcDateTimePickerNative-d04KsMAl.mjs","sources":["../../src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\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-CE2gyz2g.mjs → NcDialog-D5IAHMrC.mjs} RENAMED Viewed

@@ -1,8 +1,8 @@
-import '../assets/NcDialog-BmN7gR6_.css';
+import '../assets/NcDialog-DXX2MKxJ.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-DAb0CNtg.mjs";
+import { N as NcDialogButton } from "./NcDialogButton-BkFODtad.mjs";
 import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = defineComponent({
@@ -58,7 +58,7 @@ const _sfc_main = defineComponent({
       type: String,
       required: false,
       default: "small",
-      validator: (value) => typeof value === "string" && ["small", "normal", "large", "full"].includes(value)
+      validator: (value) => ["small", "normal", "large", "full"].includes(value)
     },
     /**
      * Buttons to display
@@ -68,7 +68,9 @@ const _sfc_main = defineComponent({
       type: Array,
       required: false,
       default: () => [],
-      validator: (value) => Array.isArray(value) && value.every((element) => typeof element === "object")
+      validator(value) {
+        return Array.isArray(value) && value.every((element) => typeof element === "object");
+      }
     },
     /**
      * Set to false to no show a close button on the dialog
@@ -158,16 +160,16 @@ const _sfc_main = defineComponent({
   emits: ["closing", "update:open"],
   setup(props, { emit, slots }) {
     const wrapper = ref();
-    const { width: dialogWidth } = useElementSize(wrapper, { width: 900 });
+    const { width: dialogWidth } = useElementSize(wrapper, { width: 900, height: 0 });
     const isNavigationCollapsed = computed(() => dialogWidth.value < 876);
     const hasNavigation = computed(() => slots?.navigation !== void 0);
-    const navigationId = ref(GenRandomId());
+    const navigationId = GenRandomId();
     const navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || void 0);
     const navigationAriaLabelledbyAttr = computed(() => {
       if (props.navigationAriaLabel) {
         return void 0;
       }
-      return props.navigationAriaLabelledby || navigationId.value;
+      return props.navigationAriaLabelledby || navigationId;
     });
     const showModal = ref(true);
     const handleButtonClose = () => {
@@ -187,6 +189,8 @@ const _sfc_main = defineComponent({
       container: props.container === void 0 ? "body" : props.container,
       // we do not pass the name as we already have the name as the headline
       // name: props.name,
+      // But we need to set the correct label id so the dialog is labelled
+      labelId: navigationId,
       size: props.size,
       show: props.open && showModal.value,
       outTransition: props.outTransition,
@@ -267,7 +271,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-4cc1c6a1"]]);
+const NcDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b31d3b95"]]);
 export {
   NcDialog as N
 };

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

@@ -0,0 +1 @@

+ {"version":3,"file":"NcDialog-D5IAHMrC.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 lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { ComponentProps } from '../../utils/VueTypes.ts'\n\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\ntype NcDialogButtonProps = ComponentProps<typeof NcDialogButton>\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 as PropType<(string|HTMLElement)[]>,\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 as PropType<'small'|'normal'|'large'|'full'>,\n\t\t\trequired: false,\n\t\t\tdefault: 'small',\n\t\t\tvalidator: (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 as PropType<NcDialogButtonProps[]>,\n\t\t\trequired: false,\n\t\t\tdefault: () => ([]),\n\t\t\tvalidator(value: unknown[]) {\n\t\t\t\treturn Array.isArray(value)\n\t\t\t\t\t&& value.every((element) => typeof element === 'object')\n\t\t\t},\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 */\n\t\tconst wrapper = ref<HTMLDivElement>()\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, height: 0 })\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 = 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\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\t// But we need to set the correct label id so the dialog is labelled\n\t\t\tlabelId: navigationId,\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":["_resolveComponent","_openBlock","_createBlock","_mergeProps","handleClosed","handleClosing","navigationId","_toDisplayString","_createElementVNode","_normalizeClass","hasNavigation","_createElementBlock","navigationAriaLabelledbyAttr","_renderSlot","_createCommentVNode","_Fragment","_renderList"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, renderSlot, createCommentVNode, createTextVNode, toDisplayString } from "vue";
-import { N as NcButton } from "./NcButton-DvO0XwJf.mjs";
+import { N as NcButton, b as ButtonType } from "./NcButton-Bhuckhtj.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-DbL6OP85.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = defineComponent({
@@ -38,9 +38,11 @@ const _sfc_main = defineComponent({
      */
     type: {
       type: String,
+      default: ButtonType.Secondary,
       required: false,
-      default: "secondary",
-      validator: (type) => typeof type === "string" && ["primary", "secondary", "error", "warning", "success"].includes(type)
+      validator(value) {
+        return Object.values(ButtonType).includes(value);
+      }
     },
     /**
      * If the button should be shown as disabled

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

@@ -0,0 +1 @@

+ {"version":3,"file":"NcDialogButton-BkFODtad.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 lang=\"ts\">\nimport { defineComponent, type PropType } from 'vue'\nimport NcButton, { ButtonType } from '../NcButton/index'\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 as PropType<ButtonType>,\n\t\t\tdefault: ButtonType.Secondary,\n\t\t\trequired: false,\n\t\t\tvalidator(value: string) {\n\t\t\t\treturn Object.values(ButtonType).includes(value as ButtonType)\n\t\t\t}\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":["_resolveComponent","_openBlock","_createBlock","type","handleClick","icon","_renderSlot","_createCommentVNode","_createTextVNode","_toDisplayString"],"mappings":";;;;AA6BA,MAAA,YAAe,gBAAgB;AAAA,EAC9B,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,EACD;AAAA,EAEA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,UAAU;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKA,OAAO;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS,WAAW;AAAA,MACpB,UAAU;AAAA,MACV,UAAU,OAAe;AACxB,eAAO,OAAO,OAAO,UAAU,EAAE,SAAS,KAAmB;AAAA,MAC9D;AAAA,IACD;AAAA;AAAA;AAAA;AAAA,IAKA,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACD;AAAA,EAEA,OAAO,CAAC,OAAO;AAAA,EAEf,MAAM,OAAO,EAAE,QAAQ;AAKhB,UAAA,cAAc,CAAC,MAAM;AAC1B,YAAM,WAAW;AACjB,WAAK,SAAS,CAAC;AAAA,IAAA;AAGhB,WAAO,EAAE,YAAY;AAAA,EACtB;AACD,CAAC;;;8BA1FAA,iBAWW,UAAA;AAVT,SAAAC,UAAA,GAAkBC,YAAA,qBAAA;AAAA,IAClB,cAAMC,KAAI;AAAA,IACV,UAAOC,KAAAA;AAAAA,IAAAA,MAAAA,KAAAA;AAAAA,IAEG,SAAI,KAAA;AAAA,EAAA,GAAA;AAAA,IAGWC,MAAAA,QAAI,MAAK;AAAA,MAAAC,WAAA,KAAA,QAAjC,QAA0D,CAAA,GAAA,MAAA;AAAA,QAAA,KAlB9D,6BAkB0D,GAAAJ,YAAA,6BAAA;AAAA,UAAA,KAAA;AAAA,UAlB1D,KAAA,KAAA;AAAA,QAAA,GAAA,MAAA,GAAA,CAAA,KAAA,CAAA,KAAAK,mBAAA,IAAA,IAAA;AAAA,MAAA,CAAA;AAAA,IAAA,CAAA;AAAA;MAAAC,gBAAAC,gBAAA,KAAA,KAAA,IAAA,KAAA,CAAA;AAAA,IAAA,CAAA;AAAA;;;;"}

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

@@ -1,13 +1,13 @@
 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 { C as Color } from "./GenColors-AKX06ocD.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-DvO0XwJf.mjs";
-import { N as NcColorPicker } from "./NcColorPicker-Bq2-21Np.mjs";
+import { N as NcButton } from "./NcButton-Bhuckhtj.mjs";
+import { N as NcColorPicker } from "./NcColorPicker-ChOP5UKN.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 { N as NcTextField } from "./NcTextField-DctsarIL.mjs";
+import { r as register, w as t38, x as t33, y as t6, a as t } from "./_l10n-6dsjYig_.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 = {
@@ -53,7 +53,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   ], 16, _hoisted_1$1);
 }
 const IconCircle = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-register(t6, t31, t36);
+register(t6, t33, t38);
 let emojiIndex;
 const i18n = {
   search: t("Search emoji"),

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

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

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

@@ -1,5 +1,5 @@
-import '../assets/NcMentionBubble-B-xYaJDc.css';
-import '../assets/NcHeaderMenu-C-0GR7Si.css';
+import '../assets/NcMentionBubble-C6t8od-_.css';
+import '../assets/NcHeaderMenu-Cb5YSERm.css';
 import { vOnClickOutside } from "@vueuse/components";
 import { createFocusTrap } from "focus-trap";
 import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
@@ -15,7 +15,7 @@ import "@nextcloud/auth";
 import "@nextcloud/axios";
 import "@nextcloud/capabilities";
 import { g as getTrapStack } from "./focusTrap-Cecv_gjR.mjs";
-import { N as NcButton } from "./NcButton-DvO0XwJf.mjs";
+import { N as NcButton } from "./NcButton-Bhuckhtj.mjs";
 const _sfc_main = {
   name: "NcHeaderMenu",
   components: {
@@ -222,6 +222,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-describedby": $props.description ? $data.descriptionId : null,
         "aria-controls": `header-menu-${$props.id}`,
         "aria-expanded": $data.opened.toString(),
+        size: "large",
         onClick: withModifiers($options.toggleMenu, ["prevent"])
       }, {
         icon: withCtx(() => [
@@ -253,7 +254,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-b00d3724"]]);
+const NcHeaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-27b915ad"]]);
 export {
   NcHeaderMenu as N
 };

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

@@ -0,0 +1 @@

+ {"version":3,"file":"NcHeaderMenu-CKynqFZZ.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\theight: var(--header-height, 50px);\n\tpadding-right: 12px;\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\tsize=\"large\"\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-background-plain-text, 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/{NcInputConfirmCancel-Cwh6_J6A.mjs → NcInputConfirmCancel-DkOh9UP_.mjs} RENAMED Viewed

@@ -1,11 +1,11 @@
 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 { N as NcButton } from "./NcButton-Bhuckhtj.mjs";
+import { r as register, m as t13, a as t } from "./_l10n-6dsjYig_.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";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-register(t12);
+register(t13);
 const _sfc_main = {
   name: "NcInputConfirmCancel",
   components: {