From 84f981a8cb83e91b815ae29c5592a17c0e71005a Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 21 Jun 2022 17:25:24 +0800
Subject: [PATCH] feat(components): add switch component

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 .../src/components/switch/Switch.story.vue    | 18 +++++
 .../src/components/switch/Switch.vue          | 77 +++++++++++++++++++
 .../switch/__tests__/Switch.spec.ts           |  9 +++
 .../components/src/components/switch/index.ts |  1 +
 4 files changed, 105 insertions(+)
 create mode 100644 packages/components/src/components/switch/Switch.story.vue
 create mode 100644 packages/components/src/components/switch/Switch.vue
 create mode 100644 packages/components/src/components/switch/__tests__/Switch.spec.ts
 create mode 100644 packages/components/src/components/switch/index.ts

diff --git a/packages/components/src/components/switch/Switch.story.vue b/packages/components/src/components/switch/Switch.story.vue
new file mode 100644
index 00000000..b4bd1b0c
--- /dev/null
+++ b/packages/components/src/components/switch/Switch.story.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { VSwitch } from "./index";
+
+function initState() {
+  return {
+    value: false,
+  };
+}
+</script>
+<template>
+  <Story :init-state="initState" title="Switch">
+    <template #default="{ state }">
+      <div class="p-4">
+        <VSwitch v-model="state.value"></VSwitch>
+      </div>
+    </template>
+  </Story>
+</template>
diff --git a/packages/components/src/components/switch/Switch.vue b/packages/components/src/components/switch/Switch.vue
new file mode 100644
index 00000000..04b500af
--- /dev/null
+++ b/packages/components/src/components/switch/Switch.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const handleChange = () => {
+  emit("update:modelValue", !props.modelValue);
+  emit("change", !props.modelValue);
+};
+</script>
+<template>
+  <div class="switch-wrapper">
+    <button
+      :class="{
+        'bg-gray-200': !modelValue,
+        'bg-themeable-primary-600': modelValue,
+      }"
+      aria-checked="false"
+      class="switch-inner"
+      role="switch"
+      type="button"
+      @click="handleChange"
+    >
+      <span
+        :class="{
+          'translate-x-0': !modelValue,
+          'translate-x-5': modelValue,
+        }"
+        aria-hidden="true"
+        class="switch-indicator"
+      >
+        <slot name="icon" />
+      </span>
+    </button>
+  </div>
+</template>
+<style lang="scss">
+.switch-wrapper {
+  @apply inline-flex;
+  @apply box-border;
+
+  .switch-inner {
+    @apply relative;
+    @apply inline-flex;
+    @apply flex-shrink-0;
+    @apply h-6;
+    @apply w-11;
+    @apply border-2;
+    @apply border-transparent;
+    @apply rounded-full;
+    @apply cursor-pointer;
+    @apply transition-colors;
+    @apply ease-in-out;
+    @apply duration-200;
+
+    .switch-indicator {
+      @apply pointer-events-none;
+      @apply inline-block;
+      @apply h-5;
+      @apply w-5;
+      @apply rounded-full;
+      @apply bg-white;
+      @apply shadow;
+      @apply transform;
+      @apply ring-0;
+      @apply transition;
+      @apply ease-in-out;
+      @apply duration-200;
+    }
+  }
+}
+</style>
diff --git a/packages/components/src/components/switch/__tests__/Switch.spec.ts b/packages/components/src/components/switch/__tests__/Switch.spec.ts
new file mode 100644
index 00000000..b7772449
--- /dev/null
+++ b/packages/components/src/components/switch/__tests__/Switch.spec.ts
@@ -0,0 +1,9 @@
+import { describe, expect, it } from "vitest";
+import { VSwitch } from "../index";
+import { mount } from "@vue/test-utils";
+
+describe("Switch", () => {
+  it("should render", () => {
+    expect(mount(VSwitch)).toBeDefined();
+  });
+});
diff --git a/packages/components/src/components/switch/index.ts b/packages/components/src/components/switch/index.ts
new file mode 100644
index 00000000..2079033d
--- /dev/null
+++ b/packages/components/src/components/switch/index.ts
@@ -0,0 +1 @@
+export { default as VSwitch } from "./Switch.vue";