@fangzhongya/fang-ui 0.0.21 → 0.0.23

package/dist/components/input-select/src/index.vue

@@ -1,275 +0,0 @@
-<template>
-	<ElPopover
-		trigger="click"
-		:popper-class="cs.z('popper')"
-		:visible="visible"
-		:disabled="props.disabled || !(options && options.length > 0)"
-		:width="width"
-	>
-		<div :class="cs.z('select')">
-			<ul :class="cs.z('select-ul')">
-				<li
-					v-for="item in options"
-					:class="[
-						cs.z('select-li'),
-						cs.is('disabled', item?.disabled),
-						getSelected(item),
-					]"
-					@click.stop="onClickSelect(item)"
-				>
-					{{ useVueValue(item, props.label) }}
-				</li>
-			</ul>
-		</div>
-		<template #reference>
-			<div
-				:class="[cs.z(), cs.is('disabled', props.disabled)]"
-				v-bind="attrs.root"
-				@click="onClick"
-			>
-				<ElInput
-					ref="refInput"
-					v-model="value"
-					v-bind="attrs.assem"
-					:disabled="props.disabled"
-					:readonly="props.readonly"
-					@input="onInput"
-					@focus="onFocus"
-					@blur="onBlur"
-					:clearable="false"
-				>
-					<template
-						v-for="(k, index) in Object.keys(slots)"
-						v-slot:[k]
-						:key="k"
-					>
-						<slot :name="k"></slot>
-					</template>
-					<template #suffix>
-						<span
-							v-if="isclear"
-							:class="[cs.z('select-icon'), 'clear']"
-							@click.stop="onClear"
-						>
-							<svg
-								viewBox="0 0 1024 1024"
-								xmlns="http://www.w3.org/2000/svg"
-								data-v-ea893728=""
-							>
-								<path
-									fill="currentColor"
-									d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z"
-								></path>
-								<path
-									fill="currentColor"
-									d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
-								></path>
-							</svg>
-						</span>
-						<slot :name="dataSlot.suffix"></slot>
-						<span
-							:class="[
-								cs.z('select-icon'),
-								cs.is('reverse', visible),
-							]"
-						>
-							<slot :name="dataSlot.iconSelect">
-								<svg
-									viewBox="0 0 1024 1024"
-									xmlns="http://www.w3.org/2000/svg"
-									data-v-ea893728=""
-								>
-									<path
-										fill="currentColor"
-										d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"
-									></path>
-								</svg>
-							</slot>
-						</span>
-					</template>
-				</ElInput>
-			</div>
-		</template>
-	</ElPopover>
-</template>
-<script lang="ts" setup>
-	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
-	import { ElPopover, ElInput } from 'element-plus';
-	// import Inputs from '../inputs/index.vue';
-	import { useInherit } from '../../../hooks/inherit';
-	import { useVueValue } from '../../common/use';
-	import { useCssName } from '../../../hooks/cssname';
-	import { getCss } from '@fangzhongya/utils/css/getCss';
-	import { useSlots, computed, ref, onMounted, useAttrs } from 'vue';
-	import type { Slots } from 'vue';
-	const attrs = useInherit(useAttrs());
-	const slots: Slots = useSlots();
-	// 样式设置方法
-	const cs = useCssName('input-select');
-	const props = defineProps(dataProps);
-	const emit = defineEmits(dataEmits);
-	const visible = ref(false);
-	const width = ref(200);
-	const refInput = ref();
-	const isfocus = ref(false);
-	const isFiletr = ref(false);
-	const value = computed({
-		get() {
-			let v = props.modelValue;
-			return v;
-		},
-		set(value) {
-			emit('update:modelValue', value);
-		},
-	});
-
-	const options = computed(() => {
-		if (props.filterable && value.value && isFiletr.value) {
-			return props.options.filter((o) => {
-				return (useVueValue(o, props.prop) + '').includes(
-					value.value || '',
-				);
-			});
-		}
-		return props.options;
-	});
-	const isclear = computed(() => {
-		if (props.readonly) {
-			return false;
-		}
-		if (props.clearable && value.value && isfocus.value) {
-			return true;
-		}
-		return false;
-	});
-	function setWidth() {
-		if (refInput.value && refInput.value.ref) {
-			width.value = getCss(refInput.value.ref, 'width');
-		}
-	}
-	function onClickSelect(item: any) {
-		if (!item.disabled) {
-			value.value = useVueValue(item, props.prop);
-			emit('change', value.value, item);
-			visible.value = false;
-			isFiletr.value = false;
-		}
-	}
-	function getSelected(item: any) {
-		const v = useVueValue(item, props.prop);
-		if (v === value.value) {
-			return 'selected';
-		} else {
-			return;
-		}
-	}
-	function onInput(v: string, ...arr: any[]) {
-		emit('input', v, ...arr);
-		if (props.filterable) {
-			isFiletr.value = true;
-			visible.value = true;
-		}
-	}
-	// @ts-ignore
-	let timeout: NodeJS.Timeout;
-	function onBlur(...arr: any[]) {
-		emit('blur', ...arr);
-		timeout = setTimeout(() => {
-			isfocus.value = false;
-			visible.value = false;
-		}, 200);
-	}
-	function clearBlur() {
-		clearTimeout(timeout);
-	}
-	function onFocus(...arr: any[]) {
-		isfocus.value = true;
-		clearBlur();
-		emit('focus', ...arr);
-	}
-	function onClear() {
-		clearBlur();
-		value.value = '';
-		refInput.value.focus();
-	}
-	function onClick() {
-		if (!props.readonly) {
-			isFiletr.value = false;
-			visible.value = !visible.value;
-		}
-	}
-	onMounted(() => {
-		setWidth();
-	});
-	defineOptions({ inheritAttrs: false });
-	defineExpose({
-		...dataExpose,
-	});
-</script>
-
-<style lang="scss" scoped>
-	$input-selects: 'input-select';
-	.#{$input-selects} {
-		.#{$input-selects}-select-icon {
-			margin-left: 8px;
-			display: inline-flex;
-			pointer-events: all;
-			align-items: center;
-			justify-content: center;
-			cursor: pointer;
-			transform: rotate(0);
-			transition: transform 0.3s;
-			&.is-reverse {
-				transform: rotate(-180deg);
-			}
-			svg {
-				width: 1rem;
-				height: 1rem;
-			}
-		}
-		&.is-disabled {
-			.#{$input-selects}-select-icon {
-				cursor: not-allowed;
-			}
-		}
-	}
-	.#{$input-selects}-popper {
-		padding: 6px 0 !important;
-		.#{$input-selects}-select {
-			max-height: 274px;
-			height: 100%;
-			overflow-y: auto;
-			.#{$input-selects}-select-ul {
-				list-style: none;
-				margin: 6px 0;
-				padding: 0;
-				box-sizing: border-box;
-			}
-			.#{$input-selects}-select-li {
-				padding: 0 32px 0 20px;
-				position: relative;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				color: #606266;
-				height: 34px;
-				line-height: 34px;
-				box-sizing: border-box;
-				cursor: pointer;
-				&.hover,
-				&:hover {
-					background-color: #f5f7fa;
-				}
-				&.selected {
-					color: var(--bv-color-primary);
-					font-weight: 700;
-				}
-				&.is-disabled {
-					background-color: #ffffff;
-					color: #a8abb2;
-					cursor: not-allowed;
-				}
-			}
-		}
-	}
-</style>

package/dist/components/inputs/index.ts

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

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

@@ -1,31 +0,0 @@
-import type { ExtractPropTypes } from 'vue';
-
-export const dataProps = {
-	oncePlaceholder: {
-		type: Boolean,
-	},
-	/**
-	 * @props { String } placeholder= ( )
-	 * 输入框提示
-	 */
-	placeholder: {
-		type: String,
-	},
-	/**
-	 * @props { String } modelValue= ( )
-	 * 输入框展示数据
-	 */
-	modelValue: {
-		type: [String, Number],
-	},
-};
-
-export type DataProps = ExtractPropTypes<typeof dataProps>;
-
-/**
- * @emits {string} update:modelValue (str:string)
- * modelValue 数据双向绑定
- */
-export const dataEmits = ['update:modelValue'];
-
-export type DataEmits = typeof dataEmits;

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

@@ -1,71 +0,0 @@
-<template>
-	<div ref="refEl" :class="cs.z()" v-bind="attrs.root">
-		<ElInput
-			:class="cs.z('input')"
-			v-expose="{}"
-			v-model="value"
-			v-bind="attrs.assem"
-			:placeholder="placeholder"
-		>
-			<template
-				v-for="(k, index) in Object.keys(slots)"
-				v-slot:[k]
-				:key="k"
-			>
-				<slot :name="k"></slot>
-			</template>
-		</ElInput>
-	</div>
-</template>
-<script lang="ts" setup>
-	import vExpose from '../../../directives/expose';
-	import { ElInput } from 'element-plus';
-	import { dataProps, dataEmits } from './data';
-	import { useCssName } from '../../../hooks/cssname';
-	import { useInherit } from '../../../hooks/inherit';
-	import { computed, useSlots, ref, useAttrs } from 'vue';
-	import type { Slots } from 'vue';
-	const attrs = useInherit(useAttrs());
-	const cs = useCssName('inputs');
-	const props = defineProps(dataProps);
-	const slots: Slots = useSlots();
-	const emit = defineEmits(dataEmits);
-	const refEl = ref();
-
-	const once = setOnce();
-
-	const placeholder = computed(() => {
-		if (typeof props.placeholder == 'undefined') {
-			return '请输入';
-		} else {
-			if (props.oncePlaceholder) {
-				return once(props.placeholder);
-			} else {
-				return props.placeholder;
-			}
-		}
-	});
-	const value = computed({
-		get() {
-			let v = props.modelValue;
-			return v;
-		},
-		set(value) {
-			emit('update:modelValue', value);
-		},
-	});
-
-	function setOnce() {
-		let v = '';
-		return (value: string) => {
-			if (!v && value) {
-				v = value;
-			}
-			return v;
-		};
-	}
-	defineOptions({ inheritAttrs: false });
-	defineExpose({
-		el: refEl,
-	});
-</script>

package/dist/components/labels/index.ts

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

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

@@ -1,27 +0,0 @@
-import type { ExtractPropTypes } from 'vue';
-
-import { props, emits, comHandle } from '../../common/list';
-
-export const dataProps = {
-	...props,
-
-	nowhole: {
-		type: Boolean,
-	},
-	whole: {
-		type: String,
-		default: '全部',
-	},
-	compact: {
-		type: Boolean,
-		default: true,
-	},
-};
-
-export type DataProps = ExtractPropTypes<typeof dataProps>;
-
-export const dataHandle = comHandle;
-
-export const dataEmits = [...emits];
-
-export type DataEmits = typeof dataEmits;

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

@@ -1,131 +0,0 @@
-<template>
-	<div :class="[cs.z(), cs.is('compact', props.compact)]">
-		<template v-if="multiple">
-			<Checks
-				v-bind="props"
-				:class="[cs.z('whole')]"
-				:options="options"
-				v-model="valueMultiple"
-				@click-multiple="onClickWholes"
-			>
-			</Checks>
-		</template>
-		<template v-else>
-			<Checks v-bind="props" :options="options" v-model="value"> </Checks>
-		</template>
-	</div>
-</template>
-<script lang="ts" setup>
-	import Checks from '../../checks/index';
-	import { computed } from 'vue';
-	import { useVueValue } from '../../common/use';
-	import { useCssName } from '../../../hooks/cssname';
-	import { dataProps, dataEmits, dataHandle } from './data';
-	const cs = useCssName('labels');
-	const props = defineProps(dataProps);
-
-	const emit = defineEmits(dataEmits);
-
-	const listFuObj = dataHandle(props, emit);
-	const value = listFuObj.value;
-
-	const multiple = listFuObj.multiple;
-
-	function setPropsValue(
-		obj: ObjAny,
-		key: string | Function,
-		value: any,
-		d: string,
-	) {
-		if (typeof key === 'function') {
-			const k = key(obj) ?? d;
-			obj[k] = value;
-		} else if (typeof key == 'string') {
-			obj[key] = value;
-		} else {
-			obj[d] = value;
-		}
-	}
-
-	const wholeValue = "Symbol('whole')";
-
-	const wholeClass = 'labels-li-whole';
-
-	type ObjSymAny = { [key: string | symbol]: any };
-
-	const options = computed(() => {
-		const opts = [...props.options];
-		if (!props.nowhole) {
-			const obj: ObjSymAny = {
-				class: wholeClass,
-			};
-			if (multiple.value) {
-				setPropsValue(obj, props.prop, wholeValue, 'value');
-			} else {
-				setPropsValue(obj, props.prop, '', 'value');
-			}
-			setPropsValue(obj, props.label, props.whole, 'label');
-			opts.unshift(obj);
-		}
-		return opts;
-	});
-
-	const valueMultiple = computed({
-		get() {
-			if (value.value) {
-				if (
-					value.value.length ===
-					props.options.filter((item) => !item.disabled).length
-				) {
-					return [...value.value, wholeValue];
-				} else {
-					return [...value.value];
-				}
-			} else {
-				return [];
-			}
-		},
-		set(v) {
-			if (v.includes(wholeValue)) {
-				v = v.filter((item) => item !== wholeValue);
-			}
-			if (v.length !== (value.value?.length ?? 0)) {
-				value.value = [...v];
-			}
-		},
-	});
-
-	function onClickWholes(item: ObjSymAny, is: boolean) {
-		if (item.class === wholeClass) {
-			if (valueMultiple.value.includes(wholeValue)) {
-				valueMultiple.value = [];
-			} else {
-				const v = props.options
-					.filter((item) => !item.disabled)
-					.map((item) => {
-						return useVueValue(item, props.prop);
-					});
-				valueMultiple.value = [...v, wholeValue];
-			}
-		} else {
-			if (!is) {
-				if (valueMultiple.value.includes(wholeValue)) {
-					valueMultiple.value = valueMultiple.value.filter(
-						(item) => item !== wholeValue,
-					);
-				}
-			}
-		}
-	}
-</script>
-<style lang="scss" scoped>
-	$namespace: 'el';
-	$labelss: 'labels';
-	.#{$labelss} {
-		height: 100%;
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		font-size: 0;
-	}
-</style>

package/dist/components/lists/common/img.vue

@@ -1,34 +0,0 @@
-de
-<template>
-  <div class="lists-li">
-    <el-image
-      fit="contain"
-      class="lists-li-img"
-      :src="value"
-      :preview-src-list="[value]"
-    ></el-image>
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed } from 'vue'
-const props = defineProps({
-  modelValue: String,
-})
-const prefix = import.meta.env.VITE_SERVER_API_URL
-
-const value = computed(() => {
-  if (props.modelValue) {
-    return prefix + '/' + props.modelValue
-  } else {
-    return ''
-  }
-})
-defineExpose({})
-</script>
-
-<style lang="scss" scoped>
-.lists-li-img {
-  width: 50px;
-  height: 50px;
-}
-</style>

package/dist/components/lists/index.ts

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

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

@@ -1,70 +0,0 @@
-import type { ExtractPropTypes, Component } from 'vue';
-
-export const dataProps = {
-	/**
-	 * @props { Object } options 选择数据集合
-	 */
-	options: {
-		type: Object,
-		default() {
-			return {};
-		},
-	},
-	/**
-	 * @props { Object } compons 外部组件集合
-	 */
-	compons: {
-		type: Object as () => { [key: string]: Component },
-		default() {
-			return {};
-		},
-	},
-
-	labelPosition: {
-		type: String as () => 'left' | 'top' | 'right' | 'center' | 'auto',
-		default: 'auto',
-	},
-	list: {
-		type: Array<ListObj>,
-		default: () => {
-			return [];
-		},
-	},
-	value: {
-		type: Object,
-		default: () => {
-			return {};
-		},
-	},
-	column: {
-		type: Number,
-		default() {
-			return 2;
-		},
-	},
-	colon: [Boolean, String],
-
-	labelWidth: {
-		type: [Number, String],
-		// default: '60px',
-	}, // 宽度
-
-	border: {
-		type: [Boolean, String],
-		// default: true
-	},
-	// 是否等分
-	aliquots: {
-		type: Boolean,
-		default: true,
-	},
-	componSelected: Boolean,
-};
-
-export type DataProps = ExtractPropTypes<typeof dataProps>;
-
-export const dataEmits = ['list-events'];
-
-export type DataEmits = typeof dataEmits;
-
-export const dataExpose = [];