Updated css and synced radio and checkbox components

Author: romanslonov

docs/components/checkbox.md

@@ -14,7 +14,7 @@ The custom checkbox and it's states.
 ## Props
 Name       | Type     | Description | Default | Required
 ---------- | -------- | ----------- | ------- | --------
-id         | [String, Number]   | Unique identifier |    | true
+id         | [String, Number]   | Unique identifier |    | false
 Name       | String             | Name of input element |    | false
 label      | [String, Number]   | Label text        |    | true
 value, v-model      | any      | The model that the checkbox value syncs to. **If you are not using `v-model`, you should listen for the `input` event and update value.**        |    | true

docs/components/radio.md

@@ -3,7 +3,7 @@ The custom radio and it's states.
 
 ## Example
 <div class="p-3 border rounded-2 my-3 flex">
-  <v-radio :checked="true" id="radio1" label="Radio 1" name="radio-group1" v-model="radio1" true-value="radio1-value" />
+  <v-radio id="radio1" label="Radio 1" name="radio-group1" v-model="radio1" true-value="radio1-value" />
 </div>
 
 ```html
@@ -20,7 +20,7 @@ The custom radio and it's states.
 ## Props
 Name       | Type              | Description       | Default | Required
 ---------- | ----------------- | ----------------- | ------- | --------
-id         | [String, Number]  | Unique identifier | None    | true
+id         | [String, Number]  | Unique identifier | None    | false
 Name       | [String, Number]  | The name attribute of the radio input element | None    | true
 Label      | [String, Number]  | The radio label   | None    | true
 

package-lock.json

@@ -18,7 +18,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "devDependencies": {
-    "@modulist/css": "0.0.5",
+    "@modulist/css": "0.0.7",
     "@vue/cli-plugin-babel": "^3.5.0",
     "@vue/cli-plugin-eslint": "^3.5.0",
     "@vue/cli-plugin-unit-jest": "^3.5.0",

package.json

@@ -1,5 +1,5 @@
 <template>
-  <div class="checkbox" :class="{ 'checkbox--indeterminate' : indeterminate }">
+  <label :for="id" class="checkbox" :class="{ 'checkbox--indeterminate' : indeterminate }">
     <input
       :id="id"
       :name="name"
@@ -16,8 +16,9 @@
       @focus="onFocus"
       @change="onChange"
     >
-    <label :for="id" class="checkbox__label" v-text="label"></label>
-  </div>
+    <span class="checkbox__mark"></span>
+    <span class="checkbox__text" v-text="label"></span>
+  </label>
 </template>
 
 <script>
@@ -28,7 +29,6 @@ export default {
   props: {
     id: {
       type: [String, Number],
-      required: true,
     },
     name: {
       type: String,

src/components/Checkbox/main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="radio">
+  <label class="radio" :for="id">
     <input
       class="radio__input"
       type="radio"
@@ -16,8 +16,9 @@
       @focus="onFocus"
 
     >
-    <label class="radio__label" :for="id">{{ label }}</label>
-  </div>
+    <span class="radio__circle"></span>
+    <span class="radio__text">{{ label }}</span>
+  </label>
 </template>
 
 <script>
@@ -26,7 +27,6 @@ export default {
   props: {
     id: {
       type: [String, Number],
-      required: true,
     },
     name: {
       type: String,