create-nala 3.0.3 → 3.0.4

package/template/src/components/ui/command/Command.vue

@@ -1,79 +1,79 @@
 <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 "."
-
-const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(), {
-  modelValue: "",
-  highlightOnHover: true,
-})
-
-const emits = defineEmits<ListboxRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-
-const allItems = ref<Map<string, string>>(new Map())
-const allGroups = ref<Map<string, Set<string>>>(new Map())
-
-const { contains } = useFilter({ sensitivity: "base" })
-const filterState = reactive({
-  search: "",
-  filtered: {
-    /** The count of all visible items. */
-    count: 0,
-    /** Map from visible item id to its search score. */
-    items: new Map() as Map<string, number>,
-    /** 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
-    // Do nothing, each item will know to show itself because search is empty
-    return
-  }
-
-  // Reset the groups
-  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++
-  }
-
-  // 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.count = itemCount
-}
-
-watch(() => filterState.search, () => {
-  filterItems()
-})
-
-provideCommandContext({
-  allItems,
-  allGroups,
-  filterState,
+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 delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: "base" })
+const filterState = reactive({
+  search: "",
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map() as Map<string, number>,
+    /** 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
+    // Do nothing, each item will know to show itself because search is empty
+    return
+  }
+
+  // Reset the groups
+  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++
+  }
+
+  // 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.count = itemCount
+}
+
+watch(() => filterState.search, () => {
+  filterItems()
+})
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
 })
 </script>
 

package/template/src/components/ui/command/CommandDialog.vue

@@ -1,18 +1,18 @@
 <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"
-
-const props = withDefaults(defineProps<DialogRootProps & {
-  title?: string
-  description?: string
-}>(), {
-  title: "Command Palette",
-  description: "Search for a command to run...",
-})
-const emits = defineEmits<DialogRootEmits>()
-
+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 forwarded = useForwardPropsEmits(props, emits)
 </script>
 

package/template/src/components/ui/command/CommandEmpty.vue

@@ -1,18 +1,18 @@
 <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 "."
-
-const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const { filterState } = useCommand()
-const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
+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 delegatedProps = reactiveOmit(props, "class")
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
 )
 </script>
 

package/template/src/components/ui/command/CommandGroup.vue

@@ -1,31 +1,31 @@
 <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 "."
-
-const props = defineProps<ListboxGroupProps & {
-  class?: HTMLAttributes["class"]
-  heading?: string
-}>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const { allGroups, filterState } = useCommand()
-const id = useId()
-
-const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
-
-provideCommandGroupContext({ id })
-onMounted(() => {
-  if (!allGroups.value.has(id))
-    allGroups.value.set(id, new Set())
-})
-onUnmounted(() => {
-  allGroups.value.delete(id)
+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 delegatedProps = reactiveOmit(props, "class")
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  allGroups.value.delete(id)
 })
 </script>
 

package/template/src/components/ui/command/CommandInput.vue

@@ -1,24 +1,24 @@
 <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 "."
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<ListboxFilterProps & {
-  class?: HTMLAttributes["class"]
-}>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-
+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 delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+
 const { filterState } = useCommand()
 </script>
 

package/template/src/components/ui/command/CommandItem.vue

@@ -1,61 +1,61 @@
 <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 "."
-
-const props = defineProps<ListboxItemProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<ListboxItemEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-
-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)
-    // 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
-    }
-
-    // Check with filter
-    return filteredCurrentItem > 0
-  }
-})
-
-const itemRef = ref()
-const currentElement = useCurrentElement(itemRef)
-onMounted(() => {
-  if (!(currentElement.value instanceof HTMLElement))
-    return
-
-  // textValue to perform filter
-  allItems.value.set(id, currentElement.value.textContent ?? (props.value?.toString() ?? ""))
-
-  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)
-    }
-  }
-})
-onUnmounted(() => {
-  allItems.value.delete(id)
+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 delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+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)
+    // 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
+    }
+
+    // Check with filter
+    return filteredCurrentItem > 0
+  }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement))
+    return
+
+  // textValue to perform filter
+  allItems.value.set(id, currentElement.value.textContent ?? (props.value?.toString() ?? ""))
+
+  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)
+    }
+  }
+})
+onUnmounted(() => {
+  allItems.value.delete(id)
 })
 </script>
 

package/template/src/components/ui/command/CommandList.vue

@@ -1,14 +1,14 @@
 <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"
-
-const props = defineProps<ListboxContentProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
+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 delegatedProps = reactiveOmit(props, "class")
+
 const forwarded = useForwardProps(delegatedProps)
 </script>
 

package/template/src/components/ui/command/CommandSeparator.vue

@@ -1,12 +1,12 @@
 <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"
-
-const props = defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>()
-
+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 delegatedProps = reactiveOmit(props, "class")
 </script>
 

package/template/src/components/ui/command/CommandShortcut.vue

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

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

@@ -1,25 +1,25 @@
-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 const [useCommand, provideCommandContext] = createContext<{
-  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")
-
-export const [useCommandGroup, provideCommandGroupContext] = createContext<{
-  id?: string
+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 const [useCommand, provideCommandContext] = createContext<{
+  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")
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+  id?: string
 }>("CommandGroup")

package/template/src/components/ui/dialog/Dialog.vue

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

package/template/src/components/ui/dialog/DialogClose.vue

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

package/template/src/components/ui/dialog/DialogContent.vue

@@ -1,28 +1,28 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { X } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DialogClose,
-  DialogContent,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import DialogOverlay from "./DialogOverlay.vue"
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
-  showCloseButton: true,
-})
-const emits = defineEmits<DialogContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { X } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import DialogOverlay from "./DialogOverlay.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
+  showCloseButton: true,
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>