@rugal.tu/vuemodel3 1.3.7 → 1.4.0

package/src/VueModel.ts

@@ -1199,7 +1199,7 @@ export class ApiStore extends FuncBase {
                     FindStore[Key] = [];
                 IsGoNext = true;
             }
-            else if (typeof Value == 'object') {
+            else if (Value != null && typeof Value == 'object') {
                 if (FindStore[Key] == null || typeof FindStore[Key] != 'object')
                     FindStore[Key] = {};
                 IsGoNext = true;
@@ -1491,34 +1491,57 @@ type CommandOption = {
 };
 
 type TreeSetType = {
-    'v-text'?: '' | PathType | Function | TreeSetOption,
-    'v-model'?: '' | PathType,
-    'v-for'?: '' | PathType | Function | TreeSetOption,
-    'v-if'?: '' | PathType | Function | TreeSetOption,
-    'v-else'?: '' | null,
-    'v-else-if'?: '' | PathType | Function | TreeSetOption,
-    'v-show'?: '' | PathType | Function | TreeSetOption,
-    'v-bind'?: '' | PathType | Function | TreeSetOption,
-    'v-on:change'?: '' | PathType | Function | TreeSetOption,
-    'v-on:click'?: '' | PathType | Function | TreeSetOption,
-    'v-on-mounted'?: '' | PathType | Function | TreeSetOption,
-    'v-on-unmounted'?: '' | PathType | Function | TreeSetOption,
-
     'watch'?: '' | WatchCallback,
     'using'?: '' | UsingFunctionType,
-
-    [VModelCmd: `v-model:${string}`]: '' | PathType | TreeSetOption,
-    [VForCmd: `v-for(${string})`]: '' | PathType | Function | TreeSetOption,
-    [VBindCmd: `v-bind:${string}`]: '' | PathType | Function | TreeSetOption,
-    [VOnCmd: `v-on:${string}`]: '' | PathType | Function | TreeSetOption,
-    [VOnParamCmd: `v-on:${string}(${string})`]: '' | PathType | Function | TreeSetOption,
-    [VSlotCmd: `v-slot:${string}`]: '' | string,
-    [VOnMountedCmd: `v-on-mounted(${string})`]: '' | PathType | Function | TreeSetOption,
-    [VOnUnMountedCmd: `v-on-unmounted(${string})`]: '' | PathType | Function | TreeSetOption,
     [FuncCmd: `func:${string}`]: '' | Function,
     [DomName: `:${string}`]: '' | UsingFunctionType | TreeSetType,
+
+    'v-model'?: '' | PathType,
+    [VModelCmd: `v-model:${string}`]: '' | PathType,
+
+    'v-slot'?: '' | PathType | Function | TreeSetFuncOption,
+    [VSlotArgsCmd: `v-slot(${string})`]: Function | TreeSetFuncOption,
+    [VSlotKeyCmd: `v-slot:${string}`]: '' | PathType | Function | TreeSetFuncOption,
+    [VSlotKeyArgsCmd: `v-slot:${string}(${string})`]: Function | TreeSetFuncOption,
+
+    'v-text'?: '' | PathType | Function | TreeSetFuncOption,
+    [VForTextCmd: `v-text(${string})`]: Function | TreeSetFuncOption,
+
+    'v-for'?: '' | PathType | Function | TreeSetFuncOption,
+    [VForKeyCmd: `v-for<${string}>`]: PathType | Function | TreeSetFuncOption,
+    [VForKeyArgsCmd: `v-for<${string}>(${string})`]: Function | TreeSetFuncOption,
+    [VForArgsCmd: `v-for(${string})`]: Function | TreeSetFuncOption,
+    [VForArgsKeyCmd: `v-for(${string})<${string}>`]: Function | TreeSetFuncOption,
+
+    'v-show'?: '' | PathType | Function | TreeSetFuncOption,
+    [VShowArgsCmd: `v-show(${string})`]: Function | TreeSetFuncOption,
+
+    'v-if'?: '' | PathType | Function | TreeSetFuncOption,
+    'v-else-if'?: '' | PathType | Function | TreeSetFuncOption,
+    'v-else'?: '' | null,
+    [VIfArgsCmd: `v-if(${string})`]: Function | TreeSetFuncOption,
+    [VElseIfArgsCmd: `v-else-if(${string})`]: Function | TreeSetFuncOption,
+
+    'v-bind'?: '' | PathType | Function | TreeSetFuncOption,
+    [VBindCmd: `v-bind:${string}`]: '' | PathType | Function | TreeSetFuncOption,
+    [VBindArgsCmd: `v-bind:${string}(${string})`]: Function | TreeSetFuncOption,
+
+    'v-on:change'?: '' | PathType | Function | TreeSetFuncOption,
+    'v-on:click'?: '' | PathType | Function | TreeSetFuncOption,
+    [VOnCmd: `v-on:${string}`]: '' | PathType | Function | TreeSetFuncOption,
+    [VOnArgsCmd: `v-on:${string}(${string})`]: Function | TreeSetFuncOption,
+
+    'v-on-mounted'?: '' | PathType | Function | TreeSetFuncOption,
+    [VOnMountedArgsCmd: `v-on-mounted(${string})`]: Function | TreeSetFuncOption,
+
+    'v-on-unmounted'?: '' | PathType | Function | TreeSetFuncOption,
+    [VOnUnMountedArgsCmd: `v-on-unmounted(${string})`]: Function | TreeSetFuncOption,
+
+};
+type TreeSetFuncOption = {
+    TargetFunc: PathType | Function,
+    Args?: PathType,
 };
-type TreeSetOption = CommandOption;
 type AddCommandOption = PathType | Function | CommandOption;
 
 type TreeSetInfo = {
@@ -1526,11 +1549,17 @@ type TreeSetInfo = {
     TreePaths: string[],
     DomPaths: string[],
     DomName?: string,
-    StoreValue: PathType | Function,
+    StoreValue: PathType | Function | TreeSetFuncOption,
     Command: string,
     CommandKey?: string,
-    Params?: string,
+    ForKey?: string,
+    Args?: string,
 }
+type TreeSetInfoOption = {
+    TargetDom: PathType | QueryNode[],
+    TargetValue: PathType | Function | CommandOption,
+    TargetPath: PathType,
+};
 type AddV_ModelOption = {
     ModelValue?: string,
     DefaultValue?: any,
@@ -1547,10 +1576,17 @@ type AddV_TreeOption = {
     UseDomStore?: boolean,
 };
 //#endregion
+
 export class VueCommand extends VueStore {
     protected $IsInited: boolean = false;
+    protected $CommandMap: Record<string, (Info: TreeSetInfo, Option: TreeSetInfoOption) => void>;
     $QueryDomName: string = null;
 
+    constructor() {
+        super();
+        this.$SetupCommandMap();
+    }
+
     //#region With Method
     public WithQueryDomName(QueryDomName: string) {
         this.$QueryDomName = QueryDomName;
@@ -1582,9 +1618,10 @@ export class VueCommand extends VueStore {
         this.$AddCommand(DomName, 'v-model', SetOption);
         return this;
     }
-    public AddV_Slot(DomName: PathType | QueryNode[], SlotKey: string, StorePath: PathType) {
-        let SetOption = this.$ConvertCommandOption(StorePath);
-        SetOption.CommandKey = SlotKey;
+    public AddV_Slot(DomName: PathType | QueryNode[], SlotKey: string, Option: AddCommandOption) {
+        let SetOption = this.$ConvertCommandOption(DomName, Option);
+        if (SlotKey != null)
+            SetOption.CommandKey = SlotKey;
         this.$AddCommand(DomName, `v-slot`, SetOption);
         return this;
     }
@@ -1741,83 +1778,8 @@ export class VueCommand extends VueStore {
             RootNode = TreeRoot as QueryNode;
         let RootPaths = UsingRootNode ? [] : this.Paths(TreeRoot)
         this.$ParseTreeSet(RootPaths, TreeSet, AllSetInfo);
-
-        type TreeSetInfoOption = {
-            TargetDom: PathType | QueryNode[],
-            TargetValue: PathType | Function,
-            TargetPath: PathType,
-        };
-        let CommandMap: Record<string, (Info: TreeSetInfo, Option: TreeSetInfoOption) => void> = {
-            'v-text': (Info, Option) => {
-                Model.AddV_Text(Option.TargetDom, Option.TargetValue);
-            },
-            'v-model': (Info, Option) => {
-                if (typeof (Info.StoreValue) == 'function') {
-                    Model.$Error(`v-model command value must be a string or string[], path: ${this.ToJoin(Info.DomPaths)}`);
-                    return;
-                }
-                Model.AddV_Model(Option.TargetDom, Option.TargetPath, {
-                    ModelValue: Info.CommandKey,
-                });
-            },
-            'v-for': (Info, Option) => {
-                Model.AddV_For(Option.TargetDom, Option.TargetValue, Info.CommandKey);
-            },
-            'v-if': (Info, Option) => {
-                Model.AddV_If(Option.TargetDom, Option.TargetValue);
-            },
-            'v-else-if': (Info, Option) => {
-                Model.AddV_ElseIf(Option.TargetDom, Option.TargetValue);
-            },
-            'v-else': (Info, Option) => {
-                Model.AddV_Else(Option.TargetDom);
-            },
-            'v-show': (Info, Option) => {
-                Model.AddV_Show(Option.TargetDom, Option.TargetValue);
-            },
-            'v-bind': (Info, Option) => {
-                if (!Option.TargetValue)
-                    return;
-                Model.AddV_Bind(Option.TargetDom, Info.CommandKey, Option.TargetValue, Info.Params);
-            },
-            'v-on': (Info, Option) => {
-                Model.AddV_On(Option.TargetDom, Info.CommandKey, Option.TargetValue, Info.Params);
-            },
-            'v-slot': (Info, Option) => {
-                if (Array.isArray(Info.StoreValue) || typeof (Info.StoreValue) == 'function') {
-                    Model.$Error(`v-slot command value must be a string, path: ${this.ToJoin(Info.DomPaths)}`);
-                    return;
-                }
-                Model.AddV_Slot(Option.TargetDom, Info.CommandKey, Option.TargetPath);
-            },
-            'v-on-mounted': (Info, Option) => {
-                Model.AddV_OnMounted(Option.TargetDom, Option.TargetValue, Info.CommandKey);
-            },
-            'v-on-unmounted': (Info, Option) => {
-                Model.AddV_OnUnMounted(Option.TargetDom, Option.TargetValue, Info.CommandKey);
-            },
-            'watch': (Info, Option) => {
-                if (typeof (Info.StoreValue) != 'function') {
-                    Model.$Error(`watch command value must be a function, path: ${this.ToJoin(Info.DomPaths)}`);
-                    return;
-                }
-                Model.AddV_Watch(Info.DomPaths, Info.StoreValue as any);
-            },
-            'func': (Info, Option) => {
-                if (typeof (Info.StoreValue) != 'function') {
-                    Model.$Error(`func command value must be a function, path: ${this.ToJoin(Info.DomPaths)}`);
-                    return;
-                }
-                Model.AddV_Function(['event', ...Info.DomPaths, Info.CommandKey], Info.StoreValue);
-            },
-            'using': (Info, Option) => {
-                if (typeof (Info.StoreValue) === 'function') {
-                    Info.StoreValue(Info.DomPaths, Info.Nodes);
-                }
-            }
-        }
         for (let Info of AllSetInfo) {
-            let ActionSet = CommandMap[Info.Command];
+            let ActionSet = this.$CommandMap[Info.Command];
             if (ActionSet == null) {
                 Model.$Error(`${Info.Command} command is not allowed, path: ${this.ToJoin(Info.DomPaths)}`);
                 continue;
@@ -1842,18 +1804,41 @@ export class VueCommand extends VueStore {
 
             let TargetDom: PathType | QueryNode[] = NeedQuery ? Info.Nodes : Info.DomPaths;
             let TargetPath: PathType = [];
-            let TargetValue: PathType | Function;
+            let TargetValue: PathType | Function | CommandOption;
 
-            if (typeof (Info.StoreValue) != 'function') {
-                if (Option?.UseTreePath)
-                    TargetPath = [...Info.TreePaths];
-
-                if (Option?.UseDomStore || Info.StoreValue == '.')
-                    TargetPath.push(Info.DomName);
-                else if (Info.StoreValue != null && Info.StoreValue != '')
-                    TargetPath = this.Paths(TargetPath, Info.StoreValue);
+            if (typeof Info.StoreValue === 'function') {
+                TargetValue = {
+                    Target: Info.StoreValue,
+                    FuncArgs: Info.Args,
+                };
+            }
+            else {
+                if (typeof Info.StoreValue === 'string' || Array.isArray(Info.StoreValue)) {
+                    Info.StoreValue = Model.ToJoin(Info.StoreValue);
+                    if (Option?.UseTreePath)
+                        TargetPath = [...Info.TreePaths];
+                    if (Option?.UseDomStore || Info.StoreValue == '.')
+                        TargetPath.push(Info.DomName);
+                    else if (Info.StoreValue != null && Info.StoreValue != '')
+                        TargetPath = this.Paths(TargetPath, Info.StoreValue);
+
+                    TargetValue = TargetPath.length > 0 ? TargetPath : Info.StoreValue;
+                }
+                else {
+                    let NewStoreValue: CommandOption = {
+                        Target: Info.StoreValue.TargetFunc,
+                        FuncArgs: Info.StoreValue.Args,
+                    };
+                    TargetValue = NewStoreValue;
+                    if (Info.StoreValue.Args != null) {
+                        let Args = Model.ToJoin(Info.StoreValue.Args);
+                        if (Info.CommandKey == null || Info.CommandKey == '')
+                            Info.CommandKey = Args;
+                        else
+                            Info.CommandKey = Model.ToJoin([Info.CommandKey, Args], ', ');
+                    }
+                }
             }
-            TargetValue = TargetPath.length > 0 ? TargetPath : Info.StoreValue;
 
             if (TargetValue == '')
                 continue;
@@ -1867,8 +1852,8 @@ export class VueCommand extends VueStore {
         return this;
     }
     private $ParseTreeSet(Paths: string[], TreeSet: TreeSetType, Result: TreeSetInfo[]) {
+        const TreeNodeReges = /^:(?<next>.+)$/;
         let AllKeys = Object.keys(TreeSet);
-        let ParamRegex = /^(.+?)\(([^)]*)\)$/;
 
         for (let i = 0; i < AllKeys.length; i++) {
             let Command = AllKeys[i];
@@ -1877,70 +1862,148 @@ export class VueCommand extends VueStore {
             let DomPaths = [...Paths];
             let TreePaths = [...Paths];
             let DomName = TreePaths.pop();
-            if (!Command.includes(':')) {
-                let HasParams = Command.match(ParamRegex);
-                let CommandKey: string = null;
-                if (HasParams && HasParams.length >= 3) {
-                    Command = HasParams[1];
-                    CommandKey = HasParams[2];
-                }
-                Result.push({
-                    Command: Command,
-                    StoreValue: SetPair,
-                    TreePaths: TreePaths,
-                    DomPaths: DomPaths,
-                    DomName: DomName,
-                    CommandKey: CommandKey,
-                });
-                continue;
-            }
 
-            let Commands = Command.split(':');
-            if (Command.length < 2) {
-                Model.$Error(`command ${Command} invalid`);
-                continue;
-            }
-
-            Command = Commands.shift();
-            let Params: string = null;
-            if (Commands.length > 0) {
-                let LastCommand = Commands.pop();
-                let HasParams = LastCommand.match(ParamRegex);
-                if (HasParams && HasParams.length >= 3) {
-                    Commands.push(HasParams[1]);
-                    Params = HasParams[2];
-                }
-                else
-                    Commands.push(LastCommand);
-            }
-
-            let NextDomName = Model.ToJoin(Commands, ':');
-            if (Command == '') {
-                if (typeof SetPair != 'function')
-                    this.$ParseTreeSet([...Paths, NextDomName], SetPair as any, Result);
-                else {
+            let TreeNodeResult = Command.match(TreeNodeReges);
+            if (TreeNodeResult) {
+                let NextDomName = TreeNodeResult.groups.next;
+                if (typeof SetPair === 'function') {
                     Result.push({
                         Command: 'using',
-                        CommandKey: null,
                         StoreValue: SetPair,
                         TreePaths: [...DomPaths],
                         DomPaths: [...DomPaths, NextDomName],
                         DomName: NextDomName,
-                        Params: Params,
                     });
                 }
+                else {
+                    this.$ParseTreeSet([...Paths, NextDomName], SetPair as any, Result);
+                }
                 continue;
             }
 
+            let GetCommandPart = (FindCommand: string, StartChar: string, EndChar: string) => {
+                if (!FindCommand.includes(StartChar) || !FindCommand.includes(EndChar))
+                    return null;
+
+                let StartIndex = FindCommand.indexOf(StartChar);
+                let EndIndex = FindCommand.lastIndexOf(EndChar);
+                let Result = FindCommand.slice(StartIndex + 1, EndIndex).trim();
+                return Result?.trim();
+            };
+            let GetCommandWithKey = (FindCommand: string) => {
+                let ArgsStart = null;
+                let ForKeyStart = null;
+                if (FindCommand.includes('('))
+                    ArgsStart = FindCommand.indexOf('(');
+                if (FindCommand.includes('<'))
+                    ForKeyStart = FindCommand.indexOf('<');
+
+                let CommandWithKey = null;
+                if (ArgsStart == null && ForKeyStart == null) {
+                    CommandWithKey = FindCommand;
+                }
+                else if (ArgsStart == null || ForKeyStart == null) {
+                    let MinIndex = ArgsStart ?? ForKeyStart;
+                    CommandWithKey = FindCommand.slice(0, MinIndex);
+                }
+                else {
+                    let MinIndex = Math.min(ArgsStart, ForKeyStart);
+                    CommandWithKey = FindCommand.slice(0, MinIndex);
+                }
+
+                let Command = CommandWithKey;
+                let CommandKey = null;
+                if (CommandWithKey.includes(':')) {
+                    let CommandKeyStart = Command.indexOf(':');
+                    Command = CommandWithKey.slice(0, CommandKeyStart);
+                    CommandKey = CommandWithKey.slice(CommandKeyStart + 1);
+                }
+                return {
+                    Command: Command?.trim(),
+                    CommandKey: CommandKey?.trim(),
+                }
+            };
+            let Args = GetCommandPart(Command, '(', ')');
+            let ForKey = GetCommandPart(Command, '<', '>');
+            let CommandWithKey = GetCommandWithKey(Command);
             Result.push({
-                Command: Command,
-                CommandKey: NextDomName,
+                Command: CommandWithKey?.Command,
+                CommandKey: CommandWithKey?.CommandKey,
+                ForKey: ForKey,
+                Args: Args,
                 StoreValue: SetPair,
                 TreePaths: TreePaths,
                 DomPaths: DomPaths,
                 DomName: DomName,
-                Params: Params,
             });
+            continue;
+        }
+    }
+    private $SetupCommandMap() {
+        this.$CommandMap = {
+            'v-text': (Info, Option) => {
+                Model.AddV_Text(Option.TargetDom, Option.TargetValue);
+            },
+            'v-model': (Info, Option) => {
+                if (typeof (Info.StoreValue) == 'function') {
+                    Model.$Error(`v-model command value must be a string or string[], path: ${this.ToJoin(Info.DomPaths)}`);
+                    return;
+                }
+                Model.AddV_Model(Option.TargetDom, Option.TargetPath, {
+                    ModelValue: Info.CommandKey,
+                });
+            },
+            'v-for': (Info, Option) => {
+                Model.AddV_For(Option.TargetDom, Option.TargetValue, Info.ForKey);
+            },
+            'v-if': (Info, Option) => {
+                Model.AddV_If(Option.TargetDom, Option.TargetValue);
+            },
+            'v-else-if': (Info, Option) => {
+                Model.AddV_ElseIf(Option.TargetDom, Option.TargetValue);
+            },
+            'v-else': (Info, Option) => {
+                Model.AddV_Else(Option.TargetDom);
+            },
+            'v-show': (Info, Option) => {
+                Model.AddV_Show(Option.TargetDom, Option.TargetValue);
+            },
+            'v-bind': (Info, Option) => {
+                if (!Option.TargetValue)
+                    return;
+                Model.AddV_Bind(Option.TargetDom, Info.CommandKey, Option.TargetValue, Info.Args);
+            },
+            'v-on': (Info, Option) => {
+                Model.AddV_On(Option.TargetDom, Info.CommandKey, Option.TargetValue, Info.Args);
+            },
+            'v-slot': (Info, Option) => {
+                Model.AddV_Slot(Option.TargetDom, Info.CommandKey, Option.TargetValue);
+            },
+            'v-on-mounted': (Info, Option) => {
+                Model.AddV_OnMounted(Option.TargetDom, Option.TargetValue, Info.Args);
+            },
+            'v-on-unmounted': (Info, Option) => {
+                Model.AddV_OnUnMounted(Option.TargetDom, Option.TargetValue, Info.Args);
+            },
+            'watch': (Info, Option) => {
+                if (typeof (Info.StoreValue) != 'function') {
+                    Model.$Error(`watch command value must be a function, path: ${this.ToJoin(Info.DomPaths)}`);
+                    return;
+                }
+                Model.AddV_Watch(Info.DomPaths, Info.StoreValue as any);
+            },
+            'func': (Info, Option) => {
+                if (typeof (Info.StoreValue) != 'function') {
+                    Model.$Error(`func command value must be a function, path: ${this.ToJoin(Info.DomPaths)}`);
+                    return;
+                }
+                Model.AddV_Function(['event', ...Info.DomPaths, Info.CommandKey], Info.StoreValue);
+            },
+            'using': (Info, Option) => {
+                if (typeof (Info.StoreValue) === 'function') {
+                    Info.StoreValue(Info.DomPaths, Info.Nodes);
+                }
+            }
         }
     }
     //#endregion
@@ -2069,11 +2132,7 @@ export class VueCommand extends VueStore {
 
             if (Option.FuncArgs) {
                 let Args = this.ToJoin(Option.FuncArgs, ',');
-                if (!/^\(/.test(Args))
-                    Args = `(${Args}`;
-                if (!/\)$/.test(Args))
-                    Args += ')';
-                Target += Args;
+                Target += `(${Args})`;
             }
             else if (Option.FuncAction) {
                 Target += `()`;