init dev-push code ui base design

components/common/checkbox/CheckBox.vue

@@ -0,0 +1,119 @@
+<template>
+  <v-row class="search-box" no-gutters>
+    <v-col v-if="label" :cols="labelCols">
+      <label for="" class="search-box-label">
+        <v-icon
+					v-if="iconShow"
+					small
+					:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
+					>$icoBulletPoint</v-icon
+				>
+        {{ label }}
+      </label>
+    </v-col>
+    <v-col :cols="label ? textCols : ''">
+      <!-- <v-checkbox
+				v-model="chkValue"
+				:disabled="disabledFlag"
+				:readonly="readonly || false"
+				:required="required || false"
+				:false-value="false"
+				:color="isDarkMode ? '#fff' : '#4777d9'"
+				@change="modifyValue"
+			></v-checkbox> -->
+      <a-checkbox
+        v-model:checked="chkValue"
+        :disabled="disabledFlag"
+        :readonly="readonly || false"
+        :required="required || false"
+        @change="modifyValue"
+      >
+      </a-checkbox>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import { mapState, mapMutations } from "vuex";
+export default {
+  props: {
+    parentPrgmId: {
+      type: String,
+      require: true,
+    },
+    label: {
+      type: String,
+      require: true,
+    },
+    isDarkMode: {
+      type: Boolean,
+      require: false,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      require: false,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      require: false,
+      default: false,
+    },
+    valueNm: {
+      type: String,
+      require: true,
+    },
+    labelCols: {
+      type: Number,
+      require: false,
+      default: 4,
+    },
+    textCols: {
+      type: Number,
+      require: false,
+      default: 7,
+    },
+    iconShow: {
+			type: Boolean,
+			require: false,
+			default: true
+		},
+  },
+  data() {
+    return {
+      chkValue: false,
+      testData: false,
+      disabledFlag: false,
+    };
+  },
+
+  computed: {
+    ...mapState({
+      searchParam: (state) => state.pageData,
+      myBindingDara(state) {
+        return state.pageData[this.parentPrgmId][this.valueNm];
+      },
+    }),
+  },
+  watch: {
+    myBindingDara: {
+      deep: true,
+      handler(val) {
+        this.chkValue = val;
+      },
+    },
+  },
+  created() {
+    this.chkValue = this.searchParam[this.parentPrgmId][this.valueNm];
+  },
+  methods: {
+    ...mapMutations({ setPageData: "setPageData" }),
+    modifyValue(e) {
+      return this.setPageData({ [this.valueNm]: e });
+    },
+  },
+};
+</script>
+
+<style></style>