diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormItem.vue
index 165c992b7..e82a42eb2 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormItem.vue
@@ -1,20 +1,24 @@
-
+
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue
index b387c1fb1..a875f1caf 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue
@@ -1,18 +1,25 @@
-
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
index fb8a8b915..181847f2d 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
@@ -1,18 +1,27 @@
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/form/useFormField.ts b/packages/@core/ui-kit/shadcn-ui/src/ui/form/useFormField.ts
index dfb8d4c6e..6498dfcde 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/useFormField.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/useFormField.ts
@@ -1,12 +1,6 @@
-import { inject } from 'vue';
+import { computed, inject } from 'vue';
-import {
- FieldContextKey,
- useFieldError,
- useIsFieldDirty,
- useIsFieldTouched,
- useIsFieldValid,
-} from 'vee-validate';
+import { FieldContextKey } from 'vee-validate';
import { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
@@ -17,22 +11,22 @@ export function useFormField() {
if (!fieldContext)
throw new Error('useFormField should be used within
');
- const { name } = fieldContext;
+ const { name, errorMessage: error, meta } = fieldContext;
const id = fieldItemContext;
const fieldState = {
- error: useFieldError(name),
- isDirty: useIsFieldDirty(name),
- isTouched: useIsFieldTouched(name),
- valid: useIsFieldValid(name),
+ valid: computed(() => meta.valid),
+ isDirty: computed(() => meta.dirty),
+ isTouched: computed(() => meta.touched),
+ error,
};
return {
- formDescriptionId: `${id}-form-item-description`,
- formItemId: `${id}-form-item`,
- formMessageId: `${id}-form-item-message`,
id,
name,
+ formItemId: `${id}-form-item`,
+ formDescriptionId: `${id}-form-item-description`,
+ formMessageId: `${id}-form-item-message`,
...fieldState,
};
}
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue
index ac2cc7392..74355509e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue
@@ -10,7 +10,7 @@ const forwarded = useForwardPropsEmits(props, emits);
-
-
+
+
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
index 056d1c1c9..6b21c61a4 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
@@ -1,24 +1,25 @@
@@ -26,10 +27,11 @@ const forwardedProps = useForwardProps(delegatedProps);
();
-
+
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue
index 9a4c3a072..99ea4f44b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue
@@ -1,10 +1,12 @@
import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui';
-import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
import { cn } from '@vben-core/shared/utils';
+import { reactiveOmit } from '@vueuse/core';
import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui';
-const props = defineProps();
+const props = defineProps<
+ NumberFieldRootProps & { class?: HTMLAttributes['class'] }
+>();
const emits = defineEmits();
-const delegatedProps = computed(() => {
- const { class: _, ...delegated } = props;
-
- return delegated;
-});
+const delegatedProps = reactiveOmit(props, 'class');
const forwarded = useForwardPropsEmits(delegatedProps, emits);
-
-
+
+
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldContent.vue
index f6d1b9208..c1dd593e1 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldContent.vue
@@ -1,8 +1,10 @@
@@ -10,7 +12,7 @@ const props = defineProps<{
import type { NumberFieldDecrementProps } from 'reka-ui';
-import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
import { cn } from '@vben-core/shared/utils';
-import { Minus } from 'lucide-vue-next';
+import { Minus } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
import { NumberFieldDecrement, useForwardProps } from 'reka-ui';
-const props = defineProps
();
+const props = defineProps<
+ NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }
+>();
-const delegatedProps = computed(() => {
- const { class: _, ...delegated } = props;
-
- return delegated;
-});
+const delegatedProps = reactiveOmit(props, 'class');
const forwarded = useForwardProps(delegatedProps);
@@ -25,13 +24,13 @@ const forwarded = useForwardProps(delegatedProps);
v-bind="forwarded"
:class="
cn(
- 'absolute top-1/2 left-0 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20',
+ 'absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20',
props.class,
)
"
>
-
+
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue
index 7e68f9934..7bb278474 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue
@@ -1,20 +1,19 @@
@@ -25,7 +24,7 @@ const forwarded = useForwardProps(delegatedProps);
v-bind="forwarded"
:class="
cn(
- 'absolute top-1/2 right-0 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20',
+ 'absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3',
props.class,
)
"
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue
index faae216f5..ef2d167bd 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue
@@ -1,16 +1,23 @@
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/Pagination.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/Pagination.vue
new file mode 100644
index 000000000..6ac4ba6a2
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/Pagination.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationContent.vue
new file mode 100644
index 000000000..e2c7b75d9
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationContent.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue
index 0090b1aa3..34e6f2dff 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue
@@ -1,24 +1,24 @@
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue
index 27284d39d..8c461475c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue
@@ -1,31 +1,46 @@
-
+