refactor: ♻️ add constants changes

isboyjc · Dec 6, 2024 · d3e6ac7 · d3e6ac7
1 parent ea7dbe6
commit d3e6ac7
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 133 deletions.
diff --git a/packages/core/src/extensions/font-size.js b/packages/core/src/extensions/font-size.js
@@ -1,7 +1,7 @@
 import { Extension } from "@tiptap/core";
 
 const SIZE_TYPES = {
-  simple: [
+  default: [
     {
       label: "tiny",
       value: "0.65em",
@@ -93,9 +93,9 @@ export default Extension.create({
       isActive: ({ editor, fontSize }) =>
         editor.isActive("textStyle", { fontSize }),
       isDisabled: ({ editor }) => !editor.can().setFontSize(),
-      type: "simple",
+      type: "default",
       get sizes() {
-        return SIZE_TYPES[this.type] || SIZE_TYPES.simple;
+        return SIZE_TYPES[this.type] || SIZE_TYPES.default;
       },
     };
   },

diff --git a/packages/vue3/src/components/special-button/button-background.js b/packages/vue3/src/components/special-button/button-background.js
@@ -1,6 +1,6 @@
 import { defineComponent, ref, h, computed } from "vue";
 import { prefixClass, t } from "@isle-editor/core";
-import { getIcon, getColors } from "@/utils";
+import { getIcon, getDefaultColors } from "@/utils";
 import { ITooltip, IButton, ITrigger, IColorPicker } from "@/components/ui";
 
 export default defineComponent({
@@ -44,7 +44,7 @@ export default defineComponent({
             ],
           ),
           h("div", { class: `${prefixClass}-special-button__background-box` }, [
-            ...getColors().map(({ background, color }) =>
+            ...getDefaultColors().map(({ background, color }) =>
               h("div", {
                 class: `${prefixClass}-special-button__background-box-item`,
                 style: {

diff --git a/packages/vue3/src/components/special-button/button-color.js b/packages/vue3/src/components/special-button/button-color.js
@@ -1,6 +1,6 @@
 import { defineComponent, ref, h, computed } from "vue";
 import { prefixClass, t } from "@isle-editor/core";
-import { getIcon, getColors } from "@/utils";
+import { getIcon, getDefaultColors } from "@/utils";
 import { ITooltip, IButton, ITrigger, IColorPicker } from "@/components/ui";
 
 export default defineComponent({
@@ -35,7 +35,7 @@ export default defineComponent({
           ),
         ]),
         h("div", { class: `${prefixClass}-special-button__color-box` }, [
-          ...getColors().map(({ color }) =>
+          ...getDefaultColors().map(({ color }) =>
             h(
               "div",
               {

diff --git a/packages/vue3/src/components/special-button/button-font-size.js b/packages/vue3/src/components/special-button/button-font-size.js
@@ -111,7 +111,7 @@ export default defineComponent({
                           class: `${prefixClass}-special-button__font-size-btn-text`,
                           style: {
                             fontSize:
-                              props.menu?.type === "simple" ? item.value : "",
+                              props.menu?.type === "default" ? item.value : "",
                           },
                         },
                         t(`sizes.${item.label}`),

diff --git a/packages/vue3/src/components/ui/color-picker.js b/packages/vue3/src/components/ui/color-picker.js
@@ -1,8 +1,8 @@
 import { defineComponent, h } from "vue";
 import { prefixClass } from "@isle-editor/core";
 import {
-  getPickerAllColorsFlat,
-  getAllStandardColors,
+  getPickerColorsFlat,
+  getPickerStandardColors,
   getRecentColors,
   addRecentColor,
 } from "@/utils";
@@ -71,7 +71,7 @@ export default defineComponent({
       emit("change", color);
     };
 
-    const allColors = getPickerAllColorsFlat();
+    const allColors = getPickerColorsFlat();
 
     return () =>
       h(
@@ -113,7 +113,7 @@ export default defineComponent({
             {
               class: `${prefixClass}-color-picker__standard`,
             },
-            getAllStandardColors().map((color) => {
+            getPickerStandardColors().map((color) => {
               return h("div", {
                 class: [`${prefixClass}-color-picker__standard-item`],
                 style: { backgroundColor: color },

diff --git a/packages/vue3/src/constants.js b/packages/vue3/src/constants.js
@@ -0,0 +1,107 @@
+import { prefixClass } from "@isle-editor/core";
+
+// https://tailwindcss.com/docs/customizing-colors
+// picker standard colors
+export const PICKER_STANDARD_COLORS = [
+  "#f03e3e",
+  "#f76707",
+  "#f59f00",
+  "#37b24d",
+  "#1c7ed6",
+  "#1098ad",
+  "#ae3ec9",
+  "#d6336c",
+  "#495057",
+];
+// picker base colors
+export const PICKER_BASE_COLORS = [
+  {
+    name: "black",
+    shades: ["#000000", "#212529", "#868e96", "#dee2e6", "#f1f3f5", "#ffffff"],
+  },
+  {
+    name: "pink",
+    shades: ["#a61e4d", "#c2255c", "#f06595", "#faa2c1", "#fcc2d7", "#ffdeeb"],
+  },
+  {
+    name: "red",
+    shades: ["#c92a2a", "#e03131", "#ff6b6b", "#ffa8a8", "#ffc9c9", "#ffe3e3"],
+  },
+  {
+    name: "orange",
+    shades: ["#d9480f", "#e8590c", "#ff922b", "#ffc078", "#ffd8a8", "#ffe8cc"],
+  },
+  {
+    name: "yellow",
+    shades: ["#e67700", "#f59f00", "#ffd43b", "#ffe066", "#ffec99", "#fff3bf"],
+  },
+  {
+    name: "green",
+    shades: ["#2b8a3e", "#2f9e44", "#51cf66", "#8ce99a", "#b2f2bb", "#d3f9d8"],
+  },
+  {
+    name: "cyan",
+    shades: ["#0b7285", "#0c8599", "#22b8cf", "#66d9e8", "#99e9f2", "#c5f6fa"],
+  },
+  {
+    name: "blue",
+    shades: ["#1864ab", "#1971c2", "#339af0", "#74c0fc", "#a5d8ff", "#d0ebff"],
+  },
+  {
+    name: "purple",
+    shades: ["#862e9c", "#9c36b5", "#cc5de8", "#e599f7", "#eebefa", "#f3d9fa"],
+  },
+];
+// default colors
+export const DEFAULT_COLORS = [
+  {
+    name: "base",
+    color: `var(--${prefixClass}-color-base)`,
+    background: `var(--${prefixClass}-background-base)`,
+  },
+  {
+    name: "gray",
+    color: `var(--${prefixClass}-color-gray)`,
+    background: `var(--${prefixClass}-background-gray)`,
+  },
+  {
+    name: "purple",
+    color: `var(--${prefixClass}-color-purple)`,
+    background: `var(--${prefixClass}-background-purple)`,
+  },
+  {
+    name: "red",
+    color: `var(--${prefixClass}-color-red)`,
+    background: `var(--${prefixClass}-background-red)`,
+  },
+  {
+    name: "yellow",
+    color: `var(--${prefixClass}-color-yellow)`,
+    background: `var(--${prefixClass}-background-yellow)`,
+  },
+  {
+    name: "blue",
+    color: `var(--${prefixClass}-color-blue)`,
+    background: `var(--${prefixClass}-background-blue)`,
+  },
+  {
+    name: "green",
+    color: `var(--${prefixClass}-color-green)`,
+    background: `var(--${prefixClass}-background-green)`,
+  },
+  {
+    name: "orange",
+    color: `var(--${prefixClass}-color-orange)`,
+    background: `var(--${prefixClass}-background-orange)`,
+  },
+  {
+    name: "pink",
+    color: `var(--${prefixClass}-color-pink)`,
+    background: `var(--${prefixClass}-background-pink)`,
+  },
+  {
+    name: "brown",
+    color: `var(--${prefixClass}-color-brown)`,
+    background: `var(--${prefixClass}-background-brown)`,
+  },
+];
diff --git a/packages/vue3/src/utils/color.js b/packages/vue3/src/utils/color.js
@@ -1,145 +1,43 @@
-import { prefixClass } from "@isle-editor/core";
 import { ref } from "vue";
-
-// https://tailwindcss.com/docs/customizing-colors
-const pickerStandardColors = [
-  "#f03e3e",
-  "#f76707",
-  "#f59f00",
-  "#37b24d",
-  "#1c7ed6",
-  "#1098ad",
-  "#ae3ec9",
-  "#d6336c",
-  "#495057",
-];
-const pickerBaseColors = [
-  {
-    name: "black",
-    shades: ["#000000", "#212529", "#868e96", "#dee2e6", "#f1f3f5", "#ffffff"],
-  },
-  {
-    name: "pink",
-    shades: ["#a61e4d", "#c2255c", "#f06595", "#faa2c1", "#fcc2d7", "#ffdeeb"],
-  },
-  {
-    name: "red",
-    shades: ["#c92a2a", "#e03131", "#ff6b6b", "#ffa8a8", "#ffc9c9", "#ffe3e3"],
-  },
-  {
-    name: "orange",
-    shades: ["#d9480f", "#e8590c", "#ff922b", "#ffc078", "#ffd8a8", "#ffe8cc"],
-  },
-  {
-    name: "yellow",
-    shades: ["#e67700", "#f59f00", "#ffd43b", "#ffe066", "#ffec99", "#fff3bf"],
-  },
-  {
-    name: "green",
-    shades: ["#2b8a3e", "#2f9e44", "#51cf66", "#8ce99a", "#b2f2bb", "#d3f9d8"],
-  },
-  {
-    name: "cyan",
-    shades: ["#0b7285", "#0c8599", "#22b8cf", "#66d9e8", "#99e9f2", "#c5f6fa"],
-  },
-  {
-    name: "blue",
-    shades: ["#1864ab", "#1971c2", "#339af0", "#74c0fc", "#a5d8ff", "#d0ebff"],
-  },
-  {
-    name: "purple",
-    shades: ["#862e9c", "#9c36b5", "#cc5de8", "#e599f7", "#eebefa", "#f3d9fa"],
-  },
-];
-
-const colors = [
-  {
-    name: "base",
-    color: `var(--${prefixClass}-color-base)`,
-    background: `var(--${prefixClass}-background-base)`,
-  },
-  {
-    name: "gray",
-    color: `var(--${prefixClass}-color-gray)`,
-    background: `var(--${prefixClass}-background-gray)`,
-  },
-  {
-    name: "purple",
-    color: `var(--${prefixClass}-color-purple)`,
-    background: `var(--${prefixClass}-background-purple)`,
-  },
-  {
-    name: "red",
-    color: `var(--${prefixClass}-color-red)`,
-    background: `var(--${prefixClass}-background-red)`,
-  },
-  {
-    name: "yellow",
-    color: `var(--${prefixClass}-color-yellow)`,
-    background: `var(--${prefixClass}-background-yellow)`,
-  },
-  {
-    name: "blue",
-    color: `var(--${prefixClass}-color-blue)`,
-    background: `var(--${prefixClass}-background-blue)`,
-  },
-  {
-    name: "green",
-    color: `var(--${prefixClass}-color-green)`,
-    background: `var(--${prefixClass}-background-green)`,
-  },
-  {
-    name: "orange",
-    color: `var(--${prefixClass}-color-orange)`,
-    background: `var(--${prefixClass}-background-orange)`,
-  },
-  {
-    name: "pink",
-    color: `var(--${prefixClass}-color-pink)`,
-    background: `var(--${prefixClass}-background-pink)`,
-  },
-  {
-    name: "brown",
-    color: `var(--${prefixClass}-color-brown)`,
-    background: `var(--${prefixClass}-background-brown)`,
-  },
-];
+import {
+  PICKER_STANDARD_COLORS,
+  PICKER_BASE_COLORS,
+  DEFAULT_COLORS,
+} from "../constants";
 
 // 获取所有颜色
-export const getColors = () => {
-  return colors;
+export const getDefaultColors = () => {
+  return DEFAULT_COLORS;
 };
 
-// 获取所有标准颜色
-export const getAllStandardColors = () => {
-  return pickerStandardColors;
+// 获取标准颜色
+export const getPickerStandardColors = () => {
+  return PICKER_STANDARD_COLORS;
 };
 
 // 获取所有基础颜色
-export const getPickerAllColors = () => {
-  return pickerBaseColors;
+export const getPickerColors = () => {
+  return PICKER_BASE_COLORS;
 };
 
 // 获取所有基础颜色的扁平数组
-export const getPickerAllColorsFlat = () => {
-  return pickerBaseColors.reduce((acc, color) => {
+export const getPickerColorsFlat = () => {
+  return PICKER_BASE_COLORS.reduce((acc, color) => {
     return acc.concat(color.shades);
   }, []);
 };
 
 // 获取特定色阶的所有颜色
 export const getPickerColorsByShade = (shade) => {
-  return pickerBaseColors
-    .map((color) => {
-      const found = color.shades.find((c) => c === shade);
-      return found || null;
-    })
-    .filter(Boolean);
+  return PICKER_BASE_COLORS.map((color) => {
+    const found = color.shades.find((c) => c === shade);
+    return found || null;
+  }).filter(Boolean);
 };
 
 // 获取某个颜色系列的所有色阶
 export const getPickerShadesByColor = (colorName) => {
-  const color = pickerBaseColors.find((c) => c.name === colorName);
+  const color = PICKER_BASE_COLORS.find((c) => c.name === colorName);
   return color ? color.shades : [];
 };