@neatui/nuxt 0.1.0 → 1.0.0

package/src/components/basic/LayerView/Layer.vue

@@ -29,35 +29,35 @@
   const props: any = defineProps({
     zIndex: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     area: {
       type: String,
-      default: '#fekit'
+      default: '#fekit',
     },
     id: {
-      type: String
+      type: String,
     },
     am: {
       type: String as PropType<'aa' | 'ab' | 'ac' | 'ad' | 'ae' | 'af' | 'ag' | 'ah' | 'ai' | 'aj' | 'ak' | 'al' | 'am' | 'an' | 'ao' | 'ap' | 'aq' | 'ar' | 'as' | 'at'>,
-      default: 'as'
+      default: 'as',
     },
     flex: {
       type: String as PropType<'lt' | 'ct' | 'rt' | 'lm' | 'cm' | 'rm' | 'lb' | 'cb' | 'rb'>,
-      default: 'cm'
+      default: 'cm',
     },
     dark: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     darkClickClose: {
       type: Boolean,
-      default: true
+      default: true,
     },
     wrapStyle: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
   });
 
   const _area: any = document.querySelector(props.area);
@@ -72,7 +72,7 @@
   const state = reactive({
     view: 0,
     params: {},
-    top: 0
+    top: 0,
   });
 
   function disableScroll() {
@@ -101,7 +101,7 @@
         enableScroll();
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   // 回调合集
@@ -109,7 +109,7 @@
     show: [],
     hide: [],
     open: [],
-    none: []
+    none: [],
   };
 
   // 注入参数
@@ -167,7 +167,6 @@
     if (state.view === 1) {
       state.view = 0;
       on.hide.forEach((fun: any) => {
-        // isFunction(fun) && fun();
         if (isFunction(fun)) {
           fun();
         }
@@ -176,7 +175,6 @@
     if (state.view === 2) {
       state.view = 3;
       on.show.forEach((fun: any) => {
-        // isFunction(fun) && fun();
         if (isFunction(fun)) {
           fun();
         }
@@ -200,11 +198,6 @@
     delete _tasks[id];
   });
 </script>
-<!-- <script lang="ts">
-  export const LayerById = (id: any) => {
-    return (window as any)._FEKIT_LAYER_TASKS[id];
-  };
-</script> -->
 
 <style lang="scss">
   // 弹层
@@ -234,106 +227,40 @@
     }
 
     &-close {
+      cursor: pointer;
       position: absolute;
-      width: 1.5em;
-      height: 1.5em;
-      left: 50%;
-      bottom: -2.5rem;
-      margin-left: -1rem;
+      width: 2em;
+      height: 2em;
+
+      color: var(--co-read);
+      bottom: auto;
+      top: 0.5em;
+      right: 0.5em;
+      left: auto;
+      box-shadow: none;
+
       padding: 0.25em;
+      margin-left: -1rem;
       text-align: center;
-      transform: scale(1) translate3d(0, -100%, 0);
+      transform: scale(0.8);
       transition: all 0.2s;
-      color: #fff;
-      box-shadow: 0 0 0 2px currentColor;
       border-radius: 50%;
-      opacity: 0;
       background:
-        linear-gradient(45deg, transparent 44%, currentColor 45%, currentColor 56%, transparent 57%) no-repeat center / 50% 50%,
-        linear-gradient(-45deg, transparent 44%, currentColor 45%, currentColor 56%, transparent 57%) no-repeat center / 50% 50%;
+        linear-gradient(45deg, transparent 44%, currentColor 45%, currentColor 55%, transparent 56%) no-repeat center / 50% 50%,
+        linear-gradient(-45deg, transparent 44%, currentColor 45%, currentColor 55%, transparent 56%) no-repeat center / 50% 50%;
 
       &:active {
         transform: scale(0.9);
       }
     }
 
-    &[view='3'] {
-      .fekit-layer-close {
-        opacity: 0.85;
-        transform: translate3d(0, 0, 0);
+    .fekit-layer-close {
+      &:hover {
+        transform: scale(0.8) rotate(90deg);
+      }
+      &:active {
+        transform: scale(0.7) rotate(90deg);
       }
     }
-
-    // &-close {
-    //   position: absolute;
-    //   width: 2rem;
-    //   height: 2rem;
-    //   line-height: 2rem;
-    //   right: 0.5rem;
-    //   top: 0.5rem;
-    //   text-align: center;
-    //   transform: rotate(0deg);
-    //   transition: all 0.2s;
-
-    //   &:hover {
-    //     transform: rotate(-90deg);
-    //   }
-    // }
-
-    // &-close {
-    //   position: absolute;
-    //   width: 18px;
-    //   height: 18px;
-    //   right: 0.5em;
-    //   top: 0.5em;
-    //   padding: 0.25em;
-    //   text-align: center;
-    //   transition: all 0.2s;
-    //   // box-shadow: 0 0 0 1px currentColor;
-    //   border-radius: 50%;
-    //   background: linear-gradient(45deg, transparent 44%, currentColor 46%, currentColor 54%, transparent 56%) no-repeat center / 50% 50%,
-    //     linear-gradient(-45deg, transparent 44%, currentColor 46%, currentColor 54%, transparent 56%) no-repeat center / 50% 50%;
-    //   transform: scale(1) rotate(0deg);
-    //   opacity: 0.8;
-    //   transition: all 0.25s;
-
-    //   &:hover {
-    //     transform: scale(1) rotate(-90deg);
-    //   }
-
-    //   &:active {
-    //     transform: scale(0.8) rotate(-90deg);
-    //   }
-
-    //   &::before {
-    //     position: absolute;
-    //     content: '';
-    //     width: 200%;
-    //     height: 200%;
-    //     left: -50%;
-    //     top: -50%;
-    //   }
-    // }
   }
-
-  // html {
-  //   &[size='xs'] {
-  //     .fekit-layer-close {
-  //       width: 16px;
-  //       height: 16px;
-  //     }
-  //   }
-  //   &[size='l'] {
-  //     .fekit-layer-close {
-  //       width: 20px;
-  //       height: 20px;
-  //     }
-  //   }
-  //   &[size='xl'] {
-  //     .fekit-layer-close {
-  //       width: 22px;
-  //       height: 22px;
-  //     }
-  //   }
-  // }
 </style>

package/src/components/basic/follow.ts

@@ -0,0 +1,133 @@
+import ResizeObserver from 'resize-observer-polyfill';
+import raf from 'raf';
+
+class Follow {
+  box: any[];
+  dom: any;
+  tip: any;
+  ing: any;
+  sub: any;
+  obs: any;
+  fun: (status: any) => void;
+  private css: () => void;
+  z: number;
+  constructor(dom: any, tip: any, fun = (_status: any) => {}) {
+    this.dom = dom;
+    this.tip = tip;
+    this.box = [];
+    this.css = this.setcss.bind(this);
+    this.fun = fun;
+    this.sub = this.tip.firstElementChild;
+    this.z = 0;
+  }
+  setcss() {
+    if (!this.ing) {
+      raf(() => {
+        this.ing = false;
+        const dr = this.dom?.getBoundingClientRect() || { width: 0, height: 0, top: 0, bottom: 0, left: 0, right: 0 };
+        const sr = this.sub?.getBoundingClientRect() || { height: 0 };
+        this.tip.style.inset = `${dr.top}px auto auto ${dr.left}px`;
+        this.tip.style.width = dr.width + 'px';
+        this.tip.style.height = dr.height + 'px';
+        this.fun('');
+        this.box.forEach((e: any) => {
+          const _ar = { top: 0, bottom: window.innerHeight, left: 0, right: window.innerWidth };
+          const ar = e === window ? _ar : e?.getBoundingClientRect() || _ar;
+          if (dr.bottom < ar.top || dr.top > ar.bottom || dr.right < ar.left || dr.left > ar.right) {
+            this.tip.style.opacity = '0';
+            this.sub.style.pointerEvents = 'none';
+          } else {
+            this.tip.style.opacity = '';
+            this.sub.style.pointerEvents = '';
+          }
+          if (dr.bottom + sr.height + 10 > ar.bottom) {
+            this.fun('b');
+          }
+        });
+        const tr = this.tip?.getBoundingClientRect() || { left: 0 };
+        const x = this.sub.offsetLeft + tr.left;
+        const arrow = this.sub.querySelector('[ui-tips-arrow]');
+        if (x < 0) {
+          this.sub.style.transform = `translate3d(${-x}px,0,0)`;
+          if (arrow && arrow.style) {
+            arrow.style.transform = `translateX(${x}px) rotate(45deg)`;
+          }
+        } else {
+          this.sub.style.transform = '';
+          if (arrow && arrow.style) {
+            arrow.style.transform = '';
+          }
+        }
+      });
+      this.ing = true;
+    }
+  }
+  listen() {
+    // 向上查询有滚动条的元素
+    const _find = (e: any) => {
+      // 判断是否为DOM节点
+      if (e) {
+        if (e.nodeType === 1) {
+          const css: any = window.getComputedStyle(e);
+          // 查询所有父组节点的最高层级
+          if (!isNaN(css.zIndex) && css.zIndex >= this.z) {
+            this.z = Number(css.zIndex) + 10;
+          } else {
+            this.z += 1;
+          }
+          // 节点是否有滚动条
+          if (
+            (css.overflowY === 'auto' || css.overflowY === 'scroll' || css.overflowX === 'auto' || css.overflowX === 'scroll') &&
+            (e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth)
+          ) {
+            this.box.push(e);
+          }
+          _find(e.parentNode);
+        } else if (e.nodeType === 9) {
+          console.log(42, e, e.nodeType);
+          this.box.push(window);
+        }
+      }
+    };
+    _find(this.dom);
+
+    // 自动层级
+    if (window.getComputedStyle(this.tip).zIndex) {
+      this.tip.style.zIndex = `${this.z}`;
+    }
+
+    this.css();
+    // 监听窗口尺寸变化
+    window.addEventListener('resize', this.css);
+    window.addEventListener('click', this.css);
+    // 监听滚动条的元素
+    this.box.forEach((e: any) => {
+      e.addEventListener('scroll', this.css);
+    });
+    // 监听移入事件
+    this.dom?.addEventListener('mouseenter', this.css);
+    // 监听参考元素变化
+    this.obs = new ResizeObserver(this.css);
+    if (this.dom) {
+      this.obs?.observe(this.dom);
+    }
+    if (this.sub) {
+      this.obs?.observe(this.sub);
+    }
+  }
+  remove() {
+    // console.log('移除监听');
+    // 清除窗口尺寸变化事件监听器
+    window.removeEventListener('resize', this.css);
+    window.removeEventListener('click', this.css);
+    // 清除滚动条元素的事件监听器
+    this.box.forEach((e: any) => {
+      e.removeEventListener('scroll', this.css);
+    });
+    // 清除鼠标移入事件监听器
+    this.dom?.removeEventListener('mouseenter', this.css);
+    // 清除监听参考元素变化
+    this.obs?.disconnect();
+  }
+}
+export default Follow;

package/src/components/display/Calendar.vue

@@ -19,8 +19,8 @@
             <div
               ui-flex="col cm"
               class="r-ss b-solid bk-none b-xs"
-              :class="`${item.isToday ? 'bk-main-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
-                state.selected && state.selected === item.date ? 'active bg-main-ls co-fore' : 'hover-bg-weak'
+              :class="`${item.isToday ? 'bk-main-o-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
+                state.selected && state.selected === item.date ? 'active bg-main-o-ls co-fore' : 'hover-bg-weak'
               }`"
             >
               <span>{{ item.day }}</span>
@@ -108,40 +108,40 @@
     // 提示文案
     tips: {
       type: String,
-      default: ''
+      default: '',
     },
     // 提示文案
     placeholder: {
       type: String,
-      default: ''
+      default: '',
     },
     // 格式
     format: {
       type: String,
-      default: ''
+      default: '',
     },
     // 值
     value: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     // 值
     modelValue: { type: [String, Number], default: '' },
     // 节假日
     holiday: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     // 校验规则
     rules: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     // 是否是示校验图标
     verify: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   });
 
   // 内部数据
@@ -186,7 +186,7 @@
         calendar.unshift({
           date: `${last_y}-${last_m}-${prevdays}`,
           day: prevdays,
-          isLastMonth: 1
+          isLastMonth: 1,
         });
         prevdays = prevdays - 1;
       }
@@ -197,7 +197,7 @@
           day: _i,
           isToday: curr_y === y && curr_m === m && curr_d === i,
           isHoliday: props.holiday[`${y}-${m}-${_i}`]?.name ? 1 : 0,
-          holiday: props.holiday[`${y}-${m}-${_i}`]?.name
+          holiday: props.holiday[`${y}-${m}-${_i}`]?.name,
         });
       }
       for (let i = 1; calendar.length < 42; i++) {
@@ -205,14 +205,14 @@
         calendar.push({
           date: `${next_y}-${next_m}-${_i}`,
           day: _i,
-          isNextMonth: 1
+          isNextMonth: 1,
         });
       }
       return { days: calendar, y, m, d };
     }),
     value: computed(() => {
       return props.format ? idate(state.selected || props.value).format(props.format) : state.selected || props.value;
-    })
+    }),
   });
   const { curr = {} }: any = toRefs(state);
 

package/src/components/display/CalendarReg.vue

@@ -19,8 +19,8 @@
             <div
               ui-flex="col cm"
               class="r-ss b-solid bk-none b-xs"
-              :class="`${item.isToday ? 'bk-main-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
-                state.selected && state.selected === item.date ? 'active bg-main-ls co-fore' : 'hover-bg-weak'
+              :class="`${item.isToday ? 'bk-main-o-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
+                state.selected && state.selected === item.date ? 'active bg-main-o-ls co-fore' : 'hover-bg-weak'
               }`"
             >
               <span>{{ item.day }}</span>
@@ -108,40 +108,40 @@
     // 提示文案
     tips: {
       type: String,
-      default: ''
+      default: '',
     },
     // 提示文案
     placeholder: {
       type: String,
-      default: ''
+      default: '',
     },
     // 格式
     format: {
       type: String,
-      default: ''
+      default: '',
     },
     // 值
     value: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     // 值
     modelValue: { type: [String, Number], default: '' },
     // 节假日
     holiday: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     // 校验规则
     rules: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     // 是否是示校验图标
     verify: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   });
 
   // 内部数据
@@ -186,7 +186,7 @@
         calendar.unshift({
           date: `${last_y}-${last_m}-${prevdays}`,
           day: prevdays,
-          isLastMonth: 1
+          isLastMonth: 1,
         });
         prevdays = prevdays - 1;
       }
@@ -197,7 +197,7 @@
           day: _i,
           isToday: curr_y === y && curr_m === m && curr_d === i,
           isHoliday: props.holiday[`${y}-${m}-${_i}`]?.name ? 1 : 0,
-          holiday: props.holiday[`${y}-${m}-${_i}`]?.name
+          holiday: props.holiday[`${y}-${m}-${_i}`]?.name,
         });
       }
       for (let i = 1; calendar.length < 42; i++) {
@@ -205,14 +205,14 @@
         calendar.push({
           date: `${next_y}-${next_m}-${_i}`,
           day: _i,
-          isNextMonth: 1
+          isNextMonth: 1,
         });
       }
       return { days: calendar, y, m, d };
     }),
     value: computed(() => {
       return props.format ? idate(state.selected || props.value).format(props.format) : state.selected || props.value;
-    })
+    }),
   });
   const { curr = {} }: any = toRefs(state);
 

package/src/components/display/Image.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div :class="`mc-img b-solid bk-case b-xs ${imgClass}`" :style="imgStyle">
+    <div :class="`mc-img ${imgClass}`" :style="imgStyle">
       <img :src="src[srcName]" :style="`object-fit: ${fit}`" @click.stop="showPreview" />
       <div v-if="tools" class="mc-img-tools">
         <slot name="tools">
@@ -19,33 +19,33 @@
 
   const props: any = defineProps({
     tools: { type: Boolean, default: true },
-    srcName: { type: String, default: 'imgUrl' },
+    srcName: { type: String, default: 'url' },
     theme: { type: String, default: '@a' },
     co: { type: String, default: 'note' },
     imgClass: { type: String, default: '' },
     imgStyle: { type: String, default: '' },
     src: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     files: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     // 图片如何适应容器框,同原生object-fit
     fit: {
       type: String,
-      default: 'contain'
+      default: 'contain',
     },
     // 是否开启图片预览放大
     preview: {
       type: Boolean,
-      default: true
+      default: true,
     },
     initialSlide: {
       type: Number,
-      default: 0
-    }
+      default: 0,
+    },
   });
 
   const emit = defineEmits(['delImg']);