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

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

@@ -0,0 +1,55 @@
+import { PropType } from 'vue';
+import { ICheckboxEditor, IFormItemController } from '../../interface';
+import { CheckboxValueType } from 'ant-design-vue/es/checkbox/interface';
+export declare const GctFormCheckbox: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormItemController>;
+        required: true;
+    };
+    model: {
+        type: PropType<ICheckboxEditor>;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    checked: import('vue').ComputedRef<any>;
+    onChange: (checkVal: CheckboxValueType[]) => void;
+    onDragEnd: (e: {
+        newIndex: number;
+        oldIndex: number;
+    }) => void;
+    slots: {
+        item: ({ element }: {
+            element: IObject;
+        }) => import("vue/jsx-runtime").JSX.Element;
+    };
+    options: import('vue').ComputedRef<any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormItemController>;
+        required: true;
+    };
+    model: {
+        type: PropType<ICheckboxEditor>;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctFormCheckbox;

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

@@ -0,0 +1,127 @@
+import { defineComponent, withDirectives, createVNode, mergeProps, vShow, computed } from 'vue';
+import { CheckboxGroup, Checkbox } from 'ant-design-vue';
+import Draggable from 'vuedraggable';
+import { useNamespace } from '@gct-paas/core';
+import { useGctFormValue } from '../../hooks/use-gct-form-value/use-gct-form-value.mjs';
+import './gct-form-checkbox.css';/* empty css                        */
+
+const GctFormCheckbox = /* @__PURE__ */ defineComponent({
+  name: 'GctFormCheckbox',
+  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('gct-form-checkbox');
+    const val = useGctFormValue();
+    const checked = computed(() => {
+      return props.model.isDrag ? (val.value || []).filter(e => e.checked).map(e => e.value) : val.value;
+    });
+    const options = computed(() => {
+      if (props.model.isDrag) {
+        return val.value && val.value?.length ? val.value.map(e => {
+          return {
+            ...e,
+            label: props.c.state.options.find(f => f.value === e.value)?.label || ''
+          };
+        }) : props.c.state.options;
+      } else return props.c.state.options;
+    });
+    const onChange = checkVal => {
+      options.value.forEach(e => {
+        if (props.model.minLength && checkVal.length <= props.model.minLength && checkVal.includes(e.value)) {
+          e.disabled = true;
+        } else {
+          e.disabled = false;
+        }
+        e.checked = checkVal.includes(e.value);
+      });
+      if (props.model.isDrag) {
+        emit('update:value', options.value);
+      } else {
+        emit('update:value', checkVal);
+      }
+    };
+    const onDragEnd = e => {
+      const {
+        newIndex,
+        oldIndex
+      } = e;
+      options.value.splice(newIndex, 0, options.value.splice(oldIndex, 1)[0]);
+      emit('update:value', options.value);
+    };
+    const slots = {
+      item: ({
+        element
+      }) => {
+        return createVNode("div", {
+          "class": "drag-checkbox-item ks-row-middle"
+        }, [createVNode("i", {
+          "class": "icon-drag iconfont mr4px cursor-move text-[#C3C3C3] primary-gct-hover"
+        }, null), createVNode(Checkbox, {
+          "value": element.value,
+          "disabled": element.disabled
+        }, {
+          default: () => [element.label]
+        })]);
+      }
+    };
+    return {
+      ns,
+      checked,
+      onChange,
+      onDragEnd,
+      slots,
+      options
+    };
+  },
+  render() {
+    const attrs = {
+      ...(this.model.props || {}),
+      class: [this.ns.b(), this.ns.m('checkbox'), this.model.layout === 'column' && 'isColumn', this.size ? this.ns.m(this.size) : null],
+      disabled: this.c.state.disabled
+    };
+    return [withDirectives(createVNode(CheckboxGroup, mergeProps({
+      "value": this.checked,
+      "onUpdate:value": $event => this.checked = $event
+    }, attrs, {
+      "onChange": this.onChange
+    }), {
+      default: () => [createVNode(Draggable, {
+        "modelValue": this.options,
+        "onUpdate:modelValue": $event => this.options = $event,
+        "handle": ".cursor-move",
+        "animation": "200",
+        "chosen-class": "drawing-chosen",
+        "drag-class": "drawing-drag",
+        "item-key": "value",
+        "class": "drag-wrap",
+        "onEnd": this.onDragEnd
+      }, this.slots)]
+    }), [[vShow, this.model.isDrag]]), withDirectives(createVNode(CheckboxGroup, mergeProps({
+      "value": this.checked,
+      "onUpdate:value": $event => this.checked = $event,
+      "options": this.options
+    }, attrs, {
+      "onChange": this.onChange
+    }), null), [[vShow, !this.model.isDrag]])];
+  }
+});
+
+export { GctFormCheckbox };

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

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

@@ -0,0 +1,67 @@
+@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-color {
+  vertical-align: middle;
+}

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

@@ -0,0 +1,36 @@
+import { PropType } from 'vue';
+import { IColorEditor, IFormItem } from '../../interface';
+/**
+ * 颜色选择编辑器
+ */
+export declare const GctFormColor: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    itemModel: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+    model: {
+        type: PropType<IColorEditor>;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    val: import('vue').WritableComputedRef<any, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    itemModel: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+    model: {
+        type: PropType<IColorEditor>;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctFormColor;

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

@@ -0,0 +1,44 @@
+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';
+import './gct-form-color.css';/* empty css                     */
+
+/**
+ * 颜色选择编辑器
+ */
+const GctFormColor = /* @__PURE__ */ defineComponent({
+  name: 'GctFormColor',
+  inheritAttrs: false,
+  props: {
+    itemModel: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: String
+    }
+  },
+  emits: ['update:value'],
+  setup() {
+    const ns = useNamespace('form-color');
+    const val = useGctFormValue();
+    return {
+      ns,
+      val
+    };
+  },
+  render() {
+    return createVNode(resolveComponent("color-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 { GctFormColor };

package/es/modules/gct-form/editor/gct-form-color/gct-form-color.provider.d.ts

@@ -0,0 +1,13 @@
+import { IEditorProvider } from '../../interface';
+/**
+ * 颜色选择编辑器
+ *
+ * @author lingxiaoming
+ * @date 2024-07-17 04:48:33
+ * @export
+ * @class GctFormColorProvider
+ * @implements {IEditorProvider}
+ */
+export declare class GctFormColorProvider implements IEditorProvider {
+    component: string;
+}

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

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

package/es/modules/gct-form/editor/gct-form-color/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 { GctFormColor as GctFormColor$1 } from './gct-form-color.mjs';
+import { GctFormColorProvider } from './gct-form-color.provider.mjs';
+
+const GctFormColor = widthEditorInstall(
+  EditorType.COLOR,
+  () => new GctFormColorProvider(),
+  GctFormColor$1
+);
+
+export { GctFormColor as default };

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

@@ -0,0 +1,286 @@
+import { PropType } from 'vue';
+import { default as dayjs } from 'dayjs';
+import { ITextEditor } from '../../interface';
+import { EditorController } from '../../controller';
+/**
+ * 文本编辑器
+ */
+export declare const GctFormDate: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    model: {
+        type: PropType<ITextEditor>;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    isDate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isTime: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    c: EditorController<ITextEditor>;
+    dateVal: import('vue').Ref<{
+        clone: () => dayjs.Dayjs;
+        isValid: () => boolean;
+        year: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        month: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        date: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        day: {
+            (): 0 | 1 | 2 | 3 | 4 | 5 | 6;
+            (value: number): dayjs.Dayjs;
+        };
+        hour: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        minute: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        second: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        millisecond: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
+        get: (unit: dayjs.UnitType) => number;
+        add: (value: number, unit?: dayjs.ManipulateType) => dayjs.Dayjs;
+        subtract: (value: number, unit?: dayjs.ManipulateType) => dayjs.Dayjs;
+        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        format: (template?: string) => string;
+        diff: (date?: dayjs.ConfigType, unit?: dayjs.QUnitType | dayjs.OpUnitType, float?: boolean) => number;
+        valueOf: () => number;
+        unix: () => number;
+        daysInMonth: () => number;
+        toDate: () => Date;
+        toJSON: () => string;
+        toISOString: () => string;
+        toString: () => string;
+        utcOffset: () => number;
+        isBefore: (date?: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isSame: (date?: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isAfter: (date?: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        locale: {
+            (): string;
+            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
+        };
+    } | null, dayjs.Dayjs | {
+        clone: () => dayjs.Dayjs;
+        isValid: () => boolean;
+        year: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        month: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        date: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        day: {
+            (): 0 | 1 | 2 | 3 | 4 | 5 | 6;
+            (value: number): dayjs.Dayjs;
+        };
+        hour: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        minute: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        second: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        millisecond: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
+        get: (unit: dayjs.UnitType) => number;
+        add: (value: number, unit?: dayjs.ManipulateType) => dayjs.Dayjs;
+        subtract: (value: number, unit?: dayjs.ManipulateType) => dayjs.Dayjs;
+        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        format: (template?: string) => string;
+        diff: (date?: dayjs.ConfigType, unit?: dayjs.QUnitType | dayjs.OpUnitType, float?: boolean) => number;
+        valueOf: () => number;
+        unix: () => number;
+        daysInMonth: () => number;
+        toDate: () => Date;
+        toJSON: () => string;
+        toISOString: () => string;
+        toString: () => string;
+        utcOffset: () => number;
+        isBefore: (date?: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isSame: (date?: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isAfter: (date?: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        locale: {
+            (): string;
+            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
+        };
+    } | null>;
+    timeVal: import('vue').Ref<{
+        clone: () => dayjs.Dayjs;
+        isValid: () => boolean;
+        year: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        month: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        date: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        day: {
+            (): 0 | 1 | 2 | 3 | 4 | 5 | 6;
+            (value: number): dayjs.Dayjs;
+        };
+        hour: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        minute: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        second: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        millisecond: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
+        get: (unit: dayjs.UnitType) => number;
+        add: (value: number, unit?: dayjs.ManipulateType) => dayjs.Dayjs;
+        subtract: (value: number, unit?: dayjs.ManipulateType) => dayjs.Dayjs;
+        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        format: (template?: string) => string;
+        diff: (date?: dayjs.ConfigType, unit?: dayjs.QUnitType | dayjs.OpUnitType, float?: boolean) => number;
+        valueOf: () => number;
+        unix: () => number;
+        daysInMonth: () => number;
+        toDate: () => Date;
+        toJSON: () => string;
+        toISOString: () => string;
+        toString: () => string;
+        utcOffset: () => number;
+        isBefore: (date?: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isSame: (date?: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isAfter: (date?: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        locale: {
+            (): string;
+            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
+        };
+    } | null, dayjs.Dayjs | {
+        clone: () => dayjs.Dayjs;
+        isValid: () => boolean;
+        year: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        month: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        date: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        day: {
+            (): 0 | 1 | 2 | 3 | 4 | 5 | 6;
+            (value: number): dayjs.Dayjs;
+        };
+        hour: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        minute: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        second: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        millisecond: {
+            (): number;
+            (value: number): dayjs.Dayjs;
+        };
+        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
+        get: (unit: dayjs.UnitType) => number;
+        add: (value: number, unit?: dayjs.ManipulateType) => dayjs.Dayjs;
+        subtract: (value: number, unit?: dayjs.ManipulateType) => dayjs.Dayjs;
+        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
+        format: (template?: string) => string;
+        diff: (date?: dayjs.ConfigType, unit?: dayjs.QUnitType | dayjs.OpUnitType, float?: boolean) => number;
+        valueOf: () => number;
+        unix: () => number;
+        daysInMonth: () => number;
+        toDate: () => Date;
+        toJSON: () => string;
+        toISOString: () => string;
+        toString: () => string;
+        utcOffset: () => number;
+        isBefore: (date?: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isSame: (date?: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        isAfter: (date?: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
+        locale: {
+            (): string;
+            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
+        };
+    } | null>;
+    onChange: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    model: {
+        type: PropType<ITextEditor>;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    isDate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isTime: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: string;
+    isDate: boolean;
+    isTime: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;