add format check, update prettier rules, apply rules consistently

resources/js/Components/ui/number-field/NumberField.vue

@@ -1,62 +1,64 @@
 <script setup lang="ts">
-import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes, inject, type ComputedRef } from 'vue'
-import type { Organization } from '@/packages/api/src'
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui';
+import { computed, type HTMLAttributes, inject, type ComputedRef } from 'vue';
+import type { Organization } from '@/packages/api/src';
 
-const props = defineProps<NumberFieldRootProps & { 
-  class?: HTMLAttributes['class']
-  formatOptions?: {
-    maximumFractionDigits?: number
-    minimumFractionDigits?: number
-  }
-}>()
-const emits = defineEmits<NumberFieldRootEmits>()
+const props = defineProps<
+    NumberFieldRootProps & {
+        class?: HTMLAttributes['class'];
+        formatOptions?: {
+            maximumFractionDigits?: number;
+            minimumFractionDigits?: number;
+        };
+    }
+>();
+const emits = defineEmits<NumberFieldRootEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, formatOptions: __, ...delegated } = props
-  return delegated
-})
+    const { class: _, formatOptions: __, ...delegated } = props;
+    return delegated;
+});
 
-const organization = inject<ComputedRef<Organization>>('organization')
+const organization = inject<ComputedRef<Organization>>('organization');
 
 const locale = computed(() => {
-  const format = organization?.value?.number_format || 'comma-point'
-  
-  // space poin is not supported in reka-ui
-  switch (format) {
-    case 'point-comma':
-      return 'de-DE' // Uses point for thousands and comma for decimal
-    case 'comma-point':
-      return 'en-US' // Uses comma for thousands and point for decimal
-    case 'space-comma':
-      return 'sv-SE' // Uses space for thousands and comma for decimal
-    case 'apostrophe-point':
-      return 'de-CH' // Uses apostrophe for thousands and point for decimal
-    default:
-      return 'en-US'
-  }
-})
+    const format = organization?.value?.number_format || 'comma-point';
+
+    // space poin is not supported in reka-ui
+    switch (format) {
+        case 'point-comma':
+            return 'de-DE'; // Uses point for thousands and comma for decimal
+        case 'comma-point':
+            return 'en-US'; // Uses comma for thousands and point for decimal
+        case 'space-comma':
+            return 'sv-SE'; // Uses space for thousands and comma for decimal
+        case 'apostrophe-point':
+            return 'de-CH'; // Uses apostrophe for thousands and point for decimal
+        default:
+            return 'en-US';
+    }
+});
 
 const defaultFormatOptions = {
-  maximumFractionDigits: 2
-}
+    maximumFractionDigits: 2,
+};
 
 const formatOptions = computed(() => ({
-  ...defaultFormatOptions,
-  ...props.formatOptions
-}))
+    ...defaultFormatOptions,
+    ...props.formatOptions,
+}));
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <NumberFieldRoot 
-    v-bind="forwarded" 
-    :locale="locale"
-    :format-options="formatOptions"
-    :class="cn('grid gap-1.5', props.class)">
-    <slot />
-  </NumberFieldRoot>
+    <NumberFieldRoot
+        v-bind="forwarded"
+        :locale="locale"
+        :format-options="formatOptions"
+        :class="cn('grid gap-1.5', props.class)">
+        <slot />
+    </NumberFieldRoot>
 </template>

resources/js/Components/ui/number-field/NumberFieldContent.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div :class="cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)">
-    <slot />
-  </div>
+    <div
+        :class="
+            cn(
+                'relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5',
+                props.class
+            )
+        ">
+        <slot />
+    </div>
 </template>

resources/js/Components/ui/number-field/NumberFieldDecrement.vue

@@ -1,25 +1,33 @@
 <script setup lang="ts">
-import type { NumberFieldDecrementProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { Minus } from 'lucide-vue-next'
-import { NumberFieldDecrement, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import type { NumberFieldDecrementProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { Minus } from 'lucide-vue-next';
+import { NumberFieldDecrement, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <NumberFieldDecrement data-slot="decrement" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
-    <slot>
-      <Minus class="h-4 w-4" />
-    </slot>
-  </NumberFieldDecrement>
+    <NumberFieldDecrement
+        data-slot="decrement"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20',
+                props.class
+            )
+        ">
+        <slot>
+            <Minus class="h-4 w-4" />
+        </slot>
+    </NumberFieldDecrement>
 </template>

resources/js/Components/ui/number-field/NumberFieldIncrement.vue

@@ -1,25 +1,33 @@
 <script setup lang="ts">
-import type { NumberFieldIncrementProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { Plus } from 'lucide-vue-next'
-import { NumberFieldIncrement, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import type { NumberFieldIncrementProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { Plus } from 'lucide-vue-next';
+import { NumberFieldIncrement, useForwardProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const { class: _, ...delegated } = props;
 
-  return delegated
-})
+    return delegated;
+});
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <NumberFieldIncrement data-slot="increment" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
-    <slot>
-      <Plus class="h-4 w-4" />
-    </slot>
-  </NumberFieldIncrement>
+    <NumberFieldIncrement
+        data-slot="increment"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3',
+                props.class
+            )
+        ">
+        <slot>
+            <Plus class="h-4 w-4" />
+        </slot>
+    </NumberFieldIncrement>
 </template>

resources/js/Components/ui/number-field/NumberFieldInput.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { NumberFieldInput } from 'reka-ui'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { NumberFieldInput } from 'reka-ui';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <NumberFieldInput
-    data-slot="input"
-    :class="cn('flex h-[42px] w-full rounded-md border border-input-border bg-input-background px-3 py-2.5 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus:border-input-border focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)"
-  />
+    <NumberFieldInput
+        data-slot="input"
+        :class="
+            cn(
+                'flex h-[42px] w-full rounded-md border border-input-border bg-input-background px-3 py-2.5 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus:border-input-border focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+                props.class
+            )
+        " />
 </template>

resources/js/Components/ui/number-field/index.ts

@@ -1,5 +1,5 @@
-export { default as NumberField } from './NumberField.vue'
-export { default as NumberFieldContent } from './NumberFieldContent.vue'
-export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'
-export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'
-export { default as NumberFieldInput } from './NumberFieldInput.vue'
+export { default as NumberField } from './NumberField.vue';
+export { default as NumberFieldContent } from './NumberFieldContent.vue';
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue';
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue';
+export { default as NumberFieldInput } from './NumberFieldInput.vue';