@nextcloud/vue 9.0.0-alpha.2 → 9.0.0-alpha.4

package/dist/chunks/NcActionButton-Bqkgltcz.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionButton-Bqkgltcz.mjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"showMessage('Delete and close menu')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete and close\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :is-menu=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCreate\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :disabled=\"true\" @click=\"showMessage('Disabled')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDisabled button\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\nIf you're using a long text you can specify a name\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton name=\"Long button\" @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis button is associated with a very long text.\\nAnd with new lines too.\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nAction icon attribute with a single action\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nYou can also use a custom icon, for example from the vue-material-design-icons library:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise left hand\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise right hand\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\n\t},\n}\n</script>\n```\n\n### With different model behavior\nBy default the button will act like a normal button, but it is also possible to change the behavior to a toggle button, checkbox button or radio button.\n\nFor example to have the button act like a toggle button just set the `modelValue` property to the toggle state:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton v-model=\"fullscreen\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t}\n\t},\n}\n</script>\n```\n\nAnother example would be using it with checkbox semantics, to enable or disable features.\nThis also allows tri-state behavior (`true`, `false`, `null`) in which case `aria-checked` will be either `true`, `false` or `mixed`.\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton v-model=\"handRaised\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise hand\n\t\t</NcActionButton>\n\t\t<NcActionButton v-model=\"fullscreen\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t\thandRaised: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nIt is also possible to use the button with radio semantics, this is only possible in menus and not for inline actions!\n\nWith a string `modelValue`, checked state is determined by the `value` property and updates `modelValue` with the new `value` string.\n\nWith a boolean `modelValue`, checked state is determined by `modelValue` and updates to `true` on check.\n\nNote: unlike native radio buttons, `NcActionButton` are not grouped by name, so you need to connect them by bind correct `modelValue``.\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions>\n\t\t\t<NcActionButton v-model=\"payment\" type=\"radio\" value=\"cash\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cash :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay with cash\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton v-model=\"payment\" type=\"radio\" value=\"card\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CreditCard :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay by card\n\t\t\t</NcActionButton>\n\t\t\t<NcActionSeparator />\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isLeft\" @update:modelValue=\"setAlign('Left', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignLeft :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tLeft\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isCenter\" @update:modelValue=\"setAlign('Center', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignCenter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCenter\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isRight\" @update:modelValue=\"setAlign('Right', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tRight\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t\t<p>payment = \"{{ payment }}\"</p>\n\t\t<p>align.isLeft = {{ align.isLeft }}</p>\n\t\t<p>align.isCenter = {{ align.isCenter }}</p>\n\t\t<p>align.isRight = {{ align.isRight }}</p>\n\t</div>\n</template>\n<script>\nimport Cash from 'vue-material-design-icons/Cash.vue'\nimport CreditCard from 'vue-material-design-icons/CreditCard.vue'\nimport FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'\nimport FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'\nimport FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tCash,\n\t\tCreditCard,\n\t\tFormatAlignLeft,\n\t\tFormatAlignCenter,\n\t\tFormatAlignRight,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tpayment: 'card',\n\t\t\talign: {\n\t\t\t\tisLeft: false,\n\t\t\t\tisCenter: true,\n\t\t\t\tisRight: false,\n\t\t\t},\n\t\t}\n\t},\n\tmethods: {\n\t\tsetAlign(direction, value) {\n\t\t\tthis.align.isLeft = false\n\t\t\tthis.align.isCenter = false\n\t\t\tthis.align.isRight = false\n\t\t\tthis.align[`is${direction}`] = value\n\t\t},\n\t}\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<button :aria-label=\"ariaLabel\"\n\t\t\t:class=\"['action-button button-vue', {\n\t\t\t\t'action-button--active': isChecked,\n\t\t\t\tfocusable: isFocusable,\n\t\t\t}]\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:title=\"title\"\n\t\t\t:type=\"nativeType\"\n\t\t\tv-bind=\"buttonAttributes\"\n\t\t\t@click=\"handleClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-button__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass=\"action-button__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span v-if=\"name\"\n\t\t\t\tclass=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-button__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-button__text\">{{ text }}</span>\n\n\t\t\t<!-- right arrow icon when there is a sub-menu -->\n\t\t\t<ChevronRightIcon v-if=\"isMenu\" :size=\"20\" class=\"action-button__menu-icon\" />\n\t\t\t<CheckIcon v-else-if=\"isChecked === true\" :size=\"20\" class=\"action-button__pressed-icon\" />\n\t\t\t<span v-else-if=\"isChecked === false\" class=\"action-button__pressed-icon material-design-icon\" />\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport CheckIcon from 'vue-material-design-icons/Check.vue'\nimport ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'\nimport ActionTextMixin from '../../mixins/actionText.js'\n\n/**\n * Button component to be used in Actions\n */\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tCheckIcon,\n\t\tChevronRightIcon,\n\t},\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the action button\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * If this is a menu, a chevron icon will\n\t\t * be added at the end of the line\n\t\t */\n\t\tisMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The button's behavior, by default the button acts like a normal button with optional toggle button behavior if `modelValue` is `true` or `false`.\n\t\t * But you can also set to checkbox button behavior with tri-state or radio button like behavior.\n\t\t * This extends the native HTML button type attribute.\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'button',\n\t\t\tvalidator: (behavior) => ['button', 'checkbox', 'radio', 'reset', 'submit'].includes(behavior),\n\t\t},\n\n\t\t/**\n\t\t * The buttons state if `type` is 'checkbox' or 'radio' (meaning if it is pressed / selected).\n\t\t * For checkbox and toggle button behavior - boolean value.\n\t\t * For radio button behavior - could be a boolean checked or a string with the value of the button.\n\t\t * Note: Unlike native radio buttons, NcActionButton are not grouped by name, so you need to connect them by bind correct modelValue.\n\t\t *\n\t\t *  **This is not availabe for `type='submit'` or `type='reset'`**\n\t\t *\n\t\t * If using `type='checkbox'` a `model-value` of `true` means checked, `false` means unchecked and `null` means indeterminate (tri-state)\n\t\t * For `type='radio'` `null` is equal to `false`\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The value used for the `modelValue` when this component is used with radio behavior\n\t\t * Similar to the `value` attribute of `<input type=\"radio\">`\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: ['update:modelValue'],\n\n\tcomputed: {\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\t/**\n\t\t * The current \"checked\" or \"pressed\" state for the model behavior\n\t\t */\n\t\tisChecked() {\n\t\t\tif (this.type === 'radio' && typeof this.modelValue !== 'boolean') {\n\t\t\t\treturn this.modelValue === this.value\n\t\t\t}\n\t\t\treturn this.modelValue\n\t\t},\n\n\t\t/**\n\t\t * The native HTML type to set on the button\n\t\t */\n\t\tnativeType() {\n\t\t\tif (this.type === 'submit' || this.type === 'reset') {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn 'button'\n\t\t},\n\n\t\t/**\n\t\t * HTML attributes to bind to the <button>\n\t\t */\n\t\tbuttonAttributes() {\n\t\t\tconst attributes = {}\n\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\t// By default it needs to be a menu item in semantic menus\n\t\t\t\tattributes.role = 'menuitem'\n\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tattributes.role = 'menuitemradio'\n\t\t\t\t\tattributes['aria-checked'] = this.isChecked ? 'true' : 'false'\n\t\t\t\t} else if (this.type === 'checkbox' || (this.nativeType === 'button' && this.modelValue !== null)) {\n\t\t\t\t\t// either if checkbox behavior was set or the model value is not unset\n\t\t\t\t\tattributes.role = 'menuitemcheckbox'\n\t\t\t\t\tattributes['aria-checked'] = this.modelValue === null ? 'mixed' : (this.modelValue ? 'true' : 'false')\n\t\t\t\t}\n\t\t\t} else if (this.modelValue !== null && this.nativeType === 'button') {\n\t\t\t\t// In case this has a modelValue it is considered a toggle button, so we need to set the aria-pressed\n\t\t\t\tattributes['aria-pressed'] = this.modelValue ? 'true' : 'false'\n\t\t\t}\n\n\t\t\treturn attributes\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Forward click event, let mixin handle the close-after-click and emit new modelValue if needed\n\t\t * @param {MouseEvent} event The click event\n\t\t */\n\t\thandleClick(event) {\n\t\t\tthis.onClick(event)\n\t\t\t// If modelValue or type is set (so modelValue might be null for tri-state) we need to update it\n\t\t\tif (this.modelValue !== null || this.type !== 'button') {\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tif (typeof this.modelValue !== 'boolean') {\n\t\t\t\t\t\t// String-value radios behavior is similar to native - click on checked radio does nothing\n\t\t\t\t\t\tif (!this.isChecked) {\n\t\t\t\t\t\t\tthis.$emit('update:modelValue', this.value)\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Boolean radio allows to uncheck\n\t\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Checkbox toggles value\n\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n\n.action-button__pressed-icon {\n\tmargin-left: auto;\n\tmargin-right: -$icon-margin;\n}\n</style>\n"],"names":["CheckIcon","ChevronRightIcon","_createElementVNode","_createElementBlock","_normalizeClass","_mergeProps","_renderSlot","_normalizeStyle","_openBlock","_toDisplayString","_createBlock","_createCommentVNode"],"mappings":"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"}

package/dist/chunks/NcActionButtonGroup-BeQ4mLmQ.mjs

@@ -0,0 +1,58 @@
+import '../assets/NcActionButtonGroup-CQxLn2fv.css';
+import { defineComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, renderSlot } from "vue";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
+import { r as register, a as t } from "./_l10n-C3nxU4O-.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register();
+const _sfc_main = defineComponent({
+  name: "NcActionButtonGroup",
+  inject: {
+    isInSemanticMenu: {
+      from: "NcActions:isSemanticMenu",
+      default: false
+    }
+  },
+  props: {
+    /**
+     * Optional text shown below the button group
+     */
+    name: {
+      required: false,
+      default: void 0,
+      type: String
+    }
+  },
+  setup() {
+    return {
+      labelId: `nc-action-button-group-${GenRandomId()}`
+    };
+  },
+  methods: {
+    t
+  }
+});
+const _hoisted_1 = ["role"];
+const _hoisted_2 = ["id"];
+const _hoisted_3 = ["aria-labelledby"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("li", {
+    class: "nc-button-group-base",
+    role: _ctx.isInSemanticMenu && "presentation"
+  }, [
+    _ctx.name ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      id: _ctx.labelId
+    }, toDisplayString(_ctx.name), 9, _hoisted_2)) : createCommentVNode("", true),
+    createElementVNode("ul", {
+      class: "nc-button-group-content",
+      role: "group",
+      "aria-labelledby": _ctx.name ? _ctx.labelId : void 0
+    }, [
+      renderSlot(_ctx.$slots, "default")
+    ], 8, _hoisted_3)
+  ], 8, _hoisted_1);
+}
+const NcActionButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  NcActionButtonGroup as N
+};

package/dist/chunks/NcActionButtonGroup-BeQ4mLmQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionButtonGroup-BeQ4mLmQ.mjs","sources":["../../src/components/NcActionButtonGroup/NcActionButtonGroup.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots,\nto group buttons as one visual action, like for text alignment.\nThis should be used sparingly for accessibility.\n\n```vue\n<template>\n\t<div style=\"display: flex; align-items: center;\">\n\t\t<NcActions>\n\t\t\t<NcActionButtonGroup name=\"Text alignment\">\n\t\t\t\t<NcActionButton aria-label=\"Align left\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"l\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<AlignLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align center\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"c\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<AlignCenter :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align right\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"r\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<AlignRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActionButtonGroup>\n\t\t\t<NcActionButton :close-after-click=\"true\"\n\t\t\t\t@click=\"showMessage('Some other action')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSome other action\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</div>\n</template>\n<script>\nimport AlignLeft from 'vue-material-design-icons/AlignHorizontalLeft'\nimport AlignRight from 'vue-material-design-icons/AlignHorizontalRight'\nimport AlignCenter from 'vue-material-design-icons/AlignHorizontalCenter'\nimport Plus from 'vue-material-design-icons/Plus'\n\nexport default {\n\tcomponents: {\n\t\tAlignLeft,\n\t\tAlignRight,\n\t\tAlignCenter,\n\t\tPlus,\n\t},\n\tdata() {\n\t\treturn { alignment: 'l' }\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"nc-button-group-base\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<div v-if=\"name\" :id=\"labelId\">\n\t\t\t{{ name }}\n\t\t</div>\n\t\t<ul class=\"nc-button-group-content\" role=\"group\" :aria-labelledby=\"name ? labelId : undefined\">\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { t } from '../../l10n.js'\n\n/**\n * A wrapper for allowing inlining NcAction components within the action menu\n */\nexport default defineComponent({\n\tname: 'NcActionButtonGroup',\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Optional text shown below the button group\n\t\t */\n\t\tname: {\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tlabelId: `nc-action-button-group-${GenRandomId()}`,\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n})\n</script>\n\n<style lang=\"scss\">\n.nc-button-group-base {\n\t>div {\n\t\ttext-align: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\tul.nc-button-group-content {\n\t\tdisplay: flex;\n\t\tgap: 4px; // required for the focus-visible outline\n\t\tjustify-content: space-between;\n\t\tli {\n\t\t\tflex: 1 1;\n\t\t}\n\n\t\t.action-button {\n\t\t\t// Fix action buttons beeing shifted to the left (right padding)\n\t\t\tpadding: 0 !important;\n\t\t\twidth: 100%;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\n\t\t\t&.action-button--active {\n\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\tborder-radius: var(--border-radius-large);\n\t\t\t\tcolor: var(--color-primary-element-text);\n\n\t\t\t\t&:hover, &:focus, &:focus-within {\n\t\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.action-button__pressed-icon {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_toDisplayString","_createCommentVNode","_createElementVNode","_renderSlot"],"mappings":";;;;;AA+FA,MAAK,YAAa,gBAAa;AAAA,EAC9B,MAAM;AAAA,EAEN,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,MAAM;AAAA,IACN;AAAA,EACD;AAAA,EAED,QAAQ;AACP,WAAO;AAAA,MACN,SAAS,0BAA0B,YAAW,CAAE;AAAA,IACjD;AAAA,EACA;AAAA,EAED,SAAS;AAAA,IACR;AAAA,EACA;AACF,CAAC;AA7HD,MAAA,aAAA,CAAA,MAAA;AAAA,MAAA,aAAA,CAAA,IAAA;AAAA,MAAA,aAAA,CAAA,iBAAA;;sBA6ECA,mBAOK,MAAA;AAAA,IAPD,OAAM;AAAA,IAAwB,MAAM,KAAgB,oBAAA;AAAA;IAC5C,KAAI,qBAAfA,mBAEM,OAAA;AAAA,MAhFR,KAAA;AAAA,MA8EoB,IAAI,KAAO;AAAA,IACzB,GAAAC,gBAAA,KAAA,IAAI,GA/EV,GAAA,UAAA,KAAAC,mBAAA,IAAA,IAAA;AAAA,IAiFEC,mBAEK,MAAA;AAAA,MAFD,OAAM;AAAA,MAA0B,MAAK;AAAA,MAAS,mBAAiB,KAAA,OAAO,KAAA,UAAU;AAAA;MACnFC,WAAQ,KAAA,QAAA,SAAA;AAAA,IAlFX,GAAA,GAAA,UAAA;AAAA,EAAA,GAAA,GAAA,UAAA;;;"}

package/dist/chunks/NcActionCaption-Cb_uvgZc.mjs

@@ -0,0 +1,32 @@
+import '../assets/NcActionCaption-D-VXTPLI.css';
+import { openBlock, createElementBlock, toDisplayString } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcActionCaption",
+  inject: {
+    isInSemanticMenu: {
+      from: "NcActions:isSemanticMenu",
+      default: false
+    }
+  },
+  props: {
+    /**
+     * The caption's text
+     */
+    name: {
+      type: String,
+      required: true
+    }
+  }
+};
+const _hoisted_1 = ["role"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("li", {
+    class: "app-navigation-caption",
+    role: $options.isInSemanticMenu && "presentation"
+  }, toDisplayString($props.name), 9, _hoisted_1);
+}
+const NcActionCaption = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c1bd7a39"]]);
+export {
+  NcActionCaption as N
+};

package/dist/chunks/NcActionCaption-Cb_uvgZc.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionCaption-Cb_uvgZc.mjs","sources":["../../src/components/NcActionCaption/NcActionCaption.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<NcActions>\n\t\t<NcActionCaption name=\"Test caption\" />\n\t\t<NcActionCaption name=\"Test caption 2\" />\n\t</NcActions>\n```\n</docs>\n\n<template>\n\t<li class=\"app-navigation-caption\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t{{ name }}\n\t</li>\n</template>\n\n<script>\nexport default {\n\tname: 'NcActionCaption',\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The caption's text\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\t.app-navigation-caption {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tline-height: $clickable-area;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tuser-select: none;\n\t\tpointer-events: none;\n\t\tmargin-left: 12px;\n\t\tpadding-right: 14px;\n\t\theight: $clickable-area;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n</style>\n"],"names":["_createElementBlock","_toDisplayString"],"mappings":";;AAuBA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA,EACD;AACF;AA1CA,MAAA,aAAA,CAAA,MAAA;;sBAiBCA,mBAEK,MAAA;AAAA,IAFD,OAAM;AAAA,IAA0B,MAAM,SAAgB,oBAAA;AAAA,EACtD,GAAAC,gBAAA,OAAA,IAAI,GAlBT,GAAA,UAAA;;;"}

package/dist/chunks/NcActionCheckbox-A6JNjini.mjs

@@ -0,0 +1,125 @@
+import '../assets/NcActionCheckbox-DzmNTqwC.css';
+import { A as ActionGlobalMixin } from "./actionGlobal-BZFdtdJL.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, withKeys, withModifiers, toDisplayString, createCommentVNode } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcActionCheckbox",
+  mixins: [ActionGlobalMixin],
+  inject: {
+    isInSemanticMenu: {
+      from: "NcActions:isSemanticMenu",
+      default: false
+    }
+  },
+  props: {
+    /**
+     * id attribute of the checkbox element
+     */
+    id: {
+      type: String,
+      default: () => "action-" + GenRandomId(),
+      validator: (id) => id.trim() !== ""
+    },
+    /**
+     * checked state of the the checkbox element
+     */
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * value of the checkbox input
+     */
+    value: {
+      type: [String, Number],
+      default: ""
+    },
+    /**
+     * disabled state of the checkbox element
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+    "change",
+    "check",
+    "uncheck",
+    "update:modelValue"
+  ],
+  computed: {
+    /**
+     * determines if the action is focusable
+     *
+     * @return {boolean} is the action focusable ?
+     */
+    isFocusable() {
+      return !this.disabled;
+    },
+    /**
+     * aria-checked attribute for role="menuitemcheckbox"
+     *
+     * @return {'true'|'false'|undefined} aria-checked value if needed
+     */
+    ariaChecked() {
+      if (this.isInSemanticMenu) {
+        return this.modelValue ? "true" : "false";
+      }
+      return void 0;
+    }
+  },
+  methods: {
+    checkInput() {
+      this.$refs.label.click();
+    },
+    onChange(event) {
+      this.$emit("update:modelValue", this.$refs.checkbox.checked);
+      this.$emit("change", event);
+      if (this.$refs.checkbox.checked) {
+        this.$emit("check");
+      } else {
+        this.$emit("uncheck");
+      }
+    }
+  }
+};
+const _hoisted_1 = ["role"];
+const _hoisted_2 = ["role", "aria-checked"];
+const _hoisted_3 = ["id", "disabled", "checked", "value"];
+const _hoisted_4 = ["for"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("li", {
+    class: normalizeClass(["action", { "action--disabled": $props.disabled }]),
+    role: $options.isInSemanticMenu && "presentation"
+  }, [
+    createElementVNode("span", {
+      class: "action-checkbox",
+      role: $options.isInSemanticMenu && "menuitemcheckbox",
+      "aria-checked": $options.ariaChecked
+    }, [
+      createElementVNode("input", {
+        id: $props.id,
+        ref: "checkbox",
+        disabled: $props.disabled,
+        checked: $props.modelValue,
+        value: $props.value,
+        class: normalizeClass([{ focusable: $options.isFocusable }, "checkbox action-checkbox__checkbox"]),
+        type: "checkbox",
+        onKeydown: _cache[0] || (_cache[0] = withKeys(withModifiers((...args) => $options.checkInput && $options.checkInput(...args), ["exact", "prevent"]), ["enter"])),
+        onChange: _cache[1] || (_cache[1] = (...args) => $options.onChange && $options.onChange(...args))
+      }, null, 42, _hoisted_3),
+      createElementVNode("label", {
+        ref: "label",
+        for: $props.id,
+        class: "action-checkbox__label"
+      }, toDisplayString(_ctx.text), 9, _hoisted_4),
+      createCommentVNode("", true)
+    ], 8, _hoisted_2)
+  ], 10, _hoisted_1);
+}
+const NcActionCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c1ba25b7"]]);
+export {
+  NcActionCheckbox as N
+};

package/dist/chunks/NcActionCheckbox-A6JNjini.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionCheckbox-A6JNjini.mjs","sources":["../../src/components/NcActionCheckbox/NcActionCheckbox.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<NcActions>\n\t\t<NcActionCheckbox @change=\"alert('(un)checked !')\">First choice</NcActionCheckbox>\n\t\t<NcActionCheckbox value=\"second\" @change=\"alert('(un)checked !')\">Second choice</NcActionCheckbox>\n\t\t<NcActionCheckbox :model-value=\"true\" @change=\"alert('(un)checked !')\">Third choice (checked)</NcActionCheckbox>\n\t\t<NcActionCheckbox :disabled=\"true\" @change=\"alert('(un)checked !')\">Second choice (disabled)</NcActionCheckbox>\n\t</NcActions>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<span class=\"action-checkbox\" :role=\"isInSemanticMenu && 'menuitemcheckbox'\" :aria-checked=\"ariaChecked\">\n\t\t\t<input :id=\"id\"\n\t\t\t\tref=\"checkbox\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:checked=\"modelValue\"\n\t\t\t\t:value=\"value\"\n\t\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"checkbox action-checkbox__checkbox\"\n\t\t\t\t@keydown.enter.exact.prevent=\"checkInput\"\n\t\t\t\t@change=\"onChange\">\n\t\t\t<label ref=\"label\" :for=\"id\" class=\"action-checkbox__label\">{{ text }}</label>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcActionCheckbox',\n\n\tmixins: [ActionGlobalMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * checked state of the the checkbox element\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * value of the checkbox input\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the checkbox element\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'change',\n\t\t'check',\n\t\t'uncheck',\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\t/**\n\t\t * aria-checked attribute for role=\"menuitemcheckbox\"\n\t\t *\n\t\t * @return {'true'|'false'|undefined} aria-checked value if needed\n\t\t */\n\t\tariaChecked() {\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\treturn this.modelValue ? 'true' : 'false'\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\t},\n\n\tmethods: {\n\t\tcheckInput(/* event */) {\n\t\t\t// by clicking we also trigger the change event\n\t\t\tthis.$refs.label.click()\n\t\t},\n\t\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted when the checkbox state is changed\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', this.$refs.checkbox.checked)\n\n\t\t\t/**\n\t\t\t * Emitted when the checkbox state is changed\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\n\t\t\tif (this.$refs.checkbox.checked) {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the checkbox is checked\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('check')\n\t\t\t} else {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the checkbox is unchecked\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('uncheck')\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n.action-checkbox {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\tline-height: $clickable-area;\n\n\t/* checkbox/radio fixes */\n\t&__checkbox {\n\t\tposition: absolute;\n\t\ttop: auto;\n\t\tleft: -10000px;\n\n\t\toverflow: hidden;\n\n\t\twidth: 1px;\n\t\theight: 1px;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center; // align checkbox to text\n\n\t\twidth: 100%;\n\t\tpadding: 0 !important;\n\t\tpadding-right: $icon-margin !important;\n\n\t\t// checkbox-width is 12px, border is 2\n\t\t// (44 - 14 - 2) / 2 = 14\n\t\t&::before {\n\t\t\tmargin: 0 14px 0 !important;\n\t\t}\n\t}\n\n\t&--disabled {\n\t\t&,\n\t\t.action-checkbox__label {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_withKeys","_withModifiers","_toDisplayString","_createCommentVNode"],"mappings":"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"}

package/dist/chunks/NcActionInput-DCe8K_gs.mjs

@@ -0,0 +1,358 @@
+import '../assets/NcActionInput-4qR5N5lV.css';
+import { N as NcDateTimePicker } from "./NcDateTimePicker-CjuFbS-2.mjs";
+import { N as NcDateTimePickerNative } from "./NcDateTimePickerNative-DwJ_yIEg.mjs";
+import { N as NcPasswordField } from "./NcPasswordField-CaRDsoPg.mjs";
+import { N as NcSelect } from "./NcSelect-CPlvJjcY.mjs";
+import { N as NcTextField } from "./NcTextField-W5cVvjob.mjs";
+import { A as ActionGlobalMixin } from "./actionGlobal-BZFdtdJL.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
+import { r as register, f as t41, a as t } from "./_l10n-C3nxU4O-.mjs";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, normalizeStyle, withModifiers, toDisplayString, createCommentVNode, createBlock, mergeProps, createVNode, withCtx } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register(t41);
+const _sfc_main = {
+  name: "NcActionInput",
+  components: {
+    NcDateTimePicker,
+    NcDateTimePickerNative,
+    NcPasswordField,
+    NcSelect,
+    NcTextField
+  },
+  mixins: [ActionGlobalMixin],
+  inheritAttrs: false,
+  props: {
+    /**
+     * id attribute of the checkbox element
+     */
+    id: {
+      type: String,
+      default: () => "action-" + GenRandomId(),
+      validator: (id) => id.trim() !== ""
+    },
+    /**
+     * id attribute of the text input element
+     */
+    inputId: {
+      type: String,
+      default: () => "action-input-" + GenRandomId(),
+      validator: (id) => id.trim() !== ""
+    },
+    /**
+     * Icon to show with the action, can be either a CSS class or an URL
+     */
+    icon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * type attribute of the input field
+     */
+    type: {
+      type: String,
+      default: "text",
+      validator(type) {
+        return [
+          "date",
+          "datetime-local",
+          "month",
+          "multiselect",
+          "number",
+          "password",
+          "search",
+          "tel",
+          "text",
+          "time",
+          "url",
+          "week",
+          "color",
+          "email"
+        ].indexOf(type) > -1;
+      }
+    },
+    /**
+     * id attribute for the native date time picker
+     */
+    idNativeDateTimePicker: {
+      type: String,
+      default: "date-time-picker_id"
+    },
+    /**
+     * Flag to use a native date time picker
+     */
+    isNativePicker: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The visible input label for accessibility purposes.
+     */
+    label: {
+      type: String,
+      default: null
+    },
+    /**
+     * If you want to show the label just above the
+     * input field, pass in `true` to this prop.
+     */
+    labelOutside: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * value attribute of the input field
+     */
+    modelValue: {
+      type: [String, Date, Number, Array],
+      default: ""
+    },
+    /**
+     * disabled state of the input field
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * aria-label attribute of the input field
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.
+     * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,
+     * otherwise root element will inherit incorrect aria-hidden.
+     */
+    ariaHidden: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Attribute forwarded to the underlying NcPasswordField and NcTextField
+     */
+    showTrailingButton: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Trailing button label forwarded to the underlying NcTextField
+     */
+    trailingButtonLabel: {
+      type: String,
+      default: t("Submit")
+    },
+    /**
+     * CSS class to apply to the root element.
+     */
+    class: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  emits: [
+    "submit",
+    "update:modelValue"
+  ],
+  computed: {
+    isIconUrl() {
+      try {
+        return new URL(this.icon);
+      } catch (error) {
+        return false;
+      }
+    },
+    isMultiselectType() {
+      return this.type === "multiselect";
+    },
+    nativeDatePickerType() {
+      switch (this.type) {
+        case "date":
+        case "month":
+        case "time":
+        case "week":
+        case "datetime-local":
+          return this.type;
+      }
+      return false;
+    },
+    datePickerType() {
+      if (!this.isNativePicker) {
+        switch (this.type) {
+          case "date":
+          case "month":
+          case "time":
+            return this.type;
+          case "datetime-local":
+            return "datetime";
+        }
+      }
+      return false;
+    },
+    /**
+     * determines if the action is focusable
+     *
+     * @return {boolean} is the action focusable ?
+     */
+    isFocusable() {
+      return !this.disabled;
+    }
+  },
+  methods: {
+    // closing datepicker popup on mouseleave = unfocus
+    onLeave() {
+      if (this.$refs.datetimepicker && this.$refs.datetimepicker.$refs.datepicker) {
+        this.$refs.datetimepicker.$refs.datepicker.closePopup();
+      }
+    },
+    onSubmit(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!this.disabled) {
+        this.$emit("submit", event);
+      } else {
+        return false;
+      }
+    },
+    onUpdateModelValue(event) {
+      this.$emit("update:modelValue", event);
+    }
+  }
+};
+const _hoisted_1 = { class: "action-input__icon-wrapper" };
+const _hoisted_2 = ["disabled"];
+const _hoisted_3 = { class: "action-input__container" };
+const _hoisted_4 = ["for"];
+const _hoisted_5 = { class: "action-input__input-container" };
+const _hoisted_6 = {
+  key: 4,
+  class: "action-input__container"
+};
+const _hoisted_7 = ["for"];
+const _hoisted_8 = { class: "action-input__input-container" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcDateTimePicker = resolveComponent("NcDateTimePicker");
+  const _component_NcDateTimePickerNative = resolveComponent("NcDateTimePickerNative");
+  const _component_NcSelect = resolveComponent("NcSelect");
+  const _component_NcPasswordField = resolveComponent("NcPasswordField");
+  const _component_NcColorPicker = resolveComponent("NcColorPicker");
+  const _component_NcTextField = resolveComponent("NcTextField");
+  return openBlock(), createElementBlock("li", {
+    class: normalizeClass(["action", [{ "action--disabled": $props.disabled }, _ctx.$props.class]])
+  }, [
+    createElementVNode("span", {
+      class: normalizeClass([{
+        "action-input-picker--disabled": $props.disabled,
+        "action-input--visible-label": $props.labelOutside && $props.label
+      }, "action-input"]),
+      onMouseleave: _cache[3] || (_cache[3] = (...args) => $options.onLeave && $options.onLeave(...args))
+    }, [
+      createElementVNode("span", _hoisted_1, [
+        renderSlot(_ctx.$slots, "icon", {}, () => [
+          createElementVNode("span", {
+            class: normalizeClass([[$options.isIconUrl ? "action-input__icon--url" : $props.icon], "action-input__icon"]),
+            style: normalizeStyle({ backgroundImage: $options.isIconUrl ? `url(${$props.icon})` : null }),
+            "aria-hidden": "true"
+          }, null, 6)
+        ], true)
+      ]),
+      createElementVNode("form", {
+        ref: "form",
+        class: "action-input__form",
+        disabled: $props.disabled,
+        onSubmit: _cache[2] || (_cache[2] = withModifiers((...args) => $options.onSubmit && $options.onSubmit(...args), ["prevent"]))
+      }, [
+        createElementVNode("div", _hoisted_3, [
+          $props.label && $props.labelOutside ? (openBlock(), createElementBlock("label", {
+            key: 0,
+            class: normalizeClass(["action-input__text-label", { "action-input__text-label--hidden": !$props.labelOutside }]),
+            for: $props.inputId
+          }, toDisplayString($props.label), 11, _hoisted_4)) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_5, [
+            $options.datePickerType ? (openBlock(), createBlock(_component_NcDateTimePicker, mergeProps({
+              key: 0,
+              ref: "datetimepicker",
+              "model-value": $props.modelValue,
+              style: { "z-index": "99999999999" },
+              placeholder: _ctx.text,
+              disabled: $props.disabled,
+              type: $options.datePickerType,
+              "input-class": ["mx-input", { focusable: $options.isFocusable }],
+              class: "action-input__datetimepicker"
+            }, _ctx.$attrs, { "onUpdate:modelValue": $options.onUpdateModelValue }), null, 16, ["model-value", "placeholder", "disabled", "type", "input-class", "onUpdate:modelValue"])) : $props.isNativePicker ? (openBlock(), createBlock(_component_NcDateTimePickerNative, mergeProps({
+              key: 1,
+              id: $props.idNativeDateTimePicker,
+              "model-value": $props.modelValue,
+              type: $options.nativeDatePickerType,
+              "input-class": { focusable: $options.isFocusable },
+              class: "action-input__datetimepicker"
+            }, _ctx.$attrs, { "onUpdate:modelValue": $options.onUpdateModelValue }), null, 16, ["id", "model-value", "type", "input-class", "onUpdate:modelValue"])) : $options.isMultiselectType ? (openBlock(), createBlock(_component_NcSelect, mergeProps({
+              key: 2,
+              "model-value": $props.modelValue,
+              placeholder: _ctx.text,
+              disabled: $props.disabled,
+              "append-to-body": false,
+              "input-class": { focusable: $options.isFocusable },
+              class: "action-input__multi"
+            }, _ctx.$attrs, { "onUpdate:modelValue": $options.onUpdateModelValue }), null, 16, ["model-value", "placeholder", "disabled", "input-class", "onUpdate:modelValue"])) : $props.type === "password" ? (openBlock(), createBlock(_component_NcPasswordField, mergeProps({
+              key: 3,
+              id: $props.inputId,
+              "model-value": $props.modelValue,
+              label: $props.label,
+              "label-outside": !$props.label || $props.labelOutside,
+              placeholder: _ctx.text,
+              disabled: $props.disabled,
+              "input-class": { focusable: $options.isFocusable },
+              "show-trailing-button": $props.showTrailingButton && !$props.disabled
+            }, _ctx.$attrs, { "onUpdate:modelValue": $options.onUpdateModelValue }), null, 16, ["id", "model-value", "label", "label-outside", "placeholder", "disabled", "input-class", "show-trailing-button", "onUpdate:modelValue"])) : $props.type === "color" ? (openBlock(), createElementBlock("div", _hoisted_6, [
+              $props.label && $props.type === "color" ? (openBlock(), createElementBlock("label", {
+                key: 0,
+                class: normalizeClass(["action-input__text-label", { "action-input__text-label--hidden": !$props.labelOutside }]),
+                for: $props.inputId
+              }, toDisplayString($props.label), 11, _hoisted_7)) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_8, [
+                createVNode(_component_NcColorPicker, mergeProps({
+                  id: "inputId",
+                  "model-value": $props.modelValue,
+                  class: "colorpicker__trigger"
+                }, _ctx.$attrs, {
+                  "onUpdate:modelValue": $options.onUpdateModelValue,
+                  onSubmit: _cache[0] || (_cache[0] = ($event) => _ctx.$refs.form.requestSubmit())
+                }), {
+                  default: withCtx(() => [
+                    createElementVNode("button", {
+                      style: normalizeStyle({ "background-color": $props.modelValue }),
+                      class: normalizeClass(["colorpicker__preview", { focusable: $options.isFocusable }])
+                    }, null, 6)
+                  ]),
+                  _: 1
+                }, 16, ["model-value", "onUpdate:modelValue"])
+              ])
+            ])) : (openBlock(), createBlock(_component_NcTextField, mergeProps({
+              key: 5,
+              id: $props.inputId,
+              "model-value": $props.modelValue,
+              label: $props.label,
+              "label-outside": !$props.label || $props.labelOutside,
+              placeholder: _ctx.text,
+              disabled: $props.disabled,
+              "input-class": { focusable: $options.isFocusable },
+              type: $props.type,
+              "trailing-button-icon": "arrowRight",
+              "trailing-button-label": $props.trailingButtonLabel,
+              "show-trailing-button": $props.showTrailingButton && !$props.disabled
+            }, _ctx.$attrs, {
+              onTrailingButtonClick: _cache[1] || (_cache[1] = ($event) => _ctx.$refs.form.requestSubmit()),
+              "onUpdate:modelValue": $options.onUpdateModelValue
+            }), null, 16, ["id", "model-value", "label", "label-outside", "placeholder", "disabled", "input-class", "type", "trailing-button-label", "show-trailing-button", "onUpdate:modelValue"]))
+          ])
+        ])
+      ], 40, _hoisted_2)
+    ], 34)
+  ], 2);
+}
+const NcActionInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b11d6296"]]);
+export {
+  NcActionInput as N
+};