@windwalker-io/unicorn-next 0.1.5 → 0.1.6

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.
Files changed (128) hide show
  1. package/.editorconfig +18 -18
  2. package/.gulp.json +7 -7
  3. package/bin/release.mjs +47 -47
  4. package/dist/chunks/button-radio.js.map +1 -1
  5. package/dist/chunks/checkboxes-multi-select.js.map +1 -1
  6. package/dist/chunks/field-cascade-select.js.map +1 -1
  7. package/dist/chunks/field-file-drag.js.map +1 -1
  8. package/dist/chunks/field-flatpickr.js.map +1 -1
  9. package/dist/chunks/field-modal-select.js.map +1 -1
  10. package/dist/chunks/field-modal-tree.js +2 -2
  11. package/dist/chunks/field-modal-tree.js.map +1 -1
  12. package/dist/chunks/field-multi-uploader.js.map +1 -1
  13. package/dist/chunks/field-repeatable.js.map +1 -1
  14. package/dist/chunks/field-single-image-drag.js.map +1 -1
  15. package/dist/chunks/form.js.map +1 -1
  16. package/dist/chunks/grid.js.map +1 -1
  17. package/dist/chunks/http-client.js.map +1 -1
  18. package/dist/chunks/iframe-modal.js.map +1 -1
  19. package/dist/chunks/keep-tab.js.map +1 -1
  20. package/dist/chunks/legacy.js.map +1 -1
  21. package/dist/chunks/list-dependent.js.map +1 -1
  22. package/dist/chunks/s3-multipart-uploader.js.map +1 -1
  23. package/dist/chunks/s3-uploader.js.map +1 -1
  24. package/dist/chunks/show-on.js.map +1 -1
  25. package/dist/chunks/tinymce.js +1 -1
  26. package/dist/chunks/tinymce.js.map +1 -1
  27. package/dist/chunks/ui-bootstrap5.js.map +1 -1
  28. package/dist/chunks/unicorn.js +20 -14
  29. package/dist/chunks/unicorn.js.map +1 -1
  30. package/dist/chunks/validation.js +1 -1
  31. package/dist/chunks/validation.js.map +1 -1
  32. package/dist/index.d.ts +16 -14
  33. package/dist/unicorn.js +10 -8
  34. package/fusionfile.mjs +155 -155
  35. package/package.json +103 -103
  36. package/scss/bootstrap/multi-level-menu.scss +121 -121
  37. package/scss/editor.scss +116 -116
  38. package/scss/field/file-drag.scss +102 -102
  39. package/scss/field/single-image-drag.scss +88 -88
  40. package/scss/field/vue-drag-uploader.scss +160 -160
  41. package/scss/switcher.scss +156 -156
  42. package/src/app.ts +128 -128
  43. package/src/bootstrap/button-radio.ts +208 -208
  44. package/src/bootstrap/keep-tab.ts +155 -155
  45. package/src/composable/index.ts +22 -21
  46. package/src/composable/useCheckboxesMultiSelect.ts +22 -22
  47. package/src/composable/useFieldCascadeSelect.ts +9 -9
  48. package/src/composable/useFieldFileDrag.ts +9 -9
  49. package/src/composable/useFieldFlatpickr.ts +3 -3
  50. package/src/composable/useFieldModalSelect.ts +6 -6
  51. package/src/composable/useFieldModalTree.ts +3 -3
  52. package/src/composable/useFieldMultiUploader.ts +9 -9
  53. package/src/composable/useFieldRepeatable.ts +9 -9
  54. package/src/composable/useFieldSingleImageDrag.ts +9 -9
  55. package/src/composable/useForm.ts +43 -43
  56. package/src/composable/useGrid.ts +57 -57
  57. package/src/composable/useHttp.ts +9 -9
  58. package/src/composable/useIframeModal.ts +10 -10
  59. package/src/composable/useListDependent.ts +26 -26
  60. package/src/composable/useQueue.ts +13 -13
  61. package/src/composable/useS3Uploader.ts +32 -32
  62. package/src/composable/useShowOn.ts +9 -9
  63. package/src/composable/useStack.ts +13 -13
  64. package/src/composable/useTinymce.ts +29 -29
  65. package/src/composable/useTomSelect.ts +72 -72
  66. package/src/composable/useUIBootstrap5.ts +48 -48
  67. package/src/composable/useUniDirective.ts +32 -32
  68. package/src/composable/useValidation.ts +50 -50
  69. package/src/data.ts +34 -34
  70. package/src/events.ts +82 -82
  71. package/src/legacy/legacy.ts +190 -190
  72. package/src/legacy/loader.ts +125 -125
  73. package/src/module/checkboxes-multi-select.ts +54 -54
  74. package/src/module/field-cascade-select.ts +292 -292
  75. package/src/module/field-file-drag.ts +295 -295
  76. package/src/module/field-flatpickr.ts +130 -130
  77. package/src/module/field-modal-select.ts +179 -179
  78. package/src/module/field-modal-tree.ts +31 -31
  79. package/src/module/field-multi-uploader.ts +368 -368
  80. package/src/module/field-repeatable.ts +202 -202
  81. package/src/module/field-single-image-drag.ts +475 -475
  82. package/src/module/form.ts +223 -223
  83. package/src/module/grid.ts +465 -465
  84. package/src/module/http-client.ts +248 -248
  85. package/src/module/iframe-modal.ts +170 -170
  86. package/src/module/list-dependent.ts +321 -321
  87. package/src/module/s3-multipart-uploader.ts +300 -300
  88. package/src/module/s3-uploader.ts +234 -234
  89. package/src/module/show-on.ts +175 -175
  90. package/src/module/tinymce.ts +276 -276
  91. package/src/module/ui-bootstrap5.ts +116 -116
  92. package/src/module/validation.ts +1046 -1046
  93. package/src/plugin/index.ts +1 -1
  94. package/src/plugin/php-adapter.ts +72 -72
  95. package/src/polyfill/form-request-submit.ts +31 -31
  96. package/src/polyfill/index.ts +9 -9
  97. package/src/service/animate.ts +58 -58
  98. package/src/service/crypto.ts +27 -27
  99. package/src/service/dom-watcher.ts +62 -62
  100. package/src/service/dom.ts +265 -265
  101. package/src/service/helper.ts +48 -48
  102. package/src/service/index.ts +10 -10
  103. package/src/service/lang.ts +122 -122
  104. package/src/service/loader.ts +152 -152
  105. package/src/service/router.ts +118 -118
  106. package/src/service/ui.ts +525 -525
  107. package/src/service/uri.ts +106 -106
  108. package/src/types/base.ts +9 -9
  109. package/src/types/index.ts +4 -4
  110. package/src/types/modal-tree.ts +12 -12
  111. package/src/types/plugin.ts +6 -6
  112. package/src/types/shims.d.ts +18 -18
  113. package/src/types/ui.ts +6 -6
  114. package/src/unicorn.ts +79 -79
  115. package/src/utilities/arr.ts +25 -25
  116. package/src/utilities/base.ts +9 -9
  117. package/src/utilities/data.ts +48 -48
  118. package/src/utilities/index.ts +5 -5
  119. package/src/utilities/tree.ts +20 -20
  120. package/src/vue/components/ModalTree/ModalTreeApp.vue +175 -175
  121. package/src/vue/components/ModalTree/TreeItem.vue +262 -262
  122. package/src/vue/components/ModalTree/TreeModal.vue +225 -225
  123. package/tests/test.js +4 -4
  124. package/tsconfig.js.json +25 -25
  125. package/tsconfig.json +17 -17
  126. package/vite.assets.config.ts +61 -61
  127. package/vite.config.test.ts +36 -36
  128. package/vite.config.ts +112 -112
@@ -1,57 +1,57 @@
1
- import type { UnicornGridElement } from '../module/grid';
2
- import { useForm, useFormAsync } from './useForm';
3
- import { selectOne, module } from '../service';
4
-
5
- let gridElement: typeof UnicornGridElement;
6
-
7
- export async function useGridAsync(
8
- ele?: string | HTMLElement,
9
- options: Record<string, any> | undefined = {}
10
- ): Promise<UnicornGridElement | null> {
11
- await useFormAsync();
12
-
13
- const { UnicornGridElement } = await import('../module/grid');
14
-
15
- gridElement ??= UnicornGridElement;
16
-
17
- if (!ele) {
18
- return null;
19
- }
20
-
21
- return useGrid(ele, options);
22
- }
23
-
24
- export function useGrid(
25
- ele: string | HTMLElement,
26
- options: Record<string, any> | undefined = {}
27
- ): UnicornGridElement | null {
28
- const selector = typeof ele === 'string' ? ele : '';
29
- const element = selectOne(ele);
30
-
31
- if (!element) {
32
- throw new Error('Element is empty');
33
- }
34
-
35
- const form = useForm(selector || element);
36
-
37
- if (!form) {
38
- throw new Error('UnicornGrid is depends on UnicornForm');
39
- }
40
-
41
- return module(
42
- element,
43
- 'grid.plugin',
44
- () => new gridElement(selector, element, form, options)
45
- );
46
- }
47
-
48
- export async function useGridComponent(
49
- ele: string | HTMLElement,
50
- options: Record<string, any> | undefined = {}
51
- ): Promise<UnicornGridElement | null> {
52
- const grid = await useGridAsync(ele, options);
53
-
54
- await grid?.initComponent();
55
-
56
- return grid;
57
- }
1
+ import type { UnicornGridElement } from '../module/grid';
2
+ import { useForm, useFormAsync } from './useForm';
3
+ import { selectOne, module } from '../service';
4
+
5
+ let gridElement: typeof UnicornGridElement;
6
+
7
+ export async function useGridAsync(
8
+ ele?: string | HTMLElement,
9
+ options: Record<string, any> | undefined = {}
10
+ ): Promise<UnicornGridElement | null> {
11
+ await useFormAsync();
12
+
13
+ const { UnicornGridElement } = await import('../module/grid');
14
+
15
+ gridElement ??= UnicornGridElement;
16
+
17
+ if (!ele) {
18
+ return null;
19
+ }
20
+
21
+ return useGrid(ele, options);
22
+ }
23
+
24
+ export function useGrid(
25
+ ele: string | HTMLElement,
26
+ options: Record<string, any> | undefined = {}
27
+ ): UnicornGridElement | null {
28
+ const selector = typeof ele === 'string' ? ele : '';
29
+ const element = selectOne(ele);
30
+
31
+ if (!element) {
32
+ throw new Error('Element is empty');
33
+ }
34
+
35
+ const form = useForm(selector || element);
36
+
37
+ if (!form) {
38
+ throw new Error('UnicornGrid is depends on UnicornForm');
39
+ }
40
+
41
+ return module(
42
+ element,
43
+ 'grid.plugin',
44
+ () => new gridElement(selector, element, form, options)
45
+ );
46
+ }
47
+
48
+ export async function useGridComponent(
49
+ ele: string | HTMLElement,
50
+ options: Record<string, any> | undefined = {}
51
+ ): Promise<UnicornGridElement | null> {
52
+ const grid = await useGridAsync(ele, options);
53
+
54
+ await grid?.initComponent();
55
+
56
+ return grid;
57
+ }
@@ -1,9 +1,9 @@
1
- import type { UnicornHttpClient } from '../module/http-client';
2
- import type { AxiosInstance, CreateAxiosDefaults } from 'axios';
3
- export type { ApiReturn, UnicornHttpClient } from '../module/http-client';
4
-
5
- export async function useHttpClient(config?: CreateAxiosDefaults | AxiosInstance): Promise<UnicornHttpClient> {
6
- const { createHttpClient } = await import('../module/http-client');
7
-
8
- return createHttpClient(config as CreateAxiosDefaults | undefined);
9
- }
1
+ import type { UnicornHttpClient } from '../module/http-client';
2
+ import type { AxiosInstance, CreateAxiosDefaults } from 'axios';
3
+ export type { ApiReturn, UnicornHttpClient } from '../module/http-client';
4
+
5
+ export async function useHttpClient(config?: CreateAxiosDefaults | AxiosInstance): Promise<UnicornHttpClient> {
6
+ const { createHttpClient } = await import('../module/http-client');
7
+
8
+ return createHttpClient(config as CreateAxiosDefaults | undefined);
9
+ }
@@ -1,10 +1,10 @@
1
- import { IFrameModalModule } from '../module/iframe-modal';
2
- export type { IFrameModalElement } from '../module/iframe-modal';
3
-
4
- export async function useIframeModal(): Promise<IFrameModalModule> {
5
- const module = await import('../module/iframe-modal');
6
-
7
- await module.ready;
8
-
9
- return module;
10
- }
1
+ import { IFrameModalModule } from '../module/iframe-modal';
2
+ export type { IFrameModalElement } from '../module/iframe-modal';
3
+
4
+ export async function useIframeModal(): Promise<IFrameModalModule> {
5
+ const module = await import('../module/iframe-modal');
6
+
7
+ await module.ready;
8
+
9
+ return module;
10
+ }
@@ -1,26 +1,26 @@
1
- import type { ListDependent, ListDependentModule, ListDependentOptions } from '../module/list-dependent';
2
- import { Nullable } from '../types';
3
-
4
- export async function useListDependent(): Promise<ListDependentModule>;
5
- export async function useListDependent(
6
- element: string | HTMLSelectElement,
7
- dependent?: Nullable<string | HTMLSelectElement>,
8
- options?: Partial<ListDependentOptions>
9
- ): Promise<ListDependent>;
10
- export async function useListDependent(
11
- element?: Nullable<string | HTMLSelectElement>,
12
- dependent?: Nullable<string | HTMLSelectElement>,
13
- options: Partial<ListDependentOptions> = {}
14
- ): Promise<any> {
15
- const module = await import('../module/list-dependent');
16
-
17
- await module.ready;
18
-
19
- if (element) {
20
- const { ListDependent } = module;
21
-
22
- return ListDependent.handle(element, dependent ?? undefined, options);
23
- }
24
-
25
- return module;
26
- }
1
+ import type { ListDependent, ListDependentModule, ListDependentOptions } from '../module/list-dependent';
2
+ import { Nullable } from '../types';
3
+
4
+ export async function useListDependent(): Promise<ListDependentModule>;
5
+ export async function useListDependent(
6
+ element: string | HTMLSelectElement,
7
+ dependent?: Nullable<string | HTMLSelectElement>,
8
+ options?: Partial<ListDependentOptions>
9
+ ): Promise<ListDependent>;
10
+ export async function useListDependent(
11
+ element?: Nullable<string | HTMLSelectElement>,
12
+ dependent?: Nullable<string | HTMLSelectElement>,
13
+ options: Partial<ListDependentOptions> = {}
14
+ ): Promise<any> {
15
+ const module = await import('../module/list-dependent');
16
+
17
+ await module.ready;
18
+
19
+ if (element) {
20
+ const { ListDependent } = module;
21
+
22
+ return ListDependent.handle(element, dependent ?? undefined, options);
23
+ }
24
+
25
+ return module;
26
+ }
@@ -1,13 +1,13 @@
1
- import { Dictionary } from '../types';
2
- import { TaskQueue, queue } from '@lyrasoft/ts-toolkit/generic';
3
-
4
- const queues: Dictionary<TaskQueue> = {};
5
-
6
- export function useQueue(name: string = 'default', maxRunning = 1): TaskQueue {
7
- return queues[name] ??= createQueue(maxRunning);
8
- }
9
-
10
- export function createQueue(maxRunning = 1): TaskQueue {
11
- return queue(maxRunning);
12
- }
13
-
1
+ import { Dictionary } from '../types';
2
+ import { TaskQueue, queue } from '@lyrasoft/ts-toolkit/generic';
3
+
4
+ const queues: Dictionary<TaskQueue> = {};
5
+
6
+ export function useQueue(name: string = 'default', maxRunning = 1): TaskQueue {
7
+ return queues[name] ??= createQueue(maxRunning);
8
+ }
9
+
10
+ export function createQueue(maxRunning = 1): TaskQueue {
11
+ return queue(maxRunning);
12
+ }
13
+
@@ -1,32 +1,32 @@
1
- import {
2
- S3MultipartUploader,
3
- S3MultipartUploaderModule,
4
- S3MultipartUploaderOptions
5
- } from '../module/s3-multipart-uploader';
6
- import type { S3Uploader, S3UploaderGlobalOptions, S3UploaderModule } from '../module/s3-uploader';
7
-
8
- export async function useS3Uploader(): Promise<S3UploaderModule>;
9
- export async function useS3Uploader(name: string, options?: Partial<S3UploaderGlobalOptions>): Promise<S3Uploader>;
10
- export async function useS3Uploader(name?: string, options: Partial<S3UploaderGlobalOptions> = {}): Promise<any> {
11
- const module = await import('../module/s3-uploader');
12
-
13
- if (!name) {
14
- return module;
15
- }
16
-
17
- const { get } = module;
18
-
19
- return get(name, options);
20
- }
21
-
22
- export async function useS3MultipartUploader(): Promise<S3MultipartUploaderModule>;
23
- export async function useS3MultipartUploader(options: Partial<S3MultipartUploaderOptions>): Promise<S3MultipartUploader>;
24
- export async function useS3MultipartUploader(options?: Partial<S3MultipartUploaderOptions>): Promise<any> {
25
- const module = await import('../module/s3-multipart-uploader');
26
-
27
- if (options != null) {
28
- return new module.S3MultipartUploader(options);
29
- }
30
-
31
- return module;
32
- }
1
+ import {
2
+ S3MultipartUploader,
3
+ S3MultipartUploaderModule,
4
+ S3MultipartUploaderOptions
5
+ } from '../module/s3-multipart-uploader';
6
+ import type { S3Uploader, S3UploaderGlobalOptions, S3UploaderModule } from '../module/s3-uploader';
7
+
8
+ export async function useS3Uploader(): Promise<S3UploaderModule>;
9
+ export async function useS3Uploader(name: string, options?: Partial<S3UploaderGlobalOptions>): Promise<S3Uploader>;
10
+ export async function useS3Uploader(name?: string, options: Partial<S3UploaderGlobalOptions> = {}): Promise<any> {
11
+ const module = await import('../module/s3-uploader');
12
+
13
+ if (!name) {
14
+ return module;
15
+ }
16
+
17
+ const { get } = module;
18
+
19
+ return get(name, options);
20
+ }
21
+
22
+ export async function useS3MultipartUploader(): Promise<S3MultipartUploaderModule>;
23
+ export async function useS3MultipartUploader(options: Partial<S3MultipartUploaderOptions>): Promise<S3MultipartUploader>;
24
+ export async function useS3MultipartUploader(options?: Partial<S3MultipartUploaderOptions>): Promise<any> {
25
+ const module = await import('../module/s3-multipart-uploader');
26
+
27
+ if (options != null) {
28
+ return new module.S3MultipartUploader(options);
29
+ }
30
+
31
+ return module;
32
+ }
@@ -1,9 +1,9 @@
1
- import { ShowOnModule } from '../module/show-on';
2
-
3
- export async function useShowOn(): Promise<ShowOnModule> {
4
- const module = await import('../module/show-on');
5
-
6
- await module.ready;
7
-
8
- return module;
9
- }
1
+ import { ShowOnModule } from '../module/show-on';
2
+
3
+ export async function useShowOn(): Promise<ShowOnModule> {
4
+ const module = await import('../module/show-on');
5
+
6
+ await module.ready;
7
+
8
+ return module;
9
+ }
@@ -1,13 +1,13 @@
1
-
2
- import { Dictionary } from '../types';
3
- import { Stack, stack } from '@lyrasoft/ts-toolkit/generic';
4
-
5
- const stacks: Dictionary<Stack> = {};
6
-
7
- export function useStack<T = any>(name: string = 'default', store: any[] = []): Stack<T> {
8
- return stacks[name] ??= createStack<T>(store);
9
- }
10
-
11
- export function createStack<T = any>(store: any[] = []): Stack<T> {
12
- return stack<T>(store);
13
- }
1
+
2
+ import { Dictionary } from '../types';
3
+ import { Stack, stack } from '@lyrasoft/ts-toolkit/generic';
4
+
5
+ const stacks: Dictionary<Stack> = {};
6
+
7
+ export function useStack<T = any>(name: string = 'default', store: any[] = []): Stack<T> {
8
+ return stacks[name] ??= createStack<T>(store);
9
+ }
10
+
11
+ export function createStack<T = any>(store: any[] = []): Stack<T> {
12
+ return stack<T>(store);
13
+ }
@@ -1,29 +1,29 @@
1
- import type { TinymceController, TinymceModule } from '../module/tinymce';
2
- import type { MaybePromise } from '../types';
3
- import type { TinyMCE } from 'tinymce';
4
-
5
- export async function useTinymce(): Promise<TinymceModule>
6
- export async function useTinymce(
7
- selector?: string,
8
- options?: Record<string, any>
9
- ): Promise<TinymceController>;
10
- export async function useTinymce(
11
- selector?: string,
12
- options: Record<string, any> = {}
13
- ): Promise<any> {
14
- const module = await import('../module/tinymce');
15
-
16
- if (selector) {
17
- return module.get(selector, options);
18
- }
19
-
20
- return module;
21
- }
22
-
23
- export async function useTinymceHook(
24
- handler: ((tinymce: TinyMCE) => MaybePromise<any>)
25
- ): Promise<void> {
26
- const { addHook } = await import('../module/tinymce');
27
-
28
- return addHook(handler);
29
- }
1
+ import type { TinymceController, TinymceModule } from '../module/tinymce';
2
+ import type { MaybePromise } from '../types';
3
+ import type { TinyMCE } from 'tinymce';
4
+
5
+ export async function useTinymce(): Promise<TinymceModule>
6
+ export async function useTinymce(
7
+ selector?: string,
8
+ options?: Record<string, any>
9
+ ): Promise<TinymceController>;
10
+ export async function useTinymce(
11
+ selector?: string,
12
+ options: Record<string, any> = {}
13
+ ): Promise<any> {
14
+ const module = await import('../module/tinymce');
15
+
16
+ if (selector) {
17
+ return module.get(selector, options);
18
+ }
19
+
20
+ return module;
21
+ }
22
+
23
+ export async function useTinymceHook(
24
+ handler: ((tinymce: TinyMCE) => MaybePromise<any>)
25
+ ): Promise<void> {
26
+ const { addHook } = await import('../module/tinymce');
27
+
28
+ return addHook(handler);
29
+ }
@@ -1,72 +1,72 @@
1
- import { module, useCssImport, useCssIncludes, useImport, wait } from '../service';
2
- import type { Nullable } from '../types';
3
- import { mergeDeep } from '../utilities';
4
-
5
- /**
6
- * @see https://tom-select.js.org/
7
- */
8
- export async function useTomSelect(
9
- selector?: Nullable<string | HTMLElement | NodeListOf<HTMLElement>>,
10
- options: Record<string, any> = {},
11
- theme: string = 'bootstrap5'
12
- ) {
13
- const [m] = await wait(
14
- useImport('@vendor/tom-select/dist/js/tom-select.complete.min.js'),
15
- useCssImport(`@vendor/tom-select/dist/css/tom-select.${theme}.min.css`)
16
- );
17
-
18
- if (selector) {
19
- module<any, HTMLSelectElement>(
20
- selector,
21
- 'tom.select',
22
- (ele) => {
23
- options = mergeDeep({
24
- allowEmptyOption: true,
25
- maxOptions: null,
26
- plugins: {
27
- caret_position: {},
28
- clear_button: {},
29
- }
30
- }, options);
31
-
32
- if ((ele as HTMLSelectElement).multiple) {
33
- options.plugins.remove_button = {};
34
- } else {
35
- options.plugins.dropdown_input = {};
36
- }
37
-
38
- // Auto select first if options changed.
39
- // @see https://github.com/orchidjs/tom-select/issues/362
40
- class UnicornTomSelect extends TomSelect {
41
- syncOptionsWithoutKeepSelected() {
42
- const oldValue = ele.value;
43
-
44
- this.clear();
45
- this.clearOptions();
46
- this.sync();
47
-
48
- if (ele.value !== oldValue) {
49
- this.setValue(
50
- ele.querySelector<HTMLOptionElement>(`option[value="${oldValue}"]`)?.value
51
- ?? ele.querySelector<HTMLOptionElement>('option')?.value
52
- ?? '',
53
- true
54
- );
55
- }
56
- }
57
- }
58
-
59
- // @ts-ignore
60
- const t = new UnicornTomSelect(ele as TomInput, options);
61
-
62
- ele.addEventListener('list:updated', () => {
63
- t.syncOptionsWithoutKeepSelected();
64
- });
65
-
66
- return t;
67
- }
68
- );
69
- }
70
-
71
- return m;
72
- }
1
+ import { module, useCssImport, useCssIncludes, useImport, wait } from '../service';
2
+ import type { Nullable } from '../types';
3
+ import { mergeDeep } from '../utilities';
4
+
5
+ /**
6
+ * @see https://tom-select.js.org/
7
+ */
8
+ export async function useTomSelect(
9
+ selector?: Nullable<string | HTMLElement | NodeListOf<HTMLElement>>,
10
+ options: Record<string, any> = {},
11
+ theme: string = 'bootstrap5'
12
+ ) {
13
+ const [m] = await wait(
14
+ useImport('@vendor/tom-select/dist/js/tom-select.complete.min.js'),
15
+ useCssImport(`@vendor/tom-select/dist/css/tom-select.${theme}.min.css`)
16
+ );
17
+
18
+ if (selector) {
19
+ module<any, HTMLSelectElement>(
20
+ selector,
21
+ 'tom.select',
22
+ (ele) => {
23
+ options = mergeDeep({
24
+ allowEmptyOption: true,
25
+ maxOptions: null,
26
+ plugins: {
27
+ caret_position: {},
28
+ clear_button: {},
29
+ }
30
+ }, options);
31
+
32
+ if ((ele as HTMLSelectElement).multiple) {
33
+ options.plugins.remove_button = {};
34
+ } else {
35
+ options.plugins.dropdown_input = {};
36
+ }
37
+
38
+ // Auto select first if options changed.
39
+ // @see https://github.com/orchidjs/tom-select/issues/362
40
+ class UnicornTomSelect extends TomSelect {
41
+ syncOptionsWithoutKeepSelected() {
42
+ const oldValue = ele.value;
43
+
44
+ this.clear();
45
+ this.clearOptions();
46
+ this.sync();
47
+
48
+ if (ele.value !== oldValue) {
49
+ this.setValue(
50
+ ele.querySelector<HTMLOptionElement>(`option[value="${oldValue}"]`)?.value
51
+ ?? ele.querySelector<HTMLOptionElement>('option')?.value
52
+ ?? '',
53
+ true
54
+ );
55
+ }
56
+ }
57
+ }
58
+
59
+ // @ts-ignore
60
+ const t = new UnicornTomSelect(ele as TomInput, options);
61
+
62
+ ele.addEventListener('list:updated', () => {
63
+ t.syncOptionsWithoutKeepSelected();
64
+ });
65
+
66
+ return t;
67
+ }
68
+ );
69
+ }
70
+
71
+ return m;
72
+ }
@@ -1,48 +1,48 @@
1
- import type { Tooltip } from 'bootstrap';
2
- import { ButtonRadioOptions } from '../bootstrap/button-radio';
3
- import type { KeepTabOptions } from '../bootstrap/keep-tab';
4
- import type { UIBootstrap5 } from '../module/ui-bootstrap5';
5
- import { useUITheme } from '../service';
6
-
7
- export async function useUIBootstrap5(install = false, pushToGlobal = false): Promise<UIBootstrap5> {
8
- const { UIBootstrap5 } = await import('../module/ui-bootstrap5');
9
-
10
- const theme = UIBootstrap5.get();
11
-
12
- if (install) {
13
- useUITheme(theme);
14
-
15
- if (pushToGlobal) {
16
- theme.pushBootstrapToGlobal();
17
- }
18
- }
19
-
20
- return theme;
21
- }
22
-
23
- export async function useBs5Tooltip(
24
- selector: NodeListOf<Element> | Element | string = '[data-bs-toggle="tooltip"]',
25
- config: Partial<Tooltip.Options> = {}
26
- ): Promise<Tooltip[]> {
27
- const bs5 = await useUIBootstrap5();
28
-
29
- return bs5.tooltip(selector, config);
30
- }
31
-
32
- export const useBs5KeepTab: typeof UIBootstrap5.prototype.keepTab = async (
33
- selector?: string | HTMLElement,
34
- options: KeepTabOptions = {}
35
- ): Promise<any> => {
36
- const bs5 = await useUIBootstrap5();
37
-
38
- return bs5.keepTab(selector, options);
39
- };
40
-
41
- export const useBs5ButtonRadio: typeof UIBootstrap5.prototype.buttonRadio = async (
42
- selector?: string | HTMLElement,
43
- options: ButtonRadioOptions = {}
44
- ): Promise<any> => {
45
- const bs5 = await useUIBootstrap5();
46
-
47
- return bs5.buttonRadio(selector, options);
48
- };
1
+ import type { Tooltip } from 'bootstrap';
2
+ import { ButtonRadioOptions } from '../bootstrap/button-radio';
3
+ import type { KeepTabOptions } from '../bootstrap/keep-tab';
4
+ import type { UIBootstrap5 } from '../module/ui-bootstrap5';
5
+ import { useUITheme } from '../service';
6
+
7
+ export async function useUIBootstrap5(install = false, pushToGlobal = false): Promise<UIBootstrap5> {
8
+ const { UIBootstrap5 } = await import('../module/ui-bootstrap5');
9
+
10
+ const theme = UIBootstrap5.get();
11
+
12
+ if (install) {
13
+ useUITheme(theme);
14
+
15
+ if (pushToGlobal) {
16
+ theme.pushBootstrapToGlobal();
17
+ }
18
+ }
19
+
20
+ return theme;
21
+ }
22
+
23
+ export async function useBs5Tooltip(
24
+ selector: NodeListOf<Element> | Element | string = '[data-bs-toggle="tooltip"]',
25
+ config: Partial<Tooltip.Options> = {}
26
+ ): Promise<Tooltip[]> {
27
+ const bs5 = await useUIBootstrap5();
28
+
29
+ return bs5.tooltip(selector, config);
30
+ }
31
+
32
+ export const useBs5KeepTab: typeof UIBootstrap5.prototype.keepTab = async (
33
+ selector?: string | HTMLElement,
34
+ options: KeepTabOptions = {}
35
+ ): Promise<any> => {
36
+ const bs5 = await useUIBootstrap5();
37
+
38
+ return bs5.keepTab(selector, options);
39
+ };
40
+
41
+ export const useBs5ButtonRadio: typeof UIBootstrap5.prototype.buttonRadio = async (
42
+ selector?: string | HTMLElement,
43
+ options: ButtonRadioOptions = {}
44
+ ): Promise<any> => {
45
+ const bs5 = await useUIBootstrap5();
46
+
47
+ return bs5.buttonRadio(selector, options);
48
+ };