@fangzhongya/fang-ui 0.0.14 → 0.0.15

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

@@ -0,0 +1,225 @@
+<template>
+	<div :class="cs.z()">
+		<div
+			:class="cs.z('div')"
+			:style="{
+				height: h * (props.limit * 2 + 1) + 'px',
+			}"
+		>
+			<div :class="cs.z('box')">
+				<div
+					:class="cs.z('after')"
+					:style="{
+						'margin-top': (h / 2) * -1 + 'px',
+					}"
+				></div>
+				<div
+					:class="cs.z('before')"
+					:style="{
+						'margin-top': h / 2 + 'px',
+					}"
+				></div>
+				<div ref="refScroll" :class="cs.z('list')">
+					<div
+						v-for="(item, ind) in props.options"
+						:class="[cs.z('list-li'), setClass(ind, item)]"
+						@click.stop="onClick(ind, item)"
+						:style="{
+							height: h + 'px',
+							'line-height': h + 'px',
+							'margin-top':
+								ind == 0 ? h * props.limit + 'px' : '',
+							'margin-bottom':
+								ind == props.options.length - 1
+									? h * props.limit + 'px'
+									: '',
+						}"
+					>
+						{{ useVueValue(item, props.label) }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script lang="ts" setup>
+	import { dataProps, dataEmits, dataExpose, dataSlot } from './data';
+	import { useCssName } from '../../../hooks/cssname';
+	import { useVueValue } from '../../common/use';
+	import { onMounted, computed, ref, watch, onBeforeUnmount } from 'vue';
+	// 样式设置方法
+	const cs = useCssName('select-scroll');
+	const props = defineProps(dataProps);
+	const emit = defineEmits(dataEmits);
+
+	const h = computed(() => {
+		let h = props.height || '';
+		return Number(h.replace('px', ''));
+	});
+
+	let timeout: any;
+	const refScroll = ref();
+
+	const index = ref(0);
+
+	watch(
+		() => index.value,
+		() => {
+			setScroll(index.value);
+			emit('update:modelValue', index.value);
+		},
+	);
+
+	watch(
+		() => props.modelValue,
+		() => {
+			setPropsValue();
+		},
+	);
+
+	function setClass(index: number, _obj?: any) {
+		if (props.max) {
+			if (index > props.max) {
+				return 'hide';
+			}
+		}
+		if (props.min) {
+			if (index < props.min) {
+				return 'hide';
+			}
+		}
+	}
+	function onReplace(key: number) {
+		let k = props.options.length;
+		if (key == 1) {
+			if (index.value < k && !setClass(index.value)) {
+				index.value++;
+			}
+		} else {
+			if (index.value > 0 && !setClass(index.value)) {
+				index.value--;
+			}
+		}
+	}
+	function onClick(i: number, obj: any) {
+		if (!setClass(i)) {
+			index.value = i;
+		}
+	}
+
+	function setScroll(value: number) {
+		if (refScroll.value) {
+			let v = h.value * value;
+			refScroll.value.scrollTop = v;
+		}
+	}
+
+	function setMinMax(v: number) {
+		if (props.min && v < props.min) {
+			v = props.min;
+		} else if (props.max && v > props.max) {
+			v = props.max;
+		}
+		setScroll(v);
+	}
+
+	function setPropsValue() {
+		let v = props.modelValue;
+		if (!setClass(v)) {
+			setScroll(v);
+		} else {
+			setMinMax(v);
+		}
+	}
+
+	function getScroll() {
+		clearTimeout(timeout);
+		timeout = setTimeout(() => {
+			if (refScroll.value) {
+				let r = refScroll.value.scrollTop;
+				let v = Math.round(r / h.value);
+				if (!setClass(v)) {
+					index.value = v;
+				} else {
+					setMinMax(v);
+				}
+			}
+		}, 200);
+	}
+
+	function handleScroll() {
+		if (refScroll.value) {
+			refScroll.value.addEventListener('scroll', () => {
+				getScroll();
+			});
+		}
+	}
+	onMounted(() => {
+		handleScroll();
+		setPropsValue();
+	});
+	onBeforeUnmount(() => {
+		if (refScroll.value) {
+			refScroll.value.removeEventListener('scroll', () => {}); // 离开当前组件别忘记移除事件监听
+		}
+	});
+	defineExpose({
+		...dataExpose,
+	});
+</script>
+<style lang="scss" scoped>
+	$select-scrolls: 'select-scroll';
+	.#{$select-scrolls} {
+		flex: 1;
+		float: left;
+		display: flex;
+		flex-direction: column;
+		width: 148px;
+		&:first-child {
+			margin-right: 12px;
+		}
+		.#{$select-scrolls}-div {
+			display: flex;
+			padding: 2px;
+			overflow: hidden;
+			// border: 1px solid #ccc;
+			.#{$select-scrolls}-box {
+				position: relative;
+				width: 140px;
+				overflow: hidden;
+				.#{$select-scrolls}-after,
+				.#{$select-scrolls}-before {
+					position: absolute;
+					top: 50%;
+					width: 100%;
+					z-index: 0;
+					border-top: 1px solid var(--el-border-color-lighter);
+					height: 1px;
+				}
+			}
+			.#{$select-scrolls}-list {
+				width: 156px;
+				height: 100%;
+				overflow: auto;
+				&:first-child {
+					padding-right: 4px;
+				}
+				&:last-child {
+					padding-left: 4px;
+				}
+				.#{$select-scrolls}-list-li {
+					padding: 0 20px 0 7px;
+					text-align: center;
+					&:hover {
+						background-color: var(--el-color-primary);
+						cursor: pointer;
+					}
+					&.hide {
+						color: #a8abb2;
+						cursor: not-allowed;
+					}
+				}
+			}
+		}
+	}
+</style>

package/dist/components/select-scroll/src/index2.cjs

@@ -1,11 +1,11 @@
 "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 = require("../../../hooks/cssname/index.cjs");
 const use = require("../../common/use.cjs");
 const _hoisted_1 = ["onClick"];
-const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: data.dataProps,
   emits: data.dataEmits,
@@ -13,21 +13,21 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
     const cs = index.useCssName("select-scroll");
     const props = __props;
     const emit = __emit;
-    const h = require$$0.computed(() => {
+    const h = vue.computed(() => {
       let h2 = props.height || "";
       return Number(h2.replace("px", ""));
     });
     let timeout;
-    const refScroll = require$$0.ref();
-    const index$1 = require$$0.ref(0);
-    require$$0.watch(
+    const refScroll = vue.ref();
+    const index$1 = vue.ref(0);
+    vue.watch(
       () => index$1.value,
       () => {
         setScroll(index$1.value);
         emit("update:modelValue", index$1.value);
       }
     );
-    require$$0.watch(
+    vue.watch(
       () => props.modelValue,
       () => {
         setPropsValue();
@@ -93,11 +93,11 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
         });
       }
     }
-    require$$0.onMounted(() => {
+    vue.onMounted(() => {
       handleScroll();
       setPropsValue();
     });
-    require$$0.onBeforeUnmount(() => {
+    vue.onBeforeUnmount(() => {
       if (refScroll.value) {
         refScroll.value.removeEventListener("scroll", () => {
         });
@@ -107,46 +107,46 @@ 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())
       }, [
-        require$$0.createElementVNode("div", {
-          class: require$$0.normalizeClass(require$$0.unref(cs).z("div")),
-          style: require$$0.normalizeStyle({
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(vue.unref(cs).z("div")),
+          style: vue.normalizeStyle({
             height: h.value * (props.limit * 2 + 1) + "px"
           })
         }, [
-          require$$0.createElementVNode("div", {
-            class: require$$0.normalizeClass(require$$0.unref(cs).z("box"))
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(vue.unref(cs).z("box"))
           }, [
-            require$$0.createElementVNode("div", {
-              class: require$$0.normalizeClass(require$$0.unref(cs).z("after")),
-              style: require$$0.normalizeStyle({
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(cs).z("after")),
+              style: vue.normalizeStyle({
                 "margin-top": h.value / 2 * -1 + "px"
               })
             }, null, 6),
-            require$$0.createElementVNode("div", {
-              class: require$$0.normalizeClass(require$$0.unref(cs).z("before")),
-              style: require$$0.normalizeStyle({
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(cs).z("before")),
+              style: vue.normalizeStyle({
                 "margin-top": h.value / 2 + "px"
               })
             }, null, 6),
-            require$$0.createElementVNode("div", {
+            vue.createElementVNode("div", {
               ref_key: "refScroll",
               ref: refScroll,
-              class: require$$0.normalizeClass(require$$0.unref(cs).z("list"))
+              class: vue.normalizeClass(vue.unref(cs).z("list"))
             }, [
-              (require$$0.openBlock(true), require$$0.createElementBlock(require$$0.Fragment, null, require$$0.renderList(props.options, (item, ind) => {
-                return require$$0.openBlock(), require$$0.createElementBlock("div", {
-                  class: require$$0.normalizeClass([require$$0.unref(cs).z("list-li"), setClass(ind)]),
-                  onClick: require$$0.withModifiers(($event) => onClick(ind), ["stop"]),
-                  style: require$$0.normalizeStyle({
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.options, (item, ind) => {
+                return vue.openBlock(), vue.createElementBlock("div", {
+                  class: vue.normalizeClass([vue.unref(cs).z("list-li"), setClass(ind)]),
+                  onClick: vue.withModifiers(($event) => onClick(ind), ["stop"]),
+                  style: vue.normalizeStyle({
                     height: h.value + "px",
                     "line-height": h.value + "px",
                     "margin-top": ind == 0 ? h.value * props.limit + "px" : "",
                     "margin-bottom": ind == props.options.length - 1 ? h.value * props.limit + "px" : ""
                   })
-                }, require$$0.toDisplayString(require$$0.unref(use.useVueValue)(item, props.label)), 15, _hoisted_1);
+                }, vue.toDisplayString(vue.unref(use.useVueValue)(item, props.label)), 15, _hoisted_1);
               }), 256))
             ], 2)
           ], 2)

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

@@ -1,5 +1,6 @@
+import { CreateComponentPublicInstanceWithMixins, ExtractPropTypes, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps, Plugin } from 'vue';
 declare const Selector: {
-    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< ExtractPropTypes<{
         rangeSeparator: {
             type: StringConstructor;
             default: string;
@@ -39,7 +40,7 @@ declare const Selector: {
         modelValue: {
             type: ArrayConstructor;
         };
-    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+    }>> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
         label: string;
         width: string | number;
         disabled: boolean;
@@ -49,14 +50,14 @@ declare const Selector: {
         startPlaceholder: string;
         endPlaceholder: string;
         prop: string;
-    }, 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<{
         rangeSeparator: {
             type: StringConstructor;
             default: string;
@@ -110,7 +111,7 @@ declare const Selector: {
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+} & ComponentOptionsBase<Readonly< ExtractPropTypes<{
     rangeSeparator: {
         type: StringConstructor;
         default: string;
@@ -150,7 +151,7 @@ declare const Selector: {
     modelValue: {
         type: ArrayConstructor;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+}>> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
     label: string;
     width: string | number;
     disabled: boolean;
@@ -160,5 +161,5 @@ declare const Selector: {
     startPlaceholder: string;
     endPlaceholder: string;
     prop: string;
-}, {}, 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 { Selector, Selector as default };

package/dist/components/selector/index.ts

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

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

@@ -0,0 +1,57 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const dataProps = {
+	rangeSeparator: { type: String, default: '至' },
+	startPlaceholder: { type: String, default: '开始' },
+	endPlaceholder: { type: String, default: '结束' },
+	clearable: {
+		type: Boolean,
+		default: true,
+	},
+
+	disabled: { type: Boolean, default: false },
+	width: {
+		type: [String, Number],
+		default: '320px',
+	},
+	options: {
+		type: Array,
+		default() {
+			return [];
+		},
+	},
+	prop: {
+		type: String,
+		default: 'value',
+	},
+	label: {
+		type: String,
+		default: 'label',
+	},
+	modelValue: {
+		type: Array,
+	},
+};
+
+export type DataProps = ExtractPropTypes<typeof dataProps>;
+
+/**
+ * @emits change (val:[String, Array])
+ * 选择的时间
+ */
+export const dataEmits = ['update:modelValue', 'change'];
+
+export type DataEmits = typeof dataEmits;
+
+/**
+ * @slot default 默认插槽
+ */
+export const dataSlot = {
+	default: 'default',
+};
+
+/**
+ * @expose setValue (val:<string>设置的数据 )
+ * 设置值
+ */
+export const dataExpose = {};

package/dist/components/selector/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<{
     rangeSeparator: {
         type: StringConstructor;
         default: string;
@@ -38,7 +39,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     modelValue: {
         type: ArrayConstructor;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
     rangeSeparator: {
         type: StringConstructor;
         default: string;
@@ -88,5 +89,5 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     startPlaceholder: string;
     endPlaceholder: string;
     prop: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;