@windwalker-io/unicorn-next 0.1.0 → 0.1.1

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