Components added. Build issues fixed

components/checkbox/Checkbox.d.ts

@@ -51,8 +51,8 @@ export interface CheckboxProps {
      */
     inputClass?: any | undefined;
     /**
-      * Inline style of the input field.
-      */
+     * Inline style of the input field.
+     */
     inputStyle?: any | undefined;
     /**
      * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
@@ -68,8 +68,7 @@ export interface CheckboxProps {
     'aria-label'?: string | undefined;
 }
 
-export interface CheckboxSlots {
-}
+export interface CheckboxSlots {}
 
 export declare type CheckboxEmits = {
     /**
@@ -81,24 +80,24 @@ export declare type CheckboxEmits = {
      * Callback to invoke on value click.
      * @param {MouseEvent} event - Browser event.
      */
-    'click': (event: MouseEvent) => void;
+    click: (event: MouseEvent) => void;
     /**
      * Callback to invoke on value change.
      * @param {Event} event - Browser event.
      */
-    'change': (event: Event) => void;
+    change: (event: Event) => void;
     /**
      * Callback to invoke on value change.
      * @param {boolean} value - New value.
      */
-    'input': (value: boolean) => void;
-}
+    input: (value: boolean) => void;
+};
 
-declare class Checkbox extends ClassComponent<CheckboxProps, CheckboxSlots, CheckboxEmits> { }
+declare class Checkbox extends ClassComponent<CheckboxProps, CheckboxSlots, CheckboxEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Checkbox: GlobalComponentConstructor<Checkbox>
+        Checkbox: GlobalComponentConstructor<Checkbox>;
     }
 }
 
@@ -108,7 +107,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Checkbox](https://www.primefaces.org/primevue/showcase/#/checkbox)
+ * - [Checkbox](https://www.primefaces.org/primevue/checkbox)
  *
  */
 export default Checkbox;

components/checkbox/Checkbox.spec.js

@@ -25,4 +25,4 @@ describe('Checkbox.vue', () => {
         expect(wrapper.find('.p-checkbox-box.p-highlight').exists()).toBe(true);
         expect(wrapper.find('.p-checkbox-icon.pi.pi-check').exists()).toBe(true);
     });
-});
+});

components/checkbox/Checkbox.vue

@@ -1,17 +1,34 @@
 <template>
     <div :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
-            <input :id="inputId" ref="input" type="checkbox" :value="value" :class="inputClass" :style="inputStyle" :name="name" :checked="checked" :tabindex="tabindex" :disabled="disabled" :readonly="readonly" :required="required" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
-                @focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps">
+            <input
+                ref="input"
+                :id="inputId"
+                type="checkbox"
+                :value="value"
+                :class="inputClass"
+                :style="inputStyle"
+                :name="name"
+                :checked="checked"
+                :tabindex="tabindex"
+                :disabled="disabled"
+                :readonly="readonly"
+                :required="required"
+                :aria-labelledby="ariaLabelledby"
+                :aria-label="ariaLabel"
+                @focus="onFocus($event)"
+                @blur="onBlur($event)"
+                v-bind="inputProps"
+            />
         </div>
-        <div ref="box" :class="['p-checkbox-box', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
-            <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
+        <div ref="box" :class="['p-checkbox-box', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]">
+            <span :class="['p-checkbox-icon', { 'pi pi-check': checked }]"></span>
         </div>
     </div>
 </template>
 
 <script>
-import {ObjectUtils} from 'primevue/utils';
+import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'Checkbox',
@@ -48,13 +65,25 @@ export default {
             type: Number,
             default: null
         },
-        inputId: null,
-        inputClass: null,
-        inputStyle: null,
-        inputProps: null,
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
@@ -64,7 +93,7 @@ export default {
     data() {
         return {
             focused: false
-        }
+        };
     },
     methods: {
         onClick(event) {
@@ -73,12 +102,9 @@ export default {
 
                 if (this.binary) {
                     newModelValue = this.checked ? this.falseValue : this.trueValue;
-                }
-                else {
-                    if (this.checked)
-                        newModelValue = this.modelValue.filter(val => !ObjectUtils.equals(val, this.value));
-                    else
-                        newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
+                } else {
+                    if (this.checked) newModelValue = this.modelValue.filter((val) => !ObjectUtils.equals(val, this.value));
+                    else newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
                 }
 
                 this.$emit('click', event);
@@ -103,12 +129,14 @@ export default {
         },
         containerClass() {
             return [
-                'p-checkbox p-component', {
+                'p-checkbox p-component',
+                {
                     'p-checkbox-checked': this.checked,
                     'p-checkbox-disabled': this.disabled,
                     'p-checkbox-focused': this.focused
-                }];
+                }
+            ];
         }
     }
-}
+};
 </script>