Skip to content

Commit 3a27e95

Browse files
graphierosgraphieros
committed
New feature - Add dark theme; use single theme files #267 
1 parent f7255ca commit 3a27e95

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+1283
-604
lines changed

‎src/components/vue-ui-3d-bar.vue‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,12 @@ import { usePrinter } from "../usePrinter";
3939
import { useSvgExport } from "../useSvgExport";
4040
import { useNestedProp } from "../useNestedProp";
4141
import { useResponsive } from "../useResponsive";
42+
import { useThemeCheck } from "../useThemeCheck";
4243
import { useUserOptionState } from "../useUserOptionState";
4344
import { useChartAccessibility } from "../useChartAccessibility";
4445
import img from "../img";
4546
import Title from "../atoms/Title.vue"; // Must be ready in responsive mode
46-
import themes from "../themes.json";
47+
import themes from "../themes/vue_ui_3d_bar.json";
4748
import BaseScanner from "../atoms/BaseScanner.vue";
4849
4950
const BaseIcon = defineAsyncComponent(() => import('../atoms/BaseIcon.vue'));
@@ -55,6 +56,7 @@ const PackageVersion = defineAsyncComponent(() => import('../atoms/PackageVersio
5556
const BaseDraggableDialog = defineAsyncComponent(() => import('../atoms/BaseDraggableDialog.vue'));
5657
5758
const { vue_ui_3d_bar: DEFAULT_CONFIG } = useConfig();
59+
const { isThemeValid, warnInvalidTheme } = useThemeCheck();
5860
5961
const props = defineProps({
6062
config: {
@@ -161,17 +163,29 @@ function prepareConfig() {
161163
userConfig: props.config,
162164
defaultConfig: DEFAULT_CONFIG
163165
});
164-
if (mergedConfig.theme) {
165-
return {
166-
...useNestedProp({
167-
userConfig: themes.vue_ui_3d_bar[mergedConfig.theme] || props.config,
168-
defaultConfig: mergedConfig
169-
}),
170-
customPalette: themePalettes[mergedConfig.theme] || palette
171-
}
172-
} else {
166+
167+
const theme = mergedConfig.theme;
168+
if (!theme) return mergedConfig;
169+
170+
if (!isThemeValid.value(mergedConfig)) {
171+
warnInvalidTheme(mergedConfig);
173172
return mergedConfig;
174173
}
174+
175+
const fused = useNestedProp({
176+
userConfig: themes[theme] || props.config,
177+
defaultConfig: mergedConfig
178+
});
179+
180+
const finalConfig = useNestedProp({
181+
userConfig: props.config,
182+
defaultConfig: fused
183+
});
184+
185+
return {
186+
...finalConfig,
187+
customPalette: finalConfig.customPalette.length ? finalConfig.customPalette : themePalettes[theme] || palette
188+
}
175189
}
176190
177191
watch(() => props.config, (_newCfg) => {

‎src/components/vue-ui-age-pyramid.vue‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,13 @@ import { usePrinter } from "../usePrinter";
3434
import { useSvgExport } from "../useSvgExport";
3535
import { useResponsive } from "../useResponsive";
3636
import { useNestedProp } from "../useNestedProp";
37+
import { useThemeCheck } from "../useThemeCheck";
3738
import { useUserOptionState } from "../useUserOptionState";
3839
import { useChartAccessibility } from "../useChartAccessibility";
3940
import { useTimeLabelCollision } from "../useTimeLabelCollider";
4041
import img from "../img";
4142
import Title from "../atoms/Title.vue"; // Must be ready in responsive mode
42-
import themes from "../themes.json";
43+
import themes from "../themes/vue_ui_age_pyramid.json";
4344
import BaseScanner from "../atoms/BaseScanner.vue";
4445
4546
const Tooltip = defineAsyncComponent(() => import('../atoms/Tooltip.vue'));
@@ -52,6 +53,7 @@ const PackageVersion = defineAsyncComponent(() => import('../atoms/PackageVersio
5253
const BaseDraggableDialog = defineAsyncComponent(() => import('../atoms/BaseDraggableDialog.vue'));
5354
5455
const { vue_ui_age_pyramid: DEFAULT_CONFIG } = useConfig();
56+
const { isThemeValid, warnInvalidTheme } = useThemeCheck();
5557
5658
const props = defineProps({
5759
config: {
@@ -148,16 +150,26 @@ function prepareConfig() {
148150
userConfig: props.config,
149151
defaultConfig: DEFAULT_CONFIG
150152
});
151-
if (mergedConfig.theme) {
152-
return {
153-
...useNestedProp({
154-
userConfig: themes.vue_ui_age_pyramid[mergedConfig.theme] || props.config,
155-
defaultConfig: mergedConfig
156-
}),
157-
}
158-
} else {
153+
154+
const theme = mergedConfig.theme;
155+
if (!theme) return mergedConfig;
156+
157+
if (!isThemeValid.value(mergedConfig)) {
158+
warnInvalidTheme(mergedConfig);
159159
return mergedConfig;
160160
}
161+
162+
const fused = useNestedProp({
163+
userConfig: themes[theme] || props.config,
164+
defaultConfig: mergedConfig
165+
});
166+
167+
const finalConfig = useNestedProp({
168+
userConfig: props.config,
169+
defaultConfig: fused
170+
});
171+
172+
return finalConfig;
161173
}
162174
163175
watch(() => props.config, (_newCfg) => {

‎src/components/vue-ui-bullet.vue‎

Lines changed: 47 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,48 @@
11
<script setup>
2-
import { ref, computed, onMounted, watch, onBeforeUnmount, defineAsyncComponent, toRefs } from "vue";
2+
import {
3+
computed,
4+
defineAsyncComponent,
5+
onBeforeUnmount,
6+
onMounted,
7+
ref,
8+
toRefs,
9+
watch,
10+
} from "vue";
311
import { useConfig } from "../useConfig";
4-
import { XMLNS, createUid, error, getMissingDatasetAttributes, objectIsEmpty, treeShake } from "../lib";
12+
import {
13+
XMLNS,
14+
createUid,
15+
error,
16+
getMissingDatasetAttributes,
17+
objectIsEmpty,
18+
treeShake,
19+
convertColorToHex,
20+
lightenHexColor,
21+
calculateNiceScale,
22+
applyDataLabel,
23+
dataLabel
24+
} from "../lib";
525
import { throttle } from "../canvas-lib";
6-
import { useNestedProp } from "../useNestedProp";
7-
import { convertColorToHex } from "../lib";
8-
import { lightenHexColor } from "../lib";
9-
import { calculateNiceScale } from "../lib";
10-
import { applyDataLabel } from "../lib";
11-
import { dataLabel } from "../lib";
1226
import { usePrinter } from "../usePrinter";
27+
import { useLoading } from "../useLoading";
28+
import { useSvgExport } from "../useSvgExport";
29+
import { useNestedProp } from "../useNestedProp";
30+
import { useResponsive } from "../useResponsive";
31+
import { useThemeCheck } from "../useThemeCheck";
1332
import { useUserOptionState } from "../useUserOptionState";
1433
import { useChartAccessibility } from "../useChartAccessibility";
15-
import themes from "../themes.json";
34+
import themes from "../themes/vue_ui_bullet.json";
1635
import Legend from "../atoms/Legend.vue"; // Must be ready in responsive mode
1736
import Title from "../atoms/Title.vue"; // Must be ready in responsive mode
1837
import img from "../img";
19-
import { useResponsive } from "../useResponsive";
20-
import { useLoading } from "../useLoading";
2138
import BaseScanner from "../atoms/BaseScanner.vue";
22-
import { useSvgExport } from "../useSvgExport";
2339
2440
const PackageVersion = defineAsyncComponent(() => import('../atoms/PackageVersion.vue'));
2541
const PenAndPaper = defineAsyncComponent(() => import('../atoms/PenAndPaper.vue'));
2642
const UserOptions = defineAsyncComponent(() => import('../atoms/UserOptions.vue'));
2743
2844
const { vue_ui_bullet: DEFAULT_CONFIG } = useConfig();
45+
const { isThemeValid, warnInvalidTheme } = useThemeCheck();
2946
3047
const props = defineProps({
3148
config: {
@@ -192,16 +209,26 @@ function prepareConfig() {
192209
userConfig: props.config,
193210
defaultConfig: DEFAULT_CONFIG
194211
});
195-
if (mergedConfig.theme) {
196-
return {
197-
...useNestedProp({
198-
userConfig: themes.vue_ui_bullet[mergedConfig.theme] || props.config,
199-
defaultConfig: mergedConfig
200-
}),
201-
}
202-
} else {
212+
213+
const theme = mergedConfig.theme;
214+
if (!theme) return mergedConfig;
215+
216+
if (!isThemeValid.value(mergedConfig)) {
217+
warnInvalidTheme(mergedConfig);
203218
return mergedConfig;
204219
}
220+
221+
const fused = useNestedProp({
222+
userConfig: themes[theme] || props.config,
223+
defaultConfig: mergedConfig
224+
});
225+
226+
const finalConfig = useNestedProp({
227+
userConfig: props.config,
228+
defaultConfig: fused
229+
});
230+
231+
return finalConfig;
205232
}
206233
207234
const FINAL_CONFIG = ref(prepareConfig());

‎src/components/vue-ui-candlestick.vue‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,13 @@ import { useSvgExport } from "../useSvgExport.js";
3939
import { useNestedProp } from "../useNestedProp";
4040
import { useResponsive } from "../useResponsive";
4141
import { useTimeLabels } from "../useTimeLabels";
42+
import { useThemeCheck } from "../useThemeCheck.js";
4243
import { useUserOptionState } from "../useUserOptionState";
4344
import { useChartAccessibility } from "../useChartAccessibility";
4445
import { useTimeLabelCollision } from "../useTimeLabelCollider";
4546
import img from "../img";
4647
import Title from "../atoms/Title.vue"; // Must be ready in responsive mode
47-
import themes from "../themes.json";
48+
import themes from "../themes/vue_ui_candlestick.json";
4849
import locales from '../locales/locales.json';
4950
import BaseScanner from "../atoms/BaseScanner.vue";
5051
import SlicerPreview from "../atoms/SlicerPreview.vue"; // Must be ready in responsive mode
@@ -59,6 +60,7 @@ const PackageVersion = defineAsyncComponent(() => import('../atoms/PackageVersio
5960
const BaseDraggableDialog = defineAsyncComponent(() => import('../atoms/BaseDraggableDialog.vue'));
6061
6162
const { vue_ui_candlestick: DEFAULT_CONFIG } = useConfig();
63+
const { isThemeValid, warnInvalidTheme } = useThemeCheck();
6264
6365
const props = defineProps({
6466
config: {
@@ -203,12 +205,24 @@ function prepareConfig() {
203205
204206
let finalConfig = {};
205207
206-
if (mergedConfig.theme) {
207-
finalConfig = {
208-
...useNestedProp({
209-
userConfig: themes.vue_ui_candlestick[mergedConfig.theme] || props.config,
208+
const theme = mergedConfig.theme;
209+
210+
if (theme) {
211+
if (!isThemeValid.value(mergedConfig)) {
212+
warnInvalidTheme(mergedConfig);
213+
finalConfig = mergedConfig;
214+
} else {
215+
const fused = useNestedProp({
216+
userConfig: themes[theme] || props.config,
210217
defaultConfig: mergedConfig
211-
}),
218+
});
219+
220+
finalConfig = {
221+
...useNestedProp({
222+
userConfig: props.config,
223+
defaultConfig: fused
224+
}),
225+
}
212226
}
213227
} else {
214228
finalConfig = mergedConfig;

‎src/components/vue-ui-chestnut.vue‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,12 @@ import { useLoading } from "../useLoading";
3636
import { usePrinter } from "../usePrinter";
3737
import { useSvgExport } from "../useSvgExport";
3838
import { useNestedProp } from "../useNestedProp";
39+
import { useThemeCheck } from "../useThemeCheck";
3940
import { useTableResponsive } from "../useTableResponsive";
4041
import { useUserOptionState } from "../useUserOptionState";
4142
import { useChartAccessibility } from "../useChartAccessibility";
4243
import img from "../img";
43-
import themes from "../themes.json";
44+
import themes from "../themes/vue_ui_chestnut.json";
4445
import BaseScanner from "../atoms/BaseScanner.vue";
4546
4647
const BaseIcon = defineAsyncComponent(() => import('../atoms/BaseIcon.vue'));
@@ -50,7 +51,8 @@ const UserOptions = defineAsyncComponent(() => import('../atoms/UserOptions.vue'
5051
const PackageVersion = defineAsyncComponent(() => import('../atoms/PackageVersion.vue'));
5152
const BaseDraggableDialog = defineAsyncComponent(() => import('../atoms/BaseDraggableDialog.vue'));
5253
53-
const { vue_ui_chestnut: DEFAULT_CONFIG } = useConfig()
54+
const { vue_ui_chestnut: DEFAULT_CONFIG } = useConfig();
55+
const { isThemeValid, warnInvalidTheme } = useThemeCheck();
5456
5557
const props = defineProps({
5658
config: {
@@ -199,17 +201,29 @@ function prepareConfig() {
199201
userConfig: props.config,
200202
defaultConfig: DEFAULT_CONFIG
201203
});
202-
if (mergedConfig.theme) {
203-
return {
204-
...useNestedProp({
205-
userConfig: themes.vue_ui_chestnut[mergedConfig.theme] || props.config,
206-
defaultConfig: mergedConfig
207-
}),
208-
customPalette: themePalettes[mergedConfig.theme] || palette
209-
}
210-
} else {
204+
205+
const theme = mergedConfig.theme;
206+
if (!theme) return mergedConfig;
207+
208+
if (!isThemeValid.value(mergedConfig)) {
209+
warnInvalidTheme(mergedConfig);
211210
return mergedConfig;
212211
}
212+
213+
const fused = useNestedProp({
214+
userConfig: themes[theme] || props.config,
215+
defaultConfig: mergedConfig
216+
});
217+
218+
const finalConfig = useNestedProp({
219+
userConfig: props.config,
220+
defaultConfig: fused
221+
});
222+
223+
return {
224+
...finalConfig,
225+
customPalette: finalConfig.customPalette.length ? finalConfig.customPalette : themePalettes[theme] || palette
226+
}
213227
}
214228
215229
watch(() => props.config, (_newCfg) => {

‎src/components/vue-ui-chord.vue‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,13 @@ import { usePrinter } from '../usePrinter';
3636
import { useSvgExport } from '../useSvgExport';
3737
import { useNestedProp } from '../useNestedProp';
3838
import { useResponsive } from '../useResponsive';
39+
import { useThemeCheck } from '../useThemeCheck';
3940
import { useUserOptionState } from '../useUserOptionState';
4041
import { useChartAccessibility } from '../useChartAccessibility';
4142
import img from '../img';
4243
import Shape from '../atoms/Shape.vue';
4344
import Title from '../atoms/Title.vue'; // Must be ready in responsive mode
44-
import themes from "../themes.json";
45+
import themes from "../themes/vue_ui_chord.json";
4546
import Legend from '../atoms/Legend.vue'; // Must be ready in responsive mode
4647
import BaseScanner from '../atoms/BaseScanner.vue';
4748
@@ -54,6 +55,7 @@ const UserOptions = defineAsyncComponent(() => import('../atoms/UserOptions.vue'
5455
const BaseDraggableDialog = defineAsyncComponent(() => import('../atoms/BaseDraggableDialog.vue'));
5556
5657
const { vue_ui_chord: DEFAULT_CONFIG } = useConfig();
58+
const { isThemeValid, warnInvalidTheme } = useThemeCheck();
5759
5860
const props = defineProps({
5961
dataset: {
@@ -165,19 +167,30 @@ function prepareConfig() {
165167
const mergedConfig = useNestedProp({
166168
userConfig: props.config,
167169
defaultConfig: DEFAULT_CONFIG
168-
})
170+
});
169171
170-
if (mergedConfig.theme) {
171-
return {
172-
...useNestedProp({
173-
userConfig: themes.vue_ui_chord[mergedConfig.theme] || props.config,
174-
defaultConfig: mergedConfig
175-
}),
176-
customPalette: themePalettes[mergedConfig.theme] || palette
177-
}
178-
} else {
172+
const theme = mergedConfig.theme;
173+
if (!theme) return mergedConfig;
174+
175+
if (!isThemeValid.value(mergedConfig)) {
176+
warnInvalidTheme(mergedConfig);
179177
return mergedConfig;
180178
}
179+
180+
const fused = useNestedProp({
181+
userConfig: themes[theme] || props.config,
182+
defaultConfig: mergedConfig
183+
});
184+
185+
const finalConfig = useNestedProp({
186+
userConfig: props.config,
187+
defaultConfig: fused
188+
});
189+
190+
return {
191+
...finalConfig,
192+
customPalette: finalConfig.customPalette.length ? finalConfig.customPalette : themePalettes[theme] || palette
193+
};
181194
}
182195
183196
watch(() => props.config, (_newCfg) => {

0 commit comments

Comments
 (0)