@nextcloud/vue 8.4.0 → 9.0.0-alpha.0

package/dist/chunks/NcCheckboxRadioSwitch-Hi5ocuhB.cjs

@@ -0,0 +1,696 @@
+"use strict";
+const e = require("vue"), o = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), k = require("./NcLoadingIcon-Fwid-wWE.cjs");
+require("./NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_c3135eb8_lang-RYt-H2PA.cjs");
+const f = require("./GenRandomId-ULxaMkkr.cjs"), m = require("./_l10n-wK0o0jNS.cjs"), _ = {
+  name: "CheckboxBlankOutlineIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, g = ["aria-hidden", "aria-label"], b = ["fill", "width", "height"], y = { 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" }, B = { key: 0 };
+function C(i, l, t, c, r, n) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
+    "aria-hidden": !t.title,
+    "aria-label": t.title,
+    class: "material-design-icon checkbox-blank-outline-icon",
+    role: "img",
+    onClick: l[0] || (l[0] = (a) => i.$emit("click", a))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", y, [
+        t.title ? (e.openBlock(), e.createElementBlock("title", B, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, b))
+  ], 16, g);
+}
+const p = /* @__PURE__ */ o._export_sfc(_, [["render", C]]), x = {
+  name: "MinusBoxIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, w = ["aria-hidden", "aria-label"], V = ["fill", "width", "height"], v = { 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" }, S = { key: 0 };
+function A(i, l, t, c, r, n) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
+    "aria-hidden": !t.title,
+    "aria-label": t.title,
+    class: "material-design-icon minus-box-icon",
+    role: "img",
+    onClick: l[0] || (l[0] = (a) => i.$emit("click", a))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", v, [
+        t.title ? (e.openBlock(), e.createElementBlock("title", S, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, V))
+  ], 16, w);
+}
+const E = /* @__PURE__ */ o._export_sfc(x, [["render", A]]), N = {
+  name: "CheckboxMarkedIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, z = ["aria-hidden", "aria-label"], T = ["fill", "width", "height"], I = { 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" }, M = { key: 0 };
+function H(i, l, t, c, r, n) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
+    "aria-hidden": !t.title,
+    "aria-label": t.title,
+    class: "material-design-icon checkbox-marked-icon",
+    role: "img",
+    onClick: l[0] || (l[0] = (a) => i.$emit("click", a))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", I, [
+        t.title ? (e.openBlock(), e.createElementBlock("title", M, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, T))
+  ], 16, z);
+}
+const L = /* @__PURE__ */ o._export_sfc(N, [["render", H]]), P = {
+  name: "RadioboxMarkedIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, R = ["aria-hidden", "aria-label"], q = ["fill", "width", "height"], D = { 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" }, O = { key: 0 };
+function Z(i, l, t, c, r, n) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
+    "aria-hidden": !t.title,
+    "aria-label": t.title,
+    class: "material-design-icon radiobox-marked-icon",
+    role: "img",
+    onClick: l[0] || (l[0] = (a) => i.$emit("click", a))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", D, [
+        t.title ? (e.openBlock(), e.createElementBlock("title", O, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, q))
+  ], 16, R);
+}
+const G = /* @__PURE__ */ o._export_sfc(P, [["render", Z]]), W = {
+  name: "RadioboxBlankIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, Y = ["aria-hidden", "aria-label"], j = ["fill", "width", "height"], K = { 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" }, U = { key: 0 };
+function X(i, l, t, c, r, n) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
+    "aria-hidden": !t.title,
+    "aria-label": t.title,
+    class: "material-design-icon radiobox-blank-icon",
+    role: "img",
+    onClick: l[0] || (l[0] = (a) => i.$emit("click", a))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", K, [
+        t.title ? (e.openBlock(), e.createElementBlock("title", U, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, j))
+  ], 16, Y);
+}
+const F = /* @__PURE__ */ o._export_sfc(W, [["render", X]]), J = {
+  name: "ToggleSwitchOffIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, Q = ["aria-hidden", "aria-label"], $ = ["fill", "width", "height"], ee = { 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" }, te = { key: 0 };
+function ie(i, l, t, c, r, n) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
+    "aria-hidden": !t.title,
+    "aria-label": t.title,
+    class: "material-design-icon toggle-switch-off-icon",
+    role: "img",
+    onClick: l[0] || (l[0] = (a) => i.$emit("click", a))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", ee, [
+        t.title ? (e.openBlock(), e.createElementBlock("title", te, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, $))
+  ], 16, Q);
+}
+const ne = /* @__PURE__ */ o._export_sfc(J, [["render", ie]]), le = {
+  name: "ToggleSwitchIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, ae = ["aria-hidden", "aria-label"], oe = ["fill", "width", "height"], ce = { 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" }, re = { key: 0 };
+function se(i, l, t, c, r, n) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
+    "aria-hidden": !t.title,
+    "aria-label": t.title,
+    class: "material-design-icon toggle-switch-icon",
+    role: "img",
+    onClick: l[0] || (l[0] = (a) => i.$emit("click", a))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", ce, [
+        t.title ? (e.openBlock(), e.createElementBlock("title", re, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, oe))
+  ], 16, ae);
+}
+const de = /* @__PURE__ */ o._export_sfc(le, [["render", se]]), d = "checkbox", u = "radio", s = "switch", h = "button", ue = {
+  name: "NcCheckboxContent",
+  components: {
+    NcLoadingIcon: k.NcLoadingIcon
+  },
+  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) => [
+        d,
+        u,
+        s,
+        h
+      ].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 === h;
+    },
+    /**
+     * Returns the proper Material icon depending on the select case
+     *
+     * @return {object}
+     */
+    checkboxRadioIconElement() {
+      return this.type === u ? this.isChecked ? G : F : this.type === s ? this.isChecked ? de : ne : this.indeterminate ? E : this.isChecked ? L : p;
+    }
+  }
+}, he = ["id"];
+function me(i, l, t, c, r, n) {
+  const a = e.resolveComponent("NcLoadingIcon");
+  return e.openBlock(), e.createElementBlock("span", {
+    id: n.isButtonType ? void 0 : `${t.id}-label`,
+    class: e.normalizeClass(["checkbox-content", {
+      ["checkbox-content-" + t.type]: !0,
+      "checkbox-content--button-variant": t.buttonVariant,
+      "checkbox-content--has-text": !!i.$slots.default
+    }])
+  }, [
+    e.createElementVNode("span", {
+      class: e.normalizeClass({
+        "checkbox-content__icon": !0,
+        "checkbox-content__icon--checked": t.isChecked,
+        [t.iconClass]: !0
+      }),
+      "aria-hidden": !0,
+      inert: ""
+    }, [
+      e.renderSlot(i.$slots, "icon", {
+        checked: t.isChecked,
+        loading: t.loading
+      }, () => [
+        t.loading ? (e.openBlock(), e.createBlock(a, { key: 0 })) : t.buttonVariant ? e.createCommentVNode("", !0) : (e.openBlock(), e.createBlock(e.resolveDynamicComponent(n.checkboxRadioIconElement), {
+          key: 1,
+          size: t.size
+        }, null, 8, ["size"]))
+      ], !0)
+    ], 2),
+    i.$slots.default ? (e.openBlock(), e.createElementBlock("span", {
+      key: 0,
+      class: e.normalizeClass(["checkbox-content__text", t.textClass])
+    }, [
+      e.renderSlot(i.$slots, "default", {}, void 0, !0)
+    ], 2)) : e.createCommentVNode("", !0)
+  ], 10, he);
+}
+const ke = /* @__PURE__ */ o._export_sfc(ue, [["render", me], ["__scopeId", "data-v-adf98230"]]), fe = {
+  name: "NcCheckboxRadioSwitch",
+  components: {
+    NcCheckboxContent: ke
+  },
+  props: {
+    /**
+     * Unique id attribute of the input
+     */
+    id: {
+      type: String,
+      default: () => "checkbox-radio-switch-" + f.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 {'checkbox'|'radio'|'switch'|'button'}
+     */
+    type: {
+      type: String,
+      default: "checkbox",
+      validator: (i) => [
+        d,
+        u,
+        s,
+        h
+      ].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 `v-model:value`
+     */
+    modelValue: {
+      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:modelValue"],
+  computed: {
+    isButtonType() {
+      return this.type === h;
+    },
+    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 [
+        d,
+        u,
+        h
+      ].includes(this.type) ? this.type : d;
+    },
+    /**
+     * 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.modelValue) ? [...this.modelValue].indexOf(this.value) > -1 : this.modelValue === this.value : this.modelValue === !0;
+    },
+    hasIndeterminate() {
+      return [
+        d,
+        u
+      ].includes(this.inputType);
+    }
+  },
+  mounted() {
+    if (this.name && this.type === d && !Array.isArray(this.modelValue))
+      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.modelValue != "boolean" && this.type === s)
+      throw new Error("Switches can only be used with boolean as modelValue prop.");
+  },
+  methods: {
+    t: m.t,
+    n: m.n,
+    onToggle() {
+      if (this.disabled)
+        return;
+      if (this.type === u) {
+        this.$emit("update:modelValue", this.value);
+        return;
+      }
+      if (this.type === s) {
+        this.$emit("update:modelValue", !this.isChecked);
+        return;
+      }
+      if (typeof this.modelValue == "boolean") {
+        this.$emit("update:modelValue", !this.isChecked);
+        return;
+      }
+      const i = this.getInputsSet().filter((l) => l.checked).map((l) => l.value);
+      this.$emit("update:modelValue", i);
+    },
+    /**
+     * Get the input set based on this name
+     *
+     * @return {Node[]}
+     */
+    getInputsSet() {
+      return [...document.getElementsByName(this.name)];
+    }
+  }
+}, _e = ["id", "aria-labelledby", "aria-label", "disabled", "type", "value", "checked", ".indeterminate", "required", "name"];
+function ge(i, l, t, c, r, n) {
+  const a = e.resolveComponent("NcCheckboxContent");
+  return e.openBlock(), e.createBlock(e.resolveDynamicComponent(n.computedWrapperElement), e.mergeProps({
+    id: t.wrapperId,
+    "aria-label": n.isButtonType && t.ariaLabel ? t.ariaLabel : void 0,
+    class: [{
+      ["checkbox-radio-switch-" + t.type]: t.type,
+      "checkbox-radio-switch--checked": n.isChecked,
+      "checkbox-radio-switch--disabled": t.disabled,
+      "checkbox-radio-switch--indeterminate": n.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": n.isButtonType
+    }, "checkbox-radio-switch"],
+    style: n.cssVars,
+    type: n.isButtonType ? "button" : null
+  }, e.toHandlers(n.isButtonType ? n.listeners : {})), {
+    default: e.withCtx(() => [
+      n.isButtonType ? e.createCommentVNode("", !0) : (e.openBlock(), e.createElementBlock("input", e.mergeProps({
+        key: 0,
+        id: t.id,
+        "aria-labelledby": !n.isButtonType && !t.ariaLabel ? `${t.id}-label` : null,
+        "aria-label": t.ariaLabel || void 0,
+        class: "checkbox-radio-switch__input",
+        disabled: t.disabled,
+        type: n.inputType,
+        value: t.value,
+        checked: n.isChecked,
+        ".indeterminate": n.hasIndeterminate ? t.indeterminate : null,
+        required: t.required,
+        name: t.name
+      }, e.toHandlers(n.listeners, !0)), null, 48, _e)),
+      e.createVNode(a, {
+        id: t.id,
+        class: "checkbox-radio-switch__content",
+        "icon-class": "checkbox-radio-switch__icon",
+        "text-class": "checkbox-radio-switch__text",
+        type: t.type,
+        indeterminate: n.hasIndeterminate ? t.indeterminate : !1,
+        "button-variant": t.buttonVariant,
+        "is-checked": n.isChecked,
+        loading: t.loading,
+        size: n.size,
+        onClick: n.onToggle
+      }, e.createSlots({
+        icon: e.withCtx(() => [
+          e.renderSlot(i.$slots, "icon", {}, void 0, !0)
+        ]),
+        _: 2
+      }, [
+        i.$slots.default ? {
+          name: "default",
+          fn: e.withCtx(() => [
+            e.renderSlot(i.$slots, "default", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["id", "type", "indeterminate", "button-variant", "is-checked", "loading", "size", "onClick"])
+    ]),
+    _: 3
+  }, 16, ["id", "aria-label", "class", "style", "type"]);
+}
+const be = /* @__PURE__ */ o._export_sfc(fe, [["render", ge], ["__scopeId", "data-v-c3135eb8"]]);
+exports.NcCheckboxRadioSwitch = be;