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

package/es/modules/gct-form/controller/index.d.ts

@@ -0,0 +1,13 @@
+export { EditFormController, useEditFormController, } from './edit-form/edit-form.controller';
+export { EditorController } from './editor-item/editor-item.controller';
+export { GctFormController } from './gct-form/gct-form.controller';
+export { FormCollapsePaneController } from './form-collapse-pane/form-collapse-pane.controller';
+export { FormCollapseController } from './form-collapse/form-collapse.controller';
+export { FormTabController } from './form-tab/form-tab.controller';
+export { FormTabPaneController } from './form-tab-pane/form-tab-pane.controller';
+export { FormGroupController } from './form-group/form-group.controller';
+export { FormEditItemController } from './form-edit-item/form-edit-item.controller';
+export { FormItemController } from './form-item/form-item.controller';
+export { FormItemBasicController, useFormItemController, } from './form-item-basic/form-item-basic.controller';
+export { FormHiddenItemController } from './form-item-hidden/form-item-hidden.controller';
+export { FormLineController } from './form-line/form-line.controller';

package/es/modules/gct-form/controller/index.mjs

@@ -0,0 +1,13 @@
+import "./gct-form/gct-form.controller.mjs";
+import "./edit-form/edit-form.controller.mjs";
+import "./editor-item/editor-item.controller.mjs";
+import "./form-item-basic/form-item-basic.controller.mjs";
+import "./form-collapse-pane/form-collapse-pane.controller.mjs";
+import "./form-collapse/form-collapse.controller.mjs";
+import "./form-tab/form-tab.controller.mjs";
+import "./form-tab-pane/form-tab-pane.controller.mjs";
+import "./form-group/form-group.controller.mjs";
+import "./form-edit-item/form-edit-item.controller.mjs";
+import "./form-item/form-item.controller.mjs";
+import "./form-item-hidden/form-item-hidden.controller.mjs";
+import "./form-line/form-line.controller.mjs";

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

@@ -0,0 +1,39 @@
+import { PropType } from 'vue';
+import { IActionEditor, IFormItemController } from '../../interface';
+export declare const GctFormAction: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormItemController>;
+        required: true;
+    };
+    data: {
+        type: PropType<IObject>;
+        required: true;
+    };
+    model: {
+        type: PropType<IActionEditor>;
+        required: true;
+    };
+    size: {
+        type: StringConstructor;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    onClick: (e: MouseEvent) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormItemController>;
+        required: true;
+    };
+    data: {
+        type: PropType<IObject>;
+        required: true;
+    };
+    model: {
+        type: PropType<IActionEditor>;
+        required: true;
+    };
+    size: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctFormAction;

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

@@ -0,0 +1,45 @@
+import { useForm } from "../../hooks/use-form/use-form.mjs";
+import "../../hooks/index.mjs";
+import { createVNode, defineComponent, mergeProps, resolveComponent } from "vue";
+import { useNamespace } from "@gct-paas/core";
+//#region src/modules/gct-form/editor/gct-form-action/gct-form-action.tsx
+var GctFormAction = /* @__PURE__ */ defineComponent({
+	name: "GctFormAction",
+	props: {
+		c: {
+			type: Object,
+			required: true
+		},
+		data: {
+			type: Object,
+			required: true
+		},
+		model: {
+			type: Object,
+			required: true
+		},
+		size: { type: String }
+	},
+	setup(props) {
+		const ns = useNamespace("gct-form-action");
+		const form = useForm();
+		function onClick(e) {
+			e.stopPropagation();
+			if (props.model.click) props.model.click(e, form, props.c, props.data);
+		}
+		return {
+			ns,
+			onClick
+		};
+	},
+	render() {
+		return createVNode(resolveComponent("a-button"), mergeProps({
+			"class": this.ns.b(),
+			"onClick": this.onClick,
+			"size": this.size,
+			"type": "link"
+		}, this.model.props || {}), { default: () => [this.model.label] });
+	}
+});
+//#endregion
+export { GctFormAction as default };

package/es/modules/gct-form/editor/gct-form-action/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-action/index.mjs

@@ -0,0 +1,10 @@
+import { EditorType } from "../../constants/editor-type/editor-type.mjs";
+import GctFormAction from "./gct-form-action.mjs";
+import { widthEditorInstall } from "../../utils/width-install/width-install.mjs";
+//#region src/modules/gct-form/editor/gct-form-action/index.ts
+var provider = class {
+	component = "gct-form-action";
+};
+var gct_form_action_default = widthEditorInstall(EditorType.ACTION, () => new provider(), GctFormAction);
+//#endregion
+export { gct_form_action_default as default };

package/es/modules/gct-form/editor/gct-form-check-switch/gct-form-check-switch.css

@@ -0,0 +1,86 @@
+@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-check-switch--checkbox {
+  height: 32px;
+  padding-top: 5px;
+}
+.gct-gct-form-check-switch--checkbox span:last-child {
+  padding-left: 4px;
+  padding-right: 0;
+}
+
+.gct-gct-form-check-switch--small {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.gct-gct-form-check-switch.is-readonly {
+  pointer-events: none;
+}
+
+.gct-gct-form--small .gct-gct-form-check-switch--checkbox {
+  height: 24px;
+  padding-top: 0;
+}

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { IFormItem, ICheckSwitchEditor, EditorController } from '@gct-paas/core';
+import { ICheckSwitchEditor, IFormItem } from '../../interface';
 /**
  * 文本编辑器
  */
@@ -16,9 +16,11 @@ export declare const GctFormCheckSwitch: import('vue').DefineComponent<import('v
         type: BooleanConstructor;
         default: boolean;
     };
+    size: {
+        type: StringConstructor;
+    };
 }>, {
     ns: import('@gct-paas/core').Namespace;
-    c: EditorController<ICheckSwitchEditor>;
     val: import('vue').WritableComputedRef<any, any>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     itemModel: {
@@ -33,6 +35,9 @@ export declare const GctFormCheckSwitch: import('vue').DefineComponent<import('v
         type: BooleanConstructor;
         default: boolean;
     };
+    size: {
+        type: StringConstructor;
+    };
 }>> & Readonly<{
     "onUpdate:value"?: ((...args: any[]) => any) | undefined;
 }>, {

package/es/modules/gct-form/editor/gct-form-check-switch/gct-form-check-switch.mjs

@@ -0,0 +1,58 @@
+import { useGctFormValue } from "../../hooks/use-gct-form-value/use-gct-form-value.mjs";
+import "../../hooks/index.mjs";
+import './gct-form-check-switch.css';/* empty css                            */
+import { createVNode, defineComponent, mergeProps, resolveComponent } from "vue";
+import { useNamespace } from "@gct-paas/core";
+//#region src/modules/gct-form/editor/gct-form-check-switch/gct-form-check-switch.tsx
+/**
+* 文本编辑器
+*/
+var GctFormCheckSwitch = /* @__PURE__ */ defineComponent({
+	name: "GctFormCheckSwitch",
+	props: {
+		itemModel: {
+			type: Object,
+			required: true
+		},
+		model: {
+			type: Object,
+			required: true
+		},
+		value: {
+			type: Boolean,
+			default: false
+		},
+		size: { type: String }
+	},
+	emits: ["update:value"],
+	setup() {
+		return {
+			ns: useNamespace("gct-form-check-switch"),
+			val: useGctFormValue()
+		};
+	},
+	render() {
+		if (this.model.isSwitch) return createVNode("div", { "class": [
+			this.ns.b(),
+			this.ns.m("switch"),
+			this.ns.is("readonly", this.model.readonly),
+			this.size ? this.ns.m(this.size) : null
+		] }, [createVNode(resolveComponent("a-switch"), mergeProps({
+			"checked": this.val,
+			"onUpdate:checked": ($event) => this.val = $event,
+			"size": this.size
+		}, this.model.props || {}), null)]);
+		return createVNode(resolveComponent("a-checkbox"), mergeProps({
+			"checked": this.val,
+			"onUpdate:checked": ($event) => this.val = $event,
+			"size": this.size
+		}, this.model.props || {}, { "class": [
+			this.ns.b(),
+			this.ns.m("checkbox"),
+			this.ns.is("readonly", this.model.readonly),
+			this.size ? this.ns.m(this.size) : null
+		] }), { default: () => [this.model.label] });
+	}
+});
+//#endregion
+export { GctFormCheckSwitch };

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

@@ -0,0 +1,15 @@
+//#region src/modules/gct-form/editor/gct-form-check-switch/gct-form-check-switch.provider.ts
+/**
+* 选项框类型开关
+*
+* @author zhanghanrui
+* @date 2024-03-27 10:03:03
+* @export
+* @class GctFormCheckSwitchProvider
+* @implements {IEditorProvider}
+*/
+var GctFormCheckSwitchProvider = class {
+	component = "gct-form-check-switch";
+};
+//#endregion
+export { GctFormCheckSwitchProvider };

package/es/modules/gct-form/editor/gct-form-check-switch/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 { GctFormCheckSwitchProvider } from "./gct-form-check-switch.provider.mjs";
+import { GctFormCheckSwitch } from "./gct-form-check-switch.mjs";
+//#region src/modules/gct-form/editor/gct-form-check-switch/index.ts
+var gct_form_check_switch_default = widthEditorInstall(EditorType.CHECK_SWITCH, () => new GctFormCheckSwitchProvider(), GctFormCheckSwitch);
+//#endregion
+export { gct_form_check_switch_default as default };

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

@@ -0,0 +1,108 @@
+@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-checkbox--checkbox.ant-checkbox-group {
+  height: 32px;
+  display: flex;
+  align-items: center;
+}
+
+.gct-gct-form-checkbox.ant-checkbox-group {
+  width: 100%;
+  padding: 2px;
+  border-radius: 4px;
+  display: flex;
+  gap: 4px 8px;
+  flex-wrap: wrap;
+  height: auto;
+}
+.gct-gct-form-checkbox.ant-checkbox-group .ant-checkbox + span {
+  padding-left: 4px;
+}
+.gct-gct-form-checkbox.ant-checkbox-group .ant-checkbox-group-item {
+  margin-right: 0;
+  display: flex;
+  align-items: flex-start;
+}
+.gct-gct-form-checkbox.ant-checkbox-group .ant-checkbox-wrapper {
+  display: flex;
+}
+.gct-gct-form-checkbox.ant-checkbox-group.isColumn {
+  flex-flow: column wrap;
+  align-items: flex-start;
+}
+.gct-gct-form-checkbox.ant-checkbox-group .drag-wrap {
+  width: 100%;
+}
+.gct-gct-form-checkbox.ant-checkbox-group .drag-wrap .drag-checkbox-item {
+  padding: 6px 4px;
+  border-radius: 4px;
+  background-color: #F2F4F7;
+}
+.gct-gct-form-checkbox.ant-checkbox-group .drag-wrap .drag-checkbox-item .icon-drag {
+  line-height: 1;
+}
+.gct-gct-form-checkbox.ant-checkbox-group .drag-wrap .drag-checkbox-item + .drag-checkbox-item {
+  margin-top: 4px;
+}

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