@tmagic/editor 1.2.0-beta.2 → 1.2.0-beta.21

package/src/layouts/Layout.vue

@@ -1,100 +0,0 @@
-<template>
-  <div ref="el" class="m-editor-layout">
-    <template v-if="typeof props.left !== 'undefined'">
-      <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
-        <slot name="left"></slot>
-      </div>
-      <Resizer @change="changeLeft"></Resizer>
-    </template>
-
-    <div class="m-editor-layout-center" :class="centerClass" :style="`width: ${center}px`">
-      <slot name="center"></slot>
-    </div>
-
-    <template v-if="typeof props.right !== 'undefined'">
-      <Resizer @change="changeRight"></Resizer>
-      <div class="m-editor-layout-right" :class="rightClass" :style="`width: ${right}px`">
-        <slot name="right"></slot>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-
-import Resizer from './Resizer.vue';
-
-const emit = defineEmits(['update:left', 'change', 'update:right']);
-
-const props = withDefaults(
-  defineProps<{
-    left?: number;
-    right?: number;
-    minLeft?: number;
-    minRight?: number;
-    leftClass?: string;
-    rightClass?: string;
-    centerClass?: string;
-  }>(),
-  {
-    minLeft: 1,
-    minRight: 1,
-  },
-);
-
-const el = ref<HTMLElement>();
-
-let clientWidth = 0;
-const resizerObserver = new ResizeObserver((entries) => {
-  for (const { contentRect } of entries) {
-    clientWidth = contentRect.width;
-
-    center.value = clientWidth - (props.left || 0) - (props.right || 0);
-
-    emit('change', {
-      left: props.left,
-      center: center.value,
-      right: props.right,
-    });
-  }
-});
-
-onMounted(() => {
-  if (el.value) {
-    resizerObserver.observe(el.value);
-  }
-});
-
-onUnmounted(() => {
-  resizerObserver.disconnect();
-});
-
-const center = ref(0);
-
-const changeLeft = (deltaX: number) => {
-  if (typeof props.left === 'undefined') return;
-  const left = Math.max(props.left + deltaX, props.minLeft) || 0;
-  emit('update:left', left);
-  center.value = clientWidth - left - (props.right || 0);
-
-  emit('change', {
-    left,
-    center: center.value,
-    right: props.right,
-  });
-};
-
-const changeRight = (deltaX: number) => {
-  if (typeof props.right === 'undefined') return;
-  const right = Math.max(props.right - deltaX, props.minRight) || 0;
-  emit('update:right', right);
-  center.value = clientWidth - (props.left || 0) - right;
-
-  emit('change', {
-    left: props.left,
-    center: center.value,
-    right,
-  });
-};
-</script>

package/src/layouts/sidebar/TabPane.vue

@@ -1,116 +0,0 @@
-<template>
-  <el-tab-pane v-if="config" :name="config.text">
-    <template #label>
-      <div :key="config.text">
-        <m-icon v-if="config.icon" :icon="config.icon"></m-icon>
-        <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
-      </div>
-    </template>
-
-    <component :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
-      <template #component-list-panel-header v-if="data === 'component-list' || config.slots?.componentListPanelHeader">
-        <slot v-if="data === 'component-list'" name="component-list-panel-header"></slot>
-        <component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
-      </template>
-
-      <template
-        #component-list-item="{ component }"
-        v-if="data === 'component-list' || config.slots?.componentListItem"
-      >
-        <slot v-if="data === 'component-list'" name="component-list-item" :component="component"></slot>
-        <component
-          v-else-if="config.slots?.componentListItem"
-          :is="config.slots.componentListItem"
-          :component="component"
-        />
-      </template>
-
-      <template #layer-panel-header v-if="data === 'layer' || config.slots?.layerPanelHeader">
-        <slot v-if="data === 'layer'" name="layer-panel-header"></slot>
-        <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />
-      </template>
-
-      <template #code-block-panel-header v-if="data === 'code-block' || config.slots?.codeBlockPanelHeader">
-        <slot v-if="data === 'code-block'" name="code-block-panel-header"></slot>
-        <component v-else-if="config.slots?.codeBlockPanelHeader" :is="config.slots.codeBlockPanelHeader" />
-      </template>
-
-      <template #code-block-panel-tool="{ id, data }" v-if="data === 'code-block' || config.slots?.codeBlockPanelTool">
-        <slot v-if="data === 'code-block'" name="code-block-panel-tool" :id="id" :data="data"></slot>
-        <component v-else-if="config.slots?.codeBlockPanelTool" :is="config.slots.codeBlockPanelTool" />
-      </template>
-
-      <template
-        #code-block-edit-panel-header="{ id }"
-        v-if="data === 'code-block' || config.slots?.codeBlockEditPanelHeader"
-      >
-        <slot v-if="data === 'code-block'" name="code-block-edit-panel-header" :id="id"></slot>
-        <component v-else-if="config.slots?.codeBlockEditPanelHeader" :is="config.slots.codeBlockEditPanelHeader" />
-      </template>
-
-      <template
-        #layer-node-content="{ data: nodeData, node }"
-        v-if="data === 'layer' || config.slots?.layerNodeContent"
-      >
-        <slot v-if="data === 'layer'" name="layer-node-content" :data="nodeData" :node="node"></slot>
-        <component
-          v-else-if="config.slots?.layerNodeContent"
-          :is="config.slots.layerNodeContent"
-          :data="nodeData"
-          :node="node"
-        />
-      </template>
-    </component>
-  </el-tab-pane>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { Coin, EditPen, Files } from '@element-plus/icons-vue';
-
-import MIcon from '../../components/Icon.vue';
-import { SideComponent, SideItem } from '../../type';
-
-import CodeBlockList from './code-block/CodeBlockList.vue';
-import ComponentListPanel from './ComponentListPanel.vue';
-import LayerPanel from './LayerPanel.vue';
-
-const props = defineProps<{
-  data?: SideItem;
-}>();
-
-const config = computed<SideComponent | undefined>(() => {
-  if (typeof props.data !== 'string') {
-    return props.data;
-  }
-
-  switch (props.data) {
-    case 'component-list':
-      return {
-        type: 'component',
-        icon: Coin,
-        text: '组件',
-        component: ComponentListPanel,
-        slots: {},
-      };
-    case 'layer':
-      return {
-        type: 'component',
-        icon: Files,
-        text: '已选组件',
-        component: LayerPanel,
-        slots: {},
-      };
-    case 'code-block':
-      return {
-        type: 'component',
-        icon: EditPen,
-        text: '代码编辑',
-        component: CodeBlockList,
-        slots: {},
-      };
-    default:
-      return undefined;
-  }
-});
-</script>