@gct-paas/design 0.1.4-dev.7 → 0.1.4-dev.9

package/es/components/design/design-item-hover-title/design-item-hover-title.css

@@ -0,0 +1,12 @@
+.gct-design-item-hover-title {
+  z-index: 2;
+  height: 30px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  padding: 0 8px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  background-color: rgb(from var(--ant-primary-color) r g b / 64%);
+}

package/es/components/design/design-item-hover-title/design-item-hover-title.d.ts

@@ -0,0 +1,60 @@
+export declare const DesignItemHoverTitle: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    top: {
+        type: NumberConstructor;
+        default: number;
+    };
+    left: {
+        type: NumberConstructor;
+        default: number;
+    };
+    content: {
+        type: StringConstructor;
+        default: string;
+    };
+    halfRect: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    hoverEl: {
+        type: {
+            new (): HTMLDivElement;
+            prototype: HTMLDivElement;
+        };
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    elRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    style: import('vue').ComputedRef<{
+        opacity: number;
+        top: string;
+        left: string;
+    }>;
+    isShow: import('vue').ComputedRef<boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    top: {
+        type: NumberConstructor;
+        default: number;
+    };
+    left: {
+        type: NumberConstructor;
+        default: number;
+    };
+    content: {
+        type: StringConstructor;
+        default: string;
+    };
+    halfRect: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    hoverEl: {
+        type: {
+            new (): HTMLDivElement;
+            prototype: HTMLDivElement;
+        };
+    };
+}>> & Readonly<{}>, {
+    top: number;
+    left: number;
+    content: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/design/design-item-hover-title/design-item-hover-title.mjs

@@ -0,0 +1,74 @@
+import { defineComponent, createVNode, ref, toRefs, computed } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { useElementBounding } from '@vueuse/core';
+import './design-item-hover-title.css';/* empty css                             */
+
+const DesignItemHoverTitle = /* @__PURE__ */ defineComponent({
+  name: 'DesignItemHoverTitle',
+  props: {
+    top: {
+      type: Number,
+      default: 0
+    },
+    left: {
+      type: Number,
+      default: 0
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    halfRect: {
+      type: Object,
+      required: true
+    },
+    hoverEl: {
+      type: HTMLDivElement
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('design-item-hover-title');
+    const elRef = ref(null);
+    const {
+      hoverEl
+    } = toRefs(props);
+    const {
+      width,
+      height
+    } = useElementBounding(elRef);
+    const style = computed(() => {
+      return {
+        opacity: isShow.value ? 1 : 0,
+        top: `${props.top - height.value}px`,
+        left: `${props.left - width.value}px`
+      };
+    });
+    const isShow = computed(() => {
+      if (!hoverEl.value) {
+        return true;
+      }
+      const {
+        top,
+        right,
+        bottom,
+        left
+      } = props.halfRect;
+      return !(top > 0 || right > 0 || bottom - hoverEl.value.clientHeight > 0 || left - hoverEl.value.clientWidth > 0);
+    });
+    return {
+      ns,
+      elRef,
+      style,
+      isShow
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "ref": "elRef",
+      "class": this.ns.b(),
+      "style": this.style
+    }, [this.content]);
+  }
+});
+
+export { DesignItemHoverTitle };

package/es/components/design/design-item-preview/design-item-preview.css

@@ -0,0 +1,91 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-design-item-preview {
+  display: none;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100000;
+  background-color: #B8B8B8;
+  color: black;
+  height: 18px;
+  box-shadow: 0 0 8px 0 rgba(33, 37, 40, 0.12);
+  border-radius: 1px;
+  pointer-events: none;
+}
+.gct-design-item-preview__icon {
+  margin-left: 6px;
+  margin-top: 2px;
+}
+
+.gct-design-item-preview__label {
+  padding: 0 6px;
+  font-size: 12px;
+}
+
+.gct-design-item-preview.is-dragging {
+  display: flex;
+}

package/es/components/design/design-item-preview/design-item-preview.d.ts

@@ -0,0 +1 @@
+export declare const DesignItemPreview: import('vue').DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/design/design-item-preview/design-item-preview.mjs

@@ -0,0 +1,50 @@
+import { defineComponent, computed, createVNode } from 'vue';
+import { useNamespace, t } from '@gct-paas/core';
+import { useDragLayer } from 'vue3-dnd';
+import { toRefs } from '@vueuse/core';
+import './design-item-preview.css';/* empty css                          */
+
+const DesignItemPreview = /* @__PURE__ */ defineComponent({
+  name: 'DesignItemPreview',
+  setup() {
+    const ns = useNamespace('design-item-preview');
+    const collect = useDragLayer(monitor => {
+      return {
+        isDragging: !!monitor.isDragging(),
+        // 是否拖拽中
+        item: monitor.getItem(),
+        // 拖拽信息
+        offset: monitor.getClientOffset()
+      };
+    });
+    const {
+      isDragging,
+      item,
+      offset
+    } = toRefs(collect);
+    const pos = computed(() => {
+      if (!offset.value) {
+        return '';
+      }
+      const {
+        x,
+        y
+      } = offset.value;
+      return `transform: translate(${x}px, ${y}px)`;
+    });
+    return () => {
+      return createVNode("div", {
+        "class": [ns.b(), ns.is('dragging', item.value?.data && isDragging.value)],
+        "style": pos.value
+      }, [createVNode("span", {
+        "class": ns.e('icon')
+      }, [createVNode("i", {
+        "class": "iconfont icon-yidong"
+      }, null)]), createVNode("span", {
+        "class": ns.e('label')
+      }, [t(item.value?.data?.label || 'sys.pageDesigner.unknownComponent')])]);
+    };
+  }
+});
+
+export { DesignItemPreview };

package/es/components/design/design-not-drag-item/design-not-drag-item.css

@@ -0,0 +1,67 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-design-not-drag-item {
+  cursor: pointer;
+}

package/es/components/design/design-not-drag-item/design-not-drag-item.d.ts

@@ -0,0 +1,49 @@
+import { PropType } from 'vue';
+import { IDesignNode, INodeProvider } from '../../../interface';
+export declare const DesignNotDragItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    group: {
+        type: StringConstructor;
+        required: true;
+    };
+    parent: {
+        type: PropType<IDesignNode>;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    c: import('../../../interface').IDesignViewController;
+    style: import('vue').ComputedRef<IObject>;
+    provider: INodeProvider<IDesignNode<import('../../../interface').IDesignNodeData>>;
+    onActive: (e: MouseEvent) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    group: {
+        type: StringConstructor;
+        required: true;
+    };
+    parent: {
+        type: PropType<IDesignNode>;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/design/design-not-drag-item/design-not-drag-item.mjs

@@ -0,0 +1,87 @@
+import { defineComponent, createVNode, mergeProps, toRefs, computed } from 'vue';
+import { useNamespace, calcStyle } from '@gct-paas/core';
+import { DesignItemAttribute } from '../../../constant/index.mjs';
+import '../../../hooks/design-view/design-state.mjs';
+import '@gct-paas/schema';
+import 'lodash-es';
+import '../../../hooks/design-view/layout/useScope.mjs';
+import '../../../hooks/design-view/global/useGlobal.mjs';
+import '@vueuse/core';
+import '../../../hooks/develop/useCacheHistory.mjs';
+import 'ant-design-vue';
+import '../../../hooks/design-view/widget/useSelectedWidget.mjs';
+import '../../../hooks/design-view/widget/useWidget.mjs';
+import '../../../hooks/design-view/page/usePage.mjs';
+import '../../../hooks/design-view/page/usePageOccupy.mjs';
+import '../../../hooks/design-view/layout/useToolkit.mjs';
+import { useDesignViewController } from '../../../hooks/use-design-view-controller/use-design-view-controller.mjs';
+import '../../../hooks/use-model-field/use-model-field.mjs';
+import 'qx-util';
+import { NodeRegister } from '../../../register/node/node.register.mjs';
+import './design-not-drag-item.css';/* empty css                           */
+
+const DesignNotDragItem = /* @__PURE__ */ defineComponent({
+  name: 'DesignNotDragItem',
+  props: {
+    group: {
+      type: String,
+      required: true
+    },
+    parent: {
+      type: Object
+    },
+    direction: {
+      type: String,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('design-not-drag-item');
+    const c = useDesignViewController();
+    const provider = NodeRegister.get(props.data.type, c.store.prefix);
+    const {
+      data
+    } = toRefs(props.data);
+    const style = computed(() => {
+      return calcStyle(data.value);
+    });
+    const onActive = e => {
+      e.stopPropagation();
+      c.store.setActive(props.data);
+    };
+    return {
+      ns,
+      c,
+      style,
+      provider,
+      onActive
+    };
+  },
+  render() {
+    return createVNode("div", mergeProps({
+      "id": this.data.id
+    }, {
+      [DesignItemAttribute.NODE_ID_TAG]: this.data.id,
+      [DesignItemAttribute.ACTIVE_TAG]: true,
+      [DesignItemAttribute.DESIGN_NAME]: this.data.label,
+      [DesignItemAttribute.DRAG_GROUP_TYPE]: this.provider.type,
+      [DesignItemAttribute.GROUP_TAG]: this.group,
+      [DesignItemAttribute.INDEX_TAG]: this.index,
+      [DesignItemAttribute.SELECTOR_INDEX]: this.provider.selectorIndex ?? 0
+    }, {
+      "class": this.ns.b(),
+      "style": this.style,
+      "onClick": this.onActive
+    }), [this.$slots.default?.()]);
+  }
+});
+
+export { DesignNotDragItem };

package/es/components/design/design-not-found/design-not-found.css

@@ -0,0 +1,68 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-design-not-found {
+  font-size: 14px;
+  color: #C3C3C3;
+}

package/es/components/design/design-not-found/design-not-found.d.ts

@@ -0,0 +1,14 @@
+export declare const DesignNotFound: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    message: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    message: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default DesignNotFound;

package/es/components/design/design-not-found/design-not-found.mjs

@@ -0,0 +1,26 @@
+import { defineComponent, createVNode } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import './design-not-found.css';/* empty css                       */
+
+const DesignNotFound = /* @__PURE__ */ defineComponent({
+  name: 'DesignNotFound',
+  props: {
+    message: {
+      type: String,
+      required: true
+    }
+  },
+  setup() {
+    const ns = useNamespace('design-not-found');
+    return {
+      ns
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [this.message]);
+  }
+});
+
+export { DesignNotFound };

package/es/components/design/index.d.ts

@@ -0,0 +1,6 @@
+import { App } from 'vue';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;
+export { DesignItemPreview } from './design-item-preview/design-item-preview';

package/es/components/design/index.mjs

@@ -0,0 +1,22 @@
+import { DesignContent } from './design-content/design-content.mjs';
+import { DesignDragItem } from './design-drag-item/design-drag-item.mjs';
+import { DesignDropContainer } from './design-drop-container/design-drop-container.mjs';
+import { DesignNotDragItem } from './design-not-drag-item/design-not-drag-item.mjs';
+import { DesignNotFound } from './design-not-found/design-not-found.mjs';
+import 'vue';
+import '@gct-paas/core';
+import 'vue3-dnd';
+import '@vueuse/core';
+import './design-item-preview/design-item-preview.css';/* empty css                                              */
+
+const Design = {
+  install(app) {
+    app.component(DesignContent.name, DesignContent);
+    app.component(DesignDragItem.name, DesignDragItem);
+    app.component(DesignDropContainer.name, DesignDropContainer);
+    app.component(DesignNotDragItem.name, DesignNotDragItem);
+    app.component(DesignNotFound.name, DesignNotFound);
+  }
+};
+
+export { Design as default };