pc-component-v5/packages/checkbox/src/Checkbox.vue

<template>
  <div class="checkbox-component">
    <input
      :id="id"
      type="checkbox"
      :name="name"
      :checked="myValue"
      :class="className"
      :required="required"
      :disabled="disabled"
      @change="onChange"
    />
    <label :for="id">
      <slot name="input-box">
        <span class="input-box">
          <svg
            class="input-box-tick"
            viewBox="0 0 16 16"
          >
            <path
              fill="none"
              d="M1.7,7.0l3.8,3.4l9-8.8"
            />
          </svg>
        </span>
      </slot>
      <slot />
    </label>
  </div>
</template>

<script>
import Uuid from '../../common/Uuid.js';


export default {
  // eslint-disable-next-line
  name: 'Checkbox',


  props: {
    id: {
      type: String,
      default: function () {
        return 'checkbox-id-' + Uuid.createUUID();
      },
    },
    name: {
      type: String,
      default: null,
    },
    value: {
      type: Boolean,
      default: undefined,
    },
    className: {
      type: String,
      default: null,
    },
    required: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },

  emits: ['update:value'],

  data: function () {
    return {
      'myValue': false,
    };
  },

  computed: {

  },

  watch: {
    value: {
      handler(newValue, oldValue) {
        this.myValue = newValue;
      },
      immediate: true,
    },
  },

  methods: {
    onChange() {
      // this.myValue = !this.myValue;
      this.$emit('update:value', !this.myValue);
    },
  },
};
</script>

<style scoped>
/**
    .checkbox-component {
        > input {
            opacity: 0;
            position: absolute;

            + label > .input-box {
                display: inline-block;
                border: 1px solid #000;
                border-radius: 14%;
                margin: 0;
                padding: 0;
                width: 1em;
                height: 1em;
                background: #fff;
                overflow: hidden;
                vertical-align: -5%;
                user-select: none;

                > .input-box-tick {
                    width: 100%;
                    height: 100%;

                    > path {
                        opacity: 0;
                        stroke: #000;
                        stroke-width: 2.3px;
                        stroke-dashoffset: 20;
                        stroke-dasharray: 20;
                        transition: stroke-dashoffset 0.15s ease-in;
                    }
                }
            }

            &:checked + label > .input-box > .input-box-tick > path {
                opacity: 1;
                stroke-dashoffset: 0;
            }

            &:focus + label > .input-box {
                box-shadow: 0 0 2px 3px rgba(115, 185, 255, 0.69);
            }

            &:disabled + label {
                opacity: 0.7;
            }
        }
    }
    */
.checkbox-component > input {
    opacity: 0;
    position: absolute;
}
.checkbox-component > input + label > .input-box {
    display: inline-block;
    border: 1px solid #000;
    border-radius: 14%;
    margin: 0;
    padding: 0;
    width: 1em;
    height: 1em;
    background: #fff;
    overflow: hidden;
    vertical-align: -5%;
    user-select: none;
}
.checkbox-component > input + label > .input-box > .input-box-tick {
    width: 100%;
    height: 100%;
}
.checkbox-component > input + label > .input-box > .input-box-tick > path {
    opacity: 0;
    stroke: #000;
    stroke-width: 2.3px;
    stroke-dashoffset: 20;
    stroke-dasharray: 20;
    transition: stroke-dashoffset 0.15s ease-in;
}
.checkbox-component
    > input:checked
    + label
    > .input-box
    > .input-box-tick
    > path {
    opacity: 1;
    stroke-dashoffset: 0;
}
.checkbox-component > input:focus + label > .input-box {
    box-shadow: 0 0 2px 3px rgba(115, 185, 255, 0.69);
}
.checkbox-component > input:disabled + label {
    opacity: 0.7;
}
</style>