npm - @nextcloud/vue - Versions diffs - 8.29.2 → 8.30.0 - Mend

@nextcloud/vue 8.29.2 → 8.30.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 (252) hide show

package/dist/chunks/{NcCollectionList-Khg3X3Zq.mjs.map → NcCollectionList-CLv50tJ3.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcCollectionList-Khg3X3Zq.mjs","sources":["../../src/components/NcCollectionList/NcCollectionListItem.vue","../../src/components/NcCollectionList/service.ts","../../src/components/NcCollectionList/useCollections.js","../../src/components/NcCollectionList/NcCollectionList.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\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 v-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 v-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 :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 icon=\"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 icon=\"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 v-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 :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.js'\nimport { getRoute } from '../NcRichText/autolink.js'\n\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcAvatar from '../NcAvatar/index.js'\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\tcollection: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\terror: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\temits: ['remove-resource', 'rename-collection'],\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('remove-resource', {\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('rename-collection', {\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: 44px;\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-left: 44px;\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-right: 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 axios, { type AxiosResponse } from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport type { OCSResponse } from '@nextcloud/typings/ocs'\n\n/\n Extracts the OCS data from a response\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 * @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 * @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 * @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 * @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 * @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 * @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 * @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, set } from 'vue'\nimport {\n\trenameCollectionService,\n\tgetCollectionsByResourceService,\n\tcreateCollectionService,\n\taddResourceService,\n\tremoveResourceService,\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\tset(storedCollections, 'value', collections)\n\t}\n\n\tconst addCollection = (collection) => {\n\t\tset(storedCollections, 'value', [...storedCollections.value, collection])\n\t}\n\n\tconst removeCollection = (collectionId) => {\n\t\tset(storedCollections, '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\tset(storedCollections.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\tconst addResourceToCollection = async ({ 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 - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\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 ref=\"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 v-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 { t } from '../../l10n.js'\n\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcSelect from '../NcSelect/index.js'\nimport NcCollectionListItem from './NcCollectionListItem.vue'\n\nimport { useCollections } from './useCollections.js'\nimport { searchService } from './service.ts'\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\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\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\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(e => {\n\t\t\t\t\tconsole.error('Failed to search for collections', e)\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\t)\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\tconsole.error('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\tconsole.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\tconsole.error(t('Failed to rename the project'), 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"],"mappings":"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"}
1	+ {"version":3,"file":"NcCollectionList-CLv50tJ3.mjs","sources":["../../src/components/NcCollectionList/NcCollectionListItem.vue","../../src/components/NcCollectionList/service.ts","../../src/components/NcCollectionList/useCollections.js","../../src/components/NcCollectionList/NcCollectionList.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\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 v-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 v-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 :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 icon=\"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 icon=\"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 v-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 :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.js'\nimport { getRoute } from '../NcRichText/autolink.js'\n\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcAvatar from '../NcAvatar/index.js'\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\tcollection: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\terror: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\temits: ['remove-resource', 'rename-collection'],\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('remove-resource', {\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('rename-collection', {\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: 44px;\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-left: 44px;\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-right: 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 axios, { type AxiosResponse } from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport type { OCSResponse } from '@nextcloud/typings/ocs'\n\n/\n Extracts the OCS data from a response\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 * @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 * @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 * @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 * @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 * @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 * @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 * @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, set } from 'vue'\nimport {\n\trenameCollectionService,\n\tgetCollectionsByResourceService,\n\tcreateCollectionService,\n\taddResourceService,\n\tremoveResourceService,\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\tset(storedCollections, 'value', collections)\n\t}\n\n\tconst addCollection = (collection) => {\n\t\tset(storedCollections, 'value', [...storedCollections.value, collection])\n\t}\n\n\tconst removeCollection = (collectionId) => {\n\t\tset(storedCollections, '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\tset(storedCollections.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\tconst addResourceToCollection = async ({ 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 - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\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 ref=\"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 v-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 { t } from '../../l10n.js'\n\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcSelect from '../NcSelect/index.js'\nimport NcCollectionListItem from './NcCollectionListItem.vue'\n\nimport { useCollections } from './useCollections.js'\nimport { searchService } from './service.ts'\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\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\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\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(e => {\n\t\t\t\t\tconsole.error('Failed to search for collections', e)\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\t)\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\tconsole.error('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\tconsole.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\tconsole.error(t('Failed to rename the project'), 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"],"mappings":"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"}

package/dist/chunks/{NcCollectionList-C-FWulfV.cjs → NcCollectionList-DXNSOjPG.cjs} RENAMED Viewed

@@ -3,11 +3,11 @@ require('../assets/NcCollectionList-yjTCAR46.css');
 const debounce = require("debounce");
 const Vue = require("vue");
 const _l10n = require("./_l10n-RKohWu5d.cjs");
-const NcAvatar = require("./NcAvatar-DThzrxm-.cjs");
-const NcSelect = require("./NcSelect-CnLfkqdF.cjs");
+const NcAvatar = require("./NcAvatar-DS1H-VrZ.cjs");
+const NcSelect = require("./NcSelect-CrxryIo3.cjs");
 const autolink = require("./autolink-BAgL31EZ.cjs");
-const NcActions = require("./NcActions-B76VN_Gz.cjs");
-const NcActionButton = require("./NcActionButton-D_9FsTpM.cjs");
+const NcActions = require("./NcActions-DRCkAU8h.cjs");
+const NcActionButton = require("./NcActionButton-BhSk7AAp.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const axios = require("@nextcloud/axios");
 const router = require("@nextcloud/router");
@@ -423,4 +423,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcCollectionList = __component__.exports;
 exports.NcCollectionList = NcCollectionList;
-//# sourceMappingURL=NcCollectionList-C-FWulfV.cjs.map
+//# sourceMappingURL=NcCollectionList-DXNSOjPG.cjs.map

package/dist/chunks/{NcCollectionList-C-FWulfV.cjs.map → NcCollectionList-DXNSOjPG.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcCollectionList-C-FWulfV.cjs","sources":["../../src/components/NcCollectionList/NcCollectionListItem.vue","../../src/components/NcCollectionList/service.ts","../../src/components/NcCollectionList/useCollections.js","../../src/components/NcCollectionList/NcCollectionList.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\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 v-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 v-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 :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 icon=\"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 icon=\"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 v-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 :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.js'\nimport { getRoute } from '../NcRichText/autolink.js'\n\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcAvatar from '../NcAvatar/index.js'\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\tcollection: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\terror: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\temits: ['remove-resource', 'rename-collection'],\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('remove-resource', {\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('rename-collection', {\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: 44px;\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-left: 44px;\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-right: 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 axios, { type AxiosResponse } from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport type { OCSResponse } from '@nextcloud/typings/ocs'\n\n/\n Extracts the OCS data from a response\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 * @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 * @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 * @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 * @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 * @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 * @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 * @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, set } from 'vue'\nimport {\n\trenameCollectionService,\n\tgetCollectionsByResourceService,\n\tcreateCollectionService,\n\taddResourceService,\n\tremoveResourceService,\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\tset(storedCollections, 'value', collections)\n\t}\n\n\tconst addCollection = (collection) => {\n\t\tset(storedCollections, 'value', [...storedCollections.value, collection])\n\t}\n\n\tconst removeCollection = (collectionId) => {\n\t\tset(storedCollections, '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\tset(storedCollections.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\tconst addResourceToCollection = async ({ 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 - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\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 ref=\"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 v-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 { t } from '../../l10n.js'\n\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcSelect from '../NcSelect/index.js'\nimport NcCollectionListItem from './NcCollectionListItem.vue'\n\nimport { useCollections } from './useCollections.js'\nimport { searchService } from './service.ts'\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\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\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\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(e => {\n\t\t\t\t\tconsole.error('Failed to search for collections', e)\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\t)\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\tconsole.error('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\tconsole.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\tconsole.error(t('Failed to rename the project'), 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","NcAvatar","NcActions","NcActionButton","getRoute","t","axios","generateOcsUrl","ref","set","NcSelect","debounce"],"mappings":"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"}
1	+ {"version":3,"file":"NcCollectionList-DXNSOjPG.cjs","sources":["../../src/components/NcCollectionList/NcCollectionListItem.vue","../../src/components/NcCollectionList/service.ts","../../src/components/NcCollectionList/useCollections.js","../../src/components/NcCollectionList/NcCollectionList.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\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 v-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 v-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 :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 icon=\"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 icon=\"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 v-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 :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.js'\nimport { getRoute } from '../NcRichText/autolink.js'\n\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcAvatar from '../NcAvatar/index.js'\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\tcollection: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\terror: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\temits: ['remove-resource', 'rename-collection'],\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('remove-resource', {\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('rename-collection', {\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: 44px;\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-left: 44px;\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-right: 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 axios, { type AxiosResponse } from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport type { OCSResponse } from '@nextcloud/typings/ocs'\n\n/\n Extracts the OCS data from a response\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 * @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 * @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 * @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 * @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 * @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 * @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 * @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, set } from 'vue'\nimport {\n\trenameCollectionService,\n\tgetCollectionsByResourceService,\n\tcreateCollectionService,\n\taddResourceService,\n\tremoveResourceService,\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\tset(storedCollections, 'value', collections)\n\t}\n\n\tconst addCollection = (collection) => {\n\t\tset(storedCollections, 'value', [...storedCollections.value, collection])\n\t}\n\n\tconst removeCollection = (collectionId) => {\n\t\tset(storedCollections, '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\tset(storedCollections.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\tconst addResourceToCollection = async ({ 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 - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\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 ref=\"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 v-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 { t } from '../../l10n.js'\n\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcSelect from '../NcSelect/index.js'\nimport NcCollectionListItem from './NcCollectionListItem.vue'\n\nimport { useCollections } from './useCollections.js'\nimport { searchService } from './service.ts'\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\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\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\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(e => {\n\t\t\t\t\tconsole.error('Failed to search for collections', e)\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\t)\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\tconsole.error('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\tconsole.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\tconsole.error(t('Failed to rename the project'), 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","NcAvatar","NcActions","NcActionButton","getRoute","t","axios","generateOcsUrl","ref","set","NcSelect","debounce"],"mappings":"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"}

package/dist/chunks/{NcColorPicker-MXMbRaLk.mjs → NcColorPicker-52xaYx9k.mjs} RENAMED Viewed

@@ -1,10 +1,10 @@
 import '../assets/NcColorPicker-DBcVuSwg.css';
-import { e as mdiDotsHorizontal, a as mdiCheck, f as mdiArrowLeft } from "./mdi-DoaiuWye.mjs";
+import { f as mdiDotsHorizontal, a as mdiCheck, g as mdiArrowLeft } from "./mdi-DXu6GWVJ.mjs";
 import { useVModel } from "@vueuse/core";
 import { Chrome } from "vue-color";
 import NcButton from "../Components/NcButton.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-Cb-cPj1R.mjs";
-import { N as NcPopover } from "./NcPopover-CAJVK-MR.mjs";
+import { N as NcPopover } from "./NcPopover-DxTXnL3u.mjs";
 import { u as useModelMigration } from "./useModelMigration-EhAWvqDD.mjs";
 import { d as defaultPalette } from "./GenColors-BrpkL3hT.mjs";
 import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
@@ -252,4 +252,4 @@ const NcColorPicker = __component__.exports;
 export {
   NcColorPicker as N
 };
-//# sourceMappingURL=NcColorPicker-MXMbRaLk.mjs.map
+//# sourceMappingURL=NcColorPicker-52xaYx9k.mjs.map

package/dist/chunks/{NcColorPicker-MXMbRaLk.mjs.map → NcColorPicker-52xaYx9k.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcColorPicker-MXMbRaLk.mjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component 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-bind 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\" :open.sync=\"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* 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<template>\n\t<NcPopover :shown.sync=\"modelOpen\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@apply-hide=\"handleClose\">\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 role=\"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=\"{ 'color-picker--advanced-fields': advanced && advancedFields }\">\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 v-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: contrastColor,\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 type=\"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-${uid}`\"\n\t\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t\t@click=\"pickColor(color)\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Chrome v-else\n\t\t\t\t\t\tv-model=\"currentColor\"\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@input=\"pickColor\" />\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 v-if=\"advanced\"\n\t\t\t\t\t\t:aria-label=\"ariaBack\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleBack\">\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 v-else\n\t\t\t\t\t\t:aria-label=\"ariaMore\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleMoreSettings\">\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 variant=\"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<script>\nimport { mdiArrowLeft, mdiCheck, mdiDotsHorizontal } from '@mdi/js'\nimport { useVModel } from '@vueuse/core'\nimport { Chrome } from 'vue-color'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { defaultPalette } from '../../utils/GenColors.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { t } from '../../l10n.js'\n\nconst HEX_REGEX = /^#([a-f0-9]{3}\|[a-f0-9]{6})$/i\n\nexport default {\n\tname: 'NcColorPicker',\n\n\tcomponents: {\n\t\tChrome,\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tNcPopover,\n\t},\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t /\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t A HEX color that represents the initial value of the picker\n\t\t /\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t\t /\n\t\tadvancedFields: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Selector for the popover container\n\t\t /\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/\n\t\t The open state of the color picker.\n\t\t * This can be used as two-way binding together with the `update:open` event.\n\t\t /\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Provide a custom array of colors to show.\n\t\t * Can be either an array of string hexadecimal colors,\n\t\t * or an array of object with a `color` property with hexadecimal color string,\n\t\t * and a `name` property for accessibility.\n\t\t \n\t\t @type {string[] \| {color: string, name: string}[]}\n\t\t /\n\t\tpalette: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [...defaultPalette],\n\t\t\tvalidator: (palette) => palette.every(item =>\n\t\t\t\t(typeof item === 'string' && HEX_REGEX.test(item))\n\t\t\t\t\|\| (typeof item === 'object' && item.color && HEX_REGEX.test(item.color)),\n\t\t\t),\n\t\t},\n\n\t\t/\n\t\t Limit selectable colors to only the provided palette\n\t\t /\n\t\tpaletteOnly: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t/\n\t\t @deprecated use the `closed` event instead.\n\t\t /\n\t\t'close',\n\t\t/\n\t\t Emitted when the color picker is closed and all transitions have finished.\n\t\t /\n\t\t'closed',\n\t\t'submit',\n\t\t'update:open',\n\t\t/\n\t\t Emits a hexadecimal string e.g. '#ffffff'\n\t\t /\n\t\t'update:modelValue',\n\t\t/\n\t\t Same as update:modelValue for Vue 2 compatibility\n\t\t /\n\t\t'update:model-value',\n\t\t/\n\t\t Same as update:modelValue for Vue 2 compatibility.\n\t\t \n\t\t @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t /\n\t\t'input',\n\t\t/\n\t\t @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t /\n\t\t'update:value',\n\t],\n\n\tsetup(props, { emit }) {\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\t\tconst modelOpen = useVModel(props, 'open', emit)\n\n\t\treturn {\n\t\t\tmdiArrowLeft,\n\t\t\tmdiCheck,\n\t\t\tmdiDotsHorizontal,\n\t\t\tmodel,\n\t\t\tmodelOpen,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentColor: this.model,\n\t\t\tadvanced: false,\n\t\t\tariaBack: t('Back'),\n\t\t\tariaMore: t('More options'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnormalizedPalette() {\n\t\t\treturn this.palette.map((item) => ({\n\t\t\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\t\t\tname: typeof item === 'object' && item.name\n\t\t\t\t\t? item.name\n\t\t\t\t\t: t('A color with a HEX value {hex}', { hex: item.color }),\n\t\t\t}))\n\t\t},\n\n\t\tuid() {\n\t\t\treturn GenRandomId()\n\t\t},\n\t\tcontrastColor() {\n\t\t\tconst black = '#000000'\n\t\t\tconst white = '#FFFFFF'\n\t\t\treturn (this.calculateLuma(this.currentColor) > 0.5) ? black : white\n\t\t},\n\t},\n\n\twatch: {\n\t\tmodel(color) {\n\t\t\tthis.currentColor = color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/\n\t\t Submit a picked colour and close picker\n\t\t * @param {Function} hideCallback callback to close popover\n\t\t /\n\t\thandleConfirm(hideCallback) {\n\t\t\t/\n\t\t\t Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t /\n\t\t\tthis.$emit('submit', this.currentColor)\n\t\t\thideCallback()\n\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleClose() {\n\t\t\t/\n\t\t\t Emitted after picker close.\n\t\t\t \n\t\t\t @deprecated removed in v9 - use the `closed` event instead\n\t\t\t /\n\t\t\tthis.$emit('close')\n\t\t\t/\n\t\t\t Emitted after the picker is closed and all transitions have finished.\n\t\t\t /\n\t\t\tthis.$emit('closed')\n\t\t\t/\n\t\t\t @deprecated use the 'close' event instead\n\t\t\t /\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/\n\t\t Inner navigations\n\t\t /\n\t\thandleBack() {\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleMoreSettings() {\n\t\t\tthis.advanced = true\n\t\t},\n\n\t\t/\n\t\t Pick a colour\n\t\t \n\t\t @param {string} color the picked color\n\t\t /\n\t\tpickColor(color) {\n\t\t\tif (typeof color !== 'string') {\n\t\t\t\tcolor = this.currentColor.hex\n\t\t\t}\n\t\t\tthis.currentColor = color\n\n\t\t\tthis.model = color\n\n\t\t\t/\n\t\t\t Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t /\n\t\t\tthis.$emit('input', color)\n\n\t\t},\n\n\t\t/\n\t\t Calculate luminance of provided hex color\n\t\t \n\t\t @param {string} color the hex color\n\t\t /\n\t\tcalculateLuma(color) {\n\t\t\tconst [red, green, blue] = this.hexToRGB(color)\n\t\t\treturn (0.2126 red + 0.7152 * green + 0.0722 * blue) / 255\n\t\t},\n\n\t\t/*\n\t\t Convert hex color to RGB\n\t\t \n\t\t @param {string} hex the hex color\n\t\t * @return {[number, number, number]}\n\t\t /\n\t\thexToRGB(hex) {\n\t\t\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\t\t\treturn result\n\t\t\t\t? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n\t\t\t\t: [0, 0, 0]\n\t\t},\n\t},\n}\n\n</script>\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\tbox-sizing: content-box !important;\n\twidth: 176px;\n\tpadding: 8px;\n\tborder-radius: 3px;\n\n\t&--advanced-fields {\n\t\twidth: 264px;\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\tjustify-content: space-between;\n\t\tmargin-top: 10px;\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, var(--border-radius-large));\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-large) + 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-large) - 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-left: 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 {\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 {\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":[],"mappings":"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"}
1	+ {"version":3,"file":"NcColorPicker-52xaYx9k.mjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component 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-bind 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\" :open.sync=\"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* 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<template>\n\t<NcPopover :shown.sync=\"modelOpen\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@apply-hide=\"handleClose\">\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 role=\"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=\"{ 'color-picker--advanced-fields': advanced && advancedFields }\">\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 v-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: contrastColor,\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 type=\"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-${uid}`\"\n\t\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t\t@click=\"pickColor(color)\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Chrome v-else\n\t\t\t\t\t\tv-model=\"currentColor\"\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@input=\"pickColor\" />\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 v-if=\"advanced\"\n\t\t\t\t\t\t:aria-label=\"ariaBack\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleBack\">\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 v-else\n\t\t\t\t\t\t:aria-label=\"ariaMore\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleMoreSettings\">\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 variant=\"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<script>\nimport { mdiArrowLeft, mdiCheck, mdiDotsHorizontal } from '@mdi/js'\nimport { useVModel } from '@vueuse/core'\nimport { Chrome } from 'vue-color'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { defaultPalette } from '../../utils/GenColors.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { t } from '../../l10n.js'\n\nconst HEX_REGEX = /^#([a-f0-9]{3}\|[a-f0-9]{6})$/i\n\nexport default {\n\tname: 'NcColorPicker',\n\n\tcomponents: {\n\t\tChrome,\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tNcPopover,\n\t},\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t /\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t A HEX color that represents the initial value of the picker\n\t\t /\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t\t /\n\t\tadvancedFields: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Selector for the popover container\n\t\t /\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/\n\t\t The open state of the color picker.\n\t\t * This can be used as two-way binding together with the `update:open` event.\n\t\t /\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Provide a custom array of colors to show.\n\t\t * Can be either an array of string hexadecimal colors,\n\t\t * or an array of object with a `color` property with hexadecimal color string,\n\t\t * and a `name` property for accessibility.\n\t\t \n\t\t @type {string[] \| {color: string, name: string}[]}\n\t\t /\n\t\tpalette: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [...defaultPalette],\n\t\t\tvalidator: (palette) => palette.every(item =>\n\t\t\t\t(typeof item === 'string' && HEX_REGEX.test(item))\n\t\t\t\t\|\| (typeof item === 'object' && item.color && HEX_REGEX.test(item.color)),\n\t\t\t),\n\t\t},\n\n\t\t/\n\t\t Limit selectable colors to only the provided palette\n\t\t /\n\t\tpaletteOnly: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t/\n\t\t @deprecated use the `closed` event instead.\n\t\t /\n\t\t'close',\n\t\t/\n\t\t Emitted when the color picker is closed and all transitions have finished.\n\t\t /\n\t\t'closed',\n\t\t'submit',\n\t\t'update:open',\n\t\t/\n\t\t Emits a hexadecimal string e.g. '#ffffff'\n\t\t /\n\t\t'update:modelValue',\n\t\t/\n\t\t Same as update:modelValue for Vue 2 compatibility\n\t\t /\n\t\t'update:model-value',\n\t\t/\n\t\t Same as update:modelValue for Vue 2 compatibility.\n\t\t \n\t\t @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t /\n\t\t'input',\n\t\t/\n\t\t @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t /\n\t\t'update:value',\n\t],\n\n\tsetup(props, { emit }) {\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\t\tconst modelOpen = useVModel(props, 'open', emit)\n\n\t\treturn {\n\t\t\tmdiArrowLeft,\n\t\t\tmdiCheck,\n\t\t\tmdiDotsHorizontal,\n\t\t\tmodel,\n\t\t\tmodelOpen,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentColor: this.model,\n\t\t\tadvanced: false,\n\t\t\tariaBack: t('Back'),\n\t\t\tariaMore: t('More options'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnormalizedPalette() {\n\t\t\treturn this.palette.map((item) => ({\n\t\t\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\t\t\tname: typeof item === 'object' && item.name\n\t\t\t\t\t? item.name\n\t\t\t\t\t: t('A color with a HEX value {hex}', { hex: item.color }),\n\t\t\t}))\n\t\t},\n\n\t\tuid() {\n\t\t\treturn GenRandomId()\n\t\t},\n\t\tcontrastColor() {\n\t\t\tconst black = '#000000'\n\t\t\tconst white = '#FFFFFF'\n\t\t\treturn (this.calculateLuma(this.currentColor) > 0.5) ? black : white\n\t\t},\n\t},\n\n\twatch: {\n\t\tmodel(color) {\n\t\t\tthis.currentColor = color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/\n\t\t Submit a picked colour and close picker\n\t\t * @param {Function} hideCallback callback to close popover\n\t\t /\n\t\thandleConfirm(hideCallback) {\n\t\t\t/\n\t\t\t Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t /\n\t\t\tthis.$emit('submit', this.currentColor)\n\t\t\thideCallback()\n\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleClose() {\n\t\t\t/\n\t\t\t Emitted after picker close.\n\t\t\t \n\t\t\t @deprecated removed in v9 - use the `closed` event instead\n\t\t\t /\n\t\t\tthis.$emit('close')\n\t\t\t/\n\t\t\t Emitted after the picker is closed and all transitions have finished.\n\t\t\t /\n\t\t\tthis.$emit('closed')\n\t\t\t/\n\t\t\t @deprecated use the 'close' event instead\n\t\t\t /\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/\n\t\t Inner navigations\n\t\t /\n\t\thandleBack() {\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleMoreSettings() {\n\t\t\tthis.advanced = true\n\t\t},\n\n\t\t/\n\t\t Pick a colour\n\t\t \n\t\t @param {string} color the picked color\n\t\t /\n\t\tpickColor(color) {\n\t\t\tif (typeof color !== 'string') {\n\t\t\t\tcolor = this.currentColor.hex\n\t\t\t}\n\t\t\tthis.currentColor = color\n\n\t\t\tthis.model = color\n\n\t\t\t/\n\t\t\t Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t /\n\t\t\tthis.$emit('input', color)\n\n\t\t},\n\n\t\t/\n\t\t Calculate luminance of provided hex color\n\t\t \n\t\t @param {string} color the hex color\n\t\t /\n\t\tcalculateLuma(color) {\n\t\t\tconst [red, green, blue] = this.hexToRGB(color)\n\t\t\treturn (0.2126 red + 0.7152 * green + 0.0722 * blue) / 255\n\t\t},\n\n\t\t/*\n\t\t Convert hex color to RGB\n\t\t \n\t\t @param {string} hex the hex color\n\t\t * @return {[number, number, number]}\n\t\t /\n\t\thexToRGB(hex) {\n\t\t\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\t\t\treturn result\n\t\t\t\t? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n\t\t\t\t: [0, 0, 0]\n\t\t},\n\t},\n}\n\n</script>\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\tbox-sizing: content-box !important;\n\twidth: 176px;\n\tpadding: 8px;\n\tborder-radius: 3px;\n\n\t&--advanced-fields {\n\t\twidth: 264px;\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\tjustify-content: space-between;\n\t\tmargin-top: 10px;\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, var(--border-radius-large));\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-large) + 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-large) - 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-left: 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 {\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 {\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":[],"mappings":"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"}

package/dist/chunks/{NcColorPicker-C3lzQVxY.cjs → NcColorPicker-CbiIpVlT.cjs} RENAMED Viewed

@@ -1,11 +1,11 @@
 require('../assets/NcColorPicker-DBcVuSwg.css');
 "use strict";
-const mdi = require("./mdi-B_QN3oas.cjs");
+const mdi = require("./mdi-BBwE-MZC.cjs");
 const core = require("@vueuse/core");
 const vueColor = require("vue-color");
 const Components_NcButton = require("../Components/NcButton.cjs");
 const NcIconSvgWrapper = require("./NcIconSvgWrapper-CrnN5Sq5.cjs");
-const NcPopover = require("./NcPopover-QGSKWhSP.cjs");
+const NcPopover = require("./NcPopover-DjeDGPXc.cjs");
 const useModelMigration = require("./useModelMigration-D5zhrNXr.cjs");
 const GenColors = require("./GenColors-BjsCKF7S.cjs");
 const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
@@ -251,4 +251,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcColorPicker = __component__.exports;
 exports.NcColorPicker = NcColorPicker;
-//# sourceMappingURL=NcColorPicker-C3lzQVxY.cjs.map
+//# sourceMappingURL=NcColorPicker-CbiIpVlT.cjs.map

package/dist/chunks/{NcColorPicker-C3lzQVxY.cjs.map → NcColorPicker-CbiIpVlT.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcColorPicker-C3lzQVxY.cjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component 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-bind 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\" :open.sync=\"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* 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<template>\n\t<NcPopover :shown.sync=\"modelOpen\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@apply-hide=\"handleClose\">\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 role=\"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=\"{ 'color-picker--advanced-fields': advanced && advancedFields }\">\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 v-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: contrastColor,\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 type=\"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-${uid}`\"\n\t\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t\t@click=\"pickColor(color)\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Chrome v-else\n\t\t\t\t\t\tv-model=\"currentColor\"\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@input=\"pickColor\" />\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 v-if=\"advanced\"\n\t\t\t\t\t\t:aria-label=\"ariaBack\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleBack\">\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 v-else\n\t\t\t\t\t\t:aria-label=\"ariaMore\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleMoreSettings\">\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 variant=\"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<script>\nimport { mdiArrowLeft, mdiCheck, mdiDotsHorizontal } from '@mdi/js'\nimport { useVModel } from '@vueuse/core'\nimport { Chrome } from 'vue-color'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { defaultPalette } from '../../utils/GenColors.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { t } from '../../l10n.js'\n\nconst HEX_REGEX = /^#([a-f0-9]{3}\|[a-f0-9]{6})$/i\n\nexport default {\n\tname: 'NcColorPicker',\n\n\tcomponents: {\n\t\tChrome,\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tNcPopover,\n\t},\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t /\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t A HEX color that represents the initial value of the picker\n\t\t /\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t\t /\n\t\tadvancedFields: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Selector for the popover container\n\t\t /\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/\n\t\t The open state of the color picker.\n\t\t * This can be used as two-way binding together with the `update:open` event.\n\t\t /\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Provide a custom array of colors to show.\n\t\t * Can be either an array of string hexadecimal colors,\n\t\t * or an array of object with a `color` property with hexadecimal color string,\n\t\t * and a `name` property for accessibility.\n\t\t \n\t\t @type {string[] \| {color: string, name: string}[]}\n\t\t /\n\t\tpalette: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [...defaultPalette],\n\t\t\tvalidator: (palette) => palette.every(item =>\n\t\t\t\t(typeof item === 'string' && HEX_REGEX.test(item))\n\t\t\t\t\|\| (typeof item === 'object' && item.color && HEX_REGEX.test(item.color)),\n\t\t\t),\n\t\t},\n\n\t\t/\n\t\t Limit selectable colors to only the provided palette\n\t\t /\n\t\tpaletteOnly: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t/\n\t\t @deprecated use the `closed` event instead.\n\t\t /\n\t\t'close',\n\t\t/\n\t\t Emitted when the color picker is closed and all transitions have finished.\n\t\t /\n\t\t'closed',\n\t\t'submit',\n\t\t'update:open',\n\t\t/\n\t\t Emits a hexadecimal string e.g. '#ffffff'\n\t\t /\n\t\t'update:modelValue',\n\t\t/\n\t\t Same as update:modelValue for Vue 2 compatibility\n\t\t /\n\t\t'update:model-value',\n\t\t/\n\t\t Same as update:modelValue for Vue 2 compatibility.\n\t\t \n\t\t @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t /\n\t\t'input',\n\t\t/\n\t\t @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t /\n\t\t'update:value',\n\t],\n\n\tsetup(props, { emit }) {\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\t\tconst modelOpen = useVModel(props, 'open', emit)\n\n\t\treturn {\n\t\t\tmdiArrowLeft,\n\t\t\tmdiCheck,\n\t\t\tmdiDotsHorizontal,\n\t\t\tmodel,\n\t\t\tmodelOpen,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentColor: this.model,\n\t\t\tadvanced: false,\n\t\t\tariaBack: t('Back'),\n\t\t\tariaMore: t('More options'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnormalizedPalette() {\n\t\t\treturn this.palette.map((item) => ({\n\t\t\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\t\t\tname: typeof item === 'object' && item.name\n\t\t\t\t\t? item.name\n\t\t\t\t\t: t('A color with a HEX value {hex}', { hex: item.color }),\n\t\t\t}))\n\t\t},\n\n\t\tuid() {\n\t\t\treturn GenRandomId()\n\t\t},\n\t\tcontrastColor() {\n\t\t\tconst black = '#000000'\n\t\t\tconst white = '#FFFFFF'\n\t\t\treturn (this.calculateLuma(this.currentColor) > 0.5) ? black : white\n\t\t},\n\t},\n\n\twatch: {\n\t\tmodel(color) {\n\t\t\tthis.currentColor = color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/\n\t\t Submit a picked colour and close picker\n\t\t * @param {Function} hideCallback callback to close popover\n\t\t /\n\t\thandleConfirm(hideCallback) {\n\t\t\t/\n\t\t\t Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t /\n\t\t\tthis.$emit('submit', this.currentColor)\n\t\t\thideCallback()\n\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleClose() {\n\t\t\t/\n\t\t\t Emitted after picker close.\n\t\t\t \n\t\t\t @deprecated removed in v9 - use the `closed` event instead\n\t\t\t /\n\t\t\tthis.$emit('close')\n\t\t\t/\n\t\t\t Emitted after the picker is closed and all transitions have finished.\n\t\t\t /\n\t\t\tthis.$emit('closed')\n\t\t\t/\n\t\t\t @deprecated use the 'close' event instead\n\t\t\t /\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/\n\t\t Inner navigations\n\t\t /\n\t\thandleBack() {\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleMoreSettings() {\n\t\t\tthis.advanced = true\n\t\t},\n\n\t\t/\n\t\t Pick a colour\n\t\t \n\t\t @param {string} color the picked color\n\t\t /\n\t\tpickColor(color) {\n\t\t\tif (typeof color !== 'string') {\n\t\t\t\tcolor = this.currentColor.hex\n\t\t\t}\n\t\t\tthis.currentColor = color\n\n\t\t\tthis.model = color\n\n\t\t\t/\n\t\t\t Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t /\n\t\t\tthis.$emit('input', color)\n\n\t\t},\n\n\t\t/\n\t\t Calculate luminance of provided hex color\n\t\t \n\t\t @param {string} color the hex color\n\t\t /\n\t\tcalculateLuma(color) {\n\t\t\tconst [red, green, blue] = this.hexToRGB(color)\n\t\t\treturn (0.2126 red + 0.7152 * green + 0.0722 * blue) / 255\n\t\t},\n\n\t\t/*\n\t\t Convert hex color to RGB\n\t\t \n\t\t @param {string} hex the hex color\n\t\t * @return {[number, number, number]}\n\t\t /\n\t\thexToRGB(hex) {\n\t\t\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\t\t\treturn result\n\t\t\t\t? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n\t\t\t\t: [0, 0, 0]\n\t\t},\n\t},\n}\n\n</script>\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\tbox-sizing: content-box !important;\n\twidth: 176px;\n\tpadding: 8px;\n\tborder-radius: 3px;\n\n\t&--advanced-fields {\n\t\twidth: 264px;\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\tjustify-content: space-between;\n\t\tmargin-top: 10px;\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, var(--border-radius-large));\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-large) + 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-large) - 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-left: 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 {\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 {\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":["Chrome","NcButton","NcIconSvgWrapper","NcPopover","defaultPalette","useModelMigration","useVModel","mdiArrowLeft","mdiCheck","mdiDotsHorizontal","t","GenRandomId"],"mappings":"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"}
1	+ {"version":3,"file":"NcColorPicker-CbiIpVlT.cjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component 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-bind 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\" :open.sync=\"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* 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<template>\n\t<NcPopover :shown.sync=\"modelOpen\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@apply-hide=\"handleClose\">\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 role=\"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=\"{ 'color-picker--advanced-fields': advanced && advancedFields }\">\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 v-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: contrastColor,\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 type=\"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-${uid}`\"\n\t\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t\t@click=\"pickColor(color)\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Chrome v-else\n\t\t\t\t\t\tv-model=\"currentColor\"\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@input=\"pickColor\" />\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 v-if=\"advanced\"\n\t\t\t\t\t\t:aria-label=\"ariaBack\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleBack\">\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 v-else\n\t\t\t\t\t\t:aria-label=\"ariaMore\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleMoreSettings\">\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 variant=\"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<script>\nimport { mdiArrowLeft, mdiCheck, mdiDotsHorizontal } from '@mdi/js'\nimport { useVModel } from '@vueuse/core'\nimport { Chrome } from 'vue-color'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { defaultPalette } from '../../utils/GenColors.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { t } from '../../l10n.js'\n\nconst HEX_REGEX = /^#([a-f0-9]{3}\|[a-f0-9]{6})$/i\n\nexport default {\n\tname: 'NcColorPicker',\n\n\tcomponents: {\n\t\tChrome,\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tNcPopover,\n\t},\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t /\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t A HEX color that represents the initial value of the picker\n\t\t /\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t\t /\n\t\tadvancedFields: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Selector for the popover container\n\t\t /\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/\n\t\t The open state of the color picker.\n\t\t * This can be used as two-way binding together with the `update:open` event.\n\t\t /\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Provide a custom array of colors to show.\n\t\t * Can be either an array of string hexadecimal colors,\n\t\t * or an array of object with a `color` property with hexadecimal color string,\n\t\t * and a `name` property for accessibility.\n\t\t \n\t\t @type {string[] \| {color: string, name: string}[]}\n\t\t /\n\t\tpalette: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [...defaultPalette],\n\t\t\tvalidator: (palette) => palette.every(item =>\n\t\t\t\t(typeof item === 'string' && HEX_REGEX.test(item))\n\t\t\t\t\|\| (typeof item === 'object' && item.color && HEX_REGEX.test(item.color)),\n\t\t\t),\n\t\t},\n\n\t\t/\n\t\t Limit selectable colors to only the provided palette\n\t\t /\n\t\tpaletteOnly: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t/\n\t\t @deprecated use the `closed` event instead.\n\t\t /\n\t\t'close',\n\t\t/\n\t\t Emitted when the color picker is closed and all transitions have finished.\n\t\t /\n\t\t'closed',\n\t\t'submit',\n\t\t'update:open',\n\t\t/\n\t\t Emits a hexadecimal string e.g. '#ffffff'\n\t\t /\n\t\t'update:modelValue',\n\t\t/\n\t\t Same as update:modelValue for Vue 2 compatibility\n\t\t /\n\t\t'update:model-value',\n\t\t/\n\t\t Same as update:modelValue for Vue 2 compatibility.\n\t\t \n\t\t @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t /\n\t\t'input',\n\t\t/\n\t\t @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t /\n\t\t'update:value',\n\t],\n\n\tsetup(props, { emit }) {\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\t\tconst modelOpen = useVModel(props, 'open', emit)\n\n\t\treturn {\n\t\t\tmdiArrowLeft,\n\t\t\tmdiCheck,\n\t\t\tmdiDotsHorizontal,\n\t\t\tmodel,\n\t\t\tmodelOpen,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentColor: this.model,\n\t\t\tadvanced: false,\n\t\t\tariaBack: t('Back'),\n\t\t\tariaMore: t('More options'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnormalizedPalette() {\n\t\t\treturn this.palette.map((item) => ({\n\t\t\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\t\t\tname: typeof item === 'object' && item.name\n\t\t\t\t\t? item.name\n\t\t\t\t\t: t('A color with a HEX value {hex}', { hex: item.color }),\n\t\t\t}))\n\t\t},\n\n\t\tuid() {\n\t\t\treturn GenRandomId()\n\t\t},\n\t\tcontrastColor() {\n\t\t\tconst black = '#000000'\n\t\t\tconst white = '#FFFFFF'\n\t\t\treturn (this.calculateLuma(this.currentColor) > 0.5) ? black : white\n\t\t},\n\t},\n\n\twatch: {\n\t\tmodel(color) {\n\t\t\tthis.currentColor = color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/\n\t\t Submit a picked colour and close picker\n\t\t * @param {Function} hideCallback callback to close popover\n\t\t /\n\t\thandleConfirm(hideCallback) {\n\t\t\t/\n\t\t\t Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t /\n\t\t\tthis.$emit('submit', this.currentColor)\n\t\t\thideCallback()\n\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleClose() {\n\t\t\t/\n\t\t\t Emitted after picker close.\n\t\t\t \n\t\t\t @deprecated removed in v9 - use the `closed` event instead\n\t\t\t /\n\t\t\tthis.$emit('close')\n\t\t\t/\n\t\t\t Emitted after the picker is closed and all transitions have finished.\n\t\t\t /\n\t\t\tthis.$emit('closed')\n\t\t\t/\n\t\t\t @deprecated use the 'close' event instead\n\t\t\t /\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/\n\t\t Inner navigations\n\t\t /\n\t\thandleBack() {\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleMoreSettings() {\n\t\t\tthis.advanced = true\n\t\t},\n\n\t\t/\n\t\t Pick a colour\n\t\t \n\t\t @param {string} color the picked color\n\t\t /\n\t\tpickColor(color) {\n\t\t\tif (typeof color !== 'string') {\n\t\t\t\tcolor = this.currentColor.hex\n\t\t\t}\n\t\t\tthis.currentColor = color\n\n\t\t\tthis.model = color\n\n\t\t\t/\n\t\t\t Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t /\n\t\t\tthis.$emit('input', color)\n\n\t\t},\n\n\t\t/\n\t\t Calculate luminance of provided hex color\n\t\t \n\t\t @param {string} color the hex color\n\t\t /\n\t\tcalculateLuma(color) {\n\t\t\tconst [red, green, blue] = this.hexToRGB(color)\n\t\t\treturn (0.2126 red + 0.7152 * green + 0.0722 * blue) / 255\n\t\t},\n\n\t\t/*\n\t\t Convert hex color to RGB\n\t\t \n\t\t @param {string} hex the hex color\n\t\t * @return {[number, number, number]}\n\t\t /\n\t\thexToRGB(hex) {\n\t\t\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\t\t\treturn result\n\t\t\t\t? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n\t\t\t\t: [0, 0, 0]\n\t\t},\n\t},\n}\n\n</script>\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\tbox-sizing: content-box !important;\n\twidth: 176px;\n\tpadding: 8px;\n\tborder-radius: 3px;\n\n\t&--advanced-fields {\n\t\twidth: 264px;\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\tjustify-content: space-between;\n\t\tmargin-top: 10px;\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, var(--border-radius-large));\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-large) + 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-large) - 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-left: 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 {\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 {\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":["Chrome","NcButton","NcIconSvgWrapper","NcPopover","defaultPalette","useModelMigration","useVModel","mdiArrowLeft","mdiCheck","mdiDotsHorizontal","t","GenRandomId"],"mappings":"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"}