@nextcloud/vue 8.0.0-beta.8 → 8.0.0

package/dist/Components/NcCheckboxRadioSwitch.cjs

@@ -1,19 +1,362 @@
-var I = require("../assets/index-194e9415.css");
-const c = require("./NcLoadingIcon.cjs"), d = require("../chunks/GenRandomId-c214d235.cjs"), u = require("../chunks/l10n-4326316a.cjs"), l = require("vue-material-design-icons/CheckboxBlankOutline.vue"), h = require("vue-material-design-icons/MinusBox.vue"), p = require("vue-material-design-icons/CheckboxMarked.vue"), f = require("vue-material-design-icons/RadioboxMarked.vue"), k = require("vue-material-design-icons/RadioboxBlank.vue"), _ = require("vue-material-design-icons/ToggleSwitchOff.vue"), b = require("vue-material-design-icons/ToggleSwitch.vue"), m = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), n = (t) => t && t.__esModule ? t : { default: t }, y = /* @__PURE__ */ n(l), g = /* @__PURE__ */ n(h), x = /* @__PURE__ */ n(p), w = /* @__PURE__ */ n(f), v = /* @__PURE__ */ n(k), C = /* @__PURE__ */ n(_), S = /* @__PURE__ */ n(b);
-const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
-  name: "NcCheckboxRadioSwitch",
+var nt = require("../assets/index-d5716ef0.css");
+const s = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), c = require("./NcLoadingIcon.cjs"), u = require("../chunks/GenRandomId-c214d235.cjs"), d = require("../chunks/l10n-9321b50d.cjs"), p = {
+  name: "CheckboxBlankOutlineIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var _ = function() {
+  var t = this, e = t._self._c;
+  return e("span", t._b({ staticClass: "material-design-icon checkbox-blank-outline-icon", attrs: { "aria-hidden": !t.title, "aria-label": t.title, role: "img" }, on: { click: function(n) {
+    return t.$emit("click", n);
+  } } }, "span", t.$attrs, !1), [e("svg", { staticClass: "material-design-icon__svg", attrs: { fill: t.fillColor, width: t.size, height: t.size, viewBox: "0 0 24 24" } }, [e("path", { attrs: { d: "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" } }, [t.title ? e("title", [t._v(t._s(t.title))]) : t._e()])])]);
+}, h = [], f = /* @__PURE__ */ s.normalizeComponent(
+  p,
+  _,
+  h,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const m = f.exports, g = {
+  name: "MinusBoxIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var b = function() {
+  var t = this, e = t._self._c;
+  return e("span", t._b({ staticClass: "material-design-icon minus-box-icon", attrs: { "aria-hidden": !t.title, "aria-label": t.title, role: "img" }, on: { click: function(n) {
+    return t.$emit("click", n);
+  } } }, "span", t.$attrs, !1), [e("svg", { staticClass: "material-design-icon__svg", attrs: { fill: t.fillColor, width: t.size, height: t.size, viewBox: "0 0 24 24" } }, [e("path", { attrs: { d: "M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" } }, [t.title ? e("title", [t._v(t._s(t.title))]) : t._e()])])]);
+}, k = [], v = /* @__PURE__ */ s.normalizeComponent(
+  g,
+  b,
+  k,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const y = v.exports, C = {
+  name: "CheckboxMarkedIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var x = function() {
+  var t = this, e = t._self._c;
+  return e("span", t._b({ staticClass: "material-design-icon checkbox-marked-icon", attrs: { "aria-hidden": !t.title, "aria-label": t.title, role: "img" }, on: { click: function(n) {
+    return t.$emit("click", n);
+  } } }, "span", t.$attrs, !1), [e("svg", { staticClass: "material-design-icon__svg", attrs: { fill: t.fillColor, width: t.size, height: t.size, viewBox: "0 0 24 24" } }, [e("path", { attrs: { d: "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" } }, [t.title ? e("title", [t._v(t._s(t.title))]) : t._e()])])]);
+}, w = [], $ = /* @__PURE__ */ s.normalizeComponent(
+  C,
+  x,
+  w,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const A = $.exports, z = {
+  name: "RadioboxMarkedIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var S = function() {
+  var t = this, e = t._self._c;
+  return e("span", t._b({ staticClass: "material-design-icon radiobox-marked-icon", attrs: { "aria-hidden": !t.title, "aria-label": t.title, role: "img" }, on: { click: function(n) {
+    return t.$emit("click", n);
+  } } }, "span", t.$attrs, !1), [e("svg", { staticClass: "material-design-icon__svg", attrs: { fill: t.fillColor, width: t.size, height: t.size, viewBox: "0 0 24 24" } }, [e("path", { attrs: { d: "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z" } }, [t.title ? e("title", [t._v(t._s(t.title))]) : t._e()])])]);
+}, B = [], T = /* @__PURE__ */ s.normalizeComponent(
+  z,
+  S,
+  B,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const V = T.exports, M = {
+  name: "RadioboxBlankIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var R = function() {
+  var t = this, e = t._self._c;
+  return e("span", t._b({ staticClass: "material-design-icon radiobox-blank-icon", attrs: { "aria-hidden": !t.title, "aria-label": t.title, role: "img" }, on: { click: function(n) {
+    return t.$emit("click", n);
+  } } }, "span", t.$attrs, !1), [e("svg", { staticClass: "material-design-icon__svg", attrs: { fill: t.fillColor, width: t.size, height: t.size, viewBox: "0 0 24 24" } }, [e("path", { attrs: { d: "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" } }, [t.title ? e("title", [t._v(t._s(t.title))]) : t._e()])])]);
+}, I = [], N = /* @__PURE__ */ s.normalizeComponent(
+  M,
+  R,
+  I,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const E = N.exports, H = {
+  name: "ToggleSwitchOffIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var O = function() {
+  var t = this, e = t._self._c;
+  return e("span", t._b({ staticClass: "material-design-icon toggle-switch-off-icon", attrs: { "aria-hidden": !t.title, "aria-label": t.title, role: "img" }, on: { click: function(n) {
+    return t.$emit("click", n);
+  } } }, "span", t.$attrs, !1), [e("svg", { staticClass: "material-design-icon__svg", attrs: { fill: t.fillColor, width: t.size, height: t.size, viewBox: "0 0 24 24" } }, [e("path", { attrs: { d: "M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z" } }, [t.title ? e("title", [t._v(t._s(t.title))]) : t._e()])])]);
+}, F = [], L = /* @__PURE__ */ s.normalizeComponent(
+  H,
+  O,
+  F,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const P = L.exports, q = {
+  name: "ToggleSwitchIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var Z = function() {
+  var t = this, e = t._self._c;
+  return e("span", t._b({ staticClass: "material-design-icon toggle-switch-icon", attrs: { "aria-hidden": !t.title, "aria-label": t.title, role: "img" }, on: { click: function(n) {
+    return t.$emit("click", n);
+  } } }, "span", t.$attrs, !1), [e("svg", { staticClass: "material-design-icon__svg", attrs: { fill: t.fillColor, width: t.size, height: t.size, viewBox: "0 0 24 24" } }, [e("path", { attrs: { d: "M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z" } }, [t.title ? e("title", [t._v(t._s(t.title))]) : t._e()])])]);
+}, G = [], W = /* @__PURE__ */ s.normalizeComponent(
+  q,
+  Z,
+  G,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const Y = W.exports;
+const r = "checkbox", l = "radio", a = "switch", o = "button", j = {
+  name: "NcCheckboxContent",
   components: {
     NcLoadingIcon: c
   },
-  mixins: [u.l10n],
+  props: {
+    /**
+     * Unique id attribute of the input to label
+     */
+    id: {
+      type: String,
+      default: null
+    },
+    /**
+     * Class for the icon element
+     */
+    iconClass: {
+      type: [String, Object],
+      default: null
+    },
+    /**
+     * Class for the text element
+     */
+    textClass: {
+      type: [String, Object],
+      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: (i) => [
+        r,
+        l,
+        a,
+        o
+      ].includes(i)
+    },
+    /**
+     * Toggle the alternative button style
+     */
+    buttonVariant: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * True if the entry is checked
+     */
+    isChecked: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indeterminate state
+     */
+    indeterminate: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Loading state
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Icon size
+     */
+    size: {
+      type: Number,
+      default: 24
+    }
+  },
+  computed: {
+    isButtonType() {
+      return this.type === o;
+    },
+    wrapperElement() {
+      return this.isButtonType ? "span" : "label";
+    },
+    /**
+     * Returns the proper Material icon depending on the select case
+     *
+     * @return {object}
+     */
+    checkboxRadioIconElement() {
+      return this.type === l ? this.isChecked ? V : E : this.type === a ? this.isChecked ? Y : P : this.indeterminate ? y : this.isChecked ? A : m;
+    }
+  }
+};
+var D = function() {
+  var t = this, e = t._self._c;
+  return e(t.wrapperElement, { tag: "component", staticClass: "checkbox-content", attrs: { for: t.isButtonType ? null : t.id } }, [e("span", { class: ["checkbox-content__icon", t.iconClass], attrs: { "aria-hidden": !0 } }, [t._t("icon", function() {
+    return [t.loading ? e("NcLoadingIcon") : t.buttonVariant ? t._e() : e(t.checkboxRadioIconElement, { tag: "component", attrs: { size: t.size } })];
+  }, { checked: t.isChecked, loading: t.loading })], 2), e("span", { class: ["checkbox-content__text", t.textClass] }, [t._t("default")], 2)]);
+}, K = [], U = /* @__PURE__ */ s.normalizeComponent(
+  j,
+  D,
+  K,
+  !1,
+  null,
+  "fae4dec7",
+  null,
+  null
+);
+const X = U.exports;
+const J = {
+  name: "NcCheckboxRadioSwitch",
+  components: {
+    NcCheckboxContent: X
+  },
+  mixins: [d.l10n],
   props: {
     /**
      * Unique id attribute of the input
      */
     id: {
       type: String,
-      default: () => "checkbox-radio-switch-" + d.GenRandomId(),
-      validator: (t) => t.trim() !== ""
+      default: () => "checkbox-radio-switch-" + u.GenRandomId(),
+      validator: (i) => i.trim() !== ""
+    },
+    /**
+     * Unique id attribute of the wrapper element
+     */
+    wrapperId: {
+      type: String,
+      default: null
     },
     /**
      * Input name. Required for radio, optional for checkbox, and ignored
@@ -32,12 +375,12 @@ const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
     type: {
       type: String,
       default: "checkbox",
-      validator: (t) => [
-        o,
-        s,
+      validator: (i) => [
+        r,
+        l,
         a,
-        r
-      ].includes(t)
+        o
+      ].includes(i)
     },
     /**
      * Toggle the alternative button style
@@ -54,7 +397,7 @@ const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
     buttonVariantGrouped: {
       type: String,
       default: "no",
-      validator: (t) => ["no", "vertical", "horizontal"].includes(t)
+      validator: (i) => ["no", "vertical", "horizontal"].includes(i)
     },
     /**
      * Checked state. To be used with `:value.sync`
@@ -100,24 +443,34 @@ const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
     },
     /**
      * Wrapping element tag
+     *
+     * When `type` is set to `button` this will be ignored
+     *
+     * Defaults to `span`
      */
     wrapperElement: {
       type: String,
-      default: "span"
+      default: null
     }
   },
   emits: ["update:checked"],
   computed: {
+    isButtonType() {
+      return this.type === o;
+    },
+    computedWrapperElement() {
+      return this.isButtonType ? "button" : this.wrapperElement !== null ? this.wrapperElement : "span";
+    },
     inputProps() {
-      return this.type === r ? null : {
+      return this.isButtonType ? null : {
         checked: this.isChecked,
         indeterminate: this.indeterminate,
         required: this.required,
         name: this.name
       };
     },
-    inputListeners() {
-      return this.type === r ? {
+    listeners() {
+      return this.isButtonType ? {
         click: this.onToggle
       } : {
         change: this.onToggle
@@ -126,7 +479,7 @@ const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
     /**
      * Icon size
      *
-     @return {number}
+     * @return {number}
      */
     size() {
       return this.type === a ? 36 : 24;
@@ -149,10 +502,10 @@ const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
      */
     inputType() {
       return [
-        o,
-        s,
-        r
-      ].includes(this.type) ? this.type : o;
+        r,
+        l,
+        o
+      ].includes(this.type) ? this.type : r;
     },
     /**
      * Check if that entry is checked
@@ -163,18 +516,10 @@ const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
      */
     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 === s ? this.isChecked ? w.default : v.default : this.type === a ? this.isChecked ? S.default : C.default : this.indeterminate ? g.default : this.isChecked ? x.default : y.default;
     }
   },
   mounted() {
-    if (this.name && this.type === o && !Array.isArray(this.checked))
+    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.");
@@ -185,7 +530,7 @@ const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
     onToggle() {
       if (this.disabled)
         return;
-      if (this.type === s) {
+      if (this.type === l) {
         this.$emit("update:checked", this.value);
         return;
       }
@@ -197,8 +542,8 @@ const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
         this.$emit("update:checked", !this.isChecked);
         return;
       }
-      const t = this.getInputsSet().filter((e) => e.checked).map((e) => e.value);
-      this.$emit("update:checked", t);
+      const i = this.getInputsSet().filter((t) => t.checked).map((t) => t.value);
+      this.$emit("update:checked", i);
     },
     /**
      * Get the input set based on this name
@@ -210,28 +555,29 @@ const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
     }
   }
 };
-var B = 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)])]);
-}, q = [], E = /* @__PURE__ */ m.normalizeComponent(
-  T,
-  B,
-  q,
+var Q = function() {
+  var t = this, e = t._self._c;
+  return e(t.computedWrapperElement, t._g({ tag: "component", staticClass: "checkbox-radio-switch", class: {
+    ["checkbox-radio-switch-" + t.type]: t.type,
+    "checkbox-radio-switch--checked": t.isChecked,
+    "checkbox-radio-switch--disabled": t.disabled,
+    "checkbox-radio-switch--indeterminate": t.indeterminate,
+    "checkbox-radio-switch--button-variant": t.buttonVariant,
+    "checkbox-radio-switch--button-variant-v-grouped": t.buttonVariant && t.buttonVariantGrouped === "vertical",
+    "checkbox-radio-switch--button-variant-h-grouped": t.buttonVariant && t.buttonVariantGrouped === "horizontal",
+    "button-vue": t.isButtonType
+  }, style: t.cssVars, attrs: { id: t.wrapperId, type: t.isButtonType ? "button" : null } }, t.isButtonType ? t.listeners : null), [t.isButtonType ? t._e() : e("input", t._g(t._b({ staticClass: "checkbox-radio-switch__input", attrs: { id: t.id, disabled: t.disabled, type: t.inputType }, domProps: { value: t.value } }, "input", t.inputProps, !1), t.listeners)), e("NcCheckboxContent", { staticClass: "checkbox-radio-switch__content", attrs: { id: t.id, "icon-class": "checkbox-radio-switch__icon", "text-class": "checkbox-radio-switch__text", type: t.type, indeterminate: t.indeterminate, "button-variant": t.buttonVariant, "is-checked": t.isChecked, loading: t.loading, size: t.size }, scopedSlots: t._u([{ key: "icon", fn: function() {
+    return [t._t("icon")];
+  }, proxy: !0 }], null, !0) }, [t._t("default")], 2)], 1);
+}, tt = [], et = /* @__PURE__ */ s.normalizeComponent(
+  J,
+  Q,
+  tt,
   !1,
   null,
-  "a6f82e18",
+  "cd8a5db4",
   null,
   null
 );
-const R = E.exports;
-module.exports = R;
+const it = et.exports;
+module.exports = it;