Skip to content

Commit 855cde4

Browse files
cviterireicviterirei
committed
refactor objectoverlay
1 parent 01044d6 commit 855cde4

2 files changed

Lines changed: 94 additions & 79 deletions

File tree

‎src/components/objectOverlay/CdrObjectOverlay.vue‎

Lines changed: 68 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -32,74 +32,89 @@ const props = withDefaults(defineProps<ObjectOverlayProps>(), {
3232
tag: 'div',
3333
});
3434
35-
const attrs = computed(() => {
36-
const component: Record<string, string> = {};
37-
const content: Record<string, any> = {};
38-
39-
const componentProperties = [
40-
'position',
41-
'gradient'
42-
];
43-
44-
componentProperties.forEach((property) => {
45-
const prop = props[property as keyof typeof props];
46-
47-
if (typeof prop ==='string') {
48-
component[`data-${property}`] = prop;
49-
} else if (typeof prop === 'object') {
35+
// Helper function to process component properties (position, gradient)
36+
const processComponentProperty = (property: string, prop: any): Record<string, string> => {
37+
const result: Record<string, string> = {};
38+
39+
try {
40+
if (typeof prop === 'string') {
41+
result[`data-${property}`] = prop;
42+
} else if (typeof prop === 'object' && prop !== null) {
5043
Object.entries(prop).forEach(([mq, value]) => {
5144
if (mq === 'xs') {
52-
component[`data-${property}`] = value;
45+
result[`data-${property}`] = String(value);
5346
} else {
54-
component[`data-${property}-${mq}`] = value;
47+
result[`data-${property}-${mq}`] = String(value);
5548
}
5649
});
5750
}
58-
});
51+
} catch (error) {
52+
console.error(`Error processing ${property}:`, error);
53+
}
54+
55+
return result;
56+
};
57+
58+
// Helper function to create CSS variable references
59+
const createCssVar = (space: string): string => `var(--cdr-space-${space})`;
60+
61+
// Helper function to process content properties (margin, padding)
62+
const processContentProperty = (
63+
property: string,
64+
prop: string | string[] | Record<string, string | string[]>,
65+
existingStyle: Record<string, string> = {}
66+
): Record<string, string> => {
67+
const style = { ...existingStyle };
68+
69+
try {
70+
if (typeof prop === 'string') {
71+
style[`--${property}`] = createCssVar(prop);
72+
} else if (Array.isArray(prop)) {
73+
style[`--${property}`] = prop.map(createCssVar).join(' ');
74+
} else if (typeof prop === 'object' && prop !== null) {
75+
Object.entries(prop).forEach(([mq, value]) => {
76+
const val = typeof value === 'string'
77+
? createCssVar(value)
78+
: (value as string[]).map(createCssVar).join(' ');
5979
60-
const contentProperties = [
61-
'margin',
62-
'padding'
63-
]
80+
style[`--${property}-${mq}`] = val;
81+
});
82+
}
83+
} catch (error) {
84+
console.error(`Error processing ${property}:`, error);
85+
}
86+
87+
return style;
88+
};
6489
65-
contentProperties.forEach((property) => {
66-
const prop = props[property as keyof typeof props];
90+
const attrs = computed(() => {
91+
const component: Record<string, string> = {};
92+
const content: Record<string, any> = { style: {} };
6793
68-
if (typeof prop === 'string') {
69-
content.style = {
70-
...(content.style || {}),
71-
[`--${property}`]: `var(--cdr-space-${prop})`
72-
};
73-
} else if (typeof prop === 'object') {
74-
if (Array.isArray(prop)) {
75-
content.style = {
76-
...content.style,
77-
[`--${property}`]: prop.map(
78-
(val) => `var(--cdr-space-${val})`
79-
).join(' ')
80-
};
81-
} else {
82-
Object.entries(prop).forEach(([mq, value]) => {
83-
const val = typeof value === 'string' ?
84-
`var(--cdr-space-${value})`
85-
:
86-
value.map(
87-
(v: string) => `var(--cdr-space-${v})`
88-
).join(' ');
94+
// Process component properties
95+
['position', 'gradient'].forEach((property) => {
96+
const prop = props[property as keyof typeof props];
97+
if (prop) {
98+
Object.assign(component, processComponentProperty(property, prop));
99+
}
100+
});
89101
90-
content.style = {
91-
...content.style,
92-
[`--${property}-${mq}`]: val
93-
};
94-
});
95-
}
96-
}
102+
// Process content properties
103+
['margin', 'padding'].forEach((property) => {
104+
const prop = props[property as keyof typeof props];
105+
if (prop) {
106+
content.style = processContentProperty(
107+
property,
108+
prop as string | string[] | Record<string, string | string[]>,
109+
content.style
110+
);
111+
}
97112
});
98113
99114
return {
100115
component,
101116
content
102-
}
117+
};
103118
});
104119
105120
const styles = useCssModule();

‎src/components/objectOverlay/styles/CdrObjectOverlay.module.scss‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use 'sass:map';
12
@import '../../../styles/settings/index';
23

34
$breakpoints: (
@@ -57,11 +58,27 @@ $gradients: (
5758
}
5859
}
5960

61+
// Create a mixin for breakpoints
62+
@mixin at-breakpoint($breakpoint) {
63+
@if $breakpoint == '' {
64+
@content;
65+
} @else {
66+
@media (min-width: map.get($breakpoints, $breakpoint)) {
67+
@content;
68+
}
69+
}
70+
}
71+
6072
// Generate positions for all breakpoints
6173
@each $breakpoint-suffix, $min-width in $breakpoints {
62-
@if $breakpoint-suffix == '' {
74+
@include at-breakpoint($breakpoint-suffix) {
75+
// Position styles
6376
@each $position, $properties in $positions {
64-
&[data-position="#{$position}"] &__content {
77+
$selector: if($breakpoint-suffix == '',
78+
'[data-position="#{$position}"]',
79+
'[data-position#{$breakpoint-suffix}="#{$position}"]');
80+
81+
&#{$selector} &__content {
6582
@each $prop, $value in $properties {
6683
#{$prop}: $value;
6784
}
@@ -74,31 +91,14 @@ $gradients: (
7491
}
7592
}
7693

94+
// Gradient styles
7795
@each $gradient, $direction in $gradients {
78-
&[data-gradient="#{$gradient}"]::before {
79-
background: $direction;
80-
}
81-
}
82-
} @else {
83-
@media (min-width: $min-width) {
84-
@each $position, $properties in $positions {
85-
&[data-position#{$breakpoint-suffix}="#{$position}"] &__content {
86-
@each $prop, $value in $properties {
87-
#{$prop}: $value;
88-
}
89-
// Set unused positions to auto
90-
@each $side in top, right, bottom, left {
91-
@if not map-has-key($properties, $side) {
92-
#{$side}: auto;
93-
}
94-
}
95-
}
96-
}
97-
98-
@each $gradient, $direction in $gradients {
99-
&[data-gradient#{$breakpoint-suffix}="#{$gradient}"]::before {
100-
background: $direction;
101-
}
96+
$selector: if($breakpoint-suffix == '',
97+
'[data-gradient="#{$gradient}"]',
98+
'[data-gradient#{$breakpoint-suffix}="#{$gradient}"]');
99+
100+
&#{$selector}::before {
101+
background-image: $direction;
102102
}
103103
}
104104
}

0 commit comments

Comments
 (0)