sun-card-design 1.2.2 → 1.2.4

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.
Files changed (64) hide show
  1. package/dist/mobile/sun-card-design-mobile.es10.js +13 -7
  2. package/dist/mobile/sun-card-design-mobile.es11.js +19 -12
  3. package/dist/mobile/sun-card-design-mobile.es12.js +11 -9
  4. package/dist/mobile/sun-card-design-mobile.es13.js +28 -22
  5. package/dist/mobile/sun-card-design-mobile.es14.js +13 -7
  6. package/dist/mobile/sun-card-design-mobile.es15.js +43 -23
  7. package/dist/mobile/sun-card-design-mobile.es16.js +13 -7
  8. package/dist/mobile/sun-card-design-mobile.es17.js +14 -8
  9. package/dist/mobile/sun-card-design-mobile.es18.js +14 -8
  10. package/dist/mobile/sun-card-design-mobile.es19.js +21 -11
  11. package/dist/mobile/sun-card-design-mobile.es20.js +45 -17
  12. package/dist/mobile/sun-card-design-mobile.es21.js +16 -9
  13. package/dist/mobile/sun-card-design-mobile.es22.js +19 -12
  14. package/dist/mobile/sun-card-design-mobile.es23.js +16 -9
  15. package/dist/mobile/sun-card-design-mobile.es24.js +80 -21
  16. package/dist/mobile/sun-card-design-mobile.es3.js +41 -28
  17. package/dist/mobile/sun-card-design-mobile.es37.js +19 -18
  18. package/dist/mobile/sun-card-design-mobile.es4.js +54 -32
  19. package/dist/mobile/sun-card-design-mobile.es5.js +27 -18
  20. package/dist/mobile/sun-card-design-mobile.es55.js +26 -29
  21. package/dist/mobile/sun-card-design-mobile.es56.js +21 -20
  22. package/dist/mobile/sun-card-design-mobile.es57.js +44 -25
  23. package/dist/mobile/sun-card-design-mobile.es58.js +43 -23
  24. package/dist/mobile/sun-card-design-mobile.es59.js +38 -21
  25. package/dist/mobile/sun-card-design-mobile.es6.js +32 -18
  26. package/dist/mobile/sun-card-design-mobile.es60.js +38 -21
  27. package/dist/mobile/sun-card-design-mobile.es65.js +33 -0
  28. package/dist/mobile/sun-card-design-mobile.es7.js +41 -35
  29. package/dist/mobile/sun-card-design-mobile.es8.js +28 -22
  30. package/dist/mobile/sun-card-design-mobile.es9.js +21 -12
  31. package/dist/pc/sun-card-design-pc.es10.js +13 -7
  32. package/dist/pc/sun-card-design-pc.es11.js +19 -12
  33. package/dist/pc/sun-card-design-pc.es12.js +11 -9
  34. package/dist/pc/sun-card-design-pc.es13.js +28 -22
  35. package/dist/pc/sun-card-design-pc.es14.js +13 -7
  36. package/dist/pc/sun-card-design-pc.es15.js +43 -23
  37. package/dist/pc/sun-card-design-pc.es16.js +13 -7
  38. package/dist/pc/sun-card-design-pc.es17.js +14 -8
  39. package/dist/pc/sun-card-design-pc.es18.js +14 -8
  40. package/dist/pc/sun-card-design-pc.es19.js +21 -11
  41. package/dist/pc/sun-card-design-pc.es2.js +11 -2
  42. package/dist/pc/sun-card-design-pc.es20.js +45 -17
  43. package/dist/pc/sun-card-design-pc.es21.js +16 -9
  44. package/dist/pc/sun-card-design-pc.es22.js +19 -12
  45. package/dist/pc/sun-card-design-pc.es23.js +16 -9
  46. package/dist/pc/sun-card-design-pc.es24.js +80 -21
  47. package/dist/pc/sun-card-design-pc.es3.js +41 -28
  48. package/dist/pc/sun-card-design-pc.es37.js +19 -18
  49. package/dist/pc/sun-card-design-pc.es4.js +54 -32
  50. package/dist/pc/sun-card-design-pc.es5.js +27 -18
  51. package/dist/pc/sun-card-design-pc.es55.js +26 -29
  52. package/dist/pc/sun-card-design-pc.es56.js +21 -20
  53. package/dist/pc/sun-card-design-pc.es57.js +44 -25
  54. package/dist/pc/sun-card-design-pc.es58.js +43 -23
  55. package/dist/pc/sun-card-design-pc.es59.js +38 -21
  56. package/dist/pc/sun-card-design-pc.es6.js +32 -18
  57. package/dist/pc/sun-card-design-pc.es60.js +38 -21
  58. package/dist/pc/sun-card-design-pc.es65.js +33 -0
  59. package/dist/pc/sun-card-design-pc.es7.js +41 -35
  60. package/dist/pc/sun-card-design-pc.es8.js +28 -22
  61. package/dist/pc/sun-card-design-pc.es9.js +21 -12
  62. package/dist/public/sun-card-design.css +1 -1
  63. package/package.json +1 -1
  64. package/dist/mobile/sun-card-design-mobile.es61.js +0 -162
@@ -1,13 +1,26 @@
1
- import { ref, onMounted, nextTick, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, createElementVNode } from "vue";
1
+ import { useCssVars, computed, ref, onMounted, nextTick, onBeforeUnmount, createElementBlock, openBlock, createElementVNode } from "vue";
2
2
  import { previewData } from "./sun-card-design-pc.es26.js";
3
3
  import * as echarts from "echarts";
4
4
  /* empty css */
5
5
  import _export_sfc from "./sun-card-design-pc.es28.js";
6
+ const _hoisted_1 = { class: "barChart-table" };
6
7
  const _sfc_main = {
7
8
  __name: "barChartComp",
8
9
  props: ["record"],
9
10
  setup(__props) {
11
+ useCssVars((_ctx) => ({
12
+ "v69bb11f9": mainPadding.value,
13
+ "fdb12af2": chartWidth.value,
14
+ "ec1226f4": chartHeight.value
15
+ }));
10
16
  const props = __props;
17
+ const mainPadding = computed(() => {
18
+ const tb = props.record.options?.style?.tbPadding ?? 0;
19
+ const lr = props.record.options?.style?.lrPadding ?? 0;
20
+ return `${tb}px ${lr}px`;
21
+ });
22
+ const chartWidth = computed(() => props.record.options.style.width || "100%");
23
+ const chartHeight = computed(() => props.record.options.style.height || "300px");
11
24
  const chartDom = ref(null);
12
25
  const myChart = ref(null);
13
26
  onMounted(async () => {
@@ -54,12 +67,33 @@ const _sfc_main = {
54
67
  ax.data = resolveArrayFromVariable(ax.data);
55
68
  }
56
69
  });
57
- const seriesCfg = deepClone(props.record.options.seriesConfig || []);
58
- seriesCfg.forEach((s) => {
59
- if (typeof s.data === "string") {
60
- s.data = resolveArrayFromVariable(s.data);
70
+ const originalSeriesCfg = props.record.options.seriesConfig || [];
71
+ const seriesCfg = deepClone(originalSeriesCfg);
72
+ const firstSeriesData = originalSeriesCfg?.[0]?.data;
73
+ const dyData = typeof firstSeriesData === "string" ? (previewData.variableList || []).find((v) => v.name === firstSeriesData) : null;
74
+ if (dyData) {
75
+ const dyDataList = typeof dyData.defaultValue === "string" ? parseJsonSafe(dyData.defaultValue) : dyData.defaultValue;
76
+ if (Array.isArray(dyDataList) && dyDataList.length > 0) {
77
+ dyDataList.forEach((s, index) => {
78
+ if (originalSeriesCfg[index]) {
79
+ seriesCfg[index] = JSON.parse(JSON.stringify(originalSeriesCfg[index]));
80
+ seriesCfg[index].data = s.data;
81
+ seriesCfg[index].name = s.name;
82
+ } else {
83
+ seriesCfg[index] = JSON.parse(JSON.stringify(originalSeriesCfg[0] || {}));
84
+ seriesCfg[index].data = s.data;
85
+ seriesCfg[index].name = s.name;
86
+ }
87
+ });
61
88
  }
62
- });
89
+ } else {
90
+ seriesCfg.forEach((s) => {
91
+ if (typeof s.data === "string") {
92
+ s.data = resolveArrayFromVariable(s.data);
93
+ }
94
+ });
95
+ }
96
+ console.error(seriesCfg);
63
97
  return {
64
98
  title: props.record.options.titleConfig,
65
99
  tooltip: props.record.options.tooltipConfig,
@@ -108,23 +142,17 @@ const _sfc_main = {
108
142
  initRender();
109
143
  };
110
144
  return (_ctx, _cache) => {
111
- return openBlock(), createElementBlock("div", {
112
- class: "barChart-table",
113
- style: normalizeStyle({ padding: `${props.record.options?.style?.tbPadding || 0}px ${props.record.options?.style?.lrPadding || 0}px` })
114
- }, [
145
+ return openBlock(), createElementBlock("div", _hoisted_1, [
115
146
  createElementVNode("div", {
116
147
  ref_key: "chartDom",
117
148
  ref: chartDom,
118
- style: normalizeStyle({
119
- width: props.record.options.style.width,
120
- height: props.record.options.style.height
121
- })
122
- }, null, 4)
123
- ], 4);
149
+ class: "chart-container"
150
+ }, null, 512)
151
+ ]);
124
152
  };
125
153
  }
126
154
  };
127
- const BarChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bdc1c7d2"]]);
155
+ const BarChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7dec52de"]]);
128
156
  export {
129
157
  BarChart as default
130
158
  };
@@ -1,4 +1,4 @@
1
- import { ref, computed, onMounted, onUnmounted, createElementBlock, openBlock, normalizeStyle } from "vue";
1
+ import { useCssVars, computed, ref, onMounted, onUnmounted, createElementBlock, openBlock } from "vue";
2
2
  import * as THREE from "three";
3
3
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
4
4
  import { CSS2DRenderer, CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer.js";
@@ -9,6 +9,11 @@ const _sfc_main = {
9
9
  __name: "barChart3dComp",
10
10
  props: ["record"],
11
11
  setup(__props) {
12
+ useCssVars((_ctx) => ({
13
+ "a570858a": chartWidth.value,
14
+ "v3c3e1f5c": chartHeight.value,
15
+ "v7cb5d476": mainPadding.value
16
+ }));
12
17
  const props = __props;
13
18
  const containerRef = ref(null);
14
19
  let renderer = null;
@@ -29,6 +34,13 @@ const _sfc_main = {
29
34
  height: style.height || "260px"
30
35
  };
31
36
  });
37
+ const mainPadding = computed(() => {
38
+ const tb = props.record.options?.style?.tbPadding ?? 0;
39
+ const lr = props.record.options?.style?.lrPadding ?? 0;
40
+ return `${tb}px ${lr}px`;
41
+ });
42
+ const chartWidth = computed(() => chartStyle.value.width);
43
+ const chartHeight = computed(() => chartStyle.value.height);
32
44
  function getChartConfig() {
33
45
  const options = props.record?.options || {};
34
46
  const xAxis = options.xAxisConfig[0];
@@ -360,17 +372,12 @@ const _sfc_main = {
360
372
  return openBlock(), createElementBlock("div", {
361
373
  class: "mian-barChart3d",
362
374
  ref_key: "containerRef",
363
- ref: containerRef,
364
- style: normalizeStyle({
365
- width: chartStyle.value.width,
366
- height: chartStyle.value.height,
367
- padding: `${props.record.options?.style?.tbPadding || 0}px ${props.record.options?.style?.lrPadding || 0}px`
368
- })
369
- }, null, 4);
375
+ ref: containerRef
376
+ }, null, 512);
370
377
  };
371
378
  }
372
379
  };
373
- const BarChart3D = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6b648570"]]);
380
+ const BarChart3D = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-248d2e73"]]);
374
381
  export {
375
382
  BarChart3D as default
376
383
  };
@@ -1,13 +1,26 @@
1
- import { ref, onMounted, nextTick, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, createElementVNode } from "vue";
1
+ import { useCssVars, computed, ref, onMounted, nextTick, onBeforeUnmount, createElementBlock, openBlock, createElementVNode } from "vue";
2
2
  import { previewData } from "./sun-card-design-pc.es26.js";
3
3
  import * as echarts from "echarts";
4
4
  /* empty css */
5
5
  import _export_sfc from "./sun-card-design-pc.es28.js";
6
+ const _hoisted_1 = { class: "pieChart-table" };
6
7
  const _sfc_main = {
7
8
  __name: "pieChartComp",
8
9
  props: ["record"],
9
10
  setup(__props) {
11
+ useCssVars((_ctx) => ({
12
+ "v25b54c2e": mainPadding.value,
13
+ "v645c6497": chartWidth.value,
14
+ "v0d613476": chartHeight.value
15
+ }));
10
16
  const props = __props;
17
+ const mainPadding = computed(() => {
18
+ const tb = props.record.options?.style?.tbPadding ?? 0;
19
+ const lr = props.record.options?.style?.lrPadding ?? 0;
20
+ return `${tb}px ${lr}px`;
21
+ });
22
+ const chartWidth = computed(() => props.record.options.style.width || "100%");
23
+ const chartHeight = computed(() => props.record.options.style.height || "300px");
11
24
  const chartDom = ref(null);
12
25
  const myChart = ref(null);
13
26
  onMounted(async () => {
@@ -105,23 +118,17 @@ const _sfc_main = {
105
118
  initRender();
106
119
  };
107
120
  return (_ctx, _cache) => {
108
- return openBlock(), createElementBlock("div", {
109
- class: "pieChart-table",
110
- style: normalizeStyle({ padding: `${props.record.options?.style?.tbPadding || 0}px ${props.record.options?.style?.lrPadding || 0}px` })
111
- }, [
121
+ return openBlock(), createElementBlock("div", _hoisted_1, [
112
122
  createElementVNode("div", {
113
123
  ref_key: "chartDom",
114
124
  ref: chartDom,
115
- style: normalizeStyle({
116
- width: props.record.options.style.width,
117
- height: props.record.options.style.height
118
- })
119
- }, null, 4)
120
- ], 4);
125
+ class: "chart-container"
126
+ }, null, 512)
127
+ ]);
121
128
  };
122
129
  }
123
130
  };
124
- const PieChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-28332879"]]);
131
+ const PieChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1b08cbef"]]);
125
132
  export {
126
133
  PieChart as default
127
134
  };
@@ -1,4 +1,4 @@
1
- import { ref, computed, onMounted, onUnmounted, createElementBlock, openBlock, normalizeStyle } from "vue";
1
+ import { useCssVars, computed, ref, onMounted, onUnmounted, createElementBlock, openBlock } from "vue";
2
2
  import * as THREE from "three";
3
3
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
4
4
  import { CSS2DRenderer, CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer.js";
@@ -9,6 +9,11 @@ const _sfc_main = {
9
9
  __name: "pieChart3dComp",
10
10
  props: ["record"],
11
11
  setup(__props) {
12
+ useCssVars((_ctx) => ({
13
+ "v32d4b67a": chartWidth.value,
14
+ "v5b600c6c": chartHeight.value,
15
+ "v9bd7c186": mainPadding.value
16
+ }));
12
17
  const props = __props;
13
18
  const containerRef = ref(null);
14
19
  let renderer = null;
@@ -27,6 +32,13 @@ const _sfc_main = {
27
32
  height: style.height || "260px"
28
33
  };
29
34
  });
35
+ const mainPadding = computed(() => {
36
+ const tb = props.record.options?.style?.tbPadding ?? 0;
37
+ const lr = props.record.options?.style?.lrPadding ?? 0;
38
+ return `${tb}px ${lr}px`;
39
+ });
40
+ const chartWidth = computed(() => chartStyle.value.width);
41
+ const chartHeight = computed(() => chartStyle.value.height);
30
42
  function getPieConfig() {
31
43
  const options = props.record?.options || {};
32
44
  const series = Array.isArray(options?.seriesConfig) && options.seriesConfig[0] ? options.seriesConfig[0] : {
@@ -333,17 +345,12 @@ const _sfc_main = {
333
345
  return openBlock(), createElementBlock("div", {
334
346
  class: "main-pieChart3d",
335
347
  ref_key: "containerRef",
336
- ref: containerRef,
337
- style: normalizeStyle({
338
- width: chartStyle.value.width,
339
- height: chartStyle.value.height,
340
- padding: `${props.record.options?.style?.tbPadding || 0}px ${props.record.options?.style?.lrPadding || 0}px`
341
- })
342
- }, null, 4);
348
+ ref: containerRef
349
+ }, null, 512);
343
350
  };
344
351
  }
345
352
  };
346
- const PieChart3D = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b39e3b32"]]);
353
+ const PieChart3D = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-98ee1777"]]);
347
354
  export {
348
355
  PieChart3D as default
349
356
  };
@@ -1,13 +1,26 @@
1
- import { ref, onMounted, nextTick, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, createElementVNode } from "vue";
1
+ import { useCssVars, computed, ref, onMounted, nextTick, onBeforeUnmount, watch, createElementBlock, openBlock, createElementVNode } from "vue";
2
2
  import { previewData } from "./sun-card-design-pc.es26.js";
3
3
  import * as echarts from "echarts";
4
4
  /* empty css */
5
5
  import _export_sfc from "./sun-card-design-pc.es28.js";
6
+ const _hoisted_1 = { class: "lineChart-table" };
6
7
  const _sfc_main = {
7
8
  __name: "lineChartComp",
8
9
  props: ["record"],
9
10
  setup(__props) {
11
+ useCssVars((_ctx) => ({
12
+ "v6ebd4fce": mainPadding.value,
13
+ "v26a8c3dc": chartWidth.value,
14
+ "e20dab4a": chartHeight.value
15
+ }));
10
16
  const props = __props;
17
+ const mainPadding = computed(() => {
18
+ const tb = props.record.options?.style?.tbPadding ?? 0;
19
+ const lr = props.record.options?.style?.lrPadding ?? 0;
20
+ return `${tb}px ${lr}px`;
21
+ });
22
+ const chartWidth = computed(() => props.record.options.style.width || "100%");
23
+ const chartHeight = computed(() => props.record.options.style.height || "300px");
11
24
  const chartDom = ref(null);
12
25
  const myChart = ref(null);
13
26
  onMounted(async () => {
@@ -54,14 +67,44 @@ const _sfc_main = {
54
67
  ax.data = resolveArrayFromVariable(ax.data);
55
68
  }
56
69
  });
57
- const seriesCfg = deepClone(props.record.options.seriesConfig || []);
58
- seriesCfg.forEach((s) => {
59
- if (typeof s.data === "string") {
60
- s.data = resolveArrayFromVariable(s.data);
70
+ const originalSeriesCfg = props.record.options.seriesConfig || [];
71
+ const seriesCfg = deepClone(originalSeriesCfg);
72
+ const firstSeriesData = originalSeriesCfg?.[0]?.data;
73
+ const dyData = typeof firstSeriesData === "string" ? (previewData.variableList || []).find((v) => v.name === firstSeriesData) : null;
74
+ if (dyData) {
75
+ const dyDataList = typeof dyData.defaultValue === "string" ? parseJsonSafe(dyData.defaultValue) : Array.isArray(dyData.defaultValue) ? dyData.defaultValue : null;
76
+ if (Array.isArray(dyDataList) && dyDataList.length > 0) {
77
+ dyDataList.forEach((s, index) => {
78
+ if (originalSeriesCfg[index]) {
79
+ seriesCfg[index] = JSON.parse(JSON.stringify(originalSeriesCfg[index]));
80
+ seriesCfg[index].data = s.data || [];
81
+ seriesCfg[index].name = s.name || `系列${index + 1}`;
82
+ } else {
83
+ const baseConfig = originalSeriesCfg[0] || { type: "line" };
84
+ seriesCfg[index] = JSON.parse(JSON.stringify(baseConfig));
85
+ seriesCfg[index].data = s.data || [];
86
+ seriesCfg[index].name = s.name || `系列${index + 1}`;
87
+ }
88
+ if (!seriesCfg[index].type) seriesCfg[index].type = "line";
89
+ if (seriesCfg[index].showSymbol === void 0) seriesCfg[index].showSymbol = true;
90
+ });
61
91
  }
62
- if (!s.type) s.type = "line";
63
- if (!s.showSymbol) s.showSymbol = true;
64
- });
92
+ } else {
93
+ seriesCfg.forEach((s) => {
94
+ if (typeof s.data === "string") {
95
+ s.data = resolveArrayFromVariable(s.data);
96
+ }
97
+ if (!s.type) s.type = "line";
98
+ if (s.showSymbol === void 0) s.showSymbol = true;
99
+ });
100
+ }
101
+ if (!seriesCfg || seriesCfg.length === 0) {
102
+ seriesCfg.push({
103
+ type: "line",
104
+ data: [],
105
+ showSymbol: true
106
+ });
107
+ }
65
108
  return {
66
109
  title: props.record.options.titleConfig,
67
110
  tooltip: props.record.options.tooltipConfig,
@@ -73,11 +116,14 @@ const _sfc_main = {
73
116
  };
74
117
  };
75
118
  const applyOption = () => {
76
- if (!myChart.value) return;
119
+ if (!myChart.value || !chartDom.value) return;
77
120
  try {
78
121
  const opt = buildOption();
79
- myChart.value.setOption(opt, true);
122
+ if (opt && opt.series && Array.isArray(opt.series) && opt.series.length > 0) {
123
+ myChart.value.setOption(opt, true);
124
+ }
80
125
  } catch (e) {
126
+ console.error("Chart applyOption error:", e);
81
127
  void reinitChart();
82
128
  }
83
129
  };
@@ -109,24 +155,37 @@ const _sfc_main = {
109
155
  await nextTick();
110
156
  initRender();
111
157
  };
158
+ watch(
159
+ () => [
160
+ props.record.options.titleConfig,
161
+ props.record.options.tooltipConfig,
162
+ props.record.options.legendConfig,
163
+ props.record.options.gridConfig,
164
+ props.record.options.xAxisConfig,
165
+ props.record.options.yAxisConfig,
166
+ props.record.options.seriesConfig,
167
+ previewData.variableList
168
+ // 变量发生变化也要重算
169
+ ],
170
+ () => {
171
+ if (myChart.value) {
172
+ applyOption();
173
+ }
174
+ },
175
+ { deep: true }
176
+ );
112
177
  return (_ctx, _cache) => {
113
- return openBlock(), createElementBlock("div", {
114
- class: "lineChart-table",
115
- style: normalizeStyle({ padding: `${props.record.options?.style?.tbPadding || 0}px ${props.record.options?.style?.lrPadding || 0}px` })
116
- }, [
178
+ return openBlock(), createElementBlock("div", _hoisted_1, [
117
179
  createElementVNode("div", {
118
180
  ref_key: "chartDom",
119
181
  ref: chartDom,
120
- style: normalizeStyle({
121
- width: props.record.options.style.width,
122
- height: props.record.options.style.height
123
- })
124
- }, null, 4)
125
- ], 4);
182
+ class: "chart-container"
183
+ }, null, 512)
184
+ ]);
126
185
  };
127
186
  }
128
187
  };
129
- const LineChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c3a80733"]]);
188
+ const LineChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-98c749fb"]]);
130
189
  export {
131
190
  LineChart as default
132
191
  };
@@ -1,11 +1,28 @@
1
- import { createElementBlock, openBlock, normalizeStyle, createCommentVNode, createElementVNode, toDisplayString, unref } from "vue";
1
+ import { useCssVars, computed, createElementBlock, openBlock, createCommentVNode, createElementVNode, toDisplayString, unref } from "vue";
2
2
  import { renderTextByVariables } from "./sun-card-design-pc.es26.js";
3
3
  /* empty css */
4
4
  import _export_sfc from "./sun-card-design-pc.es28.js";
5
+ const _hoisted_1 = { class: "main-title" };
6
+ const _hoisted_2 = {
7
+ key: 0,
8
+ class: "line"
9
+ };
10
+ const _hoisted_3 = { class: "title-text" };
5
11
  const _sfc_main = {
6
12
  __name: "titleComp",
7
13
  props: ["record", "columnsIndex"],
8
14
  setup(__props) {
15
+ useCssVars((_ctx) => ({
16
+ "c2791288": mainPadding.value,
17
+ "v4447debe": mainJustifyContent.value,
18
+ "b78e19c4": lineBackground.value,
19
+ "v23ce99d6": lineWidth.value,
20
+ "v3c35a717": lineHeight.value,
21
+ "v43484464": lineBorderRadius.value,
22
+ "v8adc6dc4": lineMarginRight.value,
23
+ "v6ef5dde8": titleFontSize.value,
24
+ "v2097d672": titleColor.value
25
+ }));
9
26
  const props = __props;
10
27
  const formatPx = (value, fallback) => {
11
28
  const fallbackValue = typeof fallback === "number" ? `${fallback}px` : fallback;
@@ -27,37 +44,33 @@ const _sfc_main = {
27
44
  };
28
45
  return obj[props.record.options.style.textAlign];
29
46
  };
47
+ const mainPadding = computed(() => {
48
+ const tb = props.record.options?.style?.tbPadding ?? 0;
49
+ const lr = props.record.options?.style?.lrPadding ?? 0;
50
+ return `${tb}px ${lr}px`;
51
+ });
52
+ const mainJustifyContent = computed(() => getAlign());
53
+ const lineBackground = computed(() => props.record.options.hasLineStyle?.background || "transparent");
54
+ const lineWidth = computed(() => formatPx(props.record.options.hasLineStyle?.width, 5));
55
+ const lineHeight = computed(
56
+ () => formatPx(
57
+ props.record.options.hasLineStyle?.height,
58
+ props.record.options.style.fontSize ?? 16
59
+ )
60
+ );
61
+ const lineBorderRadius = computed(() => formatPx(props.record.options.hasLineStyle?.borderRadius, 1));
62
+ const lineMarginRight = computed(() => formatPx(props.record.options.hasLineStyle?.marginRight, 6));
63
+ const titleFontSize = computed(() => `${props.record.options.style.fontSize}px`);
64
+ const titleColor = computed(() => props.record.options.style.color);
30
65
  return (_ctx, _cache) => {
31
- return openBlock(), createElementBlock("div", {
32
- class: "main-title",
33
- style: normalizeStyle({ justifyContent: getAlign(), padding: `${props.record.options?.style?.tbPadding || 0}px ${props.record.options?.style?.lrPadding || 0}px` })
34
- }, [
35
- props.record.options.hasLine ? (openBlock(), createElementBlock("div", {
36
- key: 0,
37
- class: "line",
38
- style: normalizeStyle({
39
- background: props.record.options.hasLineStyle.background,
40
- width: formatPx(props.record.options.hasLineStyle?.width, 5),
41
- height: formatPx(
42
- props.record.options.hasLineStyle?.height,
43
- props.record.options.style.fontSize ?? 16
44
- ),
45
- borderRadius: formatPx(props.record.options.hasLineStyle?.borderRadius, 1),
46
- marginRight: formatPx(props.record.options.hasLineStyle?.marginRight, 6)
47
- })
48
- }, null, 4)) : createCommentVNode("", true),
49
- createElementVNode("div", {
50
- style: normalizeStyle({
51
- fontWeight: "500",
52
- fontSize: props.record.options.style.fontSize + "px",
53
- color: props.record.options.style.color
54
- })
55
- }, toDisplayString(unref(renderTextByVariables)(props.record.options.defaultValue, props.columnsIndex)), 5)
56
- ], 4);
66
+ return openBlock(), createElementBlock("div", _hoisted_1, [
67
+ props.record.options.hasLine ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("", true),
68
+ createElementVNode("div", _hoisted_3, toDisplayString(unref(renderTextByVariables)(props.record.options.defaultValue, props.columnsIndex)), 1)
69
+ ]);
57
70
  };
58
71
  }
59
72
  };
60
- const Title = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1093ec93"]]);
73
+ const Title = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1857c02b"]]);
61
74
  export {
62
75
  Title as default
63
76
  };
@@ -1,17 +1,22 @@
1
- import { computed, ref, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, createElementVNode, normalizeClass } from "vue";
1
+ import { useCssVars, computed, ref, onMounted, onBeforeUnmount, createElementBlock, openBlock, createElementVNode, normalizeClass } from "vue";
2
2
  /* empty css */
3
3
  import _export_sfc from "./sun-card-design-pc.es28.js";
4
- const _hoisted_1 = ["src"];
5
- const _hoisted_2 = { class: "controls" };
4
+ const _hoisted_1 = { class: "custom-player" };
5
+ const _hoisted_2 = ["src"];
6
+ const _hoisted_3 = { class: "controls" };
6
7
  const _sfc_main = {
7
8
  __name: "audio",
8
9
  props: ["src", "playBtnColor", "progressColor"],
9
10
  setup(__props) {
10
- const props = __props;
11
- const rootStyle = computed(() => ({
12
- "--play-btn-color": props.playBtnColor || "#4a6bff",
13
- "--progress-color": props.progressColor || "#409eff"
11
+ useCssVars((_ctx) => ({
12
+ "v5a9e689c": playBtnColorValue.value,
13
+ "v6bf7e675": progressColorValue.value,
14
+ "v317312bf": progressWidth.value
14
15
  }));
16
+ const props = __props;
17
+ const playBtnColorValue = computed(() => props.playBtnColor || "#4a6bff");
18
+ const progressColorValue = computed(() => props.progressColor || "#409eff");
19
+ const progressWidth = computed(() => progressPercent.value + "%");
15
20
  const audioRef = ref();
16
21
  const playBtnRef = ref(null);
17
22
  const progressContainerRef = ref(null);
@@ -84,16 +89,13 @@ const _sfc_main = {
84
89
  audio.removeEventListener("loadedmetadata", updateProgress);
85
90
  });
86
91
  return (_ctx, _cache) => {
87
- return openBlock(), createElementBlock("div", {
88
- class: "custom-player",
89
- style: normalizeStyle(rootStyle.value)
90
- }, [
92
+ return openBlock(), createElementBlock("div", _hoisted_1, [
91
93
  createElementVNode("audio", {
92
94
  ref_key: "audioRef",
93
95
  ref: audioRef,
94
96
  src: props.src
95
- }, null, 8, _hoisted_1),
96
- createElementVNode("div", _hoisted_2, [
97
+ }, null, 8, _hoisted_2),
98
+ createElementVNode("div", _hoisted_3, [
97
99
  createElementVNode("button", {
98
100
  class: normalizeClass(["play-btn", { paused: isPlaying.value }]),
99
101
  ref_key: "playBtnRef",
@@ -110,16 +112,15 @@ const _sfc_main = {
110
112
  createElementVNode("div", {
111
113
  class: "progress-bar",
112
114
  ref_key: "progressBarRef",
113
- ref: progressBarRef,
114
- style: normalizeStyle({ width: progressPercent.value + "%" })
115
- }, null, 4)
115
+ ref: progressBarRef
116
+ }, null, 512)
116
117
  ], 544)
117
118
  ])
118
- ], 4);
119
+ ]);
119
120
  };
120
121
  }
121
122
  };
122
- const Audio = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f85fd551"]]);
123
+ const Audio = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bcdfd85b"]]);
123
124
  export {
124
125
  Audio as default
125
126
  };