chore: tsrv vptypes update

.vscode/settings.json

@@ -31,5 +31,6 @@
     "deps",
     "Checkbox",
     "ColorPicker"
-  ]
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

package.json

@@ -52,17 +52,16 @@
     "cross-env": "^7.0.3",
     "eslint": "^7.21.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.6.0",
+    "eslint-plugin-vue": "^7.7.0",
     "execa": "^5.0.0",
     "fs-extra": "^8.1.0",
     "husky": "^5.1.3",
     "lerna": "^3.22.1",
     "prettier": "^2.2.1",
     "release-it": "^14.4.1",
     "rimraf": "^3.0.2",
-    "tsrv": "^0.10.7",
+    "tsrv": "^0.11.1",
     "typescript": "^4.2.2",
-    "vls": "^0.7.0",
     "vue": "^3.0.7"
   },
   "engines": {

packages/elenext/package.json

@@ -38,8 +38,8 @@
   "dependencies": {
     "@elenext/icons": "^0.13.0",
     "@elenext/shared": "^0.13.0",
-    "@popperjs/core": "^2.8.6",
-    "vptypes": "^0.1.1"
+    "@popperjs/core": "^2.9.0",
+    "vptypes": "^0.1.3"
   },
   "peerDependencies": {
     "vue": "^3.0.5"

packages/elenext/src/components/Alert/EAlert.vue

@@ -37,7 +37,7 @@ import {
   IconXCircleFill,
   IconX,
 } from '@elenext/icons'
-import { VpTypes } from 'vptypes'
+import vptypes from 'vptypes'
 
 const EAlert = defineComponent({
   name: 'EAlert',
@@ -49,11 +49,11 @@ const EAlert = defineComponent({
     IconX,
   },
   props: {
-    type: VpTypes.oneOfString(['success', 'warning', 'info', 'error']).def('info'),
-    effect: VpTypes.oneOfString(['light', 'dark']).def('light'),
-    title: VpTypes.string(),
-    description: VpTypes.string(),
-    closable: VpTypes.bool().def(true),
+    type: vptypes.oneOfString(['success', 'warning', 'info', 'error']).def('info'),
+    effect: vptypes.oneOfString(['light', 'dark']).def('light'),
+    title: vptypes.string(),
+    description: vptypes.string(),
+    closable: vptypes.bool().def(true),
   },
   emits: ['close'],
   setup(props, { slots, emit }) {

packages/elenext/src/components/Breadcrumb/EBreadcrumb.vue

@@ -7,14 +7,14 @@
 <script lang="ts">
 import { App, computed, defineComponent } from 'vue'
 import { useChildren } from '../../hooks/useParent'
-import { VpTypes } from 'vptypes'
+import vptypes from 'vptypes'
 
 import { Breadcrumb_IJK } from './core'
 
 const EBreadcrumb = defineComponent({
   name: 'EBreadcrumb',
   props: {
-    separator: VpTypes.string().def('/'),
+    separator: vptypes.string().def('/'),
   },
 
   setup(props) {

packages/elenext/src/components/Breadcrumb/EBreadcrumbItem.vue

@@ -11,16 +11,16 @@
 import { defineComponent, getCurrentInstance, App } from 'vue'
 import { useParent } from '../../hooks/useParent'
 
-import { VpTypes } from 'vptypes'
+import vptypes from 'vptypes'
 import { Breadcrumb_IJK } from './core'
 
 const EBreadcrumbItem = defineComponent({
   name: 'EBreadcrumbItem',
   props: {
-    // path: VpTypes.string(),
+    // path: vptypes.string(),
     // TODO: oneOfType
-    path: VpTypes.oneOfType([VpTypes.string(), VpTypes.object()]),
-    replace: VpTypes.bool(),
+    path: vptypes.oneOfType([vptypes.string(), vptypes.object()]),
+    replace: vptypes.bool(),
   },
   setup(props, {}) {
     const self = getCurrentInstance()

packages/elenext/src/components/Button/EButton.vue

@@ -10,20 +10,20 @@
 import { App, computed, defineComponent } from 'vue'
 import { mergeClass } from '@elenext/shared'
 import { IconArrowClockwise } from '@elenext/icons'
-import { VpTypes } from 'vptypes'
+import vptypes from 'vptypes'
 
 const EButton = defineComponent({
   name: 'EButton',
   components: {
     IconArrowClockwise,
   },
   props: {
-    color: VpTypes.oneOfString(['primary', 'success', 'info', 'warning', 'danger']),
-    type: VpTypes.oneOfString(['link', 'round', 'circle', 'plain']),
-    size: VpTypes.oneOfString(['large', 'small']),
-    nativeType: VpTypes.oneOfString(['button', 'submit', 'reset']).def('button'),
-    loading: VpTypes.bool(),
-    disabled: VpTypes.bool(),
+    color: vptypes.oneOfString(['primary', 'success', 'info', 'warning', 'danger']),
+    type: vptypes.oneOfString(['link', 'round', 'circle', 'plain']),
+    size: vptypes.oneOfString(['large', 'small']),
+    nativeType: vptypes.oneOfString(['button', 'submit', 'reset']).def('button'),
+    loading: vptypes.bool(),
+    disabled: vptypes.bool(),
   },
   emits: ['click'],
   setup(props, { emit, slots }) {

packages/elenext/src/components/Checkbox/ECheckbox.vue

@@ -32,19 +32,19 @@ import { App, computed, defineComponent, ref } from 'vue'
 import { useParent } from '../../hooks/useParent'
 
 import { CHECKBOXGROUP_IJK } from './core'
-import { VpTypes } from 'vptypes'
+import vptypes from 'vptypes'
 
 const ECheckbox = defineComponent({
   name: 'ECheckbox',
   components: {},
   props: {
-    modelValue: VpTypes.oneOfType([VpTypes.bool(), VpTypes.array<Array<string | number>>()]),
-    label: VpTypes.string(),
-    value: VpTypes.oneOfType([VpTypes.string(), VpTypes.number()]).def(''),
-    indeterminate: VpTypes.bool(),
-    disabled: VpTypes.bool(),
-    name: VpTypes.string(),
-    size: VpTypes.string(),
+    modelValue: vptypes.oneOfType([vptypes.bool(), vptypes.array<Array<string | number>>()]),
+    label: vptypes.string(),
+    value: vptypes.oneOfType([vptypes.string(), vptypes.number()]).def(''),
+    indeterminate: vptypes.bool(),
+    disabled: vptypes.bool(),
+    name: vptypes.string(),
+    size: vptypes.string(),
   },
   emits: ['change', 'update:modelValue'],
   setup(props, { attrs, slots, emit }) {

packages/elenext/src/components/Checkbox/ECheckboxGroup.vue

@@ -6,15 +6,15 @@
 <script lang="ts">
 import { App, computed, defineComponent } from 'vue'
 import { useChildren } from '../../hooks/useParent'
-import { VpTypes } from 'vptypes'
+import vptypes from 'vptypes'
 
 import { CHECKBOXGROUP_IJK } from './core'
 
 const ECheckboxGroup = defineComponent({
   name: 'ECheckboxGroup',
   props: {
-    modelValue: VpTypes.array().isRequired,
-    disabled: VpTypes.bool(),
+    modelValue: vptypes.array().isRequired,
+    disabled: vptypes.bool(),
   },
   emits: ['update:modelValue', 'change'],
   setup(props, { attrs, slots, emit }) {

packages/elenext/src/components/ColorPicker/EColorPicker.vue

@@ -1,18 +1,19 @@
 <template>
   <div class="el-color-picker">
     <div class="el-color-picker__main">
-      <color-panel :color="modelValue" />
-      <hue-slider :color="modelValue" />
+      <color-panel :color="color" />
+      <hue-slider :color="color" />
     </div>
     <alpha-slider />
   </div>
 </template>
 <script lang="ts">
-import VpTypes from 'vptypes'
-import { App, defineComponent } from 'vue'
+import { App, defineComponent, computed } from 'vue'
+import vptypes from 'vptypes'
 import ColorPanel from './components/ColorPanel.vue'
 import HueSlider from './components/HueSlider.vue'
 import AlphaSlider from './components/AlphaSlider.vue'
+import { parseColor } from '../../utils/Color'
 
 const EColorPicker = defineComponent({
   name: 'EColorPicker',
@@ -22,14 +23,21 @@ const EColorPicker = defineComponent({
     AlphaSlider,
   },
   props: {
-    modelValue: VpTypes.hexColor(),
+    modelValue: vptypes.hexColor(),
   },
   setup(props, { attrs, slots, emit }) {
-    return {}
+    const color = computed(() => {
+      return parseColor(props.modelValue)
+    })
+    return {
+      color,
+    }
   },
 })
+
 EColorPicker.install = (app: App): void => {
   app.component(EColorPicker.name, EColorPicker)
 }
+
 export default EColorPicker
 </script>

packages/elenext/src/components/ColorPicker/components/AlphaSlider.vue

@@ -9,11 +9,15 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import vptypes from 'vptypes'
 import useDraggable from '../../../hooks/useDraggable'
+import { Hsva } from '../../../utils/Color'
 
 const AlphaSlider = defineComponent({
   name: 'AlphaSlider',
-  props: {},
+  props: {
+    color: vptypes.object<Hsva>().isRequired,
+  },
   setup(props, { attrs, slots, emit }) {
     const [targetRef, handleRef, { delta }] = useDraggable({
       viewport: true,

packages/elenext/src/components/ColorPicker/components/ColorPanel.vue

@@ -21,22 +21,23 @@
   </div>
 </template>
 <script lang="ts">
-import VpTypes from 'vptypes'
 import { computed, defineComponent } from 'vue'
+import vptypes from 'vptypes'
 import useDraggable from '../../../hooks/useDraggable'
+import { Hsva } from '../../../utils/Color'
 
 const ColorPanel = defineComponent({
   name: 'ColorPanel',
   components: {},
   props: {
-    color: VpTypes.hexColor().def('#FF0000').isRequired,
+    color: vptypes.object<Hsva>().isRequired,
   },
   setup(props) {
     const [targetRef, handleRef, { delta }] = useDraggable({
       viewport: true,
     })
     const background = computed(() => {
-      return 'hsl(' + props.color.get('hue') + ', 100%, 50%)'
+      return 'hsl(' + props.color.h + ', 100%, 50%)'
     })
     return {
       targetRef,

packages/elenext/src/components/ColorPicker/components/HueSlider.vue

@@ -12,14 +12,15 @@
   </div>
 </template>
 <script lang="ts">
-import VpTypes from 'vptypes'
 import { computed, defineComponent, watchEffect } from 'vue'
+import vptypes from 'vptypes'
 import useDraggable from '../../../hooks/useDraggable'
+import { Hsva } from '../../../utils/Color'
 
 const HueSlider = defineComponent({
   name: 'HueSlider',
   props: {
-    color: VpTypes.string().isRequired,
+    color: vptypes.object<Hsva>().isRequired,
   },
   emits: ['change'],
   setup(props, { attrs, slots, emit }) {

packages/elenext/src/components/Grid/ECol.vue

@@ -9,7 +9,7 @@ import { defineComponent, computed, inject, ref, CSSProperties, App } from 'vue'
 import { mergeClass } from '@elenext/shared'
 import { rowInjectKey, GutterTuple } from './core'
 import { RESPONSIVE_ARRAY } from './hooks/useBreakpoint'
-import { VpTypes } from 'vptypes'
+import vptypes from 'vptypes'
 
 type ColPropType = number | string
 
@@ -35,9 +35,9 @@ function parseFlex(flex: FlexType): string {
   return flex
 }
 
-const defalutPropItem = VpTypes.oneOfType([VpTypes.string(), VpTypes.number()])
+const defalutPropItem = vptypes.oneOfType([vptypes.string(), vptypes.number()])
 
-const sizePropItem = VpTypes.oneOfType([VpTypes.number(), VpTypes.object<SizeProp>()])
+const sizePropItem = vptypes.oneOfType([vptypes.number(), vptypes.object<SizeProp>()])
 
 const ECol = defineComponent({
   name: 'ECol',
@@ -52,7 +52,7 @@ const ECol = defineComponent({
     md: sizePropItem,
     lg: sizePropItem,
     xl: sizePropItem,
-    flex: VpTypes.oneOfType([VpTypes.string(), VpTypes.number()]),
+    flex: vptypes.oneOfType([vptypes.string(), vptypes.number()]),
   },
   setup(props, { slots }) {
     const { gutter } = inject(rowInjectKey, { gutter: ref([0, 0] as GutterTuple) })

packages/elenext/src/components/Grid/ERow.vue

@@ -9,7 +9,7 @@ import { defineComponent, computed, provide, CSSProperties, PropType, App } from
 import { mergeClass } from '@elenext/shared'
 import useBreakpoint, { Breakpoint, RESPONSIVE_ARRAY } from './hooks/useBreakpoint'
 import { Gutter, GutterTuple, rowInjectKey } from './core'
-import { VpTypes } from 'vptypes'
+import vptypes from 'vptypes'
 
 const ERow = defineComponent({
   name: 'ERow',
@@ -18,9 +18,9 @@ const ERow = defineComponent({
       type: [Number, Array, Object] as PropType<Gutter>,
       default: 0,
     },
-    align: VpTypes.oneOfString(['top', 'middle', 'bottom']).def('top'),
-    justify: VpTypes.oneOfString(['start', 'end', 'center', 'space-around', 'space-between']).def('start'),
-    wrap: VpTypes.bool().def(true),
+    align: vptypes.oneOfString(['top', 'middle', 'bottom']).def('top'),
+    justify: vptypes.oneOfString(['start', 'end', 'center', 'space-around', 'space-between']).def('start'),
+    wrap: vptypes.bool().def(true),
   },
   setup(props, { slots }) {
     const screens = useBreakpoint()

packages/elenext/src/components/Input/EInput.vue

@@ -41,20 +41,20 @@
 <script lang="ts">
 import { App, computed, defineComponent, ref, watch } from 'vue'
 import { IconXCircleFill } from '@elenext/icons'
-import { VpTypes } from 'vptypes'
+import vptypes from 'vptypes'
 
 const EInput = defineComponent({
   name: 'EInput',
   components: {
     IconXCircleFill,
   },
   props: {
-    modelValue: VpTypes.string(),
-    prefix: VpTypes.string(),
-    suffix: VpTypes.string(),
-    clearable: VpTypes.bool(),
-    disabled: VpTypes.bool(),
-    allowInput: VpTypes.bool().def(true),
+    modelValue: vptypes.string(),
+    prefix: vptypes.string(),
+    suffix: vptypes.string(),
+    clearable: vptypes.bool(),
+    disabled: vptypes.bool(),
+    allowInput: vptypes.bool().def(true),
   },
   emits: ['update:modelValue', 'input', 'focus', 'blur', 'change'],
   setup(props, { attrs, slots, emit }) {

packages/elenext/src/components/Layout/EAside.vue

@@ -6,13 +6,13 @@
 
 <script lang="ts">
 import { App, defineComponent, inject } from 'vue'
-import { VpTypes } from 'vptypes'
+import vptypes from 'vptypes'
 import { layoutInjectKey } from './core'
 
 const EAside = defineComponent({
   name: 'EAside',
   props: {
-    width: VpTypes.string().def('250px'),
+    width: vptypes.string().def('250px'),
   },
   setup(props, { slots }) {
     const layout = inject(layoutInjectKey)

packages/elenext/src/components/Layout/EHeader.vue

@@ -6,12 +6,12 @@
 
 <script lang="ts">
 import { App, defineComponent } from 'vue'
-import { VpTypes } from 'vptypes'
+import vptypes from 'vptypes'
 
 const EHeader = defineComponent({
   name: 'EHeader',
   props: {
-    height: VpTypes.string(),
+    height: vptypes.string(),
   },
 })