create button components - incomplete

package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "apkt",
-  "version": "0.0.0",
+  "name": "eis",
+  "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "apkt",
-      "version": "0.0.0",
+      "name": "eis",
+      "version": "0.0.1",
       "dependencies": {
         "@headlessui/tailwindcss": "^0.2.0",
         "@headlessui/vue": "^1.7.16",

src/assets/css/style.css

@@ -2248,6 +2248,10 @@ select {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.outline {
+  outline-style: solid;
+}
+
 .outline-0 {
   outline-width: 0px;
 }

src/components/Button.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  type: {
+    type: String as () => "button" | "submit" | "reset",
+    default: "button",
+  },
+  onClick: {
+    type: Function as unknown as () => (payload: MouseEvent) => void,
+    default: () => { },
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  className: {
+    type: String,
+    default: "",
+  },
+  styleType: {
+    type: String as () => "filled" | "secondary" | "outline" | "text",
+    default: "filled"
+  }
+});
+
+const buttonStyle = computed(() => {
+  if (props.styleType == 'filled') {
+    return 'hello'
+  }
+})
+</script>
+
+<template>
+  <button :type="type" @click="onClick" :disabled="disabled"
+    :class="['px-4 py-2 mt-2 text-sm font-bold text-white border-transparent rounded-lg bg-primary-500 focus:outline-0 disabled:bg-primary-400', className]">
+    <slot></slot>
+    <span v-if="!isLoading">{{ label }}</span>
+    <span v-else>
+      <center>
+        <lottie-player autoplay loop mode="normal" src="https://assets2.lottiefiles.com/packages/lf20_lNbR6W7kY6.json"
+          style="height:1.2rem"></lottie-player>
+      </center>
+    </span>
+  </button>
+</template>

src/router/index.ts

@@ -1,6 +1,7 @@
 
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '@/views/HomeView.vue'
+import TestView from '@/views/TestView.vue'
 import LoginView from '@/views/LoginView.vue'
 import NotFoundView from '@/views/NotFoundView.vue'
 import MenuSample from '@/components/Menus/MenuSample.vue'
@@ -286,6 +287,11 @@ const router = createRouter({
         },
       ]
     },
+    {
+      path: '/test',
+      name: 'Test',
+      component: TestView
+    },
     {
       path: '/login',
       name: 'Login',

src/views/TestView.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+  import Button from '@/components/Button.vue'
+</script>
+
+<template>
+  <Button />
+</template>