@fangzhongya/fang-ui 0.0.12 → 0.0.14

package/dist/components/forms/index.js

@@ -1,3 +1,4 @@
+/* empty css                 */
 import { withInstall } from "../../utils/vues/withInstall.js";
 import _sfc_main from "./src/index.js";
 const Forms = withInstall(_sfc_main, "Forms");

package/dist/components/forms/index.scss

@@ -0,0 +1,92 @@
+@use '../css/common.scss' as *;
+
+$forms: 'forms';
+@include b($forms) {
+	#{vdm('inline-right', $forms)}: 16px;
+	#{vdm('row-height', $forms)}: 32px;
+
+	--#{$namespace}-input-height: var(#{vdm('row-height', $forms)});
+
+	.#{$namespace}-form--label-center .#{$namespace}-form-item__label {
+		justify-content: center;
+		text-align: center;
+	}
+	.#{$namespace}-form--label-left .#{$namespace}-form-item__label {
+		justify-content: flex-start;
+		text-align: left;
+	}
+	.#{$namespace}-form-item__label {
+		text-align: right;
+	}
+	&-div--column {
+		.#{z($forms, 'li')} {
+			display: inline-flex;
+			margin-right: 0;
+		}
+	}
+	&-div--inline {
+		.#{z($forms, 'elf')} {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+		}
+		.#{z($forms, 'li')} {
+			height: fit-content;
+			// display: inline-flex;
+			// align-items: flex-start;
+			// justify-content: flex-start;
+			margin-right: var(vdm('inline-right', $forms));
+			// :deep(.forms-item-el-item) {
+			//   align-items: center;r
+			// }
+		}
+	}
+	&-div--box {
+		.#{z($forms, 'elf')} {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+		}
+		.#{z($forms, 'li')} {
+			box-sizing: border-box;
+			margin-right: 0;
+			padding-right: var(--#{z($forms)}-inline-right);
+		}
+	}
+	&-div--query {
+		.#{z($forms, 'elf')} {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+		}
+		.#{z($forms, 'li')} {
+			height: fit-content;
+			margin-top: var(vdm('query-interval', $forms));
+			margin-bottom: var(vdm('query-interval', $forms));
+			margin-right: var(vdm('inline-right', $forms));
+			.#{$namespace}-form-item {
+				margin-bottom: 0;
+				flex: 1;
+			}
+		}
+	}
+	&-li {
+		.#{$namespace}-form-item {
+			margin-bottom: var(vdm('item-bottom', $forms));
+			flex: 1;
+		}
+	}
+
+	&-elf {
+		text-align: left;
+		// &.right {
+		// 	text-align: right;
+		// }
+		&.center {
+			// text-align: center;
+			.#{$namespace}-form-item__label {
+				justify-content: center;
+			}
+		}
+	}
+}

package/dist/components/forms/src/data.cjs

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const buildProps = require("../../../utils/vues/buildProps.cjs");
-const urls = require("../../common/data/urls.cjs");
-const dataProps = buildProps.buildProps({
+const urls = require("../../common/urls.cjs");
+const dataProps = {
   ...urls.props,
   /**
    * @props { Array<ListObj> } list 展示数据列表
@@ -13,35 +12,83 @@ const dataProps = buildProps.buildProps({
       return [];
     }
   },
+  column: {
+    type: Number,
+    default() {
+      return 1;
+    }
+  },
   /**
    * @props { Boolean } disabled 是否全部禁用
    */
   disabled: { type: Boolean },
   /**
-   * @props { Object } selects 选择数据集合
+   * @props { Object } options 选择数据集合
    */
-  selects: {
+  options: {
     type: Object,
     default() {
       return {};
     }
   },
   /**
-   * @props { String } width=80px ( )
+   * @props { Object } compons 外部组件集合
+   */
+  compons: {
+    type: Object,
+    default() {
+      return {};
+    }
+  },
+  /**
+   * @props { String } width=auto ( )
    * 标签的长度
    */
-  width: {
+  labelWidth: {
+    type: [String, Number],
+    default: "auto"
+  },
+  labelPosition: {
     type: String,
-    default: "80px"
+    default: "left"
+  },
+  rowWidth: {
+    type: String
+  },
+  rowMinWidth: {
+    type: String
+  },
+  rowHeight: {
+    type: String
+    // default: '42px',
+  },
+  inline: {
+    type: Boolean
+    // default: true,
+  },
+  inlineBox: {
+    type: Boolean
+  },
+  query: {
+    type: Boolean
+  },
+  queryInterval: {
+    type: String,
+    default: "10px"
+  },
+  inlineRight: {
+    type: String,
+    default: "32px"
+  },
+  itemBottom: {
+    type: String,
+    default: "18px"
   },
   /**
    * @props { Object } value 默认展示数据
    */
-  value: {
-    type: Object,
-    default() {
-      return {};
-    }
+  modelValue: {
+    type: Object
   },
   /**
    * @props { Object } buts=[] 表单按钮
@@ -49,10 +96,26 @@ const dataProps = buildProps.buildProps({
    */
   buts: {
     type: Array
-  }
-});
-const dataEmits = ["submit", "cancel", "buts"];
-const dataExpose = ["submitForm", "getForm"];
+  },
+  butLeft: {
+    type: String
+  },
+  colon: [Boolean, String]
+};
+const dataEmits = [
+  "submit",
+  "cancel",
+  "buts",
+  "upform",
+  "update:modelValue"
+];
+const dataSlot = {
+  default: "default",
+  header: "header",
+  footer: "footer"
+};
+const dataHandle = urls.comHandle;
 exports.dataEmits = dataEmits;
-exports.dataExpose = dataExpose;
+exports.dataHandle = dataHandle;
 exports.dataProps = dataProps;
+exports.dataSlot = dataSlot;

package/dist/components/forms/src/data.d.ts

@@ -1,87 +1,5 @@
-import { ExtractPublicPropTypes } from 'vue';
-import { ObjAny } from '../../types/object';
-export type ListObj = {
-    /**
-     * 表单类型
-     */
-    type: string;
-    /**
-     * 展示字段名称
-     */
-    label: string;
-    /**
-     * 表单取值字段名称
-     */
-    prop: string;
-    /**
-     * 是否多选
-     */
-    multiple: string | boolean;
-    /**
-     * 是否显示隐藏
-     */
-    hide: boolean;
-    /**
-     * element-plus 的表单验证规则
-     */
-    rules: any[];
-    /**
-     * 是否校验
-     */
-    rule: string | boolean | 0 | 1 | {
-        /**
-         * 类型
-         */
-        type: 1 | 2;
-        /**
-         * 是否必传
-         */
-        must: boolean;
-        /**
-         * 校验方法
-         */
-        judge: string;
-    };
-    /**
-     * 表单样式
-     */
-    class: string;
-    /**
-     * 是否为必填项
-     */
-    required: boolean;
-    /**
-     * 标签宽度
-     */
-    labelWidth: string | number;
-    /**
-     * 子表单宽度
-     */
-    width: string | number;
-    /**
-     * 是否占整行
-     */
-    whole: boolean;
-    /**
-     * 子表单类型
-     */
-    display: string;
-    /**
-     * 子组件的配置数据
-     */
-    config: ObjAny;
-};
-export type ButObj = {
-    /**
-     * 按钮类型
-     */
-    type: '' | 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger' | 'text';
-    /**
-     * 按钮名称
-     */
-    label: string;
-    [key: string]: any;
-};
+import { ExtractPropTypes, Component } from 'vue';
+import { comHandle } from '../../common/urls';
 export declare const dataProps: {
     /**
      * @props { Array<ListObj> } list 展示数据列表
@@ -105,6 +23,10 @@ export declare const dataProps: {
         };
         default(): never[];
     };
+    column: {
+        type: NumberConstructor;
+        default(): number;
+    };
     /**
      * @props { Boolean } disabled 是否全部禁用
      */
@@ -112,26 +34,68 @@ export declare const dataProps: {
         type: BooleanConstructor;
     };
     /**
-     * @props { Object } selects 选择数据集合
+     * @props { Object } options 选择数据集合
      */
-    selects: {
+    options: {
         type: ObjectConstructor;
         default(): {};
     };
     /**
-     * @props { String } width=80px ( )
+     * @props { Object } compons 外部组件集合
+     */
+    compons: {
+        type: () => {
+            [key: string]: Component;
+        };
+        default(): {};
+    };
+    /**
+     * @props { String } width=auto ( )
      * 标签的长度
      */
-    width: {
+    labelWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    labelPosition: {
+        type: () => "left" | "top" | "right" | "center" | "auto";
+        default: string;
+    };
+    rowWidth: {
+        type: StringConstructor;
+    };
+    rowMinWidth: {
+        type: StringConstructor;
+    };
+    rowHeight: {
+        type: StringConstructor;
+    };
+    inline: {
+        type: BooleanConstructor;
+    };
+    inlineBox: {
+        type: BooleanConstructor;
+    };
+    query: {
+        type: BooleanConstructor;
+    };
+    queryInterval: {
+        type: StringConstructor;
+        default: string;
+    };
+    inlineRight: {
+        type: StringConstructor;
+        default: string;
+    };
+    itemBottom: {
         type: StringConstructor;
         default: string;
     };
     /**
      * @props { Object } value 默认展示数据
      */
-    value: {
+    modelValue: {
         type: ObjectConstructor;
-        default(): {};
     };
     /**
      * @props { Object } buts=[] 表单按钮
@@ -139,10 +103,10 @@ export declare const dataProps: {
      */
     buts: {
         type: {
-            (arrayLength: number): ButObj[];
-            (...items: ButObj[]): ButObj[];
-            new (arrayLength: number): ButObj[];
-            new (...items: ButObj[]): ButObj[];
+            (arrayLength: number): ObjAny[];
+            (...items: ObjAny[]): ObjAny[];
+            new (arrayLength: number): ObjAny[];
+            new (...items: ObjAny[]): ObjAny[];
             isArray(arg: any): arg is any[];
             readonly prototype: any[];
             from<T>(arrayLike: ArrayLike<T>): T[];
@@ -155,29 +119,31 @@ export declare const dataProps: {
             readonly [Symbol.species]: ArrayConstructor;
         };
     };
+    butLeft: {
+        type: StringConstructor;
+    };
+    colon: (BooleanConstructor | StringConstructor)[];
+    value: {
+        type: () => ObjAny;
+    };
     ajax: {
-        type: (StringConstructor | FunctionConstructor)[];
+        type: (FunctionConstructor | StringConstructor)[];
     };
     param: {
         type: ObjectConstructor;
         default(): {};
     };
-    axios: {
+    ajaxConfig: {
         type: ObjectConstructor;
     };
-    refresh: {
-        type: NumberConstructor;
-        default: number;
-    };
-    inDataFilter: {
+    onRequestAfter: {
         type: FunctionConstructor;
-        default(res: any): any;
     };
-    inParamFilter: {
+    onRequestBefore: {
         type: FunctionConstructor;
     };
 };
-export type DataProps = ExtractPublicPropTypes<typeof dataProps>;
+export type DataProps = ExtractPropTypes<typeof dataProps>;
 /**
  * @emits submit 提交数据
  * @emits cancel 取消
@@ -185,6 +151,14 @@ export type DataProps = ExtractPublicPropTypes<typeof dataProps>;
  */
 export declare const dataEmits: string[];
 export type DataEmits = typeof dataEmits;
+/**
+ * @slot default 默认插槽
+ */
+export declare const dataSlot: {
+    default: string;
+    header: string;
+    footer: string;
+};
 /**
  * @expose submitForm
  * 提交表单
@@ -193,4 +167,5 @@ export type DataEmits = typeof dataEmits;
  * @expose {Object} getForm
  * 获取表单数据
  */
-export declare const dataExpose: string[];
+export declare const dataExpose: never[];
+export declare const dataHandle: typeof comHandle;

package/dist/components/forms/src/data.js

@@ -1,6 +1,5 @@
-import { buildProps } from "../../../utils/vues/buildProps.js";
-import { props } from "../../common/data/urls.js";
-const dataProps = buildProps({
+import { props, comHandle } from "../../common/urls.js";
+const dataProps = {
   ...props,
   /**
    * @props { Array<ListObj> } list 展示数据列表
@@ -11,35 +10,83 @@ const dataProps = buildProps({
       return [];
     }
   },
+  column: {
+    type: Number,
+    default() {
+      return 1;
+    }
+  },
   /**
    * @props { Boolean } disabled 是否全部禁用
    */
   disabled: { type: Boolean },
   /**
-   * @props { Object } selects 选择数据集合
+   * @props { Object } options 选择数据集合
+   */
+  options: {
+    type: Object,
+    default() {
+      return {};
+    }
+  },
+  /**
+   * @props { Object } compons 外部组件集合
    */
-  selects: {
+  compons: {
     type: Object,
     default() {
       return {};
     }
   },
   /**
-   * @props { String } width=80px ( )
+   * @props { String } width=auto ( )
    * 标签的长度
    */
-  width: {
+  labelWidth: {
+    type: [String, Number],
+    default: "auto"
+  },
+  labelPosition: {
     type: String,
-    default: "80px"
+    default: "left"
+  },
+  rowWidth: {
+    type: String
+  },
+  rowMinWidth: {
+    type: String
+  },
+  rowHeight: {
+    type: String
+    // default: '42px',
+  },
+  inline: {
+    type: Boolean
+    // default: true,
+  },
+  inlineBox: {
+    type: Boolean
+  },
+  query: {
+    type: Boolean
+  },
+  queryInterval: {
+    type: String,
+    default: "10px"
+  },
+  inlineRight: {
+    type: String,
+    default: "32px"
+  },
+  itemBottom: {
+    type: String,
+    default: "18px"
   },
   /**
    * @props { Object } value 默认展示数据
    */
-  value: {
-    type: Object,
-    default() {
-      return {};
-    }
+  modelValue: {
+    type: Object
   },
   /**
    * @props { Object } buts=[] 表单按钮
@@ -47,12 +94,28 @@ const dataProps = buildProps({
    */
   buts: {
     type: Array
-  }
-});
-const dataEmits = ["submit", "cancel", "buts"];
-const dataExpose = ["submitForm", "getForm"];
+  },
+  butLeft: {
+    type: String
+  },
+  colon: [Boolean, String]
+};
+const dataEmits = [
+  "submit",
+  "cancel",
+  "buts",
+  "upform",
+  "update:modelValue"
+];
+const dataSlot = {
+  default: "default",
+  header: "header",
+  footer: "footer"
+};
+const dataHandle = comHandle;
 export {
   dataEmits,
-  dataExpose,
-  dataProps
+  dataHandle,
+  dataProps,
+  dataSlot
 };