@nextcloud/vue/dist/chunks/NcActionRadio-BA08CAtA.mjs.map

Nextcloud vue components

{"version":3,"file":"NcActionRadio-BA08CAtA.mjs","sources":["../../src/components/NcActionRadio/NcActionRadio.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.\nUsually, you will provide a name prop to bind the radio together.\nSo that only one of each name set can be selected at the same time.\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions>\n\t\t\t<NcActionRadio v-for=\"option in radioOptions\"\n\t\t\t\t:key=\"option.value\"\n\t\t\t\t:value=\"option.value\"\n\t\t\t\t:disabled=\"option.disabled\"\n\t\t\t\tname=\"uniqueId\"\n\t\t\t\tv-model=\"radioValue\">\n\t\t\t\t{{ option.label }}\n\t\t\t</NcActionRadio>\n\t\t</NcActions>\n\t\t<span>Selected value: {{ radioValue }}</span>\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tradioOptions: [\n\t\t\t\t\t{ value: 'first', label: 'First choise', disabled: false },\n\t\t\t\t\t{ value: 'second', label: 'Second choise', disabled: false },\n\t\t\t\t\t{ value: 'third', label: 'Third choise', disabled: false },\n\t\t\t\t\t{ value: 'fourth', label: 'Fourth choise (disabled)', disabled: true },\n\t\t\t\t],\n\t\t\t\tradioValue: 'first',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<label class=\"action-radio\" :role=\"isInSemanticMenu && 'menuitemradio'\" :aria-checked=\"isInSemanticMenu && checked.toString()\">\n\t\t\t<span class=\"action-radio__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=\"radio\"\n\t\t\t\t\tclass=\"action-radio__input\"\n\t\t\t\t\t:class=\"{ focusable: !disabled }\"\n\t\t\t\t\t:value\n\t\t\t\t\t:name\n\t\t\t\t\t:disabled\n\t\t\t\t\t@change=\"$emit('change', $event)\">\n\t\t\t\t<NcIconSvgWrapper :path=\"checked ? mdiRadioboxMarked : mdiRadioboxBlank\" :size=\"20\" />\n\t\t\t</span>\n\t\t\t<span class=\"action-radio__text\">{{ text }}</span>\n\t\t</label>\n\t</li>\n</template>\n\n<script>\nimport { mdiRadioboxBlank, mdiRadioboxMarked } 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: 'NcActionRadio',\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 radio element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => createElementId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * checked state of the radio element\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Define if this radio is part of a set.\n\t\t * Checking the radio will disable all the\n\t\t * others with the same name.\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 * value of the radio 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 radio 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'change',\n\t\t'update:modelValue',\n\t],\n\n\tsetup(props) {\n\t\treturn {\n\t\t\tmodel: useModel(props, 'modelValue'),\n\t\t\tmdiRadioboxBlank,\n\t\t\tmdiRadioboxMarked,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tchecked() {\n\t\t\treturn this.model === this.value\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('radio');\n\n.action:has(:focus-visible) {\n\toutline: 2px solid currentColor;\n}\n\n.action-radio {\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":";;;;;;;AA0EA,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,gBAAe;AAAA,MAC9B,WAAW,CAAC,OAAO,GAAG,KAAI,MAAO;AAAA;;;;IAMlC,YAAY;AAAA,MACX,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;;;;;;IAQV,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;;;;IAMX,OAAO;AAAA,MACN,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;;;;IAMV,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA,IACN;AAAA,IACA;AAAA;EAGD,MAAM,OAAO;AACZ,WAAO;AAAA,MACN,OAAO,SAAS,OAAO,YAAY;AAAA,MACnC;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAAA,EAEA,UAAU;AAAA,IACT,UAAU;AACT,aAAO,KAAK,UAAU,KAAK;AAAA,IAC5B;AAAA;AAEF;;;AAzGS,MAAA,aAAA,EAAA,OAAM,qBAAoB;;AAa1B,MAAA,aAAA,EAAA,OAAM,qBAAoB;;;sBAflCA,mBAiBK,MAAA;AAAA,IAjBD,OAAKC,eAAA,CAAC,UAAQ,EAAA,oBAA+B,OAAA,SAAQ,CAAA,CAAA;AAAA,IAAK,MAAM,SAAA,oBAAgB;AAAA;IACnFC,mBAeQ,SAAA;AAAA,MAfD,OAAM;AAAA,MAAgB,MAAM,SAAA,oBAAgB;AAAA,MAAsB,gBAAc,SAAA,oBAAoB,SAAA,QAAQ,SAAQ;AAAA;MAC1HA,mBAYO,QAZP,YAYO;AAAA,uBAXNA,mBASmC,SAAA;AAAA,UARjC,IAAA,OAAA;AAAA,uEACQ,OAAA,QAAK;AAAA,UACd,MAAK;AAAA,UACL,OAAKD,eAAA,CAAC,uBAAqB,EAAA,WAAA,CACL,OAAA,SAAQ,CAAA,CAAA;AAAA,UAC7B,OAAA,OAAA;AAAA,UACA,MAAA,OAAA;AAAA,UACA,UAAA,OAAA;AAAA,UACA,UAAM,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAA,MAAK,UAAW,MAAM;AAAA;wBAPtB,OAAA,KAAK;AAAA;QAQfE,YAAsF,6BAAA;AAAA,UAAnE,MAAM,SAAA,UAAU,OAAA,oBAAoB,OAAA;AAAA,UAAmB,MAAM;AAAA;;MAEjFD,mBAAkD,QAAlD,YAAkDE,gBAAd,KAAA,IAAI,GAAA,CAAA;AAAA;;;;"}