Button
10 months ago
HostingerTools
10 months ago
Icon
10 months ago
Loaders
10 months ago
Modals
10 months ago
AccordionCard.vue
10 months ago
Card.vue
10 months ago
CircleLoader.vue
10 months ago
CopyField.vue
10 months ago
Label.vue
10 months ago
NoResults.vue
10 months ago
Notice.vue
1 year ago
OverheadButton.vue
10 months ago
PluginSplitNotice.vue
10 months ago
Stepper.vue
10 months ago
Toggle.vue
10 months ago
Toggle.vue
229 lines
| 1 | <script setup lang="ts"> |
| 2 | import { computed, ref, watch } from "vue"; |
| 3 | |
| 4 | interface Props { |
| 5 | modelValue: boolean; |
| 6 | bind?: boolean; |
| 7 | isDisabled?: boolean; |
| 8 | } |
| 9 | |
| 10 | type Emits = { |
| 11 | "update:modelValue": [value: boolean]; |
| 12 | click: []; |
| 13 | }; |
| 14 | |
| 15 | const props = withDefaults(defineProps<Props>(), { |
| 16 | bind: true |
| 17 | }); |
| 18 | |
| 19 | const emit = defineEmits<Emits>(); |
| 20 | |
| 21 | const inputValue = ref(props.modelValue); |
| 22 | |
| 23 | const displayValue = computed(() => |
| 24 | props.bind ? inputValue.value : props.modelValue |
| 25 | ); |
| 26 | |
| 27 | const onChange = (event: Event) => { |
| 28 | inputValue.value = (event.target as HTMLInputElement).checked; |
| 29 | emit("update:modelValue", inputValue.value); |
| 30 | }; |
| 31 | |
| 32 | const onClick = () => { |
| 33 | if (!props.bind && !props.isDisabled) { |
| 34 | emit("click"); |
| 35 | } |
| 36 | }; |
| 37 | |
| 38 | watch( |
| 39 | () => props.modelValue, |
| 40 | (value) => { |
| 41 | inputValue.value = value; |
| 42 | } |
| 43 | ); |
| 44 | </script> |
| 45 | |
| 46 | <template> |
| 47 | <div class="toggle__element-container"> |
| 48 | <label |
| 49 | class="toggle h-mb-0" |
| 50 | :class="{ active: displayValue, 'toggle--disabled': isDisabled }" |
| 51 | @click="onClick" |
| 52 | > |
| 53 | <input |
| 54 | type="checkbox" |
| 55 | :checked="displayValue" |
| 56 | :disabled="!bind || isDisabled" |
| 57 | @change="onChange" |
| 58 | > |
| 59 | <span /> |
| 60 | </label> |
| 61 | </div> |
| 62 | </template> |
| 63 | |
| 64 | <style lang="scss" scoped> |
| 65 | $toggle-width: 40px; |
| 66 | $toggle-height: 22px; |
| 67 | $toggle-border-radius: 1.25em; |
| 68 | $toggle-border-size: 1px; |
| 69 | |
| 70 | .toggle { |
| 71 | width: $toggle-width; |
| 72 | height: $toggle-height; |
| 73 | background: var(--gray-border); |
| 74 | border: 1px solid var(--gray-border); |
| 75 | border-radius: $toggle-border-radius; |
| 76 | position: relative; |
| 77 | overflow: hidden; |
| 78 | transition: all 0.5s; |
| 79 | cursor: pointer; |
| 80 | display: flex; |
| 81 | align-items: center; |
| 82 | |
| 83 | color: var(--grayscale-000-gray-000-38); |
| 84 | |
| 85 | &.active { |
| 86 | background: var(--primary); |
| 87 | } |
| 88 | |
| 89 | &.toggle > span { |
| 90 | width: 20px; |
| 91 | height: 20px; |
| 92 | transform: translate(0%, 0); |
| 93 | border: 0; |
| 94 | box-shadow: var(--shadow); |
| 95 | opacity: 1; |
| 96 | } |
| 97 | |
| 98 | input { |
| 99 | margin-left: -999px; |
| 100 | height: 0; |
| 101 | width: 0; |
| 102 | overflow: hidden; |
| 103 | position: absolute; |
| 104 | opacity: 0; |
| 105 | } |
| 106 | |
| 107 | input:empty ~ span &--on { |
| 108 | display: none; |
| 109 | } |
| 110 | |
| 111 | input:empty ~ span &--off { |
| 112 | display: inline; |
| 113 | } |
| 114 | |
| 115 | input:checked ~ span { |
| 116 | opacity: 1; |
| 117 | background: var(--light); |
| 118 | transform: translate(100%, 0); |
| 119 | } |
| 120 | |
| 121 | input:checked ~ span > &--on { |
| 122 | display: inline; |
| 123 | } |
| 124 | |
| 125 | input:checked ~ span &--off { |
| 126 | display: none; |
| 127 | } |
| 128 | |
| 129 | > span { |
| 130 | width: $toggle-height; |
| 131 | height: $toggle-height; |
| 132 | opacity: 0.4; |
| 133 | display: inline-flex; |
| 134 | align-items: center; |
| 135 | justify-content: center; |
| 136 | border: 1px solid var(--gray-light); |
| 137 | border-radius: 50%; |
| 138 | transform: translate(0, 0); |
| 139 | margin: -1px; |
| 140 | transition: all 0.15s; |
| 141 | overflow: hidden; |
| 142 | |
| 143 | background: var(--light); |
| 144 | } |
| 145 | |
| 146 | &--disabled { |
| 147 | opacity: 0.38; |
| 148 | pointer-events: none; |
| 149 | } |
| 150 | |
| 151 | &--disabled, |
| 152 | &--unavailable { |
| 153 | color: var(--gray-border); |
| 154 | } |
| 155 | } |
| 156 | |
| 157 | .toggle--primary { |
| 158 | color: var(--primary); |
| 159 | } |
| 160 | |
| 161 | .toggle--secondary { |
| 162 | color: var(--secondary); |
| 163 | } |
| 164 | |
| 165 | .toggle--success { |
| 166 | color: var(--success); |
| 167 | } |
| 168 | |
| 169 | .toggle--info { |
| 170 | color: var(--primary-hostinger); |
| 171 | } |
| 172 | |
| 173 | .toggle--warning { |
| 174 | color: var(--warning); |
| 175 | } |
| 176 | |
| 177 | .toggle--warning-regular { |
| 178 | color: var(--warning-regular); |
| 179 | } |
| 180 | |
| 181 | .toggle--danger { |
| 182 | color: var(--danger); |
| 183 | } |
| 184 | |
| 185 | .toggle--light { |
| 186 | color: var(--light); |
| 187 | } |
| 188 | |
| 189 | .toggle--dark { |
| 190 | color: var(--dark); |
| 191 | } |
| 192 | |
| 193 | .toggle--black { |
| 194 | color: var(--dark); |
| 195 | } |
| 196 | |
| 197 | .toggle--gray { |
| 198 | color: var(--gray); |
| 199 | } |
| 200 | |
| 201 | .toggle--gray-light { |
| 202 | color: var(--gray-light); |
| 203 | } |
| 204 | |
| 205 | .toggle--header-bg { |
| 206 | color: var(--header-bg); |
| 207 | } |
| 208 | |
| 209 | .toggle--danger-light { |
| 210 | color: var(--danger-light); |
| 211 | } |
| 212 | |
| 213 | .toggle--success-dark { |
| 214 | color: var(--success-dark); |
| 215 | } |
| 216 | |
| 217 | .toggle--success-light { |
| 218 | color: var(--success-light); |
| 219 | } |
| 220 | |
| 221 | .toggle--warning-light { |
| 222 | color: var(--warning-light); |
| 223 | } |
| 224 | |
| 225 | .toggle--warning-dark { |
| 226 | color: var(--warning-dark); |
| 227 | } |
| 228 | </style> |
| 229 |