@fangzhongya/fang-ui 0.0.14 → 0.0.16

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

@@ -0,0 +1,256 @@
+<template>
+	<div :class="[cs.z()]" v-bind="attrs.root">
+		<ElPopover
+			trigger="click"
+			:popper-class="cs.z('popper')"
+			:visible="visible"
+			:disabled="props.disabled || options.length == 0"
+			:width="width"
+		>
+			<div :class="cs.z('select')" v-if="options.length > 0">
+				<ul :class="cs.z('select-ul')">
+					<li
+						v-for="item in options"
+						:class="[cs.z('select-li')]"
+						@click.stop="onClickSelect(item)"
+					>
+						<span>
+							{{ item }}
+						</span>
+						<i
+							v-if="props.clean"
+							:class="[cs.z('select-li-clean')]"
+							@click.stop="onClean(item)"
+						>
+							<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>
+						</i>
+					</li>
+					<li :class="[cs.z('select-clean')]" v-if="props.clean">
+						<span
+							:class="[cs.z('select-clean-but')]"
+							@click.stop="onClean()"
+						>
+							关闭
+						</span>
+					</li>
+				</ul>
+			</div>
+			<template #reference>
+				<Inputs
+					ref="refInput"
+					v-expose="{}"
+					v-model="value"
+					v-bind="attrs.assem"
+					:disabled="props.disabled"
+					@input="onInput"
+					@focus="onFocus"
+					@blur="onBlur"
+					@keyup.enter.native="
+						() => {
+							if (!props.buts) onChange();
+						}
+					"
+					@clear="onClear"
+				>
+					<template
+						v-for="(k, index) in Object.keys(slots)"
+						v-slot:[k]
+						:key="k"
+					>
+						<slot :name="k"></slot>
+					</template>
+				</Inputs>
+			</template>
+		</ElPopover>
+
+		<template v-if="props.buts">
+			<ElButton
+				:class="[cs.z('but'), props.buts.class]"
+				v-bind="props.buts"
+				@click.stop="onChange"
+				:modelValue="props.buts.label"
+			>
+			</ElButton>
+		</template>
+	</div>
+</template>
+<script lang="ts" setup>
+	import vExpose from '../../../directives/expose';
+	import { ElButton, ElPopover } from 'element-plus';
+	import { getCss } from '@fangzhongya/utils/css/getCss';
+	import { deleteArray, replaceAfter, useStorage } from './util';
+	import { dataProps, dataEmits, dataExpose } from './data';
+	import Inputs from '../../inputs/index';
+	import { useCssName } from '../../../hooks/cssname';
+	import { useInherit } from '../../../hooks/inherit';
+	import { useSlots, useAttrs, ref, onMounted, watch } from 'vue';
+	import type { Slots } from 'vue';
+	const attrs = useInherit(useAttrs());
+	const slots: Slots = useSlots();
+	// 获取国际化字段
+	// 样式设置方法
+	const cs = useCssName('input-history');
+	const props = defineProps(dataProps);
+	const emit = defineEmits(dataEmits);
+	const visible = ref(false);
+	const width = ref(200);
+	const refInput = ref();
+
+	const options = useStorage<Array<string>>(
+		props.storage || new Date().getTime() + '',
+		[],
+	);
+	const value = ref('');
+
+	watch(
+		() => props.modelValue,
+		() => {
+			value.value = props.modelValue || '';
+		},
+		{ immediate: true },
+	);
+
+	function setWidth() {
+		if (refInput.value && refInput.value.el) {
+			width.value = getCss(refInput.value.el, 'width');
+		}
+	}
+	function onClickSelect(item: string) {
+		setValue(item);
+		visible.value = false;
+		onChange();
+	}
+	function onBlur(...arr: any[]) {
+		emit('blur', ...arr);
+		visible.value = false;
+	}
+	function onFocus(...arr: any[]) {
+		if (!value.value) {
+			visible.value = true;
+		}
+		emit('focus', ...arr);
+	}
+
+	function onInput(...arr: any[]) {
+		emit('input', ...arr);
+		if (!value.value) {
+			visible.value = true;
+		}
+	}
+
+	function setValue(item: string) {
+		value.value = item;
+		emit('update:modelValue');
+	}
+
+	function onClear(...arr: any[]) {
+		emit('clear', ...arr);
+		visible.value = true;
+	}
+
+	function onChange() {
+		const v = value.value;
+		if (v) {
+			options.value = replaceAfter(options.value, v, '', true);
+		}
+		emit('change', v);
+	}
+
+	function onClean(v?: string) {
+		if (v) {
+			deleteArray(options.value, v);
+		} else {
+			options.value = [];
+		}
+	}
+	onMounted(() => {
+		setWidth();
+	});
+	defineOptions({ inheritAttrs: false });
+	defineExpose({
+		...dataExpose,
+	});
+</script>
+
+<style lang="scss" scoped>
+	$input-historys: 'input-history';
+	.#{$input-historys} {
+		display: inline-block;
+	}
+
+	.#{$input-historys}-popper {
+		padding: 6px 0 !important;
+		.#{$input-historys}-select {
+			max-height: 274px;
+			height: 100%;
+			overflow-y: auto;
+			.#{$input-historys}-select-ul {
+				list-style: none;
+				margin: 6px 0;
+				padding: 0;
+				box-sizing: border-box;
+			}
+			.#{$input-historys}-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;
+					.#{$input-historys}-select-li-clean {
+						display: inline-flex;
+					}
+				}
+				&.selected {
+					color: var(--bv-color-primary);
+					font-weight: 700;
+				}
+				&.is-disabled {
+					background-color: #ffffff;
+					color: #a8abb2;
+					cursor: not-allowed;
+				}
+				.#{$input-historys}-select-li-clean {
+					position: absolute;
+					align-items: center;
+					justify-content: center;
+					right: 16px;
+					height: 100%;
+					display: none;
+					svg {
+						width: 1rem;
+						height: 1rem;
+					}
+				}
+			}
+			.#{$input-historys}-select-clean {
+				padding: 0 20px;
+				.#{$input-historys}-select-clean-but {
+					float: right;
+					color: #ccc;
+					cursor: pointer;
+				}
+			}
+		}
+	}
+</style>

package/dist/components/input-history/src/index2.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 index$3 = require("../../../directives/expose/index.cjs");
 const elementPlus = require("element-plus");
 const getCss = require("@fangzhongya/utils/css/getCss");
@@ -11,26 +11,26 @@ const index$1 = require("../../../hooks/cssname/index.cjs");
 const index = require("../../../hooks/inherit/index.cjs");
 const _hoisted_1 = ["onClick"];
 const _hoisted_2 = ["onClick"];
-const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{ inheritAttrs: false },
   __name: "index",
   props: data.dataProps,
   emits: data.dataEmits,
   setup(__props, { expose: __expose, emit: __emit }) {
-    const attrs = index.useInherit(require$$0.useAttrs());
-    const slots = require$$0.useSlots();
+    const attrs = index.useInherit(vue.useAttrs());
+    const slots = vue.useSlots();
     const cs = index$1.useCssName("input-history");
     const props = __props;
     const emit = __emit;
-    const visible = require$$0.ref(false);
-    const width = require$$0.ref(200);
-    const refInput = require$$0.ref();
+    const visible = vue.ref(false);
+    const width = vue.ref(200);
+    const refInput = vue.ref();
     const options = util.useStorage(
       props.storage || (/* @__PURE__ */ new Date()).getTime() + "",
       []
     );
-    const value = require$$0.ref("");
-    require$$0.watch(
+    const value = vue.ref("");
+    vue.watch(
       () => props.modelValue,
       () => {
         value.value = props.modelValue || "";
@@ -85,111 +85,111 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
         options.value = [];
       }
     }
-    require$$0.onMounted(() => {
+    vue.onMounted(() => {
       setWidth();
     });
     __expose({
       ...data.dataExpose
     });
     return (_ctx, _cache) => {
-      return require$$0.openBlock(), require$$0.createElementBlock("div", require$$0.mergeProps({
-        class: [require$$0.unref(cs).z()]
-      }, require$$0.unref(attrs).root), [
-        require$$0.createVNode(require$$0.unref(elementPlus.ElPopover), {
+      return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        class: [vue.unref(cs).z()]
+      }, vue.unref(attrs).root), [
+        vue.createVNode(vue.unref(elementPlus.ElPopover), {
           trigger: "click",
-          "popper-class": require$$0.unref(cs).z("popper"),
+          "popper-class": vue.unref(cs).z("popper"),
           visible: visible.value,
-          disabled: props.disabled || require$$0.unref(options).length == 0,
+          disabled: props.disabled || vue.unref(options).length == 0,
           width: width.value
         }, {
-          reference: require$$0.withCtx(() => [
-            require$$0.withDirectives((require$$0.openBlock(), require$$0.createBlock(require$$0.unref(index$2.Inputs), require$$0.mergeProps({
+          reference: vue.withCtx(() => [
+            vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$2.Inputs), vue.mergeProps({
               ref_key: "refInput",
               ref: refInput,
               modelValue: value.value,
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => value.value = $event)
-            }, require$$0.unref(attrs).assem, {
+            }, vue.unref(attrs).assem, {
               disabled: props.disabled,
               onInput,
               onFocus,
               onBlur,
-              onKeyup: _cache[2] || (_cache[2] = require$$0.withKeys(
+              onKeyup: _cache[2] || (_cache[2] = vue.withKeys(
                 () => {
                   if (!props.buts) onChange();
                 },
                 ["enter", "native"]
               )),
               onClear
-            }), require$$0.createSlots({ _: 2 }, [
-              require$$0.renderList(Object.keys(require$$0.unref(slots)), (k, index2) => {
+            }), vue.createSlots({ _: 2 }, [
+              vue.renderList(Object.keys(vue.unref(slots)), (k, index2) => {
                 return {
                   name: k,
-                  fn: require$$0.withCtx(() => [
-                    require$$0.renderSlot(_ctx.$slots, k, {}, void 0, true)
+                  fn: vue.withCtx(() => [
+                    vue.renderSlot(_ctx.$slots, k, {}, void 0, true)
                   ])
                 };
               })
             ]), 1040, ["modelValue", "disabled"])), [
-              [require$$0.unref(index$3.default), {}]
+              [vue.unref(index$3.default), {}]
             ])
           ]),
-          default: require$$0.withCtx(() => [
-            require$$0.unref(options).length > 0 ? (require$$0.openBlock(), require$$0.createElementBlock("div", {
+          default: vue.withCtx(() => [
+            vue.unref(options).length > 0 ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
-              class: require$$0.normalizeClass(require$$0.unref(cs).z("select"))
+              class: vue.normalizeClass(vue.unref(cs).z("select"))
             }, [
-              require$$0.createElementVNode("ul", {
-                class: require$$0.normalizeClass(require$$0.unref(cs).z("select-ul"))
+              vue.createElementVNode("ul", {
+                class: vue.normalizeClass(vue.unref(cs).z("select-ul"))
               }, [
-                (require$$0.openBlock(true), require$$0.createElementBlock(require$$0.Fragment, null, require$$0.renderList(require$$0.unref(options), (item) => {
-                  return require$$0.openBlock(), require$$0.createElementBlock("li", {
-                    class: require$$0.normalizeClass([require$$0.unref(cs).z("select-li")]),
-                    onClick: require$$0.withModifiers(($event) => onClickSelect(item), ["stop"])
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(options), (item) => {
+                  return vue.openBlock(), vue.createElementBlock("li", {
+                    class: vue.normalizeClass([vue.unref(cs).z("select-li")]),
+                    onClick: vue.withModifiers(($event) => onClickSelect(item), ["stop"])
                   }, [
-                    require$$0.createElementVNode("span", null, require$$0.toDisplayString(item), 1),
-                    props.clean ? (require$$0.openBlock(), require$$0.createElementBlock("i", {
+                    vue.createElementVNode("span", null, vue.toDisplayString(item), 1),
+                    props.clean ? (vue.openBlock(), vue.createElementBlock("i", {
                       key: 0,
-                      class: require$$0.normalizeClass([require$$0.unref(cs).z("select-li-clean")]),
-                      onClick: require$$0.withModifiers(($event) => onClean(item), ["stop"])
+                      class: vue.normalizeClass([vue.unref(cs).z("select-li-clean")]),
+                      onClick: vue.withModifiers(($event) => onClean(item), ["stop"])
                     }, _cache[3] || (_cache[3] = [
-                      require$$0.createElementVNode("svg", {
+                      vue.createElementVNode("svg", {
                         viewBox: "0 0 1024 1024",
                         xmlns: "http://www.w3.org/2000/svg",
                         "data-v-ea893728": ""
                       }, [
-                        require$$0.createElementVNode("path", {
+                        vue.createElementVNode("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"
                         }),
-                        require$$0.createElementVNode("path", {
+                        vue.createElementVNode("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"
                         })
                       ], -1)
-                    ]), 10, _hoisted_2)) : require$$0.createCommentVNode("", true)
+                    ]), 10, _hoisted_2)) : vue.createCommentVNode("", true)
                   ], 10, _hoisted_1);
                 }), 256)),
-                props.clean ? (require$$0.openBlock(), require$$0.createElementBlock("li", {
+                props.clean ? (vue.openBlock(), vue.createElementBlock("li", {
                   key: 0,
-                  class: require$$0.normalizeClass([require$$0.unref(cs).z("select-clean")])
+                  class: vue.normalizeClass([vue.unref(cs).z("select-clean")])
                 }, [
-                  require$$0.createElementVNode("span", {
-                    class: require$$0.normalizeClass([require$$0.unref(cs).z("select-clean-but")]),
-                    onClick: _cache[0] || (_cache[0] = require$$0.withModifiers(($event) => onClean(), ["stop"]))
+                  vue.createElementVNode("span", {
+                    class: vue.normalizeClass([vue.unref(cs).z("select-clean-but")]),
+                    onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => onClean(), ["stop"]))
                   }, " 关闭 ", 2)
-                ], 2)) : require$$0.createCommentVNode("", true)
+                ], 2)) : vue.createCommentVNode("", true)
               ], 2)
-            ], 2)) : require$$0.createCommentVNode("", true)
+            ], 2)) : vue.createCommentVNode("", true)
           ]),
           _: 3
         }, 8, ["popper-class", "visible", "disabled", "width"]),
-        props.buts ? (require$$0.openBlock(), require$$0.createBlock(require$$0.unref(elementPlus.ElButton), require$$0.mergeProps({
+        props.buts ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElButton), vue.mergeProps({
           key: 0,
-          class: [require$$0.unref(cs).z("but"), props.buts.class]
+          class: [vue.unref(cs).z("but"), props.buts.class]
         }, props.buts, {
-          onClick: require$$0.withModifiers(onChange, ["stop"]),
+          onClick: vue.withModifiers(onChange, ["stop"]),
           modelValue: props.buts.label
-        }), null, 16, ["class", "modelValue"])) : require$$0.createCommentVNode("", true)
+        }), null, 16, ["class", "modelValue"])) : vue.createCommentVNode("", true)
       ], 16);
     };
   }

package/dist/components/input-history/src/util.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require$$0 = require("vue");
+const vue = require("vue");
 const local = require("../../../utils/local.cjs");
 function replaceAfter(arr, obj, id, is) {
   const varr = [];
@@ -43,8 +43,8 @@ function deleteArray(arr, obj, key, is) {
 const useStorage = (storage, d, is) => {
   let get = local.getLocal;
   let set = local.setLocal;
-  const value = require$$0.ref(get(storage) || d);
-  const w = require$$0.watch(
+  const value = vue.ref(get(storage) || d);
+  const w = vue.watch(
     () => value.value,
     (v) => {
       set(storage, v);
@@ -53,7 +53,7 @@ const useStorage = (storage, d, is) => {
       deep: true
     }
   );
-  require$$0.onUnmounted(() => {
+  vue.onUnmounted(() => {
     w();
   });
   return value;

package/dist/components/input-history/src/util.ts

@@ -0,0 +1,127 @@
+import { ref, watch, onUnmounted } from 'vue';
+import { getLocal, setLocal, getSession, setSession } from '../../../utils/local';
+
+interface ObjUnkn {
+	[key: string]: unknown;
+}
+/**
+ * 删除已经存在数组值，把新值添加最后
+ * @param {Array<T>} arr 当前数组
+ * @param {Object} obj 要处理的对象
+ * @param {string} id 比对的对应属性名称
+ * @param {string} is 是否在前面添加
+ * @returns {Array<T>} 判断后的数组值
+ */
+export function replaceAfter<T>(
+	arr: Array<T>,
+	obj: T,
+	id?: string,
+	is?: boolean,
+): Array<T> {
+	const varr: Array<T> = [];
+	if (id) {
+		arr.forEach((a) => {
+			const element = a as ObjUnkn;
+			const vs = obj as ObjUnkn;
+			if (element[id] !== vs[id]) {
+				varr.push(a);
+			}
+		});
+	} else {
+		arr.forEach((element) => {
+			if (element !== obj) {
+				varr.push(element);
+			}
+		});
+	}
+	if (is) {
+		varr.unshift(obj);
+	} else {
+		varr.push(obj);
+	}
+	return varr;
+}
+
+/**
+ * 删除数组中的值
+ */
+export function deleteArray<T>(
+	arr: Array<T>,
+	obj: T,
+	key?: string,
+	is?: boolean,
+) {
+	const wz: number[] = [];
+	if (is) {
+		if (key) {
+			arr.forEach((a, index) => {
+				const element = a as ObjUnkn;
+				const vs = obj as ObjUnkn;
+				if (element[key] !== vs[key]) {
+					wz.push(index);
+				}
+			});
+		} else {
+			arr.forEach((element, index) => {
+				if (element !== obj) {
+					wz.push(index);
+				}
+			});
+		}
+	} else {
+		if (key) {
+			for (let index = 0; index < arr.length; index++) {
+				const element = arr[index] as ObjUnkn;
+				const vs = obj as ObjUnkn;
+				if (element[key] === vs[key]) {
+					wz.push(index);
+					break;
+				}
+			}
+		} else {
+			for (let index = 0; index < arr.length; index++) {
+				const element = arr[index];
+				if (element === obj) {
+					wz.push(index);
+					break;
+				}
+			}
+		}
+	}
+	if (wz.length > 0) {
+		const rs = [];
+		for (let index = wz.length - 1; index >= 0; index--) {
+			const scz = arr.splice(wz[index], 1);
+			rs.unshift(...scz);
+		}
+		return rs;
+	} else {
+		return;
+	}
+}
+
+export const useStorage = <T>(storage: string, d: any, is?: boolean) => {
+	let get = getLocal;
+	let set = setLocal;
+	if (is) {
+		get = getSession;
+		set = setSession;
+	}
+	const value = ref<T>(get(storage) || d);
+	const w = watch(
+		() => value.value,
+		(v) => {
+			set(storage, v);
+		},
+		{
+			deep: true,
+		},
+	);
+
+	onUnmounted(() => {
+		w();
+	});
+	return value;
+};
+
+export type UseStorageReturn = ReturnType<typeof useStorage>;

package/dist/components/input-num/index.css

@@ -1,22 +1,22 @@
 :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-input-num-input {
+.input-num-input {
   height: 100%;
 }