@windwalker-io/unicorn-next 0.1.7 → 0.1.9

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