@nextcloud/vue 8.0.0-beta.6 → 8.0.0-beta.8

package/dist/Components/NcCheckboxRadioSwitch.mjs

@@ -1,63 +1,249 @@
-import "../assets/index45.css";
+import "../assets/index-194e9415.css";
 import s from "./NcLoadingIcon.mjs";
-import { G as n } from "../chunks/GenRandomId-1e1b509a.mjs";
-import { l as c } from "../chunks/l10n-05baf7da.mjs";
+import { G as c } from "../chunks/GenRandomId-cb9ccebe.mjs";
+import { l as d } from "../chunks/l10n-c5f5f001.mjs";
 import h from "vue-material-design-icons/CheckboxBlankOutline.vue";
-import d from "vue-material-design-icons/MinusBox.vue";
-import l from "vue-material-design-icons/CheckboxMarked.vue";
-import u from "vue-material-design-icons/RadioboxMarked.vue";
-import p from "vue-material-design-icons/RadioboxBlank.vue";
+import l from "vue-material-design-icons/MinusBox.vue";
+import u from "vue-material-design-icons/CheckboxMarked.vue";
+import p from "vue-material-design-icons/RadioboxMarked.vue";
+import f from "vue-material-design-icons/RadioboxBlank.vue";
 import m from "vue-material-design-icons/ToggleSwitchOff.vue";
-import b from "vue-material-design-icons/ToggleSwitch.vue";
-import { n as k } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const a = "checkbox", o = "radio", i = "switch", r = "button", f = { name: "NcCheckboxRadioSwitch", components: { NcLoadingIcon: s }, mixins: [c], props: { id: { type: String, default: () => "checkbox-radio-switch-" + n(), validator: (e) => e.trim() !== "" }, name: { type: String, default: null }, type: { type: String, default: "checkbox", validator: (e) => [a, o, i, r].includes(e) }, buttonVariant: { type: Boolean, default: !1 }, buttonVariantGrouped: { type: String, default: "no", validator: (e) => ["no", "vertical", "horizontal"].includes(e) }, checked: { type: [Boolean, Array, String], default: !1 }, value: { type: String, default: null }, disabled: { type: Boolean, default: !1 }, indeterminate: { type: Boolean, default: !1 }, required: { type: Boolean, default: !1 }, loading: { type: Boolean, default: !1 }, wrapperElement: { type: String, default: "span" } }, emits: ["update:checked"], computed: { inputProps() {
-  return this.type === r ? null : { checked: this.isChecked, indeterminate: this.indeterminate, required: this.required, name: this.name };
-}, inputListeners() {
-  return this.type === r ? { click: this.onToggle } : { change: this.onToggle };
-}, size() {
-  return this.type === i ? 36 : 24;
-}, cssVars() {
-  return { "--icon-size": this.size + "px" };
-}, inputType() {
-  return [a, o, r].includes(this.type) ? this.type : a;
-}, isChecked() {
-  return this.value !== null ? Array.isArray(this.checked) ? [...this.checked].indexOf(this.value) > -1 : this.checked === this.value : this.checked === !0;
-}, checkboxRadioIconElement() {
-  return this.type === o ? this.isChecked ? u : p : this.type === i ? this.isChecked ? b : m : this.indeterminate ? d : this.isChecked ? l : h;
-} }, mounted() {
-  if (this.name && this.type === a && !Array.isArray(this.checked))
-    throw new Error("When using groups of checkboxes, the updated value will be an array.");
-  if (this.name && this.type === i)
-    throw new Error("Switches are not made to be used for data sets. Please use checkboxes instead.");
-  if (typeof this.checked != "boolean" && this.type === i)
-    throw new Error("Switches can only be used with boolean as checked prop.");
-}, methods: { onToggle() {
-  if (this.disabled)
-    return;
-  if (this.type === o) {
-    this.$emit("update:checked", this.value);
-    return;
+import k from "vue-material-design-icons/ToggleSwitch.vue";
+import { n as b } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const r = "checkbox", n = "radio", a = "switch", o = "button", y = {
+  name: "NcCheckboxRadioSwitch",
+  components: {
+    NcLoadingIcon: s
+  },
+  mixins: [d],
+  props: {
+    /**
+     * Unique id attribute of the input
+     */
+    id: {
+      type: String,
+      default: () => "checkbox-radio-switch-" + c(),
+      validator: (t) => t.trim() !== ""
+    },
+    /**
+     * Input name. Required for radio, optional for checkbox, and ignored
+     * for button.
+     */
+    name: {
+      type: String,
+      default: null
+    },
+    /**
+     * Type of the input. checkbox, radio, switch, or button.
+     *
+     * Only use button when used in a `tablist` container and the
+     * `tab` role is set.
+     */
+    type: {
+      type: String,
+      default: "checkbox",
+      validator: (t) => [
+        r,
+        n,
+        a,
+        o
+      ].includes(t)
+    },
+    /**
+     * Toggle the alternative button style
+     */
+    buttonVariant: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Are the elements are all direct siblings?
+     * If so they will be grouped horizontally or vertically
+     * Possible values are `no`, `horizontal`, `vertical`.
+     */
+    buttonVariantGrouped: {
+      type: String,
+      default: "no",
+      validator: (t) => ["no", "vertical", "horizontal"].includes(t)
+    },
+    /**
+     * Checked state. To be used with `:value.sync`
+     */
+    checked: {
+      type: [Boolean, Array, String],
+      default: !1
+    },
+    /**
+     * Value to be synced on check
+     */
+    value: {
+      type: String,
+      default: null
+    },
+    /**
+     * Disabled state
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indeterminate state
+     */
+    indeterminate: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Required state
+     */
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Loading state
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Wrapping element tag
+     */
+    wrapperElement: {
+      type: String,
+      default: "span"
+    }
+  },
+  emits: ["update:checked"],
+  computed: {
+    inputProps() {
+      return this.type === o ? null : {
+        checked: this.isChecked,
+        indeterminate: this.indeterminate,
+        required: this.required,
+        name: this.name
+      };
+    },
+    inputListeners() {
+      return this.type === o ? {
+        click: this.onToggle
+      } : {
+        change: this.onToggle
+      };
+    },
+    /**
+     * Icon size
+     *
+     @return {number}
+     */
+    size() {
+      return this.type === a ? 36 : 24;
+    },
+    /**
+     * Css local variables for this component
+     *
+     * @return {object}
+     */
+    cssVars() {
+      return {
+        "--icon-size": this.size + "px"
+      };
+    },
+    /**
+     * Return the input type.
+     * Switch is not an official type
+     *
+     * @return {string}
+     */
+    inputType() {
+      return [
+        r,
+        n,
+        o
+      ].includes(this.type) ? this.type : r;
+    },
+    /**
+     * Check if that entry is checked
+     * If value is defined, we use that as the checked value
+     * If not, we expect true/false in this.checked
+     *
+     * @return {boolean}
+     */
+    isChecked() {
+      return this.value !== null ? Array.isArray(this.checked) ? [...this.checked].indexOf(this.value) > -1 : this.checked === this.value : this.checked === !0;
+    },
+    /**
+     * Returns the proper Material icon depending on the select case
+     *
+     * @return {object}
+     */
+    checkboxRadioIconElement() {
+      return this.type === n ? this.isChecked ? p : f : this.type === a ? this.isChecked ? k : m : this.indeterminate ? l : this.isChecked ? u : h;
+    }
+  },
+  mounted() {
+    if (this.name && this.type === r && !Array.isArray(this.checked))
+      throw new Error("When using groups of checkboxes, the updated value will be an array.");
+    if (this.name && this.type === a)
+      throw new Error("Switches are not made to be used for data sets. Please use checkboxes instead.");
+    if (typeof this.checked != "boolean" && this.type === a)
+      throw new Error("Switches can only be used with boolean as checked prop.");
+  },
+  methods: {
+    onToggle() {
+      if (this.disabled)
+        return;
+      if (this.type === n) {
+        this.$emit("update:checked", this.value);
+        return;
+      }
+      if (this.type === a) {
+        this.$emit("update:checked", !this.isChecked);
+        return;
+      }
+      if (typeof this.checked == "boolean") {
+        this.$emit("update:checked", !this.isChecked);
+        return;
+      }
+      const t = this.getInputsSet().filter((e) => e.checked).map((e) => e.value);
+      this.$emit("update:checked", t);
+    },
+    /**
+     * Get the input set based on this name
+     *
+     * @return {Node[]}
+     */
+    getInputsSet() {
+      return [...document.getElementsByName(this.name)];
+    }
   }
-  if (this.type === i) {
-    this.$emit("update:checked", !this.isChecked);
-    return;
-  }
-  if (typeof this.checked == "boolean") {
-    this.$emit("update:checked", !this.isChecked);
-    return;
-  }
-  const e = this.getInputsSet().filter((t) => t.checked).map((t) => t.value);
-  this.$emit("update:checked", e);
-}, getInputsSet() {
-  return [...document.getElementsByName(this.name)];
-} } };
-var y = function() {
-  var e = this, t = e._self._c;
-  return t(e.wrapperElement, { tag: "component", staticClass: "checkbox-radio-switch", class: { ["checkbox-radio-switch-" + e.type]: e.type, "checkbox-radio-switch--checked": e.isChecked, "checkbox-radio-switch--disabled": e.disabled, "checkbox-radio-switch--indeterminate": e.indeterminate, "checkbox-radio-switch--button-variant": e.buttonVariant, "checkbox-radio-switch--button-variant-v-grouped": e.buttonVariant && e.buttonVariantGrouped === "vertical", "checkbox-radio-switch--button-variant-h-grouped": e.buttonVariant && e.buttonVariantGrouped === "horizontal" }, style: e.cssVars }, [t("input", e._g(e._b({ staticClass: "checkbox-radio-switch__input", attrs: { id: e.id, disabled: e.disabled, type: e.inputType }, domProps: { value: e.value } }, "input", e.inputProps, !1), e.inputListeners)), t("label", { staticClass: "checkbox-radio-switch__label", attrs: { for: e.id } }, [t("div", { staticClass: "checkbox-radio-switch__icon" }, [e._t("icon", function() {
-    return [e.loading ? t("NcLoadingIcon") : e.buttonVariant ? e._e() : t(e.checkboxRadioIconElement, { tag: "component", attrs: { size: e.size } })];
-  }, { checked: e.isChecked, loading: e.loading })], 2), t("span", { staticClass: "checkbox-radio-switch__label-text" }, [e._t("default")], 2)])]);
-}, g = [], w = k(f, y, g, !1, null, "a6f82e18", null, null);
-const T = w.exports;
+};
+var _ = function() {
+  var e = this, i = e._self._c;
+  return i(e.wrapperElement, { tag: "component", staticClass: "checkbox-radio-switch", class: {
+    ["checkbox-radio-switch-" + e.type]: e.type,
+    "checkbox-radio-switch--checked": e.isChecked,
+    "checkbox-radio-switch--disabled": e.disabled,
+    "checkbox-radio-switch--indeterminate": e.indeterminate,
+    "checkbox-radio-switch--button-variant": e.buttonVariant,
+    "checkbox-radio-switch--button-variant-v-grouped": e.buttonVariant && e.buttonVariantGrouped === "vertical",
+    "checkbox-radio-switch--button-variant-h-grouped": e.buttonVariant && e.buttonVariantGrouped === "horizontal"
+  }, style: e.cssVars }, [i("input", e._g(e._b({ staticClass: "checkbox-radio-switch__input", attrs: { id: e.id, disabled: e.disabled, type: e.inputType }, domProps: { value: e.value } }, "input", e.inputProps, !1), e.inputListeners)), i("label", { staticClass: "checkbox-radio-switch__label", attrs: { for: e.id } }, [i("div", { staticClass: "checkbox-radio-switch__icon" }, [e._t("icon", function() {
+    return [e.loading ? i("NcLoadingIcon") : e.buttonVariant ? e._e() : i(e.checkboxRadioIconElement, { tag: "component", attrs: { size: e.size } })];
+  }, { checked: e.isChecked, loading: e.loading })], 2), i("span", { staticClass: "checkbox-radio-switch__label-text" }, [e._t("default")], 2)])]);
+}, g = [], x = /* @__PURE__ */ b(
+  y,
+  _,
+  g,
+  !1,
+  null,
+  "a6f82e18",
+  null,
+  null
+);
+const N = x.exports;
 export {
-  T as default
+  N as default
 };

package/dist/Components/NcCheckboxRadioSwitch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcCheckboxRadioSwitch.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcCheckboxRadioSwitch.mjs","sources":["../../src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2021 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\n\n### General description\n\nThis is a simple input checkbox, radio and switch design.\nPlease have a look at proper usage and recommendations: https://material.io/components/checkboxes\n\n### Standard checkbox\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"sharingEnabled\">Enable sharing</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"sharingEnabled\" :disabled=\"true\">Enable sharing (disabled)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked=\"sharingEnabled\" :loading=\"loading\" @update:checked=\"onToggle\">Enable sharing (with request loading)</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingEnabled: {{ sharingEnabled }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tloading: false,\n\t\t\tsharingEnabled: false,\n\t\t}\n\t},\n\tmethods: {\n\t\tonToggle() {\n\t\t\tthis.loading = true\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.sharingEnabled = !this.sharingEnabled\n\t\t\t\tthis.loading = false\n\t\t\t}, 1000)\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard radio set\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"sharingPermission\" value=\"r\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"sharingPermission\" value=\"rw\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read+write</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tsharingPermission: 'r',\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n\n### Standard radio set with alternative button style\n```vue\n<template>\n\t<div>\n\t\t<h4>Horizontal</h4>\n\t\t<div style=\"display: flex\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\t:checked.sync=\"sharingPermission\"\n\t\t\t\tvalue=\"r\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDefault permission read\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\t:checked.sync=\"sharingPermission\"\n\t\t\t\tvalue=\"rw\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDefault permission read+write\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\t<h4>Vertically</h4>\n\t\t<div style=\"width: fit-content\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\t:checked.sync=\"sharingPermission\"\n\t\t\t\tvalue=\"r\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDefault permission read\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\t:checked.sync=\"sharingPermission\"\n\t\t\t\tvalue=\"rw\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDefault permission read+write\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingPermission: 'r',\n\t\t}\n\t}\n}\n</script>\n```\n\n### Radio set with button style and icons\n```vue\n<template>\n\t<div>\n\t\t<h4>Horizontal</h4>\n\t\t<div style=\"display: flex\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\t:checked.sync=\"enableSettings\"\n\t\t\t\tvalue=\"y\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tEnable settings\n\t\t\t\t<template #icon><CheckIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\t:checked.sync=\"enableSettings\"\n\t\t\t\tvalue=\"n\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDisable settings\n\t\t\t\t<template #icon><CancelIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\t<h4>Vertically</h4>\n\t\t<div style=\"width: fit-content\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\t:checked.sync=\"enableSettings\"\n\t\t\t\tvalue=\"y\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tEnable settings\n\t\t\t\t<template #icon><CheckIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\t:checked.sync=\"enableSettings\"\n\t\t\t\tvalue=\"n\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDisable settings\n\t\t\t\t<template #icon><CancelIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\tSettings enabled: {{ enableSettings === 'y' ? 'yes' : 'no' }}\n\t</div>\n</template>\n<script>\nimport CheckIcon from 'vue-material-design-icons/Check.vue'\nimport CancelIcon from 'vue-material-design-icons/Cancel.vue'\nexport default {\n\tcomponents: {\n\t\tCheckIcon,\n\t\tCancelIcon,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tenableSettings: 'n',\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard checkbox set\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :disabled=\"true\" :checked.sync=\"sharingPermission\" value=\"r\" name=\"sharing_permission\">Permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"sharingPermission\" value=\"w\" name=\"sharing_permission\">Permission write</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"sharingPermission\" value=\"d\" name=\"sharing_permission\">Permission delete</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingPermission: ['r', 'd'],\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard switch\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"sharingEnabled\" type=\"switch\">Enable sharing</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"sharingEnabled\" type=\"switch\" :disabled=\"true\">Enable sharing (disabled)</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingEnabled: {{ sharingEnabled }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingEnabled: true,\n\t\t}\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<component :is=\"wrapperElement\"\n\t\t:class=\"{\n\t\t\t['checkbox-radio-switch-' + type]: type,\n\t\t\t'checkbox-radio-switch--checked': isChecked,\n\t\t\t'checkbox-radio-switch--disabled': disabled,\n\t\t\t'checkbox-radio-switch--indeterminate': indeterminate,\n\t\t\t'checkbox-radio-switch--button-variant': buttonVariant,\n\t\t\t'checkbox-radio-switch--button-variant-v-grouped': buttonVariant && buttonVariantGrouped === 'vertical',\n\t\t\t'checkbox-radio-switch--button-variant-h-grouped': buttonVariant && buttonVariantGrouped === 'horizontal',\n\t\t}\"\n\t\t:style=\"cssVars\"\n\t\tclass=\"checkbox-radio-switch\">\n\t\t<input :id=\"id\"\n\t\t\tclass=\"checkbox-radio-switch__input\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:type=\"inputType\"\n\t\t\t:value=\"value\"\n\t\t\tv-bind=\"inputProps\"\n\t\t\tv-on=\"inputListeners\">\n\t\t<label :for=\"id\" class=\"checkbox-radio-switch__label\">\n\t\t\t<div class=\"checkbox-radio-switch__icon\">\n\t\t\t\t<!-- @slot The checkbox/radio icon, you can use it for adding an icon to the button variant\n\t\t\t\t\t\t@binding {bool} checked The input checked state\n\t\t\t\t\t\t@binding {bool} loading The loading state\n\t\t\t\t-->\n\t\t\t\t<slot name=\"icon\"\n\t\t\t\t\t:checked=\"isChecked\"\n\t\t\t\t\t:loading=\"loading\">\n\t\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t\t<component :is=\"checkboxRadioIconElement\"\n\t\t\t\t\t\tv-else-if=\"!buttonVariant\"\n\t\t\t\t\t\t:size=\"size\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\n\t\t\t<!-- @slot The checkbox/radio label -->\n\t\t\t<span class=\"checkbox-radio-switch__label-text\"><slot /></span>\n\t\t</label>\n\t</component>\n</template>\n\n<script>\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport l10n from '../../mixins/l10n.js'\n\nimport CheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline.vue'\nimport MinusBox from 'vue-material-design-icons/MinusBox.vue'\nimport CheckboxMarked from 'vue-material-design-icons/CheckboxMarked.vue'\nimport RadioboxMarked from 'vue-material-design-icons/RadioboxMarked.vue'\nimport RadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'\nimport ToggleSwitchOff from 'vue-material-design-icons/ToggleSwitchOff.vue'\nimport ToggleSwitch from 'vue-material-design-icons/ToggleSwitch.vue'\n\nexport const TYPE_CHECKBOX = 'checkbox'\nexport const TYPE_RADIO = 'radio'\nexport const TYPE_SWITCH = 'switch'\nexport const TYPE_BUTTON = 'button'\n\nexport default {\n\tname: 'NcCheckboxRadioSwitch',\n\n\tcomponents: {\n\t\tNcLoadingIcon,\n\t},\n\n\tmixins: [l10n],\n\n\tprops: {\n\n\t\t/**\n\t\t * Unique id attribute of the input\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'checkbox-radio-switch-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * Input name. Required for radio, optional for checkbox, and ignored\n\t\t * for button.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Type of the input. checkbox, radio, switch, or button.\n\t\t *\n\t\t * Only use button when used in a `tablist` container and the\n\t\t * `tab` role is set.\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'checkbox',\n\t\t\tvalidator: type => [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t\tTYPE_SWITCH,\n\t\t\t\tTYPE_BUTTON,\n\t\t\t].includes(type),\n\t\t},\n\n\t\t/**\n\t\t * Toggle the alternative button style\n\t\t */\n\t\tbuttonVariant: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Are the elements are all direct siblings?\n\t\t * If so they will be grouped horizontally or vertically\n\t\t * Possible values are `no`, `horizontal`, `vertical`.\n\t\t */\n\t\tbuttonVariantGrouped: {\n\t\t\ttype: String,\n\t\t\tdefault: 'no',\n\t\t\tvalidator: v => ['no', 'vertical', 'horizontal'].includes(v),\n\t\t},\n\n\t\t/**\n\t\t * Checked state. To be used with `:value.sync`\n\t\t */\n\t\tchecked: {\n\t\t\ttype: [Boolean, Array, String],\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Value to be synced on check\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Disabled state\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 * Indeterminate state\n\t\t */\n\t\tindeterminate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Required state\n\t\t */\n\t\trequired: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Loading state\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Wrapping element tag\n\t\t */\n\t\twrapperElement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'span',\n\t\t},\n\t},\n\n\temits: ['update:checked'],\n\n\tcomputed: {\n\t\tinputProps() {\n\t\t\tif (this.type === TYPE_BUTTON) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tchecked: this.isChecked,\n\t\t\t\tindeterminate: this.indeterminate,\n\t\t\t\trequired: this.required,\n\t\t\t\tname: this.name,\n\t\t\t}\n\t\t},\n\n\t\tinputListeners() {\n\t\t\tif (this.type === TYPE_BUTTON) {\n\t\t\t\treturn {\n\t\t\t\t\tclick: this.onToggle,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tchange: this.onToggle,\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Icon size\n\t\t *\n\t\t @return {number}\n\t\t */\n\t\tsize() {\n\t\t\treturn this.type === TYPE_SWITCH\n\t\t\t\t? 36\n\t\t\t\t: 24\n\t\t},\n\n\t\t/**\n\t\t * Css local variables for this component\n\t\t *\n\t\t * @return {object}\n\t\t */\n\t\tcssVars() {\n\t\t\treturn {\n\t\t\t\t'--icon-size': this.size + 'px',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Return the input type.\n\t\t * Switch is not an official type\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\tinputType() {\n\t\t\tconst nativeTypes = [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t\tTYPE_BUTTON,\n\t\t\t]\n\t\t\tif (nativeTypes.includes(this.type)) {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn TYPE_CHECKBOX\n\t\t},\n\n\t\t/**\n\t\t * Check if that entry is checked\n\t\t * If value is defined, we use that as the checked value\n\t\t * If not, we expect true/false in this.checked\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisChecked() {\n\t\t\tif (this.value !== null) {\n\t\t\t\tif (Array.isArray(this.checked)) {\n\t\t\t\t\treturn [...this.checked].indexOf(this.value) > -1\n\t\t\t\t}\n\t\t\t\treturn this.checked === this.value\n\t\t\t}\n\t\t\treturn this.checked === true\n\t\t},\n\n\t\t/**\n\t\t * Returns the proper Material icon depending on the select case\n\t\t *\n\t\t * @return {object}\n\t\t */\n\t\tcheckboxRadioIconElement() {\n\t\t\tif (this.type === TYPE_RADIO) {\n\t\t\t\tif (this.isChecked) {\n\t\t\t\t\treturn RadioboxMarked\n\t\t\t\t}\n\t\t\t\treturn RadioboxBlank\n\t\t\t}\n\n\t\t\t// Switch\n\t\t\tif (this.type === TYPE_SWITCH) {\n\t\t\t\tif (this.isChecked) {\n\t\t\t\t\treturn ToggleSwitch\n\t\t\t\t}\n\t\t\t\treturn ToggleSwitchOff\n\t\t\t}\n\n\t\t\t// Checkbox\n\t\t\tif (this.indeterminate) {\n\t\t\t\treturn MinusBox\n\t\t\t}\n\t\t\tif (this.isChecked) {\n\t\t\t\treturn CheckboxMarked\n\t\t\t}\n\t\t\treturn CheckboxBlankOutline\n\t\t},\n\t},\n\n\tmounted() {\n\t\tif (this.name && this.type === TYPE_CHECKBOX) {\n\t\t\tif (!Array.isArray(this.checked)) {\n\t\t\t\tthrow new Error('When using groups of checkboxes, the updated value will be an array.')\n\t\t\t}\n\t\t}\n\n\t\t// https://material.io/components/checkboxes#usage\n\t\tif (this.name && this.type === TYPE_SWITCH) {\n\t\t\tthrow new Error('Switches are not made to be used for data sets. Please use checkboxes instead.')\n\t\t}\n\n\t\t// https://material.io/components/checkboxes#usage\n\t\tif (typeof this.checked !== 'boolean' && this.type === TYPE_SWITCH) {\n\t\t\tthrow new Error('Switches can only be used with boolean as checked prop.')\n\t\t}\n\t},\n\n\tmethods: {\n\t\tonToggle() {\n\t\t\tif (this.disabled) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If this is a radio, there can only be one value\n\t\t\tif (this.type === TYPE_RADIO) {\n\t\t\t\tthis.$emit('update:checked', this.value)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If this is a radio, there can only be one value\n\t\t\tif (this.type === TYPE_SWITCH) {\n\t\t\t\tthis.$emit('update:checked', !this.isChecked)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If the initial value was a boolean, let's keep it that way\n\t\t\tif (typeof this.checked === 'boolean') {\n\t\t\t\tthis.$emit('update:checked', !this.isChecked)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Dispatch the checked values as an array if multiple, or single value otherwise\n\t\t\tconst values = this.getInputsSet()\n\t\t\t\t.filter(input => input.checked)\n\t\t\t\t.map(input => input.value)\n\t\t\tthis.$emit('update:checked', values)\n\t\t},\n\n\t\t/**\n\t\t * Get the input set based on this name\n\t\t *\n\t\t * @return {Node[]}\n\t\t */\n\t\tgetInputsSet() {\n\t\t\treturn [...document.getElementsByName(this.name)]\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.checkbox-radio-switch {\n\tdisplay: flex;\n\talign-items: center;\n\n\t&__input {\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\topacity: 0 !important; // We need !important, or it gets overwritten by server style\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-size);\n\t\t// Same as label padding\n\t\tmargin: 4px $icon-margin;\n\t}\n\n\t&__input:focus-visible + label {\n\t\toutline: 2px solid var(--color-primary-element) !important;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-direction: row;\n\t\tgap: 4px;\n\t\tuser-select: none;\n\t\tmin-height: $clickable-area;\n\t\tborder-radius: $clickable-area;\n\t\tpadding: 4px $icon-margin;\n\t\t// Set to 100% to make text overflow work on button style\n\t\twidth: 100%;\n\t\t// but restrict to content so plain checkboxes / radio switches do not expand\n\t\tmax-width: fit-content;\n\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t&-text:empty {\n\t\t\t// hide text if empty to ensure checkbox outline is a circle instead of oval\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t&__icon > * {\n\t\tcolor: var(--color-primary-element);\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-size);\n\t}\n\n\t&--disabled &__label {\n\t\topacity: $opacity_disabled;\n\t\t.checkbox-radio-switch__icon > * {\n\t\t\tcolor: var(--color-main-text)\n\t\t}\n\t}\n\n\t&:not(&--disabled, &--checked):focus-within &__label,\n\t&:not(&--disabled, &--checked) &__label:hover {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&--checked:not(&--disabled):focus-within &__label,\n\t&--checked:not(&--disabled) &__label:hover {\n\t\tbackground-color: var(--color-primary-element-light-hover);\n\t}\n\n\t// Switch specific rules\n\t&-switch:not(&--checked) &__icon > * {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t// If switch is checked AND disabled, use the fade primary colour\n\t&-switch.checkbox-radio-switch--disabled.checkbox-radio-switch--checked &__icon > * {\n\t\tcolor: var(--color-primary-element-light);\n\t}\n\n\t$border-radius: calc(var(--default-clickable-area) / 2);\n\t// keep inner border width in mind\n\t$border-radius-outer: calc($border-radius + 2px);\n\n\t&--button-variant.checkbox-radio-switch {\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\toverflow: hidden;\n\n\t\t&--checked {\n\t\t\tfont-weight: bold;\n\n\t\t\tlabel {\n\t\t\t\tbackground-color: var(--color-primary-element-light);\n\t\t\t}\n\t\t}\n\t}\n\n\t// Text overflow of button style\n\t&--button-variant &__label-text {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\twidth: 100%;\n\t}\n\n\t// Set icon color for non active elements to main text color\n\t&--button-variant:not(&--checked) &__icon > * {\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t// Hide icon container if empty to remove virtual padding\n\t&--button-variant &__icon:empty {\n\t\tdisplay: none;\n\t}\n\n\t&--button-variant:not(&--button-variant-v-grouped):not(&--button-variant-h-grouped),\n\t&--button-variant &__label {\n\t\tborder-radius: $border-radius;\n\t}\n\n\t/* Special rules for vertical button groups */\n\t&--button-variant-v-grouped &__label {\n\t\tflex-basis: 100%;\n\t\t// vertically grouped buttons should all have the same width\n\t\tmax-width: unset;\n\t}\n\t&--button-variant-v-grouped {\n\t\t&:first-of-type {\n\t\t\tborder-top-left-radius: $border-radius-outer;\n\t\t\tborder-top-right-radius: $border-radius-outer;\n\t\t}\n\t\t&:last-of-type {\n\t\t\tborder-bottom-left-radius: $border-radius-outer;\n\t\t\tborder-bottom-right-radius: $border-radius-outer;\n\t\t}\n\n\t\t// remove borders between elements\n\t\t&:not(:last-of-type) {\n\t\t\tborder-bottom: 0!important;\n\t\t\t.checkbox-radio-switch__label {\n\t\t\t\tmargin-bottom: 2px;\n\t\t\t}\n\t\t}\n\t\t&:not(:first-of-type) {\n\t\t\tborder-top: 0!important;\n\t\t}\n\t}\n\n\t/* Special rules for horizontal button groups */\n\t&--button-variant-h-grouped {\n\t\t&:first-of-type {\n\t\t\tborder-top-left-radius: $border-radius-outer;\n\t\t\tborder-bottom-left-radius: $border-radius-outer;\n\t\t}\n\t\t&:last-of-type {\n\t\t\tborder-top-right-radius: $border-radius-outer;\n\t\t\tborder-bottom-right-radius: $border-radius-outer;\n\t\t}\n\n\t\t// remove borders between elements\n\t\t&:not(:last-of-type) {\n\t\t\tborder-right: 0!important;\n\t\t\t.checkbox-radio-switch__label {\n\t\t\t\tmargin-right: 2px;\n\t\t\t}\n\t\t}\n\t\t&:not(:first-of-type) {\n\t\t\tborder-left: 0!important;\n\t\t}\n\t}\n\t&--button-variant-h-grouped &__label-text {\n\t\ttext-align: center;\n\t}\n\t&--button-variant-h-grouped &__label {\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\tmargin: 0;\n\t\tgap: 0;\n\t}\n}\n</style>\n"],"names":["TYPE_CHECKBOX","TYPE_RADIO","TYPE_SWITCH","TYPE_BUTTON","_sfc_main","NcLoadingIcon","l10n","GenRandomId","id","type","v","RadioboxMarked","RadioboxBlank","ToggleSwitch","ToggleSwitchOff","MinusBox","CheckboxMarked","CheckboxBlankOutline","values","input"],"mappings":"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"}

package/dist/Components/NcColorPicker.cjs

@@ -1 +1,118 @@
-var y=require("../assets/index40.css");const n=require("./NcButton.cjs"),c=require("./NcPopover.cjs"),o=require("../chunks/l10n-46d0c1c0.cjs"),l=require("../chunks/GenColors-8097de04.cjs"),s=require("vue-material-design-icons/ArrowLeft.vue"),u=require("vue-material-design-icons/Check.vue"),d=require("vue-material-design-icons/DotsHorizontal.vue"),p=require("vue-color"),h=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const a=function(e){const t=e.toString(16);return t.length===1?"0"+t:t},v={name:"NcColorPicker",components:{ArrowLeft:s,Check:u,Chrome:p.Chrome,DotsHorizontal:d,NcButton:n,NcPopover:c},props:{value:{type:String,required:!0},advancedFields:{type:Boolean,default:!1},palette:{type:Array,default:()=>l.GenColors(4).map(e=>"#"+a(e.r)+a(e.g)+a(e.b)),validator(e){return e.every(t=>/^#([a-f0-9]{3}|[a-f0-9]{6})$/i.test(t))}}},emits:["submit","close","update:open","update:value","input"],data(){return{currentColor:this.value,advanced:!1,ariaBack:o.t("Back"),ariaMore:o.t("More options")}},watch:{value(e){this.currentColor=e}},methods:{t:o.t,handleConfirm(){this.$emit("submit",this.currentColor),this.handleClose(),this.advanced=!1},handleClose(){this.$emit("close"),this.$emit("update:open",!1)},handleBack(){this.advanced=!1},handleMoreSettings(){this.advanced=!0},pickColor(e){typeof e!="string"&&(e=this.currentColor.hex),this.currentColor=e,this.$emit("update:value",e),this.$emit("input",e)}}};var C=function(){var e=this,t=e._self._c;return t("NcPopover",e._g(e._b({on:{"apply-hide":e.handleClose},scopedSlots:e._u([{key:"trigger",fn:function(){return[e._t("default")]},proxy:!0}],null,!0)},"NcPopover",e.$attrs,!1),e.$listeners),[t("div",{staticClass:"color-picker",class:{"color-picker--advanced-fields":e.advanced&&e.advancedFields}},[t("transition",{attrs:{name:"slide",mode:"out-in"}},[e.advanced?e._e():t("div",{staticClass:"color-picker__simple"},e._l(e.palette,function(r,i){return t("button",{key:i,staticClass:"color-picker__simple-color-circle",class:{"color-picker__simple-color-circle--active":r===e.currentColor},style:{"background-color":r},attrs:{type:"button"},on:{click:function(f){return e.pickColor(r)}}},[r===e.currentColor?t("Check",{attrs:{size:20}}):e._e()],1)}),0),e.advanced?t("Chrome",{staticClass:"color-picker__advanced",attrs:{"disable-alpha":!0,"disable-fields":!e.advancedFields},on:{input:e.pickColor},model:{value:e.currentColor,callback:function(r){e.currentColor=r},expression:"currentColor"}}):e._e()],1),t("div",{staticClass:"color-picker__navigation"},[e.advanced?t("NcButton",{attrs:{type:"tertiary","aria-label":e.ariaBack},on:{click:e.handleBack},scopedSlots:e._u([{key:"icon",fn:function(){return[t("ArrowLeft",{attrs:{size:20}})]},proxy:!0}],null,!1,1821202730)}):e._e(),e.advanced?e._e():t("NcButton",{attrs:{type:"tertiary","aria-label":e.ariaMore},on:{click:e.handleMoreSettings},scopedSlots:e._u([{key:"icon",fn:function(){return[t("DotsHorizontal",{attrs:{size:20}})]},proxy:!0}],null,!1,1056868794)}),e.advanced?t("NcButton",{attrs:{type:"primary"},on:{click:e.handleConfirm}},[e._v(" "+e._s(e.t("Choose"))+" ")]):e._e()],1)],1)])},k=[],m=h.normalizeComponent(v,C,k,!1,null,"c959ec5a",null,null);const _=m.exports;module.exports=_;
+var q = require("../assets/index-4ef32afd.css");
+const i = require("./NcButton.cjs"), l = require("./NcPopover.cjs"), n = require("../chunks/l10n-903083c4.cjs"), u = require("../chunks/GenColors-eedcc70a.cjs"), d = require("vue-material-design-icons/ArrowLeft.vue"), p = require("vue-material-design-icons/Check.vue"), _ = require("vue-material-design-icons/DotsHorizontal.vue"), f = require("vue-color"), v = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), s = (t) => t && t.__esModule ? t : { default: t }, C = /* @__PURE__ */ s(d), h = /* @__PURE__ */ s(p), m = /* @__PURE__ */ s(_);
+const a = function(t) {
+  const e = t.toString(16);
+  return e.length === 1 ? "0" + e : e;
+}, k = {
+  name: "NcColorPicker",
+  components: {
+    ArrowLeft: C.default,
+    Check: h.default,
+    Chrome: f.Chrome,
+    DotsHorizontal: m.default,
+    NcButton: i,
+    NcPopover: l
+  },
+  props: {
+    /**
+     * A HEX color that represents the initial value of the picker
+     */
+    value: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Set to `true` to enable advanced fields including HEX, RGB, and HSL
+     */
+    advancedFields: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Provide a custom array of hexadecimal colors to show
+     */
+    palette: {
+      type: Array,
+      default: () => u.GenColors(4).map((t) => "#" + a(t.r) + a(t.g) + a(t.b)),
+      validator(t) {
+        return t.every((e) => /^#([a-f0-9]{3}|[a-f0-9]{6})$/i.test(e));
+      }
+    }
+  },
+  emits: [
+    "submit",
+    "close",
+    "update:open",
+    "update:value",
+    "input"
+  ],
+  data() {
+    return {
+      currentColor: this.value,
+      advanced: !1,
+      ariaBack: n.t("Back"),
+      ariaMore: n.t("More options")
+    };
+  },
+  watch: {
+    value(t) {
+      this.currentColor = t;
+    }
+  },
+  methods: {
+    t: n.t,
+    /**
+     * Submit a picked colour and close picker
+     */
+    handleConfirm() {
+      this.$emit("submit", this.currentColor), this.handleClose(), this.advanced = !1;
+    },
+    handleClose() {
+      this.$emit("close"), this.$emit("update:open", !1);
+    },
+    /**
+     * Inner navigations
+     */
+    handleBack() {
+      this.advanced = !1;
+    },
+    handleMoreSettings() {
+      this.advanced = !0;
+    },
+    /**
+     * Pick a colour
+     *
+     * @param {string} color the picked color
+     */
+    pickColor(t) {
+      typeof t != "string" && (t = this.currentColor.hex), this.currentColor = t, this.$emit("update:value", t), this.$emit("input", t);
+    }
+  }
+};
+var y = function() {
+  var e = this, r = e._self._c;
+  return r("NcPopover", e._g(e._b({ on: { "apply-hide": e.handleClose }, scopedSlots: e._u([{ key: "trigger", fn: function() {
+    return [e._t("default")];
+  }, proxy: !0 }], null, !0) }, "NcPopover", e.$attrs, !1), e.$listeners), [r("div", { staticClass: "color-picker", class: { "color-picker--advanced-fields": e.advanced && e.advancedFields } }, [r("transition", { attrs: { name: "slide", mode: "out-in" } }, [e.advanced ? e._e() : r("div", { staticClass: "color-picker__simple" }, e._l(e.palette, function(o, c) {
+    return r("button", { key: c, staticClass: "color-picker__simple-color-circle", class: { "color-picker__simple-color-circle--active": o === e.currentColor }, style: { "background-color": o }, attrs: { type: "button" }, on: { click: function(B) {
+      return e.pickColor(o);
+    } } }, [o === e.currentColor ? r("Check", { attrs: { size: 20 } }) : e._e()], 1);
+  }), 0), e.advanced ? r("Chrome", { staticClass: "color-picker__advanced", attrs: { "disable-alpha": !0, "disable-fields": !e.advancedFields }, on: { input: e.pickColor }, model: { value: e.currentColor, callback: function(o) {
+    e.currentColor = o;
+  }, expression: "currentColor" } }) : e._e()], 1), r("div", { staticClass: "color-picker__navigation" }, [e.advanced ? r("NcButton", { attrs: { type: "tertiary", "aria-label": e.ariaBack }, on: { click: e.handleBack }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [r("ArrowLeft", { attrs: { size: 20 } })];
+  }, proxy: !0 }], null, !1, 1821202730) }) : e._e(), e.advanced ? e._e() : r("NcButton", { attrs: { type: "tertiary", "aria-label": e.ariaMore }, on: { click: e.handleMoreSettings }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [r("DotsHorizontal", { attrs: { size: 20 } })];
+  }, proxy: !0 }], null, !1, 1056868794) }), e.advanced ? r("NcButton", { attrs: { type: "primary" }, on: { click: e.handleConfirm } }, [e._v(" " + e._s(e.t("Choose")) + " ")]) : e._e()], 1)], 1)]);
+}, g = [], b = /* @__PURE__ */ v.normalizeComponent(
+  k,
+  y,
+  g,
+  !1,
+  null,
+  "c959ec5a",
+  null,
+  null
+);
+const N = b.exports;
+module.exports = N;

package/dist/Components/NcColorPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcColorPicker.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcColorPicker.cjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\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: 40px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using v-bind 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 :value=\"color\" @input=\"updateColor\" :shown.sync=\"open\">\n\t\t\t<div :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\tmethods: {\n\t\tupdateColor(e) {\n\t\t\tthis.color = e\n\t\t}\n\t}\n}\n</script>\n<style>\n.container1 {\n\tdisplay: flex;\n}\n\n.color1 {\n\twidth: 100px;\n\theight: 40px;\n\tmargin-left: 20px;\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}\n\n.color0 {\n\twidth: 100px;\n\theight: 40px;\n\tmargin-left: 20px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcPopover v-bind=\"$attrs\" v-on=\"$listeners\" @apply-hide=\"handleClose\">\n\t\t<template #trigger>\n\t\t\t<slot />\n\t\t</template>\n\t\t<div class=\"color-picker\"\n\t\t\t:class=\"{ 'color-picker--advanced-fields': advanced && advancedFields }\">\n\t\t\t<transition name=\"slide\" mode=\"out-in\">\n\t\t\t\t<div v-if=\"!advanced\" class=\"color-picker__simple\">\n\t\t\t\t\t<button v-for=\"(color, index) in palette\"\n\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t:style=\"{'background-color': color }\"\n\t\t\t\t\t\tclass=\"color-picker__simple-color-circle\"\n\t\t\t\t\t\t:class=\"{ 'color-picker__simple-color-circle--active' : color === currentColor }\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t@click=\"pickColor(color)\">\n\t\t\t\t\t\t<Check v-if=\"color === currentColor\"\n\t\t\t\t\t\t\t:size=\"20\" />\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<Chrome v-if=\"advanced\"\n\t\t\t\t\tv-model=\"currentColor\"\n\t\t\t\t\tclass=\"color-picker__advanced\"\n\t\t\t\t\t:disable-alpha=\"true\"\n\t\t\t\t\t:disable-fields=\"!advancedFields\"\n\t\t\t\t\t@input=\"pickColor\" />\n\t\t\t</transition>\n\t\t\t<div class=\"color-picker__navigation\">\n\t\t\t\t<NcButton v-if=\"advanced\"\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t:aria-label=\"ariaBack\"\n\t\t\t\t\t@click=\"handleBack\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<ArrowLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton v-if=\"!advanced\"\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t:aria-label=\"ariaMore\"\n\t\t\t\t\t@click=\"handleMoreSettings\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<DotsHorizontal :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton v-if=\"advanced\"\n\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\t@click=\"handleConfirm\">\n\t\t\t\t\t{{ t('Choose') }}\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</div>\n\t</NcPopover>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport { t } from '../../l10n.js'\nimport GenColors from '../../utils/GenColors.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'\n\nimport { Chrome } from 'vue-color'\n\nconst rgbToHex = function(color) {\n\tconst hex = color.toString(16)\n\treturn hex.length === 1 ? '0' + hex : hex\n}\n\nexport default {\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\tvalue: {\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 * Provide a custom array of hexadecimal colors to show\n\t\t */\n\t\tpalette: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => GenColors(4).map(color => {\n\t\t\t\treturn '#' + rgbToHex(color.r) + rgbToHex(color.g) + rgbToHex(color.b)\n\t\t\t}),\n\t\t\tvalidator(palette) {\n\t\t\t\treturn palette.every(color => /^#([a-f0-9]{3}|[a-f0-9]{6})$/i.test(color))\n\t\t\t},\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:value',\n\t\t'input',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentColor: this.value,\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\twatch: {\n\t\tvalue(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 */\n\t\thandleConfirm() {\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\tthis.handleClose()\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:value', 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('input', color)\n\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\tbox-sizing: content-box !important;\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, $clickable-area);\n\t\tgrid-auto-rows: $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: 34px;\n\t\t\theight: 34px;\n\t\t\tmin-height: 34px;\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&:hover {\n\t\t\t\topacity: .6;\n\t\t\t}\n\t\t\t&--active {\n\t\t\t\twidth: 38px;\n\t\t\t\theight: 38px;\n\t\t\t\tmin-height: 38px;\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\twidth: 34px;\n\t\t\theight: 34px;\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\t\t\t.vc-input__input {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t}\n\n\t\t&-toggle-btn {\n\t\t\tfilter: var(--background-invert-if-dark);\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 {\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 {\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":["rgbToHex","color","hex","_sfc_main","ArrowLeftIcon__default","Check__default","vueColor","DotsHorizontal__default","Components_NcButton","Components_NcPopover","GenColors","palette","l10n"],"mappings":";;AAkOA,MAAAA,IAAA,SAAAC,GAAA;AACA,QAAAC,IAAAD,EAAA,SAAA,EAAA;AACA,SAAAC,EAAA,WAAA,IAAA,MAAAA,IAAAA;AACA,GAEAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC,EAAA;AAAA,IACA,OAAAC,EAAA;AAAA,IACA,QAAAC,EAAA;AAAA,IACA,gBAAAC,EAAA;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAAC,EAAA,UAAA,CAAA,EAAA,IAAA,CAAAT,MACA,MAAAD,EAAAC,EAAA,CAAA,IAAAD,EAAAC,EAAA,CAAA,IAAAD,EAAAC,EAAA,CAAA,CACA;AAAA,MACA,UAAAU,GAAA;AACA,eAAAA,EAAA,MAAA,CAAAV,MAAA,gCAAA,KAAAA,CAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAAW,EAAA,EAAA,MAAA;AAAA,MACA,UAAAA,EAAA,EAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAAX,GAAA;AACA,WAAA,eAAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,GAAAW,EAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAIA,WAAA,MAAA,UAAA,KAAA,YAAA,GACA,KAAA,YAAA,GAEA,KAAA,WAAA;AAAA,IACA;AAAA,IACA,cAAA;AAIA,WAAA,MAAA,OAAA,GACA,KAAA,MAAA,eAAA,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AACA,WAAA,WAAA;AAAA,IACA;AAAA,IACA,qBAAA;AACA,WAAA,WAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAAX,GAAA;AACA,MAAA,OAAAA,KAAA,aACAA,IAAA,KAAA,aAAA,MAEA,KAAA,eAAAA,GAKA,KAAA,MAAA,gBAAAA,CAAA,GAKA,KAAA,MAAA,SAAAA,CAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}