Skip to content

Commit aa3654a

Browse files
siddacoolsiddacool
committed
Merge branch 'customize-panel-1'
2 parents 0bb597a + dc830fc commit aa3654a

File tree

19 files changed

+863
-6
lines changed

19 files changed

+863
-6
lines changed

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
"@sveltejs/kit": "^2.27.0",
6464
"@sveltejs/package": "^2.4.0",
6565
"@sveltejs/vite-plugin-svelte": "^6.1.0",
66+
"@types/file-saver": "^2.0.7",
6667
"@vitest/browser": "^3.2.4",
6768
"@vitest/coverage-v8": "^3.2.4",
6869
"@vueless/storybook-dark-mode": "^9.0.6",
@@ -95,6 +96,7 @@
9596
},
9697
"dependencies": {
9798
"@iconify/svelte": "^5.0.1",
98-
"dayjs": "^1.11.13"
99+
"dayjs": "^1.11.13",
100+
"file-saver": "^2.0.5"
99101
}
100102
}

‎pnpm-lock.yaml‎

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/stories/Home.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import item from '../../../package.json?raw';
1111

1212
<h3 style={{ fontWeight: 400 }}>An open-source, opinionated UI framework for Svelte.</h3>
1313

14-
### [Github](https://github.com/flightlesslabs/dodo-ui) - [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)
14+
### [Github](https://github.com/flightlesslabs/dodo-ui) - [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui) - [Customize](?path=/docs/developer-tools-customize-autocustomize--docs)
1515

1616
</main>
1717

@@ -68,4 +68,5 @@ import { Button } '@flightlesslabs/dodo-ui';
6868

6969
- [Dark Theme](?path=/docs/developer-tools-philosophy-themes--docs#dark-theme)
7070
- [Colors](?path=/docs/developer-tools-philosophy-colors--docs)
71+
- [Customize](?path=/docs/developer-tools-customize-autocustomize--docs)
7172
- [Adjust Color Opacity](?path=/docs/developer-tools-philosophy-colors--docs#adjusting-opacity)

‎src/lib/stories/components/Form/Button/Button.svelte‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,6 @@
220220
221221
.dodo-ui-Button {
222222
cursor: pointer;
223-
outline: none;
224223
transition: all 150ms;
225224
text-decoration: none;
226225
margin: 0;
@@ -232,7 +231,6 @@
232231
border-style: solid;
233232
border-width: var(--dodo-ui-element-border-width);
234233
border-color: transparent;
235-
outline: 0;
236234
color: inherit;
237235
letter-spacing: 0.3px;
238236

‎src/lib/stories/components/Form/Radio/Radio.svelte‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,6 @@
180180
border-style: solid;
181181
border-width: calc(var(--dodo-ui-element-border-width) * 2);
182182
border-color: var(--dodo-ui-Radio-border-color);
183-
outline: 0;
184183
letter-spacing: 0.3px;
185184
border-radius: inherit;
186185
position: relative;

‎src/lib/stories/developer tools/Intro.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ A set of components and tools used internally in dodo-ui.
44

55
## Explore More
66

7+
- [Customize](?path=/docs/developer-tools-customize-autocustomize--docs)
78
- [Utility Button](?path=/docs/developer-tools-components-utilitybutton--docs)
89
- [Colors](?path=/docs/developer-tools-philosophy-colors--docs)
910
- [Adjust Color Opacity](?path=/docs/developer-tools-philosophy-colors--docs#adjusting-opacity)

‎src/lib/stories/developer tools/customize/AutoCustomize/AutoCustomize.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { Meta, Story } from '@storybook/addon-docs/blocks';
2+
import * as ToolStories from './Tool/Tool.stories.svelte';
3+
4+
<Story of={ToolStories.Main} />

‎src/lib/stories/developer tools/customize/AutoCustomize/Tool/Config/ColorTool/ColorButton.svelte‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script lang="ts">
2+
import Icon from '@iconify/svelte';
3+
4+
interface ColorButtonProps {
5+
color: string;
6+
selectedColor?: string;
7+
onclick?: (color: string) => void;
8+
}
9+
10+
const { color, selectedColor, onclick }: ColorButtonProps = $props();
11+
12+
function onClickMod() {
13+
if (onclick) {
14+
onclick(color);
15+
}
16+
}
17+
</script>
18+
19+
<button
20+
class="ColorButton"
21+
class:selectedColor={selectedColor === color}
22+
onclick={onClickMod}
23+
aria-label={`color button ${color}`}
24+
style={`background-color: var(--dodo-color-base-${color}-400);`}
25+
>
26+
<Icon icon="material-symbols:check-small" width="24" height="24" />
27+
</button>
28+
29+
<style lang="scss">
30+
.ColorButton {
31+
width: 22px;
32+
height: 22px;
33+
border-radius: 50%;
34+
margin: 4px;
35+
cursor: pointer;
36+
color: var(--dodo-color-constant-white);
37+
display: inline-flex;
38+
align-items: center;
39+
justify-content: center;
40+
position: relative;
41+
border: 3px solid transparent;
42+
43+
:global(svg) {
44+
position: absolute;
45+
display: none;
46+
}
47+
48+
&.selectedColor {
49+
border-color: var(--dodo-color-primary-600);
50+
51+
:global(svg) {
52+
display: block;
53+
}
54+
}
55+
}
56+
</style>

‎src/lib/stories/developer tools/customize/AutoCustomize/Tool/Config/ColorTool/ColorTool.svelte‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script lang="ts">
2+
import FormControl from '$lib/stories/components/Form/FormControl/FormControl.svelte';
3+
import { colorPaletteBase } from '$lib/stories/developer tools/philosophy/Colors/utils/color.js';
4+
import ColorButton from './ColorButton.svelte';
5+
6+
interface ColorToolProps {
7+
label?: string;
8+
colors?: string[];
9+
selectedColor?: string;
10+
onclick?: (color: string) => void;
11+
}
12+
13+
const { colors = colorPaletteBase, selectedColor, onclick, label }: ColorToolProps = $props();
14+
</script>
15+
16+
<div class="ColorTool">
17+
<FormControl {label}>
18+
{#each colors as color (color)}
19+
<ColorButton {color} {onclick} {selectedColor} />
20+
{/each}
21+
</FormControl>
22+
</div>
23+
24+
<style lang="scss">
25+
.ColorTool {
26+
display: flex;
27+
flex-wrap: wrap;
28+
margin-bottom: calc(var(--dodo-ui-space) * 2.5);
29+
margin-left: -4px;
30+
margin-right: -4px;
31+
}
32+
</style>

‎src/lib/stories/developer tools/customize/AutoCustomize/Tool/Config/Config.svelte‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<script lang="ts">
2+
import Button from '$lib/stories/components/Form/Button/Button.svelte';
3+
import { useAutoCustomizeConfigStore } from '../stores/config.svelte.js';
4+
import ColorTool from './ColorTool/ColorTool.svelte';
5+
import Export from './Export.svelte';
6+
import ValueSilder from './ValueSilder/ValueSilder.svelte';
7+
</script>
8+
9+
<div class="Config">
10+
<h3>Auto Customize</h3>
11+
<ColorTool
12+
label="Primary Color:"
13+
onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ primary: color })}
14+
selectedColor={useAutoCustomizeConfigStore.data.colors?.primary}
15+
colors={[
16+
'violet',
17+
'red',
18+
'orange',
19+
'amber',
20+
'yellow',
21+
'lime',
22+
'green',
23+
'emerald',
24+
'teal',
25+
'cyan',
26+
'blue',
27+
'indigo',
28+
'purple',
29+
'fuchsia',
30+
'pink',
31+
'rose',
32+
]}
33+
/>
34+
35+
<ColorTool
36+
label="Secondary Color:"
37+
onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ secondary: color })}
38+
selectedColor={useAutoCustomizeConfigStore.data.colors?.secondary}
39+
colors={[
40+
'blue',
41+
'red',
42+
'orange',
43+
'amber',
44+
'yellow',
45+
'lime',
46+
'green',
47+
'emerald',
48+
'teal',
49+
'cyan',
50+
'indigo',
51+
'violet',
52+
'purple',
53+
'fuchsia',
54+
'pink',
55+
'rose',
56+
]}
57+
/>
58+
59+
<ColorTool
60+
label="Neutral Color:"
61+
onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ neutral: color })}
62+
selectedColor={useAutoCustomizeConfigStore.data.colors?.neutral}
63+
colors={['gray', 'slate', 'zinc', 'neutral', 'stone']}
64+
/>
65+
66+
<ColorTool
67+
label="Safe Color:"
68+
onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ safe: color })}
69+
selectedColor={useAutoCustomizeConfigStore.data.colors?.safe}
70+
colors={['emerald', 'lime', 'green', 'teal']}
71+
/>
72+
73+
<ColorTool
74+
label="Warning Color:"
75+
onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ warning: color })}
76+
selectedColor={useAutoCustomizeConfigStore.data.colors?.warning}
77+
colors={['amber', 'red', 'rose', 'orange', 'yellow']}
78+
/>
79+
80+
<ColorTool
81+
label="Danger Color:"
82+
onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ danger: color })}
83+
selectedColor={useAutoCustomizeConfigStore.data.colors?.danger}
84+
colors={['red', 'orange', 'amber', 'yellow', 'pink', 'rose']}
85+
/>
86+
87+
<ValueSilder
88+
label="Roundness:"
89+
value={useAutoCustomizeConfigStore.data.components?.roundness || 0}
90+
min={-5}
91+
max={7}
92+
oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ roundness: value })}
93+
/>
94+
95+
<ValueSilder
96+
label="Size:"
97+
value={useAutoCustomizeConfigStore.data.components?.elementHeight || 0}
98+
min={-5}
99+
max={7}
100+
oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ elementHeight: value })}
101+
/>
102+
103+
<ValueSilder
104+
label="Border:"
105+
value={useAutoCustomizeConfigStore.data.components?.borderWidth || 0}
106+
min={0}
107+
max={7}
108+
oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ borderWidth: value })}
109+
/>
110+
111+
<ValueSilder
112+
label="Space:"
113+
value={useAutoCustomizeConfigStore.data.space || 0}
114+
min={-5}
115+
max={15}
116+
oninput={(value) => useAutoCustomizeConfigStore.updateData({ space: value })}
117+
/>
118+
119+
<div class="Export">
120+
<Export />
121+
</div>
122+
123+
<div class="Reset">
124+
<Button onclick={() => useAutoCustomizeConfigStore.reset()} variant="text" color="danger">
125+
Reset
126+
</Button>
127+
</div>
128+
</div>
129+
130+
<style lang="scss">
131+
@use '../../../../../../styles/scss' as *;
132+
133+
.Config {
134+
width: 100%;
135+
display: flex;
136+
flex-direction: column;
137+
padding: calc(var(--dodo-ui-space) * 2);
138+
139+
@media (min-width: $breakpoints-lg) {
140+
max-width: 300px;
141+
height: calc(100vh - 130px);
142+
overflow: auto;
143+
}
144+
145+
.Reset {
146+
margin-top: calc(var(--dodo-ui-space) * 4);
147+
}
148+
}
149+
</style>

0 commit comments

Comments
 (0)