fixes vmodel

Author: ChristianKienle

package-lock.json

@@ -3,7 +3,7 @@ import { apiDocsEnabled } from '@/config';
 import { ComponentDocumentation } from './ComponentDocumentation';
 import { SlotDocumentation } from './SlotDocumentation';
 import { EventDocumentation } from './EventDocumentation';
-import TsxComponent from '@/vue-tsx';
+import { TsxComponent } from '@/vue-tsx';
 import { ComponentOptions, PropOptions, Constructor } from 'vue/types/options';
 import { Prop } from 'vue/types/options';
 import Vue from 'vue';

src/api/Decorators.ts

@@ -25,7 +25,7 @@ export class BreadcrumbItem extends Base<Props> {
     const title = this.$slots.default;
     return (
       <li class='fd-breadcrumb__item'>
-        <a class='fd-breadcrumb__link' href='#' on-click={event => this.onClick(event)}>{title}</a>
+        <a class='fd-breadcrumb__link' href='#' on-click={this.onClick}>{title}</a>
       </li>
     );
   }

src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -1,10 +1,9 @@
-import { ComponentProps } from '@/vue-tsx';
 import { CalendarHeader } from './CalendarHeader';
 import { PresentDateMixin, DisplayedDateMixin, DateSelectionMixin } from './mixins';
 import { mixins } from 'vue-class-component';
 import { MonthPicker, YearPicker, DayPicker } from './Pickers';
 import { Props as DateSelectionProps } from './mixins/DateSelection';
-import { Component, Mixins, Prop } from '@/core';
+import { ComponentProps, Component, Mixins, Prop } from '@/core';
 const pickerMapping = { year: 'year', month: 'month' };
 type PickerType = keyof typeof pickerMapping;
 

src/components/Calendar/Calendar.tsx

@@ -1,5 +1,5 @@
 import { Watch } from 'vue-property-decorator';
-import { VNode } from 'vue';
+import { CreateElement, VNode } from 'vue';
 import { Component, Prop, Base } from '@/core';
 
 type IgnoredElements = () => Element[];
@@ -34,8 +34,8 @@ export class ClickAwayContainer extends Base<Props> {
   @Prop({ type: Function, default: () => () => [] })
   public ignoredElements!: IgnoredElements;
 
-  public render(createElement): VNode {
-    return createElement(this.tag, this.$slots.default);
+  public render(h: CreateElement): VNode {
+    return h(this.tag, this.$slots.default);
   }
 
   public beforeDestroy() {

src/components/ClickAwayContainer.ts

@@ -34,7 +34,7 @@ export class Counter extends Base<Props> {
   private get classes() {
     return {
       'fd-counter--notification': this.type === 'notification',
-    }
+    };
   }
 
   public render() {

src/components/Counter.tsx

@@ -0,0 +1,157 @@
+import { Base, Model, Component, Event, Prop } from '@/core';
+import { UidProps } from '@/mixins';
+import { FormItem, FORM_ITEM_KEY, FORM_ITEM_ID_KEY } from './../FormItem';
+import { Inject } from 'vue-property-decorator';
+import { isInputElement } from './Helper';
+
+const stateMapping = {
+  valid: 'Valid',
+  invalid: 'Invalid',
+  warning: 'Warning',
+};
+type InputState = keyof (typeof stateMapping);
+const InputStates = Object.keys(stateMapping) as InputState[];
+
+type ValueType = string | number | boolean;
+const ValueCtors = [String, Number, Boolean];
+
+interface Props extends UidProps {
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  value?: ValueType;
+  falseValue?: ValueType;
+  trueValue?: ValueType;
+  compact?: boolean;
+  state?: InputState | null;
+}
+
+@Component('Checkbox')
+@Event('change', 'Sent when the checkbox has been checked/unchecked.')
+export class Checkbox extends Base<Props> {
+  @Inject({from: FORM_ITEM_KEY, default: null})
+  public formItem!: FormItem | null;
+
+  @Inject({from: FORM_ITEM_ID_KEY, default: null})
+  public formItemId!: string | null;
+
+  private get uid(): string | null {
+    return this.formItemId;
+  }
+
+  public mounted() {
+    const formItem = this.formItem;
+    if(formItem) {
+      formItem.setCheck(true);
+    }
+  }
+
+  @Prop('Payload of the change-event when the user checks the checkbox', {
+    default: true,
+    type: ValueCtors,
+  })
+  public trueValue!: ValueType;
+
+  @Prop('Payload of the change-event when the user unchecks the checkbox', {
+    default: false,
+    type: ValueCtors,
+  })
+  public falseValue!: ValueType;
+
+  @Prop('value used when checked is true', {
+    default: true,
+    type: ValueCtors,
+  })
+  public value!: ValueType;
+
+  @Prop('whether input is compact', { type: Boolean, default: false })
+  public compact!: boolean;
+
+  @Prop('whether the control is disabled', { default: false, type: Boolean })
+  public disabled!: boolean;
+
+  @Prop('whether the control is readonly', { default: false, type: Boolean })
+  public readonly!: boolean;
+
+  @Prop('current state', {
+    acceptableValues: InputStates,
+    default: null,
+    type: String,
+    validator: InputStates.includes,
+  })
+  public state!: InputState | null;
+
+  @Prop('whether a value is required (adds a *)', {
+    default: false,
+    type: Boolean,
+  })
+  public required!: boolean;
+
+  @Model('modelValue', {
+    default: false,
+    event: 'change',
+    type: [Array, String, Boolean, Number],
+  })
+  public modelValue!: ValueType | ValueType[];
+
+  private get shouldBeChecked(): boolean {
+    const modelValue = this.modelValue;
+    const value = this.value;
+    if(value == null) {
+      throw Error('value cannot be null');
+    }
+    if (Array.isArray(modelValue)) {
+      return modelValue.includes(value);
+    }
+    return this.modelValue === this.trueValue;
+  }
+
+  public updateInput(event: Event) {
+    const { target } = event;
+    if(target == null) {
+      return;
+    }
+    if(!isInputElement(target)) {
+      return;
+    }
+    const { checked } = target;
+    const { modelValue, value } = this;
+    if(value == null) {
+      throw Error('value cannot be null');
+    }
+    if(Array.isArray(modelValue)) {
+      const set = new Set(modelValue);
+      checked ? set.add(value) : set.delete(value);
+      const newValue = Array.from(set);
+      this.$emit('change', newValue);
+    } else {
+      const newValue = checked ? this.trueValue : this.falseValue;
+      this.$emit('change', newValue);
+    }
+  }
+
+  public render() {
+    return (
+      <input
+        id={this.uid}
+        class={this.classes}
+        checked={this.shouldBeChecked}
+        value={this.value}
+        on-change={this.updateInput}
+        type='checkbox'
+        staticClass='fd-form__control'
+      />
+    );
+  }
+
+  private get classes() {
+    return {
+      'fd-input--compact': this.compact,
+      'is-warning': this.state === 'warning',
+      'is-invalid': this.state === 'invalid',
+      'is-valid': this.state === 'valid',
+      'is-required': this.required,
+    };
+  }
+}

src/components/Form/Controls/Checkbox.tsx

@@ -0,0 +1,3 @@
+export const isElement = (target: EventTarget): target is Element => ('tagName' in target);
+export const isInputElement = (target: EventTarget): target is HTMLInputElement => isElement(target) && target.tagName === 'INPUT';
+export const isTextAreaElement = (target: EventTarget): target is HTMLInputElement => isElement(target) && target.tagName === 'TEXTAREA';

src/components/Form/Controls/Helper/dom.ts

@@ -0,0 +1 @@
+export * from './dom';