@fangzhongya/fang-ui 0.0.21 → 0.0.23

package/dist/components/page/src/set-column.vue

@@ -1,176 +0,0 @@
-<script setup lang="ts">
-	import { ref, watch } from 'vue';
-	import Draggable from 'vuedraggable';
-	import Dialog from '../../dialog/index';
-	import { useCssName } from '../../../hooks/cssname';
-	import { ElButton, ElCheckbox } from 'element-plus';
-	const props = defineProps({
-		modelValue: {
-			type: Array<ObjAny>,
-			default() {
-				return [];
-			},
-		},
-		list: {
-			type: Array<ObjAny>,
-		},
-	});
-	const emit = defineEmits(['update:modelValue']);
-	const cs = useCssName('set-column');
-	const dialogVisible = ref(false);
-
-	const value = ref([...props.modelValue]);
-
-	watch(
-		() => props.modelValue,
-		() => {
-			value.value = [...props.modelValue];
-		},
-	);
-
-	const onOpen = () => {
-		value.value = [...props.modelValue];
-		dialogVisible.value = true;
-	};
-
-	const isChecked = (item: ObjAny) => {
-		return value.value.map((o) => o.prop).includes(item.prop);
-	};
-
-	const onSubmit = () => {
-		dialogVisible.value = false;
-		emit('update:modelValue', [...value.value]);
-	};
-
-	const dragOptions = {
-		animation: 200,
-		group: 'description',
-		disabled: false,
-		ghostClass: 'ghost',
-	};
-	const drag = ref(false);
-
-	const onChange = (item: ObjAny, is: boolean) => {
-		if (is) {
-			value.value.push(item);
-		} else {
-			const v = value.value.map((o) => o.prop);
-			value.value.splice(v.indexOf(item.prop), 1);
-		}
-	};
-	const onDelete = (item: ObjAny, index: number) => {
-		value.value.splice(index, 1);
-	};
-</script>
-<template>
-	<div :class="cs.z()">
-		<ElButton @click="onOpen">列设置</ElButton>
-		<Dialog
-			:class="cs.z('dialog')"
-			v-model="dialogVisible"
-			title="设置显示字段"
-			@confirm="onSubmit"
-		>
-			<div :class="cs.z('dialog-main')">
-				<div :class="cs.z('check')">
-					<div :class="cs.z('title')">可选字段</div>
-					<div :class="cs.z('check-list')" :key="value.length">
-						<template v-if="props.list && props.list.length > 0">
-							<ElCheckbox
-								v-for="(item, index) in props.list"
-								:class="cs.z('check-list-li')"
-								:key="index"
-								:label="item.label"
-								:value="item.prop"
-								:checked="isChecked(item)"
-								@change="(is) => onChange(item, Boolean(is))"
-							></ElCheckbox>
-						</template>
-						<div class="no-data" v-else>暂无数据</div>
-						<!-- </el-checkbox-group> -->
-					</div>
-				</div>
-				<div :class="cs.z('already')">
-					<div :class="cs.z('title')">已选字段</div>
-					<div :class="cs.z('already-list')">
-						<Draggable
-							v-if="value && value.length > 0"
-							v-bind="dragOptions"
-							@start="drag = true"
-							@end="drag = false"
-							v-model="value"
-							:item-key="(value: any) => value"
-							handle=".handle"
-						>
-							<template #item="{ element, index }">
-								<div :class="cs.z('already-li')">
-									<div
-										class="handle"
-										:class="cs.z('already-li-v')"
-									>
-										<div>{{ element.label }}</div>
-									</div>
-									<ElButton
-										text
-										@click.stop="onDelete(element, index)"
-									>
-										删除
-									</ElButton>
-								</div>
-							</template>
-						</Draggable>
-						<div class="no-data" v-else>未选字段</div>
-					</div>
-				</div>
-			</div>
-		</Dialog>
-	</div>
-</template>
-<style lang="scss" scoped>
-	$set-column: 'set-column';
-	.#{$set-column}-dialog-main {
-		font-size: 16px;
-		display: flex;
-		.#{$set-column}-check {
-			flex: 1;
-			.#{$set-column}-check-list {
-				padding: 10px;
-				display: flex;
-				flex-direction: row;
-				flex-wrap: wrap;
-				overflow-y: auto;
-				.#{$set-column}-check-list-li {
-					width: 130px;
-				}
-			}
-		}
-		// .no-data {
-		// 	color: #ccc;
-		// 	font-size: 14px;
-		// 	text-align: center;
-		// 	width: 100%;
-		// 	margin-top: 20px;
-		// }
-		.#{$set-column}-already {
-			border-left: 1px solid #999;
-			padding-left: 20px;
-			width: 260px;
-			.#{$set-column}-already-list {
-				padding: 10px 10px 10px 0;
-				.#{$set-column}-already-li {
-					height: 40px;
-					line-height: 40px;
-					border-bottom: 1px solid #ccc;
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					.#{$set-column}-already-li-v {
-						display: flex;
-						flex: 1;
-						align-items: center;
-					}
-				}
-			}
-		}
-	}
-</style>

package/dist/components/pagin/index.ts

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

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

@@ -1,61 +0,0 @@
-<template>
-	<el-pagination
-		v-bind="attrs.assem"
-		:class="cs.z()"
-		v-model:current-page="props.paginat.current"
-		v-model:page-size="props.paginat.pageSize"
-		:layout="layout"
-		:total="props.total"
-		@size-change="onSizeChange"
-		@current-change="onCurrentChange"
-	>
-		<span :class="cs.z('slot')">{{ setValue() }}</span>
-	</el-pagination>
-</template>
-<script setup lang="ts">
-	import { ElPagination } from 'element-plus';
-	import { useAttrs, computed } from 'vue';
-	import { useInherit, useCssName } from '../../../hooks/index';
-	const cs = useCssName('pags');
-	const attrs = useInherit(useAttrs());
-	const props = defineProps({
-		ispag: Boolean,
-		total: Number,
-		layout: String,
-		paginat: { type: Object, required: true },
-	});
-
-	const emit = defineEmits(['size-change', 'current-change']);
-
-	const layout = computed(() => {
-		const layout: string = props.layout || (attrs.assem.layout as string);
-		return layout;
-	});
-
-	const setValue = () => {
-		let v = 1;
-		if (props.total && props.paginat.pageSize) {
-			v = Math.ceil(props.total / props.paginat.pageSize);
-		}
-		return (
-			'当前第' +
-			props.paginat.current +
-			'页  共' +
-			v +
-			'页  每页' +
-			props.paginat.pageSize +
-			'条记录'
-		);
-	};
-
-	const onCurrentChange = (v: number) => {
-		console.log('current', v);
-		props.paginat.current = v;
-		emit('current-change');
-	};
-	const onSizeChange = (v: number) => {
-		props.paginat.pageSize = v;
-		emit('size-change');
-	};
-	defineExpose({});
-</script>

package/dist/components/pagination/index.ts

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

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

@@ -1,23 +0,0 @@
-import type { ExtractPublicPropTypes } from 'vue';
-
-import { buildProps } from '../../../utils/vues/buildProps';
-
-/**
- * @title {h2} Pagination 分页
- * @text 目前完全继承 element-plus 中 el-pagination
- */
-
-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/pagination/src/index.vue

@@ -1,31 +0,0 @@
-<template>
-	<div :class="cs.z()">
-		<ElPagination v-bind="attrs" ref="refEl">
-			<template v-for="(k, i) in Object.keys(slots)" v-slot:[k] :key="k">
-				<slot :name="k"></slot>
-			</template>
-		</ElPagination>
-	</div>
-</template>
-<script lang="ts" setup>
-	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
-	import { useCssName } from '../../../hooks/cssname';
-	import { useLocale } from '../../../hooks/locale';
-	import { ref, useAttrs, useSlots } from 'vue';
-	import { ElPagination } from 'element-plus';
-	import type { Slots } from 'vue';
-	const refEl = ref();
-	const attrs = useAttrs();
-	const slots: Slots = useSlots();
-	// 样式设置方法
-	const cs = useCssName('pagination');
-	// 获取国际化字段
-	const { getLocale } = useLocale();
-	const props = defineProps(dataProps);
-	const emit = defineEmits(dataEmits);
-	defineExpose({
-		...dataExpose,
-		refEl,
-	});
-</script>
-<style lang="scss"></style>

package/dist/components/popconfirm/index.ts

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

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

@@ -1,23 +0,0 @@
-import type { ExtractPublicPropTypes } from 'vue';
-
-import { buildProps } from '../../../utils/vues/buildProps';
-
-/**
- * @title {h2} Popconfirm 气泡确认框
- * @text 目前完全继承 element-plus 中 el-popconfirm
- */
-
-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/popconfirm/src/index.vue

@@ -1,31 +0,0 @@
-<template>
-	<div :class="cs.z()">
-		<ElPopconfirm v-bind="attrs" ref="refEl">
-			<template v-for="(k, i) in Object.keys(slots)" v-slot:[k] :key="k">
-				<slot :name="k"></slot>
-			</template>
-		</ElPopconfirm>
-	</div>
-</template>
-<script lang="ts" setup>
-	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
-	import { useCssName } from '../../../hooks/cssname';
-	import { useLocale } from '../../../hooks/locale';
-	import { ref, useAttrs, useSlots } from 'vue';
-	import { ElPopconfirm } from 'element-plus';
-	import type { Slots } from 'vue';
-	const refEl = ref();
-	const attrs = useAttrs();
-	const slots: Slots = useSlots();
-	// 样式设置方法
-	const cs = useCssName('popconfirm');
-	// 获取国际化字段
-	const { getLocale } = useLocale();
-	const props = defineProps(dataProps);
-	const emit = defineEmits(dataEmits);
-	defineExpose({
-		...dataExpose,
-		refEl,
-	});
-</script>
-<style lang="scss"></style>

package/dist/components/popover/index.ts

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

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

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

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

@@ -1,30 +0,0 @@
-<template>
-	<div :class="[cs.z()]" v-bind="attrs.root">
-		<ElPopover v-bind="attrs.assem" ref="refEl">
-			<template v-for="k in Object.keys(slots)" v-slot:[k] :key="k">
-				<slot :name="k"></slot>
-			</template>
-		</ElPopover>
-	</div>
-</template>
-<script lang="ts" setup>
-	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
-	import { useCssName, useLocale, useInherit } from '../../../hooks/index';
-	import { ref, useAttrs, useSlots } from 'vue';
-	import type { Slots } from 'vue';
-	import { ElPopover } from 'element-plus';
-	const refEl = ref();
-	const attrs = useInherit();
-	const slots: Slots = useSlots();
-	// 样式设置方法
-	const cs = useCssName('popover');
-	// 获取国际化字段
-	const { getLocale } = useLocale();
-	const props = defineProps(dataProps);
-	const emit = defineEmits(dataEmits);
-	defineExpose({
-		...dataExpose,
-		refEl,
-	});
-</script>
-<style lang="scss"></style>

package/dist/components/popup/index.ts

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

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

@@ -1,79 +0,0 @@
-import type { ExtractPublicPropTypes } from 'vue';
-
-import { buildProps } from '../../../utils/vues/buildProps';
-
-import {
-	dataProps as BoxProps,
-	dataEmits as BoxEmits,
-	dataExpose as BoxExpose,
-	dataSlot as BoxSlot,
-} from '../../box/src/data';
-
-export const dataProps = buildProps({
-	...BoxProps,
-	/**
-	 * @props { String, Boolean } drag='.com-title-name' ( ) 可拖拽的元素样式 为空字符串就不拖拽
-	 */
-	drag: {
-		type: [String, Boolean],
-		default: '.com-title-name',
-	},
-	/**
-	 * @props { } drag= ( ) 是否支持改变大小
-	 */
-	adjust: {
-		type: Boolean,
-	},
-	/**
-	 * @props { } mask=true ( ) 是否要遮罩
-	 */
-	mask: {
-		type: Boolean,
-		default: true,
-	},
-	/**
-	 * @props { } maskClose=true ( ) 是否要遮罩是否关闭
-	 */
-	maskClose: {
-		type: Boolean,
-		default: true,
-	},
-
-	/**
-	 * @props { } self=false ( ) 是否要自适应 如果为true 将不支持拖拽和改变大小功能
-	 */
-	self: {
-		type: Boolean,
-		default: false,
-	},
-	/**
-	 * @props { Boolean } local= ( ) 是否启动弹框模式
-	 */
-	local: {
-		type: Boolean,
-	},
-	/**
-	 * @props { Boolean } often= ( ) 是否时时变化
-	 */
-	often: {
-		type: Boolean,
-	},
-});
-
-export type DataProps = ExtractPublicPropTypes<typeof dataProps>;
-
-/**
- */
-export const dataEmits = [...BoxEmits];
-
-export type DataEmits = typeof dataEmits;
-
-/**
- */
-export const dataSlot = {
-	...BoxSlot,
-};
-
-/**
- */
-export const dataExpose = { ...BoxExpose };

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

@@ -1,88 +0,0 @@
-<template>
-	<div :class="cs.z('local')" v-if="props.local">
-		<slot :name="dataSlot.default"></slot>
-	</div>
-	<BoxTeleport v-else :disabled="props.disabled" :to="props.to">
-		<template v-if="isInit">
-			<div
-				:class="[cs.z(), props.self ? 'popup-center' : '']"
-				v-show="props.modelValue"
-			>
-				<BoxMask
-					v-if="props.mask"
-					@click="onMaskClose"
-					:cssprefix="cs.z()"
-				></BoxMask>
-				<div v-drag="drag" v-adjust="adjust" :class="cs.z('body')">
-					<slot :name="dataSlot.title">
-						<BoxTitle
-							:cssprefix="cs.z()"
-							@close="onClose"
-							:title="props.title"
-						></BoxTitle>
-					</slot>
-					<div :class="cs.z('body-div')">
-						<slot :name="dataSlot.default"></slot>
-					</div>
-					<slot :name="dataSlot.footer"></slot>
-				</div>
-			</div>
-		</template>
-	</BoxTeleport>
-</template>
-<script lang="ts" setup>
-	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
-	import { useCssName } from '../../../hooks/cssname';
-	import { useLocale } from '../../../hooks/locale';
-	// import BoxTitle from '../../common/box-title.vue';
-	// import BoxMask from '../../common/box-mask.vue';
-	// import BoxTeleport from '../../common/box-teleport.vue';
-	// import BoxTitle from '../../box-titleindex';
-	// import BoxMask from '../../box-maskindex';
-	// import BoxTeleport from '../../box-teleportindex';
-
-	import BoxTitle from '../../box-title/index';
-	import BoxMask from '../../box-mask/index';
-	import BoxTeleport from '../../box-teleport/index';
-	import { watch, shallowRef } from 'vue';
-	import vAdjust from '../../../directives/adjust';
-	import vDrag from '../../../directives/drag';
-	const isInit = shallowRef(false);
-	// 获取国际化字段
-	const { getLocale } = useLocale();
-	// 样式设置方法
-	const cs = useCssName('popup');
-	const props = defineProps(dataProps);
-	const emit = defineEmits(dataEmits);
-
-	const drag = { dom: props.self ? false : props.drag };
-	const adjust =
-		!props.self && props.adjust
-			? {
-					often: props.often,
-					all: { position: true },
-				}
-			: {};
-
-	watch(
-		() => props.modelValue,
-		() => {
-			if (props.modelValue) {
-				isInit.value = true;
-			}
-		},
-		{ immediate: true },
-	);
-	function onMaskClose() {
-		if (props.maskClose) {
-			onClose();
-		}
-	}
-	function onClose() {
-		emit('update:modelValue', false);
-		emit('close');
-	}
-	defineExpose({
-		...dataExpose,
-	});
-</script>

package/dist/components/radio/index.ts

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

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

@@ -1,23 +0,0 @@
-import type { ExtractPublicPropTypes } from 'vue';
-
-import { buildProps } from '../../../utils/vues/buildProps';
-
-/**
- * @title {h2} Radio 单选框
- * @text 目前完全继承 element-plus 中 el-radio
- */
-
-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/radio/src/index.vue

@@ -1,31 +0,0 @@
-<template>
-	<div :class="cs.z()">
-		<ElRadio v-bind="attrs" ref="refEl">
-			<template v-for="(k, i) in Object.keys(slots)" v-slot:[k] :key="k">
-				<slot :name="k"></slot>
-			</template>
-		</ElRadio>
-	</div>
-</template>
-<script lang="ts" setup>
-	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
-	import { useCssName } from '../../../hooks/cssname';
-	import { useLocale } from '../../../hooks/locale';
-	import { ref, useAttrs, useSlots } from 'vue';
-	import { ElRadio } from 'element-plus';
-	import type { Slots } from 'vue';
-	const refEl = ref();
-	const attrs = useAttrs();
-	const slots: Slots = useSlots();
-	// 样式设置方法
-	const cs = useCssName('radio');
-	// 获取国际化字段
-	const { getLocale } = useLocale();
-	const props = defineProps(dataProps);
-	const emit = defineEmits(dataEmits);
-	defineExpose({
-		...dataExpose,
-		refEl,
-	});
-</script>
-<style lang="scss"></style>