refactor: [color-select-panel] color select panel

examples/sites/demos/pc/app/color-select-panel/base.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="changeVisible">Show Color select panel</tiny-button>
     <div style="position: relative">
-      <tiny-color-select-panel v-model="color" :visible="visible" @confirm="hidden" @cancel="hidden" />
+      <tiny-color-select-panel v-model="color" :visible="visible" @confirm="onConfirm" @cancel="hidden" />
     </div>
   </div>
 </template>
@@ -25,6 +25,10 @@ export default {
     changeVisible() {
       this.visible = !this.visible
     },
+    onConfirm(color) {
+      console.log(color)
+      this.hidden()
+    },
     hidden() {
       this.visible = false
     }

examples/sites/demos/pc/app/color-select-panel/color-composition-api.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <tiny-button @click="changeVisible">Show Color select panel</tiny-button>
+    <div style="position: relative">
+      <tiny-color-select-panel
+        v-model="color"
+        :visible="visible"
+        @color-update="onColorUpdate"
+        @confirm="onConfirm"
+        @cancel="hidden"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { TinyColorSelectPanel, TinyButton, TinyNotify } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const color = ref('#66ccff')
+const visible = ref(false)
+const changeVisible = () => {
+  visible.value = !visible.value
+}
+const hidden = () => {
+  visible.value = false
+}
+const onConfirm = () => {
+  hidden()
+}
+const onColorUpdate = () => {
+  TinyNotify({
+    type: 'success',
+    position: 'top-right',
+    title: '用户更改了颜色'
+  })
+}
+</script>

examples/sites/demos/pc/app/color-select-panel/color-update.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <tiny-button @click="changeVisible">Show Color select panel</tiny-button>
+    <div style="position: relative">
+      <tiny-color-select-panel
+        v-model="color"
+        :visible="visible"
+        @color-update="onColorUpdate"
+        @confirm="onConfirm"
+        @cancel="hidden"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { TinyColorSelectPanel, TinyButton, TinyNotify } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyColorSelectPanel,
+    TinyButton
+  },
+  data() {
+    return {
+      color: '#66ccff',
+      visible: false
+    }
+  },
+  methods: {
+    changeVisible() {
+      this.visible = !this.visible
+    },
+    onConfirm() {
+      this.hidden()
+    },
+    hidden() {
+      this.visible = false
+    },
+    onColorUpdate() {
+      TinyNotify({
+        type: 'success',
+        position: 'top-right',
+        title: '用户更改了颜色'
+      })
+    }
+  }
+}
+</script>

examples/sites/demos/pc/app/color-select-panel/event.spec.ts

@@ -6,6 +6,5 @@ test('事件触发', async ({ page }) => {
   const demo = await page.locator('#event')
   await demo.getByRole('button', { name: 'Show Color select panel' }).click()
   await demo.getByRole('button', { name: '取消' }).click()
-  expect(page.locator('.tiny-notify')).toHaveText('用户点击了取消')
-  await page.locator('.tiny-notify__icon-close > .tiny-svg').click()
+  expect(page.getByText('用户点击了取消').first()).not.toBeNull()
 })

examples/sites/demos/pc/app/color-select-panel/history-composition-api.vue

@@ -17,27 +17,16 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TinyColorSelectPanel, TinyButton, TinyNotify } from '@opentiny/vue'
+import { TinyColorSelectPanel, TinyButton } from '@opentiny/vue'
 
 const color = ref('#66ccff')
 const visible = ref(false)
 const changeVisible = () => (visible.value = !visible.value)
 const hidden = () => (visible.value = false)
 const onConfirm = (msg) => {
-  TinyNotify({
-    type: 'success',
-    position: 'top-right',
-    title: '用户点击了选择',
-    message: msg
-  })
   hidden()
 }
 const onCancel = () => {
-  TinyNotify({
-    type: 'error',
-    position: 'top-right',
-    title: '用户点击了取消'
-  })
   hidden()
 }
 const history = ref(['#66ccff'])

examples/sites/demos/pc/app/color-select-panel/history.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { TinyColorSelectPanel, TinyButton, TinyNotify } from '@opentiny/vue'
+import { TinyColorSelectPanel, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
@@ -39,20 +39,9 @@ export default {
       this.visible = false
     },
     onConfirm(msg) {
-      TinyNotify({
-        type: 'success',
-        position: 'top-right',
-        title: '用户点击了选择',
-        message: msg
-      })
       this.hidden()
     },
     onCancel() {
-      TinyNotify({
-        type: 'error',
-        position: 'top-right',
-        title: '用户点击了取消'
-      })
       this.hidden()
     },
     randomHex() {

examples/sites/demos/pc/app/color-select-panel/predefine-composition-api.vue

@@ -18,27 +18,16 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TinyColorSelectPanel, TinyButton, TinyNotify } from '@opentiny/vue'
+import { TinyColorSelectPanel, TinyButton } from '@opentiny/vue'
 
 const color = ref('#66ccff')
 const visible = ref(false)
 const changeVisible = () => (visible.value = !visible.value)
 const hidden = () => (visible.value = false)
-const onConfirm = (msg) => {
-  TinyNotify({
-    type: 'success',
-    position: 'top-right',
-    title: '用户点击了选择',
-    message: msg
-  })
+const onConfirm = () => {
   hidden()
 }
 const onCancel = () => {
-  TinyNotify({
-    type: 'error',
-    position: 'top-right',
-    title: '用户点击了取消'
-  })
   hidden()
 }
 const randomHex = () =>

examples/sites/demos/pc/app/color-select-panel/predefine.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <p>{{ color }}</p>
     <tiny-button @click="changeVisible">Show Color select panel</tiny-button>
     <tiny-button @click="addPredefineColor">Append predefine color</tiny-button>
     <tiny-button @click="popPredefineColor">Pop predefine color</tiny-button>
@@ -17,7 +18,7 @@
 </template>
 
 <script>
-import { TinyColorSelectPanel, TinyButton, TinyNotify } from '@opentiny/vue'
+import { TinyColorSelectPanel, TinyButton } from '@opentiny/vue'
 
 export default {
   components: {
@@ -39,20 +40,9 @@ export default {
       this.visible = false
     },
     onConfirm(msg) {
-      TinyNotify({
-        type: 'success',
-        position: 'top-right',
-        title: '用户点击了选择',
-        message: msg
-      })
       this.hidden()
     },
     onCancel() {
-      TinyNotify({
-        type: 'error',
-        position: 'top-right',
-        title: '用户点击了取消'
-      })
       this.hidden()
     },
     randomHex() {

examples/sites/demos/pc/app/color-select-panel/webdoc/color-select-panel.js

@@ -65,6 +65,20 @@ export default {
           'By<code>predefine</code>predefined color values, user behavior does not change the predefined colors, but they can be changed externally.'
       },
       codeFiles: ['predefine.vue']
+    },
+    {
+      demoId: 'colorUpdate',
+      name: {
+        'zh-CN': '颜色修改事件',
+        'en-US': 'Color update event'
+      },
+      desc: {
+        'zh-CN':
+          '通过<code>@color-update</code>来监听颜色修改事件, 注意: 只在颜色修改时会触发改事件, 例如拖拽光标或修改色相、透明度时',
+        'en-US':
+          'Listen for color modification events through<code>@color-update</code>. Note that the change event will only be triggered when the color is modified, such as when dragging the cursor or changing the hue or transparency'
+      },
+      codeFiles: ['color-update.vue']
     }
   ]
 }

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

@@ -1,23 +1,82 @@
-import type { IColorSelectPanelRef } from '@/types'
+import type { IColorSelectPanelAlphProps, IColorSelectPanelRef, ISharedRenderlessParamHooks } from '@/types'
+import type { Color } from '../utils/color'
+import { getClientXY } from '../utils/getClientXY'
 
-export const calcLeftByAlpha = (wrapper: HTMLElement, thumb: HTMLElement, alpha: number) => {
-  return Math.round((alpha * (wrapper.offsetWidth - thumb.offsetWidth / 2)) / 100)
+type State = ReturnType<typeof initState>
+
+export const initState = ({ ref, reactive }: ISharedRenderlessParamHooks) => {
+  const background = ref('')
+  const left = ref(0)
+  const state = reactive({ background, left })
+  return state
 }
 
-export const updateThumb = (alpha: number, thumb: HTMLElement, wrapper: HTMLElement) => {
-  thumb.style.left = `${calcLeftByAlpha(wrapper, thumb, alpha)}px`
+export const useEvent = (
+  state: State,
+  slider: IColorSelectPanelRef<HTMLElement | undefined>,
+  alphaWrapper: IColorSelectPanelRef<HTMLElement | undefined>,
+  alphaThumb: IColorSelectPanelRef<HTMLElement | undefined>,
+  props: IColorSelectPanelAlphProps<Color>
+) => {
+  const onDrag = (event: MouseEvent | TouchEvent) => {
+    if (!slider.value || !alphaThumb.value) {
+      return
+    }
+    const el = alphaWrapper.value!
+    const rect = el.getBoundingClientRect()
+    const { clientX } = getClientXY(event)
+    let left = clientX - rect.left
+    left = Math.max(alphaThumb.value.offsetWidth / 2, left)
+    left = Math.min(left, rect.width - alphaThumb.value.offsetWidth / 2)
+    const alpha = Math.round(
+      ((left - alphaThumb.value.offsetWidth / 2) / (rect.width - alphaThumb.value.offsetWidth)) * 100
+    )
+    props.color.set('alpha', alpha)
+  }
+  const onClick = (event: MouseEvent | TouchEvent) => {
+    if (event.target !== alphaThumb.value) {
+      onDrag(event)
+    }
+  }
+  const getLeft = () => {
+    const thumb = alphaThumb.value
+    if (!thumb) {
+      return 0
+    }
+    const el = alphaWrapper.value
+    if (!el) {
+      return 0
+    }
+    const alpha = props.color.get('alpha')
+    return (alpha * (el.offsetWidth - thumb.offsetWidth / 2)) / 100
+  }
+  const getBackground = () => {
+    if (props.color && props.color.value) {
+      const { r, g, b } = props.color.toRgb()
+      return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`
+    }
+    return ''
+  }
+  const update = () => {
+    state.left = getLeft()
+    state.background = getBackground()
+  }
+  return { onDrag, onClick, update }
 }
 
-export const onDrag = (
-  event: MouseEvent,
-  bar: IColorSelectPanelRef<HTMLElement>,
-  thumb: IColorSelectPanelRef<HTMLElement>,
-  alpha: IColorSelectPanelRef<number>
+export const initWatch = (
+  props: IColorSelectPanelAlphProps<Color>,
+  update: () => void,
+  { watch }: ISharedRenderlessParamHooks
 ) => {
-  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)
+  watch(
+    () => props.color.get('alpha'),
+    () => update(),
+    { deep: true }
+  )
+  watch(
+    () => props.color,
+    () => update(),
+    { deep: true }
+  )
 }