@fangzhongya/fang-ui 0.0.20 → 0.0.22

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

@@ -1,245 +0,0 @@
-<template>
-	<ElPopover
-		@after-enter="afterEnter"
-		placement="bottom"
-		:popper-class="cs.z('popper')"
-		trigger="click"
-		:width="props.width"
-		:disabled="props.disabled"
-		:visible="data.timeShow"
-	>
-		<template #reference>
-			<InputArray
-				:rangeSeparator="props.rangeSeparator"
-				:startPlaceholder="props.startPlaceholder"
-				:endPlaceholder="props.endPlaceholder"
-				readonly
-				:clearable="props.clearable"
-				:modelValue="[data.sname, data.ename]"
-				@focus="data.timeShow = true"
-				@clear="onCancel"
-			>
-			</InputArray>
-		</template>
-		<div :class="cs.z('select')">
-			<div :class="cs.z('select-list')">
-				<div :class="cs.z('select-list-li')">
-					<div :class="cs.z('select-list-title')">
-						{{ props.startPlaceholder }}
-					</div>
-					<SelectScroll
-						v-model="zindex"
-						:max="yindex"
-						:label="props.label"
-						:options="props.options"
-					></SelectScroll>
-				</div>
-				<div :class="cs.z('select-list-li')">
-					<div :class="cs.z('select-list-title')">
-						{{ props.endPlaceholder }}
-					</div>
-					<SelectScroll
-						:min="zindex"
-						v-model="yindex"
-						:label="props.label"
-						:options="props.options"
-					></SelectScroll>
-				</div>
-			</div>
-			<div :class="cs.z('select-buts')">
-				<ElButton text @click.stop="onCancel">{{ '关闭' }}</ElButton>
-				<ElButton type="primary" @click.stop="onDetermine">{{
-					'确认'
-				}}</ElButton>
-			</div>
-		</div>
-	</ElPopover>
-</template>
-<script lang="ts" setup>
-	import { ElButton, ElPopover } from 'element-plus';
-	import SelectScroll from '../../select-scroll/index';
-	import { useVueValue } from '../../common/use';
-	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
-	import { useCssName } from '../../../hooks/cssname';
-	import { ref, watch, reactive } from 'vue';
-	import InputArray from '../../input-array/index';
-	// 样式设置方法
-	const cs = useCssName('selector');
-	const props = defineProps(dataProps);
-	const emit = defineEmits(dataEmits);
-	const data = reactive({
-		timeShow: false,
-		sname: '',
-		ename: '',
-		startVal: 0, //开始框value值
-		endVal: props.options.length - 1, //结束框value值
-	});
-	const isShow = ref(false);
-	function onMousemove() {
-		isShow.value = true;
-	}
-	function onMouseout() {
-		isShow.value = false;
-	}
-
-	watch(
-		[() => props.options, () => props.modelValue],
-		(newList, oldList) => {
-			setElValue(props.modelValue);
-		},
-		{ deep: true, immediate: true },
-	);
-
-	const zindex = ref(0);
-	const yindex = ref(0);
-
-	function setElValue(val?: any[]) {
-		let arr = props.options;
-		let at = arr.length;
-		if (val && arr && at > 0) {
-			let s = val[0] || '';
-			let e = val[1] || '';
-			if (s) {
-				data.startVal = getInidex(s, 1) || 0;
-			} else {
-				data.startVal = 0;
-			}
-			if (e) {
-				data.endVal = getInidex(e, 2) || 0;
-			} else {
-				data.endVal = 0;
-			}
-		} else {
-			data.startVal = 0;
-			data.endVal = 0;
-		}
-	}
-	function getInidex(value: any, key: number) {
-		const arr = props.options;
-		for (let i = 0; i < arr.length; i++) {
-			const v = arr[i];
-			const o = useVueValue(v, props.prop);
-			if (o === value) {
-				if (key == 1) {
-					data.sname = useVueValue(v, props.label);
-				} else {
-					data.ename = useVueValue(v, props.label);
-				}
-				return i;
-			}
-		}
-	}
-	function afterEnter() {
-		zindex.value = data.startVal;
-		yindex.value = data.endVal;
-	}
-
-	function onCancel() {
-		data.startVal = 0;
-		data.endVal = 0;
-		data.sname = '';
-		data.ename = '';
-		zindex.value = 0;
-		yindex.value = 0;
-		emit('update:modelValue', null);
-		emit('change', null);
-		data.timeShow = false;
-	}
-
-	function onDetermine() {
-		data.startVal = zindex.value;
-		data.endVal = yindex.value;
-		const so = props.options[data.startVal];
-		const eo = props.options[data.endVal];
-		data.ename = useVueValue(eo, props.label);
-		data.sname = useVueValue(so, props.label);
-		const value = [
-			useVueValue(so, props.prop),
-			useVueValue(eo, props.prop),
-		];
-		emit('update:modelValue', value);
-		data.timeShow = false;
-		emit('change', value, [so, eo]);
-	}
-
-	defineExpose({
-		...dataExpose,
-	});
-</script>
-<style lang="scss" scoped>
-	$selectors: 'selector';
-	.#{$selectors} {
-		padding: 3px 10px;
-		display: flex;
-		align-items: center;
-		position: relative;
-		box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
-		background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
-		border-radius: var(
-			--el-input-border-radius,
-			var(--el-border-radius-base)
-		);
-		&:hover {
-			box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
-		}
-		&.is-active {
-			box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
-		}
-		&.el-date-editor {
-			.el-range-separator {
-				flex: 0;
-			}
-		}
-		.#{$selectors}-input {
-			flex: 1;
-			text-align: center;
-			.el-input__inner {
-				text-align: center;
-				border: none;
-			}
-		}
-		.#{$selectors}-separator {
-		}
-		.#{$selectors}-clearable {
-			align-items: center;
-			justify-content: center;
-			width: 20px;
-			height: 100%;
-			svg {
-				width: 1rem;
-				height: 1rem;
-			}
-		}
-	}
-
-	.#{$selectors}-popper {
-		&.el-popover.el-popper {
-			padding: 0;
-		}
-		.#{$selectors}-select {
-			padding: 5px 10px;
-			z-index: 1000;
-			width: 300px;
-			overflow: hidden;
-			.#{$selectors}-select-list {
-				display: flex;
-				.#{$selectors}-select-list-li {
-					flex: 1;
-					height: 100%;
-					display: flex;
-					flex-direction: column;
-					.#{$selectors}-select-list-title {
-						padding: 5px 0;
-						border-bottom: 1px solid var(--el-border-color-lighter);
-						text-align: center;
-					}
-				}
-			}
-			.#{$selectors}-select-buts {
-				border-top: 1px solid var(--el-border-color-lighter);
-				text-align: right;
-				padding-right: 0;
-			}
-		}
-	}
-</style>

package/dist/components/selects/index.ts

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

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

@@ -1,22 +0,0 @@
-import type { ExtractPropTypes } from 'vue';
-
-import { props, emits, comHandle } from '../../common/list';
-
-export const dataProps = {
-	...props,
-	/**
-	 * @props { String } placeholder= ( )
-	 * 输入框提示
-	 */
-	placeholder: {
-		type: String,
-	},
-};
-
-export type DataProps = ExtractPropTypes<typeof dataProps>;
-
-export const dataHandle = comHandle;
-
-export const dataEmits = [...emits];
-
-export type DataEmits = typeof dataEmits;

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

@@ -1,48 +0,0 @@
-<template>
-	<div ref="refEl" v-bind="attrs.root" :class="cs.z()">
-		<ElSelect
-			:class="cs.z('select')"
-			v-expose="{}"
-			v-model="value"
-			v-bind="attrs.assem"
-			:multiple="multiple"
-			:placeholder="placeholder"
-		>
-			<ElOption
-				v-for="item in props.options"
-				:label="useVueValue(item, props.label)"
-				:value="useVueValue(item, props.prop)"
-				:disabled="item?.disabled"
-			/>
-		</ElSelect>
-	</div>
-</template>
-<script lang="ts" setup>
-	import vExpose from '../../../directives/expose';
-	import { ElSelect, ElOption } from 'element-plus';
-	import { useInherit } from '../../../hooks/inherit';
-	import { useVueValue } from '../../common/use';
-	import { useCssName } from '../../../hooks/cssname';
-	import { dataProps, dataEmits, dataHandle } from './data';
-	import { ref, computed, useAttrs } from 'vue';
-	const refEl = ref();
-	const attrs = useInherit(useAttrs());
-	const cs = useCssName('selects');
-	const props = defineProps(dataProps);
-	const placeholder = computed(() => {
-		if (typeof props.placeholder == 'undefined') {
-			return '请选择';
-		} else {
-			return props.placeholder;
-		}
-	});
-	const emit = defineEmits(dataEmits);
-
-	const listFuObj = dataHandle(props, emit);
-	const value = listFuObj.value;
-	const multiple = listFuObj.multiple;
-	defineOptions({ inheritAttrs: false });
-	defineExpose({
-		el: refEl,
-	});
-</script>

package/dist/components/slider/index.ts

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

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

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

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

package/dist/components/stick-div/index.ts

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

package/dist/components/stick-div/src/data.ts

@@ -1,50 +0,0 @@
-import type { ExtractPublicPropTypes } from 'vue';
-
-import { buildProps } from '../../../utils/vues/buildProps';
-import { definePropType } from '../../../utils/vues/definePropType';
-export type Direction = 'left' | 'right' | 'top' | 'bottom';
-export const dataProps = buildProps({
-	/**
-	 * @props { String } direction=bottom ( ) 方向
-	 */
-	direction: {
-		type: definePropType<Direction>(String),
-		default: 'bottom',
-	},
-	/**
-	 * @props { Array } direction= ( ) 方向默认是全部
-	 */
-	directions: {
-		type: Array<Direction>,
-		default() {
-			return ['left', 'right', 'top', 'bottom'];
-		},
-	},
-	/**
-	 * @props { Boolean } often= ( ) 是否时时变化
-	 */
-	often: {
-		type: Boolean,
-	},
-});
-
-export type DataProps = ExtractPublicPropTypes<typeof dataProps>;
-
-/**
- */
-export const dataEmits = {};
-
-export type DataEmits = typeof dataEmits;
-
-/**
- * @slot default 默认插槽
- * @slot stick 可以调整的内容
- */
-export const dataSlot = {
-	stick: 'stick',
-	default: 'default',
-};
-
-/**
- */
-export const dataExpose = {};

package/dist/components/stick-div/src/index.vue

@@ -1,102 +0,0 @@
-<template>
-	<div
-		:class="cs.z()"
-		:style="{
-			display: 'flex',
-			flexDirection: flexDirection,
-		}"
-		ref="refDom"
-	>
-		<div
-			ref="refStick"
-			:style="{
-				display: 'flex',
-				flexDirection:
-					seat == 'left' || seat == 'right' ? 'column' : 'row',
-			}"
-			:class="cs.z('stick')"
-		>
-			<slot :name="dataSlot.stick"></slot>
-		</div>
-		<div
-			:style="{
-				flex: '1',
-			}"
-			:class="cs.z('body')"
-		>
-			<slot :name="dataSlot.default"></slot>
-		</div>
-	</div>
-</template>
-<script lang="ts" setup>
-	import { pressEvent } from '@fangzhongya/utils/dom/getShiftEvent';
-	import { attrValueSort } from '@fangzhongya/utils/basic/object/attrValueSort';
-	import {
-		dataProps,
-		dataEmits,
-		dataExpose,
-		dataSlot,
-		type Direction,
-	} from './data';
-	import { useCssName } from '../../../hooks/cssname';
-	import { useLocale } from '../../../hooks/locale';
-	import { onMounted, shallowRef, computed } from 'vue';
-	// 获取国际化字段
-	const { getLocale } = useLocale();
-	const directions = {
-		top: 'column',
-		bottom: 'column-reverse',
-		left: 'row',
-		right: 'row-reverse',
-	};
-	type FlexDirection = 'column' | 'column-reverse' | 'row' | 'row-reverse';
-	// 样式设置方法
-	const cs = useCssName('stick-div');
-	const props = defineProps(dataProps);
-	const emit = defineEmits(dataEmits);
-	const refDom = shallowRef();
-	const refStick = shallowRef();
-	const seat = shallowRef(props.direction);
-	const flexDirection = computed<FlexDirection>(() => {
-		return directions[seat.value] as FlexDirection;
-	});
-
-	function getDirection(obj: { [key: string]: number }): Direction {
-		return attrValueSort(obj, props.directions)[0] as Direction;
-	}
-	onMounted(() => {
-		type SeatEvent = MouseEvent | Touch;
-		const bodyStyle = document.body.style;
-		const cursor = bodyStyle.cursor;
-		let rect: DOMRect;
-		const setValue = (event: SeatEvent) => {
-			seat.value = getDirection({
-				left: event.clientX - rect.left,
-				top: event.clientY - rect.top,
-				right: rect.left + rect.width - event.clientX,
-				bottom: rect.top + rect.height - event.clientY,
-			});
-		};
-		const handleMouseMove = (event: SeatEvent) => {
-			if (props.often) {
-				setValue(event);
-			}
-		};
-		const handleMouseUp = (event: SeatEvent) => {
-			setValue(event);
-			bodyStyle.cursor = cursor;
-		};
-		const mousedown = () => {
-			bodyStyle.cursor = 'move';
-			rect = refDom.value.getBoundingClientRect();
-			//鼠标指针的位置发生变化时
-			return true;
-		};
-		// 在鼠标键点下的时候触发（包括左键和右键）
-		pressEvent(refStick.value, mousedown, handleMouseMove, handleMouseUp);
-	});
-	defineExpose({
-		...dataExpose,
-	});
-</script>
-<style lang="scss"></style>

package/dist/components/stick-edge/index.ts

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

package/dist/components/stick-edge/src/data.ts

@@ -1,49 +0,0 @@
-import type { ExtractPublicPropTypes } from 'vue';
-
-import { buildProps } from '../../../utils/vues/buildProps';
-import { definePropType } from '../../../utils/vues/definePropType';
-type Direction = '' | 'left' | 'right' | 'top' | 'bottom';
-
-export const dataProps = buildProps({
-	/**
-	 * @props { String, Boolean } drag=true ( ) 可拖拽的元素样式 为空字符串就不拖拽
-	 */
-	drag: {
-		type: [String, Boolean],
-		default: true,
-	},
-	/**
-	 * @props { } direction= ( ) 方向默认是全部
-	 */
-	direction: {
-		// 打包时代码报错
-		// type: [definePropType<Direction>(String), Array<Direction>],
-		type: [String, Array<Direction>],
-		default: '',
-	},
-	/**
-	 * @props { } isFixed= ( ) 是否是绝对定位
-	 */
-	isFixed: {
-		type: Boolean,
-	},
-});
-
-export type DataProps = ExtractPublicPropTypes<typeof dataProps>;
-
-/**
- */
-export const dataEmits = {};
-
-export type DataEmits = typeof dataEmits;
-
-/**
- * @slot default 默认插槽
- */
-export const dataSlot = {
-	default: 'default',
-};
-
-/**
- */
-export const dataExpose = {};