feat: add color picker and fix documents routes

docs/.vitepress/config.ts

@@ -40,6 +40,7 @@ export default defineConfig({
         items: [
           { text: "EButton", link: "../components/ebutton.md" },
           { text: "ECheckbox", link: "../components/echeckbox.md" },
+          { text: "EColorPicker", link: "../components/ecolorpicker.md" },
           { text: "EDatePicker", link: "../components/edatepicker.md" },
           { text: "EText", link: "../components/etext.md" },
           { text: "ETextArea", link: "../components/etextarea.md" },

docs/guide/components/echeckbox.md

@@ -3,8 +3,8 @@ prev:
   text: "EButton"
   link: "/guide/components/ebutton.md"
 next:
-  text: "EText"
-  link: "/guide/components/etext.md"
+  text: "EColorPicker"
+  link: "/guide/components/ecolorpicker.md"
 ---
 
 <script setup lang="ts">

docs/guide/components/ecolorpicker.md

@@ -0,0 +1,52 @@
+---
+prev:
+  text: "ECheckbox"
+  link: "/guide/components/echeckbox.md"
+next:
+  text: "EDatePicker"
+  link: "/guide/components/edatepicker.md"
+---
+
+<script setup lang="ts">
+import { EColorPicker } from "../../../src/index.ts";
+import ExampleLayout from "../../utils/ExampleLayout.vue";
+import { ref } from "vue";
+
+const color = ref();
+</script>
+
+# EColorPicker
+
+The `EColorPicker` component replaces the standard html input type color and encapsulates well-defined logic that can be reused throughout the app.
+
+## Basic Usage
+
+```vue-html
+<script setup>
+import { ref } from "vue";
+import { EColorPicker } from "easy-kit-component";
+
+const date = ref();
+</script>
+
+<template>
+  <EColorPicker v-model="color"/>
+</template>
+```
+
+<ExampleLayout>
+  <EColorPicker style="width: 40px !important" id="text" v-model="color"/> 
+  <br/>
+  <h6>Color is : {{ color }}</h6>
+</ExampleLayout>
+
+
+## API Reference
+
+- **Props**
+
+```ts
+interface ColorPicker {
+  disabled?: boolean;
+}
+```

docs/guide/components/edatepicker.md

@@ -1,7 +1,7 @@
 ---
 prev:
-  text: "ECheckbox"
-  link: "/guide/components/echeckbox.md"
+  text: "EColorPicker"
+  link: "/guide/components/ecolorpicker.md"
 next:
   text: "EText"
   link: "/guide/components/etext.md"

docs/guide/components/eradio.md

@@ -1,7 +1,7 @@
 ---
 prev:
-  text: "EText"
-  link: "/guide/components/etext.md"
+  text: "ETextArea"
+  link: "/guide/components/etextarea.md"
 next:
   text: "ESelect"
   link: "/guide/components/eselect.md"

docs/guide/components/etext.md

@@ -1,10 +1,10 @@
 ---
 prev:
-  text: "ECheckbox"
-  link: "/guide/components/echeckbox.md"
+  text: "EDatePicker"
+  link: "/guide/components/edatepicker.md"
 next:
-  text: "ERadio"
-  link: "/guide/components/eradio.md"
+  text: "ETextArea"
+  link: "/guide/components/etextarea.md"
 ---
 
 <script setup lang="ts">

src/components/input/colorpicker/EColorPicker.test.ts

@@ -0,0 +1,15 @@
+import { shallowMount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+import EColorPicker from "./EColorPicker.vue";
+
+describe("EColorPicker suite", () => {
+  let wrapper = shallowMount(EColorPicker);
+
+  it("render correctly", () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("render default disabled", () => {
+    expect(wrapper.attributes("disabled")).toBeUndefined();
+  });
+});

src/components/input/colorpicker/EColorPicker.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useUpdateModelText } from "../../../composables/useUpdateModelValue";
+
+interface ColorPicker {
+  disabled?: boolean;
+}
+
+const props = defineProps<ColorPicker>();
+const emit = defineEmits();
+</script>
+
+<template>
+  <input
+    type="color"
+    @input="useUpdateModelText($event, emit)" 
+    :disabled="props.disabled"
+  />
+</template>
+
+<script lang="ts">
+export default {
+  name: "EColorPicker",
+};
+</script>

src/index.ts

@@ -1,9 +1,19 @@
 import EButton from "./components/button/EButton.vue";
 import ECheckbox from "./components/input/checkbox/ECheckbox.vue";
+import EColorPicker from "./components/input/colorpicker/EColorPicker.vue";
 import EDatePicker from "./components/input/datepicker/EDatePicker.vue";
 import EText from "./components/input/text/EText.vue";
 import ETextArea from "./components/input/textarea/ETextArea.vue";
 import ERadio from "./components/radio/ERadio.vue";
 import ESelect from "./components/select/ESelect.vue";
 
-export { EButton, ECheckbox, EDatePicker, EText, ETextArea, ERadio, ESelect };
+export {
+  EButton,
+  ECheckbox,
+  EColorPicker,
+  EDatePicker,
+  EText,
+  ETextArea,
+  ERadio,
+  ESelect,
+};