maz-ui 3.19.2 → 3.20.0

package/components/chunks/MazCheckbox-aeada499.mjs

@@ -0,0 +1,144 @@
+import "../assets/MazCheckbox.css";
+import { defineComponent, useCssVars, getCurrentInstance, computed, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, mergeProps, createVNode, Transition, withCtx, withDirectives, vShow, renderSlot } from "vue";
+import { u as useInstanceUniqId, _ as _export_sfc } from "./MazSelect-5c3b7a30.mjs";
+import CheckIcon from "./check-77afbaee.mjs";
+const _hoisted_1 = ["for"];
+const _hoisted_2 = ["id", "checked", "disabled", "name"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazCheckbox",
+  props: {
+    modelValue: { type: Boolean, required: true },
+    id: { type: String, default: void 0 },
+    color: {
+      type: String,
+      default: "primary"
+    },
+    name: { type: String, default: "m-checkbox" },
+    size: { type: String, default: "md" },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: [
+    /* emitted when value change */
+    "update:model-value",
+    /* emited when value change */
+    "change"
+  ],
+  setup(__props, { emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "848d9fe6": checkIconColor.value,
+      "fb0e9a22": checkboxSize.value,
+      "cf55634c": checkboxSelectedColor.value,
+      "99c81ec6": checkboxBoxShadow.value
+    }));
+    const instance = getCurrentInstance();
+    const props = __props;
+    const emits = __emit;
+    const instanceId = useInstanceUniqId({
+      componentName: "MazCheckbox",
+      instance,
+      providedId: props.id
+    });
+    const checkboxSize = computed(() => {
+      switch (props.size) {
+        case "xl": {
+          return "2.25rem";
+        }
+        case "lg": {
+          return "2rem";
+        }
+        default: {
+          return "1.625rem";
+        }
+        case "sm": {
+          return "1.425rem";
+        }
+        case "xs": {
+          return "1.325rem";
+        }
+        case "mini": {
+          return "1.2rem";
+        }
+      }
+    });
+    const checkIconSize = computed(() => {
+      switch (props.size) {
+        case "xl": {
+          return "maz-text-2xl";
+        }
+        case "lg": {
+          return "maz-text-xl";
+        }
+        default: {
+          return "maz-text-lg";
+        }
+        case "sm": {
+          return "maz-text-base";
+        }
+        case "xs": {
+          return "maz-text-sm";
+        }
+        case "mini": {
+          return "maz-text-xs";
+        }
+      }
+    });
+    const checkIconColor = computed(() => `var(--maz-color-${props.color}-contrast)`);
+    const checkboxSelectedColor = computed(() => `var(--maz-color-${props.color})`);
+    const checkboxBoxShadow = computed(
+      () => ["black", "transparent"].includes(props.color) ? `var(--maz-color-muted)` : `var(--maz-color-${props.color}-alpha)`
+    );
+    function keyboardHandler(event) {
+      if (["Enter", "Space"].includes(event.code)) {
+        event.preventDefault();
+        emitValue(!props.modelValue);
+      }
+    }
+    function emitValue(value) {
+      emits("update:model-value", value);
+      emits("change", value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("label", {
+        for: unref(instanceId),
+        class: normalizeClass(["m-checkbox", { "--disabled": __props.disabled }]),
+        tabindex: "1",
+        onKeydown: keyboardHandler
+      }, [
+        createElementVNode("input", mergeProps({
+          id: unref(instanceId),
+          checked: __props.modelValue
+        }, _ctx.$attrs, {
+          disabled: __props.disabled,
+          name: __props.name,
+          type: "checkbox",
+          onChange: _cache[0] || (_cache[0] = ($event) => {
+            var _a;
+            return emitValue((_a = $event == null ? void 0 : $event.target) == null ? void 0 : _a.checked);
+          })
+        }), null, 16, _hoisted_2),
+        createElementVNode("span", null, [
+          createVNode(Transition, {
+            name: "maz-scale",
+            persisted: ""
+          }, {
+            default: withCtx(() => [
+              withDirectives(createVNode(unref(CheckIcon), {
+                class: normalizeClass(["check-icon", checkIconSize.value])
+              }, null, 8, ["class"]), [
+                [vShow, __props.modelValue]
+              ])
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ]),
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 42, _hoisted_1);
+    };
+  }
+});
+const MazCheckbox_vue_vue_type_style_index_0_scoped_5b54604c_lang = "";
+const MazCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5b54604c"]]);
+export {
+  MazCheckbox as default
+};