@rugal.tu/vuemodel3 1.3.8 → 1.4.1

package/dist/VueModel.umd.js

@@ -1187,7 +1187,12 @@
     exports.VueStore = VueStore;
     class VueCommand extends VueStore {
         $IsInited = false;
+        $CommandMap;
         $QueryDomName = null;
+        constructor() {
+            super();
+            this.$SetupCommandMap();
+        }
         WithQueryDomName(QueryDomName) {
             this.$QueryDomName = QueryDomName;
             exports.Queryer.WithDomName(this.$QueryDomName);
@@ -1213,9 +1218,10 @@
             this.$AddCommand(DomName, 'v-model', SetOption);
             return this;
         }
-        AddV_Slot(DomName, SlotKey, StorePath) {
-            let SetOption = this.$ConvertCommandOption(StorePath);
-            SetOption.CommandKey = SlotKey;
+        AddV_Slot(DomName, SlotKey, Option) {
+            let SetOption = this.$ConvertCommandOption(DomName, Option);
+            if (SlotKey != null)
+                SetOption.CommandKey = SlotKey;
             this.$AddCommand(DomName, `v-slot`, SetOption);
             return this;
         }
@@ -1354,77 +1360,8 @@
                 RootNode = TreeRoot;
             let RootPaths = UsingRootNode ? [] : this.Paths(TreeRoot);
             this.$ParseTreeSet(RootPaths, TreeSet, AllSetInfo);
-            let 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.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);
-                },
-                '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;
@@ -1448,15 +1385,38 @@
                 let TargetDom = NeedQuery ? Info.Nodes : Info.DomPaths;
                 let TargetPath = [];
                 let TargetValue;
-                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 = {
+                            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;
                 ActionSet(Info, {
@@ -1468,76 +1428,153 @@
             return this;
         }
         $ParseTreeSet(Paths, TreeSet, Result) {
+            const TreeNodeReges = /^:(?<next>.+)$/;
             let AllKeys = Object.keys(TreeSet);
-            let ParamRegex = /^(.+?)\(([^)]*)\)$/;
             for (let i = 0; i < AllKeys.length; i++) {
                 let Command = AllKeys[i];
                 let SetPair = TreeSet[Command];
                 let DomPaths = [...Paths];
                 let TreePaths = [...Paths];
                 let DomName = TreePaths.pop();
-                if (!Command.includes(':')) {
-                    let HasParams = Command.match(ParamRegex);
-                    let CommandKey = 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 = 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, 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, Result);
+                    }
                     continue;
                 }
+                let GetCommandPart = (FindCommand, StartChar, EndChar) => {
+                    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) => {
+                    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;
             }
         }
+        $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);
+                },
+                '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);
+                    }
+                }
+            };
+        }
         AddV_Property(PropertyPath, Option) {
             return this.AddV_PropertyFrom(this.Store, PropertyPath, Option);
         }
@@ -1645,11 +1682,7 @@
                 Target = this.$GenerateEventFunction(FuncDomName, Target, Command);
                 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 += `()`;

package/package.json

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

package/src/VueModel.d.ts

@@ -290,33 +290,63 @@ type CommandOption = {
     FuncArgs?: PathType;
 };
 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 = {
+    Nodes?: QueryNode[];
+    TreePaths: string[];
+    DomPaths: string[];
+    DomName?: string;
+    StoreValue: PathType | Function | TreeSetFuncOption;
+    Command: string;
+    CommandKey?: string;
+    ForKey?: string;
+    Args?: string;
+};
+type TreeSetInfoOption = {
+    TargetDom: PathType | QueryNode[];
+    TargetValue: PathType | Function | CommandOption;
+    TargetPath: PathType;
+};
 type AddV_ModelOption = {
     ModelValue?: string;
     DefaultValue?: any;
@@ -334,11 +364,13 @@ type AddV_TreeOption = {
 };
 export declare class VueCommand extends VueStore {
     protected $IsInited: boolean;
+    protected $CommandMap: Record<string, (Info: TreeSetInfo, Option: TreeSetInfoOption) => void>;
     $QueryDomName: string;
+    constructor();
     WithQueryDomName(QueryDomName: string): this;
     AddV_Text(DomName: PathType | QueryNode[], Option: AddCommandOption): this;
     AddV_Model(DomName: PathType | QueryNode[], StorePath: PathType, Option?: AddV_ModelOption): this;
-    AddV_Slot(DomName: PathType | QueryNode[], SlotKey: string, StorePath: PathType): this;
+    AddV_Slot(DomName: PathType | QueryNode[], SlotKey: string, Option: AddCommandOption): this;
     AddV_For(DomName: PathType | QueryNode[], Option?: AddCommandOption, ForKey?: PathType): this;
     AddV_If(DomName: PathType | QueryNode[], Option: AddCommandOption): this;
     AddV_ElseIf(DomName: PathType | QueryNode[], Option: AddCommandOption): this;
@@ -354,6 +386,7 @@ export declare class VueCommand extends VueStore {
     AddV_FilePicker(DomName: PathType | QueryNode[], Option: AddV_FilePickerOption): this;
     AddV_Tree(TreeRoot: PathType | QueryNode, TreeSet: TreeSetType, Option?: AddV_TreeOption): this;
     private $ParseTreeSet;
+    private $SetupCommandMap;
     AddV_Property(PropertyPath: PathType, Option: AddPropertyType): this;
     AddV_PropertyFrom(SourceStore: any, PropertyPath: PathType, Option: AddPropertyType): this;
     protected $BaseAddProperty(PropertyStore: StoreType, PropertyKey: string, Option: AddPropertyType): StoreType;