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

package/es/editor/custom-exp-menu-editor/modal/exp-menu.modal.d.ts

@@ -0,0 +1,37 @@
+import { PropType } from 'vue';
+import { IEditForm, IModal, IMobileHomeMenuItem } from '@gct-paas/core';
+export declare const ExpMenuModal: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modal: {
+        type: PropType<IModal>;
+        required: true;
+    };
+    data: {
+        type: PropType<IMobileHomeMenuItem>;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    model: IEditForm;
+    form: {
+        id: string;
+        menuMode: "system" | "custom";
+        label: string;
+        i18nConfig?: any;
+        presetType?: "message" | "workbench" | "personalCenter" | "todo" | undefined;
+        icon: any;
+        selectIcon: any;
+        customExpView?: string | undefined;
+        isHidden: boolean;
+        isHome: boolean;
+        isSystem: boolean;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modal: {
+        type: PropType<IModal>;
+        required: true;
+    };
+    data: {
+        type: PropType<IMobileHomeMenuItem>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/editor/field-info-editor/field-info-editor.css

@@ -0,0 +1,125 @@
+@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-field-info-editor__field-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 18px;
+  flex-wrap: wrap;
+}
+
+.gct-field-info-editor__field-name {
+  max-width: 100%;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+.gct-field-info-editor__field-name span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gct-field-info-editor__field-icon {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  margin-right: 8px;
+  background-size: cover;
+  background-color: #e2eef9;
+  border-radius: var(--gct-border-radius-s);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.gct-field-info-editor__field-icon .iconfont {
+  color: var(--gct-color-primary);
+  font-size: 11px;
+}
+
+.gct-field-info-editor__field-key {
+  color: var(--gct-color-text-5);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gct-field-info-editor__field-paths {
+  margin-top: 12px;
+  font-size: 12px;
+  color: var(--gct-color-text-5);
+}
+.gct-field-info-editor__field-paths span:last-child {
+  margin-right: 0;
+  color: var(--gct-color-text-1);
+}
+
+.gct-field-info-editor__field-sep {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/es/editor/field-info-editor/field-info-editor.d.ts

@@ -0,0 +1,111 @@
+import { EditorType, IEditorBasic } from '@gct-paas/core';
+export interface IFieldInfoEditor extends IEditorBasic {
+    readonly type: EditorType.FIELD_INFO;
+}
+export declare const FieldInfoEditor: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    context: {
+        type: import('vue').PropType<IContext>;
+        default: () => {};
+    };
+    value: {
+        type: import('vue').PropType<IObject>;
+    };
+    model: {
+        type: import('vue').PropType<IFieldInfoEditor>;
+        required: boolean;
+    };
+    c: {
+        type: import('vue').PropType<import('@gct-paas/core').IFormItemController>;
+        required: boolean;
+    };
+    itemModel: {
+        type: import('vue').PropType<import('@gct-paas/core').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;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    context: {
+        type: import('vue').PropType<IContext>;
+        default: () => {};
+    };
+    value: {
+        type: import('vue').PropType<IObject>;
+    };
+    model: {
+        type: import('vue').PropType<IFieldInfoEditor>;
+        required: boolean;
+    };
+    c: {
+        type: import('vue').PropType<import('@gct-paas/core').IFormItemController>;
+        required: boolean;
+    };
+    itemModel: {
+        type: import('vue').PropType<import('@gct-paas/core').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<{}>, {
+    count: number;
+    readonly: boolean;
+    disabled: boolean;
+    context: IContext;
+    visible: boolean;
+    keepalive: boolean;
+    isEmptyText: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/editor/field-info-editor/field-info-editor.mjs

@@ -0,0 +1,60 @@
+import { defineComponent, ref, computed, createVNode } from 'vue';
+import { useNamespace, FieldIconMap, t, gctFormItemEditorProps, modelLoader } from '@gct-paas/core';
+import './field-info-editor.css';/* empty css                        */
+
+const FieldInfoEditor = /* @__PURE__ */ defineComponent({
+  name: 'FieldInfoEditor',
+  props: gctFormItemEditorProps(),
+  setup(props) {
+    const ns = useNamespace('field-info-editor');
+    // 字段信息
+    const field = ref({});
+    // 字段链信息
+    const fieldPaths = ref([]);
+    // 加载字段信息
+    async function loadField() {
+      const modelKey = props.data?.modelKey || props.context.modelKey;
+      if (modelKey) {
+        const fieldMeta = await modelLoader.loadField(modelKey, props.data?.key);
+        if (fieldMeta) {
+          field.value = fieldMeta;
+        } else {
+          field.value = {};
+        }
+        fieldPaths.value = await modelLoader.loadFieldPaths(modelKey, field.value.key, props.data?.fieldCodeChain);
+      }
+    }
+    // 加载字段信息
+    loadField();
+    const fieldKeyText = computed(() => {
+      if (field.value) {
+        return field.value.key;
+      }
+      return '';
+    });
+    return () => {
+      return createVNode("div", {
+        "class": ns.b()
+      }, [createVNode("div", {
+        "class": ns.e('field-info')
+      }, [createVNode("span", {
+        "class": ns.e('field-name')
+      }, [createVNode("span", {
+        "class": ns.e('field-icon')
+      }, [createVNode("i", {
+        "class": ['iconfont', field.value && FieldIconMap[field.value.type] ? FieldIconMap[field.value.type] : 'icon-zidingyi']
+      }, null)]), createVNode("span", null, [t(`sys.model.${field.value.type}`)])]), createVNode("span", {
+        "class": ns.e('field-key'),
+        "title": fieldKeyText.value
+      }, [fieldKeyText.value])]), createVNode("div", {
+        "class": ns.e('field-paths')
+      }, [fieldPaths.value.flatMap((path, index) => {
+        return [index > 0 ? createVNode("span", null, [createVNode("i", {
+          "class": "iconfont icon-a-Rightarrow text-[12px]! ml4px mr4px"
+        }, null)]) : null, createVNode("span", null, [path])];
+      }).filter(item => item !== null)])]);
+    };
+  }
+});
+
+export { FieldInfoEditor };

package/es/editor/field-info-editor/index.d.ts

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

package/es/editor/field-info-editor/index.mjs

@@ -0,0 +1,13 @@
+import { widthEditorInstall, EditorType } from '@gct-paas/core';
+import { FieldInfoEditor as FieldInfoEditor$1 } from './field-info-editor.mjs';
+
+class Provider {
+  component = "FieldInfoEditor";
+}
+const FieldInfoEditor = widthEditorInstall(
+  EditorType.FIELD_INFO,
+  () => new Provider(),
+  FieldInfoEditor$1
+);
+
+export { Provider, FieldInfoEditor as default };

package/es/editor/index.d.ts

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

package/es/editor/index.mjs

@@ -0,0 +1,27 @@
+import ChildListEditor from './child-list-editor/index.mjs';
+import ContentTagStyle from './content-tag-style/index.mjs';
+import CustomExpMenuEditor from './custom-exp-menu-editor/index.mjs';
+import FieldInfoEditor from './field-info-editor/index.mjs';
+import ModelFieldSelect from './model-field-select/index.mjs';
+import StylePosition from './style-position/index.mjs';
+import StyleFont from './style-font/index.mjs';
+import StyleSpacing from './style-spacing/index.mjs';
+import StyleBorder from './style-border/index.mjs';
+import SystemPageSelect from './system-page-select/index.mjs';
+
+const Editors = {
+  install(app) {
+    app.use(ChildListEditor);
+    app.use(ContentTagStyle);
+    app.use(CustomExpMenuEditor);
+    app.use(FieldInfoEditor);
+    app.use(ModelFieldSelect);
+    app.use(StylePosition);
+    app.use(StyleFont);
+    app.use(StyleSpacing);
+    app.use(StyleBorder);
+    app.use(SystemPageSelect);
+  }
+};
+
+export { Editors as default };

package/es/editor/model-field-select/index.d.ts

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

package/es/editor/model-field-select/index.mjs

@@ -0,0 +1,13 @@
+import { widthEditorInstall, EditorType } from '@gct-paas/core';
+import { ModelFieldSelect as ModelFieldSelect$1 } from './model-field-select.mjs';
+
+class Provider {
+  component = "ModelFieldSelect";
+}
+const ModelFieldSelect = widthEditorInstall(
+  EditorType.FORM_MODEL_FIELD_SELECT,
+  () => new Provider(),
+  ModelFieldSelect$1
+);
+
+export { Provider, ModelFieldSelect as default };

package/es/editor/model-field-select/model-field-select.css

@@ -0,0 +1,141 @@
+@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-model-field-select__field-content {
+  margin-top: var(--gct-padding-7);
+}
+
+.gct-model-field-select__field-title {
+  color: var(--gct-color-text-5);
+  margin-bottom: var(--gct-padding-4);
+  margin-top: var(--gct-padding-7);
+}
+
+.gct-model-field-select__field-list {
+  max-height: 338px;
+  overflow: hidden auto;
+}
+.gct-model-field-select__field-list .gct-dnd-item {
+  background-color: transparent;
+}
+
+.gct-model-field-select__field-item {
+  position: relative;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  padding: 0 var(--gct-padding-4);
+  border-radius: var(--gct-border-radius-s);
+}
+.gct-model-field-select__field-item--bg {
+  z-index: 0;
+  position: absolute;
+  inset: 0;
+  background-color: var(--gct-color-primary);
+  opacity: 0.08;
+  border-radius: var(--gct-border-radius-s);
+}
+
+.gct-model-field-select__field-item--drag {
+  z-index: 1;
+  color: #d9d9d9;
+  flex-shrink: 0;
+  width: 16px;
+}
+
+.gct-model-field-select__field-item--label {
+  z-index: 1;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+}
+
+.gct-model-field-select__field-item--label-icon {
+  display: inline-block;
+  width: 16px;
+  margin: 0 var(--gct-padding-2);
+  color: var(--gct-color-primary);
+}
+.gct-model-field-select__field-item--label-icon .iconfont {
+  font-size: 12px;
+}
+
+.gct-model-field-select__field-item--label-text {
+  display: inline-block;
+  width: 130px;
+  color: var(--gct-color-text-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gct-model-field-select__field-item--actions {
+  z-index: 1;
+  cursor: pointer;
+  width: 16px;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/es/editor/model-field-select/model-field-select.d.ts

@@ -0,0 +1,42 @@
+import { PropType } from 'vue';
+import { IModelFieldSelectEditor } from '@gct-paas/core';
+export declare const ModelFieldSelect: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: {
+        type: PropType<IObject[]>;
+        default: () => never[];
+    };
+    model: {
+        type: PropType<IModelFieldSelectEditor>;
+        required: true;
+    };
+    c: {
+        type: ObjectConstructor;
+    };
+    itemModel: {
+        type: ObjectConstructor;
+    };
+    data: {
+        type: ObjectConstructor;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: {
+        type: PropType<IObject[]>;
+        default: () => never[];
+    };
+    model: {
+        type: PropType<IModelFieldSelectEditor>;
+        required: true;
+    };
+    c: {
+        type: ObjectConstructor;
+    };
+    itemModel: {
+        type: ObjectConstructor;
+    };
+    data: {
+        type: ObjectConstructor;
+    };
+}>> & Readonly<{}>, {
+    value: IObject[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default ModelFieldSelect;