feat(color-picker): add placement prop

examples/sites/demos/apis/color-picker.js

@@ -119,6 +119,20 @@ export default {
           meta: {
             stable: '3.27.0'
           }
+        },
+        {
+          name: 'placement',
+          type: 'top | bottom',
+          defaultValue: 'bottom',
+          desc: {
+            'zh-CN': '定义颜色选择器的弹出位置',
+            'en-US': 'Define the pop-up position of the color selector'
+          },
+          mode: ['pc'],
+          pcDemo: 'placement',
+          meta: {
+            stable: '3.27.0'
+          }
         }
       ],
       events: [

examples/sites/demos/pc/app/color-picker/placement.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+
+test('placement', async ({ page }) => { 
+    // 测试
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.locator('#placement').selectOption('top')
+    await expect(page.locator('.t-color-picker__panel')).toHaveCSS('top', '0px')
+    await page.locator('#placement').selectOption('bottom')
+    await expect(page.locator('.t-color-picker__panel')).toHaveCSS('top', 'auto')
+})

examples/sites/demos/pc/app/color-picker/placement.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <tiny-color-picker v-model="color" placement="top" />
+    <tiny-color-picker v-model="color"/>
+  </div>
+</template>
+
+<script>
+import { TinyColorPicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyColorPicker
+  },
+  data() {
+    return {
+      color: '#66ccff'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-margin {
+  margin: 8px 0;
+}
+</style>

examples/sites/demos/pc/app/color-picker/webdoc/color-picker.js

@@ -241,6 +241,19 @@ export default {
       },
       apis: ['color-mode'],
       demos: ['color-mode']
+    },
+    {
+      id: 'placement',
+      name: '显示位置',
+      support: {
+        value: true
+      },
+      description: '通过 placement 属性来定义颜色选择器的显示位置',
+      cloud: {
+        value: false
+      },
+      apis: ['placement'],
+      demos: ['placement']
     }
   ]
 }

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

@@ -63,11 +63,17 @@ export const renderless = (props, ctx: ISharedRenderlessParamHooks, { emit }: IS
   )
   const changeVisible = toggleVisible(isShow)
   const { onConfirm, onCancel } = useEvent(state, emit, changeVisible, color)
+
+   // 根据 placement 决定动画方向
+    const transitionName = () => {
+      return props.placement === 'top' ? 'tiny-zoom-in-bottom' : 'tiny-zoom-in-top'
+    }
   const api = {
     state,
     changeVisible,
     onConfirm,
-    onCancel
+    onCancel,
+    transitionName
   }
   return api
 }

packages/theme/src/color-picker/index.less

@@ -66,4 +66,20 @@
   &--mini &__inner {
     border-radius: 2px;
   }
+
+  &__dropdown {
+    position: absolute;
+  }
+
+  &__dropdown--bottom {
+    top: 100%;
+    left: 0;
+    margin-top: 8px;
+  }
+
+  &__dropdown--top {
+    bottom: 100%;
+    left: 0;
+    margin-bottom: 8px;
+  }
 }

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

@@ -52,6 +52,13 @@ export default defineComponent({
       validator(val: string) {
         return ['monochrome', 'linear-gradient'].includes(val)
       }
+    },
+    placement:{
+      type: String,
+      default: 'bottom',
+      validator(val: string) {
+        return ['top', 'bottom'].includes(val)
+      }
     }
   },
   setup(props, context) {

packages/vue/src/color-picker/src/pc.vue

@@ -1,50 +1,53 @@
 <template>
   <div
     :class="[
-      {
-        'tiny-color-picker': true
-      },
+      { 'tiny-color-picker': true },
       state.size ? 'tiny-color-picker--' + state.size : ''
     ]"
     @click="() => changeVisible(!state.isShow)"
   >
     <div
       class="tiny-color-picker__inner"
-      :style="{
-        background: state.hex ?? ''
-      }"
+      :style="{ background: state.hex ?? '' }"
     >
       <IconChevronDown />
     </div>
-    <Transition name="tiny-zoom-in-top">
-      <color-select
-        @confirm="onConfirm"
-        @cancel="onCancel"
-        v-model="state.hex"
-        :visible="state.isShow"
-        :alpha="alpha"
-        :predefine="state.predefineStack"
-        :history="state.stack"
-        :format="format"
-        :style="{
-          'min-width': '330px'
-        }"
-        :color-mode="$props.colorMode"
-        :enable-history="state.enableHistory"
-        :enable-predefine-color="state.enablePredefineColor"
-      />
+
+    <!-- 根据 placement 设置弹出位置 -->
+    <Transition :name="transitionName">
+      <div
+        class="tiny-color-picker__dropdown"
+        :class="`tiny-color-picker__dropdown--${placement}`"
+        v-show="state.isShow"
+      >
+        <color-select
+          @confirm="onConfirm"
+          @cancel="onCancel"
+          v-model="state.hex"
+          :visible="state.isShow"
+          :alpha="alpha"
+          :predefine="state.predefineStack"
+          :history="state.stack"
+          :format="format"
+          :style="{ 'min-width': '330px' }"
+          :color-mode="$props.colorMode"
+          :enable-history="state.enableHistory"
+          :enable-predefine-color="state.enablePredefineColor"
+        />
+      </div>
     </Transition>
   </div>
 </template>
-
+ 
 <script>
 import { renderless, api } from '@opentiny/vue-renderless/color-picker/vue'
 import { props, setup, defineComponent } from '@opentiny/vue-common'
 import { IconChevronDown } from '@opentiny/vue-icon'
 import colorSelect from '@opentiny/vue-color-select-panel'
 import '@opentiny/vue-theme/color-picker/index.less'
-
+ 
 export default defineComponent({
+  name: 'TinyColorPicker',
   emits: ['update:modelValue', 'confirm', 'cancel'],
   props: [
     ...props,
@@ -57,14 +60,17 @@ export default defineComponent({
     'format',
     'enableHistory',
     'enablePredefineColor',
-    'colorMode'
+    'colorMode',
+    'placement'
   ],
   components: {
     IconChevronDown: IconChevronDown(),
     ColorSelect: colorSelect
   },
   setup(props, context) {
-    return setup({ props, context, renderless, api })
+    const state = setup({ props, context, renderless, api })
+    return { ...state }
   }
 })
 </script>
+