feat: add props lang

Author: aesoper101

.storybook/main.js

@@ -1,4 +1,4 @@
-// const path = require("path");
+const path = require("path");
 module.exports = {
   async viteFinal(config, { configType }) {
     if (configType === "DEVELOPMENT") {
@@ -10,6 +10,8 @@ module.exports = {
         port: 443,
         protocol: "ws",
       };
+    } else {
+      config.base = "/vue3-colorpicker/";
     }
     // return the customized config
     return config;

README.ZH-cn.md

@@ -6,7 +6,7 @@
 
 [在线 demo 演示](https://aesoper101.github.io/vue3-colorpicker/)
 
-[English](./README.md)
+[English](https://github.com/aesoper101/vue3-colorpicker/blob/main/README.md)
 
 ## 安装
 

README.md

@@ -6,7 +6,7 @@ Note: This document is for Vue3ColorPicker v2. If you are looking for an older v
 
 [Live Demo](https://aesoper101.github.io/vue3-colorpicker/)
 
-[中文文档](./README.ZH-cn.md)
+[中文文档](https://github.com/aesoper101/vue3-colorpicker/blob/main/README.ZH-cn.md)
 
 ## Installation
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-colorpicker",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "main": "dist/index.es.js",
   "types": "dist/types/index.d.ts",
   "author": "aesoper",
@@ -24,9 +24,10 @@
     "pub": "cd dist && npm publish --registry=https://registry.npmjs.org --access public && cd ..",
     "unpub": "npm unpublish vue3-colorpicker --force --registry=https://registry.npmjs.org",
     "prelink": "cd dist && yarn link && cd .. && yarn link vue3-colorpicker",
-    "deploy": "rimraf dist && yarn build && gh-pages -d dist",
+    "deploy": "gh-pages -d storybook-static",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "rimraf storybook-static && build-storybook",
+    "reinstall": "rimraf node_modules && yarn install"
   },
   "dependencies": {
     "@aesoper/normal-utils": "^0.1.5",

packages/ColorPicker.vue

@@ -30,7 +30,15 @@
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, ExtractPropTypes, PropType, reactive, ref } from "vue";
+  import {
+    computed,
+    defineComponent,
+    ExtractPropTypes,
+    PropType,
+    provide,
+    reactive,
+    ref,
+  } from "vue";
   import FkColorPicker from "./fk/FkColorPicker.vue";
   import ChromeColorPicker from "./chrome/ChromeColorPicker.vue";
   import GradientColorPicker from "./gradient/GradientColorPicker.vue";
@@ -41,6 +49,7 @@
   import { onClickOutside, tryOnMounted, whenever } from "@vueuse/core";
   import { createPopper } from "@popperjs/core";
   import { GradientNode, parse, stringify } from "gradient-parser";
+  import { ColorPickerProvider, ColorPickerProviderKey, SupportLang } from "./utils/type";
 
   const colorPickerProps = {
     isWidget: propTypes.bool.def(false),
@@ -60,6 +69,10 @@
     roundHistory: propTypes.bool.def(false),
     useType: propTypes.oneOf(["single", "gradient", "both"]).def("single"),
     activeKey: propTypes.oneOf(["single", "gradient"]).def("single"),
+    lang: {
+      type: String as PropType<SupportLang>,
+      default: "ZH-cn",
+    },
   };
 
   export type ColorPickerProps = Partial<ExtractPropTypes<typeof colorPickerProps>>;
@@ -84,6 +97,10 @@
         isAdvanceMode: false,
       });
 
+      provide<ColorPickerProvider>(ColorPickerProviderKey, {
+        lang: computed(() => props.lang || "ZH-cn"),
+      });
+
       const instance = new Color(state.pureColor);
       const colorInstance = ref(instance);
 

packages/common/WrapContainer.vue

@@ -13,7 +13,7 @@
             @click="onActiveKeyChange('single')"
           >
             <button>
-              <div class="vc-btn__content">纯色</div>
+              <div class="vc-btn__content">{{ lang === "ZH-cn" ? "纯色" : "Pure" }}</div>
             </button>
           </div>
           <div
@@ -26,7 +26,7 @@
             @click="onActiveKeyChange('gradient')"
           >
             <button>
-              <div class="vc-btn__content">渐变色</div>
+              <div class="vc-btn__content">{{ lang === "ZH-cn" ? "渐变色" : "Gradient" }}</div>
             </button>
           </div>
           <div
@@ -44,9 +44,10 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive } from "vue";
+  import { defineComponent, inject, reactive } from "vue";
   import propTypes from "vue-types";
   import { whenever } from "@vueuse/core";
+  import { ColorPickerProvider, ColorPickerProviderKey } from "../utils/type";
 
   export default defineComponent({
     name: "WrapContainer",
@@ -60,6 +61,8 @@
         activeKey: props.activeKey,
       });
 
+      const parent = inject<ColorPickerProvider>(ColorPickerProviderKey);
+
       const onActiveKeyChange = (key: string) => {
         state.activeKey = key;
         emit("update:activeKey", key);
@@ -73,7 +76,7 @@
         }
       );
 
-      return { state, onActiveKeyChange };
+      return { state, onActiveKeyChange, lang: parent?.lang };
     },
   });
 </script>

packages/gradient/GradientColorPicker.vue

@@ -18,7 +18,7 @@
                 },
               ]"
               ref="startGradientRef"
-              title="开始"
+              :title="lang === 'ZH-cn' ? '开始' : 'Start'"
               :style="{ left: getStartColorLeft + 'px' }"
             >
               <span class="vc-gradient__stop--inner"></span>
@@ -31,7 +31,7 @@
                 },
               ]"
               ref="stopGradientRef"
-              title="结束"
+              :title="lang === 'ZH-cn' ? '结束' : 'End'"
               :style="{ left: getEndColorLeft + 'px' }"
             >
               <span class="vc-gradient__stop--inner"></span>
@@ -66,7 +66,7 @@
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, reactive, ref } from "vue";
+  import { computed, defineComponent, inject, reactive, ref } from "vue";
   import propTypes from "vue-types";
   import { Angle } from "vue3-angle";
   import Alpha from "../common/Alpha.vue";
@@ -82,6 +82,7 @@
   import { tryOnMounted, useDebounceFn, useLocalStorage, whenever } from "@vueuse/core";
   import { DOMUtils } from "@aesoper/normal-utils";
   import tinycolor from "tinycolor2";
+  import { ColorPickerProvider, ColorPickerProviderKey } from "../utils/type";
 
   export default defineComponent({
     name: "GradientColorPicker",
@@ -123,6 +124,8 @@
         endColorRgba: props.endColor.toRgbString(),
       });
 
+      const parent = inject<ColorPickerProvider>(ColorPickerProviderKey);
+
       const advancePanelShow = ref(false);
 
       // Ref
@@ -364,6 +367,7 @@
         historyColors,
         onBack,
         onDegreeChange,
+        lang: parent?.lang,
       };
     },
   });

packages/utils/type.ts

@@ -0,0 +1,9 @@
+import { ComputedRef } from "vue";
+
+export type SupportLang = "ZH-cn" | "En";
+
+export interface ColorPickerProvider {
+  lang: ComputedRef<SupportLang>;
+}
+
+export const ColorPickerProviderKey = "Vue3ColorPickerProvider";

src/stories/ColorPicker.stories.ts

@@ -103,6 +103,17 @@ export default {
       },
       description: "",
     },
+    lang: {
+      type: "string",
+      description: "ZH-cn | En",
+      control: { type: "select" },
+      options: ["ZH-cn", "En"],
+      table: {
+        defaultValue: {
+          summary: "ZH-cn",
+        },
+      },
+    },
   } as Partial<ArgTypes<ColorPickerProps>>,
 } as Meta;