Small fixes

src/demo/Animations/StarBorderDemo.vue

@@ -1,29 +1,27 @@
 <template>
-    <TabbedLayout>
-        <template #preview>
-            <div class="demo-container overflow-hidden h-[400px]">
-                <StarBorder as="button" :color="color" :speed="speedProp" :thickness="thickness">
-                    Star Border
-                </StarBorder>
-            </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container overflow-hidden h-[400px]">
+        <StarBorder as="button" :color="color" :speed="speedProp" :thickness="thickness">Star Border</StarBorder>
+      </div>
 
-            <Customize>
-                <PreviewSelect title="Color" v-model="color" :options="colorOptions" />
-                <PreviewSlider title="Thickness" v-model="thickness" :min="0.5" :max="8" :step="0.5" value-unit="px" />
-                <PreviewSlider title="Speed" v-model="speed" :min="1" :max="10" :step="0.5" value-unit="s" />
-            </Customize>
+      <Customize>
+        <PreviewSelect title="Color" v-model="color" :options="colorOptions" />
+        <PreviewSlider title="Thickness" v-model="thickness" :min="0.5" :max="8" :step="0.5" value-unit="px" />
+        <PreviewSlider title="Speed" v-model="speed" :min="1" :max="10" :step="0.5" value-unit="s" />
+      </Customize>
 
-            <PropTable :data="propData" />
-        </template>
+      <PropTable :data="propData" />
+    </template>
 
-        <template #code>
-            <CodeExample :code-object="starBorder" />
-        </template>
+    <template #code>
+      <CodeExample :code-object="starBorder" />
+    </template>
 
-        <template #cli>
-            <CliInstallation :command="starBorder.cli" />
-        </template>
-    </TabbedLayout>
+    <template #cli>
+      <CliInstallation :command="starBorder.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
@@ -38,46 +36,50 @@ import PreviewSelect from '../../components/common/PreviewSelect.vue';
 import StarBorder from '../../content/Animations/StarBorder/StarBorder.vue';
 import { starBorder } from '@/constants/code/Animations/starBorderCode';
 
-const thickness = ref<number>(3)
-const speed = ref<number>(6)
-const speedProp = ref<string>('6s')
-const color = ref<string>('magenta')
-const colorOptions = [{ label: 'Magenta', value: "magenta" }, { label: 'Cyan', value: "cyan" }, { label: 'white', value: "white" }]
+const thickness = ref<number>(3);
+const speed = ref<number>(6);
+const speedProp = ref<string>('6s');
+const color = ref<string>('magenta');
+const colorOptions = [
+  { label: 'Magenta', value: 'magenta' },
+  { label: 'Cyan', value: 'cyan' },
+  { label: 'white', value: 'white' }
+];
 
 watch(speed, () => {
-    speedProp.value = (speed.value).toString() + 's'
-})
+  speedProp.value = speed.value.toString() + 's';
+});
 
 const propData = [
-    {
-        name: 'as',
-        type: 'string',
-        default: 'button',
-        description: 'Allows specifying the type of the parent component to be rendered.'
-    },
-    {
-        name: 'customClass',
-        type: 'string',
-        default: '',
-        description: 'Allows adding custom classes to the component.'
-    },
-    {
-        name: 'color',
-        type: 'string',
-        default: 'white',
-        description: 'Changes the main color of the border (fades to transparent)'
-    },
-    {
-        name: 'speed',
-        type: 'string',
-        default: '6s',
-        description: 'Changes the speed of the animation.'
-    },
-    {
-        name: 'thickness',
-        type: 'number',
-        default: '3',
-        description: 'Controls the thickness of the star border effect.'
-    }
+  {
+    name: 'as',
+    type: 'string',
+    default: 'button',
+    description: 'Allows specifying the type of the parent component to be rendered.'
+  },
+  {
+    name: 'customClass',
+    type: 'string',
+    default: '',
+    description: 'Allows adding custom classes to the component.'
+  },
+  {
+    name: 'color',
+    type: 'string',
+    default: 'white',
+    description: 'Changes the main color of the border (fades to transparent)'
+  },
+  {
+    name: 'speed',
+    type: 'string',
+    default: '6s',
+    description: 'Changes the speed of the animation.'
+  },
+  {
+    name: 'thickness',
+    type: 'number',
+    default: '3',
+    description: 'Controls the thickness of the star border effect.'
+  }
 ];
 </script>

src/demo/Components/AnimatedListDemo.vue

@@ -31,21 +31,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSwitch from '@/components/common/PreviewSwitch.vue'
-import AnimatedList from '../../content/Components/AnimatedList/AnimatedList.vue'
-import { animatedList } from '../../constants/code/Components/animatedListCode'
-import { useForceRerender } from '@/composables/useForceRerender'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
+import AnimatedList from '../../content/Components/AnimatedList/AnimatedList.vue';
+import { animatedList } from '../../constants/code/Components/animatedListCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
-const { rerenderKey } = useForceRerender()
-const showGradients = ref(true)
-const enableArrowNavigation = ref(true)
-const displayScrollbar = ref(true)
+const { rerenderKey } = useForceRerender();
+const showGradients = ref(true);
+const enableArrowNavigation = ref(true);
+const displayScrollbar = ref(true);
 
 const propData = [
   {
@@ -96,5 +96,5 @@ const propData = [
     default: '-',
     description: 'Emitted when an item is selected. Receives (item: string, index: number)'
   }
-]
-</script> 
+];
+</script>

src/demo/Components/FolderDemo.vue

@@ -2,8 +2,7 @@
   <TabbedLayout>
     <template #preview>
       <div class="demo-container">
-        <Folder :items="items" :size="size" :color="color">
-        </Folder>
+        <Folder :size="size" :color="color"></Folder>
       </div>
 
       <Customize>
@@ -37,7 +36,6 @@ import PreviewSlider from '@/components/common/PreviewSlider.vue';
 import PropTable from '@/components/common/PropTable.vue';
 import TabbedLayout from '@/components/common/TabbedLayout.vue';
 
-const items = ['Doc 1', 'Doc 2', 'Doc 3'];
 const color = ref('#5227FF');
 const size = ref(2);
 
@@ -65,6 +63,6 @@ const propData = [
     type: 'number',
     default: '1',
     description: 'Size multiplier for the folder.'
-  },
+  }
 ];
-</script>
+</script>