@gct-paas/core-web 0.1.4-dev.8 → 0.1.4-dev.9

package/es/components/layout/view-container/view-container.mjs

@@ -0,0 +1,38 @@
+import { defineComponent, createVNode } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import './view-container.css';/* empty css                     */
+
+const ViewContainer = /* @__PURE__ */ defineComponent({
+  name: 'ViewContainer',
+  props: {
+    context: {
+      type: Object
+    },
+    params: {
+      type: Object
+    },
+    modal: {
+      type: Object,
+      required: true
+    }
+  },
+  setup() {
+    const ns = useNamespace('view-container');
+    return {
+      ns
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [this.$slots.header ? createVNode("div", {
+      "class": this.ns.b('header')
+    }, [this.$slots.header()]) : null, createVNode("div", {
+      "class": this.ns.b('content')
+    }, [this.$slots.default?.()]), this.$slots.footer ? createVNode("div", {
+      "class": this.ns.b('footer')
+    }, [this.$slots.footer()]) : null]);
+  }
+});
+
+export { ViewContainer };

package/es/components/svg-icon/svg-icon.css

@@ -0,0 +1,73 @@
+@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-svg-icon {
+  display: inline-block;
+  overflow: hidden;
+  fill: currentcolor;
+  vertical-align: -0.15em;
+}
+.gct-svg-icon--spin {
+  animation: loadingCircle 1s infinite linear;
+}

package/es/components/svg-icon/svg-icon.vue.d.ts

@@ -0,0 +1,40 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    prefix: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    spin: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    prefix: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    spin: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    size: string | number;
+    spin: boolean;
+    prefix: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/es/components/svg-icon/svg-icon.vue.mjs

@@ -0,0 +1,50 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, unref, createElementVNode } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+
+const _hoisted_1 = ["xlink:href"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "svg-icon",
+  props: {
+    prefix: {
+      type: String,
+      default: "icon"
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    size: {
+      type: [Number, String],
+      default: 16
+    },
+    spin: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    const ns = useNamespace("svg-icon");
+    const props = __props;
+    const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+    const getStyle = computed(() => {
+      const { size } = props;
+      let s = `${size}`;
+      s = `${s.replace("px", "")}px`;
+      return {
+        width: s,
+        height: s
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        class: normalizeClass([_ctx.$attrs.class, unref(ns).b(), __props.spin && unref(ns).m("spin")]),
+        style: normalizeStyle(getStyle.value),
+        "aria-hidden": "true"
+      }, [
+        createElementVNode("use", { "xlink:href": symbolId.value }, null, 8, _hoisted_1)
+      ], 6);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/svg-icon/svg-icon.vue3.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './svg-icon.vue.mjs';
+import './svg-icon.css';/* empty css               */
+
+
+
+export { _sfc_main as default };

package/es/create-app-vue.d.ts

@@ -0,0 +1,9 @@
+import { App } from 'vue';
+/**
+ * 核心 Web 库的外部使用注册，在创建 app 时调用
+ *
+ * @export
+ * @param {App} app
+ * @return {*}  {Promise<void>}
+ */
+export declare function coreWebCreateAppVue(app: App): Promise<void>;

package/es/create-app-vue.mjs

@@ -0,0 +1,17 @@
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
+import Comps from './components/index.mjs';
+import * as Icons from '@ant-design/icons-vue';
+import { setupDirectives } from './directives/index.mjs';
+import ColorPicker from './modules/color-picker/src/ColorPicker.vue.mjs';
+
+async function coreWebCreateAppVue(app) {
+  setupDirectives(app);
+  app.use(Comps);
+  Object.entries(Icons).forEach(([key, component]) => {
+    app.component(key, component);
+  });
+  app.component(ColorPicker.name, ColorPicker);
+  app.component(OverlayScrollbarsComponent.__name, OverlayScrollbarsComponent);
+}
+
+export { coreWebCreateAppVue };

package/es/directives/drag-resize.d.ts

@@ -0,0 +1,4 @@
+import { App, Directive } from 'vue';
+declare const dragResizeDirective: Directive;
+export declare function setupDragResizeDirective(app: App): void;
+export default dragResizeDirective;

package/es/directives/drag-resize.mjs

@@ -0,0 +1,42 @@
+const dragResizeDirective = {
+  mounted(el, binding) {
+    if (!binding.value) return false;
+    binding.instance?.$nextTick(() => {
+      const minWidth = binding.value;
+      const dragDom = el;
+      const resizeElL = document.createElement("div");
+      dragDom.appendChild(resizeElL);
+      resizeElL.style.cursor = "col-resize";
+      resizeElL.style.position = "absolute";
+      resizeElL.style.height = "100%";
+      resizeElL.style.width = "5px";
+      resizeElL.style.right = "0px";
+      resizeElL.style.top = "0px";
+      resizeElL.style.background = "rgba(255, 0, 0, 0);";
+      resizeElL.onmousedown = (e) => {
+        const elW = dragDom.clientWidth;
+        const clientX = e.clientX;
+        document.onmousemove = function(e2) {
+          e2.preventDefault();
+          const l = e2.clientX - clientX;
+          let nw = elW + l;
+          nw = nw < minWidth ? minWidth : nw;
+          dragDom.setAttribute("style", `width:${nw}px !important;`);
+          const resizeEvent = new CustomEvent("drag-resize-width", {
+            detail: { width: nw, resizing: true }
+          });
+          el.dispatchEvent(resizeEvent);
+        };
+        document.onmouseup = function() {
+          document.onmousemove = null;
+          document.onmouseup = null;
+        };
+      };
+    });
+  }
+};
+function setupDragResizeDirective(app) {
+  app.directive("dragResize", dragResizeDirective);
+}
+
+export { setupDragResizeDirective };

package/es/directives/index.d.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue';
+/**
+ * 注册全局通用指令
+ *
+ * @export
+ * @param {App} app
+ */
+export declare function setupDirectives(app: App): void;

package/es/directives/index.mjs

@@ -0,0 +1,9 @@
+import { setupDragResizeDirective } from './drag-resize.mjs';
+import { setupLoadingDirective } from './target-loading.mjs';
+
+function setupDirectives(app) {
+  setupDragResizeDirective(app);
+  setupLoadingDirective(app);
+}
+
+export { setupDirectives };

package/es/directives/target-loading.d.ts

@@ -0,0 +1,4 @@
+import { Directive, App } from 'vue';
+declare const loadingDirective: Directive;
+export declare function setupLoadingDirective(app: App): void;
+export default loadingDirective;

package/es/directives/target-loading.mjs

@@ -0,0 +1,40 @@
+import '../modules/target-loading/src/target-loading.vue.mjs';
+import '../modules/target-loading/src/target-loading.css';/* empty css                                                 */
+import 'vue';
+import { createLoading } from '../modules/target-loading/src/createLoading.mjs';
+
+const loadingDirective = {
+  mounted(el, binding) {
+    const tip = el.getAttribute("loading-tip");
+    const background = el.getAttribute("loading-background");
+    const size = el.getAttribute("loading-size");
+    const fullscreen = !!binding.modifiers.fullscreen;
+    const instance = createLoading(
+      {
+        tip,
+        background,
+        size: size || "large",
+        loading: !!binding.value,
+        absolute: !fullscreen
+      },
+      fullscreen ? document.body : el
+    );
+    el.instance = instance;
+  },
+  updated(el, binding) {
+    const instance = el.instance;
+    if (!instance) return;
+    instance.setTip(el.getAttribute("loading-tip"));
+    if (binding.oldValue !== binding.value) {
+      instance.setLoading?.(binding.value && !instance.loading);
+    }
+  },
+  unmounted(el) {
+    el?.instance?.close();
+  }
+};
+function setupLoadingDirective(app) {
+  app.directive("target-loading", loadingDirective);
+}
+
+export { setupLoadingDirective };

package/es/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export { useLocale } from './useLocale';
 export { useTheme } from './useTheme';
+export { UseDragByLine } from './useDragLine';

package/es/hooks/useDragLine.d.ts

@@ -0,0 +1,6 @@
+import { COLUMNS_TYPE } from '@gct-paas/core';
+export declare function UseDragByLine(startValue: number, rowType: COLUMNS_TYPE, config?: IObject): {
+    moveDomDown: (event: MouseEvent, el: HTMLElement, onMouseUp?: () => void) => void;
+    moveMobileDomDown: (event: TouchEvent, el: HTMLElement, onTouchEnd?: () => void) => void;
+    start: import('vue').WritableComputedRef<any, any>;
+};

package/es/hooks/useDragLine.mjs

@@ -0,0 +1,79 @@
+import { ref, reactive, computed } from 'vue';
+import '@gct-paas/core';
+
+function UseDragByLine(startValue, rowType, config = {}) {
+  const minValue = config.minValue ?? 10;
+  const startMove = ref(startValue);
+  const dragData = reactive({
+    offset: "offsetWidth",
+    client: "clientX",
+    clientMove: 0,
+    rowType,
+    offsetWidth: 2e3
+  });
+  function moveDomDown(event, el, onMouseUp) {
+    const elRecord = el;
+    const eventRecord = event;
+    dragData.offsetWidth = elRecord[dragData.offset] ?? 0;
+    dragData.clientMove = eventRecord[dragData.client] ?? 0;
+    event.preventDefault();
+    document.onmousemove = (e) => {
+      moveHandle(
+        e[dragData.client] ?? 0
+      );
+    };
+    document.onmouseup = () => {
+      document.onmouseup = null;
+      document.onmousemove = null;
+      onMouseUp?.();
+    };
+  }
+  function moveMobileDomDown(event, el, onTouchEnd) {
+    const elRecord = el;
+    const touch = event.touches[0];
+    if (!touch) return;
+    dragData.offsetWidth = elRecord[dragData.offset] ?? 0;
+    dragData.clientMove = touch[dragData.client] ?? 0;
+    event.preventDefault();
+    document.ontouchmove = (e) => {
+      moveHandle(
+        e.touches[0][dragData.client] ?? 0
+      );
+    };
+    document.ontouchend = () => {
+      document.ontouchend = null;
+      document.ontouchmove = null;
+      onTouchEnd?.();
+    };
+  }
+  function moveHandle(clientX) {
+    const computedX = clientX - dragData.clientMove;
+    const changeWidth = transformWidth(startMove.value) + computedX;
+    startMove.value = transformWidth(changeWidth);
+    dragData.clientMove = clientX;
+  }
+  function transformWidth(width) {
+    if (dragData.rowType === "right" || dragData.rowType === "bottom") {
+      return dragData.offsetWidth - width;
+    } else {
+      return width;
+    }
+  }
+  const start = computed({
+    get() {
+      if (startMove.value < minValue) {
+        return minValue;
+      }
+      if (startMove.value > dragData.offsetWidth - minValue) {
+        return dragData.offsetWidth - minValue;
+      }
+      return startMove.value;
+    },
+    set(v) {
+      startMove.value = v;
+    }
+  });
+  return { moveDomDown, moveMobileDomDown, start };
+}
+
+export { UseDragByLine };

package/es/index.d.ts

@@ -1,7 +1,8 @@
-import { App } from 'vue';
-import { AssetsSvgIcon, CodeEditor } from './components';
-export declare function install(app: App): void;
 export * from './hooks';
 export * from './utils';
-export { CodeEditor, AssetsSvgIcon };
+export * from './modules/code-editor';
 export * from './modules/gct-dnd';
+export * from './modules/global-modal';
+export * from './components';
+export { coreWebCreateAppVue } from './create-app-vue';
+export { coreWebSetupApp } from './setup-app';

package/es/index.mjs

@@ -1,22 +1,38 @@
-import './components/layout/view-container/view-container.css';import './components/layout/flex-container/flex-container.css';export { AssetsSvgIcon } from './components/assets-svg-icon/assets-svg-icon.mjs';
-export { CodeEditor } from './components/code-editor/code-editor.mjs';
-import 'vue';
-import '@gct-paas/core';
-/* empty css                                                      */
-/* empty css                                                      */
-import * as Icons from '@ant-design/icons-vue';
+import { MessageUtil } from './utils/message-util/message-util.mjs';
+import './components/svg-icon/svg-icon.css';export { monacoLoader } from './utils/monaco-loader/monaco-loader.mjs';
+import { overlay } from './utils/overlay-controller/overlay-controller.mjs';
+export { OverlayController } from './utils/overlay-controller/overlay-controller.mjs';
+export { withInstall } from './utils/with-install.mjs';
 export { useLocale } from './hooks/useLocale.mjs';
 export { useTheme } from './hooks/useTheme.mjs';
-export { withInstall } from './utils/with-install.mjs';
+export { UseDragByLine } from './hooks/useDragLine.mjs';
+export { MonacoEditor } from './modules/code-editor/index.mjs';
 export { GctDndContainer } from './modules/gct-dnd/components/gct-dnd-container/gct-dnd-container.mjs';
 export { GctDndDropLine } from './modules/gct-dnd/components/gct-dnd-drop-line/gct-dnd-drop-line.mjs';
 export { GctDndItem } from './modules/gct-dnd/components/gct-dnd-item/gct-dnd-item.mjs';
 export { GCT_DND_INSERT_POS } from './modules/gct-dnd/constants/index.mjs';
+export { BasicModal } from './modules/global-modal/index.mjs';
+export { default as SvgIcon } from './components/svg-icon/svg-icon.vue.mjs';
+/* empty css                                   */
+export { AssetsSvgIcon } from './components/assets-svg-icon/assets-svg-icon.mjs';
+export { default as BaseButton } from './components/base-button/base-button.vue.mjs';
+export { default as BasicButton } from './components/basic-button/basic-button.vue.mjs';
+export { CodeEditor } from './components/code-editor/code-editor.mjs';
+export { FlexContainer } from './components/layout/flex-container/flex-container.mjs';
+export { FlexItem } from './components/layout/flex-item/flex-item.mjs';
+export { GridContainer } from './components/layout/grid-container/grid-container.mjs';
+export { ViewContainer } from './components/layout/view-container/view-container.mjs';
+export { coreWebCreateAppVue } from './create-app-vue.mjs';
+export { coreWebSetupApp } from './setup-app.mjs';
+export { Lang, Prop, Theme } from './modules/code-editor/useMonacoEditor.mjs';
+export { useEditorConsole, useEditorConsoleInner } from './modules/code-editor/useEditorConsole.mjs';
+export { useModal, useModalInner } from './modules/global-modal/src/hooks/useModal.mjs';
+export { useModalContext } from './modules/global-modal/src/hooks/useModalContext.mjs';
 
-function install(app) {
-  Object.entries(Icons).forEach(([key, component]) => {
-    app.component(key, component);
-  });
+function onInit() {
+  _gct.message = new MessageUtil();
+  _gct.openUtil = overlay;
 }
+onInit();
 
-export { install };
+export { MessageUtil, overlay };