@rugal.tu/vuemodel3 1.5.7 → 1.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rugal.tu/vuemodel3",
-  "version": "1.5.7",
+  "version": "1.5.9",
   "publishConfig": {
     "access": "public"
   },

package/src/VueModel.d.ts

@@ -92,6 +92,9 @@ type FileItemStore = {
     Base64?: string;
     Buffer?: ArrayBuffer;
     ConvertType?: FileConvertType | FileConvertType[];
+    IsLoaded?: boolean;
+    IsLoading?: boolean;
+    Error?: any;
 };
 export declare class FileItem {
     OnChangeBase64: Function;
@@ -109,8 +112,12 @@ export declare class FileItem {
     get Buffer(): ArrayBuffer;
     set Buffer(Value: ArrayBuffer);
     get InnerStore(): FileItemStore;
+    get IsLoaded(): boolean;
+    get IsLoading(): boolean;
+    get Error(): any;
     Clear(): void;
     From(Item: FileItem): void;
+    CheckLoadAsync(): Promise<boolean>;
     protected $ConvertFile(): void;
     protected $ConvertBase64(IsForce?: boolean): this;
     protected $ConvertBuffer(): void;
@@ -290,14 +297,13 @@ type CommandOption = {
     FuncAction?: boolean;
     FuncArgs?: PathType;
 };
-type TreeWatchOption = {
-    CallBack: WatchCallback;
-    Option?: WatchOptions;
-};
+type AddCommandOption = PathType | Function | CommandOption;
 export type TreeSetType = {
     'using'?: UsingFunctionType;
     'store'?: any;
     [DomName: `:${string}`]: UsingFunctionType | TreeSetType;
+    [TagName: `@${string}`]: UsingFunctionType | TreeSetType;
+    [TagName: `tag:${string}`]: UsingFunctionType | TreeSetType;
     'watch'?: WatchCallback | TreeWatchOption;
     [WatchTargetCmd: `watch:${string}`]: WatchCallback | TreeWatchOption;
     'func'?: Function;
@@ -340,7 +346,6 @@ type TreeSetFuncOption = {
     TargetFunc: PathType | Function;
     Args?: PathType;
 };
-type AddCommandOption = PathType | Function | CommandOption;
 type TreeSetInfo = {
     Nodes?: QueryNode[];
     TreePaths: string[];
@@ -356,6 +361,10 @@ type TreeSetInfoOption = {
     TargetDom: PathType | QueryNode[];
     TargetValue: PathType | Function | CommandOption;
 };
+type TreeWatchOption = {
+    CallBack: WatchCallback;
+    Option?: WatchOptions;
+};
 type AddV_ModelOption = {
     ModelValue?: string;
     DefaultValue?: any;
@@ -365,6 +374,8 @@ type AddV_FilePickerOption = string | {
     Accept?: string | string[];
     Multiple?: boolean;
     ConvertType?: FileConvertType | FileConvertType[];
+    OnSuccess?: (files: FileItem[]) => void;
+    OnError?: (file: FileItem) => void;
 };
 type AddV_TreeOption = {
     UseDeepQuery?: boolean;
@@ -405,7 +416,7 @@ export declare class VueCommand extends VueStore {
     protected $AddCommand(DomName: PathType | QueryNode[], Command: string, Option: CommandOption): void;
     protected $SetAttribute(Dom: HTMLElement, AttrName: string, AttrValue: string): void;
     protected $RandomFuncName(BaseFuncName: string): string;
-    protected $GenerateEventFunction(DomName: PathType, EventFunc: Function, Command: string): string;
+    protected $GenerateEventFunction(domName: PathType, eventFunc: Function, command: string): string;
 }
 export declare class VueModel extends VueCommand {
     $NativeWarn: (...Message: any[]) => void;

package/src/VueModel.ts

@@ -257,6 +257,7 @@ export class QueryNode extends FuncBase {
     DomName: string = null;
     Parent: QueryNode = null;
     Children: QueryNode[] = [];
+    //DomChildren: 
     ElementDeep: number = 0;
     NodeDeep: number = 0;
     constructor(Dom: HTMLElement) {
@@ -266,9 +267,11 @@ export class QueryNode extends FuncBase {
     }
 
     public Query(DomName: PathType, Option?: QueryOption): QueryNode[] {
+        Option ??= { Mode: 'Multi' };
         return this.$RCS_QueryChildrens(this, DomName, Option);
     }
     public QueryCss(Selector: string, Option?: QueryOption): QueryNode[] {
+        Option ??= { Mode: 'Multi' };
         return this.$RCS_QueryCssChildrens(this, Selector, Option);
     }
     public Selector(Selector: string) {
@@ -289,7 +292,22 @@ export class QueryNode extends FuncBase {
         for (let NodeItem of TargetNode.Children) {
             if (Array.isArray(DomName)) {
                 let Names: PathType = [...DomName];
-                let FirstName = Names.shift();
+                let FirstName = Names.shift() as string;
+
+                const pathRegex = FirstName.match(/^(?<key>[^:]+):(?<name>.+)$/);
+                if (pathRegex) {
+                    const key = pathRegex.groups.key;
+                    const name = pathRegex.groups.name;
+                    switch (key) {
+                        case 'tag':
+                            //TargetNode.Dom.
+                            //Todo: 
+                            break;
+                        default:
+                            FirstName = name;
+                            break;
+                    }
+                }
                 if (NodeItem.DomName == FirstName) {
                     if (Names.length == 1)
                         Names = Names[0];
@@ -484,6 +502,9 @@ type FileItemStore = {
     Base64?: string;
     Buffer?: ArrayBuffer;
     ConvertType?: FileConvertType | FileConvertType[];
+    IsLoaded?: boolean,
+    IsLoading?: boolean,
+    Error?: any
 }
 export class FileItem {
 
@@ -501,6 +522,9 @@ export class FileItem {
                 ConvertType: ConvertType,
                 Base64: null,
                 Buffer: null,
+                IsLoaded: false,
+                IsLoading: true,
+                Error: null,
             });
             this.$ConvertFile();
         }
@@ -540,6 +564,16 @@ export class FileItem {
     get InnerStore() {
         return this.$Store;
     }
+    get IsLoaded() {
+        return this.$Store.IsLoaded;
+    }
+    get IsLoading() {
+        return this.$Store.IsLoading;
+    }
+    get Error() {
+        return this.$Store.Error;
+    }
+
 
     public Clear() {
         this.$Store.Base64 = null;
@@ -549,6 +583,34 @@ export class FileItem {
     public From(Item: FileItem) {
         this.$Store = Item.InnerStore;
     }
+    public CheckLoadAsync(): Promise<boolean> {
+        return new Promise((resolve, reject) => {
+            try {
+                if (this.$Store.IsLoaded || !this.$Store.IsLoading)
+                    return resolve(this.$Store.IsLoaded);
+
+                const timeout = setTimeout(() => {
+                    if (timer)
+                        clearInterval(timer);
+
+                    this.$Store.Error = 'timeout';
+                    console.error("WaitLoadAsync: timeout");
+                    reject(false);
+                }, 60000);
+                const timer = setInterval(() => {
+                    if (this.$Store.IsLoaded || !this.$Store.IsLoading) {
+                        clearInterval(timer);
+                        clearTimeout(timeout);
+                        resolve(this.$Store.IsLoaded);
+                    }
+                }, 100);
+            } catch (e) {
+                this.$Store.Error = e;
+                console.error(e);
+                reject(false);
+            }
+        });
+    }
 
     protected $ConvertFile() {
         if (this.ConvertType == null)
@@ -564,12 +626,15 @@ export class FileItem {
             let TypeItem = GetConvertType[i];
             switch (TypeItem) {
                 case 'base64':
+                    this.$Store.IsLoading = true;
                     this.$ConvertBase64();
                     break;
                 case 'buffer':
+                    this.$Store.IsLoading = true;
                     this.$ConvertBuffer();
                     break;
                 default:
+                    this.$Store.IsLoaded = true;
                     break;
             }
         }
@@ -583,13 +648,21 @@ export class FileItem {
 
         let Reader = new FileReader();
         Reader.readAsDataURL(this.File);
-        Reader.onload = () => this.Base64 = Reader.result as string;
+        Reader.onload = () => {
+            this.Base64 = Reader.result as string;
+            this.$Store.IsLoaded = true;
+            this.$Store.IsLoading = false;
+        }
         return this;
     }
     protected $ConvertBuffer() {
         let Reader = new FileReader();
         Reader.readAsArrayBuffer(this.File);
-        Reader.onload = () => this.Buffer = Reader.result as ArrayBuffer;
+        Reader.onload = () => {
+            this.Buffer = Reader.result as ArrayBuffer;
+            this.$Store.IsLoaded = true;
+            this.$Store.IsLoading = false;
+        }
     }
 }
 type FileConvertType = 'none' | 'base64' | 'buffer';
@@ -1491,14 +1564,13 @@ type CommandOption = {
     FuncAction?: boolean;
     FuncArgs?: PathType,
 };
-type TreeWatchOption = {
-    CallBack: WatchCallback,
-    Option?: WatchOptions,
-}
+type AddCommandOption = PathType | Function | CommandOption;
 export type TreeSetType = {
     'using'?: UsingFunctionType,
     'store'?: any,
     [DomName: `:${string}`]: UsingFunctionType | TreeSetType,
+    [TagName: `@${string}`]: UsingFunctionType | TreeSetType,
+    [TagName: `tag:${string}`]: UsingFunctionType | TreeSetType,
 
     'watch'?: WatchCallback | TreeWatchOption,
     [WatchTargetCmd: `watch:${string}`]: WatchCallback | TreeWatchOption,
@@ -1554,8 +1626,6 @@ type TreeSetFuncOption = {
     TargetFunc: PathType | Function,
     Args?: PathType,
 };
-type AddCommandOption = PathType | Function | CommandOption;
-
 type TreeSetInfo = {
     Nodes?: QueryNode[],
     TreePaths: string[],
@@ -1571,6 +1641,10 @@ type TreeSetInfoOption = {
     TargetDom: PathType | QueryNode[],
     TargetValue: PathType | Function | CommandOption,
 };
+type TreeWatchOption = {
+    CallBack: WatchCallback,
+    Option?: WatchOptions,
+};
 type AddV_ModelOption = {
     ModelValue?: string,
     DefaultValue?: any,
@@ -1580,6 +1654,8 @@ type AddV_FilePickerOption = string | {
     Accept?: string | string[],
     Multiple?: boolean;
     ConvertType?: FileConvertType | FileConvertType[];
+    OnSuccess?: (files: FileItem[]) => void,
+    OnError?: (file: FileItem) => void,
 };
 type AddV_TreeOption = {
     UseDeepQuery?: boolean,
@@ -1737,6 +1813,8 @@ export class VueCommand extends VueStore {
         let Accept: string = null;
         let ConvertType: FileConvertType | FileConvertType[] = 'none';
         let Multi: boolean = false;
+        let OnSuccess: (files: FileItem[]) => void;
+        let OnError: (file: FileItem) => void;
 
         if (typeof (Option) == 'string')
             FileStorePath = Option;
@@ -1744,12 +1822,14 @@ export class VueCommand extends VueStore {
             FileStorePath = Option.Store;
             ConvertType = Option.ConvertType;
             Multi = Option.Multiple;
+            OnSuccess = Option.OnSuccess;
 
             if (Array.isArray(Option.Accept))
                 Accept = Option.Accept.join(' ');
             else
                 Accept = Option.Accept;
         }
+
         this.AddFileStore(FileStorePath, {
             Multi: Multi,
         });
@@ -1761,14 +1841,37 @@ export class VueCommand extends VueStore {
             if (Multi != null)
                 TempInput.multiple = Multi;
 
-            TempInput.onchange = (Event) => {
+            TempInput.onchange = async (Event) => {
                 if (TempInput.files == null || TempInput.files.length == 0)
                     return;
 
-                let Files = TempInput.files;
+                const Files = TempInput.files;
+                const FileItems: FileItem[] = [];
                 for (let i = 0; i < Files.length; i++) {
                     let PickFile = Files[i];
                     this.AddFile(FileStorePath, PickFile, ConvertType);
+
+                    let fileData = Model.FileStore[FileStorePath];
+                    if (!Array.isArray(fileData)) {
+                        fileData = [fileData];
+                    }
+                    FileItems.push(...fileData);
+                }
+
+                if (OnSuccess) {
+                    let isChecked = true;
+                    for (const item of FileItems) {
+                        if (item instanceof FileItem) {
+                            if (!await item.CheckLoadAsync()) {
+                                if (OnError)
+                                    OnError(item);
+                                isChecked = false;
+                                break;
+                            }
+                        }
+                    }
+                    if (isChecked)
+                        OnSuccess(FileItems)
                 }
             };
             TempInput.click();
@@ -2107,14 +2210,14 @@ export class VueCommand extends VueStore {
                 if (Option.get)
                     return Option.get();
 
-                return this.$get(PropertyKey);
+                return (this as any).$get(PropertyKey);
             },
             set(Value) {
                 if (Option.set) {
                     Option.set(Value);
                     return;
                 }
-                this.$set(PropertyKey, Value);
+                (this as any).$set(PropertyKey, Value);
             }
         };
 
@@ -2244,12 +2347,14 @@ export class VueCommand extends VueStore {
     protected $RandomFuncName(BaseFuncName: string) {
         return `${BaseFuncName}${this.GenerateIdReplace('')}`.replace(/[-:.]/g, '_');
     }
-    protected $GenerateEventFunction(DomName: PathType, EventFunc: Function, Command: string) {
-        let FuncName = this.$RandomFuncName(`${Command}_`);
-        DomName = this.Paths(DomName);
-        let FullFuncPath = ['event', ...DomName, FuncName];
-        this.AddV_Function(FullFuncPath, EventFunc);
-        return this.ToJoin(FullFuncPath);
+    protected $GenerateEventFunction(domName: PathType, eventFunc: Function, command: string) {
+        const funcName = this.$RandomFuncName(`${command}_`);
+        domName = this.Paths(domName);
+        const fullFuncPath = ['event', ...domName, funcName]
+            .filter(item => item != null && item != '');
+
+        this.AddV_Function(fullFuncPath, eventFunc);
+        return this.ToJoin(fullFuncPath);
     }
     //#endregion