Replacing the Checkbox component by the component library.

.gitignore

@@ -28,3 +28,12 @@ coverage
 *.sw?
 
 *.tsbuildinfo
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

README.md

@@ -1,4 +1,4 @@
-# logitar-vue3-template
+# Logitar Vue3 Template
 
 This template should help get you started developing with Vue 3 in Vite.
 

package.json

@@ -22,6 +22,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.5",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.2",
+    "logitar-vue3-ui": "file:../Vue3Ui",
     "nanoid": "^5.0.4",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
@@ -32,7 +33,7 @@
     "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node18": "^18.2.2",
     "@types/jsdom": "^21.1.6",
-    "@types/node": "^18.19.3",
+    "@types/node": "^20.10.5",
     "@vitejs/plugin-vue": "^4.5.2",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vitest/coverage-v8": "^1.1.0",

src/views/HomeView.vue

@@ -1,5 +1,17 @@
+<script setup lang="ts">
+import { parsingUtils, TarCheckbox, type CheckboxOptions } from "logitar-vue3-ui";
+
+const options: CheckboxOptions = {
+  label: "Test",
+  switch: true,
+};
+
+console.log(parsingUtils.parseBoolean("TRUE   "));
+</script>
+
 <template>
   <main class="container">
     <h1>This is a home page</h1>
+    <TarCheckbox v-bind="options" />
   </main>
 </template>

src/views/account/RecoverPasswordView.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { TarCheckbox } from "logitar-vue3-ui";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 
-import AppCheckbox from "@/components/AppCheckbox.vue";
 import type { RecoverPasswordPayload } from "@/types/account";
 import { recoverPassword } from "@/api/account";
 
@@ -35,7 +35,7 @@ function onResetPassword(): void {
 <template>
   <main class="container">
     <h1>Recover Password</h1>
-    <AppCheckbox class="mb-3" id="success" label="Success" switch v-model="success" />
+    <TarCheckbox class="mb-3" id="success" label="Success" switch v-model="success" />
     <div v-if="success">
       <div class="alert alert-success">Success!</div>
       <button v-if="payload.username" type="button" class="btn btn-warning" @click="onResetPassword">

src/views/account/RegisterView.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { TarCheckbox } from "logitar-vue3-ui";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 
-import AppCheckbox from "@/components/AppCheckbox.vue";
 import type { RegisterPayload } from "@/types/account";
 import { register } from "@/api/account";
 
@@ -46,7 +46,7 @@ function onEmailAddressUpdate(e: Event): void {
 <template>
   <main class="container">
     <h1>Register</h1>
-    <AppCheckbox class="mb-3" id="success" label="Success" switch v-model="success" />
+    <TarCheckbox class="mb-3" id="success" label="Success" switch v-model="success" />
     <div v-if="success">
       <div class="alert alert-success">Success!</div>
       <button v-if="payload.emailAddress" type="button" class="btn btn-warning" @click="onConfirm">

src/views/account/SignInView.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { TarCheckbox } from "logitar-vue3-ui";
 import { ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
-import AppCheckbox from "@/components/AppCheckbox.vue";
 import type { Actor } from "@/types/aggregate";
 import type { ErrorDetail } from "@/types/api";
 import type { SignInPayload } from "@/types/account";
@@ -54,7 +54,7 @@ async function submit(): Promise<void> {
         <label class="form-label" for="password">Password</label>
         <input class="form-control" id="password" placeholder="Password" type="password" v-model="payload.password" />
       </div>
-      <AppCheckbox class="mb-3" id="remember-be" label="Remember Me" v-model="payload.remember" />
+      <TarCheckbox class="mb-3" id="remember-be" label="Remember Me" v-model="payload.remember" />
       <button class="btn btn-primary me-2" :disabled="loading" type="submit">
         <span v-if="loading">
           <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>

yarn.lock

@@ -687,20 +687,13 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
-"@types/node@*":
+"@types/node@*", "@types/node@^20.10.5":
   version "20.10.5"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.10.5.tgz#47ad460b514096b7ed63a1dae26fad0914ed3ab2"
   integrity sha512-nNPsNE65wjMxEKI93yOP+NPGGBJz/PoN3kZsVLee0XMiJolxSekEVD8wRwBUBqkwc7UWop0edW50yrCQW4CyRw==
   dependencies:
     undici-types "~5.26.4"
 
-"@types/node@^18.19.3":
-  version "18.19.3"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.19.3.tgz#e4723c4cb385641d61b983f6fe0b716abd5f8fc0"
-  integrity sha512-k5fggr14DwAytoA/t8rPrIz++lXK7/DqckthCmoZOKNsEbJkId4Z//BqgApXBUGrGddrigYa1oqheo/7YmW4rg==
-  dependencies:
-    undici-types "~5.26.4"
-
 "@types/normalize-package-data@^2.4.1":
   version "2.4.4"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz#56e2cc26c397c038fab0e3a917a12d5c5909e901"
@@ -2263,6 +2256,11 @@ lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+"logitar-vue3-ui@file:../Vue3Ui":
+  version "0.1.0"
+  dependencies:
+    nanoid "^5.0.4"
+
 loupe@^2.3.6, loupe@^2.3.7:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/loupe/-/loupe-2.3.7.tgz#6e69b7d4db7d3ab436328013d37d1c8c3540c697"