Merge branch

.eslintrc

@@ -26,29 +26,17 @@
  "eslint:recommended",
  "plugin:vue/vue3-recommended",
  "plugin:@typescript-eslint/recommended",
- "prettier"
- ],
- "plugins": [
- "vue",
- "@typescript-eslint",
- "unused-imports"
+ "prettier",
+ "plugin:import/recommended",
+ "plugin:import/typescript"
  ],
+ "plugins": ["@typescript-eslint", "unused-imports"],
  /*
  * "off" 或 0 ==> 关闭规则
  * "warn" 或 1 ==> 打开的规则作为警告（不影响代码执行）
  * "error" 或 2 ==> 规则作为一个错误（代码不能执行，界面报错）
  */
  "rules": {
- "no-unused-vars": "off",
- "unused-imports/no-unused-vars": [
- "warn",
- {
- "vars": "all",
- "varsIgnorePattern": "^_",
- "args": "after-used",
- "argsIgnorePattern": "^_"
- }
- ],
  // eslint（https://eslint.bootcss.com/docs/rules/）
  // "no-var": "off", // 要求使用 let 或 const 而不是 var
  "no-multiple-empty-lines": [
@@ -63,14 +51,10 @@
  // "no-self-assign": "off",
  // "prefer-const": "off",
  "vue/require-v-for-key": 0,
- "semi": [
- 0,
- "never"
- ],
+ "semi": [0, "never"],
  "@typescript-eslint/no-non-null-assertion": "off",
  // // typeScript (https://typescript-eslint.io/rules)
  "@typescript-eslint/no-unused-vars": "off", // 禁止定义未使用的变量
- "unused-imports/no-unused-imports": "off",
  // "@typescript-eslint/prefer-ts-expect-error": "error", // 禁止使用 @ts-ignore
  "@typescript-eslint/no-explicit-any": "off", // 禁止使用 any 类型
  // "@typescript-eslint/no-non-null-assertion": "off",
@@ -81,7 +65,19 @@
  "vue/multi-word-component-names": "off", // 要求组件名称始终为 “-” 链接的单词
  // "vue/script-setup-uses-vars": "error", // 防止<script setup>使用的变量<template>被标记为未使用
  // "vue/attribute-hyphenation": "off", // 对模板中的自定义组件强制执行属性命名样式
- "vue/no-mutating-props": "off" // 不允许组件 prop的改变
+ "vue/no-mutating-props": "off", // 不允许组件 prop的改变
+ "no-unused-vars": "off", // or "@typescript-eslint/no-unused-vars": "off",
+ "unused-imports/no-unused-imports": "error",
+ "unused-imports/no-unused-vars": [
+ "warn",
+ {
+ "vars": "all",
+ "varsIgnorePattern": "^_",
+ "args": "after-used",
+ "argsIgnorePattern": "^_"
+ }
+ ],
+ "vue/no-setup-props-destructure": "warn"
  },
  "overrides": [
  {
@@ -91,4 +87,4 @@
  }
  }
  ]
-}
+}

.vscode/extensions.json

@@ -3,6 +3,5 @@
  "vue.volar",
  "esbenp.prettier-vscode",
  "stylelint.vscode-stylelint",
- "davidanson.vscode-markdownlint"
  ]
 }

build/package.json

@@ -27,7 +27,8 @@
  "glob": "^10.3.3",
  "less": "^4.0.0",
  "typescript": "^5.1.6",
- "vite-plugin-dts": "^3.3.1"
+ "vite-plugin-dts": "^3.3.1",
+ "svgo": "^3.0.2"
  },
  "dependencies": {
  "fast-glob": "^3.3.0",

demo/src/examples/drawer/drawer-callback.vue

@@ -12,8 +12,7 @@
  </yk-drawer>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
-import { getCurrentInstance } from 'vue'
+import { ref, getCurrentInstance } from 'vue'
 const proxy: any = getCurrentInstance()?.proxy
 const active = ref(false)
 const onClose = () => {

demo/src/examples/icon/icon-list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getCurrentInstance, watch } from 'vue'
+import { getCurrentInstance } from 'vue'
 import { useClipboard } from '@vueuse/core'
 import iconData from 'yike-design-ui/src/components/svg-icon/icons.json'
 const proxy: any = getCurrentInstance()?.proxy

demo/src/examples/input/input-event.vue

@@ -16,8 +16,7 @@
  </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 onMounted(() => {
  messege.value.push('输入框创建')
 })

demo/src/examples/message/message-alter.vue

@@ -6,8 +6,7 @@
  </yk-space>
 </template>
 <script setup lang="tsx">
-import { h } from 'vue'
-import { getCurrentInstance } from 'vue'
+import { h, getCurrentInstance } from 'vue'
 import { IconFireFireFill } from 'yike-design-ui/src/components/svg-icon'
 const proxy: any = getCurrentInstance()?.proxy
 const handleSuccess = () => {

demo/src/examples/modal/modal-close.vue

@@ -5,8 +5,7 @@
  <yk-button @click="showModal">modal 对话框</yk-button>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
-import { getCurrentInstance } from 'vue'
+import { ref, getCurrentInstance } from 'vue'
 const proxy: any = getCurrentInstance()?.proxy
 const visible = ref<boolean>(false)
 const showModal = () => {

demo/src/examples/popconfirm/popconfirm-primary.vue

@@ -19,7 +19,7 @@
  </yk-space>
 </template>
 <script lang="ts" setup>
-import { getCurrentInstance, h, ref } from 'vue'
+import { getCurrentInstance } from 'vue'
 const proxy: any = getCurrentInstance()?.proxy
 function cancel() {
  proxy.$message({ type: 'warning', message: '你点击了取消按钮' })

demo/src/examples/progress/progress-circle-status.vue

@@ -1,7 +1,7 @@
 <template>
  <yk-space>
- <yk-progress :type="'circle'"></yk-progress>
- <yk-progress :type="'circle'" :status="'success'"></yk-progress>
- <yk-progress :type="'circle'" :status="'error'"></yk-progress>
+ <yk-progress type="circle"></yk-progress>
+ <yk-progress type="circle" status="success"></yk-progress>
+ <yk-progress type="circle" status="error"></yk-progress>
  </yk-space>
 </template>

demo/src/examples/progress/progress-circle.vue

@@ -1,13 +1,13 @@
 <template>
  <yk-space>
- <yk-progress :type="'circle'" :size="'s'"></yk-progress>
- <yk-progress :type="'circle'" :percent="50" :size="'m'"></yk-progress>
- <yk-progress :type="'circle'" :percent="99" :size="'l'">
+ <yk-progress type="circle" size="s"></yk-progress>
+ <yk-progress type="circle" :percent="50" size="m"></yk-progress>
+ <yk-progress type="circle" :percent="99" size="l">
  <template #format="{ percent }">
  <div style="color: red">剩余{{ percent }}</div>
  </template>
  </yk-progress>
- <yk-progress :type="'circle'" :percent="num" :size="'l'"></yk-progress>
+ <yk-progress type="circle" :percent="num" size="l"></yk-progress>
  </yk-space>
 </template>
 <script setup lang="ts">

demo/src/examples/tooltip/tooltip-open.vue

@@ -1,19 +1,12 @@
 <template>
- <label class="tooltip-switch">
- <yk-switch v-model="open"></yk-switch>
- <span>切换气泡显示状态</span>
- </label>
- <yk-tooltip v-model:open="open" placement="right" trigger="none">
- <yk-button>tooltip</yk-button>
- </yk-tooltip>
+ <yk-space direction="vertical">
+ <yk-checkbox v-model:checked="open">切换气泡显示状态</yk-checkbox>
+ <yk-tooltip v-model:open="open" placement="right" trigger="none">
+ <yk-button type="outline">tooltip</yk-button>
+ </yk-tooltip>
+ </yk-space>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 const open = ref(false)
 </script>
-<style scoped>
-.tooltip-switch {
- display: block;
- margin-bottom: 8px;
-}
-</style>

demo/src/examples/tree/tree-custom-file-icon.vue

@@ -12,8 +12,7 @@
 </template>
 <script setup lang="ts">
 import { repeat } from 'seemly'
-import { h, shallowRef } from 'vue'
-import { ref } from 'vue'
+import { h, shallowRef, ref } from 'vue'
 import {
  IconAppOutline,
  IconAppFill,

demo/src/examples/tree/tree-file.vue

@@ -7,14 +7,7 @@
 </template>
 <script setup lang="ts">
 import { repeat } from 'seemly'
-import { h, shallowRef } from 'vue'
-import { ref } from 'vue'
-import {
- IconAppOutline,
- IconAppFill,
- IconSmileOutline,
- IconPptOutline,
-} from 'yike-design-ui/src/components/svg-icon'
+import { shallowRef, ref } from 'vue'
 function createData(level = 4, baseKey = '') {
  if (!level) return undefined
  return repeat(6 - level, undefined).map((_, index) => {

demo/src/examples/tree/tree-select.vue

@@ -15,9 +15,7 @@
 </template>
 <script setup lang="ts">
 import { repeat } from 'seemly'
-import { h } from 'vue'
-import { shallowRef } from 'vue'
-import { ref } from 'vue'
+import { h, shallowRef, ref } from 'vue'
 import { IconRightOutline } from 'yike-design-ui/src/components/svg-icon'
 function createData(level = 4, baseKey = '') {
  if (!level) return undefined

package.json

@@ -22,20 +22,21 @@
  "test:coverage": "pnpm --filter @yike/test test:coverage"
  },
  "dependencies": {
- "svgo": "^3.0.2",
  "vue": "^3.3.4"
  },
  "devDependencies": {
  "@testing-library/vue": "^7.0.0",
  "@types/node": "^18.11.12",
- "@typescript-eslint/eslint-plugin": "^5.60.1",
- "@typescript-eslint/parser": "^5.60.1",
+ "@typescript-eslint/eslint-plugin": "^6.2.1",
+ "@typescript-eslint/parser": "^6.2.1",
  "@vitejs/plugin-vue": "^4.2.3",
  "@vitejs/plugin-vue-jsx": "^3.0.1",
- "eslint": "^8.44.0",
- "eslint-config-prettier": "^8.5.0",
+ "eslint-import-resolver-typescript": "^3.5.5",
+ "eslint-plugin-import": "^2.28.0",
+ "eslint": "^8.46.0",
+ "eslint-config-prettier": "^8.9.0",
  "eslint-plugin-unused-imports": "^2.0.0",
- "eslint-plugin-vue": "^9.0.1",
+ "eslint-plugin-vue": "^9.16.1",
  "husky": "^8.0.0",
  "less": "^4.0.0",
  "lint-staged": "^13.2.3",

packages/yike-design-ui/package.json

@@ -47,14 +47,9 @@
  },
  "dependencies": {
  "@vueuse/core": "^10.2.1",
- "@yike/build": "workspace:*"
+ "vue": "^3.3.4"
  },
  "devDependencies": {
- "@vitest/coverage-v8": "^0.32.4",
- "@vue/test-utils": "^2.4.0",
- "c8": "^8.0.0",
- "happy-dom": "^9.20.3",
- "terser": "^5.18.2",
- "vitest": "^0.32.4"
+ "@yike/build": "workspace:*"
  }
 }

packages/yike-design-ui/src/components/anchor/src/anchor.vue

@@ -9,13 +9,18 @@
  </div>
 </template>
 <script setup lang="ts">
-import { AnchorOption, AnchorProps } from './anchor'
-import { ref, shallowRef, nextTick, onMounted } from 'vue'
-import { computed } from 'vue'
+import { AnchorProps } from './anchor'
+import {
+ ref,
+ shallowRef,
+ nextTick,
+ onMounted,
+ computed,
+ onUnmounted,
+ watch,
+} from 'vue'
 import { useDebounceFn, useEventListener } from '@vueuse/core'
 
-import { onUnmounted } from 'vue'
-import { watch } from 'vue'
 /* eslint-disable-next-line */
 import AnchorList from './anchor-list.vue'
 

packages/yike-design-ui/src/components/avatar/style/index.less

@@ -49,6 +49,7 @@
  font-weight: 500;
  border: 2px solid @bg-color-l;
  text-align: center;
+ color: @white;
  background-color: @pcolor;
  transition: border @animats;
  // transition: border @animats;

packages/yike-design-ui/src/components/input-search/src/input-search.ts

@@ -1,4 +1,4 @@
-import { Size, Status } from '../../utils/constant';
+import { Size } from '../../utils/constant';
 
 export type InputSearchProps = {
  name?: string;

packages/yike-design-ui/src/components/input/src/input.vue

@@ -91,7 +91,6 @@ defineOptions({
  name: 'YkInput',
 })
 const props = withDefaults(defineProps<InputProps>(), {
- id: '',
  name: '',
  size: 'l',
  type: 'text',

packages/yike-design-ui/src/components/input/src/utils.ts

@@ -1,4 +1,4 @@
-import { Ref, onMounted, ref } from 'vue';
+import { Ref, onMounted } from 'vue';
 
 export const useInputTooltip = (
  inputRef: Ref<HTMLInputElement | undefined>,

packages/yike-design-ui/src/components/input/style/index.less

@@ -264,8 +264,8 @@
 .input-size(xl, 46px, @space-l, @size-m, @radius-m);
 
 .input-status(primary, @bg-color-s, @bg-color-s, @pcolor, @bg-color-m, @pcolor, @bg-color-l);
-.input-status(danger, transparent, @ecolor-2, @ecolor, @ecolor-1, @ecolor, @bg-color-m);
-.input-status(success, transparent, @scolor-2, @scolor, @scolor-1, @scolor, @bg-color-m);
-.input-status(warning, transparent, @wcolor-2, @wcolor, @wcolor-1, @wcolor, @bg-color-m);
+.input-status(danger, transparent, @ecolor-2, @ecolor, @ecolor-1, @ecolor, @bg-color-l);
+.input-status(success, transparent, @scolor-2, @scolor, @scolor-1, @scolor, @bg-color-l);
+.input-status(warning, transparent, @wcolor-2, @wcolor, @wcolor-1, @wcolor, @bg-color-l);
 .input-status(disabled, @bg-color-m, @bg-color-m, @bg-color-m, @bg-color-m, @bg-color-m, @bg-color-m);
 .input-status(readonly, @bg-color-s, @bg-color-s, @bg-color-s, @bg-color-s, @bg-color-s, @bg-color-s);

packages/yike-design-ui/src/components/radio/src/radio.vue

@@ -16,9 +16,8 @@
  </label>
 </template>
 <script setup lang="ts">
-import { RadioProps } from './radio'
+import { RadioProps, radioEmits } from './radio'
 import { computed, nextTick } from 'vue'
-import { radioEmits } from './radio'
 import { useRadio } from './useRadio'
 import { CHANGE_EVENT } from './constants'
 

packages/yike-design-ui/src/components/slider/src/slider.vue

@@ -43,11 +43,10 @@
 
 <script setup lang="ts">
 import sliderMarks from './slider-marks.vue'
-import { computed, ref, toRefs, watch, onMounted } from 'vue'
+import { computed, ref, toRefs, watch, onMounted, onUnmounted } from 'vue'
 import { SliderProps, SliderEmits, SliderEmitEvents } from './slider'
 import { DIRECTION, createCssScope } from '../../utils'
 import { useSlider } from './useSlider'
-import { onUnmounted } from 'vue'
 defineOptions({
  name: 'YKSlider',
 })

packages/yike-design-ui/src/components/tree/src/node.vue

@@ -1,12 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { TreeInjectionKey, TreeNodeInjectionKey, TreeOption } from './tree'
 import TreeNode from './tree-node.vue'
-import { computed } from 'vue'
+import { computed, inject, provide } from 'vue'
 import ExpandTransition from './expand-transition.vue'
-import { inject } from 'vue'
-import { provide } from 'vue'
-import { toRefs } from 'vue'
 
 const props = defineProps<{
  option: TreeOption