@ccos/webos-vue/dist/lib/index43.js

A Web-Ui Framework for Skyworth/Coocaa TV

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const _hoisted_1 = ["onClick"];
const _hoisted_2 = { class: "u-label" };
const _hoisted_3 = {
  key: 1,
  class: "m-checkbox-wrap"
};
const _hoisted_4 = { class: "u-label" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "checkbox",
  props: {
    options: { default: () => [] },
    disabled: { type: Boolean, default: false },
    vertical: { type: Boolean, default: false },
    value: { default: () => [] },
    gap: { default: 8 },
    width: { default: "auto" },
    height: { default: "auto" },
    indeterminate: { type: Boolean, default: false },
    checked: { type: Boolean, default: false }
  },
  emits: ["update:value", "update:checked", "change"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const sum = vue.computed(() => {
      return props.options.length;
    });
    const maxWidth = vue.computed(() => {
      if (typeof props.width === "number") {
        return props.width + "px";
      } else {
        return props.width;
      }
    });
    const maxHeight = vue.computed(() => {
      if (typeof props.height === "number") {
        return props.height + "px";
      } else {
        return props.height;
      }
    });
    const styleObject = vue.computed(() => {
      if (props.vertical) {
        return {
          marginBottom: props.gap + "px"
        };
      } else {
        return {
          marginRight: props.gap + "px"
        };
      }
    });
    const checkedValue = vue.ref([]);
    vue.watchEffect(() => {
      checkedValue.value = props.value;
    });
    const emits = __emit;
    function onClick(value) {
      if (props.value.includes(value)) {
        const newVal = checkedValue.value.filter((target) => target !== value);
        emits("update:value", newVal);
        emits("change", newVal);
      } else {
        const newVal = [...checkedValue.value, value];
        emits("update:value", newVal);
        emits("change", newVal);
      }
    }
    function onCheckAll() {
      emits("update:checked", !props.checked);
    }
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        class: "m-checkbox",
        style: vue.normalizeStyle(`max-width: ${maxWidth.value}; max-height: ${maxHeight.value};`)
      }, [
        sum.value ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.options, (option, index) => {
          return vue.openBlock(), vue.createElementBlock("div", {
            class: vue.normalizeClass(["m-checkbox-wrap", { "vertical": _ctx.vertical }]),
            style: vue.normalizeStyle(sum.value !== index + 1 ? styleObject.value : ""),
            key: index
          }, [
            vue.createElementVNode("div", {
              class: vue.normalizeClass(["m-box", { "disabled": _ctx.disabled || option.disabled }]),
              onClick: ($event) => _ctx.disabled || option.disabled ? () => false : onClick(option.value)
            }, [
              vue.createElementVNode("span", _hoisted_2, [
                vue.renderSlot(_ctx.$slots, "default", {
                  label: option.label
                }, () => [
                  vue.createTextVNode(vue.toDisplayString(option.label), 1)
                ], true)
              ]),
              vue.createElementVNode("span", {
                class: vue.normalizeClass(["u-checkbox", { "u-checkbox-checked": checkedValue.value.includes(option.value) }])
              }, null, 2)
            ], 10, _hoisted_1)
          ], 6);
        }), 128)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
          vue.createElementVNode("div", {
            class: vue.normalizeClass(["m-box", { "disabled": _ctx.disabled }]),
            onClick: onCheckAll
          }, [
            vue.createElementVNode("span", {
              class: vue.normalizeClass(["u-checkbox", { "u-checkbox-checked": _ctx.checked && !_ctx.indeterminate, "indeterminate": _ctx.indeterminate }])
            }, null, 2),
            vue.createElementVNode("span", _hoisted_4, [
              vue.renderSlot(_ctx.$slots, "default", {}, () => [
                vue.createTextVNode("Check all")
              ], true)
            ])
          ], 2)
        ]))
      ], 4);
    };
  }
});
exports.default = _sfc_main;