change port for styleguide remove appbutton

package.json

@@ -6,7 +6,7 @@
     "build": "vue-tsc --noEmit && vite build",
     "dev": "vite",
     "preview": "vite preview",
-    "styleguide": "vue-cli-service styleguidist",
+    "styleguide": "vue-cli-service styleguidist --config styleguide.config.cjs",
     "styleguide:build": "vue-cli-service styleguidist:build",
     "tauri": "tauri"
   },
@@ -24,5 +24,10 @@
     "vue-styleguidist": "^4.72.4",
     "webpack": "^5.90.1"
   },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
   "type": "module"
 }

src/App.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import Greet from "./components/Greet.vue";
+// import Greet from "./components/Greet.vue";
 </script>
 
 <template>
   <div class="container">
     <h1>Welcome to Tauri!</h1>
-
     <div class="row">
       <a href="https://vitejs.dev" target="_blank">
         <img src="/vite.svg" class="logo vite" alt="Vite logo" />
@@ -37,7 +36,6 @@ import Greet from "./components/Greet.vue";
       >
     </p>
 
-    <Greet />
   </div>
 </template>
 

src/components/AppButton.vue

@@ -1,84 +0,0 @@
-<template>
-	<button :style="styles" @click="handleClick">
-		<!-- @slot Use this slot to place the button content -->
-		<slot></slot>
-	</button>
-</template>
-
-<script>
-import sizeMixin from './sizeMixin'
-export default {
-	name: 'app-button',
-	mixins: [sizeMixin],
-	props: {
-		/**
-		 * Sets the button font color
-		 */
-		color: {
-			type: String,
-			default: 'black'
-		},
-		/** Sets background color of the button
-		 * @since 1.2.0
-		 */
-		background: {
-			type: String,
-			default: 'white'
-		},
-		/** @deprecated Use color instead */
-		oldColor: String
-	},
-	computed: {
-		styles() {
-			return {
-				'font-size': this.size,
-				color: this.color,
-				background: this.background
-			}
-		}
-	},
-	methods: {
-		handleClick(e) {
-			/** Triggered when button is clicked
-			 * @event click
-			 * @type {Event}
-			 */
-			this.$emit('click', e)
-
-			/** Event for Alligator's example
-			 * @event gator
-			 * @type {Event}
-			 */
-			this.$emit('gator', e)
-		}
-	}
-}
-</script>
-
-<docs lang="md">
-This button is amazing, use it responsibly.
-
-## Examples
-
-Orange button:
-
-```jsx
-<app-button color="orange">Push Me</app-button>
-```
-
-Ugly button with pink font and blue background:
-
-```jsx
-<app-button color="pink" background="blue">
-	Ugly button
-</app-button>
-```
-
-Button containing custom tags:
-
-```jsx
-<app-button>
-	Text with <b>bold</b>
-</app-button>
-```
-</docs>

src/components/Greet.vue

@@ -10,12 +10,3 @@ async function greet() {
   greetMsg.value = await invoke("greet", { name: name.value });
 }
 </script>
-
-<template>
-  <form class="row" @submit.prevent="greet">
-    <input id="greet-input" v-model="name" placeholder="Enter a name..." />
-    <button type="submit">Greet</button>
-  </form>
-
-  <p>{{ greetMsg }}</p>
-</template>

src/components/sizeMixin.js

@@ -1,14 +0,0 @@
-/**
- * @mixin
- */
-module.exports = {
-	props: {
-		/**
-		 * Set size of the element
-		 */
-		size: {
-			type: String,
-			default: '14px'
-		}
-	}
-}

styleguide.config.cjs

@@ -1,7 +1,8 @@
 module.exports = {
 	// set your styleguidist configuration here
 	title: 'Default Style Guide',
-	 components: 'src/components/Greet.vue',
+	serverPort: 6061,
+	// components: 'src/components/**/[A-Z]*.vue',
 	// defaultExample: true,
 	// sections: [
 	//   {