@energysage/es-ds-components 3.5.0 → 3.6.0
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.
- package/CHANGELOG.md +12 -0
- package/components/es-toggle.vue +137 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [3.6.0](https://github.com/EnergySage/es-ds/compare/es-ds-components-v3.5.0...es-ds-components-v3.6.0) (2025-08-18)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* IDR-1606 create es-toggle ([#1647](https://github.com/EnergySage/es-ds/issues/1647)) ([da6b3c2](https://github.com/EnergySage/es-ds/commit/da6b3c28585d7aaae7ef07d7f426405783e3f276))
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* ensure package-lock files get updated upon release; also manually bring current ones up to date ([#1649](https://github.com/EnergySage/es-ds/issues/1649)) ([53cf5ae](https://github.com/EnergySage/es-ds/commit/53cf5aeec419b7a050038172dec8cc1d8fb31655))
|
|
14
|
+
|
|
3
15
|
## [3.5.0](https://github.com/EnergySage/es-ds/compare/es-ds-components-v3.4.0...es-ds-components-v3.5.0) (2025-08-12)
|
|
4
16
|
|
|
5
17
|
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { SwitchRoot, SwitchThumb } from 'reka-ui';
|
|
3
|
+
|
|
4
|
+
const switchId = useId();
|
|
5
|
+
const model = defineModel<boolean>({
|
|
6
|
+
default: false,
|
|
7
|
+
});
|
|
8
|
+
|
|
9
|
+
interface Props {
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
withDefaults(defineProps<Props>(), {
|
|
14
|
+
disabled: false,
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
// Workaround: Reka UI components don't play nice with the Nuxt 3.16+ dev server side rendering while using NPM link
|
|
18
|
+
const wrappingComponent = import.meta.dev ? resolveComponent('ClientOnly') : 'div';
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<template>
|
|
22
|
+
<component :is="wrappingComponent">
|
|
23
|
+
<div
|
|
24
|
+
class="d-flex flex-row"
|
|
25
|
+
:class="{
|
|
26
|
+
'has-label': $slots.label,
|
|
27
|
+
}">
|
|
28
|
+
<switch-root
|
|
29
|
+
:id="switchId"
|
|
30
|
+
v-model="model"
|
|
31
|
+
:disabled="disabled"
|
|
32
|
+
class="es-toggle">
|
|
33
|
+
<switch-thumb class="es-toggle-thumb" />
|
|
34
|
+
</switch-root>
|
|
35
|
+
<label
|
|
36
|
+
v-if="$slots.label"
|
|
37
|
+
:for="switchId"
|
|
38
|
+
class="es-toggle-label">
|
|
39
|
+
<slot name="label" />
|
|
40
|
+
</label>
|
|
41
|
+
</div>
|
|
42
|
+
</component>
|
|
43
|
+
</template>
|
|
44
|
+
|
|
45
|
+
<style lang="scss">
|
|
46
|
+
@use '@energysage/es-ds-styles/scss/variables' as variables;
|
|
47
|
+
|
|
48
|
+
.has-label {
|
|
49
|
+
gap: 16px;
|
|
50
|
+
align-items: center;
|
|
51
|
+
|
|
52
|
+
.es-toggle[data-disabled] ~ .es-toggle-label {
|
|
53
|
+
opacity: 0.5;
|
|
54
|
+
|
|
55
|
+
:deep(*) {
|
|
56
|
+
opacity: inherit;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.es-toggle-label {
|
|
62
|
+
margin-top: 8px;
|
|
63
|
+
user-select: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.es-toggle {
|
|
67
|
+
position: relative;
|
|
68
|
+
width: 40px;
|
|
69
|
+
height: 20px;
|
|
70
|
+
border-radius: 68px;
|
|
71
|
+
background-color: variables.$gray-400;
|
|
72
|
+
border: 2px solid variables.$gray-400;
|
|
73
|
+
|
|
74
|
+
// Active checked state
|
|
75
|
+
&[data-state='checked']:not([data-disabled]) {
|
|
76
|
+
background-color: variables.$blue-900;
|
|
77
|
+
border-color: variables.$blue-900;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
// Disabled states
|
|
81
|
+
&[data-disabled] {
|
|
82
|
+
&:not([data-state='checked']) {
|
|
83
|
+
background: variables.$gray-300;
|
|
84
|
+
border-color: variables.$gray-300;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&[data-state='checked'] {
|
|
88
|
+
background-color: variables.$gray-500;
|
|
89
|
+
border-color: variables.$gray-500;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.es-toggle-thumb {
|
|
95
|
+
position: absolute;
|
|
96
|
+
width: 20px;
|
|
97
|
+
height: 20px;
|
|
98
|
+
border-radius: 100%;
|
|
99
|
+
top: -2px;
|
|
100
|
+
left: -2px;
|
|
101
|
+
border: 2px solid variables.$blue-900;
|
|
102
|
+
background-color: variables.$white;
|
|
103
|
+
transition: all 0.2s ease;
|
|
104
|
+
cursor: pointer;
|
|
105
|
+
|
|
106
|
+
// Checked state
|
|
107
|
+
.es-toggle[data-state='checked'] & {
|
|
108
|
+
transform: translateX(20px);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// Disabled states
|
|
112
|
+
.es-toggle[data-disabled] & {
|
|
113
|
+
cursor: default;
|
|
114
|
+
|
|
115
|
+
&:not([data-state='checked']) {
|
|
116
|
+
border-color: variables.$gray-300;
|
|
117
|
+
background-color: variables.$gray-500;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
&[data-state='checked'] {
|
|
121
|
+
border-color: variables.$gray-500;
|
|
122
|
+
background-color: variables.$gray-300;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// Hover state
|
|
127
|
+
.es-toggle:hover:not([data-disabled]) & {
|
|
128
|
+
box-shadow: 0 0 0 9px variables.$blue-50;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// Focus state and active (clicked) state
|
|
132
|
+
.es-toggle:focus-visible:not([data-disabled]) &,
|
|
133
|
+
.es-toggle:active:not([data-disabled]) & {
|
|
134
|
+
box-shadow: 0 0 0 9px rgba(133, 178, 255, 0.85);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
</style>
|