create-nala 3.0.0 → 3.0.4

package/template/src/components/ui/form/FormDescription.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-import { useFormField } from "./useFormField"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { useFormField } from "./useFormField"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
 const { formDescriptionId } = useFormField()
 </script>
 

package/template/src/components/ui/form/FormItem.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { useId } from "reka-ui"
-import { provide } from "vue"
-import { cn } from "@/lib/utils"
-import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-
-const id = useId()
+import type { HTMLAttributes } from "vue"
+import { useId } from "reka-ui"
+import { provide } from "vue"
+import { cn } from "@/lib/utils"
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const id = useId()
 provide(FORM_ITEM_INJECTION_KEY, id)
 </script>
 

package/template/src/components/ui/form/FormLabel.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import type { LabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-import { Label } from '@/components/ui/label'
-import { useFormField } from "./useFormField"
-
-const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
-
+import type { LabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Label } from '@/components/ui/label'
+import { useFormField } from "./useFormField"
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
+
 const { error, formItemId } = useFormField()
 </script>
 

package/template/src/components/ui/form/FormMessage.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { ErrorMessage } from "vee-validate"
-import { toValue } from "vue"
-import { cn } from "@/lib/utils"
-import { useFormField } from "./useFormField"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-
+import type { HTMLAttributes } from "vue"
+import { ErrorMessage } from "vee-validate"
+import { toValue } from "vue"
+import { cn } from "@/lib/utils"
+import { useFormField } from "./useFormField"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
 const { name, formMessageId } = useFormField()
 </script>
 

package/template/src/components/ui/form/index.ts

@@ -1,7 +1,7 @@
-export { default as FormControl } from "./FormControl.vue"
-export { default as FormDescription } from "./FormDescription.vue"
-export { default as FormItem } from "./FormItem.vue"
-export { default as FormLabel } from "./FormLabel.vue"
-export { default as FormMessage } from "./FormMessage.vue"
-export { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+export { default as FormControl } from "./FormControl.vue"
+export { default as FormDescription } from "./FormDescription.vue"
+export { default as FormItem } from "./FormItem.vue"
+export { default as FormLabel } from "./FormLabel.vue"
+export { default as FormMessage } from "./FormMessage.vue"
+export { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
 export { Form, Field as FormField, FieldArray as FormFieldArray } from "vee-validate"

package/template/src/components/ui/form/injectionKeys.ts

@@ -1,4 +1,4 @@
-import type { InjectionKey } from "vue"
-
-export const FORM_ITEM_INJECTION_KEY
+import type { InjectionKey } from "vue"
+
+export const FORM_ITEM_INJECTION_KEY
   = Symbol("FORM_ITEM_INJECTION_KEY") as InjectionKey<string>

package/template/src/components/ui/form/useFormField.ts

@@ -1,30 +1,30 @@
-import { FieldContextKey } from "vee-validate"
-import { computed, inject } from "vue"
-import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
-
-export function useFormField() {
-  const fieldContext = inject(FieldContextKey)
-  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
-
-  if (!fieldContext)
-    throw new Error("useFormField should be used within <FormField>")
-
-  const { name, errorMessage: error, meta } = fieldContext
-  const id = fieldItemContext
-
-  const fieldState = {
-    valid: computed(() => meta.valid),
-    isDirty: computed(() => meta.dirty),
-    isTouched: computed(() => meta.touched),
-    error,
-  }
-
-  return {
-    id,
-    name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
+import { FieldContextKey } from "vee-validate"
+import { computed, inject } from "vue"
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+
+export function useFormField() {
+  const fieldContext = inject(FieldContextKey)
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
+
+  if (!fieldContext)
+    throw new Error("useFormField should be used within <FormField>")
+
+  const { name, errorMessage: error, meta } = fieldContext
+  const id = fieldItemContext
+
+  const fieldState = {
+    valid: computed(() => meta.valid),
+    isDirty: computed(() => meta.dirty),
+    isTouched: computed(() => meta.touched),
+    error,
+  }
+
+  return {
+    id,
+    name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
 }

package/template/src/components/ui/input/Input.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { useVModel } from "@vueuse/core"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  defaultValue?: string | number
-  modelValue?: string | number
-  class?: HTMLAttributes["class"]
-}>()
-
-const emits = defineEmits<{
-  (e: "update:modelValue", payload: string | number): void
-}>()
-
-const modelValue = useVModel(props, "modelValue", emits, {
-  passive: true,
-  defaultValue: props.defaultValue,
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes["class"]
+}>()
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
 })
 </script>
 

package/template/src/components/ui/label/Label.vue

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

package/template/src/components/ui/pagination/Pagination.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { PaginationRootEmits, PaginationRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationRoot, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<PaginationRootProps & {
-  class?: HTMLAttributes["class"]
-}>()
-const emits = defineEmits<PaginationRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
+import type { PaginationRootEmits, PaginationRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PaginationRootProps & {
+  class?: HTMLAttributes["class"]
+}>()
+const emits = defineEmits<PaginationRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 

package/template/src/components/ui/pagination/PaginationContent.vue

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

package/template/src/components/ui/pagination/PaginationEllipsis.vue

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

package/template/src/components/ui/pagination/PaginationFirst.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { PaginationFirstProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from '@/components/ui/button'
-import { ChevronLeftIcon } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationFirst, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
-
-const props = withDefaults(defineProps<PaginationFirstProps & {
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-}>(), {
-  size: "default",
-})
-
-const delegatedProps = reactiveOmit(props, "class", "size")
+import type { PaginationFirstProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/ui/button'
+import { ChevronLeftIcon } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationFirst, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationFirstProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
 const forwarded = useForwardProps(delegatedProps)
 </script>
 

package/template/src/components/ui/pagination/PaginationItem.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import type { PaginationListItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from '@/components/ui/button'
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationListItem } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
-
-const props = withDefaults(defineProps<PaginationListItemProps & {
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-  isActive?: boolean
-}>(), {
-  size: "icon",
-})
-
+import type { PaginationListItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/ui/button'
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationListItem } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationListItemProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+  isActive?: boolean
+}>(), {
+  size: "icon",
+})
+
 const delegatedProps = reactiveOmit(props, "class", "size", "isActive")
 </script>
 

package/template/src/components/ui/pagination/PaginationLast.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { PaginationLastProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from '@/components/ui/button'
-import { ChevronRightIcon } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationLast, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
-
-const props = withDefaults(defineProps<PaginationLastProps & {
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-}>(), {
-  size: "default",
-})
-
-const delegatedProps = reactiveOmit(props, "class", "size")
+import type { PaginationLastProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/ui/button'
+import { ChevronRightIcon } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationLast, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationLastProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
 const forwarded = useForwardProps(delegatedProps)
 </script>
 

package/template/src/components/ui/pagination/PaginationNext.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { PaginationNextProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from '@/components/ui/button'
-import { ChevronRightIcon } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationNext, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
-
-const props = withDefaults(defineProps<PaginationNextProps & {
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-}>(), {
-  size: "default",
-})
-
-const delegatedProps = reactiveOmit(props, "class", "size")
+import type { PaginationNextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/ui/button'
+import { ChevronRightIcon } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationNext, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationNextProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
 const forwarded = useForwardProps(delegatedProps)
 </script>
 

package/template/src/components/ui/pagination/PaginationPrevious.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { PaginationPrevProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from '@/components/ui/button'
-import { ChevronLeftIcon } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationPrev, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
-
-const props = withDefaults(defineProps<PaginationPrevProps & {
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-}>(), {
-  size: "default",
-})
-
-const delegatedProps = reactiveOmit(props, "class", "size")
+import type { PaginationPrevProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/ui/button'
+import { ChevronLeftIcon } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationPrev, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationPrevProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
 const forwarded = useForwardProps(delegatedProps)
 </script>
 

package/template/src/components/ui/pagination/index.ts

@@ -1,8 +1,8 @@
-export { default as Pagination } from "./Pagination.vue"
-export { default as PaginationContent } from "./PaginationContent.vue"
-export { default as PaginationEllipsis } from "./PaginationEllipsis.vue"
-export { default as PaginationFirst } from "./PaginationFirst.vue"
-export { default as PaginationItem } from "./PaginationItem.vue"
-export { default as PaginationLast } from "./PaginationLast.vue"
-export { default as PaginationNext } from "./PaginationNext.vue"
+export { default as Pagination } from "./Pagination.vue"
+export { default as PaginationContent } from "./PaginationContent.vue"
+export { default as PaginationEllipsis } from "./PaginationEllipsis.vue"
+export { default as PaginationFirst } from "./PaginationFirst.vue"
+export { default as PaginationItem } from "./PaginationItem.vue"
+export { default as PaginationLast } from "./PaginationLast.vue"
+export { default as PaginationNext } from "./PaginationNext.vue"
 export { default as PaginationPrevious } from "./PaginationPrevious.vue"

package/template/src/components/ui/popover/Popover.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
-import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
-
-const props = defineProps<PopoverRootProps>()
-const emits = defineEmits<PopoverRootEmits>()
-
+import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
+import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
 const forwarded = useForwardPropsEmits(props, emits)
 </script>
 

package/template/src/components/ui/popover/PopoverAnchor.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { PopoverAnchorProps } from "reka-ui"
-import { PopoverAnchor } from "reka-ui"
-
+import type { PopoverAnchorProps } from "reka-ui"
+import { PopoverAnchor } from "reka-ui"
+
 const props = defineProps<PopoverAnchorProps>()
 </script>
 

package/template/src/components/ui/popover/PopoverContent.vue

@@ -1,29 +1,29 @@
 <script setup lang="ts">
-import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  PopoverContent,
-  PopoverPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(
-  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
-  {
-    align: "center",
-    sideOffset: 4,
-  },
-)
-const emits = defineEmits<PopoverContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
+import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  PopoverContent,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    align: "center",
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 

package/template/src/components/ui/popover/PopoverTrigger.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { PopoverTriggerProps } from "reka-ui"
-import { PopoverTrigger } from "reka-ui"
-
+import type { PopoverTriggerProps } from "reka-ui"
+import { PopoverTrigger } from "reka-ui"
+
 const props = defineProps<PopoverTriggerProps>()
 </script>
 

package/template/src/components/ui/popover/index.ts

@@ -1,4 +1,4 @@
-export { default as Popover } from "./Popover.vue"
-export { default as PopoverAnchor } from "./PopoverAnchor.vue"
-export { default as PopoverContent } from "./PopoverContent.vue"
+export { default as Popover } from "./Popover.vue"
+export { default as PopoverAnchor } from "./PopoverAnchor.vue"
+export { default as PopoverContent } from "./PopoverContent.vue"
 export { default as PopoverTrigger } from "./PopoverTrigger.vue"