style: apply prettier formatting [auto-commit]

Author: pcintara

docs/.vitepress/theme/components/ComponentViewer.vue

@@ -93,9 +93,13 @@ onMounted(() => {
 })
 
 // Watch for prop changes and highlighter availability
-watch([() => props.rawCode, () => props.filePath, highlighter], () => {
-  loadCode()
-}, { immediate: true })
+watch(
+  [() => props.rawCode, () => props.filePath, highlighter],
+  () => {
+    loadCode()
+  },
+  { immediate: true }
+)
 </script>
 
 <template>
@@ -159,7 +163,12 @@ watch([() => props.rawCode, () => props.filePath, highlighter], () => {
       value="preview"
       class="relative after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-lg after:bg-muted h-[--height] px-0"
     >
-      <ResizablePanelGroup v-if="responsive" id="block-resizable" direction="horizontal" class="relative z-10 bg-background">
+      <ResizablePanelGroup
+        v-if="responsive"
+        id="block-resizable"
+        direction="horizontal"
+        class="relative z-10 bg-background"
+      >
         <ResizablePanel id="block-resizable-panel-1" ref="resizableRef" :default-size="100" :min-size="30" as-child>
           <div :class="['w-full border-1 border-gray-200 rounded-lg', previewClasses]" :style="{ height: height }">
             <slot />

docs/api.md

@@ -64,8 +64,9 @@ The following functions are available when using `useViewAPI`:
   data without including parent block data.
 - `queryStepData`, `queryStepDataLeaf`: See
   [Data Query Methods](#data-query-methods).
-- `dataAlongPath`: Getter for the raw data array of all steps in the current path.
-  This is useful when you need to access the raw data structure of the path.
+- `dataAlongPath`: Getter for the raw data array of all steps in the current
+  path. This is useful when you need to access the raw data structure of the
+  path.
 - `stepIndex`: Returns the current step index among leaf nodes.
 - `blockIndex`: Returns the current block index.
 - `pathString`: Returns the current path as a string.
@@ -244,10 +245,14 @@ api.goToStep('trial/block1/step2', false)
   in use until the next route.
 - `randomAssignCondition(conditionObject)`: Randomly assigns a condition based
   on the provided condition object. Supports weighted randomization.
-- `randomInt(min, max)`: Generate a random integer between min and max (inclusive).
-- `shuffle(array)`: Randomly reorder elements in an array using Fisher-Yates algorithm.
-- `sampleWithReplacement(array, n, weights)`: Sample elements from an array with replacement.
-- `sampleWithoutReplacement(array, n)`: Sample elements from an array without replacement.
+- `randomInt(min, max)`: Generate a random integer between min and max
+  (inclusive).
+- `shuffle(array)`: Randomly reorder elements in an array using Fisher-Yates
+  algorithm.
+- `sampleWithReplacement(array, n, weights)`: Sample elements from an array with
+  replacement.
+- `sampleWithoutReplacement(array, n)`: Sample elements from an array without
+  replacement.
 - `faker`: Collection of faker distributions for generating random data.
 
 ## Logging and Debugging
@@ -331,8 +336,10 @@ const trialData = api.queryStepDataLeaf('trial/block*')
 
 The difference between these methods:
 
-- `queryStepData()` returns the merged data for each leaf node (including parent block data)
-- `queryStepDataLeaf()` returns only the data directly from each leaf node (without parent block data)
+- `queryStepData()` returns the merged data for each leaf node (including parent
+  block data)
+- `queryStepDataLeaf()` returns only the data directly from each leaf node
+  (without parent block data)
 
 Example:
 
@@ -343,14 +350,11 @@ Example:
 //   trial2 (response: 'B')
 
 // queryStepData() returns (merged data):
-[
+;[
   { blockType: 'practice', response: 'A' },
-  { blockType: 'practice', response: 'B' }
-]
-
-// queryStepDataLeaf() returns (leaf data only):
-[
-  { response: 'A' },
-  { response: 'B' }
+  { blockType: 'practice', response: 'B' },
+][
+  // queryStepDataLeaf() returns (leaf data only):
+  ({ response: 'A' }, { response: 'B' })
 ]
 ```

docs/coding/components/SimpleButton.vue

@@ -4,8 +4,7 @@ const count = ref(0)
 </script>
 
 <template>
-  <Button  @click="count++">Count is: {{ count }}</Button>
+  <Button @click="count++">Count is: {{ count }}</Button>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>

docs/coding/components/TextInput.vue

@@ -5,7 +5,7 @@ const text = ref('')
 
 <template>
   <div class="border-1 border-gray-800 rounded-md p-2 w-[200px]">
-  <input v-model="text" placeholder="Type here" />
+    <input v-model="text" placeholder="Type here" />
   </div>
   <p><b>You typed: </b>{{ text }}</p>
 </template>

docs/examples/BadgeExample.vue

@@ -11,4 +11,4 @@
 
 <script setup>
 import { Badge } from '@/uikit/components/ui/badge'
-</script>
+</script>

docs/examples/ButtonColorVariantsExample.vue

@@ -19,4 +19,4 @@
 
 <script setup>
 import { Button } from '@/uikit/components/ui/button'
-</script>
+</script>

docs/examples/ButtonIconsExample.vue

@@ -16,4 +16,4 @@
 <script setup>
 import { Button } from '@/uikit/components/ui/button'
 import { Plus, Download, Check, AlertTriangle, Trash, Info, Settings, Edit } from 'lucide-vue-next'
-</script>
+</script>

docs/examples/ButtonSizesExample.vue

@@ -14,4 +14,4 @@
 
 <script setup>
 import { Button } from '@/uikit/components/ui/button'
-</script>
+</script>

docs/examples/ButtonVariantsExample.vue

@@ -13,4 +13,4 @@
 
 <script setup>
 import { Button } from '@/uikit/components/ui/button'
-</script>
+</script>

docs/examples/CenteredContentCustomExample.vue

@@ -1,13 +1,11 @@
 <template>
   <CenteredContent class="bg-gray-50 min-h-[300px]">
     <div class="bg-purple-100 border-2 border-purple-300 rounded p-8 flex items-center justify-center">
-      <div class="text-purple-800 font-medium">
-        Centered Content (Custom Classes)
-      </div>
+      <div class="text-purple-800 font-medium">Centered Content (Custom Classes)</div>
     </div>
   </CenteredContent>
 </template>
 
 <script setup>
 import { CenteredContent } from '@/uikit/layouts'
-</script>
+</script>