@fangzhongya/fang-ui 0.0.13 → 0.0.15

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

@@ -1,4 +1,5 @@
 import { Icons } from './data';
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Partial<Record<string, (_: {}) => any>>;
@@ -6,7 +7,7 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+declare const __VLS_component: DefineComponent<ExtractPropTypes<{
     dialogClass: {
         type: StringConstructor;
     };
@@ -33,7 +34,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: StringConstructor;
         default: string;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
     dialogClass: {
         type: StringConstructor;
     };
@@ -67,7 +68,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         [key: string]: Icons;
         [key: number]: Icons;
     };
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -16,6 +16,7 @@ import "@fangzhongya/utils/basic/object/objValue";
 import "../../../hooks/global-config/index.js";
 import { useLocale } from "../../../hooks/locale/index.js";
 import "../../../utils/vues/getBuildProps.js";
+import "../../../utils/vues/withInstall.js";
 import "@fangzhongya/utils/css/setObjStyle";
 import "@fangzhongya/utils/css/getCss";
 import { Icon } from "../../icon/index.js";

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

@@ -0,0 +1,244 @@
+<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.d.ts

@@ -1,5 +1,6 @@
+import { CreateComponentPublicInstanceWithMixins, ExtractPropTypes, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps, Plugin } from 'vue';
 declare const Iframe: {
-    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< ExtractPropTypes<{
         url: {
             type: StringConstructor;
             required: boolean;
@@ -24,20 +25,20 @@ declare const Iframe: {
             type: BooleanConstructor;
             default: boolean;
         };
-    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+    }>> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
         label: string;
         width: string | number;
         height: string | number;
         frameborder: number;
         labelHidden: boolean;
-    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+    }, true, {}, {}, GlobalComponents, GlobalDirectives, string, {}, HTMLDivElement, ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<import('vue').ExtractPropTypes<{
+    }, Readonly< ExtractPropTypes<{
         url: {
             type: StringConstructor;
             required: boolean;
@@ -72,7 +73,7 @@ declare const Iframe: {
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+} & ComponentOptionsBase<Readonly< ExtractPropTypes<{
     url: {
         type: StringConstructor;
         required: boolean;
@@ -97,11 +98,11 @@ declare const Iframe: {
         type: BooleanConstructor;
         default: boolean;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+}>> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
     label: string;
     width: string | number;
     height: string | number;
     frameborder: number;
     labelHidden: boolean;
-}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & import('vue').Plugin;
+}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & Plugin;
 export { Iframe, Iframe as default };

package/dist/components/iframe/index.ts

@@ -0,0 +1,7 @@
+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.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const buildProps = require("../../../utils/vues/buildProps.cjs");
 require("vue");
 require("@fangzhongya/utils/basic/string/splitUpper");
 require("@fangzhongya/utils/basic/array/isArray");
@@ -14,7 +13,9 @@ require("@fangzhongya/utils/name/humpToLine");
 require("@fangzhongya/utils/basic/object/deepCopy");
 require("@fangzhongya/utils/basic/Array/toggleArray");
 require("@fangzhongya/utils/basic/object/objValue");
+const buildProps = require("../../../utils/vues/buildProps.cjs");
 require("../../../utils/vues/getBuildProps.cjs");
+require("../../../utils/vues/withInstall.cjs");
 require("@fangzhongya/utils/css/setObjStyle");
 require("@fangzhongya/utils/css/getCss");
 const dataProps = buildProps.buildProps({

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

@@ -1,4 +1,3 @@
-import { buildProps } from "../../../utils/vues/buildProps.js";
 import "vue";
 import "@fangzhongya/utils/basic/string/splitUpper";
 import "@fangzhongya/utils/basic/array/isArray";
@@ -12,7 +11,9 @@ import "@fangzhongya/utils/name/humpToLine";
 import "@fangzhongya/utils/basic/object/deepCopy";
 import "@fangzhongya/utils/basic/Array/toggleArray";
 import "@fangzhongya/utils/basic/object/objValue";
+import { buildProps } from "../../../utils/vues/buildProps.js";
 import "../../../utils/vues/getBuildProps.js";
+import "../../../utils/vues/withInstall.js";
 import "@fangzhongya/utils/css/setObjStyle";
 import "@fangzhongya/utils/css/getCss";
 const dataProps = buildProps({

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

@@ -0,0 +1,72 @@
+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.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const require$$0 = require("vue");
+const vue = require("vue");
 const data = require("./data.cjs");
 const index$1 = require("../../../hooks/cssname/index.cjs");
 require("@fangzhongya/utils/basic/string/splitUpper");
@@ -23,7 +23,7 @@ const _hoisted_1 = {
   class: "iframe-titleClass"
 };
 const _hoisted_2 = ["width", "height", "frameborder", "src"];
-const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: data.dataProps,
   emits: data.dataEmits,
@@ -36,14 +36,14 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
       ...data.dataExpose
     });
     return (_ctx, _cache) => {
-      return require$$0.openBlock(), require$$0.createElementBlock("div", {
-        class: require$$0.normalizeClass(require$$0.unref(cs).z())
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(vue.unref(cs).z())
       }, [
-        !props.labelHidden ? (require$$0.openBlock(), require$$0.createElementBlock("p", _hoisted_1, [
-          _cache[0] || (_cache[0] = require$$0.createElementVNode("span", { class: "iframe-form-td-title-circle" }, null, -1)),
-          require$$0.createTextVNode(" " + require$$0.toDisplayString(props.label), 1)
-        ])) : require$$0.createCommentVNode("", true),
-        require$$0.createElementVNode("iframe", require$$0.mergeProps(require$$0.unref(attrs), {
+        !props.labelHidden ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_1, [
+          _cache[0] || (_cache[0] = vue.createElementVNode("span", { class: "iframe-form-td-title-circle" }, null, -1)),
+          vue.createTextVNode(" " + vue.toDisplayString(props.label), 1)
+        ])) : vue.createCommentVNode("", true),
+        vue.createElementVNode("iframe", vue.mergeProps(vue.unref(attrs), {
           width: props.width,
           height: props.height,
           frameborder: props.frameborder,

package/dist/components/iframe/src/index.d.ts

@@ -1,4 +1,5 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<ExtractPropTypes<{
     url: {
         type: StringConstructor;
         required: boolean;
@@ -23,7 +24,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
     url: {
         type: StringConstructor;
         required: boolean;
@@ -54,5 +55,5 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     height: string | number;
     frameborder: number;
     labelHidden: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

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

@@ -0,0 +1,31 @@
+<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>