@nextcloud/vue 8.0.1 → 8.1.0

package/dist/Components/NcTextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcTextField.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\"\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  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @author Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\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<!-- Default slot for the leading icon -->\n\t\t<slot />\n\n\t\t<!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->\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// Redefined props\n\n\t\t/**\n\t\t * Label of the trailing button\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Clear text'),\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\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}\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","NcInputFieldProps","NcInputField","Close","ArrowRight","Undo","t","value","key","event"],"mappings":";mPAoBAA,IAAA;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;;;;;;;;;;;;;;;;qBC0HAC,IAAA,IAAA,IAAA,OAAA,KAAAC,EAAA,KAAA,CAAA,GAEAF,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAE;AAAAA,IACA,OAAAC,EAAA;AAAA,IACA,YAAAC,EAAA;AAAA,IACA,MAAAC;AAAA,EACA;AAAA;AAAA,EAGA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA,CAAA;AAAA;AAAA,IAGA,GAAAH,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAI,EAAA,EAAA,YAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,yBAAA;AACA,aAAA;AAAA;AAAA,QAEA,GAAA,KAAA;AAAA;AAAA,QAEA,GAAA,OAAA;AAAA,UACA,OAAA,QAAA,KAAA,MAAA,EAAA,OAAA,CAAA,CAAAC,CAAA,MAAAP,EAAA,IAAAO,CAAA,CAAA;AAAA,QACA;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,YAAAC,GAAA;AACA,WAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"NcTextField.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\"\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  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @author Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\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<!-- Default slot for the leading icon -->\n\t\t<slot />\n\n\t\t<!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->\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","NcInputFieldProps","NcInputField","Close","ArrowRight","Undo","value","predefinedLabels","t","key","event"],"mappings":";mPAoBAA,IAAA;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;;;;;;;;;;;;;;;;qBC0HAC,IAAA,IAAA,IAAA,OAAA,KAAAC,EAAA,KAAA,CAAA,GAEAF,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAE;AAAAA,IACA,OAAAC,EAAA;AAAA,IACA,YAAAC,EAAA;AAAA,IACA,MAAAC;AAAA,EACA;AAAA;AAAA,EAGA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA,CAAA;AAAA;AAAA,IAGA,GAAAH,EAAA;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,CAAAI,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,yBAAA;AACA,YAAAC,IAAA;AAAA,QACA,MAAAC,EAAA,EAAA,cAAA;AAAA,QACA,OAAAA,EAAA,EAAA,YAAA;AAAA,QACA,YAAAA,EAAA,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,CAAAC,CAAA,MAAAR,EAAA,IAAAQ,CAAA,CAAA;AAAA,QACA;AAAA;AAAA,QAEA,qBAAA,KAAA,uBAAAF,EAAA,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,YAAAG,GAAA;AACA,WAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/Components/NcTextField.mjs

@@ -1,8 +1,8 @@
-import r from "./NcInputField.mjs";
+import i from "./NcInputField.mjs";
 import { C as l } from "../chunks/Close-271f72e2.mjs";
-import { A as o } from "../chunks/ArrowRight-74a9fcb2.mjs";
-import { n as i } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-import { t as a } from "../chunks/l10n-f692947e.mjs";
+import { A as a } from "../chunks/ArrowRight-74a9fcb2.mjs";
+import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+import { t as r } from "../chunks/l10n-f51d3415.mjs";
 const c = {
   name: "UndoVariantIcon",
   emits: ["click"],
@@ -22,10 +22,10 @@ const c = {
 };
 var u = function() {
   var t = this, e = t._self._c;
-  return e("span", t._b({ staticClass: "material-design-icon undo-variant-icon", attrs: { "aria-hidden": !t.title, "aria-label": t.title, role: "img" }, on: { click: function(s) {
-    return t.$emit("click", s);
+  return e("span", t._b({ staticClass: "material-design-icon undo-variant-icon", attrs: { "aria-hidden": !t.title, "aria-label": t.title, role: "img" }, on: { click: function(o) {
+    return t.$emit("click", o);
   } } }, "span", t.$attrs, !1), [e("svg", { staticClass: "material-design-icon__svg", attrs: { fill: t.fillColor, width: t.size, height: t.size, viewBox: "0 0 24 24" } }, [e("path", { attrs: { 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" } }, [t.title ? e("title", [t._v(t._s(t.title))]) : t._e()])])]);
-}, p = [], d = /* @__PURE__ */ i(
+}, p = [], d = /* @__PURE__ */ s(
   c,
   u,
   p,
@@ -35,12 +35,12 @@ var u = function() {
   null,
   null
 );
-const f = d.exports, _ = new Set(Object.keys(r.props)), m = {
+const f = d.exports, _ = new Set(Object.keys(i.props)), m = {
   name: "NcTextField",
   components: {
-    NcInputField: r,
+    NcInputField: i,
     Close: l,
-    ArrowRight: o,
+    ArrowRight: a,
     Undo: f
   },
   // Allow forwarding all attributes
@@ -53,14 +53,15 @@ const f = d.exports, _ = new Set(Object.keys(r.props)), m = {
     // eslint-disable-next-line
     " ": {},
     // Reuse all the props from NcInputField for better typing and documentation
-    ...r.props,
-    // Redefined props
+    ...i.props,
     /**
-     * Label of the trailing button
+     * The `aria-label` to set on the trailing button
+     * If no explicit value is set it will default to the one matching the `trailingButtonIcon`:
+     * @default 'Clear text'|'Save changes'|'Undo changes'
      */
     trailingButtonLabel: {
       type: String,
-      default: a("Clear text")
+      default: ""
     },
     // Custom props
     /**
@@ -83,13 +84,20 @@ const f = d.exports, _ = new Set(Object.keys(r.props)), m = {
   ],
   computed: {
     propsAndAttrsToForward() {
+      const n = {
+        undo: r("Undo changes"),
+        close: r("Clear text"),
+        arrowRight: r("Save changes")
+      };
       return {
         // Proxy all the HTML attributes
         ...this.$attrs,
         // Proxy original NcInputField's props
         ...Object.fromEntries(
-          Object.entries(this.$props).filter(([n]) => _.has(n))
-        )
+          Object.entries(this.$props).filter(([t]) => _.has(t))
+        ),
+        // Adjust aria-label for predefined trailing buttons
+        trailingButtonLabel: this.trailingButtonLabel || n[this.trailingButtonIcon]
       };
     }
   },
@@ -120,7 +128,7 @@ var g = function() {
   return e("NcInputField", t._g(t._b({ ref: "inputField", on: { input: t.handleInput }, scopedSlots: t._u([t.type !== "search" ? { key: "trailing-button-icon", fn: function() {
     return [t.trailingButtonIcon === "close" ? e("Close", { attrs: { size: 20 } }) : t.trailingButtonIcon === "arrowRight" ? e("ArrowRight", { attrs: { size: 20 } }) : t.trailingButtonIcon === "undo" ? e("Undo", { attrs: { size: 20 } }) : t._e()];
   }, proxy: !0 } : null], null, !0) }, "NcInputField", t.propsAndAttrsToForward, !1), t.$listeners), [t._t("default")], 2);
-}, h = [], v = /* @__PURE__ */ i(
+}, h = [], v = /* @__PURE__ */ s(
   m,
   g,
   h,
@@ -130,7 +138,7 @@ var g = function() {
   null,
   null
 );
-const b = v.exports;
+const w = v.exports;
 export {
-  b as default
+  w as default
 };

package/dist/Components/NcTextField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcTextField.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\"\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  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @author Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\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<!-- Default slot for the leading icon -->\n\t\t<slot />\n\n\t\t<!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->\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// Redefined props\n\n\t\t/**\n\t\t * Label of the trailing button\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Clear text'),\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\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}\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","NcInputFieldProps","NcInputField","Close","ArrowRight","Undo","t","value","key","event"],"mappings":";;;;;AAoBA,MAAAA,IAAA;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;;;;;;;;;;;;;;;;qBC0HAC,IAAA,IAAA,IAAA,OAAA,KAAAC,EAAA,KAAA,CAAA,GAEAF,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAE;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC;AAAA,EACA;AAAA;AAAA,EAGA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA,CAAA;AAAA;AAAA,IAGA,GAAAH,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAI,EAAA,YAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,yBAAA;AACA,aAAA;AAAA;AAAA,QAEA,GAAA,KAAA;AAAA;AAAA,QAEA,GAAA,OAAA;AAAA,UACA,OAAA,QAAA,KAAA,MAAA,EAAA,OAAA,CAAA,CAAAC,CAAA,MAAAP,EAAA,IAAAO,CAAA,CAAA;AAAA,QACA;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,YAAAC,GAAA;AACA,WAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"NcTextField.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\"\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  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @author Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\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<!-- Default slot for the leading icon -->\n\t\t<slot />\n\n\t\t<!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->\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","NcInputFieldProps","NcInputField","Close","ArrowRight","Undo","value","predefinedLabels","t","key","event"],"mappings":";;;;;AAoBA,MAAAA,IAAA;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;;;;;;;;;;;;;;;;qBC0HAC,IAAA,IAAA,IAAA,OAAA,KAAAC,EAAA,KAAA,CAAA,GAEAF,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAE;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC;AAAA,EACA;AAAA;AAAA,EAGA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA,CAAA;AAAA;AAAA,IAGA,GAAAH,EAAA;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,CAAAI,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,yBAAA;AACA,YAAAC,IAAA;AAAA,QACA,MAAAC,EAAA,cAAA;AAAA,QACA,OAAAA,EAAA,YAAA;AAAA,QACA,YAAAA,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,CAAAC,CAAA,MAAAR,EAAA,IAAAQ,CAAA,CAAA;AAAA,QACA;AAAA;AAAA,QAEA,qBAAA,KAAA,uBAAAF,EAAA,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,YAAAG,GAAA;AACA,WAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/Components/NcTimezonePicker.cjs

@@ -1,5 +1,5 @@
 "use strict";
-const N = require("../chunks/l10n-f491109d.cjs"), t = require("../chunks/logger-4998b668.cjs"), e = require("@nextcloud/calendar-js"), Z = require("../chunks/GenRandomId-c214d235.cjs"), Y = require("./NcSelect.cjs"), M = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const N = require("../chunks/l10n-c3dbf018.cjs"), t = require("../chunks/logger-4998b668.cjs"), e = require("@nextcloud/calendar-js"), Z = require("../chunks/GenRandomId-c214d235.cjs"), Y = require("./NcSelect.cjs"), M = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
 /**
  * @copyright Copyright (c) 2019 Georg Ehrke
  *

package/dist/Components/NcTimezonePicker.mjs

@@ -1,4 +1,4 @@
-import { t as N } from "../chunks/l10n-f692947e.mjs";
+import { t as N } from "../chunks/l10n-f51d3415.mjs";
 import { l as t } from "../chunks/logger-3612e664.mjs";
 import { getTimezoneManager as e } from "@nextcloud/calendar-js";
 import { G as Z } from "../chunks/GenRandomId-cb9ccebe.mjs";

package/dist/Components/NcUserBubble.cjs

@@ -1,5 +1,5 @@
 var y = require("../assets/index-c221fe05.css");
-const s = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), a = require("../chunks/index-e06b96d3.cjs"), n = require("./NcPopover.cjs"), i = require("vue"), o = (t) => t && t.__esModule ? t : { default: t }, u = /* @__PURE__ */ o(i), l = {
+const s = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), a = require("../chunks/index-ac31691c.cjs"), n = require("./NcPopover.cjs"), i = require("vue"), o = (t) => t && t.__esModule ? t : { default: t }, u = /* @__PURE__ */ o(i), l = {
   name: "NcUserBubbleDiv"
 };
 var c = function() {

package/dist/Components/NcUserBubble.mjs

@@ -1,6 +1,6 @@
 import "../assets/index-c221fe05.css";
 import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-import { N as a } from "../chunks/index-fbf943b3.mjs";
+import { N as a } from "../chunks/index-831524a1.mjs";
 import n from "./NcPopover.mjs";
 import i from "vue";
 const o = {

package/dist/Composables/useIsFullscreen.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const e = require("vue");
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ * @author Grigorii K. Shartsev <me@shgk.me>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+const n = () => window.outerHeight === screen.height, s = e.ref(n());
+window.addEventListener("resize", () => {
+  s.value = n();
+});
+function r() {
+  return e.readonly(s);
+}
+const t = e.readonly(s);
+exports.isFullscreenState = t;
+exports.useIsFullscreen = r;

package/dist/Composables/useIsFullscreen.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsFullscreen.cjs","sources":["../../src/composables/useIsFullscreen/index.js"],"sourcesContent":["/**\n * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @author John Molakvoæ <skjnldsv@protonmail.com>\n * @author Grigorii K. Shartsev <me@shgk.me>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\nimport { readonly, ref } from 'vue'\n\n// if the window height is equal to the screen height,\n// we're in full screen mode\nconst checkIfIsFullscreen = () => window.outerHeight === screen.height\n\nconst isFullscreen = ref(checkIfIsFullscreen())\n\nwindow.addEventListener('resize', () => {\n\tisFullscreen.value = checkIfIsFullscreen()\n})\n\n/**\n * Use global isFullscreen state, based on the screen height check\n *\n * @return {import('vue').DeepReadonly<import('vue').Ref<boolean>>}\n */\nexport function useIsFullscreen() {\n\treturn readonly(isFullscreen)\n}\n\n/**\n * @deprecated Is to be removed in v9.0.0 with Vue 3 migration.\n *             Use `composables/useIsFullscreen` instead.\n *             Defined and exported only for isFullscreen mixin.\n */\nexport const isFullscreenState = readonly(isFullscreen)\n"],"names":["checkIfIsFullscreen","isFullscreen","ref","useIsFullscreen","readonly","isFullscreenState"],"mappings":";;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BA,MAAMA,IAAsB,MAAM,OAAO,gBAAgB,OAAO,QAE1DC,IAAeC,EAAAA,IAAIF,GAAqB;AAE9C,OAAO,iBAAiB,UAAU,MAAM;AACvC,EAAAC,EAAa,QAAQD,EAAqB;AAC3C,CAAC;AAOM,SAASG,IAAkB;AACjC,SAAOC,EAAAA,SAASH,CAAY;AAC7B;AAOY,MAACI,IAAoBD,EAAQ,SAACH,CAAY;;;"}

package/dist/Composables/useIsFullscreen.mjs

@@ -0,0 +1,35 @@
+import { ref as s, readonly as n } from "vue";
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ * @author Grigorii K. Shartsev <me@shgk.me>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+const r = () => window.outerHeight === screen.height, e = s(r());
+window.addEventListener("resize", () => {
+  e.value = r();
+});
+function c() {
+  return n(e);
+}
+const o = n(e);
+export {
+  o as isFullscreenState,
+  c as useIsFullscreen
+};

package/dist/Composables/useIsFullscreen.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsFullscreen.mjs","sources":["../../src/composables/useIsFullscreen/index.js"],"sourcesContent":["/**\n * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @author John Molakvoæ <skjnldsv@protonmail.com>\n * @author Grigorii K. Shartsev <me@shgk.me>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\nimport { readonly, ref } from 'vue'\n\n// if the window height is equal to the screen height,\n// we're in full screen mode\nconst checkIfIsFullscreen = () => window.outerHeight === screen.height\n\nconst isFullscreen = ref(checkIfIsFullscreen())\n\nwindow.addEventListener('resize', () => {\n\tisFullscreen.value = checkIfIsFullscreen()\n})\n\n/**\n * Use global isFullscreen state, based on the screen height check\n *\n * @return {import('vue').DeepReadonly<import('vue').Ref<boolean>>}\n */\nexport function useIsFullscreen() {\n\treturn readonly(isFullscreen)\n}\n\n/**\n * @deprecated Is to be removed in v9.0.0 with Vue 3 migration.\n *             Use `composables/useIsFullscreen` instead.\n *             Defined and exported only for isFullscreen mixin.\n */\nexport const isFullscreenState = readonly(isFullscreen)\n"],"names":["checkIfIsFullscreen","isFullscreen","ref","useIsFullscreen","readonly","isFullscreenState"],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BA,MAAMA,IAAsB,MAAM,OAAO,gBAAgB,OAAO,QAE1DC,IAAeC,EAAIF,GAAqB;AAE9C,OAAO,iBAAiB,UAAU,MAAM;AACvC,EAAAC,EAAa,QAAQD,EAAqB;AAC3C,CAAC;AAOM,SAASG,IAAkB;AACjC,SAAOC,EAASH,CAAY;AAC7B;AAOY,MAACI,IAAoBD,EAASH,CAAY;"}

package/dist/Composables/useIsMobile.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const e = require("vue");
+/**
+ * @copyright Copyright (c) 2023 Grigorii K. Shartsev <me@shgk.me>
+ *
+ * @author Grigorii K. Shartsev <me@shgk.me>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+const o = 1024, i = () => document.documentElement.clientWidth < o, t = e.ref(i());
+window.addEventListener("resize", () => {
+  t.value = i();
+});
+function n() {
+  return e.readonly(t);
+}
+const s = e.readonly(t);
+exports.MOBILE_BREAKPOINT = o;
+exports.isMobileState = s;
+exports.useIsMobile = n;

package/dist/Composables/useIsMobile.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsMobile.cjs","sources":["../../src/composables/useIsMobile/index.js"],"sourcesContent":["/**\n * @copyright Copyright (c) 2023 Grigorii K. Shartsev <me@shgk.me>\n *\n * @author Grigorii K. Shartsev <me@shgk.me>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\nimport { readonly, ref } from 'vue'\n\n/**\n * The minimal width of the viewport to be considered a desktop device\n */\nexport const MOBILE_BREAKPOINT = 1024\n\nconst checkIfIsMobile = () => document.documentElement.clientWidth < MOBILE_BREAKPOINT\n\nconst isMobile = ref(checkIfIsMobile())\n\nwindow.addEventListener('resize', () => {\n\tisMobile.value = checkIfIsMobile()\n})\n\n/**\n * Use global isMobile state, based on the viewport width\n *\n * @return {import('vue').DeepReadonly<import('vue').Ref<boolean>>}\n */\nexport function useIsMobile() {\n\treturn readonly(isMobile)\n}\n\n/**\n * @deprecated Is to be removed in v9.0.0 with Vue 3 migration.\n *             Use `composables/useIsMobile` instead.\n *             Defined and exported only for isMobile mixin.\n */\nexport const isMobileState = readonly(isMobile)\n"],"names":["MOBILE_BREAKPOINT","checkIfIsMobile","isMobile","ref","useIsMobile","readonly","isMobileState"],"mappings":";;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BY,MAACA,IAAoB,MAE3BC,IAAkB,MAAM,SAAS,gBAAgB,cAAcD,GAE/DE,IAAWC,EAAAA,IAAIF,GAAiB;AAEtC,OAAO,iBAAiB,UAAU,MAAM;AACvC,EAAAC,EAAS,QAAQD,EAAiB;AACnC,CAAC;AAOM,SAASG,IAAc;AAC7B,SAAOC,EAAAA,SAASH,CAAQ;AACzB;AAOY,MAACI,IAAgBD,EAAQ,SAACH,CAAQ;;;;"}

package/dist/Composables/useIsMobile.mjs

@@ -0,0 +1,35 @@
+import { ref as n, readonly as t } from "vue";
+/**
+ * @copyright Copyright (c) 2023 Grigorii K. Shartsev <me@shgk.me>
+ *
+ * @author Grigorii K. Shartsev <me@shgk.me>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+const i = 1024, o = () => document.documentElement.clientWidth < i, e = n(o());
+window.addEventListener("resize", () => {
+  e.value = o();
+});
+function c() {
+  return t(e);
+}
+const r = t(e);
+export {
+  i as MOBILE_BREAKPOINT,
+  r as isMobileState,
+  c as useIsMobile
+};

package/dist/Composables/useIsMobile.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsMobile.mjs","sources":["../../src/composables/useIsMobile/index.js"],"sourcesContent":["/**\n * @copyright Copyright (c) 2023 Grigorii K. Shartsev <me@shgk.me>\n *\n * @author Grigorii K. Shartsev <me@shgk.me>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\nimport { readonly, ref } from 'vue'\n\n/**\n * The minimal width of the viewport to be considered a desktop device\n */\nexport const MOBILE_BREAKPOINT = 1024\n\nconst checkIfIsMobile = () => document.documentElement.clientWidth < MOBILE_BREAKPOINT\n\nconst isMobile = ref(checkIfIsMobile())\n\nwindow.addEventListener('resize', () => {\n\tisMobile.value = checkIfIsMobile()\n})\n\n/**\n * Use global isMobile state, based on the viewport width\n *\n * @return {import('vue').DeepReadonly<import('vue').Ref<boolean>>}\n */\nexport function useIsMobile() {\n\treturn readonly(isMobile)\n}\n\n/**\n * @deprecated Is to be removed in v9.0.0 with Vue 3 migration.\n *             Use `composables/useIsMobile` instead.\n *             Defined and exported only for isMobile mixin.\n */\nexport const isMobileState = readonly(isMobile)\n"],"names":["MOBILE_BREAKPOINT","checkIfIsMobile","isMobile","ref","useIsMobile","readonly","isMobileState"],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BY,MAACA,IAAoB,MAE3BC,IAAkB,MAAM,SAAS,gBAAgB,cAAcD,GAE/DE,IAAWC,EAAIF,GAAiB;AAEtC,OAAO,iBAAiB,UAAU,MAAM;AACvC,EAAAC,EAAS,QAAQD,EAAiB;AACnC,CAAC;AAOM,SAASG,IAAc;AAC7B,SAAOC,EAASH,CAAQ;AACzB;AAOY,MAACI,IAAgBD,EAASH,CAAQ;"}

package/dist/Mixins/isFullscreen.cjs

@@ -1,4 +1,5 @@
 "use strict";
+const e = require("../Composables/useIsFullscreen.cjs");
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *
@@ -20,25 +21,15 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-const e = {
-  data() {
-    return {
-      isFullscreen: this._isFullscreen()
-    };
-  },
-  beforeMount() {
-    window.addEventListener("resize", this._onResize);
-  },
-  beforeDestroy() {
-    window.removeEventListener("resize", this._onResize);
-  },
-  methods: {
-    _onResize() {
-      this.isFullscreen = this._isFullscreen();
-    },
-    _isFullscreen() {
-      return window.outerHeight === screen.height;
+const s = {
+  computed: {
+    /**
+     * @deprecated Is to be removed in v9.0.0 with Vue 3 migration.
+     *             Use `composables/useIsFullscreen` instead.
+     */
+    isFullscreen() {
+      return e.isFullscreenState.value;
     }
   }
 };
-module.exports = e;
+module.exports = s;

package/dist/Mixins/isFullscreen.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"isFullscreen.cjs","sources":["../../src/mixins/isFullscreen/index.js"],"sourcesContent":["/**\n * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @author John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tisFullscreen: this._isFullscreen(),\n\t\t}\n\t},\n\tbeforeMount() {\n\t\twindow.addEventListener('resize', this._onResize)\n\t},\n\tbeforeDestroy() {\n\t\twindow.removeEventListener('resize', this._onResize)\n\t},\n\tmethods: {\n\t\t_onResize() {\n\t\t\t// Update fullscreen mode\n\t\t\tthis.isFullscreen = this._isFullscreen()\n\t\t},\n\t\t_isFullscreen() {\n\t\t\t// if the window height is equal to the screen height,\n\t\t\t// we're in full screen mode\n\t\t\treturn window.outerHeight === screen.height\n\t\t},\n\t},\n}\n"],"names":["index"],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA,MAAeA,IAAA;AAAA,EACd,OAAO;AACN,WAAO;AAAA,MACN,cAAc,KAAK,cAAe;AAAA,IAClC;AAAA,EACD;AAAA,EACD,cAAc;AACb,WAAO,iBAAiB,UAAU,KAAK,SAAS;AAAA,EAChD;AAAA,EACD,gBAAgB;AACf,WAAO,oBAAoB,UAAU,KAAK,SAAS;AAAA,EACnD;AAAA,EACD,SAAS;AAAA,IACR,YAAY;AAEX,WAAK,eAAe,KAAK,cAAe;AAAA,IACxC;AAAA,IACD,gBAAgB;AAGf,aAAO,OAAO,gBAAgB,OAAO;AAAA,IACrC;AAAA,EACD;AACF;;"}
+{"version":3,"file":"isFullscreen.cjs","sources":["../../src/mixins/isFullscreen/index.js"],"sourcesContent":["/**\n * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @author John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\nimport { isFullscreenState } from '../../composables/useIsFullscreen/index.js'\n\nexport default {\n\tcomputed: {\n\t\t/**\n\t\t * @deprecated Is to be removed in v9.0.0 with Vue 3 migration.\n\t\t *             Use `composables/useIsFullscreen` instead.\n\t\t */\n\t\tisFullscreen() {\n\t\t\treturn isFullscreenState.value\n\t\t},\n\t},\n}\n"],"names":["index","isFullscreenState"],"mappings":";;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA,MAAeA,IAAA;AAAA,EACd,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT,eAAe;AACd,aAAOC,EAAiB,kBAAC;AAAA,IACzB;AAAA,EACD;AACF;;"}

package/dist/Mixins/isFullscreen.mjs

@@ -1,3 +1,4 @@
+import { isFullscreenState as e } from "../Composables/useIsFullscreen.mjs";
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *
@@ -19,27 +20,17 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-const e = {
-  data() {
-    return {
-      isFullscreen: this._isFullscreen()
-    };
-  },
-  beforeMount() {
-    window.addEventListener("resize", this._onResize);
-  },
-  beforeDestroy() {
-    window.removeEventListener("resize", this._onResize);
-  },
-  methods: {
-    _onResize() {
-      this.isFullscreen = this._isFullscreen();
-    },
-    _isFullscreen() {
-      return window.outerHeight === screen.height;
+const r = {
+  computed: {
+    /**
+     * @deprecated Is to be removed in v9.0.0 with Vue 3 migration.
+     *             Use `composables/useIsFullscreen` instead.
+     */
+    isFullscreen() {
+      return e.value;
     }
   }
 };
 export {
-  e as default
+  r as default
 };

package/dist/Mixins/isFullscreen.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"isFullscreen.mjs","sources":["../../src/mixins/isFullscreen/index.js"],"sourcesContent":["/**\n * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @author John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tisFullscreen: this._isFullscreen(),\n\t\t}\n\t},\n\tbeforeMount() {\n\t\twindow.addEventListener('resize', this._onResize)\n\t},\n\tbeforeDestroy() {\n\t\twindow.removeEventListener('resize', this._onResize)\n\t},\n\tmethods: {\n\t\t_onResize() {\n\t\t\t// Update fullscreen mode\n\t\t\tthis.isFullscreen = this._isFullscreen()\n\t\t},\n\t\t_isFullscreen() {\n\t\t\t// if the window height is equal to the screen height,\n\t\t\t// we're in full screen mode\n\t\t\treturn window.outerHeight === screen.height\n\t\t},\n\t},\n}\n"],"names":["index"],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA,MAAeA,IAAA;AAAA,EACd,OAAO;AACN,WAAO;AAAA,MACN,cAAc,KAAK,cAAe;AAAA,IAClC;AAAA,EACD;AAAA,EACD,cAAc;AACb,WAAO,iBAAiB,UAAU,KAAK,SAAS;AAAA,EAChD;AAAA,EACD,gBAAgB;AACf,WAAO,oBAAoB,UAAU,KAAK,SAAS;AAAA,EACnD;AAAA,EACD,SAAS;AAAA,IACR,YAAY;AAEX,WAAK,eAAe,KAAK,cAAe;AAAA,IACxC;AAAA,IACD,gBAAgB;AAGf,aAAO,OAAO,gBAAgB,OAAO;AAAA,IACrC;AAAA,EACD;AACF;"}
+{"version":3,"file":"isFullscreen.mjs","sources":["../../src/mixins/isFullscreen/index.js"],"sourcesContent":["/**\n * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @author John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\nimport { isFullscreenState } from '../../composables/useIsFullscreen/index.js'\n\nexport default {\n\tcomputed: {\n\t\t/**\n\t\t * @deprecated Is to be removed in v9.0.0 with Vue 3 migration.\n\t\t *             Use `composables/useIsFullscreen` instead.\n\t\t */\n\t\tisFullscreen() {\n\t\t\treturn isFullscreenState.value\n\t\t},\n\t},\n}\n"],"names":["index","isFullscreenState"],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBA,MAAeA,IAAA;AAAA,EACd,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT,eAAe;AACd,aAAOC,EAAkB;AAAA,IACzB;AAAA,EACD;AACF;"}

package/dist/Mixins/isMobile.cjs

@@ -1,50 +1,5 @@
 "use strict";
-const t = require("vue"), s = (e) => e && e.__esModule ? e : { default: e }, o = /* @__PURE__ */ s(t);
-/**
- * @copyright Copyright (c) 2019 Kristof Hamann, Paul Schwörer
- *
- * @author Kristof Hamann
- * @author Paul Schwörer
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-const i = /* @__PURE__ */ new o.default({
-  data() {
-    return {
-      isMobile: !1
-    };
-  },
-  watch: {
-    isMobile(e) {
-      this.$emit("changed", e);
-    }
-  },
-  created() {
-    window.addEventListener("resize", this.handleWindowResize), this.handleWindowResize();
-  },
-  beforeDestroy() {
-    window.removeEventListener("resize", this.handleWindowResize);
-  },
-  methods: {
-    handleWindowResize() {
-      this.isMobile = document.documentElement.clientWidth < 1024;
-    }
-  }
-});
+const e = require("../Composables/useIsMobile.cjs");
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *
@@ -66,22 +21,15 @@ const i = /* @__PURE__ */ new o.default({
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-const n = {
-  data() {
-    return {
-      isMobile: !1
-    };
-  },
-  mounted() {
-    i.$on("changed", this.onIsMobileChanged), this.isMobile = i.isMobile;
-  },
-  beforeDestroy() {
-    i.$off("changed", this.onIsMobileChanged);
-  },
-  methods: {
-    onIsMobileChanged(e) {
-      this.isMobile = e;
+const s = {
+  computed: {
+    /**
+     * @deprecated Is to be removed in v9.0.0 with Vue 3 migration.
+     *             Use `composables/useIsMobile` instead.
+     */
+    isMobile() {
+      return e.isMobileState.value;
     }
   }
 };
-module.exports = n;
+module.exports = s;