@gct-paas/core-web 0.1.4-dev.10 → 0.1.4-dev.11

package/es/{editor → modules/gct-form/editor}/gct-form-select/gct-form-select.d.ts

@@ -1,5 +1,6 @@
 import { PropType } from 'vue';
-import { IFormItemController, ISelectEditor } from '@gct-paas/core';
+import { IFormItemController, ISelectEditor } from '../../interface';
+import { EditorController } from '../../controller';
 export declare const GctFormSelect: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     c: {
         type: PropType<IFormItemController>;
@@ -13,10 +14,20 @@ export declare const GctFormSelect: import('vue').DefineComponent<import('vue').
         type: StringConstructor;
         default: string;
     };
+    size: {
+        type: StringConstructor;
+    };
 }>, {
     ns: import('@gct-paas/core').Namespace;
-    val: import('vue').WritableComputedRef<any, any>;
-    options: import('vue').ComputedRef<import('@gct-paas/core').IDictionaryItem[]>;
+    selectRef: import('vue').Ref<any, any>;
+    open: import('vue').Ref<boolean, boolean>;
+    rootRef: import('vue').Ref<any, any>;
+    editorC: EditorController<ISelectEditor>;
+    val2: import('vue').WritableComputedRef<any, any>;
+    options: import('vue').ComputedRef<import('@gct-paas/core').IDictionaryItem[] | IObject[]>;
+    onCloseDropdown: () => void;
+    onOpenDropdown: () => void;
+    onChangeDropdown: () => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     c: {
         type: PropType<IFormItemController>;
@@ -30,6 +41,9 @@ export declare const GctFormSelect: import('vue').DefineComponent<import('vue').
         type: StringConstructor;
         default: string;
     };
+    size: {
+        type: StringConstructor;
+    };
 }>> & Readonly<{
     "onUpdate:value"?: ((...args: any[]) => any) | undefined;
 }>, {

package/es/modules/gct-form/editor/gct-form-select/gct-form-select.mjs

@@ -0,0 +1,128 @@
+import { defineComponent, createVNode, resolveComponent, mergeProps, ref, computed, onUnmounted } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import { useNamespace } from '@gct-paas/core';
+import './gct-form-select.css';/* empty css                      */
+import 'qx-util';
+import { EditorController } from '../../controller/editor-item/editor-item.controller.mjs';
+import 'lodash-es';
+import { useGctFormValue } from '../../hooks/use-gct-form-value/use-gct-form-value.mjs';
+
+const GctFormSelect = /* @__PURE__ */ defineComponent({
+  name: 'GctFormSelect',
+  props: {
+    c: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String
+    }
+  },
+  emits: ['update:value'],
+  setup(props) {
+    const ns = useNamespace('gct-form-select');
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const selectRef = ref();
+    onClickOutside(selectRef, () => {
+      open.value = false;
+      selectRef.value?.blur();
+    });
+    const open = ref(false);
+    function findParentByClassName(el, className) {
+      if (el.className?.indexOf(className) > -1) {
+        return el;
+      }
+      if (el.parentElement) {
+        return findParentByClassName(el.parentElement, className);
+      }
+      return null;
+    }
+    function onWheel(e) {
+      const el = findParentByClassName(e.target, 'ant-select-dropdown');
+      if (el) {
+        return;
+      }
+      selectRef.value?.blur();
+    }
+    window.addEventListener('wheel', onWheel);
+    const rootRef = ref();
+    const editorC = new EditorController(props.model);
+    const val = useGctFormValue();
+    const val2 = computed({
+      get() {
+        return val.value != null ? val.value : undefined;
+      },
+      set(value) {
+        val.value = value;
+      }
+    });
+    const options = computed(() => {
+      if (props.c.state.options && props.c.state.options.length > 0) {
+        return props.c.state.options;
+      }
+      return editorC.options;
+    });
+    onUnmounted(() => {
+      window.removeEventListener('wheel', onWheel);
+    });
+    function onCloseDropdown() {
+      open.value = false;
+      if (selectRef.value) {
+        selectRef.value.blur();
+      }
+    }
+    function onOpenDropdown() {
+      open.value = true;
+    }
+    function onChangeDropdown() {
+      open.value = !open.value;
+    }
+    return {
+      ns,
+      selectRef,
+      open,
+      rootRef,
+      editorC,
+      val2,
+      options,
+      onCloseDropdown,
+      onOpenDropdown,
+      onChangeDropdown
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "ref": "rootRef",
+      "class": this.ns.b()
+    }, [this.model.beforeText ? createVNode("div", {
+      "class": this.ns.e('before-text')
+    }, [this.model.beforeText]) : null, createVNode("div", {
+      "class": this.ns.e('content')
+    }, [createVNode(resolveComponent("a-select"), mergeProps({
+      "ref": "selectRef",
+      "open": this.open,
+      "value": this.val2,
+      "onUpdate:value": $event => this.val2 = $event,
+      "options": this.options,
+      "allowClear": true,
+      "disabled": this.c.state.disabled,
+      "size": this.size,
+      "placeholder": this.model.placeholder,
+      "onChange": this.onCloseDropdown,
+      "onClick": this.onChangeDropdown
+    }, this.model.props || {}), null)]), this.model.afterText ? createVNode("div", {
+      "class": this.ns.e('after-text')
+    }, [this.model.afterText]) : null]);
+  }
+});
+
+export { GctFormSelect };

package/es/{editor → modules/gct-form/editor}/gct-form-select/gct-form-select.provider.d.ts

@@ -1,4 +1,4 @@
-import { IEditorProvider } from '@gct-paas/core';
+import { IEditorProvider } from '../../interface';
 /**
  * 纯预览编辑器
  *

package/es/modules/gct-form/editor/gct-form-select/gct-form-select.provider.mjs

@@ -0,0 +1,5 @@
+class GctFormSelectProvider {
+  component = "gct-form-select";
+}
+
+export { GctFormSelectProvider };

package/es/modules/gct-form/editor/gct-form-select/index.mjs

@@ -0,0 +1,12 @@
+import { GctFormSelectProvider } from './gct-form-select.provider.mjs';
+import { GctFormSelect as GctFormSelect$1 } from './gct-form-select.mjs';
+import { widthEditorInstall } from '../../utils/width-install/width-install.mjs';
+import { EditorType } from '../../constants/editor-type/editor-type.mjs';
+
+const GctFormSelect = widthEditorInstall(
+  EditorType.SELECT,
+  () => new GctFormSelectProvider(),
+  GctFormSelect$1
+);
+
+export { GctFormSelect as default };

package/es/modules/gct-form/editor/gct-form-span/gct-form-span.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-form-span {
+  min-height: var(--gct-form-item-min-height);
+  display: flex;
+  align-items: center;
+}
+.gct-form-span__copy {
+  cursor: pointer;
+  margin-left: 4px;
+}

package/es/{editor → modules/gct-form/editor}/gct-form-span/gct-form-span.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { IFormItem, IFormItemController, ISpanEditor } from '@gct-paas/core';
+import { IFormItemController, IFormItem, ISpanEditor } from '../../interface';
 export declare const GctFormSpan: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     c: {
         type: PropType<IFormItemController>;
@@ -17,6 +17,10 @@ export declare const GctFormSpan: import('vue').DefineComponent<import('vue').Ex
         type: StringConstructor;
         default: string;
     };
+    isEmptyText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     ns: import('@gct-paas/core').Namespace;
     val: import('vue').ComputedRef<string>;
@@ -38,6 +42,11 @@ export declare const GctFormSpan: import('vue').DefineComponent<import('vue').Ex
         type: StringConstructor;
         default: string;
     };
+    isEmptyText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     value: string;
+    isEmptyText: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/modules/gct-form/editor/gct-form-span/gct-form-span.mjs

@@ -0,0 +1,100 @@
+import { defineComponent, createVNode, toRefs, computed } from 'vue';
+import { message } from 'ant-design-vue';
+import { useNamespace, useCopyToClipboard, t } from '@gct-paas/core';
+import './gct-form-span.css';/* empty css                    */
+
+const GctFormSpan = /* @__PURE__ */ defineComponent({
+  name: 'GctFormSpan',
+  props: {
+    c: {
+      type: Object,
+      required: true
+    },
+    itemModel: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    isEmptyText: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('form-span');
+    const {
+      model,
+      itemModel,
+      c
+    } = toRefs(props);
+    function handleClipboardKey() {
+      const {
+        isSuccessRef
+      } = useCopyToClipboard(props.value);
+      if (isSuccessRef.value) {
+        message.success(t('sys.copySuccess'));
+      }
+    }
+    c.value.loadDictionary();
+    const val = computed(() => {
+      // 格式化
+      if (model.value.format && typeof model.value.format === 'function') {
+        return model.value.format(c.value.data, itemModel.value, c.value);
+      }
+      // 无值时直接返回
+      if (props.value == null || props.value === '') {
+        return props.value;
+      }
+      // 转换代码表
+      if (itemModel.value.dictionary) {
+        const items = itemModel.value.dictionary.items || [];
+        const dictionaryItem = items.find(item => {
+          return item.value == props.value;
+        });
+        if (dictionaryItem) {
+          return dictionaryItem.label;
+        }
+      }
+      // 转换动态加载的代码表
+      if (c.value.state.options.length > 0) {
+        const item = c.value.state.options.find(item => {
+          return item.value == props.value;
+        });
+        if (item) {
+          return item.label;
+        }
+      }
+      return props.value;
+    });
+    return {
+      ns,
+      val,
+      handleClipboardKey
+    };
+  },
+  render() {
+    let text = this.val;
+    if (!this.val && this.isEmptyText === true) {
+      text = _gct.store.getEmptyDisplay;
+    }
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("span", {
+      "class": this.ns.e('info')
+    }, [text]), this.model.copy && createVNode("span", {
+      "class": this.ns.e('copy')
+    }, [createVNode("i", {
+      "class": "iconfont icon-fuzhi primary-gct",
+      "onClick": this.handleClipboardKey
+    }, null)])]);
+  }
+});
+
+export { GctFormSpan };

package/es/{editor → modules/gct-form/editor}/gct-form-span/gct-form-span.provider.d.ts

@@ -1,4 +1,4 @@
-import { IEditorProvider } from '@gct-paas/core';
+import { IEditorProvider } from '../../interface';
 /**
  * 纯文本展示编辑器
  *

package/es/modules/gct-form/editor/gct-form-span/gct-form-span.provider.mjs

@@ -0,0 +1,5 @@
+class GctFormSpanProvider {
+  component = "gct-form-span";
+}
+
+export { GctFormSpanProvider };

package/es/modules/gct-form/editor/gct-form-span/index.mjs

@@ -0,0 +1,12 @@
+import { GctFormSpanProvider } from './gct-form-span.provider.mjs';
+import { GctFormSpan as GctFormSpan$1 } from './gct-form-span.mjs';
+import { widthEditorInstall } from '../../utils/width-install/width-install.mjs';
+import { EditorType } from '../../constants/editor-type/editor-type.mjs';
+
+const GctFormSpan = widthEditorInstall(
+  EditorType.SPAN,
+  () => new GctFormSpanProvider(),
+  GctFormSpan$1
+);
+
+export { GctFormSpan as default };

package/es/{editor → modules/gct-form/editor}/gct-form-switch/gct-form-switch.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { ISwitchEditor } from '@gct-paas/core';
+import { ISwitchEditor } from '../../interface';
 export declare const GctFormSwitch: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     model: {
         type: PropType<ISwitchEditor>;
@@ -9,6 +9,9 @@ export declare const GctFormSwitch: import('vue').DefineComponent<import('vue').
         type: StringConstructor;
         default: string;
     };
+    size: {
+        type: StringConstructor;
+    };
 }>, {
     ns: import('@gct-paas/core').Namespace;
     val: import('vue').WritableComputedRef<any, any>;
@@ -21,6 +24,9 @@ export declare const GctFormSwitch: import('vue').DefineComponent<import('vue').
         type: StringConstructor;
         default: string;
     };
+    size: {
+        type: StringConstructor;
+    };
 }>> & Readonly<{}>, {
     value: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/modules/gct-form/editor/gct-form-switch/gct-form-switch.mjs

@@ -0,0 +1,39 @@
+import { defineComponent, createVNode, resolveComponent, mergeProps } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { useGctFormValue } from '../../hooks/use-gct-form-value/use-gct-form-value.mjs';
+
+const GctFormSwitch = /* @__PURE__ */ defineComponent({
+  name: 'GctFormSwitch',
+  props: {
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String
+    }
+  },
+  setup() {
+    const ns = useNamespace('gct-form-switch');
+    const val = useGctFormValue();
+    return {
+      ns,
+      val
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode(resolveComponent("a-switch"), mergeProps({
+      "checked": this.val,
+      "onUpdate:checked": $event => this.val = $event,
+      "size": this.size
+    }, this.model.props || {}), null)]);
+  }
+});
+
+export { GctFormSwitch };

package/es/{editor → modules/gct-form/editor}/gct-form-switch/gct-form-switch.provider.d.ts

@@ -1,4 +1,4 @@
-import { IEditorProvider } from '@gct-paas/core';
+import { IEditorProvider } from '../../interface';
 /**
  * 开关编辑器
  *

package/es/modules/gct-form/editor/gct-form-switch/gct-form-switch.provider.mjs

@@ -0,0 +1,5 @@
+class GctFormSwitchProvider {
+  component = "gct-form-switch";
+}
+
+export { GctFormSwitchProvider };

package/es/modules/gct-form/editor/gct-form-switch/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install(app: import('vue').App): void;
+};
+export default _default;

package/es/modules/gct-form/editor/gct-form-switch/index.mjs

@@ -0,0 +1,12 @@
+import { GctFormSwitchProvider } from './gct-form-switch.provider.mjs';
+import { GctFormSwitch as GctFormSwitch$1 } from './gct-form-switch.mjs';
+import { widthEditorInstall } from '../../utils/width-install/width-install.mjs';
+import { EditorType } from '../../constants/editor-type/editor-type.mjs';
+
+const GctFormSwitch = widthEditorInstall(
+  EditorType.SWITCH,
+  () => new GctFormSwitchProvider(),
+  GctFormSwitch$1
+);
+
+export { GctFormSwitch as default };

package/es/modules/gct-form/editor/gct-form-table/gct-form-table.d.ts

@@ -0,0 +1,53 @@
+import { PropType } from 'vue';
+import { ITableEditor } from '../../interface';
+export declare const GctFormTable: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    model: {
+        type: PropType<ITableEditor>;
+        required: true;
+    };
+    value: {
+        type: {
+            (arrayLength: number): IObject[];
+            (...items: IObject[]): IObject[];
+            new (arrayLength: number): IObject[];
+            new (...items: IObject[]): IObject[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: () => never[];
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    model: {
+        type: PropType<ITableEditor>;
+        required: true;
+    };
+    value: {
+        type: {
+            (arrayLength: number): IObject[];
+            (...items: IObject[]): IObject[];
+            new (arrayLength: number): IObject[];
+            new (...items: IObject[]): IObject[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    value: IObject[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/modules/gct-form/editor/gct-form-table/gct-form-table.mjs

@@ -0,0 +1,32 @@
+import { defineComponent, createVNode, resolveComponent, mergeProps } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { useGctFormValue } from '../../hooks/use-gct-form-value/use-gct-form-value.mjs';
+
+const GctFormTable = /* @__PURE__ */ defineComponent({
+  name: 'GctFormTable',
+  props: {
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('form-table');
+    const val = useGctFormValue();
+    return () => {
+      return createVNode("div", {
+        "class": ns.b()
+      }, [createVNode(resolveComponent("gct-table"), mergeProps({
+        "data": val.value,
+        "model": props.model.tableModel,
+        "count": val.value.length.toString()
+      }, props.model.props || {}), null)]);
+    };
+  }
+});
+
+export { GctFormTable };

package/es/modules/gct-form/editor/gct-form-table/index.d.ts

@@ -0,0 +1,8 @@
+import { IEditorProvider } from '../../interface';
+export declare class Provider implements IEditorProvider {
+    component: string;
+}
+declare const _default: {
+    install(app: import('vue').App): void;
+};
+export default _default;

package/es/modules/gct-form/editor/gct-form-table/index.mjs

@@ -0,0 +1,14 @@
+import { EditorType } from '../../constants/editor-type/editor-type.mjs';
+import { widthEditorInstall } from '../../utils/width-install/width-install.mjs';
+import { GctFormTable as GctFormTable$1 } from './gct-form-table.mjs';
+
+class Provider {
+  component = "gct-form-table";
+}
+const GctFormTable = widthEditorInstall(
+  EditorType.TABLE,
+  () => new Provider(),
+  GctFormTable$1
+);
+
+export { Provider, GctFormTable as default };