@fangzhongya/fang-ui 0.0.14 → 0.0.15

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

@@ -0,0 +1,275 @@
+<template>
+	<ElPopover
+		trigger="click"
+		:popper-class="cs.z('popper')"
+		:visible="visible"
+		:disabled="props.disabled || !(options && options.length > 0)"
+		:width="width"
+	>
+		<div :class="cs.z('select')">
+			<ul :class="cs.z('select-ul')">
+				<li
+					v-for="item in options"
+					:class="[
+						cs.z('select-li'),
+						cs.is('disabled', item?.disabled),
+						getSelected(item),
+					]"
+					@click.stop="onClickSelect(item)"
+				>
+					{{ useVueValue(item, props.label) }}
+				</li>
+			</ul>
+		</div>
+		<template #reference>
+			<div
+				:class="[cs.z(), cs.is('disabled', props.disabled)]"
+				v-bind="attrs.root"
+				@click="onClick"
+			>
+				<ElInput
+					ref="refInput"
+					v-model="value"
+					v-bind="attrs.assem"
+					:disabled="props.disabled"
+					:readonly="props.readonly"
+					@input="onInput"
+					@focus="onFocus"
+					@blur="onBlur"
+					:clearable="false"
+				>
+					<template
+						v-for="(k, index) in Object.keys(slots)"
+						v-slot:[k]
+						:key="k"
+					>
+						<slot :name="k"></slot>
+					</template>
+					<template #suffix>
+						<span
+							v-if="isclear"
+							:class="[cs.z('select-icon'), 'clear']"
+							@click.stop="onClear"
+						>
+							<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>
+						</span>
+						<slot :name="dataSlot.suffix"></slot>
+						<span
+							:class="[
+								cs.z('select-icon'),
+								cs.is('reverse', visible),
+							]"
+						>
+							<slot :name="dataSlot.iconSelect">
+								<svg
+									viewBox="0 0 1024 1024"
+									xmlns="http://www.w3.org/2000/svg"
+									data-v-ea893728=""
+								>
+									<path
+										fill="currentColor"
+										d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"
+									></path>
+								</svg>
+							</slot>
+						</span>
+					</template>
+				</ElInput>
+			</div>
+		</template>
+	</ElPopover>
+</template>
+<script lang="ts" setup>
+	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
+	import { ElPopover, ElInput } from 'element-plus';
+	// import Inputs from '../inputs/index.vue';
+	import { useInherit } from '../../../hooks/inherit';
+	import { useVueValue } from '../../common/use';
+	import { useCssName } from '../../../hooks/cssname';
+	import { getCss } from '@fangzhongya/utils/css/getCss';
+	import { useSlots, computed, ref, onMounted, useAttrs } from 'vue';
+	import type { Slots } from 'vue';
+	const attrs = useInherit(useAttrs());
+	const slots: Slots = useSlots();
+	// 样式设置方法
+	const cs = useCssName('input-select');
+	const props = defineProps(dataProps);
+	const emit = defineEmits(dataEmits);
+	const visible = ref(false);
+	const width = ref(200);
+	const refInput = ref();
+	const isfocus = ref(false);
+	const isFiletr = ref(false);
+	const value = computed({
+		get() {
+			let v = props.modelValue;
+			return v;
+		},
+		set(value) {
+			emit('update:modelValue', value);
+		},
+	});
+
+	const options = computed(() => {
+		if (props.filterable && value.value && isFiletr.value) {
+			return props.options.filter((o) => {
+				return (useVueValue(o, props.prop) + '').includes(
+					value.value || '',
+				);
+			});
+		}
+		return props.options;
+	});
+	const isclear = computed(() => {
+		if (props.readonly) {
+			return false;
+		}
+		if (props.clearable && value.value && isfocus.value) {
+			return true;
+		}
+		return false;
+	});
+	function setWidth() {
+		if (refInput.value && refInput.value.ref) {
+			width.value = getCss(refInput.value.ref, 'width');
+		}
+	}
+	function onClickSelect(item: any) {
+		if (!item.disabled) {
+			value.value = useVueValue(item, props.prop);
+			emit('change', value.value, item);
+			visible.value = false;
+			isFiletr.value = false;
+		}
+	}
+	function getSelected(item: any) {
+		const v = useVueValue(item, props.prop);
+		if (v === value.value) {
+			return 'selected';
+		} else {
+			return;
+		}
+	}
+	function onInput(v: string, ...arr: any[]) {
+		emit('input', v, ...arr);
+		if (props.filterable) {
+			isFiletr.value = true;
+			visible.value = true;
+		}
+	}
+	// @ts-ignore
+	let timeout: NodeJS.Timeout;
+	function onBlur(...arr: any[]) {
+		emit('blur', ...arr);
+		timeout = setTimeout(() => {
+			isfocus.value = false;
+			visible.value = false;
+		}, 200);
+	}
+	function clearBlur() {
+		clearTimeout(timeout);
+	}
+	function onFocus(...arr: any[]) {
+		isfocus.value = true;
+		clearBlur();
+		emit('focus', ...arr);
+	}
+	function onClear() {
+		clearBlur();
+		value.value = '';
+		refInput.value.focus();
+	}
+	function onClick() {
+		if (!props.readonly) {
+			isFiletr.value = false;
+			visible.value = !visible.value;
+		}
+	}
+	onMounted(() => {
+		setWidth();
+	});
+	defineOptions({ inheritAttrs: false });
+	defineExpose({
+		...dataExpose,
+	});
+</script>
+
+<style lang="scss" scoped>
+	$input-selects: 'input-select';
+	.#{$input-selects} {
+		.#{$input-selects}-select-icon {
+			margin-left: 8px;
+			display: inline-flex;
+			pointer-events: all;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			transform: rotate(0);
+			transition: transform 0.3s;
+			&.is-reverse {
+				transform: rotate(-180deg);
+			}
+			svg {
+				width: 1rem;
+				height: 1rem;
+			}
+		}
+		&.is-disabled {
+			.#{$input-selects}-select-icon {
+				cursor: not-allowed;
+			}
+		}
+	}
+	.#{$input-selects}-popper {
+		padding: 6px 0 !important;
+		.#{$input-selects}-select {
+			max-height: 274px;
+			height: 100%;
+			overflow-y: auto;
+			.#{$input-selects}-select-ul {
+				list-style: none;
+				margin: 6px 0;
+				padding: 0;
+				box-sizing: border-box;
+			}
+			.#{$input-selects}-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;
+				}
+				&.selected {
+					color: var(--bv-color-primary);
+					font-weight: 700;
+				}
+				&.is-disabled {
+					background-color: #ffffff;
+					color: #a8abb2;
+					cursor: not-allowed;
+				}
+			}
+		}
+	}
+</style>

package/dist/components/input-select/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 data = require("./data.cjs");
 const elementPlus = require("element-plus");
 const index = require("../../../hooks/inherit/index.cjs");
@@ -8,23 +8,23 @@ const use = require("../../common/use.cjs");
 const index$1 = require("../../../hooks/cssname/index.cjs");
 const getCss = require("@fangzhongya/utils/css/getCss");
 const _hoisted_1 = ["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-select");
     const props = __props;
     const emit = __emit;
-    const visible = require$$0.ref(false);
-    const width = require$$0.ref(200);
-    const refInput = require$$0.ref();
-    const isfocus = require$$0.ref(false);
-    const isFiletr = require$$0.ref(false);
-    const value = require$$0.computed({
+    const visible = vue.ref(false);
+    const width = vue.ref(200);
+    const refInput = vue.ref();
+    const isfocus = vue.ref(false);
+    const isFiletr = vue.ref(false);
+    const value = vue.computed({
       get() {
         let v = props.modelValue;
         return v;
@@ -33,7 +33,7 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
         emit("update:modelValue", value2);
       }
     });
-    const options = require$$0.computed(() => {
+    const options = vue.computed(() => {
       if (props.filterable && value.value && isFiletr.value) {
         return props.options.filter((o) => {
           return (use.useVueValue(o, props.prop) + "").includes(
@@ -43,7 +43,7 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
       }
       return props.options;
     });
-    const isclear = require$$0.computed(() => {
+    const isclear = vue.computed(() => {
       if (props.readonly) {
         return false;
       }
@@ -107,72 +107,72 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
         visible.value = !visible.value;
       }
     }
-    require$$0.onMounted(() => {
+    vue.onMounted(() => {
       setWidth();
     });
     __expose({
       ...data.dataExpose
     });
     return (_ctx, _cache) => {
-      return require$$0.openBlock(), require$$0.createBlock(require$$0.unref(elementPlus.ElPopover), {
+      return vue.openBlock(), vue.createBlock(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 || !(options.value && options.value.length > 0),
         width: width.value
       }, {
-        reference: require$$0.withCtx(() => [
-          require$$0.createElementVNode("div", require$$0.mergeProps({
-            class: [require$$0.unref(cs).z(), require$$0.unref(cs).is("disabled", props.disabled)]
-          }, require$$0.unref(attrs).root, { onClick }), [
-            require$$0.createVNode(require$$0.unref(elementPlus.ElInput), require$$0.mergeProps({
+        reference: vue.withCtx(() => [
+          vue.createElementVNode("div", vue.mergeProps({
+            class: [vue.unref(cs).z(), vue.unref(cs).is("disabled", props.disabled)]
+          }, vue.unref(attrs).root, { onClick }), [
+            vue.createVNode(vue.unref(elementPlus.ElInput), vue.mergeProps({
               ref_key: "refInput",
               ref: refInput,
               modelValue: value.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event)
-            }, require$$0.unref(attrs).assem, {
+            }, vue.unref(attrs).assem, {
               disabled: props.disabled,
               readonly: props.readonly,
               onInput,
               onFocus,
               onBlur,
               clearable: false
-            }), require$$0.createSlots({
-              suffix: require$$0.withCtx(() => [
-                isclear.value ? (require$$0.openBlock(), require$$0.createElementBlock("span", {
+            }), vue.createSlots({
+              suffix: vue.withCtx(() => [
+                isclear.value ? (vue.openBlock(), vue.createElementBlock("span", {
                   key: 0,
-                  class: require$$0.normalizeClass([require$$0.unref(cs).z("select-icon"), "clear"]),
-                  onClick: require$$0.withModifiers(onClear, ["stop"])
+                  class: vue.normalizeClass([vue.unref(cs).z("select-icon"), "clear"]),
+                  onClick: vue.withModifiers(onClear, ["stop"])
                 }, _cache[1] || (_cache[1] = [
-                  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)
-                ]), 2)) : require$$0.createCommentVNode("", true),
-                require$$0.renderSlot(_ctx.$slots, require$$0.unref(data.dataSlot).suffix, {}, void 0, true),
-                require$$0.createElementVNode("span", {
-                  class: require$$0.normalizeClass([
-                    require$$0.unref(cs).z("select-icon"),
-                    require$$0.unref(cs).is("reverse", visible.value)
+                ]), 2)) : vue.createCommentVNode("", true),
+                vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).suffix, {}, void 0, true),
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass([
+                    vue.unref(cs).z("select-icon"),
+                    vue.unref(cs).is("reverse", visible.value)
                   ])
                 }, [
-                  require$$0.renderSlot(_ctx.$slots, require$$0.unref(data.dataSlot).iconSelect, {}, () => [
-                    _cache[2] || (_cache[2] = require$$0.createElementVNode("svg", {
+                  vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).iconSelect, {}, () => [
+                    _cache[2] || (_cache[2] = 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: "M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"
                       })
@@ -182,33 +182,33 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
               ]),
               _: 2
             }, [
-              require$$0.renderList(Object.keys(require$$0.unref(slots)), (k, index2) => {
+              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", "readonly"])
           ], 16)
         ]),
-        default: require$$0.withCtx(() => [
-          require$$0.createElementVNode("div", {
-            class: require$$0.normalizeClass(require$$0.unref(cs).z("select"))
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            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(options.value, (item) => {
-                return require$$0.openBlock(), require$$0.createElementBlock("li", {
-                  class: require$$0.normalizeClass([
-                    require$$0.unref(cs).z("select-li"),
-                    require$$0.unref(cs).is("disabled", item == null ? void 0 : item.disabled),
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(options.value, (item) => {
+                return vue.openBlock(), vue.createElementBlock("li", {
+                  class: vue.normalizeClass([
+                    vue.unref(cs).z("select-li"),
+                    vue.unref(cs).is("disabled", item == null ? void 0 : item.disabled),
                     getSelected(item)
                   ]),
-                  onClick: require$$0.withModifiers(($event) => onClickSelect(item), ["stop"])
-                }, require$$0.toDisplayString(require$$0.unref(use.useVueValue)(item, props.label)), 11, _hoisted_1);
+                  onClick: vue.withModifiers(($event) => onClickSelect(item), ["stop"])
+                }, vue.toDisplayString(vue.unref(use.useVueValue)(item, props.label)), 11, _hoisted_1);
               }), 256))
             ], 2)
           ], 2)

package/dist/components/inputs/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-inputs-input {
+.inputs-input {
   height: 100%;
 }

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

@@ -1,5 +1,6 @@
+import { CreateComponentPublicInstanceWithMixins, ExtractPropTypes, Ref, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps, Plugin } from 'vue';
 declare const Inputs: {
-    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< ExtractPropTypes<{
         oncePlaceholder: {
             type: BooleanConstructor;
         };
@@ -10,19 +11,19 @@ declare const Inputs: {
             type: (NumberConstructor | StringConstructor)[];
         };
     }>> & Readonly<{}>, {
-        el: import('vue').Ref<any, any>;
-    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        el: Ref<any, any>;
+    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
         oncePlaceholder: boolean;
-    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+    }, true, {}, {}, GlobalComponents, GlobalDirectives, string, {
         refEl: HTMLDivElement;
-    }, any, import('vue').ComponentProvideOptions, {
+    }, any, ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<import('vue').ExtractPropTypes<{
+    }, Readonly< ExtractPropTypes<{
         oncePlaceholder: {
             type: BooleanConstructor;
         };
@@ -33,14 +34,14 @@ declare const Inputs: {
             type: (NumberConstructor | StringConstructor)[];
         };
     }>> & Readonly<{}>, {
-        el: import('vue').Ref<any, any>;
+        el: Ref<any, any>;
     }, {}, {}, {}, {
         oncePlaceholder: boolean;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+} & ComponentOptionsBase<Readonly< ExtractPropTypes<{
     oncePlaceholder: {
         type: BooleanConstructor;
     };
@@ -51,10 +52,10 @@ declare const Inputs: {
         type: (NumberConstructor | StringConstructor)[];
     };
 }>> & Readonly<{}>, {
-    el: import('vue').Ref<any, any>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    el: Ref<any, any>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
     oncePlaceholder: 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>>;
-}) & import('vue').Plugin;
+}) & Plugin;
 export { Inputs, Inputs as default };

package/dist/components/inputs/index.ts

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

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

@@ -0,0 +1,31 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const dataProps = {
+	oncePlaceholder: {
+		type: Boolean,
+	},
+	/**
+	 * @props { String } placeholder= ( )
+	 * 输入框提示
+	 */
+	placeholder: {
+		type: String,
+	},
+	/**
+	 * @props { String } modelValue= ( )
+	 * 输入框展示数据
+	 */
+	modelValue: {
+		type: [String, Number],
+	},
+};
+
+export type DataProps = ExtractPropTypes<typeof dataProps>;
+
+/**
+ * @emits {string} update:modelValue (str:string)
+ * modelValue 数据双向绑定
+ */
+export const dataEmits = ['update:modelValue'];
+
+export type DataEmits = typeof dataEmits;