@vtj/designer 0.7.0

package/dist/style.css

@@ -0,0 +1 @@
+::-webkit-scrollbar{z-index:11;width:6px}::-webkit-scrollbar:horizontal{height:6px}::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#0000001a}::-webkit-scrollbar-corner{background:transparent}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-track-piece{background:transparent;width:6px}html,body{height:100%;width:100%;padding:0;margin:0;background-color:var(--el-bg-color);font-size:14px;color:var(--el-text-color-primary)}.v-panel>.x-panel__header{padding:0 5px 0 10px!important}.v-panel .el-empty{--el-empty-padding: 10px 0;--el-empty-description-margin-top: 10px}.v-sub-panel>.x-panel__body{background-color:var(--el-bg-color)}.v-sub-panel .x-header__content{color:var(--el-text-color-regular)}.v-sub-panel .el-form-item{margin-bottom:10px}.v-sub-panel .el-form-item:last-child{margin-bottom:0!important}.v-sub-panel .v-sub-panel+.v-sub-panel{margin-top:10px}.v-sub-panel .v-sub-panel .x-header__content{font-weight:400}.v-tabs__header{display:flex;justify-content:space-between;align-items:center;height:30px!important}.v-tabs__tabs{flex-grow:1;flex-shrink:1;overflow:hidden;margin-bottom:0!important}.v-tabs__tabs .el-tabs__header .el-tabs__nav{border-radius:0!important;border-top:none!important;border-left:none!important}.v-tabs__tabs .el-tabs__item.is-active{background-color:var(--el-fill-color-lighter)!important;border-bottom-color:var(--el-fill-color-lighter)!important}.v-tabs__actions{padding-right:5px;padding-left:5px;border-bottom:1px solid var(--el-border-color-light);height:30px;display:flex;justify-content:center;align-items:center}.v-tabs__checked{opacity:0}.v-tabs__checked.is-checked{opacity:1}.v-tabs>.x-panel__body{background-color:var(--el-fill-color-lighter)}.v-item{padding:3px 5px;border-radius:4px;font-size:14px;margin-bottom:4px;min-height:28px;border:1px solid transparent;cursor:pointer}.v-item:hover{border:1px dashed var(--el-color-primary-light-7)!important;background-color:var(--el-color-primary-light-9)!important}.v-item .el-switch--small{height:16px}.v-item .x-action__inner:hover{background-color:var(--el-color-primary-light-7)}.v-item__switch{margin-left:5px}.v-item__index{font-size:12px;color:var(--el-text-color-secondary);display:inline-block;width:30px}.v-item__tag{margin-right:10px;zoom:.7}.v-item__title>.x-icon{margin-right:3px}.v-item__subtitle{margin-left:5px;font-style:italic;opacity:.5}.v-item.is-small{min-height:24px;height:24px}.v-item.is-active{background-color:var(--el-color-primary-light-9)!important;color:var(--el-color-primary)!important}.v-item.is-background{background-color:var(--el-fill-color-lighter)}.v-item.is-border{border:1px dashed var(--el-border-color-lighter)}.v-item.is-hover>.v-item__actions{display:none}.v-item.is-hover:hover>.v-item__actions{display:block}.v-box{position:relative;height:60px;overflow:hidden;background-color:var(--el-fill-color-lighter);border:1px dashed transparent;padding:10px;border-radius:4px;flex-wrap:1;flex-shrink:1;margin-bottom:5px}.v-box:hover{border:1px dashed var(--el-border-color-light)}.v-box:hover .v-box__footer{opacity:1}.v-box.is-active{background-color:var(--el-color-primary-light-9)}.v-box.is-draggable{cursor:move}.v-box__footer{position:absolute;opacity:0;width:100%;height:20px;bottom:0;left:0;background-color:#00000008;font-size:12px;padding:0 10px}.v-box__footer>.x-icon{cursor:pointer}.v-box__name{font-size:14px;color:var(--el-color-primary-light-3);line-height:1.5em}.v-box__label{font-size:12px;color:var(--el-text-color-regular);line-height:1.5em}.v-binder__tabs .x-panel__header{background-color:var(--el-bg-color)!important;padding:0!important}.v-binder__tabs .el-tabs__item{border-top:1px solid var(--el-border-color-light)!important}.v-binder__tab-content{background-color:var(--el-bg-color);border-radius:4px;overflow:auto}.v-binder__tab-content .el-divider__text{font-size:12px;color:var(--el-text-color-regular)}.v-binder__tab-content .el-divider--horizontal{margin:14px 0}.v-binder__form{width:100%}.v-context-viewer .el-tree{--el-tree-node-hover-bg-color: transparent}.v-context-viewer .el-tree .v-item{margin:0}.v-context-viewer .el-tree-node__content{height:28px}.v-slots-picker__content{padding:20px 0}.v-slots-picker__item{border:1px solid var(--el-border-color);padding:10px;border-radius:4px;text-align:center;cursor:pointer;position:relative;font-size:14px;min-width:120px}.v-slots-picker__item:hover{background-color:var(--el-color-primary-light-9)}.v-slots-picker__item.is-active{background-color:var(--el-color-primary-light-9);color:var(--el-color-primary);border:1px solid var(--el-color-primary)}.v-slots-picker__sn{position:absolute;left:0;top:0;padding:10px;color:var(--el-text-color-placeholder)}.v-viewport{width:100%;height:100%;position:absolute;left:0;top:0;background-color:var(--el-fill-color-dark);overflow:hidden}.v-code-editor{overflow:hidden;width:100%}.v-code-editor.is-border{border:1px solid var(--el-border-color)}.v-skeleton{width:100%;height:100%;overflow:hidden;background-color:var(--el-bg-color);font-size:14px;color:var(--el-text-color-primary)}.v-skeleton__header{padding:0!important;display:flex;justify-content:space-between;align-items:center;padding:0 10px}.v-skeleton__main{border-left:1px solid var(--el-border-color);border-right:1px solid var(--el-border-color);padding:0!important}.v-skeleton__wrapper{border-top:1px solid var(--el-border-color);border-bottom:1px solid var(--el-border-color)}.v-skeleton__footer{padding:0!important;font-size:12px;align-items:center;display:flex}.v-skeleton__left.is-resizing{border-right:2px solid var(--el-color-primary)}.v-skeleton__left.is-collapsed{width:49px!important;overflow:hidden}.v-skeleton__right.is-resizing{border-left:2px solid var(--el-color-primary)}.v-brand-region{text-align:left;white-space:nowrap;display:flex;align-items:center;flex-grow:1;flex-shrink:1;width:30%}.v-toolbar-region{text-align:center;white-space:nowrap;flex-grow:0;display:flex;justify-content:center}.v-actions-region{flex-grow:1;flex-shrink:1;display:flex;justify-content:flex-end;width:30%;white-space:nowrap}.v-actions-region .el-badge__content{zoom:.9;top:3px!important;margin-right:2px}.v-apps-region{display:flex;height:100%;overflow:hidden}.v-apps-region__header{width:50px;height:100%;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--el-border-color);text-align:center;color:var(--el-text-color-primary);flex-shrink:0}.v-apps-region__icon{padding:8px 0;cursor:pointer;font-size:20px;border-left:2px solid transparent;border-top:1px solid transparent;border-bottom:1px solid transparent}.v-apps-region__icon:first-child{border-top:1px solid transparent}.v-apps-region__icon i{margin-left:-2px}.v-apps-region__icon:hover,.v-apps-region__icon.is-active{color:var(--el-color-primary)}.v-apps-region__icon.is-open{border-left:2px solid var(--el-color-primary);background-color:var(--el-bg-color);margin-right:-1px;border-top:1px solid var(--el-border-color);border-bottom:1px solid var(--el-border-color)}.v-apps-region__icon.is-open:first-child{border-top:1px solid transparent}.v-apps-region__icon.is-open i{margin-left:-3px}.v-apps-region__panels{flex-grow:1;overflow:hidden}.v-settings-region{overflow:hidden}.v-settings-region>.el-empty{height:100%}.v-settings-region__header{height:30px;padding:0 10px;border-bottom:1px solid var(--el-border-color)}.v-settings-region__title span{font-size:12px;padding-left:5px;color:var(--el-text-color-regular)}.v-settings-region__title span i{padding-left:5px;color:var(--el-text-color-secondary)}.v-logo-widget{font-size:18px;font-weight:700;color:var(--el-color-primary);width:50px;text-align:center;text-shadow:0 0 1px var(--el-border-color)}.v-logo-widget__icon{width:24px;height:24px;display:inline-block;vertical-align:bottom}.v-switcher-widget{padding-left:10px;color:var(--el-text-color-secondary);font-size:14px}.v-switcher-widget__back{margin-right:5px}.v-toolbar-widget{width:200px;text-align:center;white-space:nowrap}.v-toolbar-widget .el-radio-group{display:inline-block;vertical-align:middle;margin-right:5px;position:relative}.v-toolbar-widget .el-radio-group .el-radio-button__inner{padding:5px 10px 4px}.v-toolbar-widget .el-input-group{width:100px;line-height:24px;margin-right:20px}.v-toolbar-widget .el-input-group .el-button{height:24px;padding:6px}.v-toolbar-widget .el-input-group .el-input__inner{text-align:center}.v-toolbar-widget .el-input-group__append,.v-toolbar-widget .el-input-group__prepend{padding:0 15px}.v-actions-widget{padding:0 10px}.v-actions-widget .el-button+.el-button,.v-actions-widget .el-dropdown+.el-dropdown{margin-left:5px}.v-actions-widget .el-button:focus-visible{outline:none}.v-actions-widget .el-dropdown .el-dropdown__caret-button{width:20px}.v-actions-widget .el-button-group .el-button{margin-left:0!important}.v-designer{width:100%;height:100%;box-sizing:border-box;position:relative;overflow:auto}.v-designer iframe{width:100%;height:100%;border:none}.v-designer .el-empty{position:absolute;width:100%;height:100%;background-color:var(--el-bg-color)}.v-designer__hover{border:2px dashed var(--el-color-warning-dark-2);background-color:#e6a23c1a;position:absolute;left:0;top:0;pointer-events:none;border-radius:4px}.v-designer__hover>span{display:inline-block;color:var(--el-color-warning-dark-2);position:absolute;background-color:var(--el-color-warning-light-7);border-radius:4px;font-size:12px;padding:4px 8px;white-space:nowrap;box-shadow:var(--el-box-shadow-lighter);z-index:10}.v-designer__hover>span>i{color:var(--el-text-color-secondary)}.v-designer__hover>span.is-inner{left:4px;top:4px}.v-designer__hover>span.is-left-top{left:-2px;top:-4px;transform:translateY(-100%)}.v-designer__hover>span.is-left-bottom{left:-2px;bottom:-4px;transform:translateY(100%)}.v-designer__hover>span.is-right-top{right:0;top:-4px;transform:translateY(-100%)}.v-designer__hover>span.is-right-bottom{right:0;bottom:-4px;transform:translateY(100%)}.v-designer__dropping{border:4px solid var(--el-color-success-dark-2);border-radius:4px;background-color:#529b2e1a;position:absolute;pointer-events:none;z-index:20}.v-designer__dropping.is-inner{border:2px solid var(--el-color-success-dark-2)}.v-designer__selected{border:2px solid var(--el-color-primary-dark-2);border-radius:4px;background-color:#409eff1a;position:absolute;left:0;top:0;pointer-events:none;z-index:10}.v-designer__placeholder{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:16px;color:var(--el-text-color-placeholder);opacity:.6;pointer-events:none}.v-actions{position:absolute;pointer-events:initial;font-size:12px;white-space:nowrap;display:flex}.v-actions>.x-action,.v-actions>.x-action-bar{background-color:var(--el-color-primary-dark-2);border-radius:4px;padding:2px 5px;box-shadow:var(--el-box-shadow-lighter)}.v-actions>.x-action .x-action__inner,.v-actions>.x-action-bar .x-action__inner{color:var(--el-color-primary-light-9)}.v-actions>.x-action-bar{margin-left:5px}.v-actions .x-action:hover{background-color:var(--el-color-primary);border-radius:4px}.v-actions.is-inner{right:2px;top:2px}.v-actions.is-left-top{left:-2px;top:-4px;transform:translateY(-100%)}.v-actions.is-left-bottom{left:0;bottom:-4px;transform:translateY(100%)}.v-actions.is-right-top{right:0;top:-4px;transform:translateY(-100%)}.v-actions.is-right-bottom{right:-2px;bottom:-4px;transform:translateY(100%)}.v-components-widget__search{margin-bottom:10px}.v-components-widget__list .el-collapse{--el-collapse-header-height: 36px !important}.v-components-widget .x-tabs{flex-grow:1;flex-direction:column;display:flex;overflow:hidden;margin-bottom:0!important}.v-components-widget .el-tabs__content{overflow:auto;overflow-x:hidden;padding-top:15px}.v-outline-widget .el-tree{--el-tree-node-hover-bg-color: transparent}.v-outline-widget .el-tree .v-item{margin:0}.v-outline-widget .el-tree-node__content{height:28px}.v-outline-widget .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{background-color:transparent}.v-outline-widget .v-item__subtitle{font-size:12px}.v-outline-widget .v-item__title>.x-icon{color:var(--el-color-warning)}.v-outline-widget .is-drop-inner .is-drop-inner{background:var(--el-color-warning-light-8)}.v-outline-widget .is-drop-inner .is-drop-inner .v-item{opacity:.6}.v-outline-widget__item.is-dragging{background:var(--el-color-danger-light-8);opacity:.5}.v-outline-widget__item.is-locked{color:var(--el-color-warning)!important}.v-outline-widget__item.is-locked .v-item__title>.x-icon{color:var(--el-color-warning)}.v-outline-widget__item.is-invisible{color:var(--el-color-danger);cursor:not-allowed!important}.v-outline-widget__item.is-invisible:hover{background-color:var(--el-fill-color-lighter)!important}.v-outline-widget__item.is-invisible .v-item__title>.x-icon{color:var(--el-color-danger)}.v-drawer .el-drawer__header{margin-bottom:0}.v-pages-widget .el-tree{--el-tree-node-hover-bg-color: transparent}.v-pages-widget .el-tree .v-item{margin:0}.v-pages-widget .el-tree-node__content{height:28px}.v-pages-widget .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{background-color:transparent}.v-pages-widget .v-item__subtitle{font-size:12px}.v-pages-widget .is-drop-inner .is-drop-inner{background:var(--el-color-warning-light-8)}.v-pages-widget .is-drop-inner .is-drop-inner .v-item{opacity:.6}.v-previewer{width:100%;height:100%;position:relative}.v-previewer iframe{width:100%;height:100%}.v-nodepath-widget{font-size:12px;padding:0 20px}.v-nodepath-widget .el-breadcrumb__item{cursor:pointer;font-size:12px}.v-docs-widget{overflow:hidden}.v-docs-widget iframe{width:100%;height:100%;border:none;display:block}.v-setter .el-form-item__label .el-tooltip__trigger{border-bottom:1px dashed var(--el-color-primary);cursor:help}.v-setter .el-select{display:block}.v-setter__content{display:flex;flex-direction:row;justify-content:space-between;width:100%;align-items:center}.v-setter__input{flex-grow:1}.v-setter__action{font-size:14px;white-space:nowrap}.v-setter__action .el-dropdown.is-disabled{opacity:.6}.v-setter__action .el-dropdown.is-disabled i{cursor:not-allowed}.v-setter__action i{cursor:pointer;color:var(--el-text-color-secondary);background-color:var(--el-color-primary-light-9);margin-left:3px;padding:4px;border-radius:4px}.v-setter__action i:hover,.v-setter__action i.is-active{color:var(--el-color-primary);background-color:var(--el-color-primary-light-9)}.v-setter-switch .is-placeholder{opacity:0}.v-expression-setter .el-input__inner{text-align:center}.v-icon-setter .el-input-group__prepend{background-color:var(--el-fill-color-blank)}.v-icon-setter__list{display:inline-block;flex-grow:1;height:1px;overflow:auto;position:relative;margin:10px 0}.v-icon-setter__list .x-icon{width:50px;height:50px;margin:5px;font-size:20px;border:1px dashed var(--el-border-color);border-radius:4px;text-align:center;line-height:48px}.v-icon-setter__list .x-icon:hover{border:1px solid #409eff;cursor:pointer}.v-icon-setter__list .x-icon.is-active{background-color:#409eff;color:#fff;border:none}.v-icon-setter__list .x-icon+.x-icon{margin-left:0}.v-icon-setter__content{height:100%;display:flex;flex-direction:column}.v-json-setter.is-active .el-input__suffix{color:var(--el-color-primary)}.v-number-setter{width:100%!important}.v-function-setter.is-active .el-input__suffix{color:var(--el-color-primary)}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@vtj/designer",
+  "private": false,
+  "version": "0.7.0",
+  "type": "module",
+  "scripts": {
+    "build": "vue-tsc && vite build",
+    "test": "vitest run",
+    "vitest": "vitest",
+    "coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@vtj/core": "^0.7.0",
+    "@vtj/icons": "^0.7.0",
+    "@vtj/renderer": "^0.7.0",
+    "@vtj/ui": "^0.7.0",
+    "@vtj/utils": "^0.7.0",
+    "monaco-editor": "~0.45.0"
+  },
+  "devDependencies": {
+    "@vtj/cli": "^0.7.0",
+    "vue": "~3.4.14",
+    "vue-router": "~4.2.5"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "types/index.d.ts",
+  "exports": {
+    "./dist/style.css": "./dist/style.css",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "b65d1b19322cbd0721173d094db1b5ece018d980"
+}

package/types/components/binders/event.d.ts

@@ -0,0 +1,20 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ExtractPropTypes, PropType } from 'vue';
+import { type Context } from '@vtj/renderer';
+import { BlockModel, type NodeEvent } from '@vtj/core';
+export interface Props {
+    context: Context | null;
+    current: BlockModel | null;
+    name: string;
+    event?: NodeEvent;
+}
+declare const _default: DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};

package/types/components/binders/index.d.ts

@@ -0,0 +1,3 @@
+import VariableBinder from "./variable";
+import EventBinder from "./event";
+export { VariableBinder, EventBinder };

package/types/components/binders/variable.d.ts

@@ -0,0 +1,19 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ExtractPropTypes, PropType } from 'vue';
+import { type Context } from '@vtj/renderer';
+import { BlockModel } from '@vtj/core';
+export interface Props {
+    context: Context | null;
+    current: BlockModel | null;
+    value?: string;
+}
+declare const _default: DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};

package/types/components/editor/Editor.d.ts

@@ -0,0 +1,65 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ExtractPropTypes, PropType } from 'vue';
+import { editor as monacoEditor } from 'monaco-editor';
+export interface Props {
+    lang?: string;
+    modelValue?: string;
+    options?: monacoEditor.IEditorConstructionOptions;
+    height?: string;
+    readonly?: boolean;
+    dark?: boolean;
+    border?: boolean;
+    minimap?: boolean;
+}
+declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    height: string;
+    lang: string;
+    modelValue: string;
+    readonly: boolean;
+    dark: boolean;
+    minimap: boolean;
+    options: () => {};
+}>, {
+    getEditor: () => monacoEditor.IStandaloneCodeEditor | null;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+    blur: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    height: string;
+    lang: string;
+    modelValue: string;
+    readonly: boolean;
+    dark: boolean;
+    minimap: boolean;
+    options: () => {};
+}>>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    height: string;
+    lang: string;
+    modelValue: string;
+    options: monacoEditor.IEditorConstructionOptions;
+    readonly: boolean;
+    dark: boolean;
+    minimap: boolean;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/types/components/editor/index.d.ts

@@ -0,0 +1,86 @@
+import { editor } from 'monaco-editor';
+import { DefineComponent, PropType, ComponentOptionsMixin, PublicProps, ExtractPropTypes } from 'vue';
+declare const _default: DefineComponent<{
+    height: {
+        type: PropType<string>;
+        default: string;
+    };
+    lang: {
+        type: PropType<string>;
+        default: string;
+    };
+    modelValue: {
+        type: PropType<string>;
+        default: string;
+    };
+    options: {
+        type: PropType<editor.IEditorConstructionOptions>;
+        default: () => {};
+    };
+    readonly: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    dark: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    border: {
+        type: PropType<boolean>;
+    };
+    minimap: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}, {
+    getEditor: () => editor.IStandaloneCodeEditor | null;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+    blur: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<{
+    height: {
+        type: PropType<string>;
+        default: string;
+    };
+    lang: {
+        type: PropType<string>;
+        default: string;
+    };
+    modelValue: {
+        type: PropType<string>;
+        default: string;
+    };
+    options: {
+        type: PropType<editor.IEditorConstructionOptions>;
+        default: () => {};
+    };
+    readonly: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    dark: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    border: {
+        type: PropType<boolean>;
+    };
+    minimap: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    height: string;
+    lang: string;
+    modelValue: string;
+    options: editor.IEditorConstructionOptions;
+    readonly: boolean;
+    dark: boolean;
+    minimap: boolean;
+}, {}>;
+export default _default;

package/types/components/hooks/index.d.ts

@@ -0,0 +1,15 @@
+export * from './useDeps';
+export * from './useRegion';
+export * from './useColSpan';
+export * from './useBlocks';
+export * from './useAssets';
+export * from './useCurrent';
+export * from './useDesigner';
+export * from './useSelected';
+export * from './useBinder';
+export * from './useNodeProps';
+export * from './useHistory';
+export * from './useProject';
+export * from './useNodeEvents';
+export * from './useDirectives';
+export * from './useDataSources';

package/types/components/hooks/useAssets.d.ts

@@ -0,0 +1,19 @@
+import { Ref, ComputedRef } from 'vue';
+import { MaterialDescription } from '@vtj/core';
+import { type AssetGroup } from '../../framework';
+export declare function useAssets(): {
+    components: MaterialDescription[];
+    groups: Ref<AssetGroup[]>;
+    componentMap: Map<string, MaterialDescription>;
+    groupMap: ComputedRef<Record<string, AssetGroup>>;
+    tabs: ComputedRef<{
+        label: string;
+        name: string;
+        disabled: boolean;
+    }[]>;
+    model: Record<string, any>;
+    currentTab: Ref<string>;
+    currentGroup: ComputedRef<AssetGroup>;
+    searchKey: Ref<string>;
+    searchResult: ComputedRef<MaterialDescription[]>;
+};

package/types/components/hooks/useBinder.d.ts

@@ -0,0 +1,12 @@
+import { Ref, ComputedRef, type MaybeRef } from 'vue';
+import { BlockModel } from '@vtj/core';
+import { type Context } from '@vtj/renderer';
+export interface BinderOption {
+    title: string;
+    items: string[];
+}
+export declare function useBinder(currentRef: MaybeRef<BlockModel | null>, contextRef: MaybeRef<Context | null>): {
+    keyword: Ref<string>;
+    options: ComputedRef<BinderOption[]>;
+    searchResult: ComputedRef<BinderOption[]>;
+};

package/types/components/hooks/useBlocks.d.ts

@@ -0,0 +1,7 @@
+import { BlockFile } from '@vtj/core';
+import { Engine } from '../../framework';
+import { ShallowReactive, ComputedRef } from 'vue';
+export declare function useBlocks(): {
+    engine: ShallowReactive<Engine>;
+    blocks: ComputedRef<BlockFile[]>;
+};

package/types/components/hooks/useColSpan.d.ts

@@ -0,0 +1,6 @@
+import { Engine } from '../../framework';
+import { ComputedRef, ShallowReactive } from 'vue';
+export declare function useColSpan(): {
+    span: ComputedRef<number>;
+    engine: ShallowReactive<Engine>;
+};

package/types/components/hooks/useCurrent.d.ts

@@ -0,0 +1,10 @@
+import { Context } from '@vtj/renderer';
+import { BlockModel } from '@vtj/core';
+import { Engine } from '../../framework';
+import { ShallowReactive, ComputedRef } from 'vue';
+export declare function useCurrent(): {
+    engine: ShallowReactive<Engine>;
+    current: ComputedRef<BlockModel | null>;
+    isEmpty: ComputedRef<boolean>;
+    context: ComputedRef<Context | null>;
+};

package/types/components/hooks/useDataSources.d.ts

@@ -0,0 +1,8 @@
+import { ProjectModel, ApiSchema } from '@vtj/core';
+import { Engine } from '../..';
+import { ShallowReactive, ComputedRef } from 'vue';
+export declare function useDataSources(): {
+    engine: ShallowReactive<Engine>;
+    project: ComputedRef<ProjectModel | null>;
+    apis: ComputedRef<ApiSchema[]>;
+};

package/types/components/hooks/useDeps.d.ts

@@ -0,0 +1,7 @@
+import { Dependencie } from '@vtj/core';
+import { Engine } from '../../framework';
+import { ShallowReactive, ComputedRef } from 'vue';
+export declare function useDeps(): {
+    engine: ShallowReactive<Engine>;
+    dependencies: ComputedRef<Dependencie[]>;
+};

package/types/components/hooks/useDesigner.d.ts

@@ -0,0 +1,33 @@
+import { Designer, VtjElement } from '../../framework';
+import { ComputedRef, type Ref } from 'vue';
+import { NodeModel, BlockModel, DropPosition, type Dependencie } from '@vtj/core';
+export declare function useDesigner(iframe: Ref<HTMLIFrameElement | undefined>, dependencies: Ref<Dependencie[]>): {
+    designer: ComputedRef<Designer | null>;
+    dropping: ComputedRef<{
+        style: Record<string, any>;
+        position: string;
+        model: NodeModel | BlockModel;
+        el: VtjElement;
+        rect: DOMRect;
+        type?: DropPosition | undefined;
+        path?: (NodeModel | BlockModel)[] | undefined;
+    } | null>;
+    hover: ComputedRef<{
+        style: Record<string, any>;
+        position: string;
+        model: NodeModel | BlockModel;
+        el: VtjElement;
+        rect: DOMRect;
+        type?: DropPosition | undefined;
+        path?: (NodeModel | BlockModel)[] | undefined;
+    } | null>;
+    selected: ComputedRef<{
+        style: Record<string, any>;
+        position: string;
+        model: NodeModel | BlockModel;
+        el: VtjElement;
+        rect: DOMRect;
+        type?: DropPosition | undefined;
+        path?: (NodeModel | BlockModel)[] | undefined;
+    } | null>;
+};

package/types/components/hooks/useDirectives.d.ts

@@ -0,0 +1,17 @@
+import { ShallowReactive, type ComputedRef } from 'vue';
+import { NodeModel, DirectiveModel, type JSExpression, type NodeDirectiveIterator } from '@vtj/core';
+import { Engine, type DesignHelper } from '../../framework';
+export declare const createEmptyDirective: (name: string, iterator?: NodeDirectiveIterator) => DirectiveModel;
+export declare const createModelDirective: (prop?: string) => DirectiveModel;
+export declare function useDirectives(selected: ComputedRef<DesignHelper | null | undefined>): {
+    engine: ShallowReactive<Engine>;
+    node: ComputedRef<NodeModel | null>;
+    vIf: ComputedRef<DirectiveModel>;
+    vShow: ComputedRef<DirectiveModel>;
+    vBind: ComputedRef<DirectiveModel>;
+    vFor: ComputedRef<DirectiveModel>;
+    vModels: ComputedRef<DirectiveModel[]>;
+    onValueChange: (name: "vShow" | "vIf" | "vBind" | "vFor", value: JSExpression) => void;
+    onForChange: (name: string, value: any) => void;
+    onModelChange: (index: string, value: any) => void;
+};

package/types/components/hooks/useHistory.d.ts

@@ -0,0 +1,13 @@
+import { HistoryModel } from '@vtj/core';
+import { Engine } from '../../framework';
+import { ShallowReactive, ComputedRef } from 'vue';
+export declare function useHistory(): {
+    engine: ShallowReactive<Engine>;
+    history: ComputedRef<HistoryModel | null>;
+    total: ComputedRef<number>;
+    forward: () => void;
+    backward: () => void;
+    load: (id: string) => void;
+    forwardDisabled: ComputedRef<boolean>;
+    backwardDisabled: ComputedRef<boolean>;
+};

package/types/components/hooks/useNodeEvents.d.ts

@@ -0,0 +1,17 @@
+import { type ComputedRef } from 'vue';
+import { type NodeEvent } from '@vtj/core';
+import { type DesignHelper } from '../../framework';
+export declare function useNodeEvents(selected: ComputedRef<DesignHelper | null | undefined>): {
+    mouseEventList: ComputedRef<{
+        name: string;
+        event: NodeEvent;
+    }[]>;
+    keyboardEventList: ComputedRef<{
+        name: string;
+        event: NodeEvent;
+    }[]>;
+    componentEventList: ComputedRef<{
+        name: string;
+        event: NodeEvent;
+    }[]>;
+};

package/types/components/hooks/useNodeProps.d.ts

@@ -0,0 +1,13 @@
+import { type ComputedRef } from 'vue';
+import { NodeModel, type MaterialSetter, type MaterialProp } from '@vtj/core';
+import { type DesignHelper } from '../../framework';
+export declare function useNodeProps(selected: ComputedRef<DesignHelper | null | undefined>): {
+    commonProps: ComputedRef<MaterialSetter[]>;
+    componentProps: ComputedRef<MaterialProp[]>;
+    customProps: ComputedRef<MaterialProp[]>;
+    node: ComputedRef<NodeModel | null>;
+    change: (name: string, value: any) => void;
+    addCustom: (name: string) => void;
+    removeCustom: (name: string) => void;
+    isExist: (name: string) => boolean;
+};

package/types/components/hooks/useProject.d.ts

@@ -0,0 +1,7 @@
+import { ProjectModel } from '@vtj/core';
+import { Engine } from '../../framework';
+import { ShallowReactive, ComputedRef } from 'vue';
+export declare function useProject(): {
+    engine: ShallowReactive<Engine>;
+    project: ComputedRef<ProjectModel | null>;
+};

package/types/components/hooks/useRegion.d.ts

@@ -0,0 +1,6 @@
+import { ComputedRef, Ref, type MaybeRef } from 'vue';
+import { Widget, RegionType } from '../../framework';
+export declare function useRegion(region: MaybeRef<RegionType>, group?: MaybeRef<string>): {
+    widgets: ComputedRef<Widget[]>;
+    widgetsRef: Ref<any>;
+};

package/types/components/hooks/useSelected.d.ts

@@ -0,0 +1,8 @@
+import { ShallowReactive, ComputedRef } from 'vue';
+import { Engine, DesignHelper, Designer } from '../../framework';
+export declare function useSelected(): {
+    engine: ShallowReactive<Engine>;
+    designer: ComputedRef<Designer | null>;
+    selected: ComputedRef<DesignHelper | null | undefined>;
+    isSelectBlock: ComputedRef<boolean>;
+};

package/types/components/index.d.ts

@@ -0,0 +1,9 @@
+import Skeleton from "./skeleton";
+import SetterView from "./setter";
+import Editor from './editor';
+import { widgets } from './widgets';
+import { regions } from './regions';
+import { setters } from './setters';
+export * from './shared';
+export * from './binders';
+export { Skeleton, SetterView, widgets, regions, setters, Editor };

package/types/components/regions/actions.d.ts

@@ -0,0 +1,19 @@
+import { DefineComponent, ComputedRef, Ref, ComponentOptionsMixin, PublicProps, ExtractPropTypes, PropType } from 'vue';
+import { Widget, RegionType } from '../../framework';
+export interface Props {
+    region: RegionType;
+}
+declare const _default: DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {
+    widgets: ComputedRef<Widget[]>;
+    widgetsRef: Ref<any>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};

package/types/components/regions/apps.d.ts

@@ -0,0 +1,35 @@
+import { DefineComponent, ComputedRef, Ref, ComponentOptionsMixin, PublicProps, ExtractPropTypes, PropType } from 'vue';
+import { Widget, RegionType } from '../../framework';
+export interface Props {
+    region: RegionType;
+    index?: number;
+}
+declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    index: number;
+}>, {
+    widgets: ComputedRef<Widget[]>;
+    widgetsRef: Ref<any>;
+    setActive: (name: string) => void;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    index: number;
+}>>>, {
+    index: number;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/types/components/regions/brand.d.ts

@@ -0,0 +1,19 @@
+import { DefineComponent, ComputedRef, Ref, ComponentOptionsMixin, PublicProps, ExtractPropTypes, PropType } from 'vue';
+import { Widget, RegionType } from '../../framework';
+export interface Props {
+    region: RegionType;
+}
+declare const _default: DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {
+    widgets: ComputedRef<Widget[]>;
+    widgetsRef: Ref<any>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};

package/types/components/regions/empty.d.ts

@@ -0,0 +1,15 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ExtractPropTypes, PropType } from 'vue';
+export interface Props {
+    region: string;
+}
+declare const _default: DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};