@nextcloud/vue 9.1.0 → 9.2.0

package/dist/chunks/NcRadioGroup-B_BNFM6V.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcRadioGroup-B_BNFM6V.mjs","sources":["../../src/components/NcRadioGroup/NcRadioGroup.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed, provide, ref, warn } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { INSIDE_RADIO_GROUP_KEY } from './useNcRadioGroup.ts'\n\nconst modelValue = defineModel<string>({ required: false, default: '' })\n\ndefineProps<{\n\t/**\n\t * Label of the radio group (accessible name).\n\t * It can be hidden visually if needed using `hidden-label` prop.\n\t */\n\tlabel: string\n\n\t/**\n\t * If set the label of the button group will not be shown visually but only for accessibility purposes.\n\t */\n\tlabelHidden?: boolean\n\n\t/**\n\t * Optional visual description of the radio group.\n\t */\n\tdescription?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Slot for the included radio buttons (`NcCheckboxRadioSwitch`).\n\t * The `type` prop of the `NcCheckboxRadioSwitch` will be automatically set (and forced) to `radio`.\n\t *\n\t * If you want the button variant, then you have to use `NcRadioGroupButton`.\n\t */\n\tdefault?: Slot\n}>()\n\nconst descriptionId = createElementId()\nconst buttonVariant = ref<boolean>()\n\nprovide(INSIDE_RADIO_GROUP_KEY, computed(() => ({\n\tregister,\n\tmodelValue: modelValue.value,\n\tonUpdate,\n})))\n\n/**\n * Register a child component\n *\n * @param isButton - Whether the registered child component is a button or normal radio\n */\nfunction register(isButton: boolean): void {\n\tif (buttonVariant.value !== undefined && buttonVariant.value !== isButton) {\n\t\twarn('[NcRadioGroup] Mixing NcCheckboxRadioSwitch and NcRadioGroupButton is not possible!')\n\t}\n\tbuttonVariant.value = isButton\n}\n\n/**\n * Handle updating the current model value\n *\n * @param value - The new value\n */\nfunction onUpdate(value: string) {\n\tmodelValue.value = value\n}\n</script>\n\n<template>\n\t<fieldset\n\t\t:aria-describedby=\"description ? descriptionId : undefined\"\n\t\t:class=\"[{\n\t\t\t[$style.radioGroup_buttonVariant]: buttonVariant,\n\t\t}, $style.radioGroup]\">\n\t\t<legend :class=\"[$style.radioGroup__label, { 'hidden-visually': labelHidden }]\">\n\t\t\t{{ label }}\n\t\t</legend>\n\t\t<p v-if=\"description\" :id=\"descriptionId\" :class=\"$style.radioGroup__description\">\n\t\t\t{{ description }}\n\t\t</p>\n\t\t<div :class=\"$style.radioGroup__wrapper\">\n\t\t\t<slot />\n\t\t</div>\n\t</fieldset>\n</template>\n\n<style module lang=\"scss\">\n.radioGroup {\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t&:not(.radioGroup_buttonVariant) :global(.checkbox-content) {\n\t\tmax-width: unset !important;\n\t}\n}\n\n.radioGroup__label {\n\tfont-size: 1.2em;\n\tfont-weight: bold;\n\tmargin-inline-start: var(--border-radius-element);\n}\n\n.radioGroup__description {\n\tcolor: var(--color-text-maxcontrast);\n\tmargin-block-end: var(--default-grid-baseline);\n\tmargin-inline-start: var(--border-radius-element);\n}\n\n.radioGroup__wrapper {\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t> * {\n\t\tflex: 1 0 1px;\n\t}\n}\n\n.radioGroup__label + .radioGroup__wrapper {\n\t// when there is no description we need to add some margin between wrapper and label\n\tmargin-block-start: var(--default-grid-baseline);\n}\n\n.radioGroup_buttonVariant .radioGroup__wrapper {\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n}\n</style>\n\n<docs>\n## Usage example\n\n### Grouping multiple radio buttons\n\nThe radio group allows to group radio buttons into semantical groups.\nThe `v-model` only needs to be bound to the group component, also the `type` will automatically be set to `radio`.\n\n```vue\n<template>\n\t<NcRadioGroup v-model=\"selectedSides\" class=\"radio-group\" label=\"Sides\" description=\"Please choose the sides for your menu.\">\n\t\t<NcCheckboxRadioSwitch value=\"fries\">\n\t\t\tFries\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"salad\">\n\t\t\tSalad\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch value=\"none\">\n\t\t\tNothing\n\t\t</NcCheckboxRadioSwitch>\n\t</NcRadioGroup>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectedSides: 'none',\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\n.radio-group {\n\tmax-width: 400px\n}\n</style>\n```\n\n### Radio buttons with button styling\n\nThe radio group also allows to create a button like styling together with the `NcRadioGroupButton` component:\n\n```vue\n<template>\n\t<div>\n\t\t<h4>With text labels</h4>\n\t\t<div style=\"max-width: 400px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment\" label-hidden>\n\t\t\t\t<NcRadioGroupButton label=\"Start\" value=\"start\" />\n\t\t\t\t<NcRadioGroupButton label=\"Center\" value=\"center\" />\n\t\t\t\t<NcRadioGroupButton label=\"End\" value=\"end\" />\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\n\t\t<br>\n\n\t\t<h4>With icons</h4>\n\t\t<div style=\"max-width: 250px\">\n\t\t\t<NcRadioGroup v-model=\"alignment\" label=\"Example alignment with icons\" label-hidden>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Start\" value=\"start\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalLeft\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"Center\" value=\"center\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiAlignHorizontalCenter\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t<NcRadioGroupButton aria-label=\"End\" value=\"end\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiAlignHorizontalRight\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcRadioGroupButton>\n\t\t\t</NcRadioGroup>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { mdiAlignHorizontalCenter, mdiAlignHorizontalLeft, mdiAlignHorizontalRight } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiAlignHorizontalCenter,\n\t\t\tmdiAlignHorizontalLeft,\n\t\t\tmdiAlignHorizontalRight,\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\talignment: 'center',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n"],"names":["_useModel","_createElementBlock","description","_unref","_normalizeClass","$style","_createElementVNode","labelHidden","label","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;AAYA,UAAM,aAAaA,SAAmB,SAAA,YAAiC;AA8BvE,UAAM,gBAAgB,gBAAA;AACtB,UAAM,gBAAgB,IAAA;AAEtB,YAAQ,wBAAwB,SAAS,OAAO;AAAA,MAC/C;AAAA,MACA,YAAY,WAAW;AAAA,MACvB;AAAA,IAAA,EACC,CAAC;AAOH,aAAS,SAAS,UAAyB;AAC1C,UAAI,cAAc,UAAU,UAAa,cAAc,UAAU,UAAU;AAC1E,aAAK,qFAAqF;AAAA,MAC3F;AACA,oBAAc,QAAQ;AAAA,IACvB;AAOA,aAAS,SAAS,OAAe;AAChC,iBAAW,QAAQ;AAAA,IACpB;;0BAICC,mBAcW,YAAA;AAAA,QAbT,oBAAkBC,KAAAA,cAAcC,MAAA,aAAA,IAAgB;AAAA,QAChD,OAAKC,eAAA,CAAA;AAAA,WAASC,KAAAA,OAAO,wBAAwB,GAAG,cAAA;AAAA,QAAA,GAAoBA,KAAAA,OAAO,UAAU,CAAA;AAAA,MAAA;QAGtFC,mBAES,UAAA;AAAA,UAFA,OAAKF,eAAA,CAAGC,KAAAA,OAAO,wCAAwCE,KAAAA,aAAW,CAAA;AAAA,QAAA,mBACvEC,KAAAA,KAAK,GAAA,CAAA;AAAA,QAEAN,KAAAA,4BAATD,mBAEI,KAAA;AAAA;UAFmB,IAAIE,MAAA,aAAA;AAAA,UAAgB,OAAKC,eAAEC,KAAAA,OAAO,uBAAuB;AAAA,QAAA,mBAC5EH,KAAAA,WAAW,GAAA,IAAA,UAAA;QAEfI,mBAEM,OAAA;AAAA,UAFA,OAAKF,eAAEC,KAAAA,OAAO,mBAAmB;AAAA,QAAA;UACtCI,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcRadioGroupButton-BNydXurR.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcRadioGroupButton-BNydXurR.mjs","sources":["../../src/components/NcRadioGroupButton/NcRadioGroupButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed, onMounted } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { useInsideRadioGroup } from '../NcRadioGroup/useNcRadioGroup.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Non visible label for accessibility when no `label` is passed.\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * The visual label of the radio button\n\t */\n\tlabel?: string\n\n\t/**\n\t * The value that should be assigned to the `modelValue` of the `NcRadioGroup`.\n\t */\n\tvalue: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Optional icon slot\n\t */\n\ticon?: Slot\n}>()\n\nconst labelId = createElementId()\nconst radioGroup = useInsideRadioGroup()\nonMounted(() => radioGroup!.value.register(true))\n\nconst isChecked = computed(() => radioGroup?.value.modelValue === props.value)\n\n/**\n * Handle updating the current model value\n */\nfunction onUpdate() {\n\tradioGroup!.value.onUpdate(props.value)\n}\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[{\n\t\t\t[$style.radioGroupButton_active]: isChecked,\n\t\t}, $style.radioGroupButton]\"\n\t\t@click=\"onUpdate\">\n\t\t<div v-if=\"$slots.icon\" :class=\"$style.radioGroupButton__icon\">\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\n\t\t<div v-if=\"label\" :id=\"labelId\" :class=\"$style.radioGroupButton__label\">\n\t\t\t{{ label }}\n\t\t</div>\n\n\t\t<input\n\t\t\t:aria-labelledby=\"label ? labelId : undefined\"\n\t\t\t:aria-label=\"label ? undefined : ariaLabel\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:checked=\"isChecked\"\n\t\t\ttype=\"radio\"\n\t\t\t:value\n\t\t\t@input=\"onUpdate\">\n\t</div>\n</template>\n\n<style module lang=\"scss\">\n.radioGroupButton {\n\t--radio-group-button--border-radius: var(--border-radius-small);\n\t--radio-group-button--border-width: 1px;\n\t--radio-group-button--color: var(--color-primary-element-light-text);\n\t--radio-group-button--background-color: var(--color-primary-element-light);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-light-hover);\n\t--radio-group-button--padding: 1px;\n\tcursor: pointer;\n\tcolor: var(--radio-group-button--color);\n\tbackground-color: var(--radio-group-button--background-color);\n\ttransition: var(--animation-quick) background-color;\n\tborder: var(--radio-group-button--border-width) solid var(--radio-group-button--background-color-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--radio-group-button--border-radius);\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: center;\n\ttext-align: center;\n\tmin-height: var(--default-clickable-area);\n\t// ensure that the content is centered because of uneven border\n\tpadding-block: var(--radio-group-button--padding) 0;\n\tpadding-inline: var(--radio-group-button--padding);\n\n\t* {\n\t\tcursor: pointer;\n\t}\n\n\t&:has(&__label) {\n\t\tpadding-inline: calc(var(--radio-group-button--padding) + var(--border-radius-element));\n\t}\n\n\t&:has(&__icon) {\n\t\tpadding-inline-start: var(--radio-group-button--padding);\n\t}\n\n\t&:hover {\n\t\tbackground-color: var(--radio-group-button--background-color-hover);\n\t}\n\n\t&:focus-within {\n\t\t--radio-group-button--border-width: 2px;\n\t\t--radio-group-button--padding: 0px;\n\t\tborder: var(--radio-group-button--border-width) solid var(--color-main-text) !important;\n\t\toutline: calc(var(--default-grid-baseline) / 2) var(--color-main-background);\n\t}\n\n\t&:first-of-type {\n\t\tborder-start-start-radius: var(--border-radius-element);\n\t\tborder-end-start-radius: var(--border-radius-element);\n\t}\n\n\t&:last-of-type {\n\t\tborder-start-end-radius: var(--border-radius-element);\n\t\tborder-end-end-radius: var(--border-radius-element);\n\t}\n}\n\n.radioGroupButton_active {\n\t--radio-group-button--color: var(--color-primary-element-text);\n\t--radio-group-button--background-color: var(--color-primary-element);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-hover);\n}\n\n.radioGroupButton__label {\n\tfont-weight: bold;\n}\n\n.radioGroupButton__icon {\n\t--radio-group-button--icon-size: calc(var(--default-clickable-area) - 4px);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n\twidth: var(--radio-group-button--icon-size);\n\n\t// make sure the icon is a bit smaller to account for border\n\t* {\n\t\t--default-clickable-area: var(--radio-group-button--icon-size);\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","$slots","_renderSlot","label","_unref","_createElementVNode","ariaLabel","value"],"mappings":";;;;;;;;;;;;;;AAYA,UAAM,QAAQ;AAwBd,UAAM,UAAU,gBAAA;AAChB,UAAM,aAAa,oBAAA;AACnB,cAAU,MAAM,WAAY,MAAM,SAAS,IAAI,CAAC;AAEhD,UAAM,YAAY,SAAS,MAAM,YAAY,MAAM,eAAe,MAAM,KAAK;AAK7E,aAAS,WAAW;AACnB,iBAAY,MAAM,SAAS,MAAM,KAAK;AAAA,IACvC;;0BAICA,mBAqBM,OAAA;AAAA,QApBJ,OAAKC,eAAA,CAAA;AAAA,WAASC,KAAAA,OAAO,uBAAuB,GAAG,UAAA;AAAA,QAAA,GAAgBA,KAAAA,OAAO,gBAAgB,CAAA;AAAA,QAGtF,SAAO;AAAA,MAAA;QACGC,KAAAA,OAAO,qBAAlBH,mBAEM,OAAA;AAAA;UAFmB,OAAKC,eAAEC,KAAAA,OAAO,sBAAsB;AAAA,QAAA;UAC5DE,WAAoB,KAAA,QAAA,MAAA;AAAA,QAAA;QAGVC,KAAAA,sBAAXL,mBAEM,OAAA;AAAA;UAFa,IAAIM,MAAA,OAAA;AAAA,UAAU,OAAKL,eAAEC,KAAAA,OAAO,uBAAuB;AAAA,QAAA,mBAClEG,KAAAA,KAAK,GAAA,IAAA,UAAA;QAGTE,mBAOmB,SAAA;AAAA,UANjB,mBAAiBF,KAAAA,QAAQC,MAAA,OAAA,IAAU;AAAA,UACnC,cAAYD,KAAAA,QAAQ,SAAYG,KAAAA;AAAAA,UACjC,OAAM;AAAA,UACL,SAAS,UAAA;AAAA,UACV,MAAK;AAAA,UACJ,OAAAC,KAAAA;AAAAA,UACA,SAAO;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/_l10n-YZMLsK4O.mjs.map

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

package/dist/chunks/useAppSettingsDialog-Dn48dw1k.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAppSettingsDialog-Dn48dw1k.mjs","sources":["../../src/components/NcAppSettingsDialog/useAppSettingsDialog.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { InjectionKey, VNode } from 'vue'\n\nimport { inject } from 'vue'\n\ninterface AppSettingsRegistrationContext {\n\t/**\n\t * Register a new section on the app settings dialog\n\t *\n\t * @param id - The section ID\n\t * @param name - The section name\n\t * @param order - Optional section order in the list\n\t * @param icon - Optional icon component\n\t */\n\tregisterSection(id: string, name: string, order?: number, icon?: VNode[]): void\n\n\t/**\n\t * Unregistered from the app settings dialog to remove it from dialog\n\t *\n\t * @param id - The section ID\n\t */\n\tunregisterSection(id: string): void\n}\n\nexport const APP_SETTINGS_REGISTRATION_KEY: InjectionKey<AppSettingsRegistrationContext> = Symbol.for('NcAppSettingsDialog:registration')\n\n/**\n * Get the provided methods from the app settings dialog.\n * This is to be used in the app settings sections.\n */\nexport function useAppSettingsDialog() {\n\treturn inject(APP_SETTINGS_REGISTRATION_KEY)!\n}\n"],"names":[],"mappings":";AA4BO,MAAM,gCAA8E,OAAO,IAAI,kCAAkC;AAMjI,SAAS,uBAAuB;AACtC,SAAO,OAAO,6BAA6B;AAC5C;"}