pro-design-vue 1.2.5 → 1.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.full.js +18 -4
- package/dist/index.full.min.js +7 -7
- package/dist/index.full.min.js.map +1 -1
- package/dist/index.full.min.mjs +7 -7
- package/dist/index.full.min.mjs.map +1 -1
- package/dist/index.full.mjs +18 -4
- package/es/packages/components/config-provider/src/useCssVariables.mjs +1 -0
- package/es/packages/components/config-provider/src/useCssVariables.mjs.map +1 -1
- package/es/packages/utils/color/generator.mjs +15 -2
- package/es/packages/utils/color/generator.mjs.map +1 -1
- package/es/utils/color/generator.d.ts +1 -1
- package/es/version.d.ts +1 -1
- package/es/version.mjs +1 -1
- package/es/version.mjs.map +1 -1
- package/lib/packages/components/config-provider/src/useCssVariables.js +1 -0
- package/lib/packages/components/config-provider/src/useCssVariables.js.map +1 -1
- package/lib/packages/utils/color/generator.js +15 -2
- package/lib/packages/utils/color/generator.js.map +1 -1
- package/lib/utils/color/generator.d.ts +1 -1
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/lib/version.js.map +1 -1
- package/package.json +1 -1
package/dist/index.full.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! Pro Design Vue v1.2.
|
|
1
|
+
/*! Pro Design Vue v1.2.6 */
|
|
2
2
|
|
|
3
3
|
import { Modal, theme as theme$1, ConfigProvider, App, Button as Button$1, Tooltip, Popconfirm, Dropdown, Menu, Slider, Drawer, Input, InputNumber, Form as Form$1, Space, Textarea, Select, TreeSelect, Checkbox as Checkbox$1, CheckboxGroup, RadioGroup, Radio as Radio$1, Cascader, Switch, Rate, DatePicker, RangePicker, TimePicker, TimeRangePicker, Upload, FormItemRest, Spin, message, Row as Row$1, Col, FormItem as FormItem$3, Steps, Popover, MenuItem, SubMenu, Empty, Badge, Tag, Pagination, InputSearch, Tree, Card, Tabs, TabPane } from 'ant-design-vue';
|
|
4
4
|
import { inject, ref, getCurrentInstance, nextTick, h, reactive, defineComponent, createVNode, isVNode, Fragment, cloneVNode, provide, watch, computed, renderSlot, createPropsRestProxy, createBlock, openBlock, unref, mergeProps, withCtx, normalizeProps, guardReactiveProps, shallowRef, shallowReadonly, toValue, getCurrentScope, onScopeDispose, onMounted, hasInjectionContext, isRef, toRefs as toRefs$1, customRef, toRef as toRef$1, readonly, watchEffect, toRaw, createElementBlock, createCommentVNode, resolveDynamicComponent, createElementVNode, normalizeStyle, toDisplayString, normalizeClass, createSlots, useAttrs, useTemplateRef, defineAsyncComponent, Teleport, onUnmounted, Comment as Comment$1, useSlots, useModel, withModifiers, mergeModels, renderList, camelize, isReactive, onActivated, onDeactivated, onBeforeUnmount, triggerRef, resolveDirective, withDirectives, vShow, render as render$1, resolveComponent, createTextVNode, vModelText } from 'vue';
|
|
@@ -30,7 +30,7 @@ const SCROLL_FIXED_CLASS = `_scroll__fixed_`;
|
|
|
30
30
|
const DEFAULT_NAMESPACE = "pro";
|
|
31
31
|
const DEFAULT_LOCALE = "zh-CN";
|
|
32
32
|
|
|
33
|
-
const version$1 = "1.2.
|
|
33
|
+
const version$1 = "1.2.6";
|
|
34
34
|
|
|
35
35
|
const makeInstaller = (components = []) => {
|
|
36
36
|
const install = (app) => {
|
|
@@ -3364,7 +3364,20 @@ function getColors(color, variants = _variants) {
|
|
|
3364
3364
|
return colors;
|
|
3365
3365
|
}
|
|
3366
3366
|
|
|
3367
|
-
|
|
3367
|
+
const darkColorKeyMap = {
|
|
3368
|
+
50: "950",
|
|
3369
|
+
100: "900",
|
|
3370
|
+
200: "800",
|
|
3371
|
+
300: "700",
|
|
3372
|
+
400: "600",
|
|
3373
|
+
500: "500",
|
|
3374
|
+
600: "400",
|
|
3375
|
+
700: "300",
|
|
3376
|
+
800: "200",
|
|
3377
|
+
900: "100",
|
|
3378
|
+
950: "50"
|
|
3379
|
+
};
|
|
3380
|
+
function generatorColorVariables(colorItems, dark, namespace) {
|
|
3368
3381
|
const colorVariables = {};
|
|
3369
3382
|
colorItems.forEach(({ alias, color, name }) => {
|
|
3370
3383
|
if (color) {
|
|
@@ -3372,7 +3385,7 @@ function generatorColorVariables(colorItems, namespace) {
|
|
|
3372
3385
|
let mainColor = colorsMap["500"];
|
|
3373
3386
|
const colorKeys = Object.keys(colorsMap);
|
|
3374
3387
|
colorKeys.forEach((key) => {
|
|
3375
|
-
const colorValue = colorsMap[key];
|
|
3388
|
+
const colorValue = !dark ? colorsMap[key] : colorsMap[darkColorKeyMap[key]];
|
|
3376
3389
|
if (colorValue) {
|
|
3377
3390
|
const hslColor = convertToHslCssVar(colorValue);
|
|
3378
3391
|
colorVariables[`--${namespace}-${name}-${key}`] = hslColor;
|
|
@@ -8305,6 +8318,7 @@ function useCssVariables(isDark) {
|
|
|
8305
8318
|
const oldColor = (oldToken == null ? void 0 : oldToken[item.key]) || defaultColor;
|
|
8306
8319
|
return newToken[item.key] !== defaultColor || newToken[item.key] === defaultColor && oldColor !== defaultColor;
|
|
8307
8320
|
}),
|
|
8321
|
+
dark,
|
|
8308
8322
|
DEFAULT_NAMESPACE
|
|
8309
8323
|
);
|
|
8310
8324
|
const colorMappings = {
|
|
@@ -22,6 +22,7 @@ function useCssVariables(isDark) {
|
|
|
22
22
|
const oldColor = (oldToken == null ? void 0 : oldToken[item.key]) || defaultColor;
|
|
23
23
|
return newToken[item.key] !== defaultColor || newToken[item.key] === defaultColor && oldColor !== defaultColor;
|
|
24
24
|
}),
|
|
25
|
+
dark,
|
|
25
26
|
DEFAULT_NAMESPACE
|
|
26
27
|
);
|
|
27
28
|
const colorMappings = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCssVariables.mjs","sources":["../../../../../../../packages/components/config-provider/src/useCssVariables.ts"],"sourcesContent":["/*\n * @Author: shen\n * @Date: 2025-06-06 09:26:03\n * @LastEditors: shen\n * @LastEditTime: 2025-10-
|
|
1
|
+
{"version":3,"file":"useCssVariables.mjs","sources":["../../../../../../../packages/components/config-provider/src/useCssVariables.ts"],"sourcesContent":["/*\n * @Author: shen\n * @Date: 2025-06-06 09:26:03\n * @LastEditors: shen\n * @LastEditTime: 2025-10-15 15:44:09\n * @Description:\n */\nimport { theme } from 'ant-design-vue'\nimport { watch, type ComputedRef } from 'vue'\nimport { DEFAULT_NAMESPACE } from '@pro-design-vue/constants'\nimport { generatorColorVariables } from '@pro-design-vue/utils'\nimport { updateCSSVariables } from './update-css-variables'\nimport { defaultDarkToken, defaultToken } from './defaultToken'\n\nexport function useCssVariables(isDark: ComputedRef<boolean>) {\n const { useToken } = theme\n const { token } = useToken()\n\n watch(\n [token, isDark],\n ([newToken, dark], [oldToken]) => {\n const colorVariables = generatorColorVariables(\n [\n { color: newToken.colorPrimary, name: 'primary', key: 'colorPrimary' },\n { alias: 'warning', color: newToken.colorWarning, name: 'yellow', key: 'colorWarning' },\n { alias: 'success', color: newToken.colorSuccess, name: 'green', key: 'colorSuccess' },\n { alias: 'error', color: newToken.colorError, name: 'red', key: 'colorError' },\n ].filter((item) => {\n const defaultColor = dark ? defaultDarkToken[item.key] : defaultToken[item.key]\n const oldColor = oldToken?.[item.key] || defaultColor\n return (\n newToken[item.key] !== defaultColor ||\n (newToken[item.key] === defaultColor && oldColor !== defaultColor)\n )\n }),\n dark,\n DEFAULT_NAMESPACE,\n )\n // 要设置的 CSS 变量映射\n const colorMappings = {\n [`--${DEFAULT_NAMESPACE}-green-500`]: `--${DEFAULT_NAMESPACE}-success`,\n [`--${DEFAULT_NAMESPACE}-primary-500`]: `--${DEFAULT_NAMESPACE}-primary`,\n [`--${DEFAULT_NAMESPACE}-red-500`]: `--${DEFAULT_NAMESPACE}-error`,\n [`--${DEFAULT_NAMESPACE}-yellow-500`]: `--${DEFAULT_NAMESPACE}-warning`,\n }\n\n Object.entries(colorMappings).forEach(([sourceVar, targetVar]) => {\n const colorValue = colorVariables[sourceVar]\n if (colorValue) {\n document.documentElement.style.setProperty(targetVar, colorValue)\n }\n })\n\n updateCSSVariables(colorVariables)\n\n if (defaultToken.borderRadius !== newToken.borderRadius) {\n document.documentElement.style.setProperty(\n `--${DEFAULT_NAMESPACE}-radius`,\n `${newToken.borderRadius}px`,\n )\n }\n },\n {\n immediate: true,\n },\n )\n}\n"],"names":[],"mappings":";;;;;;;AAcO,SAAS,gBAAgB,MAAA,EAA8B;AAC5D,EAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AACrB,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,QAAA,EAAS;AAE3B,EAAA,KAAA;AAAA,IACE,CAAC,OAAO,MAAM,CAAA;AAAA,IACd,CAAC,CAAC,QAAA,EAAU,IAAI,CAAA,EAAG,CAAC,QAAQ,CAAA,KAAM;AAChC,MAAA,MAAM,cAAA,GAAiB,uBAAA;AAAA,QACrB;AAAA,UACE,EAAE,KAAA,EAAO,QAAA,CAAS,cAAc,IAAA,EAAM,SAAA,EAAW,KAAK,cAAA,EAAe;AAAA,UACrE,EAAE,OAAO,SAAA,EAAW,KAAA,EAAO,SAAS,YAAA,EAAc,IAAA,EAAM,QAAA,EAAU,GAAA,EAAK,cAAA,EAAe;AAAA,UACtF,EAAE,OAAO,SAAA,EAAW,KAAA,EAAO,SAAS,YAAA,EAAc,IAAA,EAAM,OAAA,EAAS,GAAA,EAAK,cAAA,EAAe;AAAA,UACrF,EAAE,OAAO,OAAA,EAAS,KAAA,EAAO,SAAS,UAAA,EAAY,IAAA,EAAM,KAAA,EAAO,GAAA,EAAK,YAAA;AAAa,SAC/E,CAAE,MAAA,CAAO,CAAC,IAAA,KAAS;AACjB,UAAA,MAAM,YAAA,GAAe,OAAO,gBAAA,CAAiB,IAAA,CAAK,GAAG,CAAA,GAAI,YAAA,CAAa,KAAK,GAAG,CAAA;AAC9E,UAAA,MAAM,QAAA,GAAA,CAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,IAAA,CAAK,GAAA,CAAA,KAAQ,YAAA;AACzC,UAAA,OACE,QAAA,CAAS,IAAA,CAAK,GAAG,CAAA,KAAM,YAAA,IACtB,SAAS,IAAA,CAAK,GAAG,CAAA,KAAM,YAAA,IAAgB,QAAA,KAAa,YAAA;AAAA,QAEzD,CAAC,CAAA;AAAA,QACD,IAAA;AAAA,QACA;AAAA,OACF;AAEA,MAAA,MAAM,aAAA,GAAgB;AAAA,QACpB,CAAC,CAAA,EAAA,EAAK,iBAAiB,CAAA,UAAA,CAAY,GAAG,KAAK,iBAAiB,CAAA,QAAA,CAAA;AAAA,QAC5D,CAAC,CAAA,EAAA,EAAK,iBAAiB,CAAA,YAAA,CAAc,GAAG,KAAK,iBAAiB,CAAA,QAAA,CAAA;AAAA,QAC9D,CAAC,CAAA,EAAA,EAAK,iBAAiB,CAAA,QAAA,CAAU,GAAG,KAAK,iBAAiB,CAAA,MAAA,CAAA;AAAA,QAC1D,CAAC,CAAA,EAAA,EAAK,iBAAiB,CAAA,WAAA,CAAa,GAAG,KAAK,iBAAiB,CAAA,QAAA;AAAA,OAC/D;AAEA,MAAA,MAAA,CAAO,OAAA,CAAQ,aAAa,CAAA,CAAE,OAAA,CAAQ,CAAC,CAAC,SAAA,EAAW,SAAS,CAAA,KAAM;AAChE,QAAA,MAAM,UAAA,GAAa,eAAe,SAAS,CAAA;AAC3C,QAAA,IAAI,UAAA,EAAY;AACd,UAAA,QAAA,CAAS,eAAA,CAAgB,KAAA,CAAM,WAAA,CAAY,SAAA,EAAW,UAAU,CAAA;AAAA,QAClE;AAAA,MACF,CAAC,CAAA;AAED,MAAA,kBAAA,CAAmB,cAAc,CAAA;AAEjC,MAAA,IAAI,YAAA,CAAa,YAAA,KAAiB,QAAA,CAAS,YAAA,EAAc;AACvD,QAAA,QAAA,CAAS,gBAAgB,KAAA,CAAM,WAAA;AAAA,UAC7B,KAAK,iBAAiB,CAAA,OAAA,CAAA;AAAA,UACtB,CAAA,EAAG,SAAS,YAAY,CAAA,EAAA;AAAA,SAC1B;AAAA,MACF;AAAA,IACF,CAAA;AAAA,IACA;AAAA,MACE,SAAA,EAAW;AAAA;AACb,GACF;AACF;;;;"}
|
|
@@ -2,7 +2,20 @@ import { getColors } from '../../../node_modules/.pnpm/theme-colors@0.1.0/node_m
|
|
|
2
2
|
import { convertToHslCssVar } from './convert.mjs';
|
|
3
3
|
import { TinyColor } from '../../../node_modules/.pnpm/@ctrl_tinycolor@4.2.0/node_modules/@ctrl/tinycolor/dist/module/index.mjs';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
const darkColorKeyMap = {
|
|
6
|
+
50: "950",
|
|
7
|
+
100: "900",
|
|
8
|
+
200: "800",
|
|
9
|
+
300: "700",
|
|
10
|
+
400: "600",
|
|
11
|
+
500: "500",
|
|
12
|
+
600: "400",
|
|
13
|
+
700: "300",
|
|
14
|
+
800: "200",
|
|
15
|
+
900: "100",
|
|
16
|
+
950: "50"
|
|
17
|
+
};
|
|
18
|
+
function generatorColorVariables(colorItems, dark, namespace) {
|
|
6
19
|
const colorVariables = {};
|
|
7
20
|
colorItems.forEach(({ alias, color, name }) => {
|
|
8
21
|
if (color) {
|
|
@@ -10,7 +23,7 @@ function generatorColorVariables(colorItems, namespace) {
|
|
|
10
23
|
let mainColor = colorsMap["500"];
|
|
11
24
|
const colorKeys = Object.keys(colorsMap);
|
|
12
25
|
colorKeys.forEach((key) => {
|
|
13
|
-
const colorValue = colorsMap[key];
|
|
26
|
+
const colorValue = !dark ? colorsMap[key] : colorsMap[darkColorKeyMap[key]];
|
|
14
27
|
if (colorValue) {
|
|
15
28
|
const hslColor = convertToHslCssVar(colorValue);
|
|
16
29
|
colorVariables[`--${namespace}-${name}-${key}`] = hslColor;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generator.mjs","sources":["../../../../../../packages/utils/color/generator.ts"],"sourcesContent":["/*\n * @Author: shen\n * @Date: 2025-05-10 22:33:31\n * @LastEditors: shen\n * @LastEditTime: 2025-10-
|
|
1
|
+
{"version":3,"file":"generator.mjs","sources":["../../../../../../packages/utils/color/generator.ts"],"sourcesContent":["/*\n * @Author: shen\n * @Date: 2025-05-10 22:33:31\n * @LastEditors: shen\n * @LastEditTime: 2025-10-15 15:42:18\n * @Description:\n */\nimport { getColors } from 'theme-colors'\n\nimport { convertToHslCssVar, TinyColor } from './convert'\n\ninterface ColorItem {\n alias?: string\n color: string\n name: string\n key: string\n}\n\nconst darkColorKeyMap = {\n 50: '950',\n 100: '900',\n 200: '800',\n 300: '700',\n 400: '600',\n 500: '500',\n 600: '400',\n 700: '300',\n 800: '200',\n 900: '100',\n 950: '50',\n}\n\nfunction generatorColorVariables(colorItems: ColorItem[], dark: boolean, namespace?: string) {\n const colorVariables: Record<string, string> = {}\n\n colorItems.forEach(({ alias, color, name }) => {\n if (color) {\n const colorsMap = getColors(new TinyColor(color).toHexString())\n\n let mainColor = colorsMap['500']\n\n const colorKeys = Object.keys(colorsMap)\n colorKeys.forEach((key) => {\n const colorValue = !dark ? colorsMap[key] : colorsMap[darkColorKeyMap[key]]\n\n if (colorValue) {\n const hslColor = convertToHslCssVar(colorValue)\n colorVariables[`--${namespace}-${name}-${key}`] = hslColor\n if (alias) {\n colorVariables[`--${namespace}-${alias}-${key}`] = hslColor\n }\n\n if (key === '500') {\n mainColor = hslColor\n }\n }\n })\n if (alias && mainColor) {\n colorVariables[`--${namespace}-${alias}`] = mainColor\n }\n }\n })\n return colorVariables\n}\n\nexport { generatorColorVariables }\n"],"names":[],"mappings":";;;;AAkBA,MAAM,eAAA,GAAkB;AAAA,EACtB,EAAA,EAAI,KAAA;AAAA,EACJ,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK;AACP,CAAA;AAEA,SAAS,uBAAA,CAAwB,UAAA,EAAyB,IAAA,EAAe,SAAA,EAAoB;AAC3F,EAAA,MAAM,iBAAyC,EAAC;AAEhD,EAAA,UAAA,CAAW,QAAQ,CAAC,EAAE,KAAA,EAAO,KAAA,EAAO,MAAK,KAAM;AAC7C,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,MAAM,YAAY,SAAA,CAAU,IAAI,UAAU,KAAK,CAAA,CAAE,aAAa,CAAA;AAE9D,MAAA,IAAI,SAAA,GAAY,UAAU,KAAK,CAAA;AAE/B,MAAA,MAAM,SAAA,GAAY,MAAA,CAAO,IAAA,CAAK,SAAS,CAAA;AACvC,MAAA,SAAA,CAAU,OAAA,CAAQ,CAAC,GAAA,KAAQ;AACzB,QAAA,MAAM,UAAA,GAAa,CAAC,IAAA,GAAO,SAAA,CAAU,GAAG,CAAA,GAAI,SAAA,CAAU,eAAA,CAAgB,GAAG,CAAC,CAAA;AAE1E,QAAA,IAAI,UAAA,EAAY;AACd,UAAA,MAAM,QAAA,GAAW,mBAAmB,UAAU,CAAA;AAC9C,UAAA,cAAA,CAAe,KAAK,SAAS,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAAI,GAAG,EAAE,CAAA,GAAI,QAAA;AAClD,UAAA,IAAI,KAAA,EAAO;AACT,YAAA,cAAA,CAAe,KAAK,SAAS,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA,EAAI,GAAG,EAAE,CAAA,GAAI,QAAA;AAAA,UACrD;AAEA,UAAA,IAAI,QAAQ,KAAA,EAAO;AACjB,YAAA,SAAA,GAAY,QAAA;AAAA,UACd;AAAA,QACF;AAAA,MACF,CAAC,CAAA;AACD,MAAA,IAAI,SAAS,SAAA,EAAW;AACtB,QAAA,cAAA,CAAe,CAAA,EAAA,EAAK,SAAS,CAAA,CAAA,EAAI,KAAK,EAAE,CAAA,GAAI,SAAA;AAAA,MAC9C;AAAA,IACF;AAAA,EACF,CAAC,CAAA;AACD,EAAA,OAAO,cAAA;AACT;;;;"}
|
|
@@ -4,5 +4,5 @@ interface ColorItem {
|
|
|
4
4
|
name: string;
|
|
5
5
|
key: string;
|
|
6
6
|
}
|
|
7
|
-
declare function generatorColorVariables(colorItems: ColorItem[], namespace?: string): Record<string, string>;
|
|
7
|
+
declare function generatorColorVariables(colorItems: ColorItem[], dark: boolean, namespace?: string): Record<string, string>;
|
|
8
8
|
export { generatorColorVariables };
|
package/es/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const version = "1.2.
|
|
1
|
+
export declare const version = "1.2.6";
|
package/es/version.mjs
CHANGED
package/es/version.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.mjs","sources":["../../../packages/pro-design-vue/version.ts"],"sourcesContent":["export const version = '1.2.
|
|
1
|
+
{"version":3,"file":"version.mjs","sources":["../../../packages/pro-design-vue/version.ts"],"sourcesContent":["export const version = '1.2.6'\n"],"names":[],"mappings":"AAAO,MAAM,OAAA,GAAU;;;;"}
|
|
@@ -24,6 +24,7 @@ function useCssVariables(isDark) {
|
|
|
24
24
|
const oldColor = (oldToken == null ? void 0 : oldToken[item.key]) || defaultColor;
|
|
25
25
|
return newToken[item.key] !== defaultColor || newToken[item.key] === defaultColor && oldColor !== defaultColor;
|
|
26
26
|
}),
|
|
27
|
+
dark,
|
|
27
28
|
globals.DEFAULT_NAMESPACE
|
|
28
29
|
);
|
|
29
30
|
const colorMappings = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCssVariables.js","sources":["../../../../../../../packages/components/config-provider/src/useCssVariables.ts"],"sourcesContent":["/*\n * @Author: shen\n * @Date: 2025-06-06 09:26:03\n * @LastEditors: shen\n * @LastEditTime: 2025-10-
|
|
1
|
+
{"version":3,"file":"useCssVariables.js","sources":["../../../../../../../packages/components/config-provider/src/useCssVariables.ts"],"sourcesContent":["/*\n * @Author: shen\n * @Date: 2025-06-06 09:26:03\n * @LastEditors: shen\n * @LastEditTime: 2025-10-15 15:44:09\n * @Description:\n */\nimport { theme } from 'ant-design-vue'\nimport { watch, type ComputedRef } from 'vue'\nimport { DEFAULT_NAMESPACE } from '@pro-design-vue/constants'\nimport { generatorColorVariables } from '@pro-design-vue/utils'\nimport { updateCSSVariables } from './update-css-variables'\nimport { defaultDarkToken, defaultToken } from './defaultToken'\n\nexport function useCssVariables(isDark: ComputedRef<boolean>) {\n const { useToken } = theme\n const { token } = useToken()\n\n watch(\n [token, isDark],\n ([newToken, dark], [oldToken]) => {\n const colorVariables = generatorColorVariables(\n [\n { color: newToken.colorPrimary, name: 'primary', key: 'colorPrimary' },\n { alias: 'warning', color: newToken.colorWarning, name: 'yellow', key: 'colorWarning' },\n { alias: 'success', color: newToken.colorSuccess, name: 'green', key: 'colorSuccess' },\n { alias: 'error', color: newToken.colorError, name: 'red', key: 'colorError' },\n ].filter((item) => {\n const defaultColor = dark ? defaultDarkToken[item.key] : defaultToken[item.key]\n const oldColor = oldToken?.[item.key] || defaultColor\n return (\n newToken[item.key] !== defaultColor ||\n (newToken[item.key] === defaultColor && oldColor !== defaultColor)\n )\n }),\n dark,\n DEFAULT_NAMESPACE,\n )\n // 要设置的 CSS 变量映射\n const colorMappings = {\n [`--${DEFAULT_NAMESPACE}-green-500`]: `--${DEFAULT_NAMESPACE}-success`,\n [`--${DEFAULT_NAMESPACE}-primary-500`]: `--${DEFAULT_NAMESPACE}-primary`,\n [`--${DEFAULT_NAMESPACE}-red-500`]: `--${DEFAULT_NAMESPACE}-error`,\n [`--${DEFAULT_NAMESPACE}-yellow-500`]: `--${DEFAULT_NAMESPACE}-warning`,\n }\n\n Object.entries(colorMappings).forEach(([sourceVar, targetVar]) => {\n const colorValue = colorVariables[sourceVar]\n if (colorValue) {\n document.documentElement.style.setProperty(targetVar, colorValue)\n }\n })\n\n updateCSSVariables(colorVariables)\n\n if (defaultToken.borderRadius !== newToken.borderRadius) {\n document.documentElement.style.setProperty(\n `--${DEFAULT_NAMESPACE}-radius`,\n `${newToken.borderRadius}px`,\n )\n }\n },\n {\n immediate: true,\n },\n )\n}\n"],"names":["theme","watch","generatorColorVariables","defaultDarkToken","defaultToken","DEFAULT_NAMESPACE","updateCSSVariables"],"mappings":";;;;;;;;;AAcO,SAAS,gBAAgB,MAAA,EAA8B;AAC5D,EAAA,MAAM,EAAE,UAAS,GAAIA,kBAAA;AACrB,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,QAAA,EAAS;AAE3B,EAAAC,SAAA;AAAA,IACE,CAAC,OAAO,MAAM,CAAA;AAAA,IACd,CAAC,CAAC,QAAA,EAAU,IAAI,CAAA,EAAG,CAAC,QAAQ,CAAA,KAAM;AAChC,MAAA,MAAM,cAAA,GAAiBC,iCAAA;AAAA,QACrB;AAAA,UACE,EAAE,KAAA,EAAO,QAAA,CAAS,cAAc,IAAA,EAAM,SAAA,EAAW,KAAK,cAAA,EAAe;AAAA,UACrE,EAAE,OAAO,SAAA,EAAW,KAAA,EAAO,SAAS,YAAA,EAAc,IAAA,EAAM,QAAA,EAAU,GAAA,EAAK,cAAA,EAAe;AAAA,UACtF,EAAE,OAAO,SAAA,EAAW,KAAA,EAAO,SAAS,YAAA,EAAc,IAAA,EAAM,OAAA,EAAS,GAAA,EAAK,cAAA,EAAe;AAAA,UACrF,EAAE,OAAO,OAAA,EAAS,KAAA,EAAO,SAAS,UAAA,EAAY,IAAA,EAAM,KAAA,EAAO,GAAA,EAAK,YAAA;AAAa,SAC/E,CAAE,MAAA,CAAO,CAAC,IAAA,KAAS;AACjB,UAAA,MAAM,YAAA,GAAe,OAAOC,6BAAA,CAAiB,IAAA,CAAK,GAAG,CAAA,GAAIC,yBAAA,CAAa,KAAK,GAAG,CAAA;AAC9E,UAAA,MAAM,QAAA,GAAA,CAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,IAAA,CAAK,GAAA,CAAA,KAAQ,YAAA;AACzC,UAAA,OACE,QAAA,CAAS,IAAA,CAAK,GAAG,CAAA,KAAM,YAAA,IACtB,SAAS,IAAA,CAAK,GAAG,CAAA,KAAM,YAAA,IAAgB,QAAA,KAAa,YAAA;AAAA,QAEzD,CAAC,CAAA;AAAA,QACD,IAAA;AAAA,QACAC;AAAA,OACF;AAEA,MAAA,MAAM,aAAA,GAAgB;AAAA,QACpB,CAAC,CAAA,EAAA,EAAKA,yBAAiB,CAAA,UAAA,CAAY,GAAG,KAAKA,yBAAiB,CAAA,QAAA,CAAA;AAAA,QAC5D,CAAC,CAAA,EAAA,EAAKA,yBAAiB,CAAA,YAAA,CAAc,GAAG,KAAKA,yBAAiB,CAAA,QAAA,CAAA;AAAA,QAC9D,CAAC,CAAA,EAAA,EAAKA,yBAAiB,CAAA,QAAA,CAAU,GAAG,KAAKA,yBAAiB,CAAA,MAAA,CAAA;AAAA,QAC1D,CAAC,CAAA,EAAA,EAAKA,yBAAiB,CAAA,WAAA,CAAa,GAAG,KAAKA,yBAAiB,CAAA,QAAA;AAAA,OAC/D;AAEA,MAAA,MAAA,CAAO,OAAA,CAAQ,aAAa,CAAA,CAAE,OAAA,CAAQ,CAAC,CAAC,SAAA,EAAW,SAAS,CAAA,KAAM;AAChE,QAAA,MAAM,UAAA,GAAa,eAAe,SAAS,CAAA;AAC3C,QAAA,IAAI,UAAA,EAAY;AACd,UAAA,QAAA,CAAS,eAAA,CAAgB,KAAA,CAAM,WAAA,CAAY,SAAA,EAAW,UAAU,CAAA;AAAA,QAClE;AAAA,MACF,CAAC,CAAA;AAED,MAAAC,qCAAA,CAAmB,cAAc,CAAA;AAEjC,MAAA,IAAIF,yBAAA,CAAa,YAAA,KAAiB,QAAA,CAAS,YAAA,EAAc;AACvD,QAAA,QAAA,CAAS,gBAAgB,KAAA,CAAM,WAAA;AAAA,UAC7B,KAAKC,yBAAiB,CAAA,OAAA,CAAA;AAAA,UACtB,CAAA,EAAG,SAAS,YAAY,CAAA,EAAA;AAAA,SAC1B;AAAA,MACF;AAAA,IACF,CAAA;AAAA,IACA;AAAA,MACE,SAAA,EAAW;AAAA;AACb,GACF;AACF;;;;"}
|
|
@@ -4,7 +4,20 @@ var index = require('../../../node_modules/.pnpm/theme-colors@0.1.0/node_modules
|
|
|
4
4
|
var convert = require('./convert.js');
|
|
5
5
|
var index$1 = require('../../../node_modules/.pnpm/@ctrl_tinycolor@4.2.0/node_modules/@ctrl/tinycolor/dist/module/index.js');
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
const darkColorKeyMap = {
|
|
8
|
+
50: "950",
|
|
9
|
+
100: "900",
|
|
10
|
+
200: "800",
|
|
11
|
+
300: "700",
|
|
12
|
+
400: "600",
|
|
13
|
+
500: "500",
|
|
14
|
+
600: "400",
|
|
15
|
+
700: "300",
|
|
16
|
+
800: "200",
|
|
17
|
+
900: "100",
|
|
18
|
+
950: "50"
|
|
19
|
+
};
|
|
20
|
+
function generatorColorVariables(colorItems, dark, namespace) {
|
|
8
21
|
const colorVariables = {};
|
|
9
22
|
colorItems.forEach(({ alias, color, name }) => {
|
|
10
23
|
if (color) {
|
|
@@ -12,7 +25,7 @@ function generatorColorVariables(colorItems, namespace) {
|
|
|
12
25
|
let mainColor = colorsMap["500"];
|
|
13
26
|
const colorKeys = Object.keys(colorsMap);
|
|
14
27
|
colorKeys.forEach((key) => {
|
|
15
|
-
const colorValue = colorsMap[key];
|
|
28
|
+
const colorValue = !dark ? colorsMap[key] : colorsMap[darkColorKeyMap[key]];
|
|
16
29
|
if (colorValue) {
|
|
17
30
|
const hslColor = convert.convertToHslCssVar(colorValue);
|
|
18
31
|
colorVariables[`--${namespace}-${name}-${key}`] = hslColor;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generator.js","sources":["../../../../../../packages/utils/color/generator.ts"],"sourcesContent":["/*\n * @Author: shen\n * @Date: 2025-05-10 22:33:31\n * @LastEditors: shen\n * @LastEditTime: 2025-10-
|
|
1
|
+
{"version":3,"file":"generator.js","sources":["../../../../../../packages/utils/color/generator.ts"],"sourcesContent":["/*\n * @Author: shen\n * @Date: 2025-05-10 22:33:31\n * @LastEditors: shen\n * @LastEditTime: 2025-10-15 15:42:18\n * @Description:\n */\nimport { getColors } from 'theme-colors'\n\nimport { convertToHslCssVar, TinyColor } from './convert'\n\ninterface ColorItem {\n alias?: string\n color: string\n name: string\n key: string\n}\n\nconst darkColorKeyMap = {\n 50: '950',\n 100: '900',\n 200: '800',\n 300: '700',\n 400: '600',\n 500: '500',\n 600: '400',\n 700: '300',\n 800: '200',\n 900: '100',\n 950: '50',\n}\n\nfunction generatorColorVariables(colorItems: ColorItem[], dark: boolean, namespace?: string) {\n const colorVariables: Record<string, string> = {}\n\n colorItems.forEach(({ alias, color, name }) => {\n if (color) {\n const colorsMap = getColors(new TinyColor(color).toHexString())\n\n let mainColor = colorsMap['500']\n\n const colorKeys = Object.keys(colorsMap)\n colorKeys.forEach((key) => {\n const colorValue = !dark ? colorsMap[key] : colorsMap[darkColorKeyMap[key]]\n\n if (colorValue) {\n const hslColor = convertToHslCssVar(colorValue)\n colorVariables[`--${namespace}-${name}-${key}`] = hslColor\n if (alias) {\n colorVariables[`--${namespace}-${alias}-${key}`] = hslColor\n }\n\n if (key === '500') {\n mainColor = hslColor\n }\n }\n })\n if (alias && mainColor) {\n colorVariables[`--${namespace}-${alias}`] = mainColor\n }\n }\n })\n return colorVariables\n}\n\nexport { generatorColorVariables }\n"],"names":["getColors","TinyColor","convertToHslCssVar"],"mappings":";;;;;;AAkBA,MAAM,eAAA,GAAkB;AAAA,EACtB,EAAA,EAAI,KAAA;AAAA,EACJ,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK;AACP,CAAA;AAEA,SAAS,uBAAA,CAAwB,UAAA,EAAyB,IAAA,EAAe,SAAA,EAAoB;AAC3F,EAAA,MAAM,iBAAyC,EAAC;AAEhD,EAAA,UAAA,CAAW,QAAQ,CAAC,EAAE,KAAA,EAAO,KAAA,EAAO,MAAK,KAAM;AAC7C,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,MAAM,YAAYA,eAAA,CAAU,IAAIC,kBAAU,KAAK,CAAA,CAAE,aAAa,CAAA;AAE9D,MAAA,IAAI,SAAA,GAAY,UAAU,KAAK,CAAA;AAE/B,MAAA,MAAM,SAAA,GAAY,MAAA,CAAO,IAAA,CAAK,SAAS,CAAA;AACvC,MAAA,SAAA,CAAU,OAAA,CAAQ,CAAC,GAAA,KAAQ;AACzB,QAAA,MAAM,UAAA,GAAa,CAAC,IAAA,GAAO,SAAA,CAAU,GAAG,CAAA,GAAI,SAAA,CAAU,eAAA,CAAgB,GAAG,CAAC,CAAA;AAE1E,QAAA,IAAI,UAAA,EAAY;AACd,UAAA,MAAM,QAAA,GAAWC,2BAAmB,UAAU,CAAA;AAC9C,UAAA,cAAA,CAAe,KAAK,SAAS,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAAI,GAAG,EAAE,CAAA,GAAI,QAAA;AAClD,UAAA,IAAI,KAAA,EAAO;AACT,YAAA,cAAA,CAAe,KAAK,SAAS,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA,EAAI,GAAG,EAAE,CAAA,GAAI,QAAA;AAAA,UACrD;AAEA,UAAA,IAAI,QAAQ,KAAA,EAAO;AACjB,YAAA,SAAA,GAAY,QAAA;AAAA,UACd;AAAA,QACF;AAAA,MACF,CAAC,CAAA;AACD,MAAA,IAAI,SAAS,SAAA,EAAW;AACtB,QAAA,cAAA,CAAe,CAAA,EAAA,EAAK,SAAS,CAAA,CAAA,EAAI,KAAK,EAAE,CAAA,GAAI,SAAA;AAAA,MAC9C;AAAA,IACF;AAAA,EACF,CAAC,CAAA;AACD,EAAA,OAAO,cAAA;AACT;;;;"}
|
|
@@ -4,5 +4,5 @@ interface ColorItem {
|
|
|
4
4
|
name: string;
|
|
5
5
|
key: string;
|
|
6
6
|
}
|
|
7
|
-
declare function generatorColorVariables(colorItems: ColorItem[], namespace?: string): Record<string, string>;
|
|
7
|
+
declare function generatorColorVariables(colorItems: ColorItem[], dark: boolean, namespace?: string): Record<string, string>;
|
|
8
8
|
export { generatorColorVariables };
|
package/lib/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const version = "1.2.
|
|
1
|
+
export declare const version = "1.2.6";
|
package/lib/version.js
CHANGED
package/lib/version.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sources":["../../../packages/pro-design-vue/version.ts"],"sourcesContent":["export const version = '1.2.
|
|
1
|
+
{"version":3,"file":"version.js","sources":["../../../packages/pro-design-vue/version.ts"],"sourcesContent":["export const version = '1.2.6'\n"],"names":[],"mappings":";;AAAO,MAAM,OAAA,GAAU;;;;"}
|