npmx.dev/app/components/Settings/Toggle.client.vue at 98e4265b26ad800f35339df899ffd02b3b21054a · abbeyperini/npmx.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<script setup lang="ts">
const props = defineProps<{
  label: string
  description?: string
  class?: string
}>()
defineEmits(['update:modelValue'])
const checked = defineModel<boolean>({
  required: true,
})
const id = useId()
const { locale, locales } = useI18n()
const dir = computed(() => {
  const localeObj = locales.value.find(item => item.code === locale.value)
  return localeObj?.dir ?? 'ltr'
})
</script>

<template>
  <label :for="id">
    <span class="toggle--label-text">{{ label }}</span>
    <input
      role="switch"
      type="checkbox"
      :id
      class="toggle--checkbox"
      :class="dir"
      v-model="checked"
    />
    <span class="toggle--background"></span>
  </label>
  <p v-if="description" class="text-sm text-fg-muted mt-2">
    {{ description }}
  </p>
</template>

<style scoped>
.toggle--label-text {
  grid-area: label-text;
}

.toggle--background {
  grid-area: toggle-background;
  justify-self: end;
}

.toggle--checkbox {
  opacity: 0;
}

label {
  display: grid;
  grid-template-areas: 'label-text . toggle-background';
}

input {
  grid-row: 1;
  grid-column: 3;
  justify-self: end;
}

/* background */
.toggle--background {
  width: 44px;
  height: 24px;
  background: var(--fg-subtle);
  border-radius: 9999px;
  border: 1px solid var(--fg);
  display: flex;
  position: relative;
}

label:has(input:focus) .toggle--background {
  outline: solid 2px var(--fg);
  outline-offset: 2px;
}

label:has(input:checked) .toggle--background {
  background: var(--fg);
  border-color: var(--fg);
}

label:has(input:hover) .toggle--background {
  background: var(--fg-muted);
}

/* Circle that moves */
.toggle--checkbox:checked + .toggle--background:before {
  animation-fill-mode: forwards;
  transition: transform 200ms ease-in-out;
}

.toggle--background:before {
  animation-fill-mode: forwards;
  transition: transform 200ms ease-in-out;
  content: '';
  width: 20px;
  height: 20px;
  top: 1px;
  position: absolute;
  border-radius: 9999px;
  background: var(--bg);
}

/* Support rtl locales */
.toggle--checkbox.ltr + .toggle--background:before {
  left: 3px;
}

.toggle--checkbox.rtl + .toggle--background:before {
  right: 3px;
}

.toggle--checkbox:checked.ltr + .toggle--background:before {
  transform: translate(17px);
}

.toggle--checkbox:checked.rtl + .toggle--background:before {
  transform: translate(-17px);
}
</style>