Merge pull request #300 from linx4200/dev/fix-issue-296

v3.0.3

Author: linx4200

demo/App.vue

@@ -1,3 +1,24 @@
+<script lang="ts">
+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(',');
+
+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 = {
+    r: invert(r, a),
+    g: invert(g, a),
+    b: invert(b, a),
+    a: a < 0.5 ? 1 - a : a
+  };
+  return `rgba(${inverted.r}, ${inverted.g}, ${inverted.b}, ${inverted.a})`;
+}
+
+const hasInitialColor = !!searchParams.hex;
+const initialColor = `#${searchParams.hex ?? 'F5F7FA'}`;
+</script>
+
 <script setup lang="ts">
 import { watch, computed, reactive } from 'vue';
 
@@ -18,25 +39,30 @@ import {
 
 // import '../dist/vue-color.css'
 
+const showStatus: Record<(typeof pickers)[number], boolean> = {} as Record<(typeof pickers)[number], boolean>;
+pickers.forEach((picker) => {
+  if (!manualEnabledPickers || manualEnabledPickers.length === 0) {
+    showStatus[picker] = true;
+  } else {
+    showStatus[picker] = manualEnabledPickers.indexOf(picker) > -1;
+  }
+});
+
 const tinyColor = defineModel('tinyColor', {
-  default: tinycolor('#F5F7FA')
+  default: tinycolor(initialColor)
 });
 
 const color = defineModel({
-  default: () => reactive({r: 0, g: 0, b: 255, a: 1})
+  default: () => {
+    if (hasInitialColor) {
+      return initialColor;
+    }
+    // #F5F7FA
+    return reactive({r: 245, g: 247, b: 250, a: 1})
+  }
 });
 
-watch(tinyColor, () => console.log('color changed ==>', tinyColor.value));
-
-function invertColor(rgba: { r: number; g: number; b: number, a: number }): string {
-  const inverted = {
-    r: 255 - rgba.r,
-    g: 255 - rgba.g,
-    b: 255 - rgba.b,
-    a: rgba.a
-  };
-  return `rgba(${inverted.r}, ${inverted.g}, ${inverted.b}, ${inverted.a})`;
-}
+watch(color, () => console.log('changed ==>', color.value));
 
 const hex = computed(() => {
   return tinycolor(tinyColor.value).toHex8String();
@@ -69,11 +95,11 @@ const updateHue = (newHue: number) => {
   <div class="color-background" :style="[background]"></div>
   <div class="wrapper">
     <div>
-      <div class="title text" :style="{color: textColor}">
+      <div class="title text">
         <h1>Vue-color</h1><span class="tag">v3.0</span>
       </div>
 
-      <main class="intro text" :style="{color: textColor}">
+      <main class="intro text">
         A collection of efficient color pickers designed for modern web development.
         <ul class="feature-list text" :style="{color: textColor, opacity: 0.75}">
           <li>✅ Modular & Tree-Shakable</li>
@@ -95,64 +121,64 @@ const updateHue = (newHue: number) => {
     <div :style="{flex: 0.8}">
       <div class="row">
         <div class="col">
-          <div class="text current-color" :style="{color: textColor, opacity: 0.5}">
+          <div class="text current-color">
             {{ hex }}<br />
             {{ color }}<br />
             {{ hsva }}
           </div>
-          <div class="picker-container">
+          <div class="picker-container" v-if="showStatus.chrome">
             <ChromePicker v-model:tinyColor="tinyColor" v-model="color" />
-            <div class="picker-title text" :style="{color: textColor, opacity: 0.5}">&lt;ChromePicker /&gt;</div>
+            <div class="picker-title text">&lt;ChromePicker /&gt;</div>
           </div>
         </div>
 
-        <div class="picker-container">
+        <div class="picker-container" v-if="showStatus.sketch">
           <div><SketchPicker v-model:tinyColor="tinyColor" v-model="color" /></div>
-          <div class="picker-title text" :style="{color: textColor, opacity: 0.5}">&lt;SketchPicker /&gt;</div>
+          <div class="picker-title text">&lt;SketchPicker /&gt;</div>
         </div>
 
-        <div class="picker-container">
+        <div class="picker-container" v-if="showStatus.photoshop">
           <div><PhotoshopPicker v-model:tinyColor="tinyColor" v-model="color" /></div>
-          <div class="picker-title text" :style="{color: textColor, opacity: 0.5}">&lt;PhotoshopPicker /&gt;</div>
+          <div class="picker-title text">&lt;PhotoshopPicker /&gt;</div>
         </div>
       </div>
       <div class="row" :style="{marginTop: '5%'}">
         <div class="col">
-          <div class="picker-container">
+          <div class="picker-container" v-if="showStatus.compact">
             <div><CompactPicker v-model:tinyColor="tinyColor" v-model="color" /></div>
-            <div class="picker-title text" :style="{color: textColor, opacity: 0.5}">&lt;CompactPicker /&gt;</div>
+            <div class="picker-title text">&lt;CompactPicker /&gt;</div>
           </div>
-          <div class="picker-container">
+          <div class="picker-container" v-if="showStatus.grayscale">
             <div><GrayscalePicker v-model:tinyColor="tinyColor" v-model="color" /></div>
-            <div class="picker-title text" :style="{color: textColor, opacity: 0.5}">&lt;GrayscalePicker /&gt;</div>
+            <div class="picker-title text">&lt;GrayscalePicker /&gt;</div>
           </div>
-          <div class="picker-container">
+          <div class="picker-container" v-if="showStatus.material">
             <div><MaterialPicker v-model:tinyColor="tinyColor" v-model="color" /></div>
-            <div class="picker-title text" :style="{color: textColor, opacity: 0.5}">&lt;MaterialPicker /&gt;</div>
+            <div class="picker-title text">&lt;MaterialPicker /&gt;</div>
           </div>
         </div>
 
         <div class="col">
-          <div class="picker-container">
+          <div class="picker-container" v-if="showStatus.hue">
             <div :style="{width: '410px'}"><HueSlider :modelValue="hsva.h" @update:modelValue="updateHue" /></div>
-            <div class="picker-title text" :style="{color: textColor, opacity: 0.5}">&lt;HueSlider /&gt;</div>
+            <div class="picker-title text">&lt;HueSlider /&gt;</div>
           </div>
 
-          <div class="picker-container">
+          <div class="picker-container" v-if="showStatus.slider">
             <div><SliderPicker v-model:tinyColor="tinyColor" v-model="color" :alpha="true" /></div>
-            <div class="picker-title text" :style="{color: textColor, opacity: 0.5}">&lt;SliderPicker /&gt;</div>
+            <div class="picker-title text">&lt;SliderPicker /&gt;</div>
           </div>
 
-          <div class="picker-container">
+          <div class="picker-container" v-if="showStatus.twitter">
             <div><TwitterPicker v-model:tinyColor="tinyColor" v-model="color" /></div>
-            <div class="picker-title text" :style="{color: textColor, opacity: 0.5}">&lt;TwitterPicker /&gt;</div>
+            <div class="picker-title text">&lt;TwitterPicker /&gt;</div>
           </div>
         </div>
 
         <div class="col">
-          <div class="picker-container">
+          <div class="picker-container" v-if="showStatus.swatches">
             <div><SwatchesPicker v-model:tinyColor="tinyColor" v-model="color" /></div>
-            <div class="picker-title text" :style="{color: textColor, opacity: 0.5}">&lt;SwatchesPicker /&gt;</div>
+            <div class="picker-title text">&lt;SwatchesPicker /&gt;</div>
           </div>
         </div>
       </div>
@@ -166,6 +192,7 @@ const updateHue = (newHue: number) => {
   font-optical-sizing: auto;
   font-style: normal;
   font-variation-settings: "wdth" 100;
+  color: v-bind(textColor);
 }
 
 .placeholder {
@@ -260,6 +287,7 @@ const updateHue = (newHue: number) => {
 .picker-title {
   margin-top: 10px;
   font-size: 14px;
+  opacity: 0.5;
 }
 
 .current-color {

demo/utils.ts

@@ -0,0 +1,10 @@
+export function parseSearchParams(search: string): Record<string, string> {
+  const params = new URLSearchParams(search);
+  const result: Record<string, string> = {};
+
+  for (const [key, value] of params.entries()) {
+    result[key] = value;
+  }
+
+  return result;
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-color",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "type": "module",
   "files": [
     "dist"

package.json

@@ -1,6 +1,7 @@
 import { computed, type EmitFn } from 'vue';
 import tinycolor from 'tinycolor2';
 
+/** extracted from function `inputToRGB` of tinycolor2 */
 type TinyColorFormat = 'name' | 'hex8' | 'hex' | 'prgb' | 'rgb' | 'hsv' | 'hsl';
 
 const transformToOriginalInputFormat = (color: tinycolor.Instance, originalFormat?: TinyColorFormat, isObjectOriginally = false) => {
@@ -24,7 +25,13 @@ const transformToOriginalInputFormat = (color: tinycolor.Instance, originalForma
     }
   } else {
     // transform back to the original format
-    let newValue = color.toString(originalFormat);
+    // Only 'hex' with alpha needs to be handled specifically
+    // tinycolor2 handles alpha correctly for all other formats internally.
+    let format = originalFormat;
+    if (originalFormat === 'hex' && color.getAlpha() < 1) {
+      format = 'hex8';
+    }
+    let newValue = color.toString(format);
     try {
       newValue = JSON.parse(newValue);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -47,13 +54,16 @@ export function defineColorModel(props: useTinyColorModelProps, emit: EmitFn) {
 
   const tinyColorRef = computed({
     get: () => {
-      const colorInput = props.tinyColor ?? props.modelValue;
+      const { modelValue } = props;
+      const colorInput = props.tinyColor ?? modelValue;
       const value = tinycolor(colorInput);
       if (typeof originalFormat === 'undefined') {
-        originalFormat = value.getFormat() as TinyColorFormat;
+        if (typeof modelValue !== 'undefined') {
+          originalFormat = tinycolor(modelValue).getFormat() as TinyColorFormat;
+        }
       }
       if (typeof isObjectOriginally === 'undefined') {
-        if (typeof props.modelValue === 'object') {
+        if (typeof modelValue === 'object') {
           isObjectOriginally = true;
         }
       }

src/composable/colorModel.ts

@@ -134,11 +134,11 @@ test('change color by clicking preset color', async () => {
   expect((emitted()['update:modelValue'][0] as [string])[0]).toBe('#417505');
 
   await presetColors.last().click();
-  expect((emitted()['update:modelValue'][1] as [string])[0]).toBe('#000000');
+  expect((emitted()['update:modelValue'][1] as [string])[0]).toBe('#00000000');
 
   presetColors.nth(10).element().dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
   expect((emitted()['update:modelValue'][2] as [string])[0]).toBe('#b8e986');
 
   presetColors.last().element().dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
-  expect((emitted()['update:modelValue'][3] as [string])[0]).toBe('#000000');
+  expect((emitted()['update:modelValue'][3] as [string])[0]).toBe('#00000000');
 });