20260810223432

code/fms/fms-vue/src/components/ui/accordion/Accordion.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import type { AccordionRootEmits, AccordionRootProps } from "reka-ui"
-import {
-  AccordionRoot,
-  useForwardPropsEmits,
-} from "reka-ui"
+import type { AccordionRootEmits, AccordionRootProps } from "reka-ui";
+import { AccordionRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<AccordionRootProps>()
-const emits = defineEmits<AccordionRootEmits>()
+const props = defineProps<AccordionRootProps>();
+const emits = defineEmits<AccordionRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/accordion/AccordionContent.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { AccordionContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AccordionContent } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { AccordionContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AccordionContent } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AccordionContentProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/accordion/AccordionItem.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { AccordionItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AccordionItem, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { AccordionItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AccordionItem, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AccordionItemProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/accordion/AccordionTrigger.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { AccordionTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronDown } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  AccordionHeader,
-  AccordionTrigger,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { AccordionTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { ChevronDown } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AccordionHeader, AccordionTrigger } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/accordion/index.ts

@@ -1,4 +1,4 @@
-export { default as Accordion } from "./Accordion.vue"
-export { default as AccordionContent } from "./AccordionContent.vue"
-export { default as AccordionItem } from "./AccordionItem.vue"
-export { default as AccordionTrigger } from "./AccordionTrigger.vue"
+export { default as Accordion } from "./Accordion.vue";
+export { default as AccordionContent } from "./AccordionContent.vue";
+export { default as AccordionItem } from "./AccordionItem.vue";
+export { default as AccordionTrigger } from "./AccordionTrigger.vue";

code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialog.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { AlertDialogEmits, AlertDialogProps } from "reka-ui"
-import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui"
+import type { AlertDialogEmits, AlertDialogProps } from "reka-ui";
+import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<AlertDialogProps>()
-const emits = defineEmits<AlertDialogEmits>()
+const props = defineProps<AlertDialogProps>();
+const emits = defineEmits<AlertDialogEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogAction.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { AlertDialogActionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogAction } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
+import type { AlertDialogActionProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AlertDialogAction } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -1,24 +1,20 @@
 <script setup lang="ts">
-import type { AlertDialogCancelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogCancel } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
+import type { AlertDialogCancelProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AlertDialogCancel } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
   <AlertDialogCancel
     v-bind="delegatedProps"
-    :class="cn(
-      buttonVariants({ variant: 'outline' }),
-      'mt-2 sm:mt-0',
-      props.class,
-    )"
+    :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)"
   >
     <slot />
   </AlertDialogCancel>

code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogContent.vue

@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
+import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
 import {
   AlertDialogContent,
   AlertDialogOverlay,
   AlertDialogPortal,
   useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+} from "reka-ui";
+import { cn } from "@/lib/utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<AlertDialogContentEmits>()
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<AlertDialogContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogDescription.vue

@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import type { AlertDialogDescriptionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  AlertDialogDescription,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { AlertDialogDescriptionProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AlertDialogDescription } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogFooter.vue

@@ -1,21 +1,16 @@
 <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
     data-slot="alert-dialog-footer"
-    :class="
-      cn(
-        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
-        props.class,
-      )
-    "
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
   >
     <slot />
   </div>

code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogHeader.vue

@@ -1,10 +1,10 @@
 <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>

code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogTitle.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { AlertDialogTitleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogTitle } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { AlertDialogTitleProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AlertDialogTitle } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogTrigger.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { AlertDialogTriggerProps } from "reka-ui"
-import { AlertDialogTrigger } from "reka-ui"
+import type { AlertDialogTriggerProps } from "reka-ui";
+import { AlertDialogTrigger } from "reka-ui";
 
-const props = defineProps<AlertDialogTriggerProps>()
+const props = defineProps<AlertDialogTriggerProps>();
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/alert-dialog/index.ts

@@ -1,9 +1,9 @@
-export { default as AlertDialog } from "./AlertDialog.vue"
-export { default as AlertDialogAction } from "./AlertDialogAction.vue"
-export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
-export { default as AlertDialogContent } from "./AlertDialogContent.vue"
-export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
-export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
-export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
-export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
-export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"
+export { default as AlertDialog } from "./AlertDialog.vue";
+export { default as AlertDialogAction } from "./AlertDialogAction.vue";
+export { default as AlertDialogCancel } from "./AlertDialogCancel.vue";
+export { default as AlertDialogContent } from "./AlertDialogContent.vue";
+export { default as AlertDialogDescription } from "./AlertDialogDescription.vue";
+export { default as AlertDialogFooter } from "./AlertDialogFooter.vue";
+export { default as AlertDialogHeader } from "./AlertDialogHeader.vue";
+export { default as AlertDialogTitle } from "./AlertDialogTitle.vue";
+export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue";

code/fms/fms-vue/src/components/ui/alert/Alert.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import type { AlertVariants } from "."
-import { cn } from "@/lib/utils"
-import { alertVariants } from "."
+import type { HTMLAttributes } from "vue";
+import type { AlertVariants } from ".";
+import { cn } from "@/lib/utils";
+import { alertVariants } from ".";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  variant?: AlertVariants["variant"]
-}>()
+  class?: HTMLAttributes["class"];
+  variant?: AlertVariants["variant"];
+}>();
 </script>
 
 <template>
-  <div
-    data-slot="alert"
-    :class="cn(alertVariants({ variant }), props.class)"
-    role="alert"
-  >
+  <div data-slot="alert" :class="cn(alertVariants({ variant }), props.class)" role="alert">
     <slot />
   </div>
 </template>

code/fms/fms-vue/src/components/ui/alert/AlertDescription.vue

@@ -1,10 +1,10 @@
 <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>

code/fms/fms-vue/src/components/ui/alert/AlertTitle.vue

@@ -1,10 +1,10 @@
 <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>

code/fms/fms-vue/src/components/ui/alert/index.ts

@@ -1,9 +1,9 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
-export { default as Alert } from "./Alert.vue"
-export { default as AlertDescription } from "./AlertDescription.vue"
-export { default as AlertTitle } from "./AlertTitle.vue"
+export { default as Alert } from "./Alert.vue";
+export { default as AlertDescription } from "./AlertDescription.vue";
+export { default as AlertTitle } from "./AlertTitle.vue";
 
 export const alertVariants = cva(
   "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
@@ -19,6 +19,6 @@ export const alertVariants = cva(
       variant: "default",
     },
   },
-)
+);
 
-export type AlertVariants = VariantProps<typeof alertVariants>
+export type AlertVariants = VariantProps<typeof alertVariants>;

code/fms/fms-vue/src/components/ui/aspect-ratio/AspectRatio.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import type { AspectRatioProps } from "reka-ui"
-import { AspectRatio } from "reka-ui"
+import type { AspectRatioProps } from "reka-ui";
+import { AspectRatio } from "reka-ui";
 
-const props = defineProps<AspectRatioProps>()
+const props = defineProps<AspectRatioProps>();
 </script>
 
 <template>
-  <AspectRatio
-    v-slot="slotProps"
-    data-slot="aspect-ratio"
-    v-bind="props"
-  >
+  <AspectRatio v-slot="slotProps" data-slot="aspect-ratio" v-bind="props">
     <slot v-bind="slotProps" />
   </AspectRatio>
 </template>

code/fms/fms-vue/src/components/ui/aspect-ratio/index.ts

@@ -1 +1 @@
-export { default as AspectRatio } from "./AspectRatio.vue"
+export { default as AspectRatio } from "./AspectRatio.vue";

code/fms/fms-vue/src/components/ui/avatar/Avatar.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { AvatarRoot } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { AvatarRoot } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/avatar/AvatarFallback.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { AvatarFallbackProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AvatarFallback } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { AvatarFallbackProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AvatarFallback } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/avatar/AvatarImage.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import type { AvatarImageProps } from "reka-ui"
-import { AvatarImage } from "reka-ui"
+import type { AvatarImageProps } from "reka-ui";
+import { AvatarImage } from "reka-ui";
 
-const props = defineProps<AvatarImageProps>()
+const props = defineProps<AvatarImageProps>();
 </script>
 
 <template>
-  <AvatarImage
-    data-slot="avatar-image"
-    v-bind="props"
-    class="aspect-square size-full"
-  >
+  <AvatarImage data-slot="avatar-image" v-bind="props" class="aspect-square size-full">
     <slot />
   </AvatarImage>
 </template>

code/fms/fms-vue/src/components/ui/avatar/index.ts

@@ -1,3 +1,3 @@
-export { default as Avatar } from "./Avatar.vue"
-export { default as AvatarFallback } from "./AvatarFallback.vue"
-export { default as AvatarImage } from "./AvatarImage.vue"
+export { default as Avatar } from "./Avatar.vue";
+export { default as AvatarFallback } from "./AvatarFallback.vue";
+export { default as AvatarImage } from "./AvatarImage.vue";

code/fms/fms-vue/src/components/ui/badge/Badge.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { BadgeVariants } from "."
-import { reactiveOmit } from "@vueuse/core"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { badgeVariants } from "."
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { BadgeVariants } from ".";
+import { reactiveOmit } from "@vueuse/core";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { badgeVariants } from ".";
 
-const props = defineProps<PrimitiveProps & {
-  variant?: BadgeVariants["variant"]
-  class?: HTMLAttributes["class"]
-}>()
+const props = defineProps<
+  PrimitiveProps & {
+    variant?: BadgeVariants["variant"];
+    class?: HTMLAttributes["class"];
+  }
+>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/badge/index.ts

@@ -1,26 +1,24 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
-export { default as Badge } from "./Badge.vue"
+export { default as Badge } from "./Badge.vue";
 
 export const badgeVariants = cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:
-         "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },
     },
     defaultVariants: {
       variant: "default",
     },
   },
-)
-export type BadgeVariants = VariantProps<typeof badgeVariants>
+);
+export type BadgeVariants = VariantProps<typeof badgeVariants>;

code/fms/fms-vue/src/components/ui/breadcrumb/Breadcrumb.vue

@@ -1,17 +1,13 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from "vue";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-  <nav
-    aria-label="breadcrumb"
-    data-slot="breadcrumb"
-    :class="props.class"
-  >
+  <nav aria-label="breadcrumb" data-slot="breadcrumb" :class="props.class">
     <slot />
   </nav>
 </template>

code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { MoreHorizontal } from "@lucide/vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { MoreHorizontal } from "@lucide/vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -1,17 +1,14 @@
 <script lang="ts" setup>
-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>
-  <li
-    data-slot="breadcrumb-item"
-    :class="cn('inline-flex items-center gap-1.5', props.class)"
-  >
+  <li data-slot="breadcrumb-item" :class="cn('inline-flex items-center gap-1.5', props.class)">
     <slot />
   </li>
 </template>

code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
   as: "a",
-})
+});
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbList.vue

@@ -1,16 +1,21 @@
 <script lang="ts" setup>
-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>
   <ol
     data-slot="breadcrumb-list"
-    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
+    :class="
+      cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+        props.class,
+      )
+    "
   >
     <slot />
   </ol>

code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-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>

code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { ChevronRight } from "@lucide/vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { ChevronRight } from "@lucide/vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/breadcrumb/index.ts

@@ -1,7 +1,7 @@
-export { default as Breadcrumb } from "./Breadcrumb.vue"
-export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"
-export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
-export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
-export { default as BreadcrumbList } from "./BreadcrumbList.vue"
-export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
-export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue"
+export { default as Breadcrumb } from "./Breadcrumb.vue";
+export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue";
+export { default as BreadcrumbItem } from "./BreadcrumbItem.vue";
+export { default as BreadcrumbLink } from "./BreadcrumbLink.vue";
+export { default as BreadcrumbList } from "./BreadcrumbList.vue";
+export { default as BreadcrumbPage } from "./BreadcrumbPage.vue";
+export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue";

code/fms/fms-vue/src/components/ui/button/Button.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from "."
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "."
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { ButtonVariants } from ".";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from ".";
 
 interface Props extends PrimitiveProps {
-  variant?: ButtonVariants["variant"]
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
+  variant?: ButtonVariants["variant"];
+  size?: ButtonVariants["size"];
+  class?: HTMLAttributes["class"];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   as: "button",
-})
+});
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/button/index.ts

@@ -1,31 +1,28 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
-export { default as Button } from "./Button.vue"
+export { default as Button } from "./Button.vue";
 
 export const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
           "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
-        "xs": "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
-        "icon": "size-9",
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
         "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-8",
         "icon-lg": "size-10",
@@ -36,5 +33,5 @@ export const buttonVariants = cva(
       size: "default",
     },
   },
-)
-export type ButtonVariants = VariantProps<typeof buttonVariants>
+);
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

code/fms/fms-vue/src/components/ui/calendar/Calendar.vue

@@ -1,45 +1,77 @@
 <script lang="ts" setup>
-import type { CalendarRootEmits, CalendarRootProps, DateValue } from "reka-ui"
-import type { HTMLAttributes, Ref } from "vue"
-import type { LayoutTypes } from "."
-import { getLocalTimeZone, today } from "@internationalized/date"
-import { createReusableTemplate, reactiveOmit, useVModel } from "@vueuse/core"
-import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from "reka-ui"
-import { createYear, createYearRange, toDate } from "reka-ui/date"
-import { computed, toRaw } from "vue"
-import { cn } from "@/lib/utils"
-import { NativeSelect, NativeSelectOption } from '@/components/ui/native-select'
-import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from "."
+import type { CalendarRootEmits, CalendarRootProps, DateValue } from "reka-ui";
+import type { HTMLAttributes, Ref } from "vue";
+import type { LayoutTypes } from ".";
+import { getLocalTimeZone, today } from "@internationalized/date";
+import { createReusableTemplate, reactiveOmit, useVModel } from "@vueuse/core";
+import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from "reka-ui";
+import { createYear, createYearRange, toDate } from "reka-ui/date";
+import { computed, toRaw } from "vue";
+import { cn } from "@/lib/utils";
+import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
+import {
+  CalendarCell,
+  CalendarCellTrigger,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHead,
+  CalendarGridRow,
+  CalendarHeadCell,
+  CalendarHeader,
+  CalendarHeading,
+  CalendarNextButton,
+  CalendarPrevButton,
+} from ".";
 
-const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes["class"], layout?: LayoutTypes, yearRange?: DateValue[] }>(), {
-  modelValue: undefined,
-  layout: undefined,
-})
-const emits = defineEmits<CalendarRootEmits>()
+const props = withDefaults(
+  defineProps<
+    CalendarRootProps & {
+      class?: HTMLAttributes["class"];
+      layout?: LayoutTypes;
+      yearRange?: DateValue[];
+    }
+  >(),
+  {
+    modelValue: undefined,
+    layout: undefined,
+  },
+);
+const emits = defineEmits<CalendarRootEmits>();
 
-const delegatedProps = reactiveOmit(props, "class", "layout", "placeholder")
+const delegatedProps = reactiveOmit(props, "class", "layout", "placeholder");
 
 const placeholder = useVModel(props, "placeholder", emits, {
   passive: true,
   defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),
-}) as Ref<DateValue>
+}) as Ref<DateValue>;
 
-const formatter = useDateFormatter(props.locale ?? "en")
+const formatter = useDateFormatter(props.locale ?? "en");
 
 const yearRange = computed(() => {
-  return props.yearRange ?? createYearRange({
-    start: props?.minValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone()))
-      .cycle("year", -100),
+  return (
+    props.yearRange ??
+    createYearRange({
+      start:
+        props?.minValue ??
+        (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone())).cycle(
+          "year",
+          -100,
+        ),
 
-    end: props?.maxValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone()))
-      .cycle("year", 10),
-  })
-})
+      end:
+        props?.maxValue ??
+        (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone())).cycle(
+          "year",
+          10,
+        ),
+    })
+  );
+});
 
-const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{ date: DateValue }>()
-const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{ date: DateValue }>()
+const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{ date: DateValue }>();
+const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{ date: DateValue }>();
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -47,19 +79,26 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <div class="**:data-[slot=native-select-icon]:right-1">
       <div class="relative">
         <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
-          {{ formatter.custom(toDate(date), { month: 'short' }) }}
+          {{ formatter.custom(toDate(date), { month: "short" }) }}
         </div>
         <NativeSelect
           class="text-xs h-8 pr-6 pl-2 text-transparent relative"
           :model-value="date.month"
-          @change="(e: Event) => {
-            placeholder = placeholder.set({
-              month: Number((e?.target as any)?.value),
-            })
-          }"
+          @change="
+            (e: Event) => {
+              placeholder = placeholder.set({
+                month: Number((e?.target as any)?.value),
+              });
+            }
+          "
         >
-          <NativeSelectOption v-for="(month) in createYear({ dateObj: date })" :key="month.toString()" :value="month.month" :selected="date.month === month.month">
-            {{ formatter.custom(toDate(month), { month: 'short' }) }}
+          <NativeSelectOption
+            v-for="month in createYear({ dateObj: date })"
+            :key="month.toString()"
+            :value="month.month"
+            :selected="date.month === month.month"
+          >
+            {{ formatter.custom(toDate(month), { month: "short" }) }}
           </NativeSelectOption>
         </NativeSelect>
       </div>
@@ -70,19 +109,26 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <div class="**:data-[slot=native-select-icon]:right-1">
       <div class="relative">
         <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
-          {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
+          {{ formatter.custom(toDate(date), { year: "numeric" }) }}
         </div>
         <NativeSelect
           class="text-xs h-8 pr-6 pl-2 text-transparent relative"
           :model-value="date.year"
-          @change="(e: Event) => {
-            placeholder = placeholder.set({
-              year: Number((e?.target as any)?.value),
-            })
-          }"
+          @change="
+            (e: Event) => {
+              placeholder = placeholder.set({
+                year: Number((e?.target as any)?.value),
+              });
+            }
+          "
         >
-          <NativeSelectOption v-for="(year) in yearRange" :key="year.toString()" :value="year.year" :selected="date.year === year.year">
-            {{ formatter.custom(toDate(year), { year: 'numeric' }) }}
+          <NativeSelectOption
+            v-for="year in yearRange"
+            :key="year.toString()"
+            :value="year.year"
+            :selected="date.year === year.year"
+          >
+            {{ formatter.custom(toDate(year), { year: "numeric" }) }}
           </NativeSelectOption>
         </NativeSelect>
       </div>
@@ -106,7 +152,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         </CalendarNextButton>
       </nav>
 
-      <slot name="calendar-heading" :date="date" :month="ReuseMonthTemplate" :year="ReuseYearTemplate">
+      <slot
+        name="calendar-heading"
+        :date="date"
+        :month="ReuseMonthTemplate"
+        :year="ReuseYearTemplate"
+      >
         <template v-if="layout === 'month-and-year'">
           <div class="flex items-center justify-center gap-1">
             <ReuseMonthTemplate :date="date" />
@@ -116,12 +167,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         <template v-else-if="layout === 'month-only'">
           <div class="flex items-center justify-center gap-1">
             <ReuseMonthTemplate :date="date" />
-            {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
+            {{ formatter.custom(toDate(date), { year: "numeric" }) }}
           </div>
         </template>
         <template v-else-if="layout === 'year-only'">
           <div class="flex items-center justify-center gap-1">
-            {{ formatter.custom(toDate(date), { month: 'short' }) }}
+            {{ formatter.custom(toDate(date), { month: "short" }) }}
             <ReuseYearTemplate :date="date" />
           </div>
         </template>
@@ -135,24 +186,19 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <CalendarGrid v-for="month in grid" :key="month.value.toString()">
         <CalendarGridHead>
           <CalendarGridRow>
-            <CalendarHeadCell
-              v-for="day in weekDays" :key="day"
-            >
+            <CalendarHeadCell v-for="day in weekDays" :key="day">
               {{ day }}
             </CalendarHeadCell>
           </CalendarGridRow>
         </CalendarGridHead>
         <CalendarGridBody>
-          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
-            <CalendarCell
-              v-for="weekDate in weekDates"
-              :key="weekDate.toString()"
-              :date="weekDate"
-            >
-              <CalendarCellTrigger
-                :day="weekDate"
-                :month="month.value"
-              />
+          <CalendarGridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+            class="mt-2 w-full"
+          >
+            <CalendarCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
+              <CalendarCellTrigger :day="weekDate" :month="month.value" />
             </CalendarCell>
           </CalendarGridRow>
         </CalendarGridBody>

code/fms/fms-vue/src/components/ui/calendar/CalendarCell.vue

@@ -1,21 +1,26 @@
 <script lang="ts" setup>
-import type { CalendarCellProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarCell, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { CalendarCellProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarCell, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<CalendarCellProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <CalendarCell
     data-slot="calendar-cell"
-    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 flex-1 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent', props.class)"
+    :class="
+      cn(
+        'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 flex-1 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent',
+        props.class,
+      )
+    "
     v-bind="forwardedProps"
   >
     <slot />

code/fms/fms-vue/src/components/ui/calendar/CalendarCellTrigger.vue

@@ -1,37 +1,42 @@
 <script lang="ts" setup>
-import type { CalendarCellTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarCellTrigger, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
+import type { CalendarCellTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarCellTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const props = withDefaults(defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>(), {
-  as: "button",
-})
+const props = withDefaults(
+  defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    as: "button",
+  },
+);
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <CalendarCellTrigger
     data-slot="calendar-cell-trigger"
-    :class="cn(
-      buttonVariants({ variant: 'ghost' }),
-      'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
-      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
-      // Selected
-      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 [&[data-selected]:hover]:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
-      // Disabled
-      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
-      // Unavailable
-      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
-      // Outside months
-      'data-[outside-view]:text-muted-foreground',
-      props.class,
-    )"
+    :class="
+      cn(
+        buttonVariants({ variant: 'ghost' }),
+        'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
+        '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+        // Selected
+        'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 [&[data-selected]:hover]:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+        // Disabled
+        'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+        // Unavailable
+        'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+        // Outside months
+        'data-[outside-view]:text-muted-foreground',
+        props.class,
+      )
+    "
     v-bind="forwardedProps"
   >
     <slot />

code/fms/fms-vue/src/components/ui/calendar/CalendarGrid.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import type { CalendarGridProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarGrid, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { CalendarGridProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarGrid, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<CalendarGridProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/calendar/CalendarGridBody.vue

@@ -1,15 +1,12 @@
 <script lang="ts" setup>
-import type { CalendarGridBodyProps } from "reka-ui"
-import { CalendarGridBody } from "reka-ui"
+import type { CalendarGridBodyProps } from "reka-ui";
+import { CalendarGridBody } from "reka-ui";
 
-const props = defineProps<CalendarGridBodyProps>()
+const props = defineProps<CalendarGridBodyProps>();
 </script>
 
 <template>
-  <CalendarGridBody
-    data-slot="calendar-grid-body"
-    v-bind="props"
-  >
+  <CalendarGridBody data-slot="calendar-grid-body" v-bind="props">
     <slot />
   </CalendarGridBody>
 </template>

code/fms/fms-vue/src/components/ui/calendar/CalendarGridHead.vue

@@ -1,16 +1,13 @@
 <script lang="ts" setup>
-import type { CalendarGridHeadProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { CalendarGridHead } from "reka-ui"
+import type { CalendarGridHeadProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { CalendarGridHead } from "reka-ui";
 
-const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes["class"] }>();
 </script>
 
 <template>
-  <CalendarGridHead
-    data-slot="calendar-grid-head"
-    v-bind="props"
-  >
+  <CalendarGridHead data-slot="calendar-grid-head" v-bind="props">
     <slot />
   </CalendarGridHead>
 </template>

code/fms/fms-vue/src/components/ui/calendar/CalendarGridRow.vue

@@ -1,21 +1,22 @@
 <script lang="ts" setup>
-import type { CalendarGridRowProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarGridRow, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { CalendarGridRowProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarGridRow, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <CalendarGridRow
     data-slot="calendar-grid-row"
-    :class="cn('flex', props.class)" v-bind="forwardedProps"
+    :class="cn('flex', props.class)"
+    v-bind="forwardedProps"
   >
     <slot />
   </CalendarGridRow>

code/fms/fms-vue/src/components/ui/calendar/CalendarHeadCell.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import type { CalendarHeadCellProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarHeadCell, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { CalendarHeadCellProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarHeadCell, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/calendar/CalendarHeader.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import type { CalendarHeaderProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarHeader, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { CalendarHeaderProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarHeader, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/calendar/CalendarHeading.vue

@@ -1,19 +1,19 @@
 <script lang="ts" setup>
-import type { CalendarHeadingProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarHeading, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { CalendarHeadingProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarHeading, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes["class"] }>();
 
 defineSlots<{
-  default: (props: { headingValue: string }) => any
-}>()
+  default: (props: { headingValue: string }) => any;
+}>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/calendar/CalendarNextButton.vue

@@ -1,27 +1,29 @@
 <script lang="ts" setup>
-import type { CalendarNextProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronRight } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarNext, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
+import type { CalendarNextProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { ChevronRight } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarNext, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const props = defineProps<CalendarNextProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <CalendarNext
     data-slot="calendar-next-button"
-    :class="cn(
-      buttonVariants({ variant: 'outline' }),
-      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-      props.class,
-    )"
+    :class="
+      cn(
+        buttonVariants({ variant: 'outline' }),
+        'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        props.class,
+      )
+    "
     v-bind="forwardedProps"
   >
     <slot>

code/fms/fms-vue/src/components/ui/calendar/CalendarPrevButton.vue

@@ -1,27 +1,29 @@
 <script lang="ts" setup>
-import type { CalendarPrevProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronLeft } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarPrev, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
+import type { CalendarPrevProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { ChevronLeft } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarPrev, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <CalendarPrev
     data-slot="calendar-prev-button"
-    :class="cn(
-      buttonVariants({ variant: 'outline' }),
-      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-      props.class,
-    )"
+    :class="
+      cn(
+        buttonVariants({ variant: 'outline' }),
+        'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        props.class,
+      )
+    "
     v-bind="forwardedProps"
   >
     <slot>

code/fms/fms-vue/src/components/ui/calendar/index.ts

@@ -1,14 +1,14 @@
-export { default as Calendar } from "./Calendar.vue"
-export { default as CalendarCell } from "./CalendarCell.vue"
-export { default as CalendarCellTrigger } from "./CalendarCellTrigger.vue"
-export { default as CalendarGrid } from "./CalendarGrid.vue"
-export { default as CalendarGridBody } from "./CalendarGridBody.vue"
-export { default as CalendarGridHead } from "./CalendarGridHead.vue"
-export { default as CalendarGridRow } from "./CalendarGridRow.vue"
-export { default as CalendarHeadCell } from "./CalendarHeadCell.vue"
-export { default as CalendarHeader } from "./CalendarHeader.vue"
-export { default as CalendarHeading } from "./CalendarHeading.vue"
-export { default as CalendarNextButton } from "./CalendarNextButton.vue"
-export { default as CalendarPrevButton } from "./CalendarPrevButton.vue"
+export { default as Calendar } from "./Calendar.vue";
+export { default as CalendarCell } from "./CalendarCell.vue";
+export { default as CalendarCellTrigger } from "./CalendarCellTrigger.vue";
+export { default as CalendarGrid } from "./CalendarGrid.vue";
+export { default as CalendarGridBody } from "./CalendarGridBody.vue";
+export { default as CalendarGridHead } from "./CalendarGridHead.vue";
+export { default as CalendarGridRow } from "./CalendarGridRow.vue";
+export { default as CalendarHeadCell } from "./CalendarHeadCell.vue";
+export { default as CalendarHeader } from "./CalendarHeader.vue";
+export { default as CalendarHeading } from "./CalendarHeading.vue";
+export { default as CalendarNextButton } from "./CalendarNextButton.vue";
+export { default as CalendarPrevButton } from "./CalendarPrevButton.vue";
 
-export type LayoutTypes = "month-and-year" | "month-only" | "year-only" | undefined
+export type LayoutTypes = "month-and-year" | "month-only" | "year-only" | undefined;

code/fms/fms-vue/src/components/ui/card/Card.vue

@@ -1,10 +1,10 @@
 <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>

code/fms/fms-vue/src/components/ui/card/CardAction.vue

@@ -1,10 +1,10 @@
 <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>

code/fms/fms-vue/src/components/ui/card/CardContent.vue

@@ -1,17 +1,14 @@
 <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
-    data-slot="card-content"
-    :class="cn('px-6', props.class)"
-  >
+  <div data-slot="card-content" :class="cn('px-6', props.class)">
     <slot />
   </div>
 </template>

code/fms/fms-vue/src/components/ui/card/CardDescription.vue

@@ -1,17 +1,14 @@
 <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>
-  <p
-    data-slot="card-description"
-    :class="cn('text-muted-foreground text-sm', props.class)"
-  >
+  <p data-slot="card-description" :class="cn('text-muted-foreground text-sm', props.class)">
     <slot />
   </p>
 </template>

code/fms/fms-vue/src/components/ui/card/CardFooter.vue

@@ -1,17 +1,14 @@
 <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
-    data-slot="card-footer"
-    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
-  >
+  <div data-slot="card-footer" :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)">
     <slot />
   </div>
 </template>

code/fms/fms-vue/src/components/ui/card/CardHeader.vue

@@ -1,16 +1,21 @@
 <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
     data-slot="card-header"
-    :class="cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', props.class)"
+    :class="
+      cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        props.class,
+      )
+    "
   >
     <slot />
   </div>

code/fms/fms-vue/src/components/ui/card/CardTitle.vue

@@ -1,17 +1,14 @@
 <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>
-  <h3
-    data-slot="card-title"
-    :class="cn('leading-none font-semibold', props.class)"
-  >
+  <h3 data-slot="card-title" :class="cn('leading-none font-semibold', props.class)">
     <slot />
   </h3>
 </template>

code/fms/fms-vue/src/components/ui/card/index.ts

@@ -1,7 +1,7 @@
-export { default as Card } from "./Card.vue"
-export { default as CardAction } from "./CardAction.vue"
-export { default as CardContent } from "./CardContent.vue"
-export { default as CardDescription } from "./CardDescription.vue"
-export { default as CardFooter } from "./CardFooter.vue"
-export { default as CardHeader } from "./CardHeader.vue"
-export { default as CardTitle } from "./CardTitle.vue"
+export { default as Card } from "./Card.vue";
+export { default as CardAction } from "./CardAction.vue";
+export { default as CardContent } from "./CardContent.vue";
+export { default as CardDescription } from "./CardDescription.vue";
+export { default as CardFooter } from "./CardFooter.vue";
+export { default as CardHeader } from "./CardHeader.vue";
+export { default as CardTitle } from "./CardTitle.vue";

code/fms/fms-vue/src/components/ui/carousel/Carousel.vue

@@ -1,15 +1,23 @@
 <script setup lang="ts">
-import type { CarouselEmits, CarouselProps, WithClassAsProps } from "./interface"
-import { cn } from "@/lib/utils"
-import { useProvideCarousel } from "./useCarousel"
+import type { CarouselEmits, CarouselProps, WithClassAsProps } from "./interface";
+import { cn } from "@/lib/utils";
+import { useProvideCarousel } from "./useCarousel";
 
 const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
   orientation: "horizontal",
-})
+});
 
-const emits = defineEmits<CarouselEmits>()
+const emits = defineEmits<CarouselEmits>();
 
-const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)
+const {
+  canScrollNext,
+  canScrollPrev,
+  carouselApi,
+  carouselRef,
+  orientation,
+  scrollNext,
+  scrollPrev,
+} = useProvideCarousel(props, emits);
 
 defineExpose({
   canScrollNext,
@@ -19,22 +27,22 @@ defineExpose({
   orientation,
   scrollNext,
   scrollPrev,
-})
+});
 
 function onKeyDown(event: KeyboardEvent) {
-  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft"
-  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight"
+  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
 
   if (event.key === prevKey) {
-    event.preventDefault()
-    scrollPrev()
+    event.preventDefault();
+    scrollPrev();
 
-    return
+    return;
   }
 
   if (event.key === nextKey) {
-    event.preventDefault()
-    scrollNext()
+    event.preventDefault();
+    scrollNext();
   }
 }
 </script>
@@ -48,6 +56,14 @@ function onKeyDown(event: KeyboardEvent) {
     tabindex="0"
     @keydown="onKeyDown"
   >
-    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
+    <slot
+      :can-scroll-next
+      :can-scroll-prev
+      :carousel-api
+      :carousel-ref
+      :orientation
+      :scroll-next
+      :scroll-prev
+    />
   </div>
 </template>

code/fms/fms-vue/src/components/ui/carousel/CarouselContent.vue

@@ -1,30 +1,21 @@
 <script setup lang="ts">
-import type { WithClassAsProps } from "./interface"
-import { cn } from "@/lib/utils"
-import { useCarousel } from "./useCarousel"
+import type { WithClassAsProps } from "./interface";
+import { cn } from "@/lib/utils";
+import { useCarousel } from "./useCarousel";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = defineProps<WithClassAsProps>()
+const props = defineProps<WithClassAsProps>();
 
-const { carouselRef, orientation } = useCarousel()
+const { carouselRef, orientation } = useCarousel();
 </script>
 
 <template>
-  <div
-    ref="carouselRef"
-    data-slot="carousel-content"
-    class="overflow-hidden"
-  >
+  <div ref="carouselRef" data-slot="carousel-content" class="overflow-hidden">
     <div
-      :class="
-        cn(
-          'flex',
-          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
-          props.class,
-        )"
+      :class="cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', props.class)"
       v-bind="$attrs"
     >
       <slot />

code/fms/fms-vue/src/components/ui/carousel/CarouselItem.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { WithClassAsProps } from "./interface"
-import { cn } from "@/lib/utils"
-import { useCarousel } from "./useCarousel"
+import type { WithClassAsProps } from "./interface";
+import { cn } from "@/lib/utils";
+import { useCarousel } from "./useCarousel";
 
-const props = defineProps<WithClassAsProps>()
+const props = defineProps<WithClassAsProps>();
 
-const { orientation } = useCarousel()
+const { orientation } = useCarousel();
 </script>
 
 <template>
@@ -13,11 +13,13 @@ const { orientation } = useCarousel()
     data-slot="carousel-item"
     role="group"
     aria-roledescription="slide"
-    :class="cn(
-      'min-w-0 shrink-0 grow-0 basis-full',
-      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
-      props.class,
-    )"
+    :class="
+      cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        props.class,
+      )
+    "
   >
     <slot />
   </div>

code/fms/fms-vue/src/components/ui/carousel/CarouselNext.vue

@@ -1,34 +1,40 @@
 <script setup lang="ts">
-import type { WithClassAsProps } from "./interface"
-import type { ButtonVariants } from '@/components/ui/button'
-import { ArrowRight } from "@lucide/vue"
-import { cn } from "@/lib/utils"
-import { Button } from '@/components/ui/button'
-import { useCarousel } from "./useCarousel"
+import type { WithClassAsProps } from "./interface";
+import type { ButtonVariants } from "@/components/ui/button";
+import { ArrowRight } from "@lucide/vue";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { useCarousel } from "./useCarousel";
 
-const props = withDefaults(defineProps<{
-  variant?: ButtonVariants["variant"]
-  size?: ButtonVariants["size"]
-}
-& WithClassAsProps>(), {
-  variant: "outline",
-  size: "icon",
-})
+const props = withDefaults(
+  defineProps<
+    {
+      variant?: ButtonVariants["variant"];
+      size?: ButtonVariants["size"];
+    } & WithClassAsProps
+  >(),
+  {
+    variant: "outline",
+    size: "icon",
+  },
+);
 
-const { orientation, canScrollNext, scrollNext } = useCarousel()
+const { orientation, canScrollNext, scrollNext } = useCarousel();
 </script>
 
 <template>
   <Button
     data-slot="carousel-next"
     :disabled="!canScrollNext"
-    :class="cn(
-      'absolute size-8 rounded-full',
-      orientation === 'horizontal'
-        ? 'top-1/2 -right-12 -translate-y-1/2'
-        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -right-12 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        props.class,
+      )
+    "
     :variant="variant"
     :size="size"
     @click="scrollNext"

code/fms/fms-vue/src/components/ui/carousel/CarouselPrevious.vue

@@ -1,34 +1,40 @@
 <script setup lang="ts">
-import type { WithClassAsProps } from "./interface"
-import type { ButtonVariants } from '@/components/ui/button'
-import { ArrowLeft } from "@lucide/vue"
-import { cn } from "@/lib/utils"
-import { Button } from '@/components/ui/button'
-import { useCarousel } from "./useCarousel"
+import type { WithClassAsProps } from "./interface";
+import type { ButtonVariants } from "@/components/ui/button";
+import { ArrowLeft } from "@lucide/vue";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { useCarousel } from "./useCarousel";
 
-const props = withDefaults(defineProps<{
-  variant?: ButtonVariants["variant"]
-  size?: ButtonVariants["size"]
-}
-& WithClassAsProps>(), {
-  variant: "outline",
-  size: "icon",
-})
+const props = withDefaults(
+  defineProps<
+    {
+      variant?: ButtonVariants["variant"];
+      size?: ButtonVariants["size"];
+    } & WithClassAsProps
+  >(),
+  {
+    variant: "outline",
+    size: "icon",
+  },
+);
 
-const { orientation, canScrollPrev, scrollPrev } = useCarousel()
+const { orientation, canScrollPrev, scrollPrev } = useCarousel();
 </script>
 
 <template>
   <Button
     data-slot="carousel-previous"
     :disabled="!canScrollPrev"
-    :class="cn(
-      'absolute size-8 rounded-full',
-      orientation === 'horizontal'
-        ? 'top-1/2 -left-12 -translate-y-1/2'
-        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -left-12 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        props.class,
+      )
+    "
     :variant="variant"
     :size="size"
     @click="scrollPrev"

code/fms/fms-vue/src/components/ui/carousel/index.ts

@@ -1,10 +1,8 @@
-export { default as Carousel } from "./Carousel.vue"
-export { default as CarouselContent } from "./CarouselContent.vue"
-export { default as CarouselItem } from "./CarouselItem.vue"
-export { default as CarouselNext } from "./CarouselNext.vue"
-export { default as CarouselPrevious } from "./CarouselPrevious.vue"
-export type {
-  UnwrapRefCarouselApi as CarouselApi,
-} from "./interface"
+export { default as Carousel } from "./Carousel.vue";
+export { default as CarouselContent } from "./CarouselContent.vue";
+export { default as CarouselItem } from "./CarouselItem.vue";
+export { default as CarouselNext } from "./CarouselNext.vue";
+export { default as CarouselPrevious } from "./CarouselPrevious.vue";
+export type { UnwrapRefCarouselApi as CarouselApi } from "./interface";
 
-export { useCarousel } from "./useCarousel"
+export { useCarousel } from "./useCarousel";

code/fms/fms-vue/src/components/ui/carousel/interface.ts

@@ -1,26 +1,24 @@
-import type useEmblaCarousel from "embla-carousel-vue"
-import type {
-  EmblaCarouselVueType,
-} from "embla-carousel-vue"
-import type { HTMLAttributes, UnwrapRef } from "vue"
+import type useEmblaCarousel from "embla-carousel-vue";
+import type { EmblaCarouselVueType } from "embla-carousel-vue";
+import type { HTMLAttributes, UnwrapRef } from "vue";
 
-type CarouselApi = EmblaCarouselVueType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
+type CarouselApi = EmblaCarouselVueType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
 
-export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>
+export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>;
 
 export interface CarouselProps {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
 }
 
 export interface CarouselEmits {
-  (e: "init-api", payload: UnwrapRefCarouselApi): void
+  (e: "init-api", payload: UnwrapRefCarouselApi): void;
 }
 
 export interface WithClassAsProps {
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes["class"];
 }

code/fms/fms-vue/src/components/ui/carousel/useCarousel.ts

@@ -1,56 +1,65 @@
-import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from "./interface"
-import { createInjectionState } from "@vueuse/core"
-import emblaCarouselVue from "embla-carousel-vue"
-import { onMounted, ref } from "vue"
+import type {
+  UnwrapRefCarouselApi as CarouselApi,
+  CarouselEmits,
+  CarouselProps,
+} from "./interface";
+import { createInjectionState } from "@vueuse/core";
+import emblaCarouselVue from "embla-carousel-vue";
+import { onMounted, ref } from "vue";
 
 const [useProvideCarousel, useInjectCarousel] = createInjectionState(
-  ({
-    opts,
-    orientation,
-    plugins,
-  }: CarouselProps, emits: CarouselEmits) => {
-    const [emblaNode, emblaApi] = emblaCarouselVue({
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y",
-    }, plugins)
+  ({ opts, orientation, plugins }: CarouselProps, emits: CarouselEmits) => {
+    const [emblaNode, emblaApi] = emblaCarouselVue(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins,
+    );
 
     function scrollPrev() {
-      emblaApi.value?.scrollPrev()
+      emblaApi.value?.scrollPrev();
     }
     function scrollNext() {
-      emblaApi.value?.scrollNext()
+      emblaApi.value?.scrollNext();
     }
 
-    const canScrollNext = ref(false)
-    const canScrollPrev = ref(false)
+    const canScrollNext = ref(false);
+    const canScrollPrev = ref(false);
 
     function onSelect(api: CarouselApi) {
-      canScrollNext.value = api?.canScrollNext() || false
-      canScrollPrev.value = api?.canScrollPrev() || false
+      canScrollNext.value = api?.canScrollNext() || false;
+      canScrollPrev.value = api?.canScrollPrev() || false;
     }
 
     onMounted(() => {
-      if (!emblaApi.value)
-        return
+      if (!emblaApi.value) return;
 
-      emblaApi.value?.on("init", onSelect)
-      emblaApi.value?.on("reInit", onSelect)
-      emblaApi.value?.on("select", onSelect)
+      emblaApi.value?.on("init", onSelect);
+      emblaApi.value?.on("reInit", onSelect);
+      emblaApi.value?.on("select", onSelect);
 
-      emits("init-api", emblaApi.value)
-    })
+      emits("init-api", emblaApi.value);
+    });
 
-    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
+    return {
+      carouselRef: emblaNode,
+      carouselApi: emblaApi,
+      canScrollPrev,
+      canScrollNext,
+      scrollPrev,
+      scrollNext,
+      orientation,
+    };
   },
-)
+);
 
 function useCarousel() {
-  const carouselState = useInjectCarousel()
+  const carouselState = useInjectCarousel();
 
-  if (!carouselState)
-    throw new Error("useCarousel must be used within a <Carousel />")
+  if (!carouselState) throw new Error("useCarousel must be used within a <Carousel />");
 
-  return carouselState
+  return carouselState;
 }
 
-export { useCarousel, useProvideCarousel }
+export { useCarousel, useProvideCarousel };

code/fms/fms-vue/src/components/ui/checkbox/Checkbox.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Check } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Check } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<CheckboxRootEmits>()
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<CheckboxRootEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -20,8 +20,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="checkbox"
     v-bind="forwarded"
     :class="
-      cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',
-         props.class)"
+      cn(
+        'peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
   >
     <CheckboxIndicator
       data-slot="checkbox-indicator"

code/fms/fms-vue/src/components/ui/checkbox/index.ts

@@ -1 +1 @@
-export { default as Checkbox } from "./Checkbox.vue"
+export { default as Checkbox } from "./Checkbox.vue";

code/fms/fms-vue/src/components/ui/collapsible/Collapsible.vue

@@ -1,19 +1,15 @@
 <script setup lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from "reka-ui"
-import { CollapsibleRoot, useForwardPropsEmits } from "reka-ui"
+import type { CollapsibleRootEmits, CollapsibleRootProps } from "reka-ui";
+import { CollapsibleRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<CollapsibleRootProps>()
-const emits = defineEmits<CollapsibleRootEmits>()
+const props = defineProps<CollapsibleRootProps>();
+const emits = defineEmits<CollapsibleRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <CollapsibleRoot
-    v-slot="slotProps"
-    data-slot="collapsible"
-    v-bind="forwarded"
-  >
+  <CollapsibleRoot v-slot="slotProps" data-slot="collapsible" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </CollapsibleRoot>
 </template>

code/fms/fms-vue/src/components/ui/collapsible/CollapsibleContent.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { CollapsibleContentProps } from "reka-ui"
-import { CollapsibleContent } from "reka-ui"
+import type { CollapsibleContentProps } from "reka-ui";
+import { CollapsibleContent } from "reka-ui";
 
-const props = defineProps<CollapsibleContentProps>()
+const props = defineProps<CollapsibleContentProps>();
 </script>
 
 <template>
-  <CollapsibleContent
-    data-slot="collapsible-content"
-    v-bind="props"
-  >
+  <CollapsibleContent data-slot="collapsible-content" v-bind="props">
     <slot />
   </CollapsibleContent>
 </template>

code/fms/fms-vue/src/components/ui/collapsible/CollapsibleTrigger.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { CollapsibleTriggerProps } from "reka-ui"
-import { CollapsibleTrigger } from "reka-ui"
+import type { CollapsibleTriggerProps } from "reka-ui";
+import { CollapsibleTrigger } from "reka-ui";
 
-const props = defineProps<CollapsibleTriggerProps>()
+const props = defineProps<CollapsibleTriggerProps>();
 </script>
 
 <template>
-  <CollapsibleTrigger
-    data-slot="collapsible-trigger"
-    v-bind="props"
-  >
+  <CollapsibleTrigger data-slot="collapsible-trigger" v-bind="props">
     <slot />
   </CollapsibleTrigger>
 </template>

code/fms/fms-vue/src/components/ui/collapsible/index.ts

@@ -1,3 +1,3 @@
-export { default as Collapsible } from "./Collapsible.vue"
-export { default as CollapsibleContent } from "./CollapsibleContent.vue"
-export { default as CollapsibleTrigger } from "./CollapsibleTrigger.vue"
+export { default as Collapsible } from "./Collapsible.vue";
+export { default as CollapsibleContent } from "./CollapsibleContent.vue";
+export { default as CollapsibleTrigger } from "./CollapsibleTrigger.vue";

code/fms/fms-vue/src/components/ui/combobox/Combobox.vue

@@ -1,19 +1,15 @@
 <script setup lang="ts">
-import type { ComboboxRootEmits, ComboboxRootProps } from "reka-ui"
-import { ComboboxRoot, useForwardPropsEmits } from "reka-ui"
+import type { ComboboxRootEmits, ComboboxRootProps } from "reka-ui";
+import { ComboboxRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<ComboboxRootProps>()
-const emits = defineEmits<ComboboxRootEmits>()
+const props = defineProps<ComboboxRootProps>();
+const emits = defineEmits<ComboboxRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <ComboboxRoot
-    v-slot="slotProps"
-    data-slot="combobox"
-    v-bind="forwarded"
-  >
+  <ComboboxRoot v-slot="slotProps" data-slot="combobox" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </ComboboxRoot>
 </template>

code/fms/fms-vue/src/components/ui/combobox/ComboboxAnchor.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { ComboboxAnchorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxAnchor, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxAnchorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxAnchor, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/combobox/ComboboxEmpty.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { ComboboxEmptyProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxEmpty } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxEmptyProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxEmpty } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/combobox/ComboboxGroup.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import type { ComboboxGroupProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxGroup, ComboboxLabel } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxGroupProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxGroup, ComboboxLabel } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ComboboxGroupProps & {
-  class?: HTMLAttributes["class"]
-  heading?: string
-}>()
+const props = defineProps<
+  ComboboxGroupProps & {
+    class?: HTMLAttributes["class"];
+    heading?: string;
+  }
+>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/combobox/ComboboxInput.vue

@@ -1,39 +1,39 @@
 <script setup lang="ts">
-import type { ComboboxInputEmits, ComboboxInputProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { SearchIcon } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxInput, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxInputEmits, ComboboxInputProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { SearchIcon } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxInput, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = defineProps<ComboboxInputProps & {
-  class?: HTMLAttributes["class"]
-}>()
+const props = defineProps<
+  ComboboxInputProps & {
+    class?: HTMLAttributes["class"];
+  }
+>();
 
-const emits = defineEmits<ComboboxInputEmits>()
+const emits = defineEmits<ComboboxInputEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <div
-    data-slot="command-input-wrapper"
-    class="flex h-9 items-center gap-2 border-b px-3"
-  >
+  <div data-slot="command-input-wrapper" class="flex h-9 items-center gap-2 border-b px-3">
     <SearchIcon class="size-4 shrink-0 opacity-50" />
     <ComboboxInput
       data-slot="command-input"
-      :class="cn(
-        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
-        props.class,
-      )"
-
+      :class="
+        cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          props.class,
+        )
+      "
       v-bind="{ ...$attrs, ...forwarded }"
     >
       <slot />

code/fms/fms-vue/src/components/ui/combobox/ComboboxItem.vue

@@ -1,23 +1,28 @@
 <script setup lang="ts">
-import type { ComboboxItemEmits, ComboboxItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxItem, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxItemEmits, ComboboxItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxItem, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<ComboboxItemEmits>()
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<ComboboxItemEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <ComboboxItem
     data-slot="combobox-item"
     v-bind="forwarded"
-    :class="cn(`data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
+    :class="
+      cn(
+        `data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
   >
     <slot />
   </ComboboxItem>

code/fms/fms-vue/src/components/ui/combobox/ComboboxItemIndicator.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { ComboboxItemIndicatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxItemIndicator, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxItemIndicatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxItemIndicator, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ComboboxItemIndicatorProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ComboboxItemIndicatorProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/combobox/ComboboxList.vue

@@ -1,23 +1,26 @@
 <script setup lang="ts">
-import type { ComboboxContentEmits, ComboboxContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxContent, ComboboxPortal, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxContentEmits, ComboboxContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxContent, ComboboxPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes["class"] }>(), {
-  position: "popper",
-  align: "center",
-  sideOffset: 4,
-})
-const emits = defineEmits<ComboboxContentEmits>()
+const props = withDefaults(
+  defineProps<ComboboxContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    position: "popper",
+    align: "center",
+    sideOffset: 4,
+  },
+);
+const emits = defineEmits<ComboboxContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, "class");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -25,7 +28,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <ComboboxContent
       data-slot="combobox-list"
       v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn('z-50 w-[200px] rounded-md border bg-popover text-popover-foreground origin-(--reka-combobox-content-transform-origin) overflow-hidden shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+      :class="
+        cn(
+          'z-50 w-[200px] rounded-md border bg-popover text-popover-foreground origin-(--reka-combobox-content-transform-origin) overflow-hidden shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
     >
       <slot />
     </ComboboxContent>

code/fms/fms-vue/src/components/ui/combobox/ComboboxSeparator.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { ComboboxSeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxSeparator } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxSeparatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxSeparator } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/combobox/ComboboxTrigger.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { ComboboxTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxTrigger, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/combobox/ComboboxViewport.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { ComboboxViewportProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxViewport, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxViewportProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxViewport, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ComboboxViewportProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ComboboxViewportProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/combobox/index.ts

@@ -1,13 +1,13 @@
-export { default as Combobox } from "./Combobox.vue"
-export { default as ComboboxAnchor } from "./ComboboxAnchor.vue"
-export { default as ComboboxEmpty } from "./ComboboxEmpty.vue"
-export { default as ComboboxGroup } from "./ComboboxGroup.vue"
-export { default as ComboboxInput } from "./ComboboxInput.vue"
-export { default as ComboboxItem } from "./ComboboxItem.vue"
-export { default as ComboboxItemIndicator } from "./ComboboxItemIndicator.vue"
-export { default as ComboboxList } from "./ComboboxList.vue"
-export { default as ComboboxSeparator } from "./ComboboxSeparator.vue"
-export { default as ComboboxTrigger } from "./ComboboxTrigger.vue"
-export { default as ComboboxViewport } from "./ComboboxViewport.vue"
+export { default as Combobox } from "./Combobox.vue";
+export { default as ComboboxAnchor } from "./ComboboxAnchor.vue";
+export { default as ComboboxEmpty } from "./ComboboxEmpty.vue";
+export { default as ComboboxGroup } from "./ComboboxGroup.vue";
+export { default as ComboboxInput } from "./ComboboxInput.vue";
+export { default as ComboboxItem } from "./ComboboxItem.vue";
+export { default as ComboboxItemIndicator } from "./ComboboxItemIndicator.vue";
+export { default as ComboboxList } from "./ComboboxList.vue";
+export { default as ComboboxSeparator } from "./ComboboxSeparator.vue";
+export { default as ComboboxTrigger } from "./ComboboxTrigger.vue";
+export { default as ComboboxViewport } from "./ComboboxViewport.vue";
 
-export { ComboboxCancel } from "reka-ui"
+export { ComboboxCancel } from "reka-ui";

code/fms/fms-vue/src/components/ui/command/Command.vue

@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import type { ListboxRootEmits, ListboxRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui"
-import { reactive, ref, watch } from "vue"
-import { cn } from "@/lib/utils"
-import { provideCommandContext } from "."
+import type { ListboxRootEmits, ListboxRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui";
+import { reactive, ref, watch } from "vue";
+import { cn } from "@/lib/utils";
+import { provideCommandContext } from ".";
 
 const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(), {
   modelValue: "",
   highlightOnHover: true,
-})
+});
 
-const emits = defineEmits<ListboxRootEmits>()
+const emits = defineEmits<ListboxRootEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const allItems = ref<Map<string, string>>(new Map())
-const allGroups = ref<Map<string, Set<string>>>(new Map())
+const allItems = ref<Map<string, string>>(new Map());
+const allGroups = ref<Map<string, Set<string>>>(new Map());
 
-const { contains } = useFilter({ sensitivity: "base" })
+const { contains } = useFilter({ sensitivity: "base" });
 const filterState = reactive({
   search: "",
   filtered: {
@@ -32,56 +32,63 @@ const filterState = reactive({
     /** Set of groups with at least one visible item. */
     groups: new Set() as Set<string>,
   },
-})
+});
 
 function filterItems() {
   if (!filterState.search) {
-    filterState.filtered.count = allItems.value.size
+    filterState.filtered.count = allItems.value.size;
     // Do nothing, each item will know to show itself because search is empty
-    return
+    return;
   }
 
   // Reset the groups
-  filterState.filtered.groups = new Set()
-  let itemCount = 0
+  filterState.filtered.groups = new Set();
+  let itemCount = 0;
 
   // Check which items should be included
   for (const [id, value] of allItems.value) {
-    const score = contains(value, filterState.search)
-    filterState.filtered.items.set(id, score ? 1 : 0)
-    if (score)
-      itemCount++
+    const score = contains(value, filterState.search);
+    filterState.filtered.items.set(id, score ? 1 : 0);
+    if (score) itemCount++;
   }
 
   // Check which groups have at least 1 item shown
   for (const [groupId, group] of allGroups.value) {
     for (const itemId of group) {
       if (filterState.filtered.items.get(itemId)! > 0) {
-        filterState.filtered.groups.add(groupId)
-        break
+        filterState.filtered.groups.add(groupId);
+        break;
       }
     }
   }
 
-  filterState.filtered.count = itemCount
+  filterState.filtered.count = itemCount;
 }
 
-watch(() => filterState.search, () => {
-  filterItems()
-})
+watch(
+  () => filterState.search,
+  () => {
+    filterItems();
+  },
+);
 
 provideCommandContext({
   allItems,
   allGroups,
   filterState,
-})
+});
 </script>
 
 <template>
   <ListboxRoot
     data-slot="command"
     v-bind="forwarded"
-    :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
+    :class="
+      cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        props.class,
+      )
+    "
   >
     <slot />
   </ListboxRoot>

code/fms/fms-vue/src/components/ui/command/CommandDialog.vue

@@ -1,24 +1,35 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from "reka-ui"
-import { useForwardPropsEmits } from "reka-ui"
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import Command from "./Command.vue"
+import type { DialogRootEmits, DialogRootProps } from "reka-ui";
+import { useForwardPropsEmits } from "reka-ui";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import Command from "./Command.vue";
 
-const props = withDefaults(defineProps<DialogRootProps & {
-  title?: string
-  description?: string
-}>(), {
-  title: "Command Palette",
-  description: "Search for a command to run...",
-})
-const emits = defineEmits<DialogRootEmits>()
+const props = withDefaults(
+  defineProps<
+    DialogRootProps & {
+      title?: string;
+      description?: string;
+    }
+  >(),
+  {
+    title: "Command Palette",
+    description: "Search for a command to run...",
+  },
+);
+const emits = defineEmits<DialogRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
   <Dialog v-slot="slotProps" v-bind="forwarded">
-    <DialogContent class="overflow-hidden p-0 ">
+    <DialogContent class="overflow-hidden p-0">
       <DialogHeader class="sr-only">
         <DialogTitle>{{ title }}</DialogTitle>
         <DialogDescription>{{ description }}</DialogDescription>

code/fms/fms-vue/src/components/ui/command/CommandEmpty.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Primitive } from "reka-ui"
-import { computed } from "vue"
-import { cn } from "@/lib/utils"
-import { useCommand } from "."
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { cn } from "@/lib/utils";
+import { useCommand } from ".";
 
-const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const { filterState } = useCommand()
-const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
-)
+const { filterState } = useCommand();
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0);
 </script>
 
 <template>
   <Primitive
     v-if="isRender"
     data-slot="command-empty"
-    v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)"
+    v-bind="delegatedProps"
+    :class="cn('py-6 text-center text-sm', props.class)"
   >
     <slot />
   </Primitive>

code/fms/fms-vue/src/components/ui/command/CommandGroup.vue

@@ -1,32 +1,33 @@
 <script setup lang="ts">
-import type { ListboxGroupProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui"
-import { computed, onMounted, onUnmounted } from "vue"
-import { cn } from "@/lib/utils"
-import { provideCommandGroupContext, useCommand } from "."
+import type { ListboxGroupProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui";
+import { computed, onMounted, onUnmounted } from "vue";
+import { cn } from "@/lib/utils";
+import { provideCommandGroupContext, useCommand } from ".";
 
-const props = defineProps<ListboxGroupProps & {
-  class?: HTMLAttributes["class"]
-  heading?: string
-}>()
+const props = defineProps<
+  ListboxGroupProps & {
+    class?: HTMLAttributes["class"];
+    heading?: string;
+  }
+>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const { allGroups, filterState } = useCommand()
-const id = useId()
+const { allGroups, filterState } = useCommand();
+const id = useId();
 
-const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+const isRender = computed(() => (!filterState.search ? true : filterState.filtered.groups.has(id)));
 
-provideCommandGroupContext({ id })
+provideCommandGroupContext({ id });
 onMounted(() => {
-  if (!allGroups.value.has(id))
-    allGroups.value.set(id, new Set())
-})
+  if (!allGroups.value.has(id)) allGroups.value.set(id, new Set());
+});
 onUnmounted(() => {
-  allGroups.value.delete(id)
-})
+  allGroups.value.delete(id);
+});
 </script>
 
 <template>
@@ -37,7 +38,11 @@ onUnmounted(() => {
     :class="cn('text-foreground overflow-hidden p-1', props.class)"
     :hidden="isRender ? undefined : true"
   >
-    <ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+    <ListboxGroupLabel
+      v-if="heading"
+      data-slot="command-group-heading"
+      class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
+    >
       {{ heading }}
     </ListboxGroupLabel>
     <slot />

code/fms/fms-vue/src/components/ui/command/CommandInput.vue

@@ -1,39 +1,43 @@
 <script setup lang="ts">
-import type { ListboxFilterProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Search } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ListboxFilter, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { useCommand } from "."
+import type { ListboxFilterProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Search } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ListboxFilter, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { useCommand } from ".";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = defineProps<ListboxFilterProps & {
-  class?: HTMLAttributes["class"]
-}>()
+const props = defineProps<
+  ListboxFilterProps & {
+    class?: HTMLAttributes["class"];
+  }
+>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 
-const { filterState } = useCommand()
+const { filterState } = useCommand();
 </script>
 
 <template>
-  <div
-    data-slot="command-input-wrapper"
-    class="flex h-9 items-center gap-2 border-b px-3"
-  >
+  <div data-slot="command-input-wrapper" class="flex h-9 items-center gap-2 border-b px-3">
     <Search class="size-4 shrink-0 opacity-50" />
     <ListboxFilter
       v-bind="{ ...forwardedProps, ...$attrs }"
       v-model="filterState.search"
       data-slot="command-input"
       auto-focus
-      :class="cn('placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+      :class="
+        cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          props.class,
+        )
+      "
     />
   </div>
 </template>

code/fms/fms-vue/src/components/ui/command/CommandItem.vue

@@ -1,62 +1,59 @@
 <script setup lang="ts">
-import type { ListboxItemEmits, ListboxItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit, useCurrentElement } from "@vueuse/core"
-import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui"
-import { computed, onMounted, onUnmounted, ref } from "vue"
-import { cn } from "@/lib/utils"
-import { useCommand, useCommandGroup } from "."
+import type { ListboxItemEmits, ListboxItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit, useCurrentElement } from "@vueuse/core";
+import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui";
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { cn } from "@/lib/utils";
+import { useCommand, useCommandGroup } from ".";
 
-const props = defineProps<ListboxItemProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<ListboxItemEmits>()
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<ListboxItemEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const id = useId()
-const { filterState, allItems, allGroups } = useCommand()
-const groupContext = useCommandGroup()
+const id = useId();
+const { filterState, allItems, allGroups } = useCommand();
+const groupContext = useCommandGroup();
 
 const isRender = computed(() => {
   if (!filterState.search) {
-    return true
-  }
-  else {
-    const filteredCurrentItem = filterState.filtered.items.get(id)
+    return true;
+  } else {
+    const filteredCurrentItem = filterState.filtered.items.get(id);
     // If the filtered items is undefined means not in the all times map yet
     // Do the first render to add into the map
     if (filteredCurrentItem === undefined) {
-      return true
+      return true;
     }
 
     // Check with filter
-    return filteredCurrentItem > 0
+    return filteredCurrentItem > 0;
   }
-})
+});
 
-const itemRef = ref()
-const currentElement = useCurrentElement(itemRef)
+const itemRef = ref();
+const currentElement = useCurrentElement(itemRef);
 onMounted(() => {
-  if (!(currentElement.value instanceof HTMLElement))
-    return
+  if (!(currentElement.value instanceof HTMLElement)) return;
 
   // textValue to perform filter
-  allItems.value.set(id, currentElement.value.textContent ?? (props.value?.toString() ?? ""))
+  allItems.value.set(id, currentElement.value.textContent ?? props.value?.toString() ?? "");
 
-  const groupId = groupContext?.id
+  const groupId = groupContext?.id;
   if (groupId) {
     if (!allGroups.value.has(groupId)) {
-      allGroups.value.set(groupId, new Set([id]))
-    }
-    else {
-      allGroups.value.get(groupId)?.add(id)
+      allGroups.value.set(groupId, new Set([id]));
+    } else {
+      allGroups.value.get(groupId)?.add(id);
     }
   }
-})
+});
 onUnmounted(() => {
-  allItems.value.delete(id)
-})
+  allItems.value.delete(id);
+});
 </script>
 
 <template>
@@ -66,10 +63,17 @@ onUnmounted(() => {
     :id="id"
     ref="itemRef"
     data-slot="command-item"
-    :class="cn(`data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
-    @select="() => {
-      filterState.search = ''
-    }"
+    :class="
+      cn(
+        `data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
+    @select="
+      () => {
+        filterState.search = '';
+      }
+    "
   >
     <slot />
   </ListboxItem>

code/fms/fms-vue/src/components/ui/command/CommandList.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { ListboxContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ListboxContent, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ListboxContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ListboxContent, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ListboxContentProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/command/CommandSeparator.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { SeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Separator } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { SeparatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Separator } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>

code/fms/fms-vue/src/components/ui/command/CommandShortcut.vue

@@ -1,10 +1,10 @@
 <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>

code/fms/fms-vue/src/components/ui/command/index.ts

@@ -1,25 +1,25 @@
-import type { Ref } from "vue"
-import { createContext } from "reka-ui"
+import type { Ref } from "vue";
+import { createContext } from "reka-ui";
 
-export { default as Command } from "./Command.vue"
-export { default as CommandDialog } from "./CommandDialog.vue"
-export { default as CommandEmpty } from "./CommandEmpty.vue"
-export { default as CommandGroup } from "./CommandGroup.vue"
-export { default as CommandInput } from "./CommandInput.vue"
-export { default as CommandItem } from "./CommandItem.vue"
-export { default as CommandList } from "./CommandList.vue"
-export { default as CommandSeparator } from "./CommandSeparator.vue"
-export { default as CommandShortcut } from "./CommandShortcut.vue"
+export { default as Command } from "./Command.vue";
+export { default as CommandDialog } from "./CommandDialog.vue";
+export { default as CommandEmpty } from "./CommandEmpty.vue";
+export { default as CommandGroup } from "./CommandGroup.vue";
+export { default as CommandInput } from "./CommandInput.vue";
+export { default as CommandItem } from "./CommandItem.vue";
+export { default as CommandList } from "./CommandList.vue";
+export { default as CommandSeparator } from "./CommandSeparator.vue";
+export { default as CommandShortcut } from "./CommandShortcut.vue";
 
 export const [useCommand, provideCommandContext] = createContext<{
-  allItems: Ref<Map<string, string>>
-  allGroups: Ref<Map<string, Set<string>>>
+  allItems: Ref<Map<string, string>>;
+  allGroups: Ref<Map<string, Set<string>>>;
   filterState: {
-    search: string
-    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
-  }
-}>("Command")
+    search: string;
+    filtered: { count: number; items: Map<string, number>; groups: Set<string> };
+  };
+}>("Command");
 
 export const [useCommandGroup, provideCommandGroupContext] = createContext<{
-  id?: string
-}>("CommandGroup")
+  id?: string;
+}>("CommandGroup");

code/fms/fms-vue/src/components/ui/context-menu/ContextMenu.vue

@@ -1,18 +1,15 @@
 <script setup lang="ts">
-import type { ContextMenuRootEmits, ContextMenuRootProps } from "reka-ui"
-import { ContextMenuRoot, useForwardPropsEmits } from "reka-ui"
+import type { ContextMenuRootEmits, ContextMenuRootProps } from "reka-ui";
+import { ContextMenuRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<ContextMenuRootProps>()
-const emits = defineEmits<ContextMenuRootEmits>()
+const props = defineProps<ContextMenuRootProps>();
+const emits = defineEmits<ContextMenuRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <ContextMenuRoot
-    data-slot="context-menu"
-    v-bind="forwarded"
-  >
+  <ContextMenuRoot data-slot="context-menu" v-bind="forwarded">
     <slot />
   </ContextMenuRoot>
 </template>

code/fms/fms-vue/src/components/ui/context-menu/ContextMenuCheckboxItem.vue

@@ -1,31 +1,29 @@
 <script setup lang="ts">
-import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Check } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ContextMenuCheckboxItem,
-  ContextMenuItemIndicator,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Check } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ContextMenuCheckboxItem, ContextMenuItemIndicator, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<ContextMenuCheckboxItemEmits>()
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<ContextMenuCheckboxItemEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <ContextMenuCheckboxItem
     data-slot="context-menu-checkbox-item"
     v-bind="forwarded"
-    :class="cn(
-      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
+    :class="
+      cn(
+        `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
   >
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenuItemIndicator>

code/fms/fms-vue/src/components/ui/context-menu/ContextMenuContent.vue

@@ -1,24 +1,20 @@
 <script setup lang="ts">
-import type { ContextMenuContentEmits, ContextMenuContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ContextMenuContent,
-  ContextMenuPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ContextMenuContentEmits, ContextMenuContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ContextMenuContent, ContextMenuPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<ContextMenuContentEmits>()
+const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<ContextMenuContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -26,10 +22,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <ContextMenuContent
       data-slot="context-menu-content"
       v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-        props.class,
-      )"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          props.class,
+        )
+      "
     >
       <slot />
     </ContextMenuContent>

code/fms/fms-vue/src/components/ui/context-menu/ContextMenuGroup.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { ContextMenuGroupProps } from "reka-ui"
-import { ContextMenuGroup } from "reka-ui"
+import type { ContextMenuGroupProps } from "reka-ui";
+import { ContextMenuGroup } from "reka-ui";
 
-const props = defineProps<ContextMenuGroupProps>()
+const props = defineProps<ContextMenuGroupProps>();
 </script>
 
 <template>
-  <ContextMenuGroup
-    data-slot="context-menu-group"
-    v-bind="props"
-  >
+  <ContextMenuGroup data-slot="context-menu-group" v-bind="props">
     <slot />
   </ContextMenuGroup>
 </template>

code/fms/fms-vue/src/components/ui/context-menu/ContextMenuItem.vue

@@ -1,25 +1,27 @@
 <script setup lang="ts">
-import type { ContextMenuItemEmits, ContextMenuItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ContextMenuItem,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ContextMenuItemEmits, ContextMenuItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ContextMenuItem, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = withDefaults(defineProps<ContextMenuItemProps & {
-  class?: HTMLAttributes["class"]
-  inset?: boolean
-  variant?: "default" | "destructive"
-}>(), {
-  variant: "default",
-})
-const emits = defineEmits<ContextMenuItemEmits>()
+const props = withDefaults(
+  defineProps<
+    ContextMenuItemProps & {
+      class?: HTMLAttributes["class"];
+      inset?: boolean;
+      variant?: "default" | "destructive";
+    }
+  >(),
+  {
+    variant: "default",
+  },
+);
+const emits = defineEmits<ContextMenuItemEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -28,10 +30,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     :data-inset="inset ? '' : undefined"
     :data-variant="variant"
     v-bind="forwarded"
-    :class="cn(
-      `focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
+    :class="
+      cn(
+        `focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
   >
     <slot />
   </ContextMenuItem>

code/fms/fms-vue/src/components/ui/context-menu/ContextMenuLabel.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import type { ContextMenuLabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ContextMenuLabel } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ContextMenuLabelProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ContextMenuLabel } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+const props = defineProps<
+  ContextMenuLabelProps & { class?: HTMLAttributes["class"]; inset?: boolean }
+>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>