@nextcloud/vue 8.36.0 → 8.38.0

package/dist/chunks/NcFilePicker-BYWr-vcP.cjs

@@ -0,0 +1,209 @@
+require('../assets/NcFilePicker-BokX813z.css');
+"use strict";
+const Vue = require("vue");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const NcActionButton = require("./NcActionButton-CiYel4_C.cjs");
+const Components_NcActionCaption = require("../Components/NcActionCaption.cjs");
+const NcActions = require("./NcActions-0fAYsGbh.cjs");
+const NcIconSvgWrapper = require("./NcIconSvgWrapper-Bbl4kXZI.cjs");
+const Components_NcLoadingIcon = require("../Components/NcLoadingIcon.cjs");
+const _l10n = require("./_l10n-skrZri3h.cjs");
+const _sfc_main$3 = {
+  name: "FolderUploadIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var _sfc_render$3 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", _vm._b({ staticClass: "material-design-icon folder-upload-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M20,6A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H10L12,6H20M10.75,13H14V17H16V13H19.25L15,8.75" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns$3 = [];
+var __component__$3 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$3,
+  _sfc_render$3,
+  _sfc_staticRenderFns$3,
+  false,
+  null,
+  null
+);
+const IconFolderUpload = __component__$3.exports;
+const _sfc_main$2 = {
+  name: "PlusIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var _sfc_render$2 = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", _vm._b({ staticClass: "material-design-icon plus-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns$2 = [];
+var __component__$2 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
+  null,
+  null
+);
+const IconPlus = __component__$2.exports;
+const _sfc_main$1 = {
+  name: "UploadIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var _sfc_render$1 = function render3() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", _vm._b({ staticClass: "material-design-icon upload-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  null,
+  null
+);
+const IconUpload = __component__$1.exports;
+_l10n.register(_l10n.t40);
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "NcFilePicker",
+  props: {
+    accept: { default: void 0 },
+    actionCaption: { default: "" },
+    actions: { default: () => [] },
+    directory: { type: Boolean },
+    directoryOnly: { type: Boolean },
+    disabled: { type: Boolean },
+    iconOnly: { type: Boolean },
+    label: { default: void 0 },
+    loading: { type: Boolean },
+    multiple: { type: Boolean },
+    variant: { default: "primary" }
+  },
+  emits: ["pick"],
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    expose({
+      reset
+    });
+    const formElement = Vue.ref(null);
+    const inputElement = Vue.ref(null);
+    const currentLabel = Vue.computed(() => {
+      if (props.loading) {
+        return _l10n.t("Uploading …");
+      } else if (props.label) {
+        return props.label;
+      } else if (props.directoryOnly) {
+        return _l10n.t("Pick folder");
+      }
+      return props.multiple ? _l10n.t("Pick files") : _l10n.t("Pick file");
+    });
+    const canUploadFolders = Vue.computed(() => {
+      return (props.directory || props.directoryOnly) && "webkitdirectory" in HTMLInputElement.prototype;
+    });
+    function triggerPickFiles(uploadFolders) {
+      reset();
+      if (canUploadFolders.value) {
+        inputElement.value.webkitdirectory = uploadFolders;
+      }
+      Vue.nextTick(() => inputElement.value.click());
+    }
+    function onPick() {
+      const files = inputElement.value?.files ? Array.from(inputElement.value.files) : [];
+      emit("pick", files);
+    }
+    function reset() {
+      formElement.value.reset();
+    }
+    return { __sfc: true, props, emit, formElement, inputElement, currentLabel, canUploadFolders, triggerPickFiles, onPick, reset, IconFolderUpload, IconPlus, IconUpload, NcActionButton: NcActionButton.NcActionButton, NcActionCaption: Components_NcActionCaption, NcActions: NcActions.NcActions, NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper, NcLoadingIcon: Components_NcLoadingIcon, t: _l10n.t };
+  }
+});
+const filePicker = "_filePicker_KfdBJ";
+const style0 = {
+  filePicker
+};
+var _sfc_render = function render4() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("form", { ref: "formElement", class: _vm.$style.filePicker }, [_c(_setup.NcActions, { attrs: { "aria-label": _setup.currentLabel, "disabled": _vm.disabled || _vm.loading, "menu-name": _vm.iconOnly ? void 0 : _setup.currentLabel, "force-name": !_vm.iconOnly, "variant": _vm.variant }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [!_vm.loading ? _vm._t("icon", function() {
+      return [_c(_setup.IconPlus, { attrs: { "size": 20 } })];
+    }) : _c(_setup.NcLoadingIcon)];
+  }, proxy: true }], null, true) }, [_vm.actionCaption ? _c(_setup.NcActionCaption, { attrs: { "name": _vm.actionCaption } }) : _vm._e(), !_vm.directoryOnly ? _c(_setup.NcActionButton, { attrs: { "close-after-click": "" }, on: { "click": function($event) {
+    return _setup.triggerPickFiles(false);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c(_setup.IconUpload, { attrs: { "size": 20 } })];
+  }, proxy: true }], null, false, 3377047136) }, [_vm._v(" " + _vm._s(_setup.canUploadFolders || !!_vm.$slots.actions ? _vm.multiple ? _setup.t("Upload files") : _setup.t("Upload file") : _setup.currentLabel) + " ")]) : _vm._e(), _setup.canUploadFolders ? _c(_setup.NcActionButton, { attrs: { "close-after-click": "" }, on: { "click": function($event) {
+    return _setup.triggerPickFiles(true);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c(_setup.IconFolderUpload, { staticStyle: { "color": "var(--color-primary-element)" }, attrs: { "size": 20 } })];
+  }, proxy: true }], null, false, 746052933) }, [_vm._v(" " + _vm._s(!_vm.directoryOnly || !!_vm.$slots.actions ? _setup.t("Upload folder") : _setup.currentLabel) + " ")]) : _vm._e(), _vm._l(_vm.actions, function(group) {
+    return [group.caption ? _c(_setup.NcActionCaption, { key: group.caption, attrs: { "name": group.caption } }) : _vm._e(), _vm._l(group.actions ?? [group], function(action) {
+      return _c(_setup.NcActionButton, { key: action.label, attrs: { "close-after-click": "" }, on: { "click": action.onClick }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+        return [_c(_setup.NcIconSvgWrapper, { attrs: { "svg": action.iconSvg } })];
+      }, proxy: true }], null, true) }, [_vm._v(" " + _vm._s(action.label) + " ")]);
+    })];
+  })], 2), _c("input", { ref: "inputElement", staticClass: "hidden-visually", attrs: { "accept": _vm.accept?.join(", "), "aria-hidden": "true", "multiple": _vm.multiple, "type": "file" }, on: { "change": _setup.onPick } }), _vm._t("default")], 2);
+};
+var _sfc_staticRenderFns = [];
+const __cssModules = {
+  "$style": style0
+};
+function _sfc_injectStyles(ctx) {
+  for (var key in __cssModules) {
+    this[key] = __cssModules[key];
+  }
+}
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  _sfc_injectStyles,
+  null
+);
+const NcFilePicker = __component__.exports;
+exports.NcFilePicker = NcFilePicker;
+//# sourceMappingURL=NcFilePicker-BYWr-vcP.cjs.map

package/dist/chunks/NcFilePicker-BYWr-vcP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFilePicker-BYWr-vcP.cjs","sources":["../../node_modules/vue-material-design-icons/FolderUpload.vue","../../node_modules/vue-material-design-icons/Plus.vue","../../node_modules/vue-material-design-icons/Upload.vue","../../src/components/NcFilePicker/NcFilePicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon folder-upload-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=\"M20,6A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H10L12,6H20M10.75,13H14V17H16V13H19.25L15,8.75\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"FolderUploadIcon\",\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>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon plus-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=\"M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"PlusIcon\",\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>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon upload-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=\"M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"UploadIcon\",\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  - 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 { computed, nextTick, ref } from 'vue'\nimport IconFolderUpload from 'vue-material-design-icons/FolderUpload.vue'\nimport IconPlus from 'vue-material-design-icons/Plus.vue'\nimport IconUpload from 'vue-material-design-icons/Upload.vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActionCaption from '../NcActionCaption/NcActionCaption.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'\nimport { t } from '../../l10n.js'\n\nexport interface FilePickerItem {\n\t/**\n\t * SVG icon (as string) for the action\n\t */\n\ticonSvg: string\n\t/**\n\t * Label of the action\n\t */\n\tlabel: string\n\t/**\n\t * Callback when the action is clicked\n\t */\n\tonClick: () => void\n}\n\nexport interface FilePickerItemGroup {\n\t/**\n\t * Caption for the action group\n\t */\n\tcaption: string\n\t/**\n\t * Actions within this group\n\t */\n\tactions: FilePickerItem[]\n}\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * File types to accept\n\t */\n\taccept?: string[]\n\n\t/**\n\t * Optional menu caption to be shown above the actions\n\t */\n\tactionCaption?: string\n\n\t/**\n\t * Additional actions to be shown within the picker menu\n\t */\n\tactions?: FilePickerItem[] | FilePickerItemGroup[]\n\n\t/**\n\t * Allow picking a directory\n\t */\n\tdirectory?: boolean\n\n\t/**\n\t * Disable picking files and only allow picking a directory\n\t */\n\tdirectoryOnly?: boolean\n\n\t/**\n\t * Disabled state of the picker\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * If set then the label is only used for accessibility but not shown visually\n\t */\n\ticonOnly?: boolean\n\n\t/**\n\t * Label of the picker\n\t *\n\t * @default 'Pick file' or 'Pick files' depending on `multiple`\n\t */\n\tlabel?: string\n\n\t/**\n\t * If set then the picker will be set into a loading state.\n\t * This means the picker is disabled, a loading spinner is shown and the label is adjusted.\n\t */\n\tloading?: boolean\n\n\t/**\n\t * Can the user pick multiple files.\n\t * This is ignored when picking folder (by browser limitations).\n\t */\n\tmultiple?: boolean\n\n\t/**\n\t * The variant of the button\n\t */\n\tvariant?: 'primary' | 'secondary' | 'tertiary'\n}>(), {\n\tactions: () => [],\n\taccept: undefined,\n\tactionCaption: '',\n\tlabel: undefined,\n\tvariant: 'primary',\n})\n\nconst emit = defineEmits<{\n\t(event: 'pick', files: File[]): void\n}>()\n\ndefineExpose({\n\treset,\n})\n\nconst formElement = ref<HTMLFormElement | null>(null)\nconst inputElement = ref<HTMLInputElement | null>(null)\n\n/**\n * The current label to be used as menu name and accessible name of the picker.\n */\nconst currentLabel = computed(() => {\n\tif (props.loading) {\n\t\treturn t('Uploading …')\n\t} else if (props.label) {\n\t\treturn props.label\n\t} else if (props.directoryOnly) {\n\t\treturn t('Pick folder')\n\t}\n\treturn props.multiple ? t('Pick files') : t('Pick file')\n})\n\n/**\n * Check whether the current browser supports uploading directories\n * Hint: This does not check if the current connection supports this, as some browsers require a secure context!\n */\nconst canUploadFolders = computed(() => {\n\treturn (props.directory || props.directoryOnly) && 'webkitdirectory' in HTMLInputElement.prototype\n})\n\n/**\n * Trigger file picker\n *\n * @param uploadFolders - Whether to upload folders or files\n */\nfunction triggerPickFiles(uploadFolders: boolean) {\n\t// Without reset selecting the same file doesn't trigger the change event\n\treset()\n\n\t// Only if the browser supports picking folders and the user selected \"pick folder\" we set the file input to directory picking.\n\tif (canUploadFolders.value) {\n\t\tinputElement.value!.webkitdirectory = uploadFolders\n\t}\n\n\t// Wait for the reset and the `webkitdirectory` to be dispatched in DOM\n\tnextTick(() => inputElement.value!.click())\n}\n\n/**\n * Handle picking some local files\n */\nfunction onPick() {\n\tconst files = inputElement.value?.files ? Array.from(inputElement.value.files) : []\n\temit('pick', files)\n}\n\n/**\n * Reset the picker state of the currently selected files.\n */\nfunction reset() {\n\tformElement.value!.reset()\n}\n</script>\n\n<template>\n\t<form\n\t\tref=\"formElement\"\n\t\t:class=\"$style.filePicker\">\n\t\t<NcActions\n\t\t\t:aria-label=\"currentLabel\"\n\t\t\t:disabled=\"disabled || loading\"\n\t\t\t:menu-name=\"iconOnly ? undefined : currentLabel\"\n\t\t\t:force-name=\"!iconOnly\"\n\t\t\t:variant=\"variant\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Optional custom icon for the picker menu -->\n\t\t\t\t<slot v-if=\"!loading\" name=\"icon\">\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</slot>\n\t\t\t\t<NcLoadingIcon v-else />\n\t\t\t</template>\n\n\t\t\t<NcActionCaption v-if=\"actionCaption\" :name=\"actionCaption\" />\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"!directoryOnly\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"triggerPickFiles(false)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconUpload :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ (canUploadFolders || !!$slots.actions) ? (multiple ? t('Upload files') : t('Upload file')) : currentLabel }}\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canUploadFolders\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"triggerPickFiles(true)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderUpload style=\"color: var(--color-primary-element)\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ (!directoryOnly || !!$slots.actions) ? t('Upload folder') : currentLabel }}\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t</NcActionButton>\n\n\t\t\t<template v-for=\"group of actions\">\n\t\t\t\t<NcActionCaption\n\t\t\t\t\tv-if=\"group.caption\"\n\t\t\t\t\t:key=\"group.caption\"\n\t\t\t\t\t:name=\"group.caption\" />\n\n\t\t\t\t<NcActionButton\n\t\t\t\t\tv-for=\"action of group.actions ?? [group]\"\n\t\t\t\t\t:key=\"action.label\"\n\t\t\t\t\tclose-after-click\n\t\t\t\t\t@click=\"action.onClick\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :svg=\"action.iconSvg\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t{{ action.label }}\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcActions>\n\n\t\t<!-- Hidden files picker input - also hidden for accessibility as otherwise such users also loose the ability to pick files -->\n\t\t<input\n\t\t\tref=\"inputElement\"\n\t\t\t:accept=\"accept?.join(', ')\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:multiple=\"multiple\"\n\t\t\ttype=\"file\"\n\t\t\t@change=\"onPick\">\n\n\t\t<!-- @slot Optional content to be shown in the picker. This can be used e.g. for a progress bar or similar. -->\n\t\t<slot />\n\t</form>\n</template>\n\n<style module>\n.filePicker {\n\tdisplay: inline-flex;\n\talign-items: center;\n\theight: var(--default-clickable-area);\n}\n</style>\n\n<docs>\nThis component allows to pick local files (or directories) which can be used to upload them to Nextcloud or directly process them in the browser.\n\n### Exposed methods\n\n- `function reset(): void`\n  This method allows to reset the internal state of the file picker to clear the current selection\n\n### Example\n\n```vue\n<template>\n\t<div>\n\t\t<div class=\"wrapper\">\n\t\t\t<NcFilePicker ref=\"picker\"\n\t\t\t\tdirectory\n\t\t\t\t@pick=\"selectedFiles = $event\" />\n\n\t\t\t<NcButton variant=\"tertiary\"\n\t\t\t\t@click=\"clearPicker\">\n\t\t\t\tClear\n\t\t\t</NcButton>\n\t\t</div>\n\n\t\t<h3>Selected files:</h3>\n\t\t<ul>\n\t\t\t<li v-for=\"file in selectedFiles\" :key=\"file.name\">\n\t\t\t\t{{ file.webkitRelativePath || file.name }}\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tselectedFiles: [],\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\t/**\n\t\t\t * This will clear the selected files from the picker.\n\t\t\t */\n\t\t\tclearPicker() {\n\t\t\t\tthis.$refs.picker.reset()\n\t\t\t},\n\t\t},\n\t}\n</script>\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n"],"names":["_sfc_main","ref","computed","t","nextTick"],"mappings":";;;;;;;;;AAoBA,MAAAA,cAAA;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;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;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;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC8EA,WAAa;AAAA,MACZ;AAAA,IAAA,CACA;AAED,UAAM,cAAcC,IAAAA,IAA4B,IAAI;AACpD,UAAM,eAAeA,IAAAA,IAA6B,IAAI;AAKtD,UAAM,eAAeC,IAAAA,SAAS,MAAM;AACnC,UAAI,MAAM,SAAS;AAClB,eAAOC,MAAAA,EAAE,aAAa;AAAA,MACvB,WAAW,MAAM,OAAO;AACvB,eAAO,MAAM;AAAA,MACd,WAAW,MAAM,eAAe;AAC/B,eAAOA,MAAAA,EAAE,aAAa;AAAA,MACvB;AACA,aAAO,MAAM,WAAWA,MAAAA,EAAE,YAAY,IAAIA,MAAAA,EAAE,WAAW;AAAA,IACxD,CAAC;AAMD,UAAM,mBAAmBD,IAAAA,SAAS,MAAM;AACvC,cAAQ,MAAM,aAAa,MAAM,kBAAkB,qBAAqB,iBAAiB;AAAA,IAC1F,CAAC;AAOD,aAAS,iBAAiB,eAAwB;AAEjD,YAAA;AAGA,UAAI,iBAAiB,OAAO;AAC3B,qBAAa,MAAO,kBAAkB;AAAA,MACvC;AAGAE,UAAAA,SAAS,MAAM,aAAa,MAAO,MAAA,CAAO;AAAA,IAC3C;AAKA,aAAS,SAAS;AACjB,YAAM,QAAQ,aAAa,OAAO,QAAQ,MAAM,KAAK,aAAa,MAAM,KAAK,IAAI,CAAA;AACjF,WAAK,QAAQ,KAAK;AAAA,IACnB;AAKA,aAAS,QAAQ;AAChB,kBAAY,MAAO,MAAA;AAAA,IACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0,1,2]}

package/dist/chunks/NcFilePicker-DCPi6JGg.mjs

@@ -0,0 +1,210 @@
+import '../assets/NcFilePicker-BokX813z.css';
+import { defineComponent, ref, computed, nextTick } from "vue";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+import { N as NcActionButton } from "./NcActionButton-K4jUGMlW.mjs";
+import NcActionCaption from "../Components/NcActionCaption.mjs";
+import { N as NcActions } from "./NcActions-Ca_2vj8f.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-Bui9PhAS.mjs";
+import NcLoadingIcon from "../Components/NcLoadingIcon.mjs";
+import { r as register, L as t40, a as t } from "./_l10n-DVz9Qdzk.mjs";
+const _sfc_main$3 = {
+  name: "FolderUploadIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var _sfc_render$3 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", _vm._b({ staticClass: "material-design-icon folder-upload-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M20,6A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H10L12,6H20M10.75,13H14V17H16V13H19.25L15,8.75" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns$3 = [];
+var __component__$3 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$3,
+  _sfc_render$3,
+  _sfc_staticRenderFns$3,
+  false,
+  null,
+  null
+);
+const IconFolderUpload = __component__$3.exports;
+const _sfc_main$2 = {
+  name: "PlusIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var _sfc_render$2 = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", _vm._b({ staticClass: "material-design-icon plus-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns$2 = [];
+var __component__$2 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
+  null,
+  null
+);
+const IconPlus = __component__$2.exports;
+const _sfc_main$1 = {
+  name: "UploadIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var _sfc_render$1 = function render3() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", _vm._b({ staticClass: "material-design-icon upload-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  null,
+  null
+);
+const IconUpload = __component__$1.exports;
+register(t40);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcFilePicker",
+  props: {
+    accept: { default: void 0 },
+    actionCaption: { default: "" },
+    actions: { default: () => [] },
+    directory: { type: Boolean },
+    directoryOnly: { type: Boolean },
+    disabled: { type: Boolean },
+    iconOnly: { type: Boolean },
+    label: { default: void 0 },
+    loading: { type: Boolean },
+    multiple: { type: Boolean },
+    variant: { default: "primary" }
+  },
+  emits: ["pick"],
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    expose({
+      reset
+    });
+    const formElement = ref(null);
+    const inputElement = ref(null);
+    const currentLabel = computed(() => {
+      if (props.loading) {
+        return t("Uploading …");
+      } else if (props.label) {
+        return props.label;
+      } else if (props.directoryOnly) {
+        return t("Pick folder");
+      }
+      return props.multiple ? t("Pick files") : t("Pick file");
+    });
+    const canUploadFolders = computed(() => {
+      return (props.directory || props.directoryOnly) && "webkitdirectory" in HTMLInputElement.prototype;
+    });
+    function triggerPickFiles(uploadFolders) {
+      reset();
+      if (canUploadFolders.value) {
+        inputElement.value.webkitdirectory = uploadFolders;
+      }
+      nextTick(() => inputElement.value.click());
+    }
+    function onPick() {
+      const files = inputElement.value?.files ? Array.from(inputElement.value.files) : [];
+      emit("pick", files);
+    }
+    function reset() {
+      formElement.value.reset();
+    }
+    return { __sfc: true, props, emit, formElement, inputElement, currentLabel, canUploadFolders, triggerPickFiles, onPick, reset, IconFolderUpload, IconPlus, IconUpload, NcActionButton, NcActionCaption, NcActions, NcIconSvgWrapper, NcLoadingIcon, t };
+  }
+});
+const filePicker = "_filePicker_KfdBJ";
+const style0 = {
+  filePicker
+};
+var _sfc_render = function render4() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("form", { ref: "formElement", class: _vm.$style.filePicker }, [_c(_setup.NcActions, { attrs: { "aria-label": _setup.currentLabel, "disabled": _vm.disabled || _vm.loading, "menu-name": _vm.iconOnly ? void 0 : _setup.currentLabel, "force-name": !_vm.iconOnly, "variant": _vm.variant }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [!_vm.loading ? _vm._t("icon", function() {
+      return [_c(_setup.IconPlus, { attrs: { "size": 20 } })];
+    }) : _c(_setup.NcLoadingIcon)];
+  }, proxy: true }], null, true) }, [_vm.actionCaption ? _c(_setup.NcActionCaption, { attrs: { "name": _vm.actionCaption } }) : _vm._e(), !_vm.directoryOnly ? _c(_setup.NcActionButton, { attrs: { "close-after-click": "" }, on: { "click": function($event) {
+    return _setup.triggerPickFiles(false);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c(_setup.IconUpload, { attrs: { "size": 20 } })];
+  }, proxy: true }], null, false, 3377047136) }, [_vm._v(" " + _vm._s(_setup.canUploadFolders || !!_vm.$slots.actions ? _vm.multiple ? _setup.t("Upload files") : _setup.t("Upload file") : _setup.currentLabel) + " ")]) : _vm._e(), _setup.canUploadFolders ? _c(_setup.NcActionButton, { attrs: { "close-after-click": "" }, on: { "click": function($event) {
+    return _setup.triggerPickFiles(true);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c(_setup.IconFolderUpload, { staticStyle: { "color": "var(--color-primary-element)" }, attrs: { "size": 20 } })];
+  }, proxy: true }], null, false, 746052933) }, [_vm._v(" " + _vm._s(!_vm.directoryOnly || !!_vm.$slots.actions ? _setup.t("Upload folder") : _setup.currentLabel) + " ")]) : _vm._e(), _vm._l(_vm.actions, function(group) {
+    return [group.caption ? _c(_setup.NcActionCaption, { key: group.caption, attrs: { "name": group.caption } }) : _vm._e(), _vm._l(group.actions ?? [group], function(action) {
+      return _c(_setup.NcActionButton, { key: action.label, attrs: { "close-after-click": "" }, on: { "click": action.onClick }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+        return [_c(_setup.NcIconSvgWrapper, { attrs: { "svg": action.iconSvg } })];
+      }, proxy: true }], null, true) }, [_vm._v(" " + _vm._s(action.label) + " ")]);
+    })];
+  })], 2), _c("input", { ref: "inputElement", staticClass: "hidden-visually", attrs: { "accept": _vm.accept?.join(", "), "aria-hidden": "true", "multiple": _vm.multiple, "type": "file" }, on: { "change": _setup.onPick } }), _vm._t("default")], 2);
+};
+var _sfc_staticRenderFns = [];
+const __cssModules = {
+  "$style": style0
+};
+function _sfc_injectStyles(ctx) {
+  for (var key in __cssModules) {
+    this[key] = __cssModules[key];
+  }
+}
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  _sfc_injectStyles,
+  null
+);
+const NcFilePicker = __component__.exports;
+export {
+  NcFilePicker as N
+};
+//# sourceMappingURL=NcFilePicker-DCPi6JGg.mjs.map

package/dist/chunks/NcFilePicker-DCPi6JGg.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFilePicker-DCPi6JGg.mjs","sources":["../../node_modules/vue-material-design-icons/FolderUpload.vue","../../node_modules/vue-material-design-icons/Plus.vue","../../node_modules/vue-material-design-icons/Upload.vue","../../src/components/NcFilePicker/NcFilePicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon folder-upload-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=\"M20,6A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H10L12,6H20M10.75,13H14V17H16V13H19.25L15,8.75\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"FolderUploadIcon\",\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>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon plus-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=\"M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"PlusIcon\",\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>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon upload-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=\"M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"UploadIcon\",\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  - 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 { computed, nextTick, ref } from 'vue'\nimport IconFolderUpload from 'vue-material-design-icons/FolderUpload.vue'\nimport IconPlus from 'vue-material-design-icons/Plus.vue'\nimport IconUpload from 'vue-material-design-icons/Upload.vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActionCaption from '../NcActionCaption/NcActionCaption.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'\nimport { t } from '../../l10n.js'\n\nexport interface FilePickerItem {\n\t/**\n\t * SVG icon (as string) for the action\n\t */\n\ticonSvg: string\n\t/**\n\t * Label of the action\n\t */\n\tlabel: string\n\t/**\n\t * Callback when the action is clicked\n\t */\n\tonClick: () => void\n}\n\nexport interface FilePickerItemGroup {\n\t/**\n\t * Caption for the action group\n\t */\n\tcaption: string\n\t/**\n\t * Actions within this group\n\t */\n\tactions: FilePickerItem[]\n}\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * File types to accept\n\t */\n\taccept?: string[]\n\n\t/**\n\t * Optional menu caption to be shown above the actions\n\t */\n\tactionCaption?: string\n\n\t/**\n\t * Additional actions to be shown within the picker menu\n\t */\n\tactions?: FilePickerItem[] | FilePickerItemGroup[]\n\n\t/**\n\t * Allow picking a directory\n\t */\n\tdirectory?: boolean\n\n\t/**\n\t * Disable picking files and only allow picking a directory\n\t */\n\tdirectoryOnly?: boolean\n\n\t/**\n\t * Disabled state of the picker\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * If set then the label is only used for accessibility but not shown visually\n\t */\n\ticonOnly?: boolean\n\n\t/**\n\t * Label of the picker\n\t *\n\t * @default 'Pick file' or 'Pick files' depending on `multiple`\n\t */\n\tlabel?: string\n\n\t/**\n\t * If set then the picker will be set into a loading state.\n\t * This means the picker is disabled, a loading spinner is shown and the label is adjusted.\n\t */\n\tloading?: boolean\n\n\t/**\n\t * Can the user pick multiple files.\n\t * This is ignored when picking folder (by browser limitations).\n\t */\n\tmultiple?: boolean\n\n\t/**\n\t * The variant of the button\n\t */\n\tvariant?: 'primary' | 'secondary' | 'tertiary'\n}>(), {\n\tactions: () => [],\n\taccept: undefined,\n\tactionCaption: '',\n\tlabel: undefined,\n\tvariant: 'primary',\n})\n\nconst emit = defineEmits<{\n\t(event: 'pick', files: File[]): void\n}>()\n\ndefineExpose({\n\treset,\n})\n\nconst formElement = ref<HTMLFormElement | null>(null)\nconst inputElement = ref<HTMLInputElement | null>(null)\n\n/**\n * The current label to be used as menu name and accessible name of the picker.\n */\nconst currentLabel = computed(() => {\n\tif (props.loading) {\n\t\treturn t('Uploading …')\n\t} else if (props.label) {\n\t\treturn props.label\n\t} else if (props.directoryOnly) {\n\t\treturn t('Pick folder')\n\t}\n\treturn props.multiple ? t('Pick files') : t('Pick file')\n})\n\n/**\n * Check whether the current browser supports uploading directories\n * Hint: This does not check if the current connection supports this, as some browsers require a secure context!\n */\nconst canUploadFolders = computed(() => {\n\treturn (props.directory || props.directoryOnly) && 'webkitdirectory' in HTMLInputElement.prototype\n})\n\n/**\n * Trigger file picker\n *\n * @param uploadFolders - Whether to upload folders or files\n */\nfunction triggerPickFiles(uploadFolders: boolean) {\n\t// Without reset selecting the same file doesn't trigger the change event\n\treset()\n\n\t// Only if the browser supports picking folders and the user selected \"pick folder\" we set the file input to directory picking.\n\tif (canUploadFolders.value) {\n\t\tinputElement.value!.webkitdirectory = uploadFolders\n\t}\n\n\t// Wait for the reset and the `webkitdirectory` to be dispatched in DOM\n\tnextTick(() => inputElement.value!.click())\n}\n\n/**\n * Handle picking some local files\n */\nfunction onPick() {\n\tconst files = inputElement.value?.files ? Array.from(inputElement.value.files) : []\n\temit('pick', files)\n}\n\n/**\n * Reset the picker state of the currently selected files.\n */\nfunction reset() {\n\tformElement.value!.reset()\n}\n</script>\n\n<template>\n\t<form\n\t\tref=\"formElement\"\n\t\t:class=\"$style.filePicker\">\n\t\t<NcActions\n\t\t\t:aria-label=\"currentLabel\"\n\t\t\t:disabled=\"disabled || loading\"\n\t\t\t:menu-name=\"iconOnly ? undefined : currentLabel\"\n\t\t\t:force-name=\"!iconOnly\"\n\t\t\t:variant=\"variant\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Optional custom icon for the picker menu -->\n\t\t\t\t<slot v-if=\"!loading\" name=\"icon\">\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</slot>\n\t\t\t\t<NcLoadingIcon v-else />\n\t\t\t</template>\n\n\t\t\t<NcActionCaption v-if=\"actionCaption\" :name=\"actionCaption\" />\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"!directoryOnly\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"triggerPickFiles(false)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconUpload :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ (canUploadFolders || !!$slots.actions) ? (multiple ? t('Upload files') : t('Upload file')) : currentLabel }}\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canUploadFolders\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"triggerPickFiles(true)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderUpload style=\"color: var(--color-primary-element)\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ (!directoryOnly || !!$slots.actions) ? t('Upload folder') : currentLabel }}\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t</NcActionButton>\n\n\t\t\t<template v-for=\"group of actions\">\n\t\t\t\t<NcActionCaption\n\t\t\t\t\tv-if=\"group.caption\"\n\t\t\t\t\t:key=\"group.caption\"\n\t\t\t\t\t:name=\"group.caption\" />\n\n\t\t\t\t<NcActionButton\n\t\t\t\t\tv-for=\"action of group.actions ?? [group]\"\n\t\t\t\t\t:key=\"action.label\"\n\t\t\t\t\tclose-after-click\n\t\t\t\t\t@click=\"action.onClick\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :svg=\"action.iconSvg\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t{{ action.label }}\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcActions>\n\n\t\t<!-- Hidden files picker input - also hidden for accessibility as otherwise such users also loose the ability to pick files -->\n\t\t<input\n\t\t\tref=\"inputElement\"\n\t\t\t:accept=\"accept?.join(', ')\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:multiple=\"multiple\"\n\t\t\ttype=\"file\"\n\t\t\t@change=\"onPick\">\n\n\t\t<!-- @slot Optional content to be shown in the picker. This can be used e.g. for a progress bar or similar. -->\n\t\t<slot />\n\t</form>\n</template>\n\n<style module>\n.filePicker {\n\tdisplay: inline-flex;\n\talign-items: center;\n\theight: var(--default-clickable-area);\n}\n</style>\n\n<docs>\nThis component allows to pick local files (or directories) which can be used to upload them to Nextcloud or directly process them in the browser.\n\n### Exposed methods\n\n- `function reset(): void`\n  This method allows to reset the internal state of the file picker to clear the current selection\n\n### Example\n\n```vue\n<template>\n\t<div>\n\t\t<div class=\"wrapper\">\n\t\t\t<NcFilePicker ref=\"picker\"\n\t\t\t\tdirectory\n\t\t\t\t@pick=\"selectedFiles = $event\" />\n\n\t\t\t<NcButton variant=\"tertiary\"\n\t\t\t\t@click=\"clearPicker\">\n\t\t\t\tClear\n\t\t\t</NcButton>\n\t\t</div>\n\n\t\t<h3>Selected files:</h3>\n\t\t<ul>\n\t\t\t<li v-for=\"file in selectedFiles\" :key=\"file.name\">\n\t\t\t\t{{ file.webkitRelativePath || file.name }}\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tselectedFiles: [],\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\t/**\n\t\t\t * This will clear the selected files from the picker.\n\t\t\t */\n\t\t\tclearPicker() {\n\t\t\t\tthis.$refs.picker.reset()\n\t\t\t},\n\t\t},\n\t}\n</script>\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n"],"names":["_sfc_main"],"mappings":";;;;;;;;AAoBA,MAAAA,cAAA;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;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;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;;;;;;;;;;;;;;;;;AChBA,MAAAA,cAAA;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC8EA,WAAa;AAAA,MACZ;AAAA,IAAA,CACA;AAED,UAAM,cAAc,IAA4B,IAAI;AACpD,UAAM,eAAe,IAA6B,IAAI;AAKtD,UAAM,eAAe,SAAS,MAAM;AACnC,UAAI,MAAM,SAAS;AAClB,eAAO,EAAE,aAAa;AAAA,MACvB,WAAW,MAAM,OAAO;AACvB,eAAO,MAAM;AAAA,MACd,WAAW,MAAM,eAAe;AAC/B,eAAO,EAAE,aAAa;AAAA,MACvB;AACA,aAAO,MAAM,WAAW,EAAE,YAAY,IAAI,EAAE,WAAW;AAAA,IACxD,CAAC;AAMD,UAAM,mBAAmB,SAAS,MAAM;AACvC,cAAQ,MAAM,aAAa,MAAM,kBAAkB,qBAAqB,iBAAiB;AAAA,IAC1F,CAAC;AAOD,aAAS,iBAAiB,eAAwB;AAEjD,YAAA;AAGA,UAAI,iBAAiB,OAAO;AAC3B,qBAAa,MAAO,kBAAkB;AAAA,MACvC;AAGA,eAAS,MAAM,aAAa,MAAO,MAAA,CAAO;AAAA,IAC3C;AAKA,aAAS,SAAS;AACjB,YAAM,QAAQ,aAAa,OAAO,QAAQ,MAAM,KAAK,aAAa,MAAM,KAAK,IAAI,CAAA;AACjF,WAAK,QAAQ,KAAK;AAAA,IACnB;AAKA,aAAS,QAAQ;AAChB,kBAAY,MAAO,MAAA;AAAA,IACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0,1,2]}

package/dist/chunks/NcFormBox-DRGVpFeZ.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcFormBox-DRGVpFeZ.cjs","sources":["../../src/components/NcFormBox/NcFormBox.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 { provide, useCssModule } from 'vue'\nimport { NC_FORM_BOX_CONTEXT_KEY } from './useNcFormBox.ts'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Display the group as a row instead of a column\n\t */\n\trow?: boolean\n}>(), {\n\trow: false,\n})\n\nconst style = useCssModule()\n\nprovide(NC_FORM_BOX_CONTEXT_KEY, {\n\tisInFormBox: true,\n\tformBoxItemClass: style.ncFormBox__item,\n})\n</script>\n\n<template>\n\t<div :class=\"[$style.ncFormBox, row ? $style.ncFormBox_row : $style.ncFormBox_col]\">\n\t\t<!--\n\t\t\t@slot Grouped content\n\t\t\t\t@binding {string} itemClass - Class to add on a custom item to apply the border radius effect\n\t\t  -->\n\t\t<slot :item-class=\"$style.ncFormBox__item\" />\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.ncFormBox {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(1 * var(--default-grid-baseline));\n\n\t&.ncFormBox_row {\n\t\tflex-direction: row;\n\t}\n}\n\n.ncFormBox__item {\n\tborder-radius: var(--border-radius-small) !important;\n}\n\n.ncFormBox_col {\n\tflex-direction: column;\n\n\t.ncFormBox__item {\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n\n.ncFormBox_row {\n\tflex-direction: row;\n\n\t.ncFormBox__item {\n\t\tflex: 1 1;\n\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\n### General\n\nVisually group form elements with a small gap and rounded corners forming a solid group for supported components.\n\n**Note**: if the group has a semantic meaning, consider using the `<NcFormGroup>` component.\n\n```vue\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'Text',\n\t\t\toption: 'One'\n\t\t}\n\t}\n}\n</script>\n\n<template>\n\t<NcFormBox>\n\t\t<NcTextField v-model=\"text\" label=\"Text Field\" />\n\t\t<NcTextField v-model=\"text\" label=\"Text Field\" />\n\t\t<NcTextField v-model=\"text\" label=\"Text Field\" />\n\t\t<NcSelect v-model=\"option\" input-label=\"Select Field\" :options=\"['One', 'Two', 'Three']\" />\n\t</NcFormBox>\n</template>\n```\n\n### Advanced usage\n\nUse scoped slots params to apply the item class to custom items.\n\n```vue\n<template>\n\t<div>\n\t\t<h4>NcButton without a group</h4>\n\t\t<div>\n\t\t\t<NcButton wide>\n\t\t\t\tFirst button\n\t\t\t</NcButton>\n\t\t\t<NcButton wide>\n\t\t\t\tSecond button\n\t\t\t</NcButton>\n\t\t\t<NcButton wide>\n\t\t\t\tThird button\n\t\t\t</NcButton>\n\t\t</div>\n\n\t\t<h4>NcButton inside NcFormBox with scoped-slot</h4>\n\t\t<NcFormBox v-slot=\"{ itemClass }\">\n\t\t\t<NcButton :class=\"itemClass\" wide>\n\t\t\t\tFirst button\n\t\t\t</NcButton>\n\t\t\t<NcButton :class=\"itemClass\" wide>\n\t\t\t\tSecond button\n\t\t\t</NcButton>\n\t\t\t<NcButton :class=\"itemClass\" wide>\n\t\t\t\tThird button\n\t\t\t</NcButton>\n\t\t</NcFormBox>\n\t</div>\n</template>\n```\n</docs>\n"],"names":["useCssModule","provide","NC_FORM_BOX_CONTEXT_KEY"],"mappings":";;;;;;;;;;AAkBA,UAAM,QAAQA,IAAAA,aAAA;AAEdC,QAAAA,QAAQC,aAAAA,yBAAyB;AAAA,MAChC,aAAa;AAAA,MACb,kBAAkB,MAAM;AAAA,IAAA,CACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcFormBox-DRGVpFeZ.cjs","sources":["../../src/components/NcFormBox/NcFormBox.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 { provide, useCssModule } from 'vue'\nimport { NC_FORM_BOX_CONTEXT_KEY } from './useNcFormBox.ts'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Display the group as a row instead of a column\n\t */\n\trow?: boolean\n}>(), {\n\trow: false,\n})\n\nconst style = useCssModule()\n\nprovide(NC_FORM_BOX_CONTEXT_KEY, {\n\tisInFormBox: true,\n\tformBoxItemClass: style.ncFormBox__item,\n})\n</script>\n\n<template>\n\t<div :class=\"[$style.ncFormBox, row ? $style.ncFormBox_row : $style.ncFormBox_col]\">\n\t\t<!--\n\t\t\t@slot Grouped content\n\t\t\t\t@binding {string} itemClass - Class to add on a custom item to apply the border radius effect\n\t\t  -->\n\t\t<slot :item-class=\"$style.ncFormBox__item\" />\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.ncFormBox {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(1 * var(--default-grid-baseline));\n\n\t&.ncFormBox_row {\n\t\tflex-direction: row;\n\t}\n}\n\n.ncFormBox__item {\n\tborder-radius: var(--border-radius-small) !important;\n}\n\n.ncFormBox_col {\n\tflex-direction: column;\n\n\t.ncFormBox__item {\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n\n.ncFormBox_row {\n\tflex-direction: row;\n\n\t.ncFormBox__item {\n\t\tflex: 1 1;\n\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\n### General\n\nA container of supported components with a small gap and rounded corners forming a solid group.\n\nCurrently supported components:\n- **`<NcFormBoxButton>`**: an action button/link with an optional description specially for the `<NcFormBox>` context\n- **`<NcFormBoxCopyButton>`**: a special case of a button to copy a text to the clipboard\n- **`<NcFormBoxSwitch>`**: a toggle switch replacing `<NcCheckboxRadioSwitch type=\"switch\">` in a box\n- **`<NcButton>`**: a general button in case there is a kind of primary action within a box\n\n**Note**: if the group has a semantic meaning, consider wrapping the `<NcFormBox>` into `<NcFormGroup>` component with a label.\n\n```vue\n<script>\nimport { mdiArrowRight, mdiFolderOpenOutline, mdiPlus } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn { mdiArrowRight, mdiFolderOpenOutline, mdiPlus }\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'Text',\n\t\t\tswitchValue: false,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: calc(6 * var(--default-grid-baseline));\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton label=\"WebDAV URL\" value=\"https://cloud.example.tld/remote.php/dav/files/user\" />\n\t\t</NcFormBox>\n\n\t\t<NcFormGroup label=\"Account settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton label=\"user@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcFormBoxButton label=\"sales@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcButton wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPlus\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tAdd mail account\n\t\t\t\t</NcButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"Device settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Turn camera and microphone off by default\" />\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Blur camera background by default\"  />\n\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\tlabel=\"Skip device preview before joining a call\"\n\t\t\t\t\tdescription=\"Will always show if recording consent is required\" />\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxButton\n\t\t\t\tlabel=\"Attachments folder\"\n\t\t\t\tdescription=\"/Talk\"\n\t\t\t\tinverted-accent>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiFolderOpenOutline\" inline />\n\t\t\t\t</template>\n\t\t\t</NcFormBoxButton>\n\t\t</NcFormBox>\n\t</div>\n</template>\n```\n\n### Advanced usage\n\nScoped slot prop `itemClass` can be used to apply the same border radius effect to custom components.\nCreate an issue if you need a composable to inject the class into a custom component.\n\n```vue\n<template>\n\t<NcFormBox v-slot=\"{ itemClass }\">\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tFirst native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tSecond native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tThird native button\n\t\t</button>\n\t</NcFormBox>\n</template>\n\n<style scoped>\n.native-button {\n\t/* Remove default server margin around a native button */\n\tmargin: 0 !important;\n}\n</style>\n```\n</docs>\n"],"names":["useCssModule","provide","NC_FORM_BOX_CONTEXT_KEY"],"mappings":";;;;;;;;;;AAkBA,UAAM,QAAQA,IAAAA,aAAA;AAEdC,QAAAA,QAAQC,aAAAA,yBAAyB;AAAA,MAChC,aAAa;AAAA,MACb,kBAAkB,MAAM;AAAA,IAAA,CACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormBox-DtoCXLMx.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcFormBox-DtoCXLMx.mjs","sources":["../../src/components/NcFormBox/NcFormBox.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 { provide, useCssModule } from 'vue'\nimport { NC_FORM_BOX_CONTEXT_KEY } from './useNcFormBox.ts'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Display the group as a row instead of a column\n\t */\n\trow?: boolean\n}>(), {\n\trow: false,\n})\n\nconst style = useCssModule()\n\nprovide(NC_FORM_BOX_CONTEXT_KEY, {\n\tisInFormBox: true,\n\tformBoxItemClass: style.ncFormBox__item,\n})\n</script>\n\n<template>\n\t<div :class=\"[$style.ncFormBox, row ? $style.ncFormBox_row : $style.ncFormBox_col]\">\n\t\t<!--\n\t\t\t@slot Grouped content\n\t\t\t\t@binding {string} itemClass - Class to add on a custom item to apply the border radius effect\n\t\t  -->\n\t\t<slot :item-class=\"$style.ncFormBox__item\" />\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.ncFormBox {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(1 * var(--default-grid-baseline));\n\n\t&.ncFormBox_row {\n\t\tflex-direction: row;\n\t}\n}\n\n.ncFormBox__item {\n\tborder-radius: var(--border-radius-small) !important;\n}\n\n.ncFormBox_col {\n\tflex-direction: column;\n\n\t.ncFormBox__item {\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n\n.ncFormBox_row {\n\tflex-direction: row;\n\n\t.ncFormBox__item {\n\t\tflex: 1 1;\n\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\n### General\n\nVisually group form elements with a small gap and rounded corners forming a solid group for supported components.\n\n**Note**: if the group has a semantic meaning, consider using the `<NcFormGroup>` component.\n\n```vue\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'Text',\n\t\t\toption: 'One'\n\t\t}\n\t}\n}\n</script>\n\n<template>\n\t<NcFormBox>\n\t\t<NcTextField v-model=\"text\" label=\"Text Field\" />\n\t\t<NcTextField v-model=\"text\" label=\"Text Field\" />\n\t\t<NcTextField v-model=\"text\" label=\"Text Field\" />\n\t\t<NcSelect v-model=\"option\" input-label=\"Select Field\" :options=\"['One', 'Two', 'Three']\" />\n\t</NcFormBox>\n</template>\n```\n\n### Advanced usage\n\nUse scoped slots params to apply the item class to custom items.\n\n```vue\n<template>\n\t<div>\n\t\t<h4>NcButton without a group</h4>\n\t\t<div>\n\t\t\t<NcButton wide>\n\t\t\t\tFirst button\n\t\t\t</NcButton>\n\t\t\t<NcButton wide>\n\t\t\t\tSecond button\n\t\t\t</NcButton>\n\t\t\t<NcButton wide>\n\t\t\t\tThird button\n\t\t\t</NcButton>\n\t\t</div>\n\n\t\t<h4>NcButton inside NcFormBox with scoped-slot</h4>\n\t\t<NcFormBox v-slot=\"{ itemClass }\">\n\t\t\t<NcButton :class=\"itemClass\" wide>\n\t\t\t\tFirst button\n\t\t\t</NcButton>\n\t\t\t<NcButton :class=\"itemClass\" wide>\n\t\t\t\tSecond button\n\t\t\t</NcButton>\n\t\t\t<NcButton :class=\"itemClass\" wide>\n\t\t\t\tThird button\n\t\t\t</NcButton>\n\t\t</NcFormBox>\n\t</div>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;AAkBA,UAAM,QAAQ,aAAA;AAEd,YAAQ,yBAAyB;AAAA,MAChC,aAAa;AAAA,MACb,kBAAkB,MAAM;AAAA,IAAA,CACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcFormBox-DtoCXLMx.mjs","sources":["../../src/components/NcFormBox/NcFormBox.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 { provide, useCssModule } from 'vue'\nimport { NC_FORM_BOX_CONTEXT_KEY } from './useNcFormBox.ts'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Display the group as a row instead of a column\n\t */\n\trow?: boolean\n}>(), {\n\trow: false,\n})\n\nconst style = useCssModule()\n\nprovide(NC_FORM_BOX_CONTEXT_KEY, {\n\tisInFormBox: true,\n\tformBoxItemClass: style.ncFormBox__item,\n})\n</script>\n\n<template>\n\t<div :class=\"[$style.ncFormBox, row ? $style.ncFormBox_row : $style.ncFormBox_col]\">\n\t\t<!--\n\t\t\t@slot Grouped content\n\t\t\t\t@binding {string} itemClass - Class to add on a custom item to apply the border radius effect\n\t\t  -->\n\t\t<slot :item-class=\"$style.ncFormBox__item\" />\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.ncFormBox {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(1 * var(--default-grid-baseline));\n\n\t&.ncFormBox_row {\n\t\tflex-direction: row;\n\t}\n}\n\n.ncFormBox__item {\n\tborder-radius: var(--border-radius-small) !important;\n}\n\n.ncFormBox_col {\n\tflex-direction: column;\n\n\t.ncFormBox__item {\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n\n.ncFormBox_row {\n\tflex-direction: row;\n\n\t.ncFormBox__item {\n\t\tflex: 1 1;\n\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\n### General\n\nA container of supported components with a small gap and rounded corners forming a solid group.\n\nCurrently supported components:\n- **`<NcFormBoxButton>`**: an action button/link with an optional description specially for the `<NcFormBox>` context\n- **`<NcFormBoxCopyButton>`**: a special case of a button to copy a text to the clipboard\n- **`<NcFormBoxSwitch>`**: a toggle switch replacing `<NcCheckboxRadioSwitch type=\"switch\">` in a box\n- **`<NcButton>`**: a general button in case there is a kind of primary action within a box\n\n**Note**: if the group has a semantic meaning, consider wrapping the `<NcFormBox>` into `<NcFormGroup>` component with a label.\n\n```vue\n<script>\nimport { mdiArrowRight, mdiFolderOpenOutline, mdiPlus } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn { mdiArrowRight, mdiFolderOpenOutline, mdiPlus }\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'Text',\n\t\t\tswitchValue: false,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: calc(6 * var(--default-grid-baseline));\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton label=\"WebDAV URL\" value=\"https://cloud.example.tld/remote.php/dav/files/user\" />\n\t\t</NcFormBox>\n\n\t\t<NcFormGroup label=\"Account settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton label=\"user@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcFormBoxButton label=\"sales@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcButton wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPlus\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tAdd mail account\n\t\t\t\t</NcButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"Device settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Turn camera and microphone off by default\" />\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Blur camera background by default\"  />\n\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\tlabel=\"Skip device preview before joining a call\"\n\t\t\t\t\tdescription=\"Will always show if recording consent is required\" />\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxButton\n\t\t\t\tlabel=\"Attachments folder\"\n\t\t\t\tdescription=\"/Talk\"\n\t\t\t\tinverted-accent>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiFolderOpenOutline\" inline />\n\t\t\t\t</template>\n\t\t\t</NcFormBoxButton>\n\t\t</NcFormBox>\n\t</div>\n</template>\n```\n\n### Advanced usage\n\nScoped slot prop `itemClass` can be used to apply the same border radius effect to custom components.\nCreate an issue if you need a composable to inject the class into a custom component.\n\n```vue\n<template>\n\t<NcFormBox v-slot=\"{ itemClass }\">\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tFirst native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tSecond native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tThird native button\n\t\t</button>\n\t</NcFormBox>\n</template>\n\n<style scoped>\n.native-button {\n\t/* Remove default server margin around a native button */\n\tmargin: 0 !important;\n}\n</style>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;AAkBA,UAAM,QAAQ,aAAA;AAEd,YAAQ,yBAAyB;AAAA,MAChC,aAAa;AAAA,MACb,kBAAkB,MAAM;AAAA,IAAA,CACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcFormBoxCopyButton-DmFZ1t3a.cjs → NcFormBoxCopyButton-B2GrmfEz.cjs}

@@ -3,7 +3,7 @@ const Vue = require("vue");
 const core = require("@vueuse/core");
 const NcFormBoxButton = require("./NcFormBoxButton-BO2bMnah.cjs");
 const NcIconSvgWrapper = require("./NcIconSvgWrapper-Bbl4kXZI.cjs");
-const useCopy = require("./useCopy-Crn9gIC_.cjs");
+const useCopy = require("./useCopy-3m2jDiIN.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "NcFormBoxCopyButton",
@@ -43,4 +43,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcFormBoxCopyButton = __component__.exports;
 exports.NcFormBoxCopyButton = NcFormBoxCopyButton;
-//# sourceMappingURL=NcFormBoxCopyButton-DmFZ1t3a.cjs.map
+//# sourceMappingURL=NcFormBoxCopyButton-B2GrmfEz.cjs.map

package/dist/chunks/{NcFormBoxCopyButton-DmFZ1t3a.cjs.map → NcFormBoxCopyButton-B2GrmfEz.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcFormBoxCopyButton-DmFZ1t3a.cjs","sources":["../../src/components/NcFormBoxCopyButton/NcFormBoxCopyButton.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 { whenever } from '@vueuse/core'\nimport NcFormBoxButton from '../NcFormBoxButton/NcFormBoxButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useCopy } from '../../composables/useCopy.ts'\n\nconst props = withDefaults(defineProps<{\n\t/** Copied value's value */\n\tlabel?: string\n\t/** The value to be copied */\n\tvalue: string\n\t/** Native disabled attribute */\n\tdisabled?: boolean\n}>(), {\n\tlabel: undefined,\n\tdisabled: false,\n})\n\nconst emit = defineEmits<{\n\t/** Value has been successfully copied */\n\t(event: 'copy'): void\n}>()\n\nconst { isCopied, copy, icon, altText } = useCopy(() => props.value)\n\nwhenever(isCopied, () => emit('copy'))\n</script>\n\n<template>\n\t<NcFormBoxButton\n\t\t:disabled=\"disabled\"\n\t\tinverted-accent\n\t\t@click=\"copy\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<!-- @slot Custom label content -->\n\t\t\t<span class=\"hidden-visually\">\n\t\t\t\t{{ altText }}\n\t\t\t</span>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #description>\n\t\t\t{{ value }}\n\t\t</template>\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :path=\"icon\" inline />\n\t\t</template>\n\t</NcFormBoxButton>\n</template>\n\n<docs>\n### General\n\n`NcFormBoxButton` set up to be a copy button.\n\n```vue\n<template>\n\t<NcFormGroup label=\"CalDAV\" description=\"Access Nextcloud calendars from other apps and devices\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"CalDAV URL\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/\" />\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"Server Address for iOS and macOS\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/principals/users/user/\" />\n\t\t</NcFormBox>\n\t</NcFormGroup>\n</template>\n```\n</docs>\n"],"names":["useCopy","whenever"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,UAAM,EAAE,UAAU,MAAM,MAAM,YAAYA,QAAAA,QAAQ,MAAM,MAAM,KAAK;AAEnEC,SAAAA,SAAS,UAAU,MAAM,KAAK,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcFormBoxCopyButton-B2GrmfEz.cjs","sources":["../../src/components/NcFormBoxCopyButton/NcFormBoxCopyButton.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 { whenever } from '@vueuse/core'\nimport NcFormBoxButton from '../NcFormBoxButton/NcFormBoxButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useCopy } from '../../composables/useCopy.ts'\n\nconst props = withDefaults(defineProps<{\n\t/** Copied value's value */\n\tlabel?: string\n\t/** The value to be copied */\n\tvalue: string\n\t/** Native disabled attribute */\n\tdisabled?: boolean\n}>(), {\n\tlabel: undefined,\n\tdisabled: false,\n})\n\nconst emit = defineEmits<{\n\t/** Value has been successfully copied */\n\t(event: 'copy'): void\n}>()\n\nconst { isCopied, copy, icon, altText } = useCopy(() => props.value)\n\nwhenever(isCopied, () => emit('copy'))\n</script>\n\n<template>\n\t<NcFormBoxButton\n\t\t:disabled=\"disabled\"\n\t\tinverted-accent\n\t\t@click=\"copy\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<!-- @slot Custom label content -->\n\t\t\t<span class=\"hidden-visually\">\n\t\t\t\t{{ altText }}\n\t\t\t</span>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #description>\n\t\t\t{{ value }}\n\t\t</template>\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :path=\"icon\" inline />\n\t\t</template>\n\t</NcFormBoxButton>\n</template>\n\n<docs>\n### General\n\n`NcFormBoxButton` set up to be a copy button.\n\n```vue\n<template>\n\t<NcFormGroup label=\"CalDAV\" description=\"Access Nextcloud calendars from other apps and devices\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"CalDAV URL\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/\" />\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"Server Address for iOS and macOS\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/principals/users/user/\" />\n\t\t</NcFormBox>\n\t</NcFormGroup>\n</template>\n```\n</docs>\n"],"names":["useCopy","whenever"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,UAAM,EAAE,UAAU,MAAM,MAAM,YAAYA,QAAAA,QAAQ,MAAM,MAAM,KAAK;AAEnEC,SAAAA,SAAS,UAAU,MAAM,KAAK,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcFormBoxCopyButton-DtJpZ971.mjs → NcFormBoxCopyButton-BkunQ3me.mjs}

@@ -2,7 +2,7 @@ import { defineComponent } from "vue";
 import { whenever } from "@vueuse/core";
 import { N as NcFormBoxButton } from "./NcFormBoxButton-BQi11xQX.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-Bui9PhAS.mjs";
-import { u as useCopy } from "./useCopy-CYjunv08.mjs";
+import { u as useCopy } from "./useCopy-DDDe5RYH.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcFormBoxCopyButton",
@@ -44,4 +44,4 @@ const NcFormBoxCopyButton = __component__.exports;
 export {
   NcFormBoxCopyButton as N
 };
-//# sourceMappingURL=NcFormBoxCopyButton-DtJpZ971.mjs.map
+//# sourceMappingURL=NcFormBoxCopyButton-BkunQ3me.mjs.map

package/dist/chunks/{NcFormBoxCopyButton-DtJpZ971.mjs.map → NcFormBoxCopyButton-BkunQ3me.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcFormBoxCopyButton-DtJpZ971.mjs","sources":["../../src/components/NcFormBoxCopyButton/NcFormBoxCopyButton.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 { whenever } from '@vueuse/core'\nimport NcFormBoxButton from '../NcFormBoxButton/NcFormBoxButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useCopy } from '../../composables/useCopy.ts'\n\nconst props = withDefaults(defineProps<{\n\t/** Copied value's value */\n\tlabel?: string\n\t/** The value to be copied */\n\tvalue: string\n\t/** Native disabled attribute */\n\tdisabled?: boolean\n}>(), {\n\tlabel: undefined,\n\tdisabled: false,\n})\n\nconst emit = defineEmits<{\n\t/** Value has been successfully copied */\n\t(event: 'copy'): void\n}>()\n\nconst { isCopied, copy, icon, altText } = useCopy(() => props.value)\n\nwhenever(isCopied, () => emit('copy'))\n</script>\n\n<template>\n\t<NcFormBoxButton\n\t\t:disabled=\"disabled\"\n\t\tinverted-accent\n\t\t@click=\"copy\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<!-- @slot Custom label content -->\n\t\t\t<span class=\"hidden-visually\">\n\t\t\t\t{{ altText }}\n\t\t\t</span>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #description>\n\t\t\t{{ value }}\n\t\t</template>\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :path=\"icon\" inline />\n\t\t</template>\n\t</NcFormBoxButton>\n</template>\n\n<docs>\n### General\n\n`NcFormBoxButton` set up to be a copy button.\n\n```vue\n<template>\n\t<NcFormGroup label=\"CalDAV\" description=\"Access Nextcloud calendars from other apps and devices\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"CalDAV URL\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/\" />\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"Server Address for iOS and macOS\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/principals/users/user/\" />\n\t\t</NcFormBox>\n\t</NcFormGroup>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA4BA,UAAM,EAAE,UAAU,MAAM,MAAM,YAAY,QAAQ,MAAM,MAAM,KAAK;AAEnE,aAAS,UAAU,MAAM,KAAK,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcFormBoxCopyButton-BkunQ3me.mjs","sources":["../../src/components/NcFormBoxCopyButton/NcFormBoxCopyButton.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 { whenever } from '@vueuse/core'\nimport NcFormBoxButton from '../NcFormBoxButton/NcFormBoxButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useCopy } from '../../composables/useCopy.ts'\n\nconst props = withDefaults(defineProps<{\n\t/** Copied value's value */\n\tlabel?: string\n\t/** The value to be copied */\n\tvalue: string\n\t/** Native disabled attribute */\n\tdisabled?: boolean\n}>(), {\n\tlabel: undefined,\n\tdisabled: false,\n})\n\nconst emit = defineEmits<{\n\t/** Value has been successfully copied */\n\t(event: 'copy'): void\n}>()\n\nconst { isCopied, copy, icon, altText } = useCopy(() => props.value)\n\nwhenever(isCopied, () => emit('copy'))\n</script>\n\n<template>\n\t<NcFormBoxButton\n\t\t:disabled=\"disabled\"\n\t\tinverted-accent\n\t\t@click=\"copy\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<!-- @slot Custom label content -->\n\t\t\t<span class=\"hidden-visually\">\n\t\t\t\t{{ altText }}\n\t\t\t</span>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #description>\n\t\t\t{{ value }}\n\t\t</template>\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :path=\"icon\" inline />\n\t\t</template>\n\t</NcFormBoxButton>\n</template>\n\n<docs>\n### General\n\n`NcFormBoxButton` set up to be a copy button.\n\n```vue\n<template>\n\t<NcFormGroup label=\"CalDAV\" description=\"Access Nextcloud calendars from other apps and devices\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"CalDAV URL\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/\" />\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"Server Address for iOS and macOS\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/principals/users/user/\" />\n\t\t</NcFormBox>\n\t</NcFormGroup>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA4BA,UAAM,EAAE,UAAU,MAAM,MAAM,YAAY,QAAQ,MAAM,MAAM,KAAK;AAEnE,aAAS,UAAU,MAAM,KAAK,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;"}