@windwalker-io/unicorn-next 0.1.1 → 0.1.2

package/src/composable/useIframeModal.ts

@@ -1,6 +1,7 @@
-import { IframeModalModule } from '../module/iframe-modal';
+import { IFrameModalModule } from '../module/iframe-modal';
+export type { IFrameModalElement } from '../module/iframe-modal';
 
-export async function useIframeModal(): Promise<IframeModalModule> {
+export async function useIframeModal(): Promise<IFrameModalModule> {
   const module = await import('../module/iframe-modal');
 
   await module.ready;

package/src/composable/useValidation.ts

@@ -17,10 +17,10 @@ export async function useFormValidation(selector?: string | Element): Promise<an
     return module;
   }
 
-  return useFormValidationSync(selector);
+  return useFormValidationInstance(selector);
 }
 
-export function useFormValidationSync(selector: string | Element): UnicornFormValidation | null {
+export function useFormValidationInstance(selector: string | Element): UnicornFormValidation | null {
   return getBoundedInstance<UnicornFormValidation>(selector, 'form.validation');
 }
 

package/src/legacy/legacy.ts

@@ -2,13 +2,15 @@ import { numberFormat } from '@lyrasoft/ts-toolkit/generic';
 import { sprintf, vsprintf } from 'sprintf-js';
 import {
   addGlobalValidator,
+  useBs5ButtonRadio,
+  useBs5KeepTab,
   useBs5Tooltip,
   useCheckboxesMultiSelect,
   useFieldValidationSync,
   useForm,
   useFormAsync,
   useFormValidation,
-  useFormValidationSync,
+  useFormValidationInstance,
   useGrid,
   useGridAsync,
   useHttpClient,
@@ -39,7 +41,6 @@ import {
   loadAlpine,
   mark,
   module,
-  simpleNotify,
   prepareAlpine,
   renderMessage,
   route,
@@ -48,6 +49,7 @@ import {
   serial,
   simpleAlert,
   simpleConfirm,
+  simpleNotify,
   slideDown,
   slideToggle,
   slideUp,
@@ -97,7 +99,7 @@ export async function useLegacyMethods(app: any) {
 
   app.formValidation = useFormValidation;
   app.$validation = {
-    get: useFormValidationSync,
+    get: useFormValidationInstance,
     getField: useFieldValidationSync,
     addGlobalValidator: addGlobalValidator,
     import: () => useFormValidation()
@@ -173,7 +175,9 @@ function handleUI(app: any) {
   app.$ui.checkboxesMultiSelect = useCheckboxesMultiSelect;
   app.$ui.keepAlive = useKeepAlive;
   app.$ui.bootstrap = {
-    tooltip: useBs5Tooltip
+    tooltip: useBs5Tooltip,
+    buttonRadio: useBs5ButtonRadio,
+    keepTab: useBs5KeepTab,
   };
 }
 

package/src/module/field-flatpickr.ts

@@ -92,7 +92,7 @@ class FlatpickrElement extends HTMLElement {
 
   private async handleLocale(options: Record<string, any>) {
     if (this.locale) {
-      await useImport(`flatpickr/dist/l10n/${this.locale}.js`);
+      await useImport(`@flatpickr/l10n/${this.locale}.js`);
 
       options.locale = this.locale.replace(/-/, '_');
     }

package/src/module/iframe-modal.ts

@@ -161,7 +161,7 @@ export const ready = useUniDirective('modal-link', {
   }
 });
 
-export interface IframeModalModule {
+export interface IFrameModalModule {
   IFrameModalElement: typeof IFrameModalElement;
   ready: typeof ready;
 }

package/src/module/show-on.ts

@@ -11,7 +11,7 @@ export class ShowOn {
   input!: HTMLInputTypes;
   conditions: Conditions = {};
   targets = {};
-  defaultReadonly = false;
+  defaultReadonly: boolean | null = null;
   initialDisplay!: string;
 
   constructor(el: HTMLElement, conditions: Conditions) {
@@ -63,7 +63,7 @@ export class ShowOn {
       }, duration + 30);
     } else {
       if (this.input) {
-        this.defaultReadonly = this.input.hasAttribute('readonly');
+        this.defaultReadonly ??= this.input.hasAttribute('readonly');
       }
 
       fadeOut(this.el, duration);
@@ -74,6 +74,8 @@ export class ShowOn {
         if (!this.defaultReadonly) {
           this.input.removeAttribute('readonly');
         }
+
+        this.defaultReadonly = null;
       } else {
         this.input.setAttribute('readonly', 'readonly');
       }

package/src/module/tinymce.ts

@@ -6,8 +6,7 @@ import { mergeDeep } from '../utilities';
 
 const instances: Dictionary<TinymceController> = {};
 let hooks: ((tinymce: TinyMCE) => MaybePromise<any>)[] = [];
-
-let imported = false;
+let imported: Promise<TinyMCE>;
 
 declare type UploadHandlerParams = Parameters<NonNullable<EditorOptions['images_upload_handler']>>;
 
@@ -47,18 +46,16 @@ export function clearHooks() {
 }
 
 async function loadTinymce(): Promise<TinyMCE> {
-  if (imported) {
-    return tinymce;
-  }
-
-  await useScriptImport('@tinymce');
-
-  for (const hook of hooks) {
-    hook(tinymce);
-  }
-  await registerDragPlugin(tinymce);
-  imported = true;
-  return tinymce;
+  return imported ??= new Promise((resolve) => {
+    useScriptImport('@tinymce').then(() => {
+      for (const hook of hooks) {
+        hook(tinymce);
+      }
+      registerDragPlugin(tinymce).then(() => {
+        resolve(tinymce);
+      });
+    });
+  });
 }
 
 const defaultOptions: Record<string, any> = {};
@@ -68,8 +65,6 @@ export class TinymceController {
   options: Record<string, any> = {};
 
   constructor(protected tinymce: TinyMCE, public element: HTMLElement, options: Record<string, any>) {
-    options.target = element;
-
     this.options = mergeDeep(
       {
         unicorn: {
@@ -80,7 +75,9 @@ export class TinymceController {
       this.prepareOptions(options, tinymce.majorVersion),
     );
 
-    tinymce.EditorManager.init(this.options).then((editor) => {
+    this.options.target = element;
+
+    tinymce.init(this.options).then((editor) => {
       this.editor = editor[0];
     });
   }

package/src/module/validation.ts

@@ -402,14 +402,21 @@ export class UnicornFieldValidation {
     if (this.isInputOptions) {
       const $input = this.$input as any;
 
-      $input.validationMessage = '';
-      $input.setCustomValidity = (msg: string) => {
-        $input.validationMessage = String(msg);
-      };
-
-      $input.checkValidity = () => {
-        return this.checkInputOptionsValidity();
-      };
+      if (
+        !($input instanceof HTMLInputElement)
+        && !($input instanceof HTMLSelectElement)
+        && !($input instanceof HTMLTextAreaElement)
+      ) {
+        $input.validationMessage = '';
+
+        $input.setCustomValidity = (msg: string) => {
+          $input.validationMessage = String(msg);
+        };
+
+        $input.checkValidity = () => {
+          return this.checkInputOptionsValidity();
+        };
+      }
     }
   }
 

package/src/plugin/php-adapter.ts

@@ -1,5 +1,7 @@
 import type { UnicornApp } from '../app';
 import {
+  useBs5ButtonRadio, useBs5KeepTab,
+  useBs5Tooltip,
   useFieldCascadeSelect,
   useFieldFileDrag,
   useFieldFlatpickr,
@@ -52,6 +54,11 @@ const methods = {
   modalTree: useFieldModalTree,
   multiUploader: useFieldMultiUploader,
   tomSelect: useTomSelect,
+  bootstrap: {
+    tooltip: useBs5Tooltip,
+    buttonRadio: useBs5ButtonRadio,
+    keepTab: useBs5KeepTab,
+  }
 };
 
 export class UnicornPhpAdapter {