@nextcloud/vue 9.0.0-alpha.1 → 9.0.0-alpha.2

package/dist/chunks/NcCheckboxRadioSwitch-CDiJJ9IX.mjs

@@ -0,0 +1,701 @@
+import { openBlock as a, createElementBlock as l, mergeProps as r, createElementVNode as f, toDisplayString as m, createCommentVNode as s, resolveComponent as x, normalizeClass as k, renderSlot as y, createBlock as w, resolveDynamicComponent as A, toHandlers as v, withCtx as C, createVNode as S, createSlots as V } from "vue";
+import { _ as d } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+import { N as B } from "./NcLoadingIcon-C5Ohiq97.mjs";
+import "./NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_48c28b96_lang-CHo5e7Ze.mjs";
+import { G as z } from "./GenRandomId-BW3iYFf9.mjs";
+import { a as T, L as p } from "./_l10n-D1NkaqfQ.mjs";
+const I = {
+  name: "CheckboxBlankOutlineIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, N = ["aria-hidden", "aria-label"], M = ["fill", "width", "height"], E = { 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" }, H = { key: 0 };
+function L(t, n, e, c, u, i) {
+  return a(), l("span", r(t.$attrs, {
+    "aria-hidden": e.title ? null : !0,
+    "aria-label": e.title,
+    class: "material-design-icon checkbox-blank-outline-icon",
+    role: "img",
+    onClick: n[0] || (n[0] = (o) => t.$emit("click", o))
+  }), [
+    (a(), l("svg", {
+      fill: e.fillColor,
+      class: "material-design-icon__svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "0 0 24 24"
+    }, [
+      f("path", E, [
+        e.title ? (a(), l("title", H, m(e.title), 1)) : s("", !0)
+      ])
+    ], 8, M))
+  ], 16, N);
+}
+const O = /* @__PURE__ */ d(I, [["render", L]]), R = {
+  name: "MinusBoxIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, Z = ["aria-hidden", "aria-label"], P = ["fill", "width", "height"], G = { 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" }, q = { key: 0 };
+function W(t, n, e, c, u, i) {
+  return a(), l("span", r(t.$attrs, {
+    "aria-hidden": e.title ? null : !0,
+    "aria-label": e.title,
+    class: "material-design-icon minus-box-icon",
+    role: "img",
+    onClick: n[0] || (n[0] = (o) => t.$emit("click", o))
+  }), [
+    (a(), l("svg", {
+      fill: e.fillColor,
+      class: "material-design-icon__svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "0 0 24 24"
+    }, [
+      f("path", G, [
+        e.title ? (a(), l("title", q, m(e.title), 1)) : s("", !0)
+      ])
+    ], 8, P))
+  ], 16, Z);
+}
+const Y = /* @__PURE__ */ d(R, [["render", W]]), D = {
+  name: "CheckboxMarkedIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, j = ["aria-hidden", "aria-label"], K = ["fill", "width", "height"], U = { 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" }, X = { key: 0 };
+function F(t, n, e, c, u, i) {
+  return a(), l("span", r(t.$attrs, {
+    "aria-hidden": e.title ? null : !0,
+    "aria-label": e.title,
+    class: "material-design-icon checkbox-marked-icon",
+    role: "img",
+    onClick: n[0] || (n[0] = (o) => t.$emit("click", o))
+  }), [
+    (a(), l("svg", {
+      fill: e.fillColor,
+      class: "material-design-icon__svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "0 0 24 24"
+    }, [
+      f("path", U, [
+        e.title ? (a(), l("title", X, m(e.title), 1)) : s("", !0)
+      ])
+    ], 8, K))
+  ], 16, j);
+}
+const J = /* @__PURE__ */ d(D, [["render", F]]), Q = {
+  name: "RadioboxMarkedIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, $ = ["aria-hidden", "aria-label"], ee = ["fill", "width", "height"], te = { 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" }, ie = { key: 0 };
+function ne(t, n, e, c, u, i) {
+  return a(), l("span", r(t.$attrs, {
+    "aria-hidden": e.title ? null : !0,
+    "aria-label": e.title,
+    class: "material-design-icon radiobox-marked-icon",
+    role: "img",
+    onClick: n[0] || (n[0] = (o) => t.$emit("click", o))
+  }), [
+    (a(), l("svg", {
+      fill: e.fillColor,
+      class: "material-design-icon__svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "0 0 24 24"
+    }, [
+      f("path", te, [
+        e.title ? (a(), l("title", ie, m(e.title), 1)) : s("", !0)
+      ])
+    ], 8, ee))
+  ], 16, $);
+}
+const ae = /* @__PURE__ */ d(Q, [["render", ne]]), le = {
+  name: "RadioboxBlankIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, oe = ["aria-hidden", "aria-label"], se = ["fill", "width", "height"], re = { 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" }, de = { key: 0 };
+function ce(t, n, e, c, u, i) {
+  return a(), l("span", r(t.$attrs, {
+    "aria-hidden": e.title ? null : !0,
+    "aria-label": e.title,
+    class: "material-design-icon radiobox-blank-icon",
+    role: "img",
+    onClick: n[0] || (n[0] = (o) => t.$emit("click", o))
+  }), [
+    (a(), l("svg", {
+      fill: e.fillColor,
+      class: "material-design-icon__svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "0 0 24 24"
+    }, [
+      f("path", re, [
+        e.title ? (a(), l("title", de, m(e.title), 1)) : s("", !0)
+      ])
+    ], 8, se))
+  ], 16, oe);
+}
+const ue = /* @__PURE__ */ d(le, [["render", ce]]), he = {
+  name: "ToggleSwitchOffIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, fe = ["aria-hidden", "aria-label"], me = ["fill", "width", "height"], _e = { 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" }, be = { key: 0 };
+function ge(t, n, e, c, u, i) {
+  return a(), l("span", r(t.$attrs, {
+    "aria-hidden": e.title ? null : !0,
+    "aria-label": e.title,
+    class: "material-design-icon toggle-switch-off-icon",
+    role: "img",
+    onClick: n[0] || (n[0] = (o) => t.$emit("click", o))
+  }), [
+    (a(), l("svg", {
+      fill: e.fillColor,
+      class: "material-design-icon__svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "0 0 24 24"
+    }, [
+      f("path", _e, [
+        e.title ? (a(), l("title", be, m(e.title), 1)) : s("", !0)
+      ])
+    ], 8, me))
+  ], 16, fe);
+}
+const ye = /* @__PURE__ */ d(he, [["render", ge]]), ke = {
+  name: "ToggleSwitchIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, Ce = ["aria-hidden", "aria-label"], we = ["fill", "width", "height"], ve = { 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" }, xe = { key: 0 };
+function Ae(t, n, e, c, u, i) {
+  return a(), l("span", r(t.$attrs, {
+    "aria-hidden": e.title ? null : !0,
+    "aria-label": e.title,
+    class: "material-design-icon toggle-switch-icon",
+    role: "img",
+    onClick: n[0] || (n[0] = (o) => t.$emit("click", o))
+  }), [
+    (a(), l("svg", {
+      fill: e.fillColor,
+      class: "material-design-icon__svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "0 0 24 24"
+    }, [
+      f("path", ve, [
+        e.title ? (a(), l("title", xe, m(e.title), 1)) : s("", !0)
+      ])
+    ], 8, we))
+  ], 16, Ce);
+}
+const Se = /* @__PURE__ */ d(ke, [["render", Ae]]), _ = "checkbox", b = "radio", h = "switch", g = "button", Ve = {
+  name: "NcCheckboxContent",
+  components: {
+    NcLoadingIcon: B
+  },
+  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: (t) => [
+        _,
+        b,
+        h,
+        g
+      ].includes(t)
+    },
+    /**
+     * 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 === g;
+    },
+    /**
+     * Returns the proper Material icon depending on the select case
+     *
+     * @return {object}
+     */
+    checkboxRadioIconElement() {
+      return this.type === b ? this.isChecked ? ae : ue : this.type === h ? this.isChecked ? Se : ye : this.indeterminate ? Y : this.isChecked ? J : O;
+    }
+  }
+}, Be = ["id"];
+function ze(t, n, e, c, u, i) {
+  const o = x("NcLoadingIcon");
+  return a(), l("span", {
+    id: i.isButtonType ? void 0 : "".concat(e.id, "-label"),
+    class: k(["checkbox-content", {
+      ["checkbox-content-" + e.type]: !0,
+      "checkbox-content--button-variant": e.buttonVariant,
+      "checkbox-content--has-text": !!t.$slots.default
+    }])
+  }, [
+    f("span", {
+      class: k({
+        "checkbox-content__icon": !0,
+        "checkbox-content__icon--checked": e.isChecked,
+        [e.iconClass]: !0
+      }),
+      "aria-hidden": !0,
+      inert: ""
+    }, [
+      y(t.$slots, "icon", {
+        checked: e.isChecked,
+        loading: e.loading
+      }, () => [
+        e.loading ? (a(), w(o, { key: 0 })) : e.buttonVariant ? s("", !0) : (a(), w(A(i.checkboxRadioIconElement), {
+          key: 1,
+          size: e.size
+        }, null, 8, ["size"]))
+      ], !0)
+    ], 2),
+    t.$slots.default ? (a(), l("span", {
+      key: 0,
+      class: k(["checkbox-content__text", e.textClass])
+    }, [
+      y(t.$slots, "default", {}, void 0, !0)
+    ], 2)) : s("", !0)
+  ], 10, Be);
+}
+const Te = /* @__PURE__ */ d(Ve, [["render", ze], ["__scopeId", "data-v-2672ad1a"]]), pe = {
+  name: "NcCheckboxRadioSwitch",
+  components: {
+    NcCheckboxContent: Te
+  },
+  props: {
+    /**
+     * Unique id attribute of the input
+     */
+    id: {
+      type: String,
+      default: () => "checkbox-radio-switch-" + z(),
+      validator: (t) => t.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: (t) => [
+        _,
+        b,
+        h,
+        g
+      ].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
+     *
+     * @type {'no'|'horizontal'|'vertical'}
+     */
+    buttonVariantGrouped: {
+      type: String,
+      default: "no",
+      validator: (t) => ["no", "vertical", "horizontal"].includes(t)
+    },
+    /**
+     * 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 === g;
+    },
+    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 === h ? 36 : 24;
+    },
+    /**
+     * Css local variables for this component
+     *
+     * @return {object}
+     */
+    cssVars() {
+      return {
+        "--icon-size": this.size + "px",
+        "--icon-height": (this.type === h ? 16 : this.size) + "px"
+      };
+    },
+    /**
+     * Return the input type.
+     * Switch is not an official type
+     *
+     * @return {string}
+     */
+    inputType() {
+      return [
+        _,
+        b,
+        g
+      ].includes(this.type) ? this.type : _;
+    },
+    /**
+     * 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 [
+        _,
+        b
+      ].includes(this.inputType);
+    }
+  },
+  mounted() {
+    if (this.name && this.type === _ && !Array.isArray(this.modelValue))
+      throw new Error("When using groups of checkboxes, the updated value will be an array.");
+    if (this.name && this.type === h)
+      throw new Error("Switches are not made to be used for data sets. Please use checkboxes instead.");
+    if (typeof this.modelValue != "boolean" && this.type === h)
+      throw new Error("Switches can only be used with boolean as modelValue prop.");
+  },
+  methods: {
+    t: T,
+    n: p,
+    onToggle() {
+      if (this.disabled)
+        return;
+      if (this.type === b) {
+        this.$emit("update:modelValue", this.value);
+        return;
+      }
+      if (this.type === h) {
+        this.$emit("update:modelValue", !this.isChecked);
+        return;
+      }
+      if (typeof this.modelValue == "boolean") {
+        this.$emit("update:modelValue", !this.modelValue);
+        return;
+      }
+      const t = this.getInputsSet().filter((n) => n.checked).map((n) => n.value);
+      t.includes(this.value) ? this.$emit("update:modelValue", t.filter((n) => n !== this.value)) : this.$emit("update:modelValue", [...t, this.value]);
+    },
+    /**
+     * Get the input set based on this name
+     *
+     * @return {Node[]}
+     */
+    getInputsSet() {
+      return [...document.getElementsByName(this.name)];
+    }
+  }
+}, Ie = ["id", "aria-labelledby", "aria-label", "disabled", "type", "value", "checked", ".indeterminate", "required", "name"];
+function Ne(t, n, e, c, u, i) {
+  const o = x("NcCheckboxContent");
+  return a(), w(A(i.computedWrapperElement), r({
+    id: e.wrapperId,
+    "aria-label": i.isButtonType && e.ariaLabel ? e.ariaLabel : void 0,
+    class: [{
+      ["checkbox-radio-switch-" + e.type]: e.type,
+      "checkbox-radio-switch--checked": i.isChecked,
+      "checkbox-radio-switch--disabled": e.disabled,
+      "checkbox-radio-switch--indeterminate": i.hasIndeterminate ? e.indeterminate : !1,
+      "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",
+      "button-vue": i.isButtonType
+    }, "checkbox-radio-switch"],
+    style: i.cssVars,
+    type: i.isButtonType ? "button" : null
+  }, v(i.isButtonType ? i.listeners : {})), {
+    default: C(() => [
+      i.isButtonType ? s("", !0) : (a(), l("input", r({
+        key: 0,
+        id: e.id,
+        "aria-labelledby": !i.isButtonType && !e.ariaLabel ? "".concat(e.id, "-label") : null,
+        "aria-label": e.ariaLabel || void 0,
+        class: "checkbox-radio-switch__input",
+        disabled: e.disabled,
+        type: i.inputType,
+        value: e.value,
+        checked: i.isChecked,
+        ".indeterminate": i.hasIndeterminate ? e.indeterminate : null,
+        required: e.required,
+        name: e.name
+      }, v(i.listeners, !0)), null, 48, Ie)),
+      S(o, {
+        id: e.id,
+        class: "checkbox-radio-switch__content",
+        "icon-class": "checkbox-radio-switch__icon",
+        "text-class": "checkbox-radio-switch__text",
+        type: e.type,
+        indeterminate: i.hasIndeterminate ? e.indeterminate : !1,
+        "button-variant": e.buttonVariant,
+        "is-checked": i.isChecked,
+        loading: e.loading,
+        size: i.size,
+        onClick: i.onToggle
+      }, V({
+        icon: C(() => [
+          y(t.$slots, "icon", {}, void 0, !0)
+        ]),
+        _: 2
+      }, [
+        t.$slots.default ? {
+          name: "default",
+          fn: C(() => [
+            y(t.$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 Ze = /* @__PURE__ */ d(pe, [["render", Ne], ["__scopeId", "data-v-48c28b96"]]);
+export {
+  Ze as N
+};