@gct-paas/core-web 0.1.4-dev.8 → 0.1.5-dev.0

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

@@ -1,5 +1,6 @@
 import { PropType } from 'vue';
-import { IFormItemController, ICheckboxEditor, IDictionaryItem } from '@gct-paas/core';
+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>;
@@ -13,13 +14,23 @@ export declare const GctFormCheckbox: import('vue').DefineComponent<import('vue'
         type: StringConstructor;
         default: string;
     };
+    size: {
+        type: StringConstructor;
+    };
 }>, {
     ns: import('@gct-paas/core').Namespace;
     checked: import('vue').ComputedRef<any>;
-    onChange: (checkVal: any) => void;
-    options: import('vue').ComputedRef<(IDictionaryItem & {
-        checked?: boolean;
-    })[]>;
+    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>;
@@ -33,6 +44,9 @@ export declare const GctFormCheckbox: 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-checkbox/gct-form-checkbox.mjs

@@ -0,0 +1,102 @@
+import { useGctFormValue } from "../../hooks/use-gct-form-value/use-gct-form-value.mjs";
+import "../../hooks/index.mjs";
+import './gct-form-checkbox.css';/* empty css                        */
+import { computed, createVNode, defineComponent, mergeProps, vShow, withDirectives } from "vue";
+import { useNamespace } from "@gct-paas/core";
+import { Checkbox, CheckboxGroup } from "ant-design-vue";
+import Draggable from "vuedraggable";
+//#region src/modules/gct-form/editor/gct-form-checkbox/gct-form-checkbox.tsx
+var 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);
+		};
+		return {
+			ns,
+			checked,
+			onChange,
+			onDragEnd,
+			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] })]);
+			} },
+			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]])];
+	}
+});
+//#endregion
+export { GctFormCheckbox as default };

package/es/{editor/gct-form-icon-select → modules/gct-form/editor/gct-form-checkbox}/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;
 }

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

@@ -0,0 +1,10 @@
+import { EditorType } from "../../constants/editor-type/editor-type.mjs";
+import { widthEditorInstall } from "../../utils/width-install/width-install.mjs";
+import GctFormCheckbox from "./gct-form-checkbox.mjs";
+//#region src/modules/gct-form/editor/gct-form-checkbox/index.ts
+var Provider = class {
+	component = "gct-form-checkbox";
+};
+var gct_form_checkbox_default = widthEditorInstall(EditorType.CHECKBOX, () => new Provider(), GctFormCheckbox);
+//#endregion
+export { gct_form_checkbox_default 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,39 @@
+import { useGctFormValue } from "../../hooks/use-gct-form-value/use-gct-form-value.mjs";
+import "../../hooks/index.mjs";
+import './gct-form-color.css';/* empty css                     */
+import { createVNode, defineComponent, mergeProps, resolveComponent } from "vue";
+import { useNamespace } from "@gct-paas/core";
+//#region src/modules/gct-form/editor/gct-form-color/gct-form-color.tsx
+/**
+* 颜色选择编辑器
+*/
+var 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() {
+		return {
+			ns: useNamespace("form-color"),
+			val: useGctFormValue()
+		};
+	},
+	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);
+	}
+});
+//#endregion
+export { GctFormColor as default };

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

@@ -0,0 +1,15 @@
+//#region src/modules/gct-form/editor/gct-form-color/gct-form-color.provider.ts
+/**
+* 颜色选择编辑器
+*
+* @author lingxiaoming
+* @date 2024-07-17 04:48:33
+* @export
+* @class GctFormColorProvider
+* @implements {IEditorProvider}
+*/
+var GctFormColorProvider = class {
+	component = "gct-form-color";
+};
+//#endregion
+export { GctFormColorProvider };

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

@@ -0,0 +1,8 @@
+import { EditorType } from "../../constants/editor-type/editor-type.mjs";
+import { widthEditorInstall } from "../../utils/width-install/width-install.mjs";
+import GctFormColor from "./gct-form-color.mjs";
+import { GctFormColorProvider } from "./gct-form-color.provider.mjs";
+//#region src/modules/gct-form/editor/gct-form-color/index.ts
+var gct_form_color_default = widthEditorInstall(EditorType.COLOR, () => new GctFormColorProvider(), GctFormColor);
+//#endregion
+export { gct_form_color_default 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>;