@fangzhongya/fang-ui 0.0.21 → 0.0.22

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

@@ -1,59 +0,0 @@
-import type { ExtractPropTypes } from 'vue';
-
-import { buildProps } from '../../../utils/index';
-import { definePropType } from '../../../utils/index';
-
-type Flip = 'horizontal' | 'vertical' | 'both' | '';
-
-export const dataProps = buildProps({
-	/**
-	 * @props { String} name= ( )
-	 * 图标名称
-	 */
-	name: {
-		type: String,
-		default: '',
-	},
-	/**
-	 * @props { String} type= ( )
-	 * 图标类型
-	 */
-	type: {
-		type: String,
-	},
-	/**
-	 * @props { String, Number } size=[] ( )
-	 * 图标大小
-	 */
-	size: {
-		type: [String, Number],
-	},
-	runtime: {
-		type: Boolean,
-		default: false,
-	},
-	flip: {
-		type: definePropType<Flip>(String),
-		default: '',
-	},
-	rotate: {
-		type: Number,
-		default: 0,
-	},
-});
-
-export type DataProps = ExtractPropTypes<typeof dataProps>;
-
-/**
- */
-export const dataEmits = [];
-
-export type DataEmits = typeof dataEmits;
-
-/**
- */
-export const dataSlot = {};
-
-/**
- */
-export const dataExpose = {};

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

@@ -1,167 +0,0 @@
-<template>
-	<i
-		v-if="outputType === 'css'"
-		:ctype="outputType"
-		:class="[cs.z(), outputName]"
-		style="
-			display: inline-flex;
-			align-items: center;
-			justify-content: center;
-		"
-		:style="transformStyle"
-	/>
-	<i
-		v-else-if="outputType === 'font'"
-		:ctype="outputType"
-		:class="[cs.z(), outputName]"
-		style="
-			display: inline-flex;
-			align-items: center;
-			justify-content: center;
-		"
-		:style="transformStyle"
-	/>
-	<img
-		v-else-if="outputType === 'img'"
-		:ctype="outputType"
-		:class="[cs.z()]"
-		style="
-			border: 0;
-			display: inline-flex;
-			align-items: center;
-			object-fit: contain;
-			justify-content: center;
-		"
-		:style="transformStyle"
-		:src="outputName"
-	/>
-	<template
-		v-else-if="outputType === 'str'"
-		:ctype="outputType"
-		:class="[cs.z()]"
-		:style="transformStyle"
-		v-html="outputName"
-	></template>
-	<component
-		v-else-if="outputType === 'com'"
-		:ctype="outputType"
-		:class="[cs.z()]"
-		:style="transformStyle"
-		:is="outputName"
-	></component>
-	<svg
-		v-else
-		:ctype="outputType"
-		:class="[cs.z()]"
-		:style="transformStyle"
-		aria-hidden="true"
-	>
-		<use :xlink:href="`#icon-${outputName}`" />
-	</svg>
-</template>
-<script lang="ts" setup>
-	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
-	import { useCssName, useLocale } from '../../../hooks/index';
-	import { computed } from 'vue';
-	// 获取国际化字段
-	const { getLocale } = useLocale();
-	// 样式设置方法
-	const cs = useCssName('icon');
-	const props = defineProps(dataProps);
-	const emit = defineEmits(dataEmits);
-	const reg = /<svg([^>]*)>((.|\n|\r|\t)*)<\/svg>/g;
-	const outputType = computed(() => {
-		if (props.type) {
-			return props.type;
-		} else {
-			const name = props.name || '';
-			if (reg.test(name)) {
-				return 'str';
-			} else if (name.startsWith('i-')) {
-				return 'css';
-			} else if (name.startsWith('f-')) {
-				return 'font';
-			} else if (name.startsWith('c-')) {
-				return 'com';
-			} else if (isImg(name)) {
-				return 'img';
-			} else {
-				return 'custom';
-			}
-		}
-	});
-
-	const transformStyle = computed(() => {
-		const style = [];
-		if (props.flip !== '') {
-			switch (props.flip) {
-				case 'horizontal':
-					style.push('rotateY(180deg)');
-					break;
-				case 'vertical':
-					style.push('rotateX(180deg)');
-					break;
-				case 'both':
-					style.push('rotateX(180deg)');
-					style.push('rotateY(180deg)');
-					break;
-			}
-		}
-		if (props.rotate !== 0) {
-			style.push(`rotate(${props.rotate % 360}deg)`);
-		}
-		const styleObj: {
-			[key: string]: string | number;
-		} = {};
-		styleObj.transform = style.join(' ');
-		if (props.size) {
-			styleObj.width = props.size;
-			styleObj.height = props.size;
-			styleObj['font-size'] = props.size;
-		}
-		return styleObj;
-	});
-
-	const outputName = computed(() => {
-		const name = props.name || '';
-		if (outputType.value == 'str') {
-			const rs = reg.exec(name);
-			if (rs && rs.length > 0) {
-				return rs[0];
-			} else {
-				return `<svg viewBox="0 0 ${props.size || 24} ${
-					props.size || 24
-				}" width="${props.size}" height="${
-					props.size
-				}" xmlns="http://www.w3.org/2000/svg">${name}</svg>`;
-			}
-		} else if (name.startsWith('f-')) {
-			return name.replace(/^f-/, '');
-		} else if (name.startsWith('c-')) {
-			return name.replace(/^c-/, '');
-		}
-		return name;
-	});
-
-	function isImg(name?: string) {
-		if (name) {
-			if (name.startsWith('data:')) {
-				return true;
-			} else if (name.startsWith('/')) {
-				return true;
-			} else if (name.startsWith('./')) {
-				return true;
-			} else if (name.startsWith('../')) {
-				return true;
-			} else if (name.includes('://')) {
-				return true;
-			}
-		}
-		return false;
-	}
-
-	defineExpose({
-		...dataExpose,
-	});
-</script>
-<style lang="scss"></style>

package/dist/components/icon-picker/index.ts

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

package/dist/components/icon-picker/src/data.ts

@@ -1,121 +0,0 @@
-import type { ExtractPropTypes } from 'vue';
-
-import { buildProps } from '../../../utils/index';
-import { definePropType } from '../../../utils/index';
-
-export type IconsValueObj =
-	| {
-			// 名称
-			name?: string;
-			// 值
-			body: string;
-			// 类型
-			type?: string;
-
-			width?: string | number;
-
-			height?: string | number;
-	  }
-	| string;
-
-export type IconsValue = {
-	[key: string | number]: IconsValueObj;
-};
-
-type IconsInfo = {
-	name: string;
-	[key: string]: any;
-};
-
-export type Icons = {
-	// 前缀;
-	prefix: string;
-	// 名称
-	info: string | IconsInfo;
-	// 值
-	icons: IconsValue;
-};
-
-export const dataProps = buildProps({
-	/**
-	 * @props { String } dialogClass= ( )
-	 * Dialog 的自定义类名
-	 */
-	dialogClass: {
-		type: String,
-	},
-	/**
-	 * @props { String, Number } dialogWidth= ( )
-	 * Dialog 的宽度
-	 */
-	dialogWidth: {
-		type: [String, Number],
-	},
-	/**
-	 * @props { String } modelValue= ( )
-	 * 图标名称
-	 */
-	modelValue: {
-		type: [String],
-	},
-	/**
-	 * @props { String, Number } size=[] ( )
-	 * 图标大小
-	 */
-	size: {
-		type: [String, Number],
-		default() {
-			return '30px';
-		},
-	},
-	/**
-	 * @props { Array } icons=[] ( )
-	 * 图标名称
-	 */
-	icons: {
-		type: Object as () => {
-			[key: string | number]: Icons;
-		},
-		default() {
-			return {};
-		},
-	},
-	/**
-	 * @props { String} type= ( )
-	 * 图标类型
-	 */
-	type: {
-		type: String,
-	},
-	/**
-	 * @props { String } separator=':' ( )
-	 * 拼接值
-	 */
-	separator: {
-		type: String,
-		default: ':',
-	},
-});
-
-export type DataProps = ExtractPropTypes<typeof dataProps>;
-
-/**
- * @emits change (val:[String, Array])
- * 选择的时间
- */
-export const dataEmits = ['update:modelValue'];
-
-export type DataEmits = typeof dataEmits;
-
-/**
- * @slot default 默认插槽
- */
-export const dataSlot = {
-	default: 'default',
-};
-
-/**
- * @expose setValue (val:<string>设置的数据 )
- * 设置值
- */
-export const dataExpose = {};

package/dist/components/icon-picker/src/index.vue

@@ -1,244 +0,0 @@
-<template>
-	<div :class="cs.z()">
-		<span :class="cs.z('span')" @click="onShow">
-			<slot :name="dataSlot.default">
-				<Icon
-					:type="props.type"
-					:size="props.size"
-					:name="props.modelValue"
-				/>
-			</slot>
-		</span>
-		<Dialog
-			v-model="dialogVisible"
-			:width="props.dialogWidth"
-			:title="getLocale('iconpicker')"
-			:show-close="true"
-			:class="props.dialogClass"
-		>
-			<div :class="[cs.z('dialog'), cs.z('syys')]">
-				<div :class="cs.z('dialog-search')">
-					<div :class="cs.z('dialog-input')">
-						<Input
-							:placeholder="getLocale('search')"
-							v-model="search"
-							clearable
-						>
-							<template #prefix>
-								<Icon name="ep:search" />
-							</template>
-						</Input>
-					</div>
-					<div :class="cs.z('dialog-delete')">
-						<span v-if="value" :title="value">
-							<Icon
-								:type="props.type"
-								:size="props.size"
-								:name="value"
-							/>
-						</span>
-					</div>
-				</div>
-				<div :class="cs.z('dialog-body')">
-					<Tabs
-						:class="cs.z('dialog-tabs')"
-						v-model="activeName"
-						@tab-change="handleTabChange"
-					>
-						<TabPane
-							v-for="(item, index) in props.icons"
-							:key="item.prefix"
-							:name="item.prefix"
-						>
-							<template #label>
-								<div :class="cs.z('dialog-tabs-lable')">
-									<div
-										:title="setTabsTotal(item)"
-										:class="cs.z('dialog-tabs-name')"
-									>
-										{{ setTabsLabel(item) }}
-									</div>
-									<!-- <div :class="cs.z('dialog-tabs-total')">
-										{{ setTabsTotal(item) }}
-									</div> -->
-								</div>
-							</template>
-						</TabPane>
-					</Tabs>
-					<div :class="cs.z('dialog-list')">
-						<div
-							v-for="(icon, key) in currentIconList"
-							:class="cs.z('dialog-list-item')"
-							@click="chooseIcon(icon, String(key))"
-						>
-							<div
-								:title="setName(icon, String(key))"
-								:class="[
-									cs.z('dialog-list-icon'),
-									setName(icon, String(key)) == value
-										? 'active'
-										: '',
-								]"
-							>
-								<Icon
-									:type="props.type"
-									:size="props.size"
-									:name="setName(icon, String(key))"
-								/>
-							</div>
-							<!-- <span :class="cs.z('dialog-list-name')">{{
-								setName(icon, String(key))
-							}}</span> -->
-						</div>
-					</div>
-					<div :class="cs.z('tbxzqbotton')">
-						<Button @click="removeIcon"
-							>{{ getLocale('form.delete') }}
-						</Button>
-						<Button @click="onConfirm" type="primary"
-							>{{ getLocale('form.confirm') }}
-						</Button>
-					</div>
-				</div>
-			</div>
-		</Dialog>
-	</div>
-</template>
-<script lang="ts" setup>
-	import {
-		dataProps,
-		dataEmits,
-		dataExpose,
-		dataSlot,
-		type Icons,
-		type IconsValue,
-		type IconsValueObj,
-	} from './data';
-	import { useCssName, useLocale } from '../../../hooks/index';
-	import Icon from '../../icon/index';
-	import Input from '../../input/index';
-	import Tabs from '../../tabs/index';
-	import TabPane from '../../tab-pane/index';
-	import Dialog from '../../dialog/index';
-	import Button from '../../button/index';
-	import { ref, computed } from 'vue';
-	// 获取国际化字段
-	const { getLocale } = useLocale();
-	// 样式设置方法
-	const cs = useCssName('icon-picker');
-	const props = defineProps(dataProps);
-	const emit = defineEmits(dataEmits);
-	let ac = '';
-	if (props.icons) {
-		if (props.icons instanceof Array) {
-			ac = props.icons[0]?.prefix;
-		} else {
-			const k = Object.keys(props.icons)[0];
-			ac = props.icons[k]?.prefix;
-		}
-	}
-	const activeName = ref(ac);
-	const dialogVisible = ref(false);
-	const search = ref('');
-	const value = ref('');
-
-	const currentIconList = computed(() => {
-		let arr: IconsValue = {};
-		if (activeName.value) {
-			if (props.icons instanceof Array) {
-				for (let index = 0; index < props.icons.length; index++) {
-					const element = props.icons[index];
-					const name = element.prefix;
-					if (name == activeName.value) {
-						arr = element?.icons || [];
-						break;
-					}
-				}
-			} else {
-				arr = props.icons[activeName.value]?.icons || [];
-			}
-		}
-		if (search.value) {
-			if (arr instanceof Array) {
-				return arr.filter((o) => {
-					const name = setName(o, '');
-					return name.includes(search.value);
-				});
-			} else {
-				const obj = arr;
-				const rs: {
-					[key: string]: IconsValueObj;
-				} = {};
-				Object.keys(arr).forEach((key) => {
-					const v = obj[key];
-					const name = setName(v, key);
-					if (name.includes(search.value)) {
-						rs[key] = v;
-					}
-				});
-				return rs;
-			}
-		} else {
-			return arr;
-		}
-	});
-
-	function onShow() {
-		value.value = props.modelValue || '';
-		dialogVisible.value = true;
-	}
-
-	function setTabsLabel(obj: Icons) {
-		if (obj.info) {
-			if (typeof obj.info == 'object') {
-				return obj.info.name;
-			} else {
-				return obj.info;
-			}
-		} else {
-			return obj.prefix;
-		}
-	}
-
-	function setTabsTotal(obj: Icons) {
-		const vs = obj.icons;
-		if (typeof vs == 'object') {
-			return Object.keys(vs).length + '';
-		} else {
-			return (vs as string).length + '';
-		}
-	}
-
-	function setName(obj: IconsValueObj, key: string) {
-		if (typeof obj == 'object') {
-			return activeName.value + props.separator + (obj.name || key);
-		} else {
-			return activeName.value + props.separator + (obj || key);
-		}
-	}
-
-	function setNameType(obj: IconsValueObj, key: string) {
-		if (typeof obj == 'object') {
-			return obj.body || obj.name || key;
-		} else {
-			return obj;
-		}
-	}
-
-	function handleTabChange() {}
-
-	function onConfirm() {
-		dialogVisible.value = false;
-		emit('update:modelValue', value.value);
-	}
-	function chooseIcon(val: IconsValueObj, key: string) {
-		value.value = setName(val, key);
-	}
-	function removeIcon() {
-		value.value = '';
-	}
-	defineExpose({
-		...dataExpose,
-	});
-</script>
-<style lang="scss"></style>

package/dist/components/iframe/index.ts

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

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

@@ -1,72 +0,0 @@
-import type { ExtractPropTypes } from 'vue';
-
-import { buildProps } from '../../../utils/index';
-
-export const dataProps = buildProps({
-	/**
-	 * @props { String} url='' ( )
-	 * 嵌入url地址
-	 */
-	url: {
-		type: String,
-		required: true,
-	},
-	/**
-	 * @props { String, Number} width='100%' ( )
-	 * iframe 的宽度
-	 */
-	width: {
-		type: [String, Number],
-		default: '100%',
-	},
-	/**
-	 * @props { String, Number} height='100%' ( )
-	 * iframe 的高度
-	 */
-	height: {
-		type: [String, Number],
-		default: '100%',
-	},
-	/**
-	 * @props { Number } frameborder=0 ( 0: 不显示, 1: 显示)
-	 * 否显示框架周围的边框。
-	 */
-	frameborder: {
-		type: Number,
-		default: 0,
-	},
-	/**
-	 * @props { String }
-	 * 标题名称
-	 */
-	label: {
-		type: String,
-		default: '',
-	},
-	/**
-	 * @props { Boolean }
-	 * 标题是否隐藏
-	 */
-	labelHidden: {
-		type: Boolean,
-		default: false,
-	},
-});
-
-export type DataProps = ExtractPropTypes<typeof dataProps>;
-
-/**
- * @emits load ()
- * 加载完成时触发事件
- */
-export const dataEmits = [];
-
-export type DataEmits = typeof dataEmits;
-
-/**
- */
-export const dataSlot = {};
-
-/**
- */
-export const dataExpose = {};

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

@@ -1,31 +0,0 @@
-<template>
-	<div :class="cs.z()">
-		<p v-if="!props.labelHidden" class="iframe-titleClass">
-			<span class="iframe-form-td-title-circle"></span>
-			{{ props.label }}
-		</p>
-		<iframe
-			v-bind="attrs"
-			:width="props.width"
-			:height="props.height"
-			:frameborder="props.frameborder"
-			:src="props.url"
-		></iframe>
-	</div>
-</template>
-<script lang="ts" setup>
-	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
-	import { useCssName, useLocale, useInherit } from '../../../hooks/index';
-	// 获取国际化字段
-	const { getLocale } = useLocale();
-	// 样式设置方法
-	const cs = useCssName('iframe');
-	const attrs = useInherit();
-	const props = defineProps(dataProps);
-	const emit = defineEmits(dataEmits);
-
-	defineExpose({
-		...dataExpose,
-	});
-</script>
-<style lang="scss" scoped></style>