@rugal.tu/vuemodel3 1.0.0-beta.1

package/dist/VueModel.esm.js

@@ -0,0 +1,854 @@
+//#region DomQueryer
+class QueryNode {
+    Dom;
+    DomName = null;
+    Parent = null;
+    Children = [];
+    ElementDeep = 0;
+    NodeDeep = 0;
+    constructor(Dom) {
+        this.Dom = Dom;
+    }
+    Query(DomName) {
+        return this.$RCS_QueryChildren(this, DomName);
+    }
+    $RCS_QueryChildren(TargetNode, DomName) {
+        for (let Item of TargetNode.Children) {
+            if (Item.DomName == DomName)
+                return Item;
+            let ChildrenResult = this.$RCS_QueryChildren(Item, DomName);
+            if (ChildrenResult != null)
+                return ChildrenResult;
+        }
+        return null;
+    }
+}
+class DomQueryer {
+    $Root = null;
+    $RootNode = null;
+    $Nodes = [];
+    $QueryDomName = null;
+    WithRoot(Filter) {
+        this.$Root = document.querySelector(Filter);
+        return this;
+    }
+    WithDomName(QueryDomName) {
+        this.$QueryDomName = QueryDomName;
+        return this;
+    }
+    Init() {
+        this.$Root ??= document.body;
+        this.$RootNode = new QueryNode(this.$Root);
+        this.$RCS_Visit(this.$Root, this.$RootNode, 0);
+        this.$Nodes = this.$Nodes.sort((A, B) => A.NodeDeep - B.NodeDeep);
+        return this;
+    }
+    Query(DomName, TargetNode) {
+        TargetNode ??= this.$RootNode;
+        return TargetNode.Query(DomName);
+    }
+    Using(DomName, UsingFunc, TargetNode) {
+        TargetNode ??= this.$RootNode;
+        let QueryNode = TargetNode.Query(DomName);
+        if (QueryNode != null)
+            UsingFunc({
+                Node: TargetNode,
+                Dom: TargetNode.Dom,
+            });
+        return this;
+    }
+    $RCS_Visit(DomNode, Parent, ElementDeep) {
+        let NextNode = this.$AddNode(DomNode, Parent, ElementDeep);
+        NextNode ??= Parent;
+        let Children = DomNode.children;
+        if (DomNode instanceof HTMLTemplateElement)
+            Children = DomNode.content.children;
+        if (Children == null || Children.length == 0)
+            return;
+        for (let i = 0; i < Children.length; i++) {
+            let Item = Children[i];
+            if (Item instanceof HTMLElement)
+                this.$RCS_Visit(Item, NextNode, ElementDeep + 1);
+        }
+    }
+    $AddNode(Dom, Parent, ElementDeep) {
+        if (this.$QueryDomName != null && !Dom.matches(`[${this.$QueryDomName}]`))
+            return null;
+        let DomName = Dom.getAttribute(this.$QueryDomName);
+        let NewNode = new QueryNode(Dom);
+        NewNode.DomName = DomName;
+        NewNode.ElementDeep = ElementDeep;
+        this.$Nodes.push(NewNode);
+        if (Parent != null) {
+            NewNode.Parent = Parent;
+            NewNode.NodeDeep = Parent.NodeDeep + 1;
+            Parent.Children.push(NewNode);
+        }
+        return NewNode;
+    }
+}
+var Queryer = new DomQueryer();
+export { DomQueryer, Queryer };
+//#endregion
+//#region CommonFunc
+class CommonFunc {
+    //#region Protected Property
+    $NavigateToFunc;
+    //#endregion
+    constructor() {
+        this.$NavigateToFunc = null;
+    }
+    //#region Public With Method
+    WithNavigateTo(NavigateToFunc) {
+        this.$NavigateToFunc = NavigateToFunc;
+        return this;
+    }
+    //#endregion
+    //#region Public Method
+    GenerateId() {
+        let NewId = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (char) => {
+            let RandomValue = crypto.getRandomValues(new Uint8Array(1))[0] & 15;
+            let Id = char === 'x' ? RandomValue : (RandomValue & 0x3) | 0x8;
+            return Id.toString(16);
+        });
+        return NewId;
+    }
+    NavigateTo(Url, UrlParam = null) {
+        if (!Array.isArray(Url))
+            Url = [Url];
+        if (Url == null || Url.length == 0 || Url[0].length == 0)
+            this.$Throw('Url can not be null or empty');
+        let IsAbsolute = Url[0][0] == '/';
+        let CombineUrl = Url
+            .map(Item => this.$ClearUrl(Item))
+            .join('/');
+        if (IsAbsolute)
+            CombineUrl = `/${CombineUrl}`;
+        if (UrlParam != null) {
+            if (typeof (UrlParam) != 'string')
+                UrlParam = this.$ConvertTo_UrlQuery(UrlParam);
+            CombineUrl += `?${UrlParam}`;
+        }
+        if (this.$NavigateToFunc)
+            this.$NavigateToFunc(CombineUrl);
+        else
+            window.location.href = CombineUrl;
+        return this;
+    }
+    ForEachObject(Param, Func) {
+        let AllKey = Object.keys(Param);
+        for (let i = 0; i < AllKey.length; i++) {
+            let Key = AllKey[i];
+            let Value = Param[Key];
+            if (Func != null)
+                Func.call(this, Key, Value);
+        }
+    }
+    DeepObjectExtend(Target, Source, MaxDepth = 10) {
+        if (MaxDepth == 0)
+            return {
+                ...Target,
+                ...Source,
+            };
+        let AllKeys = Object.keys(Source);
+        for (let i = 0; i < AllKeys.length; i++) {
+            let Key = AllKeys[i];
+            if (!(Key in Target))
+                Target[Key] = Source[Key];
+            else if (typeof Source[Key] != "object")
+                Target[Key] = Source[Key];
+            else {
+                let NewObject = {
+                    ...this.DeepObjectExtend(Target[Key], Source[Key], MaxDepth - 1),
+                };
+                Target[Key] = NewObject;
+            }
+        }
+        return Target;
+    }
+    //#endregion
+    //#region Protected Process
+    $ConvertTo_UrlQuery(Param) {
+        if (typeof Param === 'string')
+            return Param;
+        let AllParam = [];
+        this.ForEachObject(Param, (Key, Value) => {
+            AllParam.push(`${Key}=${Value}`);
+        });
+        let QueryString = AllParam.join('&');
+        return QueryString;
+    }
+    $ClearUrl(ApiUrl) {
+        let ClearUrl = ApiUrl.replace(/^\/+|\/+$/g, '');
+        return ClearUrl;
+    }
+    //#endregion
+    //#region Console And Throw
+    $Throw(Message) {
+        throw new Error(Message);
+    }
+    $Error(Data) {
+        console.error(Data);
+    }
+}
+//#endregion
+//#region Data Type
+class FileDataType {
+    FileId;
+    File;
+}
+//#endregion
+class ApiStore extends CommonFunc {
+    //#region Private Property
+    #ApiDomain = null;
+    #ApiToken = null;
+    #OnEventFunc = {};
+    #OnEventName = {
+        ApiStore: {
+            AddApi: 'AddApi',
+            UpdateStore: 'UpdateStore',
+            AddStore: 'AddStore',
+            SetStore: 'SetStore',
+        }
+    };
+    #Store = {
+        FileStore: {},
+    };
+    #Func_ConvertTo_FormData = [];
+    //#endregion
+    //#region Protected Property
+    $ApiStore = {};
+    //#endregion
+    constructor() {
+        super();
+        this.UseFormJsonBody();
+    }
+    //#region Get/Set Property
+    get ApiDomain() {
+        if (this.#ApiDomain == null)
+            return null;
+        return this.$ClearUrl(this.#ApiDomain);
+    }
+    set ApiDomain(ApiDomain) {
+        this.#ApiDomain = this.$ClearUrl(ApiDomain);
+    }
+    get OnEventName() {
+        return this.#OnEventName;
+    }
+    get #EventName() {
+        return this.OnEventName.ApiStore;
+    }
+    get Store() {
+        return this.#Store;
+    }
+    set Store(Store) {
+        this.#Store = Store;
+    }
+    get FileStore() {
+        return this.Store.FileStore;
+    }
+    //#endregion
+    //#region Public With Method
+    WithApiToken(ApiToken) {
+        this.#ApiToken = ApiToken;
+        return this;
+    }
+    WithApiDomain(ApiDomain) {
+        this.ApiDomain = ApiDomain;
+        return this;
+    }
+    //#endregion
+    //#region ConvertTo Method
+    WithConvertTo_FormParam(ConvertToFunc) {
+        this.#Func_ConvertTo_FormData.push(ConvertToFunc);
+        return this;
+    }
+    ClearConvertTo_FormParam() {
+        this.#Func_ConvertTo_FormData = [];
+        return this;
+    }
+    //#endregion
+    //#region Api Method
+    AddApi(AddApi) {
+        for (let ApiKey in AddApi) {
+            let ApiOption = AddApi[ApiKey];
+            let SetApi = {
+                ApiKey,
+                Url: ApiOption.Url,
+                Method: ApiOption.Method,
+                Param: ApiOption.Param,
+                OnSuccess: ApiOption.OnSuccess,
+                OnError: ApiOption.OnError,
+                OnComplete: ApiOption.OnComplete,
+                IsUpdateStore: ApiOption.IsUpdateStore ?? true,
+            };
+            this.$ApiStore[ApiKey] = SetApi;
+            this.$EventTrigger(this.#EventName.AddApi, SetApi);
+        }
+        return this;
+    }
+    ApiCall(ApiKey, Option = null) {
+        this.$BaseApiCall(ApiKey, Option, false);
+        return this;
+    }
+    ApiCall_Form(ApiKey, Option = null) {
+        this.$BaseApiCall(ApiKey, Option, true);
+        return this;
+    }
+    $BaseApiCall(ApiKey, Option, IsFormRequest) {
+        let Api = this.$ApiStore[ApiKey];
+        if (Api == null)
+            this.$Throw(`Api setting not found of "${ApiKey}"`);
+        let Param = Option?.Param ?? Api.Param;
+        if (typeof Param === 'function')
+            Param = Param();
+        let IsUpdateStore = Option?.IsUpdateStore ?? Api.IsUpdateStore ?? true;
+        let Url = this.$ConvertTo_ApiDomainUrl(Api.Url, Param?.Query);
+        let FetchRequest = this.$GenerateFetchRequest(Api, Param, IsFormRequest);
+        Api.OnCalling?.call(this, FetchRequest);
+        Option?.OnCalling?.call(this, FetchRequest);
+        fetch(Url, FetchRequest)
+            .then(async (ApiResult) => {
+            if (!ApiResult.ok)
+                throw ApiResult;
+            let ConvertResult = await this.$ProcessApiReturn(ApiResult);
+            if (IsUpdateStore) {
+                let StoreKey = Api.ApiKey;
+                this.UpdateStore(StoreKey, ConvertResult);
+            }
+            Api.OnSuccess?.call(this, ConvertResult);
+            Option?.OnSuccess?.call(this, ConvertResult);
+            return ConvertResult;
+        })
+            .catch(ex => {
+            Api.OnError?.call(this, ex);
+            Option?.OnError?.call(this, ex);
+            this.$Error(ex.message);
+        })
+            .then(ConvertResult => {
+            Api.OnComplete?.call(this, ConvertResult);
+            Option?.OnComplete?.call(this, ConvertResult);
+        });
+    }
+    $GenerateFetchRequest(Api, Param, IsFormRequest) {
+        let Body = Param?.Body;
+        let Header = {
+            Authorization: this.#ApiToken,
+        };
+        let FetchRequest = {
+            method: Api.Method,
+            headers: Header,
+        };
+        if (IsFormRequest) {
+            let SendForm = this.$ConvertTo_FormData(Body, new FormData());
+            SendForm = this.$ConvertTo_FormFile(Param?.File, SendForm);
+            FetchRequest.body = SendForm;
+            FetchRequest.method = 'POST';
+        }
+        else {
+            Header['content-type'] = 'application/json';
+            if (Api.Method == 'POST')
+                FetchRequest.body = JSON.stringify(Body ?? {});
+        }
+        return FetchRequest;
+    }
+    //#endregion
+    //#region Default Use Method
+    UseFormJsonBody(JsonBodyKey = 'Body') {
+        this.WithConvertTo_FormParam((FormDataBody, Form) => {
+            let ConvertParam = {};
+            ConvertParam[JsonBodyKey] = JSON.stringify(FormDataBody);
+            return ConvertParam;
+        });
+        return this;
+    }
+    //#endregion
+    //#region Public Event Add
+    EventAdd_AddApi(EventFunc) {
+        this.$EventAdd(this.#EventName.AddApi, EventFunc);
+        return this;
+    }
+    EventAdd_UpdateStore(EventFunc) {
+        this.$EventAdd(this.#EventName.UpdateStore, EventFunc);
+        return this;
+    }
+    EventAdd_AddStore(EventFunc) {
+        this.$EventAdd(this.#EventName.AddStore, EventFunc);
+        return this;
+    }
+    EventAdd_SetStore(EventFunc) {
+        this.$EventAdd(this.#EventName.SetStore, EventFunc);
+        return this;
+    }
+    //#endregion
+    //#region Protected Event Process
+    $EventAdd(EventName, OnFunc) {
+        if (EventName in this.#OnEventFunc == false)
+            this.#OnEventFunc[EventName] = [];
+        this.#OnEventFunc[EventName].push(OnFunc);
+    }
+    $EventTrigger(EventName, EventArg) {
+        let EventFuncs = this.#OnEventFunc[EventName];
+        if (EventFuncs == null)
+            return;
+        for (let Item of EventFuncs)
+            Item(EventArg);
+    }
+    //#endregion
+    //#region Store Control
+    //#region Public Data Store Contorl
+    UpdateStore(StorePath, StoreData) {
+        this.$RCS_SetStore(StorePath, StoreData, this.Store, {
+            IsDeepSet: true,
+        });
+        this.$EventTrigger(this.#EventName.UpdateStore, {
+            Path: StorePath,
+            Data: StoreData,
+        });
+        return this;
+    }
+    AddStore(StorePath, StoreData = null) {
+        if (this.GetStore(StorePath) != null)
+            return this;
+        this.$RCS_SetStore(StorePath, StoreData, this.Store, {
+            IsDeepSet: true,
+        });
+        this.$EventTrigger(this.#EventName.AddStore, {
+            Path: StorePath,
+            Data: StoreData,
+        });
+        return this;
+    }
+    SetStore(StorePath, StoreData) {
+        this.$RCS_SetStore(StorePath, StoreData, this.Store, {
+            IsDeepSet: false,
+        });
+        this.$EventTrigger(this.#EventName.SetStore, {
+            Path: StorePath,
+            Data: StoreData,
+        });
+        return this;
+    }
+    GetStore(StorePath, Option = null) {
+        Option ??= {
+            CreateIfNull: false,
+            DefaultValue: {},
+        };
+        Option.CreateIfNull ??= false;
+        Option.DefaultValue ??= {};
+        let Result = this.$RCS_GetStore(StorePath, this.Store, {
+            CreateIfNull: Option.CreateIfNull,
+            DefaultValue: Option.DefaultValue,
+        });
+        return Result;
+    }
+    //#endregion
+    //#region Protected Data Store Process
+    $RCS_GetStore(StorePath, FindStore, Option) {
+        if (FindStore == null)
+            return null;
+        let StorePaths = StorePath.split('.');
+        let FirstKey = StorePaths.shift();
+        if (FindStore[FirstKey] == null && Option.CreateIfNull)
+            FindStore[FirstKey] = Option.DefaultValue;
+        let NextStore = FindStore[FirstKey];
+        if (StorePaths.length == 0)
+            return NextStore;
+        let NextKey = StorePaths.join('.');
+        return this.$RCS_GetStore(NextKey, NextStore, Option);
+    }
+    $RCS_SetStore(StorePath, StoreData, FindStore, Option = {
+        IsDeepSet: true,
+    }) {
+        if (StorePath.includes('.')) {
+            let StorePaths = StorePath.split('.');
+            let FirstKey = StorePaths.shift();
+            if (FindStore[FirstKey] == null)
+                FindStore[FirstKey] = {};
+            let NextStore = FindStore[FirstKey];
+            let NextKey = StorePaths.join('.');
+            return this.$RCS_SetStore(NextKey, NextStore, StoreData, Option);
+        }
+        let IsAwaysSet = !Option.IsDeepSet ||
+            FindStore[StorePath] == null ||
+            StoreData == null || typeof StoreData != 'object';
+        if (IsAwaysSet) {
+            FindStore[StorePath] = StoreData;
+            return StoreData;
+        }
+        this.$DeepSetObject(StorePath, StoreData, FindStore);
+        return StoreData;
+    }
+    $DeepSetObject(StorePath, SetData, FindStore) {
+        if (!Array.isArray(SetData)) {
+            this.ForEachObject(SetData, (Key, Value) => {
+                FindStore[StorePath][Key] = Value;
+            });
+            return;
+        }
+        if (!Array.isArray(FindStore[StorePath]))
+            FindStore[StorePath] = [];
+        if (FindStore[StorePath].length > 0)
+            FindStore[StorePath].splice(0, FindStore[StorePath].length);
+        FindStore[StorePath].push(...SetData);
+    }
+    //#endregion
+    //#region File Store
+    AddFileStore(FileStoreKey) {
+        if (this.FileStore[FileStoreKey] == null)
+            this.FileStore[FileStoreKey] = [];
+        return this;
+    }
+    Files(FileStoreKey, MapFunc = null) {
+        let GetFiles = this.FileStore[FileStoreKey];
+        if (GetFiles == null)
+            return [];
+        let MapFiles = MapFunc != null ?
+            GetFiles.map(Item => MapFunc(Item)) :
+            GetFiles.map(Item => Item['File']);
+        return MapFiles;
+    }
+    //#endregion
+    //#endregion
+    //#region Protected Process
+    $ProcessApiReturn(ApiResponse) {
+        let GetContentType = ApiResponse.headers.get("content-type");
+        let ConvertSuccess = null;
+        if (GetContentType && GetContentType.includes('application/json')) {
+            ConvertSuccess = ApiResponse.json()
+                .then(GetJson => GetJson);
+        }
+        else {
+            ConvertSuccess = ApiResponse.text()
+                .then(GetText => GetText);
+        }
+        return ConvertSuccess;
+    }
+    //#endregion
+    //#region Protected ConvertTo
+    $ConvertTo_ApiDomainUrl(Url, Param = null) {
+        let ApiDomainUrl = this.$ClearUrl(Url);
+        if (this.ApiDomain != null && !ApiDomainUrl.includes('http'))
+            ApiDomainUrl = `${this.ApiDomain}/${ApiDomainUrl}`;
+        if (Param != null)
+            ApiDomainUrl = `${ApiDomainUrl}?${this.$ConvertTo_UrlQuery(Param)}`;
+        return ApiDomainUrl;
+    }
+    $ConvertTo_FormData(ConvertFormData, Form) {
+        Form ??= new FormData();
+        if (ConvertFormData == null)
+            return Form;
+        this.#Func_ConvertTo_FormData.forEach(Func => {
+            ConvertFormData = Func(ConvertFormData, Form);
+        });
+        if (ConvertFormData instanceof FormData)
+            return ConvertFormData;
+        this.ForEachObject(ConvertFormData, (Key, Value) => {
+            Form.append(Key, Value);
+        });
+        return Form;
+    }
+    $ConvertTo_FormFile(FileParam, Form) {
+        Form ??= new FormData();
+        if (FileParam == null)
+            return Form;
+        let DefaultKey = 'Files';
+        if (Array.isArray(FileParam)) {
+            this.$AppendFileDataArray(DefaultKey, Form, FileParam);
+            return Form;
+        }
+        if (FileParam instanceof File || FileParam instanceof FileDataType) {
+            this.$AppendFileData(DefaultKey, Form, FileParam);
+            return Form;
+        }
+        let Keys = Object.keys(FileParam);
+        for (let i = 0; i < Keys.length; i++) {
+            let FileKey = Keys[i];
+            let FileValue = FileParam[FileKey];
+            if (Array.isArray(FileValue)) {
+                this.$AppendFileDataArray(FileKey, Form, FileValue);
+                continue;
+            }
+            this.$AppendFileData(FileKey, Form, FileValue);
+        }
+        return Form;
+    }
+    $AppendFileDataArray(FileKey, Form, FileDatas) {
+        FileDatas.forEach(FileData => {
+            this.$AppendFileData(FileKey, Form, FileData);
+        });
+        return Form;
+    }
+    $AppendFileData(FileKey, Form, FileData) {
+        if (FileData instanceof File)
+            Form.append(FileKey, FileData);
+        else
+            Form.append(FileKey, FileData.File);
+        return Form;
+    }
+}
+import { createApp, reactive } from 'vue';
+class VueStore extends ApiStore {
+    $VueProxy = null;
+    $VueOption = {
+        methods: {},
+        components: {},
+        watch: {},
+        computed: {},
+    };
+    $VueApp = null;
+    $VueUse = [];
+    $MountedFuncs = [];
+    constructor() {
+        super();
+        this.#Setup();
+    }
+    //#region Private Setup
+    #Setup() {
+        this
+            .EventAdd_AddApi(Arg => {
+            this.AddStore(Arg.ApiKey);
+        })
+            .EventAdd_UpdateStore(() => {
+            this.ForceUpdate();
+        })
+            .EventAdd_AddStore(() => {
+            this.ForceUpdate();
+        })
+            .EventAdd_SetStore(() => {
+            this.ForceUpdate();
+        });
+    }
+    //#endregion
+    //#region Get/Set Property
+    get Store() {
+        if (this.$VueProxy != null)
+            return this.$VueProxy;
+        return super.Store;
+    }
+    set Store(Store) {
+        super.Store = Store;
+    }
+    //#endregion
+    //#region Public With Method
+    WithVueOption(VueOption = {}) {
+        this.$VueOption = this.DeepObjectExtend(this.$VueOption, VueOption);
+        return this;
+    }
+    WithMounted(MountedFunc = () => { }) {
+        this.$MountedFuncs.push(MountedFunc);
+        return this;
+    }
+    WithComponent(Component = {}) {
+        this.$VueOption.components = this.DeepObjectExtend(this.$VueOption.components, Component);
+        return this;
+    }
+    //#endregion
+    //#region Public Method
+    ForceUpdate() {
+        this.$VueProxy?.$forceUpdate();
+        return this;
+    }
+}
+class VueCmd extends VueStore {
+    //#region Path Command
+    AddV_Text(DomName, StorePath) {
+        this.$AddCommand(DomName, StorePath, 'v-text');
+        return this;
+    }
+    AddV_Model(DomName, StorePath) {
+        this.$AddCommand(DomName, StorePath, 'v-model');
+        return this;
+    }
+    AddV_Slot(DomName, SlotKey, StorePath) {
+        this.$AddCommand(DomName, StorePath, `v-slot:${SlotKey}`);
+        return this;
+    }
+    //#endregion
+    //#region Path/Function Command
+    AddV_For(DomName, StorePath) {
+        this.$AddCommand(DomName, StorePath, 'v-for');
+        return this;
+    }
+    AddV_If(DomName, StorePath) {
+        this.$AddCommand(DomName, StorePath, 'v-if');
+        return this;
+    }
+    AddV_Show(DomName, StorePath) {
+        this.$AddCommand(DomName, StorePath, 'v-show');
+        return this;
+    }
+    AddV_Bind(DomName, StorePath) {
+        this.$AddCommand(DomName, StorePath, 'v-bind');
+        return this;
+    }
+    AddV_On(DomName, EventName, EventFunc) {
+        this.$AddCommand(DomName, EventFunc, `v-on:${EventName}`);
+        return this;
+    }
+    //#endregion
+    //#region Customer Command
+    AddV_OnChange(DomName, ChangeFunc) {
+        this.AddV_On(DomName, 'change', ChangeFunc);
+        return this;
+    }
+    AddV_Click(DomName, ClickFunc) {
+        this.AddV_On(DomName, 'click', ClickFunc);
+        return this;
+    }
+    AddV_Function(FuncName, Func) {
+        this.$VueOption.methods[FuncName] = Func;
+        return this;
+    }
+    AddV_Watch(WatchPath, Func, Deep = false, Option = {}) {
+        let SetWatch = {
+            handler: Func,
+            deep: Deep,
+            ...Option,
+        };
+        this.$VueOption.watch[WatchPath] = SetWatch;
+        return this;
+    }
+    //#endregion
+    //#region Property Method
+    AddV_Property(PropertyPath, Option) {
+        let SetStore = this.Store;
+        let PropertyKey = PropertyPath;
+        if (PropertyPath.includes('.')) {
+            let PropertyPaths = PropertyPath.split('.');
+            PropertyKey = PropertyPaths.pop();
+            let FindPath = PropertyPaths.join('.');
+            SetStore = this.GetStore(FindPath, {
+                CreateIfNull: true,
+                DefaultValue: {},
+            });
+        }
+        let SetProperty = this.$BaseAddProperty(SetStore, PropertyKey, Option);
+        if (Option.Bind) {
+            if (!Array.isArray(Option.Bind))
+                Option.Bind = [Option.Bind];
+            for (let BindPath of Option.Bind) {
+                this.AddV_Property(BindPath, {
+                    Target: PropertyPath,
+                });
+            }
+            SetProperty['Bind'] = Option.Bind;
+        }
+        return this;
+    }
+    $BaseAddProperty(PropertyStore, PropertyKey, Option) {
+        let ThisModel = this;
+        let PropertyContent = {
+            get() {
+                if (Option.Target == null)
+                    return this[`$${PropertyKey}`];
+                return ThisModel.GetStore(Option.Target);
+            },
+            set(Value) {
+                if (Option.Target == null)
+                    this[`$${PropertyKey}`] = Value;
+                else
+                    ThisModel.SetStore(Option.Target, Value);
+            }
+        };
+        let HasGet = Option.get != null;
+        let HasSet = Option.set != null;
+        if (HasGet || HasSet) {
+            PropertyContent = {};
+            if (HasGet)
+                PropertyContent.get = Option.get;
+            if (HasSet)
+                PropertyContent.set = Option.set;
+        }
+        let SetProperty = Object.defineProperty(PropertyStore, PropertyKey, PropertyContent);
+        if (Option.Value != null && HasSet)
+            SetProperty[PropertyKey] = Option.Value;
+        return SetProperty;
+    }
+    //#endregion
+    //#region Protected Process
+    $AddCommand(DomName, StorePath, Command) {
+        Queryer.Using(DomName, ({ Dom }) => {
+            if (StorePath instanceof Function) {
+                this.$SetFuncCommand(DomName, StorePath, Command);
+                return;
+            }
+            this.$SetAttribute(Dom, Command, StorePath, {
+                Command,
+                StorePath,
+                DomName,
+            });
+        });
+    }
+    $SetAttribute(Dom, AttrName, AttrValue, Option) {
+        if (Dom == null) {
+            let Tail = [];
+            if (Option?.Command)
+                Tail.push(Option.Command);
+            if (Option?.StorePath)
+                Tail.push(Option.StorePath);
+            let TailMessage = Tail.join(', ');
+            let Message = `Dom Element is null. ${TailMessage}`;
+            console.warn(Message);
+            return;
+        }
+        Dom.setAttribute(AttrName, AttrValue);
+    }
+    //#region Function Control
+    $RandomFuncName(BaseFuncName) {
+        return `${BaseFuncName}${this.GenerateId()}`.replace(/[-:]/g, '_');
+    }
+    $SetFuncCommand(DomName, EventFunc, Command) {
+        let FuncName = this.$RandomFuncName(`${DomName}_${Command}_`);
+        this.AddV_Function(FuncName, EventFunc);
+        this.$AddCommand(DomName, FuncName, Command);
+    }
+}
+class VueModel extends VueCmd {
+    $IsInited = false;
+    $MountId = null;
+    $QueryAttribute = null;
+    constructor() {
+        super();
+    }
+    //#region With Method
+    WithMountId(MountId) {
+        this.$MountId = MountId;
+        return this;
+    }
+    WithQueryAttribute(QueryAttribute) {
+        this.$QueryAttribute = QueryAttribute;
+        return this;
+    }
+    //#endregion
+    //#region Public Method
+    Init() {
+        if (this.$IsInited)
+            return this;
+        this.Store = reactive(this.Store);
+        let GetStore = this.Store;
+        let MountedFunc = this.$MountedFuncs;
+        this.$VueApp = createApp({
+            ...this.$VueOption,
+            data() {
+                return GetStore;
+            },
+            mounted: () => {
+                for (let Func of MountedFunc)
+                    Func();
+            }
+        });
+        for (let Item of this.$VueUse)
+            this.$VueApp.use(Item);
+        this.$VueProxy = this.$VueApp.mount(`#${this.$MountId}`);
+        this.$IsInited = true;
+        return this;
+    }
+    Using(UseFunc = () => { }) {
+        UseFunc();
+        return this;
+    }
+}
+var Model = new VueModel();
+export { Model, CommonFunc, ApiStore, VueStore, };
+//# sourceMappingURL=VueModel.js.map