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

Nextcloud vue components

{"version":3,"file":"NcActionRadio-ByCpOD0q.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<span class=\"action-radio\" role=\"menuitemradio\" :aria-checked=\"ariaChecked\">\n\t\t\t<input\n\t\t\t\t:id=\"id\"\n\t\t\t\tref=\"radio\"\n\t\t\t\tv-model=\"model\"\n\t\t\t\tclass=\"radio action-radio__radio\"\n\t\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:name=\"name\"\n\t\t\t\t:value=\"value\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\t@keydown.enter.exact.prevent=\"toggleInput\"\n\t\t\t\t@change=\"onChange\">\n\t\t\t<label ref=\"label\" :for=\"id\" class=\"action-radio__label\">{{ text }}</label>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport { useModel } from '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\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}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\t/**\n\t\t * aria-checked attribute for role=\"menuitemcheckbox\"\n\t\t *\n\t\t * @return {'true'|'false'|undefined} aria-checked value if needed\n\t\t */\n\t\tariaChecked() {\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\treturn this.modelValue === this.value ? 'true' : 'false'\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\t},\n\n\tmethods: {\n\t\ttoggleInput(/* event */) {\n\t\t\t// by clicking we also trigger the change event\n\t\t\tthis.$refs.label.click()\n\t\t},\n\n\t\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted when the radio state is changed\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\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\n.action-radio {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\tline-height: var(--default-clickable-area);\n\n\t/* checkbox/radio fixes */\n\t&__radio {\n\t\tposition: absolute;\n\t\tinset-inline-start: 0 !important;\n\t\tz-index: -1;\n\t\topacity: 0;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center; // align radio to text\n\n\t\twidth: 100%;\n\t\tpadding: 0 !important;\n\t\tpadding-inline-end: $icon-margin !important;\n\n\t\t// (34 -14) / 2 = 10 same as ncactioncheckbox\n\t\t&::before {\n\t\t\tmargin: calc((var(--default-clickable-area) - 14px) / 2) !important;\n\t\t}\n\t}\n\n\t&--disabled {\n\t\t&,\n\t\t.action-radio__label {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode"],"mappings":";;;;;AA0EA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,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,IACpC;AAAA,EACD;AAAA,EAEA,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMT,cAAc;AACb,aAAO,CAAC,KAAK;AAAA,IACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAc;AACb,UAAI,KAAK,kBAAkB;AAC1B,eAAO,KAAK,eAAe,KAAK,QAAQ,SAAS;AAAA,MAClD;AACA,aAAO;AAAA,IACR;AAAA;EAGD,SAAS;AAAA,IACR,cAAyB;AAExB,WAAK,MAAM,MAAM,MAAK;AAAA,IACvB;AAAA,IAEA,SAAS,OAAO;AAMf,WAAK,MAAM,UAAU,KAAK;AAAA,IAC3B;AAAA;AAEF;;;;;;sBAtICA,mBAmBK,MAAA;AAAA,IAnBD,OAAKC,eAAA,CAAC,UAAQ,EAAA,oBAA+B,OAAA,SAAQ,CAAA,CAAA;AAAA,IAAK,MAAM,SAAA,oBAAgB;AAAA;IACnFC,mBAiBO,QAAA;AAAA,MAjBD,OAAM;AAAA,MAAe,MAAK;AAAA,MAAiB,gBAAc,SAAA;AAAA;qBAC9DA,mBAWoB,SAAA;AAAA,QAVlB,IAAI,OAAA;AAAA,QACL,KAAI;AAAA,qEACK,OAAA,QAAK;AAAA,QACd,OAAKD,eAAA,CAAC,6BAA2B,EAAA,WACZ,SAAA,YAAW,CAAA,CAAA;AAAA,QAC/B,UAAU,OAAA;AAAA,QACV,MAAM,OAAA;AAAA,QACN,OAAO,OAAA;AAAA,QACR,MAAK;AAAA,QACJ,yEAA6B,SAAA,eAAA,SAAA,YAAA,GAAA,IAAA,GAAW,CAAA,SAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA,QACxC,iDAAQ,SAAA,YAAA,SAAA,SAAA,GAAA,IAAA;AAAA;sBARA,OAAA,KAAK;AAAA;MASfC,mBAA2E,SAAA;AAAA,QAApE,KAAI;AAAA,QAAS,KAAK,OAAA;AAAA,QAAI,OAAM;AAAA,yBAAyB,KAAA,IAAI,GAAA,GAAA,UAAA;AAAA;;;;;"}