@fangzhongya/fang-ui 0.0.21 → 0.0.22

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

@@ -1,122 +0,0 @@
-<template>
-	<div
-		:class="cs.z()"
-		:style="{
-			position: props.isFixed ? 'fixed' : 'absolute',
-		}"
-		ref="refDom"
-		v-drag="{
-			dom: props.drag,
-			onMousedown: onMousedown,
-			onMouseup: onMouseup,
-		}"
-	>
-		<slot :name="dataSlot.default"></slot>
-	</div>
-</template>
-<script lang="ts" setup>
-	import { getPositionRelative } from '@fangzhongya/utils/css/getPositionRelative';
-	import { attrValueSort } from '@fangzhongya/utils/basic/object/attrValueSort';
-	import { setCss } from '@fangzhongya/utils/css/setCss';
-	import { getCss } from '@fangzhongya/utils/css/getCss';
-	import { shallowRef, onMounted } from 'vue';
-	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
-	import { useCssName } from '../../../hooks/cssname';
-	import { useLocale } from '../../../hooks/locale';
-	import vDrag from '../../../directives/drag';
-	type ObjStrNun =
-		| {
-				[key: string]: number;
-		  }
-		| DOMRect;
-
-	const initial: {
-		[key: string]: string;
-	} = {
-		left: 'right',
-		right: 'left',
-		top: 'bottom',
-		bottom: 'top',
-	};
-	// 获取国际化字段
-	const { getLocale } = useLocale();
-	// 样式设置方法
-	const cs = useCssName('stick-edge');
-	const props = defineProps(dataProps);
-	const emit = defineEmits(dataEmits);
-	const refDom = shallowRef();
-	const fRect = shallowRef<ObjStrNun>({});
-	function onMousedown(e: MouseEvent, p: ObjStrNun) {
-		setCss(refDom.value, {
-			left: p.left + 'px',
-			top: p.top + 'px',
-			right: 'initial',
-			bottom: 'initial',
-		});
-		return p;
-	}
-	function onMouseup(j: MouseEvent, k: MouseEvent, p: ObjStrNun) {
-		const seat = getSeat(p);
-		const arr = getDirection(seat);
-		setDirection(refDom.value, arr[0]);
-	}
-	function getSeat(rect: ObjStrNun) {
-		// const rect = dom.getBoundingClientRect();
-		// return {
-		// 	left: rect.left - fRect.value.left,
-		// 	top: rect.top - fRect.value.top,
-		// 	right:
-		// 		fRect.value.width + fRect.value.left - rect.width - rect.left,
-		// 	bottom:
-		// 		fRect.value.height + fRect.value.top - rect.height - rect.top,
-		// };
-		return {
-			left: rect.left,
-			top: rect.top,
-			right: fRect.value.width - rect.width - rect.left,
-			bottom: fRect.value.height - rect.height - rect.top,
-		};
-	}
-	function getDirection(obj: { [key: string]: number }) {
-		const v = props.direction;
-		let keys: string[] = [];
-		if (v && v.length > 0) {
-			if (v instanceof Array) {
-				keys = v;
-			} else {
-				keys = [v];
-			}
-		} else {
-			keys = ['left', 'right', 'top', 'bottom'];
-		}
-		return attrValueSort(obj, keys);
-	}
-	function setDirection(dom: HTMLDivElement, key: string) {
-		setCss(dom, initial[key], 'initial');
-		setCss(dom, key, '0');
-	}
-	function getPosition(el: HTMLElement, key: string) {
-		return Number(getCss(el, key).replace(/[a-z|A-Z]*$/, ''));
-	}
-	onMounted(() => {
-		if (props.isFixed) {
-			fRect.value = {
-				width: window.innerWidth,
-				height: window.innerHeight,
-				left: 0,
-				top: 0,
-			};
-		} else {
-			const fdom = getPositionRelative(refDom.value);
-			fRect.value = {
-				width: getPosition(fdom, 'width'),
-				height: getPosition(fdom, 'height'),
-				left: 0,
-				top: 0,
-			};
-		}
-	});
-	defineExpose({
-		...dataExpose,
-	});
-</script>

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

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

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

@@ -1,64 +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({
-	to: {
-		type: String,
-	},
-	disabled: {
-		type: Boolean,
-	},
-	/**
-	 * @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,
-	},
-	/**
-	 * @props { String, Boolean} drag= ( ) 可拖拽的元素样式
-	 */
-	drag: {
-		type: [String, Boolean],
-	},
-});
-
-export type DataProps = ExtractPublicPropTypes<typeof dataProps>;
-
-/**
- */
-export const dataEmits = {};
-
-export type DataEmits = typeof dataEmits;
-
-/**
- * @slot default 默认插槽
- */
-export const dataSlot = {
-	default: 'default',
-	top: 'top',
-	bottom: 'bottom',
-};
-
-/**
- */
-export const dataExpose = {};

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

@@ -1,102 +0,0 @@
-<template>
-	<BoxTeleport :disabled="props.disabled" :to="props.to">
-		<div v-stick="stick" :class="cs.z()">
-			<slot :name="dataSlot.top"></slot>
-			<slot :name="dataSlot.default" :values="windowObjs">
-				<div
-					:class="cs.z('window-li')"
-					v-for="(item, index) in windowObjs"
-					:key="index"
-				>
-					<span
-						:class="cs.z('window-li-title')"
-						@click="onClick(item, index)"
-						>{{ item.title }}</span
-					>
-					<i
-						@click="onClose(item, index)"
-						:class="cs.z('window-li-close')"
-						:title="getLocale('close')"
-					>
-						<svg
-							viewBox="0 0 1024 1024"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<path
-								fill="currentColor"
-								d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
-							></path>
-						</svg>
-					</i>
-				</div>
-			</slot>
-			<slot :name="dataSlot.bottom"></slot>
-		</div>
-	</BoxTeleport>
-</template>
-<script lang="ts" setup>
-	import BoxTeleport from '../../box-teleport/index';
-	// import BoxTeleport from '../../../box-teleportindex';
-	// import BoxTeleport from '../../../common/box-teleport.vue';
-	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
-	import { useCssName } from '../../../hooks/cssname';
-	import { useLocale } from '../../../hooks/locale';
-	import vStick from '../../../directives/stick';
-	import { ref } from 'vue';
-	// 获取国际化字段
-	const { getLocale } = useLocale();
-	// 样式设置方法
-	const cs = useCssName('stick-window');
-	const props = defineProps(dataProps);
-	const emit = defineEmits(dataEmits);
-	type WindowObj = {
-		key: symbol;
-		value: () => void;
-		close: () => void;
-		title?: string;
-	};
-	const windowObjs = ref<Array<WindowObj>>([]);
-	// var objectSymbols = Object.getOwnPropertySymbols(obj);
-	const stick = {
-		direction: props.direction,
-		directions: props.directions,
-		dom: props.drag,
-		often: props.often,
-	};
-	function onClick(item: WindowObj, index: number) {
-		if (item.value) {
-			item?.value();
-		}
-	}
-	function onClose(item: WindowObj, index: number) {
-		if (item.close) {
-			item.close();
-		}
-		windowObjs.value.splice(index, 1);
-	}
-	function isKey(s: symbol) {
-		return windowObjs.value.map((o) => o.key).includes(s);
-	}
-	function add(s: symbol, a: () => void, r: () => void, t?: string) {
-		if (!isKey(s)) {
-			windowObjs.value.push({
-				key: s,
-				value: a,
-				close: r,
-				title: t,
-			});
-		}
-	}
-	function remove(s: symbol, t?: string) {
-		windowObjs.value = windowObjs.value.filter((v) => {
-			return v.key !== s;
-		});
-	}
-
-	defineExpose({
-		...dataExpose,
-		add: add,
-		remove: remove,
-	});
-</script>
-<style lang="scss"></style>

package/dist/components/switch/index.ts

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

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

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

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

package/dist/components/switchs/index.ts

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

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

@@ -1,13 +0,0 @@
-import type { ExtractPropTypes } from 'vue';
-
-import { props, emits } from '../../common/list';
-
-export const dataProps = {
-	...props,
-};
-
-export type DataProps = ExtractPropTypes<typeof dataProps>;
-
-export const dataEmits = [...emits];
-
-export type DataEmits = typeof dataEmits;

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

@@ -1,74 +0,0 @@
-<template>
-	<div :class="cs.z()" v-bind="attrs.root">
-		<ElSwitch
-			:class="cs.z('switch')"
-			v-model="value"
-			v-bind="{ ...binds, ...attrs.assem }"
-			v-expose="{}"
-		>
-		</ElSwitch>
-	</div>
-</template>
-<script lang="ts" setup>
-	import vExpose from '../../../directives/expose';
-	import { ElSwitch } from 'element-plus';
-	import { useInherit } from '../../../hooks/inherit';
-	import { useVueValue } from '../../common/use';
-	import { useCssName } from '../../../hooks/cssname';
-	import { dataProps, dataEmits } from './data';
-	import { ref, watch, computed, useAttrs } from 'vue';
-	const cs = useCssName('switchs');
-	const attrs = useInherit(useAttrs());
-	const props = defineProps(dataProps);
-	const emit = defineEmits(dataEmits);
-
-	const active = ref<ObjAny>({});
-	const inactive = ref<ObjAny>({});
-	watch(
-		() => props.options,
-		() => {
-			if (props.options && props.options.length > 1) {
-				const i = props.options[0];
-				inactive.value.text = useVueValue(i, props.label);
-				inactive.value.value = useVueValue(i, props.prop);
-				inactive.value.icon = i?.icon;
-				inactive.value.color = i?.color;
-				const a = props.options[1];
-				active.value.text = useVueValue(a, props.label);
-				active.value.value = useVueValue(a, props.prop);
-				active.value.icon = a?.icon;
-				active.value.color = a?.color;
-			}
-		},
-		{ immediate: true, deep: true },
-	);
-	const binds = computed(() => {
-		const obj: ObjAny = {};
-		for (let k in active.value) {
-			obj['active-' + k] = active.value[k];
-		}
-		for (let k in inactive.value) {
-			obj['inactive-' + k] = inactive.value[k];
-		}
-		return obj;
-	});
-
-	const value = computed({
-		get() {
-			let v = props.modelValue;
-			return v;
-		},
-		set(value) {
-			emit('update:modelValue', value);
-			if (props.optobj) {
-				const obj = props.options.filter((o: any) => {
-					return useVueValue(o, props.prop) === value;
-				})[0];
-				emit('change', value, obj);
-			} else {
-				emit('change', value);
-			}
-		},
-	});
-	defineOptions({ inheritAttrs: false });
-</script>

package/dist/components/tab-pane/index.ts

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

package/dist/components/tab-pane/src/data.ts

@@ -1,24 +0,0 @@
-import type { ExtractPublicPropTypes } from 'vue';
-
-import { buildProps } from '../../../utils/vues/buildProps';
-
-/**
- * @title {h2} TabPane 标签页子组件
- * @text 目前完全继承 element-plus 中 el-tab-pane
- * @text 必须在Tabs 标签页下使用
- */
-
-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/tab-pane/src/index.vue

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

package/dist/components/table-list/index.ts

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

package/dist/components/table-list/src/data.ts

@@ -1,78 +0,0 @@
-import type { ExtractPropTypes } from 'vue';
-
-import { buildProps } from '../../../utils/index';
-
-/**
- * @title FTable 表格
- * @author 方忠亚
- * @description 对el-table进行二次封装，减少写html，自适应自身高度
- * @date 2022年11月21日19点34分
- */
-
-export const dataProps = buildProps({
-	/**
-	 * @props { Array } list 展示数据列表
-	 */
-	list: Array, //展示数据列表
-	/**
-	 * @props { Object } value 接口数据
-	 */
-	value: Object, //数据
-	/**
-	 * @props { Object } th 设置通用th
-	 * @props { String } th.padEnd 再th的后面的添加统一的数据
-	 * @props { Object , Array ,String } th.class 设置通用th的class
-	 * @props { Object , String } td.style 设置通用td的style
-	 * @props { String } th.label 设置th的标签
-	 * @props { String } th.width 设置th的width
-	 */
-	th: {
-		type: Object,
-		default() {
-			return {};
-		},
-	},
-	/**
-	 * @props { Object } td 设置通用td数据
-	 * @props { Object , Array , String } td.class 设置通用td的class
-	 * @props { Object , String } td.style 设置通用td的style
-	 * @props { String } th.width 设置td的width
-	 */
-	td: {
-		type: Object,
-		default() {
-			return {};
-		},
-	},
-	/**
-	 * @props { Number, String } column 展示列数
-	 */
-	column: {
-		// 展示列数
-		type: [Number, String],
-		default: 1,
-	},
-	/**
-	 * @props { Boolean } fill 末尾是否保全
-	 */
-	fill: {
-		type: Boolean,
-		default: true,
-	},
-});
-
-export type DataProps = ExtractPropTypes<typeof dataProps>;
-
-/**
- */
-export const dataEmits = [];
-
-export type DataEmits = typeof dataEmits;
-
-/**
- */
-export const dataSlot = {};
-
-/**
- */
-export const dataExpose = [];

package/dist/components/table-list/src/index.vue

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { defineComponent, computed } from 'vue';
-	import { render } from './table-list';
-	import { useCssName, useLocale, useInherit } from '../../../hooks/index';
-	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
-	/**
-	 * @title FListTable 左右展示列表
-	 * @author 方忠亚
-	 * @description 左右展示列表组件
-	 * @date 2022年11月21日19点34分
-	 */
-	export default defineComponent({
-		props: dataProps,
-		emits: dataEmits,
-		expose: dataExpose,
-		setup(props) {
-			// 样式设置方法
-			const cs = useCssName('table-list');
-			const v = computed(() => {
-				return props;
-			});
-			return () => render(v, cs);
-		},
-		// render: render,
-	});
-</script>
-
-<style lang="scss"></style>