Merge branch 'develop' into refactor/typed-props-main

Author: Seungwoo321

eslint.config.js

@@ -14,6 +14,22 @@ export default defineConfig([
       '**/dist/**'
     ]
   },
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parser: require.resolve('vue-eslint-parser'),
+      parserOptions: {
+        parser: require.resolve('@typescript-eslint/parser'),
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        extraFileExtensions: ['.vue']
+      }
+    },
+    plugins: {
+      'vue': pluginVue,
+      '@typescript-eslint': tseslint
+    }
+  },
   {
     files: ['**/*.{js,mjs,cjs,vue,ts}', 'eslint.config.js'],
     extends: [

pnpm-lock.yaml

@@ -40,65 +40,65 @@
   </Draggable>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, computed, watch, nextTick, onBeforeUnmount } from 'vue'
 import { VueDraggableNext as Draggable } from 'vue-draggable-next'
 import VDraggableAttribute from './VDraggableAttribute.vue'
 
-const emit = defineEmits([
-  'update:draggedAttribute',
-  'update:zIndexOfFilterBox',
-  'update:unselectedFilterValues',
-  'update:openStatusOfFilterBox'
-])
+const emit = defineEmits<{
+  (
+    event: 'update:draggedAttribute',
+    payload: { key: string; value: string[] }
+  ): void
+  (event: 'update:zIndexOfFilterBox', attributeName: string): void
+  (
+    event: 'update:unselectedFilterValues',
+    payload: { key: string; value: Record<string, boolean> }
+  ): void
+  (
+    event: 'update:openStatusOfFilterBox',
+    payload: { key: string; value: boolean }
+  ): void
+}>()
 
-const props = defineProps({
-  cellType: {
-    type: String,
-    required: true
-  },
-  classes: {
-    type: String,
-    default: ''
-  },
-  attributeNames: {
-    type: Array,
-    default: () => []
-  },
-  allFilters: {
-    type: Object,
-    default: () => ({})
-  },
-  valueFilter: {
-    type: Object,
-    default: () => ({})
-  },
-  restrictedFromDragDrop: {
-    type: Array,
-    default: () => []
-  },
-  hideFilterBoxOfUnusedAttributes: {
-    type: Boolean,
-    default: false
-  },
-  zIndices: {
-    type: Object,
-    default: () => ({})
-  },
-  maxZIndex: {
-    type: Number,
-    default: 1000
-  },
-  openStatus: {
-    type: Object,
-    default: () => ({})
-  }
+interface DragAndDropCellProps {
+  cellType: string
+  classes?: string
+  attributeNames?: string[]
+  allFilters?: Record<string, Record<string, number>>
+  valueFilter?: Record<string, Record<string, boolean>>
+  restrictedFromDragDrop?: string[]
+  hideFilterBoxOfUnusedAttributes?: boolean
+  zIndices?: Record<string, number>
+  maxZIndex?: number
+  openStatus?: Record<string, boolean>
+}
+
+const props = withDefaults(defineProps<DragAndDropCellProps>(), {
+  classes: '',
+  attributeNames: () => [],
+  allFilters: () => ({}),
+  valueFilter: () => ({}),
+  restrictedFromDragDrop: () => [],
+  hideFilterBoxOfUnusedAttributes: false,
+  zIndices: () => ({}),
+  maxZIndex: 1000,
+  openStatus: () => ({})
 })
 
-const modelItems = ref([])
+const modelItems = ref<string[]>([])
 const showDraggable = ref(false)
 
-const onDragMove = (event) => {
+interface DragMoveEvent {
+  from: HTMLElement
+  to: HTMLElement
+  draggedContext: {
+    element: string
+    index: number
+  }
+}
+
+const onDragMove = (event: DragMoveEvent) => {
   const draggedItem = event.draggedContext.element
   const isCrossCellMove = event.from !== event.to
 

src/components/pivottable-ui/VDragAndDropCell.vue

@@ -7,7 +7,8 @@
       <slot
         name="pvtAttr"
         :attr-name="attributeName"
-      >{{ attributeName }}</slot>
+        >{{ attributeName }}</slot
+      >
       <span
         v-if="!hideDropDown"
         @mousedown.stop
@@ -23,7 +24,9 @@
         :filter-box-values="attributeValues"
         :z-index="zIndex"
         @mousedown.stop
-        @update:z-index-of-filter-box="$emit('update:zIndexOfFilterBox', $event)"
+        @update:z-index-of-filter-box="
+          $emit('update:zIndexOfFilterBox', $event)
+        "
         @update:unselected-filter-values="
           $emit('update:unselectedFilterValues', $event)
         "
@@ -32,45 +35,39 @@
   </li>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import VFilterBox from './VFilterBox.vue'
 import { computed } from 'vue'
 
-const emit = defineEmits([
-  'update:zIndexOfFilterBox',
-  'update:unselectedFilterValues',
-  'update:openStatusOfFilterBox'
-])
+const emit = defineEmits<{
+  (event: 'update:zIndexOfFilterBox', attributeName: string): void
+  (
+    event: 'update:unselectedFilterValues',
+    payload: { key: string; value: Record<string, boolean> }
+  ): void
+  (
+    event: 'update:openStatusOfFilterBox',
+    payload: { key: string; value: boolean }
+  ): void
+}>()
 
-const props = defineProps({
-  attributeName: {
-    type: String,
-    required: true
-  },
-  attributeValues: {
-    type: Object,
-    default: () => ({})
-  },
-  restricted: {
-    type: Boolean,
-    default: false
-  },
-  open: {
-    type: Boolean,
-    default: false
-  },
-  unselectedFilterValues: {
-    type: Object,
-    default: () => ({})
-  },
-  zIndex: {
-    default: 1000,
-    type: Number
-  },
-  hideDropDownForUnused: {
-    type: Boolean,
-    default: false
-  }
+interface DraggableAttributeProps {
+  attributeName: string
+  attributeValues?: Record<string, number>
+  restricted?: boolean
+  open?: boolean
+  unselectedFilterValues?: Record<string, boolean>
+  zIndex?: number
+  hideDropDownForUnused?: boolean
+}
+
+const props = withDefaults(defineProps<DraggableAttributeProps>(), {
+  attributeValues: () => ({}),
+  restricted: false,
+  open: false,
+  unselectedFilterValues: () => ({}),
+  zIndex: 1000,
+  hideDropDownForUnused: false
 })
 
 const toggleFilterBox = () => {

src/components/pivottable-ui/VDraggableAttribute.vue

@@ -4,34 +4,38 @@
     class="pvtDropdown"
   >
     <option
-      v-for="(text, key) in options"
-      :key="key"
+      v-for="(text, index) in options"
+      :key="index"
       :value="text"
-      :selected="text === valueModel ? 'selected' : undefined"
     >
       {{ text }}
     </option>
   </select>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, watch } from 'vue'
 
-const props = defineProps({
-  options: {
-    type: Array,
-    default: () => []
-  },
-  value: {
-    type: String,
-    default: ''
-  }
+const emit = defineEmits<{
+  (event: 'update:value', value: string): void
+}>()
+
+interface DropdownProps {
+  options: string[]
+  value?: string
+}
+
+const props = withDefaults(defineProps<DropdownProps>(), {
+  value: ''
 })
-const valueModel = ref(props.value || props.options[0])
-const emit = defineEmits(['update:value'])
+
+const valueModel = ref<string>(props.value || props.options[0] || '')
+
 watch(
   valueModel,
-  (newVal) => { emit('update:value', newVal) },
+  (newVal) => {
+    emit('update:value', newVal)
+  },
   { immediate: true }
 )
 </script>