@nextcloud/vue 9.0.0-alpha.8 → 9.0.0-rc.1

package/dist/chunks/{NcDashboardWidget-1rVqTzgV.mjs.map → NcDashboardWidget-CC2pZ6GI.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDashboardWidget-1rVqTzgV.mjs","sources":["../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## Usage\n\n### Simplest example with custom item\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Showing items and a half empty content message\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-items-and-empty-content=\"true\"\n\t\t:half-empty-content-message=\"'No unread items'\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Complete example using NcDashboardWidgetItem\n\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-more-url=\"'https://nextcloud.com'\"\n\t\t:item-menu=\"itemMenu\"\n\t\t@hide=\"onHide\"\n\t\t@markDone=\"onMarkDone\">\n\n\t\t<template #empty-content>\n\t\t\tNothing to display\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tid: '1',\n\t\ttargetUrl: 'https://target.org',\n\t\tavatarUrl: 'https://avatar.url/img.png',\n\t\tavatarUsername: 'Robert',\n\t\tavatarIsNoUser: true,\n\t\toverlayIconUrl: '/svg/core/actions/sound?color=000',\n\t\tmainText: 'First item text',\n\t\tsubText: 'First item subtext',\n\t},\n\t{\n\t\tid: '2',\n\t\ttargetUrl: 'https://other-target.org',\n\t\tavatarUrl: 'https://other-avatar.url/img.png',\n\t\toverlayIconUrl: '/svg/core/actions/add?color=000',\n\t\tmainText: 'Second item text',\n\t\tsubText: 'Second item subtext',\n\t},\n]\nconst myItemMenu = {\n\t// triggers an event named \"markDone\" when clicked\n\t'markDone': {\n\t\ttext: 'Mark as done',\n\t\ticon: 'icon-checkmark',\n\t},\n\t// triggers an event named \"hide\" when clicked\n\t'hide': {\n\t\ttext: 'Hide',\n\t\ticon: 'icon-toggle',\n\t},\n}\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems,\n\t\t\titemMenu: myItemMenu,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tmethods: {\n\t\tonMoreClick() {\n\t\t\tconsole.log('more clicked')\n\t\t\tconst win = window.open('https://wherever.you.want', '_blank')\n\t\t\twin.focus()\n\t\t},\n\t\tonHide(item) {\n\t\t\tconsole.log('user wants to hide item ' + item.id)\n\t\t\t// do what you want\n\t\t},\n\t\tonMarkDone(item) {\n\t\t\tconsole.log('user wants to mark item ' + item.id + ' as done')\n\t\t\t// do what you want\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"dashboard-widget\">\n\t\t<!-- This element is shown if we have items, but want to show a general message as well.\n\t\tCan be used e.g. to show \"No mentions\" on top of the item list. -->\n\t\t<NcEmptyContent v-if=\"showHalfEmptyContentArea\"\n\t\t\t:description=\"halfEmptyContentString\"\n\t\t\tclass=\"half-screen\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot The icon to show in the half empty content area. -->\n\t\t\t\t<slot name=\"halfEmptyContentIcon\">\n\t\t\t\t\t<Check />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t</NcEmptyContent>\n\t\t<!-- The list of items to show. -->\n\t\t<ul>\n\t\t\t<li v-for=\"item in displayedItems\" :key=\"item.id\">\n\t\t\t\t<!-- @slot The default slot can be optionally overridden. It contains the template of one item. -->\n\t\t\t\t<slot name=\"default\" :item=\"item\">\n\t\t\t\t\t<NcDashboardWidgetItem v-bind=\"item\"\n\t\t\t\t\t\t:item-menu=\"itemMenu\"\n\t\t\t\t\t\tv-on=\"handlers\" />\n\t\t\t\t</slot>\n\t\t\t</li>\n\t\t</ul>\n\t\t<!-- While the widget is loading, we show a list of placeholder items. -->\n\t\t<div v-if=\"loading\">\n\t\t\t<div v-for=\"i in 7\" :key=\"i\" class=\"item-list__entry\">\n\t\t\t\t<NcAvatar class=\"item-avatar\" :size=\"44\" />\n\t\t\t\t<div class=\"item__details\">\n\t\t\t\t\t<h3>&nbsp;</h3>\n\t\t\t\t\t<p class=\"message\">\n&nbsp;\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<!-- @slot Slot for showing information in case of an empty item list. -->\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent v-if=\"emptyContentMessage\"\n\t\t\t\t:description=\"emptyContentMessage\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<!-- @slot The icon to show in the empty content area. -->\n\t\t\t\t\t<slot name=\"emptyContentIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</slot>\n\t\t<!-- A \"show more\" link, e.g. to navigate to the main app belonging to this widget. -->\n\t\t<a v-else-if=\"showMore\"\n\t\t\t:href=\"showMoreUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tclass=\"more\"\n\t\t\ttabindex=\"0\">\n\t\t\t{{ showMoreLabel }}\n\t\t</a>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.js'\n\nimport Check from 'vue-material-design-icons/Check.vue'\n\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcDashboardWidget',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcDashboardWidgetItem,\n\t\tNcEmptyContent,\n\t\tCheck,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * An array containing the items to show (specific structure must be respected,\n\t\t * except if you override item rendering in the default slot).\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => { return [] },\n\t\t},\n\t\t/**\n\t\t * If this is set, a \"show more\" text is displayed on the widget's bottom.\n\t\t * It's a link pointing to this URL.\n\t\t */\n\t\tshowMoreUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text of show more button.\n\t\t *\n\t\t * Expected to be in the form \"More {itemName} …\"\n\t\t */\n\t\tshowMoreLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('More items …'),\n\t\t},\n\t\t/**\n\t\t * A boolean to put the widget in a loading state.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each item.\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\t\t/**\n\t\t * Whether both the items and the empty content message are shown.\n\t\t * Usefull for e.g. showing \"No mentions\" and a list of elements.\n\t\t */\n\t\tshowItemsAndEmptyContent: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * The text to show in the empty content area.\n\t\t */\n\t\temptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text to show in the half empty content area.\n\t\t */\n\t\thalfEmptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t// forward menu events to my parent\n\t\thandlers() {\n\t\t\tconst h = {}\n\t\t\tfor (const evName in this.itemMenu) {\n\t\t\t\th[evName] = (it) => {\n\t\t\t\t\tthis.$emit(evName, it)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn h\n\t\t},\n\t\tdisplayedItems() {\n\t\t\tconst nbItems = (this.showMoreUrl && this.items.length >= this.maxItemNumber)\n\t\t\t\t? this.maxItemNumber - 1\n\t\t\t\t: this.maxItemNumber\n\t\t\treturn this.items.slice(0, nbItems)\n\t\t},\n\n\t\tshowHalfEmptyContentArea() {\n\t\t\treturn this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0\n\t\t},\n\n\t\thalfEmptyContentString() {\n\t\t\treturn this.halfEmptyContentMessage || this.emptyContentMessage\n\t\t},\n\n\t\tmaxItemNumber() {\n\t\t\treturn this.showItemsAndEmptyContent ? 5 : 7\n\t\t},\n\n\t\tshowMore() {\n\t\t\treturn this.showMoreUrl && this.items.length >= this.maxItemNumber\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.dashboard-widget :deep(.empty-content) {\n\ttext-align: center;\n\tpadding-top: 5vh;\n\t&.half-screen {\n\t\tpadding-top: 0;\n\t\tmargin-bottom: 1vh;\n\t}\n}\n\n.more {\n\tdisplay: block;\n\ttext-align: center;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: 60px;\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t\tcolor: var(--color-main-text);\n\t}\n}\n\n/* skeleton */\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tpadding: 8px;\n\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-block: auto;\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t.item__details {\n\t\tpadding-inline-start: 8px;\n\t\tmax-height: var(--default-clickable-area);\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 80%;\n\t\t\theight: 15px;\n\t\t\tmargin-top: 5px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_createBlock","_renderSlot","_createVNode","_createCommentVNode","_createElementVNode","_Fragment","_renderList","_mergeProps","_toHandlers","_toDisplayString"],"mappings":";;;;;;;;AA+NA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EACN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS,MAAM;AAAE,eAAO;MAAI;AAAA,IAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,eAAe;AAAA,MACd,MAAM;AAAA,MACN,SAAS,EAAE,cAAc;AAAA,IACzB;AAAA;AAAA;AAAA;AAAA,IAID,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS,MAAM;AAAE,eAAO;MAAI;AAAA,IAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKD,0BAA0B;AAAA,MACzB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,qBAAqB;AAAA,MACpB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,yBAAyB;AAAA,MACxB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,UAAU;AAAA;AAAA,IAET,WAAW;AACV,YAAM,IAAI,CAAA;AACV,iBAAW,UAAU,KAAK,UAAU;AACnC,UAAE,MAAM,IAAI,CAAC,OAAO;AACnB,eAAK,MAAM,QAAQ,EAAE;AAAA,QACtB;AAAA,MACD;AACA,aAAO;AAAA,IACP;AAAA,IACD,iBAAiB;AAChB,YAAM,UAAW,KAAK,eAAe,KAAK,MAAM,UAAU,KAAK,gBAC5D,KAAK,gBAAgB,IACrB,KAAK;AACR,aAAO,KAAK,MAAM,MAAM,GAAG,OAAO;AAAA,IAClC;AAAA,IAED,2BAA2B;AAC1B,aAAO,KAAK,4BAA4B,KAAK,0BAA0B,KAAK,MAAM,WAAW;AAAA,IAC7F;AAAA,IAED,yBAAyB;AACxB,aAAO,KAAK,2BAA2B,KAAK;AAAA,IAC5C;AAAA,IAED,gBAAgB;AACf,aAAO,KAAK,2BAA2B,IAAI;AAAA,IAC3C;AAAA,IAED,WAAW;AACV,aAAO,KAAK,eAAe,KAAK,MAAM,UAAU,KAAK;AAAA,IACrD;AAAA,EACD;AACF;AA7KM,MAAA,aAAA,EAAA,OAAM,mBAAkB;qBA7J9B,KAAA,EAAA;AAAA,MAAA,aAAA,CAAA,MAAA;;;;;;AA6JC,SAAAA,UAAA,GAAAC,mBAsDM,OAtDN,YAsDM;AAAA,IAnDiB,SAAwB,yCAA9CC,YASiB,2BAAA;AAAA,MAzKnB,KAAA;AAAA,MAiKI,aAAa,SAAsB;AAAA,MACpC,OAAM;AAAA;MACK,cAEV,MAEO;AAAA,QAFPC,WAEO,yCAFP,MAEO;AAAA,UADNC,YAAS,gBAAA;AAAA;;MAtKd,GAAA;AAAA,8BAAAC,mBAAA,IAAA,IAAA;AAAA,IA2KEC,mBASK,MAAA,MAAA;AAAA,OARJN,UAAA,IAAA,GAAAC,mBAOKM,UAnLR,MAAAC,WA4KsB,SAAc,gBA5KpC,CA4Kc,SAAI;4BAAfP,mBAOK,MAAA;AAAA,UAP+B,KAAK,KAAK;AAAA;UAE7CE,WAIO,KAJe,QAAA,WAAA,EAAA,KAAU,GAAhC,MAIO;AAAA,YAHNC,YAEmB,kCAFnBK,WAEmB,EAjLxB,SAAA,QA+KoC,MAC7B,EAAA,aAAW,OAAA,YACZC,WAAe,SAAD,QAAA,CAAA,GAAA,MAAA,IAAA,CAAA,WAAA,CAAA;AAAA;;;;IAKP,OAAO,WAAlBV,aAAAC,mBAUM,OAhMR,YAAA;AAAA,OAuLGD,UAAA,GAAAC,mBAQMM,UA/LT,MAAAC,WAuLoB,GAvLpB,CAuLe,MAAC;eAAbF,mBAQM,OAAA;AAAA,UARe,KAAK;AAAA,UAAG,OAAM;AAAA;UAClCF,YAA2C,qBAAA;AAAA,YAAjC,OAAM;AAAA,YAAe,MAAM;AAAA;oCACrCE,mBAKM,OAAA,EALD,OAAM,mBAAe;AAAA,YACzBA,mBAAe,YAAX,GAAM;AAAA,YACVA,mBAEI,KAFD,EAAA,OAAM,aAAU,KAEnB;AAAA;;;UAKc,OAAA,MAAM,WAAM,IAA7BH,WAQO,KAAA,QAAA,iBAAA,EA1MT,KAAA,EAAA,GAkME,MAQO;AAAA,MAPgB,OAAmB,oCAAzCD,YAMiB,2BAAA;AAAA,QAzMpB,KAAA;AAAA,QAoMK,aAAa,OAAmB;AAAA;QACtB,cAEV,MAAgC;AAAA,UAAhCC,WAAgC,KAAA,QAAA,oBAAA,CAAA,GAAA,QAAA,IAAA;AAAA;QAvMrC,GAAA;AAAA,gCAAAE,mBAAA,IAAA,IAAA;AAAA,eA4MgB,SAAQ,yBAAtBJ,mBAMI,KAAA;AAAA,MAlNN,KAAA;AAAA,MA6MI,MAAM,OAAW;AAAA,MAClB,QAAO;AAAA,MACP,OAAM;AAAA,MACN,UAAS;AAAA,IACN,GAAAU,gBAAA,OAAA,aAAa,GAjNnB,GAAA,UAAA,KAAAN,mBAAA,IAAA,IAAA;AAAA;;;"}
+{"version":3,"file":"NcDashboardWidget-CC2pZ6GI.mjs","sources":["../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## Usage\n\n### Simplest example with custom item\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Showing items and a half empty content message\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-items-and-empty-content=\"true\"\n\t\t:half-empty-content-message=\"'No unread items'\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Complete example using NcDashboardWidgetItem\n\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-more-url=\"'https://nextcloud.com'\"\n\t\t:item-menu=\"itemMenu\"\n\t\t@hide=\"onHide\"\n\t\t@markDone=\"onMarkDone\">\n\n\t\t<template #empty-content>\n\t\t\tNothing to display\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tid: '1',\n\t\ttargetUrl: 'https://target.org',\n\t\tavatarUrl: 'https://avatar.url/img.png',\n\t\tavatarUsername: 'Robert',\n\t\tavatarIsNoUser: true,\n\t\toverlayIconUrl: '/svg/core/actions/sound?color=000',\n\t\tmainText: 'First item text',\n\t\tsubText: 'First item subtext',\n\t},\n\t{\n\t\tid: '2',\n\t\ttargetUrl: 'https://other-target.org',\n\t\tavatarUrl: 'https://other-avatar.url/img.png',\n\t\toverlayIconUrl: '/svg/core/actions/add?color=000',\n\t\tmainText: 'Second item text',\n\t\tsubText: 'Second item subtext',\n\t},\n]\nconst myItemMenu = {\n\t// triggers an event named \"markDone\" when clicked\n\t'markDone': {\n\t\ttext: 'Mark as done',\n\t\ticon: 'icon-checkmark',\n\t},\n\t// triggers an event named \"hide\" when clicked\n\t'hide': {\n\t\ttext: 'Hide',\n\t\ticon: 'icon-toggle',\n\t},\n}\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems,\n\t\t\titemMenu: myItemMenu,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tmethods: {\n\t\tonMoreClick() {\n\t\t\tconsole.log('more clicked')\n\t\t\tconst win = window.open('https://wherever.you.want', '_blank')\n\t\t\twin.focus()\n\t\t},\n\t\tonHide(item) {\n\t\t\tconsole.log('user wants to hide item ' + item.id)\n\t\t\t// do what you want\n\t\t},\n\t\tonMarkDone(item) {\n\t\t\tconsole.log('user wants to mark item ' + item.id + ' as done')\n\t\t\t// do what you want\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"dashboard-widget\">\n\t\t<!-- This element is shown if we have items, but want to show a general message as well.\n\t\tCan be used e.g. to show \"No mentions\" on top of the item list. -->\n\t\t<NcEmptyContent v-if=\"showHalfEmptyContentArea\"\n\t\t\t:description=\"halfEmptyContentString\"\n\t\t\tclass=\"half-screen\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot The icon to show in the half empty content area. -->\n\t\t\t\t<slot name=\"halfEmptyContentIcon\">\n\t\t\t\t\t<Check />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t</NcEmptyContent>\n\t\t<!-- The list of items to show. -->\n\t\t<ul>\n\t\t\t<li v-for=\"item in displayedItems\" :key=\"item.id\">\n\t\t\t\t<!-- @slot The default slot can be optionally overridden. It contains the template of one item. -->\n\t\t\t\t<slot name=\"default\" :item=\"item\">\n\t\t\t\t\t<NcDashboardWidgetItem v-bind=\"item\"\n\t\t\t\t\t\t:item-menu=\"itemMenu\"\n\t\t\t\t\t\tv-on=\"handlers\" />\n\t\t\t\t</slot>\n\t\t\t</li>\n\t\t</ul>\n\t\t<!-- While the widget is loading, we show a list of placeholder items. -->\n\t\t<div v-if=\"loading\">\n\t\t\t<div v-for=\"i in 7\" :key=\"i\" class=\"item-list__entry\">\n\t\t\t\t<NcAvatar class=\"item-avatar\" :size=\"44\" />\n\t\t\t\t<div class=\"item__details\">\n\t\t\t\t\t<h3>&nbsp;</h3>\n\t\t\t\t\t<p class=\"message\">\n&nbsp;\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<!-- @slot Slot for showing information in case of an empty item list. -->\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent v-if=\"emptyContentMessage\"\n\t\t\t\t:description=\"emptyContentMessage\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<!-- @slot The icon to show in the empty content area. -->\n\t\t\t\t\t<slot name=\"emptyContentIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</slot>\n\t\t<!-- A \"show more\" link, e.g. to navigate to the main app belonging to this widget. -->\n\t\t<a v-else-if=\"showMore\"\n\t\t\t:href=\"showMoreUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tclass=\"more\"\n\t\t\ttabindex=\"0\">\n\t\t\t{{ showMoreLabel }}\n\t\t</a>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.ts'\n\nimport Check from 'vue-material-design-icons/Check.vue'\n\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcDashboardWidget',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcDashboardWidgetItem,\n\t\tNcEmptyContent,\n\t\tCheck,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * An array containing the items to show (specific structure must be respected,\n\t\t * except if you override item rendering in the default slot).\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => { return [] },\n\t\t},\n\t\t/**\n\t\t * If this is set, a \"show more\" text is displayed on the widget's bottom.\n\t\t * It's a link pointing to this URL.\n\t\t */\n\t\tshowMoreUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text of show more button.\n\t\t *\n\t\t * Expected to be in the form \"More {itemName} …\"\n\t\t */\n\t\tshowMoreLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('More items …'),\n\t\t},\n\t\t/**\n\t\t * A boolean to put the widget in a loading state.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each item.\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\t\t/**\n\t\t * Whether both the items and the empty content message are shown.\n\t\t * Usefull for e.g. showing \"No mentions\" and a list of elements.\n\t\t */\n\t\tshowItemsAndEmptyContent: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * The text to show in the empty content area.\n\t\t */\n\t\temptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text to show in the half empty content area.\n\t\t */\n\t\thalfEmptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t// forward menu events to my parent\n\t\thandlers() {\n\t\t\tconst h = {}\n\t\t\tfor (const evName in this.itemMenu) {\n\t\t\t\th[evName] = (it) => {\n\t\t\t\t\tthis.$emit(evName, it)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn h\n\t\t},\n\t\tdisplayedItems() {\n\t\t\tconst nbItems = (this.showMoreUrl && this.items.length >= this.maxItemNumber)\n\t\t\t\t? this.maxItemNumber - 1\n\t\t\t\t: this.maxItemNumber\n\t\t\treturn this.items.slice(0, nbItems)\n\t\t},\n\n\t\tshowHalfEmptyContentArea() {\n\t\t\treturn this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0\n\t\t},\n\n\t\thalfEmptyContentString() {\n\t\t\treturn this.halfEmptyContentMessage || this.emptyContentMessage\n\t\t},\n\n\t\tmaxItemNumber() {\n\t\t\treturn this.showItemsAndEmptyContent ? 5 : 7\n\t\t},\n\n\t\tshowMore() {\n\t\t\treturn this.showMoreUrl && this.items.length >= this.maxItemNumber\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.dashboard-widget :deep(.empty-content) {\n\ttext-align: center;\n\tpadding-top: 5vh;\n\t&.half-screen {\n\t\tpadding-top: 0;\n\t\tmargin-bottom: 1vh;\n\t}\n}\n\n.more {\n\tdisplay: block;\n\ttext-align: center;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: 60px;\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t\tcolor: var(--color-main-text);\n\t}\n}\n\n/* skeleton */\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tpadding: 8px;\n\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-block: auto;\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t.item__details {\n\t\tpadding-inline-start: 8px;\n\t\tmax-height: var(--default-clickable-area);\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 80%;\n\t\t\theight: 15px;\n\t\t\tmargin-top: 5px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_createBlock","_renderSlot","_createVNode","_createCommentVNode","_createElementVNode","_Fragment","_renderList","_mergeProps","_toHandlers","_toDisplayString"],"mappings":"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"}

package/dist/chunks/{NcDashboardWidgetItem-7RXY5EKJ.mjs → NcDashboardWidgetItem-BsHwLKh3.mjs}

@@ -1,7 +1,7 @@
 import '../assets/NcDashboardWidgetItem-B8_6-_k8.css';
-import { N as NcAvatar } from "./NcAvatar-CA8y4d-c.mjs";
-import { N as NcActions } from "./NcActions-CgKHXNbF.mjs";
-import { N as NcActionButton } from "./NcActionButton-BdQ_qmvW.mjs";
+import { N as NcAvatar } from "./NcAvatar-Cg9PDzho.mjs";
+import { N as NcActions } from "./NcActions-2UedVnLW.mjs";
+import { N as NcActionButton } from "./NcActionButton-BZEDhdCm.mjs";
 import { resolveComponent, createElementBlock, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot, createCommentVNode, createElementVNode, createVNode, toDisplayString, Fragment, renderList, withModifiers, createTextVNode } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
@@ -195,4 +195,4 @@ const NcDashboardWidgetItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render",
 export {
   NcDashboardWidgetItem as N
 };
-//# sourceMappingURL=NcDashboardWidgetItem-7RXY5EKJ.mjs.map
+//# sourceMappingURL=NcDashboardWidgetItem-BsHwLKh3.mjs.map

package/dist/chunks/{NcDashboardWidgetItem-7RXY5EKJ.mjs.map → NcDashboardWidgetItem-BsHwLKh3.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDashboardWidgetItem-7RXY5EKJ.mjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component is meant to be used inside a DashboardWidget component.\n\n</docs>\n\n<template>\n\t<div @mouseover=\"hovered = true\" @mouseleave=\"hovered = false\">\n\t\t<component :is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl || undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\t:class=\"{ 'item-list__entry': true, 'item-list__entry--has-actions-menu': gotMenu }\"\n\t\t\t@click=\"onLinkClick\">\n\t\t\t<!-- @slot Slot for passing a user avatar. -->\n\t\t\t<slot name=\"avatar\" :avatar-url=\"avatarUrl\" :avatar-username=\"avatarUsername\">\n\t\t\t\t<NcAvatar class=\"item-avatar\"\n\t\t\t\t\t:size=\"44\"\n\t\t\t\t\t:url=\"avatarUrl\"\n\t\t\t\t\t:user=\"avatarUsername\"\n\t\t\t\t\t:is-no-user=\"avatarIsNoUser\"\n\t\t\t\t\t:show-user-status=\"!gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img v-if=\"overlayIconUrl\"\n\t\t\t\tclass=\"item-icon\"\n\t\t\t\talt=\"\"\n\t\t\t\t:src=\"overlayIconUrl\">\n\t\t\t<div class=\"item__details\">\n\t\t\t\t<h3 :title=\"mainText\">\n\t\t\t\t\t{{ mainText }}\n\t\t\t\t</h3>\n\t\t\t\t<span v-if=\"subText !== ''\" class=\"message\" :title=\"subText\">\n\t\t\t\t\t{{ subText }}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<NcActions v-if=\"gotMenu\" :force-menu=\"forceMenu\">\n\t\t\t\t<!-- @slot This slot can be used to provide actions for each dashboard widget item. -->\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcActionButton v-for=\"(m, menuItemId) in itemMenu\"\n\t\t\t\t\t\t:key=\"menuItemId\"\n\t\t\t\t\t\t:icon=\"m.icon\"\n\t\t\t\t\t\t:close-after-click=\"true\"\n\t\t\t\t\t\t@click.prevent.stop=\"$emit(menuItemId, item)\">\n\t\t\t\t\t\t{{ m.text }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</slot>\n\t\t\t</NcActions>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\n\nexport default {\n\tname: 'NcDashboardWidgetItem',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The item id (optional)\n\t\t */\n\t\tid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * The item element is a link to this URL (optional)\n\t\t */\n\t\ttargetUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Where to get the avatar image. (optional) Used if avatarUsername is not defined.\n\t\t */\n\t\tavatarUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.\n\t\t */\n\t\tavatarUsername: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Is the avatarUsername not a user's name? (optional, false by default)\n\t\t */\n\t\tavatarIsNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Small icon to display on the bottom-right corner of the avatar (optional)\n\t\t */\n\t\toverlayIconUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Item main text (mandatory)\n\t\t */\n\t\tmainText: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Item subline text (optional)\n\t\t */\n\t\tsubText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each items (optional)\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\n\t\t/**\n\t\t * Specify whether the 3 dot menu is forced when only one action is present\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titem() {\n\t\t\treturn {\n\t\t\t\tid: this.id,\n\t\t\t\ttargetUrl: this.targetUrl,\n\t\t\t\tavatarUrl: this.avatarUrl,\n\t\t\t\tavatarUsername: this.avatarUsername,\n\t\t\t\toverlayIconUrl: this.overlayIconUrl,\n\t\t\t\tmainText: this.mainText,\n\t\t\t\tsubText: this.subText,\n\t\t\t}\n\t\t},\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions\n\t\t},\n\t\tgotOverlayIcon() {\n\t\t\treturn this.overlayIconUrl && this.overlayIconUrl !== ''\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonLinkClick(event) {\n\t\t\tif (event.target.closest('.action-item')) {\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: center;\n\tposition: relative;\n\tpadding: 8px;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t}\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t.item__details {\n\t\tpadding-inline-start: 8px;\n\t\tmax-height: fit-content;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-height: var(--default-clickable-area);\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.message span {\n\t\t\twidth: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-bottom: -3px;\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 100%;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t.item-icon {\n\t\tposition: relative;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tmargin-top: 25px;\n\t\tmargin-inline: -10px -2px;\n\t}\n\n\tbutton.primary {\n\t\tpadding: 21px;\n\t\tmargin: 0;\n\t}\n}\n/*\n.content-popover {\n\theight: 0px;\n\twidth: 0px;\n\tmargin-inline: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":["_createElementBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_renderSlot","_createVNode","_createCommentVNode","_createElementVNode","_toDisplayString","_openBlock","_Fragment","_renderList","_withModifiers","_createTextVNode"],"mappings":"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"}
+{"version":3,"file":"NcDashboardWidgetItem-BsHwLKh3.mjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component is meant to be used inside a DashboardWidget component.\n\n</docs>\n\n<template>\n\t<div @mouseover=\"hovered = true\" @mouseleave=\"hovered = false\">\n\t\t<component :is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl || undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\t:class=\"{ 'item-list__entry': true, 'item-list__entry--has-actions-menu': gotMenu }\"\n\t\t\t@click=\"onLinkClick\">\n\t\t\t<!-- @slot Slot for passing a user avatar. -->\n\t\t\t<slot name=\"avatar\" :avatar-url=\"avatarUrl\" :avatar-username=\"avatarUsername\">\n\t\t\t\t<NcAvatar class=\"item-avatar\"\n\t\t\t\t\t:size=\"44\"\n\t\t\t\t\t:url=\"avatarUrl\"\n\t\t\t\t\t:user=\"avatarUsername\"\n\t\t\t\t\t:is-no-user=\"avatarIsNoUser\"\n\t\t\t\t\t:show-user-status=\"!gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img v-if=\"overlayIconUrl\"\n\t\t\t\tclass=\"item-icon\"\n\t\t\t\talt=\"\"\n\t\t\t\t:src=\"overlayIconUrl\">\n\t\t\t<div class=\"item__details\">\n\t\t\t\t<h3 :title=\"mainText\">\n\t\t\t\t\t{{ mainText }}\n\t\t\t\t</h3>\n\t\t\t\t<span v-if=\"subText !== ''\" class=\"message\" :title=\"subText\">\n\t\t\t\t\t{{ subText }}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<NcActions v-if=\"gotMenu\" :force-menu=\"forceMenu\">\n\t\t\t\t<!-- @slot This slot can be used to provide actions for each dashboard widget item. -->\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcActionButton v-for=\"(m, menuItemId) in itemMenu\"\n\t\t\t\t\t\t:key=\"menuItemId\"\n\t\t\t\t\t\t:icon=\"m.icon\"\n\t\t\t\t\t\t:close-after-click=\"true\"\n\t\t\t\t\t\t@click.prevent.stop=\"$emit(menuItemId, item)\">\n\t\t\t\t\t\t{{ m.text }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</slot>\n\t\t\t</NcActions>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\n\nexport default {\n\tname: 'NcDashboardWidgetItem',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The item id (optional)\n\t\t */\n\t\tid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * The item element is a link to this URL (optional)\n\t\t */\n\t\ttargetUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Where to get the avatar image. (optional) Used if avatarUsername is not defined.\n\t\t */\n\t\tavatarUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.\n\t\t */\n\t\tavatarUsername: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Is the avatarUsername not a user's name? (optional, false by default)\n\t\t */\n\t\tavatarIsNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Small icon to display on the bottom-right corner of the avatar (optional)\n\t\t */\n\t\toverlayIconUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Item main text (mandatory)\n\t\t */\n\t\tmainText: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Item subline text (optional)\n\t\t */\n\t\tsubText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each items (optional)\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\n\t\t/**\n\t\t * Specify whether the 3 dot menu is forced when only one action is present\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titem() {\n\t\t\treturn {\n\t\t\t\tid: this.id,\n\t\t\t\ttargetUrl: this.targetUrl,\n\t\t\t\tavatarUrl: this.avatarUrl,\n\t\t\t\tavatarUsername: this.avatarUsername,\n\t\t\t\toverlayIconUrl: this.overlayIconUrl,\n\t\t\t\tmainText: this.mainText,\n\t\t\t\tsubText: this.subText,\n\t\t\t}\n\t\t},\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions\n\t\t},\n\t\tgotOverlayIcon() {\n\t\t\treturn this.overlayIconUrl && this.overlayIconUrl !== ''\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonLinkClick(event) {\n\t\t\tif (event.target.closest('.action-item')) {\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: center;\n\tposition: relative;\n\tpadding: 8px;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t}\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t.item__details {\n\t\tpadding-inline-start: 8px;\n\t\tmax-height: fit-content;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-height: var(--default-clickable-area);\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.message span {\n\t\t\twidth: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-bottom: -3px;\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 100%;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t.item-icon {\n\t\tposition: relative;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tmargin-top: 25px;\n\t\tmargin-inline: -10px -2px;\n\t}\n\n\tbutton.primary {\n\t\tpadding: 21px;\n\t\tmargin: 0;\n\t}\n}\n/*\n.content-popover {\n\theight: 0px;\n\twidth: 0px;\n\tmargin-inline: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":["_createElementBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_renderSlot","_createVNode","_createCommentVNode","_createElementVNode","_toDisplayString","_openBlock","_Fragment","_renderList","_withModifiers","_createTextVNode"],"mappings":"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"}

package/dist/chunks/{NcDateTime.vue_vue_type_script_setup_true_lang-DtP-oauZ.mjs → NcDateTime.vue_vue_type_script_setup_true_lang-CKX0mNnP.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, toRef, createElementBlock, openBlock, toDisplayString, unref } from "vue";
-import { u as useFormatDateTime } from "./useFormatDateTime-B5sWtJdj.mjs";
+import { u as useFormatDateTime } from "./useFormatDateTime-lk3QDXbQ.mjs";
 const _hoisted_1 = ["data-timestamp", "title", "textContent"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcDateTime",
@@ -28,4 +28,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as _
 };
-//# sourceMappingURL=NcDateTime.vue_vue_type_script_setup_true_lang-DtP-oauZ.mjs.map
+//# sourceMappingURL=NcDateTime.vue_vue_type_script_setup_true_lang-CKX0mNnP.mjs.map

package/dist/chunks/{NcDateTime.vue_vue_type_script_setup_true_lang-DtP-oauZ.mjs.map → NcDateTime.vue_vue_type_script_setup_true_lang-CKX0mNnP.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDateTime.vue_vue_type_script_setup_true_lang-DtP-oauZ.mjs","sources":["../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 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 purpose is to display a timestamp in the users local time format.\nIt also supports relative time, for examples *6 seconds ago*.\n\n#### Standard usage\n\nWithout any optional parameters the timestamp is displayed as a relative datetime and a title with the full date is added.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Ignore seconds\n\nIf you do not want the seconds to be counted up until minutes are reached you can simply use the `ignore-seconds` property.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" :ignore-seconds=\"true\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Custom date or time format\n\nThe component allows to format the full date for the title by settings the `format` property.\nIt is also possible to disable relative time by setting the `relativeTime` property to `false`.\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Short relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" relative-time=\"short\" />\n\n\t\t<h4>Custom title format</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" />\n\n\t\t<h4>Without relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" :relative-time=\"false\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t/** For allowed formats see the Intl.DateTimeFormat options */\n\t\t\t\ttimeFormat: {\n\t\t\t\t\tdateStyle: 'short',\n\t\t\t\t\ttimeStyle: 'full'\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style>\nh4 {\n\tfont-weight: bold;\n\tmargin-top: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span class=\"nc-datetime\"\n\t\t:data-timestamp=\"timestamp\"\n\t\t:title=\"formattedFullTime\"\n\t\tv-text=\"formattedTime\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { toRef } from 'vue'\nimport { useFormatDateTime } from '../../composables/useFormatDateTime.ts'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object\n\t */\n\ttimestamp: Date | number\n\n\t/**\n\t * The format used for displaying, or if relative time is used the format used for the title (optional)\n\t */\n\tformat?: Intl.DateTimeFormatOptions\n\n\t/**\n\t * Wether to display the timestamp as time from now (optional)\n\t *\n\t * - `false`: Disable relative time\n\t * - `'long'`: Long text, like *2 seconds ago* (default)\n\t * - `'short'`: Short text, like *2 sec. ago*\n\t * - `'narrow'`: Even shorter text (same as `'short'` on some languages)\n\t */\n\trelativeTime?: false | 'long' | 'short' | 'narrow'\n\n\t/**\n\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t */\n\tignoreSeconds?: boolean\n}>(), {\n\tformat: () => ({ timeStyle: 'medium', dateStyle: 'short' }),\n\trelativeTime: 'long',\n})\n\nconst {\n\tformattedTime,\n\tformattedFullTime,\n} = useFormatDateTime(toRef(() => props.timestamp), props)\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;AAsGA,UAAM,QAAQ;AA8BR,UAAA;AAAA,MACL;AAAA,MACA;AAAA,IAAA,IACG,kBAAkB,MAAM,MAAM,MAAM,SAAS,GAAG,KAAK;;;;;;;;;;;"}
+{"version":3,"file":"NcDateTime.vue_vue_type_script_setup_true_lang-CKX0mNnP.mjs","sources":["../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 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 purpose is to display a timestamp in the users local time format.\nIt also supports relative time, for examples *6 seconds ago*.\n\n#### Standard usage\n\nWithout any optional parameters the timestamp is displayed as a relative datetime and a title with the full date is added.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Ignore seconds\n\nIf you do not want the seconds to be counted up until minutes are reached you can simply use the `ignore-seconds` property.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" :ignore-seconds=\"true\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Custom date or time format\n\nThe component allows to format the full date for the title by settings the `format` property.\nIt is also possible to disable relative time by setting the `relativeTime` property to `false`.\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Short relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" relative-time=\"short\" />\n\n\t\t<h4>Custom title format</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" />\n\n\t\t<h4>Without relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" :relative-time=\"false\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t/** For allowed formats see the Intl.DateTimeFormat options */\n\t\t\t\ttimeFormat: {\n\t\t\t\t\tdateStyle: 'short',\n\t\t\t\t\ttimeStyle: 'full'\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style>\nh4 {\n\tfont-weight: bold;\n\tmargin-top: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span class=\"nc-datetime\"\n\t\t:data-timestamp=\"timestamp\"\n\t\t:title=\"formattedFullTime\"\n\t\tv-text=\"formattedTime\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { toRef } from 'vue'\nimport { useFormatDateTime } from '../../composables/useFormatDateTime.ts'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object\n\t */\n\ttimestamp: Date | number\n\n\t/**\n\t * The format used for displaying, or if relative time is used the format used for the title (optional)\n\t */\n\tformat?: Intl.DateTimeFormatOptions\n\n\t/**\n\t * Wether to display the timestamp as time from now (optional)\n\t *\n\t * - `false`: Disable relative time\n\t * - `'long'`: Long text, like *2 seconds ago* (default)\n\t * - `'short'`: Short text, like *2 sec. ago*\n\t * - `'narrow'`: Even shorter text (same as `'short'` on some languages)\n\t */\n\trelativeTime?: false | 'long' | 'short' | 'narrow'\n\n\t/**\n\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t */\n\tignoreSeconds?: boolean\n}>(), {\n\tformat: () => ({ timeStyle: 'medium', dateStyle: 'short' }),\n\trelativeTime: 'long',\n})\n\nconst {\n\tformattedTime,\n\tformattedFullTime,\n} = useFormatDateTime(toRef(() => props.timestamp), props)\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;AAsGA,UAAM,QAAQ;AA8BR,UAAA;AAAA,MACL;AAAA,MACA;AAAA,IAAA,IACG,kBAAkB,MAAM,MAAM,MAAM,SAAS,GAAG,KAAK;;;;;;;;;;;"}

package/dist/chunks/{NcDateTimePicker-BzfuHym4.mjs → NcDateTimePicker-BM9F_PSI.mjs}

@@ -1,29 +1,29 @@
-import '../assets/NcDateTimePicker-AIJmp5dC.css';
+import '../assets/NcDateTimePicker-pmbCzZnb.css';
 import { defineComponent, mergeModels, useModel, computed, createBlock, openBlock, unref, mergeProps, createSlots, withCtx, createVNode } from "vue";
 import { m as mdiChevronUp, a as mdiChevronDown, b as mdiChevronRight, c as mdiChevronLeft, d as mdiClock, e as mdiClose, f as mdiCalendarBlank } from "./mdi-zYpVOORa.mjs";
-import { getDayNamesMin, getFirstDay, getDayNames, getCanonicalLocale } from "@nextcloud/l10n";
-import { r as register, a as t } from "./_l10n-7kR7gXFc.mjs";
+import { getCanonicalLocale, getDayNamesMin, getFirstDay, getDayNames } from "@nextcloud/l10n";
+import { r as register, a as t } from "./_l10n-dinIMiE_.mjs";
 import VueDatePicker from "@vuepic/vue-datepicker";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BYTrkA66.mjs";
-import { N as NcTimezonePicker } from "./NcTimezonePicker-CMoUk4sZ.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-DZBRQNfG.mjs";
+import { _ as _sfc_main$1 } from "./NcTimezonePicker.vue_vue_type_script_setup_true_lang-BK7HxZja.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register();
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcDateTimePicker",
   props: /* @__PURE__ */ mergeModels({
+    appendToBody: { type: Boolean },
     ariaLabel: { default: t("Datepicker input") },
     ariaLabelMenu: { default: t("Datepicker menu") },
     clearable: { type: Boolean },
     confirm: { type: Boolean },
-    minuteStep: { default: 10 },
-    format: { default: void 0 },
+    format: { type: [String, Function], default: void 0 },
     locale: { default: getCanonicalLocale() },
+    minuteStep: { default: 10 },
     modelValue: { default: void 0 },
     placeholder: { default: void 0 },
     showTimezoneSelect: { type: Boolean },
-    type: { default: "date" },
-    appendToBody: { type: Boolean },
-    showWeekNumber: { type: Boolean }
+    showWeekNumber: { type: Boolean },
+    type: { default: "date" }
   }, {
     "timezoneId": { default: "UTC" },
     "timezoneIdModifiers": {}
@@ -35,14 +35,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const value = computed(() => {
       if (props.modelValue === void 0 && props.clearable) {
-        return props.modelValue;
+        return null;
       }
       if (props.type === "week") {
         const date = props.modelValue instanceof Date ? props.modelValue : /* @__PURE__ */ new Date();
         const end = new Date(date);
         end.setUTCDate(date.getUTCDate() + 6);
         return [date, end];
-      } else if (props.type.startsWith("range")) {
+      } else if (props.type === "year") {
+        const date = props.modelValue instanceof Date ? props.modelValue : /* @__PURE__ */ new Date();
+        return date.getUTCFullYear();
+      } else if (props.type === "month") {
+        const date = props.modelValue instanceof Date ? props.modelValue : /* @__PURE__ */ new Date();
+        return { year: date.getUTCFullYear(), month: date.getUTCMonth() };
+      } else if (props.type === "time" || props.type === "time-range") {
+        const time = [props.modelValue ?? (props.type === "time-range" ? [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()] : /* @__PURE__ */ new Date())].flat();
+        if (props.modelValue === void 0 && props.type === "time-range") {
+          time[1].setHours(time[1].getHours() + 1);
+        }
+        const timeValue = time.map((date) => ({
+          hours: date.getHours(),
+          minutes: date.getMinutes(),
+          seconds: date.getSeconds()
+        }));
+        return props.type === "time" ? timeValue[0] : timeValue;
+      } else if (props.type.endsWith("-range")) {
         if (props.modelValue === void 0) {
           const start = /* @__PURE__ */ new Date();
           const end = new Date(start);
@@ -50,12 +67,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           return [start, end];
         }
         return props.modelValue;
-      } else if (props.type === "year") {
-        const date = props.modelValue instanceof Date ? props.modelValue : /* @__PURE__ */ new Date();
-        return date.getUTCFullYear();
-      } else if (props.type === "month") {
-        const date = props.modelValue instanceof Date ? props.modelValue : /* @__PURE__ */ new Date();
-        return { year: date.getUTCFullYear(), month: date.getUTCMonth() };
       }
       return props.modelValue ?? /* @__PURE__ */ new Date();
     });
@@ -72,7 +83,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return t("Select month");
       } else if (props.type === "year") {
         return t("Select year");
-      } else if (props.type.startsWith("range")) {
+      } else if (props.type.endsWith("-range")) {
         return t("Select time range");
       }
       return t("Select date and time");
@@ -80,39 +91,70 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const realFormat = computed(() => {
       if (props.format) {
         return props.format;
-      } else if (props.type === "datetime" || props.type === "range-datetime") {
-        return "yyyy-MM-dd HH:mm";
-      } else if (props.type === "date" || props.type === "range") {
-        return "yyyy-MM-dd";
       } else if (props.type === "week") {
         return "RR-II";
+      }
+      let formatter;
+      if (props.type === "date" || props.type === "date-range") {
+        formatter = new Intl.DateTimeFormat(getCanonicalLocale(), { dateStyle: "medium" });
+      } else if (props.type === "time" || props.type === "time-range") {
+        formatter = new Intl.DateTimeFormat(getCanonicalLocale(), { timeStyle: "short" });
+      } else if (props.type === "datetime" || props.type === "datetime-range") {
+        formatter = new Intl.DateTimeFormat(getCanonicalLocale(), { dateStyle: "medium", timeStyle: "short" });
       } else if (props.type === "month") {
-        return "yyyy-MM";
+        formatter = new Intl.DateTimeFormat(getCanonicalLocale(), { year: "numeric", month: "2-digit" });
       } else if (props.type === "year") {
-        return "yyyy";
+        formatter = new Intl.DateTimeFormat(getCanonicalLocale(), { year: "numeric" });
+      }
+      if (formatter) {
+        return (input) => Array.isArray(input) ? formatter.formatRange(input[0], input[1]) : formatter.format(input);
       }
       return void 0;
     });
     const pickerType = computed(() => ({
-      timePicker: props.type === "time",
+      timePicker: props.type === "time" || props.type === "time-range",
       yearPicker: props.type === "year",
       monthPicker: props.type === "month",
       weekPicker: props.type === "week",
-      range: props.type.startsWith("range"),
-      enableTimePicker: !(props.type === "date" || props.type === "range"),
+      range: props.type.endsWith("-range") && {
+        // do not use partial ranges (meaning after selecting the start [Date, null] will be emitted)
+        // if this is needed someday we can enable it,
+        // but its not covered by our component interface (props / events) documentation so just disabled for now.
+        partialRange: false
+      },
+      enableTimePicker: !(props.type === "date" || props.type === "date-range"),
       flow: props.type === "datetime" ? ["calendar", "time"] : void 0
     }));
     function onUpdateModelValue(value2) {
-      let date = value2;
-      if (props.type === "month") {
+      if (value2 === null) {
+        return emit("update:modelValue", null);
+      }
+      if (props.type === "time") {
+        emit("update:modelValue", formatLibraryTime(value2));
+      } else if (props.type === "time-range") {
+        const start = formatLibraryTime(value2[0]);
+        const end = formatLibraryTime(value2[1]);
+        if (end.getTime() < start.getTime()) {
+          end.setDate(end.getDate() + 1);
+        }
+        emit("update:modelValue", [start, end]);
+      } else if (props.type === "month") {
         const data = value2;
-        date = new Date(data.year, data.month, 1);
+        emit("update:modelValue", new Date(data.year, data.month, 1));
       } else if (props.type === "year") {
-        date = new Date(value2, 0);
+        emit("update:modelValue", new Date(value2, 0));
       } else if (props.type === "week") {
-        date = value2[0];
+        emit("update:modelValue", value2[0]);
+      } else {
+        emit("update:modelValue", value2);
       }
-      emit("update:modelValue", date);
+    }
+    function formatLibraryTime(time) {
+      const date = /* @__PURE__ */ new Date();
+      date.setHours(time.hours);
+      date.setMinutes(time.minutes);
+      date.setSeconds(time.seconds);
+      return date;
     }
     const dayNames = getDayNamesMin();
     const weekStart = getFirstDay();
@@ -236,7 +278,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         _ctx.showTimezoneSelect ? {
           name: "action-extra",
           fn: withCtx(() => [
-            createVNode(NcTimezonePicker, {
+            createVNode(_sfc_main$1, {
               modelValue: timezoneId.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => timezoneId.value = $event),
               class: "vue-date-time-picker__timezone",
@@ -250,8 +292,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcDateTimePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-eeb02d1e"]]);
+const NcDateTimePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-629e70a5"]]);
 export {
   NcDateTimePicker as N
 };
-//# sourceMappingURL=NcDateTimePicker-BzfuHym4.mjs.map
+//# sourceMappingURL=NcDateTimePicker-BM9F_PSI.mjs.map

package/dist/chunks/NcDateTimePicker-BM9F_PSI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDateTimePicker-BM9F_PSI.mjs","sources":["../../src/components/NcDateTimePicker/NcDateTimePicker.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nIn general it is recommended to use the native date picker (see `NcDateTimePickerNative` which is based on `<input type=\"date\">`).\nBut some use cases are not covered by the native date selector, like selecting ranges or selecting a timezone.\nFor those cases this component can be used.\n\n### General examples\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<fieldset class=\"type-select\">\n\t\t\t<legend>Picker mode</legend>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"date\">Date</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"datetime\">Date and time</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"week\">Week</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"month\">Month</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"year\">Year</NcCheckboxRadioSwitch>\n\t\t</fieldset>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\t:type />\n\t\t<span>{{ time }}</span>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttype: 'date',\n\t\t\ttime: new Date('2022-10-10 10:10:10'),\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.type-select {\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: wrap;\n}\n</style>\n```\n\n### Example with confirm button\n\nBy default the date is applied as soon as you select the day in the calendar.\nSometimes - especially when selecting date and time - it is required to only emit the selected date when the flow is finished.\nFor this the `confirm` prop can be used, this will add a confirmation button to the selector.\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\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\nThe most common use case for the `NcDateTimePicker` is picking a range, as this is not supported by the native date picker.\n\nWhen selecting the range picker type, the model value type will change from `Date` to `[Date, Date]`.\nMeaning an array with two dates is used, the first date is the range start and the second date is the range end.\n\n```vue\n<template>\n\t<div>\n\t\t<fieldset class=\"type-select\">\n\t\t\t<legend>Picker mode</legend>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"date-range\">Date</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"time-range\">Time</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"datetime-range\">Date and time</NcCheckboxRadioSwitch>\n\t\t</fieldset>\n\n\t\t<NcDateTimePicker\n\t\t\t:key=\"type\"\n\t\t\tv-model=\"time\"\n\t\t\t:type />\n\t\t<div>\n\t\t\t<div>Start: {{ formatDate(time[0]) }}</div>\n\t\t\t<div>End: {{ formatDate(time[1]) }}</div>\n\t\t</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttime: [new Date(2025, 3, 18, 12, 30), new Date(2025, 3, 21, 13, 30)],\n\t\t\ttype: 'date-range',\n\t\t}\n\t},\n\tmethods: {\n\t\tformatDate(date) {\n\t\t\tconst dateString = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`\n\t\t\tconst timeString = `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`\n\t\t\tif (this.type === 'date-range') {\n\t\t\t\treturn dateString\n\t\t\t} else if (this.type === 'time-range') {\n\t\t\t\treturn timeString\n\t\t\t}\n\t\t\treturn `${dateString} ${timeString}`\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.type-select {\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: wrap;\n}\n</style>\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\tshow-timezone-select\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<script setup lang=\"ts\">\nimport type {\n\t// The emitted object for time picker\n\tTimeObj as LibraryTimeObject,\n\t// The accepted model value\n\tModelValue as LibraryModelValue,\n\tVueDatePickerProps,\n} from '@vuepic/vue-datepicker'\n\nimport {\n\tmdiCalendarBlank,\n\tmdiChevronDown,\n\tmdiChevronLeft,\n\tmdiChevronRight,\n\tmdiChevronUp,\n\tmdiClock,\n\tmdiClose,\n} from '@mdi/js'\nimport {\n\tgetFirstDay,\n\tgetDayNames,\n\tgetDayNamesMin,\n\tgetCanonicalLocale,\n} from '@nextcloud/l10n'\nimport { computed } from 'vue'\nimport { t } from '../../l10n.js'\n\nimport VueDatePicker from '@vuepic/vue-datepicker'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcTimezonePicker from '../NcTimezonePicker/NcTimezonePicker.vue'\n\ntype LibraryFormatOptions = VueDatePickerProps['format']\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * If set to true the menu will be placed on the `<body>`\n\t * instead of default placement on the picker.\n\t */\n\tappendToBody?: boolean\n\n\t/**\n\t * Aria label for the input box.\n\t *\n\t * @default 'Datepicker input'\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * Aria label for the date picker menu.\n\t *\n\t * @default 'Datepicker menu'\n\t */\n\tariaLabelMenu?: string\n\n\t/**\n\t * Allow to clear the input.\n\t *\n\t * @default false\n\t */\n\tclearable?: boolean\n\n\t/**\n\t * Do not auto-apply the date but require clicking the confirmation button.\n\t * @default false\n\t */\n\tconfirm?: boolean\n\n\t/**\n\t * Preview format for the picker input field.\n\t * Can either be a string of Unicode tokens or a function that takes a Date object\n\t * or for range picker an array of two dates, and returns the formatted date as string.\n\t *\n\t * @default Intl.DateTimeFormat is used to format dates and times\n\t * @see https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table\n\t */\n\tformat?: string | ((date: Date) => string) | ((dates: [Date, Date]) => string)\n\n\t/**\n\t * The locale to use for formatting the shown dates.\n\t * By default the users current Nextcloud locale is used.\n\t */\n\tlocale?: string\n\n\t/**\n\t * Default increment step for minutes in the time picker.\n\t * @default 10\n\t */\n\tminuteStep?: number\n\n\t/**\n\t * The value to initialize, but also two-way bind the selected date. The date is – like the `Date` object in\n\t * JavaScript – tied to UTC. The selected time zone does not have an influence of the selected time and date\n\t * value. You have to translate the time yourself when you want to factor in time zones.\n\t *\n\t * When using the range picker then an array containing the start and end date needs to be passed.\n\t */\n\tmodelValue?: Date | [Date, Date]\n\n\t/**\n\t * Optional custom placeholder for the input box.\n\t */\n\tplaceholder?: string\n\n\t/**\n\t * Include a timezone picker within the menu.\n\t * Please note that the dates are still bound to the locale timezone\n\t * and any conversion needs to be done by the app itself.\n\t *\n\t * @default false\n\t */\n\tshowTimezoneSelect?: boolean\n\n\t/**\n\t * Show the ISO week numbers within the calendar.\n\t *\n\t * @default false\n\t */\n\tshowWeekNumber?: boolean\n\n\t/**\n\t * Type of the picker.\n\t * There is some special handling for ranges as those types require a `[Date, Date]` model value.\n\t * - The 'date-range' type will enable a range picker for dates\n\t * - The 'time-range' allows picking a time range.\n\t * - The 'datetime-range' allows picking dates with times assigned.\n\t *\n\t * @default 'date'\n\t */\n\ttype?: 'date' | 'datetime' | 'time' | 'week' | 'month' | 'year' | 'date-range' | 'time-range' | 'datetime-range'\n}>(), {\n\tariaLabel: t('Datepicker input'),\n\tariaLabelMenu: t('Datepicker menu'),\n\tformat: undefined,\n\tlocale: getCanonicalLocale(),\n\tminuteStep: 10,\n\ttimezoneId: 'UTC',\n\tmodelValue: undefined,\n\t// set by fallbackPlaceholder\n\tplaceholder: undefined,\n\ttype: 'date',\n})\n\n/**\n * The preselected IANA time zone ID for the time zone picker,\n * only relevant in combination with `show-timezone-select`.\n * The prop supports two-way binding through v-model directive.\n *\n * @example `Europe/Berlin`\n * @default 'UTC'\n */\nconst timezoneId = defineModel<string>('timezoneId', { default: 'UTC' })\n\nconst emit = defineEmits<{\n\t/**\n\t * If range picker is enabled then an array containing start and end date are emitted.\n\t * Otherwise the selected date is emitted.\n\t * `null` is emitted if `clearable` is set to `true` and the value was cleared.\n\t */\n\t'update:modelValue': [Date | [Date, Date] | null]\n\t'update:timezoneId': [string]\n}>()\n\n/**\n * Mapping of the model-value prop to the format expected by the library.\n * We do not directly pass the prop and adjust the interface to not transparently wrap the library.\n * This has show as beeing a pain in the past when we need to switch underlying libraries.\n */\nconst value = computed<LibraryModelValue>(() => {\n\tif (props.modelValue === undefined && props.clearable) {\n\t\treturn null\n\t}\n\n\tif (props.type === 'week') {\n\t\tconst date = props.modelValue instanceof Date ? props.modelValue : new Date()\n\t\tconst end = new Date(date)\n\t\tend.setUTCDate(date.getUTCDate() + 6)\n\t\treturn [date, end]\n\t} else if (props.type === 'year') {\n\t\tconst date = props.modelValue instanceof Date ? props.modelValue : new Date()\n\t\treturn date.getUTCFullYear()\n\t} else if (props.type === 'month') {\n\t\tconst date = props.modelValue instanceof Date ? props.modelValue : new Date()\n\t\treturn { year: date.getUTCFullYear(), month: date.getUTCMonth() }\n\t} else if (props.type === 'time' || props.type === 'time-range') {\n\t\tconst time = [props.modelValue ?? (props.type === 'time-range' ? [new Date(), new Date()] : new Date())].flat()\n\t\t// default time range is 1 hour\n\t\tif (props.modelValue === undefined && props.type === 'time-range') {\n\t\t\ttime[1].setHours(time[1].getHours() + 1)\n\t\t}\n\t\tconst timeValue = time.map((date) => ({\n\t\t\thours: date.getHours(),\n\t\t\tminutes: date.getMinutes(),\n\t\t\tseconds: date.getSeconds(),\n\t\t} as LibraryTimeObject))\n\t\treturn props.type === 'time' ? timeValue[0] : timeValue\n\t} else if (props.type.endsWith('-range')) {\n\t\tif (props.modelValue === undefined) {\n\t\t\tconst start = new Date()\n\t\t\tconst end = new Date(start)\n\t\t\tend.setUTCDate(start.getUTCDate() + 7)\n\t\t\treturn [start, end]\n\t\t}\n\t\treturn props.modelValue\n\t}\n\n\t// no special handling for other types needed\n\treturn props.modelValue ?? new Date()\n})\n\nconst placeholderFallback = computed(() => {\n\tif (props.type === 'date') {\n\t\treturn t('Select date')\n\t} else if (props.type === 'time') {\n\t\treturn t('Select time')\n\t} else if (props.type === 'datetime') {\n\t\treturn t('Select date and time')\n\t} else if (props.type === 'week') {\n\t\treturn t('Select week')\n\t} else if (props.type === 'month') {\n\t\treturn t('Select month')\n\t} else if (props.type === 'year') {\n\t\treturn t('Select year')\n\t} else if (props.type.endsWith('-range')) {\n\t\treturn t('Select time range')\n\t}\n\t// should not be reached\n\treturn t('Select date and time')\n})\n\n/**\n * The date (time) formatting to be used by the library.\n * We use the provided format if possible, otherwise we provide a formatting function\n * which uses the browsers Intl API to format the date / time in the current users locale.\n */\nconst realFormat = computed<LibraryFormatOptions>(() => {\n\tif (props.format) {\n\t\t// we can cast the type here as in this case its either string\n\t\t// function `(Date) => string` or `([Date, Date]) => string` where we cast to `(Date[]) => string` here.\n\t\treturn props.format as LibraryFormatOptions\n\t} else if (props.type === 'week') {\n\t\t// cannot format weeks with Intl.\n\t\treturn 'RR-II'\n\t}\n\n\tlet formatter: Intl.DateTimeFormat | undefined\n\tif (props.type === 'date' || props.type === 'date-range') {\n\t\tformatter = new Intl.DateTimeFormat(getCanonicalLocale(), { dateStyle: 'medium' })\n\t} else if (props.type === 'time' || props.type === 'time-range') {\n\t\tformatter = new Intl.DateTimeFormat(getCanonicalLocale(), { timeStyle: 'short' })\n\t} else if (props.type === 'datetime' || props.type === 'datetime-range') {\n\t\tformatter = new Intl.DateTimeFormat(getCanonicalLocale(), { dateStyle: 'medium', timeStyle: 'short' })\n\t} else if (props.type === 'month') {\n\t\tformatter = new Intl.DateTimeFormat(getCanonicalLocale(), { year: 'numeric', month: '2-digit' })\n\t} else if (props.type === 'year') {\n\t\tformatter = new Intl.DateTimeFormat(getCanonicalLocale(), { year: 'numeric' })\n\t}\n\n\tif (formatter) {\n\t\treturn (input: Date | [Date, Date]) => Array.isArray(input)\n\t\t\t? formatter.formatRange(input[0], input[1])\n\t\t\t: formatter.format(input)\n\t}\n\n\t// fallback to default formatting\n\treturn undefined\n})\n\nconst pickerType = computed(() => ({\n\ttimePicker: props.type === 'time' || props.type === 'time-range',\n\tyearPicker: props.type === 'year',\n\tmonthPicker: props.type === 'month',\n\tweekPicker: props.type === 'week',\n\trange: props.type.endsWith('-range') && {\n\t\t// do not use partial ranges (meaning after selecting the start [Date, null] will be emitted)\n\t\t// if this is needed someday we can enable it,\n\t\t// but its not covered by our component interface (props / events) documentation so just disabled for now.\n\t\tpartialRange: false,\n\t},\n\tenableTimePicker: !(props.type === 'date' || props.type === 'date-range'),\n\tflow: props.type === 'datetime'\n\t\t? ['calendar', 'time'] as ['calendar', 'time']\n\t\t: undefined,\n}))\n\n/**\n * Called on model value update of the library.\n * @param value The value emitted from the underlying library\n */\nfunction onUpdateModelValue(value: LibraryModelValue): void {\n\tif (value === null) {\n\t\treturn emit('update:modelValue', null)\n\t}\n\n\tif (props.type === 'time') {\n\t\t// time is provided as an object\n\t\temit('update:modelValue', formatLibraryTime(value as LibraryTimeObject))\n\t} else if (props.type === 'time-range') {\n\t\t// same as time but as an array with two elements\n\t\tconst start = formatLibraryTime(value[0])\n\t\tconst end = formatLibraryTime(value[1])\n\t\t// ensure end is beyond the start\n\t\tif (end.getTime() < start.getTime()) {\n\t\t\tend.setDate(end.getDate() + 1)\n\t\t}\n\t\temit('update:modelValue', [start, end])\n\t} else if (props.type === 'month') {\n\t\t// month is emitted as an object with month and year attribute\n\t\tconst data = value as { month: number, year: number }\n\t\temit('update:modelValue', new Date(data.year, data.month, 1))\n\t} else if (props.type === 'year') {\n\t\t// Years are emitted as the numeric year e.g. 2022\n\t\temit('update:modelValue', new Date(value as number, 0))\n\t} else if (props.type === 'week') {\n\t\t// weeks are emitted as [Date, Date]\n\t\temit('update:modelValue', value[0])\n\t} else {\n\t\t// otherwise it already emits the correct format\n\t\temit('update:modelValue', value as Date | [Date, Date])\n\t}\n}\n\n/**\n * Format a vuepick time object to native JS Date object.\n *\n * @param time - The library time value object\n */\nfunction formatLibraryTime(time: LibraryTimeObject): Date {\n\tconst date = new Date()\n\tdate.setHours(time.hours)\n\tdate.setMinutes(time.minutes)\n\tdate.setSeconds(time.seconds)\n\treturn date\n}\n\n// Localization\n\nconst dayNames = getDayNamesMin()\n\nconst weekStart = getFirstDay()\n\n// TRANSLATORS: A very short abbrevation used as a heading for \"week number\"\nconst weekNumName = t('W')\n\nconst ariaLabels = computed(() => ({\n\ttoggleOverlay: t('Toggle overlay'),\n\tmenu: props.ariaLabelMenu,\n\tinput: props.ariaLabel,\n\topenTimePicker: t('Open time picker'),\n\tcloseTimePicker: t('Close time Picker'),\n\tincrementValue: (type: 'hours' | 'minutes' | 'seconds') => {\n\t\tif (type === 'hours') {\n\t\t\treturn t('Increment hours')\n\t\t} else if (type === 'minutes') {\n\t\t\treturn t('Increment minutes')\n\t\t}\n\t\treturn t('Increment seconds')\n\t},\n\tdecrementValue: (type: 'hours' | 'minutes' | 'seconds') => {\n\t\tif (type === 'hours') {\n\t\t\treturn t('Decrement hours')\n\t\t} else if (type === 'minutes') {\n\t\t\treturn t('Decrement minutes')\n\t\t}\n\t\treturn t('Decrement seconds')\n\t},\n\topenTpOverlay: (type: 'hours' | 'minutes' | 'seconds') => {\n\t\tif (type === 'hours') {\n\t\t\treturn t('Open hours overlay')\n\t\t} else if (type === 'minutes') {\n\t\t\treturn t('Open minutes overlay')\n\t\t}\n\t\treturn t('Open seconds overlay')\n\t},\n\tamPmButton: t('Switch AM/PM mode'),\n\topenYearsOverlay: t('Open years overlay'),\n\topenMonthsOverlay: t('Open months overlay'),\n\tnextMonth: t('Next month'),\n\tprevMonth: t('Previous month'),\n\tnextYear: t('Next year'),\n\tprevYear: t('Previous year'),\n\tweekDay: (day: number) => getDayNames()[day],\n\tclearInput: t('Clear value'),\n\tcalendarIcon: t('Calendar icon'),\n\ttimePicker: t('Time picker'),\n\tmonthPicker: (overlay: boolean) => overlay ? t('Month picker overlay') : t('Month picker'),\n\tyearPicker: (overlay: boolean) => overlay ? t('Year picker overlay') : t('Year picker'),\n}))\n</script>\n\n<template>\n\t<VueDatePicker :aria-labels\n\t\t:auto-apply=\"!confirm\"\n\t\tclass=\"vue-date-time-picker\"\n\t\t:cancel-text=\"t('Cancel')\"\n\t\t:clearable\n\t\t:day-names\n\t\t:placeholder=\"placeholder ?? placeholderFallback\"\n\t\t:format=\"realFormat\"\n\t\t:locale\n\t\t:minutes-increment=\"minuteStep\"\n\t\t:model-value=\"value\"\n\t\t:now-button-label=\"t('Now')\"\n\t\t:select-text=\"t('Pick')\"\n\t\tsix-weeks=\"fair\"\n\t\t:teleport=\"appendToBody || undefined\"\n\t\ttext-input\n\t\t:week-num-name\n\t\t:week-numbers=\"showWeekNumber ? { type: 'iso' } : undefined\"\n\t\t:week-start\n\t\tv-bind=\"pickerType\"\n\t\t@update:model-value=\"onUpdateModelValue\">\n\t\t<template #input-icon>\n\t\t\t<NcIconSvgWrapper :path=\"mdiCalendarBlank\" :size=\"20\" />\n\t\t</template>\n\t\t<template #clear-icon>\n\t\t\t<NcIconSvgWrapper inline :path=\"mdiClose\" :size=\"20\" />\n\t\t</template>\n\t\t<template #clock-icon>\n\t\t\t<NcIconSvgWrapper inline :path=\"mdiClock\" :size=\"20\" />\n\t\t</template>\n\t\t<template #arrow-left>\n\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronLeft\" :size=\"20\" />\n\t\t</template>\n\t\t<template #arrow-right>\n\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronRight\" :size=\"20\" />\n\t\t</template>\n\t\t<template #arrow-down>\n\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronDown\" :size=\"20\" />\n\t\t</template>\n\t\t<template #arrow-up>\n\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronUp\" :size=\"20\" />\n\t\t</template>\n\t\t<template v-if=\"showTimezoneSelect\" #action-extra>\n\t\t\t<NcTimezonePicker v-model=\"timezoneId\"\n\t\t\t\tclass=\"vue-date-time-picker__timezone\"\n\t\t\t\t:append-to-body=\"false\"\n\t\t\t\t:input-label=\"t('Timezone')\" />\n\t\t</template>\n\t</VueDatePicker>\n</template>\n\n<style scoped lang=\"scss\">\n@import '@vuepic/vue-datepicker/dist/main.css';\n\n.vue-date-time-picker {\n\t--dp-border-radius: var(--border-radius-element);\n\t--dp-input-icon-padding: var(--default-clickable-area);\n\n\t.vue-date-time-picker__timezone {\n\t\tmin-width: unset;\n\t\twidth: 100%;\n\t}\n\n\t:deep(.icon-vue) {\n\t\topacity: 1 !important;\n\t}\n\n\t// time selector button should have consistent padding\n\t:deep(.dp--tp-wrap),\n\t:deep(.dp__action_extra) {\n\t\tpadding: var(--dp-menu-padding);\n\t\tpadding-top: 0;\n\t}\n\n\t:deep(.dp__overlay.dp--overlay-absolute) {\n\t\tpadding: var(--dp-menu-padding);\n\n\t\t.dp__btn.dp__button.dp__button_bottom {\n\t\t\tinset-block-end: 6px;\n\t\t}\n\t}\n\n\t:deep(.dp__btn.dp__button.dp__button_bottom),\n\t:deep(.dp--tp-wrap .dp__button) {\n\t\twidth: 100%;\n\t}\n\n\t:deep(.dp__btn.dp__button.dp__overlay_action) {\n\t\twidth: calc(100% - 16px);\n\t}\n\n\t// fix issues caused by Nextcloud server styles\n\t:deep(input) {\n\t\tpadding-inline-start: var(--dp-input-icon-padding) !important;\n\t}\n\t:deep(.dp__btn) {\n\t\tpadding: calc((var(--default-clickable-area) - 20px) / 2);\n\t\tmargin: 0;\n\t}\n\t:deep(.dp__inner_nav) {\n\t\theight: fit-content;\n\t\twidth: fit-content;\n\t}\n\n\t// Fix server styles causing buttons to be primary colored\n\t:deep(.dp--header-wrap .dp__btn:not(.dp__button_bottom)),\n\t:deep(.dp__time_col .dp__btn) {\n\t\tbackground-color: var(--color-main-background);\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t}\n\n\t// Server styles cause the month and year to be fit-content -> fixing it to be max size.\n\t:deep(.dp__month_year_select) {\n\t\tflex: 1;\n\t}\n\t:deep(.dp--time-overlay-btn) {\n\t\tfont-size: calc(2 * var(--default-font-size)) !important;\n\t}\n\n\t// Adjust padding to prevent horizontal scrolling in time selection\n\t:deep(.dp__time_input .dp__time_col_reg_block) {\n\t\tpadding: 0 calc(4 * var(--default-grid-baseline));\n\t}\n\n\t&.dp__theme_dark,\n\t&.dp__theme_light,\n\t:deep(.dp__theme_dark),\n\t:deep(.dp__theme_light) {\n\t\t--dp-background-color: var(--color-main-background);\n\t\t--dp-text-color: var(--color-main-text);\n\t\t--dp-hover-color: var(--color-background-hover);\n\t\t--dp-hover-text-color: var(--color-main-text);\n\t\t--dp-hover-icon-color: var(--color-main-text);\n\t\t--dp-primary-color: var(--color-primary-element);\n\t\t--dp-primary-disabled-color: var(--color-primary-element-hover);\n\t\t--dp-primary-text-color: var(--color-primary-element-text);\n\t\t--dp-secondary-color: var(--color-text-maxcontrast); // this is used for \"disabled\" dates\n\t\t--dp-border-color: var(--color-border);\n\t\t--dp-menu-border-color: var(--color-border-dark);\n\t\t--dp-border-color-hover: var(--color-border-maxcontrast);\n\t\t--dp-border-color-focus: var(--color-border-maxcontrast);\n\t\t--dp-disabled-color: var(--color-background-dark);\n\t\t--dp-disabled-color-text: var(--color-text-maxcontrast);\n\t\t--dp-scroll-bar-background: var(--color-scrollbar);\n\t\t--dp-scroll-bar-color: var(--color-scrollbar);\n\t\t--dp-success-color: var(--color-success);\n\t\t--dp-success-color-disabled: var(--color-success-hover);\n\t\t--dp-icon-color: var(--color-main-text);\n\t\t--dp-danger-color: var(--color-error);\n\t\t--dp-marker-color: var(--color-error);\n\t\t--dp-tooltip-color: var(--color-main-text);\n\t\t--dp-highlight-color: var(--color-main-text);\n\t}\n}\n</style>\n"],"names":["_useModel","value"],"mappings":"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"}

package/dist/chunks/{NcDateTimePickerNative-Dake1IML.mjs → NcDateTimePickerNative-DoGQFKev.mjs}

@@ -1,6 +1,6 @@
 import '../assets/NcDateTimePickerNative-CdHLvH4A.css';
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { S as ScopeComponent } from "./ScopeComponent-BWZEma4R.mjs";
+import { S as ScopeComponent } from "./ScopeComponent-Cr_cohWX.mjs";
 import { createElementBlock, openBlock, 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"];
@@ -200,4 +200,4 @@ const NcDateTimePickerNative = /* @__PURE__ */ _export_sfc(_sfc_main, [["render"
 export {
   NcDateTimePickerNative as N
 };
-//# sourceMappingURL=NcDateTimePickerNative-Dake1IML.mjs.map
+//# sourceMappingURL=NcDateTimePickerNative-DoGQFKev.mjs.map

package/dist/chunks/{NcDateTimePickerNative-Dake1IML.mjs.map → NcDateTimePickerNative-DoGQFKev.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDateTimePickerNative-Dake1IML.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```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<hr/>\n\t\t<div class=\"flex\">\n\t\t\t<NcSelect v-bind=\"props\" v-model=\"type\" />\n\t\t\t<NcDateTimePickerNative\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:label=\"label\"\n\t\t\t\t:type=\"type\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tprops: {\n\t\t\t\t\tclearable: false,\n\t\t\t\t\tinputLabel: 'Picker type',\n\t\t\t\t\toptions: [\n\t\t\t\t\t\t'date',\n\t\t\t\t\t\t'datetime-local',\n\t\t\t\t\t\t'month',\n\t\t\t\t\t\t'time',\n\t\t\t\t\t\t'week',\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\ttype: 'datetime-local',\n\t\t\t\tvalue: new Date(),\n\t\t\t\tlabel: 'Select a new date or time',\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style scoped>\n.flex {\n\tdisplay: flex;\n\tgap: 4px;\n}\n</style>\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: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\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</docs>\n\n<template>\n\t<div class=\"native-datetime-picker\">\n\t\t<label class=\"native-datetime-picker--label\"\n\t\t\t:class=\"{ 'hidden-visually': hideLabel }\"\n\t\t\t:for=\"id\">\n\t\t\t{{ label }}\n\t\t</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 { createElementId } from '../../utils/createElementId.js'\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\tdefault: () => createElementId(),\n\t\t\tvalidator: id => id.trim() !== '',\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 === '' || this.modelValue === null) {\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 === '' || this.modelValue === null) {\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.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${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--label {\n\t\tmargin-block-end: 2px;\n\t}\n\n\t.native-datetime-picker .native-datetime-picker--input {\n\t\t// If border width differs between focused and unfocused we need to compensate to prevent jumping\n\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\twidth: 100%;\n\t\tflex: 0 0 auto;\n\t\tmargin: 0;\n\t\tpadding-inline-start: calc(var(--border-radius-large) + var(--input-border-width-offset));\n\t\tpadding-inline-end: calc(var(--default-grid-baseline) + var(--input-border-width-offset));\n\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]),\n\t\t&:focus-within:not([disabled]) {\n\t\t\tborder-color: var(--color-main-text);\n\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t\t// Reset padding offset when focused\n\t\t\t--input-border-width-offset: 0px;\n\t\t}\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":";;;;AAgHA,MAAM,iBAAiB,CAAC,QAAQ,kBAAkB,SAAS,QAAQ,MAAM;AAEzE,MAAK,YAAa,eAAY;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAON,YAAY;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,IAAI;AAAA,MACH,MAAM;AAAA,MACN,SAAS,MAAM,gBAAiB;AAAA,MAChC,WAAW,QAAM,GAAG,KAAK,MAAM;AAAA,IAC/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU,CAAC,SAAS,eAAe,SAAS,IAAI;AAAA,IAChD;AAAA;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAKD,KAAK;AAAA,MACJ,MAAM,CAAC,MAAM,OAAO;AAAA,MACpB,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAKD,KAAK;AAAA,MACJ,MAAM,CAAC,MAAM,OAAO;AAAA,MACpB,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACX,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO;AAAA,IACN;AAAA,EACA;AAAA,EAED,UAAU;AAAA,IACT,iBAAiB;AAChB,aAAO,KAAK,YAAY,KAAK,UAAU;AAAA,IACvC;AAAA,IACD,eAAe;AACd,UAAI,KAAK,KAAK;AACb,eAAO,KAAK,YAAY,KAAK,GAAG;AAAA,MACjC;AACA,aAAO;AAAA,IACP;AAAA,IACD,eAAe;AACd,UAAI,KAAK,KAAK;AACb,eAAO,KAAK,YAAY,KAAK,GAAG;AAAA,MACjC;AACA,aAAO;AAAA,IACP;AAAA,EACD;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOR,QAAQ,QAAQ;AACf,UAAI,MAAM,OAAO,OAAO,aAAa,GAAG;AAMvC,eAAO,KAAK,MAAM,qBAAqB,IAAI;AAAA,MAC5C;AACA,UAAI,KAAK,SAAS,QAAQ;AACzB,cAAM,OAAO,OAAO,OAAO;AAC3B,YAAI,KAAK,eAAe,MAAM,KAAK,eAAe,MAAM;AAEvD,gBAAM,EAAE,MAAAA,OAAM,IAAAC,KAAI,IAAAC,IAAG,IAAI,KAAK,gBAAgB,oBAAI,KAAM,CAAA;AAMxD,iBAAO,KAAK,MAAM,qBAAqB,oBAAI,KAAK,GAAGF,KAAI,IAAIC,GAAE,IAAIC,GAAE,IAAI,IAAI,EAAE,CAAC;AAAA,QAC/E;AACA,cAAM,EAAE,MAAM,IAAI,GAAK,IAAE,KAAK,gBAAgB,KAAK,UAAU;AAM7D,eAAO,KAAK,MAAM,qBAAqB,oBAAI,KAAK,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC;AAAA,iBACpE,KAAK,SAAS,SAAS;AACjC,cAAM,MAAM,IAAI,KAAK,OAAO,OAAO,KAAK,EAAE,SAAQ,IAAK,GAAG,SAAU,EAAC,SAAS,GAAG,GAAG;AACpF,YAAI,KAAK,eAAe,MAAM,KAAK,eAAe,MAAM;AACvD,gBAAM,EAAE,MAAAF,OAAM,IAAAE,KAAI,IAAAC,KAAI,IAAAC,QAAO,KAAK,gBAAgB,oBAAI,KAAM,CAAA;AAM5D,iBAAO,KAAK,MAAM,qBAAqB,oBAAI,KAAK,GAAGJ,KAAI,IAAI,EAAE,IAAIE,GAAE,IAAIC,GAAE,IAAIC,GAAE,EAAE,CAAC;AAAA,QACnF;AACA,cAAM,EAAE,MAAM,IAAI,IAAI,GAAG,IAAI,KAAK,gBAAgB,KAAK,UAAU;AAMjE,eAAO,KAAK,MAAM,qBAAqB,oBAAI,KAAK,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC;AAAA,MACnF;AACA,YAAM,wBAAwB,IAAI,KAAK,OAAO,OAAO,aAAa,EAAE,sBAAsB,MAAO;AACjG,YAAM,wBAAwB,OAAO,OAAO,gBAAgB;AAM5D,aAAO,KAAK,MAAM,qBAAqB,IAAI,KAAK,qBAAqB,CAAC;AAAA,IACtE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,gBAAgB,OAAO;AACtB,UAAI,iBAAiB,MAAM;AAC1B,cAAM,OAAO,MAAM,YAAW,EAAG,WAAW,SAAS,GAAG,GAAG;AAC3D,cAAM,MAAM,MAAM,SAAS,IAAI,GAAG,SAAU,EAAC,SAAS,GAAG,GAAG;AAC5D,cAAM,KAAK,MAAM,QAAO,EAAG,WAAW,SAAS,GAAG,GAAG;AACrD,cAAM,KAAK,MAAM,SAAQ,EAAG,WAAW,SAAS,GAAG,GAAG;AACtD,cAAM,KAAK,MAAM,WAAU,EAAG,WAAW,SAAS,GAAG,GAAG;AAExD,eAAO,EAAE,MAAM,IAAI,IAAI,IAAI,GAAG;AAAA,MAC/B;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAY,OAAO;AAClB,UAAI,iBAAiB,MAAM;AAC1B,cAAM,EAAE,MAAM,IAAI,IAAI,IAAI,GAAG,IAAI,KAAK,gBAAgB,KAAK;AAC3D,YAAI,KAAK,SAAS,kBAAkB;AACnC,iBAAO,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;AAAA,mBAC5B,KAAK,SAAS,QAAQ;AAChC,iBAAO,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE;AAAA,mBAChB,KAAK,SAAS,SAAS;AACjC,iBAAO,GAAG,IAAI,IAAI,EAAE;AAAA,mBACV,KAAK,SAAS,QAAQ;AAChC,iBAAO,GAAG,EAAE,IAAI,EAAE;AAAA,mBACR,KAAK,SAAS,QAAQ;AAChC,gBAAM,YAAY,IAAI,KAAK,MAAM,GAAG,CAAC;AACrC,gBAAM,2BAA2B,KAAK,OAAO,QAAQ,cACjD,KAAK,KAAK,KAAK,IAAK;AACxB,gBAAM,aAAa,KAAK,KAAK,2BAA2B,CAAC;AACzD,iBAAO,GAAG,IAAI,KAAK,UAAU;AAAA,QAC9B;AAAA,aACM;AACN,eAAO;AAAA,MACR;AAAA,IACA;AAAA,EACD;AACF,CAAC;AAxOK,MAAA,aAAA,EAAA,OAAM,yBAAwB;AA1FpC,MAAA,aAAA,CAAA,KAAA;AAAA,MAAA,aAAA,CAAA,MAAA,QAAA,SAAA,OAAA,KAAA;;AA0FC,SAAAC,UAAA,GAAAC,mBAeM,OAfN,YAeM;AAAA,IAdLC,mBAIQ,SAAA;AAAA,MAJD,OA3FTC,eAAA,CA2Fe,iCAA+B,EAAA,mBACd,KAAS,UAAA,CAAA,CAAA;AAAA,MACrC,KAAK,KAAE;AAAA,IACL,GAAAC,gBAAA,KAAA,KAAK,GA9FX,IAAA,UAAA;AAAA,IAgGEF,mBAQkB,SARlBG,WAQkB;AAAA,MARV,IAAI,KAAE;AAAA,MACb,OAAK,CAAC,iCACE,KAAU,UAAA;AAAA,MACjB,MAAM,KAAI;AAAA,MACV,OAAO,KAAc;AAAA,MACrB,KAAK,KAAY;AAAA,MACjB,KAAK,KAAY;AAAA,OACV,KAAM,QAAA;AAAA,MACb,gDAAO,KAAO,WAAA,KAAA,QAAA,GAAA,IAAA;AAAA,IAxGlB,CAAA,GAAA,MAAA,IAAA,UAAA;AAAA;;;"}
+{"version":3,"file":"NcDateTimePickerNative-DoGQFKev.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```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<hr/>\n\t\t<div class=\"flex\">\n\t\t\t<NcSelect v-bind=\"props\" v-model=\"type\" />\n\t\t\t<NcDateTimePickerNative\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:label=\"label\"\n\t\t\t\t:type=\"type\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tprops: {\n\t\t\t\t\tclearable: false,\n\t\t\t\t\tinputLabel: 'Picker type',\n\t\t\t\t\toptions: [\n\t\t\t\t\t\t'date',\n\t\t\t\t\t\t'datetime-local',\n\t\t\t\t\t\t'month',\n\t\t\t\t\t\t'time',\n\t\t\t\t\t\t'week',\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\ttype: 'datetime-local',\n\t\t\t\tvalue: new Date(),\n\t\t\t\tlabel: 'Select a new date or time',\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style scoped>\n.flex {\n\tdisplay: flex;\n\tgap: 4px;\n}\n</style>\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: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\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</docs>\n\n<template>\n\t<div class=\"native-datetime-picker\">\n\t\t<label class=\"native-datetime-picker--label\"\n\t\t\t:class=\"{ 'hidden-visually': hideLabel }\"\n\t\t\t:for=\"id\">\n\t\t\t{{ label }}\n\t\t</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 { createElementId } from '../../utils/createElementId.js'\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\tdefault: () => createElementId(),\n\t\t\tvalidator: id => id.trim() !== '',\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 === '' || this.modelValue === null) {\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 === '' || this.modelValue === null) {\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.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${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--label {\n\t\tmargin-block-end: 2px;\n\t}\n\n\t.native-datetime-picker .native-datetime-picker--input {\n\t\t// If border width differs between focused and unfocused we need to compensate to prevent jumping\n\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\twidth: 100%;\n\t\tflex: 0 0 auto;\n\t\tmargin: 0;\n\t\tpadding-inline-start: calc(var(--border-radius-large) + var(--input-border-width-offset));\n\t\tpadding-inline-end: calc(var(--default-grid-baseline) + var(--input-border-width-offset));\n\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]),\n\t\t&:focus-within:not([disabled]) {\n\t\t\tborder-color: var(--color-main-text);\n\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t\t// Reset padding offset when focused\n\t\t\t--input-border-width-offset: 0px;\n\t\t}\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":";;;;AAgHA,MAAM,iBAAiB,CAAC,QAAQ,kBAAkB,SAAS,QAAQ,MAAM;AAEzE,MAAK,YAAa,eAAY;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAON,YAAY;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,IAAI;AAAA,MACH,MAAM;AAAA,MACN,SAAS,MAAM,gBAAiB;AAAA,MAChC,WAAW,QAAM,GAAG,KAAK,MAAM;AAAA,IAC/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU,CAAC,SAAS,eAAe,SAAS,IAAI;AAAA,IAChD;AAAA;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAKD,KAAK;AAAA,MACJ,MAAM,CAAC,MAAM,OAAO;AAAA,MACpB,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAKD,KAAK;AAAA,MACJ,MAAM,CAAC,MAAM,OAAO;AAAA,MACpB,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACX,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO;AAAA,IACN;AAAA,EACA;AAAA,EAED,UAAU;AAAA,IACT,iBAAiB;AAChB,aAAO,KAAK,YAAY,KAAK,UAAU;AAAA,IACvC;AAAA,IACD,eAAe;AACd,UAAI,KAAK,KAAK;AACb,eAAO,KAAK,YAAY,KAAK,GAAG;AAAA,MACjC;AACA,aAAO;AAAA,IACP;AAAA,IACD,eAAe;AACd,UAAI,KAAK,KAAK;AACb,eAAO,KAAK,YAAY,KAAK,GAAG;AAAA,MACjC;AACA,aAAO;AAAA,IACP;AAAA,EACD;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOR,QAAQ,QAAQ;AACf,UAAI,MAAM,OAAO,OAAO,aAAa,GAAG;AAMvC,eAAO,KAAK,MAAM,qBAAqB,IAAI;AAAA,MAC5C;AACA,UAAI,KAAK,SAAS,QAAQ;AACzB,cAAM,OAAO,OAAO,OAAO;AAC3B,YAAI,KAAK,eAAe,MAAM,KAAK,eAAe,MAAM;AAEvD,gBAAM,EAAE,MAAAA,OAAM,IAAAC,KAAI,IAAAC,IAAG,IAAI,KAAK,gBAAgB,oBAAI,KAAM,CAAA;AAMxD,iBAAO,KAAK,MAAM,qBAAqB,oBAAI,KAAK,GAAGF,KAAI,IAAIC,GAAE,IAAIC,GAAE,IAAI,IAAI,EAAE,CAAC;AAAA,QAC/E;AACA,cAAM,EAAE,MAAM,IAAI,GAAK,IAAE,KAAK,gBAAgB,KAAK,UAAU;AAM7D,eAAO,KAAK,MAAM,qBAAqB,oBAAI,KAAK,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC;AAAA,iBACpE,KAAK,SAAS,SAAS;AACjC,cAAM,MAAM,IAAI,KAAK,OAAO,OAAO,KAAK,EAAE,SAAQ,IAAK,GAAG,SAAU,EAAC,SAAS,GAAG,GAAG;AACpF,YAAI,KAAK,eAAe,MAAM,KAAK,eAAe,MAAM;AACvD,gBAAM,EAAE,MAAAF,OAAM,IAAAE,KAAI,IAAAC,KAAI,IAAAC,QAAO,KAAK,gBAAgB,oBAAI,KAAM,CAAA;AAM5D,iBAAO,KAAK,MAAM,qBAAqB,oBAAI,KAAK,GAAGJ,KAAI,IAAI,EAAE,IAAIE,GAAE,IAAIC,GAAE,IAAIC,GAAE,EAAE,CAAC;AAAA,QACnF;AACA,cAAM,EAAE,MAAM,IAAI,IAAI,GAAG,IAAI,KAAK,gBAAgB,KAAK,UAAU;AAMjE,eAAO,KAAK,MAAM,qBAAqB,oBAAI,KAAK,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC;AAAA,MACnF;AACA,YAAM,wBAAwB,IAAI,KAAK,OAAO,OAAO,aAAa,EAAE,sBAAsB,MAAO;AACjG,YAAM,wBAAwB,OAAO,OAAO,gBAAgB;AAM5D,aAAO,KAAK,MAAM,qBAAqB,IAAI,KAAK,qBAAqB,CAAC;AAAA,IACtE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,gBAAgB,OAAO;AACtB,UAAI,iBAAiB,MAAM;AAC1B,cAAM,OAAO,MAAM,YAAW,EAAG,WAAW,SAAS,GAAG,GAAG;AAC3D,cAAM,MAAM,MAAM,SAAS,IAAI,GAAG,SAAU,EAAC,SAAS,GAAG,GAAG;AAC5D,cAAM,KAAK,MAAM,QAAO,EAAG,WAAW,SAAS,GAAG,GAAG;AACrD,cAAM,KAAK,MAAM,SAAQ,EAAG,WAAW,SAAS,GAAG,GAAG;AACtD,cAAM,KAAK,MAAM,WAAU,EAAG,WAAW,SAAS,GAAG,GAAG;AAExD,eAAO,EAAE,MAAM,IAAI,IAAI,IAAI,GAAG;AAAA,MAC/B;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAY,OAAO;AAClB,UAAI,iBAAiB,MAAM;AAC1B,cAAM,EAAE,MAAM,IAAI,IAAI,IAAI,GAAG,IAAI,KAAK,gBAAgB,KAAK;AAC3D,YAAI,KAAK,SAAS,kBAAkB;AACnC,iBAAO,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;AAAA,mBAC5B,KAAK,SAAS,QAAQ;AAChC,iBAAO,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE;AAAA,mBAChB,KAAK,SAAS,SAAS;AACjC,iBAAO,GAAG,IAAI,IAAI,EAAE;AAAA,mBACV,KAAK,SAAS,QAAQ;AAChC,iBAAO,GAAG,EAAE,IAAI,EAAE;AAAA,mBACR,KAAK,SAAS,QAAQ;AAChC,gBAAM,YAAY,IAAI,KAAK,MAAM,GAAG,CAAC;AACrC,gBAAM,2BAA2B,KAAK,OAAO,QAAQ,cACjD,KAAK,KAAK,KAAK,IAAK;AACxB,gBAAM,aAAa,KAAK,KAAK,2BAA2B,CAAC;AACzD,iBAAO,GAAG,IAAI,KAAK,UAAU;AAAA,QAC9B;AAAA,aACM;AACN,eAAO;AAAA,MACR;AAAA,IACA;AAAA,EACD;AACF,CAAC;AAxOK,MAAA,aAAA,EAAA,OAAM,yBAAwB;AA1FpC,MAAA,aAAA,CAAA,KAAA;AAAA,MAAA,aAAA,CAAA,MAAA,QAAA,SAAA,OAAA,KAAA;;AA0FC,SAAAC,UAAA,GAAAC,mBAeM,OAfN,YAeM;AAAA,IAdLC,mBAIQ,SAAA;AAAA,MAJD,OA3FTC,eAAA,CA2Fe,iCAA+B,EAAA,mBACd,KAAS,UAAA,CAAA,CAAA;AAAA,MACrC,KAAK,KAAE;AAAA,IACL,GAAAC,gBAAA,KAAA,KAAK,GA9FX,IAAA,UAAA;AAAA,IAgGEF,mBAQkB,SARlBG,WAQkB;AAAA,MARV,IAAI,KAAE;AAAA,MACb,OAAK,CAAC,iCACE,KAAU,UAAA;AAAA,MACjB,MAAM,KAAI;AAAA,MACV,OAAO,KAAc;AAAA,MACrB,KAAK,KAAY;AAAA,MACjB,KAAK,KAAY;AAAA,OACV,KAAM,QAAA;AAAA,MACb,gDAAO,KAAO,WAAA,KAAA,QAAA,GAAA,IAAA;AAAA,IAxGlB,CAAA,GAAA,MAAA,IAAA,UAAA;AAAA;;;"}

package/dist/chunks/{NcDialog-_pc2BPHU.mjs → NcDialog-CbXsHgYI.mjs}

@@ -1,8 +1,8 @@
-import '../assets/NcDialog-Dkeikssh.css';
+import '../assets/NcDialog-bP7Jt0ZE.css';
 import { useElementSize } from "@vueuse/core";
 import { defineComponent, ref, computed, resolveComponent, createBlock, createCommentVNode, openBlock, mergeProps, withCtx, createElementVNode, toDisplayString, resolveDynamicComponent, toHandlers, normalizeClass, createElementBlock, renderSlot, Fragment, renderList } from "vue";
 import NcModal from "../components/NcModal/index.mjs";
-import { _ as _sfc_main$1 } from "./NcDialogButton.vue_vue_type_script_setup_true_lang-BKrJ_xd8.mjs";
+import { _ as _sfc_main$1 } from "./NcDialogButton.vue_vue_type_script_setup_true_lang-DR0Yn-dH.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = defineComponent({
@@ -166,7 +166,7 @@ const _sfc_main = defineComponent({
       default: ""
     }
   },
-  emits: ["closing", "update:open", "submit"],
+  emits: ["closing", "update:open", "reset", "submit"],
   setup(props, { emit, slots }) {
     const wrapper = ref();
     const { width: dialogWidth } = useElementSize(wrapper, { width: 900, height: 0 });
@@ -208,10 +208,10 @@ const _sfc_main = defineComponent({
       handleClosing(result);
       window.setTimeout(() => handleClosed(), 300);
     }
-    const handleClosing = (result) => {
+    function handleClosing(result) {
       showModal.value = false;
       emit("closing", result);
-    };
+    }
     const handleClosed = () => {
       showModal.value = true;
       emit("update:open", false);
@@ -312,8 +312,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 16, ["onClose"])) : createCommentVNode("", true);
 }
-const NcDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-67fc9e13"]]);
+const NcDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3709d2d3"]]);
 export {
   NcDialog as N
 };
-//# sourceMappingURL=NcDialog-_pc2BPHU.mjs.map
+//# sourceMappingURL=NcDialog-CbXsHgYI.mjs.map