npm - @nextcloud/vue - Versions diffs - 9.3.2 → 9.4.0 - Mend

@nextcloud/vue 9.3.2 → 9.4.0

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

Files changed (319) hide show

package/dist/chunks/NcCollectionList-ByFl0-ca.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcCollectionList-ByFl0-ca.mjs","sources":["../../src/components/NcCollectionList/NcCollectionListItem.vue","../../src/components/NcCollectionList/service.ts","../../src/components/NcCollectionList/useCollections.js","../../src/components/NcCollectionList/NcCollectionList.vue"],"sourcesContent":["\n\n<template>\n\t<li class=\"collection-list-item\">\n\t\t<NcAvatar :display-name=\"collection.name\" allow-placeholder class=\"collection-avatar\" />\n\t\t<span\n\t\t\tv-if=\"newName === null\"\n\t\t\tclass=\"collection-item-name\"\n\t\t\ttitle=\"\"\n\t\t\t@click=\"showDetails\">{{ collection.name }}</span>\n\t\t<form v-else :class=\"{ 'should-shake': error }\" @submit.prevent=\"renameCollection\">\n\t\t\t<input\n\t\t\t\tv-model=\"newName\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\tautocapitalize=\"off\">\n\t\t\t<input type=\"submit\" value=\"\" class=\"icon-confirm\">\n\t\t</form>\n\t\t<div v-if=\"!detailsOpen && newName === null\" class=\"linked-icons\">\n\t\t\t<component\n\t\t\t\t:is=\"getComponent(resource).component\"\n\t\t\t\tv-for=\"resource in resources.slice(0, 2)\"\n\t\t\t\t:key=\"resource.type + '|' + resource.id\"\n\t\t\t\t:title=\"resource.name\"\n\t\t\t\t:to=\"getComponent(resource).to\"\n\t\t\t\t:href=\"getComponent(resource).href\"\n\t\t\t\t:class=\"typeClass(resource)\">\n\t\t\t\t<img :src=\"iconUrl(resource)\" :alt=\"resource.name\">\n\t\t\t</component>\n\t\t</div>\n\n\t\t<span v-if=\"newName === null\" class=\"sharingOptionsGroup\">\n\t\t\t<NcActions>\n\t\t\t\t<NcActionButton\n\t\t\t\t\ticon=\"icon-info\"\n\t\t\t\t\t@click.prevent=\"toggleDetails\">\n\t\t\t\t\t{{ detailsOpen ? t('Hide details') : t('Show details') }}\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton\n\t\t\t\t\ticon=\"icon-rename\"\n\t\t\t\t\t@click.prevent=\"openRename\">\n\t\t\t\t\t{{ t('Rename project') }}\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</span>\n\n\t\t<transition name=\"fade\">\n\t\t\t<div v-if=\"error\" class=\"error\">\n\t\t\t\t{{ error }}\n\t\t\t</div>\n\t\t</transition>\n\t\t<transition name=\"fade\">\n\t\t\t<ul v-if=\"detailsOpen\" class=\"resource-list-details\">\n\t\t\t\t<li\n\t\t\t\t\tv-for=\"resource in resources\"\n\t\t\t\t\t:key=\"resource.type + '|' + resource.id\"\n\t\t\t\t\t:class=\"typeClass(resource)\">\n\t\t\t\t\t<component\n\t\t\t\t\t\t:is=\"getComponent(resource).component\"\n\t\t\t\t\t\t:to=\"getComponent(resource).to\"\n\t\t\t\t\t\t:href=\"getComponent(resource).href\">\n\t\t\t\t\t\t<img :src=\"iconUrl(resource)\" :alt=\"resource.name\">\n\t\t\t\t\t\t<span class=\"resource-name\">{{ resource.name || '' }}</span>\n\t\t\t\t\t</component>\n\t\t\t\t\t<span class=\"icon-close\" @click=\"removeResource(collection, resource)\" />\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</transition>\n\t</li>\n</template>\n\n<script>\nimport { t } from '../../l10n.ts'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcAvatar from '../NcAvatar/index.js'\nimport { getRoute } from '../NcRichText/autolink.ts'\n\nexport default {\n\tname: 'NcCollectionListItem',\n\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The collection\n\t\t */\n\t\tcollection: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Current error if any\n\t\t */\n\t\terror: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\temits: [\n\t\t'removeResource',\n\t\t'renameCollection',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tdetailsOpen: false,\n\t\t\tnewName: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tgetIcon() {\n\t\t\treturn (resource) => [resource.iconClass]\n\t\t},\n\n\t\ttypeClass() {\n\t\t\treturn (resource) => 'resource-type-' + resource.type\n\t\t},\n\n\t\tresources() {\n\t\t\t// invalid resources come from server as empty array ([]) and not an object\n\t\t\treturn this.collection.resources?.filter((resource) => !Array.isArray(resource)) ?? []\n\t\t},\n\n\t\tgetComponent() {\n\t\t\treturn (resource) => {\n\t\t\t\tconst route = getRoute(this.$router, resource.link)\n\n\t\t\t\treturn route\n\t\t\t\t\t? { component: 'router-link', to: route, href: undefined }\n\t\t\t\t\t: { component: 'a', to: undefined, href: resource.link }\n\t\t\t}\n\t\t},\n\n\t\ticonUrl() {\n\t\t\treturn (resource) => {\n\t\t\t\tif (resource.mimetype) {\n\t\t\t\t\treturn OC.MimeType.getIconUrl(resource.mimetype)\n\t\t\t\t}\n\t\t\t\tif (resource.iconUrl) {\n\t\t\t\t\treturn resource.iconUrl\n\t\t\t\t}\n\t\t\t\treturn ''\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\ttoggleDetails() {\n\t\t\tthis.detailsOpen = !this.detailsOpen\n\t\t},\n\n\t\tshowDetails() {\n\t\t\tthis.detailsOpen = true\n\t\t},\n\n\t\tremoveResource(collection, resource) {\n\t\t\tthis.$emit('removeResource', {\n\t\t\t\tcollectionId: collection.id,\n\t\t\t\tresourceType: resource.type,\n\t\t\t\tresourceId: resource.id,\n\t\t\t})\n\t\t},\n\n\t\topenRename() {\n\t\t\tthis.newName = this.collection.name\n\t\t},\n\n\t\trenameCollection() {\n\t\t\tif (this.newName) {\n\t\t\t\tthis.$emit('renameCollection', {\n\t\t\t\t\tcollectionId: this.collection.id,\n\t\t\t\t\tname: this.newName,\n\t\t\t\t})\n\t\t\t}\n\t\t\tthis.newName = null\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.fade-enter-active, .fade-leave-active {\n\ttransition: opacity .3s ease;\n}\n\n.fade-enter, .fade-leave-to\n\t/* .fade-leave-active below version 2.1.8 */\n{\n\topacity: 0;\n}\n\n.linked-icons {\n\tdisplay: flex;\n\n\timg {\n\t\tpadding: 12px;\n\t\theight: var(--default-clickable-area);\n\t\tdisplay: block;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\t\topacity: 0.7;\n\n\t\t&:hover {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\n.popovermenu {\n\tdisplay: none;\n\n\t&.open {\n\t\tdisplay: block;\n\t}\n}\n\nli.collection-list-item {\n\tflex-wrap: wrap;\n\theight: auto;\n\tcursor: pointer;\n\tmargin-bottom: 0 !important;\n\n\t.collection-avatar {\n\t\tmargin-top: 0;\n\t}\n\n\tform, .collection-item-name {\n\t\tflex-basis: 10%;\n\t\tflex-grow: 1;\n\t\tdisplay: flex;\n\t}\n\n\t.collection-item-name {\n\t\tpadding: 12px 9px;\n\t}\n\n\tinput {\n\t\tmargin-top: 4px;\n\t\tborder-color: var(--color-border-maxcontrast);\n\n\t\t&[type=text] {\n\t\t\tflex-grow: 1;\n\t\t}\n\t}\n\n\t.error {\n\t\tflex-basis: 100%;\n\t\twidth: 100%;\n\t}\n\n\t.resource-list-details {\n\t\tflex-basis: 100%;\n\t\twidth: 100%;\n\n\t\tli {\n\t\t\tdisplay: flex;\n\t\t\tmargin-inline-start: var(--default-clickable-area);\n\t\t\tborder-radius: 3px;\n\t\t\tcursor: pointer;\n\n\t\t\t&:hover {\n\t\t\t\tbackground-color: var(--color-background-dark);\n\t\t\t}\n\n\t\t\ta {\n\t\t\t\tflex-grow: 1;\n\t\t\t\tpadding: 3px;\n\t\t\t\tmax-width: calc(100% - 30px);\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\tspan {\n\t\t\tdisplay: inline-block;\n\t\t\tvertical-align: top;\n\t\t\tmargin-inline-end: 10px;\n\t\t}\n\n\t\tspan.resource-name {\n\t\t\ttext-overflow: ellipsis;\n\t\t\toverflow: hidden;\n\t\t\tposition: relative;\n\t\t\tvertical-align: top;\n\t\t\twhite-space: nowrap;\n\t\t\tflex-grow: 1;\n\t\t\tpadding: 4px;\n\t\t}\n\n\t\timg {\n\t\t\twidth: 24px;\n\t\t\theight: 24px;\n\t\t}\n\n\t\t.icon-close {\n\t\t\topacity: .7;\n\n\t\t\t&:hover, &:focus {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.should-shake {\n\tanimation: shake 0.6s 1 linear;\n}\n\n@keyframes shake {\n\t0% {\n\t\ttransform: translate(15px);\n\t}\n\t20% {\n\t\ttransform: translate(-15px);\n\t}\n\t40% {\n\t\ttransform: translate(7px);\n\t}\n\t60% {\n\t\ttransform: translate(-7px);\n\t}\n\t80% {\n\t\ttransform: translate(3px);\n\t}\n\t100% {\n\t\ttransform: translate(0px);\n\t}\n}\n</style>\n","/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { OCSResponse } from '@nextcloud/typings/ocs'\n\nimport axios, { type AxiosResponse } from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\n\n/**\n * Extracts the OCS data from a response\n *\n * @param response OCS response\n */\nfunction extractOcsData(response: AxiosResponse<OCSResponse>) {\n\treturn response.data.ocs.data\n}\n\n/**\n * Lists all collections\n *\n * @param collectionId Collection ID\n */\nexport function listCollectionService(collectionId: number) {\n\treturn axios.get(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId })).then(extractOcsData)\n}\n\n/**\n * Renames a collection\n *\n * @param collectionId Collection ID\n * @param collectionName New collection name\n */\nexport function renameCollectionService(collectionId: number, collectionName: string) {\n\treturn axios.put(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), { collectionName }).then(extractOcsData)\n}\n\n/**\n * Lists all collections for a resource\n *\n * @param resourceType Resource type\n * @param resourceId Resource ID\n */\nexport function getCollectionsByResourceService(resourceType: string, resourceId: string) {\n\treturn axios.get(generateOcsUrl('collaboration/resources/{resourceType}/{resourceId}', { resourceType, resourceId })).then(extractOcsData)\n}\n\n/**\n * Creates a collection\n *\n * @param resourceType Resource type\n * @param resourceId Resource ID\n * @param name Collection name\n */\nexport function createCollectionService(resourceType: string, resourceId: string, name: string) {\n\treturn axios.post(generateOcsUrl('collaboration/resources/{resourceType}/{resourceId}', { resourceType, resourceId }), { name }).then(extractOcsData)\n}\n\n/**\n * Adds a resource to a collection\n *\n * @param collectionId Collection ID\n * @param resourceType Resource type\n * @param resourceId Resource ID\n */\nexport function addResourceService(collectionId: number, resourceType: string, resourceId: string) {\n\treturn axios.post(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), { resourceType, resourceId }).then(extractOcsData)\n}\n\n/**\n * Removes a resource from a collection\n *\n * @param collectionId Collection ID\n * @param resourceType Resource type\n * @param resourceId Resource ID\n */\nexport function removeResourceService(collectionId: number, resourceType: string, resourceId: string) {\n\treturn axios.delete(generateOcsUrl('collaboration/resources/collections/{collectionId}', { collectionId }), { params: { resourceType, resourceId } }).then(extractOcsData)\n}\n\n/**\n * Searches for collections\n *\n * @param query Search query\n */\nexport function searchService(query: string) {\n\treturn axios.get(generateOcsUrl('collaboration/resources/collections/search/{query}', { query })).then(extractOcsData)\n}\n","/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { ref } from 'vue'\nimport {\n\taddResourceService,\n\tcreateCollectionService,\n\tgetCollectionsByResourceService,\n\tremoveResourceService,\n\trenameCollectionService,\n} from './service.ts'\n\n/**\n * Use collections composable\n */\nexport function useCollections() {\n\t// State\n\tconst storedCollections = ref([])\n\n\t// Mutations\n\tconst addCollections = (collections) => {\n\t\tstoredCollections.value = collections\n\t}\n\n\tconst addCollection = (collection) => {\n\t\tstoredCollections.value.push(collection)\n\t}\n\n\tconst removeCollection = (collectionId) => {\n\t\tstoredCollections.value = storedCollections.value.filter((item) => item.id !== collectionId)\n\t}\n\n\tconst updateCollection = (collection) => {\n\t\tconst index = storedCollections.value.findIndex((item) => item.id === collection.id)\n\t\tif (index !== -1) {\n\t\t\tstoredCollections.value[index] = collection\n\t\t} else {\n\t\t\taddCollection(collection)\n\t\t}\n\t}\n\n\t// Actions\n\tconst fetchCollectionsByResource = async ({ resourceType, resourceId }) => {\n\t\tconst collections = await getCollectionsByResourceService(resourceType, resourceId)\n\n\t\taddCollections(collections)\n\t}\n\n\tconst createCollection = async ({ baseResourceType, baseResourceId, resourceType, resourceId, name }) => {\n\t\tconst collection = await createCollectionService(baseResourceType, baseResourceId, name)\n\n\t\taddCollection(collection)\n\t\tawait addResourceToCollection({\n\t\t\tcollectionId: collection.id,\n\t\t\tresourceType,\n\t\t\tresourceId,\n\t\t})\n\t}\n\n\tconst renameCollection = async ({ collectionId, name }) => {\n\t\tconst collection = await renameCollectionService(collectionId, name)\n\n\t\tupdateCollection(collection)\n\t}\n\n\t/**\n\t * @param {*} param0\n\t */\n\tasync function addResourceToCollection({ collectionId, resourceType, resourceId }) {\n\t\tconst collection = await addResourceService(collectionId, resourceType, String(resourceId))\n\n\t\tupdateCollection(collection)\n\t}\n\n\tconst removeResourceFromCollection = async ({ collectionId, resourceType, resourceId }) => {\n\t\tconst collection = await removeResourceService(collectionId, resourceType, String(resourceId))\n\n\t\tif (collection.resources.length > 0) {\n\t\t\tupdateCollection(collection)\n\t\t} else {\n\t\t\tremoveCollection(collectionId)\n\t\t}\n\t}\n\n\treturn {\n\t\tstoredCollections,\n\t\tfetchCollectionsByResource,\n\t\tcreateCollection,\n\t\trenameCollection,\n\t\taddResourceToCollection,\n\t\tremoveResourceFromCollection,\n\t}\n}\n","\n\n<docs>\nProvides a Vue standalone component for Nextcloud Projects feature introduced in Nextcloud 16. Replaces deprecated `nextcloud-vue-collections` library.\n\nProjects feature is deprecated since Nextcloud 25, and superseded by Related resources. See [NcRelatedResourcesPanel](#/Components/NcRelatedResourcesPanel) documentation for more information.\n\n### Usage\n\nTo enable feature in Nextcloud, run following command:\n```sh\nocc config:system:set --value true 'projects.enabled'\n```\n</docs>\n\n<template>\n\t<ul v-if=\"collections && type && id\" id=\"collection-list\" class=\"collection-list\">\n\t\t<li @click=\"showSelect\">\n\t\t\t<div class=\"avatar\">\n\t\t\t\t<span class=\"icon-projects\" />\n\t\t\t</div>\n\t\t\t<div id=\"collection-select-container\">\n\t\t\t\t<NcSelect\n\t\t\t\t\tref=\"select\"\n\t\t\t\t\tv-model=\"value\"\n\t\t\t\t\t:aria-label-combobox=\"t('Add to a project')\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t\t:placeholder=\"placeholder\"\n\t\t\t\t\tlabel=\"title\"\n\t\t\t\t\t:limit=\"5\"\n\t\t\t\t\t@close=\"isSelectOpen = false\"\n\t\t\t\t\t@open=\"isSelectOpen = true\"\n\t\t\t\t\t@option:selected=\"select\"\n\t\t\t\t\t@search=\"search\">\n\t\t\t\t\t<template #selected-option=\"option\">\n\t\t\t\t\t\t<span class=\"option__desc\">\n\t\t\t\t\t\t\t<span class=\"option__title\">{{ option.title }}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #option=\"option\">\n\t\t\t\t\t\t<span class=\"option__wrapper\">\n\t\t\t\t\t\t\t<span v-if=\"option.class\" :class=\"option.class\" class=\"avatar\" />\n\t\t\t\t\t\t\t<NcAvatar v-else-if=\"option.method !== 2\" allow-placeholder :display-name=\"option.title\" />\n\t\t\t\t\t\t\t<span class=\"option__title\">{{ option.title }}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</template>\n\t\t\t\t\t<p class=\"hint\">\n\t\t\t\t\t\t{{ t('Connect items to a project to make them easier to find') }}\n\t\t\t\t\t</p>\n\t\t\t\t</NcSelect>\n\t\t\t</div>\n\t\t</li>\n\t\t<transition name=\"fade\">\n\t\t\t<li v-if=\"error\" class=\"error\">\n\t\t\t\t{{ error }}\n\t\t\t</li>\n\t\t</transition>\n\t\t<NcCollectionListItem\n\t\t\tv-for=\"collection in collections\"\n\t\t\t:key=\"collection.id\"\n\t\t\t:collection=\"collection\"\n\t\t\t:error=\"collectionsError[collection.id]\"\n\t\t\t@rename-collection=\"renameCollectionFromItem\"\n\t\t\t@remove-resource=\"removeResourceFromCollection\" />\n\t</ul>\n</template>\n\n<script>\nimport debounce from 'debounce'\nimport { ref } from 'vue'\nimport NcCollectionListItem from './NcCollectionListItem.vue'\nimport { t } from '../../l10n.ts'\nimport { logger } from '../../utils/logger.ts'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcSelect from '../NcSelect/index.js'\nimport { searchService } from './service.ts'\nimport { useCollections } from './useCollections.js'\n\nconst METHOD_CREATE_COLLECTION = 0\nconst METHOD_ADD_TO_COLLECTION = 1\n\nexport default {\n\tname: 'NcCollectionList',\n\n\tcomponents: {\n\t\tNcCollectionListItem,\n\t\tNcAvatar,\n\t\tNcSelect,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Resource type identifier\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Unique id of the resource\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Name of the resource\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Whether the component is active (to start fetch resources)\n\t\t */\n\t\tisActive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tsetup() {\n\t\tconst {\n\t\t\tstoredCollections,\n\t\t\tfetchCollectionsByResource,\n\t\t\tcreateCollection,\n\t\t\taddResourceToCollection,\n\t\t\tremoveResourceFromCollection,\n\t\t\trenameCollection,\n\t\t} = useCollections()\n\n\t\tconst searchCollections = ref([])\n\t\tconst search = debounce(function(query, loading) {\n\t\t\tif (query !== '') {\n\t\t\t\tloading(true)\n\t\t\t\tsearchService(query).then((collections) => {\n\t\t\t\t\tsearchCollections.value = collections\n\t\t\t\t}).catch((error) => {\n\t\t\t\t\tlogger.error('Failed to search for collections', { error })\n\t\t\t\t}).finally(() => {\n\t\t\t\t\tloading(false)\n\t\t\t\t})\n\t\t\t}\n\t\t}, 500)\n\n\t\treturn {\n\t\t\tstoredCollections,\n\t\t\tfetchCollectionsByResource,\n\t\t\tcreateCollection,\n\t\t\taddResourceToCollection,\n\t\t\tremoveResourceFromCollection,\n\t\t\trenameCollection,\n\t\t\tsearchCollections,\n\t\t\tsearch,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tselectIsOpen: false,\n\t\t\tgeneratingCodes: false,\n\t\t\tcodes: undefined,\n\t\t\tvalue: null,\n\t\t\tmodel: {},\n\t\t\tcollectionsError: {},\n\t\t\terror: null,\n\t\t\tisSelectOpen: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcollections() {\n\t\t\treturn this.storedCollections.filter((collection) => collection.resources\n\t\t\t\t.some((resource) => resource && resource.id === String(this.id) && resource.type === this.type))\n\t\t},\n\n\t\tplaceholder() {\n\t\t\treturn this.isSelectOpen\n\t\t\t\t? t('Type to search for existing projects')\n\t\t\t\t: t('Add to a project')\n\t\t},\n\n\t\toptions() {\n\t\t\tconst options = []\n\t\t\twindow.OCP.Collaboration.getTypes().sort().forEach((type) => {\n\t\t\t\toptions.push({\n\t\t\t\t\tmethod: METHOD_CREATE_COLLECTION,\n\t\t\t\t\ttype,\n\t\t\t\t\ttitle: window.OCP.Collaboration.getLabel(type),\n\t\t\t\t\tclass: window.OCP.Collaboration.getIcon(type),\n\t\t\t\t\taction: () => window.OCP.Collaboration.trigger(type),\n\t\t\t\t})\n\t\t\t})\n\t\t\tfor (const index in this.searchCollections) {\n\t\t\t\tif (!this.collections.find((collection) => collection.id === this.searchCollections[index].id)) {\n\t\t\t\t\toptions.push({\n\t\t\t\t\t\tmethod: METHOD_ADD_TO_COLLECTION,\n\t\t\t\t\t\ttitle: this.searchCollections[index].name,\n\t\t\t\t\t\tcollectionId: this.searchCollections[index].id,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn options\n\t\t},\n\n\t\tresourceIdentifier() {\n\t\t\treturn {\n\t\t\t\tresourceType: this.type,\n\t\t\t\tresourceId: this.id,\n\t\t\t\tisActive: this.isActive,\n\t\t\t}\n\t\t},\n\t},\n\n\twatch: {\n\t\tresourceIdentifier: {\n\t\t\tdeep: true,\n\t\t\timmediate: true,\n\t\t\thandler(resourceIdentifier) {\n\t\t\t\tif (!resourceIdentifier.isActive || !resourceIdentifier.resourceId || !resourceIdentifier.resourceType) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.fetchCollectionsByResource(resourceIdentifier)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tselect(selectedOption) {\n\t\t\tif (selectedOption.method === METHOD_CREATE_COLLECTION) {\n\t\t\t\tselectedOption.action().then((resourceId) => {\n\t\t\t\t\tthis.createCollection({\n\t\t\t\t\t\tbaseResourceType: this.type,\n\t\t\t\t\t\tbaseResourceId: this.id,\n\t\t\t\t\t\tresourceType: selectedOption.type,\n\t\t\t\t\t\tresourceId,\n\t\t\t\t\t\tname: this.name,\n\t\t\t\t\t}).catch((e) => {\n\t\t\t\t\t\tthis.setError(t('Failed to create a project'), e)\n\t\t\t\t\t})\n\t\t\t\t}).catch((e) => {\n\t\t\t\t\tlogger.error('[NcCollectionList] No resource selected', e)\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tif (selectedOption.method === METHOD_ADD_TO_COLLECTION) {\n\t\t\t\tthis.addResourceToCollection({\n\t\t\t\t\tcollectionId: selectedOption.collectionId, resourceType: this.type, resourceId: this.id,\n\t\t\t\t}).catch((e) => {\n\t\t\t\t\tthis.setError(t('Failed to add the item to the project'), e)\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tthis.value = null\n\t\t},\n\n\t\tshowSelect() {\n\t\t\tthis.selectIsOpen = true\n\t\t\tthis.$refs.select.$el.focus()\n\t\t},\n\n\t\tsetError(error, e) {\n\t\t\tlogger.error(error, { error: e })\n\t\t\tthis.error = error\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.error = null\n\t\t\t}, 5000)\n\t\t},\n\n\t\trenameCollectionFromItem({ collectionId, name }) {\n\t\t\tthis.renameCollection({ collectionId, name })\n\t\t\t\t.catch((e) => {\n\t\t\t\t\tlogger.error(t('Failed to rename the project'), { error: e })\n\t\t\t\t\tthis.collectionsError[collectionId] = t('Failed to rename the project')\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tthis.collectionsError[collectionId] = null\n\t\t\t\t\t}, 5000)\n\t\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.collection-list * {\n\tbox-sizing: border-box;\n}\n\n.collection-list > li {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n\n\t& > .avatar {\n\t\tmargin-top: 0;\n\t}\n}\n\n#collection-select-container {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.v-select {\n\t// NcAvatar in the dropdown\n\tspan.avatar {\n\t\tdisplay: block;\n\t\tpadding: 16px;\n\t\topacity: .7;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: center;\n\n\t\t&:hover {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\np.hint {\n\tz-index: 1;\n\t// fix alignment\n\tmargin-top: -16px;\n\tpadding: 8px 8px;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: normal;\n}\n\ndiv.avatar {\n\twidth: 32px;\n\theight: 32px;\n\tmargin: 0;\n\tpadding: 8px;\n\tbackground-color: var(--color-background-dark);\n\tmargin-top: 30px;\n}\n\n/** TODO provide white icon in core */\n.icon-projects {\n\tdisplay: block;\n\tpadding: 8px;\n\tbackground-repeat: no-repeat;\n\tbackground-position: center;\n}\n\n.option__wrapper {\n\tdisplay: flex;\n\n\t.avatar {\n\t\tdisplay: block;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t\tbackground-color: var(--color-background-darker) !important;\n\t}\n\n\t.option__title {\n\t\tpadding: 4px;\n\t}\n}\n\n.fade-enter-active, .fade-leave-active {\n\ttransition: opacity .5s;\n}\n\n.fade-enter, .fade-leave-to {\n\topacity: 0;\n}\n\n</style>\n"],"names":["_sfc_main","_hoisted_1","_hoisted_8","_openBlock","_createElementBlock","_createVNode","_toDisplayString","_createElementVNode","_hoisted_2","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_normalizeClass","_hoisted_4","_Transition","_hoisted_5","_hoisted_6","_withCtx"],"mappings":"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"}

package/dist/chunks/NcColorPicker-DpSDaGrh.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcColorPicker-DpSDaGrh.mjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["\n\n<docs>\n\n### General description\n\nThis component allows the user to choose a color. It consists of 2\nactual pickers:\n\n- One simple picker with a predefined palette of colors;\n- One more advanced picker that provides the full color spectrum;\n\n### Usage\n\n* Using v-model and passing in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<NcColorPicker v-model=\"color\" :palette=\"customPalette\">\n\t\t\t<NcButton> Click Me for a custom palette </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\tcustomPalette: [\n\t\t\t\t'#E40303',\n\t\t\t\t'#FF8C00',\n\t\t\t\t'#FFED00',\n\t\t\t\t'#008026',\n\t\t\t\t'#24408E',\n\t\t\t\t'#732982',\n\t\t\t\t'#5BCEFA',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#FFFFFF',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#5BCEFA',\n\t\t\t],\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using v-model for both color and open state and emitting an event that updates the color\n\n```vue\n<template>\n\t<div class=\"container1\">\n\t\t<NcButton @click=\"open = !open\"> Click Me </NcButton>\n\t\t<NcColorPicker v-model=\"color\" v-model:open=\"open\" v-slot=\"{ attrs }\">\n\t\t\t<div v-bind=\"attrs\" :style=\"{'background-color': color}\" class=\"color1\" />\n\t\t</NcColorPicker>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\topen: false\n\t\t}\n\t}\n}\n</script>\n<style>\n.container1 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color1 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Allowing to clear the selected color\n\n```vue\n<template>\n\t<div class=\"container1\">\n\t\t<NcColorPicker clearable v-model=\"color\">\n\t\t\t<NcButton>Click Me</NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color-preview\" :class=\"{'color-preview--none': !color}\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\topen: false\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n.container1 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color-preview {\n\twidth: 100px;\n\theight: 34px;\n\tborder: 1px solid black;\n\tborder-radius: 6px;\n}\n\n.color-preview--none {\n\tbackground: repeating-conic-gradient(#808080 0 25%, #0000 0 50%) 50% / 20px 20px;\n}\n</style>\n```\n\n* Using advanced fields including HEX, RGB, and HSL:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\"\n\t\t\t:advanced-fields=\"true\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9'\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Payload } from '@ckpack/vue-color'\nimport type { Color } from '../../utils/colors.ts'\n\nimport { Chrome as VueChrome } from '@ckpack/vue-color'\nimport { mdiArrowLeft, mdiCheck, mdiCloseCircleOutline, mdiDotsHorizontal } from '@mdi/js'\nimport { computed, ref } from 'vue'\nimport { t } from '../../l10n.ts'\nimport { COLOR_BLACK, COLOR_WHITE, defaultPalette } from '../../utils/colors.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { logger } from '../../utils/logger.ts'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\nimport NcPopover from '../NcPopover/index.js'\n\n/**\n * A HEX color that represents the initial value of the picker.\n *\n * If the `clearable` prop is set then also `undefined` might be given or emitted for when the color gets cleared.\n */\nconst currentColor = defineModel<string | undefined>({ required: true })\n\n/**\n * The open state of the color picker.\n */\nconst open = defineModel<boolean>('open')\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t */\n\tadvancedFields?: boolean\n\n\t/**\n\t * Allow to clear the current color.\n\t * When set the `update:modelValue` and `submit` event might emit also `undefined`.\n\t */\n\tclearable?: boolean\n\n\t/**\n\t * Selector for the popover container\n\t */\n\tcontainer?: string | Element\n\n\t/**\n\t * Provide a custom array of colors to show.\n\t * Can be either an array of string hexadecimal colors,\n\t * or an array of object with a `color` property with hexadecimal color string,\n\t * and a `name` property for accessibility.\n\t *\n\t * @type {string[] | {color: string, name: string}[]}\n\t */\n\tpalette?: string[] | Color[]\n\n\t/**\n\t * Limit selectable colors to only the provided palette\n\t */\n\tpaletteOnly?: boolean\n}>(), {\n\tcontainer: 'body',\n\tpalette: () => [],\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the submit button was pressed.\n\t * The payload is the same as the current modelValue.\n\t *\n\t * The value might be undefined if the `clearable` prop is set.\n\t */\n\tsubmit: [string | undefined]\n\n\t/**\n\t * The color picker was fully closed and all transitions are finished.\n\t */\n\tclosed: []\n}>()\n\nconst HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i\n\n/**\n * Unique id used to identify different color pickers\n */\nconst id = createElementId()\n\n/**\n * Is the advanced picker is open\n */\nconst advanced = ref(false)\n\n/**\n * Normalized palette by converting array of hex colors to color objects.\n * This also ensures there is a default palette if needed (no palette passed).\n */\nconst normalizedPalette = computed(() => {\n\tlet palette = props.palette\n\tfor (const color of palette) {\n\t\tif ((typeof color === 'string' && !color.match(HEX_REGEX))\n\t\t\t|| (typeof color === 'object' && !color.color?.match(HEX_REGEX))) {\n\t\t\tlogger.error('[NcColorPicker] Invalid palette passed', { color })\n\t\t\tpalette = []\n\t\t\tbreak\n\t\t}\n\t}\n\n\tif (palette.length === 0) {\n\t\tpalette = props.clearable\n\t\t\t? [...defaultPalette, COLOR_BLACK, COLOR_WHITE]\n\t\t\t: [...defaultPalette]\n\t}\n\n\treturn palette.map((item: Color | string) => ({\n\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\tname: typeof item === 'object' && item.name\n\t\t\t? item.name\n\t\t\t: t('A color with a HEX value {hex}', { hex: typeof item === 'string' ? item : item.color }),\n\t}))\n})\n\n/**\n * Submit a picked colour and close picker\n *\n * @param hideCallback - callback to close popover\n */\nfunction handleConfirm(hideCallback: () => void) {\n\temit('submit', currentColor.value)\n\thideCallback()\n\tadvanced.value = false\n}\n\n/**\n * Toggle the currently selected palette color.\n *\n * @param color - The color to toggle\n */\nfunction toggleColor(color: string | Color) {\n\tcolor = typeof color === 'string' ? color : color.color\n\n\tif (props.clearable && currentColor.value === color) {\n\t\tcurrentColor.value = undefined\n\t} else {\n\t\tcurrentColor.value = color\n\t}\n}\n\n/**\n * @param color - The picked color from the Chrome component\n */\nfunction pickCustomColor(color: Payload): void {\n\tcurrentColor.value = color.hex\n}\n\n/**\n * Get the text color with the most constrast for a given background color.\n *\n * @param color - The background color\n */\nfunction getContrastColor(color: string): string {\n\treturn calculateLuma(color) > 0.5\n\t\t? COLOR_BLACK.color\n\t\t: COLOR_WHITE.color\n}\n\n/**\n * Calculate luminance of provided hex color\n *\n * @param color - The hex color\n */\nfunction calculateLuma(color: string) {\n\tconst [red, green, blue] = hexToRGB(color)\n\treturn (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255\n}\n\n/**\n * Convert hex color to RGB\n *\n * @param hex - The hex color\n */\nfunction hexToRGB(hex: string): [number, number, number] {\n\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\tif (!result) {\n\t\treturn [0, 0, 0]\n\t}\n\n\treturn [parseInt(result[1]!, 16), parseInt(result[2]!, 16), parseInt(result[3]!, 16)]\n}\n</script>\n\n<template>\n\t<NcPopover\n\t\tv-model:shown=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\t@apply-hide=\"emit('closed')\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<template #default=\"slotProps\">\n\t\t\t<div\n\t\t\t\trole=\"dialog\"\n\t\t\t\tclass=\"color-picker\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Color picker')\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'color-picker--advanced-fields': advanced && advancedFields,\n\t\t\t\t\t'color-picker--clearable': clearable,\n\t\t\t\t}\">\n\t\t\t\t<Transition name=\"slide\" mode=\"out-in\">\n\t\t\t\t\t<div v-if=\"!advanced\" class=\"color-picker__simple\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tv-for=\"({ color, name }, index) in normalizedPalette\"\n\t\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t\tclass=\"color-picker__simple-color-circle\"\n\t\t\t\t\t\t\t:class=\"{ 'color-picker__simple-color-circle--active': color === currentColor }\"\n\t\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\t\tbackgroundColor: color,\n\t\t\t\t\t\t\t\tcolor: getContrastColor(color),\n\t\t\t\t\t\t\t}\">\n\t\t\t\t\t\t\t<NcIconSvgWrapper v-if=\"color === currentColor\" :path=\"mdiCheck\" />\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tclass=\"hidden-visually\"\n\t\t\t\t\t\t\t\t:aria-label=\"name\"\n\t\t\t\t\t\t\t\t:name=\"`color-picker-${id}`\"\n\t\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t\t@click=\"toggleColor(color)\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t\t<label v-if=\"clearable\" class=\"color-picker__clear\" :title=\"t('No color')\">\n\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t:size=\"currentColor ? 28 : 34 /* size is adusted so that inner mdi icon aligns with color circles */\"\n\t\t\t\t\t\t\t\t:path=\"mdiCloseCircleOutline\" />\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tclass=\"hidden-visually\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('No color')\"\n\t\t\t\t\t\t\t\t:name=\"`color-picker-${id}`\"\n\t\t\t\t\t\t\t\t:checked=\"!currentColor\"\n\t\t\t\t\t\t\t\t@click=\"currentColor = undefined\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<VueChrome\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\tclass=\"color-picker__advanced\"\n\t\t\t\t\t\t:disable-alpha=\"true\"\n\t\t\t\t\t\t:disable-fields=\"!advancedFields\"\n\t\t\t\t\t\t:model-value=\"currentColor ?? '#000000'\"\n\t\t\t\t\t\t@update:model-value=\"pickCustomColor\" />\n\t\t\t\t</Transition>\n\t\t\t\t<div v-if=\"!paletteOnly\" class=\"color-picker__navigation\">\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-if=\"advanced\"\n\t\t\t\t\t\t:aria-label=\"t('Back')\"\n\t\t\t\t\t\t:title=\"t('Back')\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"advanced = false\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiArrowLeft\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\t:aria-label=\"t('More options')\"\n\t\t\t\t\t\t:title=\"t('More options')\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"advanced = true\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDotsHorizontal\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t@click=\"handleConfirm(slotProps.hide)\">\n\t\t\t\t\t\t{{ t('Choose') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t</NcPopover>\n</template>\n\n<style lang=\"scss\" scoped>\n.color-picker {\n\tdisplay: flex;\n\toverflow: hidden;\n\talign-content: flex-end;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tpadding: var(--border-radius-element); // align with NcPopover border radius\n\tmin-width: calc(4 * var(--default-clickable-area) + 2 * var(--border-radius-element)); // space for 4 color circles\n\n\t&--clearable {\n\t\tmin-width: calc(5 * var(--default-clickable-area) + 2 * var(--border-radius-element));\n\t}\n\n\t&--advanced-fields {\n\t\tmin-width: 264px;\n\t}\n\n\t&__clear {\n\t\tcolor: var(--color-main-text);\n\n\t\t&:hover:not(:has(:checked)) {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t&__simple {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(auto-fit, var(--default-clickable-area));\n\t\tgrid-auto-rows: var(--default-clickable-area);\n\n\t\t&-color-circle {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: calc(var(--default-clickable-area) - 10px);\n\t\t\theight: calc(var(--default-clickable-area) - 10px);\n\t\t\tmin-height: calc(var(--default-clickable-area) - 10px);\n\t\t\tmargin: auto;\n\t\t\tpadding: 0;\n\t\t\tcolor: white;\n\t\t\tborder: 1px solid rgba(0, 0, 0, 0.25);\n\t\t\tborder-radius: 50%;\n\t\t\tfont-size: 16px;\n\t\t\t&:focus-within {\n\t\t\t\toutline: 2px solid var(--color-main-text);\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\topacity: .6;\n\t\t\t}\n\t\t\t&--active {\n\t\t\t\twidth: calc(var(--default-clickable-area) - 6px);\n\t\t\t\theight: calc(var(--default-clickable-area) - 6px);\n\t\t\t\tmin-height: calc(var(--default-clickable-area) - 6px);\n\t\t\t\ttransition: all 100ms ease-in-out;\n\t\t\t\topacity: 1 !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__advanced {\n\t\tbox-shadow: none !important;\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: var(--default-grid-baseline);\n\t\tjustify-content: space-between;\n\t\tmargin-top: calc(2 * var(--default-grid-baseline));\n\t}\n}\n\n:deep() .vc {\n\t&-chrome {\n\t\twidth: unset;\n\t\tbackground-color: var(--color-main-background);\n\n\t\t&-color-wrap {\n\t\t\twidth: 30px;\n\t\t\theight: 30px;\n\t\t}\n\n\t\t&-active-color {\n\t\t\tborder-radius: 17px;\n\t\t}\n\n\t\t&-body {\n\t\t\tpadding: 14px 0 0 0;\n\t\t\tbackground-color: var(--color-main-background);\n\n\t\t\t.vc-input__input {\n\t\t\t\t--input-border-radius: var(--border-radius-element);\n\t\t\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\t\t\twidth: 100%;\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding-inline: calc(var(--border-radius-element) + var(--input-border-width-offset));\n\t\t\t\tpadding-block: var(--input-border-width-offset);\n\t\t\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\t\t\t\tborder-radius: var(--input-border-radius);\n\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\tbox-shadow: none;\n\n\t\t\t\t&:active:not([disabled]),\n\t\t\t\t&:hover:not([disabled]),\n\t\t\t\t&:focus:not([disabled]) {\n\t\t\t\t\t// Reset padding offset when focused\n\t\t\t\t\t--input-border-width-offset: 0px;\n\t\t\t\t\tborder-color: var(--color-main-text);\n\t\t\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\n\t\t\t\t\t& + .vc-input__label {\n\t\t\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vc-input__label {\n\t\t\t\tposition: absolute;\n\t\t\t\tinset-inline: var(--border-width-input-focused, 2px);\n\t\t\t\tinset-block-start: calc(-1.5 * var(--font-size-small, 13px) / 2);\n\t\t\t\tmax-width: fit-content;\n\t\t\t\tmargin-inline: calc(var(--border-radius-element) - var(--default-grid-baseline));\n\t\t\t\tmargin-block: 0;\n\t\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t\t\tfont-family: var(--font-face);\n\t\t\t\tfont-size: var(--font-size-small, 13px);\n\t\t\t\tline-height: 1.5;\n\t\t\t\tfont-weight: 500;\n\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t\tbackground-color: var(--color-main-background);\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&-toggle-btn {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tmargin-inline-start: 6px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\n\t\t&-toggle-icon {\n\t\t\twidth: 24px;\n\t\t\theight: 24px;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t&-toggle-icon-highlight {\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tinset: 0;\n\t\t}\n\n\t\t&-saturation {\n\t\t\t&-wrap {\n\t\t\t\tborder-radius: 3px;\n\t\t\t}\n\n\t\t\t&-circle {\n\t\t\t\twidth: 20px;\n\t\t\t\theight: 20px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.slide {\n\t&-enter-from {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-to {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave-from {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave-to {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-active,\n\t&-leave-active {\n\t\ttransition: all 50ms ease-in-out;\n\t}\n}\n\n</style>\n"],"names":["_useModel","_createBlock","_unref","container","_withCtx","_renderSlot","_createElementVNode","advancedFields","clearable","_createVNode","_Transition","_openBlock","_createElementBlock","_Fragment","_normalizeClass","_normalizeStyle","VueChrome","paletteOnly"],"mappings":"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"}

package/dist/chunks/NcDashboardWidget-CIUrPOLo.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcDashboardWidget-CIUrPOLo.mjs","sources":["../../node_modules/vue-material-design-icons/Check.vue","../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon check-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"CheckIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","\n\n<docs>\n## 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://example.tld',\n\t\tavatarUrl: 'https://example.tld/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://example.tld',\n\t\tavatarUrl: 'https://example.tld/img.jpg',\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\n\t\t<NcEmptyContent\n\t\t\tv-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\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\n\t\t<ul>\n\t\t\t<li v-for=\"item in displayedItems\" :key=\"item.id\">\n\t\t\t\t\n\t\t\t\t<slot name=\"default\" :item=\"item\">\n\t\t\t\t\t<NcDashboardWidgetItem\n\t\t\t\t\t\tv-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\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> </h3>\n\t\t\t\t\t<p class=\"message\">\n \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\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent\n\t\t\t\tv-if=\"emptyContentMessage\"\n\t\t\t\t:description=\"emptyContentMessage\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t\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\n\t\t<a\n\t\t\tv-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 Check from 'vue-material-design-icons/Check.vue'\nimport { t } from '../../l10n.ts'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.ts'\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\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\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\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\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\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\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\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\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-element);\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":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_createBlock","_renderSlot","_createVNode","_Fragment","_renderList","_toHandlers"],"mappings":";;;;;;AAoBA,MAAKA,cAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA;IAER,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;IAEX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;;;AAxBY,MAAAC,eAAA,EAAA,GAAE,0DAAyD;;;sBAXrEC,mBAeO,QAfPC,WAAc,KAAA,QAAM;AAAA,IACb,eAAa,OAAA,QAAK,OAAA;AAAA,IAClB,cAAY,OAAA;AAAA,IACb,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAA,MAAK,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAA;AAAA,MACP,OAAM;AAAA,MACL,OAAO,OAAA;AAAA,MACP,QAAQ,OAAA;AAAA,MACT,SAAQ;AAAA;MACXE,mBAEO,QAFPH,cAEO;AAAA,QADQ,OAAA,SAAbI,UAAA,GAAAH,mBAAuC,qCAAhB,OAAA,KAAK,GAAA,CAAA;;;;;;;ACoNpC,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EACN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS,MAAM;AAAE,eAAO,CAAA;AAAA,MAAG;AAAA;;;;;IAO5B,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;IAQV,eAAe;AAAA,MACd,MAAM;AAAA,MACN,SAAS,EAAE,cAAc;AAAA;;;;IAM1B,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS,MAAM;AAAE,eAAO,CAAA;AAAA,MAAG;AAAA;;;;;IAO5B,0BAA0B;AAAA,MACzB,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,qBAAqB;AAAA,MACpB,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,yBAAyB;AAAA,MACxB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,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,IACR;AAAA,IAEA,iBAAiB;AAChB,YAAM,UAAW,KAAK,eAAe,KAAK,MAAM,UAAU,KAAK,gBAC5D,KAAK,gBAAgB,IACrB,KAAK;AACR,aAAO,KAAK,MAAM,MAAM,GAAG,OAAO;AAAA,IACnC;AAAA,IAEA,2BAA2B;AAC1B,aAAO,KAAK,4BAA4B,KAAK,0BAA0B,KAAK,MAAM,WAAW;AAAA,IAC9F;AAAA,IAEA,yBAAyB;AACxB,aAAO,KAAK,2BAA2B,KAAK;AAAA,IAC7C;AAAA,IAEA,gBAAgB;AACf,aAAO,KAAK,2BAA2B,IAAI;AAAA,IAC5C;AAAA,IAEA,WAAW;AACV,aAAO,KAAK,eAAe,KAAK,MAAM,UAAU,KAAK;AAAA,IACtD;AAAA;AAEF;AAvLM,MAAA,aAAA,EAAA,OAAM,mBAAkB;;;;;;;;AAA7B,SAAAG,UAAA,GAAAH,mBA0DM,OA1DN,YA0DM;AAAA,IAtDE,SAAA,yCADPI,YAUiB,2BAAA;AAAA;MARf,aAAa,SAAA;AAAA,MACd,OAAM;AAAA;MACK,cAEV,MAEO;AAAA,QAFPC,WAEO,yCAFP,MAEO;AAAA,UADNC,YAAS,gBAAA;AAAA;;;;IAKZJ,mBAUK,MAAA,MAAA;AAAA,wBATJF,mBAQKO,UAAA,MAAAC,WARc,SAAA,gBAAc,CAAtB,SAAI;4BAAfR,mBAQK,MAAA;AAAA,UAR+B,KAAK,KAAK;AAAA;UAE7CK,WAKO,KAAA,QAAA,WAAA,EALe,KAAU,GAAhC,MAKO;AAAA,YAJNC,YAGmB,kCAHnBL,WAGmB,EAAA,SAAA,QAFV,MAAI,EACX,aAAW,OAAA,YACZQ,WAAM,SAAA,QAAQ,CAAA,GAAA,MAAA,IAAA,CAAA,WAAA,CAAA;AAAA;;;;IAKP,OAAA,wBAAXT,mBAUM,OAAA,YAAA;AAAA,oBATLA,mBAQMO,UAAA,MAAAC,WARW,GAAC,CAAN,MAAC;eAAbN,mBAQM,OAAA;AAAA,UARe,KAAK;AAAA,UAAG,OAAM;AAAA;UAClCI,YAA2C,qBAAA;AAAA,YAAjC,OAAM;AAAA,YAAe,MAAM;AAAA;oCACrCJ,mBAKM,OAAA,EALD,OAAM,mBAAe;AAAA,YACzBA,mBAAe,YAAX,GAAM;AAAA,YACVA,mBAEI,KAAA,EAFD,OAAM,UAAS,GAAC,KAEnB;AAAA;;;UAKc,OAAA,MAAM,WAAM,IAA7BG,WASO,0CATP,MASO;AAAA,MAPC,OAAA,oCADPD,YAOiB,2BAAA;AAAA;QALf,aAAa,OAAA;AAAA;QACH,cAEV,MAAgC;AAAA,UAAhCC,WAAgC,KAAA,QAAA,oBAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;eAMvB,SAAA,yBADZL,mBAOI,KAAA;AAAA;MALF,MAAM,OAAA;AAAA,MACP,QAAO;AAAA,MACP,OAAM;AAAA,MACN,UAAS;AAAA,uBACN,OAAA,aAAa,GAAA,GAAA,UAAA;;;;","x_google_ignoreList":[0]}

package/dist/chunks/NcDashboardWidgetItem-DdYM1QYk.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcDashboardWidgetItem-DdYM1QYk.mjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue"],"sourcesContent":["\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\n\t\t\t:is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl || undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\tclass=\"item-list__entry\"\n\t\t\t:class=\"{ 'item-list__entry--has-actions-menu': gotMenu }\"\n\t\t\t@click=\"onLinkClick\">\n\t\t\t\n\t\t\t<slot name=\"avatar\" :avatar-url=\"avatarUrl\" :avatar-username=\"avatarUsername\">\n\t\t\t\t<NcAvatar\n\t\t\t\t\tclass=\"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:hide-status=\"gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img\n\t\t\t\tv-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\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcActionButton\n\t\t\t\t\t\tv-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 NcActionButton from '../NcActionButton/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcAvatar from '../NcAvatar/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\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\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\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\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\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\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\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\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\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions\n\t\t},\n\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-element);\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","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_renderSlot","_createVNode","_createElementVNode","_Fragment","_renderList","_withModifiers","_createTextVNode","_toDisplayString"],"mappings":"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"}

package/dist/chunks/NcDateTimePicker-DtQaoKbG.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcDateTimePicker-DtQaoKbG.mjs","sources":["../../src/components/NcDateTimePicker/NcDateTimePicker.vue"],"sourcesContent":["\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 accepted model value\n\tModelValue as LibraryModelValue,\n\t// The emitted object for time picker\n\tTimeObj as LibraryTimeObject,\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\tgetCanonicalLocale,\n\tgetDayNames,\n\tgetDayNamesMin,\n\tgetFirstDay,\n} from '@nextcloud/l10n'\nimport VueDatePicker from '@vuepic/vue-datepicker'\nimport { computed, useTemplateRef } from 'vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcTimezonePicker from '../NcTimezonePicker/NcTimezonePicker.vue'\nimport { t } from '../../l10n.ts'\nimport NcButton from '../NcButton/index.ts'\n\ntype LibraryFormatOptions = VueDatePickerProps['format']\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 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 *\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 *\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] | null\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: null,\n\t// set by fallbackPlaceholder\n\tplaceholder: undefined,\n\ttype: 'date',\n})\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\nconst targetElement = useTemplateRef('target')\nconst pickerInstance = useTemplateRef('picker')\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 === null && 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') {\n\t\tconst time = props.modelValue instanceof Date ? props.modelValue : new Date()\n\t\treturn {\n\t\t\thours: time.getHours(),\n\t\t\tminutes: time.getMinutes(),\n\t\t\tseconds: time.getSeconds(),\n\t\t} satisfies LibraryTimeObject\n\t} else if (props.type === 'time-range') {\n\t\tconst time = [props.modelValue].flat()\n\t\tif (time.length !== 2) {\n\t\t\tconst start = new Date()\n\t\t\tconst end = new Date(start)\n\t\t\tend.setHours(end.getHours() + 1)\n\t\t\ttime.splice(0, 2, start, end)\n\t\t}\n\n\t\treturn (time as [Date, Date]).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} 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 *\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 weekStart = getFirstDay()\n\nconst dayNames = [...getDayNamesMin()]\n// see https://github.com/Vuepic/vue-datepicker/issues/1159\nfor (let i = 0; i < weekStart; i++) {\n\tdayNames.push(dayNames.shift() as string)\n}\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\n/**\n * Select the current value.\n * This is used by the confirmation button if `confirmation` was set.\n */\nfunction selectDate() {\n\tpickerInstance.value!.selectDate()\n}\n\n/**\n * Cancel the current selection by closing the overlay.\n * This is used by the confirmation button if `confirmation` was set.\n */\nfunction cancelSelection() {\n\tpickerInstance.value!.closeMenu()\n}\n</script>\n\n<template>\n\t<div class=\"vue-date-time-picker__wrapper\">\n\t\t<VueDatePicker\n\t\t\tref=\"picker\"\n\t\t\t:aria-labels\n\t\t\t:auto-apply=\"!confirm\"\n\t\t\tclass=\"vue-date-time-picker\"\n\t\t\t:class=\"{ 'vue-date-time-picker--clearable': clearable }\"\n\t\t\t:cancel-text=\"t('Cancel')\"\n\t\t\t:clearable\n\t\t\t:day-names\n\t\t\t:placeholder=\"placeholder ?? placeholderFallback\"\n\t\t\t:format=\"realFormat\"\n\t\t\t:locale\n\t\t\t:minutes-increment=\"minuteStep\"\n\t\t\t:model-value=\"value\"\n\t\t\t:now-button-label=\"t('Now')\"\n\t\t\t:select-text=\"t('Pick')\"\n\t\t\tsix-weeks=\"fair\"\n\t\t\t:teleport=\"appendToBody ? (targetElement || undefined) : false\"\n\t\t\ttext-input\n\t\t\t:week-num-name\n\t\t\t:week-numbers=\"showWeekNumber ? { type: 'iso' } : undefined\"\n\t\t\t:week-start\n\t\t\tv-bind=\"pickerType\"\n\t\t\t@update:model-value=\"onUpdateModelValue\">\n\t\t\t<template #action-buttons>\n\t\t\t\t<NcButton size=\"small\" variant=\"tertiary\" @click=\"cancelSelection\">\n\t\t\t\t\t{{ t('Cancel') }}\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton size=\"small\" variant=\"primary\" @click=\"selectDate\">\n\t\t\t\t\t{{ t('Pick') }}\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #clear-icon=\"{ clear }\">\n\t\t\t\t<NcButton\n\t\t\t\t\t:aria-label=\"t('Clear value')\"\n\t\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t\t@click=\"clear\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiClose\" :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #input-icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiCalendarBlank\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #clock-icon>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiClock\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #arrow-left>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronLeft\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #arrow-right>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronRight\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #arrow-down>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronDown\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #arrow-up>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronUp\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"showTimezoneSelect\" #action-extra>\n\t\t\t\t<NcTimezonePicker\n\t\t\t\t\tv-model=\"timezoneId\"\n\t\t\t\t\tclass=\"vue-date-time-picker__timezone\"\n\t\t\t\t\t:append-to-body=\"false\"\n\t\t\t\t\t:input-label=\"t('Time zone')\" />\n\t\t\t</template>\n\t\t</VueDatePicker>\n\t\t<Teleport to=\"body\" :disabled=\"!appendToBody\">\n\t\t\t<div ref=\"target\" class=\"vue-date-time-picker__wrapper vue-date-time-picker__wrapper--teleport\" />\n\t\t</Teleport>\n\t</div>\n</template>\n\n<style scoped lang=\"scss\">\n@use \"sass:meta\";\n\n.vue-date-time-picker__wrapper {\n\t// This is under :root in @vuepic/vue-datepicker/dist/main.css, so importing it scoped won't work\n\t--dp-common-transition: all var(--animation-quick) ease-in;\n\t--dp-menu-padding: 6px 8px;\n\t--dp-animation-duration: var(--animation-quick);\n\t--dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1);\n\t--dp-transition-timing: ease-out;\n\t--dp-action-row-transtion: all 0.2s ease-in;\n\t--dp-font-family: var(--font-face);\n\t--dp-border-radius: var(--border-radius-element);\n\t--dp-cell-border-radius: var(--border-radius-small);\n\t--dp-transition-length: 22px;\n\t--dp-transition-timing-general: var(--animation-quick);\n\t--dp-button-height: var(--default-clickable-area);\n\t--dp-month-year-row-height: var(--default-clickable-area);\n\t--dp-month-year-row-button-size: var(--clickable-area-small);\n\t--dp-button-icon-height: 20px;\n\t--dp-calendar-wrap-padding: 0 5px;\n\t--dp-cell-size: var(--default-clickable-area);\n\t--dp-cell-padding: 5px;\n\t--dp-common-padding: 10px;\n\t--dp-input-icon-padding: var(--default-clickable-area);\n\t--dp-input-padding: 6px 12px;\n\t--dp-menu-min-width: 260px;\n\t--dp-action-buttons-padding: 1px 6px;\n\t--dp-row-margin: 5px 0;\n\t--dp-calendar-header-cell-padding: 0.5rem;\n\t--dp-multi-calendars-spacing: 10px;\n\t--dp-overlay-col-padding: 3px;\n\t--dp-time-inc-dec-button-size: var(--default-clickable-area);\n\t--dp-font-size: 1rem;\n\t--dp-preview-font-size: var(--font-size-small);\n\t--dp-time-font-size: 2rem;\n\t--dp-action-button-height: var(--clickable-area-small);\n\t--dp-action-row-padding: 8px;\n\t--dp-direction: ltr;\n\n\t// We need to import the vuepic styles, but at least scoped to our class and scope\n\t// plain @import does not work as this will scope all styles imported.\n\t:deep() {\n\t\t@include meta.load-css('@vuepic/vue-datepicker/dist/main.css');\n\t}\n\n\t// When rendered as part of NcActionInput, should be lifted above the NcPopover (99999 < 100000)\n\t&.vue-date-time-picker__wrapper--teleport :deep(.dp--menu-wrapper) {\n\t\tz-index: 100001;\n\t}\n\n\t.vue-date-time-picker--clearable :deep(.dp__input) {\n\t\tpadding-inline-end: var(--default-clickable-area);\n\t}\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\t// we enforce full opacity to not create a11y issues with contrast\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\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// make the bottom page toggle stand out better\n\t:deep(.dp__btn.dp__button.dp__button_bottom) {\n\t\tcolor: var(--color-primary-element-light);\n\t\tbackground-color: var(--color-primary-element-light);\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: var(--dp-hover-color);\n\t\t\tcolor: var(--dp-hover-icon-color);\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.vue-date-time-picker.dp__theme_dark,\n\t.vue-date-time-picker.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-primary-element-light-hover);\n\t\t--dp-hover-text-color: var(--color-primary-element-light-text);\n\t\t--dp-hover-icon-color: var(--color-primary-element-light-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-text-error, 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","_openBlock","_createElementBlock","_createVNode","_unref","_mergeProps","confirm","clearable","placeholder","locale","minuteStep","appendToBody","showWeekNumber","_createSlots","_withCtx","showTimezoneSelect","NcTimezonePicker","_createBlock","_Teleport","_createElementVNode"],"mappings":"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"}

package/dist/chunks/NcEmojiPicker-U5k_zceS.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcEmojiPicker-U5k_zceS.mjs","sources":["../../node_modules/vue-material-design-icons/Circle.vue","../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon circle-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"CircleIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","\n\n<docs>\n### General description\n\nThis component allows the user to pick an emoji.\n\n### Usage\n\n* Listen to the select event and pass in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker @select=\"select\" style=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Showing a preview and keeping it open after a user selected an emoji\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:close-on-select=\"false\"\n\t\t\t:show-preview=\"true\"\n\t\t\t@select=\"select\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Allow unselecting a previously set emoji.\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:show-preview=\"true\"\n\t\t\t:allow-unselect=\"true\"\n\t\t\t:selected-emoji=\"emoji\"\n\t\t\t@select=\"select\"\n\t\t\t@unselect=\"unselect\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t\tunselect() {\n\t\t\t\tthis.emoji = ''\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<NcPopover\n\t\tref=\"popover\"\n\t\tv-model:shown=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\t:no-focus-trap=\"true /* Handled manually to remove emoji buttons from TAB sequence */\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<div class=\"nc-emoji-picker-container\">\n\t\t\t<Picker\n\t\t\t\tref=\"picker\"\n\t\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t\t:i18n\n\t\t\t\t:native\n\t\t\t\t:emoji-size=\"20\"\n\t\t\t\t:per-line=\"8\"\n\t\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t\t:show-preview\n\t\t\t\t:skin=\"currentSkinTone\"\n\t\t\t\t:show-skin-tones=\"false\"\n\t\t\t\t:title=\"previewFallbackName\"\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Emoji picker')\"\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t@keydown.tab.prevent=\"handleTabNavigationSkippingEmojis\"\n\t\t\t\t@select=\"select\">\n\t\t\t\t<template #searchTemplate=\"{ onSearch }\">\n\t\t\t\t\t<div class=\"search__wrapper\">\n\t\t\t\t\t\t<NcTextField\n\t\t\t\t\t\t\tref=\"search\"\n\t\t\t\t\t\t\tv-model=\"search\"\n\t\t\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t\t\t@keydown.left=\"callPickerArrowHandlerWithScrollFix('onArrowLeft', $event)\"\n\t\t\t\t\t\t\t@keydown.right=\"callPickerArrowHandlerWithScrollFix('onArrowRight', $event)\"\n\t\t\t\t\t\t\t@keydown.down=\"callPickerArrowHandlerWithScrollFix('onArrowDown', $event)\"\n\t\t\t\t\t\t\t@keydown.up=\"callPickerArrowHandlerWithScrollFix('onArrowUp', $event)\"\n\t\t\t\t\t\t\t@keydown.enter=\"$refs.picker.onEnter($event)\"\n\t\t\t\t\t\t\t@trailing-button-click=\"clearSearch(); onSearch('');\"\n\t\t\t\t\t\t\t@update:model-value=\"onSearch(search)\" />\n\t\t\t\t\t\t<NcColorPicker\n\t\t\t\t\t\t\tpalette-only\n\t\t\t\t\t\t\t:container\n\t\t\t\t\t\t\t:palette=\"skinTonePalette\"\n\t\t\t\t\t\t\t:model-value=\"currentColor.color\"\n\t\t\t\t\t\t\t@update:model-value=\"onChangeSkinTone\">\n\t\t\t\t\t\t\t<NcButton :aria-label=\"t('Skin tone')\" variant=\"tertiary-no-background\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCircle :style=\"{ color: currentColor.color }\" :title=\"currentColor.name\" :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</NcColorPicker>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Emoji\n\t\t\t\t\t\tclass=\"emoji-selected\"\n\t\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t\tnative\n\t\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t\t<Emoji\n\t\t\t\t\t\tclass=\"emoji-delete\"\n\t\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t\tnative\n\t\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t</template>\n\t\t\t</Picker>\n\t\t</div>\n\t</NcPopover>\n</template>\n\n<script>\nimport data from 'emoji-mart-vue-fast/data/all.json'\nimport { Emoji, EmojiIndex, Picker } from 'emoji-mart-vue-fast/src/index.js'\nimport { isFocusable } from 'tabbable'\nimport IconCircle from 'vue-material-design-icons/Circle.vue'\nimport NcColorPicker from '../NcColorPicker/NcColorPicker.vue'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'\nimport { t } from '../../l10n.ts'\nimport { Color } from '../../utils/colors.ts'\nimport NcButton from '../NcButton/index.ts'\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.ts'\n\n// Shared emoji index and skinTone for all NcEmojiPicker instances\n// Will be initialized on the first NcEmojiPicker creating\nlet emojiIndex\n\nconst i18n = {\n\tsearch: t('Search emoji'),\n\tnotfound: t('No emoji found'),\n\tcategories: {\n\t\tsearch: t('Search results'),\n\t\trecent: t('Frequently used'),\n\t\tsmileys: t('Smileys & Emotion'),\n\t\tpeople: t('People & Body'),\n\t\tnature: t('Animals & Nature'),\n\t\tfoods: t('Food & Drink'),\n\t\tactivity: t('Activities'),\n\t\tplaces: t('Travel & Places'),\n\t\tobjects: t('Objects'),\n\t\tsymbols: t('Symbols'),\n\t\tflags: t('Flags'),\n\t\tcustom: t('Custom'),\n\t},\n}\n\nconst skinTonePalette = [\n\tnew Color(255, 222, 52, t('Neutral skin color')),\n\tnew Color(228, 205, 166, t('Light skin tone')),\n\tnew Color(250, 221, 192, t('Medium light skin tone')),\n\tnew Color(174, 129, 87, t('Medium skin tone')),\n\tnew Color(158, 113, 88, t('Medium dark skin tone')),\n\tnew Color(96, 79, 69, t('Dark skin tone')),\n]\n\nexport default {\n\tname: 'NcEmojiPicker',\n\n\tcomponents: {\n\t\tIconCircle,\n\t\tNcButton,\n\t\tNcColorPicker,\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tEmoji,\n\t\tPicker,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The emoji-set\n\t\t */\n\t\tactiveSet: {\n\t\t\ttype: String,\n\t\t\tdefault: 'native',\n\t\t},\n\n\t\t/**\n\t\t * Show preview section when hovering emoji\n\t\t */\n\t\tshowPreview: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Allow unselecting the selected emoji\n\t\t */\n\t\tallowUnselect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selected emoji to allow unselecting\n\t\t */\n\t\tselectedEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * The fallback emoji in the preview section\n\t\t */\n\t\tpreviewFallbackEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: 'grinning',\n\t\t},\n\n\t\t/**\n\t\t * The fallback text in the preview section\n\t\t */\n\t\tpreviewFallbackName: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Pick an emoji'),\n\t\t},\n\n\t\t/**\n\t\t * Whether to close the emoji picker after picking one\n\t\t */\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [Boolean, String, Object, Element],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\n\temits: [\n\t\t'select',\n\t\t'selectData',\n\t\t'unselect',\n\t],\n\n\tsetup() {\n\t\t// If this is the first instance of NcEmojiPicker - setup EmojiIndex\n\t\tif (!emojiIndex) {\n\t\t\temojiIndex = new EmojiIndex(data)\n\t\t}\n\n\t\treturn {\n\t\t\t// Non-reactive constants\n\t\t\temojiIndex,\n\t\t\tskinTonePalette,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\tconst currentSkinTone = getCurrentSkinTone()\n\n\t\treturn {\n\t\t\t/**\n\t\t\t * The current active color from the skin tone palette\n\t\t\t */\n\t\t\tcurrentColor: skinTonePalette[currentSkinTone - 1],\n\t\t\t/**\n\t\t\t * The current active skin tone\n\t\t\t *\n\t\t\t * @type {1|2|3|4|5|6}\n\t\t\t */\n\t\t\tcurrentSkinTone,\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\n\tcreated() {\n\t\t// Component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(() => this.open)\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tthis.$refs.search.focus()\n\t\t},\n\n\t\t/**\n\t\t * Update the current skin tone by the result of the color picker\n\t\t *\n\t\t * @param {string} color Color set\n\t\t */\n\t\tonChangeSkinTone(color) {\n\t\t\tconst index = this.skinTonePalette.findIndex((tone) => tone.color.toLowerCase() === color.toLowerCase())\n\t\t\tif (index > -1) {\n\t\t\t\tthis.currentSkinTone = index + 1\n\t\t\t\tthis.currentColor = this.skinTonePalette[index]\n\t\t\t\tsetCurrentSkinTone(this.currentSkinTone)\n\t\t\t}\n\t\t},\n\n\t\tselect(emojiObject) {\n\t\t\t/**\n\t\t\t * Emits a string containing the emoji e.g. '👩🏿‍💻'\n\t\t\t */\n\t\t\tthis.$emit('select', emojiObject.native)\n\n\t\t\t/**\n\t\t\t * Emits a object with more data about the picked emoji\n\t\t\t */\n\t\t\tthis.$emit('selectData', emojiObject)\n\n\t\t\tif (this.closeOnSelect) {\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t},\n\n\t\tunselect() {\n\t\t\tthis.$emit('unselect')\n\t\t},\n\n\t\tafterShow() {\n\t\t\tthis.$refs.search.focus()\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// Manually return focus to the trigger button, as we disabled focus-trap\n\t\t\t// But only if there is no focus target outside the picker, for example, input element that received focus by click closing the emoji picker\n\t\t\tif (!document.activeElement || this.$refs.picker.$el.contains(document.activeElement) || !isFocusable(document.activeElement)) {\n\t\t\t\tthis.$refs.popover.$el.querySelector('button, [role=\"button\"]')?.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Manually handle Tab navigation skipping emoji buttons.\n\t\t * Navigation over emojis is handled by Arrow keys.\n\t\t *\n\t\t * @param {KeyboardEvent} event - Keyboard event\n\t\t */\n\t\thandleTabNavigationSkippingEmojis(event) {\n\t\t\tconst current = event.target\n\t\t\tconst focusable = Array.from(this.$refs.picker.$el.querySelectorAll('button:not(.emoji-mart-emoji), input'))\n\t\t\tif (!event.shiftKey) {\n\t\t\t\tconst nextNode = focusable.find((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) || focusable[0]\n\t\t\t\tnextNode.focus()\n\t\t\t} else {\n\t\t\t\tconst prevNode = focusable.findLast((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING) || focusable.at(-1)\n\t\t\t\tprevNode.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Handle arrow navigation via <Picker>'s handlers with scroll bug fix\n\t\t *\n\t\t * @param {'onArrowLeft' | 'onArrowRight' | 'onArrowDown' | 'onArrowUp'} originalHandlerName - Picker's arrow keydown handler name\n\t\t * @param {KeyboardEvent} event - Keyboard event\n\t\t */\n\t\tasync callPickerArrowHandlerWithScrollFix(originalHandlerName, event) {\n\t\t\t// Call the original handler\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/components/Picker.vue#L29\n\t\t\t// TODO: expose these methods via slot props in upstream library\n\t\t\tthis.$refs.picker[originalHandlerName](event)\n\n\t\t\t// Wait until emoji-mart-vue-fast scrolls\n\t\t\tawait this.$nextTick()\n\n\t\t\t// Scroll position is incorrect after emoji-mart-vue-fast scrolls...\n\t\t\t// It calculates scroll incorrectly.\n\t\t\t// It doesn't take into account, that emojis are wrapped into categories sections\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/utils/picker.js#L244\n\t\t\t// Now scroll to the correct position\n\t\t\t// TODO: fix in upstream\n\t\t\tconst selectedEmoji = this.$refs.picker.$el.querySelector('.emoji-mart-emoji-selected')\n\t\t\tselectedEmoji?.scrollIntoView({\n\t\t\t\tblock: 'center',\n\t\t\t\tinline: 'center',\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use \"sass:meta\";\n\n.nc-emoji-picker-container :deep() {\n\t@include meta.load-css('emoji-mart-vue-fast/css/emoji-mart.css');\n}\n\n.nc-emoji-picker-container :deep(.emoji-mart) {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\tdisplay: flex !important;\n\n\t// Reset emoji-mart styles\n\tbutton {\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\n\t}\n\n\t.emoji-mart-bar,\n\t.emoji-mart-anchors,\n\t.emoji-mart-search,\n\t.emoji-mart-search input,\n\t.emoji-mart-category,\n\t.emoji-mart-category-label,\n\t.emoji-mart-category-label span,\n\t.emoji-mart-skin-swatches {\n\t\tbackground-color: transparent !important;\n\t\tborder-color: var(--color-border) !important;\n\t\tcolor: inherit !important;\n\t}\n\n\t.emoji-mart-anchors {\n\t\tpadding-block: 0;\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-anchor {\n\t\tborder-radius: 0;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t\theight: var(--clickable-area-small);\n\t\tmin-width: var(--clickable-area-small);\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t// Icon\n\t\tdiv {\n\t\t\tdisplay: grid;\n\t\t\tplace-content: center;\n\t\t}\n\t}\n\n\t.emoji-mart-scroll {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: 0 calc(2 * var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(8, 1fr);\n\t\tjustify-items: stretch;\n\n\t\t&.emoji-mart-no-results {\n\t\t\tgrid-template-columns: 1fr;\n\t\t\tfont-size: inherit;\n\t\t\tcolor: var(--color-text-maxcontrast) !important;\n\t\t}\n\t}\n\n\t/* Label element in the section grid */\n\tdiv.emoji-mart-category-label {\n\t\tgrid-column: span 8;\n\t\tjustify-self: stretch;\n\t}\n\n\t/* An actual heading inside the element */\n\th3.emoji-mart-category-label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t// Inline with buttons\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 0;\n\t\t// Inline with input\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: 0;\n\t\tuser-select: none;\n\t}\n\n\t.emoji-mart-emoji {\n\t\taspect-ratio: 1 / 1;\n\t\ttext-align: center;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\n\t\t&:hover,\n\t\t&:focus-visible,\n\t\t&.emoji-mart-emoji-selected {\n\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\tborder: none;\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\tbox-shadow: none !important;\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t&::before {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\tspan {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n.search__wrapper {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n\talign-items: end;\n\tpadding-block: var(--default-grid-baseline);\n\tpadding-inline: calc(2 * var(--default-grid-baseline));\n}\n\n.row-selected {\n\tbutton, span {\n\t\tvertical-align: middle;\n\t}\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-inline-start: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","NcTextField","_createBlock","_withCtx","_renderSlot","_createVNode","_withKeys","_normalizeStyle","_toDisplayString"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/NcFormBox-CkgY7Tif.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcFormBox-CkgY7Tif.mjs","sources":["../../src/components/NcFormBox/NcFormBox.vue"],"sourcesContent":["\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { provide, useCssModule } from 'vue'\nimport { NC_FORM_BOX_CONTEXT_KEY } from './useNcFormBox.ts'\n\ndefineProps<{\n\t/**\n\t * Display the group as a row instead of a column\n\t */\n\trow?: boolean\n}>()\n\ndefineSlots<{\n\t/**\n\t * Grouped content\n\t */\n\tdefault?: Slot<{\n\t\t/**\n\t\t * Class to add on a custom item to apply the border radius effect\n\t\t */\n\t\titemClass: string\n\t}>\n}>()\n\nconst style = useCssModule()\n\nprovide(NC_FORM_BOX_CONTEXT_KEY, {\n\tisInFormBox: true,\n\tformBoxItemClass: style.ncFormBox__item,\n})\n</script>\n\n<template>\n\t<div :class=\"[$style.ncFormBox, row ? $style.ncFormBox_row : $style.ncFormBox_col]\">\n\t\t<slot :item-class=\"$style.ncFormBox__item\" />\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.ncFormBox {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(1 * var(--default-grid-baseline));\n\n\t&.ncFormBox_row {\n\t\tflex-direction: row;\n\t}\n}\n\n.ncFormBox__item {\n\tborder-radius: var(--border-radius-small) !important;\n}\n\n.ncFormBox_col {\n\tflex-direction: column;\n\n\t.ncFormBox__item {\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n\n.ncFormBox_row {\n\tflex-direction: row;\n\n\t.ncFormBox__item {\n\t\tflex: 1 1;\n\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\n### General\n\nA container of supported components with a small gap and rounded corners forming a solid group.\n\nCurrently supported components:\n- **`<NcFormBoxButton>`**: an action button/link with an optional description specially for the `<NcFormBox>` context\n- **`<NcFormBoxCopyButton>`**: a special case of a button to copy a text to the clipboard\n- **`<NcFormBoxSwitch>`**: a toggle switch replacing `<NcCheckboxRadioSwitch type=\"switch\">` in a box\n- **`<NcButton>`**: a general button in case there is a kind of primary action within a box\n\n**Note**: if the group has a semantic meaning, consider wrapping the `<NcFormBox>` into `<NcFormGroup>` component with a label.\n\n```vue\n<script>\nimport { mdiArrowRight, mdiFolderOpenOutline, mdiPlus } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn { mdiArrowRight, mdiFolderOpenOutline, mdiPlus }\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'Text',\n\t\t\tswitchValue: false,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: calc(6 * var(--default-grid-baseline));\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton label=\"WebDAV URL\" value=\"https://cloud.example.tld/remote.php/dav/files/user\" />\n\t\t</NcFormBox>\n\n\t\t<NcFormGroup label=\"Account settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton label=\"user@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcFormBoxButton label=\"sales@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcButton wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPlus\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tAdd mail account\n\t\t\t\t</NcButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"Device settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Turn camera and microphone off by default\" />\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Blur camera background by default\" />\n\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\tlabel=\"Skip device preview before joining a call\"\n\t\t\t\t\tdescription=\"Will always show if recording consent is required\" />\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxButton\n\t\t\t\tlabel=\"Attachments folder\"\n\t\t\t\tdescription=\"/Talk\"\n\t\t\t\tinverted-accent>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiFolderOpenOutline\" inline />\n\t\t\t\t</template>\n\t\t\t</NcFormBoxButton>\n\t\t</NcFormBox>\n\t</div>\n</template>\n```\n\n### Advanced usage\n\nScoped slot prop `itemClass` can be used to apply the same border radius effect to custom components.\nCreate an issue if you need a composable to inject the class into a custom component.\n\n```vue\n<template>\n\t<NcFormBox v-slot=\"{ itemClass }\">\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tFirst native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tSecond native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tThird native button\n\t\t</button>\n\t</NcFormBox>\n</template>\n\n<style scoped>\n.native-button {\n\t/* Remove default server margin around a native button */\n\tmargin: 0 !important;\n}\n</style>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","row","_renderSlot"],"mappings":";;;;;;;;;AA8BA,UAAM,QAAQ,aAAA;AAEd,YAAQ,yBAAyB;AAAA,MAChC,aAAa;AAAA,MACb,kBAAkB,MAAM;AAAA,IAAA,CACxB;;0BAIAA,mBAEM,OAAA;AAAA,QAFA,OAAKC,eAAA,CAAGC,KAAAA,OAAO,WAAWC,KAAAA,MAAMD,KAAAA,OAAO,gBAAgBA,KAAAA,OAAO,aAAa,CAAA;AAAA,MAAA;QAChFE,WAA6C,KAAA,QAAA,WAAA;AAAA,UAAtC,WAAYF,KAAAA,OAAO;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormBoxButton-Bptd324P.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcFormBoxButton-Bptd324P.mjs","sources":["../../src/composables/useButtonLink.ts","../../src/components/NcFormBoxButton/NcFormBoxButton.vue"],"sourcesContent":["/*!\n * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, MaybeRef } from 'vue'\nimport type { RouteLocationRaw } from 'vue-router'\n\nimport { computed, inject, reactive } from 'vue'\nimport { routerKey } from 'vue-router'\n\ntype ButtonLinkProps = {\n\t// Required - general link props\n\n\t/**\n\t * RouterLink's to props and a trigger to use RouterLink.\n\t * Note: This takes precedence over the href attribute.\n\t */\n\tto: MaybeRef<RouteLocationRaw | undefined>\n\t/**\n\t * HyperLink href attribute and a trigger to use <a> hyperlink.\n\t */\n\thref: MaybeRef<string | undefined>\n\t/**\n\t * Define additional attributes, based on the tag\n\t */\n\tadditionalAttrs?: (tag: 'RouterLink' | 'a' | 'button') => object | undefined\n\n\t// RouterLink props\n\n\t/**\n\t * RouterLink's activeClass prop\n\t */\n\tactiveClass?: MaybeRef<string | undefined>\n\n\t// Hyperlink\n\n\t/**\n\t * <a> hyperlink's target attribute\n\t */\n\ttarget?: MaybeRef<AnchorHTMLAttributes['target'] | undefined>\n\t/**\n\t * <a> hyperlink's download attribute\n\t */\n\tdownload?: MaybeRef<string | boolean | undefined>\n\n\t// Button\n\n\t/**\n\t * <button> element's type attribute, but default to \"button\" instead of \"submit\"\n\t */\n\ttype?: MaybeRef<ButtonHTMLAttributes['type'] | undefined>\n\t/**\n\t * <button> element's disabled attribute\n\t */\n\tdisabled?: MaybeRef<boolean | undefined>\n}\n\n/**\n * Reusable implementation of an interactive button-like element that can be a link or a button\n *\n * @param options - Props to determine the button/link behavior. Can be a reactive object, or an object with nested refs, or mixed.\n */\nexport function useButtonLink(options: ButtonLinkProps) {\n\t// Resolve all MaybeRef-s values and maybe reactive object via unwrapping\n\tconst props = reactive(options)\n\n\tconst hasVueRouterContext = inject(routerKey, null) !== null\n\n\t/**\n\t * Tag name to be used\n\t */\n\tconst tag = computed(() => {\n\t\t// TODO: should we warn if props.to is provided but there is no vue-router?\n\t\tif (hasVueRouterContext && props.to) {\n\t\t\t// Note: RouterLink is used as globally registered component (by name) and not imported intentionally\n\t\t\t// to use injected component from the app and not bundle it to the button\n\t\t\treturn 'RouterLink'\n\t\t} else if (props.href) {\n\t\t\treturn 'a'\n\t\t} else {\n\t\t\treturn 'button'\n\t\t}\n\t})\n\n\tconst isLink = computed(() => tag.value === 'RouterLink' || tag.value === 'a')\n\tconst isHyperLink = computed(() => tag.value === 'a')\n\tconst isRouterLink = computed(() => tag.value === 'RouterLink')\n\tconst isButton = computed(() => tag.value === 'button')\n\n\tconst attrs = computed(() => {\n\t\tif (tag.value === 'RouterLink') {\n\t\t\treturn {\n\t\t\t\tto: props.to,\n\t\t\t\tactiveClass: 'active',\n\t\t\t\t...(props.additionalAttrs?.('RouterLink') ?? {}),\n\t\t\t}\n\t\t} else if (tag.value === 'a') {\n\t\t\treturn {\n\t\t\t\thref: props.href,\n\t\t\t\ttarget: props.target,\n\t\t\t\tdownload: props.download || undefined,\n\t\t\t\trel: 'nofollow noreferrer noopener',\n\t\t\t\t...(props.additionalAttrs?.('a') ?? {}),\n\t\t\t}\n\t\t} else if (tag.value === 'button') {\n\t\t\treturn {\n\t\t\t\ttype: props.type || 'button',\n\t\t\t\tdisabled: props.disabled,\n\t\t\t\t...(props.additionalAttrs?.('button') ?? {}),\n\t\t\t}\n\t\t}\n\t})\n\n\treturn {\n\t\ttag,\n\t\tisLink,\n\t\tisHyperLink,\n\t\tisRouterLink,\n\t\tisButton,\n\t\tattrs,\n\t}\n}\n","\n\n<script setup lang=\"ts\">\nimport type { AnchorHTMLAttributes, Slot } from 'vue'\nimport type { RouteLocationRaw } from 'vue-router'\n\nimport { mdiArrowTopRight, mdiOpenInNew } from '@mdi/js'\nimport { computed, toRef } from 'vue'\nimport NcFormBoxItem from '../NcFormBox/NcFormBoxItem.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useButtonLink } from '../../composables/useButtonLink.ts'\n\nconst {\n\tlabel = undefined,\n\tdescription = undefined,\n\tinvertedAccent = false,\n\tto = undefined,\n\thref = undefined,\n\ttarget = undefined, // TODO: should it be _blank by default?\n\tdisabled = false,\n} = defineProps<{\n\t/** Main label */\n\tlabel?: string\n\t/** Optional description below the label, also used for the aria-describedby */\n\tdescription?: string\n\t/** Accent on the description instead of the label (see docs) */\n\tinvertedAccent?: boolean\n\t/** RouterLink's `to` prop; when provided, renders as `<RouterLink>` (takes precedence over the `href` prop) */\n\tto?: RouteLocationRaw\n\t/** Hyperlink `href` attribute; when provided, renders as `<a>` */\n\thref?: string\n\t/** Hyperlink's target attribute */\n\ttarget?: AnchorHTMLAttributes['target']\n\t/** Button's disabled attribute, not applicable to links */\n\tdisabled?: boolean\n}>()\n\ndefineEmits<{\n\t/** Native click event */\n\tclick: [event: MouseEvent]\n}>()\n\ndefineSlots<{\n\t/** Custom label content */\n\tdefault?: Slot\n\t/** Custom description content */\n\tdescription?: Slot\n\t/** Required icon (links have a default icon) */\n\ticon?: Slot // TODO: should the default link icon only be used for _blank links?\n}>()\n\nconst { tag, attrs, isLink } = useButtonLink({\n\tto: toRef(() => to),\n\thref: toRef(() => href),\n\ttarget: toRef(() => target),\n\tdisabled: toRef(() => disabled),\n})\n\nconst icon = computed(() => {\n\tif (isLink.value) {\n\t\treturn target === '_blank' ? mdiOpenInNew : mdiArrowTopRight\n\t}\n\treturn undefined\n})\n</script>\n\n<template>\n\t<NcFormBoxItem\n\t\t:tag\n\t\t:item-classes=\"[\n\t\t\t'button-vue', /* Reset server's global HTML button styles */\n\t\t\t$style.formBoxButton,\n\t\t]\"\n\t\t:inverted-accent\n\t\tv-bind=\"attrs\"\n\t\ttabindex=\"0\"\n\t\t@click=\"$emit('click', $event)\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template v-if=\"$slots.description || description\" #description>\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template v-if=\"$slots.icon || icon\" #icon>\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"icon\" :path=\"icon\" inline />\n\t\t\t</slot>\n\t\t</template>\n\t</NcFormBoxItem>\n</template>\n\n<style lang=\"scss\" module>\n.formBoxButton {\n\t/* Reset default HTML button styles */\n\tbackground: unset;\n\tborder: none;\n\tcolor: inherit;\n\tfont-size: inherit;\n\tfont-weight: inherit;\n\ttext-decoration: none;\n\ttext-align: inherit;\n\tline-height: inherit;\n\tpadding: 0;\n\tmargin: 0;\n\toutline: none;\n}\n</style>\n\n<docs>\n### General\n\nAn interactive button-like item within `<NcFormBox>`. It can be a button or a native link/router link if `to` or `href` props are provided.\n\nLike other form box items, it has a label and an optional description.\n\n```vue\n<script>\nimport { mdiContentCopy, mdiInformationOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiContentCopy,\n\t\t\tmdiInformationOutline,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<NcFormBox>\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"Nextcloud\"\n\t\t\thref=\"https://nextcloud.com\"\n\t\t\ttarget=\"_blank\" />\n\n\t\t<NcFormBoxButton\n\t\t\thref=\"https://nextcloud-vue-components.netlify.app\">\n\t\t\t<code>@nextcloud/vue</code> documentation\n\t\t</NcFormBoxButton>\n\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"About\"\n\t\t\tdescription=\"Installation details\"\n\t\t\thref=\"https://nextcloud.com\"\n\t\t\ttarget=\"_blank\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiInformationOutline\" inline />\n\t\t\t</template>\n\t\t</NcFormBoxButton>\n\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"Public signing key\">\n\t\t\t<template #description>\n\t\t\t\t<code>SSBkb24ndCBrbm93IHdoeSB5b3UgZGVjb2RlZCB0aGlzIHZhbHVlDQrgvLwg44GkIOKXlV/il5Ug4Ly944Gk</code>\n\t\t\t</template>\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiContentCopy\" inline />\n\t\t\t</template>\n\t\t</NcFormBoxButton>\n\t</NcFormBox>\n</template>\n```\n\n### Inverted accent\n\nSometimes the description is more important than the label. In such cases use `inverted-accent` prop.\n\nFor example:\n- **Steps:** the description of the step is more important than the step number\n- **Copy button:** the value being copied is more important than the value label\n- **Folder picker:** the selected folder path is more important than the input label\n\n```vue\n<script>\nimport { mdiContentCopy, mdiDomain, mdiFolderOpenOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn { mdiContentCopy, mdiDomain, mdiFolderOpenOutline }\n\t},\n}\n</script>\n\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: calc(4 * var(--default-grid-baseline));\">\n\t\t<NcFormGroup label=\"Mailvelope\" description=\"A browser extension that enables easy OpenPGP encryption and decryption of emails\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Step 1\"\n\t\t\t\t\tdescription=\"Install the browser extension\"\n\t\t\t\t\thref=\"https://www.mailvelope.com/\"\n\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\tinverted-accent />\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Step 2\"\n\t\t\t\t\tdescription=\"Enable the current domain\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"CalDAV\" description=\"Access Nextcloud calendars from other apps and devices\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"CalDAV URL\"\n\t\t\t\t\tdescription=\"https://cloud.example.com/remote.php/dav/\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiContentCopy\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Server Address for iOS and macOS\"\n\t\t\t\t\tdescription=\"https://cloud.example.com/remote.php/dav/principals/users/user/\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiContentCopy\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"Files\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Attachments folder\"\n\t\t\t\t\tdescription=\"/Talk\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiFolderOpenOutline\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\t</div>\n</template>\n```\n\n### Requirements\n\n- Label is required (`label` prop or the default slot)\n- Icon is required unless there is a default icon (links)\n\n```vue\n<template>\n\t<NcFormBox>\n\t\t<NcFormBoxButton description=\"No label example\">\n\t\t\t<template #icon>\n\t\t\t\t✅\n\t\t\t</template>\n\t\t</NcFormBoxButton>\n\t\t<NcFormBoxButton label=\"No icon example\"/>\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"No icon link example\"\n\t\t\tdescription=\"Links have a default icon\"\n\t\t\thref=\"https://nextcloud.com\"\n\t\t\ttarget=\"_blank\" />\n\t</NcFormBox>\n</template>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_mergeProps","_unref","$style","invertedAccent","$emit","$slots","label","_renderSlot","description"],"mappings":"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"}

package/dist/chunks/NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-DhnfC18v.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-DhnfC18v.mjs","sources":["../../src/components/NcFormBoxCopyButton/NcFormBoxCopyButton.vue"],"sourcesContent":["\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { whenever } from '@vueuse/core'\nimport NcFormBoxButton from '../NcFormBoxButton/NcFormBoxButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useCopy } from '../../composables/useCopy.ts'\n\nconst {\n\tlabel = undefined,\n\tvalue,\n\tdisabled = false,\n} = defineProps<{\n\t/** Copied value's value */\n\tlabel?: string\n\t/** The value to be copied */\n\tvalue: string\n\t/** Native disabled attribute */\n\tdisabled?: boolean\n}>()\n\nconst emit = defineEmits<{\n\t/** Value has been successfully copied */\n\tcopy: []\n}>()\n\ndefineSlots<{\n\t/** Custom label content */\n\tdefault?: Slot\n}>()\n\nconst { isCopied, copy, icon, altText } = useCopy(() => value)\n\nwhenever(isCopied, () => emit('copy'))\n</script>\n\n<template>\n\t<NcFormBoxButton\n\t\t:disabled\n\t\tinverted-accent\n\t\t@click=\"copy\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<span class=\"hidden-visually\">\n\t\t\t\t{{ altText }}\n\t\t\t</span>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #description>\n\t\t\t{{ value }}\n\t\t</template>\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :path=\"icon\" inline />\n\t\t</template>\n\t</NcFormBoxButton>\n</template>\n\n<docs>\n### General\n\n`NcFormBoxButton` set up to be a copy button.\n\n```vue\n<template>\n\t<NcFormGroup label=\"CalDAV\" description=\"Access Nextcloud calendars from other apps and devices\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"CalDAV URL\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/\" />\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"Server Address for iOS and macOS\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/principals/users/user/\" />\n\t\t</NcFormBox>\n\t</NcFormGroup>\n</template>\n```\n</docs>\n"],"names":["_createBlock","disabled","_unref","value","_createVNode","$slots","label","_createElementVNode","_toDisplayString","_renderSlot"],"mappings":";;;;;;;;;;;;;;;AA0BA,UAAM,OAAO;AAUb,UAAM,EAAE,UAAU,MAAM,MAAM,YAAY,QAAQ,MAAM,QAAA,KAAK;AAE7D,aAAS,UAAU,MAAM,KAAK,MAAM,CAAC;;0BAIpCA,YAkBkB,iBAAA;AAAA,QAjBhB,UAAAC,KAAAA;AAAAA,QACD,mBAAA;AAAA,QACC,SAAOC,MAAA,IAAA;AAAA,MAAA;QASG,qBACV,MAAW;AAAA,0CAARC,KAAAA,KAAK,GAAA,CAAA;AAAA,QAAA;QAEE,cACV,MAAwC;AAAA,UAAxCC,YAAwC,kBAAA;AAAA,YAArB,MAAMF,MAAA,IAAA;AAAA,YAAM,QAAA;AAAA,UAAA;;;;QAZhBG,KAAAA,OAAO,WAAWC,KAAAA;gBAAQ;AAAA,sBACzC,MAEO;AAAA,YAFPC,mBAEO,QAFP,YAEOC,gBADHN,MAAA,OAAA,CAAO,GAAA,CAAA;AAAA,YAEXO,WAEO,4BAFP,MAEO;AAAA,8CADHH,KAAAA,KAAK,GAAA,CAAA;AAAA,YAAA;;;;;;;;"}

package/dist/chunks/NcFormBoxItem-vnU0KmUL.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcFormBoxItem-vnU0KmUL.mjs","sources":["../../src/components/NcFormBox/NcFormBoxItem.vue"],"sourcesContent":["\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { useNcFormBox } from '../../components/NcFormBox/useNcFormBox.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy } from '../../utils/legacy.ts'\n\ndefineOptions({ inheritAttrs: false })\n\nconst {\n\ttag,\n\tlabel = undefined,\n\tdescription = undefined,\n\tinvertedAccent = false,\n\tclass: rootClasses = undefined,\n\titemClasses = undefined,\n} = defineProps<{\n\t/** Interactive item element's tag */\n\ttag: string\n\t/** Main Label */\n\tlabel?: string\n\t/** Optional description below the label, also used for the aria-describedby */\n\tdescription?: string\n\t/** Accent on the description instead of the label */\n\tinvertedAccent?: boolean\n\t/** Root element classes */\n\tclass?: VueClassType\n\t/** Interactive item classes */\n\titemClasses?: VueClassType\n}>()\n\ndefineEmits<{\n\t/** Click on the item */\n\tclick: [event: MouseEvent]\n}>()\n\nconst slots = defineSlots<{\n\t/** Item's label custom content */\n\tdefault?: Slot<{\n\t\t/** IDRef of the description element if present */\n\t\tdescriptionId?: string\n\t}>\n\t/** Custom description content */\n\tdescription?: Slot<{\n\t\t/** IDRef of the description element if present */\n\t\tdescriptionId?: string\n\t}>\n\t/** Icon content */\n\ticon?: Slot\n}>()\n\nconst { formBoxItemClass } = useNcFormBox()\n\nconst descriptionId = createElementId()\nconst hasDescription = () => !!description || !!slots.description\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[\n\t\t\trootClasses,\n\t\t\t$style.formBoxItem,\n\t\t\tformBoxItemClass,\n\t\t\t{\n\t\t\t\t[$style.formBoxItem_inverted]: invertedAccent && hasDescription(),\n\t\t\t\t[$style.formBoxItem_legacy]: isLegacy,\n\t\t\t},\n\t\t]\">\n\t\t<span :class=\"$style.formBoxItem__content\">\n\t\t\t<component\n\t\t\t\t:is=\"tag\"\n\t\t\t\t:class=\"[$style.formBoxItem__element, itemClasses]\"\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t@click=\"$emit('click', $event)\">\n\t\t\t\t<slot :description-id>\n\t\t\t\t\t{{ label || '⚠️ Label is missing' }}\n\t\t\t\t</slot>\n\t\t\t</component>\n\t\t\t<span v-if=\"hasDescription()\" :id=\"descriptionId\" :class=\"$style.formBoxItem__description\">\n\t\t\t\t<slot name=\"description\">\n\t\t\t\t\t{{ description }}\n\t\t\t\t</slot>\n\t\t\t</span>\n\t\t</span>\n\t\t<span :class=\"$style.formBoxItem__icon\">\n\t\t\t<slot name=\"icon\" :description-id>\n\t\t\t\t⚠️ Icon is missing\n\t\t\t</slot>\n\t\t</span>\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.formBoxItem {\n\t--nc-form-box-item-border-width: 1px;\n\t--nc-form-box-item-min-height: 40px; // Special size defined by the design\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\t--form-element-label-padding: calc(var(--form-element-label-offset) - var(--nc-form-box-item-border-width));\n\t// New colors we don't yet have in theming\n\t// TODO: add new colors to the theming\n\t--color-primary-element-extra-light: hsl(from var(--color-primary-element-light) h s calc(l * 1.045));\n\t--color-primary-element-extra-light-hover: hsl(from var(--color-primary-element-light-hover) h s calc(l * 1.045));\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: calc(2 * var(--default-grid-baseline));\n\tmin-height: var(--nc-form-box-item-min-height);\n\tpadding-inline: var(--form-element-label-padding);\n\tborder: 1px solid var(--color-primary-element-extra-light-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--border-radius-element);\n\tbackground-color: var(--color-primary-element-extra-light);\n\tcolor: var(--color-main-text);\n\ttransition-property: color, border-color, background-color;\n\ttransition-duration: var(--animation-quick);\n\ttransition-timing-function: linear;\n\t-webkit-user-select: none;\n\tuser-select: none;\n\tcursor: pointer;\n\n\t* {\n\t\tcursor: inherit;\n\t}\n\n\t&:has(:disabled) {\n\t\tcursor: default;\n\t\topacity: 0.5;\n\t}\n\n\t&:hover:not(:has(:disabled)) {\n\t\tcolor: var(--color-primary-element-light-text);\n\t\tbackground-color: var(--color-primary-element-extra-light-hover);\n\t}\n\n\t&:has(:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&.formBoxItem_legacy {\n\t\t--nc-form-box-item-border-width: 0px;\n\t\tborder: none;\n\t}\n\n\t&.formBoxItem_inverted {\n\t\t.formBoxItem__element {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t.formBoxItem__description {\n\t\t\tcolor: inherit;\n\t\t}\n\t}\n}\n\n.formBoxItem__content {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding-block: calc(2 * var(--default-grid-baseline));\n\toverflow-wrap: anywhere;\n}\n\n// A trick for accessibility:\n// make entire component clickable while internally splitting the interactive item and the description\n.formBoxItem__element::after {\n\tcontent: '';\n\tposition: absolute;\n\tinset: 0;\n}\n\n.formBoxItem__description {\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.formBoxItem__icon {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n}\n</style>\n\n<docs>\nAn internal component\n</docs>\n"],"names":["_useSlots","_createElementBlock","_normalizeClass","$style","_unref","invertedAccent","_createElementVNode","_createBlock","_resolveDynamicComponent","tag","_mergeProps","itemClasses","$attrs","$emit","_renderSlot","label","description"],"mappings":";;;;;;;;;;;;;;;;;;;AA0CA,UAAM,QAAQA,SAAA;AAed,UAAM,EAAE,iBAAA,IAAqB,aAAA;AAE7B,UAAM,gBAAgB,gBAAA;AACtB,UAAM,iBAAiB,MAAM,CAAC,CAAC,QAAA,eAAe,CAAC,CAAC,MAAM;;0BAIrDC,mBA+BM,OAAA;AAAA,QA9BJ,OAAKC,eAAA;AAAA,UAAO,QAAA;AAAA,UAAgBC,KAAAA,OAAO;AAAA,UAAgBC,MAAA,gBAAA;AAAA;YAA4BD,CAAAA,KAAAA,OAAO,oBAAoB,GAAGE,KAAAA,kBAAkB,eAAA;AAAA,aAAuBF,KAAAA,OAAO,kBAAkB,GAAGC,MAAA,QAAA;AAAA,UAAA;AAAA;;QASnLE,mBAeO,QAAA;AAAA,UAfA,OAAKJ,eAAEC,KAAAA,OAAO,oBAAoB;AAAA,QAAA;wBACxCI,YAQYC,wBAPNC,KAAAA,GAAG,GADTC,WAQY;AAAA,YANV,OAAK,CAAGP,KAAAA,OAAO,sBAAsBQ,KAAAA,WAAW;AAAA,UAAA,GACzCC,KAAAA,QAAM;AAAA,YACb,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEC,KAAAA,MAAK,SAAU,MAAM;AAAA,UAAA;6BAC7B,MAEO;AAAA,cAFPC,WAEO,KAAA,QAAA,WAAA,EAFA,eAAAV,MAAA,aAAA,EAAA,GAAP,MAEO;AAAA,gDADHW,KAAAA,SAAK,qBAAA,GAAA,CAAA;AAAA,cAAA;;;;UAGE,iCAAZd,mBAIO,QAAA;AAAA;YAJwB,IAAIG,MAAA,aAAA;AAAA,YAAgB,OAAKF,eAAEC,KAAAA,OAAO,wBAAwB;AAAA,UAAA;YACxFW,WAEO,gCAFP,MAEO;AAAA,8CADHE,KAAAA,WAAW,GAAA,CAAA;AAAA,YAAA;;;QAIjBV,mBAIO,QAAA;AAAA,UAJA,OAAKJ,eAAEC,KAAAA,OAAO,iBAAiB;AAAA,QAAA;UACrCW,WAEO,KAAA,QAAA,QAAA,EAFY,eAAAV,MAAA,aAAA,EAAA,GAAnB,MAEO;AAAA,sDAF2B,wBAElC,EAAA;AAAA,UAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcListItem-Bx93C7tP.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcListItem-Bx93C7tP.mjs","sources":["../../src/components/NcListItem/NcListItem.vue"],"sourcesContent":["\n\n<docs>\n\n### Default Usage\n\n```vue\n<template>\n\t<ul>\n\t\t<NcListItem active\n\t\t\tbold\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\"\n\t\t\tdetails=\"1h\"\n\t\t\tname=\"This is an active element with highlighted counter\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t\n\t\t\t\t<CheckboxBlankCircleOutline :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with highlighted counter\"\n\t\t\tbold\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element\"\n\t\t\t:bold=\"false\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #name>\n\t\t\t\t<span style=\"display: flex; gap: 0.5rem; color: var(--color-favorite);\">\n\t\t\t\t\tFlexible styling within the first line of the component\n\t\t\t\t\t<div style=\"color: var(--color-text-error, var(--color-error));\">\n\t\t\t\t\t\tlike this.\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Without subname, Name of the element\"\n\t\t\t:bold=\"false\"\n\t\t\tdetails=\"1h\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n\n<script>\n\timport CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle'\n\timport LinkIcon from 'vue-material-design-icons/Link'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheckboxBlankCircle,\n\t\t\tLinkIcon,\n\t\t}\n\t}\n</script>\n\n```\n\n### NcListItem one line mode\n```vue\n<NcListItem active\n\t:bold=\"false\"\n\t:counter-number=\"123\"\n\tcounterType=\"highlighted\"\n\tdetails=\"1h\"\n\tname=\"This is an active element with highlighted counter\"\n\tone-line>\n\t<template #icon>\n\t\t<NcAvatar disable-menu :size=\"34\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t</template>\n\t<template #subname>\n\t\tIn this slot you can put both text and other components such as icons\n\t</template>\n\t<template #indicator>\n\t\t\n\t\t<CheckboxBlankCircle :size=\"20\" fill-color=\"#fff\" />\n\t</template>\n\t<template #actions>\n\t\t<NcActionButton>\n\t\t\tButton one\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton two\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton three\n\t\t</NcActionButton>\n\t</template>\n</NcListItem>\n```\n### NcListItem with extra actions slot and customized icon\n\nThe `extra-actions` slot can be used to add other interactive components.\n\nThe `actions-icon` slot can be used to pass icon to the inner NcActions component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with extra actions slot\"\n\t\t\tbold\n\t\t\t:active=\"true\"\n\t\t\t:force-display-actions=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"primary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an element with extra actions slot\"\n\t\t\tbold>\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCogOutline :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteTextOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</div>\n</template>\n<script>\n\timport IconCog from 'vue-material-design-icons/Cog.vue'\n\timport IconCogOutline from 'vue-material-design-icons/CogOutline.vue'\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\timport IconNoteTextOutline from 'vue-material-design-icons/NoteTextOutline.vue'\n\timport IconPencil from 'vue-material-design-icons/Pencil.vue'\n\timport IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCog,\n\t\t\tIconCogOutline,\n\t\t\tIconNoteText,\n\t\t\tIconNoteTextOutline,\n\t\t\tIconPencil,\n\t\t\tIconPencilOutline,\n\t\t},\n\t}\n</script>\n```\n### NcListItem compact mode\n```vue\n<template>\n\t<ul style=\"width: 350px;\">\n\t\t<NcListItem active\n\t\t\tcompact\n\t\t\tname=\"Active item\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteTextOutline :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteTextOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteTextOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"4\"\n\t\t\thref=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteTextOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with an external link\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n<script>\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\timport IconNoteTextOutline from 'vue-material-design-icons/NoteTextOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconNoteText,\n\t\t\tIconNoteTextOutline,\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<template>\n\t\n\t<component\n\t\t:is=\"to ? 'router-link' : 'NcVNodes'\"\n\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\tv-bind=\"{ ...to && { custom: true, to } }\">\n\t\t<li\n\t\t\tclass=\"list-item__wrapper\"\n\t\t\t:class=\"{ 'list-item__wrapper--active': active ?? isActive }\"\n\t\t\tv-bind=\"$attrs\">\n\t\t\t<div\n\t\t\t\tref=\"list-item\"\n\t\t\t\tclass=\"list-item\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'list-item--compact': compact,\n\t\t\t\t\t'list-item--one-line': oneLine,\n\t\t\t\t}\"\n\t\t\t\t@mouseover=\"handleMouseover\"\n\t\t\t\t@mouseleave=\"handleMouseleave\">\n\t\t\t\t<a\n\t\t\t\t\t:id=\"anchorId || undefined\"\n\t\t\t\t\t:aria-label=\"linkAriaLabel\"\n\t\t\t\t\tclass=\"list-item__anchor\"\n\t\t\t\t\t:href=\"routerLinkHref || href\"\n\t\t\t\t\t:target=\"target || (href === '#' ? undefined : '_blank')\"\n\t\t\t\t\t:rel=\"href === '#' ? undefined : 'noopener noreferrer'\"\n\t\t\t\t\t@focus=\"showActions\"\n\t\t\t\t\t@focusout=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@keydown.esc=\"hideActions\">\n\t\t\t\t\t\n\t\t\t\t\t<slot name=\"icon\" />\n\n\t\t\t\t\t\n\t\t\t\t\t<div class=\"list-item-content\">\n\t\t\t\t\t\t<div class=\"list-item-content__main\">\n\t\t\t\t\t\t\t<div class=\"list-item-content__name\">\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<slot name=\"name\">{{ name }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tv-if=\"hasSubname\"\n\t\t\t\t\t\t\t\tclass=\"list-item-content__subname\"\n\t\t\t\t\t\t\t\t:class=\"{ 'list-item-content__subname--bold': bold }\">\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<slot name=\"subname\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"list-item-content__details\">\n\t\t\t\t\t\t\t<div v-if=\"showDetails\" class=\"list-item-details__details\">\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<slot name=\"details\">{{ details }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tv-if=\"counterNumber !== 0 || hasIndicator\"\n\t\t\t\t\t\t\t\tv-show=\"showAdditionalElements\"\n\t\t\t\t\t\t\t\tclass=\"list-item-details__extra\">\n\t\t\t\t\t\t\t\t<NcCounterBubble\n\t\t\t\t\t\t\t\t\tv-if=\"counterNumber !== 0\"\n\t\t\t\t\t\t\t\t\t:count=\"counterNumber\"\n\t\t\t\t\t\t\t\t\t:active=\"active ?? isActive\"\n\t\t\t\t\t\t\t\t\tclass=\"list-item-details__counter\"\n\t\t\t\t\t\t\t\t\t:type=\"counterType\" />\n\n\t\t\t\t\t\t\t\t<span v-if=\"hasIndicator\" class=\"list-item-details__indicator\">\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<slot name=\"indicator\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\n\t\t\t\t<div v-if=\"$slots['extra-actions']\" class=\"list-item-content__extra-actions\">\n\t\t\t\t\t\n\t\t\t\t\t<slot name=\"extra-actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t\n\t\t\t\t<div\n\t\t\t\t\tv-if=\"forceDisplayActions || displayActionsOnHoverFocus\"\n\t\t\t\t\tclass=\"list-item-content__actions\"\n\t\t\t\t\t@focusout=\"handleBlur\">\n\t\t\t\t\t<NcActions\n\t\t\t\t\t\tref=\"actions\"\n\t\t\t\t\t\t:primary=\"active ?? isActive\"\n\t\t\t\t\t\t:force-menu=\"forceMenu\"\n\t\t\t\t\t\t:aria-label=\"actionsAriaLabel\"\n\t\t\t\t\t\t@update:open=\"handleActionsUpdateOpen\">\n\t\t\t\t\t\t<template v-if=\"$slots['actions-icon']\" #icon>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<slot name=\"actions-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\n\t\t\t\t<div v-if=\"$slots.extra\" class=\"list-item__extra\">\n\t\t\t\t\t\n\t\t\t\t\t<slot name=\"extra\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcCounterBubble from '../NcCounterBubble/index.ts'\nimport NcVNodes from '../NcVNodes/index.ts'\n\nexport default {\n\tname: 'NcListItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcCounterBubble,\n\t\tNcVNodes,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The details text displayed in the upper right part of the component\n\t\t */\n\t\tdetails: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Name (first line of text)\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The route for the router link.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The value for the external link\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: '#',\n\t\t},\n\n\t\t/**\n\t\t * The HTML target attribute used for the link\n\t\t */\n\t\ttarget: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Id for the `<a>` element\n\t\t */\n\t\tanchorId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Make subname bold\n\t\t */\n\t\tbold: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Show the NcListItem in compact design\n\t\t */\n\t\tcompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Toggle the active state of the component\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the wrapper element\n\t\t */\n\t\tlinkAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the actions toggle\n\t\t */\n\t\tactionsAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * If different from 0 this component will display the\n\t\t * NcCounterBubble component\n\t\t */\n\t\tcounterNumber: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * Outlined or highlighted state of the counter\n\t\t */\n\t\tcounterType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * To be used only when the elements in the actions menu are very important\n\t\t */\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Show the list component layout\n\t\t */\n\t\toneLine: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t\t'update:menuOpen',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t\thasActions: false,\n\t\t\thasSubname: false,\n\t\t\tdisplayActionsOnHoverFocus: false,\n\t\t\tmenuOpen: false,\n\t\t\thasIndicator: false,\n\t\t\thasDetails: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tshowAdditionalElements() {\n\t\t\treturn !this.displayActionsOnHoverFocus || this.forceDisplayActions\n\t\t},\n\n\t\tshowDetails() {\n\t\t\treturn (this.details !== '' || this.hasDetails)\n\t\t\t\t&& (!this.displayActionsOnHoverFocus || this.forceDisplayActions)\n\t\t},\n\t},\n\n\twatch: {\n\n\t\tmenuOpen(newValue) {\n\t\t\t// A click outside both the menu and the root element hides the actions again\n\t\t\tif (!newValue && !this.hovered) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkSlots()\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle link click\n\t\t *\n\t\t * @param {MouseEvent|KeyboardEvent} event - Native click or keydown event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t */\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\tshowActions() {\n\t\t\tif (this.hasActions) {\n\t\t\t\tthis.displayActionsOnHoverFocus = true\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thideActions() {\n\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event UI event\n\t\t */\n\t\thandleBlur(event) {\n\t\t\t// do not hide if open\n\t\t\tif (this.menuOpen) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// do not hide if focus is kept within\n\t\t\t// On component unmounting Vue 3 resets the template ref to null,\n\t\t\t// so we can ignore this check\n\t\t\tif (this.$refs['list-item']?.contains(event.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hideActions()\n\t\t},\n\n\t\t/**\n\t\t * Hide the actions on mouseleave unless the menu is open\n\t\t */\n\t\thandleMouseleave() {\n\t\t\tif (!this.menuOpen) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thandleMouseover() {\n\t\t\tthis.showActions()\n\t\t\tthis.hovered = true\n\t\t},\n\n\t\thandleActionsUpdateOpen(e) {\n\t\t\tthis.menuOpen = e\n\t\t\tthis.$emit('update:menuOpen', e)\n\t\t},\n\n\t\t// Check if subname and actions slots are populated\n\t\tcheckSlots() {\n\t\t\tif (this.hasActions !== !!this.$slots.actions) {\n\t\t\t\tthis.hasActions = !!this.$slots.actions\n\t\t\t}\n\t\t\tif (this.hasSubname !== !!this.$slots.subname) {\n\t\t\t\tthis.hasSubname = !!this.$slots.subname\n\t\t\t}\n\t\t\tif (this.hasIndicator !== !!this.$slots.indicator) {\n\t\t\t\tthis.hasIndicator = !!this.$slots.indicator\n\t\t\t}\n\t\t\tif (this.hasDetails !== !!this.$slots.details) {\n\t\t\t\tthis.hasDetails = !!this.$slots.details\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.list-item__wrapper {\n\tdisplay: flex;\n\tposition: relative;\n\twidth: 100%;\n\t// padding for the focus-visible styles. Width is reduced to compensate it\n\tpadding: 2px 4px;\n\t// The first and lastelement needs also padding for the box shadow of the focus-visible effect\n\t&:first-of-type {\n\t\tpadding-block-start: 4px;\n\t}\n\t&:last-of-type {\n\t\tpadding-block-end: 4px\n\t}\n\n\t&--active,\n\t&.active {\n\t\t.list-item {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\n\t\t\t&:hover,\n\t\t\t&:focus-within,\n\t\t\t&:has(:focus-visible),\n\t\t\t&:has(:active) {\n\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t}\n\t\t}\n\n\t\t.list-item-content__name,\n\t\t.list-item-content__subname,\n\t\t.list-item-content__details,\n\t\t.list-item-details__details {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\t}\n\t.list-item-content__name,\n\t.list-item-content__subname,\n\t.list-item-content__details,\n\t.list-item-details__details {\n\t\twhite-space: nowrap;\n\t\tmargin-block: 0;\n\t\tmargin-inline: 0 auto;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n\n.list-item-content__name {\n\tmin-width: 100px;\n\tflex: 1 1 10%;\n\tfont-weight: 500;\n}\n\n.list-item-content__subname {\n\tflex: 1 0;\n\tmin-width: 0;\n\tcolor: var(--color-text-maxcontrast);\n\t&--bold {\n\t\tfont-weight: 500;\n\t}\n}\n\n// NcListItem\n.list-item {\n\t--list-item-padding: var(--default-grid-baseline);\n\t// The content are two lines of text and respect the 1.5 line height\n\t--list-item-height: 2lh;\n\t--list-item-border-radius: var(--border-radius-element, 32px);\n\t// General styles\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tposition: relative;\n\tflex: 0 0 auto;\n\tjustify-content: flex-start;\n\tpadding: var(--list-item-padding);\n\twidth: 100%;\n\tborder-radius: var(--border-radius-element, 32px);\n\tcursor: pointer;\n\ttransition: background-color var(--animation-quick) ease-in-out;\n\tlist-style: none;\n\n\t&:hover,\n\t&:focus-within,\n\t&:has(:active),\n\t&:has(:focus-visible) {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&:has(&__anchor:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&--compact {\n\t\t--list-item-padding: calc(0.5 * var(--default-grid-baseline)) var(--default-grid-baseline);\n\n\t\t&:not(:has(.list-item-content__subname)) {\n\t\t\t--list-item-height: var(--default-clickable-area);\n\t\t}\n\t}\n\n\t&--one-line {\n\t\t--list-item-height: var(--default-clickable-area);\n\t\t--list-item-border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));\n\t\t--list-item-padding: var(--default-grid-baseline);\n\n\t\t.list-item-content__main {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: start;\n\t\t\tgap: 12px;\n\t\t\tmin-width: 0;\n\t\t}\n\t\t.list-item-content__details {\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tjustify-content: end;\n\t\t}\n\t\t.list-item-content__name {\n\t\t\talign-self: center;\n\t\t\tmax-width: 300px;\n\t\t}\n\t}\n\n\t&__anchor {\n\t\tcolor: inherit;\n\t\tdisplay: flex;\n\t\tflex: 1 0 auto;\n\t\talign-items: center;\n\t\theight: var(--list-item-height);\n\t\tmin-width: 0;\n\n\t\t// This is handled by the parent container\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t&-content {\n\t\tdisplay: flex;\n\t\tflex: 1 0;\n\t\tjustify-content: space-between;\n\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\tmin-width: 0;\n\n\t\t&__main {\n\t\t\tflex: 1 0;\n\t\t\twidth: 0;\n\t\t\tmargin: auto 0;\n\n\t\t\t&--oneline {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&__details {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: end;\n\t\t\talign-items: end;\n\t\t}\n\n\t\t&__actions,\n\t\t&__extra-actions {\n\t\t\tflex: 0 0 auto;\n\t\t\talign-self: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin-inline-start: var(--default-grid-baseline);\n\t\t}\n\n\t\t&__extra-actions {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\t}\n\n\t&-details {\n\t\t&__details {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tmargin: 0 9px !important;\n\t\t\tfont-weight: normal;\n\t\t}\n\t\t&__extra {\n\t\t\tmargin: 2px 4px 0 4px;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\t\t&__indicator {\n\t\t\tmargin: 0 5px;\n\t\t}\n\t}\n\n\t&__extra {\n\t\tmargin-top: var(--default-grid-baseline);\n\t}\n}\n\n</style>\n"],"names":["NcVNodes","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","_withCtx","_createElementVNode","_mergeProps","_renderSlot","_createElementBlock","_normalizeClass","_withDirectives","_createVNode"],"mappings":"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"}