ui-thing 0.1.46 → 0.1.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/dist/index.js +149 -50
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/comps.ts +10 -10
package/package.json
CHANGED
package/src/comps.ts
CHANGED
|
@@ -315,7 +315,7 @@ export default [
|
|
|
315
315
|
fileName: "Breadcrumbs.vue",
|
|
316
316
|
dirPath: "app/components/Ui",
|
|
317
317
|
fileContent:
|
|
318
|
-
'<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
|
|
318
|
+
'<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',
|
|
319
319
|
},
|
|
320
320
|
],
|
|
321
321
|
utils: [],
|
|
@@ -1324,7 +1324,7 @@ export default [
|
|
|
1324
1324
|
fileName: "Input.vue",
|
|
1325
1325
|
dirPath: "app/components/Ui",
|
|
1326
1326
|
fileContent:
|
|
1327
|
-
'<template>\n <!-- eslint-disable-next-line vue/html-self-closing -->\n <input
|
|
1327
|
+
'<template>\n <!-- eslint-disable-next-line vue/html-self-closing -->\n <input\n v-bind="props"\n :class="styles({ class: props.class })"\n :value="modelValue"\n @input="handleInput"\n />\n</template>\n\n<script lang="ts" setup>\n const props = withDefaults(\n defineProps<{\n /** Additional classes to add to the input */\n class?: any;\n /** The id of the input */\n id?: string;\n /** The name of the input */\n name?: string;\n /** The placeholder of the input */\n placeholder?: string;\n /** Whether the input is disabled */\n disabled?: boolean;\n /** Whether the input is required */\n required?: boolean;\n /** The type of the input */\n type?: string;\n /** The value of the input */\n modelValue?: any;\n /** The maximum length of the input */\n maxlength?: number;\n /** The `RegExp` pattern of the input */\n pattern?: string;\n }>(),\n {\n type: "text",\n modelValue: "",\n }\n );\n\n const emit = defineEmits<{\n "update:modelValue": [value: string];\n }>();\n\n const handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n let value = target.value;\n\n /* val input with pattern */\n if (props.pattern) {\n const regex = new RegExp(props.pattern);\n value = Array.from(value)\n .filter((char) => regex.test(char))\n .join("");\n }\n\n /* Handle maxlength */\n if (props.maxlength) {\n value = value.slice(0, props.maxlength);\n }\n\n target.value = value;\n emit("update:modelValue", value);\n };\n\n const styles = tv({\n base: "form-input h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:px-1 file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus:border-input focus:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:[color-scheme:dark] sm:text-sm",\n });\n</script>\n',
|
|
1328
1328
|
},
|
|
1329
1329
|
],
|
|
1330
1330
|
utils: [],
|
|
@@ -1710,13 +1710,13 @@ export default [
|
|
|
1710
1710
|
fileName: "Pagination/Ellipsis.vue",
|
|
1711
1711
|
dirPath: "app/components/Ui",
|
|
1712
1712
|
fileContent:
|
|
1713
|
-
'<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',
|
|
1713
|
+
'<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',
|
|
1714
1714
|
},
|
|
1715
1715
|
{
|
|
1716
1716
|
fileName: "Pagination/First.vue",
|
|
1717
1717
|
dirPath: "app/components/Ui",
|
|
1718
1718
|
fileContent:
|
|
1719
|
-
'<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',
|
|
1719
|
+
'<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',
|
|
1720
1720
|
},
|
|
1721
1721
|
{
|
|
1722
1722
|
fileName: "Pagination/Item.vue",
|
|
@@ -1728,31 +1728,31 @@ export default [
|
|
|
1728
1728
|
fileName: "Pagination/Last.vue",
|
|
1729
1729
|
dirPath: "app/components/Ui",
|
|
1730
1730
|
fileContent:
|
|
1731
|
-
'<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',
|
|
1731
|
+
'<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',
|
|
1732
1732
|
},
|
|
1733
1733
|
{
|
|
1734
1734
|
fileName: "Pagination/List.vue",
|
|
1735
1735
|
dirPath: "app/components/Ui",
|
|
1736
1736
|
fileContent:
|
|
1737
|
-
'<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',
|
|
1737
|
+
'<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',
|
|
1738
1738
|
},
|
|
1739
1739
|
{
|
|
1740
1740
|
fileName: "Pagination/Next.vue",
|
|
1741
1741
|
dirPath: "app/components/Ui",
|
|
1742
1742
|
fileContent:
|
|
1743
|
-
'<template>\n <PaginationNext v-bind="
|
|
1743
|
+
'<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',
|
|
1744
1744
|
},
|
|
1745
1745
|
{
|
|
1746
1746
|
fileName: "Pagination/Pagination.vue",
|
|
1747
1747
|
dirPath: "app/components/Ui",
|
|
1748
1748
|
fileContent:
|
|
1749
|
-
'<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',
|
|
1749
|
+
'<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',
|
|
1750
1750
|
},
|
|
1751
1751
|
{
|
|
1752
1752
|
fileName: "Pagination/Prev.vue",
|
|
1753
1753
|
dirPath: "app/components/Ui",
|
|
1754
1754
|
fileContent:
|
|
1755
|
-
'<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',
|
|
1755
|
+
'<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',
|
|
1756
1756
|
},
|
|
1757
1757
|
],
|
|
1758
1758
|
utils: [],
|
|
@@ -2614,7 +2614,7 @@ export default [
|
|
|
2614
2614
|
fileName: "Textarea.vue",
|
|
2615
2615
|
dirPath: "app/components/Ui",
|
|
2616
2616
|
fileContent:
|
|
2617
|
-
'<template>\n <textarea
|
|
2617
|
+
'<template>\n <textarea\n v-bind="props"\n :value="modelValue"\n :class="styles({ class: props.class })"\n @input="handleInput"\n />\n</template>\n\n<script lang="ts" setup>\n const props = withDefaults(\n defineProps<{\n /** Additional classes to add to the textarea */\n class?: any;\n /** The name of the textarea */\n name?: string;\n /** The id of the textarea */\n id?: string;\n /** The placeholder of the textarea */\n placeholder?: string;\n /** Whether the textarea is required */\n required?: boolean;\n /** Whether the textarea is disabled */\n disabled?: boolean;\n /** The number of rows to display */\n rows?: number;\n /** The value of the textarea */\n modelValue?: string;\n /** The maximum number of characters allowed */\n maxlength?: number;\n /** The `RegExp` pattern of the textarea */\n pattern?: string;\n }>(),\n {\n modelValue: "",\n }\n );\n\n const emit = defineEmits<{\n "update:modelValue": [value: string];\n }>();\n\n const handleInput = (event: Event) => {\n const target = event.target as HTMLTextAreaElement;\n let value = target.value;\n\n /* Validate input with pattern */\n if (props.pattern) {\n const regex = new RegExp(props.pattern);\n value = Array.from(value)\n .filter((char) => regex.test(char))\n .join("");\n }\n\n /* Handle maxlength */\n if (props.maxlength) {\n value = value.slice(0, props.maxlength);\n }\n\n target.value = value;\n emit("update:modelValue", value);\n };\n\n const styles = tv({\n base: "form-textarea flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus:border-input focus:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:[color-scheme:dark] sm:text-sm",\n });\n</script>\n',
|
|
2618
2618
|
},
|
|
2619
2619
|
],
|
|
2620
2620
|
utils: [],
|