@dynect/base 0.1.0 → 0.2.0

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

@@ -0,0 +1,35 @@
+<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<{
+	'update:modelValue': [payload: string | number];
+}>();
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+	passive: true,
+	defaultValue: props.defaultValue,
+});
+</script>
+
+<template>
+	<input
+		v-model="modelValue"
+		data-slot="input"
+		:class="
+			cn(
+				'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+				'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+				props.class
+			)
+		"
+	>
+</template>

package/src/runtime/components/ui/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './Input.vue';

package/src/runtime/components/ui/input-group/InputGroup.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<optgroup
+		data-slot="input-group"
+		role="group"
+		:class="
+			cn(
+				'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border outline-none',
+				'h-9 min-w-0 has-[>textarea]:h-auto',
+
+				// Variants based on alignment.
+				'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+				'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+				'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+				'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+
+				// Focus state.
+				'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+
+				// Error state.
+				'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+
+				props.class
+			)
+		"
+	>
+		<slot />
+	</optgroup>
+</template>

package/src/runtime/components/ui/input-group/InputGroupAddon.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import type { InputGroupVariants } from '.';
+import { cn } from '@/lib/utils';
+import { inputGroupAddonVariants } from '.';
+
+const props = withDefaults(
+	defineProps<{
+		align?: InputGroupVariants['align'];
+		class?: HTMLAttributes['class'];
+	}>(),
+	{
+		align: 'inline-start',
+	}
+);
+
+function handleInputGroupAddonClick(e: MouseEvent) {
+	const currentTarget = e.currentTarget as HTMLElement | null;
+	const target = e.target as HTMLElement | null;
+	if (target && target.closest('button')) {
+		return;
+	}
+	if (currentTarget && currentTarget?.parentElement) {
+		currentTarget.parentElement?.querySelector('input')?.focus();
+	}
+}
+</script>
+
+<template>
+	<div role="group" data-slot="input-group-addon" :data-align="props.align" :class="cn(inputGroupAddonVariants({ align: props.align }), props.class)" @click="handleInputGroupAddonClick">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/input-group/InputGroupButton.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import type { InputGroupButtonVariants } from '.';
+import type { ButtonVariants } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { inputGroupButtonVariants } from '.';
+
+interface InputGroupButtonProps {
+	variant?: ButtonVariants['variant'];
+	size?: InputGroupButtonVariants['size'];
+	class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<InputGroupButtonProps>(), {
+	size: 'xs',
+	variant: 'ghost',
+});
+</script>
+
+<template>
+	<Button :data-size="props.size" :variant="props.variant" :class="cn(inputGroupButtonVariants({ size: props.size }), props.class)">
+		<slot />
+	</Button>
+</template>

package/src/runtime/components/ui/input-group/InputGroupInput.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { Input } from '@/components/ui/input';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<Input data-slot="input-group-control" :class="cn('flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent', props.class)" />
+</template>

package/src/runtime/components/ui/input-group/InputGroupText.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<span :class="cn('text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4', props.class)">
+		<slot />
+	</span>
+</template>

package/src/runtime/components/ui/input-group/InputGroupTextarea.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { Textarea } from '@/components/ui/textarea';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<Textarea data-slot="input-group-control" :class="cn('flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent', props.class)" />
+</template>

package/src/runtime/components/ui/input-group/index.ts

@@ -0,0 +1,41 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export { default as InputGroup } from './InputGroup.vue';
+export { default as InputGroupAddon } from './InputGroupAddon.vue';
+export { default as InputGroupButton } from './InputGroupButton.vue';
+export { default as InputGroupInput } from './InputGroupInput.vue';
+export { default as InputGroupText } from './InputGroupText.vue';
+export { default as InputGroupTextarea } from './InputGroupTextarea.vue';
+
+export const inputGroupAddonVariants = cva("text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50", {
+	variants: {
+		align: {
+			'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+			'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
+			'block-start': 'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
+			'block-end': 'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
+		},
+	},
+	defaultVariants: {
+		align: 'inline-start',
+	},
+});
+
+export type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>;
+
+export const inputGroupButtonVariants = cva('text-sm shadow-none flex gap-2 items-center', {
+	variants: {
+		size: {
+			xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+			sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
+			'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+			'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+		},
+	},
+	defaultVariants: {
+		size: 'xs',
+	},
+});
+
+export type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>;

package/src/runtime/components/ui/input-otp/InputOTP.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import type { OTPInputEmits, OTPInputProps } from 'vue-input-otp';
+import { reactiveOmit } from '@vueuse/core';
+import { useForwardPropsEmits } from 'reka-ui';
+import { OTPInput } from 'vue-input-otp';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<OTPInputProps & { class?: HTMLAttributes['class'] }>();
+
+const emits = defineEmits<OTPInputEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<OTPInput v-slot="slotProps" v-bind="forwarded" :container-class="cn('flex items-center gap-2 has-disabled:opacity-50', props.class)" data-slot="input-otp" class="disabled:cursor-not-allowed">
+		<slot v-bind="slotProps" />
+	</OTPInput>
+</template>

package/src/runtime/components/ui/input-otp/InputOTPGroup.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<div data-slot="input-otp-group" v-bind="forwarded" :class="cn('flex items-center', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/input-otp/InputOTPSeparator.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { MinusIcon } from 'lucide-vue-next';
+import { useForwardProps } from 'reka-ui';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+
+const forwarded = useForwardProps(props);
+</script>
+
+<template>
+	<div data-slot="input-otp-separator" role="separator" v-bind="forwarded">
+		<slot>
+			<MinusIcon />
+		</slot>
+	</div>
+</template>

package/src/runtime/components/ui/input-otp/InputOTPSlot.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { useForwardProps } from 'reka-ui';
+import { computed } from 'vue';
+import { useVueOTPContext } from 'vue-input-otp';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{ index: number; class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+
+const context = useVueOTPContext();
+
+const slot = computed(() => context?.value.slots[props.index]);
+</script>
+
+<template>
+	<div
+		v-bind="forwarded"
+		data-slot="input-otp-slot"
+		:data-active="slot?.isActive"
+		:class="
+			cn(
+				'data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs outline-none first:border-l data-[active=true]:z-10',
+				props.class
+			)
+		"
+	>
+		{{ slot?.char }}
+		<div v-if="slot?.hasFakeCaret" class="pointer-events-none absolute inset-0 flex items-center justify-center">
+			<div class="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+		</div>
+	</div>
+</template>

package/src/runtime/components/ui/input-otp/index.ts

@@ -0,0 +1,4 @@
+export { default as InputOTP } from './InputOTP.vue';
+export { default as InputOTPGroup } from './InputOTPGroup.vue';
+export { default as InputOTPSeparator } from './InputOTPSeparator.vue';
+export { default as InputOTPSlot } from './InputOTPSlot.vue';

package/src/runtime/components/ui/item/Item.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ItemVariants } from '.';
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { itemVariants } from '.';
+
+const props = withDefaults(
+	defineProps<
+		PrimitiveProps & {
+			class?: HTMLAttributes['class'];
+			variant?: ItemVariants['variant'];
+			size?: ItemVariants['size'];
+		}
+	>(),
+	{
+		as: 'div',
+	}
+);
+</script>
+
+<template>
+	<Primitive data-slot="item" :data-variant="variant" :data-size="size" :as="as" :as-child="asChild" :class="cn(itemVariants({ variant, size }), props.class)">
+		<slot />
+	</Primitive>
+</template>

package/src/runtime/components/ui/item/ItemActions.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="item-actions" :class="cn('flex items-center gap-2', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/item/ItemContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="item-content" :class="cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/item/ItemDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<p data-slot="item-description" :class="cn('text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance', '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4', props.class)">
+		<slot />
+	</p>
+</template>

package/src/runtime/components/ui/item/ItemFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="item-footer" :class="cn('flex basis-full items-center justify-between gap-2', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/item/ItemGroup.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div role="list" data-slot="item-group" :class="cn('group/item-group flex flex-col', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/item/ItemHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="item-header" :class="cn('flex basis-full items-center justify-between gap-2', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/item/ItemMedia.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import type { ItemMediaVariants } from '.';
+import { cn } from '@/lib/utils';
+import { itemMediaVariants } from '.';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+	variant?: ItemMediaVariants['variant'];
+}>();
+</script>
+
+<template>
+	<div data-slot="item-media" :data-variant="props.variant" :class="cn(itemMediaVariants({ variant }), props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/item/ItemSeparator.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { Separator } from '@/components/ui/separator';
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+	<Separator data-slot="item-separator" orientation="horizontal" :class="cn('my-0', props.class)" />
+</template>

package/src/runtime/components/ui/item/ItemTitle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="item-title" :class="cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/item/index.ts

@@ -0,0 +1,47 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export { default as Item } from './Item.vue';
+export { default as ItemActions } from './ItemActions.vue';
+export { default as ItemContent } from './ItemContent.vue';
+export { default as ItemDescription } from './ItemDescription.vue';
+export { default as ItemFooter } from './ItemFooter.vue';
+export { default as ItemGroup } from './ItemGroup.vue';
+export { default as ItemHeader } from './ItemHeader.vue';
+export { default as ItemMedia } from './ItemMedia.vue';
+export { default as ItemSeparator } from './ItemSeparator.vue';
+export { default as ItemTitle } from './ItemTitle.vue';
+
+export const itemVariants = cva('group/item flex items-center border border-transparent text-sm rounded-md  [a]:hover:bg-accent/50 duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', {
+	variants: {
+		variant: {
+			default: 'bg-transparent',
+			outline: 'border-border',
+			muted: 'bg-muted/50',
+		},
+		size: {
+			default: 'p-4 gap-4 ',
+			sm: 'py-3 px-4 gap-2.5',
+		},
+	},
+	defaultVariants: {
+		variant: 'default',
+		size: 'default',
+	},
+});
+
+export const itemMediaVariants = cva('flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none group-has-data-[slot=item-description]/item:translate-y-0.5', {
+	variants: {
+		variant: {
+			default: 'bg-transparent',
+			icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+			image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+		},
+	},
+	defaultVariants: {
+		variant: 'default',
+	},
+});
+
+export type ItemVariants = VariantProps<typeof itemVariants>;
+export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;

package/src/runtime/components/ui/kanban/Kanban.vue

@@ -0,0 +1,42 @@
+<template>
+	<ClientOnly>
+		<DnDProvider>
+			<div :class="cn('grid size-full auto-cols-fr grid-flow-col gap-4', props.class)">
+				<slot v-for="column in columns" :key="column.id" :column="column" :row="data" />
+			</div>
+		</DnDProvider>
+	</ClientOnly>
+</template>
+
+<script setup lang="ts" generic="T extends KanbanItemProps, C extends KanbanColumnProps">
+import { DnDProvider } from '@vue-dnd-kit/core';
+import { cn } from '~/lib/utils';
+
+export interface KanbanProps<T extends KanbanItemProps = KanbanItemProps, C extends KanbanColumnProps = KanbanColumnProps> {
+	columns: C[];
+	data: T[];
+	class?: string;
+}
+
+const props = defineProps<KanbanProps<T, C>>();
+
+const emit = defineEmits<{
+	dataChange: [data: T[]];
+	onLeave: [store: any, payload: any];
+	onHover: [store: any, payload: any];
+	onDrop: [store: any, payload: any];
+}>();
+
+const columnsRef = toRef(() => props.columns);
+const dataRef = toRef(() => props.data);
+
+// Provide context to child components
+provideKanbanContext({
+	columns: columnsRef,
+	data: dataRef,
+	onDataChange: (newData: T[]) => emit('dataChange', newData),
+	onHover: (store: any, payload: any) => emit('onHover', store, payload),
+	onLeave: (store: any, payload: any) => emit('onLeave', store, payload),
+	onDrop: (store: any, payload: any) => emit('onDrop', store, payload),
+});
+</script>