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

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>;

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

@@ -0,0 +1,74 @@
+import { EditorController } from "../../controller/editor-item/editor-item.controller.mjs";
+import "../../controller/index.mjs";
+import { useGctFormValue } from "../../hooks/use-gct-form-value/use-gct-form-value.mjs";
+import "../../hooks/index.mjs";
+import { createVNode, defineComponent, mergeProps, ref, resolveComponent } from "vue";
+import { useNamespace } from "@gct-paas/core";
+import dayjs from "dayjs";
+//#region src/modules/gct-form/editor/gct-form-date/gct-form-date.tsx
+/**
+* 文本编辑器
+*/
+var GctFormDate = /* @__PURE__ */ defineComponent({
+	name: "GctFormDate",
+	props: {
+		model: {
+			type: Object,
+			required: true
+		},
+		value: {
+			type: String,
+			default: ""
+		},
+		isDate: {
+			type: Boolean,
+			default: true
+		},
+		isTime: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:value"],
+	setup(props) {
+		const ns = useNamespace("gct-form-date");
+		const c = new EditorController(props.model);
+		const val = useGctFormValue();
+		const dateVal = ref(val.value ? dayjs(val.value) : null);
+		const timeVal = ref(val.value ? dayjs(val.value) : null);
+		const onChange = () => {
+			let str = "";
+			if (dateVal.value) str = dateVal.value.format("YYYY-MM-DD");
+			if (timeVal.value) {
+				const time = timeVal.value.format("HH:mm:ss");
+				str += ` ${time}`;
+			} else str += " 00:00:00";
+			val.value = str;
+		};
+		return {
+			ns,
+			c,
+			dateVal,
+			timeVal,
+			onChange
+		};
+	},
+	render() {
+		return createVNode("div", { "class": [this.ns.b()] }, [this.isDate ? createVNode(resolveComponent("a-date-picker"), mergeProps({
+			"picker": "date",
+			"value": this.dateVal,
+			"onUpdate:value": ($event) => this.dateVal = $event,
+			"format": "YYYY-MM-DD"
+		}, this.model.props || {}, {
+			"placeholder": "请选择日期",
+			"onChange": this.onChange
+		}), null) : null, this.isTime ? createVNode(resolveComponent("a-time-picker"), {
+			"value": this.timeVal,
+			"onUpdate:value": ($event) => this.timeVal = $event,
+			"placeholder": "请选择时间",
+			"onChange": this.onChange
+		}, null) : null]);
+	}
+});
+//#endregion
+export { GctFormDate };

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

@@ -0,0 +1,11 @@
+import { IEditorProvider } from '../../interface';
+/**
+ * 文本编辑器
+ *
+ * @export
+ * @class GctFormDateProvider
+ * @implements {IEditorProvider}
+ */
+export declare class GctFormDateProvider implements IEditorProvider {
+    component: string;
+}

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

@@ -0,0 +1,13 @@
+//#region src/modules/gct-form/editor/gct-form-date/gct-form-date.provider.ts
+/**
+* 文本编辑器
+*
+* @export
+* @class GctFormDateProvider
+* @implements {IEditorProvider}
+*/
+var GctFormDateProvider = class {
+	component = "gct-form-date";
+};
+//#endregion
+export { GctFormDateProvider };

package/es/modules/gct-form/editor/gct-form-date/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 { GctFormDateProvider } from "./gct-form-date.provider.mjs";
+import { GctFormDate } from "./gct-form-date.mjs";
+//#region src/modules/gct-form/editor/gct-form-date/index.ts
+var gct_form_date_default = widthEditorInstall(EditorType.DATE, () => new GctFormDateProvider(), GctFormDate);
+//#endregion
+export { gct_form_date_default as default };

package/es/modules/gct-form/editor/gct-form-date-format-select/gct-form-date-format-select.css

@@ -0,0 +1,77 @@
+@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-date-format-select {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.gct-form-date-format-select__first {
+  flex-shrink: 0;
+}
+
+.gct-form-date-format-select__second {
+  flex-shrink: 0;
+  flex-grow: 1;
+}