vuiii 1.0.0-beta.90 → 1.0.0-beta.91
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/CLAUDE.md +36 -51
- package/README.md +6 -6
- package/dist/arrow-narrow-down-DGBY4Btu.js +4 -0
- package/dist/arrow-narrow-left-BMfPRee1.js +4 -0
- package/dist/arrow-narrow-right-D7VrDLjb.js +4 -0
- package/dist/arrow-narrow-up-BorlecRd.js +4 -0
- package/dist/arrow-top-right-on-square-i24gMSZm.js +4 -0
- package/dist/arrow-up-tray-iCjPTwBt.js +4 -0
- package/dist/caret-sort-Dg7aRzKb.js +4 -0
- package/dist/check-BBg8cVLv.js +4 -0
- package/dist/chevron-down-cIqpaED9.js +4 -0
- package/dist/chevron-left-CxsikvMX.js +4 -0
- package/dist/chevron-right-ByOcIUwz.js +4 -0
- package/dist/chevron-up-BJHgvkCZ.js +4 -0
- package/dist/components/Button.vue.d.ts +1 -1
- package/dist/components/CheckboxGroup.vue.d.ts +1 -1
- package/dist/components/Divider.vue.d.ts +1 -1
- package/dist/components/Dropdown.vue.d.ts +1 -1
- package/dist/components/IconButton.vue.d.ts +1 -1
- package/dist/components/InputWrapper.vue.d.ts +2 -2
- package/dist/components/Tooltip.vue.d.ts +1 -1
- package/dist/composables/useLoadData.d.ts +1 -1
- package/dist/composables/useLoadPaginatedData.d.ts +1 -1
- package/dist/composables/useOnKeyPress.d.ts +1 -1
- package/dist/composables/useSubmitAction.d.ts +1 -1
- package/dist/composables/useValidation.d.ts +2 -2
- package/dist/exclamation-BYxUQPvg.js +4 -0
- package/dist/mail-bBPeld_t.js +4 -0
- package/dist/minus-jP8I17w-.js +4 -0
- package/dist/pencil-DmJ9fo9U.js +4 -0
- package/dist/plus-CMNu2QQI.js +4 -0
- package/dist/search-CD4RRPi6.js +4 -0
- package/dist/snackbar.d.ts +1 -1
- package/dist/spinner-DlmCGx0i.js +4 -0
- package/dist/trash-BMbPD9Je.js +4 -0
- package/dist/triangle-down-iLc4QWFR.js +4 -0
- package/dist/triangle-left-B8krIV2b.js +4 -0
- package/dist/triangle-right-xwrGdoER.js +4 -0
- package/dist/triangle-up-D_dSA8BG.js +4 -0
- package/dist/types.d.ts +4 -4
- package/dist/utils/createTypeParser.d.ts +1 -1
- package/dist/vuiii.css +2 -1
- package/dist/vuiii.js +1942 -2076
- package/dist/x-bczynWUe.js +4 -0
- package/package.json +10 -11
- package/dist/arrow-narrow-down-ByOTsj_3.js +0 -7
- package/dist/arrow-narrow-left-8CXxtWVB.js +0 -7
- package/dist/arrow-narrow-right-BhU8e_zV.js +0 -7
- package/dist/arrow-narrow-up-7chFDqFR.js +0 -7
- package/dist/arrow-top-right-on-square-ncaAU5g2.js +0 -7
- package/dist/arrow-up-tray-IGOOsXks.js +0 -7
- package/dist/caret-sort-pX4FtRak.js +0 -7
- package/dist/check-B2Fprftn.js +0 -7
- package/dist/chevron-down-ChnVgQD9.js +0 -7
- package/dist/chevron-left-Bu3LbUng.js +0 -7
- package/dist/chevron-right-BnrrRNda.js +0 -7
- package/dist/chevron-up-LF9Q5sql.js +0 -7
- package/dist/exclamation-B69D_VJe.js +0 -7
- package/dist/mail-CGnWRGbX.js +0 -7
- package/dist/minus-BMyw4wXP.js +0 -7
- package/dist/pencil-BsDhpPVD.js +0 -7
- package/dist/plus-CPM4Dbh5.js +0 -7
- package/dist/search-S-R7KP0P.js +0 -7
- package/dist/spinner-CJXiitEY.js +0 -24
- package/dist/trash-CV6xtGDj.js +0 -7
- package/dist/triangle-down-DMAYm2wS.js +0 -7
- package/dist/triangle-left-1wQ7e1YI.js +0 -7
- package/dist/triangle-right-BL6A-Pxf.js +0 -7
- package/dist/triangle-up-B0v_SupF.js +0 -7
- package/dist/x-mPmCtkau.js +0 -7
package/CLAUDE.md
CHANGED
|
@@ -93,7 +93,7 @@ const breadcrumbs: BreadcrumbItems = [
|
|
|
93
93
|
const breadcrumbs: BreadcrumbItems = [
|
|
94
94
|
{ label: 'Dashboard', link: { name: 'dashboard' } },
|
|
95
95
|
{ label: 'Users', link: { name: 'users' } },
|
|
96
|
-
{ label: 'John Doe', link: { name: 'user', params: { id: 123 } } }
|
|
96
|
+
{ label: 'John Doe', link: { name: 'user', params: { id: 123 } } },
|
|
97
97
|
]
|
|
98
98
|
```
|
|
99
99
|
|
|
@@ -235,7 +235,7 @@ import { FORM_DIVIDER } from 'vuiii'
|
|
|
235
235
|
const fields = [
|
|
236
236
|
{ name: 'name', component: Input, label: 'Name' },
|
|
237
237
|
FORM_DIVIDER,
|
|
238
|
-
{ name: 'email', component: Input, label: 'Email' }
|
|
238
|
+
{ name: 'email', component: Input, label: 'Email' },
|
|
239
239
|
]
|
|
240
240
|
```
|
|
241
241
|
|
|
@@ -327,8 +327,7 @@ import { FilePicker } from 'vuiii'
|
|
|
327
327
|
Dynamic form generator that renders fields from a configuration array.
|
|
328
328
|
Supports vertical/horizontal layouts, nested rows, dividers, and validation integration.
|
|
329
329
|
|
|
330
|
-
|
|
331
|
-
@example <template #field:email="{ name, label, index }">Custom email input</template>
|
|
330
|
+
@example <template #field:email="{ name, label, index }">Custom email input</template>
|
|
332
331
|
|
|
333
332
|
**Examples:**
|
|
334
333
|
|
|
@@ -350,9 +349,9 @@ const fields: FormField<UserData>[] = [
|
|
|
350
349
|
const fields: FormFieldOrRow<UserData>[] = [
|
|
351
350
|
[
|
|
352
351
|
{ name: 'firstName', component: Input, label: 'First Name' },
|
|
353
|
-
{ name: 'lastName', component: Input, label: 'Last Name' }
|
|
352
|
+
{ name: 'lastName', component: Input, label: 'Last Name' },
|
|
354
353
|
],
|
|
355
|
-
{ name: 'email', component: Input, label: 'Email' }
|
|
354
|
+
{ name: 'email', component: Input, label: 'Email' },
|
|
356
355
|
]
|
|
357
356
|
```
|
|
358
357
|
|
|
@@ -363,7 +362,7 @@ import { FORM_DIVIDER } from 'vuiii'
|
|
|
363
362
|
const fields: FormFieldOrRow<UserData>[] = [
|
|
364
363
|
{ name: 'name', component: Input, label: 'Name' },
|
|
365
364
|
FORM_DIVIDER,
|
|
366
|
-
{ name: 'email', component: Input, label: 'Email' }
|
|
365
|
+
{ name: 'email', component: Input, label: 'Email' },
|
|
367
366
|
]
|
|
368
367
|
```
|
|
369
368
|
|
|
@@ -840,13 +839,7 @@ import { useCursor } from 'vuiii'
|
|
|
840
839
|
|
|
841
840
|
const items = ref(['Apple', 'Banana', 'Cherry'])
|
|
842
841
|
|
|
843
|
-
const {
|
|
844
|
-
cursorIndex,
|
|
845
|
-
cursorItem,
|
|
846
|
-
moveCursorForward,
|
|
847
|
-
moveCursorBack,
|
|
848
|
-
resetCursor
|
|
849
|
-
} = useCursor(items)
|
|
842
|
+
const { cursorIndex, cursorItem, moveCursorForward, moveCursorBack, resetCursor } = useCursor(items)
|
|
850
843
|
|
|
851
844
|
console.log(cursorItem.value) // 'Apple'
|
|
852
845
|
moveCursorForward()
|
|
@@ -890,11 +883,7 @@ const { isDropzoneActive } = useDropArea(
|
|
|
890
883
|
|
|
891
884
|
```typescript
|
|
892
885
|
// With file type filter
|
|
893
|
-
useDropArea(
|
|
894
|
-
dropElement,
|
|
895
|
-
handleFiles,
|
|
896
|
-
{ accept: 'image/*' }
|
|
897
|
-
)
|
|
886
|
+
useDropArea(dropElement, handleFiles, { accept: 'image/*' })
|
|
898
887
|
```
|
|
899
888
|
|
|
900
889
|
### useLoadData
|
|
@@ -923,10 +912,7 @@ onMounted(load)
|
|
|
923
912
|
|
|
924
913
|
```typescript
|
|
925
914
|
// With immediate loading
|
|
926
|
-
const { isLoading, data } = useLoadData(
|
|
927
|
-
() => api.fetchUsers(),
|
|
928
|
-
{ immediate: true }
|
|
929
|
-
)
|
|
915
|
+
const { isLoading, data } = useLoadData(() => api.fetchUsers(), { immediate: true })
|
|
930
916
|
```
|
|
931
917
|
|
|
932
918
|
### useLoadPaginatedData
|
|
@@ -944,8 +930,8 @@ and optional append mode for infinite scroll.
|
|
|
944
930
|
import { useLoadPaginatedData } from 'vuiii'
|
|
945
931
|
import type { PaginatedData } from 'vuiii'
|
|
946
932
|
|
|
947
|
-
const { items, pagination, loadPage, isLoading } = useLoadPaginatedData(
|
|
948
|
-
|
|
933
|
+
const { items, pagination, loadPage, isLoading } = useLoadPaginatedData(({ page, itemsPerPage }) =>
|
|
934
|
+
api.getUsers({ page, itemsPerPage }),
|
|
949
935
|
)
|
|
950
936
|
|
|
951
937
|
onMounted(() => loadPage(1))
|
|
@@ -953,10 +939,9 @@ onMounted(() => loadPage(1))
|
|
|
953
939
|
|
|
954
940
|
```typescript
|
|
955
941
|
// With immediate loading
|
|
956
|
-
const { items, pagination } = useLoadPaginatedData(
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
)
|
|
942
|
+
const { items, pagination } = useLoadPaginatedData(({ page, itemsPerPage }) => api.getItems({ page, itemsPerPage }), {
|
|
943
|
+
immediate: true,
|
|
944
|
+
})
|
|
960
945
|
```
|
|
961
946
|
|
|
962
947
|
### useSubmitAction
|
|
@@ -987,15 +972,12 @@ const { submit, isSubmitting } = useSubmitAction(
|
|
|
987
972
|
|
|
988
973
|
```typescript
|
|
989
974
|
// With confirmation before submit
|
|
990
|
-
const { submit, isSubmitting } = useSubmitAction(
|
|
991
|
-
(
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
successMessage: 'User deleted'
|
|
997
|
-
}
|
|
998
|
-
)
|
|
975
|
+
const { submit, isSubmitting } = useSubmitAction((id) => api.deleteUser(id), {
|
|
976
|
+
onBeforeSubmit: async ({ dialog }) => {
|
|
977
|
+
return await dialog.confirm('Are you sure?')
|
|
978
|
+
},
|
|
979
|
+
successMessage: 'User deleted',
|
|
980
|
+
})
|
|
999
981
|
```
|
|
1000
982
|
|
|
1001
983
|
### useValidation
|
|
@@ -1026,8 +1008,8 @@ function validateForm(data: FormData): ValidationResults<FormData> {
|
|
|
1026
1008
|
errorMessages: errors,
|
|
1027
1009
|
validatedFields: {
|
|
1028
1010
|
email: { isInvalid: !!errors.email, errorMessage: errors.email },
|
|
1029
|
-
password: { isInvalid: !!errors.password, errorMessage: errors.password }
|
|
1030
|
-
}
|
|
1011
|
+
password: { isInvalid: !!errors.password, errorMessage: errors.password },
|
|
1012
|
+
},
|
|
1031
1013
|
}
|
|
1032
1014
|
}
|
|
1033
1015
|
|
|
@@ -1065,7 +1047,6 @@ Allows registering custom icon libraries (Heroicons, FontAwesome, etc.)
|
|
|
1065
1047
|
Utilities for normalizing various option formats into a consistent Option[] structure.
|
|
1066
1048
|
Used by Select, Autocomplete, RadioGroup, CheckboxGroup, and RadioButtonGroup components.
|
|
1067
1049
|
|
|
1068
|
-
|
|
1069
1050
|
## Option Parsing
|
|
1070
1051
|
|
|
1071
1052
|
Components that display selectable options (Select, Autocomplete, RadioGroup, CheckboxGroup,
|
|
@@ -1074,25 +1055,27 @@ are parsed:
|
|
|
1074
1055
|
|
|
1075
1056
|
### Extractor Props
|
|
1076
1057
|
|
|
1077
|
-
| Prop
|
|
1078
|
-
|
|
1079
|
-
| `option-value`
|
|
1080
|
-
| `option-label`
|
|
1081
|
-
| `option-disabled`
|
|
1082
|
-
| `option-description` | Key or function to extract description text
|
|
1083
|
-
| `option-icon`
|
|
1084
|
-
| `group-label`
|
|
1085
|
-
| `group-options`
|
|
1058
|
+
| Prop | Description | Components |
|
|
1059
|
+
| -------------------- | -------------------------------------------------- | --------------------------------------------------------- |
|
|
1060
|
+
| `option-value` | Key or function to extract the option's value | All |
|
|
1061
|
+
| `option-label` | Key or function to extract the display label | All |
|
|
1062
|
+
| `option-disabled` | Key or function to determine if option is disabled | All |
|
|
1063
|
+
| `option-description` | Key or function to extract description text | RadioGroup, CheckboxGroup, Autocomplete, RadioButtonGroup |
|
|
1064
|
+
| `option-icon` | Key or function to extract icon name | Autocomplete, RadioButtonGroup |
|
|
1065
|
+
| `group-label` | Key or function to extract group label | Select, Autocomplete |
|
|
1066
|
+
| `group-options` | Key or function to extract group's options array | Select, Autocomplete |
|
|
1086
1067
|
|
|
1087
1068
|
### Supported Option Formats
|
|
1088
1069
|
|
|
1089
1070
|
**1. Primitive Array** - Value and label are the same
|
|
1071
|
+
|
|
1090
1072
|
```ts
|
|
1091
1073
|
:options="['Apple', 'Banana', 'Cherry']"
|
|
1092
1074
|
:options="[1, 2, 3, 4, 5]"
|
|
1093
1075
|
```
|
|
1094
1076
|
|
|
1095
1077
|
**2. Object Array** - Use extractors to specify which properties to use
|
|
1078
|
+
|
|
1096
1079
|
```ts
|
|
1097
1080
|
:options="[{ id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }]"
|
|
1098
1081
|
option-value="id"
|
|
@@ -1100,11 +1083,13 @@ option-label="name"
|
|
|
1100
1083
|
```
|
|
1101
1084
|
|
|
1102
1085
|
**3. Key-Value Object** - Keys become values, values become labels
|
|
1086
|
+
|
|
1103
1087
|
```ts
|
|
1104
1088
|
:options="{ draft: 'Draft', published: 'Published', archived: 'Archived' }"
|
|
1105
1089
|
```
|
|
1106
1090
|
|
|
1107
1091
|
**4. Grouped Options** - For Select and Autocomplete with optgroup support
|
|
1092
|
+
|
|
1108
1093
|
```ts
|
|
1109
1094
|
:options="[
|
|
1110
1095
|
{ category: 'Fruits', items: [{ id: 1, name: 'Apple' }] },
|
|
@@ -1119,6 +1104,7 @@ option-label="name"
|
|
|
1119
1104
|
### Function Extractors
|
|
1120
1105
|
|
|
1121
1106
|
Instead of property keys, you can use functions for complex extraction:
|
|
1107
|
+
|
|
1122
1108
|
```ts
|
|
1123
1109
|
:option-label="(user) => `${user.firstName} ${user.lastName}`"
|
|
1124
1110
|
:option-value="(item) => item.id"
|
|
@@ -1133,4 +1119,3 @@ Instead of property keys, you can use functions for complex extraction:
|
|
|
1133
1119
|
|
|
1134
1120
|
Core type definitions for vuiii components.
|
|
1135
1121
|
Import these types for TypeScript support in your application.
|
|
1136
|
-
|
package/README.md
CHANGED
|
@@ -24,11 +24,11 @@ npm install vuiii@latest
|
|
|
24
24
|
No global setup is required. Import the stylesheet once in your app entry point and use components directly.
|
|
25
25
|
|
|
26
26
|
```typescript
|
|
27
|
-
import
|
|
27
|
+
import 'vuiii/style.css'
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
```typescript
|
|
31
|
-
import { Button, Input, Select, FormFields } from
|
|
31
|
+
import { Button, Input, Select, FormFields } from 'vuiii'
|
|
32
32
|
```
|
|
33
33
|
|
|
34
34
|
### Custom Icons
|
|
@@ -36,12 +36,12 @@ import { Button, Input, Select, FormFields } from "vuiii";
|
|
|
36
36
|
Register a custom icon resolver to integrate your icon library (Heroicons, FontAwesome, etc.):
|
|
37
37
|
|
|
38
38
|
```typescript
|
|
39
|
-
import { registerCustomIconResolver } from
|
|
40
|
-
import { defineAsyncComponent } from
|
|
39
|
+
import { registerCustomIconResolver } from 'vuiii'
|
|
40
|
+
import { defineAsyncComponent } from 'vue'
|
|
41
41
|
|
|
42
42
|
registerCustomIconResolver((name) => {
|
|
43
|
-
return defineAsyncComponent(() => import(`./icons/${name}.vue`))
|
|
44
|
-
})
|
|
43
|
+
return defineAsyncComponent(() => import(`./icons/${name}.vue`))
|
|
44
|
+
})
|
|
45
45
|
```
|
|
46
46
|
|
|
47
47
|
## Documentation and examples
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/arrow-narrow-down.svg?raw
|
|
2
|
+
var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16 17l-4 4m0 0l-4-4m4 4V3\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/arrow-narrow-left.svg?raw
|
|
2
|
+
var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M7 16l-4-4m0 0l4-4m-4 4h18\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/arrow-narrow-right.svg?raw
|
|
2
|
+
var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17 8l4 4m0 0l-4 4m4-4H3\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/arrow-narrow-up.svg?raw
|
|
2
|
+
var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8 7l4-4m0 0l4 4m-4-4v18\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/arrow-top-right-on-square.svg?raw
|
|
2
|
+
var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/arrow-up-tray.svg?raw
|
|
2
|
+
var e = "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/caret-sort.svg?raw
|
|
2
|
+
var e = "<svg viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z\" fill=\"currentColor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"></path>\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/check.svg?raw
|
|
2
|
+
var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/chevron-down.svg?raw
|
|
2
|
+
var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/chevron-left.svg?raw
|
|
2
|
+
var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/chevron-right.svg?raw
|
|
2
|
+
var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/chevron-up.svg?raw
|
|
2
|
+
var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 15.75l7.5-7.5 7.5 7.5\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -2,7 +2,7 @@ import { RouteLocationRaw } from 'vue-router';
|
|
|
2
2
|
import { ButtonVariant, InputSize } from '../types';
|
|
3
3
|
export type NativeButtonProps = {
|
|
4
4
|
disabled?: boolean;
|
|
5
|
-
type?:
|
|
5
|
+
type?: 'button' | 'submit' | 'reset';
|
|
6
6
|
};
|
|
7
7
|
export type ButtonProps = NativeButtonProps & {
|
|
8
8
|
size?: InputSize;
|
|
@@ -6,7 +6,7 @@ type __VLS_Props = {
|
|
|
6
6
|
optionDisabled?: Extractor;
|
|
7
7
|
optionDescription?: Extractor;
|
|
8
8
|
valueParser?: ValueParser;
|
|
9
|
-
type?:
|
|
9
|
+
type?: 'string' | 'number' | 'boolean' | 'date';
|
|
10
10
|
inline?: boolean;
|
|
11
11
|
};
|
|
12
12
|
type __VLS_PublicProps = {
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
* ]
|
|
32
32
|
*/
|
|
33
33
|
type __VLS_Props = {
|
|
34
|
-
orientation?:
|
|
34
|
+
orientation?: 'horizontal' | 'vertical';
|
|
35
35
|
};
|
|
36
36
|
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
37
37
|
orientation: "horizontal" | "vertical";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ButtonProps } from './Button.vue';
|
|
2
|
-
export type IconButtonProps = Omit<ButtonProps,
|
|
2
|
+
export type IconButtonProps = Omit<ButtonProps, 'prefixIcon' | 'suffixIcon' | 'label' | 'block'> & {
|
|
3
3
|
icon: string;
|
|
4
4
|
title?: string;
|
|
5
5
|
};
|
|
@@ -7,8 +7,8 @@ export type InputWrapperProps = {
|
|
|
7
7
|
pill?: boolean;
|
|
8
8
|
};
|
|
9
9
|
export type InputWrapperEmits = {
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
'prefix-icon-click': [];
|
|
11
|
+
'suffix-icon-click': [];
|
|
12
12
|
};
|
|
13
13
|
export type InputWrapperSlots = {
|
|
14
14
|
default: void;
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
* @slot default - The trigger content that the tooltip wraps
|
|
50
50
|
* @slot title - Custom tooltip title content (alternative to title prop)
|
|
51
51
|
*/
|
|
52
|
-
export type TooltipPlacement =
|
|
52
|
+
export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
|
|
53
53
|
export type TooltipProps = {
|
|
54
54
|
title?: string;
|
|
55
55
|
placement?: TooltipPlacement;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Ref } from 'vue';
|
|
2
2
|
import { Router } from 'vue-router';
|
|
3
|
-
import { MaybePromise } from '../types';
|
|
4
3
|
import { useDialogStack } from '../dialogStack';
|
|
5
4
|
import { useSnackbar } from '../snackbar';
|
|
5
|
+
import { MaybePromise } from '../types';
|
|
6
6
|
/**
|
|
7
7
|
* Wraps a data loading function with loading state, error handling,
|
|
8
8
|
* and optional success/error messages. Built on top of useSubmitAction.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Ref } from 'vue';
|
|
2
|
-
import { PaginatedData, PaginatedDataSource, Pagination } from '../types';
|
|
3
2
|
import { useLoadData } from './useLoadData';
|
|
3
|
+
import { PaginatedData, PaginatedDataSource, Pagination } from '../types';
|
|
4
4
|
/**
|
|
5
5
|
* Extends useLoadData with pagination support for loading data in pages.
|
|
6
6
|
* Provides methods for loading specific pages, next/previous navigation,
|
|
@@ -23,4 +23,4 @@
|
|
|
23
23
|
* // With event listener options
|
|
24
24
|
* useOnKeyPress('Enter', handleSubmit, { capture: true })
|
|
25
25
|
*/
|
|
26
|
-
export declare function useOnKeyPress(key: KeyboardEvent[
|
|
26
|
+
export declare function useOnKeyPress(key: KeyboardEvent['code'], callback: (event: KeyboardEvent) => boolean | void, options?: AddEventListenerOptions): void;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Ref } from 'vue';
|
|
2
2
|
import { RouteLocationRaw, Router } from 'vue-router';
|
|
3
|
-
import { MaybePromise } from '../types';
|
|
4
3
|
import { useDialogStack } from '../dialogStack';
|
|
5
4
|
import { useSnackbar } from '../snackbar';
|
|
5
|
+
import { MaybePromise } from '../types';
|
|
6
6
|
/**
|
|
7
7
|
* Wraps an async action with submission state tracking, error handling,
|
|
8
8
|
* success/error messages, and optional redirect on success.
|
|
@@ -75,7 +75,7 @@ export declare function useValidation<Data extends {} = any, Rules extends Data
|
|
|
75
75
|
isValid: ComputedRef<boolean>;
|
|
76
76
|
isInvalid: ComputedRef<boolean>;
|
|
77
77
|
isValidating: ComputedRef<boolean>;
|
|
78
|
-
errorMessages: ComputedRef<ValidationResults<Rules>[
|
|
79
|
-
validatedFields: ComputedRef<ValidationResults<Rules>[
|
|
78
|
+
errorMessages: ComputedRef<ValidationResults<Rules>['errorMessages']>;
|
|
79
|
+
validatedFields: ComputedRef<ValidationResults<Rules>['validatedFields']>;
|
|
80
80
|
validate: (data: Partial<Data>) => Promise<boolean>;
|
|
81
81
|
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/exclamation.svg?raw
|
|
2
|
+
var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/mail.svg?raw
|
|
2
|
+
var e = "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/minus.svg?raw
|
|
2
|
+
var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 12h-15\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/pencil.svg?raw
|
|
2
|
+
var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/plus.svg?raw
|
|
2
|
+
var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4v16m8-8H4\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/search.svg?raw
|
|
2
|
+
var e = "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
package/dist/snackbar.d.ts
CHANGED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/spinner.svg?raw
|
|
2
|
+
var e = "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 25 25\" xmlns=\"http://www.w3.org/2000/svg\">\n <style>\n .spinner-path {\n will-change: transform;\n animation: vuiii-spin 0.7s infinite linear;\n transform-origin: center;\n }\n @keyframes vuiii-spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n </style>\n <path\n class=\"spinner-path\"\n d=\"M23.5 12.5c0 6.1-4.9 11-11 11s-11-4.9-11-11 4.9-11 11-11\"\n shape-rendering=\"geometricPrecision\"\n style=\"stroke-width: 2; stroke-miterlimit: 10; stroke: currentColor; fill: none\"\n vector-effect=\"non-scaling-stroke\"\n />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region src/assets/icons/trash.svg?raw
|
|
2
|
+
var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" />\n</svg>\n";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
package/dist/types.d.ts
CHANGED
|
@@ -7,11 +7,11 @@ export type MaybePromise<T> = T | Promise<T>;
|
|
|
7
7
|
/** String literal type that also accepts any string */
|
|
8
8
|
export type ConstOrAnyString<T extends string> = T | (string & {});
|
|
9
9
|
/** Size variants for inputs and icons: 'small' | 'normal' | 'large' */
|
|
10
|
-
export type InputSize =
|
|
10
|
+
export type InputSize = 'small' | 'normal' | 'large';
|
|
11
11
|
/** Size variants for icons (same as InputSize) */
|
|
12
12
|
export type IconSize = InputSize;
|
|
13
13
|
/** Button color variants: 'default' | 'primary' | 'secondary' | 'danger' */
|
|
14
|
-
export type ButtonVariant =
|
|
14
|
+
export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'danger';
|
|
15
15
|
/** Configuration for dialog action buttons */
|
|
16
16
|
export type DialogLayoutButton = {
|
|
17
17
|
variant?: ButtonVariant;
|
|
@@ -45,13 +45,13 @@ export type DialogLayoutButton = {
|
|
|
45
45
|
export type TableColumn<T = any> = {
|
|
46
46
|
name: ObjectKeyOrAnyString<T>;
|
|
47
47
|
label?: string;
|
|
48
|
-
align?:
|
|
48
|
+
align?: 'left' | 'right' | 'center';
|
|
49
49
|
width?: string;
|
|
50
50
|
noPadding?: boolean;
|
|
51
51
|
value?: (item: T, index: number) => unknown;
|
|
52
52
|
formatter?: (value: any) => unknown;
|
|
53
53
|
href?: (item: T) => RouteLocationRaw;
|
|
54
|
-
target?: ConstOrAnyString<
|
|
54
|
+
target?: ConstOrAnyString<'_blank'>;
|
|
55
55
|
cellClass?: string | ((cell: {
|
|
56
56
|
item: T;
|
|
57
57
|
value: any;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ValueParser } from '../types';
|
|
2
|
-
export declare function createTypeParser(type?:
|
|
2
|
+
export declare function createTypeParser(type?: 'string' | 'number' | 'boolean' | 'date'): ValueParser;
|