ui-thing 0.1.45 → 0.1.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.1.45",
+  "version": "0.1.47",
   "description": "CLI used to add Nuxt 3 components to a project",
   "keywords": [
     "cli",

package/src/comps.ts

@@ -315,7 +315,7 @@ export default [
         fileName: "Breadcrumbs.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <div :class="styles({ class: props.class })">\n    <template v-for="(item, i) in items" :key="i">\n      <div class="flex items-center gap-3">\n        <div class="flex cursor-pointer items-center gap-2">\n          <slot name="crumbIcon" :item="item" :index="i">\n            <Icon\n              v-if="item.icon"\n              :name="item.icon"\n              :class="[!isNotLastItem(i) && \'text-primary\']"\n            />\n          </slot>\n          <slot :item="item" :is-not-last-item="isNotLastItem" :index="i" name="link">\n            <NuxtLink\n              v-if="item.label"\n              :to="!item?.disabled ? item.link : \'\'"\n              :class="[\n                isNotLastItem(i)\n                  ? \'text-muted-foreground hover:underline\'\n                  : \'font-semibold text-primary\',\n              ]"\n              class="text-sm text-foreground"\n              @click="item?.click?.()"\n              >{{ item.label }}</NuxtLink\n            >\n          </slot>\n        </div>\n        <slot name="separator" :item="item" :index="i">\n          <Icon v-if="isNotLastItem(i)" :name="separator" class="h-3 w-3 text-muted-foreground" />\n        </slot>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script setup lang="ts">\n  export interface Crumbs {\n    label: string;\n    icon?: string;\n    link?: string;\n    disabled?: boolean;\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n    click?: Function;\n  }\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * The items to display in the breadcrumbs.\n       */\n      items?: Crumbs[];\n      /**\n       * The separator to use between each breadcrumb.\n       */\n      separator?: string;\n      class?: any;\n    }>(),\n    {\n      separator: "heroicons:chevron-right",\n      items: () => [],\n      class: undefined,\n    }\n  );\n\n  const isNotLastItem = (index: number) => {\n    return index !== props?.items?.length - 1;\n  };\n\n  const styles = tv({\n    base: "flex w-full items-center gap-4",\n  });\n</script>\n',
+          '<template>\n  <div :class="styles({ class: props.class })">\n    <template v-for="(item, i) in items" :key="i">\n      <slot :name="item.slot || \'default\'">\n        <div class="flex items-center gap-3">\n          <div class="group flex items-center gap-2">\n            <slot name="crumbIcon" :item="item" :index="i">\n              <Icon\n                v-if="item.icon"\n                :name="item.icon"\n                :class="[\n                  isNotLastItem(i)\n                    ? \'text-muted-foreground group-hover:text-foreground\'\n                    : \'text-primary\',\n                ]"\n              />\n            </slot>\n            <slot :item="item" :is-not-last-item="isNotLastItem" :index="i" name="link">\n              <NuxtLink\n                v-if="item.label"\n                :to="!item?.disabled ? item.link : \'\'"\n                :class="[\n                  item.link && !item.disabled && \'underline-offset-2 group-hover:underline\',\n                  isNotLastItem(i)\n                    ? \'text-muted-foreground group-hover:text-foreground\'\n                    : \'font-semibold text-primary\',\n                ]"\n                class="text-sm text-foreground transition-colors"\n                @click="item?.click?.()"\n                >{{ item.label }}</NuxtLink\n              >\n            </slot>\n          </div>\n        </div>\n      </slot>\n      <slot name="separator" :item="item" :index="i">\n        <Icon v-if="isNotLastItem(i)" :name="separator" class="h-3 w-3 text-muted-foreground" />\n      </slot>\n    </template>\n  </div>\n</template>\n\n<script setup lang="ts">\n  export interface Crumbs {\n    label?: string;\n    icon?: string;\n    link?: string;\n    disabled?: boolean;\n    slot?: string;\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n    click?: Function;\n  }\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * The items to display in the breadcrumbs.\n       */\n      items?: Crumbs[];\n      /**\n       * The separator to use between each breadcrumb.\n       */\n      separator?: string;\n      class?: any;\n    }>(),\n    {\n      separator: "heroicons:chevron-right",\n      items: () => [],\n      class: undefined,\n    }\n  );\n\n  const isNotLastItem = (index: number) => {\n    return index !== props?.items?.length - 1;\n  };\n\n  const styles = tv({\n    base: "flex w-full items-center gap-4",\n  });\n</script>\n',
       },
     ],
     utils: [],
@@ -338,7 +338,7 @@ export default [
         fileName: "Button.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <component\n    :is="elementType"\n    :class="\n      buttonStyles({\n        hasIcon: !!icon,\n        disabled: disabled || loading,\n        variant: variant,\n        size: size,\n        class: props.class,\n      })\n    "\n    :disabled="disabled || loading"\n    v-bind="forwarded"\n  >\n    <slot name="iconLeft">\n      <div\n        v-if="icon && iconPlacement == \'left\'"\n        class="group-hover:translate-x-100 flex w-0 shrink-0 translate-x-[0%] items-center justify-center pr-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:pr-2 group-hover:opacity-100"\n      >\n        <Icon :name="icon" class="size-5" />\n      </div>\n    </slot>\n    <slot>\n      <span v-if="text">{{ text }}</span>\n    </slot>\n    <slot name="iconRight">\n      <div\n        v-if="icon && iconPlacement == \'right\'"\n        class="flex w-0 shrink-0 translate-x-[100%] items-center justify-center pl-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:translate-x-0 group-hover:pl-2 group-hover:opacity-100"\n      >\n        <Icon :name="icon" class="size-5" />\n      </div>\n    </slot>\n  </component>\n</template>\n\n<script setup lang="ts">\n  import { reactiveOmit } from "@vueuse/core";\n  import { useForwardProps } from "radix-vue";\n  import type { NuxtLinkProps } from "#app/components";\n\n  type ButtonProps = VariantProps<typeof buttonStyles>;\n  const props = withDefaults(\n    defineProps<\n      NuxtLinkProps & {\n        /** The type fro the button */\n        type?: "button" | "submit" | "reset";\n        /** Whether the button is disabled */\n        disabled?: boolean;\n        /** Whether the button is loading */\n        loading?: boolean;\n        /** The action to perform when the button is clicked */\n        onClick?: any;\n        /** The element to render the button as */\n        as?: string;\n        /** Custom class(es) to add to parent element */\n        class?: any;\n        /** The variant of the button */\n        variant?: ButtonProps["variant"];\n        /** The size of the button */\n        size?: ButtonProps["size"];\n        /** The text to display in the button */\n        text?: string;\n        /** Should the icon be displayed on the `left` or the `right`? */\n        iconPlacement?: "left" | "right";\n        /** The icon to display in the button */\n        icon?: string;\n      }\n    >(),\n    {\n      type: "button",\n    }\n  );\n\n  const elementType = computed(() => {\n    if (props.as) return props.as;\n    if (props.href || props.to || props.target) return resolveComponent("NuxtLink");\n    return "button";\n  });\n\n  const forwarded = useForwardProps(\n    reactiveOmit(\n      props,\n      "class",\n      "text",\n      "icon",\n      "iconPlacement",\n      "size",\n      "variant",\n      "as",\n      "loading",\n      "disabled"\n    )\n  );\n</script>\n',
+          '<template>\n  <component\n    :is="elementType"\n    :class="\n      buttonStyles({\n        hasIcon: !!icon,\n        disabled: disabled || loading,\n        variant: variant,\n        size: size,\n        class: props.class,\n      })\n    "\n    :disabled="disabled || loading"\n    v-bind="forwarded"\n  >\n    <slot name="iconLeft">\n      <div\n        v-if="icon && iconPlacement == \'left\'"\n        class="group-hover:translate-x-100 flex w-0 shrink-0 translate-x-[0%] items-center justify-center pr-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:pr-2 group-hover:opacity-100"\n      >\n        <Icon :name="icon" class="size-5" />\n      </div>\n    </slot>\n    <slot name="loading">\n      <Icon v-if="loading" class="size-4 shrink-0" :name="loadingIcon" />\n    </slot>\n    <slot>\n      <span v-if="text">{{ text }}</span>\n    </slot>\n    <slot name="iconRight">\n      <div\n        v-if="icon && iconPlacement == \'right\'"\n        class="flex w-0 shrink-0 translate-x-[100%] items-center justify-center pl-0 opacity-0 transition-all duration-200 group-hover:w-6 group-hover:translate-x-0 group-hover:pl-2 group-hover:opacity-100"\n      >\n        <Icon :name="icon" class="size-5" />\n      </div>\n    </slot>\n  </component>\n</template>\n\n<script setup lang="ts">\n  import { reactiveOmit } from "@vueuse/core";\n  import { useForwardProps } from "radix-vue";\n  import type { NuxtLinkProps } from "#app/components";\n\n  type ButtonProps = VariantProps<typeof buttonStyles>;\n  const props = withDefaults(\n    defineProps<\n      NuxtLinkProps & {\n        /** The type for the button */\n        type?: "button" | "submit" | "reset";\n        /** Whether the button is disabled */\n        disabled?: boolean;\n        /** Whether the button is loading */\n        loading?: boolean;\n        /** The action to perform when the button is clicked */\n        onClick?: any;\n        /** The element to render the button as */\n        as?: string;\n        /** Custom class(es) to add to parent element */\n        class?: any;\n        /** The variant of the button */\n        variant?: ButtonProps["variant"];\n        /** The size of the button */\n        size?: ButtonProps["size"];\n        /** The text to display in the button */\n        text?: string;\n        /** Should the icon be displayed on the `left` or the `right`? */\n        iconPlacement?: "left" | "right";\n        /** The icon to display in the button */\n        icon?: string;\n        /** The icon to display when the button is loading */\n        loadingIcon?: string;\n      }\n    >(),\n    {\n      type: "button",\n      loadingIcon: "line-md:loading-loop",\n      iconPlacement: "left",\n      loading: false,\n    }\n  );\n\n  const elementType = computed(() => {\n    if (props.as) return props.as;\n    if (props.href || props.to || props.target) return resolveComponent("NuxtLink");\n    return "button";\n  });\n\n  const forwarded = useForwardProps(\n    reactiveOmit(\n      props,\n      "class",\n      "text",\n      "icon",\n      "iconPlacement",\n      "size",\n      "variant",\n      "as",\n      "loading",\n      "disabled",\n      "loadingIcon"\n    )\n  );\n</script>\n',
       },
     ],
     composables: [],
@@ -1710,13 +1710,13 @@ export default [
         fileName: "Pagination/Ellipsis.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <PaginationEllipsis v-bind="forwarded">\n    <slot>\n      <div v-if="icon" class="inline-flex h-9 w-9 items-center justify-center hover:bg-transparent">\n        <Icon :name="icon" />\n      </div>\n    </slot>\n  </PaginationEllipsis>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationEllipsis } from "radix-vue";\n  import type { PaginationEllipsisProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationEllipsisProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
+          '<template>\n  <PaginationEllipsis v-bind="forwarded">\n    <slot>\n      <div v-if="icon" class="inline-flex h-9 w-9 items-center justify-center hover:bg-transparent">\n        <Icon :name="icon" />\n      </div>\n    </slot>\n  </PaginationEllipsis>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { PaginationEllipsis } from "radix-vue";\n  import type { PaginationEllipsisProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationEllipsisProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
       },
       {
         fileName: "Pagination/First.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <PaginationFirst v-bind="forwarded">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationFirst>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationFirst } from "radix-vue";\n  import type { PaginationFirstProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationFirstProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
+          '<template>\n  <PaginationFirst v-bind="forwarded">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationFirst>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { PaginationFirst } from "radix-vue";\n  import type { PaginationFirstProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationFirstProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
       },
       {
         fileName: "Pagination/Item.vue",
@@ -1728,31 +1728,31 @@ export default [
         fileName: "Pagination/Last.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <PaginationLast v-bind="forwarded">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationLast>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationLast } from "radix-vue";\n  import type { PaginationLastProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationLastProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
+          '<template>\n  <PaginationLast v-bind="forwarded">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationLast>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { PaginationLast } from "radix-vue";\n  import type { PaginationLastProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationLastProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
       },
       {
         fileName: "Pagination/List.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <PaginationList v-slot="{ items }" :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot :items="items" />\n  </PaginationList>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationList } from "radix-vue";\n  import type { PaginationListProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationListProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex items-center gap-1",\n  });\n</script>\n',
+          '<template>\n  <PaginationList v-slot="{ items }" :class="styles({ class: props.class })" v-bind="forwarded">\n    <slot :items="items" />\n  </PaginationList>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { PaginationList } from "radix-vue";\n  import type { PaginationListProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationListProps & {\n      /** Custom class(es) to add to the parent */\n      class?: any;\n    }\n  >();\n  const forwarded = reactiveOmit(props, "class");\n  const styles = tv({\n    base: "flex items-center gap-1",\n  });\n</script>\n',
       },
       {
         fileName: "Pagination/Next.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <PaginationNext v-bind="props">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationNext>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationNext } from "radix-vue";\n  import type { PaginationNextProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationNextProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n</script>\n',
+          '<template>\n  <PaginationNext v-bind="forwarded">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationNext>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { PaginationNext } from "radix-vue";\n  import type { PaginationNextProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationNextProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
       },
       {
         fileName: "Pagination/Pagination.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <PaginationRoot v-bind="forwarded">\n    <slot>\n      <UiPaginationList v-slot="{ items }">\n        <slot name="first"><UiPaginationFirst as-child :icon="firstIcon" /> </slot>\n        <slot name="prev"><UiPaginationPrev as-child :icon="prevIcon" /> </slot>\n\n        <template v-for="(page, index) in items" :key="index">\n          <UiPaginationItem v-if="page.type === \'page\'" as-child v-bind="page" />\n          <UiPaginationEllipsis\n            v-else-if="page.type === \'ellipsis\'"\n            as-child\n            v-bind="page"\n            :icon="ellipsisIcon"\n          />\n        </template>\n        <slot name="next"><UiPaginationNext as-child :icon="nextIcon" /> </slot>\n        <slot name="last"><UiPaginationLast as-child :icon="lastIcon" /></slot>\n      </UiPaginationList>\n    </slot>\n  </PaginationRoot>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationRoot, useForwardPropsEmits } from "radix-vue";\n  import type { PaginationRootEmits, PaginationRootProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PaginationRootProps & {\n        ellipsisIcon?: string;\n        firstIcon?: string;\n        lastIcon?: string;\n        nextIcon?: string;\n        prevIcon?: string;\n      }\n    >(),\n    {\n      defaultPage: 1,\n      total: 10,\n      itemsPerPage: 10,\n      siblingCount: 3,\n      showEdges: true,\n      ellipsisIcon: "lucide:more-horizontal",\n      firstIcon: "lucide:chevrons-left",\n      lastIcon: "lucide:chevrons-right",\n      nextIcon: "lucide:chevron-right",\n      prevIcon: "lucide:chevron-left",\n    }\n  );\n\n  const emits = defineEmits<PaginationRootEmits>();\n  const forwarded = useForwardPropsEmits(\n    reactiveOmit(props, "ellipsisIcon", "firstIcon", "lastIcon", "nextIcon", "prevIcon"),\n    emits\n  );\n</script>\n',
+          '<template>\n  <PaginationRoot v-bind="forwarded">\n    <slot>\n      <UiPaginationList v-slot="{ items }">\n        <slot name="first"><UiPaginationFirst as-child :icon="firstIcon" /> </slot>\n        <slot name="prev"><UiPaginationPrev as-child :icon="prevIcon" /> </slot>\n\n        <template v-for="(page, index) in items" :key="index">\n          <UiPaginationItem v-if="page.type === \'page\'" as-child v-bind="page" />\n          <UiPaginationEllipsis\n            v-else-if="page.type === \'ellipsis\'"\n            as-child\n            v-bind="page"\n            :icon="ellipsisIcon"\n          />\n        </template>\n        <slot name="next"><UiPaginationNext as-child :icon="nextIcon" /> </slot>\n        <slot name="last"><UiPaginationLast as-child :icon="lastIcon" /></slot>\n      </UiPaginationList>\n    </slot>\n  </PaginationRoot>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { PaginationRoot, useForwardPropsEmits } from "radix-vue";\n  import type { PaginationRootEmits, PaginationRootProps } from "radix-vue";\n\n  const props = withDefaults(\n    defineProps<\n      PaginationRootProps & {\n        ellipsisIcon?: string;\n        firstIcon?: string;\n        lastIcon?: string;\n        nextIcon?: string;\n        prevIcon?: string;\n      }\n    >(),\n    {\n      defaultPage: 1,\n      total: 10,\n      itemsPerPage: 10,\n      siblingCount: 3,\n      showEdges: true,\n      ellipsisIcon: "lucide:more-horizontal",\n      firstIcon: "lucide:chevrons-left",\n      lastIcon: "lucide:chevrons-right",\n      nextIcon: "lucide:chevron-right",\n      prevIcon: "lucide:chevron-left",\n    }\n  );\n\n  const emits = defineEmits<PaginationRootEmits>();\n  const forwarded = useForwardPropsEmits(\n    reactiveOmit(props, "ellipsisIcon", "firstIcon", "lastIcon", "nextIcon", "prevIcon"),\n    emits\n  );\n</script>\n',
       },
       {
         fileName: "Pagination/Prev.vue",
         dirPath: "app/components/Ui",
         fileContent:
-          '<template>\n  <PaginationPrev v-bind="forwarded">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationPrev>\n</template>\n\n<script lang="ts" setup>\n  import { PaginationPrev } from "radix-vue";\n  import type { PaginationPrevProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationPrevProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
+          '<template>\n  <PaginationPrev v-bind="forwarded">\n    <slot>\n      <UiButton v-if="icon" variant="ghost" size="icon-sm">\n        <Icon :name="icon" />\n      </UiButton>\n    </slot>\n  </PaginationPrev>\n</template>\n\n<script lang="ts" setup>\n  import { reactiveOmit } from "@vueuse/core";\n  import { PaginationPrev } from "radix-vue";\n  import type { PaginationPrevProps } from "radix-vue";\n\n  const props = defineProps<\n    PaginationPrevProps & {\n      /** Icon to show */\n      icon?: string;\n    }\n  >();\n\n  const forwarded = reactiveOmit(props, "icon");\n</script>\n',
       },
     ],
     utils: [],