@nextcloud/vue 8.4.0 → 9.0.0-alpha.0

package/dist/Components/NcCheckboxRadioSwitch.cjs

@@ -1,600 +1,3 @@
-var nt = require("../assets/index-7f77b8ae.css");
-const a = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), u = require("./NcLoadingIcon.cjs"), d = require("../chunks/GenRandomId-c214d235.cjs"), c = require("../chunks/_l10n-72c5e29e.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__ */ a.normalizeComponent(
-  p,
-  _,
-  h,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const m = f.exports, b = {
-  name: "MinusBoxIcon",
-  emits: ["click"],
-  props: {
-    title: {
-      type: String
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-};
-var g = 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__ */ a.normalizeComponent(
-  b,
-  g,
-  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__ */ a.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__ */ a.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__ */ a.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 L = 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()])])]);
-}, O = [], F = /* @__PURE__ */ a.normalizeComponent(
-  H,
-  L,
-  O,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const P = F.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__ */ a.normalizeComponent(
-  q,
-  Z,
-  G,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const Y = W.exports;
-const s = "checkbox", l = "radio", r = "switch", o = "button", j = {
-  name: "NcCheckboxContent",
-  components: {
-    NcLoadingIcon: u
-  },
-  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) => [
-        s,
-        l,
-        r,
-        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 === r ? 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", class: {
-    ["checkbox-content-" + t.type]: !0,
-    "checkbox-content--button-variant": t.buttonVariant
-  }, attrs: { for: t.isButtonType ? null : t.id } }, [e("span", { class: {
-    "checkbox-content__icon": !0,
-    "checkbox-content__icon--checked": t.isChecked,
-    [t.iconClass]: !0
-  }, 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__ */ a.normalizeComponent(
-  j,
-  D,
-  K,
-  !1,
-  null,
-  "bc42acb7",
-  null,
-  null
-);
-const X = U.exports;
-c.register();
-const J = {
-  name: "NcCheckboxRadioSwitch",
-  components: {
-    NcCheckboxContent: X
-  },
-  props: {
-    /**
-     * Unique id attribute of the input
-     */
-    id: {
-      type: String,
-      default: () => "checkbox-radio-switch-" + d.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
-     * for button.
-     */
-    name: {
-      type: String,
-      default: null
-    },
-    /**
-     * Required if no text is set.
-     * The aria-label is forwarded to the input or button.
-     */
-    ariaLabel: {
-      type: String,
-      default: ""
-    },
-    /**
-     * 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) => [
-        s,
-        l,
-        r,
-        o
-      ].includes(i)
-    },
-    /**
-     * 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: (i) => ["no", "vertical", "horizontal"].includes(i)
-    },
-    /**
-     * 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
-     *
-     * When `type` is set to `button` this will be ignored
-     *
-     * Defaults to `span`
-     */
-    wrapperElement: {
-      type: String,
-      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.isButtonType ? null : {
-        checked: this.isChecked,
-        indeterminate: this.indeterminate,
-        required: this.required,
-        name: this.name
-      };
-    },
-    listeners() {
-      return this.isButtonType ? {
-        click: this.onToggle
-      } : {
-        change: this.onToggle
-      };
-    },
-    /**
-     * Icon size
-     *
-     * @return {number}
-     */
-    size() {
-      return this.type === r ? 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 [
-        s,
-        l,
-        o
-      ].includes(this.type) ? this.type : s;
-    },
-    /**
-     * 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;
-    }
-  },
-  mounted() {
-    if (this.name && this.type === s && !Array.isArray(this.checked))
-      throw new Error("When using groups of checkboxes, the updated value will be an array.");
-    if (this.name && this.type === r)
-      throw new Error("Switches are not made to be used for data sets. Please use checkboxes instead.");
-    if (typeof this.checked != "boolean" && this.type === r)
-      throw new Error("Switches can only be used with boolean as checked prop.");
-  },
-  methods: {
-    t: c.t,
-    n: c.n,
-    onToggle() {
-      if (this.disabled)
-        return;
-      if (this.type === l) {
-        this.$emit("update:checked", this.value);
-        return;
-      }
-      if (this.type === r) {
-        this.$emit("update:checked", !this.isChecked);
-        return;
-      }
-      if (typeof this.checked == "boolean") {
-        this.$emit("update:checked", !this.isChecked);
-        return;
-      }
-      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
-     *
-     * @return {Node[]}
-     */
-    getInputsSet() {
-      return [...document.getElementsByName(this.name)];
-    }
-  }
-};
-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, "aria-label": t.isButtonType && t.ariaLabel ? t.ariaLabel : void 0, 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, "aria-label": t.ariaLabel || void 0, 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__ */ a.normalizeComponent(
-  J,
-  Q,
-  tt,
-  !1,
-  null,
-  "87511acb",
-  null,
-  null
-);
-const it = et.exports;
-module.exports = it;
+"use strict";
+const c = require("../chunks/NcCheckboxRadioSwitch-Hi5ocuhB.cjs");
+module.exports = c.NcCheckboxRadioSwitch;