feat(ui): add title prop to toggle

front/src/components/ui/Layout.vue

@@ -6,13 +6,13 @@ const props = defineProps<{
   noWrap?:true
 }
   & { [P in "stack" | "grid" | "flex" | "columns"]?: true | string }
-  & { [C in "nav" | "aside" | "header" | "footer" | "main" | "h1" | "h2" | "h3" | "h4" | "h5"]?:true }>()
+  & { [C in "nav" | "aside" | "header" | "footer" | "main" | "label" | "h1" | "h2" | "h3" | "h4" | "h5"]?:true }>()
 const columnWidth = props.columnWidth ?? 46
 </script>
 
 <template>
   <component
-    :is="props.nav ? 'nav' : props.aside ? 'aside' : props.header ? 'header' : props.footer ? 'footer' : props.main ? 'main' : props.h1? 'h1' : props.h2? 'h2' : props.h3? 'h3' : props.h4? 'h4' : props.h5? 'h5' : 'div'"
+    :is="props.nav ? 'nav' : props.aside ? 'aside' : props.header ? 'header' : props.footer ? 'footer' : props.main ? 'main' : props.label ? 'label' : props.h1? 'h1' : props.h2? 'h2' : props.h3? 'h3' : props.h4? 'h4' : props.h5? 'h5' : 'div'"
     :class="[
     $style.layout,
     noGap || $style.gap,

front/src/components/ui/Toggle.vue

@@ -1,22 +1,87 @@
 <script setup lang="ts">
-interface Props {
+import { color } from "~/composables/colors.ts";
+
+import Layout from './Layout.vue';
+
+const { big } = defineProps<{
   big?: boolean
-}
+  title?: string
+}>()
 
-defineProps<Props>()
-
-const enabled = defineModel<boolean>()
+const isOn = defineModel<boolean>()
+const diameter = big? '28px' : '20px'
 </script>
 
 <template>
-	<div
-    class="funkwhale toggle"
-    :class="{ 'is-active': enabled, 'is-big': big }"
+  <label
+    :class="[$style.toggle, 'funkwhale']"
+    v-bind="color({}, ['interactive', 'raised'])"
+    :checked = "isOn || undefined"
   >
-    <input type="checkbox" v-model="enabled" />
-  </div>
+    <input type="checkbox" v-model="isOn" />
+    <span v-if="title">{{ title }}</span>
+</label>
 </template>
 
-<style lang="scss">
-@import './toggle.scss'
+<style module lang="scss">
+.toggle {
+  font-size: 14px;
+  line-height: 1em;
+  position: relative;
+  padding: calc(var(--padding) - 1px) 0 calc(var(--padding) + 1px) 0;
+  min-width: calc(var(--diameter) * 2);
+  height: min-content;
+
+  --diameter: v-bind(diameter);
+  --lineWidth: 2px;
+  --padding: 10px;
+
+  --void-color: var(--void-off-background-color);
+  --pin-color: var(--void-off-pin-color);
+
+  &[checked] {
+    --void-color: var(--void-on-background-color);
+    --pin-color: var(--void-on-pin-color);
+    &::after{
+      transform:translateX(var(--diameter));
+    }
+  }
+
+  &:hover {
+    --void-color: var(--void-off-hover-background-color);
+    --pin-color: var(--void-off-hover-pin-color);
+    &[checked] {
+      --void-color: var(--void-on-hover-background-color);
+      --pin-color: var(--void-on-hover-pin-color);
+    }
+  }
+  &::before, &::after {
+    content: '';
+    position: absolute;
+    border-radius: var(--diameter);
+  }
+  &::before {
+    height: var(--diameter);
+    aspect-ratio: 2;
+    background-color: var(--void-color);
+    left: 0;
+    top: var(--padding);
+  }
+  &::after {
+    height: calc(var(--diameter) - var(--lineWidth) * 2);
+    aspect-ratio: 1;
+    background-color: var(--pin-color);
+    left: var(--lineWidth);
+    top: calc(var(--padding) + var(--lineWidth));
+    transition: all .2s;
+  }
+
+  > span {
+    padding-left: calc(var(--diameter) + 8px);
+  }
+
+  > input {
+    visibility: hidden;
+  }
+}
 </style>

front/src/style/colors.scss

@@ -104,6 +104,16 @@
     --disabled-background-color:var(--fw-beige-100);
     --disabled-border-color:var(--fw-beige-100);
 
+    --void-off-background-color: var(--fw-gray-500);
+    --void-off-pin-color: var(--fw-beige-100);
+    --void-on-background-color: var(--fw-blue-100);
+    --void-on-pin-color: var(--fw-beige-100);
+
+    --void-off-hover-background-color: var(--fw-gray-600);
+    --void-off-hover-pin-color: var(--fw-beige-200);
+    --void-on-hover-background-color: var(--fw-blue-400);
+    --void-on-hover-pin-color: var(--fw-blue-010);
+
     &.raised {
       --background-color:var(--fw-beige-300);
       --border-color:color-mix(in oklab, var(--fw-beige-400) 90%, currentcolor);

front/ui-docs/components/ui/toggle.md

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import Toggle from '~/components/ui/Toggle.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Button from '~/components/ui/Button.vue' // needs to be imported so that we can use colors...
 
 import { ref } from 'vue'
 
 const toggle = ref(false)
-const toggle2 = ref(false)
 </script>
 
 # Toggle
@@ -20,16 +21,30 @@ Toggles are basic form inputs that visually represent a boolean value. Toggles c
 
 Link your toggle to an input using the `v-model` directive.
 
+<Layout flex class="preview">
+
 ```vue-html
 <Toggle v-model="toggle" />
 ```
 
 <Toggle v-model="toggle" />
 
+</Layout>
+
+## Add title
+
+<Layout flex class="preview">
+
+<Toggle v-model="toggle" title="Option 358" />
+
+</Layout>
+
 ## Big toggle
 
 Pass a `big` prop to create a larger toggle.
 
+<Layout flex class="preview">
+
 ```vue-html{2}
 <Toggle
    big
@@ -37,4 +52,6 @@ Pass a `big` prop to create a larger toggle.
 />
 ```
 
-<Toggle big v-model="toggle2" />
+<Toggle big v-model="toggle" />
+
+</Layout>