@nextcloud/vue/dist/chunks/NcActionCheckbox.mjs.map

Nextcloud vue components

{"version":3,"file":"NcActionCheckbox.mjs","sources":["../../src/components/NcActionCheckbox/NcActionCheckbox.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<NcActions>\n\t\t<NcActionCheckbox @change=\"console.log('(un)checked !')\">First choice</NcActionCheckbox>\n\t\t<NcActionCheckbox value=\"second\" @change=\"console.log('(un)checked !')\">Second choice</NcActionCheckbox>\n\t\t<NcActionCheckbox :model-value=\"true\" @change=\"console.log('(un)checked !')\">Third choice (checked)</NcActionCheckbox>\n\t\t<NcActionCheckbox :disabled=\"true\" @change=\"console.log('(un)checked !')\">Second choice (disabled)</NcActionCheckbox>\n\t</NcActions>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<label class=\"action-checkbox\" :role=\"isInSemanticMenu && 'menuitemcheckbox'\" :aria-checked=\"isInSemanticMenu && model.toString()\">\n\t\t\t<span class=\"action-checkbox__icon\">\n\t\t\t\t<input\n\t\t\t\t\t:id\n\t\t\t\t\tv-model=\"model\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tclass=\"action-checkbox__input\"\n\t\t\t\t\t:class=\"{ focusable: !disabled }\"\n\t\t\t\t\t:value\n\t\t\t\t\t:disabled\n\t\t\t\t\t@change=\"onChange\">\n\t\t\t\t<NcIconSvgWrapper :path=\"model ? mdiCheckboxMarked : mdiCheckboxBlankOutline\" :size=\"20\" />\n\t\t\t</span>\n\t\t\t<span class=\"action-checkbox__text\">{{ text }}</span>\n\t\t</label>\n\t</li>\n</template>\n\n<script>\nimport { mdiCheckboxBlankOutline, mdiCheckboxMarked } from '@mdi/js'\nimport { useModel } from 'vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\nexport default {\n\tname: 'NcActionCheckbox',\n\n\tcomponents: {\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [ActionGlobalMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + createElementId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * checked state of the the checkbox element\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * value of the checkbox input\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the checkbox element\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t/** Native change event */\n\t\t'change',\n\t\t/** Checkbox is checked */\n\t\t'check',\n\t\t/** Checkbox is unchecked */\n\t\t'uncheck',\n\t\t/** Model value changed */\n\t\t'update:modelValue',\n\t],\n\n\tsetup(props) {\n\t\tconst model = useModel(props, 'modelValue')\n\t\treturn {\n\t\t\tmodel,\n\t\t\tmdiCheckboxBlankOutline,\n\t\t\tmdiCheckboxMarked,\n\t\t}\n\t},\n\n\tmethods: {\n\t\tonChange(event) {\n\t\t\tthis.$emit('change', event)\n\t\t\tif (event.target.checked) {\n\t\t\t\tthis.$emit('check')\n\t\t\t} else {\n\t\t\t\tthis.$emit('uncheck')\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/action.scss' as *;\n@include action-active;\n@include action--disabled;\n@include action-item('checkbox');\n\n.action:has(:focus-visible) {\n\toutline: 2px solid currentColor;\n}\n\n.action-checkbox {\n\t&__icon {\n\t\tcolor: var(--color-primary-element);\n\t}\n\n\t&__input {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tmargin: auto;\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\topacity: 0 !important;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_createVNode","_toDisplayString"],"mappings":";;;;;;;AA8CA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA;EAGD,QAAQ,CAAC,iBAAiB;AAAA,EAE1B,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,IAAI;AAAA,MACH,MAAM;AAAA,MACN,SAAS,MAAM,YAAY,gBAAe;AAAA,MAC1C,WAAW,CAAC,OAAO,GAAG,KAAI,MAAO;AAAA;;;;IAMlC,YAAY;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,OAAO;AAAA,MACN,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;;;;IAMV,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA,IAEN;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;EAGD,MAAM,OAAO;AACZ,UAAM,QAAQ,SAAS,OAAO,YAAY;AAC1C,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAAA,EAEA,SAAS;AAAA,IACR,SAAS,OAAO;AACf,WAAK,MAAM,UAAU,KAAK;AAC1B,UAAI,MAAM,OAAO,SAAS;AACzB,aAAK,MAAM,OAAO;AAAA,MACnB,OAAO;AACN,aAAK,MAAM,SAAS;AAAA,MACrB;AAAA,IACD;AAAA;AAEF;;;AA1GS,MAAA,aAAA,EAAA,OAAM,wBAAuB;;AAY7B,MAAA,aAAA,EAAA,OAAM,wBAAuB;;;sBAdrCA,mBAgBK,MAAA;AAAA,IAhBD,OAAKC,eAAA,CAAC,UAAQ,EAAA,oBAA+B,OAAA,SAAQ,CAAA,CAAA;AAAA,IAAK,MAAM,SAAA,oBAAgB;AAAA;IACnFC,mBAcQ,SAAA;AAAA,MAdD,OAAM;AAAA,MAAmB,MAAM,SAAA,oBAAgB;AAAA,MAAyB,gBAAc,SAAA,oBAAoB,OAAA,MAAM,SAAQ;AAAA;MAC9HA,mBAWO,QAXP,YAWO;AAAA,uBAVNA,mBAQoB,SAAA;AAAA,UAPlB,IAAA,OAAA;AAAA,uEACQ,OAAA,QAAK;AAAA,UACd,MAAK;AAAA,UACL,OAAKD,eAAA,CAAC,0BAAwB,EAAA,WAAA,CACR,OAAA,SAAQ,CAAA,CAAA;AAAA,UAC7B,OAAA,OAAA;AAAA,UACA,UAAA,OAAA;AAAA,UACA,iDAAQ,SAAA,YAAA,SAAA,SAAA,GAAA,IAAA;AAAA;2BANA,OAAA,KAAK;AAAA;QAOfE,YAA2F,6BAAA;AAAA,UAAxE,MAAM,OAAA,QAAQ,OAAA,oBAAoB,OAAA;AAAA,UAA0B,MAAM;AAAA;;MAEtFD,mBAAqD,QAArD,YAAqDE,gBAAd,KAAA,IAAI,GAAA,CAAA;AAAA;;;;"}