formatting

src/demo/Components/CounterDemo.vue

@@ -17,13 +17,13 @@
 
         <div class="flex gap-4 bottom-4 justify-center mt-4 absolute left-1/2 transform -translate-x-1/2">
           <button
-            class="bg-[#170D27] rounded-[10px] border border-[#271E37] hover:bg-[#271E37] text-white h-10 w-10 transition-colors"
+            class="cursor-pointer bg-[#0b0b0b] rounded-[10px] border border-[#333] hover:bg-[#222] text-white h-10 w-10 transition-colors"
             @click="value > 0 && value--"
           >
             -
           </button>
           <button
-            class="bg-[#170D27] rounded-[10px] border border-[#271E37] hover:bg-[#271E37] text-white h-10 w-10 transition-colors"
+            class="cursor-pointer bg-[#0b0b0b] rounded-[10px] border border-[#333] hover:bg-[#222] text-white h-10 w-10 transition-colors"
             @click="value < 999 && value++"
           >
             +
@@ -32,29 +32,11 @@
       </div>
 
       <Customize>
-        <PreviewSlider
-          title="Value"
-          v-model="value"
-          :min="0"
-          :max="999"
-          :step="1"
-        />
+        <PreviewSlider title="Value" v-model="value" :min="0" :max="999" :step="1" />
 
-        <PreviewSlider
-          title="Gap"
-          v-model="gap"
-          :min="0"
-          :max="50"
-          :step="5"
-        />
+        <PreviewSlider title="Gap" v-model="gap" :min="0" :max="50" :step="5" />
 
-        <PreviewSlider
-          title="Font Size"
-          v-model="fontSize"
-          :min="40"
-          :max="200"
-          :step="10"
-        />
+        <PreviewSlider title="Font Size" v-model="fontSize" :min="40" :max="200" :step="10" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -72,124 +54,124 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
 
-import Counter from '../../content/Components/Counter/Counter.vue'
-import { counter } from '../../constants/code/Components/counterCode'
+import Counter from '../../content/Components/Counter/Counter.vue';
+import { counter } from '../../constants/code/Components/counterCode';
 
-const value = ref(123)
-const fontSize = ref(80)
-const gap = ref(10)
+const value = ref(123);
+const fontSize = ref(80);
+const gap = ref(10);
 
 const propData = [
   {
-    name: "value",
-    type: "number",
-    default: "N/A (required)",
-    description: "The numeric value to display in the counter."
+    name: 'value',
+    type: 'number',
+    default: 'N/A (required)',
+    description: 'The numeric value to display in the counter.'
   },
   {
-    name: "fontSize",
-    type: "number",
-    default: "100",
-    description: "The base font size used for the counter digits."
+    name: 'fontSize',
+    type: 'number',
+    default: '100',
+    description: 'The base font size used for the counter digits.'
   },
   {
-    name: "padding",
-    type: "number",
-    default: "0",
-    description: "Additional padding added to the digit height."
+    name: 'padding',
+    type: 'number',
+    default: '0',
+    description: 'Additional padding added to the digit height.'
   },
   {
-    name: "places",
-    type: "number[]",
-    default: "[100, 10, 1]",
-    description: "An array of place values to determine which digits to display."
+    name: 'places',
+    type: 'number[]',
+    default: '[100, 10, 1]',
+    description: 'An array of place values to determine which digits to display.'
   },
   {
-    name: "gap",
-    type: "number",
-    default: "8",
-    description: "The gap (in pixels) between each digit."
+    name: 'gap',
+    type: 'number',
+    default: '8',
+    description: 'The gap (in pixels) between each digit.'
   },
   {
-    name: "borderRadius",
-    type: "number",
-    default: "4",
-    description: "The border radius (in pixels) for the counter container."
+    name: 'borderRadius',
+    type: 'number',
+    default: '4',
+    description: 'The border radius (in pixels) for the counter container.'
   },
   {
-    name: "horizontalPadding",
-    type: "number",
-    default: "8",
-    description: "The horizontal padding (in pixels) for the counter container."
+    name: 'horizontalPadding',
+    type: 'number',
+    default: '8',
+    description: 'The horizontal padding (in pixels) for the counter container.'
   },
   {
-    name: "textColor",
-    type: "string",
+    name: 'textColor',
+    type: 'string',
     default: "'white'",
-    description: "The text color for the counter digits."
+    description: 'The text color for the counter digits.'
   },
   {
-    name: "fontWeight",
-    type: "string | number",
+    name: 'fontWeight',
+    type: 'string | number',
     default: "'bold'",
-    description: "The font weight of the counter digits."
+    description: 'The font weight of the counter digits.'
   },
   {
-    name: "containerStyle",
-    type: "CSSProperties",
-    default: "{}",
-    description: "Custom inline styles for the outer container."
+    name: 'containerStyle',
+    type: 'CSSProperties',
+    default: '{}',
+    description: 'Custom inline styles for the outer container.'
   },
   {
-    name: "counterStyle",
-    type: "CSSProperties",
-    default: "{}",
-    description: "Custom inline styles for the counter element."
+    name: 'counterStyle',
+    type: 'CSSProperties',
+    default: '{}',
+    description: 'Custom inline styles for the counter element.'
   },
   {
-    name: "digitStyle",
-    type: "CSSProperties",
-    default: "{}",
-    description: "Custom inline styles for each digit container."
+    name: 'digitStyle',
+    type: 'CSSProperties',
+    default: '{}',
+    description: 'Custom inline styles for each digit container.'
   },
   {
-    name: "gradientHeight",
-    type: "number",
-    default: "16",
-    description: "The height (in pixels) of the gradient overlays."
+    name: 'gradientHeight',
+    type: 'number',
+    default: '16',
+    description: 'The height (in pixels) of the gradient overlays.'
   },
   {
-    name: "gradientFrom",
-    type: "string",
+    name: 'gradientFrom',
+    type: 'string',
     default: "'black'",
-    description: "The starting color for the gradient overlays."
+    description: 'The starting color for the gradient overlays.'
   },
   {
-    name: "gradientTo",
-    type: "string",
+    name: 'gradientTo',
+    type: 'string',
     default: "'transparent'",
-    description: "The ending color for the gradient overlays."
+    description: 'The ending color for the gradient overlays.'
   },
   {
-    name: "topGradientStyle",
-    type: "CSSProperties",
-    default: "undefined",
-    description: "Custom inline styles for the top gradient overlay."
+    name: 'topGradientStyle',
+    type: 'CSSProperties',
+    default: 'undefined',
+    description: 'Custom inline styles for the top gradient overlay.'
   },
   {
-    name: "bottomGradientStyle",
-    type: "CSSProperties",
-    default: "undefined",
-    description: "Custom inline styles for the bottom gradient overlay."
-  },
-]
+    name: 'bottomGradientStyle',
+    type: 'CSSProperties',
+    default: 'undefined',
+    description: 'Custom inline styles for the bottom gradient overlay.'
+  }
+];
 </script>