@fangzhongya/fang-ui 0.0.21 → 0.0.22

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

@@ -1,207 +0,0 @@
-<template>
-	<div :class="cs.z()">
-		<SelectDialog
-			:get-name="getName"
-			:get-name-explain="getNameExplain"
-			:disabled="propss.disabled"
-			:placeholder="propss.placeholder"
-			:appendToBody="propss.appendToBody"
-			ref="refSelectDialog"
-			v-model="list"
-			:value="propss.modelValue"
-			:width="propss.width"
-			:title="propss.title"
-			@dialog="onDialog"
-			@confirm="onDialogffirm"
-		>
-			<div :class="cs.z('dialog-li')">
-				<div :class="cs.z('dialog-li-top')">
-					<Input
-						:placeholder="psprops.searchPlaceholder"
-						clearable
-						v-model="search"
-						@keyup.enter.native="onInput"
-					></Input>
-				</div>
-				<div :class="cs.z('dialog-gap')"></div>
-				<div :class="[cs.z('dialog-li-div'), cs.z('dialog-li-tree')]">
-					<div :class="[cs.z('dialog-div-tree')]">
-						<CheckboxGroup v-model="list">
-							<el-table
-								:data="listData"
-								height="100%"
-								style="width: 100%"
-							>
-								<el-table-column
-									type="index"
-									label="序号"
-									width="60"
-								/>
-								<el-table-column
-									:prop="psprops.label"
-									label="角色名称"
-								/>
-								<el-table-column width="60" label="选择">
-									<template #default="{ row }">
-										<Checkbox
-											@change="
-												() => {
-													onChange(row);
-												}
-											"
-											:disabled="row[psprops.disabled]"
-											:label="row[psprops.value]"
-											>{{ '' }}
-										</Checkbox>
-									</template>
-								</el-table-column>
-							</el-table>
-						</CheckboxGroup>
-					</div>
-				</div>
-			</div>
-			<template #suffix>
-				<slot name="suffix"> </slot>
-			</template>
-		</SelectDialog>
-	</div>
-</template>
-<script lang="ts" setup>
-	import {
-		dataProps,
-		dataEmits,
-		dataExpose,
-		roleSelect,
-		type ModelValue,
-		type ObjStrAny,
-	} from './data';
-	import { useCssName, useLocale } from '../../../hooks/index';
-	import { ElTable, ElTableColumn } from 'element-plus';
-	import Input from '../../input/index';
-	import CheckboxGroup from '../../checkbox-group/index';
-	import Checkbox from '../../checkbox/index';
-	import SelectDialog from '../../select-dialog/index';
-	import { computed, ref, watch } from 'vue';
-	// 获取国际化字段
-	const { getLocale } = useLocale();
-	// 样式设置方法
-	const cs = useCssName('role-select');
-	const propss = defineProps(dataProps);
-	const emit = defineEmits(dataEmits);
-
-	const refSelectDialog = ref();
-
-	const psprops = computed(() => {
-		return Object.assign({}, roleSelect, propss.props);
-	});
-
-	const search = ref('');
-
-	/**
-	 * 搜索值
-	 */
-	function onInput() {
-		const prop = psprops.value.value;
-		if (psprops.value.lazyLoad) {
-			psprops.value.lazyLoad(search.value, (v: ObjStrAny[]) => {
-				v.forEach((o) => {
-					const id = o[prop];
-					nodes.value[id] = o;
-				});
-				listData.value = v;
-			});
-		}
-	}
-
-	const list = ref<ModelValue[]>([]);
-
-	watch(
-		() => propss.modelValue,
-		() => {
-			if (propss.modelValue) {
-				list.value = [...propss.modelValue];
-			} else {
-				list.value = [];
-			}
-		},
-		{ immediate: true, deep: true },
-	);
-
-	const nodes = ref<{
-		[key: ModelValue]: ObjStrAny;
-	}>({});
-
-	const listData = ref<ObjStrAny[]>([]);
-
-	function onChange(obj: ObjStrAny) {
-		const prop = psprops.value.value;
-		if (!psprops.value.multiple) {
-			list.value = [obj[prop]];
-		}
-	}
-
-	/**
-	 * 获取对应的名称
-	 * @param key
-	 */
-	function getName(key: ModelValue) {
-		const name = psprops.value.label;
-		let obj = nodes.value[key] || {};
-		return obj[name];
-	}
-
-	function getNameExplain(key: ModelValue) {
-		const name = psprops.value.explain;
-		if (name) {
-			let obj = nodes.value[key] || {};
-			return obj[name];
-		}
-	}
-
-	function onDialog(is: boolean) {
-		if (is) {
-			if (propss.modelValue) {
-				list.value = [...propss.modelValue];
-			} else {
-				list.value = [];
-			}
-			search.value = '';
-			onInput();
-		}
-	}
-
-	function onDialogffirm(val: ModelValue[]) {
-		emit('update:modelValue', val);
-		emit('change', val);
-	}
-
-	onInput();
-
-	/**
-	 * 设置默认显示值
-	 */
-	function setNodesObj(node: { [key: ModelValue]: ObjStrAny } | ObjStrAny[]) {
-		if (node) {
-			if (node instanceof Array) {
-				const prop = psprops.value.value;
-				node.forEach((o) => {
-					const id = o[prop];
-					nodes.value[id] = o;
-				});
-			} else {
-				Object.keys(node).forEach((key: ModelValue) => {
-					nodes.value[key] = node[key];
-				});
-			}
-		}
-	}
-
-	defineExpose({
-		...dataExpose,
-		setNodesObj: setNodesObj,
-		getInputName() {
-			return refSelectDialog.value.inputName;
-		},
-	});
-</script>
-<style lang="scss"></style>

package/dist/components/select/index.ts

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

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

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

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

package/dist/components/select-dialog/index.ts

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

package/dist/components/select-dialog/src/data.ts

@@ -1,113 +0,0 @@
-import type { ExtractPropTypes } from 'vue';
-
-import { buildProps } from '../../../utils/index';
-
-export type ModelValue = string | number;
-
-export type ObjStrAny = {
-	[key: string]: any;
-};
-
-export const dataProps = buildProps({
-	/**
-	 * @props { String, Number} width= ( )
-	 * 弹框宽度
-	 */
-	width: {
-		type: [String, Number],
-	},
-	/**
-	 * @props { String} title= ( )
-	 * 弹框标题
-	 */
-	title: {
-		type: [String],
-	},
-	/**
-	 * @props { Array} modelValue=
-	 * 值
-	 */
-	modelValue: {
-		type: [Array<ModelValue>],
-	},
-	placeholder: {
-		type: String,
-	},
-	/**
-	 * @props { Array} value=
-	 * 设置的值
-	 */
-	value: {
-		type: [Array<ModelValue>],
-	},
-	/**
-	 * @props { String} separator=','
-	 * 分隔选项的字符
-	 */
-	separator: {
-		type: [String],
-		default: ',',
-	},
-	appendToBody: {
-		type: Boolean,
-		default: true,
-	},
-	/**
-	 * @props { Function } getName= ( )
-	 * 对应展示名称
-	 */
-	getName: {
-		type: [Function],
-		default() {
-			return (v: any) => {
-				return v;
-			};
-		},
-	},
-	/**
-	 * @props { Function } getInputName= ( )
-	 * 选择框上展示名称
-	 */
-	setInputName: {
-		type: [Function],
-	},
-
-	/**
-	 * @props { Function } getNameExplain= ( )
-	 * 对应展示详情名称
-	 */
-	getNameExplain: {
-		type: [Function],
-	},
-
-	/**
-	 * @props { Boolean } disabled= ( )
-	 * 是否禁用
-	 */
-	disabled: {
-		type: [Boolean],
-	},
-});
-
-export type DataProps = ExtractPropTypes<typeof dataProps>;
-
-/**
- * @emits change (val:[String, Array])
- * 选择的时间
- */
-export const dataEmits = ['change', 'confirm', 'dialog', 'update:modelValue'];
-
-export type DataEmits = typeof dataEmits;
-
-/**
- * @slot default 默认插槽
- */
-export const dataSlot = {
-	default: 'default',
-};
-
-/**
- * @expose setValue (val:<string>设置的数据 )
- * 设置值
- */
-export const dataExpose = {};

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

@@ -1,218 +0,0 @@
-<template>
-	<div :class="cs.z()">
-		<!-- 解决点击左侧会弹框问题 -->
-		<Input v-show="false" disabled readonly> </Input>
-		<Input
-			:modelValue="inputName"
-			@click="onClick"
-			:placeholder="props.placeholder || getLocale('form.select')"
-			:disabled="props.disabled"
-			readonly
-		>
-			<template #suffix>
-				<slot name="suffix"> </slot>
-			</template>
-		</Input>
-		<Dialog
-			v-model="dialogVisible"
-			:class="cs.z('dialog')"
-			:custom-class="cs.z('dialog')"
-			:title="props.title"
-			:append-to-body="props.appendToBody"
-			:width="'calc(40px + ' + props.width + ')'"
-			:before-close="
-				() => {
-					dialogVisible = false;
-				}
-			"
-		>
-			<div :class="cs.z('dialog-list')">
-				<slot :name="dataSlot.default"></slot>
-				<div :class="[cs.z('dialog-li')]">
-					<div
-						:class="[
-							cs.z('dialog-li-top'),
-							cs.z('dialog-li-top-select'),
-						]"
-					>
-						<label>已选择</label>
-						<span
-							@click="onClear"
-							:class="[
-								cs.z('dialog-li-top'),
-								cs.z('dialog-li-top-clear'),
-							]"
-						>
-							<svg
-								viewBox="0 0 1024 1024"
-								xmlns="http://www.w3.org/2000/svg"
-								data-v-ea893728=""
-							>
-								<path
-									fill="currentColor"
-									d="M896 448H128v192a64 64 0 0 0 64 64h192v192h256V704h192a64 64 0 0 0 64-64V448zm-770.752-64c0-47.552 5.248-90.24 15.552-128 14.72-54.016 42.496-107.392 83.2-160h417.28l-15.36 70.336L736 96h211.2c-24.832 42.88-41.92 96.256-51.2 160a663.872 663.872 0 0 0-6.144 128H960v256a128 128 0 0 1-128 128H704v160a32 32 0 0 1-32 32H352a32 32 0 0 1-32-32V768H192A128 128 0 0 1 64 640V384h61.248zm64 0h636.544c-2.048-45.824.256-91.584 6.848-137.216 4.48-30.848 10.688-59.776 18.688-86.784h-96.64l-221.12 141.248L561.92 160H256.512c-25.856 37.888-43.776 75.456-53.952 112.832-8.768 32.064-13.248 69.12-13.312 111.168z"
-								></path>
-							</svg>
-						</span>
-					</div>
-					<div :class="cs.z('dialog-gap')"></div>
-					<div
-						:class="[
-							cs.z('dialog-li-div'),
-							cs.z('dialog-li-select'),
-						]"
-					>
-						<div
-							v-for="(item, index) in value"
-							:key="index"
-							:class="[cs.z('dialog-li-select-li')]"
-						>
-							<div :class="[cs.z('dialog-li-top-select')]">
-								<span
-									:class="[cs.z('dialog-li-select-li-p1')]"
-									>{{ props.getName(item) }}</span
-								>
-								<span
-									:class="[cs.z('dialog-li-select-li-del')]"
-									@click="onDelete(item)"
-								>
-									<svg
-										viewBox="0 0 1024 1024"
-										xmlns="http://www.w3.org/2000/svg"
-										data-v-ea893728=""
-									>
-										<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>
-								</span>
-							</div>
-							<div
-								v-if="props.getNameExplain"
-								:class="[cs.z('dialog-li-select-li-p2')]"
-							>
-								{{ props.getNameExplain(item) }}
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<template #footer>
-				<span :class="[cs.z('dialog-footer')]">
-					<Button @click="dialogVisible = false">{{
-						getLocale('form.cancel')
-					}}</Button>
-					<Button type="primary" @click="onDialogffirm">{{
-						getLocale('form.confirm')
-					}}</Button>
-				</span>
-			</template>
-		</Dialog>
-	</div>
-</template>
-<script lang="ts" setup>
-	import {
-		dataProps,
-		dataEmits,
-		dataExpose,
-		dataSlot,
-		type ModelValue,
-	} from './data';
-	import { useCssName, useLocale } from '../../../hooks/index';
-	import Input from '../../input/index';
-	import Dialog from '../../dialog/index';
-	import Button from '../../button/index';
-	import { computed, ref, nextTick } from 'vue';
-	// 获取国际化字段
-	const { getLocale } = useLocale();
-	// 样式设置方法
-	const cs = useCssName('select-dialog');
-	const props = defineProps(dataProps);
-	const emit = defineEmits(dataEmits);
-
-	const value = computed({
-		get() {
-			return props.modelValue;
-		},
-		set(value) {
-			emit('update:modelValue', value);
-		},
-	});
-
-	const inputName = computed(() => {
-		if (props.value) {
-			return props.value
-				.map((v) => {
-					return props.setInputName
-						? props.setInputName(v)
-						: props.getName(v);
-				})
-				.join(props.separator);
-		} else {
-			return '';
-		}
-	});
-
-	/**
-	 * 弹框是否显示
-	 */
-	const dialogVisible = ref(false);
-
-	/**
-	 * 清除
-	 */
-	function onClear() {
-		value.value = [];
-		nextTick(() => {
-			emit('update:modelValue', value.value);
-			emit('change', value.value);
-		});
-	}
-
-	/**
-	 * 删除数据
-	 * @param {*} key
-	 * @param {*} index
-	 */
-	function onDelete(key: ModelValue) {
-		if (value.value) {
-			value.value = value.value.filter((o) => {
-				return o != key;
-			});
-		}
-		nextTick(() => {
-			emit('update:modelValue', value.value);
-			emit('change', value.value);
-		});
-	}
-
-	function onDialogffirm() {
-		if (value.value) {
-			emit('confirm', [...value.value]);
-		} else {
-			emit('confirm', []);
-		}
-		dialogVisible.value = false;
-		emit('dialog', dialogVisible.value);
-	}
-
-	function onClick() {
-		if (!props.disabled) {
-			if (props.value) {
-				value.value = [...props.value];
-			} else {
-				value.value = [];
-			}
-			dialogVisible.value = true;
-			emit('update:modelValue', value.value);
-			emit('dialog', dialogVisible.value);
-		}
-	}
-
-	defineExpose({
-		...dataExpose,
-		inputName,
-	});
-</script>
-<style lang="scss"></style>

package/dist/components/select-popover/index.ts

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

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

@@ -1,51 +0,0 @@
-import type { ExtractPropTypes } from 'vue';
-
-import { buildProps } from '../../../utils/index';
-
-export const dataProps = buildProps({
-	readonly: {
-		type: Boolean,
-	},
-	disabled: {
-		type: Boolean,
-	},
-	clearable: {
-		type: Boolean,
-	},
-	/**
-	 * @props { } modelValue 选择值v-model
-	 */
-	modelValue: {
-		type: String,
-	},
-});
-
-export type DataProps = ExtractPropTypes<typeof dataProps>;
-
-/**
- * @emits change (val:[String, Array])
- * 选择的时间
- */
-export const dataEmits = [
-	'update:modelValue',
-	'focus',
-	'blur',
-	'change',
-	'input',
-];
-
-export type DataEmits = typeof dataEmits;
-
-/**
- * @slot default 默认插槽
- */
-export const dataSlot = {
-	iconSelect: 'icon-select',
-	default: 'default',
-};
-
-/**
- * @expose setValue (val:<string>设置的数据 )
- * 设置值
- */
-export const dataExpose = {};