fix(color-picker): auto flip (#4187)

* fix(color-picker): auto flip

* fix(color-picker): e2e test

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

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 test('渐变', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-picker#color-mode')
-  await page.locator('.tiny-color-picker > .tiny-color-picker__inner').click()
+  await page.locator('.tiny-color-picker .tiny-color-picker__inner').click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(page.locator('body')).toContainText('linear-gradient(90deg, #66ADFF 21%,#00FEF1 100%)')
-  await page.locator('.tiny-notify__icon-close > .tiny-svg').click()
+  await page.locator('.tiny-notify__icon-close .tiny-svg').click()
 })

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

@@ -51,6 +51,11 @@
     }
   }
 
+  &__popper {
+    padding: 0 !important;
+    background: transparent !important;
+  }
+
   &--large &__inner {
     border-radius: 4px;
   }

packages/theme/src/color-select-panel/index.less

@@ -7,11 +7,9 @@
   .inject-ColorSelectPanel-vars();
   display: flex;
   flex-direction: column;
-  position: absolute;
   position: relative;
   min-width: 320px;
   z-index: 10;
-  margin-top: 8px;
   background: var(--tv-ColorSelectPanel-bg-color);
   gap: var(--tv-ColorSelectPanel-spacing);
   padding: var(--tv-ColorSelectPanel-padding-y) var(--tv-ColorSelectPanel-padding-x);

packages/vue/src/color-picker/package.json

@@ -9,6 +9,7 @@
     "@opentiny/vue-color-select-panel": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
+    "@opentiny/vue-popover": "workspace:^",
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-theme": "workspace:~"
   },

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

@@ -8,15 +8,17 @@
     ]"
     @click="() => changeVisible(!state.isShow)"
   >
-    <div
-      class="tiny-color-picker__inner"
-      :style="{
-        background: state.hex ?? ''
-      }"
-    >
-      <IconChevronDown />
-    </div>
-    <Transition name="tiny-zoom-in-top">
+    <tiny-popover v-model="state.isShow" trigger="manual" popper-class="tiny-color-picker__popper">
+      <template #reference>
+        <div
+          class="tiny-color-picker__inner"
+          :style="{
+            background: state.hex ?? ''
+          }"
+        >
+          <IconChevronDown />
+        </div>
+      </template>
       <color-select
         @confirm="onConfirm"
         @cancel="onCancel"
@@ -27,13 +29,16 @@
         :history="state.stack"
         :format="format"
         :style="{
-          'min-width': '330px'
+          'width': '330px'
         }"
         :color-mode="$props.colorMode"
         :enable-history="state.enableHistory"
         :enable-predefine-color="state.enablePredefineColor"
       />
-    </Transition>
+      <!-- <Transition name="tiny-zoom-in-top">
+        
+      </Transition> -->
+    </tiny-popover>
   </div>
 </template>
 
@@ -42,6 +47,7 @@ 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 TinyPopover from '@opentiny/vue-popover'
 import '@opentiny/vue-theme/color-picker/index.less'
 
 export default defineComponent({
@@ -60,6 +66,7 @@ export default defineComponent({
     'colorMode'
   ],
   components: {
+    TinyPopover,
     IconChevronDown: IconChevronDown(),
     ColorSelect: colorSelect
   },