npm - @nextcloud/vue - Versions diffs - 8.14.0 → 8.15.0 - Mend

@nextcloud/vue 8.14.0 → 8.15.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 (334) hide show

package/dist/chunks/NcAppNavigationItem-fKe0Oi-K.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcAppNavigationItem-fKe0Oi-K.mjs","sources":["../../src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue","../../node_modules/vue-material-design-icons/Pencil.vue","../../node_modules/vue-material-design-icons/Undo.vue","../../src/components/NcAppNavigationItem/NcAppNavigationItem.vue"],"sourcesContent":["\n\n<template>\n\t\n\t<NcButton class=\"icon-collapse\"\n\t\t:class=\"{'icon-collapse--open':open}\"\n\t\ttype=\"tertiary\"\n\t\t:aria-label=\"labelButton\"\n\t\t@click=\"onClick\">\n\t\t<template #icon>\n\t\t\t<ChevronUp v-if=\"open\"\n\t\t\t\t:size=\"20\" />\n\t\t\t<ChevronDown v-else\n\t\t\t\t:size=\"20\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\n\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport ChevronUp from 'vue-material-design-icons/ChevronUp.vue'\n\nexport default {\n\tname: 'NcAppNavigationIconCollapsible',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tChevronDown,\n\t\tChevronUp,\n\t},\n\n\tprops: {\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tcomputed: {\n\t\tlabelButton() {\n\t\t\treturn this.open ? t('Collapse menu') : t('Open menu')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonClick(e) {\n\t\t\tthis.$emit('click', e)\n\t\t},\n\t},\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.button-vue.icon-collapse {\n\tposition: relative;\n\tz-index: 105; // above a, under button\n\tcolor: var(--color-main-text);\n\tright: 0;\n\t&--open {\n\t\tcolor: var(--color-main-text);\n\t\t&:hover{\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\t}\n}\n\n</style>\n","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon pencil-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"PencilIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon undo-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"UndoIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","\n\n<docs>\n\n# Usage\n\n### Simple element\n\n* With an icon:\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"My name\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t},\n\t}\n\t</script>\n```\n* With a spinning loader instead of the icon:\n\n```vue\n<ul>\n\t<NcAppNavigationItem name=\"Loading Item\" :loading=\"true\" />\n</ul>\n```\n* With an active state (only needed when not using `vue-router` and the `to` property, otherwise this is set automatically)\n\n```vue\n<ul>\n\t<NcAppNavigationItem name=\"Current page\" :active=\"true\" />\n</ul>\n```\n\n### Element with actions\nWrap the children in a template. If you have more than 2 actions, a popover menu and a menu\nbutton will be automatically created.\n\n```vue\n\t<template>\n\t\t<div id=\"app-navigation-vue\">\n\t\t\t<ul>\n\t\t\t\t<NcAppNavigationItem name=\"Item with actions\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tEdit\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcActionLink>\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationItem>\n\t\t\t</ul>\n\t\t</div>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check.vue'\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n\n### Element with counter\nJust nest the counter in a template within `<NcAppNavigationItem>` and add `#counter` to it.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Item with counter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Folder :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #counter>\n\t\t\t\t\t<NcCounterBubble>\n\t\t\t\t\t\t99+\n\t\t\t\t\t</NcCounterBubble>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t},\n\t}\n\t</script>\n```\n\n### Element with children\n\nWrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose wether to allow or\nprevent the user from collapsing the items.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Item with children\" :allowCollapse=\"true\" :open=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Folder :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #counter>\n\t\t\t\t\t<NcCounterBubble>\n\t\t\t\t\t\t99+\n\t\t\t\t\t</NcCounterBubble>\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tEdit\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDelete\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionLink>\n\t\t\t\t</template>\n\t\t\t\t<template>\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild1\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild2\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild3\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild4\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder.vue'\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n\n### Editable element\nAdd the prop `:editable=true` and an edit placeholder if you need it. By default\nthe placeholder is the previous name of the element.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Editable Item\" :editable=\"true\"\n\t\t\t\teditPlaceholder=\"your_placeholder_here\" @update:name=\"function(value){alert(value)}\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Folder :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t},\n\t}\n\t</script>\n```\n\n### Undo element\nJust set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.\n\n```\n<ul>\n\t<NcAppNavigationItem :undo=\"true\" name=\"Deleted important entry\" @undo=\"alert('undo delete')\" />\n</ul>\n```\n\n### Link element\nHref that start by http will be treated as external and opened in a new tab\n```\n<div>\n\t<ul>\n\t\t<NcAppNavigationItem name=\"Files\" href=\"/index.php/apps/files\" />\n\t\t<NcAppNavigationItem name=\"Nextcloud\" href=\"https://nextcloud.com\" />\n\t</ul>\n</div>\n```\n\n### Custom title\n```\n<ul>\n\t<NcAppNavigationItem name=\"Nextcloud\" title=\"Open the Nextcloud website\" href=\"https://nextcloud.com\" />\n</ul>\n```\n\n### Pinned element\nJust set the `pinned` prop.\n```\n<ul>\n\t<NcAppNavigationItem name=\"Pinned item\" :pinned=\"true\" />\n</ul>\n```\n</docs>\n\n<template>\n\t<li :id=\"id\"\n\t\t:class=\"{\n\t\t\t'app-navigation-entry--opened': opened,\n\t\t\t'app-navigation-entry--pinned': pinned,\n\t\t\t'app-navigation-entry--collapsible': collapsible,\n\t\t}\"\n\t\tclass=\"app-navigation-entry-wrapper\">\n\t\t<component :is=\"isRouterLink ? 'router-link' : 'NcVNodes'\"\n\t\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\t\t:custom=\"isRouterLink ? true : false\"\n\t\t\t:to=\"to\"\n\t\t\t:exact=\"isRouterLink ? exact : null\">\n\t\t\t<div :class=\"{\n\t\t\t\t\t'app-navigation-entry--editing': editingActive,\n\t\t\t\t\t'app-navigation-entry--deleted': undo,\n\t\t\t\t\t'active': (isActive && to) || active,\n\t\t\t\t}\"\n\t\t\t\tclass=\"app-navigation-entry\">\n\t\t\t\t\n\t\t\t\t<a v-if=\"!undo\"\n\t\t\t\t\tclass=\"app-navigation-entry-link\"\n\t\t\t\t\t:aria-current=\"active || (isActive && to) ? 'page' : undefined\"\n\t\t\t\t\t:aria-description=\"ariaDescription\"\n\t\t\t\t\t:aria-expanded=\"hasChildren ? opened.toString() : undefined\"\n\t\t\t\t\t:href=\"href || routerLinkHref || '#'\"\n\t\t\t\t\t:target=\"isExternal(href) ? '_blank' : undefined\"\n\t\t\t\t\t:title=\"title || name\"\n\t\t\t\t\t@blur=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@focus=\"handleFocus\"\n\t\t\t\t\t@keydown.tab.exact=\"handleTab\">\n\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t<div :class=\"{ [icon]: icon }\"\n\t\t\t\t\t\tclass=\"app-navigation-entry-icon\">\n\t\t\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t\t\t\n\t\t\t\t\t\t<slot v-else name=\"icon\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<span v-if=\"!editingActive\" class=\"app-navigation-entry__name\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div v-if=\"editingActive\" class=\"editingContainer\">\n\t\t\t\t\t\t<NcInputConfirmCancel ref=\"editingInput\"\n\t\t\t\t\t\t\tv-model=\"editingValue\"\n\t\t\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t\t\t:primary=\"(isActive && to) || active\"\n\t\t\t\t\t\t\t@cancel=\"cancelEditing\"\n\t\t\t\t\t\t\t@confirm=\"handleEditingDone\" />\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\n\t\t\t\t\n\t\t\t\t<div v-if=\"undo\" class=\"app-navigation-entry__deleted\">\n\t\t\t\t\t<div class=\"app-navigation-entry__deleted-description\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t\n\t\t\t\t<div v-if=\"hasUtils && !editingActive\"\n\t\t\t\t\tclass=\"app-navigation-entry__utils\"\n\t\t\t\t\t:class=\"{'app-navigation-entry__utils--display-actions': forceDisplayActions || menuOpenLocalValue || menuOpen }\">\n\t\t\t\t\t<div v-if=\"$slots.counter\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__counter-wrapper\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t<slot name=\"counter\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<NcActions v-if=\"$slots.actions || (editable && !editingActive) || undo\"\n\t\t\t\t\t\tref=\"actions\"\n\t\t\t\t\t\t:inline=\"inlineActions\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__actions\"\n\t\t\t\t\t\tcontainer=\"#app-navigation-vue\"\n\t\t\t\t\t\t:boundaries-element=\"actionsBoundariesElement\"\n\t\t\t\t\t\t:placement=\"menuPlacement\"\n\t\t\t\t\t\t:open=\"menuOpen\"\n\t\t\t\t\t\t:type=\"(isActive && to) || active ? 'primary' : null\"\n\t\t\t\t\t\t:force-menu=\"forceMenu\"\n\t\t\t\t\t\t:default-icon=\"menuIcon\"\n\t\t\t\t\t\t@update:open=\"onMenuToggle\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<slot name=\"menu-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<NcActionButton v-if=\"editable && !editingActive\"\n\t\t\t\t\t\t\t:aria-label=\"editButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleEdit\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ editLabel }}\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton v-if=\"undo\"\n\t\t\t\t\t\t\t:aria-label=\"undoButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleUndo\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Undo :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\t\t\t\t<NcAppNavigationIconCollapsible v-if=\"collapsible\" :open=\"opened\" @click.prevent.stop=\"toggleCollapse\" />\n\n\t\t\t\t\n\t\t\t\t<slot name=\"extra\" />\n\t\t\t</div>\n\t\t</component>\n\t\t\n\t\t<ul v-if=\"canHaveChildren && hasChildren\" class=\"app-navigation-entry__children\">\n\t\t\t\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport NcInputConfirmCancel from './NcInputConfirmCancel.vue'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nimport Undo from 'vue-material-design-icons/Undo.vue'\n\nexport default {\n\tname: 'NcAppNavigationItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcActionButton,\n\t\tNcAppNavigationIconCollapsible,\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t\tNcVNodes,\n\t\tPencil,\n\t\tUndo,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * If you are not using vue-router you can use the property to set this item as the active navigation entry.\n\t\t * When using vue-router and the `to` property this is set automatically.\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The main text content of the entry.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The title attribute of the element.\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the list item element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'app-navigation-item-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * Refers to the icon on the left, this prop accepts a class\n\t\t * like 'icon-category-enabled'.\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Displays a loading animated icon on the left of the element\n\t\t * instead of the icon.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Passing in a route will make the root element of this\n\t\t * component a `<router-link />` that points to that route.\n\t\t * By leaving this blank, the root element will be a `<li>`.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * A direct link. This will be used as the `href` attribute.\n\t\t * This will ignore any `to` prop being defined.\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Pass in `true` if you want the matching behaviour to\n\t\t * be non-inclusive: https://router.vuejs.org/api/#exact\n\t\t */\n\t\texact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Gives the possibility to collapse the children elements into the\n\t\t * parent element (true) or expands the children elements (false).\n\t\t */\n\t\tallowCollapse: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Makes the name of the item editable by providing an `ActionButton`\n\t\t * component that toggles a form\n\t\t */\n\t\teditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Only for 'editable' items, sets label for the edit action button.\n\t\t */\n\t\teditLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Only for items in 'editable' mode, sets the placeholder text for the editing form.\n\t\t */\n\t\teditPlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Pins the item to the bottom left area, above the settings. Do not\n\t\t * place 'non-pinned' `AppnavigationItem` components below `pinned`\n\t\t * ones.\n\t\t */\n\t\tpinned: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Puts the item in the 'undo' state.\n\t\t */\n\t\tundo: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The navigation collapsible state (synced)\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 * The actions menu open state (synced)\n\t\t */\n\t\tmenuOpen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The action's menu default icon\n\t\t */\n\t\tmenuIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The action's menu direction\n\t\t */\n\t\tmenuPlacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/**\n\t\t * Entry aria details\n\t\t */\n\t\tariaDescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * To be used only when the elements in the actions menu are very important\n\t\t */\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Number of action items outside the menu\n\t\t */\n\t\tinlineActions: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:menuOpen',\n\t\t'update:open',\n\t\t'update:name',\n\t\t'click',\n\t\t'undo',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\teditingValue: '',\n\t\t\topened: this.open, // Collapsible state\n\t\t\teditingActive: false,\n\t\t\thasChildren: false,\n\t\t\t/**\n\t\t\t * Tracks the open state of the actions menu\n\t\t\t */\n\t\t\tmenuOpenLocalValue: false,\n\t\t\tfocused: false,\n\t\t\tcollapsible: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisRouterLink() {\n\t\t\treturn this.to && !this.href\n\t\t},\n\n\t\t// Checks if the component is already a children of another\n\t\t// instance of AppNavigationItem\n\t\tcanHaveChildren() {\n\t\t\tif (this.$parent.$options._componentTag === 'AppNavigationItem') {\n\t\t\t\treturn false\n\t\t\t} else {\n\t\t\t\treturn true\n\t\t\t}\n\t\t},\n\n\t\thasUtils() {\n\t\t\tif (this.$slots.actions || this.$slots.counter || this.editable || this.undo) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\teditButtonAriaLabel() {\n\t\t\treturn this.editLabel ? this.editLabel : t('Edit item')\n\t\t},\n\n\t\tundoButtonAriaLabel() {\n\t\t\treturn t('Undo changes')\n\t\t},\n\t\tactionsBoundariesElement() {\n\t\t\treturn document.querySelector('#content-vue') || undefined\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(newVal) {\n\t\t\tthis.opened = newVal\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.updateSlotInfo()\n\t},\n\n\tbeforeUpdate() {\n\t\tthis.updateSlotInfo()\n\t},\n\n\tmethods: {\n\t\t// sync opened menu state with prop\n\t\tonMenuToggle(state) {\n\t\t\tthis.$emit('update:menuOpen', state)\n\t\t\tthis.menuOpenLocalValue = state\n\t\t},\n\t\t// toggle the collapsible state\n\t\ttoggleCollapse() {\n\t\t\tthis.opened = !this.opened\n\t\t\tthis.$emit('update:open', this.opened)\n\t\t},\n\n\t\t/**\n\t\t * Handle link click\n\t\t *\n\t\t * @param {PointerEvent} event - Native click event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t */\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\t// Edition methods\n\t\thandleEdit() {\n\t\t\tthis.editingValue = this.name\n\t\t\tthis.editingActive = true\n\t\t\tthis.onMenuToggle(false)\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$refs.editingInput.focusInput()\n\t\t\t})\n\t\t},\n\t\tcancelEditing() {\n\t\t\tthis.editingActive = false\n\t\t},\n\t\thandleEditingDone() {\n\t\t\tthis.$emit('update:name', this.editingValue)\n\t\t\tthis.editingValue = ''\n\t\t\tthis.editingActive = false\n\t\t},\n\n\t\t// Undo methods\n\t\thandleUndo() {\n\t\t\tthis.$emit('undo')\n\t\t},\n\n\t\tupdateSlotInfo() {\n\t\t\tthis.hasChildren = !!this.$slots.default\n\t\t\tthis.collapsible = this.allowCollapse && !!this.$slots.default\n\t\t},\n\n\t\t/**\n\t\t * Show actions upon focus\n\t\t */\n\t\thandleFocus() {\n\t\t\tthis.focused = true\n\t\t},\n\n\t\thandleBlur() {\n\t\t\tthis.focused = false\n\t\t},\n\n\t\t/**\n\t\t * This method checks if the root element of the component is focused and\n\t\t * if that's the case it focuses the actions button if available\n\t\t *\n\t\t * @param {Event} e the keydown event\n\t\t */\n\t\thandleTab(e) {\n\t\t\t// If there is no actions menu, do nothing.\n\t\t\tif (!this.$refs.actions) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.focused) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.$refs.actions.$refs.menuButton.$el.focus()\n\t\t\t\tthis.focused = false\n\t\t\t} else {\n\t\t\t\tthis.$refs.actions.$refs.menuButton.$el.blur()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Is this an external link\n\t\t *\n\t\t * @param {string} href The link to check\n\t\t * @return {boolean} Whether it is external or not\n\t\t */\n\t\tisExternal(href) {\n\t\t\t// Match any protocol\n\t\t\treturn href && href.match(/[a-z]+:\\/\\//i)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@import '../../assets/NcAppNavigationItem';\n</style>\n"],"names":["_sfc_main"],"mappings":"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","x_google_ignoreList":[1,2]}

package/dist/chunks/NcAppNavigationNewItem-BEVsUTrd.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcAppNavigationNewItem-BEVsUTrd.mjs","sources":["../../src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue"],"sourcesContent":["\n\n<docs>\n# Usage\n\n### New Item element\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" @new-item=\"function(value){alert(value)}\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n\n### New Item element with a loading animation instead of the icon\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" :loading=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n<template>\n\t<li :class=\"{\n\t\t\t'app-navigation-entry--newItemActive': newItemActive,\n\t\t}\"\n\t\tclass=\"app-navigation-entry\">\n\t\t\n\t\t<button class=\"app-navigation-entry-button\" @click=\"handleNewItem\">\n\t\t\t<span :class=\"{ [icon]: !loading }\"\n\t\t\t\tclass=\"app-navigation-entry-icon\">\n\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t<slot v-else name=\"icon\" />\n\t\t\t</span>\n\n\t\t\t<span v-if=\"!newItemActive\" class=\"app-navigation-new-item__name\" :title=\"name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\n\t\t\t\n\t\t\t<span v-if=\"newItemActive\" class=\"newItemContainer\">\n\t\t\t\t<NcInputConfirmCancel ref=\"newItemInput\"\n\t\t\t\t\tv-model=\"newItemValue\"\n\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t@cancel=\"cancelNewItem\"\n\t\t\t\t\t@confirm=\"handleNewItemDone\" />\n\t\t\t</span>\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport NcInputConfirmCancel from '../NcAppNavigationItem/NcInputConfirmCancel.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nexport default {\n\tname: 'NcAppNavigationNewItem',\n\n\tcomponents: {\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The name of the element.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Refers to the icon on the left, this prop accepts a class\n\t\t * like 'icon-category-enabled'.\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Displays a loading animated icon on the left of the element\n\t\t * instead of the icon.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Only for 'editable' items, sets label for the edit action button.\n\t\t */\n\t\teditLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Sets the placeholder text for the editing form.\n\t\t */\n\t\teditPlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['new-item'],\n\n\tdata() {\n\t\treturn {\n\t\t\tnewItemValue: '',\n\t\t\tnewItemActive: false,\n\t\t}\n\t},\n\n\tmethods: {\n\t\thandleNewItem() {\n\t\t\tif (!this.loading) {\n\t\t\t\tthis.newItemActive = true\n\t\t\t\tthis.$nextTick(() => {\n\t\t\t\t\tthis.$refs.newItemInput.focusInput()\n\t\t\t\t})\n\t\t\t}\n\t\t},\n\t\tcancelNewItem() {\n\t\t\tthis.newItemActive = false\n\t\t},\n\t\thandleNewItemDone() {\n\t\t\tthis.$emit('new-item', this.newItemValue)\n\t\t\tthis.newItemValue = ''\n\t\t\tthis.newItemActive = false\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@import '../../assets/NcAppNavigationItem';\n\n.app-navigation-new-item__name {\n\toverflow: hidden;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tpadding-left: 7px;\n\tfont-size: 14px;\n}\n\n.newItemContainer {\n\twidth: calc(100% - var(--default-clickable-area));\n\tmargin: auto;\n}\n</style>\n"],"names":[],"mappings":";;;AAiFA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,UAAA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA;AACA,UAAA,CAAA,KAAA,SAAA;AACA,aAAA,gBAAA;AACA,aAAA,UAAA,MAAA;AACA,eAAA,MAAA,aAAA,WAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,gBAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,IACA,oBAAA;AACA,WAAA,MAAA,YAAA,KAAA,YAAA;AACA,WAAA,eAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcAppNavigationNewItem-DlC2GWGK.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcAppNavigationNewItem-DlC2GWGK.cjs","sources":["../../src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue"],"sourcesContent":["\n\n<docs>\n# Usage\n\n### New Item element\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" @new-item=\"function(value){alert(value)}\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n\n### New Item element with a loading animation instead of the icon\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" :loading=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n<template>\n\t<li :class=\"{\n\t\t\t'app-navigation-entry--newItemActive': newItemActive,\n\t\t}\"\n\t\tclass=\"app-navigation-entry\">\n\t\t\n\t\t<button class=\"app-navigation-entry-button\" @click=\"handleNewItem\">\n\t\t\t<span :class=\"{ [icon]: !loading }\"\n\t\t\t\tclass=\"app-navigation-entry-icon\">\n\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t<slot v-else name=\"icon\" />\n\t\t\t</span>\n\n\t\t\t<span v-if=\"!newItemActive\" class=\"app-navigation-new-item__name\" :title=\"name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\n\t\t\t\n\t\t\t<span v-if=\"newItemActive\" class=\"newItemContainer\">\n\t\t\t\t<NcInputConfirmCancel ref=\"newItemInput\"\n\t\t\t\t\tv-model=\"newItemValue\"\n\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t@cancel=\"cancelNewItem\"\n\t\t\t\t\t@confirm=\"handleNewItemDone\" />\n\t\t\t</span>\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport NcInputConfirmCancel from '../NcAppNavigationItem/NcInputConfirmCancel.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nexport default {\n\tname: 'NcAppNavigationNewItem',\n\n\tcomponents: {\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The name of the element.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Refers to the icon on the left, this prop accepts a class\n\t\t * like 'icon-category-enabled'.\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Displays a loading animated icon on the left of the element\n\t\t * instead of the icon.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Only for 'editable' items, sets label for the edit action button.\n\t\t */\n\t\teditLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Sets the placeholder text for the editing form.\n\t\t */\n\t\teditPlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['new-item'],\n\n\tdata() {\n\t\treturn {\n\t\t\tnewItemValue: '',\n\t\t\tnewItemActive: false,\n\t\t}\n\t},\n\n\tmethods: {\n\t\thandleNewItem() {\n\t\t\tif (!this.loading) {\n\t\t\t\tthis.newItemActive = true\n\t\t\t\tthis.$nextTick(() => {\n\t\t\t\t\tthis.$refs.newItemInput.focusInput()\n\t\t\t\t})\n\t\t\t}\n\t\t},\n\t\tcancelNewItem() {\n\t\t\tthis.newItemActive = false\n\t\t},\n\t\thandleNewItemDone() {\n\t\t\tthis.$emit('new-item', this.newItemValue)\n\t\t\tthis.newItemValue = ''\n\t\t\tthis.newItemActive = false\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@import '../../assets/NcAppNavigationItem';\n\n.app-navigation-new-item__name {\n\toverflow: hidden;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tpadding-left: 7px;\n\tfont-size: 14px;\n}\n\n.newItemContainer {\n\twidth: calc(100% - var(--default-clickable-area));\n\tmargin: auto;\n}\n</style>\n"],"names":["NcInputConfirmCancel","NcLoadingIcon"],"mappings":";;;;AAiFA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,sBAAAA,qBAAA;AAAA,IACA,eAAAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,UAAA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA;AACA,UAAA,CAAA,KAAA,SAAA;AACA,aAAA,gBAAA;AACA,aAAA,UAAA,MAAA;AACA,eAAA,MAAA,aAAA,WAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,gBAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,IACA,oBAAA;AACA,WAAA,MAAA,YAAA,KAAA,YAAA;AACA,WAAA,eAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_919d07b7_lang-CPc4BraS.cjs.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_919d07b7_lang-CPc4BraS.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/chunks/NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_919d07b7_lang-ScT6WV__.mjs.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_919d07b7_lang-ScT6WV__.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/chunks/NcListItem-BwUN8FaS.cjs.map DELETED Viewed

@@ -1 +0,0 @@

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

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

@@ -1 +0,0 @@

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

package/dist/chunks/NcRichText-65CdQLUw.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcRichText-65CdQLUw.cjs","sources":["../../src/components/NcRichText/NcReferenceList.vue","../../src/components/NcRichText/placeholder.js","../../src/components/NcRichText/NcRichText.vue"],"sourcesContent":["\n\n<template>\n\t<div v-if=\"isVisible\" class=\"widgets--list\" :class=\"{'icon-loading': loading }\">\n\t\t<div v-for=\"reference in displayedReferences\" :key=\"reference?.openGraphObject?.id\">\n\t\t\t<NcReferenceWidget :reference=\"reference\" :interactive=\"interactive\" :interactive-opt-in=\"interactiveOptIn\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport NcReferenceWidget from './NcReferenceWidget.vue'\nimport { URL_PATTERN } from './helpers.js'\n\nimport axios from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\n\nexport default {\n\tname: 'NcReferenceList',\n\tcomponents: {\n\t\tNcReferenceWidget,\n\t},\n\tprops: {\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\treferenceData: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: 1,\n\t\t},\n\t\tdisplayFallback: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tinteractive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\tinteractiveOptIn: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\treferences: null,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tcomputed: {\n\t\tisVisible() {\n\t\t\treturn this.loading || this.displayedReferences.length !== 0\n\t\t},\n\t\tvalues() {\n\t\t\tif (this.referenceData) {\n\t\t\t\treturn this.referenceData\n\t\t\t}\n\n\t\t\tif (this.displayFallback && !this.loading && !this.references) {\n\t\t\t\treturn [this.fallbackReference]\n\t\t\t}\n\n\t\t\treturn this.references ? Object.values(this.references) : []\n\t\t},\n\t\tfirstReference() {\n\t\t\treturn this.values[0] ?? null\n\t\t},\n\t\tdisplayedReferences() {\n\t\t\treturn this.values.slice(0, this.limit)\n\t\t},\n\t\tfallbackReference() {\n\t\t\treturn {\n\t\t\t\taccessible: true,\n\t\t\t\topenGraphObject: {\n\t\t\t\t\tid: this.text,\n\t\t\t\t\tlink: this.text,\n\t\t\t\t\tname: this.text,\n\t\t\t\t},\n\t\t\t\trichObjectType: 'open-graph',\n\t\t\t}\n\t\t},\n\t},\n\twatch: {\n\t\ttext: 'fetch',\n\t},\n\tmounted() {\n\t\tthis.fetch()\n\t},\n\tmethods: {\n\t\tfetch() {\n\t\t\tthis.loading = true\n\t\t\tif (this.referenceData) {\n\t\t\t\tthis.loading = false\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (!(new RegExp(URL_PATTERN).exec(this.text))) {\n\t\t\t\tthis.loading = false\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.resolve().then((response) => {\n\t\t\t\tthis.references = response.data.ocs.data.references\n\t\t\t\tthis.loading = false\n\t\t\t\tthis.$emit('loaded')\n\t\t\t}).catch((error) => {\n\t\t\t\tconsole.error('Failed to extract references', error)\n\t\t\t\tthis.loading = false\n\t\t\t\tthis.$emit('loaded')\n\t\t\t})\n\t\t},\n\t\tresolve() {\n\t\t\tconst match = (new RegExp(URL_PATTERN).exec(this.text.trim()))\n\t\t\tif (this.limit === 1 && match) {\n\t\t\t\treturn axios.get(generateOcsUrl('references/resolve', 2) + `?reference=${encodeURIComponent(match[0])}`)\n\t\t\t}\n\n\t\t\treturn axios.post(generateOcsUrl('references/extract', 2), {\n\t\t\t\ttext: this.text,\n\t\t\t\tresolve: true,\n\t\t\t\tlimit: this.limit,\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.widget--list {\n\twidth: var(--widget-full-width, 100%);\n}\n\n.widgets--list.icon-loading {\n\tmin-height: var(--default-clickable-area);\n}\n</style>\n","/**\n * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { parseUrl } from './autolink.js'\n\nimport { visit } from 'unist-util-visit'\nimport { u } from 'unist-builder'\n\nexport const remarkPlaceholder = function() {\n\treturn function(ast) {\n\t\tvisit(ast, (node) => node.type === 'text', visitor)\n\n\t\t/**\n\t\t *\n\t\t * @param {object} node The node\n\t\t * @param {number} index The index of the node\n\t\t * @param {object} parent The parent node\n\t\t */\n\t\tfunction visitor(node, index, parent) {\n\t\t\tconst placeholders = node.value.split(/(\\{[a-z\\-_.0-9]+\\})/ig)\n\t\t\t\t.map((entry, index, list) => {\n\t\t\t\t\tconst matches = entry.match(/^\\{([a-z\\-_.0-9]+)\\}$/i)\n\t\t\t\t\tif (!matches) {\n\t\t\t\t\t\treturn u('text', entry)\n\t\t\t\t\t}\n\t\t\t\t\tconst [, component] = matches\n\t\t\t\t\treturn u('element', {\n\t\t\t\t\t\ttagName: `#${component}`,\n\t\t\t\t\t})\n\t\t\t\t})\n\n\t\t\tparent.children.splice(index, 1, ...placeholders)\n\t\t}\n\t}\n}\n\nexport const prepareTextNode = ({ h, context }, text) => {\n\tif (context.autolink) {\n\t\ttext = parseUrl(text)\n\t}\n\tif (Array.isArray(text)) {\n\t\treturn text.map((entry) => {\n\t\t\tif (typeof entry === 'string') {\n\t\t\t\treturn entry\n\t\t\t}\n\t\t\tconst { component, props } = entry\n\t\t\t// do not override class of NcLink\n\t\t\tconst componentClass = component.name === 'NcLink' ? undefined : 'rich-text--component'\n\t\t\treturn h(component, {\n\t\t\t\tprops,\n\t\t\t\tclass: componentClass,\n\t\t\t})\n\t\t})\n\t}\n\treturn text\n}\n","\n\n<docs>\n### General description\n\nThis component displays rich text with optional autolink or [Markdown support](https://www.markdownguide.org/basic-syntax/).\n\n```vue\n<template>\n\t<div>\n\t\t<textarea v-model=\"text\" />\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"autolink\" type=\"checkbox\">Autolink</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"useMarkdown\" type=\"checkbox\">Use Markdown</NcCheckboxRadioSwitch>\n\n\t\t<NcRichText\n\t\t\t:class=\"{'plain-text': !useMarkdown }\"\n\t\t\t:text=\"text\" :autolink=\"autolink\" :arguments=\"args\"\n\t\t\t:use-markdown=\"useMarkdown\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: `## Hello everyone 🎉\nThe file {file} was added by {username}. Visit https://nextcloud.com to check it!\n\nSome examples for markdown syntax:\n1. **bold text**\n2. _italic text_\n3. example of \\`inline code\\`\n\n> blockquote example\n`,\n\t\t\tautolink: true,\n\t\t\tuseMarkdown: true,\n\t\t\targs: {\n\t\t\t\tfile: 'MyDocument.odt',\n\t\t\t\tusername: {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Jane Doe'\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t}\n\t},\n}\n</script>\n<style lang=\"scss\">\ntextarea {\n\twidth: 100%;\n\theight: 200px;\n}\n\n.plain-text {\n\twhite-space: pre-line;\n}\n</style>\n```\n\n### Flavored Markdown\n\nThis component can support [Github Flavored Markdown](https://github.github.com/gfm/).\nIt adds such elements, as tables, task lists, strikethrough, and supports autolinks by default\n\nIt is also possible to make a rendered content interactive and listen for events\n\n```vue\n<template>\n\t<div>\n\t\t<textarea v-model=\"text\" />\n\n\t\t<NcRichText :text=\"text\"\n\t\t\t:use-extended-markdown=\"true\"\n\t\t\t:interactive=\"true\"\n\t\t\t@interact:todo=\"handleInteraction\"/>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttext: `## Try flavored markdown right now!\n\n~~strikethrough~~\n\n- [ ] task to be done\n- [x] task completed\n\nTable header | Column A | Column B\n-- | -- | --\nTable row | value A | value B\n`,\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\thandleInteraction(id) {\n\t\t\t\tconst parentId = id.split('-markdown-input-')[0]\n\t\t\t\tconst index = Array.from(document.querySelectorAll(`span[id^=\"${parentId}-markdown-input-\"]`)).findIndex((el) => el.id.includes(id))\n\t\t\t\tif (index === -1 ) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tlet checkBoxIndex = 0\n\t\t\t\tlines = this.text.split('\\n')\n\t\t\t\tfor (let i = 0; i < lines.length; i++) {\n\t\t\t\t\tif (lines[i].includes('[ ]') || lines[i].includes('[x]')) {\n\t\t\t\t\t\tif (checkBoxIndex === index) {\n\t\t\t\t\t\t\tconst isChecked = lines[i].includes('[x]')\n\t\t\t\t\t\t\tif (isChecked) {\n\t\t\t\t\t\t\t\tlines[i] = lines[i].replace('[x]', '[ ]')\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tlines[i] = lines[i].replace('[ ]', '[x]')\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tbreak\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcheckBoxIndex++\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.text = lines.join('\\n')\n\t\t\t},\n\t\t},\n\t}\n</script>\n<style lang=\"scss\">\ntextarea {\n\twidth: 100%;\n\theight: 200px;\n}\n</style>\n```\n\n### Usage with NcRichContenteditable\n\nSee [NcRichContenteditable](#/Components/NcRichContenteditable) documentation for more information\n\n```vue\n<template>\n\t<div>\n\t\t<NcRichContenteditable :value.sync=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"100\"\n\t\t\t:user-data=\"userData\"\n\t\t\tplaceholder=\"Try mentioning user @Test01 or inserting emoji :smile\"\n\t\t\t@submit=\"onSubmit\" />\n\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"autolink\" type=\"checkbox\">Autolink</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"useMarkdown\" type=\"checkbox\">Use Markdown</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"useExtendedMarkdown\" type=\"checkbox\">Use extended Markdown</NcCheckboxRadioSwitch>\n\n\t\t<NcRichText :text=\"text\"\n\t\t\t:autolink=\"autolink\"\n\t\t\t:arguments=\"userMentions\"\n\t\t\t:use-markdown=\"useMarkdown\"\n\t\t\t:use-extended-markdown=\"useExtendedMarkdown\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tmessage: '',\n\t\t\t\tautolink: true,\n\t\t\t\tuseMarkdown: true,\n\t\t\t\tuseExtendedMarkdown: true,\n\t\t\t\tuserData: {\n\t\t\t\t\tTest01: {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test01',\n\t\t\t\t\t\tlabel: 'Test01',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tprimary: true,\n\t\t\t\t\t},\n\t\t\t\t\tTest02: {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test02',\n\t\t\t\t\t\tlabel: 'Test02',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tstatus: {\n\t\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\t\tmessage: 'Visiting London',\n\t\t\t\t\t\t\tstatus: 'away',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t\t},\n\t\t\t\t\t'Test@User': {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test@User',\n\t\t\t\t\t\tlabel: 'Test 03',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tstatus: {\n\t\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\t\tmessage: 'Having space in my name',\n\t\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t\t},\n\t\t\t\t\t'Test Offline': {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test Offline',\n\t\t\t\t\t\tlabel: 'Test Offline',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tstatus: {\n\t\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\t\tmessage: null,\n\t\t\t\t\t\t\tstatus: 'offline',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsubline: null,\n\t\t\t\t\t},\n\t\t\t\t\t'Test DND': {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test DND',\n\t\t\t\t\t\tlabel: 'Test DND',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tstatus: {\n\t\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\t\tmessage: 'Out sick',\n\t\t\t\t\t\t\tstatus: 'dnd',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsubline: 'Out sick',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tuserMentions: {\n\t\t\t\t\t'user-1': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test01',\n\t\t\t\t\t\t\tuser: 'Test01',\n\t\t\t\t\t\t\tprimary: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t'user-2': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test02',\n\t\t\t\t\t\t\tuser: 'Test02',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t'user-3': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test 03',\n\t\t\t\t\t\t\tuser: 'Test@User',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t'user-4': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test Offline',\n\t\t\t\t\t\t\tuser: 'Test Offline',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t'user-5': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test DND',\n\t\t\t\t\t\t\tuser: 'Test DND',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t\tcomputed: {\n\t\t\ttext() {\n\t\t\t\treturn this.message\n\t\t\t\t\t\t.replace('@Test01', '{user-1}')\n\t\t\t\t\t\t.replace('@Test02', '{user-2}')\n\t\t\t\t\t\t.replace('@Test@User', '{user-3}')\n\t\t\t\t\t\t.replace('@\"Test Offline\"', '{user-4}')\n\t\t\t\t\t\t.replace('@\"Test DND\"', '{user-5}')\n\t\t\t},\n\t\t},\n\t\tmethods: {\n\t\t\tautoComplete(search, callback) {\n\t\t\t\tcallback(Object.values(this.userData))\n\t\t\t},\n\t\t\tonSubmit() {\n\t\t\t\talert(this.message)\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n</docs>\n\n<script>\nimport NcReferenceList from './NcReferenceList.vue'\nimport NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue'\nimport { getRoute, remarkAutolink } from './autolink.js'\nimport { remarkPlaceholder, prepareTextNode } from './placeholder.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport { unified } from 'unified'\nimport remarkParse from 'remark-parse'\nimport remarkGfm from 'remark-gfm'\nimport breaks from 'remark-breaks'\nimport remark2rehype from 'remark-rehype'\nimport rehype2react from 'rehype-react'\nimport rehypeExternalLinks from 'rehype-external-links'\nimport { RouterLink } from 'vue-router'\n\nexport default {\n\tname: 'NcRichText',\n\tcomponents: {\n\t\tNcReferenceList,\n\t},\n\tprops: {\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\targuments: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => {\n\t\t\t\treturn {}\n\t\t\t},\n\t\t},\n\t\treferenceLimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t\treferenceInteractive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/** Provide data upfront to avoid extra http request */\n\t\treferences: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t\tmarkdownCssClasses: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => {\n\t\t\t\treturn {\n\t\t\t\t\ta: 'rich-text--external-link',\n\t\t\t\t\tol: 'rich-text--ordered-list',\n\t\t\t\t\tul: 'rich-text--un-ordered-list',\n\t\t\t\t\tli: 'rich-text--list-item',\n\t\t\t\t\tstrong: 'rich-text--strong',\n\t\t\t\t\tem: 'rich-text--italic',\n\t\t\t\t\th1: 'rich-text--heading rich-text--heading-1',\n\t\t\t\t\th2: 'rich-text--heading rich-text--heading-2',\n\t\t\t\t\th3: 'rich-text--heading rich-text--heading-3',\n\t\t\t\t\th4: 'rich-text--heading rich-text--heading-4',\n\t\t\t\t\th5: 'rich-text--heading rich-text--heading-5',\n\t\t\t\t\th6: 'rich-text--heading rich-text--heading-6',\n\t\t\t\t\thr: 'rich-text--hr',\n\t\t\t\t\ttable: 'rich-text--table',\n\t\t\t\t\tpre: 'rich-text--pre',\n\t\t\t\t\tcode: 'rich-text--code',\n\t\t\t\t\tblockquote: 'rich-text--blockquote',\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\tuseMarkdown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/** Provide GitHub Flavored Markdown syntax */\n\t\tuseExtendedMarkdown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/** Provide event from rendered markdown inputs */\n\t\tinteractive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tautolink: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\temits: ['interact:todo'],\n\n\tdata() {\n\t\treturn {\n\t\t\tparentId: GenRandomId(5),\n\t\t}\n\t},\n\n\tmethods: {\n\t\trenderPlaintext(h) {\n\t\t\tconst context = this\n\t\t\tconst placeholders = this.text.split(/(\\{[a-z\\-_.0-9]+\\})/ig).map(function(entry, index, list) {\n\t\t\t\tconst matches = entry.match(/^\\{([a-z\\-_.0-9]+)\\}$/i)\n\t\t\t\t// just return plain string nodes as text\n\t\t\t\tif (!matches) {\n\t\t\t\t\treturn prepareTextNode({ h, context }, entry)\n\t\t\t\t}\n\t\t\t\t// return component instance if argument is an object\n\t\t\t\tconst argumentId = matches[1]\n\t\t\t\tconst argument = context.arguments[argumentId]\n\t\t\t\tif (typeof argument === 'object') {\n\t\t\t\t\tconst { component, props } = argument\n\t\t\t\t\treturn h(component, {\n\t\t\t\t\t\tprops,\n\t\t\t\t\t\tclass: 'rich-text--component',\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t\tif (argument) {\n\t\t\t\t\treturn h('span', { class: 'rich-text--fallback' }, argument)\n\t\t\t\t}\n\t\t\t\treturn entry\n\t\t\t})\n\t\t\treturn h('div', { class: 'rich-text--wrapper' }, [\n\t\t\t\th('div', {}, placeholders.flat()),\n\t\t\t\tthis.referenceLimit > 0\n\t\t\t\t\t? h('div', { class: 'rich-text--reference-widget' }, [\n\t\t\t\t\t\th(NcReferenceList, {\n\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\ttext: this.text,\n\t\t\t\t\t\t\t\treferenceData: this.references,\n\t\t\t\t\t\t\t\tinteractive: this.referenceInteractive,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}),\n\t\t\t\t\t])\n\t\t\t\t\t: null,\n\t\t\t])\n\t\t},\n\t\trenderMarkdown(h) {\n\t\t\tconst renderedMarkdown = unified()\n\t\t\t\t.use(remarkParse)\n\t\t\t\t.use(remarkAutolink, {\n\t\t\t\t\tautolink: this.autolink,\n\t\t\t\t\tuseMarkdown: this.useMarkdown,\n\t\t\t\t\tuseExtendedMarkdown: this.useExtendedMarkdown,\n\t\t\t\t})\n\t\t\t\t.use(this.useExtendedMarkdown ? remarkGfm : undefined)\n\t\t\t\t.use(breaks)\n\t\t\t\t.use(remark2rehype, {\n\t\t\t\t\thandlers: {\n\t\t\t\t\t\tcomponent(toHast, node) {\n\t\t\t\t\t\t\treturn toHast(node, node.component, { value: node.value })\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t})\n\t\t\t\t// .use(rehypeAddClasses, this.markdownCssClasses)\n\t\t\t\t.use(remarkPlaceholder)\n\t\t\t\t.use(rehypeExternalLinks, {\n\t\t\t\t\ttarget: '_blank',\n\t\t\t\t\trel: ['noopener noreferrer'],\n\t\t\t\t})\n\t\t\t\t.use(rehype2react, {\n\t\t\t\t\tcreateElement: (tag, attrs, children) => {\n\t\t\t\t\t\t// unescape special symbol \"<\" for simple text nodes\n\t\t\t\t\t\tchildren = children?.map(child => typeof child === 'string'\n\t\t\t\t\t\t\t? child.replace(/</gmi, '<')\n\t\t\t\t\t\t\t: child,\n\t\t\t\t\t\t)\n\n\t\t\t\t\t\tif (!tag.startsWith('#')) {\n\t\t\t\t\t\t\tif (this.useExtendedMarkdown) {\n\t\t\t\t\t\t\t\tlet nestedNode = null\n\t\t\t\t\t\t\t\tif (tag === 'li' && Array.isArray(children)\n\t\t\t\t\t\t\t\t\t&& children[0].tag === 'input'\n\t\t\t\t\t\t\t\t\t&& children[0].data.attrs.type === 'checkbox') {\n\t\t\t\t\t\t\t\t\tconst [inputNode, ...labelParts] = children\n\n\t\t\t\t\t\t\t\t\tconst nestedNodeIndex = labelParts.findIndex((child) => ['ul', 'ol', 'li', 'blockquote', 'pre'].includes(child.tag))\n\t\t\t\t\t\t\t\t\tif (nestedNodeIndex !== -1) {\n\t\t\t\t\t\t\t\t\t\tnestedNode = labelParts[nestedNodeIndex]\n\t\t\t\t\t\t\t\t\t\tlabelParts.splice(nestedNodeIndex)\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tconst id = this.parentId + '-markdown-input-' + GenRandomId(5)\n\t\t\t\t\t\t\t\t\tconst inputComponent = h(NcCheckboxRadioSwitch, {\n\t\t\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\t\t\t...inputNode.data.attrs,\n\t\t\t\t\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\t\t\t\t\tdisabled: !this.interactive,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\ton: {\n\t\t\t\t\t\t\t\t\t\t\t'update:checked': () => {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.$emit('interact:todo', id)\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}, labelParts)\n\n\t\t\t\t\t\t\t\t\treturn h(tag, attrs, [inputComponent, nestedNode])\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (tag === 'a') {\n\t\t\t\t\t\t\t\tconst route = getRoute(this.$router, attrs.attrs.href)\n\t\t\t\t\t\t\t\tif (route) {\n\t\t\t\t\t\t\t\t\tdelete attrs.attrs.href\n\t\t\t\t\t\t\t\t\tdelete attrs.attrs.target\n\n\t\t\t\t\t\t\t\t\treturn h(RouterLink, {\n\t\t\t\t\t\t\t\t\t\t...attrs,\n\t\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\t\tto: route,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}, children)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn h(tag, attrs, children)\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst placeholder = this.arguments[tag.slice(1)]\n\t\t\t\t\t\tif (!placeholder) {\n\t\t\t\t\t\t\treturn h('span', { ...{ attrs }, ...{ class: 'rich-text--fallback' } }, [`{${tag.slice(1)}}`])\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (!placeholder.component) {\n\t\t\t\t\t\t\treturn h('span', attrs, [placeholder])\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn h(\n\t\t\t\t\t\t\tplaceholder.component,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tattrs,\n\t\t\t\t\t\t\t\tprops: placeholder.props,\n\t\t\t\t\t\t\t\tclass: 'rich-text--component',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t)\n\t\t\t\t\t},\n\t\t\t\t\tprefix: false,\n\t\t\t\t})\n\t\t\t\t.processSync(this.text\n\t\t\t\t\t// escape special symbol \"<\" to not treat text as HTML\n\t\t\t\t\t.replace(/</gmi, '<')\n\t\t\t\t\t// unescape special symbol \">\" to parse blockquotes\n\t\t\t\t\t.replace(/>/gmi, '>'),\n\t\t\t\t)\n\t\t\t\t.result\n\n\t\t\treturn h('div', { class: 'rich-text--wrapper rich-text--wrapper-markdown' }, [\n\t\t\t\trenderedMarkdown,\n\t\t\t\tthis.referenceLimit > 0\n\t\t\t\t\t? h('div', { class: 'rich-text--reference-widget' }, [\n\t\t\t\t\t\th(NcReferenceList, {\n\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\ttext: this.text,\n\t\t\t\t\t\t\t\treferenceData: this.references,\n\t\t\t\t\t\t\t\tinteractive: this.referenceInteractive,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}),\n\t\t\t\t\t])\n\t\t\t\t\t: null,\n\t\t\t])\n\t\t},\n\t},\n\trender(h) {\n\t\treturn this.useMarkdown || this.useExtendedMarkdown\n\t\t\t? this.renderMarkdown(h)\n\t\t\t: this.renderPlaintext(h)\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n/* stylelint-disable-next-line scss/at-import-partial-extension */\n@import './richtext.scss';\n\na:not(.rich-text--component) {\n\ttext-decoration: underline;\n}\n\n</style>\n"],"names":["_sfc_main","NcReferenceWidget","URL_PATTERN","axios","generateOcsUrl","visit","index","u","parseUrl","GenRandomId","unified","remarkParse","remarkAutolink","remarkGfm","breaks","remark2rehype","rehypeExternalLinks","rehype2react","NcCheckboxRadioSwitch","getRoute","RouterLink"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,mBAAAC,qBAAA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA,IACA,YAAA;AACA,aAAA,KAAA,WAAA,KAAA,oBAAA,WAAA;AAAA,IACA;AAAA,IACA,SAAA;AACA,UAAA,KAAA,eAAA;AACA,eAAA,KAAA;AAAA,MACA;AAEA,UAAA,KAAA,mBAAA,CAAA,KAAA,WAAA,CAAA,KAAA,YAAA;AACA,eAAA,CAAA,KAAA,iBAAA;AAAA,MACA;AAEA,aAAA,KAAA,aAAA,OAAA,OAAA,KAAA,UAAA,IAAA,CAAA;AAAA,IACA;AAAA,IACA,iBAAA;;AACA,cAAA,UAAA,OAAA,CAAA,MAAA,YAAA;AAAA,IACA;AAAA,IACA,sBAAA;AACA,aAAA,KAAA,OAAA,MAAA,GAAA,KAAA,KAAA;AAAA,IACA;AAAA,IACA,oBAAA;AACA,aAAA;AAAA,QACA,YAAA;AAAA,QACA,iBAAA;AAAA,UACA,IAAA,KAAA;AAAA,UACA,MAAA,KAAA;AAAA,UACA,MAAA,KAAA;AAAA,QACA;AAAA,QACA,gBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACA,MAAA;AAAA,EACA;AAAA,EACA,UAAA;AACA,SAAA,MAAA;AAAA,EACA;AAAA,EACA,SAAA;AAAA,IACA,QAAA;AACA,WAAA,UAAA;AACA,UAAA,KAAA,eAAA;AACA,aAAA,UAAA;AACA;AAAA,MACA;AAEA,UAAA,CAAA,IAAA,OAAAC,SAAA,WAAA,EAAA,KAAA,KAAA,IAAA,GAAA;AACA,aAAA,UAAA;AACA;AAAA,MACA;AAEA,WAAA,QAAA,EAAA,KAAA,CAAA,aAAA;AACA,aAAA,aAAA,SAAA,KAAA,IAAA,KAAA;AACA,aAAA,UAAA;AACA,aAAA,MAAA,QAAA;AAAA,MACA,CAAA,EAAA,MAAA,CAAA,UAAA;AACA,gBAAA,MAAA,gCAAA,KAAA;AACA,aAAA,UAAA;AACA,aAAA,MAAA,QAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IACA,UAAA;AACA,YAAA,QAAA,IAAA,OAAAA,oBAAA,EAAA,KAAA,KAAA,KAAA,KAAA,CAAA;AACA,UAAA,KAAA,UAAA,KAAA,OAAA;AACA,eAAAC,eAAA,QAAA,IAAAC,sBAAA,sBAAA,CAAA,IAAA,cAAA,0BAAA,MAAA,CAAA,CAAA,EAAA;AAAA,MACA;AAEA,aAAAD,eAAA,QAAA,KAAAC,OAAA,eAAA,sBAAA,CAAA,GAAA;AAAA,QACA,MAAA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,OAAA,KAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;ACzHO,MAAM,oBAAoB,WAAW;AAC3C,SAAO,SAAS,KAAK;AACpBC,mBAAK,MAAC,KAAK,CAAC,SAAS,KAAK,SAAS,QAAQ,OAAO;AAQlD,aAAS,QAAQ,MAAM,OAAO,QAAQ;AACrC,YAAM,eAAe,KAAK,MAAM,MAAM,uBAAuB,EAC3D,IAAI,CAAC,OAAOC,QAAO,SAAS;AAC5B,cAAM,UAAU,MAAM,MAAM,wBAAwB;AACpD,YAAI,CAAC,SAAS;AACb,iBAAOC,aAAC,EAAC,QAAQ,KAAK;AAAA,QACtB;AACD,cAAM,CAAA,EAAG,SAAS,IAAI;AACtB,eAAOA,aAAAA,EAAE,WAAW;AAAA,UACnB,SAAS,IAAI;AAAA,QACnB,CAAM;AAAA,MACN,CAAK;AAEF,aAAO,SAAS,OAAO,OAAO,GAAG,GAAG,YAAY;AAAA,IAChD;AAAA,EACD;AACF;AAEO,MAAM,kBAAkB,CAAC,EAAE,GAAG,QAAO,GAAI,SAAS;AACxD,MAAI,QAAQ,UAAU;AACrB,WAAOC,SAAQ,SAAC,IAAI;AAAA,EACpB;AACD,MAAI,MAAM,QAAQ,IAAI,GAAG;AACxB,WAAO,KAAK,IAAI,CAAC,UAAU;AAC1B,UAAI,OAAO,UAAU,UAAU;AAC9B,eAAO;AAAA,MACP;AACD,YAAM,EAAE,WAAW,MAAK,IAAK;AAE7B,YAAM,iBAAiB,UAAU,SAAS,WAAW,SAAY;AACjE,aAAO,EAAE,WAAW;AAAA,QACnB;AAAA,QACA,OAAO;AAAA,MACX,CAAI;AAAA,IACJ,CAAG;AAAA,EACD;AACD,SAAO;AACR;AC2PA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AACA,eAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IACA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA,IAEA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AACA,eAAA;AAAA,UACA,GAAA;AAAA,UACA,IAAA;AAAA,UACA,IAAA;AAAA,UACA,IAAA;AAAA,UACA,QAAA;AAAA,UACA,IAAA;AAAA,UACA,IAAA;AAAA,UACA,IAAA;AAAA,UACA,IAAA;AAAA,UACA,IAAA;AAAA,UACA,IAAA;AAAA,UACA,IAAA;AAAA,UACA,IAAA;AAAA,UACA,OAAA;AAAA,UACA,KAAA;AAAA,UACA,MAAA;AAAA,UACA,YAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA,IAEA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA,IAEA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,eAAA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,UAAAC,YAAA,YAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA,GAAA;AACA,YAAA,UAAA;AACA,YAAA,eAAA,KAAA,KAAA,MAAA,uBAAA,EAAA,IAAA,SAAA,OAAA,OAAA,MAAA;AACA,cAAA,UAAA,MAAA,MAAA,wBAAA;AAEA,YAAA,CAAA,SAAA;AACA,iBAAA,gBAAA,EAAA,GAAA,QAAA,GAAA,KAAA;AAAA,QACA;AAEA,cAAA,aAAA,QAAA,CAAA;AACA,cAAA,WAAA,QAAA,UAAA,UAAA;AACA,YAAA,OAAA,aAAA,UAAA;AACA,gBAAA,EAAA,WAAA,MAAA,IAAA;AACA,iBAAA,EAAA,WAAA;AAAA,YACA;AAAA,YACA,OAAA;AAAA,UACA,CAAA;AAAA,QACA;AACA,YAAA,UAAA;AACA,iBAAA,EAAA,QAAA,EAAA,OAAA,sBAAA,GAAA,QAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA,CAAA;AACA,aAAA,EAAA,OAAA,EAAA,OAAA,qBAAA,GAAA;AAAA,QACA,EAAA,OAAA,CAAA,GAAA,aAAA,KAAA,CAAA;AAAA,QACA,KAAA,iBAAA,IACA,EAAA,OAAA,EAAA,OAAA,8BAAA,GAAA;AAAA,UACA,EAAA,iBAAA;AAAA,YACA,OAAA;AAAA,cACA,MAAA,KAAA;AAAA,cACA,eAAA,KAAA;AAAA,cACA,aAAA,KAAA;AAAA,YACA;AAAA,UACA,CAAA;AAAA,QACA,CAAA,IACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IACA,eAAA,GAAA;AACA,YAAA,mBAAAC,QAAAA,QAAA,EACA,IAAAC,qBAAAA,OAAA,EACA,IAAAC,SAAAA,gBAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,aAAA,KAAA;AAAA,QACA,qBAAA,KAAA;AAAA,MACA,CAAA,EACA,IAAA,KAAA,sBAAAC,mBAAAA,UAAA,MAAA,EACA,IAAAC,gBAAAA,OAAA,EACA,IAAAC,uBAAAA,SAAA;AAAA,QACA,UAAA;AAAA,UACA,UAAA,QAAA,MAAA;AACA,mBAAA,OAAA,MAAA,KAAA,WAAA,EAAA,OAAA,KAAA,OAAA;AAAA,UACA;AAAA,QACA;AAAA,MACA,CAAA,EAEA,IAAA,iBAAA,EACA,IAAAC,6BAAAA,SAAA;AAAA,QACA,QAAA;AAAA,QACA,KAAA,CAAA,qBAAA;AAAA,MACA,CAAA,EACA,IAAAC,sBAAAA,SAAA;AAAA,QACA,eAAA,CAAA,KAAA,OAAA,aAAA;AAEA,qBAAA,qCAAA;AAAA,YAAA,WAAA,OAAA,UAAA,WACA,MAAA,QAAA,WAAA,GAAA,IACA;AAAA;AAGA,cAAA,CAAA,IAAA,WAAA,GAAA,GAAA;AACA,gBAAA,KAAA,qBAAA;AACA,kBAAA,aAAA;AACA,kBAAA,QAAA,QAAA,MAAA,QAAA,QAAA,KACA,SAAA,CAAA,EAAA,QAAA,WACA,SAAA,CAAA,EAAA,KAAA,MAAA,SAAA,YAAA;AACA,sBAAA,CAAA,WAAA,GAAA,UAAA,IAAA;AAEA,sBAAA,kBAAA,WAAA,UAAA,CAAA,UAAA,CAAA,MAAA,MAAA,MAAA,cAAA,KAAA,EAAA,SAAA,MAAA,GAAA,CAAA;AACA,oBAAA,oBAAA,IAAA;AACA,+BAAA,WAAA,eAAA;AACA,6BAAA,OAAA,eAAA;AAAA,gBACA;AAEA,sBAAA,KAAA,KAAA,WAAA,qBAAAR,YAAAA,YAAA,CAAA;AACA,sBAAA,iBAAA,EAAAS,6CAAA;AAAA,kBACA,OAAA;AAAA,oBACA,GAAA,UAAA,KAAA;AAAA,oBACA;AAAA,oBACA,UAAA,CAAA,KAAA;AAAA,kBACA;AAAA,kBACA,IAAA;AAAA,oBACA,kBAAA,MAAA;AACA,2BAAA,MAAA,iBAAA,EAAA;AAAA,oBACA;AAAA,kBACA;AAAA,gBACA,GAAA,UAAA;AAEA,uBAAA,EAAA,KAAA,OAAA,CAAA,gBAAA,UAAA,CAAA;AAAA,cACA;AAAA,YACA;AAEA,gBAAA,QAAA,KAAA;AACA,oBAAA,QAAAC,SAAAA,SAAA,KAAA,SAAA,MAAA,MAAA,IAAA;AACA,kBAAA,OAAA;AACA,uBAAA,MAAA,MAAA;AACA,uBAAA,MAAA,MAAA;AAEA,uBAAA,EAAAC,UAAAA,YAAA;AAAA,kBACA,GAAA;AAAA,kBACA,OAAA;AAAA,oBACA,IAAA;AAAA,kBACA;AAAA,gBACA,GAAA,QAAA;AAAA,cACA;AAAA,YACA;AAEA,mBAAA,EAAA,KAAA,OAAA,QAAA;AAAA,UACA;AAEA,gBAAA,cAAA,KAAA,UAAA,IAAA,MAAA,CAAA,CAAA;AACA,cAAA,CAAA,aAAA;AACA,mBAAA,EAAA,QAAA,EAAA,GAAA,EAAA,MAAA,GAAA,GAAA,EAAA,OAAA,sBAAA,EAAA,GAAA,CAAA,IAAA,WAAA,MAAA,CAAA,GAAA,IAAA,CAAA;AAAA,UACA;AAEA,cAAA,CAAA,YAAA,WAAA;AACA,mBAAA,EAAA,QAAA,OAAA,CAAA,WAAA,CAAA;AAAA,UACA;AAEA,iBAAA;AAAA,YACA,YAAA;AAAA,YACA;AAAA,cACA;AAAA,cACA,OAAA,YAAA;AAAA,cACA,OAAA;AAAA,YACA;AAAA,YACA;AAAA,UACA;AAAA,QACA;AAAA,QACA,QAAA;AAAA,MACA,CAAA,EACA;AAAA,QAAA,KAAA,KAEA,QAAA,QAAA,MAAA,EAEA,QAAA,WAAA,GAAA;AAAA,MACA,EACA;AAEA,aAAA,EAAA,OAAA,EAAA,OAAA,iDAAA,GAAA;AAAA,QACA;AAAA,QACA,KAAA,iBAAA,IACA,EAAA,OAAA,EAAA,OAAA,8BAAA,GAAA;AAAA,UACA,EAAA,iBAAA;AAAA,YACA,OAAA;AAAA,cACA,MAAA,KAAA;AAAA,cACA,eAAA,KAAA;AAAA,cACA,aAAA,KAAA;AAAA,YACA;AAAA,UACA,CAAA;AAAA,QACA,CAAA,IACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,GAAA;AACA,WAAA,KAAA,eAAA,KAAA,sBACA,KAAA,eAAA,CAAA,IACA,KAAA,gBAAA,CAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcRichText-CCM1HmZE.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcRichText-CCM1HmZE.mjs","sources":["../../src/components/NcRichText/NcReferenceList.vue","../../src/components/NcRichText/placeholder.js","../../src/components/NcRichText/NcRichText.vue"],"sourcesContent":["\n\n<template>\n\t<div v-if=\"isVisible\" class=\"widgets--list\" :class=\"{'icon-loading': loading }\">\n\t\t<div v-for=\"reference in displayedReferences\" :key=\"reference?.openGraphObject?.id\">\n\t\t\t<NcReferenceWidget :reference=\"reference\" :interactive=\"interactive\" :interactive-opt-in=\"interactiveOptIn\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport NcReferenceWidget from './NcReferenceWidget.vue'\nimport { URL_PATTERN } from './helpers.js'\n\nimport axios from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\n\nexport default {\n\tname: 'NcReferenceList',\n\tcomponents: {\n\t\tNcReferenceWidget,\n\t},\n\tprops: {\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\treferenceData: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: 1,\n\t\t},\n\t\tdisplayFallback: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tinteractive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\tinteractiveOptIn: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\treferences: null,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tcomputed: {\n\t\tisVisible() {\n\t\t\treturn this.loading || this.displayedReferences.length !== 0\n\t\t},\n\t\tvalues() {\n\t\t\tif (this.referenceData) {\n\t\t\t\treturn this.referenceData\n\t\t\t}\n\n\t\t\tif (this.displayFallback && !this.loading && !this.references) {\n\t\t\t\treturn [this.fallbackReference]\n\t\t\t}\n\n\t\t\treturn this.references ? Object.values(this.references) : []\n\t\t},\n\t\tfirstReference() {\n\t\t\treturn this.values[0] ?? null\n\t\t},\n\t\tdisplayedReferences() {\n\t\t\treturn this.values.slice(0, this.limit)\n\t\t},\n\t\tfallbackReference() {\n\t\t\treturn {\n\t\t\t\taccessible: true,\n\t\t\t\topenGraphObject: {\n\t\t\t\t\tid: this.text,\n\t\t\t\t\tlink: this.text,\n\t\t\t\t\tname: this.text,\n\t\t\t\t},\n\t\t\t\trichObjectType: 'open-graph',\n\t\t\t}\n\t\t},\n\t},\n\twatch: {\n\t\ttext: 'fetch',\n\t},\n\tmounted() {\n\t\tthis.fetch()\n\t},\n\tmethods: {\n\t\tfetch() {\n\t\t\tthis.loading = true\n\t\t\tif (this.referenceData) {\n\t\t\t\tthis.loading = false\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (!(new RegExp(URL_PATTERN).exec(this.text))) {\n\t\t\t\tthis.loading = false\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.resolve().then((response) => {\n\t\t\t\tthis.references = response.data.ocs.data.references\n\t\t\t\tthis.loading = false\n\t\t\t\tthis.$emit('loaded')\n\t\t\t}).catch((error) => {\n\t\t\t\tconsole.error('Failed to extract references', error)\n\t\t\t\tthis.loading = false\n\t\t\t\tthis.$emit('loaded')\n\t\t\t})\n\t\t},\n\t\tresolve() {\n\t\t\tconst match = (new RegExp(URL_PATTERN).exec(this.text.trim()))\n\t\t\tif (this.limit === 1 && match) {\n\t\t\t\treturn axios.get(generateOcsUrl('references/resolve', 2) + `?reference=${encodeURIComponent(match[0])}`)\n\t\t\t}\n\n\t\t\treturn axios.post(generateOcsUrl('references/extract', 2), {\n\t\t\t\ttext: this.text,\n\t\t\t\tresolve: true,\n\t\t\t\tlimit: this.limit,\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.widget--list {\n\twidth: var(--widget-full-width, 100%);\n}\n\n.widgets--list.icon-loading {\n\tmin-height: var(--default-clickable-area);\n}\n</style>\n","/**\n * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { parseUrl } from './autolink.js'\n\nimport { visit } from 'unist-util-visit'\nimport { u } from 'unist-builder'\n\nexport const remarkPlaceholder = function() {\n\treturn function(ast) {\n\t\tvisit(ast, (node) => node.type === 'text', visitor)\n\n\t\t/**\n\t\t *\n\t\t * @param {object} node The node\n\t\t * @param {number} index The index of the node\n\t\t * @param {object} parent The parent node\n\t\t */\n\t\tfunction visitor(node, index, parent) {\n\t\t\tconst placeholders = node.value.split(/(\\{[a-z\\-_.0-9]+\\})/ig)\n\t\t\t\t.map((entry, index, list) => {\n\t\t\t\t\tconst matches = entry.match(/^\\{([a-z\\-_.0-9]+)\\}$/i)\n\t\t\t\t\tif (!matches) {\n\t\t\t\t\t\treturn u('text', entry)\n\t\t\t\t\t}\n\t\t\t\t\tconst [, component] = matches\n\t\t\t\t\treturn u('element', {\n\t\t\t\t\t\ttagName: `#${component}`,\n\t\t\t\t\t})\n\t\t\t\t})\n\n\t\t\tparent.children.splice(index, 1, ...placeholders)\n\t\t}\n\t}\n}\n\nexport const prepareTextNode = ({ h, context }, text) => {\n\tif (context.autolink) {\n\t\ttext = parseUrl(text)\n\t}\n\tif (Array.isArray(text)) {\n\t\treturn text.map((entry) => {\n\t\t\tif (typeof entry === 'string') {\n\t\t\t\treturn entry\n\t\t\t}\n\t\t\tconst { component, props } = entry\n\t\t\t// do not override class of NcLink\n\t\t\tconst componentClass = component.name === 'NcLink' ? undefined : 'rich-text--component'\n\t\t\treturn h(component, {\n\t\t\t\tprops,\n\t\t\t\tclass: componentClass,\n\t\t\t})\n\t\t})\n\t}\n\treturn text\n}\n","\n\n<docs>\n### General description\n\nThis component displays rich text with optional autolink or [Markdown support](https://www.markdownguide.org/basic-syntax/).\n\n```vue\n<template>\n\t<div>\n\t\t<textarea v-model=\"text\" />\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"autolink\" type=\"checkbox\">Autolink</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"useMarkdown\" type=\"checkbox\">Use Markdown</NcCheckboxRadioSwitch>\n\n\t\t<NcRichText\n\t\t\t:class=\"{'plain-text': !useMarkdown }\"\n\t\t\t:text=\"text\" :autolink=\"autolink\" :arguments=\"args\"\n\t\t\t:use-markdown=\"useMarkdown\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: `## Hello everyone 🎉\nThe file {file} was added by {username}. Visit https://nextcloud.com to check it!\n\nSome examples for markdown syntax:\n1. **bold text**\n2. _italic text_\n3. example of \\`inline code\\`\n\n> blockquote example\n`,\n\t\t\tautolink: true,\n\t\t\tuseMarkdown: true,\n\t\t\targs: {\n\t\t\t\tfile: 'MyDocument.odt',\n\t\t\t\tusername: {\n\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdisplayName: 'Jane Doe'\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t}\n\t},\n}\n</script>\n<style lang=\"scss\">\ntextarea {\n\twidth: 100%;\n\theight: 200px;\n}\n\n.plain-text {\n\twhite-space: pre-line;\n}\n</style>\n```\n\n### Flavored Markdown\n\nThis component can support [Github Flavored Markdown](https://github.github.com/gfm/).\nIt adds such elements, as tables, task lists, strikethrough, and supports autolinks by default\n\nIt is also possible to make a rendered content interactive and listen for events\n\n```vue\n<template>\n\t<div>\n\t\t<textarea v-model=\"text\" />\n\n\t\t<NcRichText :text=\"text\"\n\t\t\t:use-extended-markdown=\"true\"\n\t\t\t:interactive=\"true\"\n\t\t\t@interact:todo=\"handleInteraction\"/>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttext: `## Try flavored markdown right now!\n\n~~strikethrough~~\n\n- [ ] task to be done\n- [x] task completed\n\nTable header | Column A | Column B\n-- | -- | --\nTable row | value A | value B\n`,\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\thandleInteraction(id) {\n\t\t\t\tconst parentId = id.split('-markdown-input-')[0]\n\t\t\t\tconst index = Array.from(document.querySelectorAll(`span[id^=\"${parentId}-markdown-input-\"]`)).findIndex((el) => el.id.includes(id))\n\t\t\t\tif (index === -1 ) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tlet checkBoxIndex = 0\n\t\t\t\tlines = this.text.split('\\n')\n\t\t\t\tfor (let i = 0; i < lines.length; i++) {\n\t\t\t\t\tif (lines[i].includes('[ ]') || lines[i].includes('[x]')) {\n\t\t\t\t\t\tif (checkBoxIndex === index) {\n\t\t\t\t\t\t\tconst isChecked = lines[i].includes('[x]')\n\t\t\t\t\t\t\tif (isChecked) {\n\t\t\t\t\t\t\t\tlines[i] = lines[i].replace('[x]', '[ ]')\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tlines[i] = lines[i].replace('[ ]', '[x]')\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tbreak\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcheckBoxIndex++\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.text = lines.join('\\n')\n\t\t\t},\n\t\t},\n\t}\n</script>\n<style lang=\"scss\">\ntextarea {\n\twidth: 100%;\n\theight: 200px;\n}\n</style>\n```\n\n### Usage with NcRichContenteditable\n\nSee [NcRichContenteditable](#/Components/NcRichContenteditable) documentation for more information\n\n```vue\n<template>\n\t<div>\n\t\t<NcRichContenteditable :value.sync=\"message\"\n\t\t\t:auto-complete=\"autoComplete\"\n\t\t\t:maxlength=\"100\"\n\t\t\t:user-data=\"userData\"\n\t\t\tplaceholder=\"Try mentioning user @Test01 or inserting emoji :smile\"\n\t\t\t@submit=\"onSubmit\" />\n\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"autolink\" type=\"checkbox\">Autolink</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"useMarkdown\" type=\"checkbox\">Use Markdown</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"useExtendedMarkdown\" type=\"checkbox\">Use extended Markdown</NcCheckboxRadioSwitch>\n\n\t\t<NcRichText :text=\"text\"\n\t\t\t:autolink=\"autolink\"\n\t\t\t:arguments=\"userMentions\"\n\t\t\t:use-markdown=\"useMarkdown\"\n\t\t\t:use-extended-markdown=\"useExtendedMarkdown\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tmessage: '',\n\t\t\t\tautolink: true,\n\t\t\t\tuseMarkdown: true,\n\t\t\t\tuseExtendedMarkdown: true,\n\t\t\t\tuserData: {\n\t\t\t\t\tTest01: {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test01',\n\t\t\t\t\t\tlabel: 'Test01',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tprimary: true,\n\t\t\t\t\t},\n\t\t\t\t\tTest02: {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test02',\n\t\t\t\t\t\tlabel: 'Test02',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tstatus: {\n\t\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\t\tmessage: 'Visiting London',\n\t\t\t\t\t\t\tstatus: 'away',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t\t},\n\t\t\t\t\t'Test@User': {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test@User',\n\t\t\t\t\t\tlabel: 'Test 03',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tstatus: {\n\t\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\t\ticon: '🎡',\n\t\t\t\t\t\t\tmessage: 'Having space in my name',\n\t\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsubline: 'Visiting London',\n\t\t\t\t\t},\n\t\t\t\t\t'Test Offline': {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test Offline',\n\t\t\t\t\t\tlabel: 'Test Offline',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tstatus: {\n\t\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\t\tmessage: null,\n\t\t\t\t\t\t\tstatus: 'offline',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsubline: null,\n\t\t\t\t\t},\n\t\t\t\t\t'Test DND': {\n\t\t\t\t\t\ticon: 'icon-user',\n\t\t\t\t\t\tid: 'Test DND',\n\t\t\t\t\t\tlabel: 'Test DND',\n\t\t\t\t\t\tsource: 'users',\n\t\t\t\t\t\tstatus: {\n\t\t\t\t\t\t\tclearAt: null,\n\t\t\t\t\t\t\ticon: null,\n\t\t\t\t\t\t\tmessage: 'Out sick',\n\t\t\t\t\t\t\tstatus: 'dnd',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsubline: 'Out sick',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tuserMentions: {\n\t\t\t\t\t'user-1': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test01',\n\t\t\t\t\t\t\tuser: 'Test01',\n\t\t\t\t\t\t\tprimary: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t'user-2': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test02',\n\t\t\t\t\t\t\tuser: 'Test02',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t'user-3': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test 03',\n\t\t\t\t\t\t\tuser: 'Test@User',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t'user-4': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test Offline',\n\t\t\t\t\t\t\tuser: 'Test Offline',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t'user-5': {\n\t\t\t\t\t\tcomponent: 'NcUserBubble',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tdisplayName: 'Test DND',\n\t\t\t\t\t\t\tuser: 'Test DND',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t\tcomputed: {\n\t\t\ttext() {\n\t\t\t\treturn this.message\n\t\t\t\t\t\t.replace('@Test01', '{user-1}')\n\t\t\t\t\t\t.replace('@Test02', '{user-2}')\n\t\t\t\t\t\t.replace('@Test@User', '{user-3}')\n\t\t\t\t\t\t.replace('@\"Test Offline\"', '{user-4}')\n\t\t\t\t\t\t.replace('@\"Test DND\"', '{user-5}')\n\t\t\t},\n\t\t},\n\t\tmethods: {\n\t\t\tautoComplete(search, callback) {\n\t\t\t\tcallback(Object.values(this.userData))\n\t\t\t},\n\t\t\tonSubmit() {\n\t\t\t\talert(this.message)\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n</docs>\n\n<script>\nimport NcReferenceList from './NcReferenceList.vue'\nimport NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue'\nimport { getRoute, remarkAutolink } from './autolink.js'\nimport { remarkPlaceholder, prepareTextNode } from './placeholder.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport { unified } from 'unified'\nimport remarkParse from 'remark-parse'\nimport remarkGfm from 'remark-gfm'\nimport breaks from 'remark-breaks'\nimport remark2rehype from 'remark-rehype'\nimport rehype2react from 'rehype-react'\nimport rehypeExternalLinks from 'rehype-external-links'\nimport { RouterLink } from 'vue-router'\n\nexport default {\n\tname: 'NcRichText',\n\tcomponents: {\n\t\tNcReferenceList,\n\t},\n\tprops: {\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\targuments: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => {\n\t\t\t\treturn {}\n\t\t\t},\n\t\t},\n\t\treferenceLimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t\treferenceInteractive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/** Provide data upfront to avoid extra http request */\n\t\treferences: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t\tmarkdownCssClasses: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => {\n\t\t\t\treturn {\n\t\t\t\t\ta: 'rich-text--external-link',\n\t\t\t\t\tol: 'rich-text--ordered-list',\n\t\t\t\t\tul: 'rich-text--un-ordered-list',\n\t\t\t\t\tli: 'rich-text--list-item',\n\t\t\t\t\tstrong: 'rich-text--strong',\n\t\t\t\t\tem: 'rich-text--italic',\n\t\t\t\t\th1: 'rich-text--heading rich-text--heading-1',\n\t\t\t\t\th2: 'rich-text--heading rich-text--heading-2',\n\t\t\t\t\th3: 'rich-text--heading rich-text--heading-3',\n\t\t\t\t\th4: 'rich-text--heading rich-text--heading-4',\n\t\t\t\t\th5: 'rich-text--heading rich-text--heading-5',\n\t\t\t\t\th6: 'rich-text--heading rich-text--heading-6',\n\t\t\t\t\thr: 'rich-text--hr',\n\t\t\t\t\ttable: 'rich-text--table',\n\t\t\t\t\tpre: 'rich-text--pre',\n\t\t\t\t\tcode: 'rich-text--code',\n\t\t\t\t\tblockquote: 'rich-text--blockquote',\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\tuseMarkdown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/** Provide GitHub Flavored Markdown syntax */\n\t\tuseExtendedMarkdown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/** Provide event from rendered markdown inputs */\n\t\tinteractive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tautolink: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\temits: ['interact:todo'],\n\n\tdata() {\n\t\treturn {\n\t\t\tparentId: GenRandomId(5),\n\t\t}\n\t},\n\n\tmethods: {\n\t\trenderPlaintext(h) {\n\t\t\tconst context = this\n\t\t\tconst placeholders = this.text.split(/(\\{[a-z\\-_.0-9]+\\})/ig).map(function(entry, index, list) {\n\t\t\t\tconst matches = entry.match(/^\\{([a-z\\-_.0-9]+)\\}$/i)\n\t\t\t\t// just return plain string nodes as text\n\t\t\t\tif (!matches) {\n\t\t\t\t\treturn prepareTextNode({ h, context }, entry)\n\t\t\t\t}\n\t\t\t\t// return component instance if argument is an object\n\t\t\t\tconst argumentId = matches[1]\n\t\t\t\tconst argument = context.arguments[argumentId]\n\t\t\t\tif (typeof argument === 'object') {\n\t\t\t\t\tconst { component, props } = argument\n\t\t\t\t\treturn h(component, {\n\t\t\t\t\t\tprops,\n\t\t\t\t\t\tclass: 'rich-text--component',\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t\tif (argument) {\n\t\t\t\t\treturn h('span', { class: 'rich-text--fallback' }, argument)\n\t\t\t\t}\n\t\t\t\treturn entry\n\t\t\t})\n\t\t\treturn h('div', { class: 'rich-text--wrapper' }, [\n\t\t\t\th('div', {}, placeholders.flat()),\n\t\t\t\tthis.referenceLimit > 0\n\t\t\t\t\t? h('div', { class: 'rich-text--reference-widget' }, [\n\t\t\t\t\t\th(NcReferenceList, {\n\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\ttext: this.text,\n\t\t\t\t\t\t\t\treferenceData: this.references,\n\t\t\t\t\t\t\t\tinteractive: this.referenceInteractive,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}),\n\t\t\t\t\t])\n\t\t\t\t\t: null,\n\t\t\t])\n\t\t},\n\t\trenderMarkdown(h) {\n\t\t\tconst renderedMarkdown = unified()\n\t\t\t\t.use(remarkParse)\n\t\t\t\t.use(remarkAutolink, {\n\t\t\t\t\tautolink: this.autolink,\n\t\t\t\t\tuseMarkdown: this.useMarkdown,\n\t\t\t\t\tuseExtendedMarkdown: this.useExtendedMarkdown,\n\t\t\t\t})\n\t\t\t\t.use(this.useExtendedMarkdown ? remarkGfm : undefined)\n\t\t\t\t.use(breaks)\n\t\t\t\t.use(remark2rehype, {\n\t\t\t\t\thandlers: {\n\t\t\t\t\t\tcomponent(toHast, node) {\n\t\t\t\t\t\t\treturn toHast(node, node.component, { value: node.value })\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t})\n\t\t\t\t// .use(rehypeAddClasses, this.markdownCssClasses)\n\t\t\t\t.use(remarkPlaceholder)\n\t\t\t\t.use(rehypeExternalLinks, {\n\t\t\t\t\ttarget: '_blank',\n\t\t\t\t\trel: ['noopener noreferrer'],\n\t\t\t\t})\n\t\t\t\t.use(rehype2react, {\n\t\t\t\t\tcreateElement: (tag, attrs, children) => {\n\t\t\t\t\t\t// unescape special symbol \"<\" for simple text nodes\n\t\t\t\t\t\tchildren = children?.map(child => typeof child === 'string'\n\t\t\t\t\t\t\t? child.replace(/</gmi, '<')\n\t\t\t\t\t\t\t: child,\n\t\t\t\t\t\t)\n\n\t\t\t\t\t\tif (!tag.startsWith('#')) {\n\t\t\t\t\t\t\tif (this.useExtendedMarkdown) {\n\t\t\t\t\t\t\t\tlet nestedNode = null\n\t\t\t\t\t\t\t\tif (tag === 'li' && Array.isArray(children)\n\t\t\t\t\t\t\t\t\t&& children[0].tag === 'input'\n\t\t\t\t\t\t\t\t\t&& children[0].data.attrs.type === 'checkbox') {\n\t\t\t\t\t\t\t\t\tconst [inputNode, ...labelParts] = children\n\n\t\t\t\t\t\t\t\t\tconst nestedNodeIndex = labelParts.findIndex((child) => ['ul', 'ol', 'li', 'blockquote', 'pre'].includes(child.tag))\n\t\t\t\t\t\t\t\t\tif (nestedNodeIndex !== -1) {\n\t\t\t\t\t\t\t\t\t\tnestedNode = labelParts[nestedNodeIndex]\n\t\t\t\t\t\t\t\t\t\tlabelParts.splice(nestedNodeIndex)\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tconst id = this.parentId + '-markdown-input-' + GenRandomId(5)\n\t\t\t\t\t\t\t\t\tconst inputComponent = h(NcCheckboxRadioSwitch, {\n\t\t\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\t\t\t...inputNode.data.attrs,\n\t\t\t\t\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\t\t\t\t\tdisabled: !this.interactive,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\ton: {\n\t\t\t\t\t\t\t\t\t\t\t'update:checked': () => {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.$emit('interact:todo', id)\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}, labelParts)\n\n\t\t\t\t\t\t\t\t\treturn h(tag, attrs, [inputComponent, nestedNode])\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (tag === 'a') {\n\t\t\t\t\t\t\t\tconst route = getRoute(this.$router, attrs.attrs.href)\n\t\t\t\t\t\t\t\tif (route) {\n\t\t\t\t\t\t\t\t\tdelete attrs.attrs.href\n\t\t\t\t\t\t\t\t\tdelete attrs.attrs.target\n\n\t\t\t\t\t\t\t\t\treturn h(RouterLink, {\n\t\t\t\t\t\t\t\t\t\t...attrs,\n\t\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\t\tto: route,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}, children)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn h(tag, attrs, children)\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst placeholder = this.arguments[tag.slice(1)]\n\t\t\t\t\t\tif (!placeholder) {\n\t\t\t\t\t\t\treturn h('span', { ...{ attrs }, ...{ class: 'rich-text--fallback' } }, [`{${tag.slice(1)}}`])\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (!placeholder.component) {\n\t\t\t\t\t\t\treturn h('span', attrs, [placeholder])\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn h(\n\t\t\t\t\t\t\tplaceholder.component,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tattrs,\n\t\t\t\t\t\t\t\tprops: placeholder.props,\n\t\t\t\t\t\t\t\tclass: 'rich-text--component',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t)\n\t\t\t\t\t},\n\t\t\t\t\tprefix: false,\n\t\t\t\t})\n\t\t\t\t.processSync(this.text\n\t\t\t\t\t// escape special symbol \"<\" to not treat text as HTML\n\t\t\t\t\t.replace(/</gmi, '<')\n\t\t\t\t\t// unescape special symbol \">\" to parse blockquotes\n\t\t\t\t\t.replace(/>/gmi, '>'),\n\t\t\t\t)\n\t\t\t\t.result\n\n\t\t\treturn h('div', { class: 'rich-text--wrapper rich-text--wrapper-markdown' }, [\n\t\t\t\trenderedMarkdown,\n\t\t\t\tthis.referenceLimit > 0\n\t\t\t\t\t? h('div', { class: 'rich-text--reference-widget' }, [\n\t\t\t\t\t\th(NcReferenceList, {\n\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\ttext: this.text,\n\t\t\t\t\t\t\t\treferenceData: this.references,\n\t\t\t\t\t\t\t\tinteractive: this.referenceInteractive,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}),\n\t\t\t\t\t])\n\t\t\t\t\t: null,\n\t\t\t])\n\t\t},\n\t},\n\trender(h) {\n\t\treturn this.useMarkdown || this.useExtendedMarkdown\n\t\t\t? this.renderMarkdown(h)\n\t\t\t: this.renderPlaintext(h)\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n/* stylelint-disable-next-line scss/at-import-partial-extension */\n@import './richtext.scss';\n\na:not(.rich-text--component) {\n\ttext-decoration: underline;\n}\n\n</style>\n"],"names":["_sfc_main","index"],"mappings":"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"}

package/dist/chunks/NcTextField-CjEhJrIE.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcTextField-CjEhJrIE.mjs","sources":["../../node_modules/vue-material-design-icons/UndoVariant.vue","../../src/components/NcTextField/NcTextField.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon undo-variant-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M13.5,7A6.5,6.5 0 0,1 20,13.5A6.5,6.5 0 0,1 13.5,20H10V18H13.5C16,18 18,16 18,13.5C18,11 16,9 13.5,9H7.83L10.91,12.09L9.5,13.5L4,8L9.5,2.5L10.92,3.91L7.83,7H13.5M6,18H8V20H6V18Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"UndoVariantIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","\n\n<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose text field component.\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nNote: the inner html `input` element inherits all the attributes from the\nNcTextField component so you can add things like `autocomplete`, `maxlength`\nand `minlength`.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextField :value.sync=\"text1\"\n\t\t\tlabel=\"Leading icon and clear trailing button\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text1 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<Magnify :size=\"20\" />\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text4\"\n\t\t\tlabel=\"Internal label\"\n\t\t\tplaceholder=\"That can be used together with placeholder\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text4 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<Lock :size=\"20\" />\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text2\"\n\t\t\tlabel=\"Success state\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\t:success=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text3\"\n\t\t\tlabel=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\t:error=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField label=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextField label=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextField :value.sync=\"text5\"\n\t\t\t\tid=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Input with external label\"\n\t\t\t\t@trailing-button-click=\"clearText\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Lock from 'vue-material-design-icons/Lock'\nimport Close from 'vue-material-design-icons/Close'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: '',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n\n\tcomponents: {\n\t\tMagnify,\n\t\tLock,\n\t\tClose,\n\t},\n\n\tmethods: {\n\t\tclearText() {\n\t\t\tthis.text1 = ''\n\t\t\tthis.text3 = ''\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\tpadding-right: 14px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField v-bind=\"propsAndAttrsToForward\"\n\t\tref=\"inputField\"\n\t\tv-on=\"$listeners\"\n\t\t@input=\"handleInput\">\n\t\t\n\t\t<slot />\n\n\t\t\n\t\t<template v-if=\"type !== 'search'\" #trailing-button-icon>\n\t\t\t<Close v-if=\"trailingButtonIcon === 'close'\" :size=\"20\" />\n\t\t\t<ArrowRight v-else-if=\"trailingButtonIcon === 'arrowRight'\" :size=\"20\" />\n\t\t\t<Undo v-else-if=\"trailingButtonIcon === 'undo'\" :size=\"20\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\n\nimport NcInputField from '../NcInputField/NcInputField.vue'\n\nimport Close from 'vue-material-design-icons/Close.vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Undo from 'vue-material-design-icons/UndoVariant.vue'\n\nimport { t } from '../../l10n.js'\n\nconst NcInputFieldProps = new Set(Object.keys(NcInputField.props))\n\nexport default {\n\tname: 'NcTextField',\n\n\tcomponents: {\n\t\tNcInputField,\n\t\tClose,\n\t\tArrowRight,\n\t\tUndo,\n\t},\n\n\t// Allow forwarding all attributes\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\n\t\t// Reuse all the props from NcInputField for better typing and documentation\n\t\t...NcInputField.props,\n\n\t\t/**\n\t\t * The `aria-label` to set on the trailing button\n\t\t * If no explicit value is set it will default to the one matching the `trailingButtonIcon`:\n\t\t * @default 'Clear text'|'Save changes'|'Undo changes'\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t// Custom props\n\n\t\t/**\n\t\t * Specifies which material design icon should be used for the trailing\n\t\t * button.\n\t\t * @type {'close'|'arrowRight'|'undo'}\n\t\t */\n\t\ttrailingButtonIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: 'close',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'close',\n\t\t\t\t'arrowRight',\n\t\t\t\t'undo',\n\t\t\t].includes(value),\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:value',\n\t],\n\n\tcomputed: {\n\t\tpropsAndAttrsToForward() {\n\t\t\tconst predefinedLabels = {\n\t\t\t\tundo: t('Undo changes'),\n\t\t\t\tclose: t('Clear text'),\n\t\t\t\tarrowRight: t('Save changes'),\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\t// Proxy all the HTML attributes\n\t\t\t\t...this.$attrs,\n\t\t\t\t// Proxy original NcInputField's props\n\t\t\t\t...Object.fromEntries(\n\t\t\t\t\tObject.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key)),\n\t\t\t\t),\n\t\t\t\t// Adjust aria-label for predefined trailing buttons\n\t\t\t\ttrailingButtonLabel: this.trailingButtonLabel || predefinedLabels[this.trailingButtonIcon],\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t},\n}\n</script>\n"],"names":["_sfc_main"],"mappings":";;;;;AAoBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;AC0GA,MAAA,oBAAA,IAAA,IAAA,OAAA,KAAA,aAAA,KAAA,CAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA;AAAA,EAGA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA,CAAA;AAAA;AAAA,IAGA,GAAA,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,yBAAA;AACA,YAAA,mBAAA;AAAA,QACA,MAAA,EAAA,cAAA;AAAA,QACA,OAAA,EAAA,YAAA;AAAA,QACA,YAAA,EAAA,cAAA;AAAA,MACA;AAEA,aAAA;AAAA;AAAA,QAEA,GAAA,KAAA;AAAA;AAAA,QAEA,GAAA,OAAA;AAAA,UACA,OAAA,QAAA,KAAA,MAAA,EAAA,OAAA,CAAA,CAAA,GAAA,MAAA,kBAAA,IAAA,GAAA,CAAA;AAAA,QACA;AAAA;AAAA,QAEA,qBAAA,KAAA,uBAAA,iBAAA,KAAA,kBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AACA,WAAA,MAAA,WAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AACA,WAAA,MAAA,WAAA,OAAA;AAAA,IACA;AAAA,IAEA,YAAA,OAAA;AACA,WAAA,MAAA,gBAAA,MAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/NcTextField-DGywgzwv.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcTextField-DGywgzwv.cjs","sources":["../../node_modules/vue-material-design-icons/UndoVariant.vue","../../src/components/NcTextField/NcTextField.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon undo-variant-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M13.5,7A6.5,6.5 0 0,1 20,13.5A6.5,6.5 0 0,1 13.5,20H10V18H13.5C16,18 18,16 18,13.5C18,11 16,9 13.5,9H7.83L10.91,12.09L9.5,13.5L4,8L9.5,2.5L10.92,3.91L7.83,7H13.5M6,18H8V20H6V18Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"UndoVariantIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","\n\n<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose text field component.\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nNote: the inner html `input` element inherits all the attributes from the\nNcTextField component so you can add things like `autocomplete`, `maxlength`\nand `minlength`.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextField :value.sync=\"text1\"\n\t\t\tlabel=\"Leading icon and clear trailing button\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text1 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<Magnify :size=\"20\" />\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text4\"\n\t\t\tlabel=\"Internal label\"\n\t\t\tplaceholder=\"That can be used together with placeholder\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text4 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<Lock :size=\"20\" />\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text2\"\n\t\t\tlabel=\"Success state\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\t:success=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text3\"\n\t\t\tlabel=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\t:error=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField label=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextField label=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextField :value.sync=\"text5\"\n\t\t\t\tid=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Input with external label\"\n\t\t\t\t@trailing-button-click=\"clearText\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Lock from 'vue-material-design-icons/Lock'\nimport Close from 'vue-material-design-icons/Close'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: '',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n\n\tcomponents: {\n\t\tMagnify,\n\t\tLock,\n\t\tClose,\n\t},\n\n\tmethods: {\n\t\tclearText() {\n\t\t\tthis.text1 = ''\n\t\t\tthis.text3 = ''\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\tpadding-right: 14px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField v-bind=\"propsAndAttrsToForward\"\n\t\tref=\"inputField\"\n\t\tv-on=\"$listeners\"\n\t\t@input=\"handleInput\">\n\t\t\n\t\t<slot />\n\n\t\t\n\t\t<template v-if=\"type !== 'search'\" #trailing-button-icon>\n\t\t\t<Close v-if=\"trailingButtonIcon === 'close'\" :size=\"20\" />\n\t\t\t<ArrowRight v-else-if=\"trailingButtonIcon === 'arrowRight'\" :size=\"20\" />\n\t\t\t<Undo v-else-if=\"trailingButtonIcon === 'undo'\" :size=\"20\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\n\nimport NcInputField from '../NcInputField/NcInputField.vue'\n\nimport Close from 'vue-material-design-icons/Close.vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Undo from 'vue-material-design-icons/UndoVariant.vue'\n\nimport { t } from '../../l10n.js'\n\nconst NcInputFieldProps = new Set(Object.keys(NcInputField.props))\n\nexport default {\n\tname: 'NcTextField',\n\n\tcomponents: {\n\t\tNcInputField,\n\t\tClose,\n\t\tArrowRight,\n\t\tUndo,\n\t},\n\n\t// Allow forwarding all attributes\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\n\t\t// Reuse all the props from NcInputField for better typing and documentation\n\t\t...NcInputField.props,\n\n\t\t/**\n\t\t * The `aria-label` to set on the trailing button\n\t\t * If no explicit value is set it will default to the one matching the `trailingButtonIcon`:\n\t\t * @default 'Clear text'|'Save changes'|'Undo changes'\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t// Custom props\n\n\t\t/**\n\t\t * Specifies which material design icon should be used for the trailing\n\t\t * button.\n\t\t * @type {'close'|'arrowRight'|'undo'}\n\t\t */\n\t\ttrailingButtonIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: 'close',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'close',\n\t\t\t\t'arrowRight',\n\t\t\t\t'undo',\n\t\t\t].includes(value),\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:value',\n\t],\n\n\tcomputed: {\n\t\tpropsAndAttrsToForward() {\n\t\t\tconst predefinedLabels = {\n\t\t\t\tundo: t('Undo changes'),\n\t\t\t\tclose: t('Clear text'),\n\t\t\t\tarrowRight: t('Save changes'),\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\t// Proxy all the HTML attributes\n\t\t\t\t...this.$attrs,\n\t\t\t\t// Proxy original NcInputField's props\n\t\t\t\t...Object.fromEntries(\n\t\t\t\t\tObject.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key)),\n\t\t\t\t),\n\t\t\t\t// Adjust aria-label for predefined trailing buttons\n\t\t\t\ttrailingButtonLabel: this.trailingButtonLabel || predefinedLabels[this.trailingButtonIcon],\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t},\n}\n</script>\n"],"names":["_sfc_main","NcInputField","Close","ArrowRight","t"],"mappings":";;;;;;AAoBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;AC0GA,MAAA,oBAAA,IAAA,IAAA,OAAA,KAAAC,wBAAA,KAAA,CAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAA;AAAAA,IACA,OAAAC,MAAA;AAAA,IACA,YAAAC,WAAA;AAAA,IACA;AAAA,EACA;AAAA;AAAA,EAGA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA,CAAA;AAAA;AAAA,IAGA,GAAAF,wBAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,yBAAA;AACA,YAAA,mBAAA;AAAA,QACA,MAAAG,MAAA,EAAA,cAAA;AAAA,QACA,OAAAA,MAAA,EAAA,YAAA;AAAA,QACA,YAAAA,MAAA,EAAA,cAAA;AAAA,MACA;AAEA,aAAA;AAAA;AAAA,QAEA,GAAA,KAAA;AAAA;AAAA,QAEA,GAAA,OAAA;AAAA,UACA,OAAA,QAAA,KAAA,MAAA,EAAA,OAAA,CAAA,CAAA,GAAA,MAAA,kBAAA,IAAA,GAAA,CAAA;AAAA,QACA;AAAA;AAAA,QAEA,qBAAA,KAAA,uBAAA,iBAAA,KAAA,kBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AACA,WAAA,MAAA,WAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AACA,WAAA,MAAA,WAAA,OAAA;AAAA,IACA;AAAA,IAEA,YAAA,OAAA;AACA,WAAA,MAAA,gBAAA,MAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/_l10n-DDx8P-X1.mjs.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"_l10n-DDx8P-X1.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}