chore: fix ts build issues and sync all deps

package.json

@@ -5,6 +5,7 @@
   "repository": "https://github.com/epicmaxco/vuestic-ui",
   "devDependencies": {
     "lerna": "^3.20.2",
+    "syncpack": "^9.8.6",
     "yorkie": "^2.0.0"
   },
   "private": true,
@@ -39,14 +40,5 @@
   },
   "gitHooks": {
     "pre-commit": "lerna run --concurrency 1 --stream precommit --since HEAD"
-  },
-  "resolutions": {
-    "nuxt": "3.1.1",
-    "vue": "3.2.37",
-    "vite": "^4",
-    "vue-router": "4.1.6",
-    "@nuxt/schema": "3.0.0",
-    "vue-tsc": "1.2.0",
-    "typescript": "4.7.4"
   }
 }

packages/ag-grid-theme/package.json

@@ -17,7 +17,7 @@
     "@ag-grid-community/vue3": "^29.0.0"
   },
   "peerDependencies": {
-    "vuestic-ui": "^1.3.0"
+    "vuestic-ui": "1.6.4"
   },
   "devDependencies": {
     "sass": "^1.57.1",

packages/deploy/package.json

@@ -6,10 +6,10 @@
     "release": "tsx release-script/release-script.ts"
   },
   "devDependencies": {
-    "tsx": "^3.5.0",
+    "tsx": "^3.12.1",
     "inquirer": "^9.0.0",
-    "typescript": "^4.3.2",
-    "chalk": "^5.0.1"
+    "typescript": "4.7.4",
+    "chalk": "^5.2.0"
   },
   "exports": {
     "./execute": "./execute/index.ts"

packages/docs/package.json

@@ -27,7 +27,7 @@
     "escodegen": "^2.0.0",
     "eslint": "7",
     "nuxt": "^3.1.1",
-    "postcss": "^7",
+    "postcss": "^8.2.1",
     "postcss-custom-properties": "^13.1.1",
     "serve": "^14.2.0",
     "stylelint": "^13.13.1",
@@ -36,7 +36,7 @@
     "vue-component-meta": "^1.2.0",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.6",
-    "vue-tsc": "^1.0.24"
+    "vue-tsc": "^1.2.0"
   },
   "dependencies": {
     "@docsearch/js": "^3.2.1",

packages/nuxt/package.json

@@ -29,9 +29,9 @@
   "dependencies": {
     "@nuxt/kit": "^3.0.0",
     "chokidar": "*",
-    "nuxt": "^3.0.0",
+    "nuxt": "^3.1.1",
     "pathe": "^0.3.5",
-    "vuestic-ui": "^1.4.10"
+    "vuestic-ui": "1.6.4"
   },
   "devDependencies": {
     "@nuxt/module-builder": "latest",

packages/sandbox/package.json

@@ -31,21 +31,21 @@
     "vue": "*"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^1.3.0",
+    "@vitejs/plugin-vue": "^4.1.0",
     "@vue/test-utils": "^2.0.2",
     "lodash": "^4.17.21",
-    "nuxt": "3.0.0",
+    "nuxt": "^3.1.1",
     "rollup-plugin-analyzer": "^4.0.0",
-    "sass": "^1.54.4",
-    "serve": "^12.0.0",
+    "sass": "^1.57.1",
+    "serve": "^14.2.0",
     "ts-loader": "^9.3.0",
     "ts-node": "^10.8.1",
-    "typescript": "^4.3.2",
+    "typescript": "4.7.4",
     "vite": "^4.2.1",
     "vitest": "*",
     "vue-bundle-renderer": "0.4.1",
     "vue-tsc": "^1.2.0",
-    "webpack": "5",
+    "webpack": "^5.4.1",
     "webpack-cli": "^4.9.2",
     "when-dependencies-installed": "^1.0.1"
   },

packages/ui/package.json

@@ -96,19 +96,19 @@
     "postcss": "^8.2.1",
     "postcss-import": "^14.0.2",
     "postcss-loader": "^4.1.0",
-    "rollup": "^2.53.1",
+    "rollup": "^3.15.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
     "rollup-plugin-vue": "^6.0.0",
-    "sass": "^1.26.5",
+    "sass": "^1.57.1",
     "sass-loader": "^10.1.0",
     "semver": "^7.3.5",
     "style-loader": "^2.0.0",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
-    "ts-loader": "^8.0.14",
+    "ts-loader": "^9.3.0",
     "typescript": "4.7.4",
     "vite": "^4.2.1",
     "vite-plugin-chunk-split": "^0.4.7",
@@ -120,7 +120,7 @@
     "vuelidate": "^0.7.5",
     "webpack": "^5.4.1",
     "webpack-bundle-analyzer": "^4.1.0",
-    "webpack-cli": "^4.4.0",
+    "webpack-cli": "^4.9.2",
     "webpack-merge": "^5.5.0",
     "yargs": "^17.5.1"
   },
@@ -170,4 +170,4 @@
       ]
     }
   }
-}
+}

packages/ui/src/components/va-accordion/VaAccordion.vue

@@ -12,7 +12,7 @@ import { useAccordion } from './hooks/useAccordion'
 
 export default defineComponent({
   name: 'VaAccordion',
-  emits: useStatefulEmits,
+  emits: [...useStatefulEmits],
   props: {
     ...useStatefulProps,
     ...useComponentPresetProp,

packages/ui/src/components/va-alert/VaAlert.vue

@@ -95,7 +95,7 @@ import { VaIcon } from '../va-icon'
 export default defineComponent({
   name: 'VaAlert',
   components: { VaIcon },
-  emits: useStatefulEmits,
+  emits: [...useStatefulEmits], // useStatefulEmits,
   props: {
     ...useStatefulProps,
     ...useComponentPresetProp,

packages/ui/src/components/va-avatar-group/VaAvatarGroup.vue

@@ -13,7 +13,6 @@
     />
     <slot name="rest" v-bind="avatarProps">
       <va-avatar
-        color="secondary"
         v-bind="avatarProps"
         role="listitem"
       >

packages/ui/src/components/va-carousel/VaCarousel.vue

@@ -162,7 +162,7 @@ export default defineComponent({
     ariaSlideOfLabel: { type: String, default: '$t:slideOf' },
   },
 
-  emits: useStatefulEmits,
+  emits: [...useStatefulEmits],
 
   setup (props, { emit }) {
     const { valueComputed: currentSlide } = useStateful(props, emit, 'modelValue', { defaultValue: 0 })

packages/ui/src/components/va-color-indicator/VaColorIndicator.vue

@@ -29,7 +29,7 @@ import {
 
 export default defineComponent({
   name: 'VaColorIndicator',
-  emits: useStatefulEmits,
+  emits: [...useStatefulEmits],
   props: {
     ...useStatefulProps,
     ...useComponentPresetProp,

packages/ui/src/components/va-color-input/VaColorInput.vue

@@ -46,7 +46,7 @@ export default defineComponent({
     VaInput,
     VaColorIndicator,
   },
-  emits: useStatefulEmits,
+  emits: [...useStatefulEmits],
   props: {
     ...useStatefulProps,
     ...useComponentPresetProp,

packages/ui/src/components/va-color-palette/VaColorPalette.vue

@@ -29,7 +29,7 @@ import { VaColorIndicator } from '../va-color-indicator'
 export default defineComponent({
   name: 'VaColorPalette',
   components: { VaColorIndicator },
-  emits: useStatefulEmits,
+  emits: [...useStatefulEmits],
   props: {
     ...useStatefulProps,
     ...useComponentPresetProp,

packages/ui/src/components/va-date-picker/VaDatePicker.vue

@@ -123,7 +123,7 @@ export default defineComponent({
     const { syncView } = useView(props, emit, { type: props.type })
 
     const classComputed = computed(() => ({
-      'va-date-picker_without-week-days': props.hideWeekDays,
+      // 'va-date-picker_without-week-days': props.hideWeekDays,
       'va-date-picker_disabled': props.disabled,
     }))
 

packages/ui/src/components/va-dropdown/VaDropdown.vue

@@ -78,7 +78,7 @@ export default defineComponent({
     ariaLabel: { type: String, default: '$t:toggleDropdown' },
   },
 
-  emits: [...useStatefulEmits, 'anchor-click', 'anchor-right-click', 'content-click', 'click-outside', 'close', 'open'],
+  emits: [...useStatefulEmits, 'anchor-click', 'anchor-right-click', 'content-click', 'click-outside', 'close', 'open', 'anchor-dblclick'],
 
   setup (props, { emit, slots, attrs }) {
     const contentRef = shallowRef<HTMLElement>()
@@ -119,7 +119,7 @@ export default defineComponent({
       cancelHoverDebounce()
     }
 
-    const emitAndClose = (eventName: string, close?: boolean, e?: Event) => {
+    const emitAndClose = (eventName: Parameters<typeof emit>[0], close?: boolean, e?: Event) => {
       emit(eventName, e)
       if (close && props.trigger !== 'none') { valueComputed.value = false }
     }

packages/ui/src/components/va-hover/VaHover.vue

@@ -23,7 +23,7 @@ export default defineComponent({
     modelValue: { type: Boolean, default: false },
   },
 
-  emits: useStatefulEmits,
+  emits: [...useStatefulEmits],
 
   setup (props, { emit }) {
     const { valueComputed } = useStateful(props, emit)

packages/ui/src/components/va-infinite-scroll/VaInfiniteScroll.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    :is="$props.tag"
+    :is="$props.tag as 'div'"
     ref="element"
     role="feed"
     class="va-infinite-scroll"

packages/ui/src/components/va-option-list/VaOptionList.vue

@@ -72,7 +72,7 @@ export default defineComponent({
     VaSwitch,
     VaMessageListWrapper,
   },
-  emits: [...useStatefulEmits],
+  emits: [...useStatefulEmits, 'clear'],
   props: {
     ...useComponentPresetProp,
     ...useSelectableListProps,

packages/ui/src/components/va-pagination/VaPagination.vue

@@ -124,7 +124,7 @@ import { VaButton } from '../va-button'
 export default defineComponent({
   name: 'VaPagination',
   components: { VaButton },
-  emits: useStatefulEmits,
+  emits: [...useStatefulEmits],
   props: {
     ...useStatefulProps,
     ...useComponentPresetProp,

packages/ui/src/components/va-split/VaSplit.vue

@@ -88,7 +88,7 @@ export default defineComponent({
     ariaLabel: { type: String, default: '$t:splitPanels' },
   },
 
-  emits: useStatefulEmits,
+  emits: [...useStatefulEmits],
 
   setup: (props, { emit }) => {
     const splitPanelsContainer = shallowRef<HTMLElement>()
@@ -202,7 +202,7 @@ export default defineComponent({
       const checkSnappingRange = () => {
         return result.every((el, index, array) => {
           if (!array[index + 1]) { return true }
-          return Math.abs(el - array[index + 1]) > props.snappingRange
+          return Math.abs(el - array[index + 1]) > Number(props.snappingRange)
         })
       }
 

packages/ui/src/components/va-time-picker/VaTimePicker.vue

@@ -59,7 +59,7 @@ export default defineComponent({
     visibleCellsCount: { type: Number, default: 7 },
   },
 
-  emits: useStatefulEmits,
+  emits: [...useStatefulEmits],
 
   setup (props, { emit }) {
     const { valueComputed } = useStateful(props, emit)

packages/ui/src/composables/useClearable.ts

@@ -18,7 +18,7 @@ export const useClearableProps = {
   clearValue: { type: String, default: '' },
 }
 
-export const useClearableEmits = ['clear']
+export const useClearableEmits = ['clear'] as const
 
 export const useClearable = (
   props: ClearableProps,

packages/ui/src/composables/useColors.ts

@@ -1,4 +1,3 @@
-import type { ColorInput } from 'colortranslator/dist/@types'
 import type { ColorVariables, CssColor } from '../services/color'
 import { computed } from 'vue'
 import { useGlobalConfig } from '../services/global-config/global-config'
@@ -20,6 +19,7 @@ import {
   getColorLightness,
   cssVariableName,
   normalizeColorName,
+  type ColorInput,
 } from '../services/color/utils'
 import { isDev } from '../utils/env'
 

packages/ui/src/composables/useFocus.ts

@@ -2,7 +2,7 @@ import { unwrapEl } from './../utils/unwrapEl'
 import { focusElement, blurElement } from './../utils/focus'
 import { ref, onMounted, onBeforeUnmount, Ref } from 'vue'
 
-export const useFocusEmits = ['focus', 'blur']
+export const useFocusEmits = ['focus', 'blur'] as const
 
 export function useFocus (
   el?: Ref<HTMLElement | null | undefined>,

packages/ui/src/composables/useStateful.ts

@@ -2,7 +2,6 @@ import { ref, computed, watch, PropType, Ref } from 'vue'
 
 export type StatefulProps = {
   stateful: boolean
-  [key: string]: any
 }
 
 export type StatefulOptions<T> = {
@@ -28,7 +27,7 @@ export const createStatefulProps = <T>(modelValueType?: T, statefulDefault = fal
   }
 }
 
-export const useStatefulEmits = ['update:modelValue']
+export const useStatefulEmits = ['update:modelValue'] as const
 
 /**
  * Returns `valueComputed` that is proxy for `modelValue` or given key of the props

packages/ui/src/composables/useValidation.ts

@@ -48,7 +48,7 @@ export type ValidationProps<V extends any> = typeof useValidationProps & {
   rules: { type: PropType<ValidationRule<V>[]> }
 }
 
-export const useValidationEmits = ['update:error', 'update:errorMessages']
+export const useValidationEmits = ['update:error', 'update:errorMessages'] as const
 
 const isPromise = (value: any): value is Promise<any> => {
   return typeof value === 'object' && typeof value.then === 'function'

packages/ui/src/services/color/utils.ts

@@ -1,7 +1,9 @@
 import kebabCase from 'lodash/kebabCase.js'
 import camelCase from 'lodash/camelCase.js'
 import { ColorTranslator } from 'colortranslator'
-import type { HSLObject, ColorInput } from 'colortranslator/dist/@types'
+import type { HSLObject, HEXObject, RGBObject } from 'colortranslator'
+
+export type ColorInput = string | HEXObject | HSLObject | RGBObject
 
 export const isCSSVariable = (strColor: string): boolean => /var\(--.+\)/.test(strColor)
 export const cssVariableName = (colorName: string) => `--va-${kebabCase(colorName)}`

packages/ui/src/services/component-config/types.ts

@@ -12,7 +12,7 @@ export type ComponentConfig = Partial<{
   // key-value hack to avoid generics in type (like Omit, PropTypes, etc.)
   // `key: type` as result
   [componentName in VuesticComponentName]: {
-    [key in keyof PropTypes<VuesticComponentsMap[componentName]>]: PropTypes<VuesticComponentsMap[componentName]>[key]
+    [key in keyof PropTypes<VuesticComponentsMap[componentName]>]?: PropTypes<VuesticComponentsMap[componentName]>[key]
   }
 } & { all: Props, presets: Presets }>
 

packages/ui/src/services/vue-plugin/utils/global-properties.ts

@@ -1,7 +1,7 @@
 import { App, AppContext, ComponentCustomProperties } from 'vue'
 
 /** Type safe return app global properties for assign */
-export const extractGlobalProperties = (app: App | AppContext) => app.config.globalProperties as ComponentCustomProperties
+export const extractGlobalProperties = (app: App | AppContext) => app.config.globalProperties
 
 /**
  * Type safe set vue global property

packages/ui/src/utils/component-options/extract-component-options.ts

@@ -1,4 +1,3 @@
-import type { DefineComponent } from 'vue'
 import type { ExtractComponentEmits, ExtractComponentProps, DefineComponentOptions } from './types'
 import { getComponentProps } from './resolve-component-props'