npmx.dev/app/components/Settings/Toggle.server.vue at 77eb0009b2453800790ea1c32e11bbdb96983adb · npmx-dev/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
<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    label: string
    description?: string
    justify?: 'between' | 'start'
    tooltip?: string
    tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'
    tooltipTo?: string
    tooltipOffset?: number
    reverseOrder?: boolean
  }>(),
  {
    justify: 'between',
    reverseOrder: false,
  },
)
</script>

<template>
  <div
    class="grid items-center gap-1.5 py-1 -my-1 grid-cols-[auto_1fr_auto]"
    :class="[justify === 'start' ? 'justify-start' : '']"
    :style="
      props.reverseOrder
        ? 'grid-template-areas: \'toggle . label-text\''
        : 'grid-template-areas: \'label-text . toggle\''
    "
  >
    <template v-if="props.reverseOrder">
      <SkeletonBlock class="h-6 w-11 shrink-0 rounded-full" style="grid-area: toggle" />
      <span
        v-if="label"
        class="text-sm text-fg font-medium text-start"
        style="grid-area: label-text"
      >
        {{ label }}
      </span>
    </template>
    <template v-else>
      <span
        v-if="label"
        class="text-sm text-fg font-medium text-start"
        style="grid-area: label-text"
      >
        {{ label }}
      </span>
      <SkeletonBlock
        class="h-6 w-11 shrink-0 rounded-full"
        style="grid-area: toggle; justify-self: end"
      />
    </template>
  </div>
  <p v-if="description" class="text-sm text-fg-muted mt-2">
    {{ description }}
  </p>
</template>