@fangzhongya/fang-ui 0.0.14 → 0.0.16

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

@@ -0,0 +1,305 @@
+<template>
+	<BoxTeleport :disabled="props.disabled" :to="props.to">
+		<template v-if="!isClose">
+			<div ref="refBox" :class="cs.z()">
+				<BoxMask
+					v-if="props.mask"
+					@click="onMaskClose"
+					:cssprefix="cs.z()"
+				></BoxMask>
+				<div
+					ref="refBody"
+					v-drag="{
+						dom: props.drag,
+						onMousedown: onMousedown,
+					}"
+					v-adjust="{
+						often: props.often,
+						onChange: onChangeAdjust,
+						all: { position: true, getDisabled: getDisabled },
+					}"
+					:class="cs.z('body')"
+				>
+					<slot :name="dataSlot.title">
+						<BoxTitle
+							:cssprefix="cs.z()"
+							@close="onClose"
+							:title="props.title"
+						>
+							<template #icon>
+								<i
+									v-if="!props.noMin"
+									:title="getLocale('minh')"
+									@click="onMin"
+									:class="cs.z('title-min')"
+								>
+									<slot :name="dataSlot['icon-min']">
+										<svg
+											viewBox="0 0 1024 1024"
+											xmlns="http://www.w3.org/2000/svg"
+											data-v-ea893728=""
+										>
+											<path
+												fill="currentColor"
+												d="M128 544h768a32 32 0 1 0 0-64H128a32 32 0 0 0 0 64z"
+											></path>
+										</svg>
+									</slot>
+								</i>
+								<i
+									:title="getLocale(isMax ? 'tmaxh' : 'maxh')"
+									@click="onMax"
+									:class="cs.z('title-max')"
+								>
+									<template v-if="isMax">
+										<slot :name="dataSlot['icon-full']">
+											<svg
+												viewBox="0 0 1024 1024"
+												xmlns="http://www.w3.org/2000/svg"
+												data-v-ea893728=""
+											>
+												<path
+													fill="currentColor"
+													d="m160 96.064 192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64v.064zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64l-192 .192zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64v-.064z"
+												></path>
+											</svg>
+										</slot>
+									</template>
+									<template v-else>
+										<slot :name="dataSlot['icon-max']">
+											<svg
+												viewBox="0 0 1024 1024"
+												xmlns="http://www.w3.org/2000/svg"
+												data-v-ea893728=""
+											>
+												<path
+													fill="currentColor"
+													d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"
+												></path>
+											</svg>
+										</slot>
+									</template>
+								</i>
+							</template>
+						</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>
+	/**
+	 * :class 修改样式时页面dom进行了更新
+	 */
+	import { getCss } from '@fangzhongya/utils/css/getCss';
+	import { setCss } from '@fangzhongya/utils/css/setCss';
+	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 vAdjust from '../../../directives/adjust';
+	import BoxTitle from '../../box-title/index';
+	import BoxMask from '../../box-mask/index';
+	import BoxTeleport from '../../box-teleport/index';
+	import { setClassName } from '@fangzhongya/utils/css/setClassName';
+	import vDrag from '../../../directives/drag';
+	import {
+		watch,
+		shallowRef,
+		computed,
+		onUnmounted,
+		onMounted,
+		nextTick,
+	} from 'vue';
+	// 创建唯一数
+	const wykey = Symbol('Window-' + new Date().getTime() + Math.random());
+	const refBody = shallowRef();
+	// 获取国际化字段
+	const { getLocale } = useLocale();
+	// 样式设置方法
+	const cs = useCssName('window');
+	const props = defineProps(dataProps);
+	const emit = defineEmits(dataEmits);
+	const isMax = shallowRef(props.max);
+	const isMin = shallowRef(false);
+	const isClose = shallowRef(true);
+
+	const refBox = shallowRef();
+	const position = shallowRef<{
+		[key: string]: number;
+	}>({});
+
+	watch(
+		() => props.modelValue,
+		() => {
+			if (props.modelValue) {
+				isClose.value = false;
+				isMin.value = false;
+				if (props.closeHave) {
+					nextTick(() => {
+						setPosition();
+					});
+				} else {
+					isMax.value = false;
+				}
+				setBoxClass();
+			} else {
+				isClose.value = true;
+			}
+		},
+		{ immediate: true },
+	);
+
+	function getPosition(el: HTMLDivElement) {
+		const keys = ['left', 'right', 'top', 'bottom', 'width', 'height'];
+		const obj: {
+			[key: string]: number;
+		} = {};
+		keys.forEach((key) => {
+			obj[key] = Number(getCss(el, key).replace(/[a-z|A-Z]*$/, ''));
+		});
+		return obj;
+	}
+	function setPosition() {
+		const el = refBody.value;
+		if (el && position.value) {
+			setCss(el, {
+				top: position.value.top + 'px',
+				left: position.value.left + 'px',
+				width: position.value.width + 'px',
+				height: position.value.height + 'px',
+			});
+			setMax();
+		}
+	}
+	function getDisabled() {
+		return isMax.value;
+	}
+	function onMousedown(
+		e: MouseEvent,
+		ecs: {
+			[key: string]: number;
+		},
+	) {
+		if (isMax.value) {
+			isMax.value = false;
+			ecs.left = e.clientX - position.value.width / 2;
+			return ecs;
+		}
+	}
+	const restore = () => {
+		isMin.value = false;
+	};
+	const remove = () => {
+		isClose.value = true;
+		emit('update:modelValue', false);
+		emit('close');
+	};
+	watch(
+		() => isMin.value,
+		() => {
+			setMin();
+		},
+	);
+	watch(
+		() => isMax.value,
+		() => {
+			setMax();
+		},
+	);
+	function setMin() {
+		if (refBox.value) {
+			if (isMin.value) {
+				setCss(refBox.value, 'display', 'none');
+			} else {
+				setCss(refBox.value, 'display', 'block');
+			}
+		}
+	}
+	function setMax() {
+		if (refBody.value) {
+			if (isMax.value) {
+				refBody.value.className = cs.z('body') + ' max';
+			} else {
+				refBody.value.className = cs.z('body');
+			}
+			onChangeAdjust();
+		}
+	}
+	function onMin() {
+		isMin.value = true;
+		if (props.pallet) {
+			props.pallet.add(wykey, restore, remove, props.title);
+		}
+		emit('minimize', restore, props.title, wykey);
+		if (props.minChange) {
+			emit('update:modelValue', false);
+		}
+	}
+	function onMax() {
+		if (isMax.value) {
+			isMax.value = false;
+		} else {
+			position.value = getPosition(refBody.value);
+			isMax.value = true;
+		}
+	}
+	function onMaskClose() {
+		if (props.maskClose) {
+			onClose();
+		}
+	}
+	/**
+	 * 关闭窗口
+	 */
+	function onClose() {
+		if (!isMax.value) {
+			position.value = getPosition(refBody.value);
+		}
+		if (props.pallet) {
+			props.pallet.remove(wykey, props.title);
+		}
+		remove();
+	}
+	function onChangeAdjust() {
+		emit('changesize');
+	}
+
+	function setBoxClass(oldValue: string = '') {
+		nextTick(() => {
+			setClassName(refBox.value, props.boxClass, oldValue);
+		});
+	}
+	let stop: () => void;
+	onMounted(() => {
+		stop = watch(
+			() => props.boxClass,
+			(newValue, oldValue) => {
+				setBoxClass(oldValue);
+			},
+			{ immediate: true },
+		);
+	});
+	onUnmounted(() => {
+		if (stop) {
+			stop();
+		}
+		if (props.pallet) {
+			props.pallet.remove(wykey, props.title);
+		}
+	});
+	defineExpose({
+		...dataExpose,
+	});
+</script>