refactor: change defineEmits to type-declaration approach (#1113)

oruga-ui · Nov 15, 2024 · da70697 · da70697
1 parent 44c7075
commit da70697
Show file tree

Hide file tree

Showing 43 changed files with 238 additions and 230 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,4 +10,5 @@ packages/docs/.vitepress/.cache/
 packages/docs/.vitepress/.temp/
 packages/docs/.vitepress/dist/
 packages/oruga/README.md
-**/vite.config.js.timestamp**
+**/vite.config.js.timestamp**
+**/vite.config.ts.timestamp**
diff --git a/packages/oruga/src/components/autocomplete/Autocomplete.vue b/packages/oruga/src/components/autocomplete/Autocomplete.vue
@@ -111,65 +111,65 @@ const props = withDefaults(defineProps<AutocompleteProps<T>>(), {
 const emits = defineEmits<{
     /**
      * modelValue prop two-way binding
-     * @param value {string | number | object} updated modelValue prop
+     * @param value {T} updated modelValue prop
      */
-    (e: "update:modelValue", value: ModelValue): void;
+    "update:model-value": [value: ModelValue];
     /**
      * input prop two-way binding
      * @param value {string} updated input prop
      */
-    (e: "update:input", value: string): void;
+    "update:input": [value: string];
     /**
      * on input change event
      * @param value {string} input value
      * @param event {Event} native event
      */
-    (e: "input", value: string, event: Event): void;
+    input: [value: string, event: Event];
     /**
      * selected element changed event
-     * @param value {string | number | object} selected value
+     * @param value {T} selected value
      * @param event {Event} native event
      */
-    (e: "select", value: ModelValue, event: Event): void;
+    select: [value: ModelValue, event: Event];
     /**
      * header is selected
      * @param event {Event} native event
      */
-    (e: "select-header", event: Event): void;
+    "select-header": [event: Event];
     /**
      * footer is selected
      * @param event {Event} native event
      */
-    (e: "select-footer", event: Event): void;
+    "select-footer": [event: Event];
     /**
      * on input focus event
      * @param event {Event} native event
      */
-    (e: "focus", event: Event): void;
+    focus: [event: Event];
     /**
      * on input blur event
      * @param event {Event} native event
      */
-    (e: "blur", event: Event): void;
+    blur: [event: Event];
     /**
      * on input invalid event
      * @param event {Event} native event
      */
-    (e: "invalid", event: Event): void;
+    invalid: [event: Event];
     /**
      * on icon click event
      * @param event {Event} native event
      */
-    (e: "icon-click", event: Event): void;
+    "icon-click": [event: Event];
     /**
      * on icon right click event
      * @param event {Event} native event
      */
-    (e: "icon-right-click", event: Event): void;
+    "icon-right-click": [event: Event];
     /** the list inside the dropdown reached the start */
-    (e: "scroll-start"): void;
+    "scroll-start": [];
     /** the list inside the dropdown reached it's end */
-    (e: "scroll-end"): void;
+    "scroll-end": [];
 }>();
 
 const slots = useSlots();

diff --git a/packages/oruga/src/components/carousel/Carousel.vue b/packages/oruga/src/components/carousel/Carousel.vue
@@ -215,17 +215,17 @@ const emits = defineEmits<{
      * modelValue prop two-way binding
      * @param value {number} updated modelValue prop
      */
-    (e: "update:modelValue", value: number): void;
+    "update:model-value": [value: number];
     /**
      * on carousel scroll event
      * @param value {number} scroll index
      */
-    (e: "scroll", value: number): void;
+    scroll: [value: number];
     /**
      * on item click event
      * @param event {event} native event
      */
-    (e: "click", event: Event): void;
+    click: [event: Event];
 }>();
 
 const rootRef = useTemplateRef("rootElement");

diff --git a/packages/oruga/src/components/checkbox/Checkbox.vue b/packages/oruga/src/components/checkbox/Checkbox.vue
@@ -42,35 +42,35 @@ const props = withDefaults(defineProps<CheckboxProps<T>>(), {
 const emits = defineEmits<{
     /**
      * modelValue prop two-way binding
-     * @param value {string | number | boolean | object | array} updated modelValue prop
+     * @param value {T | T[]} updated modelValue prop
      */
-    (e: "update:modelValue", value: T | T[]): void;
+    "update:model-value": [value: T | T[]];
     /**
      * on input change event
-     * @param value {string | number | boolean | object | array} input value
+     * @param value {T | T[]} input value
      * @param event {Event} native event
      */
-    (e: "input", value: T | T[], event: Event): void;
+    input: [value: T | T[], event: Event];
     /**
      * indeterminate prop two-way binding
      * @param value {boolean} updated indeterminate prop
      */
-    (e: "update:indeterminate", value: boolean): void;
+    "update:indeterminate": [value: boolean];
     /**
      * on input focus event
      * @param event {Event} native event
      */
-    (e: "focus", event: Event): void;
+    focus: [event: Event];
     /**
      * on input blur event
      * @param event {Event} native event
      */
-    (e: "blur", event: Event): void;
+    blur: [event: Event];
     /**
      * on input invalid event
      * @param event {Event} native event
      */
-    (e: "invalid", event: Event): void;
+    invalid: [event: Event];
 }>();
 
 const inputRef = useTemplateRef("inputElement");

diff --git a/packages/oruga/src/components/collapse/Collapse.vue b/packages/oruga/src/components/collapse/Collapse.vue
@@ -61,11 +61,11 @@ const emits = defineEmits<{
      * open prop two-way binding
      * @param value {boolean} updated open prop
      */
-    (e: "update:open", value: boolean): void;
+    "update:open": [value: boolean];
     /** on collapse opened */
-    (e: "open"): void;
+    open: [];
     /** on collapse closed */
-    (e: "close"): void;
+    close: [];
 }>();
 
 const isOpen = defineModel<boolean>("open", { default: true });

diff --git a/packages/oruga/src/components/datepicker/Datepicker.vue b/packages/oruga/src/components/datepicker/Datepicker.vue
@@ -93,7 +93,8 @@ const props = withDefaults(
         teleport: () => getDefault("datepicker.teleport", false),
         useHtml5Validation: () => getDefault("useHtml5Validation", true),
         customValidity: "",
-        ariaNextLabel: () => getDefault("datepicker.ariaNextLabel", "Next Page"),
+        ariaNextLabel: () =>
+            getDefault("datepicker.ariaNextLabel", "Next Page"),
         ariaPreviousLabel: () =>
             getDefault("datepicker.ariaNextLabel", "Previous Page"),
         inputClasses: () => getDefault("datepicker.inputClasses"),
@@ -107,57 +108,57 @@ const emits = defineEmits<{
      * modelValue prop two-way binding
      * @param value {Date | Date[]} updated modelValue prop
      */
-    (e: "update:modelValue", value: ModelValue): void;
+    "update:model-value": [value: ModelValue];
     /**
      * active prop two-way binding
      * @param value {boolean} updated active prop
      */
-    (e: "update:active", value: boolean): void;
+    "update:active": [value: boolean];
     /**
      * on range start is selected event
      * @param value {Date} range start date
      */
-    (e: "range-start", value: Date): void;
+    "range-start": [value: Date];
     /**
      * on range end is selected event
      * @param value {Date} range end date
      */
-    (e: "range-end", value: Date): void;
+    "range-end": [value: Date];
     /**
      * on month change event
      * @param value {number} month number
      */
-    (e: "change-month", value: number): void;
+    "change-month": [value: number];
     /**
      * on year change event
      * @param value {number} year number
      */
-    (e: "change-year", value: number): void;
+    "change-year": [value: number];
     /**
      * on input focus event
      * @param event {Event} native event
      */
-    (e: "focus", event: Event): void;
+    focus: [event: Event];
     /**
      * on input blur event
      * @param event {Event} native event
      */
-    (e: "blur", event: Event): void;
+    blur: [event: Event];
     /**
      * on input invalid event
      * @param event {Event} native event
      */
-    (e: "invalid", event: Event): void;
+    invalid: [event: Event];
     /**
      * on icon click event
      * @param event {Event} native event
      */
-    (e: "icon-click", event: Event): void;
+    "icon-click": [event: Event];
     /**
      * on icon right click event
      * @param event {Event} native event
      */
-    (e: "icon-right-click", event: Event): void;
+    "icon-right-click": [event: Event];
 }>();
 
 const { dtf, dateCreator, dateFormatter, dateParser } =
@@ -196,7 +197,7 @@ watch(
                 Array.isArray(vmodel.value) &&
                 value.length > vmodel.value.length)
         )
-            // updateInternalState
+            // update internal state
             focusedDateData.value = {
                 day: currentDate.getDate(),
                 month: currentDate.getMonth(),

diff --git a/packages/oruga/src/components/datepicker/DatepickerMonth.vue b/packages/oruga/src/components/datepicker/DatepickerMonth.vue
@@ -43,11 +43,11 @@ const props = defineProps({
 
 const emits = defineEmits<{
     /** modelValue prop two-way binding */
-    (e: "update:modelValue", value: Date | Date[]): void;
+    "update:model-value": [value: Date | Date[]];
     /** focusedDate prop two-way binding */
-    (e: "update:focusedDate", value: FocusedDate): void;
-    (e: "range-start", value: Date): void;
-    (e: "range-end", value: Date): void;
+    "update:focusedDate": [value: FocusedDate];
+    "range-start": [value: Date];
+    "range-end": [value: Date];
 }>();
 
 const { dateCreator } = useDatepickerMixins(props.pickerProps);
@@ -234,7 +234,7 @@ function selectDate(date: Date): void {
     else if (isTrueish(props.pickerProps.range)) handleSelectRangeDate(date);
     else if (isTrueish(props.pickerProps.multiple))
         handleSelectMultipleDates(date);
-    else emits("update:modelValue", date);
+    else emits("update:model-value", date);
 }
 
 /*
@@ -255,7 +255,7 @@ function handleSelectRangeDate(date: Date): void {
             selectedEndDate.value = date;
         }
         emits("range-end", date);
-        emits("update:modelValue", [
+        emits("update:model-value", [
             selectedBeginDate.value,
             selectedEndDate.value,
         ]);
@@ -291,7 +291,7 @@ function handleSelectMultipleDates(date: Date): void {
     } else {
         multipleSelectedDates.push(date);
     }
-    emits("update:modelValue", multipleSelectedDates);
+    emits("update:model-value", multipleSelectedDates);
 }
 
 function changeFocus(month: Date, inc: number): void {

diff --git a/packages/oruga/src/components/datepicker/DatepickerTable.vue b/packages/oruga/src/components/datepicker/DatepickerTable.vue
@@ -36,12 +36,12 @@ const props = defineProps({
 
 const emits = defineEmits<{
     /** modelValue prop two-way binding */
-    (e: "update:modelValue", value: Date | Date[]): void;
+    "update:model-value": [value: Date | Date[]];
     /** focusedDate prop two-way binding */
-    (e: "update:focusedDate", value: FocusedDate): void;
-    (e: "range-start", value: Date): void;
-    (e: "range-end", value: Date): void;
-    (e: "week-number-click", value: number): void;
+    "update:focusedDate": [value: FocusedDate];
+    "range-start": [value: Date];
+    "range-end": [value: Date];
+    "week-number-click": [value: number];
 }>();
 
 const { isDateSelectable } = useDatepickerMixins(props.pickerProps);
@@ -164,7 +164,7 @@ function onSelectedDate(date: Date): void {
     else if (isTrueish(props.pickerProps.range)) handleSelectRangeDate(date);
     else if (isTrueish(props.pickerProps.multiple))
         handleSelectMultipleDates(date);
-    else emits("update:modelValue", date);
+    else emits("update:model-value", date);
 }
 
 /*
@@ -185,7 +185,7 @@ function handleSelectRangeDate(date: Date): void {
             selectedEndDate.value = date;
         }
         emits("range-end", date);
-        emits("update:modelValue", [
+        emits("update:model-value", [
             selectedBeginDate.value,
             selectedEndDate.value,
         ]);
@@ -219,7 +219,7 @@ function handleSelectMultipleDates(date: Date): void {
     } else {
         multipleSelectedDates = [...multipleSelectedDates, date];
     }
-    emits("update:modelValue", multipleSelectedDates);
+    emits("update:model-value", multipleSelectedDates);
 }
 
 function onRangeHoverEndDate(date: Date): void {

diff --git a/packages/oruga/src/components/datepicker/DatepickerTableRow.vue b/packages/oruga/src/components/datepicker/DatepickerTableRow.vue
@@ -45,10 +45,10 @@ const props = defineProps({
 });
 
 const emits = defineEmits<{
-    (e: "select", value: Date): void;
-    (e: "hover-enddate", value: Date): void;
-    (e: "change-focus", value: Date): void;
-    (e: "week-number-click", value: number): void;
+    select: [value: Date];
+    "hover-enddate": [value: Date];
+    "change-focus": [value: Date];
+    "week-number-click": [value: number];
 }>();
 
 const { isDateSelectable, dateCreator } = useDatepickerMixins(