@fangzhongya/fang-ui 0.0.14 → 0.0.16

package/dist/components/el-tables/src/data.ts

@@ -0,0 +1,122 @@
+import type { ExtractPropTypes, Component } from 'vue';
+
+export type DefaultSort = {
+	prop: string;
+	order: 'ascending' | 'descending';
+};
+/**
+ * @title FTable 表格
+ * @author 方忠亚
+ * @description 对el-table进行二次封装，减少写html，自适应自身高度
+ * @date 2022年11月21日19点34分
+ */
+
+export const dataProps = {
+	/**
+	 * @props { Object } defaultSort 排序
+	 */
+	defaultSort: {
+		type: Object as () => DefaultSort,
+		default() {
+			return {};
+		},
+	},
+	height: {
+		type: [String, Number],
+		default() {
+			return 'auto';
+		},
+	},
+	/**
+	 * 加载中
+	 */
+	loading: {
+		type: Boolean,
+		default: false,
+	},
+	// 高度自适应
+	adaptive: Boolean,
+
+	/**
+	 * @props { Array<Object> } list table展示的列
+	 * @props { String } list.class table展示的列class
+	 * @props { String } list.label table展示的列头名称
+	 * @props { Array<Object> } list.children 用来展示多级头
+	 * @props { boolean } list.hide=false 当前列是否隐藏
+	 * @props { function } list.sethide 当前列是否隐藏方法模式
+	 * @props { function } list.formatter (row, column, cellValue, index) 用来格式化内容
+	 * @props { String } list.align=left (left , center , right) 对齐方式
+	 * @props { string , number } list.width table展示的宽度
+	 * @props { string , number } list.minWidth table展示的最小宽度
+	 * @props { string , boolean } list.fixed (true , 'left' , 'right') 列是否固定在左侧或者右侧。 true 表示固定在左侧
+	 * @props { String } list.compon (component, color, list, but) table的扩展组件配置
+	 * @props { Object } list.config table的扩展组件的配置对象
+	 */
+	list: {
+		type: Array<ListObj>,
+		default() {
+			return [];
+		},
+	},
+	/**
+	 * @props { Array } value table列表数据
+	 */
+	value: {
+		type: Array<ObjAny>,
+		default() {
+			return [];
+		},
+	},
+
+	/**
+	 * 行高度
+	 */
+	lineHeight: {
+		type: [String, Number],
+	},
+
+	/**
+	 * @props { Object } options 选择数据集合
+	 */
+	options: {
+		type: Object,
+		default() {
+			return {};
+		},
+	},
+	/**
+	 * @props { Object } compons 外部组件集合
+	 */
+	compons: {
+		type: Object as () => { [key: string]: Component },
+		default() {
+			return {};
+		},
+	},
+};
+
+export type DataProps = ExtractPropTypes<typeof dataProps>;
+
+/**
+ * @emits scroll-bottom 滚动到列表底部触发事件
+ */
+export const dataEmits = [
+	'sort-change',
+	'scroll-bottom',
+	'scope-click',
+	'selection-list',
+	'list-events',
+	'row-click',
+];
+
+export type DataEmits = typeof dataEmits;
+
+/**
+ * @expose clearSelection ( ) 清除多选
+ * @expose toggleRowSelectionList (row, selected, key ) 切换选择
+ * @expose clearSelectionList ( ) 清空选中
+ * @expose { Object: {  value: 值,
+                    list: 当前列,
+                    key: key的名称,} } getRowSelectionsCheckList (row, key ) 获取选中的值
+ */
+export const dataExpose = {};

package/dist/components/el-tables/src/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const require$$0 = require("vue");
+const vue = require("vue");
 const data = require("./data.cjs");
 const elementPlus = require("element-plus");
 const columns_vue_vue_type_script_lang = require("./columns.cjs");
@@ -8,20 +8,20 @@ const index = require("../../../hooks/cssname/index.cjs");
 const index$1 = require("../../../hooks/inherit/index.cjs");
 const use = require("../../common/use.cjs");
 const compons = require("../../common/compons.cjs");
-const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: data.dataProps,
   emits: data.dataEmits,
   setup(__props, { expose: __expose, emit: __emit }) {
     const cs = index.useCssName("tables");
-    const slots = require$$0.useSlots();
-    const attrs = index$1.useInherit(require$$0.useAttrs());
+    const slots = vue.useSlots();
+    const attrs = index$1.useInherit(vue.useAttrs());
     const props = __props;
-    require$$0.provide("tables-compons", compons.getCompons(props.compons));
-    const tableRef = require$$0.ref();
+    vue.provide("tables-compons", compons.getCompons(props.compons));
+    const tableRef = vue.ref();
     const emit = __emit;
-    const rowObj = require$$0.ref();
-    const isfocus = require$$0.ref(false);
+    const rowObj = vue.ref();
+    const isfocus = vue.ref(false);
     function onClick() {
       isfocus.value = true;
     }
@@ -41,14 +41,14 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
       }
     }
     let isSort = false;
-    const tableDefaultSort = require$$0.computed(() => {
+    const tableDefaultSort = vue.computed(() => {
       var _a, _b;
       return {
         prop: (_a = props.defaultSort) == null ? void 0 : _a.prop,
         order: (_b = props.defaultSort) == null ? void 0 : _b.order
       };
     });
-    const rowStyle = require$$0.computed(() => {
+    const rowStyle = vue.computed(() => {
       const height = props.lineHeight;
       const rowStyle2 = attrs.assem.rowStyle;
       if (height) {
@@ -71,7 +71,7 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
         };
       }
     });
-    require$$0.watch(tableDefaultSort, (newValue, oldValue) => {
+    vue.watch(tableDefaultSort, (newValue, oldValue) => {
       let prop = tableDefaultSort.value.prop;
       let order = tableDefaultSort.value.order;
       if (tableRef.value) {
@@ -104,7 +104,7 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
     function clearSelection() {
       tableRef.value.clearSelection();
     }
-    require$$0.onMounted(() => {
+    vue.onMounted(() => {
       if (window) {
         window.addEventListener("click", () => {
           isfocus.value = false;
@@ -117,14 +117,14 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
       toggleRowSelection
     });
     return (_ctx, _cache) => {
-      return require$$0.openBlock(), require$$0.createElementBlock("div", require$$0.mergeProps({
-        class: require$$0.unref(cs).z()
-      }, require$$0.unref(attrs).root), [
-        require$$0.withDirectives((require$$0.openBlock(), require$$0.createBlock(require$$0.unref(elementPlus.ElTable), require$$0.mergeProps(require$$0.unref(attrs).assem, {
+      return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        class: vue.unref(cs).z()
+      }, vue.unref(attrs).root), [
+        vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTable), vue.mergeProps(vue.unref(attrs).assem, {
           align: "left",
           ref_key: "tableRef",
           ref: tableRef,
-          class: [require$$0.unref(cs).z("table"), require$$0.unref(cs).is("absolute", props.adaptive)],
+          class: [vue.unref(cs).z("table"), vue.unref(cs).is("absolute", props.adaptive)],
           height: props.height,
           "scroll-selector": ".el-scrollbar .el-scrollbar__wrap",
           "row-style": rowStyle.value,
@@ -132,33 +132,33 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
           "default-sort": tableDefaultSort.value,
           onRowClick,
           onSortChange: sortChange,
-          onClick: require$$0.withModifiers(onClick, ["stop"])
+          onClick: vue.withModifiers(onClick, ["stop"])
         }), {
-          empty: require$$0.withCtx(() => [
-            require$$0.renderSlot(_ctx.$slots, "no-data", {}, () => [
-              require$$0.createElementVNode("div", {
-                class: require$$0.normalizeClass(require$$0.unref(cs).z("no-data"))
+          empty: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "no-data", {}, () => [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(vue.unref(cs).z("no-data"))
               }, _cache[0] || (_cache[0] = [
-                require$$0.createElementVNode("span", null, "暂无数据", -1)
+                vue.createElementVNode("span", null, "暂无数据", -1)
               ]), 2)
             ])
           ]),
-          default: require$$0.withCtx(() => [
-            require$$0.createVNode(columns_vue_vue_type_script_lang.default, {
-              table: require$$0.unref(attrs).assem,
+          default: vue.withCtx(() => [
+            vue.createVNode(columns_vue_vue_type_script_lang.default, {
+              table: vue.unref(attrs).assem,
               value: props.value,
               list: props.list,
               options: props.options,
               isComponSelected,
               onListEvents
-            }, require$$0.createSlots({ _: 2 }, [
-              require$$0.renderList(Object.keys(require$$0.unref(slots)).filter(
+            }, vue.createSlots({ _: 2 }, [
+              vue.renderList(Object.keys(vue.unref(slots)).filter(
                 (v) => !["empty", "no-data"].includes(v)
               ), (k, i) => {
                 return {
                   name: k,
-                  fn: require$$0.withCtx((scope) => [
-                    require$$0.renderSlot(_ctx.$slots, k, require$$0.normalizeProps(require$$0.guardReactiveProps(scope)))
+                  fn: vue.withCtx((scope) => [
+                    vue.renderSlot(_ctx.$slots, k, vue.normalizeProps(vue.guardReactiveProps(scope)))
                   ])
                 };
               })
@@ -166,7 +166,7 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
           ]),
           _: 3
         }, 16, ["class", "height", "row-style", "data", "default-sort"])), [
-          [require$$0.unref(elementPlus.vLoading), props.loading]
+          [vue.unref(elementPlus.vLoading), props.loading]
         ])
       ], 16);
     };

package/dist/components/el-tables/src/index.vue

@@ -0,0 +1,196 @@
+<template>
+	<div :class="cs.z()" v-bind="attrs.root">
+		<!-- v-scroll="onScroll" -->
+		<ElTable
+			v-bind="attrs.assem"
+			align="left"
+			ref="tableRef"
+			:class="[cs.z('table'), cs.is('absolute', props.adaptive)]"
+			v-loading="props.loading"
+			:height="props.height"
+			scroll-selector=".el-scrollbar .el-scrollbar__wrap"
+			:row-style="rowStyle"
+			:data="props.value"
+			:default-sort="tableDefaultSort"
+			@row-click="onRowClick"
+			@sort-change="sortChange"
+			@click.stop="onClick"
+		>
+			<TableColumns
+				:table="attrs.assem"
+				:value="props.value"
+				:list="props.list"
+				:options="props.options"
+				:isComponSelected="isComponSelected"
+				@list-events="onListEvents"
+			>
+				<template
+					v-for="(k, i) of Object.keys(slots).filter(
+						(v) => !['empty', 'no-data'].includes(v),
+					)"
+					#[k]="scope"
+					:key="k"
+				>
+					<slot :name="k" v-bind="scope"></slot>
+				</template>
+			</TableColumns>
+			<template #empty>
+				<slot name="no-data">
+					<div :class="cs.z('no-data')">
+						<span>暂无数据</span>
+					</div>
+				</slot>
+			</template>
+		</ElTable>
+	</div>
+</template>
+<script lang="ts" setup>
+	import { dataProps, dataEmits, dataExpose, type DefaultSort } from './data';
+	import {
+		watch,
+		provide,
+		ref,
+		useSlots,
+		useAttrs,
+		computed,
+		onMounted,
+	} from 'vue';
+	import { ElTable, vLoading, type ColumnStyle } from 'element-plus';
+	import TableColumns from './columns.vue';
+	import { useCssName } from '../../../hooks/cssname';
+	import { useInherit } from '../../../hooks/inherit';
+	import { uesObjComponSelected } from '../../common/use';
+	import { getCompons } from '../../common/compons';
+	import type { Slots } from 'vue';
+	const cs = useCssName('tables');
+	const slots: Slots = useSlots();
+
+	const attrs = useInherit(useAttrs());
+
+	const props = defineProps(dataProps);
+
+	provide('tables-compons', getCompons(props.compons));
+
+	const tableRef = ref();
+
+	const emit = defineEmits(dataEmits);
+
+	/**是否单行显示 */
+
+	const rowObj = ref();
+
+	const isfocus = ref(false);
+
+	function onClick() {
+		isfocus.value = true;
+	}
+
+	function isComponSelected(obj: ObjAny, scope: ObjAny) {
+		if (uesObjComponSelected(obj, props)) {
+			if (rowObj.value === scope.row) {
+				if (isfocus.value) {
+					return true;
+				} else {
+					return false;
+				}
+			} else {
+				return false;
+			}
+		} else {
+			return true;
+		}
+	}
+
+	/**是否单行显示 */
+
+	// 排序
+	let isSort = false;
+	// setTimeout(() => {
+	//   isSort = false
+	// }, 400)
+
+	const tableDefaultSort = computed<DefaultSort>(() => {
+		return {
+			prop: props.defaultSort?.prop,
+			order: props.defaultSort?.order,
+		};
+	});
+
+	type RowStyle = ColumnStyle<any>;
+
+	const rowStyle = computed<RowStyle>(() => {
+		const height = props.lineHeight;
+		const rowStyle = attrs.assem.rowStyle as RowStyle;
+		if (height) {
+			if (rowStyle) {
+				if (typeof rowStyle == 'object') {
+					// @ts-ignore
+					rowStyle['height'] = height + 'px';
+					return rowStyle;
+				} else {
+					return rowStyle;
+				}
+			} else {
+				return {
+					height: height + 'px',
+				} as RowStyle;
+			}
+		} else {
+			return {
+				height: '',
+				...rowStyle,
+			};
+		}
+	});
+	watch(tableDefaultSort, (newValue, oldValue) => {
+		let prop = tableDefaultSort.value.prop;
+		let order = tableDefaultSort.value.order;
+		if (tableRef.value) {
+			if (prop) {
+				isSort = true;
+				tableRef.value.sort(prop, order);
+			} else {
+				tableRef.value.clearSort();
+			}
+		}
+	});
+	function sortChange(obj: DefaultSort) {
+		if (isSort) {
+			isSort = false;
+			return false;
+		}
+		emit('sort-change', obj);
+	}
+
+	function onListEvents(...arr: any[]) {
+		emit('list-events', ...arr);
+	}
+
+	function onRowClick(row: any, column: any, ...arr: any) {
+		isfocus.value = true;
+		rowObj.value = row;
+		emit('row-click', row, column, ...arr);
+	}
+
+	function toggleRowSelection(...arr: any[]) {
+		tableRef.value.toggleRowSelection(...arr);
+	}
+
+	function clearSelection() {
+		tableRef.value.clearSelection();
+	}
+
+	onMounted(() => {
+		if (window) {
+			window.addEventListener('click', () => {
+				isfocus.value = false;
+			});
+		}
+	});
+
+	defineExpose({
+		...dataExpose,
+		clearSelection,
+		toggleRowSelection,
+	});
+</script>

package/dist/components/form/index.d.ts

@@ -1,9 +1,10 @@
+import { CreateComponentPublicInstanceWithMixins, Ref, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps, Plugin } from 'vue';
 declare const Form: {
-    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {
-        refEl: import('vue').Ref<any, any>;
-    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {
+        refEl: Ref<any, any>;
+    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {}, true, {}, {}, GlobalComponents, GlobalDirectives, string, {
         refEl: unknown;
-    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+    }, HTMLDivElement, ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
@@ -11,14 +12,14 @@ declare const Form: {
         M: {};
         Defaults: {};
     }, Readonly<{}> & Readonly<{}>, {
-        refEl: import('vue').Ref<any, any>;
+        refEl: Ref<any, any>;
     }, {}, {}, {}, {}>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {
-    refEl: import('vue').Ref<any, any>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+} & ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {
+    refEl: Ref<any, any>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
     $slots: Partial<Record<string, (_: {}) => any>>;
-}) & import('vue').Plugin;
+}) & Plugin;
 export { Form, Form as default };

package/dist/components/form/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from '../../utils/vues/withInstall'
+import SrcVue from './src/index.vue'
+const Form = withInstall(SrcVue, 'Form');
+export {
+   Form,
+   Form as default
+};

package/dist/components/form/src/data.ts

@@ -0,0 +1,23 @@
+import type { ExtractPublicPropTypes } from 'vue';
+
+import { buildProps } from '../../../utils/vues/buildProps';
+
+/**
+ * @title {h2} Form 表单
+ * @text 目前完全继承 element-plus 中 el-form
+ */
+
+export const dataProps = buildProps({});
+
+export type DataProps = ExtractPublicPropTypes<typeof dataProps>;
+
+export const dataEmits = [];
+
+export type DataEmits = typeof dataEmits;
+
+export const dataSlot = {};
+
+/**
+ * @expose refEl 获取当前组件在element-plus中暴露的方法
+ */
+export const dataExpose = {};

package/dist/components/form/src/index.cjs

@@ -1,35 +1,35 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const require$$0 = require("vue");
+const vue = require("vue");
 const data = require("./data.cjs");
 const index = require("../../../hooks/cssname/index.cjs");
 const elementPlus = require("element-plus");
-const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   emits: data.dataEmits,
   setup(__props, { expose: __expose, emit: __emit }) {
     const ElForm = elementPlus.ElForm;
-    const refEl = require$$0.ref();
-    const attrs = require$$0.useAttrs();
-    const slots = require$$0.useSlots();
+    const refEl = vue.ref();
+    const attrs = vue.useAttrs();
+    const slots = vue.useSlots();
     const cs = index.useCssName("form");
     __expose({
       ...data.dataExpose,
       refEl
     });
     return (_ctx, _cache) => {
-      return require$$0.openBlock(), require$$0.createElementBlock("div", {
-        class: require$$0.normalizeClass(require$$0.unref(cs).z())
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(vue.unref(cs).z())
       }, [
-        require$$0.createVNode(require$$0.unref(ElForm), require$$0.mergeProps(require$$0.unref(attrs), {
+        vue.createVNode(vue.unref(ElForm), vue.mergeProps(vue.unref(attrs), {
           ref_key: "refEl",
           ref: refEl
-        }), require$$0.createSlots({ _: 2 }, [
-          require$$0.renderList(Object.keys(require$$0.unref(slots)), (k, i) => {
+        }), vue.createSlots({ _: 2 }, [
+          vue.renderList(Object.keys(vue.unref(slots)), (k, i) => {
             return {
               name: k,
-              fn: require$$0.withCtx(() => [
-                require$$0.renderSlot(_ctx.$slots, k)
+              fn: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, k)
               ])
             };
           })

package/dist/components/form/src/index.d.ts

@@ -1,3 +1,4 @@
+import { DefineComponent, Ref, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Partial<Record<string, (_: {}) => any>>;
@@ -7,9 +8,9 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {
-    refEl: import('vue').Ref<any, any>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+declare const __VLS_component: DefineComponent<{}, {
+    refEl: Ref<any, any>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {
     refEl: unknown;
 }, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/components/form/src/index.vue

@@ -0,0 +1,30 @@
+<template>
+	<div :class="cs.z()">
+		<ElForm v-bind="attrs" ref="refEl">
+			<template v-for="(k, i) in Object.keys(slots)" v-slot:[k] :key="k">
+				<slot :name="k"></slot>
+			</template>
+		</ElForm>
+	</div>
+</template>
+<script lang="ts" setup>
+	import { dataEmits, dataExpose } from './data';
+	import { useCssName } from '../../../hooks/cssname';
+	import { ref, useAttrs, useSlots } from 'vue';
+	import { ElForm as Form } from 'element-plus';
+	import type { Slots } from 'vue';
+	// 解决打包ts类型报错问题
+	const ElForm = Form as any;
+	const refEl = ref();
+	const attrs = useAttrs();
+	const slots: Slots = useSlots();
+	// 样式设置方法
+	const cs = useCssName('form');
+	// 获取国际化字段
+	const emit = defineEmits(dataEmits);
+	defineExpose({
+		...dataExpose,
+		refEl,
+	});
+</script>
+<style lang="scss"></style>