Skip to content

Commit aea0256

Browse files
RafaelGondi“RafaelGondi”
RafaelGondi
and
“RafaelGondi”
authored
Feat/switch label (#868)
#### Por favor, verifique se o seu pull request está de acordo com o checklist abaixo: - [x] A implementação feita possui testes (Caso haja um motivo para não haver testes/haver apenas testes de snapshot, descrever abaixo) - [x] A documentação no mdx foi feita ou atualizada, caso necessário - [x] O eslint passou localmente ### 1 - Resumo - Implementa no Swtich as props `label` e `supportingText` - Refatora o componente para Composition API ### 2 - Tipo de pull request - [ ] 🧱 Novo componente - [x] ✨ Nova feature ou melhoria - [ ] 🐛 Fix - [ ] 👨‍💻 Refatoração - [ ] 📝 Documentação - [ ] 🎨 Estilo - [ ] 🤖 Build ou CI/CD ### 3 - Esse PR fecha alguma issue? Favor referenciá-la Não ### 4 - Quais são os passos para avaliar o pull request? - Code review; - Teste as novas props `label` e `supportingText` - Veja se o componente continua funcionando corretamente; ### 5 - Imagem ou exemplo de uso: ![image](https://github.com/user-attachments/assets/0851f7c4-a3ca-451f-bf4b-ae7e18b9a238) ### 6 - Esse pull request adiciona _breaking changes_? - [ ] Sim - [x] Não --------- Co-authored-by: “RafaelGondi” <“rdias.ga@gmail.com”>
1 parent 4cc8350 commit aea0256

File tree

3 files changed

+178
-84
lines changed

3 files changed

+178
-84
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@sysvale/cuida",
3-
"version": "3.96.0",
3+
"version": "3.97.0",
44
"description": "A design system built by Sysvale, using storybook and Vue components",
55
"repository": {
66
"type": "git",

‎src/components/Switch.vue‎

Lines changed: 169 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,25 @@
11
<!-- eslint-disable vue/multi-word-component-names -->
22
<template>
33
<div>
4+
<span
5+
class="switch__label"
6+
>
7+
{{ label }}
8+
9+
<CdsIcon
10+
v-if="tooltip"
11+
v-cdstip="tooltip"
12+
:name="tooltipIcon"
13+
height="18"
14+
width="18"
15+
class="label__icon"
16+
/>
17+
</span>
18+
19+
420
<label
521
class="switch"
6-
:class="toggleSwitchSize"
22+
:class="switchSize"
723
>
824
<input
925
v-model="isActive"
@@ -12,6 +28,7 @@
1228
@click="handleClick"
1329
>
1430
<span
31+
ref="componentRef"
1532
tabindex="0"
1633
class="switch__slider"
1734
:class="[
@@ -26,107 +43,171 @@
2643
]"
2744
@focusout="internalFocus = false"
2845
@focusin="internalFocus = true"
46+
@keydown.enter="handleClick"
2947
/>
3048
</label>
49+
50+
<template
51+
v-if="supportingText"
52+
>
53+
<ul
54+
v-if="Array.isArray(supportingText)"
55+
class="switch__supporting-text-container"
56+
>
57+
<li
58+
v-for="text in supportingText"
59+
:key="text"
60+
class="switch__supporting-text-list"
61+
>
62+
{{ text }}
63+
</li>
64+
</ul>
65+
66+
<div
67+
v-else
68+
class="switch__supporting-text"
69+
>
70+
{{ supportingText }}
71+
</div>
72+
</template>
3173
</div>
3274
</template>
3375

34-
<script>
35-
export default {
36-
props: {
37-
/**
38-
* Prop utilizada como v-model. Controla a o estado do ToggleSwitch.
39-
*/
40-
modelValue: {
41-
type: Boolean,
42-
default: false,
43-
required: true,
44-
},
45-
/**
46-
* Torna o ToggleSwitch pequeno.
47-
*/
48-
small: {
49-
type: Boolean,
50-
default: false,
51-
},
52-
/**
53-
* A variante da Checkbox. São 10 variantes: 'teal', 'green', 'blue',
54-
* 'indigo', 'violet', 'pink', 'red', 'orange', 'amber' e 'dark'.
55-
*/
56-
variant: {
57-
type: String,
58-
default: 'green',
59-
},
60-
/**
61-
* Torna o ToggleSwitch grande.
62-
*/
63-
large: {
64-
type: Boolean,
65-
default: false,
66-
},
67-
/**
68-
* Controla a disponibilidade do ToggleSwitch
69-
*/
70-
disabled: {
71-
type: Boolean,
72-
default: false,
73-
},
74-
/**
75-
* Controla o focus do ToggleSwitch
76-
*/
77-
focused: {
78-
type: Boolean,
79-
default: false,
80-
},
76+
<script setup>
77+
import { ref, computed, watch, useTemplateRef } from 'vue';
78+
import CdsIcon from './Icon.vue';
79+
80+
const model = defineModel('modelValue', {
81+
type: Boolean,
82+
});
83+
84+
const props = defineProps({
85+
/**
86+
* Especifica a label do Switch.
87+
*/
88+
label: {
89+
type: String,
90+
default: '',
91+
},
92+
/**
93+
* Torna o Switch pequeno.
94+
*/
95+
small: {
96+
type: Boolean,
97+
default: false,
98+
},
99+
/**
100+
* A variante da Checkbox. São 10 variantes: 'teal', 'green', 'blue',
101+
* 'indigo', 'violet', 'pink', 'red', 'orange', 'amber' e 'dark'.
102+
*/
103+
variant: {
104+
type: String,
105+
default: 'green',
106+
},
107+
/**
108+
* Torna o Switch grande.
109+
*/
110+
large: {
111+
type: Boolean,
112+
default: false,
113+
},
114+
/**
115+
* Controla a disponibilidade do Switch
116+
*/
117+
disabled: {
118+
type: Boolean,
119+
default: false,
120+
},
121+
/**
122+
* Controla o focus do Switch
123+
*/
124+
focused: {
125+
type: Boolean,
126+
default: false,
81127
},
82-
data() {
83-
return {
84-
isActive: this.modelValue,
85-
internalFocus: this.focused,
86-
};
128+
/**
129+
* Define exibição e texto do tooltip do input
130+
*/
131+
tooltip: {
132+
type: String,
133+
default: null,
87134
},
135+
/**
136+
* Especifica ícone do tooltip do TextInput.
137+
*/
138+
tooltipIcon: {
139+
type: String,
140+
default: 'info-outline',
141+
},
142+
/**
143+
* Especifica mensagem de auxílio.
144+
*/
145+
supportingText: {
146+
type: [String, Array],
147+
default: '',
148+
},
149+
});
88150
89-
computed: {
90-
toggleSwitchSize() {
91-
if (this.small === this.large) {
92-
return 'switch--medium';
93-
}
151+
const isActive = ref(props.modelValue);
152+
const internalFocus = ref(props.focused);
153+
const componentRef = useTemplateRef('componentRef');
94154
95-
if (this.small) {
96-
return 'switch--small';
97-
}
155+
const switchSize = computed(() => {
156+
if (props.small === props.large) {
157+
return 'switch--medium';
158+
}
98159
99-
return 'switch--large';
100-
},
101-
},
160+
if (props.small) {
161+
return 'switch--small';
162+
}
102163
103-
watch: {
104-
modelValue(newValue, oldValue) {
105-
if (newValue !== oldValue) {
106-
this.isActive = newValue;
107-
}
108-
},
109-
},
164+
return 'switch--large';
165+
});
110166
111-
methods: {
112-
handleClick() {
113-
/**
114-
* Evento utilizado para implementar o v-model.
115-
* @event update:modelValue
116-
* @type {Event}
117-
*/
118-
this.$emit('update:modelValue', !this.isActive);
119-
},
120-
},
167+
watch(model, (newValue, oldValue) => {
168+
if (newValue !== oldValue) {
169+
isActive.value = newValue;
170+
}
171+
});
172+
173+
function handleClick() {
174+
model.value = !isActive.value;
121175
};
176+
177+
defineExpose({ componentRef });
122178
</script>
179+
123180
<style lang="scss" scoped>
124181
@import '../assets/sass/tokens.scss';
182+
@import '../assets/sass/placeholders.scss';
125183
126184
.switch {
127185
position: relative;
128186
display: inline-block;
129187
188+
&__supporting-text-container {
189+
@extend %custom-ul;
190+
}
191+
192+
&__supporting-text {
193+
&:nth-child(1) {
194+
margin: mt(2);
195+
}
196+
197+
@include caption;
198+
color: $n-600;
199+
margin: mt(1);
200+
}
201+
202+
&__supporting-text-list {
203+
@extend .switch__supporting-text;
204+
@extend %custom-li;
205+
}
206+
207+
&__label {
208+
@include label;
209+
}
210+
130211
&--small {
131212
width: 28px;
132213
height: 16px;
@@ -227,7 +308,7 @@ export default {
227308
height: 18px;
228309
width: 18px;
229310
left: 3px;
230-
bottom: 2.7px;
311+
bottom: 3px;
231312
background-color: $n-0;
232313
-webkit-transition: .35s;
233314
border-radius: $border-radius-circle;
@@ -265,4 +346,10 @@ export default {
265346
}
266347
}
267348
}
349+
350+
.label__icon {
351+
margin: mTRBL(0, 0, n1, 1);
352+
cursor: default;
353+
color: $n-700;
354+
}
268355
</style>

‎src/stories/components/Switch.stories.mdx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,14 @@ export const Template = (args) => ({
8585
<Canvas>
8686
<Story
8787
name="Switch"
88-
args={{}}
88+
args={{
89+
variant: 'green',
90+
label: 'Switch',
91+
disabled: false,
92+
tooltip: '',
93+
tooltipIcon: 'info-outline',
94+
supportingText: 'supportingText',
95+
}}
8996
>
9097
{ Template.bind({}) }
9198
</Story>

0 commit comments

Comments
 (0)