@windwalker-io/unicorn-next 0.1.7 → 0.1.8

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 (125) 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 +23 -2
  23. package/dist/chunks/s3-multipart-uploader.js.map +1 -1
  24. package/dist/chunks/s3-uploader.js.map +1 -1
  25. package/dist/chunks/show-on.js.map +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.map +1 -1
  29. package/dist/chunks/validation.js.map +1 -1
  30. package/dist/index.d.ts +29 -13
  31. package/fusionfile.mjs +155 -155
  32. package/package.json +104 -104
  33. package/scss/bootstrap/multi-level-menu.scss +121 -121
  34. package/scss/editor.scss +116 -116
  35. package/scss/field/file-drag.scss +102 -102
  36. package/scss/field/single-image-drag.scss +88 -88
  37. package/scss/field/vue-drag-uploader.scss +160 -160
  38. package/scss/switcher.scss +156 -156
  39. package/src/app.ts +128 -128
  40. package/src/bootstrap/button-radio.ts +208 -208
  41. package/src/bootstrap/keep-tab.ts +155 -155
  42. package/src/composable/index.ts +22 -22
  43. package/src/composable/useCheckboxesMultiSelect.ts +22 -22
  44. package/src/composable/useFieldCascadeSelect.ts +9 -9
  45. package/src/composable/useFieldFileDrag.ts +9 -9
  46. package/src/composable/useFieldFlatpickr.ts +3 -3
  47. package/src/composable/useFieldModalSelect.ts +6 -6
  48. package/src/composable/useFieldModalTree.ts +3 -3
  49. package/src/composable/useFieldMultiUploader.ts +9 -9
  50. package/src/composable/useFieldRepeatable.ts +9 -9
  51. package/src/composable/useFieldSingleImageDrag.ts +9 -9
  52. package/src/composable/useForm.ts +43 -43
  53. package/src/composable/useGrid.ts +57 -57
  54. package/src/composable/useHttp.ts +9 -9
  55. package/src/composable/useIframeModal.ts +10 -10
  56. package/src/composable/useListDependent.ts +26 -26
  57. package/src/composable/useQueue.ts +13 -13
  58. package/src/composable/useS3Uploader.ts +32 -32
  59. package/src/composable/useShowOn.ts +9 -9
  60. package/src/composable/useStack.ts +13 -13
  61. package/src/composable/useTinymce.ts +29 -29
  62. package/src/composable/useTomSelect.ts +72 -72
  63. package/src/composable/useUIBootstrap5.ts +48 -48
  64. package/src/composable/useUniDirective.ts +43 -43
  65. package/src/composable/useValidation.ts +50 -50
  66. package/src/data.ts +34 -34
  67. package/src/events.ts +82 -82
  68. package/src/legacy/legacy.ts +190 -190
  69. package/src/legacy/loader.ts +125 -125
  70. package/src/module/checkboxes-multi-select.ts +54 -54
  71. package/src/module/field-cascade-select.ts +292 -292
  72. package/src/module/field-file-drag.ts +295 -295
  73. package/src/module/field-flatpickr.ts +130 -130
  74. package/src/module/field-modal-select.ts +179 -179
  75. package/src/module/field-modal-tree.ts +31 -31
  76. package/src/module/field-multi-uploader.ts +368 -368
  77. package/src/module/field-repeatable.ts +202 -202
  78. package/src/module/field-single-image-drag.ts +477 -477
  79. package/src/module/form.ts +223 -223
  80. package/src/module/grid.ts +479 -479
  81. package/src/module/http-client.ts +248 -248
  82. package/src/module/iframe-modal.ts +170 -170
  83. package/src/module/list-dependent.ts +321 -321
  84. package/src/module/s3-multipart-uploader.ts +330 -300
  85. package/src/module/s3-uploader.ts +234 -234
  86. package/src/module/show-on.ts +175 -175
  87. package/src/module/tinymce.ts +276 -276
  88. package/src/module/ui-bootstrap5.ts +116 -116
  89. package/src/module/validation.ts +1046 -1046
  90. package/src/plugin/index.ts +1 -1
  91. package/src/plugin/php-adapter.ts +72 -72
  92. package/src/polyfill/form-request-submit.ts +31 -31
  93. package/src/polyfill/index.ts +9 -9
  94. package/src/service/animate.ts +58 -58
  95. package/src/service/crypto.ts +27 -27
  96. package/src/service/dom-watcher.ts +62 -62
  97. package/src/service/dom.ts +265 -265
  98. package/src/service/helper.ts +48 -48
  99. package/src/service/index.ts +10 -10
  100. package/src/service/lang.ts +122 -122
  101. package/src/service/loader.ts +152 -152
  102. package/src/service/router.ts +118 -118
  103. package/src/service/ui.ts +525 -525
  104. package/src/service/uri.ts +106 -106
  105. package/src/types/base.ts +9 -9
  106. package/src/types/index.ts +4 -4
  107. package/src/types/modal-tree.ts +12 -12
  108. package/src/types/plugin.ts +6 -6
  109. package/src/types/shims.d.ts +18 -18
  110. package/src/types/ui.ts +6 -6
  111. package/src/unicorn.ts +79 -79
  112. package/src/utilities/arr.ts +25 -25
  113. package/src/utilities/base.ts +9 -9
  114. package/src/utilities/data.ts +48 -48
  115. package/src/utilities/index.ts +5 -5
  116. package/src/utilities/tree.ts +20 -20
  117. package/src/vue/components/ModalTree/ModalTreeApp.vue +175 -175
  118. package/src/vue/components/ModalTree/TreeItem.vue +262 -262
  119. package/src/vue/components/ModalTree/TreeModal.vue +225 -225
  120. package/tests/test.js +4 -4
  121. package/tsconfig.js.json +25 -25
  122. package/tsconfig.json +17 -17
  123. package/vite.assets.config.ts +61 -61
  124. package/vite.config.test.ts +36 -36
  125. 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
+ };