@nextcloud/vue 9.0.0-rc.2 → 9.0.0-rc.3

package/dist/chunks/NcColorPicker-BjsBCkEt.mjs

@@ -1,275 +0,0 @@
-import '../assets/NcColorPicker-Clz7MjCA.css';
-import { Chrome } from "@ckpack/vue-color";
-import { defineComponent, resolveComponent, createBlock, openBlock, withCtx, createElementVNode, normalizeClass, createVNode, createElementBlock, createCommentVNode, Transition, Fragment, renderList, normalizeStyle, createTextVNode, toDisplayString, renderSlot, normalizeProps, guardReactiveProps } from "vue";
-import { d as defaultPalette } from "./colors-BPGhD2C5.mjs";
-import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { r as register, i as t1, a as t } from "./_l10n-Bg-fZ9R0.mjs";
-import { A as ArrowLeft } from "./ArrowLeft-CanHG70H.mjs";
-import { C as Check } from "./Check-5i4xKnkl.mjs";
-import { D as DotsHorizontal } from "./DotsHorizontal-AMVAlTNH.mjs";
-import { N as NcButton } from "./NcButton-Byg8-ta1.mjs";
-import { N as NcPopover } from "./NcPopover-MsWUAvsI.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-register(t1);
-const HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i;
-const _sfc_main = defineComponent({
-  name: "NcColorPicker",
-  components: {
-    ArrowLeft,
-    Check,
-    Chrome,
-    DotsHorizontal,
-    NcButton,
-    NcPopover
-  },
-  props: {
-    /**
-     * A HEX color that represents the initial value of the picker
-     */
-    modelValue: {
-      type: String,
-      required: true
-    },
-    /**
-     * Set to `true` to enable advanced fields including HEX, RGB, and HSL
-     */
-    advancedFields: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Limit selectable colors to only the provided palette
-     */
-    paletteOnly: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Provide a custom array of colors to show.
-     * Can be either an array of string hexadecimal colors,
-     * or an array of object with a `color` property with hexadecimal color string,
-     * and a `name` property for accessibility.
-     *
-     * @type {string[] | {color: string, name: string}[]}
-     */
-    palette: {
-      type: Array,
-      default: () => [...defaultPalette],
-      validator: (palette) => palette.every(
-        (item) => typeof item === "string" && HEX_REGEX.test(item) || typeof item === "object" && item.color && HEX_REGEX.test(item.color)
-      )
-    },
-    /**
-     * Selector for the popover container
-     */
-    container: {
-      type: [String, Object, Element, Boolean],
-      default: "body"
-    }
-  },
-  emits: [
-    "submit",
-    "close",
-    "update:open",
-    "update:modelValue"
-  ],
-  data() {
-    return {
-      currentColor: this.modelValue,
-      advanced: false,
-      ariaBack: t("Back"),
-      ariaMore: t("More options")
-    };
-  },
-  computed: {
-    normalizedPalette() {
-      return this.palette.map((item) => ({
-        color: typeof item === "object" ? item.color : item,
-        name: typeof item === "object" && item.name ? item.name : t("A color with a HEX value {hex}", { hex: item.color })
-      }));
-    },
-    uid() {
-      return createElementId();
-    },
-    contrastColor() {
-      const black = "#000000";
-      const white = "#FFFFFF";
-      return this.calculateLuma(this.currentColor) > 0.5 ? black : white;
-    }
-  },
-  watch: {
-    modelValue(color) {
-      this.currentColor = color;
-    }
-  },
-  methods: {
-    t,
-    /**
-     * Submit a picked colour and close picker
-     * @param {Function} hideCallback callback to close popover
-     */
-    handleConfirm(hideCallback) {
-      this.$emit("submit", this.currentColor);
-      hideCallback();
-      this.advanced = false;
-    },
-    handleClose() {
-      this.$emit("close");
-      this.$emit("update:open", false);
-    },
-    /**
-     * Inner navigations
-     */
-    handleBack() {
-      this.advanced = false;
-    },
-    handleMoreSettings() {
-      this.advanced = true;
-    },
-    /**
-     * Pick a colour
-     *
-     * @param {string} color the picked color
-     */
-    pickColor(color) {
-      if (typeof color !== "string") {
-        color = this.currentColor.hex;
-      }
-      this.currentColor = color;
-      this.$emit("update:modelValue", color);
-    },
-    /**
-     * Calculate luminance of provided hex color
-     *
-     * @param {string} color the hex color
-     */
-    calculateLuma(color) {
-      const [red, green, blue] = this.hexToRGB(color);
-      return (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255;
-    },
-    /**
-     * Convert hex color to RGB
-     *
-     * @param {string} hex the hex color
-     */
-    hexToRGB(hex) {
-      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-      return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : null;
-    }
-  }
-});
-const _hoisted_1 = ["aria-label"];
-const _hoisted_2 = {
-  key: 0,
-  class: "color-picker__simple"
-};
-const _hoisted_3 = ["aria-label", "name", "checked", "onClick"];
-const _hoisted_4 = {
-  key: 0,
-  class: "color-picker__navigation"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Check = resolveComponent("Check");
-  const _component_Chrome = resolveComponent("Chrome");
-  const _component_ArrowLeft = resolveComponent("ArrowLeft");
-  const _component_NcButton = resolveComponent("NcButton");
-  const _component_DotsHorizontal = resolveComponent("DotsHorizontal");
-  const _component_NcPopover = resolveComponent("NcPopover");
-  return openBlock(), createBlock(_component_NcPopover, {
-    "popup-role": "dialog",
-    container: _ctx.container,
-    onApplyHide: _ctx.handleClose
-  }, {
-    trigger: withCtx((slotProps) => [
-      renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
-    ]),
-    default: withCtx((slotProps) => [
-      createElementVNode("div", {
-        role: "dialog",
-        class: normalizeClass(["color-picker", { "color-picker--advanced-fields": _ctx.advanced && _ctx.advancedFields }]),
-        "aria-modal": "true",
-        "aria-label": _ctx.t("Color picker")
-      }, [
-        createVNode(Transition, {
-          name: "slide",
-          mode: "out-in"
-        }, {
-          default: withCtx(() => [
-            !_ctx.advanced ? (openBlock(), createElementBlock("div", _hoisted_2, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.normalizedPalette, ({ color, name }, index) => {
-                return openBlock(), createElementBlock("label", {
-                  key: index,
-                  style: normalizeStyle({ backgroundColor: color }),
-                  class: normalizeClass(["color-picker__simple-color-circle", { "color-picker__simple-color-circle--active": color === _ctx.currentColor }])
-                }, [
-                  color === _ctx.currentColor ? (openBlock(), createBlock(_component_Check, {
-                    key: 0,
-                    size: 20,
-                    "fill-color": _ctx.contrastColor
-                  }, null, 8, ["fill-color"])) : createCommentVNode("", true),
-                  createElementVNode("input", {
-                    type: "radio",
-                    class: "hidden-visually",
-                    "aria-label": name,
-                    name: `color-picker-${_ctx.uid}`,
-                    checked: color === _ctx.currentColor,
-                    onClick: ($event) => _ctx.pickColor(color)
-                  }, null, 8, _hoisted_3)
-                ], 6);
-              }), 128))
-            ])) : (openBlock(), createBlock(_component_Chrome, {
-              key: 1,
-              modelValue: _ctx.currentColor,
-              "onUpdate:modelValue": [
-                _cache[0] || (_cache[0] = ($event) => _ctx.currentColor = $event),
-                _ctx.pickColor
-              ],
-              class: "color-picker__advanced",
-              "disable-alpha": true,
-              "disable-fields": !_ctx.advancedFields
-            }, null, 8, ["modelValue", "disable-fields", "onUpdate:modelValue"]))
-          ]),
-          _: 1
-        }),
-        !_ctx.paletteOnly ? (openBlock(), createElementBlock("div", _hoisted_4, [
-          _ctx.advanced ? (openBlock(), createBlock(_component_NcButton, {
-            key: 0,
-            "aria-label": _ctx.ariaBack,
-            variant: "tertiary",
-            onClick: _ctx.handleBack
-          }, {
-            icon: withCtx(() => [
-              createVNode(_component_ArrowLeft, { size: 20 })
-            ]),
-            _: 1
-          }, 8, ["aria-label", "onClick"])) : (openBlock(), createBlock(_component_NcButton, {
-            key: 1,
-            "aria-label": _ctx.ariaMore,
-            variant: "tertiary",
-            onClick: _ctx.handleMoreSettings
-          }, {
-            icon: withCtx(() => [
-              createVNode(_component_DotsHorizontal, { size: 20 })
-            ]),
-            _: 1
-          }, 8, ["aria-label", "onClick"])),
-          createVNode(_component_NcButton, {
-            variant: "primary",
-            onClick: ($event) => _ctx.handleConfirm(slotProps.hide)
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(_ctx.t("Choose")), 1)
-            ]),
-            _: 2
-          }, 1032, ["onClick"])
-        ])) : createCommentVNode("", true)
-      ], 10, _hoisted_1)
-    ]),
-    _: 3
-  }, 8, ["container", "onApplyHide"]);
-}
-const NcColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-180efb02"]]);
-export {
-  NcColorPicker as N
-};
-//# sourceMappingURL=NcColorPicker-BjsBCkEt.mjs.map

package/dist/chunks/NcColorPicker-BjsBCkEt.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcColorPicker-BjsBCkEt.mjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component allows the user to choose a color. It consists of 2\nactual pickers:\n\n- One simple picker with a predefined palette of colors;\n- One more advanced picker that provides the full color spectrum;\n\n### Usage\n\n* Using v-model and passing in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<NcColorPicker v-model=\"color\" :palette=\"customPalette\">\n\t\t\t<NcButton> Click Me for a custom palette </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\tcustomPalette: [\n\t\t\t\t'#E40303',\n\t\t\t\t'#FF8C00',\n\t\t\t\t'#FFED00',\n\t\t\t\t'#008026',\n\t\t\t\t'#24408E',\n\t\t\t\t'#732982',\n\t\t\t\t'#5BCEFA',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#FFFFFF',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#5BCEFA',\n\t\t\t],\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using v-model for both color and open state and emitting an event that updates the color\n\n```vue\n<template>\n\t<div class=\"container1\">\n\t\t<NcButton @click=\"open = !open\"> Click Me </NcButton>\n\t\t<NcColorPicker v-model=\"color\" v-model:shown=\"open\" v-slot=\"{ attrs }\">\n\t\t\t<div v-bind=\"attrs\" :style=\"{'background-color': color}\" class=\"color1\" />\n\t\t</NcColorPicker>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\topen: false\n\t\t}\n\t}\n}\n</script>\n<style>\n.container1 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color1 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using advanced fields including HEX, RGB, and HSL:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\"\n\t\t\t:advanced-fields=\"true\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9'\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcPopover popup-role=\"dialog\"\n\t\t:container=\"container\"\n\t\t@apply-hide=\"handleClose\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<template #default=\"slotProps\">\n\t\t\t<div role=\"dialog\"\n\t\t\t\tclass=\"color-picker\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Color picker')\"\n\t\t\t\t:class=\"{ 'color-picker--advanced-fields': advanced && advancedFields }\">\n\t\t\t\t<Transition name=\"slide\" mode=\"out-in\">\n\t\t\t\t\t<div v-if=\"!advanced\" class=\"color-picker__simple\">\n\t\t\t\t\t\t<label v-for=\"({ color, name }, index) in normalizedPalette\"\n\t\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t\t:style=\"{ backgroundColor: color }\"\n\t\t\t\t\t\t\tclass=\"color-picker__simple-color-circle\"\n\t\t\t\t\t\t\t:class=\"{ 'color-picker__simple-color-circle--active' : color === currentColor }\">\n\t\t\t\t\t\t\t<Check v-if=\"color === currentColor\" :size=\"20\" :fill-color=\"contrastColor\" />\n\t\t\t\t\t\t\t<input type=\"radio\"\n\t\t\t\t\t\t\t\tclass=\"hidden-visually\"\n\t\t\t\t\t\t\t\t:aria-label=\"name\"\n\t\t\t\t\t\t\t\t:name=\"`color-picker-${uid}`\"\n\t\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t\t@click=\"pickColor(color)\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Chrome v-else\n\t\t\t\t\t\tv-model=\"currentColor\"\n\t\t\t\t\t\tclass=\"color-picker__advanced\"\n\t\t\t\t\t\t:disable-alpha=\"true\"\n\t\t\t\t\t\t:disable-fields=\"!advancedFields\"\n\t\t\t\t\t\t@update:model-value=\"pickColor\" />\n\t\t\t\t</Transition>\n\t\t\t\t<div v-if=\"!paletteOnly\" class=\"color-picker__navigation\">\n\t\t\t\t\t<NcButton v-if=\"advanced\"\n\t\t\t\t\t\t:aria-label=\"ariaBack\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleBack\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ArrowLeft :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton v-else\n\t\t\t\t\t\t:aria-label=\"ariaMore\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleMoreSettings\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<DotsHorizontal :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton variant=\"primary\"\n\t\t\t\t\t\t@click=\"handleConfirm(slotProps.hide)\">\n\t\t\t\t\t\t{{ t('Choose') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t</NcPopover>\n</template>\n\n<script>\nimport { Chrome } from '@ckpack/vue-color'\nimport { defineComponent } from 'vue'\nimport { defaultPalette } from '../../utils/colors.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { t } from '../../l10n.js'\n\nimport ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\nimport NcButton from '../NcButton/index.ts'\nimport NcPopover from '../NcPopover/index.js'\n\nconst HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i\n\nexport default defineComponent({\n\tname: 'NcColorPicker',\n\n\tcomponents: {\n\t\tArrowLeft,\n\t\tCheck,\n\t\tChrome,\n\t\tDotsHorizontal,\n\t\tNcButton,\n\t\tNcPopover,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * A HEX color that represents the initial value of the picker\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t\t */\n\t\tadvancedFields: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Limit selectable colors to only the provided palette\n\t\t */\n\t\tpaletteOnly: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Provide a custom array of colors to show.\n\t\t * Can be either an array of string hexadecimal colors,\n\t\t * or an array of object with a `color` property with hexadecimal color string,\n\t\t * and a `name` property for accessibility.\n\t\t *\n\t\t * @type {string[] | {color: string, name: string}[]}\n\t\t */\n\t\tpalette: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [...defaultPalette],\n\t\t\tvalidator: (palette) => palette.every(item =>\n\t\t\t\t(typeof item === 'string' && HEX_REGEX.test(item))\n\t\t\t\t|| (typeof item === 'object' && item.color && HEX_REGEX.test(item.color)),\n\t\t\t),\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'close',\n\t\t'update:open',\n\t\t'update:modelValue',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentColor: this.modelValue,\n\t\t\tadvanced: false,\n\t\t\tariaBack: t('Back'),\n\t\t\tariaMore: t('More options'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnormalizedPalette() {\n\t\t\treturn this.palette.map((item) => ({\n\t\t\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\t\t\tname: typeof item === 'object' && item.name\n\t\t\t\t\t? item.name\n\t\t\t\t\t: t('A color with a HEX value {hex}', { hex: item.color }),\n\t\t\t}))\n\t\t},\n\n\t\tuid() {\n\t\t\treturn createElementId()\n\t\t},\n\t\tcontrastColor() {\n\t\t\tconst black = '#000000'\n\t\t\tconst white = '#FFFFFF'\n\t\t\treturn (this.calculateLuma(this.currentColor) > 0.5) ? black : white\n\t\t},\n\t},\n\n\twatch: {\n\t\tmodelValue(color) {\n\t\t\tthis.currentColor = color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Submit a picked colour and close picker\n\t\t * @param {Function} hideCallback callback to close popover\n\t\t */\n\t\thandleConfirm(hideCallback) {\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('submit', this.currentColor)\n\t\t\thideCallback()\n\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleClose() {\n\t\t\t/**\n\t\t\t * Emitted after picker close\n\t\t\t */\n\t\t\tthis.$emit('close')\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/**\n\t\t * Inner navigations\n\t\t */\n\t\thandleBack() {\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleMoreSettings() {\n\t\t\tthis.advanced = true\n\t\t},\n\n\t\t/**\n\t\t * Pick a colour\n\t\t *\n\t\t * @param {string} color the picked color\n\t\t */\n\t\tpickColor(color) {\n\t\t\tif (typeof color !== 'string') {\n\t\t\t\tcolor = this.currentColor.hex\n\t\t\t}\n\t\t\tthis.currentColor = color\n\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', color)\n\n\t\t},\n\n\t\t/**\n\t\t * Calculate luminance of provided hex color\n\t\t *\n\t\t * @param {string} color the hex color\n\t\t */\n\t\t calculateLuma(color) {\n\t\t\tconst [red, green, blue] = this.hexToRGB(color)\n\t\t\treturn (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255\n\t\t},\n\n\t\t/**\n\t\t * Convert hex color to RGB\n\t\t *\n\t\t * @param {string} hex the hex color\n\t\t */\n\t\t hexToRGB(hex) {\n\t\t\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\t\t\treturn result\n\t\t\t\t? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n\t\t\t\t: null\n\t\t},\n\t},\n})\n\n</script>\n\n<style lang=\"scss\" scoped>\n.color-picker {\n\tdisplay: flex;\n\toverflow: hidden;\n\talign-content: flex-end;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\twidth: 176px;\n\tpadding: 8px;\n\tborder-radius: 3px;\n\n\t&--advanced-fields {\n\t\twidth: 264px;\n\t}\n\n\t&__simple {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(auto-fit, var(--default-clickable-area));\n\t\tgrid-auto-rows: var(--default-clickable-area);\n\n\t\t&-color-circle {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: calc(var(--default-clickable-area) - 10px);\n\t\t\theight: calc(var(--default-clickable-area) - 10px);\n\t\t\tmin-height: calc(var(--default-clickable-area) - 10px);\n\t\t\tmargin: auto;\n\t\t\tpadding: 0;\n\t\t\tcolor: white;\n\t\t\tborder: 1px solid rgba(0, 0, 0, 0.25);\n\t\t\tborder-radius: 50%;\n\t\t\tfont-size: 16px;\n\t\t\t&:focus-within {\n\t\t\t\toutline: 2px solid var(--color-main-text);\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\topacity: .6;\n\t\t\t}\n\t\t\t&--active {\n\t\t\t\twidth: calc(var(--default-clickable-area) - 6px);\n\t\t\t\theight: calc(var(--default-clickable-area) - 6px);\n\t\t\t\tmin-height: calc(var(--default-clickable-area) - 6px);\n\t\t\t\ttransition: all 100ms ease-in-out;\n\t\t\t\topacity: 1 !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__advanced {\n\t\tbox-shadow: none !important;\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\t\tmargin-top: 10px;\n\t}\n}\n\n:deep() .vc {\n\t&-chrome {\n\t\twidth: unset;\n\t\tbackground-color: var(--color-main-background);\n\n\t\t&-color-wrap {\n\t\t\twidth: 30px;\n\t\t\theight: 30px;\n\t\t}\n\n\t\t&-active-color {\n\t\t\tborder-radius: 17px;\n\t\t}\n\n\t\t&-body {\n\t\t\tpadding: 14px 0 0 0;\n\t\t\tbackground-color: var(--color-main-background);\n\n\t\t\t.vc-input__input {\n\t\t\t\t--input-border-radius: var(--border-radius-element, var(--border-radius-large));\n\t\t\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\t\t\twidth: 100%;\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding-inline: calc(var(--border-radius-large) + var(--input-border-width-offset));\n\t\t\t\tpadding-block: var(--input-border-width-offset);\n\t\t\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\t\t\t\tborder-radius: var(--input-border-radius);\n\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\tbox-shadow: none;\n\n\t\t\t\t&:active:not([disabled]),\n\t\t\t\t&:hover:not([disabled]),\n\t\t\t\t&:focus:not([disabled]) {\n\t\t\t\t\t// Reset padding offset when focused\n\t\t\t\t\t--input-border-width-offset: 0px;\n\t\t\t\t\tborder-color: var(--color-main-text);\n\t\t\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\n\t\t\t\t\t& + .vc-input__label {\n\t\t\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vc-input__label {\n\t\t\t\tposition: absolute;\n\t\t\t\tinset-inline: var(--border-width-input-focused, 2px);\n\t\t\t\tinset-block-start: calc(-1.5 * var(--font-size-small, 13px) / 2);\n\t\t\t\tmax-width: fit-content;\n\t\t\t\tmargin-inline: calc(var(--border-radius-large) - var(--default-grid-baseline));\n\t\t\t\tmargin-block: 0;\n\t\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t\t\tfont-family: var(--font-face);\n\t\t\t\tfont-size: var(--font-size-small, 13px);\n\t\t\t\tline-height: 1.5;\n\t\t\t\tfont-weight: 500;\n\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t\tbackground-color: var(--color-main-background);\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&-toggle-btn {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tmargin-inline-start: 6px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\n\t\t&-toggle-icon {\n\t\t\twidth: 24px;\n\t\t\theight: 24px;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t&-toggle-icon-highlight {\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tinset: 0;\n\t\t}\n\n\t\t&-saturation {\n\t\t\t&-wrap {\n\t\t\t\tborder-radius: 3px;\n\t\t\t}\n\n\t\t\t&-circle {\n\t\t\t\twidth: 20px;\n\t\t\t\theight: 20px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.slide {\n\t&-enter-from {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-to {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave-from {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave-to {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-active,\n\t&-leave-active {\n\t\ttransition: all 50ms ease-in-out;\n\t}\n}\n\n</style>\n"],"names":["_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_createVNode","_Transition","_openBlock","_createElementBlock","_Fragment","_renderList","_normalizeStyle","_createCommentVNode","_createTextVNode","_toDisplayString"],"mappings":"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"}

package/dist/chunks/NcDashboardWidgetItem-DnI9uLf1.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcDashboardWidgetItem-DnI9uLf1.mjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component is meant to be used inside a DashboardWidget component.\n\n</docs>\n\n<template>\n\t<div @mouseover=\"hovered = true\" @mouseleave=\"hovered = false\">\n\t\t<component :is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl || undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\t:class=\"{ 'item-list__entry': true, 'item-list__entry--has-actions-menu': gotMenu }\"\n\t\t\t@click=\"onLinkClick\">\n\t\t\t<!-- @slot Slot for passing a user avatar. -->\n\t\t\t<slot name=\"avatar\" :avatar-url=\"avatarUrl\" :avatar-username=\"avatarUsername\">\n\t\t\t\t<NcAvatar class=\"item-avatar\"\n\t\t\t\t\t:size=\"44\"\n\t\t\t\t\t:url=\"avatarUrl\"\n\t\t\t\t\t:user=\"avatarUsername\"\n\t\t\t\t\t:is-no-user=\"avatarIsNoUser\"\n\t\t\t\t\t:show-user-status=\"!gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img v-if=\"overlayIconUrl\"\n\t\t\t\tclass=\"item-icon\"\n\t\t\t\talt=\"\"\n\t\t\t\t:src=\"overlayIconUrl\">\n\t\t\t<div class=\"item__details\">\n\t\t\t\t<h3 :title=\"mainText\">\n\t\t\t\t\t{{ mainText }}\n\t\t\t\t</h3>\n\t\t\t\t<span v-if=\"subText !== ''\" class=\"message\" :title=\"subText\">\n\t\t\t\t\t{{ subText }}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<NcActions v-if=\"gotMenu\" :force-menu=\"forceMenu\">\n\t\t\t\t<!-- @slot This slot can be used to provide actions for each dashboard widget item. -->\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcActionButton v-for=\"(m, menuItemId) in itemMenu\"\n\t\t\t\t\t\t:key=\"menuItemId\"\n\t\t\t\t\t\t:icon=\"m.icon\"\n\t\t\t\t\t\t:close-after-click=\"true\"\n\t\t\t\t\t\t@click.prevent.stop=\"$emit(menuItemId, item)\">\n\t\t\t\t\t\t{{ m.text }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</slot>\n\t\t\t</NcActions>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\n\nexport default {\n\tname: 'NcDashboardWidgetItem',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The item id (optional)\n\t\t */\n\t\tid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * The item element is a link to this URL (optional)\n\t\t */\n\t\ttargetUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Where to get the avatar image. (optional) Used if avatarUsername is not defined.\n\t\t */\n\t\tavatarUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.\n\t\t */\n\t\tavatarUsername: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Is the avatarUsername not a user's name? (optional, false by default)\n\t\t */\n\t\tavatarIsNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Small icon to display on the bottom-right corner of the avatar (optional)\n\t\t */\n\t\toverlayIconUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Item main text (mandatory)\n\t\t */\n\t\tmainText: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Item subline text (optional)\n\t\t */\n\t\tsubText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each items (optional)\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\n\t\t/**\n\t\t * Specify whether the 3 dot menu is forced when only one action is present\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titem() {\n\t\t\treturn {\n\t\t\t\tid: this.id,\n\t\t\t\ttargetUrl: this.targetUrl,\n\t\t\t\tavatarUrl: this.avatarUrl,\n\t\t\t\tavatarUsername: this.avatarUsername,\n\t\t\t\toverlayIconUrl: this.overlayIconUrl,\n\t\t\t\tmainText: this.mainText,\n\t\t\t\tsubText: this.subText,\n\t\t\t}\n\t\t},\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions\n\t\t},\n\t\tgotOverlayIcon() {\n\t\t\treturn this.overlayIconUrl && this.overlayIconUrl !== ''\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonLinkClick(event) {\n\t\t\tif (event.target.closest('.action-item')) {\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: center;\n\tposition: relative;\n\tpadding: 8px;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-large);\n\t}\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t.item__details {\n\t\tpadding-inline-start: 8px;\n\t\tmax-height: fit-content;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-height: var(--default-clickable-area);\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.message span {\n\t\t\twidth: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-bottom: -3px;\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 100%;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t.item-icon {\n\t\tposition: relative;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tmargin-top: 25px;\n\t\tmargin-inline: -10px -2px;\n\t}\n\n\tbutton.primary {\n\t\tpadding: 21px;\n\t\tmargin: 0;\n\t}\n}\n/*\n.content-popover {\n\theight: 0px;\n\twidth: 0px;\n\tmargin-inline: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":["_createElementBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_renderSlot","_createVNode","_createCommentVNode","_createElementVNode","_toDisplayString","_openBlock","_Fragment","_renderList","_withModifiers","_createTextVNode"],"mappings":"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"}

package/dist/chunks/NcDateTimePickerNative-D0pjWawX.mjs

@@ -1,202 +0,0 @@
-import '../assets/NcDateTimePickerNative-CeuS8Oeg.css';
-import { defineComponent, createElementBlock, openBlock, createElementVNode, normalizeClass, toDisplayString, mergeProps } from "vue";
-import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-const inputDateTypes = ["date", "datetime-local", "month", "time", "week"];
-const _sfc_main = defineComponent({
-  name: "NcDateTimePickerNative",
-  inheritAttrs: false,
-  props: {
-    /**
-     * The date is – like the `Date` object in JavaScript – tied to UTC.
-     * The selected time zone does not have an influence of the selected time and date value.
-     * You have to translate the time yourself when you want to factor in time zones.
-     * Pass null to clear the input field.
-     */
-    modelValue: {
-      type: Date,
-      default: null
-    },
-    /**
-     * id attribute of the input field
-     */
-    id: {
-      type: String,
-      default: () => createElementId(),
-      validator: (id) => id.trim() !== ""
-    },
-    /**
-     * type attribute of the input field
-     * default type: String
-     * The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`
-     */
-    type: {
-      type: String,
-      default: "date",
-      validate: (name) => inputDateTypes.includes(name)
-    },
-    /**
-     * text inside the label element
-     * default type: String
-     */
-    label: {
-      type: String,
-      default: "Please choose a date"
-    },
-    /**
-     * min attribute of the input field
-     * default type: null
-     */
-    min: {
-      type: [Date, Boolean],
-      default: null
-    },
-    /**
-     * max attribute of the input field
-     * default type: null
-     */
-    max: {
-      type: [Date, Boolean],
-      default: null
-    },
-    /**
-     * Flag to hide the label
-     * default type: String
-     * The hidden input label for accessibility purposes.
-     */
-    hideLabel: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Class to add to the input field.
-     * Necessary to use NcDateTimePickerNative in the NcActionInput component.
-     */
-    inputClass: {
-      type: [Object, String],
-      default: ""
-    }
-  },
-  emits: [
-    "update:modelValue"
-  ],
-  computed: {
-    formattedValue() {
-      return this.formatValue(this.modelValue);
-    },
-    formattedMin() {
-      if (this.min) {
-        return this.formatValue(this.min);
-      }
-      return false;
-    },
-    formattedMax() {
-      if (this.max) {
-        return this.formatValue(this.max);
-      }
-      return false;
-    }
-  },
-  methods: {
-    /**
-     * Handle the input event
-     *
-     * @param {InputEvent} $event input event payload
-     * @return {Date|null} new chosen Date() or null
-     */
-    onInput($event) {
-      if (isNaN($event.target.valueAsNumber)) {
-        return this.$emit("update:modelValue", null);
-      }
-      if (this.type === "time") {
-        const time = $event.target.value;
-        if (this.modelValue === "" || this.modelValue === null) {
-          const { yyyy: yyyy2, MM: MM2, dd: dd2 } = this.getReadableDate(/* @__PURE__ */ new Date());
-          return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${yyyy2}-${MM2}-${dd2}T${time}`));
-        }
-        const { yyyy, MM, dd } = this.getReadableDate(this.modelValue);
-        return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${yyyy}-${MM}-${dd}T${time}`));
-      } else if (this.type === "month") {
-        const MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, "0");
-        if (this.modelValue === "" || this.modelValue === null) {
-          const { yyyy: yyyy2, dd: dd2, hh: hh2, mm: mm2 } = this.getReadableDate(/* @__PURE__ */ new Date());
-          return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${yyyy2}-${MM}-${dd2}T${hh2}:${mm2}`));
-        }
-        const { yyyy, dd, hh, mm } = this.getReadableDate(this.modelValue);
-        return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`));
-      }
-      const timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1e3 * 60;
-      const inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds;
-      return this.$emit("update:modelValue", new Date(inputDateWithTimezone));
-    },
-    /**
-     * Returns Object with string values of a Date
-     *
-     * @param {Date} value The selected value
-     * @return {object|undefined}
-     */
-    getReadableDate(value) {
-      if (value instanceof Date) {
-        const yyyy = value.getFullYear().toString().padStart(4, "0");
-        const MM = (value.getMonth() + 1).toString().padStart(2, "0");
-        const dd = value.getDate().toString().padStart(2, "0");
-        const hh = value.getHours().toString().padStart(2, "0");
-        const mm = value.getMinutes().toString().padStart(2, "0");
-        return { yyyy, MM, dd, hh, mm };
-      }
-    },
-    /**
-     * Returns preformatted value for the input field
-     *
-     * @param {Date} value The selected value
-     * @return {string|undefined}
-     */
-    formatValue(value) {
-      if (value instanceof Date) {
-        const { yyyy, MM, dd, hh, mm } = this.getReadableDate(value);
-        if (this.type === "datetime-local") {
-          return `${yyyy}-${MM}-${dd}T${hh}:${mm}`;
-        } else if (this.type === "date") {
-          return `${yyyy}-${MM}-${dd}`;
-        } else if (this.type === "month") {
-          return `${yyyy}-${MM}`;
-        } else if (this.type === "time") {
-          return `${hh}:${mm}`;
-        } else if (this.type === "week") {
-          const startDate = new Date(yyyy, 0, 1);
-          const daysSinceBeginningOfYear = Math.floor((value - startDate) / (24 * 60 * 60 * 1e3));
-          const weekNumber = Math.ceil(daysSinceBeginningOfYear / 7);
-          return `${yyyy}-W${weekNumber}`;
-        }
-      } else {
-        return "";
-      }
-    }
-  }
-});
-const _hoisted_1 = { class: "native-datetime-picker" };
-const _hoisted_2 = ["for"];
-const _hoisted_3 = ["id", "type", "value", "min", "max"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1, [
-    createElementVNode("label", {
-      class: normalizeClass(["native-datetime-picker--label", { "hidden-visually": _ctx.hideLabel }]),
-      for: _ctx.id
-    }, toDisplayString(_ctx.label), 11, _hoisted_2),
-    createElementVNode("input", mergeProps({
-      id: _ctx.id,
-      class: ["native-datetime-picker--input", _ctx.inputClass],
-      type: _ctx.type,
-      value: _ctx.formattedValue,
-      min: _ctx.formattedMin,
-      max: _ctx.formattedMax
-    }, _ctx.$attrs, {
-      onInput: _cache[0] || (_cache[0] = (...args) => _ctx.onInput && _ctx.onInput(...args))
-    }), null, 16, _hoisted_3)
-  ]);
-}
-const NcDateTimePickerNative = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-4697b09c"]]);
-export {
-  NcDateTimePickerNative as N
-};
-//# sourceMappingURL=NcDateTimePickerNative-D0pjWawX.mjs.map

package/dist/chunks/NcDateTimePickerNative-D0pjWawX.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcDateTimePickerNative-D0pjWawX.mjs","sources":["../../src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis components provides a wrapper around the native browser datetime picker. <br>\nThis is an input with some type of date e.g. https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-(type=datetime-local). <br>\nAll available types are: 'date', 'datetime-local', 'month', 'time' and 'week', please check them here: https://html.spec.whatwg.org/multipage/input.html#  <br>\n\n### Examples\n\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<hr/>\n\t\t<div class=\"flex\">\n\t\t\t<NcSelect v-bind=\"props\" v-model=\"type\" />\n\t\t\t<NcDateTimePickerNative\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:label=\"label\"\n\t\t\t\t:type=\"type\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tprops: {\n\t\t\t\t\tclearable: false,\n\t\t\t\t\tinputLabel: 'Picker type',\n\t\t\t\t\toptions: [\n\t\t\t\t\t\t'date',\n\t\t\t\t\t\t'datetime-local',\n\t\t\t\t\t\t'month',\n\t\t\t\t\t\t'time',\n\t\t\t\t\t\t'week',\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\ttype: 'datetime-local',\n\t\t\t\tvalue: new Date(),\n\t\t\t\tlabel: 'Select a new date or time',\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style scoped>\n.flex {\n\tdisplay: flex;\n\tgap: 4px;\n}\n</style>\n```\n\n#### Usage: type='datetime-local' with min date and max date\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:min=\"yesterdayDate\"\n\t\t\t:max=\"someDate\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t\tyesterdayDate: new Date(new Date().setDate(new Date().getDate() - 1)),\n\t\t\t\tsomeDate: new Date(new Date().setDate(new Date().getDate() + 7)),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"native-datetime-picker\">\n\t\t<label class=\"native-datetime-picker--label\"\n\t\t\t:class=\"{ 'hidden-visually': hideLabel }\"\n\t\t\t:for=\"id\">\n\t\t\t{{ label }}\n\t\t</label>\n\t\t<input :id=\"id\"\n\t\t\tclass=\"native-datetime-picker--input\"\n\t\t\t:class=\"inputClass\"\n\t\t\t:type=\"type\"\n\t\t\t:value=\"formattedValue\"\n\t\t\t:min=\"formattedMin\"\n\t\t\t:max=\"formattedMax\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@input=\"onInput\">\n\t</div>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport { createElementId } from '../../utils/createElementId.js'\n\nconst inputDateTypes = ['date', 'datetime-local', 'month', 'time', 'week']\n\nexport default defineComponent({\n\tname: 'NcDateTimePickerNative',\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The date is – like the `Date` object in JavaScript – tied to UTC.\n\t\t * The selected time zone does not have an influence of the selected time and date value.\n\t\t * You have to translate the time yourself when you want to factor in time zones.\n\t\t * Pass null to clear the input field.\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Date,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the input field\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => createElementId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * type attribute of the input field\n\t\t * default type: String\n\t\t * The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date',\n\t\t\tvalidate: (name) => inputDateTypes.includes(name),\n\t\t},\n\t\t/**\n\t\t * text inside the label element\n\t\t * default type: String\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: 'Please choose a date',\n\t\t},\n\t\t/**\n\t\t * min attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmin: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * max attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmax: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Flag to hide the label\n\t\t * default type: String\n\t\t * The hidden input label for accessibility purposes.\n\t\t */\n\t\thideLabel: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcDateTimePickerNative in the NcActionInput component.\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\tformattedValue() {\n\t\t\treturn this.formatValue(this.modelValue)\n\t\t},\n\t\tformattedMin() {\n\t\t\tif (this.min) {\n\t\t\t\treturn this.formatValue(this.min)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\tformattedMax() {\n\t\t\tif (this.max) {\n\t\t\t\treturn this.formatValue(this.max)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle the input event\n\t\t *\n\t\t * @param {InputEvent} $event input event payload\n\t\t * @return {Date|null} new chosen Date() or null\n\t\t */\n\t\tonInput($event) {\n\t\t\tif (isNaN($event.target.valueAsNumber)) {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {null} null value\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', null)\n\t\t\t}\n\t\t\tif (this.type === 'time') {\n\t\t\t\tconst time = $event.target.value\n\t\t\t\tif (this.modelValue === '' || this.modelValue === null) {\n\t\t\t\t\t// this case is because of Chrome bug\n\t\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(this.modelValue)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t} else if (this.type === 'month') {\n\t\t\t\tconst MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tif (this.modelValue === '' || this.modelValue === null) {\n\t\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(this.modelValue)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t}\n\t\t\tconst timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1000 * 60\n\t\t\tconst inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds\n\t\t\t/**\n\t\t\t * Emitted when the input value changes\n\t\t\t *\n\t\t\t * @return {Date} new chosen Date()\n\t\t\t */\n\t\t\treturn this.$emit('update:modelValue', new Date(inputDateWithTimezone))\n\t\t},\n\t\t/**\n\t\t * Returns Object with string values of a Date\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {object|undefined}\n\t\t */\n\t\tgetReadableDate(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst yyyy = value.getFullYear().toString().padStart(4, '0')\n\t\t\t\tconst MM = (value.getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tconst dd = value.getDate().toString().padStart(2, '0')\n\t\t\t\tconst hh = value.getHours().toString().padStart(2, '0')\n\t\t\t\tconst mm = value.getMinutes().toString().padStart(2, '0')\n\n\t\t\t\treturn { yyyy, MM, dd, hh, mm }\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Returns preformatted value for the input field\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {string|undefined}\n\t\t */\n\t\tformatValue(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst { yyyy, MM, dd, hh, mm } = this.getReadableDate(value)\n\t\t\t\tif (this.type === 'datetime-local') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}T${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'date') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}`\n\t\t\t\t} else if (this.type === 'month') {\n\t\t\t\t\treturn `${yyyy}-${MM}`\n\t\t\t\t} else if (this.type === 'time') {\n\t\t\t\t\treturn `${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'week') {\n\t\t\t\t\tconst startDate = new Date(yyyy, 0, 1)\n\t\t\t\t\tconst daysSinceBeginningOfYear = Math.floor((value - startDate)\n\t\t\t\t\t\t/ (24 * 60 * 60 * 1000))\n\t\t\t\t\tconst weekNumber = Math.ceil(daysSinceBeginningOfYear / 7)\n\t\t\t\t\treturn `${yyyy}-W${weekNumber}`\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t},\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n\t.native-datetime-picker {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t.native-datetime-picker .native-datetime-picker--label {\n\t\tmargin-block-end: 2px;\n\t}\n\n\t.native-datetime-picker .native-datetime-picker--input {\n\t\t// If border width differs between focused and unfocused we need to compensate to prevent jumping\n\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\twidth: 100%;\n\t\tflex: 0 0 auto;\n\t\tmargin: 0;\n\t\tpadding-inline-start: calc(var(--border-radius-large) + var(--input-border-width-offset));\n\t\tpadding-inline-end: calc(var(--default-grid-baseline) + var(--input-border-width-offset));\n\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]),\n\t\t&:focus-within:not([disabled]) {\n\t\t\tborder-color: var(--color-main-text);\n\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t\t// Reset padding offset when focused\n\t\t\t--input-border-width-offset: 0px;\n\t\t}\n\t}\n\n\t[data-theme-light],\n\t[data-themes*=light] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: light;\n\t\t}\n\t}\n\n\t[data-theme-dark],\n\t[data-themes*=dark] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: dark;\n\t\t}\n\t}\n\n\t[data-theme-default],\n\t[data-themes*=default] {\n\t\t@media (prefers-color-scheme: light) {\n\t\t\t.native-datetime-picker--input {\n\t\t\t\tcolor-scheme: light;\n\t\t\t}\n\t\t}\n\t\t@media (prefers-color-scheme: dark) {\n\t\t\t.native-datetime-picker--input {\n\t\t\t\tcolor-scheme: dark;\n\t\t\t}\n\t\t}\n\t}\n</style>\n"],"names":["yyyy","MM","dd","hh","mm","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_toDisplayString","_mergeProps"],"mappings":";;;AAgHA,MAAM,iBAAiB,CAAC,QAAQ,kBAAkB,SAAS,QAAQ,MAAM;AAEzE,MAAK,YAAa,gBAAa;AAAA,EAC9B,MAAM;AAAA,EACN,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAON,YAAY;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,IAAI;AAAA,MACH,MAAM;AAAA,MACN,SAAS,MAAM,gBAAiB;AAAA,MAChC,WAAW,QAAM,GAAG,KAAK,MAAM;AAAA,IAC/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU,CAAC,SAAS,eAAe,SAAS,IAAI;AAAA,IAChD;AAAA;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAKD,KAAK;AAAA,MACJ,MAAM,CAAC,MAAM,OAAO;AAAA,MACpB,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAKD,KAAK;AAAA,MACJ,MAAM,CAAC,MAAM,OAAO;AAAA,MACpB,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACX,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO;AAAA,IACN;AAAA,EACA;AAAA,EAED,UAAU;AAAA,IACT,iBAAiB;AAChB,aAAO,KAAK,YAAY,KAAK,UAAU;AAAA,IACvC;AAAA,IACD,eAAe;AACd,UAAI,KAAK,KAAK;AACb,eAAO,KAAK,YAAY,KAAK,GAAG;AAAA,MACjC;AACA,aAAO;AAAA,IACP;AAAA,IACD,eAAe;AACd,UAAI,KAAK,KAAK;AACb,eAAO,KAAK,YAAY,KAAK,GAAG;AAAA,MACjC;AACA,aAAO;AAAA,IACP;AAAA,EACD;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOR,QAAQ,QAAQ;AACf,UAAI,MAAM,OAAO,OAAO,aAAa,GAAG;AAMvC,eAAO,KAAK,MAAM,qBAAqB,IAAI;AAAA,MAC5C;AACA,UAAI,KAAK,SAAS,QAAQ;AACzB,cAAM,OAAO,OAAO,OAAO;AAC3B,YAAI,KAAK,eAAe,MAAM,KAAK,eAAe,MAAM;AAEvD,gBAAM,EAAE,MAAAA,OAAM,IAAAC,KAAI,IAAAC,IAAG,IAAI,KAAK,gBAAgB,oBAAI,KAAM,CAAA;AAMxD,iBAAO,KAAK,MAAM,qBAAqB,oBAAI,KAAK,GAAGF,KAAI,IAAIC,GAAE,IAAIC,GAAE,IAAI,IAAI,EAAE,CAAC;AAAA,QAC/E;AACA,cAAM,EAAE,MAAM,IAAI,GAAK,IAAE,KAAK,gBAAgB,KAAK,UAAU;AAM7D,eAAO,KAAK,MAAM,qBAAqB,oBAAI,KAAK,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC;AAAA,iBACpE,KAAK,SAAS,SAAS;AACjC,cAAM,MAAM,IAAI,KAAK,OAAO,OAAO,KAAK,EAAE,SAAQ,IAAK,GAAG,SAAU,EAAC,SAAS,GAAG,GAAG;AACpF,YAAI,KAAK,eAAe,MAAM,KAAK,eAAe,MAAM;AACvD,gBAAM,EAAE,MAAAF,OAAM,IAAAE,KAAI,IAAAC,KAAI,IAAAC,QAAO,KAAK,gBAAgB,oBAAI,KAAM,CAAA;AAM5D,iBAAO,KAAK,MAAM,qBAAqB,oBAAI,KAAK,GAAGJ,KAAI,IAAI,EAAE,IAAIE,GAAE,IAAIC,GAAE,IAAIC,GAAE,EAAE,CAAC;AAAA,QACnF;AACA,cAAM,EAAE,MAAM,IAAI,IAAI,GAAG,IAAI,KAAK,gBAAgB,KAAK,UAAU;AAMjE,eAAO,KAAK,MAAM,qBAAqB,oBAAI,KAAK,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC;AAAA,MACnF;AACA,YAAM,wBAAwB,IAAI,KAAK,OAAO,OAAO,aAAa,EAAE,sBAAsB,MAAO;AACjG,YAAM,wBAAwB,OAAO,OAAO,gBAAgB;AAM5D,aAAO,KAAK,MAAM,qBAAqB,IAAI,KAAK,qBAAqB,CAAC;AAAA,IACtE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,gBAAgB,OAAO;AACtB,UAAI,iBAAiB,MAAM;AAC1B,cAAM,OAAO,MAAM,YAAW,EAAG,WAAW,SAAS,GAAG,GAAG;AAC3D,cAAM,MAAM,MAAM,SAAS,IAAI,GAAG,SAAU,EAAC,SAAS,GAAG,GAAG;AAC5D,cAAM,KAAK,MAAM,QAAO,EAAG,WAAW,SAAS,GAAG,GAAG;AACrD,cAAM,KAAK,MAAM,SAAQ,EAAG,WAAW,SAAS,GAAG,GAAG;AACtD,cAAM,KAAK,MAAM,WAAU,EAAG,WAAW,SAAS,GAAG,GAAG;AAExD,eAAO,EAAE,MAAM,IAAI,IAAI,IAAI,GAAG;AAAA,MAC/B;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAY,OAAO;AAClB,UAAI,iBAAiB,MAAM;AAC1B,cAAM,EAAE,MAAM,IAAI,IAAI,IAAI,GAAG,IAAI,KAAK,gBAAgB,KAAK;AAC3D,YAAI,KAAK,SAAS,kBAAkB;AACnC,iBAAO,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;AAAA,mBAC5B,KAAK,SAAS,QAAQ;AAChC,iBAAO,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE;AAAA,mBAChB,KAAK,SAAS,SAAS;AACjC,iBAAO,GAAG,IAAI,IAAI,EAAE;AAAA,mBACV,KAAK,SAAS,QAAQ;AAChC,iBAAO,GAAG,EAAE,IAAI,EAAE;AAAA,mBACR,KAAK,SAAS,QAAQ;AAChC,gBAAM,YAAY,IAAI,KAAK,MAAM,GAAG,CAAC;AACrC,gBAAM,2BAA2B,KAAK,OAAO,QAAQ,cACjD,KAAK,KAAK,KAAK,IAAK;AACxB,gBAAM,aAAa,KAAK,KAAK,2BAA2B,CAAC;AACzD,iBAAO,GAAG,IAAI,KAAK,UAAU;AAAA,QAC9B;AAAA,aACM;AACN,eAAO;AAAA,MACR;AAAA,IACA;AAAA,EACD;AACF,CAAC;AAxOK,MAAA,aAAA,EAAA,OAAM,yBAAwB;AA1FpC,MAAA,aAAA,CAAA,KAAA;AAAA,MAAA,aAAA,CAAA,MAAA,QAAA,SAAA,OAAA,KAAA;;AA0FC,SAAAC,UAAA,GAAAC,mBAeM,OAfN,YAeM;AAAA,IAdLC,mBAIQ,SAAA;AAAA,MAJD,OA3FTC,eAAA,CA2Fe,iCAA+B,EAAA,mBACd,KAAS,UAAA,CAAA,CAAA;AAAA,MACrC,KAAK,KAAE;AAAA,IACL,GAAAC,gBAAA,KAAA,KAAK,GA9FX,IAAA,UAAA;AAAA,IAgGEF,mBAQkB,SARlBG,WAQkB;AAAA,MARV,IAAI,KAAE;AAAA,MACb,OAAK,CAAC,iCACE,KAAU,UAAA;AAAA,MACjB,MAAM,KAAI;AAAA,MACV,OAAO,KAAc;AAAA,MACrB,KAAK,KAAY;AAAA,MACjB,KAAK,KAAY;AAAA,OACV,KAAM,QAAA;AAAA,MACb,gDAAO,KAAO,WAAA,KAAA,QAAA,GAAA,IAAA;AAAA,IAxGlB,CAAA,GAAA,MAAA,IAAA,UAAA;AAAA;;;"}