From abfb6c97a254c3bce2796eb1f03468905d1384a4 Mon Sep 17 00:00:00 2001
From: Thierry Goettelmann <thierry@byscripts.info>
Date: Wed, 14 Sep 2022 09:34:40 +0200
Subject: [PATCH] feat(lite/component): Radio and Checkbox

---
 .../src/components/form/CheckboxWrapper.vue   | 98 +++++++++++++++++++
 .../lite/src/components/form/RadioWrapper.vue | 29 ++++++
 2 files changed, 127 insertions(+)
 create mode 100644 @xen-orchestra/lite/src/components/form/CheckboxWrapper.vue
 create mode 100644 @xen-orchestra/lite/src/components/form/RadioWrapper.vue

diff --git a/@xen-orchestra/lite/src/components/form/CheckboxWrapper.vue b/@xen-orchestra/lite/src/components/form/CheckboxWrapper.vue
new file mode 100644
index 000000000..28acf22fb
--- /dev/null
+++ b/@xen-orchestra/lite/src/components/form/CheckboxWrapper.vue
@@ -0,0 +1,98 @@
+<template>
+  <label class="checkbox-wrapper">
+    <slot />
+    <span class="checkbox">
+      <UiIcon :fixed-width="false" :icon="icon" class="check-icon" />
+    </span>
+    <slot name="label">{{ label }}</slot>
+  </label>
+</template>
+
+<script lang="ts" setup>
+import { inject } from "vue";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import UiIcon from "@/components/ui/UiIcon.vue";
+
+defineProps<{
+  label?: string;
+}>();
+
+const icon = inject("checkedIcon", faCheck);
+</script>
+
+<style lang="postcss" scoped>
+.checkbox-wrapper {
+  font-size: 1.6rem;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  height: 3.8rem;
+  gap: 1rem;
+}
+
+.check-icon {
+  visibility: hidden;
+  color: var(--color-blue-scale-500);
+}
+
+:slotted(input) {
+  position: absolute;
+  opacity: 0;
+
+  & ~ .checkbox {
+    --background-color: var(--background-color-primary);
+    --border-color: var(--color-blue-scale-400);
+  }
+
+  &:hover ~ .checkbox,
+  &:focus ~ .checkbox {
+    --border-color: var(--color-extra-blue-l40);
+  }
+
+  &:active ~ .checkbox {
+    --border-color: var(--color-extra-blue-l20);
+  }
+
+  &:checked ~ .checkbox {
+    --border-color: transparent;
+    --background-color: var(--color-extra-blue-base);
+
+    .check-icon {
+      visibility: visible;
+    }
+  }
+
+  &:checked:hover ~ .checkbox,
+  &:checked:focus ~ .checkbox {
+    --background-color: var(--color-extra-blue-d20);
+  }
+
+  &:checked:active ~ .checkbox {
+    --background-color: var(--color-extra-blue-d40);
+  }
+
+  &:disabled ~ .checkbox {
+    --border-color: var(--color-blue-scale-400);
+    --background-color: var(--background-color-secondary);
+  }
+
+  &:disabled:checked ~ .checkbox {
+    --border-color: transparent;
+    --background-color: var(--color-extra-blue-l60);
+  }
+}
+
+.checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--border-color);
+  border-radius: 0.4rem;
+  background-color: var(--background-color);
+  box-shadow: var(--shadow-100);
+}
+</style>
diff --git a/@xen-orchestra/lite/src/components/form/RadioWrapper.vue b/@xen-orchestra/lite/src/components/form/RadioWrapper.vue
new file mode 100644
index 000000000..2cb10bf99
--- /dev/null
+++ b/@xen-orchestra/lite/src/components/form/RadioWrapper.vue
@@ -0,0 +1,29 @@
+<template>
+  <CheckboxWrapper :label="label">
+    <template #default>
+      <slot />
+    </template>
+    <template #label>
+      <slot name="label" />
+    </template>
+  </CheckboxWrapper>
+</template>
+
+<script lang="ts" setup>
+import { provide } from "vue";
+import { faCircle } from "@fortawesome/free-solid-svg-icons";
+import CheckboxWrapper from "@/components/form/CheckboxWrapper.vue";
+
+defineProps<{
+  label?: string;
+}>();
+
+provide("checkedIcon", faCircle);
+</script>
+
+<style lang="postcss" scoped>
+.checkbox-wrapper :deep(.checkbox) {
+  font-size: 1rem;
+  border-radius: 1.9rem;
+}
+</style>