fix color-picker bug and update changelog

examples/react-site/scripts/build-react.mjs

@@ -66,7 +66,7 @@ async function buildReact() {
       lib: {
         entry: entries,
         formats: ['es'],
-        fileName: (format, entryName) => `${entryName}.js`
+        fileName: (_, entryName) => `${entryName}.js`
       }
     }
   })

examples/sites/demos/pc/app/color-picker/dynamic-color-change.vue

@@ -1,6 +1,8 @@
 <template>
-  <tiny-color-picker v-model="color" />
-  <tiny-button @click="changeColor"> 切换 </tiny-button>
+  <div>
+    <tiny-color-picker v-model="color" />
+    <tiny-button @click="changeColor"> 切换 </tiny-button>
+  </div>
 </template>
 
 <script>

examples/sites/demos/pc/webdoc/installation-en.md

@@ -9,7 +9,9 @@
 | Vue2.x              | @opentiny/vue@2.x         |
 | Vue3.x              | @opentiny/vue@3.x         |
 
-Currently, TinyVue does not support Vue2.7. When the project uses the Vue2.0 framework, the recommended version format is `"vue": "~2.6.14", "vue-template-compiler": "~2.6.14"`.
+**Vue2 Engineering Description**
+
+For a long time, TinyVue only supports Vue 2.6.14. Starting from TinyVue 2.11.0, the project of Vue 2.7+ is also supported. Make sure that you have installed the correct Vue 2.x dependency.
 
 ### New Project Configuration
 

examples/sites/demos/pc/webdoc/installation.md

@@ -9,7 +9,9 @@
 | Vue2.x        | @opentiny/vue@2.x |
 | Vue3.x        | @opentiny/vue@3.x |
 
-`TinyVue` 暂时不支持 `Vue2.7`, 当项目使用`Vue2.0`框架时，推荐版本写法：`"vue": "~2.6.14" , "vue-template-compiler": "~2.6.14"` 。
+**Vue2工程说明**
+
+长期以来，TinyVue 都是只支持 Vue 2.6.14 版本。 从 TinyVue 2.11.0 开始，也支持 Vue 2.7+的工程了，请确保你安装了正确的Vue 2.x的依赖。
 
 ### 全新项目配置
 

examples/sites/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "2.1.32",
+  "version": "2.1.1",
   "scripts": {
     "start": "vite",
     "start:saas": "vite --mode saas",

examples/sites/playground/App.vue

@@ -13,7 +13,7 @@ import Sun from './icons/Sun.vue'
 import Moon from './icons/Moon.vue'
 import Share from './icons/Share.vue'
 
-const versions = ['3.10.0', '3.9.1', '3.8.4']
+const versions = ['3.11', '3.10', '3.9', '3.8']
 const latestVersion = versions[0]
 const cdnHost = 'https://unpkg.com'
 window.localStorage.setItem('setting-cdn', cdnHost)

examples/vue3/src/vite-env.d.ts

@@ -7,7 +7,7 @@ declare module '*.vue' {
 }
 
 interface ImportMetaEnv {
-  readonly VITE_AUI_MODE: 'pc' | 'mobile' | 'mobile-first'
+  readonly VITE_TINY_MODE: 'pc' | 'mobile' | 'mobile-first'
   // 更多环境变量...
 }
 

internals/cli/package.json

@@ -57,7 +57,7 @@
     "esno": "^0.16.3",
     "fast-glob": "^3.2.12",
     "rollup-plugin-replace": "^2.2.0",
-    "vite-plugin-dts": "^3.0.0",
+    "vite-plugin-dts": "~3.0.0",
     "vite-plugin-svgr": "^3.2.0",
     "vite-svg-loader": "^3.6.0"
   }

packages/renderless/src/color-picker/alpha-select/index.ts

@@ -1,25 +1,23 @@
-import type { IColorSelectPanel } from "@/types";
+import type { IColorSelectPanel } from '@/types'
 
 export const calcLeftByAlpha = (wrapper: HTMLElement, thumb: HTMLElement, alpha: number) => {
-  return Math.round(
-    (alpha * (wrapper.offsetWidth - thumb.offsetWidth / 2)) / 100
-  )
+  return Math.round((alpha * (wrapper.offsetWidth - thumb.offsetWidth / 2)) / 100)
 }
 
 export const updateThumb = (alpha: number, thumb: HTMLElement, wrapper: HTMLElement) => {
   thumb.style.left = `${calcLeftByAlpha(wrapper, thumb, alpha)}px`
 }
 
 export const onDrag = (
-  event: MouseEvent, bar: IColorSelectPanel<HTMLElement>, thumb: IColorSelectPanel<HTMLElement>,
+  event: MouseEvent,
+  bar: IColorSelectPanel<HTMLElement>,
+  thumb: IColorSelectPanel<HTMLElement>,
   alpha: IColorSelectPanel<number>
 ) => {
   const rect = bar.value.getBoundingClientRect()
   const { clientX } = event
   let left = clientX - rect.left
   left = Math.max(thumb.value.offsetWidth / 2, left)
   left = Math.min(left, rect.width - thumb.value.offsetWidth / 2)
-  alpha.value = Math.round(
-    ((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth)) * 100
-  )
+  alpha.value = Math.round(((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth)) * 100)
 }

packages/renderless/src/color-picker/alpha-select/vue.ts

@@ -1,4 +1,4 @@
-import {IColorPickerRef as Ref} from '@/types';
+import { IColorPickerRef as Ref } from '@/types'
 import Color from '../utils/color'
 import { draggable } from '../utils/use-drag'
 import { onDrag, updateThumb } from '.'
@@ -16,13 +16,16 @@ export const renderless = (props, context, { emit }) => {
   const alphaWrapper: Ref<HTMLElement> = context.ref()
   const alphaThumb: Ref<HTMLElement> = context.ref()
   const alpha = context.ref(color.get('a'))
-  context.watch(() => props.color, (hex: string) => {
-    color.reset(hex)
-    const [rr, gg, bb] = color.getRGB()
-    r.value = rr
-    g.value = gg
-    b.value = bb
-  })
+  context.watch(
+    () => props.color,
+    (hex: string) => {
+      color.reset(hex)
+      const [rr, gg, bb] = color.getRGB()
+      r.value = rr
+      g.value = gg
+      b.value = bb
+    }
+  )
   context.watch(alpha, (newAlpha) => {
     updateThumb(newAlpha, alphaThumb.value, alphaWrapper.value)
     emit('alpha-update', alpha.value)
@@ -36,10 +39,9 @@ export const renderless = (props, context, { emit }) => {
   })
   const api = {
     state,
-    color: props.color,
     slider,
     alphaWrapper,
-    alphaThumb,
+    alphaThumb
   }
   context.onMounted(() => {
     updateThumb(alpha.value, alphaThumb.value, slider.value)
@@ -49,7 +51,7 @@ export const renderless = (props, context, { emit }) => {
       },
       start(event) {
         onDrag(event as MouseEvent, slider, alphaThumb, alpha)
-      },
+      }
     })
   })
   return api

packages/renderless/src/color-picker/color-select/index.ts

@@ -7,45 +7,49 @@ export const setPosition = (el: HTMLElement, x: number, y: number) => {
 }
 export const getXBySaturation = (s: number, width: number) => (s * width) / 100
 export const getYByLight = (l: number, height: number) => ((100 - l) * height) / 100
-export const updatePosition = (event: MouseEvent | TouchEvent, rect: DOMRect, cursor: IColorSelectPanel<HTMLElement>) => {
+export const updatePosition = (
+  event: MouseEvent | TouchEvent,
+  rect: DOMRect,
+  cursor: IColorSelectPanel<HTMLElement>
+) => {
   let x = (event as MouseEvent).clientX - rect.left
   let y = (event as MouseEvent).clientY - rect.top
   x = Math.max(0, x)
   x = Math.min(x, rect.width)
   y = Math.max(0, y)
   y = Math.min(y, rect.height)
 
-  setPosition(cursor.value, x - 1 / 2 * cursor.value.offsetWidth, y - 1 / 2 * cursor.value.offsetWidth)
+  setPosition(cursor.value, x - (1 / 2) * cursor.value.offsetWidth, y - (1 / 2) * cursor.value.offsetWidth)
   return { x, y }
 }
-export const calcSaturation = (x: number, width: number) => (x / width)
+export const calcSaturation = (x: number, width: number) => x / width
 export const calcBrightness = (y: number, height: number) => 100 - (y / height) * 100
 export const getThumbTop = (wrapper: HTMLElement, thumb: HTMLElement, hue: number) => {
-  return Math.round(
-    (hue * (wrapper.offsetHeight - thumb.offsetHeight / 2)) / 360
-  )
+  return Math.round((hue * (wrapper.offsetHeight - thumb.offsetHeight / 2)) / 360)
 }
 
 export const resetCursor = (
-  s: number, v: number,
+  s: number,
+  v: number,
   wrapper: IColorSelectPanel<HTMLElement>,
   cursor: IColorSelectPanel<HTMLElement>,
   thumb: IColorSelectPanel<HTMLElement>,
-  color: Color, h: IColorSelectPanel<number>
+  color: Color,
+  h: IColorSelectPanel<number>
 ) => {
   const { width, height } = wrapper.value.getBoundingClientRect()
-  const x = getXBySaturation(s, width) - 1 / 2 * cursor.value.offsetWidth
-  const y = getYByLight(v, height) - 1 / 2 * cursor.value.offsetWidth
+  const x = getXBySaturation(s, width) - (1 / 2) * cursor.value.offsetWidth
+  const y = getYByLight(v, height) - (1 / 2) * cursor.value.offsetWidth
   setPosition(cursor.value, x < 0 ? 0 : x, y < 0 ? 0 : y)
   const thummbTop = getThumbTop(wrapper.value, thumb.value, color.get('h'))
   thumb.value.style.top = `${thummbTop}px`
   h.value = color.get('h')
 }
 
 export const updateCursor = (wrapper: IColorSelectPanel<HTMLElement>, cursor: IColorSelectPanel<HTMLElement>, emit) => {
-  return (color: Color, event: MouseEvent)=>{
-    const rect = wrapper.value.getBoundingClientRect();
-    const {x,y} = updatePosition(event, rect, cursor)
+  return (color: Color, event: MouseEvent) => {
+    const rect = wrapper.value.getBoundingClientRect()
+    const { x, y } = updatePosition(event, rect, cursor)
     color.set({
       s: calcSaturation(x, rect.width) * 100,
       v: calcBrightness(y, rect.height)
@@ -63,18 +67,14 @@ export const updateThumb = (
   h: IColorSelectPanel<Number>,
   emit
 ) => {
-  return (event: MouseEvent)=>{
+  return (event: MouseEvent) => {
     const e = event as MouseEvent
-        const rect = bar.value.getBoundingClientRect()
-        let top = e.clientY - rect.top
-        top = Math.min(top, rect.height - thumb.value.offsetHeight / 2)
-        top = Math.max(thumb.value.offsetHeight / 2, top)
-        thumb.value.style.top = `${top}px`
-        h.value = Math.round(
-          ((top - thumb.value.offsetHeight / 2) /
-          (rect.height - thumb.value.offsetHeight)) *
-          360
-        )
-        emit('hue-update', h.value)
+    const rect = bar.value.getBoundingClientRect()
+    let top = e.clientY - rect.top
+    top = Math.min(top, rect.height - thumb.value.offsetHeight / 2)
+    top = Math.max(thumb.value.offsetHeight / 2, top)
+    thumb.value.style.top = `${top}px`
+    h.value = Math.round(((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight)) * 360)
+    emit('hue-update', h.value)
   }
-}
+}

packages/renderless/src/color-picker/color-select/vue.ts

@@ -1,12 +1,7 @@
-import {IColorSelectPanel as Ref} from '@/types';
+import { IColorSelectPanel as Ref } from '@/types'
 import { draggable } from '../utils/use-drag'
 import Color from '../utils/color'
-import {
-  getThumbTop,
-  resetCursor,
-  updateThumb,
-  updateCursor,
-} from './index'
+import { getThumbTop, resetCursor, updateThumb, updateCursor } from './index'
 
 export const api = ['state', 'cursor', 'wrapper', 'bar', 'thumb']
 export const renderless = (props, context, { emit }) => {
@@ -24,40 +19,35 @@ export const renderless = (props, context, { emit }) => {
     background
   })
   const api = { state, cursor, wrapper, bar, thumb }
-  context.watch(() => props.color, (newColor) => {
-    color.reset(newColor)
-    resetCursor(color.get('s'), color.get('v'), wrapper, cursor, thumb, color, h)
-  })
+  context.watch(
+    () => props.color,
+    (newColor) => {
+      color.reset(newColor)
+      resetCursor(color.get('s'), color.get('v'), wrapper, cursor, thumb, color, h)
+    }
+  )
   context.onMounted(() => {
     const update = {
       thumb: updateThumb(bar, thumb, h, emit),
-      cursor: updateCursor(wrapper,cursor,emit)
-    };
+      cursor: updateCursor(wrapper, cursor, emit)
+    }
     const thumbTop = getThumbTop(wrapper.value, thumb.value, h.value)
     thumb.value.style.top = `${thumbTop}px`
-    resetCursor(
-      color.get('s'),
-      color.get('v'),
-      wrapper,
-      cursor,
-      thumb,
-      color,
-      h
-    )
+    resetCursor(color.get('s'), color.get('v'), wrapper, cursor, thumb, color, h)
     draggable(wrapper.value, {
       drag(event) {
-        update.cursor(color, event as MouseEvent);
+        update.cursor(color, event as MouseEvent)
       },
       start(event) {
-        update.cursor(color, event as MouseEvent);
-      },
+        update.cursor(color, event as MouseEvent)
+      }
     })
     draggable(bar.value, {
       drag(event) {
         update.thumb(event as MouseEvent)
       },
-      start(event){
-        update.thumb(event as MouseEvent);
+      start(event) {
+        update.thumb(event as MouseEvent)
       }
     })
   })

packages/renderless/src/color-picker/index.ts

@@ -1,12 +1,15 @@
-import {IColorPickerRef, IColorSelectPanelRef} from '@/types';
+import { IColorPickerRef, IColorSelectPanelRef } from '@/types'
 import type Color from './utils/color'
 
 export const onConfirm = (
-  hex: IColorSelectPanelRef<string>, triggerBg: IColorSelectPanelRef<string>,
-  res: IColorSelectPanelRef<string>, emit, isShow: IColorSelectPanelRef<boolean>
+  hex: IColorSelectPanelRef<string>,
+  triggerBg: IColorSelectPanelRef<string>,
+  res: IColorSelectPanelRef<string>,
+  emit,
+  isShow: IColorSelectPanelRef<boolean>
 ) => {
   return (color: string) => {
-    res.value=color;
+    res.value = color
     hex.value = res.value
     triggerBg.value = res.value
     emit('confirm', res.value)
@@ -15,11 +18,15 @@ export const onConfirm = (
 }
 
 export const onCancel = (
-  res: IColorSelectPanelRef<string>, triggerBg: IColorSelectPanelRef<string>, emit, isShow: IColorSelectPanelRef<boolean>,
-  hex: IColorSelectPanelRef<string>, color: Color
+  res: IColorSelectPanelRef<string>,
+  triggerBg: IColorSelectPanelRef<string>,
+  emit,
+  isShow: IColorSelectPanelRef<boolean>,
+  hex: IColorSelectPanelRef<string>,
+  color: Color
 ) => {
   return () => {
-    if (isShow.value){
+    if (isShow.value) {
       res.value = triggerBg.value
       hex.value = triggerBg.value
       color.reset(hex.value)

packages/renderless/src/color-picker/utils/color.ts

@@ -10,7 +10,10 @@ function hexToRgb(hex: string) {
 const normalizeHexColor = (color: string) => {
   let normalizedColor: string = color.replace('#', '')
   if (normalizedColor.length === 3) {
-    normalizedColor = normalizedColor.split('').map(char => char + char).join('')
+    normalizedColor = normalizedColor
+      .split('')
+      .map((char) => char + char)
+      .join('')
   }
   normalizedColor = normalizedColor.padEnd(6, '0')
 
@@ -79,7 +82,9 @@ export default class Color {
     if (!this.enableAlpha) {
       return hsv(this.h, this.s, this.v).hex().toString()
     }
-    return hsv(this.h, this.s, this.v, this.a / 100).hexa().toString()
+    return hsv(this.h, this.s, this.v, this.a / 100)
+      .hexa()
+      .toString()
   }
 
   /**