fix: more components vue3 migration

monade · Mar 11, 2024 · 3c911ec · 3c911ec
1 parent a971180
commit 3c911ec
Show file tree

Hide file tree

Showing 12 changed files with 465 additions and 46 deletions.
diff --git a/env.d.ts b/env.d.ts
@@ -1,2 +1 @@
 /// <reference types="vite/client" />
-
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "@robin-rossow/vue-input-number": "https://github.com/robinrossow/vue-input-number",
     "@types/uuid": "^9.0.8",
     "@types/webfontloader": "^1.6.38",
+    "accounting-js": "^1.1.1",
     "bootstrap": "^4",
     "date-fns": "^3.3.1",
     "husky": "^9.0.11",
@@ -36,6 +37,7 @@
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node20": "^20.1.2",
+    "@types/accounting": "^0.4.5",
     "@types/node": "^20.11.10",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vitejs/plugin-vue-jsx": "^3.1.0",

diff --git a/src/components/VCheckButton.vue b/src/components/VCheckButton.vue
@@ -3,7 +3,7 @@
     <span class="v-check-button" :class="buttonClass">
       <v-icon v-show="checked">check</v-icon>
     </span>
-    <span class="v-check-button__label" v-if="$slots.default"><slot></slot></span>
+    <span class="v-check-button__label" v-if="$slots.default?.()"><slot></slot></span>
   </span>
 </template>
 
@@ -16,7 +16,7 @@ export default class VCheckButton extends Vue {
   @Prop() readonly modelValue!: boolean;
   @Prop({ default: false }) readonly disableUncheck? : boolean;
 
-  @Watch('value', { deep: true })
+  @Watch('modelValue', { deep: true })
   onValueChange(value: boolean) {
     this.checked = value;
   }

diff --git a/src/components/VCheckbox.vue b/src/components/VCheckbox.vue
@@ -9,7 +9,7 @@
       @change="onChange"
       :disabled="disabled"
     />
-    <label class="custom-control-label" :for="id" v-if="$slots.default"
+    <label class="custom-control-label" :for="id" v-if="$slots.default?.()"
       ><slot></slot>
     </label>
      <label class="custom-control-label" :for="id" v-else
@@ -42,7 +42,7 @@ export default class VCheckbox extends Vue {
   }
 
   get checkboxValue() {
-    return this.inputValue ? this.inputValue : this.$slots.default;
+    return this.inputValue ? this.inputValue : this.$slots.default?.();
   }
 
   randomValue() {

diff --git a/src/components/VDatePicker.vue b/src/components/VDatePicker.vue
@@ -67,7 +67,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Watch, Vue } from 'vue-facing-decorator';
+import { Component, Prop, Watch, Vue, Ref } from 'vue-facing-decorator';
 import VCheckButton from './VCheckButton.vue';
 import ClickOutside from '../directives/ClickOutside';
 import moment from 'moment';
@@ -118,7 +118,7 @@ export default class VDatePicker extends Vue {
 
   dateOne: Date|string|undefined = '';
   dateTwo: Date|string|undefined = '';
-  datepicker: any|null = null;
+  @Ref() datepicker: any | null = null;
   visible = false;
   selected: string|null = null;
   firstOpen = true;
@@ -139,7 +139,6 @@ export default class VDatePicker extends Vue {
   }
 
   mounted() {
-    this.datepicker = this.$refs.datepicker as any;
     this.datepicker.width = 220;
   }
 
@@ -199,7 +198,7 @@ export default class VDatePicker extends Vue {
     if (this.visible && this.firstOpen && this.endDate) {
       this.$nextTick(() => {
         if (this.datepicker) {
-          this.datepicker.startingDate = moment(this.endDate).subtract(2, 'months').startOf('month');
+          this.datepicker.startingDate = moment(this.endDate).subtract(2, 'months').startOf('month').format(DATE_FORMAT);
           this.datepicker.generateMonths();
           this.firstOpen = false;
         }

diff --git a/src/components/VNumericInput.vue b/src/components/VNumericInput.vue
@@ -1,6 +1,5 @@
 <template>
-  <div>FIXME</div>
-  <!-- <vue-numeric
+  <vue-numeric
     ref="edit"
     :decimal-separator="decimalSeparator"
     :thousand-separator="thousandSeparator"
@@ -15,10 +14,10 @@
     @update:modelValue="onValueChanged"
     @blur="$emit('blur')"
     class="form-control"
-  ></vue-numeric> -->
+  ></vue-numeric>
 </template>
 <script lang="ts">
-// import VueNumeric from "@robin-rossow/vue-input-number";
+import VueNumeric from "./VueNumeric.vue";
 import { Component, Prop, Vue, Ref } from "vue-facing-decorator";
 
 export enum VNumericInputApplication {
@@ -28,7 +27,7 @@ export enum VNumericInputApplication {
 }
 
 @Component({
-  components: { /*VueNumeric*/ },
+  components: { VueNumeric },
   emits: ["update:modelValue", "formatted-input", "blur"],
 })
 export default class VNumericInput extends Vue {
@@ -82,7 +81,11 @@ export default class VNumericInput extends Vue {
 
   notifyNewValue(value: number) {
     this.notifyEvent("update:modelValue", value);
-    const formattedNumericValue = value.toFixed(this.precision);
+
+    if (typeof value !== "number" || isNaN(value)) {
+      this.notifyEvent("formatted-input", "");
+      return;
+    }
     const formattedString = this.isSuffix
       ? `${value.toFixed(this.precision)} ${this.currencySign} `
       : `${this.currencySign} ${value.toFixed(this.precision)}`;

diff --git a/src/components/VSelect.vue b/src/components/VSelect.vue
@@ -136,7 +136,7 @@ export default class VSelect extends Vue {
   @Prop({ default: true }) readonly loading!: boolean;
   @Prop({ default: true }) readonly inputClass!: boolean;
 
-  @Watch("value", { immediate: true })
+  @Watch("modelValue", { immediate: true })
   onValueChange() {
     this.updateSelected();
   }

diff --git a/src/components/VSwitchButton.vue b/src/components/VSwitchButton.vue
@@ -1,7 +1,7 @@
 <template>
   <span class="v-switch-button-wrapper" @click="toggle">
     <span class="v-switch-button" :class="buttonClass"></span>
-    <span class="v-switch-button__label" v-if="$slots.default"><slot></slot></span>
+    <span class="v-switch-button__label" v-if="$slots.default?.()"><slot></slot></span>
   </span>
 </template>