@bagelink/vue 1.2.81 → 1.2.83
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/dist/components/Btn.vue.d.ts +1 -1
- package/dist/components/Btn.vue.d.ts.map +1 -1
- package/dist/components/DataPreview.vue.d.ts +16 -5
- package/dist/components/DataPreview.vue.d.ts.map +1 -1
- package/dist/components/Icon/Icon.vue.d.ts +4 -1
- package/dist/components/Icon/Icon.vue.d.ts.map +1 -1
- package/dist/components/ModalForm.vue.d.ts +2 -1
- package/dist/components/ModalForm.vue.d.ts.map +1 -1
- package/dist/components/dataTable/DataTable.vue.d.ts.map +1 -1
- package/dist/components/dataTable/useSorting.d.ts +1 -1
- package/dist/components/dataTable/useSorting.d.ts.map +1 -1
- package/dist/components/dataTable/useTableData.d.ts +7 -6
- package/dist/components/dataTable/useTableData.d.ts.map +1 -1
- package/dist/components/dataTable/useTableVirtualization.d.ts.map +1 -1
- package/dist/components/form/BagelForm.vue.d.ts +4 -10
- package/dist/components/form/BagelForm.vue.d.ts.map +1 -1
- package/dist/components/form/BglMultiStepForm.vue.d.ts +4 -3
- package/dist/components/form/BglMultiStepForm.vue.d.ts.map +1 -1
- package/dist/components/form/FieldArray.vue.d.ts +3 -2
- package/dist/components/form/FieldArray.vue.d.ts.map +1 -1
- package/dist/composables/index.d.ts +5 -5
- package/dist/composables/index.d.ts.map +1 -1
- package/dist/composables/useSchemaField.d.ts +5 -12
- package/dist/composables/useSchemaField.d.ts.map +1 -1
- package/dist/index.cjs +142 -228
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +143 -229
- package/dist/plugins/modalTypes.d.ts +3 -2
- package/dist/plugins/modalTypes.d.ts.map +1 -1
- package/dist/style.css +89 -89
- package/dist/types/BagelForm.d.ts +14 -11
- package/dist/types/BagelForm.d.ts.map +1 -1
- package/dist/types/TableSchema.d.ts +9 -9
- package/dist/types/TableSchema.d.ts.map +1 -1
- package/dist/utils/BagelFormUtils.d.ts +4 -3
- package/dist/utils/BagelFormUtils.d.ts.map +1 -1
- package/dist/utils/useSearch.d.ts +44 -0
- package/dist/utils/useSearch.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/components/DataPreview.vue +16 -5
- package/src/components/Icon/Icon.vue +12 -3
- package/src/components/ModalForm.vue +6 -9
- package/src/components/dataTable/DataTable.vue +11 -14
- package/src/components/dataTable/useSorting.ts +1 -1
- package/src/components/dataTable/useTableData.ts +19 -42
- package/src/components/dataTable/useTableVirtualization.ts +4 -8
- package/src/components/form/BagelForm.vue +32 -97
- package/src/components/form/BglMultiStepForm.vue +7 -6
- package/src/components/form/FieldArray.vue +54 -45
- package/src/components/form/inputs/RichText/index.vue +1 -1
- package/src/composables/index.ts +12 -13
- package/src/composables/useSchemaField.ts +37 -35
- package/src/index.ts +1 -1
- package/src/plugins/modalTypes.ts +3 -2
- package/src/types/BagelForm.ts +22 -14
- package/src/types/TableSchema.ts +9 -9
- package/src/utils/BagelFormUtils.ts +4 -3
- package/src/utils/{search.ts → useSearch.ts} +1 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableSchema.d.ts","sourceRoot":"","sources":["../../src/types/TableSchema.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"TableSchema.d.ts","sourceRoot":"","sources":["../../src/types/TableSchema.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,KAAK,CAAA;AAExD,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,CAAA;AAC5C,MAAM,MAAM,UAAU,GAAG,GAAG,MAAM,IAAI,eAAe,EAAE,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE;IAC1F,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,MAAM,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAC5C,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAA;IACpC,aAAa,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IACzC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,MAAM,WAAW,cAAc;IAC9B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,KAAK,IAAI,CAAA;CAC3D;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,EAAE;QAAE,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,CAAA;IAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC5C,IAAI,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAA;IACtB,UAAU,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IAClC,IAAI,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAA;IAC3B,MAAM,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAC5C,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAA;IACpC,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,eAAe,CAAA;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAA;CACvB"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ArrayFieldVal, BaseBagelField, BglFormSchemaT, Field, IconType, InputBagelField, Option, Path, SelectBagelField } from '..';
|
|
1
|
+
import { ArrayFieldVal, BaseBagelField, BglFormSchemaT, Field, IconType, InputBagelField, Option, Path, SchemaChild, SelectBagelField } from '..';
|
|
2
2
|
import { UploadInputProps } from '../components/form/inputs/Upload/upload.types';
|
|
3
3
|
interface InputOptions<T, P extends Path<T>> extends Partial<BaseBagelField<T, P>> {
|
|
4
4
|
defaultValue?: string | number;
|
|
@@ -54,8 +54,9 @@ interface EmailInputOptions<T, P extends Path<T>> extends InputOptions<T, P> {
|
|
|
54
54
|
export declare function emailField<T, P extends Path<T>>(id: P, label?: string, options?: EmailInputOptions<T, P>): BaseBagelField<T, P>;
|
|
55
55
|
export declare function dateField<T, P extends Path<T>>(id: P, label?: string, options?: DateOptions<T, P>): BaseBagelField<T, P>;
|
|
56
56
|
export declare function numField<T, P extends Path<T>>(id: P, label?: string, options?: NumFieldOptions<T, P>): BaseBagelField<T, P>;
|
|
57
|
-
export declare function frmRow<T>(...children:
|
|
58
|
-
export
|
|
57
|
+
export declare function frmRow<T>(...children: SchemaChild<T, Path<T>>[]): Field<T>;
|
|
58
|
+
export interface UploadOptions<T, K extends Path<T>> extends InputOptions<T, K>, UploadInputProps {
|
|
59
|
+
}
|
|
59
60
|
export declare function uploadField<T, P extends Path<T>>(id: P, label?: string, options?: UploadOptions<T, P>): BaseBagelField<T, P>;
|
|
60
61
|
interface RangeOptions<T, K extends Path<T>> extends InputOptions<T, K> {
|
|
61
62
|
min?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAc,cAAc,EAAE,cAAc,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { ComputedRef, MaybeRefOrGetter } from 'vue';
|
|
2
|
+
/**
|
|
3
|
+
* Clears HTML tags from a string
|
|
4
|
+
* @param html - HTML string to clean
|
|
5
|
+
* @returns Plain text without HTML tags
|
|
6
|
+
*/
|
|
7
|
+
export declare function clearHtml(value?: string): string;
|
|
8
|
+
/**
|
|
9
|
+
* Normalizes text by removing special characters and converting to lowercase
|
|
10
|
+
* @param text - Text to normalize
|
|
11
|
+
* @returns Normalized text
|
|
12
|
+
*/
|
|
13
|
+
export declare function normalizeText(text: string): string;
|
|
14
|
+
export interface SearchItemParams<T> {
|
|
15
|
+
searchTerm?: MaybeRefOrGetter<string>;
|
|
16
|
+
items?: MaybeRefOrGetter<T[]>;
|
|
17
|
+
keysToSearch?: (keyof T extends string ? keyof T : string)[];
|
|
18
|
+
fieldWeights?: Record<string, number>;
|
|
19
|
+
minChars?: number;
|
|
20
|
+
serverSearch?: (query: string) => Promise<T[]>;
|
|
21
|
+
debounceMs?: number;
|
|
22
|
+
}
|
|
23
|
+
export interface SearchResult<T> {
|
|
24
|
+
results: ComputedRef<T[]>;
|
|
25
|
+
resultCount: ComputedRef<number>;
|
|
26
|
+
hasResults: ComputedRef<boolean>;
|
|
27
|
+
isSearching: ComputedRef<boolean>;
|
|
28
|
+
isLoading: ComputedRef<boolean>;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Generic search function that searches for a term within specified object properties
|
|
32
|
+
* If keysToSearch is not provided, searches all keys (including nested ones)
|
|
33
|
+
* @param params - Search parameters including searchTerm, items, keys and weights
|
|
34
|
+
* @returns Filtered and sorted array of items that match the search terms
|
|
35
|
+
*/
|
|
36
|
+
export declare function searchItems<T>(params: SearchItemParams<T>): T[];
|
|
37
|
+
/**
|
|
38
|
+
* Vue composable for searching items with reactive results
|
|
39
|
+
* Supports both client-side filtering and server-side search
|
|
40
|
+
* @param params Search parameters
|
|
41
|
+
* @returns Reactive search results and metadata
|
|
42
|
+
*/
|
|
43
|
+
export declare function useSearch<T>(params: SearchItemParams<T>): SearchResult<T>;
|
|
44
|
+
//# sourceMappingURL=useSearch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSearch.d.ts","sourceRoot":"","sources":["../../src/utils/useSearch.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAExD;;;;GAIG;AAEH,wBAAgB,SAAS,CAAC,KAAK,CAAC,EAAE,MAAM,UAUvC;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAGlD;AA2ED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IAClC,UAAU,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACrC,KAAK,CAAC,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAA;IAC7B,YAAY,CAAC,EAAE,CAAC,MAAM,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,GAAG,MAAM,CAAC,EAAE,CAAA;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,CAAA;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,YAAY,CAAC,CAAC;IAC9B,OAAO,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAA;IACzB,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAChC,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAChC,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IACjC,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;CAC/B;AAwBD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAsK/D;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAC1B,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,GACzB,YAAY,CAAC,CAAC,CAAC,CAuEjB"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,24 @@
|
|
|
1
|
-
<script setup lang="ts" generic="T extends { [key: string]: any }, P">
|
|
2
|
-
import type {
|
|
1
|
+
<script setup lang="ts" generic="T extends { [key: string]: any }, P extends Path<T>">
|
|
2
|
+
import type { Path, BaseBagelField } from '@bagelink/vue'
|
|
3
3
|
import type { Slots } from 'vue'
|
|
4
4
|
import type { TableSchemaProps } from '../types/TableSchema'
|
|
5
5
|
import { computed, useSlots } from 'vue'
|
|
6
6
|
import { useSchemaField } from '../composables/useSchemaField'
|
|
7
7
|
import { useTableData } from './dataTable/useTableData'
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
export interface DataPreviewProps<PT extends { [key: string]: any }> extends Omit<TableSchemaProps<PT>, 'data'> {
|
|
10
|
+
modelValue: PT
|
|
11
|
+
includeUnset?: boolean
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export interface DataPreviewSlots<T, SP extends Path<T>> extends Slots {
|
|
15
|
+
// [key: string]: VNodeFn<T, SP>
|
|
16
|
+
[key: string]: (props: { row: T, field: BaseBagelField<T, SP> }) => any
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
const props = defineProps<DataPreviewProps<T>>()
|
|
20
|
+
|
|
21
|
+
const slots = useSlots() as DataPreviewSlots<T, P>
|
|
11
22
|
|
|
12
23
|
const data = computed(() => {
|
|
13
24
|
// Handle undefined or null modelValue
|
|
@@ -49,7 +60,7 @@ const { renderField } = useSchemaField<T, P>({
|
|
|
49
60
|
<div class="data-preview">
|
|
50
61
|
<template v-if="computedSchema && computedSchema.length > 0">
|
|
51
62
|
<template v-for="field in computedSchema" :key="field.id">
|
|
52
|
-
<
|
|
63
|
+
<Component :is="renderField(field, slots as unknown as BaseBagelField<T, P>['slots'])" />
|
|
53
64
|
</template>
|
|
54
65
|
</template>
|
|
55
66
|
<div v-else class="empty-preview">
|
|
@@ -2,13 +2,16 @@
|
|
|
2
2
|
import type { IconType } from '@bagelink/vue'
|
|
3
3
|
import { FONT_AWESOME_ICONS, MATERIAL_ICONS, FONT_AWESOME_BRANDS_ICONS } from './constants'
|
|
4
4
|
|
|
5
|
-
const props = defineProps<{
|
|
5
|
+
const props = withDefaults(defineProps<{
|
|
6
6
|
icon?: IconType
|
|
7
7
|
name?: IconType
|
|
8
8
|
size?: number | string
|
|
9
9
|
color?: string
|
|
10
|
+
round?: boolean
|
|
10
11
|
weight?: number | string
|
|
11
|
-
}>()
|
|
12
|
+
}>(), {
|
|
13
|
+
size: 1
|
|
14
|
+
})
|
|
12
15
|
|
|
13
16
|
const iconRender = $computed(() => props.icon || props.name) as IconType
|
|
14
17
|
|
|
@@ -25,7 +28,13 @@ const isFaBrand = $computed(() => FONT_AWESOME_BRANDS_ICONS.includes(iconRender)
|
|
|
25
28
|
<span
|
|
26
29
|
v-if="iconRenderType === 'material'"
|
|
27
30
|
class="bgl_icon-font"
|
|
28
|
-
:
|
|
31
|
+
:class="{ 'round flex aspect-ratio-1 justify-content-center': round }"
|
|
32
|
+
:style="{ 'fontSize': `${size}rem`,
|
|
33
|
+
color,
|
|
34
|
+
'font-variation-settings': `'wght' ${weight || 400}`,
|
|
35
|
+
'width': round ? `calc(${size}rem * 2)` : 'auto',
|
|
36
|
+
'height': round ? `calc(${size}rem * 2)` : 'auto',
|
|
37
|
+
}"
|
|
29
38
|
>
|
|
30
39
|
{{ iconRender }}
|
|
31
40
|
</span>
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
<script lang="ts" setup generic="T extends {[key:string]:any}">
|
|
1
|
+
<script lang="ts" setup generic="T extends {[key:string]:any}, P extends Path<T>">
|
|
2
|
+
import type { Path } from '@bagelink/vue'
|
|
3
|
+
import type { ComponentExposed } from 'vue-component-type-helpers'
|
|
2
4
|
import type { ModalFormOptions } from '../plugins/modalTypes'
|
|
3
5
|
import { Btn, Modal, useBagel, BagelForm } from '@bagelink/vue'
|
|
4
6
|
|
|
@@ -12,20 +14,15 @@ const emit = defineEmits<{
|
|
|
12
14
|
|
|
13
15
|
const bagel = useBagel()
|
|
14
16
|
|
|
15
|
-
const modal = $ref<
|
|
17
|
+
const modal = $ref<ComponentExposed<typeof Modal>>()
|
|
16
18
|
|
|
17
19
|
const formData = defineModel<T>('modelValue', {
|
|
18
20
|
default: {} as Partial<T>,
|
|
19
21
|
})
|
|
20
22
|
|
|
21
|
-
|
|
22
|
-
validateForm: () => boolean
|
|
23
|
-
deleteItem?: () => void
|
|
24
|
-
isDirty?: boolean
|
|
25
|
-
clearForm?: () => void
|
|
26
|
-
}
|
|
23
|
+
type BagelFormT = ComponentExposed<typeof BagelForm<T, P>>
|
|
27
24
|
|
|
28
|
-
const form = $ref<
|
|
25
|
+
const form = $ref<BagelFormT>()
|
|
29
26
|
const closeModal = () => modal?.closeModal()
|
|
30
27
|
|
|
31
28
|
let submitting = $ref(false)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script setup lang="ts" generic="T extends { [key: string]: any }, P extends Path<T>">
|
|
2
|
-
import type { Field, Path } from '@bagelink/vue'
|
|
3
|
-
import type {
|
|
2
|
+
import type { BaseBagelField, Field, Path } from '@bagelink/vue'
|
|
3
|
+
import type { SetupContext } from 'vue'
|
|
4
4
|
import type { TableSchemaProps } from '../../types/TableSchema'
|
|
5
5
|
import {
|
|
6
6
|
Icon,
|
|
@@ -24,16 +24,17 @@ const emit = defineEmits<{
|
|
|
24
24
|
lastItemVisible: []
|
|
25
25
|
}>()
|
|
26
26
|
|
|
27
|
-
const slots = useSlots()
|
|
27
|
+
const slots: SetupContext['slots'] = useSlots()
|
|
28
28
|
|
|
29
29
|
const loading = defineModel('loading', { default: false })
|
|
30
30
|
const itemHeight = defineModel('itemHeight', { default: 50 })
|
|
31
31
|
const selectedItems = defineModel<string[]>('selectedItems', { default: [] as string[] })
|
|
32
32
|
|
|
33
|
+
// Create computed properties to wrap the props
|
|
33
34
|
const data = computed(() => props.data)
|
|
34
|
-
const schema = computed(() => props.schema)
|
|
35
|
-
const columns = computed(() => props.columns)
|
|
36
|
-
const useServerSort = computed(() => props.useServerSort)
|
|
35
|
+
const schema = computed(() => props.schema as any)
|
|
36
|
+
const columns = computed(() => props.columns as any)
|
|
37
|
+
const useServerSort = computed(() => props.useServerSort as any)
|
|
37
38
|
|
|
38
39
|
const {
|
|
39
40
|
computedSchema,
|
|
@@ -41,8 +42,7 @@ const {
|
|
|
41
42
|
sortField,
|
|
42
43
|
sortDirection,
|
|
43
44
|
toggleSort,
|
|
44
|
-
cleanTransformedData
|
|
45
|
-
schemaState
|
|
45
|
+
cleanTransformedData
|
|
46
46
|
} = useTableData<T>({
|
|
47
47
|
data,
|
|
48
48
|
schema,
|
|
@@ -95,7 +95,7 @@ function renderFieldForRow(field: Field<T>, row: T) {
|
|
|
95
95
|
},
|
|
96
96
|
onUpdateModelValue: undefined
|
|
97
97
|
})
|
|
98
|
-
return renderField({ ...field, label: '' } as
|
|
98
|
+
return renderField({ ...field, label: '' } as BaseBagelField<T, P>, slots)
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
const computedItemHeight = $computed(() => `${itemHeight.value}px`)
|
|
@@ -122,7 +122,7 @@ watch(
|
|
|
122
122
|
}
|
|
123
123
|
)
|
|
124
124
|
|
|
125
|
-
const showLoading = computed(() => loading.value
|
|
125
|
+
const showLoading = computed(() => loading.value)
|
|
126
126
|
</script>
|
|
127
127
|
|
|
128
128
|
<template>
|
|
@@ -137,9 +137,6 @@ const showLoading = computed(() => loading.value || schemaState.value === 'loadi
|
|
|
137
137
|
>
|
|
138
138
|
<div class="loading-table-animation fixed oval top-7" />
|
|
139
139
|
</div>
|
|
140
|
-
<div v-else-if="schemaState === 'error'" class="flex-center h-300px txt-red">
|
|
141
|
-
Error loading table schema
|
|
142
|
-
</div>
|
|
143
140
|
<div v-bind="wrapperProps" :class="{ 'pointer-events-none': showLoading }">
|
|
144
141
|
<table class="infinite-wrapper">
|
|
145
142
|
<thead class="row first-row">
|
|
@@ -195,7 +192,7 @@ const showLoading = computed(() => loading.value || schemaState.value === 'loadi
|
|
|
195
192
|
class="col"
|
|
196
193
|
>
|
|
197
194
|
<slot
|
|
198
|
-
v-if="field.id && slots[field.id]"
|
|
195
|
+
v-if="field.id && slots?.[field.id]"
|
|
199
196
|
:name="field.id"
|
|
200
197
|
:row="row"
|
|
201
198
|
:field="field"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { SortDirectionsT, SortingOptions } from '../../types/TableSchema'
|
|
2
2
|
import { ref, computed } from 'vue'
|
|
3
3
|
|
|
4
|
-
export function useSorting
|
|
4
|
+
export function useSorting(options: SortingOptions) {
|
|
5
5
|
const sortFieldRef = ref('')
|
|
6
6
|
const sortDirectionRef = ref<SortDirectionsT>('ASC')
|
|
7
7
|
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
1
|
+
import type { BglFormSchemaT } from '@bagelink/vue'
|
|
2
|
+
import type { ComputedRef, MaybeRefOrGetter } from 'vue'
|
|
3
|
+
import type { SortDirectionsT } from '../../types/TableSchema'
|
|
3
4
|
import { useBglSchema, isDate, keyToLabel } from '@bagelink/vue'
|
|
4
|
-
import { computed, ref,
|
|
5
|
+
import { computed, ref, watch, toRef, toValue } from 'vue'
|
|
5
6
|
|
|
6
7
|
const NON_DIGIT_REGEX = /[^\d.-]/g
|
|
7
8
|
|
|
@@ -13,10 +14,10 @@ const SRC_VALUE_COMPONENTS = new Set(['img', 'iframe'])
|
|
|
13
14
|
|
|
14
15
|
// Extend the base options interface to include computed refs
|
|
15
16
|
export interface UseTableDataOptions<T> {
|
|
16
|
-
data:
|
|
17
|
-
schema?:
|
|
18
|
-
columns?:
|
|
19
|
-
useServerSort?:
|
|
17
|
+
data: ComputedRef<T[]>
|
|
18
|
+
schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
|
|
19
|
+
columns?: MaybeRefOrGetter<string[]>
|
|
20
|
+
useServerSort?: MaybeRefOrGetter<boolean>
|
|
20
21
|
onSort?: (field: string, direction: SortDirectionsT) => void
|
|
21
22
|
}
|
|
22
23
|
|
|
@@ -37,37 +38,18 @@ export function useTableData<T extends { [key: string]: any }>(options: UseTable
|
|
|
37
38
|
const schemaState = ref<'loading' | 'loaded' | 'error'>('loading')
|
|
38
39
|
const resolvedSchema = ref<any[]>([])
|
|
39
40
|
|
|
40
|
-
//
|
|
41
|
-
function
|
|
42
|
-
if (value === undefined || value === null) {
|
|
43
|
-
return undefined
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
try {
|
|
47
|
-
// Check if it's a computed ref with a value property
|
|
48
|
-
if (value && typeof value === 'object' && 'value' in value) {
|
|
49
|
-
return (value as ComputedRef<V>).value
|
|
50
|
-
}
|
|
51
|
-
// Otherwise return the value directly
|
|
52
|
-
return value as V
|
|
53
|
-
} catch (error) {
|
|
54
|
-
console.error('Error in getValue:', error)
|
|
55
|
-
return undefined
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
// Function to resolve schema asynchronously
|
|
60
|
-
async function resolveSchemaAsync() {
|
|
41
|
+
// Function to resolve schema
|
|
42
|
+
function resolveSchema() {
|
|
61
43
|
try {
|
|
62
44
|
schemaState.value = 'loading'
|
|
63
45
|
|
|
64
46
|
// Get the data safely
|
|
65
47
|
const dataValue = options.data.value || []
|
|
66
48
|
|
|
67
|
-
// Get the schema from useBglSchema
|
|
49
|
+
// Get the schema from useBglSchema
|
|
68
50
|
const schema = useBglSchema<T>({
|
|
69
|
-
schema:
|
|
70
|
-
columns:
|
|
51
|
+
schema: options.schema,
|
|
52
|
+
columns: options.columns,
|
|
71
53
|
data: dataValue,
|
|
72
54
|
})
|
|
73
55
|
|
|
@@ -82,7 +64,7 @@ export function useTableData<T extends { [key: string]: any }>(options: UseTable
|
|
|
82
64
|
resolvedSchema.value = Object.keys(firstItem || {})
|
|
83
65
|
.filter(key => key !== 'id' && !key.startsWith('_')) // Exclude id and internal fields
|
|
84
66
|
.map(key => ({
|
|
85
|
-
id: key,
|
|
67
|
+
id: key as any, // Cast to any to resolve type issues with Path<T>
|
|
86
68
|
label: keyToLabel(key),
|
|
87
69
|
$el: 'div',
|
|
88
70
|
transform: (val?: any) => {
|
|
@@ -107,18 +89,13 @@ export function useTableData<T extends { [key: string]: any }>(options: UseTable
|
|
|
107
89
|
|
|
108
90
|
// Watch for changes in schema or columns and resolve schema
|
|
109
91
|
watch([
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
92
|
+
options.schema || toRef({}),
|
|
93
|
+
options.columns || toRef([]),
|
|
94
|
+
options.data,
|
|
113
95
|
], () => {
|
|
114
|
-
|
|
96
|
+
resolveSchema()
|
|
115
97
|
}, { immediate: true })
|
|
116
98
|
|
|
117
|
-
// Initialize schema on mount
|
|
118
|
-
onMounted(() => {
|
|
119
|
-
resolveSchemaAsync()
|
|
120
|
-
})
|
|
121
|
-
|
|
122
99
|
// Create a computed property for the schema
|
|
123
100
|
const computedSchema = computed(() => resolvedSchema.value)
|
|
124
101
|
|
|
@@ -180,7 +157,7 @@ export function useTableData<T extends { [key: string]: any }>(options: UseTable
|
|
|
180
157
|
return []
|
|
181
158
|
}
|
|
182
159
|
|
|
183
|
-
const useServerSortValue =
|
|
160
|
+
const useServerSortValue = $computed(() => toValue(options.useServerSort))
|
|
184
161
|
|
|
185
162
|
if (!sortField.value || useServerSortValue === true) {
|
|
186
163
|
return currentData.map(transform)
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import type { TableVirtualizationOptions } from '../../types/TableSchema'
|
|
2
2
|
import { useVirtualList, useIntersectionObserver, until } from '@vueuse/core'
|
|
3
|
-
import { ref,
|
|
3
|
+
import { ref, toValue } from 'vue'
|
|
4
4
|
|
|
5
5
|
export function useTableVirtualization<T>(options: TableVirtualizationOptions<T>) {
|
|
6
6
|
const lastItemEl = ref<HTMLTableRowElement | null>(null)
|
|
7
|
+
|
|
8
|
+
// For useVirtualList, which expects MaybeRef
|
|
7
9
|
const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
|
|
8
10
|
options.data,
|
|
9
11
|
{
|
|
@@ -17,13 +19,7 @@ export function useTableVirtualization<T>(options: TableVirtualizationOptions<T>
|
|
|
17
19
|
|
|
18
20
|
useIntersectionObserver(lastItemEl, ([entry]) => {
|
|
19
21
|
// Check if options.data.value exists and has length
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
if (isRef(options.data) && options.data.value) {
|
|
23
|
-
dataLength = Array.isArray(options.data.value) ? options.data.value.length : 0
|
|
24
|
-
} else if (Array.isArray(options.data)) {
|
|
25
|
-
dataLength = options.data.length
|
|
26
|
-
}
|
|
22
|
+
const dataLength = toValue(options.data).length || 0
|
|
27
23
|
|
|
28
24
|
if (entry.isIntersecting && dataLength > 0) {
|
|
29
25
|
options.onLastItemVisible?.()
|
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
<script setup lang="ts" generic="T extends {[key:string]:any}, P">
|
|
2
|
-
import type {
|
|
3
|
-
import type {
|
|
4
|
-
import {
|
|
5
|
-
import { onMounted, watch, ref, toRef, computed } from 'vue'
|
|
1
|
+
<script setup lang="ts" generic="T extends {[key:string]:any}, P extends Path<T>">
|
|
2
|
+
import type { Field, BglFormSchemaT, Path, BaseBagelField } from '@bagelink/vue'
|
|
3
|
+
import type { MaybeRefOrGetter } from 'vue'
|
|
4
|
+
import { onMounted, watch, ref, computed, toValue } from 'vue'
|
|
6
5
|
import { useSchemaField } from '../../composables/useSchemaField'
|
|
7
6
|
import { getNestedValue } from '../../utils'
|
|
8
7
|
|
|
9
8
|
const props = withDefaults(defineProps<{
|
|
10
9
|
modelValue?: T
|
|
11
|
-
schema?:
|
|
10
|
+
schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
|
|
12
11
|
tag?: 'form' | 'template'
|
|
13
12
|
class?: string
|
|
14
13
|
onSubmit?: (data: T) => Promise<unknown> | unknown
|
|
@@ -31,10 +30,8 @@ const form = ref<HTMLFormElement>()
|
|
|
31
30
|
const formData = ref<T>(clone(props.modelValue ?? {}) as T)
|
|
32
31
|
const initialFormData = ref<T>(clone(props.modelValue ?? {}) as T)
|
|
33
32
|
const formState = ref<'success' | 'error' | 'idle' | 'submitting'>('idle')
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
const schemaRef = toRef(props, 'schema')
|
|
37
|
-
const resolvedSchema = computed(() => resolvedSchemaData.value)
|
|
33
|
+
const resolvedSchema = computed(() => toValue(props.schema))
|
|
34
|
+
|
|
38
35
|
const isDirty = computed(() => {
|
|
39
36
|
try {
|
|
40
37
|
return JSON.stringify(formData.value) !== JSON.stringify(initialFormData.value)
|
|
@@ -46,7 +43,6 @@ const isDirty = computed(() => {
|
|
|
46
43
|
// Initialize on mount
|
|
47
44
|
onMounted(() => {
|
|
48
45
|
if (props.modelValue) initialFormData.value = clone(props.modelValue)
|
|
49
|
-
refreshSchema()
|
|
50
46
|
})
|
|
51
47
|
|
|
52
48
|
// Watch for model changes
|
|
@@ -54,47 +50,9 @@ watch(() => props.modelValue, (val) => {
|
|
|
54
50
|
if (val !== undefined) formData.value = clone(val)
|
|
55
51
|
}, { immediate: true, deep: true })
|
|
56
52
|
|
|
57
|
-
// Schema resolution
|
|
58
|
-
async function resolveSchema(schema?: BglFormSchemaFnT<T>) {
|
|
59
|
-
if (!schema) {
|
|
60
|
-
resolvedSchemaData.value = undefined
|
|
61
|
-
schemaState.value = 'loaded'
|
|
62
|
-
return
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
try {
|
|
66
|
-
schemaState.value = 'loading'
|
|
67
|
-
const isPromise = (obj: any) => obj && typeof obj.then === 'function'
|
|
68
|
-
|
|
69
|
-
let result: any
|
|
70
|
-
if (typeof schema === 'function') {
|
|
71
|
-
result = schema()
|
|
72
|
-
result = isPromise(result) ? await result : result
|
|
73
|
-
} else {
|
|
74
|
-
result = isPromise(schema) ? await schema : schema
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
resolvedSchemaData.value = result
|
|
78
|
-
schemaState.value = 'loaded'
|
|
79
|
-
} catch (error) {
|
|
80
|
-
console.error('Schema error:', error)
|
|
81
|
-
schemaState.value = 'error'
|
|
82
|
-
resolvedSchemaData.value = undefined
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// Public refresh method
|
|
87
|
-
async function refreshSchema() {
|
|
88
|
-
await resolveSchema(props.schema)
|
|
89
|
-
return resolvedSchemaData.value
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
// Watch schema changes
|
|
93
|
-
watch(schemaRef, resolveSchema, { immediate: true, deep: true })
|
|
94
|
-
|
|
95
53
|
// Update form data
|
|
96
|
-
function updateFormData(fieldId: string, value: any) {
|
|
97
|
-
const keys = fieldId
|
|
54
|
+
function updateFormData({ fieldId, value }: { fieldId?: string, value: any }) {
|
|
55
|
+
const keys = fieldId?.split('.') || []
|
|
98
56
|
const newData = clone(formData.value) as { [key: string]: any }
|
|
99
57
|
let current = newData
|
|
100
58
|
|
|
@@ -131,7 +89,7 @@ async function handleSubmit() {
|
|
|
131
89
|
}
|
|
132
90
|
}
|
|
133
91
|
|
|
134
|
-
// Field
|
|
92
|
+
// Field renderingks
|
|
135
93
|
const { renderField } = useSchemaField<T, P>({
|
|
136
94
|
mode: 'form',
|
|
137
95
|
getFormData: () => ({
|
|
@@ -141,23 +99,23 @@ const { renderField } = useSchemaField<T, P>({
|
|
|
141
99
|
onUpdateModelValue: (field, value) => {
|
|
142
100
|
if (!field.id) return
|
|
143
101
|
|
|
144
|
-
updateFormData(field.id, value)
|
|
102
|
+
updateFormData({ fieldId: field.id, value })
|
|
145
103
|
field.onUpdate?.(value, formData.value)
|
|
146
104
|
}
|
|
147
105
|
})
|
|
148
106
|
|
|
149
|
-
const renderSchemaField = (field: Field<T>)
|
|
107
|
+
const renderSchemaField = (field: Field<T>) => renderField(field as BaseBagelField<T, P>)
|
|
150
108
|
|
|
151
109
|
// Add new method to handle slot input changes
|
|
152
110
|
function handleSlotInputChange(event: Event) {
|
|
153
111
|
const input = event.target as HTMLInputElement
|
|
154
112
|
if (input.name) {
|
|
155
113
|
const value = input.type === 'checkbox' ? input.checked : input.value
|
|
156
|
-
updateFormData(input.name, value)
|
|
114
|
+
updateFormData({ fieldId: input.name, value })
|
|
157
115
|
}
|
|
158
116
|
}
|
|
159
117
|
|
|
160
|
-
defineExpose({ form, isDirty, validateForm,
|
|
118
|
+
defineExpose({ form, isDirty, validateForm, checkValidity })
|
|
161
119
|
</script>
|
|
162
120
|
|
|
163
121
|
<template>
|
|
@@ -168,27 +126,14 @@ defineExpose({ form, isDirty, validateForm, resolveSchema, refreshSchema, checkV
|
|
|
168
126
|
@submit.prevent="handleSubmit"
|
|
169
127
|
@input="handleSlotInputChange"
|
|
170
128
|
>
|
|
171
|
-
<!-- Loading state -->
|
|
172
|
-
<slot v-if="schemaState === 'loading'" name="loading">
|
|
173
|
-
<div class="flex-center h-300px">
|
|
174
|
-
<Loading />
|
|
175
|
-
</div>
|
|
176
|
-
</slot>
|
|
177
|
-
|
|
178
|
-
<!-- Error state -->
|
|
179
|
-
<slot v-else-if="schemaState === 'error'" name="schema-error">
|
|
180
|
-
<div class="flex-center h-300px txt-red">
|
|
181
|
-
Error loading form
|
|
182
|
-
</div>
|
|
183
|
-
</slot>
|
|
184
|
-
|
|
185
129
|
<!-- Render fields -->
|
|
186
|
-
<
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
130
|
+
<template v-if="resolvedSchema">
|
|
131
|
+
<Component
|
|
132
|
+
:is="renderSchemaField(field)"
|
|
133
|
+
v-for="field in resolvedSchema"
|
|
134
|
+
:key="field.id"
|
|
135
|
+
/>
|
|
136
|
+
</template>
|
|
192
137
|
|
|
193
138
|
<!-- Default slot -->
|
|
194
139
|
<slot v-else />
|
|
@@ -196,32 +141,22 @@ defineExpose({ form, isDirty, validateForm, resolveSchema, refreshSchema, checkV
|
|
|
196
141
|
<slot
|
|
197
142
|
name="submit"
|
|
198
143
|
:submit="handleSubmit"
|
|
199
|
-
:isDirty
|
|
200
|
-
:validateForm
|
|
201
|
-
:formState
|
|
202
|
-
:schemaState="schemaState"
|
|
144
|
+
:isDirty
|
|
145
|
+
:validateForm
|
|
146
|
+
:formState
|
|
203
147
|
/>
|
|
204
148
|
</form>
|
|
205
149
|
|
|
206
150
|
<!-- Template mode -->
|
|
207
151
|
<template v-else>
|
|
208
|
-
<
|
|
209
|
-
<
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
</slot>
|
|
217
|
-
|
|
218
|
-
<component
|
|
219
|
-
:is="renderSchemaField(field)"
|
|
220
|
-
v-for="field in resolvedSchema"
|
|
221
|
-
v-else-if="resolvedSchema"
|
|
222
|
-
:key="field.id"
|
|
223
|
-
:class="props.class"
|
|
224
|
-
/>
|
|
152
|
+
<template v-if="resolvedSchema">
|
|
153
|
+
<component
|
|
154
|
+
:is="renderSchemaField(field)"
|
|
155
|
+
v-for="field in resolvedSchema"
|
|
156
|
+
:key="field.id"
|
|
157
|
+
:class="props.class"
|
|
158
|
+
/>
|
|
159
|
+
</template>
|
|
225
160
|
</template>
|
|
226
161
|
</template>
|
|
227
162
|
|