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

package/es/modules/gct-form/editor/gct-form-group-select/gct-form-group-select.css

@@ -0,0 +1,120 @@
+@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-select-group {
+  display: flex;
+  align-items: center;
+}
+.gct-form-select-group__group-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 4px 8px;
+}
+.gct-form-select-group__group-header--clickable {
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.gct-form-select-group__group-header--clickable:hover {
+  background-color: var(--gct-color-info-light-9);
+}
+
+.gct-form-select-group__arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+  transition: transform 0.2s;
+}
+.gct-form-select-group__arrow i {
+  font-size: 12px;
+  color: var(--gct-color-regular);
+}
+.gct-form-select-group__arrow--collapsed {
+  transform: rotate(-90deg);
+}
+
+.gct-form-select-group__title {
+  flex: 1;
+  font-weight: 500;
+}
+
+.gct-form-select-group-item-option {
+  display: flex;
+  align-items: center;
+}
+.gct-form-select-group-item-option__item-icon {
+  color: var(--gct-color-primary);
+  flex-shrink: 0;
+  margin-right: var(--gct-padding-2);
+}
+
+.gct-form-select-group-item-option__item-label {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -1,6 +1,7 @@
 import { PropType } from 'vue';
-import { IFormItemController, ISelectEditor } from '@gct-paas/core';
-export declare const GctFormModalSelect: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+import { IFormItemController, ISelectEditor } from '../../interface';
+import { IDictionaryItem } from '@gct-paas/core';
+export declare const GctFormSelectGroup: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     c: {
         type: PropType<IFormItemController>;
         required: true;
@@ -13,17 +14,20 @@ export declare const GctFormModalSelect: import('vue').DefineComponent<import('v
         type: StringConstructor;
         default: string;
     };
+    size: {
+        type: StringConstructor;
+    };
 }>, {
     ns: import('@gct-paas/core').Namespace;
-    val: import('vue').WritableComputedRef<any, any>;
-    options: import('vue').ComputedRef<{
-        label: string;
-        options: {
-            value: string;
-            label: string;
-        }[];
-    }[]>;
-    modelCategory: import('vue').Ref<string, string>;
+    selectRef: import('vue').Ref<IObject | null, IObject | null>;
+    searchValue: import('vue').Ref<string, string>;
+    open: import('vue').Ref<boolean, boolean>;
+    rootRef: import('vue').Ref<any, any>;
+    val: import('vue').WritableComputedRef<any, string>;
+    options: import('vue').ComputedRef<IDictionaryItem[]>;
+    loadOptions: () => Promise<IDictionaryItem[]>;
+    toggleGroupCollapse: (groupValue: string) => void;
+    isGroupCollapsed: (groupValue: string) => boolean;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     c: {
         type: PropType<IFormItemController>;
@@ -37,9 +41,12 @@ export declare const GctFormModalSelect: import('vue').DefineComponent<import('v
         type: StringConstructor;
         default: string;
     };
+    size: {
+        type: StringConstructor;
+    };
 }>> & Readonly<{
     "onUpdate:value"?: ((...args: any[]) => any) | undefined;
 }>, {
     value: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default GctFormModalSelect;
+export default GctFormSelectGroup;

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

@@ -0,0 +1,231 @@
+import { defineComponent, createVNode, resolveComponent, inject, ref, computed, onUnmounted, isVNode } from 'vue';
+import './gct-form-group-select.css';/* empty css                            */
+import { useNamespace } from '@gct-paas/core';
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const GctFormSelectGroup = /* @__PURE__ */ defineComponent({
+  name: 'GctFormSelectGroup',
+  props: {
+    c: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String
+    }
+  },
+  emits: ['update:value'],
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace('form-select-group');
+    const formC = inject('formController');
+    const searchValue = ref('');
+    const selectRef = ref(null);
+    const open = ref(false);
+
+    // 分组收缩状态管理，存在里边的值表示该分组已收起
+    const collapsedGroups = ref(new Set());
+    const nameVal = computed({
+      get() {
+        if (props.model.nameField) {
+          return formC.item[props.model.nameField].value;
+        }
+        return '';
+      },
+      set(v) {
+        if (props.model.nameField) {
+          return formC.item[props.model.nameField].editorValue = v;
+        }
+      }
+    });
+    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 val = computed({
+      get: () => {
+        const opt = props.c.state.options.find(_ => {
+          return _.value === props.value;
+        });
+        if (!opt && nameVal.value) {
+          return nameVal.value;
+        }
+        return props.value || undefined;
+      },
+      set: newVal => {
+        if (!newVal) {
+          emit('update:value', undefined);
+          nameVal.value = '';
+          return;
+        }
+        if (typeof newVal === 'string') {
+          newVal = newVal.trim();
+        }
+        emit('update:value', newVal);
+        let item = null;
+        options.value.find(_ => {
+          if (_.options) {
+            item = _.options.find(item => {
+              return item.value == newVal;
+            });
+          }
+          if (item) {
+            return true;
+          }
+          return false;
+        });
+        if (item) {
+          nameVal.value = item.label;
+        }
+      }
+    });
+    const options = computed(() => {
+      if (props.c.state.options && props.c.state.options.length > 0) {
+        return props.c.state.options;
+      }
+      return [];
+    });
+    const loadOptions = async () => {
+      return props.c.loadDictionary();
+    };
+
+    // 初始化有值时直接加载选项
+    if (val.value != null) {
+      loadOptions();
+    }
+
+    // 切换分组收缩状态
+    const toggleGroupCollapse = groupValue => {
+      if (!props.model.groupCollapsible) {
+        return;
+      }
+      if (collapsedGroups.value.has(groupValue)) {
+        collapsedGroups.value.delete(groupValue);
+      } else {
+        collapsedGroups.value.add(groupValue);
+      }
+    };
+
+    // 判断分组是否收缩
+    const isGroupCollapsed = groupValue => {
+      if (props.model.groupCollapsible !== true) {
+        return true;
+      }
+      // 存在组里则收起
+      return collapsedGroups.value.has(groupValue) ? false : true;
+    };
+    onUnmounted(() => {
+      window.removeEventListener('wheel', onWheel);
+    });
+    return {
+      ns,
+      selectRef,
+      searchValue,
+      open,
+      rootRef,
+      val,
+      options,
+      loadOptions,
+      toggleGroupCollapse,
+      isGroupCollapsed
+    };
+  },
+  render() {
+    let _slot2;
+    return createVNode("div", {
+      "ref": "rootRef",
+      "class": this.ns.b()
+    }, [createVNode(resolveComponent("a-select"), {
+      "ref": "selectRef",
+      "open": this.open,
+      "value": this.val,
+      "onUpdate:value": $event => this.val = $event,
+      "allowClear": true,
+      "disabled": this.c.state.disabled,
+      "size": this.size,
+      "placeholder": this.model.placeholder,
+      "onDropdownVisibleChange": this.loadOptions,
+      "show-search": true,
+      "filter-option": () => {
+        return true; // 这里不需要过滤选项，搜索功能在下拉框内实现
+      },
+      "searchValue": this.searchValue,
+      "onSearch": val => this.searchValue = val?.trim(),
+      "onFocus": () => this.open = true,
+      "onBlur": () => this.open = false,
+      "onChange": () => this.open = false
+    }, _isSlot(_slot2 = this.options.map(option => {
+      let _slot;
+      const labelGroup = option.label != null ? option.label : ' ';
+      const groupKey = String(option.value);
+      const isCollapsed = this.isGroupCollapsed(groupKey);
+      const items = (!isCollapsed ? [] : option.options || []).filter(item => {
+        if (this.searchValue) {
+          return item.label.toLowerCase().indexOf(this.searchValue.toLowerCase()) >= 0;
+        }
+        return true;
+      });
+      if (items.length === 0) {
+        return null; // 如果没有子项，则不渲染该分组
+      }
+      return createVNode(resolveComponent("a-select-opt-group"), {
+        "key": option.value,
+        "label": createVNode("div", {
+          "class": [this.ns.b('group-header'), this.model.groupCollapsible ? this.ns.b('group-header--clickable') : ''],
+          "onClick": () => this.toggleGroupCollapse(groupKey)
+        }, [this.model.groupCollapsible && createVNode("span", {
+          "class": [this.ns.be('group-header', 'arrow'), isCollapsed ? this.ns.bem('group-header', 'arrow', 'collapsed') : '']
+        }, [createVNode("i", {
+          "class": ['iconfont', isCollapsed != true ? 'icon-right' : 'icon-Down']
+        }, null)]), createVNode("span", {
+          "class": this.ns.be('group-header', 'title')
+        }, [labelGroup])])
+      }, _isSlot(_slot = items.map(item => {
+        return createVNode(resolveComponent("a-select-option"), {
+          "class": this.ns.b('item-option'),
+          "key": item.value,
+          "value": item.value
+        }, {
+          default: () => [item.icon ? createVNode("span", {
+            "class": this.ns.be('item-option', 'item-icon')
+          }, [createVNode("i", {
+            "class": `iconfont ${item.icon}`
+          }, null)]) : '', createVNode("span", {
+            "class": this.ns.be('item-option', 'item-label')
+          }, [item.label])]
+        });
+      })) ? _slot : {
+        default: () => [_slot]
+      });
+    })) ? _slot2 : {
+      default: () => [_slot2]
+    })]);
+  }
+});
+
+export { GctFormSelectGroup };

package/es/modules/gct-form/editor/gct-form-group-select/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-group-select/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 { GctFormSelectGroup } from './gct-form-group-select.mjs';
+
+class provider {
+  component = "gct-form-select-group";
+}
+const GctFromGroupSelect = widthEditorInstall(
+  EditorType.SELECT_GROUP,
+  () => new provider(),
+  GctFormSelectGroup
+);
+
+export { GctFromGroupSelect as default, provider };

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

@@ -0,0 +1,121 @@
+import { II18nEditor } from '../../interface';
+export declare const GctFormI18n: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    context: {
+        type: import('vue').PropType<IContext>;
+        default: () => {};
+    };
+    value: {
+        type: import('vue').PropType<string>;
+    };
+    model: {
+        type: import('vue').PropType<II18nEditor>;
+        required: boolean;
+    };
+    c: {
+        type: import('vue').PropType<import('../..').IFormItemController>;
+        required: boolean;
+    };
+    itemModel: {
+        type: import('vue').PropType<import('../..').IFormEditItem>;
+    };
+    data: {
+        type: ObjectConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keepalive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: import('vue').PropType<"small" | "medium" | "large">;
+    };
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+    isEmptyText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    val: import('vue').WritableComputedRef<string | undefined, string>;
+    i18nConfigValue: import('vue').WritableComputedRef<"" | {
+        i18nKey: any;
+    }, "" | {
+        i18nKey: any;
+    }>;
+    onBlur: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("blur" | "update:value")[], "blur" | "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    context: {
+        type: import('vue').PropType<IContext>;
+        default: () => {};
+    };
+    value: {
+        type: import('vue').PropType<string>;
+    };
+    model: {
+        type: import('vue').PropType<II18nEditor>;
+        required: boolean;
+    };
+    c: {
+        type: import('vue').PropType<import('../..').IFormItemController>;
+        required: boolean;
+    };
+    itemModel: {
+        type: import('vue').PropType<import('../..').IFormEditItem>;
+    };
+    data: {
+        type: ObjectConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keepalive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: import('vue').PropType<"small" | "medium" | "large">;
+    };
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+    isEmptyText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {
+    visible: boolean;
+    keepalive: boolean;
+    count: number;
+    disabled: boolean;
+    context: IContext;
+    readonly: boolean;
+    isEmptyText: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctFormI18n;

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

@@ -0,0 +1,114 @@
+import { defineComponent, createVNode, resolveComponent, mergeProps, ref, computed } from 'vue';
+import { useNamespace, modelLoader } from '@gct-paas/core';
+import { gctFormItemEditorProps } from '../../props/gct-form-item/gct-form-item.props.mjs';
+import { useForm } from '../../hooks/use-form/use-form.mjs';
+
+const GctFormI18n = /* @__PURE__ */ defineComponent({
+  name: 'GctFormI18n',
+  props: gctFormItemEditorProps(),
+  emits: ['update:value', 'blur'],
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace('form-i18n');
+    const form = useForm();
+    const field = ref({});
+    // 数据修改
+    const hasChange = ref(false);
+    const i18nConfig = form.item[props.model?.cfgKey || 'i18nConfig'];
+    if (!i18nConfig) {
+      console.warn(`i18nConfig not found in form item, please ensure that the model has a valid cfgKey or i18nConfig is defined in the form.`);
+    }
+    const fieldKey = computed(() => {
+      return props.data?.[props.model?.fieldKey || 'fieldKey'] || null;
+    });
+    async function loadField() {
+      const fieldMeta = await modelLoader.loadField(props.data?.modelKey || props.context.modelKey, fieldKey.value);
+      if (fieldMeta) {
+        field.value = fieldMeta;
+      }
+    }
+    if (fieldKey.value) {
+      loadField();
+    }
+    const val = computed({
+      get: () => {
+        if (props.value) {
+          return props.value;
+        }
+        if (hasChange.value === true) {
+          return '';
+        }
+        return field.value.name;
+      },
+      set: newVal => {
+        if (typeof newVal === 'string') {
+          newVal = newVal.trim();
+        }
+        hasChange.value = true;
+        if (typeof newVal != 'object' && props.value == newVal) {
+          return;
+        }
+        // 值被清空时，同时清空 i18nConfig 配置
+        if (!newVal) {
+          i18nConfigValue.value = '';
+        }
+        emit('update:value', newVal);
+      }
+    });
+    const i18nConfigValue = computed({
+      get: () => {
+        if (i18nConfig) {
+          return {
+            i18nKey: i18nConfig.value
+          };
+        }
+        return '';
+      },
+      set: val => {
+        if (!i18nConfig) {
+          return;
+        }
+        try {
+          const json = JSON.parse(val);
+          i18nConfig.value = json.i18nKey;
+        } catch (error) {
+          console.error(error);
+        }
+      }
+    });
+    function onBlur() {
+      hasChange.value = false;
+    }
+    return {
+      ns,
+      val,
+      i18nConfigValue,
+      onBlur
+    };
+  },
+  render() {
+    return createVNode(resolveComponent("i18n-select-input"), mergeProps({
+      "class": [this.ns.b(), this.ns.m(this.size)],
+      "i18nText": this.val,
+      "onUpdate:i18nText": $event => this.val = $event,
+      "i18nConfig": this.i18nConfigValue,
+      "onUpdate:i18nConfig": $event => this.i18nConfigValue = $event,
+      "placeholderText": this.model.placeholder || this.$t('sys.inputText'),
+      "attr": "i18nKey",
+      "btnHeight": this.size === 'small' ? '26px' : undefined,
+      "inputExtraProps": {
+        showCount: true,
+        maxlength: this.model.max || 32,
+        disabled: this.c.state.disabled
+      },
+      "onBlur": e => {
+        this.onBlur();
+        this.$emit('blur', e);
+      },
+      "size": this.size
+    }, this.model?.props || {}), null);
+  }
+});
+
+export { GctFormI18n };

package/es/{editor → modules/gct-form/editor}/gct-form-i18n/gct-form-i18n.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-i18n/gct-form-i18n.provider.mjs

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

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

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