@fangzhongya/fang-ui 0.0.14 → 0.0.16

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

@@ -0,0 +1,30 @@
+<template>
+	<div :class="[cs.z()]" v-bind="attrs.root">
+		<ElPopover v-bind="attrs.assem" ref="refEl">
+			<template v-for="k in Object.keys(slots)" v-slot:[k] :key="k">
+				<slot :name="k"></slot>
+			</template>
+		</ElPopover>
+	</div>
+</template>
+<script lang="ts" setup>
+	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
+	import { useCssName, useLocale, useInherit } from '../../../hooks/index';
+	import { ref, useAttrs, useSlots } from 'vue';
+	import type { Slots } from 'vue';
+	import { ElPopover } from 'element-plus';
+	const refEl = ref();
+	const attrs = useInherit();
+	const slots: Slots = useSlots();
+	// 样式设置方法
+	const cs = useCssName('popover');
+	// 获取国际化字段
+	const { getLocale } = useLocale();
+	const props = defineProps(dataProps);
+	const emit = defineEmits(dataEmits);
+	defineExpose({
+		...dataExpose,
+		refEl,
+	});
+</script>
+<style lang="scss"></style>

package/dist/components/popup/index.css

@@ -1,23 +1,23 @@
 :root {
-  --el-icon-picker-on: rgb(91, 189, 246);
-  --el-icon-picker-border: #eee;
-  --el-color-primary: #409eff;
-  --el-bag-primary: #409eff;
-  --el-bag-primary-text: #fff;
-  --el-border: #eee;
-  --el-layout-panel-gap: 10px;
-  --el-layout-panel-padding: 20px;
-  --el-layout-form-item-padding-right: var(
-  	--el-layout-panel-gap
+  --icon-picker-on: rgb(91, 189, 246);
+  --icon-picker-border: #eee;
+  --color-primary: #409eff;
+  --bag-primary: #409eff;
+  --bag-primary-text: #fff;
+  --border: #eee;
+  --layout-panel-gap: 10px;
+  --layout-panel-padding: 20px;
+  --layout-form-item-padding-right: var(
+  	--layout-panel-gap
   );
-  --el-g-main-bg: var(--el-bg-color-page);
+  --g-main-bg: var(--bg-color-page);
 }
 
-.el-com {
+.com {
   font-size: 20px;
 }
 
-.el-box-mask {
+.box-mask {
   display: block;
   opacity: 0.5;
   z-index: 0;
@@ -29,7 +29,7 @@
   background: rgba(2, 28, 39, 0.4);
 }
 
-.el-box-title {
+.box-title {
   padding: 10px;
   position: relative;
   background-color: #467ddc;
@@ -37,23 +37,23 @@
   align-items: center;
   display: flex;
 }
-.el-box-title-name {
+.box-title-name {
   flex: 1;
 }
-.el-box-title-close {
+.box-title-close {
   right: 10px;
   font-size: 18px;
   display: flex;
   align-items: center;
 }
-.el-box-title-close i {
+.box-title-close i {
   width: 20px;
   height: 20px;
   margin: 0 4px;
   cursor: pointer;
 }
 
-.el-popup {
+.popup {
   position: fixed;
   width: 100vw;
   height: 100vh;
@@ -61,7 +61,7 @@
   top: 0;
   left: 0;
 }
-.el-popup-body {
+.popup-body {
   position: absolute;
   top: 30%;
   left: 30%;
@@ -72,18 +72,18 @@
   display: flex;
   flex-direction: column;
 }
-.el-popup-body-div {
+.popup-body-div {
   flex: 1;
   overflow-y: auto;
   padding: 20px;
 }
-.el-popup.el-popup-center {
+.popup.popup-center {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
-.el-popup.el-popup-center .el-popup-body {
+.popup.popup-center .popup-body {
   position: relative;
   width: initial;
   top: initial;
@@ -93,7 +93,7 @@
   min-height: 20%;
   max-height: 90%;
 }
-.el-popup.el-popup-center .el-popup-body-div {
+.popup.popup-center .popup-body-div {
   display: flex;
   flex-direction: column;
   align-items: center;

package/dist/components/popup/index.d.ts

@@ -1,5 +1,6 @@
+import { CreateComponentPublicInstanceWithMixins, ExtractPropTypes, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps, Plugin } from 'vue';
 declare const Popup: {
-    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< ExtractPropTypes<{
         drag: {
             type: (BooleanConstructor | StringConstructor)[];
             default: string;
@@ -40,7 +41,7 @@ declare const Popup: {
         boxClass: {
             type: StringConstructor;
         };
-    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+    }>> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
         self: boolean;
         mask: boolean;
         modelValue: boolean;
@@ -50,14 +51,14 @@ declare const Popup: {
         often: boolean;
         local: boolean;
         maskClose: boolean;
-    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+    }, true, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<import('vue').ExtractPropTypes<{
+    }, Readonly< ExtractPropTypes<{
         drag: {
             type: (BooleanConstructor | StringConstructor)[];
             default: string;
@@ -112,7 +113,7 @@ declare const Popup: {
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+} & ComponentOptionsBase<Readonly< ExtractPropTypes<{
     drag: {
         type: (BooleanConstructor | StringConstructor)[];
         default: string;
@@ -153,7 +154,7 @@ declare const Popup: {
     boxClass: {
         type: StringConstructor;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+}>> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
     self: boolean;
     mask: boolean;
     modelValue: boolean;
@@ -163,7 +164,7 @@ declare const Popup: {
     often: boolean;
     local: boolean;
     maskClose: boolean;
-}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
     $slots: Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: {}) => any>>;
-}) & import('vue').Plugin;
+}) & Plugin;
 export { Popup, Popup as default };

package/dist/components/popup/index.scss

@@ -1,7 +1,7 @@
-// @use '../common.scss' as *;
+// @use '../../../common.scss' as *;
 
-// @use '../box-mask/src/index.scss' as *;
-// @use '../box-title/src/index.scss' as *;
+// @use '../../box-mask/src/index.scss' as *;
+// @use '../../box-title/src/index.scss' as *;
 
 @use '../css/common.scss' as *;
 @use '../box-mask/index.scss' as *;

package/dist/components/popup/index.ts

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

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

@@ -0,0 +1,79 @@
+import type { ExtractPublicPropTypes } from 'vue';
+
+import { buildProps } from '../../../utils/vues/buildProps';
+
+import {
+	dataProps as BoxProps,
+	dataEmits as BoxEmits,
+	dataExpose as BoxExpose,
+	dataSlot as BoxSlot,
+} from '../../box/src/data';
+
+export const dataProps = buildProps({
+	...BoxProps,
+	/**
+	 * @props { String, Boolean } drag='.com-title-name' ( ) 可拖拽的元素样式 为空字符串就不拖拽
+	 */
+	drag: {
+		type: [String, Boolean],
+		default: '.com-title-name',
+	},
+	/**
+	 * @props { } drag= ( ) 是否支持改变大小
+	 */
+	adjust: {
+		type: Boolean,
+	},
+	/**
+	 * @props { } mask=true ( ) 是否要遮罩
+	 */
+	mask: {
+		type: Boolean,
+		default: true,
+	},
+	/**
+	 * @props { } maskClose=true ( ) 是否要遮罩是否关闭
+	 */
+	maskClose: {
+		type: Boolean,
+		default: true,
+	},
+
+	/**
+	 * @props { } self=false ( ) 是否要自适应 如果为true 将不支持拖拽和改变大小功能
+	 */
+	self: {
+		type: Boolean,
+		default: false,
+	},
+	/**
+	 * @props { Boolean } local= ( ) 是否启动弹框模式
+	 */
+	local: {
+		type: Boolean,
+	},
+	/**
+	 * @props { Boolean } often= ( ) 是否时时变化
+	 */
+	often: {
+		type: Boolean,
+	},
+});
+
+export type DataProps = ExtractPublicPropTypes<typeof dataProps>;
+
+/**
+ */
+export const dataEmits = [...BoxEmits];
+
+export type DataEmits = typeof dataEmits;
+
+/**
+ */
+export const dataSlot = {
+	...BoxSlot,
+};
+
+/**
+ */
+export const dataExpose = { ...BoxExpose };

package/dist/components/popup/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");
 const index = require("../../../hooks/locale/index.cjs");
@@ -9,12 +9,12 @@ const index$3 = require("../../box-mask/index.cjs");
 const index$2 = require("../../box-teleport/index.cjs");
 const index$6 = require("../../../directives/adjust/index.cjs");
 const index$5 = require("../../../directives/drag/index.cjs");
-const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: data.dataProps,
   emits: data.dataEmits,
   setup(__props, { expose: __expose, emit: __emit }) {
-    const isInit = require$$0.shallowRef(false);
+    const isInit = vue.shallowRef(false);
     index.useLocale();
     const cs = index$1.useCssName("popup");
     const props = __props;
@@ -24,7 +24,7 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
       often: props.often,
       all: { position: true }
     } : {};
-    require$$0.watch(
+    vue.watch(
       () => props.modelValue,
       () => {
         if (props.modelValue) {
@@ -46,49 +46,49 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
       ...data.dataExpose
     });
     return (_ctx, _cache) => {
-      return props.local ? (require$$0.openBlock(), require$$0.createElementBlock("div", {
+      return props.local ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 0,
-        class: require$$0.normalizeClass(require$$0.unref(cs).z("local"))
+        class: vue.normalizeClass(vue.unref(cs).z("local"))
       }, [
-        require$$0.renderSlot(_ctx.$slots, require$$0.unref(data.dataSlot).default)
-      ], 2)) : (require$$0.openBlock(), require$$0.createBlock(require$$0.unref(index$2.BoxTeleport), {
+        vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).default)
+      ], 2)) : (vue.openBlock(), vue.createBlock(vue.unref(index$2.BoxTeleport), {
         key: 1,
         disabled: props.disabled,
         to: props.to
       }, {
-        default: require$$0.withCtx(() => [
-          isInit.value ? require$$0.withDirectives((require$$0.openBlock(), require$$0.createElementBlock("div", {
+        default: vue.withCtx(() => [
+          isInit.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
-            class: require$$0.normalizeClass([require$$0.unref(cs).z(), props.self ? "popup-center" : ""])
+            class: vue.normalizeClass([vue.unref(cs).z(), props.self ? "popup-center" : ""])
           }, [
-            props.mask ? (require$$0.openBlock(), require$$0.createBlock(require$$0.unref(index$3.BoxMask), {
+            props.mask ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.BoxMask), {
               key: 0,
               onClick: onMaskClose,
-              cssprefix: require$$0.unref(cs).z()
-            }, null, 8, ["cssprefix"])) : require$$0.createCommentVNode("", true),
-            require$$0.withDirectives((require$$0.openBlock(), require$$0.createElementBlock("div", {
-              class: require$$0.normalizeClass(require$$0.unref(cs).z("body"))
+              cssprefix: vue.unref(cs).z()
+            }, null, 8, ["cssprefix"])) : vue.createCommentVNode("", true),
+            vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+              class: vue.normalizeClass(vue.unref(cs).z("body"))
             }, [
-              require$$0.renderSlot(_ctx.$slots, require$$0.unref(data.dataSlot).title, {}, () => [
-                require$$0.createVNode(require$$0.unref(index$4.BoxTitle), {
-                  cssprefix: require$$0.unref(cs).z(),
+              vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).title, {}, () => [
+                vue.createVNode(vue.unref(index$4.BoxTitle), {
+                  cssprefix: vue.unref(cs).z(),
                   onClose,
                   title: props.title
                 }, null, 8, ["cssprefix", "title"])
               ]),
-              require$$0.createElementVNode("div", {
-                class: require$$0.normalizeClass(require$$0.unref(cs).z("body-div"))
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(vue.unref(cs).z("body-div"))
               }, [
-                require$$0.renderSlot(_ctx.$slots, require$$0.unref(data.dataSlot).default)
+                vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).default)
               ], 2),
-              require$$0.renderSlot(_ctx.$slots, require$$0.unref(data.dataSlot).footer)
+              vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).footer)
             ], 2)), [
-              [require$$0.unref(index$5.default), drag],
-              [require$$0.unref(index$6.default), require$$0.unref(adjust)]
+              [vue.unref(index$5.default), drag],
+              [vue.unref(index$6.default), vue.unref(adjust)]
             ])
           ], 2)), [
-            [require$$0.vShow, props.modelValue]
-          ]) : require$$0.createCommentVNode("", true)
+            [vue.vShow, props.modelValue]
+          ]) : vue.createCommentVNode("", true)
         ]),
         _: 3
       }, 8, ["disabled", "to"]));

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

@@ -1,3 +1,4 @@
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: {}) => any>> & Partial<Record<string, (_: {}) => any>>;
@@ -5,7 +6,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+declare const __VLS_component: DefineComponent<ExtractPropTypes<{
     drag: {
         type: (BooleanConstructor | StringConstructor)[];
         default: string;
@@ -46,7 +47,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     boxClass: {
         type: StringConstructor;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
     drag: {
         type: (BooleanConstructor | StringConstructor)[];
         default: string;
@@ -97,7 +98,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     often: boolean;
     local: boolean;
     maskClose: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -0,0 +1,88 @@
+<template>
+	<div :class="cs.z('local')" v-if="props.local">
+		<slot :name="dataSlot.default"></slot>
+	</div>
+	<BoxTeleport v-else :disabled="props.disabled" :to="props.to">
+		<template v-if="isInit">
+			<div
+				:class="[cs.z(), props.self ? 'popup-center' : '']"
+				v-show="props.modelValue"
+			>
+				<BoxMask
+					v-if="props.mask"
+					@click="onMaskClose"
+					:cssprefix="cs.z()"
+				></BoxMask>
+				<div v-drag="drag" v-adjust="adjust" :class="cs.z('body')">
+					<slot :name="dataSlot.title">
+						<BoxTitle
+							:cssprefix="cs.z()"
+							@close="onClose"
+							:title="props.title"
+						></BoxTitle>
+					</slot>
+					<div :class="cs.z('body-div')">
+						<slot :name="dataSlot.default"></slot>
+					</div>
+					<slot :name="dataSlot.footer"></slot>
+				</div>
+			</div>
+		</template>
+	</BoxTeleport>
+</template>
+<script lang="ts" setup>
+	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
+	import { useCssName } from '../../../hooks/cssname';
+	import { useLocale } from '../../../hooks/locale';
+	// import BoxTitle from '../../common/box-title.vue';
+	// import BoxMask from '../../common/box-mask.vue';
+	// import BoxTeleport from '../../common/box-teleport.vue';
+	// import BoxTitle from '../../box-titleindex';
+	// import BoxMask from '../../box-maskindex';
+	// import BoxTeleport from '../../box-teleportindex';
+
+	import BoxTitle from '../../box-title/index';
+	import BoxMask from '../../box-mask/index';
+	import BoxTeleport from '../../box-teleport/index';
+	import { watch, shallowRef } from 'vue';
+	import vAdjust from '../../../directives/adjust';
+	import vDrag from '../../../directives/drag';
+	const isInit = shallowRef(false);
+	// 获取国际化字段
+	const { getLocale } = useLocale();
+	// 样式设置方法
+	const cs = useCssName('popup');
+	const props = defineProps(dataProps);
+	const emit = defineEmits(dataEmits);
+
+	const drag = { dom: props.self ? false : props.drag };
+	const adjust =
+		!props.self && props.adjust
+			? {
+					often: props.often,
+					all: { position: true },
+				}
+			: {};
+
+	watch(
+		() => props.modelValue,
+		() => {
+			if (props.modelValue) {
+				isInit.value = true;
+			}
+		},
+		{ immediate: true },
+	);
+	function onMaskClose() {
+		if (props.maskClose) {
+			onClose();
+		}
+	}
+	function onClose() {
+		emit('update:modelValue', false);
+		emit('close');
+	}
+	defineExpose({
+		...dataExpose,
+	});
+</script>