@tmagic/editor 1.2.12 → 1.2.13

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.12",
+  "version": "1.2.13",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,12 +46,12 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.2.12",
-    "@tmagic/design": "1.2.12",
-    "@tmagic/form": "1.2.12",
-    "@tmagic/schema": "1.2.12",
-    "@tmagic/stage": "1.2.12",
-    "@tmagic/utils": "1.2.12",
+    "@tmagic/core": "1.2.13",
+    "@tmagic/design": "1.2.13",
+    "@tmagic/form": "1.2.13",
+    "@tmagic/schema": "1.2.13",
+    "@tmagic/stage": "1.2.13",
+    "@tmagic/utils": "1.2.13",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -63,8 +63,8 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.2.12",
-    "@tmagic/form": "1.2.12",
+    "@tmagic/design": "1.2.13",
+    "@tmagic/form": "1.2.13",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },

package/src/components/SearchInput.vue

@@ -0,0 +1,26 @@
+<template>
+  <TMagicInput
+    v-model="filterText"
+    class="search-input"
+    size="small"
+    placeholder="输入关键字进行过滤"
+    clearable
+    :prefix-icon="Search"
+    @input="filterTextChangeHandler"
+  ></TMagicInput>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Search } from '@element-plus/icons-vue';
+
+import { TMagicInput } from '@tmagic/design';
+
+const emit = defineEmits(['search']);
+
+const filterText = ref('');
+
+const filterTextChangeHandler = () => {
+  emit('search', filterText.value);
+};
+</script>

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -3,14 +3,7 @@
     <slot name="component-list-panel-header"></slot>
 
     <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
-      <TMagicInput
-        placeholder="输入关键字进行过滤"
-        class="search-input"
-        size="small"
-        clearable
-        :prefix-icon="Search"
-        v-model="searchText"
-      />
+      <SearchInput @search="filterTextChangeHandler"></SearchInput>
       <template v-for="(group, index) in list">
         <TMagicCollapseItem v-if="group.items && group.items.length" :key="index" :name="`${index}`">
           <template #title><MIcon :icon="Grid"></MIcon>{{ group.title }}</template>
@@ -40,16 +33,22 @@
 
 <script lang="ts" setup name="MEditorComponentListPanel">
 import { computed, inject, ref } from 'vue';
-import { Grid, Search } from '@element-plus/icons-vue';
+import { Grid } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
 
-import { TMagicCollapse, TMagicCollapseItem, TMagicInput, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
+import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';
 import { removeClassNameByClassName } from '@tmagic/utils';
 
 import MIcon from '../../components/Icon.vue';
+import SearchInput from '../../components/SearchInput.vue';
 import type { ComponentGroup, ComponentItem, Services, StageOptions } from '../../type';
 
 const searchText = ref('');
+
+const filterTextChangeHandler = (v: string) => {
+  searchText.value = v;
+};
+
 const services = inject<Services>('services');
 const stageOptions = inject<StageOptions>('stageOptions');
 

package/src/layouts/sidebar/LayerPanel.vue

@@ -2,15 +2,7 @@
   <TMagicScrollbar class="magic-editor-layer-panel">
     <slot name="layer-panel-header"></slot>
 
-    <TMagicInput
-      v-model="filterText"
-      class="search-input"
-      size="small"
-      placeholder="输入关键字进行过滤"
-      clearable
-      :prefix-icon="Search"
-      @change="filterTextChangeHandler"
-    ></TMagicInput>
+    <SearchInput @search="filterTextChangeHandler"></SearchInput>
 
     <TMagicTree
       v-if="values.length"
@@ -58,15 +50,15 @@
 
 <script lang="ts" setup name="MEditorLayerPanel">
 import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue';
-import { Search } from '@element-plus/icons-vue';
 import KeyController from 'keycon';
 import { difference, throttle, union } from 'lodash-es';
 
-import { TMagicInput, TMagicScrollbar, TMagicTree } from '@tmagic/design';
+import { TMagicScrollbar, TMagicTree } from '@tmagic/design';
 import type { Id, MNode, MPage } from '@tmagic/schema';
 import { MContainer, NodeType } from '@tmagic/schema';
 import { getNodePath, isPage } from '@tmagic/utils';
 
+import SearchInput from '../../components/SearchInput.vue';
 import type { MenuButton, MenuComponent, Services } from '../../type';
 import { Layout } from '../../type';
 
@@ -87,7 +79,6 @@ const menu = ref<InstanceType<typeof LayerMenu>>();
 const checkedKeys = ref<Id[]>([]);
 // 是否多选
 const isCtrlKeyDown = ref(false);
-const filterText = ref('');
 // 默认展开节点
 const expandedKeys = ref<Id[]>([]);
 const currentNodeKey = ref<Id>();

package/src/layouts/sidebar/code-block/CodeBlockEditor.vue

@@ -1,12 +1,13 @@
 <template>
-  <TMagicDialog
-    :model-value="true"
+  <TMagicDrawer
     class="code-editor-dialog"
+    :model-value="true"
     :title="currentTitle"
-    :fullscreen="true"
     :close-on-press-escape="false"
     :append-to-body="true"
     :show-close="false"
+    :close-on-click-modal="false"
+    :size="size"
   >
     <Layout v-model:left="left" :min-left="45" class="code-editor-layout">
       <!-- 右侧区域 -->
@@ -26,14 +27,14 @@
         </div>
       </template>
     </Layout>
-  </TMagicDialog>
+  </TMagicDrawer>
 </template>
 
 <script lang="ts" setup name="MEditorCodeBlockEditor">
 import { computed, inject, reactive, ref, watchEffect } from 'vue';
 import { cloneDeep, forIn, isEmpty } from 'lodash-es';
 
-import { TMagicDialog } from '@tmagic/design';
+import { TMagicDrawer } from '@tmagic/design';
 import { ColumnConfig } from '@tmagic/form';
 import { CodeBlockContent } from '@tmagic/schema';
 
@@ -49,6 +50,8 @@ defineProps<{
   paramsColConfig?: ColumnConfig;
 }>();
 
+const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
+
 const left = ref(200);
 const currentTitle = ref('');
 // 编辑器当前需展示的代码块内容

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -1,15 +1,8 @@
 <template>
-  <div class="m-editor-code-block-list">
+  <TMagicScrollbar class="m-editor-code-block-list">
     <slot name="code-block-panel-header">
       <div class="code-header-wrapper">
-        <TMagicInput
-          :class="[editable ? 'code-filter-input' : 'code-filter-input-no-btn']"
-          size="small"
-          placeholder="输入关键字进行过滤"
-          clearable
-          v-model="filterText"
-          @input="filterTextChangeHandler"
-        ></TMagicInput>
+        <SearchInput @search="filterTextChangeHandler"></SearchInput>
         <TMagicButton class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
           >新增</TMagicButton
         >
@@ -17,38 +10,36 @@
     </slot>
 
     <!-- 代码块列表 -->
-    <TMagicScrollbar>
-      <TMagicTree
-        ref="tree"
-        class="magic-editor-layer-tree"
-        node-key="id"
-        empty-text="暂无代码块"
-        default-expand-all
-        :expand-on-click-node="false"
-        :data="codeList"
-        :highlight-current="true"
-        :filter-node-method="filterNode"
-        @node-click="clickHandler"
-      >
-        <template #default="{ data }">
-          <div :id="data.id" class="list-container">
-            <div class="list-item">
-              <span class="code-name">{{ data.name }}（{{ data.id }}）</span>
-              <!-- 右侧工具栏 -->
-              <div class="right-tool" v-if="data.type === 'code'">
-                <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
-                  <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
-                </TMagicTooltip>
-                <TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
-                  <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
-                </TMagicTooltip>
-                <slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
-              </div>
+    <TMagicTree
+      ref="tree"
+      class="magic-editor-layer-tree"
+      node-key="id"
+      empty-text="暂无代码块"
+      default-expand-all
+      :expand-on-click-node="false"
+      :data="codeList"
+      :highlight-current="true"
+      :filter-node-method="filterNode"
+      @node-click="clickHandler"
+    >
+      <template #default="{ data }">
+        <div :id="data.id" class="list-container">
+          <div class="list-item">
+            <span class="code-name">{{ data.name }}（{{ data.id }}）</span>
+            <!-- 右侧工具栏 -->
+            <div class="right-tool" v-if="data.type === 'code'">
+              <TMagicTooltip effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
+                <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.id}`)"></Icon>
+              </TMagicTooltip>
+              <TMagicTooltip effect="dark" content="删除" placement="bottom" v-if="editable">
+                <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.id}`)"></Icon>
+              </TMagicTooltip>
+              <slot name="code-block-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
             </div>
           </div>
-        </template>
-      </TMagicTree>
-    </TMagicScrollbar>
+        </div>
+      </template>
+    </TMagicTree>
 
     <!-- 代码块编辑区 -->
     <CodeBlockEditor v-if="isShowCodeBlockEditor" :paramsColConfig="paramsColConfig">
@@ -56,18 +47,19 @@
         <slot name="code-block-edit-panel-header" :id="id"></slot>
       </template>
     </CodeBlockEditor>
-  </div>
+  </TMagicScrollbar>
 </template>
 
 <script setup lang="ts" name="MEditorCodeBlockList">
 import { computed, inject, ref } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
-import { TMagicButton, TMagicInput, tMagicMessage, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
+import { TMagicButton, tMagicMessage, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
 import { ColumnConfig } from '@tmagic/form';
 import { CodeBlockContent, Id } from '@tmagic/schema';
 
 import Icon from '../../../components/Icon.vue';
+import SearchInput from '../../../components/SearchInput.vue';
 import { CodeDeleteErrorType, CodeDslItem, Services } from '../../../type';
 
 import CodeBlockEditor from './CodeBlockEditor.vue';
@@ -85,6 +77,7 @@ const codeList = computed(() =>
     id: target.id,
     name: target.name,
     type: 'code',
+    codeBlockContent: codeBlockService?.getCodeContentById(target.id),
     children: Object.entries(target.deps).map(([id, dep]) => ({
       name: dep.name,
       type: 'node',
@@ -140,7 +133,6 @@ const deleteCode = (key: Id) => {
   }
 };
 
-const filterText = ref('');
 const tree = ref<InstanceType<typeof TMagicTree>>();
 
 const filterNode = (value: string, data: CodeDslItem): boolean => {

package/src/services/codeBlock.ts

@@ -39,9 +39,6 @@ class CodeBlock extends BaseService {
 
   constructor() {
     super([
-      'getCodeContentById',
-      'getCodeDslByIds',
-      'getCurrentDsl',
       'setCodeDslById',
       'setCodeEditorShowStatus',
       'setEditStatus',
@@ -77,9 +74,9 @@ class CodeBlock extends BaseService {
    * @param {Id} id 代码块id
    * @returns {CodeBlockContent | null}
    */
-  public async getCodeContentById(id: Id): Promise<CodeBlockContent | null> {
+  public getCodeContentById(id: Id): CodeBlockContent | null {
     if (!id) return null;
-    const totalCodeDsl = await this.getCodeDsl();
+    const totalCodeDsl = this.getCodeDsl();
     if (!totalCodeDsl) return null;
     return totalCodeDsl[id] ?? null;
   }
@@ -91,7 +88,7 @@ class CodeBlock extends BaseService {
    * @returns {void}
    */
   public async setCodeDslById(id: Id, codeConfig: CodeBlockContent): Promise<void> {
-    const codeDsl = await this.getCodeDsl();
+    const codeDsl = this.getCodeDsl();
 
     if (!codeDsl) {
       throw new Error('dsl中没有codeBlocks');
@@ -119,8 +116,8 @@ class CodeBlock extends BaseService {
    * @param {string[]} ids 代码块id数组
    * @returns {CodeBlockDSL}
    */
-  public async getCodeDslByIds(ids: string[]): Promise<CodeBlockDSL> {
-    const codeDsl = await this.getCodeDsl();
+  public getCodeDslByIds(ids: string[]): CodeBlockDSL {
+    const codeDsl = this.getCodeDsl();
     return pick(codeDsl, ids) as CodeBlockDSL;
   }
 
@@ -157,8 +154,8 @@ class CodeBlock extends BaseService {
    * 获取当前选中的代码块内容
    * @returns {CodeBlockContent | null}
    */
-  public async getCurrentDsl(): Promise<CodeBlockContent | null> {
-    return await this.getCodeContentById(this.state.id);
+  public getCurrentDsl(): CodeBlockContent | null {
+    return this.getCodeContentById(this.state.id);
   }
 
   /**

package/src/theme/code-block.scss

@@ -1,17 +1,24 @@
 .m-editor-code-block-list {
   height: 100%;
-  margin-top: 5px;
+
+  .magic-editor-layer-tree {
+    padding-top: 48px;
+  }
+
   .code-header-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
-    .code-filter-input {
-      margin: 0 5px;
-    }
-    .code-filter-input-no-btn {
-      margin-left: 5px;
-      margin-right: 10px;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+
+    .search-input {
+      flex: 1;
+      position: relative;
     }
+
     .create-code-button {
       margin-left: 2px;
       margin-right: 10px;

package/src/theme/component-list-panel.scss

@@ -4,21 +4,6 @@
   margin-top: 48px;
   background-color: $--sidebar-content-background-color;
 
-  .search-input {
-    background: #fff;
-    color: #bbbbbb;
-    padding: 10px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    box-sizing: border-box;
-    z-index: 1;
-
-    .el-input__prefix {
-      padding: 7px;
-    }
-  }
-
   .tmagic-design-collapse-item {
     > div:first-of-type {
       border-bottom: 1px solid $--border-color;

package/src/theme/layer-panel.scss

@@ -1,20 +1,6 @@
 .magic-editor-layer-panel {
   background: $--sidebar-content-background-color;
 
-  .search-input {
-    background: $--sidebar-content-background-color;
-    color: #bbbbbb;
-    padding: 10px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-
-    .el-input__prefix {
-      padding: 7px;
-    }
-  }
-
   .magic-editor-layer-tree {
     padding-top: 48px;
   }

package/src/theme/search-input.scss

@@ -0,0 +1,14 @@
+.tmagic-design-input.search-input {
+  background: #fff;
+  color: #bbbbbb;
+  padding: 10px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  z-index: 1;
+
+  .el-input__prefix {
+    padding: 7px;
+  }
+}

package/src/theme/theme.scss

@@ -1,3 +1,4 @@
+@import "./search-input.scss";
 @import "./nav-menu.scss";
 @import "./framework.scss";
 @import "./sidebar.scss";

package/types/components/SearchInput.vue.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "search"[], "search", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
+    onSearch?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _default;

package/types/services/codeBlock.d.ts

@@ -21,7 +21,7 @@ declare class CodeBlock extends BaseService {
      * @param {Id} id 代码块id
      * @returns {CodeBlockContent | null}
      */
-    getCodeContentById(id: Id): Promise<CodeBlockContent | null>;
+    getCodeContentById(id: Id): CodeBlockContent | null;
     /**
      * 设置代码块ID和代码内容到源dsl
      * @param {Id} id 代码块id
@@ -34,7 +34,7 @@ declare class CodeBlock extends BaseService {
      * @param {string[]} ids 代码块id数组
      * @returns {CodeBlockDSL}
      */
-    getCodeDslByIds(ids: string[]): Promise<CodeBlockDSL>;
+    getCodeDslByIds(ids: string[]): CodeBlockDSL;
     /**
      * 设置代码编辑面板展示状态
      * @param {boolean} status 是否展示代码编辑面板
@@ -57,7 +57,7 @@ declare class CodeBlock extends BaseService {
      * 获取当前选中的代码块内容
      * @returns {CodeBlockContent | null}
      */
-    getCurrentDsl(): Promise<CodeBlockContent | null>;
+    getCurrentDsl(): CodeBlockContent | null;
     /**
      * 获取编辑状态
      * @returns {boolean} 是否可编辑