@nextcloud/vue 8.4.0 → 8.5.1

package/dist/chunks/NcCheckboxRadioSwitch-BiREcGAk.mjs

@@ -0,0 +1,607 @@
+import { n as a } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
+import c from "../Components/NcLoadingIcon.mjs";
+import "./NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_2603be83_lang-MzKjkB0t.mjs";
+import { G as d } from "./GenRandomId-VodkdWbp.mjs";
+import { a as u, L as h } from "./_l10n-gZppkly8.mjs";
+const 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()])])]);
+}, f = [], m = /* @__PURE__ */ a(
+  p,
+  _,
+  f,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const b = m.exports, g = {
+  name: "MinusBoxIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var k = 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()])])]);
+}, v = [], y = /* @__PURE__ */ a(
+  g,
+  k,
+  v,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const C = y.exports, x = {
+  name: "CheckboxMarkedIcon",
+  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-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 = [], A = /* @__PURE__ */ a(
+  x,
+  $,
+  w,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const S = A.exports, B = {
+  name: "RadioboxMarkedIcon",
+  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 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()])])]);
+}, T = [], I = /* @__PURE__ */ a(
+  B,
+  z,
+  T,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const V = I.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()])])]);
+}, N = [], E = /* @__PURE__ */ a(
+  M,
+  R,
+  N,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const H = E.exports, L = {
+  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 = [], Z = /* @__PURE__ */ a(
+  L,
+  O,
+  F,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const P = Z.exports, G = {
+  name: "ToggleSwitchIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var W = 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()])])]);
+}, Y = [], q = /* @__PURE__ */ a(
+  G,
+  W,
+  Y,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const j = q.exports, r = "checkbox", l = "radio", s = "switch", o = "button", D = {
+  name: "NcCheckboxContent",
+  components: {
+    NcLoadingIcon: c
+  },
+  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 {'checkbox'|'radio'|'switch'|'button'}
+     */
+    type: {
+      type: String,
+      default: "checkbox",
+      validator: (i) => [
+        r,
+        l,
+        s,
+        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;
+    },
+    /**
+     * Returns the proper Material icon depending on the select case
+     *
+     * @return {object}
+     */
+    checkboxRadioIconElement() {
+      return this.type === l ? this.isChecked ? V : H : this.type === s ? this.isChecked ? j : P : this.indeterminate ? C : this.isChecked ? S : b;
+    }
+  }
+};
+var K = function() {
+  var t = this, e = t._self._c;
+  return e("span", { staticClass: "checkbox-content", class: {
+    ["checkbox-content-" + t.type]: !0,
+    "checkbox-content--button-variant": t.buttonVariant,
+    "checkbox-content--has-text": !!t.$slots.default
+  }, attrs: { id: t.isButtonType ? void 0 : `${t.id}-label` } }, [e("span", { class: {
+    "checkbox-content__icon": !0,
+    "checkbox-content__icon--checked": t.isChecked,
+    [t.iconClass]: !0
+  }, attrs: { "aria-hidden": !0, inert: "" } }, [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), t.$slots.default ? e("span", { class: ["checkbox-content__text", t.textClass] }, [t._t("default")], 2) : t._e()]);
+}, U = [], X = /* @__PURE__ */ a(
+  D,
+  K,
+  U,
+  !1,
+  null,
+  "2672ad1a",
+  null,
+  null
+);
+const J = X.exports, Q = {
+  name: "NcCheckboxRadioSwitch",
+  components: {
+    NcCheckboxContent: J
+  },
+  props: {
+    /**
+     * Unique id attribute of the input
+     */
+    id: {
+      type: String,
+      default: () => "checkbox-radio-switch-" + d(),
+      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 {'checkbox'|'radio'|'switch'|'button'}
+     */
+    type: {
+      type: String,
+      default: "checkbox",
+      validator: (i) => [
+        r,
+        l,
+        s,
+        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
+     *
+     * @type {'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";
+    },
+    listeners() {
+      return this.isButtonType ? {
+        click: this.onToggle
+      } : {
+        change: this.onToggle
+      };
+    },
+    /**
+     * Icon size
+     *
+     * @return {number}
+     */
+    size() {
+      return this.type === s ? 36 : 24;
+    },
+    /**
+     * Css local variables for this component
+     *
+     * @return {object}
+     */
+    cssVars() {
+      return {
+        "--icon-size": this.size + "px",
+        "--icon-height": (this.type === s ? 16 : this.size) + "px"
+      };
+    },
+    /**
+     * Return the input type.
+     * Switch is not an official type
+     *
+     * @return {string}
+     */
+    inputType() {
+      return [
+        r,
+        l,
+        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;
+    },
+    hasIndeterminate() {
+      return [
+        r,
+        l
+      ].includes(this.inputType);
+    }
+  },
+  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 === s)
+      throw new Error("Switches are not made to be used for data sets. Please use checkboxes instead.");
+    if (typeof this.checked != "boolean" && this.type === s)
+      throw new Error("Switches can only be used with boolean as checked prop.");
+  },
+  methods: {
+    t: u,
+    n: h,
+    onToggle() {
+      if (this.disabled)
+        return;
+      if (this.type === l) {
+        this.$emit("update:checked", this.value);
+        return;
+      }
+      if (this.type === s) {
+        this.$emit("update:checked", !this.isChecked);
+        return;
+      }
+      if (typeof this.checked == "boolean") {
+        this.$emit("update:checked", !this.checked);
+        return;
+      }
+      const i = this.getInputsSet().filter((t) => t.checked).map((t) => t.value);
+      i.includes(this.value) ? this.$emit("update:checked", i.filter((t) => t !== this.value)) : this.$emit("update:checked", [...i, this.value]);
+    },
+    /**
+     * Get the input set based on this name
+     *
+     * @return {Node[]}
+     */
+    getInputsSet() {
+      return [...document.getElementsByName(this.name)];
+    }
+  }
+};
+var tt = 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.hasIndeterminate ? t.indeterminate : !1,
+    "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({ staticClass: "checkbox-radio-switch__input", attrs: { id: t.id, "aria-labelledby": !t.isButtonType && !t.ariaLabel ? `${t.id}-label` : null, "aria-label": t.ariaLabel || void 0, disabled: t.disabled, type: t.inputType, required: t.required, name: t.name }, domProps: { value: t.value, checked: t.isChecked, indeterminate: t.hasIndeterminate ? t.indeterminate : null } }, 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.hasIndeterminate ? t.indeterminate : !1, "button-variant": t.buttonVariant, "is-checked": t.isChecked, loading: t.loading, size: t.size }, nativeOn: { click: function(n) {
+    return t.onToggle.apply(null, arguments);
+  } }, scopedSlots: t._u([{ key: "icon", fn: function() {
+    return [t._t("icon")];
+  }, proxy: !0 }], null, !0) }, [t._t("default")], 2)], 1);
+}, et = [], it = /* @__PURE__ */ a(
+  Q,
+  tt,
+  et,
+  !1,
+  null,
+  "2603be83",
+  null,
+  null
+);
+const ot = it.exports;
+export {
+  ot as N
+};