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

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

@@ -0,0 +1,76 @@
+@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-gct-form-icon-select {
+  --box-size: 40px;
+  width: 100%;
+  height: 100%;
+}
+.gct-gct-form-icon-select__title {
+  display: inline-block;
+  font-size: 14px;
+  color: #474747;
+  width: 56px;
+  text-align: center;
+}

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

@@ -1,8 +1,8 @@
 import { PropType } from 'vue';
-import { IIconSelectEditor } from '@gct-paas/core';
+import { IIconSelectEditor } from '../../interface';
 export declare const GctFormIconSelect: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     value: {
-        type: PropType<any>;
+        type: PropType<IObject>;
     };
     model: {
         type: PropType<IIconSelectEditor>;
@@ -18,7 +18,7 @@ export declare const GctFormIconSelect: import('vue').DefineComponent<import('vu
     } | undefined>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     value: {
-        type: PropType<any>;
+        type: PropType<IObject>;
     };
     model: {
         type: PropType<IIconSelectEditor>;

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

@@ -0,0 +1,73 @@
+import { defineComponent, createVNode, resolveComponent, ref, watch, computed } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import './gct-form-icon-select.css';/* empty css                           */
+
+const GctFormIconSelect = /* @__PURE__ */ defineComponent({
+  name: 'GctFormIconSelect',
+  props: {
+    value: {
+      type: Object
+    },
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['update:value'],
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace('gct-form-icon-select');
+    const val = ref(props.value);
+    const icon = ref(val.value?.icon || props.model.defaultIcon);
+    const color = ref(val.value?.color || props.model.defaultColor);
+    const background = ref(val.value?.background || props.model.defaultBackground);
+    watch(() => props.value, newVal => {
+      val.value = newVal;
+      if (newVal) {
+        icon.value = newVal.icon;
+        color.value = newVal.color;
+      }
+    });
+    watch([icon, color, background], () => {
+      val.value = {
+        icon: icon.value,
+        color: color.value
+      };
+      emit('update:value', val.value);
+    });
+    const nextPickerStyle = computed(() => {
+      if (!props.model.size) {
+        return;
+      }
+      return {
+        '--box-size': props.model.size + 'px'
+      };
+    });
+    return {
+      ns,
+      icon,
+      color,
+      background,
+      nextPickerStyle
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode(resolveComponent("icon-next-picker"), {
+      "value": this.icon,
+      "onUpdate:value": $event => this.icon = $event,
+      "color": this.color,
+      "onUpdate:color": $event => this.color = $event,
+      "background": "#f5f5f5",
+      "disabled": this.model.disabled,
+      "showColor": this.model.showColor === false ? false : true,
+      "style": this.nextPickerStyle
+    }, null), this.model.label ? createVNode("span", {
+      "class": this.ns.e('title')
+    }, [this.model.label]) : null]);
+  }
+});
+
+export { GctFormIconSelect };

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

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

package/es/modules/gct-form/editor/gct-form-icon-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 { GctFormIconSelect as GctFormIconSelect$1 } from './gct-form-icon-select.mjs';
+
+class Provider {
+  component = "gct-form-icon-select";
+}
+const GctFormIconSelect = widthEditorInstall(
+  EditorType.ICON_SELECT,
+  () => new Provider(),
+  GctFormIconSelect$1
+);
+
+export { Provider, GctFormIconSelect as default };

package/es/modules/gct-form/editor/gct-form-info/gct-form-info.css

@@ -0,0 +1,85 @@
+@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-gct-form-info {
+  color: var(--gct-color-text-5);
+  display: flex;
+  align-items: center;
+}
+.gct-gct-form-info__icon {
+  margin-right: 3px;
+  vertical-align: -1px;
+}
+
+.gct-gct-form-info__content {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gct-gct-form-info--small {
+  font-size: 12px;
+  line-height: 16px;
+}

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { IInfoEditor } from '@gct-paas/core';
+import { IInfoEditor } from '../../interface';
 export declare const GctFormInfo: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     value: {
         type: StringConstructor;
@@ -9,6 +9,13 @@ export declare const GctFormInfo: import('vue').DefineComponent<import('vue').Ex
         type: PropType<IInfoEditor>;
         required: true;
     };
+    size: {
+        type: StringConstructor;
+    };
+    isEmptyText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     ns: import('@gct-paas/core').Namespace;
     val: import('vue').WritableComputedRef<any, any>;
@@ -21,8 +28,16 @@ export declare const GctFormInfo: import('vue').DefineComponent<import('vue').Ex
         type: PropType<IInfoEditor>;
         required: true;
     };
+    size: {
+        type: StringConstructor;
+    };
+    isEmptyText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:value"?: ((...args: any[]) => any) | undefined;
 }>, {
     value: string;
+    isEmptyText: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,52 @@
+import { defineComponent, createVNode } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { useGctFormValue } from '../../hooks/use-gct-form-value/use-gct-form-value.mjs';
+import './gct-form-info.css';/* empty css                    */
+
+const GctFormInfo = /* @__PURE__ */ defineComponent({
+  name: 'GctFormInfo',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    size: {
+      type: String
+    },
+    isEmptyText: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:value'],
+  setup() {
+    const ns = useNamespace('gct-form-info');
+    const val = useGctFormValue();
+    return {
+      ns,
+      val
+    };
+  },
+  render() {
+    let info = this.val || this.model.content;
+    if (!this.val && this.isEmptyText === true) {
+      info = _gct.store.getEmptyDisplay;
+    }
+    return createVNode("div", {
+      "class": [this.ns.b(), this.size ? this.ns.m(this.size) : null]
+    }, [this.model.icon ? createVNode("span", {
+      "class": this.ns.e('icon')
+    }, [createVNode("i", {
+      "class": `iconfont ${this.model.icon}`
+    }, null)]) : null, createVNode("span", {
+      "class": this.ns.e('content'),
+      "title": info
+    }, [info])]);
+  }
+});
+
+export { GctFormInfo };

package/es/modules/gct-form/editor/gct-form-info/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-info/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 { GctFormInfo as GctFormInfo$1 } from './gct-form-info.mjs';
+
+class Provider {
+  component = "gct-form-info";
+}
+const GctFormInfo = widthEditorInstall(
+  EditorType.INFO,
+  () => new Provider(),
+  GctFormInfo$1
+);
+
+export { Provider, GctFormInfo as default };

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { LengthUnitEditorController, ILengthUnitEditor, IFormItem } from '@gct-paas/core';
+import { IFormItem, ILengthUnitEditor } from '../../interface';
 /**
  * 带单位长度字符串编辑器
  */
@@ -14,11 +14,9 @@ export declare const GctFormLengthUnit: import('vue').DefineComponent<import('vu
     };
     value: {
         type: StringConstructor;
-        required: true;
     };
 }>, {
     ns: import('@gct-paas/core').Namespace;
-    c: LengthUnitEditorController;
     val: import('vue').WritableComputedRef<any, any>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     itemModel: {
@@ -31,7 +29,6 @@ export declare const GctFormLengthUnit: import('vue').DefineComponent<import('vu
     };
     value: {
         type: StringConstructor;
-        required: true;
     };
 }>> & Readonly<{
     "onUpdate:value"?: ((...args: any[]) => any) | undefined;

package/es/modules/gct-form/editor/gct-form-length-unit/gct-form-length-unit.mjs

@@ -0,0 +1,43 @@
+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 GctFormLengthUnit = /* @__PURE__ */ defineComponent({
+  name: 'GctFormLengthUnit',
+  inheritAttrs: false,
+  props: {
+    itemModel: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: String
+    }
+  },
+  emits: ['update:value'],
+  setup() {
+    const ns = useNamespace('form-length-unit');
+    const val = useGctFormValue();
+    return {
+      ns,
+      val
+    };
+  },
+  render() {
+    return createVNode(resolveComponent("length-unit-editor"), mergeProps({
+      "value": this.val,
+      "onUpdate:value": $event => this.val = $event
+    }, this.model.props || {}, {
+      "class": [this.ns.b(), this.ns.is('readonly', this.model.readonly)]
+    }), null);
+  }
+});
+
+export { GctFormLengthUnit };

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

@@ -0,0 +1,5 @@
+class GctFormLengthUnitProvider {
+  component = "gct-form-length-unit";
+}
+
+export { GctFormLengthUnitProvider };

package/es/modules/gct-form/editor/gct-form-length-unit/index.mjs

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

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

@@ -0,0 +1,76 @@
+@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-model-select {
+  width: 100%;
+}
+.gct-form-model-select .ant-select.ant-select-single.ant-select-show-arrow.gct-form-model-select__class {
+  width: 84px;
+}
+.gct-form-model-select .ant-select.ant-select-single.ant-select-show-arrow.gct-form-model-select__model {
+  width: 208px;
+}
+.gct-form-model-select .ant-select.gct-form-model-select__model {
+  width: 208px;
+}

package/es/modules/gct-form/editor/gct-form-model-select/gct-form-model-select.d.ts

@@ -0,0 +1,19 @@
+import { PropType } from 'vue';
+import { ITextEditor } from '../../interface';
+export declare const GctFormModelSelect: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    model: {
+        type: PropType<ITextEditor>;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    model: {
+        type: PropType<ITextEditor>;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;