@neatui/vue 1.0.0

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

@@ -0,0 +1,333 @@
+<!-- 实验性插件 -->
+<template>
+  <Teleport :to="area">
+    <div
+      v-if="state.view"
+      :am-view="am"
+      :data-key="id"
+      :style="`${`${dark}` ? 'background-color: rgba(0, 0, 0, ' + dark + ');' : ''}${zIndex ? 'z-index:' + zIndex + ';' : ''}`"
+      :view="state.view"
+      class="fekit-layer"
+    >
+      <div :ui-flex="`col ${flex}`" :style="wrapStyle" class="fekit-layer-wrap" @animationend="anim" @click="_sys_hide">
+        <slot></slot>
+      </div>
+    </div>
+  </Teleport>
+</template>
+<script lang="ts" setup>
+  import { onBeforeUnmount, PropType, reactive, ref, watch } from 'vue';
+  import { isFunction } from '@fekit/utils';
+
+  // 弹层队列
+  if (!(window as any)._FEKIT_LAYER_TASKS) {
+    (window as any)._FEKIT_LAYER_TASKS = {};
+  }
+  const _tasks: any = (window as any)._FEKIT_LAYER_TASKS;
+
+  // 弹窗入参
+  const props: any = defineProps({
+    zIndex: {
+      type: [String, Number],
+      default: ''
+    },
+    area: {
+      type: String,
+      default: '#fekit'
+    },
+    id: {
+      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'
+    },
+    flex: {
+      type: String as PropType<'lt' | 'ct' | 'rt' | 'lm' | 'cm' | 'rm' | 'lb' | 'cb' | 'rb'>,
+      default: 'cm'
+    },
+    dark: {
+      type: [String, Number],
+      default: ''
+    },
+    darkClickClose: {
+      type: Boolean,
+      default: true
+    },
+    wrapStyle: {
+      type: String,
+      default: ''
+    }
+  });
+
+  const _area: any = document.querySelector(props.area);
+  if (!_area) {
+    const el = document.createElement('div');
+    el.id = (props.area || '#fekit').substring(1);
+    el.style.position = 'absolute';
+    document.body.appendChild(el);
+  }
+
+  // 状态管理
+  const state = reactive({
+    view: 0,
+    params: {},
+    top: 0
+  });
+
+  function disableScroll() {
+    state.top = document.documentElement.scrollTop;
+    document.body.style.overflow = 'hidden';
+    document.body.style.position = 'fixed';
+    document.body.style.top = `-${state.top}px`;
+    document.body.style.width = '100%';
+  }
+
+  function enableScroll() {
+    document.body.style.removeProperty('overflow');
+    document.body.style.removeProperty('position');
+    document.body.style.removeProperty('top');
+    document.body.style.removeProperty('width');
+    window.scrollTo(0, state.top);
+  }
+
+  watch(
+    () => state.view,
+    (view: any) => {
+      if (view === 2) {
+        disableScroll();
+      }
+      if (view === 0) {
+        enableScroll();
+      }
+    },
+    { deep: true, immediate: true }
+  );
+
+  // 回调合集
+  const on: any = {
+    show: [],
+    hide: [],
+    open: [],
+    none: []
+  };
+
+  // 注入参数
+  const init = (params: any = {}) => {
+    _tasks[id].params = params;
+    if (params?.on?.show) {
+      on.show.push(params.on.show);
+    }
+    if (params?.on?.hide) {
+      on.hide.push(params.on.hide);
+    }
+    return _tasks[id];
+  };
+
+  // 显示弹层
+  const show = (params: any = {}, then = () => {}) => {
+    state.view = 2;
+    if (params?.on?.show) {
+      on.show.push(params.on.show);
+    }
+    if (params?.on?.hide) {
+      on.hide.push(params.on.hide);
+    }
+    on.show.push(then);
+  };
+
+  // 隐藏弹层
+  const hide = (_params: any = {}, then = () => {}) => {
+    if (state.view === 3) {
+      state.view = 1;
+      on.hide.push(then);
+    }
+  };
+
+  // 打开弹层(没有动画过程)
+  const open = (_params: any = {}, then = () => {}) => {
+    state.view = 3;
+    on.show.push(then);
+  };
+  // 关闭弹层(没有动画过程)
+  const none = (_params: any = {}, then = () => {}) => {
+    state.view = 0;
+    on.show.push(then);
+  };
+
+  // 点暗层关闭
+  const _sys_hide = (ev: any) => {
+    if (props.darkClickClose && ev.target.className === 'fekit-layer-wrap' && state.view === 3) {
+      state.view = 1;
+    }
+  };
+
+  // 监听动画
+  const anim = () => {
+    if (state.view === 1) {
+      state.view = 0;
+      on.hide.forEach((fun: any) => {
+        isFunction(fun) && fun();
+      });
+    }
+    if (state.view === 2) {
+      state.view = 3;
+      on.show.forEach((fun: any) => {
+        isFunction(fun) && fun();
+      });
+    }
+  };
+
+  // 注册弹层
+  const { id = '' }: any = { ...props };
+  if (_tasks[id]) {
+    console.error('Layer 有重复 id', id);
+  }
+  if (id) {
+    _tasks[id] = { init, show, hide, open, none };
+  } else {
+    console.error('Layer 必须填写全局统一的 id');
+  }
+
+  // 卸载弹层
+  onBeforeUnmount(() => {
+    delete _tasks[id];
+  });
+</script>
+<!-- <script lang="ts">
+  export const LayerById = (id: any) => {
+    return (window as any)._FEKIT_LAYER_TASKS[id];
+  };
+</script> -->
+
+<style lang="scss">
+  // 弹层
+  .fekit-layer {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 50;
+    background-color: rgba(0, 0, 0, 0.75);
+    pointer-events: none;
+
+    &-wrap {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      pointer-events: auto;
+
+      & > * {
+        position: relative !important;
+
+        &.com-dialog {
+          max-width: 80%;
+        }
+      }
+    }
+
+    &-close {
+      position: absolute;
+      width: 1.5em;
+      height: 1.5em;
+      left: 50%;
+      bottom: -2.5rem;
+      margin-left: -1rem;
+      padding: 0.25em;
+      text-align: center;
+      transform: scale(1) translate3d(0, -100%, 0);
+      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%;
+
+      &:active {
+        transform: scale(0.9);
+      }
+    }
+
+    &[view='3'] {
+      .fekit-layer-close {
+        opacity: 0.85;
+        transform: translate3d(0, 0, 0);
+      }
+    }
+
+    // &-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/LayerView/index.ts

@@ -0,0 +1,5 @@
+import Layer from './Layer.vue';
+const LayerById = (id: any) => {
+  return (window as any)._FEKIT_LAYER_TASKS[id];
+};
+export { Layer, LayerById };

package/src/components/basic/follow.ts

@@ -0,0 +1,119 @@
+import ResizeObserver from 'resize-observer-polyfill';
+
+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) {
+      window.requestAnimationFrame(() => {
+        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 = e?.getBoundingClientRect() || {};
+          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 && e.nodeType === 1) {
+        const css: any = window.getComputedStyle(e);
+        // 查询所有父组节点的最高层级
+        if (!isNaN(css.zIndex) && css.zIndex >= this.z) {
+          this.z = Number(css.zIndex) + 10;
+        }
+        // 节点是否有滚动条
+        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);
+      }
+    };
+    _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);
+    this.obs?.observe(this.dom);
+  }
+  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/basic/index.ts

@@ -0,0 +1,7 @@
+import { Layer, LayerById } from './LayerView';
+import Icon from './Icon.vue';
+import IFollowView from './IFollowView@v2.vue';
+import IPickerView from './IPickerView.vue';
+import IScrollView from './IScrollView.vue';
+import IRouterView from './IRouterView@v4.vue';
+export { Icon, IRouterView, IFollowView, IPickerView, IScrollView, Layer, LayerById };

package/src/components/display/Avatar.vue

@@ -0,0 +1 @@
+<template><div></div></template>

package/src/components/display/Badge.vue

@@ -0,0 +1 @@
+<template><div></div></template>