@tmagic/editor 1.2.14 → 1.2.15

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.14",
+  "version": "1.2.15",
   "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.14",
-    "@tmagic/design": "1.2.14",
-    "@tmagic/form": "1.2.14",
-    "@tmagic/schema": "1.2.14",
-    "@tmagic/stage": "1.2.14",
-    "@tmagic/utils": "1.2.14",
+    "@tmagic/core": "1.2.15",
+    "@tmagic/design": "1.2.15",
+    "@tmagic/form": "1.2.15",
+    "@tmagic/schema": "1.2.15",
+    "@tmagic/stage": "1.2.15",
+    "@tmagic/utils": "1.2.15",
     "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.14",
-    "@tmagic/form": "1.2.14",
+    "@tmagic/design": "1.2.15",
+    "@tmagic/form": "1.2.15",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },

package/src/components/SearchInput.vue

@@ -5,16 +5,19 @@
     size="small"
     placeholder="输入关键字进行过滤"
     clearable
-    :prefix-icon="Search"
     @input="filterTextChangeHandler"
-  ></TMagicInput>
+  >
+    <template #prefix>
+      <TMagicIcon><Search /></TMagicIcon>
+    </template>
+  </TMagicInput>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { Search } from '@element-plus/icons-vue';
 
-import { TMagicInput } from '@tmagic/design';
+import { TMagicIcon, TMagicInput } from '@tmagic/design';
 
 const emit = defineEmits(['search']);
 

package/src/icons/AppManageIcon.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- app-manage cdn链接：https://cloudcache.tencent-cloud.com/qcloud/ui/static/console_aside_v4/6638c8a5-2e7f-477a-83b1-a413a0e4ba39.svg -->
-  <svg width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <svg xmlns="http://www.w3.org/2000/svg">
     <g fill="#7C878E" fill-rule="evenodd">
       <path d="M15.3,5.5 L8,0 L0.7,5.5 L8,11 L15.3,5.5 Z M8,2.5 L12,5.5 L8,8.5 L4,5.5 L8,2.5 Z" fill-rule="nonzero" />
       <path d="M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" />

package/src/icons/CodeIcon.vue

@@ -1,16 +1,7 @@
 <template>
   <!-- 代码icon，cdn链接：https://cloudcache.tencent-cloud.com/qcloud/ui/static/government/0d463ed5-6407-4498-8865-3d05b5e70115.svg -->
-  <svg
-    width="32px"
-    height="32px"
-    viewBox="0 0 32 32"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-  >
+  <svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
-    <title>gsd-icon-line-Universal-code</title>
-    <desc>Created with Sketch.</desc>
     <defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs>
     <g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
       <g id="03图标" transform="translate(-561.000000, -2356.000000)">

package/src/layouts/sidebar/Sidebar.vue

@@ -1,16 +1,16 @@
 <template>
-  <TMagicTabs
+  <component
     v-if="data.type === 'tabs' && data.items.length"
-    class="m-editor-sidebar"
     v-model="activeTabName"
-    type="card"
-    tab-position="left"
+    class="m-editor-sidebar tmagic-design-tabs"
+    v-bind="tabsComponent.props({ type: 'card', tabPosition: 'left' })"
+    :is="tabsComponent.component"
   >
     <component
-      :is="uiComponent.component"
       v-for="(config, index) in sideBarItems"
+      v-bind="tabPaneComponent.props({ name: config.text })"
+      :is="tabPaneComponent.component"
       :key="config.$key || index"
-      :name="config.text"
     >
       <template #label>
         <div :key="config.text">
@@ -80,14 +80,14 @@
         </template>
       </component>
     </component>
-  </TMagicTabs>
+  </component>
 </template>
 
 <script lang="ts" setup name="MEditorSidebar">
 import { computed, ref, watch } from 'vue';
 import { Coin, EditPen, Files } from '@element-plus/icons-vue';
 
-import { getConfig, TMagicTabs } from '@tmagic/design';
+import { getConfig } from '@tmagic/design';
 
 import MIcon from '@editor/components/Icon.vue';
 import type { MenuButton, MenuComponent, SideComponent, SideItem } from '@editor/type';
@@ -107,7 +107,8 @@ const props = withDefaults(
   },
 );
 
-const uiComponent = getConfig('components').tabPane;
+const tabPaneComponent = getConfig('components').tabPane;
+const tabsComponent = getConfig('components').tabs;
 
 const activeTabName = ref(props.data?.status);
 

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

@@ -1,7 +1,7 @@
 <template>
-  <TMagicScrollbar class="m-editor-code-block-list">
+  <TMagicScrollbar class="m-editor-code-block-list m-editor-dep-list-panel">
     <slot name="code-block-panel-header">
-      <div class="code-header-wrapper">
+      <div class="search-wrapper">
         <SearchInput @search="filterTextChangeHandler"></SearchInput>
         <TMagicButton class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
           >新增</TMagicButton
@@ -27,8 +27,8 @@
           <div class="list-item">
             <CodeIcon v-if="data.type === 'code'" class="codeIcon"></CodeIcon>
             <AppManageIcon v-if="data.type === 'node'" class="compIcon"></AppManageIcon>
-            <span class="code-name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
-              >{{ data.name }}（{{ data.id }}）</span
+            <span class="name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
+              >{{ data.name }} ({{ data.id }})</span
             >
             <!-- 右侧工具栏 -->
             <div class="right-tool" v-if="data.type === 'code'">

package/src/services/props.ts

@@ -21,7 +21,7 @@ import { cloneDeep, mergeWith } from 'lodash-es';
 
 import type { FormConfig } from '@tmagic/form';
 import type { MComponent, MNode } from '@tmagic/schema';
-import { toLine } from '@tmagic/utils';
+import { guid, toLine } from '@tmagic/utils';
 
 import type { PropsState } from '@editor/type';
 import { fillConfig } from '@editor/utils/props';
@@ -130,7 +130,7 @@ class Props extends BaseService {
   }
 
   public async createId(type: string | number): Promise<string> {
-    return `${type}_${this.guid()}`;
+    return `${type}_${guid()}`;
   }
 
   /**
@@ -181,19 +181,6 @@ class Props extends BaseService {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
-
-  /**
-   * 生成指定位数的GUID，无【-】格式
-   * @param digit 位数，默认值8
-   * @returns
-   */
-  private guid(digit = 8): string {
-    return 'x'.repeat(digit).replace(/[xy]/g, (c) => {
-      const r = (Math.random() * 16) | 0;
-      const v = c === 'x' ? r : (r & 0x3) | 0x8;
-      return v.toString(16);
-    });
-  }
 }
 
 export type PropsService = Props;

package/src/theme/code-block.scss

@@ -1,81 +1,19 @@
 .m-editor-code-block-list {
   height: 100%;
 
-  .magic-editor-layer-tree {
-    padding-top: 48px;
-  }
-
-  .code-header-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: 1;
-
-    .search-input {
-      flex: 1;
-      position: relative;
-    }
-
-    .create-code-button {
-      margin-left: 2px;
-      margin-right: 10px;
-    }
-  }
-
-  .divider {
-    margin: 10px 0 0 0;
-  }
-
   .list-container {
-    width: 100%;
-    overflow: hidden;
     .list-item {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      align-items: center;
-
-      .right-tool {
-        display: flex;
-        width: fit-content !important;
-        align-items: center;
-        margin-right: 10px;
-        .edit-icon {
-          margin: 0 5px;
-        }
-      }
-
       .codeIcon {
-        width: 20px;
-        height: 20px;
+        width: 22px;
+        height: 22px;
         margin-right: 5px;
       }
 
       .compIcon {
-        width: 15px;
-        height: 15px;
+        width: 22px;
+        height: 22px;
         margin-right: 5px;
       }
-
-      .code-name {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 0 !important;
-        flex: 1;
-        line-height: 22px;
-
-        &.code {
-          color: #000;
-        }
-
-        &.hook {
-          color: #909399;
-        }
-      }
     }
   }
 }

package/src/theme/dep-list.scss

@@ -0,0 +1,59 @@
+.m-editor-dep-list-panel {
+  .magic-editor-layer-tree {
+    padding-top: 48px;
+  }
+
+  .search-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+
+    .search-input {
+      flex: 1;
+      position: relative;
+    }
+
+    .tmagic-design-button {
+      margin-right: 10px;
+    }
+  }
+
+  .list-container {
+    width: 100%;
+    overflow: hidden;
+    .list-item {
+      display: flex;
+      width: 100%;
+      align-items: center;
+
+      .right-tool {
+        display: flex;
+        width: fit-content !important;
+        align-items: center;
+        .edit-icon {
+          margin: 0 5px;
+        }
+      }
+      .name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 0 !important;
+        flex: 1;
+        line-height: 22px;
+
+        &.code {
+          color: #000;
+        }
+
+        &.hook {
+          color: #909399;
+        }
+      }
+    }
+  }
+}

package/src/theme/sidebar.scss

@@ -1,11 +1,24 @@
-.m-editor-sidebar {
+.m-editor-sidebar.tmagic-design-tabs {
   height: 100%;
 
-  &.el-tabs--left .el-tabs__header {
+  .el-tabs__header,
+  .t-tabs__header {
     background: $--sidebar-heder-background-color;
     border: 0;
+    height: 100%;
+
+    .t-tabs__nav--card {
+      background-color: transparent;
+    }
 
-    &.is-left {
+    .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(
+        .t-is-active
+      ):hover {
+      background-color: transparent;
+    }
+
+    &.is-left,
+    &.t-is-left {
       width: 40px;
       margin-right: 0;
     }
@@ -23,7 +36,8 @@
       margin-left: 2px;
     }
 
-    .el-tabs__item.is-left {
+    .el-tabs__item.is-left,
+    .t-tabs__nav-item {
       line-height: 15px;
       border: 0;
       height: auto;
@@ -31,8 +45,10 @@
       color: rgb(255, 255, 255);
       box-sizing: border-box;
 
-      &.is-left {
-        &.is-active {
+      &.is-left,
+      &.t-is-left {
+        &.is-active,
+        &.t-is-active {
           background: $--sidebar-content-background-color;
           border: 0;
 
@@ -51,6 +67,10 @@
       }
     }
 
+    .t-tabs__nav-item {
+      padding: 7px;
+    }
+
     i {
       font-size: 25px;
       color: rgba(255, 255, 255, 0.6);

package/src/theme/theme.scss

@@ -16,3 +16,4 @@
 @import "./event.scss";
 @import "./layout.scss";
 @import "./breadcrumb.scss";
+@import "./dep-list.scss";

package/types/services/props.d.ts

@@ -25,7 +25,11 @@ declare class Props extends BaseService {
                     items: ({
                         name: string;
                         type: string;
-                        activeValue: string;
+                        activeValue: string; /**
+                         * 为指定类型组件设置组件属性表单配置
+                         * @param type 组件类型
+                         * @param config 组件属性表单配置
+                         */
                         inactiveValue: string;
                         defaultValue: string;
                         text: string;
@@ -34,7 +38,11 @@ declare class Props extends BaseService {
                         name: string;
                         text: string;
                         type?: undefined;
-                        activeValue?: undefined;
+                        activeValue?: undefined; /**
+                         * 为指定类型组件设置组件属性表单配置
+                         * @param type 组件类型
+                         * @param config 组件属性表单配置
+                         */
                         inactiveValue?: undefined;
                         defaultValue?: undefined;
                         disabled?: undefined;
@@ -43,7 +51,11 @@ declare class Props extends BaseService {
                         text: string;
                         disabled: (vm: import("@tmagic/form").FormState, { model }: any) => boolean;
                         type?: undefined;
-                        activeValue?: undefined;
+                        activeValue?: undefined; /**
+                         * 为指定类型组件设置组件属性表单配置
+                         * @param type 组件类型
+                         * @param config 组件属性表单配置
+                         */
                         inactiveValue?: undefined;
                         defaultValue?: undefined;
                     })[];
@@ -162,12 +174,6 @@ declare class Props extends BaseService {
     }>;
     resetState(): void;
     destroy(): void;
-    /**
-     * 生成指定位数的GUID，无【-】格式
-     * @param digit 位数，默认值8
-     * @returns
-     */
-    private guid;
 }
 export type PropsService = Props;
 declare const _default: Props;