Skip to content

Commit 36be854

Browse files
linspwlinspw
committed
feat: adjust
1 parent 93eb69c commit 36be854

19 files changed

+777
-79
lines changed

‎jsconfig.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,8 @@
1818
"@styles/*": ["./src/styles/*"]
1919
}
2020
},
21+
"vueCompilerOptions": {
22+
"experimentalDisableTemplateSupport": true
23+
},
2124
"exclude": ["node_modules"]
2225
}

‎src/components/atoms/checkbox/checkbox.stories.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,12 @@ import HCheckbox from './checkbox.vue';
3030
components: { HCheckbox },
3131
data() {
3232
return {
33-
status1: null,
33+
status1: [],
3434
status2: null,
3535
};
3636
},
3737
template: `<div>
38+
{{ status1 }}
3839
<h-checkbox label="Checkbox" v-model="status1" />
3940
<h-checkbox label="Checkbox" @change="status2=$event" :checked="status2" />
4041
</div>`,

‎src/components/atoms/checkbox/checkbox.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ export default {
5555
defaul: null,
5656
},
5757
modelValue: {
58-
type: Boolean,
59-
defaul: null,
58+
type: [Boolean, Array, String, Number],
59+
default: undefined,
6060
},
6161
isDisabled: {
6262
type: Boolean,
@@ -65,12 +65,12 @@ export default {
6565
},
6666
emits: ['change', 'update:modelValue'],
6767
setup($props, { emit: $emit }) {
68-
const internalChecked = computed(() => $props.modelValue || $props.checked);
69-
const internalValue = computed(() => $props.value || $props.label);
68+
const internalChecked = computed(() => $props.modelValue === $props.value || $props.checked);
69+
const internalValue = computed(() => $props.value);
7070
const handleChange = () => {
7171
if ($props.isDisabled) return;
7272
const newStatus = !internalChecked.value;
73-
$emit('change', newStatus);
73+
$emit('change', !internalChecked.value);
7474
$emit('update:modelValue', newStatus);
7575
};
7676
return { internalChecked, internalValue, handleChange };

‎src/components/molecules/index.js‎

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,8 @@
1-
import { HBreadcrumb } from './breadcrumb';
2-
import { HInputField } from './input-field';
3-
import { HToast } from './toast';
4-
import { HModal } from './modal';
5-
import { HDropdown } from './dropdown';
6-
import { HStepper } from './stepper';
7-
import { HForm } from './form';
8-
9-
export {
10-
HBreadcrumb,
11-
HDropdown,
12-
HInputField,
13-
HToast,
14-
HModal,
15-
HStepper,
16-
HForm,
17-
};
1+
export * from './breadcrumb';
2+
export * from './input-field';
3+
export * from './toast';
4+
export * from './modal';
5+
export * from './dropdown';
6+
export * from './stepper';
7+
export * from './form';
8+
export * from './steps';

‎src/components/molecules/steps/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import HStep from './step.vue';
2+
import HSteps from './steps.vue';
3+
4+
export { HStep, HSteps };

‎src/components/molecules/steps/step-key.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const HStepKey = Symbol('HStepKey');

‎src/components/molecules/steps/step.vue‎

Lines changed: 304 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,304 @@
1+
<script>
2+
/* eslint-disable import/first, no-param-reassign */
3+
export default {
4+
name: 'HStep',
5+
};
6+
</script>
7+
8+
<template>
9+
<li
10+
class="h-step"
11+
:class="{
12+
[`h-step--behavior-filled`]: isFilled && !isSelected,
13+
[`h-step--behavior-selected`]: isSelected,
14+
[`h-step--behavior-clickable`]: $config.clickable || $props.clickable,
15+
[`h-step--direction-${$config.direction}`]: $config.direction,
16+
[`h-step--text-direction-${$config.textDirection}`]: $config.textDirection,
17+
}"
18+
>
19+
<div
20+
class="h-step__content"
21+
>
22+
<div
23+
class="h-step__badge"
24+
@click="click"
25+
>
26+
<h-icon
27+
v-if="$props.icon"
28+
:icon="$props.icon"
29+
:color="$props.iconColor"
30+
:size="$props.iconSize"
31+
/>
32+
33+
<template v-else>
34+
{{ $props.position }}
35+
</template>
36+
</div>
37+
38+
<div class="h-step__text">
39+
<h-text
40+
class="h-step__text-title"
41+
weight="semi-bold"
42+
@click="click"
43+
>
44+
<slot />{{ $props.title }}
45+
</h-text>
46+
47+
<transition
48+
name="h-step__transition"
49+
>
50+
<h-text
51+
v-if="showDescription"
52+
class="h-step__text-description"
53+
dynamic
54+
>
55+
<slot
56+
name="description"
57+
:on="{click}"
58+
/>{{ $props.description }}
59+
</h-text>
60+
</transition>
61+
</div>
62+
</div>
63+
64+
<div class="h-step__line" />
65+
</li>
66+
</template>
67+
68+
<script setup>
69+
import { inject, computed, useSlots } from 'vue';
70+
import { HStepKey } from './step-key';
71+
72+
const $props = defineProps({
73+
clickable: {
74+
type: Boolean,
75+
default: undefined,
76+
},
77+
position: {
78+
type: Number,
79+
default: undefined,
80+
},
81+
title: {
82+
type: String,
83+
default: undefined,
84+
},
85+
description: {
86+
type: String,
87+
default: undefined,
88+
},
89+
icon: {
90+
type: String,
91+
default: undefined,
92+
},
93+
iconColor: {
94+
type: String,
95+
default: 'inverse',
96+
},
97+
iconSize: {
98+
type: String,
99+
default: 'inherit',
100+
},
101+
});
102+
103+
const $slots = useSlots();
104+
105+
const $config = inject(HStepKey);
106+
107+
const isSelected = computed(() => $config.modelValue === $props.position);
108+
const isFilled = computed(() => $config.modelValue >= $props.position);
109+
110+
const showDescription = computed(() => {
111+
if (!$slots?.description) return false;
112+
return ($config.showDescriptionOnlyIfSelected ? isSelected.value : true);
113+
});
114+
115+
const $emit = defineEmits(['update:modelValue']);
116+
117+
const click = () => {
118+
if ($config.clickable || $props.clickable) $emit('update:modelValue', $props.position);
119+
};
120+
</script>
121+
122+
<style lang="scss">
123+
:root {
124+
--h-step--margin: 0;
125+
--h-step--flex: 1;
126+
--h-step--flex-direction: column;
127+
--h-step__content--flex-direction: column;
128+
--h-step__badge-size: 28px;
129+
--h-step__line--spacing: 0rem;
130+
--h-step__line--thickness: 1px;
131+
--h-step__line: var(--color-blue-grey-scale-300);
132+
--h-step__line--width: 0;
133+
--h-step__line--height: 0;
134+
--h-step__line--space: var(--h-step__badge-size);
135+
--h-step__line--top: auto;
136+
--h-step__line--left: auto;
137+
--h-step__line--position: absolute;
138+
--h-step__line--flex: 0 1 auto;
139+
--h-step__line--margin: 0;
140+
--h-step__line--color: var(--color-grey-scale-500);
141+
--h-step__line--color--selected: var(--color-grey-scale-500);
142+
--h-step__line--color--filled: var(--color-grey-scale-500);
143+
--h-step__badge--background-color: var(--color-grey-scale-500);
144+
--h-step__badge--background-color--selected: var(--color-blue-scale-800);
145+
--h-step__badge--background-color--filled: var(--color-blue-scale-800);
146+
--h-step__badge-color: var(--color-white);
147+
--h-step__text--margin: 0;
148+
--h-step__text--color: var(--color-grey-scale-500);
149+
--h-step__text--color--filled: inherit;
150+
--h-step__text--color--selected: inherit;
151+
--h-step--align-items: stretch;
152+
--h-step__content--align-items: stretch;
153+
}
154+
155+
.h-step {
156+
position: relative;
157+
display: flex;
158+
flex: var(--h-step--flex);
159+
margin: var(--h-step--margin);
160+
align-items: var(--h-step--align-items);
161+
flex-direction: var(--h-step--flex-direction);
162+
}
163+
164+
.h-step__content {
165+
display: flex;
166+
position: relative;
167+
flex-direction: var(--h-step__content--flex-direction);
168+
align-items: var(--h-step__content--align-items);
169+
}
170+
171+
.h-step--behavior-selected {
172+
--h-step__badge--background-color: var(--h-step__badge--background-color--selected);
173+
--h-step__line--color: var(--h-step__line--color--selected);
174+
--h-step__text--color: var(--h-step__text--color--selected);
175+
}
176+
177+
.h-step--behavior-filled {
178+
--h-step__text--color: var(--h-step__text--color--filled);
179+
--h-step__line--color: var(--h-step__line--color--filled);
180+
--h-step__badge--background-color: var(--h-step__badge--background-color--filled);
181+
}
182+
183+
.h-step--behavior-clickable .h-step__badge,
184+
.h-step--behavior-clickable .h-step__text-title {
185+
cursor: pointer;
186+
// &:hover {
187+
// opacity: 0.5;
188+
// }
189+
&:active {
190+
opacity: 0.7;
191+
}
192+
}
193+
194+
.h-step--direction-horizontal.h-step--text-direction-horizontal {
195+
--h-step--flex-direction: row;
196+
--h-step__content--flex-direction: row;
197+
--h-step--flex: 1 1 fit-content;
198+
--h-step__text--margin: 0 0 0 8px;
199+
--h-step__line--position: relative;
200+
--h-step__line--width: 0;
201+
--h-step__line--flex: 1;
202+
--h-step__line--margin: 0 8px;
203+
--h-step__line--height: var(--h-step__line--thickness);
204+
--h-step--align-items: center;
205+
206+
&:last-child {
207+
--h-step--flex: 0 1 auto;
208+
}
209+
}
210+
211+
.h-step--direction-horizontal.h-step--text-direction-vertical {
212+
--h-step--flex-direction: column;
213+
--h-step__content--flex-direction: column;
214+
--h-step__content--align-items: center;
215+
--h-step__text--margin: 8px 0 0 0;
216+
--h-step__line--width: calc(100% - var(--h-step__line--space) * 2);
217+
--h-step__line--top: calc(var(--h-step__line--space) / 2);
218+
--h-step__line--left: calc(50% + var(--h-step__line--space));
219+
--h-step__line--position: absolute;
220+
--h-step__line--height: var(--h-step__line--thickness);
221+
--h-step--align-items: center;
222+
}
223+
224+
.h-step--direction-vertical.h-step--text-direction-horizontal {
225+
--h-step--flex-direction: row;
226+
--h-step__content--flex-direction: row;
227+
--h-step__text--margin: 0 0 0 8px;
228+
--h-step__line--height: calc(100% - (var(--h-step__line--space) / 4) * 2);
229+
--h-step__line--width: var(--h-step__line--thickness);
230+
--h-step__line--position: absolute;
231+
--h-step__line--top: calc(var(--h-step__line--space) + var(--h-step__line--space) / 4);
232+
--h-step__line--left: calc(var(--h-step__line--space) / 2);
233+
--h-step--margin: 0 0 var(--h-step__line--space) 0;
234+
}
235+
236+
.h-step--direction-vertical.h-step--text-direction-vertical {
237+
--h-step__content--flex-direction: column;
238+
--h-step--align-items: center;
239+
--h-step__line--position: relative;
240+
--h-step__content--align-items: center;
241+
--h-step__line--height: calc(var(--h-step__line--space) - (var(--h-step__line--space) / 4) * 2);
242+
--h-step__line--width: var(--h-step__line--thickness);
243+
--h-step__line--margin: 8px 0;
244+
--h-step__text--margin: 8px 0 0 0;
245+
}
246+
247+
.h-step__line {
248+
position: var(--h-step__line--position);
249+
border-radius: 4px;
250+
width: var(--h-step__line--width);
251+
top: var(--h-step__line--top);
252+
left: var(--h-step__line--left);
253+
flex: var(--h-step__line--flex);
254+
margin: var(--h-step__line--margin);
255+
height: var(--h-step__line--height);
256+
background-color: var(--h-step__line--color);
257+
z-index: 1000;
258+
}
259+
260+
.h-step:last-child {
261+
--h-step--margin: 0;
262+
263+
& .h-step__line {
264+
display: none;
265+
}
266+
}
267+
268+
.h-step__badge {
269+
width: var(--h-step__badge-size);
270+
height: var(--h-step__badge-size);
271+
background-color: var(--h-step__badge--background-color);
272+
border-radius: var(--border-radius-circle);
273+
color: var(--h-step__badge-color);
274+
transition: background-color 0.125s ease-in;
275+
z-index: 10;
276+
display: flex;
277+
justify-content: center;
278+
align-items: center;
279+
};
280+
281+
.h-step__text {
282+
margin: var(--h-step__text--margin);
283+
color: var(--h-step__text--color);
284+
justify-content: center;
285+
display: flex;
286+
flex-direction: column;
287+
}
288+
289+
.h-step__text-description {
290+
max-height: 500px;
291+
overflow: visible;
292+
}
293+
294+
.h-step__transition-enter-active,
295+
.h-step__transition-leave-active {
296+
transition: opacity 0.25s ease-in-out, max-height 0.25s ease-in-out;
297+
}
298+
299+
.h-step__transition-enter-from,
300+
.h-step__transition-leave-to {
301+
opacity: 0;
302+
max-height: 0;
303+
}
304+
</style>

0 commit comments

Comments
 (0)