@neatui/vue 1.2.3 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "@fekit/floor": "^2.2.2",
-    "@fekit/follow": "^1.0.9",
-    "@fekit/itable": "^1.1.3",
+    "@fekit/follow": "^1.0.10",
+    "@fekit/itable": "^1.1.5",
     "@fekit/pullload": "^1.3.4",
     "@fekit/scale": "^2.0.1",
     "@fekit/scrollto": "^3.0.2",
@@ -23,6 +23,6 @@
     "@fekit/utils": "^2.10.7",
     "swiper": "^11.0.4",
     "vue-cropper": "^0.6.4",
-    "vuedraggable": "^2.24.3"
+    "vuedraggable": "^4.1.0"
   }
 }

package/src/components/basic/IFollowView.vue

@@ -24,9 +24,8 @@
 <script setup lang="ts">
   import { reactive, ref, onMounted, onUnmounted, watch } from 'vue';
   import Follow from '@fekit/follow';
-  // import Follow from './follow';
 
-  const emits = defineEmits(['onhide', 'onshow']);
+  const emits = defineEmits(['update:modelValue', 'onhide', 'onshow']);
 
   const area: any = document.querySelector('#ifollow');
   if (!area) {
@@ -35,15 +34,30 @@
     document.body.appendChild(el);
   }
 
-  const props = defineProps({
-    pos: { type: String, default: 'bl' },
-    event: { type: String, default: 'click' },
-    btnClass: { type: String, default: 'dib' },
-    btnStyle: { type: String, default: 'dib' },
-    tipClass: { type: String, default: '' },
-    tipStyle: { type: String, default: '' },
-    tipBoxClass: { type: String, default: '' },
-    tipBoxStyle: { type: String, default: '' }
+  // 类型
+  interface Props {
+    modelValue?: string | number;
+    pos?: string;
+    event?: string;
+    btnClass?: string;
+    btnStyle?: string;
+    tipClass?: string;
+    tipStyle?: string;
+    tipBoxClass?: string;
+    tipBoxStyle?: string;
+  }
+
+  // 入参
+  const props: any = withDefaults(defineProps<Props>(), {
+    modelValue: 0,
+    pos: 'bl',
+    event: 'click',
+    btnClass: 'dib',
+    btnStyle: 'dib',
+    tipClass: '',
+    tipStyle: '',
+    tipBoxClass: '',
+    tipBoxStyle: ''
   });
 
   const dom: any = ref(null);
@@ -90,6 +104,7 @@
       } else {
         emits('onhide');
       }
+      emits('update:modelValue', state.show);
     },
     { deep: true }
   );
@@ -145,6 +160,7 @@
   onUnmounted(() => {
     document.removeEventListener('click', cancel, true);
     state.show = 0;
+
     if (ex.value) {
       ex.value.remove();
     }

package/src/components/basic/index.ts

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

package/src/components/loader/TableLoader/TableLoader.vue

@@ -83,7 +83,7 @@
     </thead>
     <tbody :ui-tbody-load="state.load">
       <template v-if="lists.length">
-        <tr v-for="(item, idx) in lists" :key="idx" v-bind="rows.attrs" v-on="event(rows.event, item)">
+        <tr v-for="(item, idx) in lists" :key="idx" v-bind="rows.attrs" v-on="event(rows.event, item, 'td')">
           <td v-if="showSelectAll" col-fixed="1" min-width>
             <label class="mb-ss" ui-form="@a type:checkbox"><input type="checkbox" v-model="item.__selected" /><span></span></label>
           </td>
@@ -96,7 +96,8 @@
               :col-fixed-side="col.fixed || 'l'"
               :data-field="col.field"
             >
-              <TableColView :col="col" :data="item" />
+              <slot v-if="slots[col.field]" :name="col.field"></slot>
+              <TableColView v-else :col="col" :data="item" />
             </td>
           </template>
           <td v-if="slots.operate" col-fixed="r" class="ar"><slot name="operate" :item="item" :idx="idx"></slot></td>
@@ -186,6 +187,7 @@
     attrs?: Array<any> | (() => string | Array<any>);
     value?: any | (() => any);
     clear?: boolean | (() => boolean);
+    sort?: boolean | (() => boolean);
   }
   interface Props {
     words?: { [key: string]: any };

package/src/components/basic/IFollowView@v2.vue

@@ -1,188 +0,0 @@
-<template>
-  <div ref="dom" :class="btnClass" :style="btnStyle" @click="toggle" @mouseover="hovershow" @mouseout="hoverhide">
-    <slot>
-      <button ui-btn="@a s case :border"><i class="icon icon-dropdown"></i></button>
-    </slot>
-  </div>
-  <Teleport to="#ifollow" v-if="$slots.tips">
-    <div
-      ref="tip"
-      :class="tipClass"
-      :style="`position: fixed; pointer-events: none; ${tipStyle}`"
-      ui-tips="@a"
-      :ui-tips-view="state.show ? 1 : 0"
-      @mouseover="hovershow"
-      @mouseout="hoverhide"
-    >
-      <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle">
-        <slot name="tips"></slot>
-        <div ui-tips-arrow=""></div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-<script setup lang="ts">
-  import { reactive, ref, onMounted, onUnmounted, watch } from 'vue';
-  import Follow from '@fekit/follow';
-
-  const emits = defineEmits(['update:modelValue', 'onhide', 'onshow']);
-
-  const area: any = document.querySelector('#ifollow');
-  if (!area) {
-    const el = document.createElement('div');
-    el.id = 'ifollow';
-    document.body.appendChild(el);
-  }
-
-  // 类型
-  interface Props {
-    modelValue?: string | number;
-    pos: string;
-    event: string;
-    btnClass: string;
-    btnStyle: string;
-    tipClass: string;
-    tipStyle: string;
-    tipBoxClass: string;
-    tipBoxStyle: string;
-  }
-
-  // 入参
-  const props: any = withDefaults(defineProps<Props>(), {
-    modelValue: 0,
-    pos: 'bl',
-    event: 'click',
-    btnClass: 'dib',
-    btnStyle: 'dib',
-    tipClass: '',
-    tipStyle: '',
-    tipBoxClass: '',
-    tipBoxStyle: ''
-  });
-
-  const dom: any = ref(null);
-  const tip: any = ref(null);
-  const box: any = ref(null);
-  const state = reactive({
-    view: 0,
-    show: 0,
-    pos: props.pos,
-    hover: 0
-  });
-
-  const showTimer: any = ref(null);
-  const hideTimer: any = ref(null);
-  watch(
-    () => state.hover,
-    () => {
-      clearTimeout(showTimer.value);
-      clearTimeout(hideTimer.value);
-      if (state.hover) {
-        showTimer.value = setTimeout(() => {
-          state.show = 1;
-        }, 100);
-      } else {
-        hideTimer.value = setTimeout(() => {
-          state.show = 0;
-        }, 100);
-      }
-    }
-  );
-
-  // 开关
-  const toggle = () => {
-    if (props.event === 'click') {
-      state.show = state.show ? 0 : 1;
-    }
-  };
-
-  watch(
-    [() => state.show, () => state.hover],
-    () => {
-      if (state.show) {
-        emits('onshow');
-      } else {
-        emits('onhide');
-      }
-      emits('update:modelValue', state.show);
-    },
-    { deep: true }
-  );
-
-  const hovershow = () => {
-    if (props.event === 'hover') {
-      state.hover = 1;
-    }
-  };
-
-  const hoverhide = () => {
-    if (props.event === 'hover') {
-      state.hover = 0;
-    }
-  };
-
-  const show = () => {
-    state.show = 1;
-  };
-
-  const hide = () => {
-    state.show = 0;
-  };
-
-  // 取消
-  const cancel = ({ target }: any = {}) => {
-    if (tip.value && !tip.value?.contains(target) && dom.value && !dom.value.contains(target)) {
-      state.show = 0;
-    }
-  };
-
-  onMounted(() => {
-    document.addEventListener('click', cancel, true);
-  });
-
-  const ex: any = ref(null);
-  watch([() => dom.value, () => tip.value], () => {
-    if (dom.value && tip.value) {
-      ex.value = new Follow(dom.value, tip.value, (status) => {
-        if (status === 'b') {
-          const _pos = props.pos.replace(/b/g, 't');
-          state.pos = _pos;
-        } else {
-          const _pos = props.pos.replace(/t/g, 'b');
-          state.pos = _pos;
-        }
-      });
-    } else {
-      ex.value = null;
-    }
-  });
-
-  onUnmounted(() => {
-    document.removeEventListener('click', cancel, true);
-    state.show = 0;
-
-    if (ex.value) {
-      ex.value.remove();
-    }
-  });
-
-  watch(
-    () => state.show,
-    (show: any) => {
-      if (ex.value) {
-        if (show) {
-          ex.value.listen();
-        } else {
-          ex.value.remove();
-        }
-      }
-    }
-  );
-
-  defineExpose({
-    toggle,
-    show,
-    hide,
-    cancel
-  });
-</script>

package/src/components/basic/IRouterView@v2.vue.backup

@@ -1,119 +0,0 @@
-<template>
-  <div :am-view="view" :am-mode="mode" class="route-view pr full bg-back" :view-full="full ? 1 : 0" @animationend="anim">
-    <div class="full" am-view-item="list">
-      <slot name="list" :mode="mode"></slot>
-    </div>
-    <div class="full" am-view-item="item">
-      <slot name="item" :mode="mode"></slot>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-  import { ref, watch } from 'vue';
-  import { useRoute } from 'vue-router';
-
-  interface Props {
-    full?: boolean | 0 | 1;
-    once?: number;
-    mode?: 'default' | 'preview' | 'window';
-  }
-  const props: any = withDefaults(defineProps<Props>(), {
-    full: 0,
-    once: 0,
-    mode: 'default'
-  });
-
-  const route = useRoute();
-  const init = ref(0);
-  const view = ref('');
-  const anim = (e: any) => {
-    if (e.animationName === 'am-hide') {
-      view.value = route.query.id ? 'item' : 'list';
-    }
-  };
-
-  const a = () => {
-    if (init.value) {
-      if (!props.once) {
-        view.value = route.query.id ? 'iteming' : 'listing';
-      }
-    } else {
-      view.value = route.query.id ? 'item' : 'list';
-      init.value = 1;
-    }
-  };
-
-  watch(() => route.query.id, a);
-  a();
-</script>
-
-<style lang="scss">
-  // 默认模式
-  [am-view] {
-    overflow: hidden;
-
-    @keyframes am-show {
-      0% {
-        opacity: 0;
-        transform: translate3d(2em, 0, 0);
-      }
-      100% {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-      }
-    }
-    @keyframes am-hide {
-      0% {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-      }
-      100% {
-        opacity: 0;
-        transform: translate3d(2em, 0, 0);
-      }
-    }
-
-    &[view-full~='1'] {
-      position: fixed;
-      width: 100%;
-      height: 100%;
-      left: 0;
-      top: 0;
-      z-index: 15;
-    }
-
-    [am-view-item] {
-      display: none;
-
-      &[am-view-item~='row'] {
-        flex-direction: row !important;
-      }
-    }
-    &[am-view='list'] {
-      [am-view-item~='list'] {
-        flex-direction: column;
-        display: flex;
-        animation: am-show 0.35s ease both;
-      }
-    }
-    &[am-view='listing'] {
-      [am-view-item~='item'] {
-        flex-direction: column;
-        display: flex;
-        animation: am-hide 0.3s ease-in-out both;
-      }
-    }
-    &[am-view='item'] {
-      [am-view-item~='item'] {
-        display: flex;
-        animation: am-show 0.35s ease both;
-      }
-    }
-    &[am-view='iteming'] {
-      [am-view-item~='list'] {
-        display: flex;
-        animation: am-hide 0.3s ease-in-out both;
-      }
-    }
-  }
-</style>

package/src/components/basic/IRouterView@v3.vue.backup

@@ -1,252 +0,0 @@
-<template>
-  <div :am-view="view" :am-mode="mode" class="route-view pr full bg-back" :view-full="full ? 1 : 0" @animationend="anim">
-    <div class="full" am-view-item="list">
-      <slot name="list" :mode="mode"></slot>
-    </div>
-    <div v-if="mode === 'default'" class="full" am-view-item="item">
-      <slot name="item" :mode="mode"></slot>
-    </div>
-    <div v-if="mode === 'preview'" class="full" am-view-item="side" ref="SideRef">
-      <slot name="side" :mode="mode"></slot>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-  import { onMounted, ref, watch } from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
-
-  interface Props {
-    full?: boolean | 0 | 1;
-    once?: number;
-    mode?: 'default' | 'preview' | 'window';
-    queryName?: string;
-  }
-  const props: any = withDefaults(defineProps<Props>(), {
-    full: 0,
-    once: 0,
-    mode: 'default',
-    queryName: 'id'
-  });
-
-  const route = useRoute();
-  const router = useRouter();
-  const init = ref(0);
-  const view = ref('');
-  const anim = (e: any) => {
-    if (e.animationName === 'am-hide') {
-      view.value = route.query[props.queryName] ? 'item' : 'list';
-    }
-  };
-
-  const a = () => {
-    if (init.value) {
-      if (!props.once) {
-        view.value = route.query[props.queryName] ? 'iteming' : 'listing';
-      }
-    } else {
-      view.value = route.query[props.queryName] ? 'item' : 'list';
-      init.value = 1;
-    }
-  };
-
-  watch(() => route.query[props.queryName], a);
-  a();
-
-  const SideRef: any = ref(null);
-  // 取消
-  const cancel = ({ target }: any = {}) => {
-    const ifollow: any = document.querySelector('#ifollow');
-    const toasts: any = document.querySelectorAll('.mc-toast');
-    if (SideRef.value && !SideRef.value.contains(target) && !ifollow?.contains(target) && Array.from(toasts).every((t: any) => !t.contains(target))) {
-      const _query = { ...route.query };
-      delete _query[props.queryName];
-      router.push({ path: route.path, query: _query });
-    }
-  };
-  onMounted(() => {
-    document.addEventListener('click', cancel, true);
-  });
-</script>
-
-<style lang="scss">
-  // 默认模式
-  [am-view][am-mode~='default'] {
-    overflow: hidden;
-
-    @keyframes am-show {
-      0% {
-        opacity: 0;
-        transform: translate3d(2em, 0, 0);
-      }
-      100% {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-      }
-    }
-    @keyframes am-hide {
-      0% {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-      }
-      100% {
-        opacity: 0;
-        transform: translate3d(2em, 0, 0);
-      }
-    }
-
-    &[view-full~='1'] {
-      position: fixed;
-      width: 100%;
-      height: 100%;
-      left: 0;
-      top: 0;
-      z-index: 15;
-    }
-
-    [am-view-item] {
-      display: none;
-
-      &[am-view-item~='row'] {
-        flex-direction: row !important;
-      }
-    }
-    &[am-view='list'] {
-      [am-view-item~='list'] {
-        flex-direction: column;
-        display: flex;
-        animation: am-show 0.35s ease both;
-      }
-    }
-    &[am-view='listing'] {
-      [am-view-item~='item'] {
-        flex-direction: column;
-        display: flex;
-        animation: am-hide 0.3s ease-in-out both;
-      }
-    }
-    &[am-view='item'] {
-      [am-view-item~='item'] {
-        display: flex;
-        animation: am-show 0.35s ease both;
-      }
-    }
-    &[am-view='iteming'] {
-      [am-view-item~='list'] {
-        display: flex;
-        animation: am-hide 0.3s ease-in-out both;
-      }
-    }
-  }
-
-  // 默认模式
-  [am-view][am-mode~='preview'] {
-    overflow: hidden;
-
-    &[view-full~='1'] {
-      position: fixed;
-      width: 100%;
-      height: 100%;
-      left: 0;
-      top: 0;
-      z-index: 15;
-    }
-
-    [am-view-item] {
-      &[am-view-item~='row'] {
-        flex-direction: row !important;
-      }
-
-      &[am-view-item~='list'] {
-        display: flex;
-      }
-      &[am-view-item~='side'] {
-        position: absolute;
-        top: 0;
-        right: 0;
-        z-index: 10;
-        display: flex;
-        justify-content: flex-end;
-        align-items: stretch;
-        align-content: space-between;
-        pointer-events: none;
-        & > * {
-          pointer-events: auto;
-        }
-        transition: all 0.5s;
-      }
-    }
-    &[am-view='list'],
-    &[am-view='listing'] {
-      [am-view-item~='side'] {
-        display: flex;
-        opacity: 0;
-        transform: translate3d(110%, 0, 0);
-      }
-    }
-    &[am-view='item'],
-    &[am-view='iteming'] {
-      [am-view-item~='side'] {
-        display: flex;
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-      }
-    }
-  }
-
-  // 开新窗口
-
-  // 弹出窗口
-  [am-view][am-mode~='pop-up'] {
-    overflow: hidden;
-
-    &[view-full~='1'] {
-      position: fixed;
-      width: 100%;
-      height: 100%;
-      left: 0;
-      top: 0;
-      z-index: 15;
-    }
-
-    [am-view-item] {
-      &[am-view-item~='row'] {
-        flex-direction: row !important;
-      }
-
-      &[am-view-item~='list'] {
-        display: flex;
-      }
-      &[am-view-item~='side'] {
-        position: absolute;
-        top: 0;
-        right: 0;
-        z-index: 10;
-        display: flex;
-        justify-content: flex-end;
-        align-items: stretch;
-        align-content: space-between;
-        pointer-events: none;
-        & > * {
-          pointer-events: auto;
-        }
-        transition: all 0.5s;
-      }
-    }
-    &[am-view='list'],
-    &[am-view='listing'] {
-      [am-view-item~='side'] {
-        display: flex;
-        opacity: 0;
-        transform: translate3d(110%, 0, 0);
-      }
-    }
-    &[am-view='item'],
-    &[am-view='iteming'] {
-      [am-view-item~='side'] {
-        display: flex;
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-      }
-    }
-  }
-</style>

package/src/components/basic/follow.ts

@@ -1,119 +0,0 @@
-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;