fix: 修复alpha只显示0和1的问题

Qiu-Jun · May 12, 2023 · 0470c0f · 0470c0f
1 parent 5027990
commit 0470c0f
Show file tree

Hide file tree

Showing 21 changed files with 202 additions and 67 deletions.
diff --git a/lib/README.md b/lib/README.md
@@ -0,0 +1,120 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author: June
+ * @Date: 2023-03-17 22:02:02
+ * @LastEditors: June
+ * @LastEditTime: 2023-05-10 16:13:15
+-->
+
+## color-gradient-picker-vue3
+
+Color and gradient picker for vue3.js. [If you use vue2， plese use color-gradient-picker](https://github.com/arthay/vue-color-gradient-picker).color-gradient-picker-vue3 is an upgraded version of `color-gradient-picker`
+
+#### Usage
+
+```bash
+yarn add color-gradient-picker-vue3
+# or npm install color-gradient-picker-vue3 or pnpm install color-gradient-picker-vue3
+```
+
+#### Demo
+
+```html
+<template>
+    <div>
+        <ColorPicker
+            :is-gradient="true"
+            :on-start-change="(color) => onChange(color, 'start')"
+            :on-change="(color) => onChange(color, 'change')"
+            :on-end-change="(color) => onChange(color, 'end')"
+        />
+    </div>
+</template>
+
+<script setup>
+    import { ref } from 'vue';
+    import ColorPicker from 'color-gradient-picker-vue3';
+    import 'color-gradient-picker-vue3/dist/style.css';
+
+    const color = ref({
+        red: 255,
+        green: 0,
+        blue: 0,
+        alpha: 1,
+    });
+
+    const onChange = (attrs, name) => {
+        color.value = { ...attrs };
+    };
+</script>
+```
+
+#### ts Demo
+
+```html
+<template>
+    <div>
+        <ColorPicker
+            :is-gradient="true"
+            :on-start-change="(color) => onChange(color, 'start')"
+            :on-change="(color) => onChange(color, 'change')"
+            :on-end-change="(color) => onChange(color, 'end')"
+        />
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    import type { Ref } from 'vue';
+    import ColorPicker from 'color-gradient-picker-vue3';
+    import 'color-gradient-picker-vue3/dist/style.css';
+    interface IPoitItem {
+        alpha?: number | string;
+        blue?: number | string;
+        green?: number | string;
+        left?: number | string;
+        red?: number | string;
+    }
+
+    interface Iattrs {
+        degree: number;
+        points: [IPoitItem];
+        style: string;
+        type: string;
+    }
+
+    const color: Ref<IPoitItem | Iattrs> = ref({
+        red: 255,
+        green: 0,
+        blue: 0,
+        alpha: 1,
+    });
+
+    const onChange = (attrs: Iattrs, name: string) => {
+        color.value = { ...attrs };
+    };
+</script>
+```
+
+#### 启动 lib
+
+```bash
+# 安装依赖
+pnpm install
+
+# 启动lib(根目录或者lib下)
+pnpm dev
+
+# 预览packages的子项目
+# 根目录
+pnpm predev
+# 子项目下
+pnpm dev
+```
+
+#### Todo
+
+-   [x] 支持 monorepo
+
+-   [ ] fix to typescript
diff --git a/lib/components/ColorPicker/Area/Alpha/index.vue b/lib/components/ColorPicker/Area/Alpha/index.vue
@@ -3,7 +3,7 @@
  * @Description: 
  * @Date: 2023-04-08 22:26:19
  * @LastEditors: June
- * @LastEditTime: 2023-05-07 23:59:49
+ * @LastEditTime: 2023-05-12 22:37:47
 -->
 <template>
     <div class="alpha" @mousedown="state.mouseEvents">

diff --git a/lib/components/ColorPicker/Area/index.vue b/lib/components/ColorPicker/Area/index.vue
@@ -4,7 +4,7 @@
  * @Author: June
  * @Date: 2023-03-19 19:23:05
  * @LastEditors: June
- * @LastEditTime: 2023-04-28 11:25:47
+ * @LastEditTime: 2023-05-10 16:43:02
 -->
 <template>
     <div class="picker-area">

diff --git a/lib/components/ColorPicker/Gradient/index.vue b/lib/components/ColorPicker/Gradient/index.vue
@@ -4,15 +4,14 @@
  * @Author: June
  * @Date: 2023-03-19 20:10:11
  * @LastEditors: June
- * @LastEditTime: 2023-05-08 16:40:25
+ * @LastEditTime: 2023-05-12 22:58:54
 -->
 <template>
     <GradientControls
         :type="state.gradientType"
         :degree="state.gradientDegree"
         :change-gradient-control="changeGradientControl"
     />
-
     <Area
         :red="state.colorRed"
         :green="state.colorGreen"

diff --git a/lib/components/ColorPicker/Preview/RGB/RGBItem/index.vue b/lib/components/ColorPicker/Preview/RGB/RGBItem/index.vue
@@ -4,7 +4,7 @@
  * @Author: June
  * @Date: 2023-03-19 18:41:58
  * @LastEditors: June
- * @LastEditTime: 2023-05-08 00:04:06
+ * @LastEditTime: 2023-05-12 23:12:55
 -->
 <template>
     <div>

diff --git a/lib/components/ColorPicker/Preview/RGB/index.vue b/lib/components/ColorPicker/Preview/RGB/index.vue
@@ -4,7 +4,7 @@
  * @Author: June
  * @Date: 2023-03-19 18:24:48
  * @LastEditors: June
- * @LastEditTime: 2023-05-08 00:02:28
+ * @LastEditTime: 2023-05-12 23:01:07
 -->
 <template>
     <RGBItem
@@ -26,7 +26,7 @@
         :on-change="(value) => changeValue('blue', value)"
     />
     <RGBItem
-        :value="~~props.alpha * 100"
+        :value="props.alpha * 100"
         type="number"
         label="Alpha"
         :on-change="(value) => changeValue('alpha', value)"

diff --git a/lib/components/ColorPicker/Preview/index.vue b/lib/components/ColorPicker/Preview/index.vue
@@ -3,7 +3,7 @@
  * @Description: 
  * @Date: 2023-04-08 22:26:19
  * @LastEditors: June
- * @LastEditTime: 2023-04-28 09:59:08
+ * @LastEditTime: 2023-05-10 16:34:46
 -->
 <template>
     <div class="color-preview-area">

diff --git a/lib/components/ColorPicker/Solid/index.vue b/lib/components/ColorPicker/Solid/index.vue
@@ -129,7 +129,6 @@ const updateColor = (
     hue = getRightValue(hue, state.colorHue);
     saturation = getRightValue(saturation, state.colorSaturation);
     value = getRightValue(value, state.colorValue);
-
     state.colorRed = red;
     state.colorGreen = green;
     state.colorBlue = blue;

diff --git a/lib/components/ColorPicker/index.vue b/lib/components/ColorPicker/index.vue
@@ -4,10 +4,11 @@
  * @Author: June
  * @Date: 2023-03-18 00:57:49
  * @LastEditors: June
- * @LastEditTime: 2023-04-28 11:49:51
+ * @LastEditTime: 2023-05-12 22:31:38
 -->
 <template>
     <div class="ui-color-picker">
+        <!-- 渐变picker -->
         <Gradient
             v-if="props.isGradient"
             :points="props.gradient.points"
@@ -18,6 +19,7 @@
             :on-end-change="props.onEndChange"
         />
 
+        <!-- 非渐变Picker -->
         <Solid
             v-else
             :red="props.color.red"

diff --git a/lib/components/Input/index.vue b/lib/components/Input/index.vue
@@ -4,7 +4,7 @@
  * @Author: June
  * @Date: 2023-03-23 22:20:33
  * @LastEditors: June
- * @LastEditTime: 2023-05-08 16:24:46
+ * @LastEditTime: 2023-05-12 23:12:41
 -->
 <template>
     <div :class="`input-field ${props.classes}`">
@@ -24,15 +24,15 @@
 </template>
 
 <script lang="ts" setup name="Input">
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 
 interface Iprops {
     value: string | number;
     label: string;
     type?: string;
     classes: string;
-    onFocus?: void;
-    onBlur?: void;
+    onFocus?: () => void;
+    onBlur?: () => void;
 }
 
 const props = withDefaults(defineProps<Iprops>(), {
@@ -47,20 +47,13 @@ const props = withDefaults(defineProps<Iprops>(), {
 const emits = defineEmits(['input', 'update:value']);
 
 const value = computed({
-    get: () => props.value,
+    get: () => ~~props.value,
     set: (val) => emits('update:value', val),
 });
 
 const onInput = (e: InputEvent) => {
     emits('input', e);
 };
-
-// watch(
-//     () => [props.colorValue, value.value],
-//     (val) => {
-//         console.log(val);
-//     },
-// );
 </script>
 
 <style lang="scss" scoped>