@nextcloud/vue 8.33.0 → 8.34.0

package/dist/chunks/NcFormBoxButton-DN0-J4yN.mjs

@@ -0,0 +1,138 @@
+import '../assets/NcFormBoxButton-C6EvdLK4.css';
+import { reactive, getCurrentInstance, computed, defineComponent } from "vue";
+import { k as mdiOpenInNew, l as mdiArrowTopRight } from "./mdi-C_j0YT8c.mjs";
+import { toRef } from "@vueuse/core";
+import { N as NcFormBoxItem } from "./NcFormBoxItem-DPBm3ZbJ.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BreCg8pX.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+function useButtonLink(options) {
+  const props = reactive(options);
+  const instance = getCurrentInstance();
+  const hasVueRouterContext = "$router" in instance.proxy.$root;
+  const tag = computed(() => {
+    if (hasVueRouterContext && props.to) {
+      return "RouterLink";
+    } else if (props.href) {
+      return "a";
+    } else {
+      return "button";
+    }
+  });
+  const isLink = computed(() => tag.value === "RouterLink" || tag.value === "a");
+  const isHyperLink = computed(() => tag.value === "a");
+  const isRouterLink = computed(() => tag.value === "RouterLink");
+  const isButton = computed(() => tag.value === "button");
+  const attrs = computed(() => {
+    if (tag.value === "RouterLink") {
+      return {
+        to: props.to,
+        activeClass: "active",
+        ...props.additionalAttrs?.("RouterLink") ?? {}
+      };
+    } else if (tag.value === "a") {
+      return {
+        href: props.href,
+        target: props.target,
+        download: props.download || void 0,
+        rel: "nofollow noreferrer noopener",
+        ...props.additionalAttrs?.("a") ?? {}
+      };
+    } else if (tag.value === "button") {
+      return {
+        type: props.type || "button",
+        disabled: props.disabled,
+        ...props.additionalAttrs?.("button") ?? {}
+      };
+    }
+  });
+  return {
+    tag,
+    isLink,
+    isHyperLink,
+    isRouterLink,
+    isButton,
+    attrs
+  };
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcFormBoxButton",
+  props: {
+    label: { default: void 0 },
+    description: { default: void 0 },
+    invertedAccent: { type: Boolean, default: false },
+    to: { default: void 0 },
+    href: { default: void 0 },
+    target: { default: void 0 },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["click"],
+  setup(__props) {
+    const props = __props;
+    const { tag, attrs, isLink } = useButtonLink({
+      to: toRef(() => props.to),
+      href: toRef(() => props.href),
+      target: toRef(() => props.target),
+      disabled: toRef(() => props.disabled)
+    });
+    const icon = computed(() => {
+      if (isLink.value) {
+        return props.target === "_blank" ? mdiOpenInNew : mdiArrowTopRight;
+      }
+      return void 0;
+    });
+    return { __sfc: true, props, tag, attrs, isLink, icon, NcFormBoxItem, NcIconSvgWrapper };
+  }
+});
+const formBoxButton = "_formBoxButton_15jyc_20";
+const style0 = {
+  "material-design-icon": "_material-design-icon_15jyc_12",
+  formBoxButton
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c(_setup.NcFormBoxItem, _vm._b({ attrs: { "tag": _setup.tag, "item-classes": [
+    "button-vue",
+    /* Reset server's global HTML button styles */
+    _vm.$style.formBoxButton
+  ], "inverted-accent": _vm.invertedAccent, "tabindex": "0" }, on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } }, scopedSlots: _vm._u([_vm.$scopedSlots.default || _vm.label ? { key: "default", fn: function() {
+    return [_vm._t("default", function() {
+      return [_vm._v(" " + _vm._s(_vm.label) + " ")];
+    })];
+  }, proxy: true } : null, _vm.$scopedSlots.description || _vm.description ? { key: "description", fn: function() {
+    return [_vm._t("description", function() {
+      return [_vm._v(" " + _vm._s(_vm.description) + " ")];
+    })];
+  }, proxy: true } : null, _vm.$scopedSlots.icon || _setup.icon ? { key: "icon", fn: function() {
+    return [_vm._t("icon", function() {
+      return [_setup.icon ? _c(_setup.NcIconSvgWrapper, { attrs: { "path": _setup.icon, "inline": "" } }) : _vm._e()];
+    })];
+  }, proxy: true } : null], null, true) }, "NcFormBoxItem", _setup.attrs, false));
+};
+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 NcFormBoxButton = __component__.exports;
+export {
+  NcFormBoxButton as N
+};
+//# sourceMappingURL=NcFormBoxButton-DN0-J4yN.mjs.map

package/dist/chunks/NcFormBoxButton-DN0-J4yN.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxButton-DN0-J4yN.mjs","sources":["../../src/composables/useButtonLink.ts","../../src/components/NcFormBoxButton/NcFormBoxButton.vue"],"sourcesContent":["/*!\n * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { MaybeRef } from '@vueuse/core'\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue'\nimport type { RawLocation } from 'vue-router'\n\nimport { computed, getCurrentInstance, reactive } from 'vue'\n\ntype ButtonLinkProps = {\n\t// Required - general link props\n\n\t/**\n\t * RouterLink's to props and a trigger to use RouterLink.\n\t * Note: This takes precedence over the href attribute.\n\t */\n\tto: MaybeRef<RawLocation | undefined>\n\t/**\n\t * HyperLink href attribute and a trigger to use <a> hyperlink.\n\t */\n\thref: MaybeRef<string | undefined>\n\t/**\n\t * Define additional attributes, based on the tag\n\t */\n\tadditionalAttrs?: (tag: 'RouterLink' | 'a' | 'button') => object | undefined\n\n\t// RouterLink props\n\n\t/**\n\t * RouterLink's activeClass prop\n\t */\n\tactiveClass?: MaybeRef<string | undefined>\n\n\t// Hyperlink\n\n\t/**\n\t * <a> hyperlink's target attribute\n\t */\n\ttarget?: MaybeRef<AnchorHTMLAttributes['target'] | undefined>\n\t/**\n\t * <a> hyperlink's download attribute\n\t */\n\tdownload?: MaybeRef<string | boolean | undefined>\n\n\t// Button\n\n\t/**\n\t * <button> element's type attribute, but default to \"button\" instead of \"submit\"\n\t */\n\ttype?: MaybeRef<ButtonHTMLAttributes['type'] | undefined>\n\t/**\n\t * <button> element's disabled attribute\n\t */\n\tdisabled?: MaybeRef<boolean | undefined>\n}\n\n/**\n * Reusable implementation of an interactive button-like element that can be a link or a button\n *\n * @param options - Props to determine the button/link behavior. Can be a reactive object, or an object with nested refs, or mixed.\n */\nexport function useButtonLink(options: ButtonLinkProps) {\n\t// Resolve all MaybeRef-s values and maybe reactive object via unwrapping\n\tconst props = reactive(options)\n\n\tconst instance = getCurrentInstance()!\n\tconst hasVueRouterContext = '$router' in instance.proxy.$root\n\n\t/**\n\t * Tag name to be used\n\t */\n\tconst tag = computed(() => {\n\t\t// TODO: should we warn if props.to is provided but there is no vue-router?\n\t\tif (hasVueRouterContext && props.to) {\n\t\t\t// Note: RouterLink is used as globally registered component (by name) and not imported intentionally\n\t\t\t// to use injected component from the app and not bundle it to the button\n\t\t\treturn 'RouterLink'\n\t\t} else if (props.href) {\n\t\t\treturn 'a'\n\t\t} else {\n\t\t\treturn 'button'\n\t\t}\n\t})\n\n\tconst isLink = computed(() => tag.value === 'RouterLink' || tag.value === 'a')\n\tconst isHyperLink = computed(() => tag.value === 'a')\n\tconst isRouterLink = computed(() => tag.value === 'RouterLink')\n\tconst isButton = computed(() => tag.value === 'button')\n\n\tconst attrs = computed(() => {\n\t\tif (tag.value === 'RouterLink') {\n\t\t\treturn {\n\t\t\t\tto: props.to,\n\t\t\t\tactiveClass: 'active',\n\t\t\t\t...(props.additionalAttrs?.('RouterLink') ?? {}),\n\t\t\t}\n\t\t} else if (tag.value === 'a') {\n\t\t\treturn {\n\t\t\t\thref: props.href,\n\t\t\t\ttarget: props.target,\n\t\t\t\tdownload: props.download || undefined,\n\t\t\t\trel: 'nofollow noreferrer noopener',\n\t\t\t\t...(props.additionalAttrs?.('a') ?? {}),\n\t\t\t}\n\t\t} else if (tag.value === 'button') {\n\t\t\treturn {\n\t\t\t\ttype: props.type || 'button',\n\t\t\t\tdisabled: props.disabled,\n\t\t\t\t...(props.additionalAttrs?.('button') ?? {}),\n\t\t\t}\n\t\t}\n\t})\n\n\treturn {\n\t\ttag,\n\t\tisLink,\n\t\tisHyperLink,\n\t\tisRouterLink,\n\t\tisButton,\n\t\tattrs,\n\t}\n}\n","<!--\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 { AnchorHTMLAttributes } from 'vue'\nimport type { RawLocation } from 'vue-router'\n\nimport { mdiArrowTopRight, mdiOpenInNew } from '@mdi/js'\nimport { toRef } from '@vueuse/core'\nimport { computed } from 'vue'\nimport NcFormBoxItem from '../NcFormBox/NcFormBoxItem.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useButtonLink } from '../../composables/useButtonLink.ts'\n\nconst props = withDefaults(defineProps<{\n\t/** Main label */\n\tlabel?: string\n\t/** Optional description below the label, also used for the aria-describedby */\n\tdescription?: string\n\t/** Accent on the description instead of the label (see docs) */\n\tinvertedAccent?: boolean\n\t/** RouterLink's `to` prop; when provided, renders as `<RouterLink>` (takes precedence over the `href` prop) */\n\tto?: RawLocation\n\t/** Hyperlink `href` attribute; when provided, renders as `<a>` */\n\thref?: string\n\t/** Hyperlink's target attribute */\n\ttarget?: AnchorHTMLAttributes['target']\n\t/** Button's disabled attribute, not applicable to links */\n\tdisabled?: boolean\n}>(), {\n\tlabel: undefined,\n\tdescription: undefined,\n\tinvertedAccent: false,\n\tto: undefined,\n\thref: undefined,\n\ttarget: undefined, // TODO: should it be _blank by default?\n\tdisabled: false,\n})\n\ndefineEmits<{\n\t/** Native click event */\n\t(e: 'click', event: MouseEvent): void\n}>()\n\nconst { tag, attrs, isLink } = useButtonLink({\n\tto: toRef(() => props.to),\n\thref: toRef(() => props.href),\n\ttarget: toRef(() => props.target),\n\tdisabled: toRef(() => props.disabled),\n})\n\nconst icon = computed(() => {\n\tif (isLink.value) {\n\t\treturn props.target === '_blank' ? mdiOpenInNew : mdiArrowTopRight\n\t}\n\treturn undefined\n})\n</script>\n\n<template>\n\t<NcFormBoxItem\n\t\t:tag=\"tag\"\n\t\t:item-classes=\"[\n\t\t\t'button-vue', /* Reset server's global HTML button styles */\n\t\t\t$style.formBoxButton,\n\t\t]\"\n\t\t:inverted-accent=\"invertedAccent\"\n\t\tv-bind=\"attrs\"\n\t\ttabindex=\"0\"\n\t\t@click=\"$emit('click', $event)\">\n\t\t<template v-if=\"$scopedSlots.default || label\" #default>\n\t\t\t<!-- @slot Custom label content -->\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template v-if=\"$scopedSlots.description || description\" #description>\n\t\t\t<!-- @slot Custom description content -->\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template v-if=\"$scopedSlots.icon || icon\" #icon>\n\t\t\t<!-- @slot Required icon (links have a default icon) -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"icon\" :path=\"icon\" inline />\n\t\t\t</slot>\n\t\t</template>\n\t</NcFormBoxItem>\n</template>\n\n<style lang=\"scss\" module>\n.formBoxButton {\n\t/* Reset default HTML button styles */\n\tbackground: unset;\n\tborder: none;\n\tcolor: inherit;\n\tfont-size: inherit;\n\tfont-weight: inherit;\n\ttext-decoration: none;\n\ttext-align: inherit;\n\tline-height: inherit;\n\tpadding: 0;\n\tmargin: 0;\n\toutline: none;\n}\n</style>\n\n<docs>\n### General\n\nAn interactive button-like item within `<NcFormBox>`. It can be a button or a native link/router link if `to` or `href` props are provided.\n\nLike other form box items, it has a label and an optional description.\n\n```vue\n<script>\nimport { mdiContentCopy, mdiInformationOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiContentCopy,\n\t\t\tmdiInformationOutline,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<NcFormBox>\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"Nextcloud\"\n\t\t\thref=\"https://nextcloud.com\"\n\t\t\ttarget=\"_blank\" />\n\n\t\t<NcFormBoxButton\n\t\t\thref=\"https://nextcloud-vue-components.netlify.app\">\n\t\t\t<code>@nextcloud/vue</code> documentation\n\t\t</NcFormBoxButton>\n\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"About\"\n\t\t\tdescription=\"Installation details\"\n\t\t\thref=\"https://nextcloud.com\"\n\t\t\ttarget=\"_blank\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiInformationOutline\" inline />\n\t\t\t</template>\n\t\t</NcFormBoxButton>\n\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"Public signing key\">\n\t\t\t<template #description>\n\t\t\t\t<code>SSBkb24ndCBrbm93IHdoeSB5b3UgZGVjb2RlZCB0aGlzIHZhbHVlDQrgvLwg44GkIOKXlV/il5Ug4Ly944Gk</code>\n\t\t\t</template>\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiContentCopy\" inline />\n\t\t\t</template>\n\t\t</NcFormBoxButton>\n\t</NcFormBox>\n</template>\n```\n\n### Inverted accent\n\nSometimes the description is more important than the label. In such cases use `inverted-accent` prop.\n\nFor example:\n- **Steps:** the description of the step is more important than the step number\n- **Copy button:** the value being copied is more important than the value label\n- **Folder picker:** the selected folder path is more important than the input label\n\n```vue\n<script>\nimport { mdiContentCopy, mdiDomain, mdiFolderOpenOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn { mdiContentCopy, mdiDomain, mdiFolderOpenOutline }\n\t},\n}\n</script>\n\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: calc(4 * var(--default-grid-baseline));\">\n\t\t<NcFormGroup label=\"Mailvelope\" description=\"A browser extension that enables easy OpenPGP encryption and decryption of emails\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Step 1\"\n\t\t\t\t\tdescription=\"Install the browser extension\"\n\t\t\t\t\thref=\"https://www.mailvelope.com/\"\n\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\tinverted-accent />\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Step 2\"\n\t\t\t\t\tdescription=\"Enable the current domain\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"CalDAV\" description=\"Access Nextcloud calendars from other apps and devices\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"CalDAV URL\"\n\t\t\t\t\tdescription=\"https://cloud.example.com/remote.php/dav/\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiContentCopy\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Server Address for iOS and macOS\"\n\t\t\t\t\tdescription=\"https://cloud.example.com/remote.php/dav/principals/users/user/\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiContentCopy\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"Files\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Attachments folder\"\n\t\t\t\t\tdescription=\"/Talk\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiFolderOpenOutline\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\t</div>\n</template>\n```\n\n### Requirements\n\n- Label is required (`label` prop or the default slot)\n- Icon is required unless there is a default icon (links)\n\n```vue\n<template>\n\t<NcFormBox>\n\t\t<NcFormBoxButton description=\"No label example\">\n\t\t\t<template #icon>\n\t\t\t\t✅\n\t\t\t</template>\n\t\t</NcFormBoxButton>\n\t\t<NcFormBoxButton label=\"No icon example\"/>\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"No icon link example\"\n\t\t\tdescription=\"Links have a default icon\"\n\t\t\thref=\"https://nextcloud.com\"\n\t\t\ttarget=\"_blank\" />\n\t</NcFormBox>\n</template>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAAA;AAAA;AAAA;AAAA;AA+DO,SAAS,cAAc,SAA0B;AAEvD,QAAM,QAAQ,SAAS,OAAO;AAE9B,QAAM,WAAW,mBAAA;AACjB,QAAM,sBAAsB,aAAa,SAAS,MAAM;AAKxD,QAAM,MAAM,SAAS,MAAM;AAE1B,QAAI,uBAAuB,MAAM,IAAI;AAGpC,aAAO;AAAA,IACR,WAAW,MAAM,MAAM;AACtB,aAAO;AAAA,IACR,OAAO;AACN,aAAO;AAAA,IACR;AAAA,EACD,CAAC;AAED,QAAM,SAAS,SAAS,MAAM,IAAI,UAAU,gBAAgB,IAAI,UAAU,GAAG;AAC7E,QAAM,cAAc,SAAS,MAAM,IAAI,UAAU,GAAG;AACpD,QAAM,eAAe,SAAS,MAAM,IAAI,UAAU,YAAY;AAC9D,QAAM,WAAW,SAAS,MAAM,IAAI,UAAU,QAAQ;AAEtD,QAAM,QAAQ,SAAS,MAAM;AAC5B,QAAI,IAAI,UAAU,cAAc;AAC/B,aAAO;AAAA,QACN,IAAI,MAAM;AAAA,QACV,aAAa;AAAA,QACb,GAAI,MAAM,kBAAkB,YAAY,KAAK,CAAA;AAAA,MAAC;AAAA,IAEhD,WAAW,IAAI,UAAU,KAAK;AAC7B,aAAO;AAAA,QACN,MAAM,MAAM;AAAA,QACZ,QAAQ,MAAM;AAAA,QACd,UAAU,MAAM,YAAY;AAAA,QAC5B,KAAK;AAAA,QACL,GAAI,MAAM,kBAAkB,GAAG,KAAK,CAAA;AAAA,MAAC;AAAA,IAEvC,WAAW,IAAI,UAAU,UAAU;AAClC,aAAO;AAAA,QACN,MAAM,MAAM,QAAQ;AAAA,QACpB,UAAU,MAAM;AAAA,QAChB,GAAI,MAAM,kBAAkB,QAAQ,KAAK,CAAA;AAAA,MAAC;AAAA,IAE5C;AAAA,EACD,CAAC;AAED,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEF;;;;;;;;;;;;;;;AC7EA,UAAM,EAAE,KAAK,OAAO,OAAA,IAAW,cAAc;AAAA,MAC5C,IAAI,MAAM,MAAM,MAAM,EAAE;AAAA,MACxB,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,MAC5B,QAAQ,MAAM,MAAM,MAAM,MAAM;AAAA,MAChC,UAAU,MAAM,MAAM,MAAM,QAAQ;AAAA,IAAA,CACpC;AAED,UAAM,OAAO,SAAS,MAAM;AAC3B,UAAI,OAAO,OAAO;AACjB,eAAO,MAAM,WAAW,WAAW,eAAe;AAAA,MACnD;AACA,aAAO;AAAA,IACR,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormBoxCopyButton-CTHelPkb.cjs

@@ -0,0 +1,76 @@
+"use strict";
+const Vue = require("vue");
+const mdi = require("./mdi-CVXTs58m.cjs");
+const core = require("@vueuse/core");
+const NcFormBoxButton = require("./NcFormBoxButton-D-s5mL0c.cjs");
+const NcIconSvgWrapper = require("./NcIconSvgWrapper-D-aKMbf3.cjs");
+const _l10n = require("./_l10n-B4clLGwo.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+_l10n.register();
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+const DELAY = 2e3;
+function useCopy(content) {
+  const isCopied = Vue.ref(false);
+  async function copy() {
+    if (isCopied.value) {
+      return;
+    }
+    const value = core.toValue(content);
+    try {
+      await navigator.clipboard.writeText(value);
+    } catch {
+      prompt("", value);
+    }
+    isCopied.value = true;
+    setTimeout(() => {
+      isCopied.value = false;
+    }, DELAY);
+  }
+  return {
+    isCopied,
+    copy
+  };
+}
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "NcFormBoxCopyButton",
+  props: {
+    label: { default: void 0 },
+    value: null,
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["copy"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const { isCopied, copy } = useCopy(() => props.value);
+    const icon = Vue.computed(() => isCopied.value ? mdi.mdiCheck : mdi.mdiContentCopy);
+    core.whenever(isCopied, () => emit("copy"));
+    return { __sfc: true, props, emit, isCopied, copy, icon, NcFormBoxButton: NcFormBoxButton.NcFormBoxButton, NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper, t: _l10n.t };
+  }
+});
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c(_setup.NcFormBoxButton, { attrs: { "disabled": _vm.disabled, "inverted-accent": "" }, on: { "click": _setup.copy }, scopedSlots: _vm._u([_vm.$slots.default || _vm.label ? { key: "default", fn: function() {
+    return [_c("span", { staticClass: "hidden-visually" }, [_vm._v(" " + _vm._s(_setup.isCopied ? _setup.t("Copied") : _setup.t("Copy to clipboard")) + " ")]), _vm._t("default", function() {
+      return [_vm._v(" " + _vm._s(_vm.label) + " ")];
+    })];
+  }, proxy: true } : null, { key: "description", fn: function() {
+    return [_vm._v(" " + _vm._s(_vm.value) + " ")];
+  }, proxy: true }, { key: "icon", fn: function() {
+    return [_c(_setup.NcIconSvgWrapper, { attrs: { "path": _setup.icon, "inline": "" } })];
+  }, proxy: true }], null, true) });
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const NcFormBoxCopyButton = __component__.exports;
+exports.NcFormBoxCopyButton = NcFormBoxCopyButton;
+//# sourceMappingURL=NcFormBoxCopyButton-CTHelPkb.cjs.map

package/dist/chunks/NcFormBoxCopyButton-CTHelPkb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxCopyButton-CTHelPkb.cjs","sources":["../../src/components/NcFormBoxCopyButton/useCopy.ts","../../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\nimport type { MaybeRefOrGetter } from '@vueuse/core'\n\nimport { toValue } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst DELAY = 2000\n\n/**\n * Copy content to clipboard with copied state\n *\n * @param content - Content to copy\n */\nexport function useCopy(content: MaybeRefOrGetter<string>) {\n\tconst isCopied = ref(false)\n\n\t/**\n\t * Copy the content to clipboard\n\t */\n\tasync function copy() {\n\t\tif (isCopied.value) {\n\t\t\treturn\n\t\t}\n\n\t\tconst value = toValue(content)\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(value)\n\t\t} catch {\n\t\t\t// Fallback for a case when clipboard API is not available or permission denied\n\t\t\tprompt('', value)\n\t\t}\n\n\t\tisCopied.value = true\n\t\tsetTimeout(() => {\n\t\t\tisCopied.value = false\n\t\t}, DELAY)\n\t}\n\n\treturn {\n\t\tisCopied,\n\t\tcopy,\n\t}\n}\n","<!--\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 { mdiCheck, mdiContentCopy } from '@mdi/js'\nimport { whenever } from '@vueuse/core'\nimport { computed } from 'vue'\nimport NcFormBoxButton from '../NcFormBoxButton/NcFormBoxButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.js'\nimport { useCopy } from './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 } = useCopy(() => props.value)\n\nconst icon = computed(() => isCopied.value ? mdiCheck : mdiContentCopy)\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{{ isCopied ? t('Copied') : t('Copy to clipboard') }}\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":["ref","toValue","computed","mdiCheck","mdiContentCopy","whenever"],"mappings":";;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAUA,MAAM,QAAQ;AAOP,SAAS,QAAQ,SAAmC;AAC1D,QAAM,WAAWA,IAAAA,IAAI,KAAK;AAK1B,iBAAe,OAAO;AACrB,QAAI,SAAS,OAAO;AACnB;AAAA,IACD;AAEA,UAAM,QAAQC,KAAAA,QAAQ,OAAO;AAC7B,QAAI;AACH,YAAM,UAAU,UAAU,UAAU,KAAK;AAAA,IAC1C,QAAQ;AAEP,aAAO,IAAI,KAAK;AAAA,IACjB;AAEA,aAAS,QAAQ;AACjB,eAAW,MAAM;AAChB,eAAS,QAAQ;AAAA,IAClB,GAAG,KAAK;AAAA,EACT;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EAAA;AAEF;;;;;;;;;;;ACfA,UAAM,EAAE,UAAU,KAAA,IAAS,QAAQ,MAAM,MAAM,KAAK;AAEpD,UAAM,OAAOC,IAAAA,SAAS,MAAM,SAAS,QAAQC,IAAAA,WAAWC,kBAAc;AAEtEC,SAAAA,SAAS,UAAU,MAAM,KAAK,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormBoxCopyButton-Dwrfiovz.mjs

@@ -0,0 +1,77 @@
+import { ref, defineComponent, computed } from "vue";
+import { a as mdiCheck, j as mdiContentCopy } from "./mdi-C_j0YT8c.mjs";
+import { toValue, whenever } from "@vueuse/core";
+import { N as NcFormBoxButton } from "./NcFormBoxButton-DN0-J4yN.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BreCg8pX.mjs";
+import { r as register, a as t } from "./_l10n-BmKQgz1z.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+register();
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+const DELAY = 2e3;
+function useCopy(content) {
+  const isCopied = ref(false);
+  async function copy() {
+    if (isCopied.value) {
+      return;
+    }
+    const value = toValue(content);
+    try {
+      await navigator.clipboard.writeText(value);
+    } catch {
+      prompt("", value);
+    }
+    isCopied.value = true;
+    setTimeout(() => {
+      isCopied.value = false;
+    }, DELAY);
+  }
+  return {
+    isCopied,
+    copy
+  };
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcFormBoxCopyButton",
+  props: {
+    label: { default: void 0 },
+    value: null,
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["copy"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const { isCopied, copy } = useCopy(() => props.value);
+    const icon = computed(() => isCopied.value ? mdiCheck : mdiContentCopy);
+    whenever(isCopied, () => emit("copy"));
+    return { __sfc: true, props, emit, isCopied, copy, icon, NcFormBoxButton, NcIconSvgWrapper, t };
+  }
+});
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c(_setup.NcFormBoxButton, { attrs: { "disabled": _vm.disabled, "inverted-accent": "" }, on: { "click": _setup.copy }, scopedSlots: _vm._u([_vm.$slots.default || _vm.label ? { key: "default", fn: function() {
+    return [_c("span", { staticClass: "hidden-visually" }, [_vm._v(" " + _vm._s(_setup.isCopied ? _setup.t("Copied") : _setup.t("Copy to clipboard")) + " ")]), _vm._t("default", function() {
+      return [_vm._v(" " + _vm._s(_vm.label) + " ")];
+    })];
+  }, proxy: true } : null, { key: "description", fn: function() {
+    return [_vm._v(" " + _vm._s(_vm.value) + " ")];
+  }, proxy: true }, { key: "icon", fn: function() {
+    return [_c(_setup.NcIconSvgWrapper, { attrs: { "path": _setup.icon, "inline": "" } })];
+  }, proxy: true }], null, true) });
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const NcFormBoxCopyButton = __component__.exports;
+export {
+  NcFormBoxCopyButton as N
+};
+//# sourceMappingURL=NcFormBoxCopyButton-Dwrfiovz.mjs.map

package/dist/chunks/NcFormBoxCopyButton-Dwrfiovz.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxCopyButton-Dwrfiovz.mjs","sources":["../../src/components/NcFormBoxCopyButton/useCopy.ts","../../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\nimport type { MaybeRefOrGetter } from '@vueuse/core'\n\nimport { toValue } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst DELAY = 2000\n\n/**\n * Copy content to clipboard with copied state\n *\n * @param content - Content to copy\n */\nexport function useCopy(content: MaybeRefOrGetter<string>) {\n\tconst isCopied = ref(false)\n\n\t/**\n\t * Copy the content to clipboard\n\t */\n\tasync function copy() {\n\t\tif (isCopied.value) {\n\t\t\treturn\n\t\t}\n\n\t\tconst value = toValue(content)\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(value)\n\t\t} catch {\n\t\t\t// Fallback for a case when clipboard API is not available or permission denied\n\t\t\tprompt('', value)\n\t\t}\n\n\t\tisCopied.value = true\n\t\tsetTimeout(() => {\n\t\t\tisCopied.value = false\n\t\t}, DELAY)\n\t}\n\n\treturn {\n\t\tisCopied,\n\t\tcopy,\n\t}\n}\n","<!--\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 { mdiCheck, mdiContentCopy } from '@mdi/js'\nimport { whenever } from '@vueuse/core'\nimport { computed } from 'vue'\nimport NcFormBoxButton from '../NcFormBoxButton/NcFormBoxButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.js'\nimport { useCopy } from './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 } = useCopy(() => props.value)\n\nconst icon = computed(() => isCopied.value ? mdiCheck : mdiContentCopy)\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{{ isCopied ? t('Copied') : t('Copy to clipboard') }}\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":";;;;;;;;AAAA;AAAA;AAAA;AAAA;AAUA,MAAM,QAAQ;AAOP,SAAS,QAAQ,SAAmC;AAC1D,QAAM,WAAW,IAAI,KAAK;AAK1B,iBAAe,OAAO;AACrB,QAAI,SAAS,OAAO;AACnB;AAAA,IACD;AAEA,UAAM,QAAQ,QAAQ,OAAO;AAC7B,QAAI;AACH,YAAM,UAAU,UAAU,UAAU,KAAK;AAAA,IAC1C,QAAQ;AAEP,aAAO,IAAI,KAAK;AAAA,IACjB;AAEA,aAAS,QAAQ;AACjB,eAAW,MAAM;AAChB,eAAS,QAAQ;AAAA,IAClB,GAAG,KAAK;AAAA,EACT;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EAAA;AAEF;;;;;;;;;;;ACfA,UAAM,EAAE,UAAU,KAAA,IAAS,QAAQ,MAAM,MAAM,KAAK;AAEpD,UAAM,OAAO,SAAS,MAAM,SAAS,QAAQ,WAAW,cAAc;AAEtE,aAAS,UAAU,MAAM,KAAK,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormBoxItem-CtrbGjnv.cjs

@@ -0,0 +1,86 @@
+require('../assets/NcFormBoxItem-j2nGdOvd.css');
+"use strict";
+const Vue = require("vue");
+const useNcFormBox = require("./useNcFormBox-DQeOEuQp.cjs");
+const createElementId = require("./createElementId-lalylSCf.cjs");
+const legacy = require("./legacy-KBXhWdRy.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const __default__ = {
+  inheritAttrs: false
+};
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  ...__default__,
+  __name: "NcFormBoxItem",
+  props: {
+    tag: null,
+    label: { default: void 0 },
+    description: { default: void 0 },
+    invertedAccent: { type: Boolean, default: false },
+    itemClasses: { default: void 0 }
+  },
+  emits: ["click"],
+  setup(__props) {
+    const props = __props;
+    const slots = Vue.useSlots();
+    const { formBoxItemClass } = useNcFormBox.useNcFormBox();
+    const descriptionId = createElementId.createElementId();
+    const hasDescription = () => !!props.description || !!slots.description;
+    return { __sfc: true, props, slots, formBoxItemClass, descriptionId, hasDescription, isLegacy32: legacy.isLegacy32 };
+  }
+});
+const formBoxItem = "_formBoxItem_pugbs_20";
+const formBoxItem_legacy = "_formBoxItem_legacy_pugbs_60";
+const formBoxItem_inverted = "_formBoxItem_inverted_pugbs_64";
+const formBoxItem__element = "_formBoxItem__element_pugbs_64";
+const formBoxItem__description = "_formBoxItem__description_pugbs_67";
+const formBoxItem__content = "_formBoxItem__content_pugbs_71";
+const formBoxItem__icon = "_formBoxItem__icon_pugbs_89";
+const style0 = {
+  "material-design-icon": "_material-design-icon_pugbs_12",
+  formBoxItem,
+  formBoxItem_legacy,
+  formBoxItem_inverted,
+  formBoxItem__element,
+  formBoxItem__description,
+  formBoxItem__content,
+  formBoxItem__icon
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("div", { class: [
+    _vm.$style.formBoxItem,
+    _setup.formBoxItemClass,
+    {
+      [_vm.$style.formBoxItem_inverted]: _vm.invertedAccent && _setup.hasDescription(),
+      [_vm.$style.formBoxItem_legacy]: _setup.isLegacy32
+    }
+  ] }, [_c("span", { class: _vm.$style.formBoxItem__content }, [_c(_vm.tag, _vm._b({ tag: "component", class: [_vm.$style.formBoxItem__element, _vm.itemClasses], on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "component", _vm.$attrs, false), [_vm._t("default", function() {
+    return [_vm._v(" " + _vm._s(_vm.label || "⚠️ Label is missing") + " ")];
+  }, { "descriptionId": _setup.descriptionId })], 2), _setup.hasDescription() ? _c("span", { class: _vm.$style.formBoxItem__description, attrs: { "id": _setup.descriptionId } }, [_vm._t("description", function() {
+    return [_vm._v(" " + _vm._s(_vm.description) + " ")];
+  })], 2) : _vm._e()], 1), _c("span", { class: _vm.$style.formBoxItem__icon }, [_vm._t("icon", function() {
+    return [_vm._v(" ⚠️ Icon is missing ")];
+  }, { "descriptionId": _setup.descriptionId })], 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 NcFormBoxItem = __component__.exports;
+exports.NcFormBoxItem = NcFormBoxItem;
+//# sourceMappingURL=NcFormBoxItem-CtrbGjnv.cjs.map

package/dist/chunks/NcFormBoxItem-CtrbGjnv.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxItem-CtrbGjnv.cjs","sources":["../../src/components/NcFormBox/NcFormBoxItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script lang=\"ts\">\nexport default {\n\tinheritAttrs: false,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { useSlots } from 'vue'\nimport { useNcFormBox } from '../../components/NcFormBox/useNcFormBox.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy32 } from '../../utils/legacy.ts'\n\nconst props = withDefaults(defineProps<{\n\t/** Interactive item element's tag */\n\ttag: string\n\t/** Main Label */\n\tlabel?: string\n\t/** Optional description below the label, also used for the aria-describedby */\n\tdescription?: string\n\t/** Accent on the description instead of the label */\n\tinvertedAccent?: boolean\n\t/** Interactive item classes */\n\titemClasses?: VueClassType\n}>(), {\n\tlabel: undefined,\n\tdescription: undefined,\n\tinvertedAccent: false,\n\tclass: undefined,\n\titemClasses: undefined,\n})\n\ndefineEmits<{\n\t/** Click on the item */\n\t(e: 'click', event: MouseEvent): void\n}>()\n\nconst slots = useSlots()\n\nconst { formBoxItemClass } = useNcFormBox()\n\nconst descriptionId = createElementId()\nconst hasDescription = () => !!props.description || !!slots.description\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[\n\t\t\t$style.formBoxItem,\n\t\t\tformBoxItemClass,\n\t\t\t{\n\t\t\t\t[$style.formBoxItem_inverted]: invertedAccent && hasDescription(),\n\t\t\t\t[$style.formBoxItem_legacy]: isLegacy32,\n\t\t\t},\n\t\t]\">\n\t\t<span :class=\"$style.formBoxItem__content\">\n\t\t\t<component\n\t\t\t\t:is=\"tag\"\n\t\t\t\t:class=\"[$style.formBoxItem__element, itemClasses]\"\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t@click=\"$emit('click', $event)\">\n\t\t\t\t<!-- @slot Item's label custom content\n\t\t\t\t     @binding {string} descriptionId IDRef of the description element if present -->\n\t\t\t\t<slot :description-id=\"descriptionId\">\n\t\t\t\t\t{{ label || '⚠️ Label is missing' }}\n\t\t\t\t</slot>\n\t\t\t</component>\n\t\t\t<span v-if=\"hasDescription()\" :id=\"descriptionId\" :class=\"$style.formBoxItem__description\">\n\t\t\t\t<!-- @slot Custom description content\n\t\t\t\t     @binding {string} descriptionId IDRef of the description element if present -->\n\t\t\t\t<slot name=\"description\">\n\t\t\t\t\t{{ description }}\n\t\t\t\t</slot>\n\t\t\t</span>\n\t\t</span>\n\t\t<span :class=\"$style.formBoxItem__icon\">\n\t\t\t<!-- @slot Icon content -->\n\t\t\t<slot name=\"icon\" :description-id=\"descriptionId\">\n\t\t\t\t⚠️ Icon is missing\n\t\t\t</slot>\n\t\t</span>\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.formBoxItem {\n\t--nc-form-box-item-border-width: 1px;\n\t--nc-form-box-item-min-height: 40px; // Special size defined by the design\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\t--form-element-label-padding: calc(var(--form-element-label-offset) - var(--nc-form-box-item-border-width));\n\t// New colors we don't yet have in theming\n\t// TODO: add new colors to the theming\n\t--color-primary-element-extra-light: hsl(from var(--color-primary-element-light) h s calc(l * 1.045));\n\t--color-primary-element-extra-light-hover: hsl(from var(--color-primary-element-light-hover) h s calc(l * 1.045));\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: calc(2 * var(--default-grid-baseline));\n\tmin-height: var(--nc-form-box-item-min-height);\n\tpadding-inline: var(--form-element-label-padding);\n\tborder: 1px solid var(--color-primary-element-extra-light-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--border-radius-element);\n\tbackground-color: var(--color-primary-element-extra-light);\n\tcolor: var(--color-primary-element-light-text);\n\ttransition-property: color, border-color, background-color;\n\ttransition-duration: var(--animation-quick);\n\ttransition-timing-function: linear;\n\t-webkit-user-select: none;\n\tuser-select: none;\n\tcursor: pointer;\n\n\t* {\n\t\tcursor: inherit;\n\t}\n\n\t&:has(:disabled) {\n\t\tcursor: default;\n\t\topacity: 0.5;\n\t}\n\n\t&:hover:not(:has(:disabled)) {\n\t\tcolor: var(--color-primary-element-light-text);\n\t\tbackground-color: var(--color-primary-element-extra-light-hover);\n\t}\n\n\t&:has(:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&.formBoxItem_legacy {\n\t\t--nc-form-box-item-border-width: 0px;\n\t\tborder: none;\n\t}\n\n\t&.formBoxItem_inverted {\n\t\t.formBoxItem__element {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t.formBoxItem__description {\n\t\t\tcolor: inherit;\n\t\t}\n\t}\n}\n\n.formBoxItem__content {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding-block: calc(2 * var(--default-grid-baseline));\n\toverflow-wrap: anywhere;\n}\n\n// A trick for accessibility:\n// make entire component clickable while internally splitting the interactive item and the description\n.formBoxItem__element::after {\n\tcontent: '';\n\tposition: absolute;\n\tinset: 0;\n}\n\n.formBoxItem__description {\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.formBoxItem__icon {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n}\n</style>\n\n<docs>\nAn internal component\n</docs>\n"],"names":["useSlots","useNcFormBox","createElementId"],"mappings":";;;;;;AAMA,MAAA,cAAe;AAAA,EACd,cAAc;AACf;;;;;;;;;;;;;;AAmCA,UAAM,QAAQA,IAAAA,SAAA;AAEd,UAAM,EAAE,iBAAA,IAAqBC,0BAAA;AAE7B,UAAM,gBAAgBC,gBAAAA,gBAAA;AACtB,UAAM,iBAAiB,MAAM,CAAC,CAAC,MAAM,eAAe,CAAC,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormBoxItem-DPBm3ZbJ.mjs

@@ -0,0 +1,87 @@
+import '../assets/NcFormBoxItem-j2nGdOvd.css';
+import { defineComponent, useSlots } from "vue";
+import { u as useNcFormBox } from "./useNcFormBox-DA9iwXWY.mjs";
+import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+import { i as isLegacy32 } from "./legacy-MK4GvP26.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+const __default__ = {
+  inheritAttrs: false
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "NcFormBoxItem",
+  props: {
+    tag: null,
+    label: { default: void 0 },
+    description: { default: void 0 },
+    invertedAccent: { type: Boolean, default: false },
+    itemClasses: { default: void 0 }
+  },
+  emits: ["click"],
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const { formBoxItemClass } = useNcFormBox();
+    const descriptionId = createElementId();
+    const hasDescription = () => !!props.description || !!slots.description;
+    return { __sfc: true, props, slots, formBoxItemClass, descriptionId, hasDescription, isLegacy32 };
+  }
+});
+const formBoxItem = "_formBoxItem_pugbs_20";
+const formBoxItem_legacy = "_formBoxItem_legacy_pugbs_60";
+const formBoxItem_inverted = "_formBoxItem_inverted_pugbs_64";
+const formBoxItem__element = "_formBoxItem__element_pugbs_64";
+const formBoxItem__description = "_formBoxItem__description_pugbs_67";
+const formBoxItem__content = "_formBoxItem__content_pugbs_71";
+const formBoxItem__icon = "_formBoxItem__icon_pugbs_89";
+const style0 = {
+  "material-design-icon": "_material-design-icon_pugbs_12",
+  formBoxItem,
+  formBoxItem_legacy,
+  formBoxItem_inverted,
+  formBoxItem__element,
+  formBoxItem__description,
+  formBoxItem__content,
+  formBoxItem__icon
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c("div", { class: [
+    _vm.$style.formBoxItem,
+    _setup.formBoxItemClass,
+    {
+      [_vm.$style.formBoxItem_inverted]: _vm.invertedAccent && _setup.hasDescription(),
+      [_vm.$style.formBoxItem_legacy]: _setup.isLegacy32
+    }
+  ] }, [_c("span", { class: _vm.$style.formBoxItem__content }, [_c(_vm.tag, _vm._b({ tag: "component", class: [_vm.$style.formBoxItem__element, _vm.itemClasses], on: { "click": function($event) {
+    return _vm.$emit("click", $event);
+  } } }, "component", _vm.$attrs, false), [_vm._t("default", function() {
+    return [_vm._v(" " + _vm._s(_vm.label || "⚠️ Label is missing") + " ")];
+  }, { "descriptionId": _setup.descriptionId })], 2), _setup.hasDescription() ? _c("span", { class: _vm.$style.formBoxItem__description, attrs: { "id": _setup.descriptionId } }, [_vm._t("description", function() {
+    return [_vm._v(" " + _vm._s(_vm.description) + " ")];
+  })], 2) : _vm._e()], 1), _c("span", { class: _vm.$style.formBoxItem__icon }, [_vm._t("icon", function() {
+    return [_vm._v(" ⚠️ Icon is missing ")];
+  }, { "descriptionId": _setup.descriptionId })], 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 NcFormBoxItem = __component__.exports;
+export {
+  NcFormBoxItem as N
+};
+//# sourceMappingURL=NcFormBoxItem-DPBm3ZbJ.mjs.map

package/dist/chunks/NcFormBoxItem-DPBm3ZbJ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcFormBoxItem-DPBm3ZbJ.mjs","sources":["../../src/components/NcFormBox/NcFormBoxItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script lang=\"ts\">\nexport default {\n\tinheritAttrs: false,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { useSlots } from 'vue'\nimport { useNcFormBox } from '../../components/NcFormBox/useNcFormBox.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy32 } from '../../utils/legacy.ts'\n\nconst props = withDefaults(defineProps<{\n\t/** Interactive item element's tag */\n\ttag: string\n\t/** Main Label */\n\tlabel?: string\n\t/** Optional description below the label, also used for the aria-describedby */\n\tdescription?: string\n\t/** Accent on the description instead of the label */\n\tinvertedAccent?: boolean\n\t/** Interactive item classes */\n\titemClasses?: VueClassType\n}>(), {\n\tlabel: undefined,\n\tdescription: undefined,\n\tinvertedAccent: false,\n\tclass: undefined,\n\titemClasses: undefined,\n})\n\ndefineEmits<{\n\t/** Click on the item */\n\t(e: 'click', event: MouseEvent): void\n}>()\n\nconst slots = useSlots()\n\nconst { formBoxItemClass } = useNcFormBox()\n\nconst descriptionId = createElementId()\nconst hasDescription = () => !!props.description || !!slots.description\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[\n\t\t\t$style.formBoxItem,\n\t\t\tformBoxItemClass,\n\t\t\t{\n\t\t\t\t[$style.formBoxItem_inverted]: invertedAccent && hasDescription(),\n\t\t\t\t[$style.formBoxItem_legacy]: isLegacy32,\n\t\t\t},\n\t\t]\">\n\t\t<span :class=\"$style.formBoxItem__content\">\n\t\t\t<component\n\t\t\t\t:is=\"tag\"\n\t\t\t\t:class=\"[$style.formBoxItem__element, itemClasses]\"\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t@click=\"$emit('click', $event)\">\n\t\t\t\t<!-- @slot Item's label custom content\n\t\t\t\t     @binding {string} descriptionId IDRef of the description element if present -->\n\t\t\t\t<slot :description-id=\"descriptionId\">\n\t\t\t\t\t{{ label || '⚠️ Label is missing' }}\n\t\t\t\t</slot>\n\t\t\t</component>\n\t\t\t<span v-if=\"hasDescription()\" :id=\"descriptionId\" :class=\"$style.formBoxItem__description\">\n\t\t\t\t<!-- @slot Custom description content\n\t\t\t\t     @binding {string} descriptionId IDRef of the description element if present -->\n\t\t\t\t<slot name=\"description\">\n\t\t\t\t\t{{ description }}\n\t\t\t\t</slot>\n\t\t\t</span>\n\t\t</span>\n\t\t<span :class=\"$style.formBoxItem__icon\">\n\t\t\t<!-- @slot Icon content -->\n\t\t\t<slot name=\"icon\" :description-id=\"descriptionId\">\n\t\t\t\t⚠️ Icon is missing\n\t\t\t</slot>\n\t\t</span>\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.formBoxItem {\n\t--nc-form-box-item-border-width: 1px;\n\t--nc-form-box-item-min-height: 40px; // Special size defined by the design\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\t--form-element-label-padding: calc(var(--form-element-label-offset) - var(--nc-form-box-item-border-width));\n\t// New colors we don't yet have in theming\n\t// TODO: add new colors to the theming\n\t--color-primary-element-extra-light: hsl(from var(--color-primary-element-light) h s calc(l * 1.045));\n\t--color-primary-element-extra-light-hover: hsl(from var(--color-primary-element-light-hover) h s calc(l * 1.045));\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: calc(2 * var(--default-grid-baseline));\n\tmin-height: var(--nc-form-box-item-min-height);\n\tpadding-inline: var(--form-element-label-padding);\n\tborder: 1px solid var(--color-primary-element-extra-light-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--border-radius-element);\n\tbackground-color: var(--color-primary-element-extra-light);\n\tcolor: var(--color-primary-element-light-text);\n\ttransition-property: color, border-color, background-color;\n\ttransition-duration: var(--animation-quick);\n\ttransition-timing-function: linear;\n\t-webkit-user-select: none;\n\tuser-select: none;\n\tcursor: pointer;\n\n\t* {\n\t\tcursor: inherit;\n\t}\n\n\t&:has(:disabled) {\n\t\tcursor: default;\n\t\topacity: 0.5;\n\t}\n\n\t&:hover:not(:has(:disabled)) {\n\t\tcolor: var(--color-primary-element-light-text);\n\t\tbackground-color: var(--color-primary-element-extra-light-hover);\n\t}\n\n\t&:has(:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&.formBoxItem_legacy {\n\t\t--nc-form-box-item-border-width: 0px;\n\t\tborder: none;\n\t}\n\n\t&.formBoxItem_inverted {\n\t\t.formBoxItem__element {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t.formBoxItem__description {\n\t\t\tcolor: inherit;\n\t\t}\n\t}\n}\n\n.formBoxItem__content {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding-block: calc(2 * var(--default-grid-baseline));\n\toverflow-wrap: anywhere;\n}\n\n// A trick for accessibility:\n// make entire component clickable while internally splitting the interactive item and the description\n.formBoxItem__element::after {\n\tcontent: '';\n\tposition: absolute;\n\tinset: 0;\n}\n\n.formBoxItem__description {\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.formBoxItem__icon {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n}\n</style>\n\n<docs>\nAn internal component\n</docs>\n"],"names":[],"mappings":";;;;;AAMA,MAAA,cAAe;AAAA,EACd,cAAc;AACf;;;;;;;;;;;;;;AAmCA,UAAM,QAAQ,SAAA;AAEd,UAAM,EAAE,iBAAA,IAAqB,aAAA;AAE7B,UAAM,gBAAgB,gBAAA;AACtB,UAAM,iBAAiB,MAAM,CAAC,CAAC,MAAM,eAAe,CAAC,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormBoxSwitch-CM3WaFkA.cjs

@@ -0,0 +1,96 @@
+require('../assets/NcFormBoxSwitch-BmyNQCbA.css');
+"use strict";
+const Vue = require("vue");
+const mdi = require("./mdi-CVXTs58m.cjs");
+const core = require("@vueuse/core");
+const NcFormBoxItem = require("./NcFormBoxItem-CtrbGjnv.cjs");
+const NcIconSvgWrapper = require("./NcIconSvgWrapper-D-aKMbf3.cjs");
+const createElementId = require("./createElementId-lalylSCf.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const __default__ = {
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+};
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  ...__default__,
+  __name: "NcFormBoxSwitch",
+  props: {
+    label: { default: void 0 },
+    description: { default: void 0 },
+    disabled: { type: Boolean, default: false },
+    modelValue: { type: Boolean }
+  },
+  emits: ["enable", "disable", "update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const model = core.useVModel(props, "modelValue", emit);
+    const inputId = createElementId.createElementId();
+    Vue.watch(model, () => {
+      if (model.value) {
+        emit("enable");
+      } else {
+        emit("disable");
+      }
+    }, {
+      // defineModel emits update:modelValue synchronously
+      // Watching it synchronously to emit the enable/disable events together with the update:modelValue event
+      flush: "sync"
+    });
+    return { __sfc: true, props, emit, model, inputId, mdiToggleSwitch: mdi.mdiToggleSwitch, mdiToggleSwitchOff: mdi.mdiToggleSwitchOff, NcFormBoxItem: NcFormBoxItem.NcFormBoxItem, NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper };
+  }
+});
+const formBoxSwitch__input = "_formBoxSwitch__input_hjv1a_20";
+const formBoxSwitch__icon = "_formBoxSwitch__icon_hjv1a_34";
+const style0 = {
+  "material-design-icon": "_material-design-icon_hjv1a_12",
+  formBoxSwitch__input,
+  formBoxSwitch__icon
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c(_setup.NcFormBoxItem, { attrs: { "tag": "label", "for": _setup.inputId }, scopedSlots: _vm._u([_vm.$slots.default || _vm.label ? { key: "default", fn: function() {
+    return [_vm._t("default", function() {
+      return [_vm._v(" " + _vm._s(_vm.label) + " ")];
+    })];
+  }, proxy: true } : null, _vm.$slots.description || _vm.description ? { key: "description", fn: function() {
+    return [_vm._t("description", function() {
+      return [_vm._v(" " + _vm._s(_vm.description) + " ")];
+    })];
+  }, proxy: true } : null, { key: "icon", fn: function({ descriptionId }) {
+    return [_c("input", { directives: [{ name: "model", rawName: "v-model", value: _setup.model, expression: "model" }], class: _vm.$style.formBoxSwitch__input, attrs: { "id": _setup.inputId, "type": "checkbox", "role": "switch", "aria-describedby": descriptionId, "disabled": _vm.disabled }, domProps: { "checked": Array.isArray(_setup.model) ? _vm._i(_setup.model, null) > -1 : _setup.model }, on: { "change": function($event) {
+      var $$a = _setup.model, $$el = $event.target, $$c = $$el.checked ? true : false;
+      if (Array.isArray($$a)) {
+        var $$v = null, $$i = _vm._i($$a, $$v);
+        if ($$el.checked) {
+          $$i < 0 && (_setup.model = $$a.concat([$$v]));
+        } else {
+          $$i > -1 && (_setup.model = $$a.slice(0, $$i).concat($$a.slice($$i + 1)));
+        }
+      } else {
+        _setup.model = $$c;
+      }
+    } } }), _c(_setup.NcIconSvgWrapper, { class: _vm.$style.formBoxSwitch__icon, attrs: { "path": _setup.model ? _setup.mdiToggleSwitch : _setup.mdiToggleSwitchOff, "size": 34, "inline": "" } })];
+  } }], null, true) });
+};
+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 NcFormBoxSwitch = __component__.exports;
+exports.NcFormBoxSwitch = NcFormBoxSwitch;
+//# sourceMappingURL=NcFormBoxSwitch-CM3WaFkA.cjs.map