@fangzhongya/fang-ui 0.0.21 → 0.0.22

package/dist/components/tables/common/table-color.vue

@@ -1,151 +0,0 @@
-<template>
-	<span
-		class="table-color"
-		@click="onClick($event)"
-		:class="valueObj.class"
-		:style="valueObj.style"
-	>
-		<span class="table-color-value">
-			{{ valueObj.value }}
-		</span>
-	</span>
-</template>
-<script lang="ts" setup>
-	import { eventAliass } from './util';
-	import { isObject } from '@fangzhongya/utils/basic/object/isObject';
-	import { computed } from 'vue';
-	/**
-	 * config 配置
-	 * {
-	 *  formatter 过滤颜色方法
-	 *  class 设置样式class
-	 *  style 设置样式style
-	 * }
-	 */
-	const props = defineProps({
-		/**
-		 * table列表
-		 * {
-		 *      label:"列表名称"
-		 *      prop:"列表取值"
-		 *      type:"列表类型"
-		 * }
-		 *
-		 */
-		tableListObj: {
-			type: Object,
-			default() {
-				return {};
-			},
-		},
-		/**
-		 * table数据
-		 * row, column, $index
-		 *
-		 */
-		tableScope: {
-			type: Object,
-			default() {
-				return {};
-			},
-		},
-	});
-	const emit = defineEmits(['scope-click']);
-	/**
-	 * 设置值
-	 */
-	function setValue(v: any) {
-		if (isObject(v)) {
-			return v;
-		} else {
-			return {
-				value: v,
-			};
-		}
-	}
-
-	/**
-	 * formatter 不是对象的值，默认给value
-	 */
-	function getValue(
-		row: ObjAny,
-		column: ObjAny,
-		cellValue: any,
-		index: number,
-		formatter?: Function,
-	) {
-		if (formatter) {
-			const v = formatter(row, column, cellValue, index);
-			return setValue(v);
-		} else {
-			return setValue(cellValue);
-		}
-	}
-
-	/**
-	 * {
-	 *     value: 展示文字
-	 *     class: 设置样式
-	 *     style: 设置样式
-	 * }
-	 */
-	const valueObj = computed(() => {
-		const prop = props.tableListObj.prop || '';
-		const row = props.tableScope?.row || {};
-		const column = props.tableScope?.column || {};
-		const cellValue = row[prop];
-		const index = props.tableScope?.$index;
-		const formatter = props.tableListObj.formatter;
-		const configFormatter = props.tableListObj.config?.formatter;
-		/**
-		 * config?.formatter 不是对象的值，默认给class
-		 */
-		if (configFormatter) {
-			const obj = configFormatter(row, column, cellValue, index);
-			let css;
-			let value = '';
-			let style;
-			if (isObject(obj)) {
-				value = obj.value;
-				css = obj.class;
-				style = obj.style;
-			} else {
-				css = obj;
-			}
-			if (!value) {
-				value = getValue(
-					row,
-					column,
-					cellValue,
-					index,
-					formatter,
-				).value;
-			}
-			return {
-				class: css,
-				value,
-				style,
-			};
-		} else {
-			return getValue(row, column, cellValue, index, formatter);
-		}
-	});
-
-	function onClick($event: Event) {
-		let obj = valueObj.value;
-		// const onClick = props.list?.onClick;
-		// if (onClick) {
-		//     onClick(obj, props.scope, props.list, 'color');
-		// }
-		eventAliass(
-			(callback: Function) => {
-				callback(obj, props.tableScope, props.tableListObj, 'color');
-			},
-			'click',
-			props.tableListObj,
-			$event,
-		);
-		emit('scope-click', obj, props.tableScope, props.tableListObj, 'color');
-	}
-</script>
-<style lang="scss" scoped></style>

package/dist/components/tables/common/table-list.vue

@@ -1,144 +0,0 @@
-<template>
-	<span @click="onClick($event)" class="table-list">
-		<span
-			class="table-list-li"
-			v-for="(item, index) in valueArr"
-			:key="index"
-			@click="onClickList(item, $event)"
-			:class="item.class"
-			:style="item.style"
-			>{{ item.value }}</span
-		>
-	</span>
-</template>
-<script lang="ts" setup>
-	import { eventAliass } from './util';
-	import { isObject } from '@fangzhongya/utils/basic/object/isObject';
-	import { isArray } from '@fangzhongya/utils/basic/array/isArray';
-	import { computed } from 'vue';
-	const props = defineProps({
-		/**
-		 * table列表
-		 * {
-		 *      label:"列表名称"
-		 *      prop:"列表取值"
-		 *      type:"列表类型"
-		 * }
-		 *
-		 */
-		tableListObj: {
-			type: Object,
-			default() {
-				return {};
-			},
-		},
-		/**
-		 * table数据
-		 * row, column, $index
-		 *
-		 */
-		tableScope: {
-			type: Object,
-			default() {
-				return {};
-			},
-		},
-	});
-	const emit = defineEmits(['scope-click']);
-	/**
-	 * 设置值
-	 */
-	function setValue(v: any) {
-		if (isArray(v)) {
-			return v;
-		} else if (isObject(v)) {
-			return [v];
-		} else {
-			return [
-				{
-					value: v,
-				},
-			];
-		}
-	}
-
-	function getValue(
-		row: ObjAny,
-		column: ObjAny,
-		cellValue: any,
-		index: number,
-		formatter?: Function,
-	) {
-		if (formatter) {
-			const v = formatter(row, column, cellValue, index);
-			return setValue(v);
-		} else {
-			return setValue(cellValue);
-		}
-	}
-
-	/**
-	 * {
-	 *     value: 展示文字
-	 *     class: 设置样式
-	 *     style: 设置样式
-	 * }
-	 */
-	const valueArr = computed(() => {
-		const prop = props.tableListObj.prop || '';
-		const row = props.tableScope.row || {};
-		const column = props.tableScope.column || {};
-		const cellValue = row[prop];
-		const index = props.tableScope.$index;
-		const formatter = props.tableListObj.formatter;
-		const configFormatter = props.tableListObj.config?.formatter;
-		if (configFormatter) {
-			const arr = configFormatter(row, column, cellValue, index);
-			return setValue(arr);
-		} else {
-			return getValue(row, column, cellValue, index, formatter);
-		}
-	});
-
-	function onClick($event: Event) {
-		let obj = valueArr.value;
-
-		eventAliass(
-			(callback: Function) => {
-				callback(obj, props.tableScope, props.tableListObj, 'list-li');
-			},
-			'click',
-			props.tableListObj,
-			$event,
-		);
-		// const onClick = props.list?.onClick;
-		// if (onClick) {
-		//     onClick(obj, props.scope, props.list, 'list');
-		// }
-
-		emit('scope-click', obj, props.tableScope, props.tableListObj, 'list');
-	}
-
-	function onClickList(obj: ObjAny, $event: Event) {
-		eventAliass(
-			(callback: Function) => {
-				callback(obj, props.tableScope, props.tableListObj, 'list-li');
-			},
-			'click',
-			obj,
-			$event,
-		);
-		// const onClick = obj?.onClick;
-		// if (onClick) {
-		//     onClick(obj, props.scope, props.list, 'list-li');
-		// }
-		emit(
-			'scope-click',
-			obj,
-			props.tableScope,
-			props.tableListObj,
-			'list-li',
-		);
-	}
-</script>
-<style lang="scss" scoped></style>

package/dist/components/tables/common/util.ts

@@ -1,169 +0,0 @@
-import { withModifiers } from 'vue';
-
-import { firstUpper, isArray, splitUpper } from '../../../utils/index';
-
-import { useAttrValue } from '../../../hooks/inherit';
-
-export function setMinWidth(obj: ObjAny, props?: ObjAny) {
-	const config = props?.table ?? {};
-	if (obj.width) {
-		return;
-	}
-	const minWidth = useAttrValue(obj, 'minWidth');
-	if (minWidth) {
-		if (typeof minWidth == 'function') {
-			return minWidth(obj, config);
-		} else if (typeof minWidth == 'boolean') {
-			return (obj.label || '').length * 16 + 24;
-		} else {
-			return minWidth;
-		}
-	} else {
-		const minWidth = useAttrValue(config, 'minWidth');
-		if (minWidth) {
-			return minWidth;
-		} else {
-			return;
-		}
-	}
-}
-
-interface OnceEventTarget extends EventTarget {
-	__once__?: boolean;
-}
-
-interface OnceEvent extends Event {
-	readonly currentTarget: OnceEventTarget | null;
-}
-/**
- * 事件别名处理对象
- */
-const eventAliasObj = {
-	//.stop - 调用 event.stopPropagation()。
-	stop(event: Event) {
-		event.stopPropagation();
-		return true;
-	},
-	// .prevent - 调用 event.preventDefault()。
-	prevent(event: Event) {
-		event.preventDefault();
-		return true;
-	},
-	// .self - 只有事件从元素本身发出才触发处理函数。
-	self(event: Event) {
-		return event.target === event.currentTarget;
-	},
-	// .once - 最多触发一次处理函数。
-	once(event: OnceEvent) {
-		if (event.currentTarget?.__once__) {
-			return false;
-		} else {
-			if (event.currentTarget) {
-				event.currentTarget.__once__ = true;
-			}
-			return true;
-		}
-	},
-	// .capture - 在捕获模式添加事件监听器。
-	// 处理事件是异步的，只有在触发了事件后才执行方法,
-	// 目前无法支持 capture
-	// capture(event) {
-	//     console.log('event', event);
-	//     return true;
-	// },
-};
-type ModifierGuardsKeys =
-	| 'stop'
-	| 'prevent'
-	| 'self'
-	| 'ctrl'
-	| 'shift'
-	| 'alt'
-	| 'meta'
-	| 'left'
-	| 'middle'
-	| 'right'
-	| 'exact';
-
-/**
- * 支持事件别名处理
- * @param {*} key
- * @param {*} callback
- * @param {*} obj
- * @param {*} $event
- */
-function eventAlias(
-	key: string,
-	callback: Function,
-	obj: ObjAny,
-	$event: Event,
-) {
-	let is = false;
-	const name = 'on' + firstUpper(key);
-	const arr: string[] = [];
-	Object.keys(obj).forEach((k) => {
-		if (k.startsWith(name)) {
-			arr.push(k);
-		}
-	});
-	const reg = new RegExp('^' + name);
-	arr.forEach((v) => {
-		let s = v.replace(reg, '');
-		if (s && $event) {
-			let ns = splitUpper(s);
-			if (ns.includes('passive')) {
-				ns = ns.filter((k) => {
-					return k != 'prevent';
-				});
-			}
-			const fn = () => {
-				// 不支持.capture
-				if (ns.includes('once')) {
-					let isc = eventAliasObj.once($event);
-					if (isc) {
-						callback(obj[v]);
-					}
-				} else {
-					callback(obj[v]);
-				}
-			};
-			// 不支持.capture
-			withModifiers(fn, ns as ModifierGuardsKeys[])();
-		} else {
-			callback(obj[v]);
-		}
-		is = true;
-	});
-	return is;
-}
-
-/**
- * 支持事件别名处理
- * @param {*} callback
- * @param {*} arr
- * @param {*} obj
- * @param {*} $event
- */
-export function eventAliass(
-	callback: Function,
-	arr: string | string[],
-	obj: ObjAny,
-	$event: Event,
-) {
-	let is = false;
-	if (callback && obj) {
-		if (arr && arr.length > 0) {
-			if (isArray(arr)) {
-				arr = arr as string[];
-				arr.forEach((key) => {
-					if (eventAlias(key, callback, obj, $event)) {
-						is = true;
-					}
-				});
-			} else {
-				is = eventAlias(arr as string, callback, obj, $event);
-			}
-		}
-	}
-	return is;
-}

package/dist/components/tables/index.ts

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

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

@@ -1,119 +0,0 @@
-<template>
-	<div :class="cs.z()">
-		<!-- table表单 -->
-		<template v-if="tableConfig.type == 1">
-			<fv-vxe-table
-				v-bind="tableConfig.config"
-				v-on="formEvent"
-				ref="refTable"
-				:class="[cs.z('main')]"
-				:size="tableConfig.config?.size"
-				:value="data.list"
-				:list="tableList"
-				:paginat="paginat"
-				:loading="loading"
-				:options="props.options"
-				:compons="props.compons"
-				@sort-change="onSortChange"
-				@radio-change="onRadioChange"
-				@selection-change="onChange"
-				@list-events="onListEvents"
-			>
-				<template
-					v-for="(k, i) in Object.keys(slots)"
-					#[k]="scope"
-					:key="k"
-				>
-					<slot :name="k" v-bind="scope"></slot>
-				</template>
-			</fv-vxe-table>
-		</template>
-		<template v-else>
-			<fv-tables
-				v-bind="tableConfig.config"
-				v-on="formEvent"
-				ref="refTable"
-				:class="[
-					cs.z('main'),
-					cs.is('radio', tableConfig.config?.isradio),
-				]"
-				:value="data.list"
-				:list="tableList"
-				:size="tableConfig.config?.size"
-				:paginat="paginat"
-				:loading="loading"
-				:options="props.options"
-				:compons="props.compons"
-				@sort-change="onSortChange"
-				@list-events="onListEvents"
-				@select="onSelect"
-				@row-click="onRowClick"
-				@selection-change="onChange"
-			>
-				<template
-					v-for="(k, i) in Object.keys(slots)"
-					#[k]="scope"
-					:key="k"
-				>
-					<slot :name="k" v-bind="scope"></slot>
-				</template>
-			</fv-tables>
-		</template>
-		<!-- 分页 -->
-		<template v-if="tableConfig.paginat?.is">
-			<Pagination
-				v-bind="pagconfig"
-				:class="cs.z('paginat')"
-				:paginat="paginat"
-				:total="data.total"
-				@size-change="onSizeChange"
-				@current-change="onCurrentChange"
-			></Pagination>
-		</template>
-	</div>
-</template>
-<script setup lang="ts">
-	import FvTables from '../../el-tables/index';
-	import FvVxeTable from '../../vxe-tables/index';
-	import Pagination from '../../pagin/index';
-	import { ref, useSlots } from 'vue';
-	import { dataProps, dataEmit, useInit } from '../common/pagin';
-	import { useCssName } from '../../../hooks/cssname';
-	import type { Slots } from 'vue';
-	const cs = useCssName('tables-pag');
-	const slots: Slots = useSlots();
-	const props = defineProps(dataProps);
-
-	const emit = defineEmits(dataEmit);
-
-	const refTable = ref();
-
-	const {
-		getSelection,
-		initData,
-		getData,
-		empty,
-		loading,
-		tableList,
-		tableConfig,
-		onRadioChange,
-		onSortChange,
-		onListEvents,
-		onSelect,
-		onRowClick,
-		onChange,
-		pagconfig,
-		formEvent,
-		onSizeChange,
-		onCurrentChange,
-		paginat,
-		data,
-	} = useInit(props, emit, refTable);
-
-	defineExpose({
-		getSelection,
-		initData,
-		getList: getData,
-		empty,
-	});
-</script>

package/dist/components/tables-form/index.ts

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