Merge pull request #307 from linx4200/dev/v3.1-vue2

Support Vue 2.7

Author: linx4200

.github/dependabot.yml

@@ -4,8 +4,9 @@ updates:
   - package-ecosystem: "npm"
     # Look for `package.json` and `lock` files in the `root` directory
     directory: "/"
-    schedule:
-      interval: "monthly"
+    # ❌ Removed schedule to prevent auto-trigger
+    # schedule:
+    #   interval: "monthly"
     labels:
       - "dependencies"
     groups:

.github/workflows/npm-publish.yml

@@ -37,6 +37,12 @@ jobs:
       - name: Build
         run: npm run build
 
+      - name: Install and build for Vue 2.7
+        working-directory: vue2
+        run: |
+          npm ci
+          npm run build
+
       - name: Publish package
         run: npm publish
         env:

.github/workflows/prerelease-check.yml

@@ -31,4 +31,10 @@ jobs:
         run: npm run build
 
       - name: Demo Build
-        run: npm run demo:build
+        run: npm run demo:build
+
+      - name: Install and build for Vue 2.7
+        working-directory: vue2
+        run: |
+          npm ci
+          npm run build

.github/workflows/test.yml

@@ -25,16 +25,23 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
 
-      - name: Install dependencies
+      - name: Install dependencies (root)
         run: npm ci
 
       - name: Install Playwright browsers
         run: npx playwright install
 
-      - name: Run tests
+      - name: Run root tests
         run: npm run coverage
 
+      - name: Install and run Vue 2.7 tests
+        working-directory: vue2
+        run: |
+          npm ci
+          npm run test
+
       - name: Upload results to Codecov
         uses: codecov/codecov-action@v5
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
+

README.md

@@ -5,11 +5,10 @@
   <a href="https://github.com/linx4200/vue-color"><img src="https://img.shields.io/github/stars/linx4200/vue-color?style=social" alt="Github stars" /></a>
 </p>
 
-![Vue 3](https://img.shields.io/badge/Vue-3.0-brightgreen)
 ![Package Size](https://img.shields.io/bundlephobia/minzip/vue-color)
 ![Test Coverage](https://codecov.io/gh/linx4200/vue-color/branch/main/graph/badge.svg)
 
-A collection of efficient and customizable color pickers built with [Vue 3](https://vuejs.org/), designed for modern web development.
+A collection of efficient and customizable color pickers, designed for modern web development.
 
 ## 🧪 Live Demo
 
@@ -19,6 +18,8 @@ Explore the components in action: 👉 [Open Live Demo](https://linx4200.github.
 
 ## ✨ Features
 
+- **Dual Vue Compatibility** – Supports both Vue 2.7 and Vue 3 out of the box
+
 - **Modular & Tree-Shakable** – Import only what you use
 
 - **TypeScript Ready** – Full typings for better DX
@@ -68,6 +69,8 @@ const color = defineModel({
 </script>
 ```
 
+If you plan to use `vue-color` with Vue 2.7, please refer to [Use with Vue 2.7](#use-with-vue-27).
+
 > 📘 For a full list of available components, see the [Documentation](#all-available-pickers).
 
 ## 📚 Documentation
@@ -166,7 +169,7 @@ Since `vue-color` relies on DOM interaction, components must be rendered client-
 
 <script setup lang="ts">
 import { ClientOnly } from '#components';
-import {ChromePicker } from 'vue-color';
+import { ChromePicker } from 'vue-color';
 </script>
 ```
 
@@ -180,6 +183,65 @@ By default, `vue-color` uses CSS variables defined under the :root scope. To ena
 </html>
 ```
 
+### Use with Vue 2.7
+
+To use `vue-color` with Vue 2.7:
+
+```vue
+<template>
+  <ChromePicker v-model="color" />
+</template>
+
+<script>
+import { ref } from 'vue'
+// Note: use the Vue 2.7 specific entry point
+import { ChromePicker } from 'vue-color/vue2'
+
+export default {
+  setup() {
+    const color = ref('#5c8f94');
+    return { color };
+  }
+}
+</script>
+```
+
+The Vue 2.7 build is fully compatible with the Vue Composition API introduced in 2.7.
+
+Make sure to use `vue-color/vue2` as the import path, and include the correct stylesheet:
+import `vue-color/vue2/style.css` in your main entry file.
+
+#### TypeScript Support in Vue 2.7
+
+Vue 2.7 has full TypeScript support, but `vue-color` does **not include type declarations** for the Vue 2.7 build.
+
+You can work around this by manually adding the following shim:
+
+```ts
+// vue-color-shims.d.ts
+declare module 'vue-color/vue2' {
+  import { Component } from 'vue';
+  import tinycolor from 'tinycolor2';
+
+  export const ChromePicker: Component;
+  export const SketchPicker: Component;
+  export const PhotoshopPicker: Component;
+  export const CompactPicker: Component;
+  export const GrayscalePicker: Component;
+  export const MaterialPicker: Component;
+  export const SliderPicker: Component;
+  export const TwitterPicker: Component;
+  export const SwatchesPicker: Component;
+  export const HueSlider: Component;
+  export const tinycolor: typeof tinycolor;
+}
+
+declare module '*.css' {
+  const content: { [className: string]: string };
+  export default content;
+}
+```
+
 ## 🧩 FAQ / Issue Guide
 
 | Error / Symptom | Related Issue |

demo/App.vue

@@ -1,12 +1,12 @@
 <script lang="ts">
+const DEFAULT_COLOR = 'F5F7FA';
+const DEFAULT_COLOR_DARK = '#004035';
+
 import { parseSearchParams } from './utils';
 const pickers = ['chrome', 'sketch', 'photoshop', 'compact', 'grayscale', 'material', 'slider', 'twitter', 'swatches', 'hue'] as const;
 const searchParams = parseSearchParams(location.search);
 const manualEnabledPickers = searchParams.picker?.split(',');
 
-const DEFAULT_COLOR = 'F5F7FA';
-const DEFAULT_COLOR_DARK = '#004035';
-
 function invertColor({ r, g, b, a}: { r: number; g: number; b: number, a: number }): string {
   const invert = (val: number, alpha: number) => alpha === 0 ? 0 : 255 - val;
   const inverted = {
@@ -108,6 +108,7 @@ const onModeChange = (isDark: boolean) => {
       <main class="intro text">
         A collection of efficient color pickers designed for modern web development.
         <ul class="feature-list text">
+          <li>✅ Supports both Vue 2.7 and Vue 3</li>
           <li>✅ Modular & Tree-Shakable</li>
           <li>✅ TypeScript Ready</li>
           <li>✅ SSR-Friendly</li>

demo/vite.config.ts

@@ -1,8 +1,11 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue()],
-  base: 'https://linx4200.github.io/vue-color/'
+  base: 'https://linx4200.github.io/vue-color/',
+  define: {
+    __IS_DEBUG__: !!process.env.VITE_DEBUG
+  },
 })