@neatui/nuxt 0.1.0

package/README.md

@@ -0,0 +1,3 @@
+# @neatui/vue
+
+[http://neatui.fekit.cn](http://neatui.fekit.cn)

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@neatui/nuxt",
+  "version": "0.1.0",
+  "description": "basic component ui",
+  "main": "./src/index.ts",
+  "license": "MIT",
+  "author": "xiaojunbo",
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
+  "scripts": {
+    "build": "rollup -c rollup.config.js"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "postcss-scss": "^4.0.9",
+    "rollup-plugin-scss": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^5.1.6"
+  },
+  "dependencies": {
+    "@fekit/floor": "^2.2.2",
+    "@fekit/follow": "^1.0.10",
+    "@fekit/itable": "^1.1.6",
+    "@fekit/pullload": "^1.3.5",
+    "@fekit/scale": "^2.0.1",
+    "@fekit/scrollto": "^3.0.3",
+    "@fekit/toast": "^2.2.3",
+    "@fekit/url": "^2.0.1",
+    "@fekit/utils": "^2.10.21",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@vue/compiler-sfc": "^3.4.30",
+    "compressorjs": "^1.2.1",
+    "echarts": "^5.5.0",
+    "rollup": "^4.18.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-vue": "^6.0.0",
+    "swiper": "^11.0.4",
+    "vue-cropper": "^0.6.4",
+    "vuedraggable": "^4.1.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,35 @@
+const resolve = require('@rollup/plugin-node-resolve');
+const commonjs = require('@rollup/plugin-commonjs');
+const vue = require('rollup-plugin-vue');
+const postcss = require('rollup-plugin-postcss');
+const typescript = require('@rollup/plugin-typescript');
+const { terser } = require('rollup-plugin-terser');
+const scss = require('postcss-scss');
+
+module.exports = {
+  input: 'src/components/loader/index.ts',
+  output: {
+    file: 'dist/bundle.js',
+    format: 'es'
+  },
+  plugins: [
+    resolve({
+      extensions: ['.js', '.ts', '.vue']
+    }),
+    commonjs(),
+    vue({
+      css: false,
+      compileTemplate: true
+    }),
+    postcss({
+      extensions: ['.css', '.scss'],
+      extract: true,
+      minimize: true,
+      syntax: scss
+    }),
+    typescript({
+      tsconfig: './tsconfig.json'
+    }),
+    terser()
+  ]
+};

package/src/components/basic/IDraggable.vue

@@ -0,0 +1,84 @@
+<template>
+  <ul>
+    <li
+      v-for="(item, idx) in list || []"
+      :key="idx"
+      class="pr drag-page-move n-sm"
+      draggable="true"
+      @dragstart.self="fMoveSta($event, list, idx)"
+      @dragend.self="fMoveEnd($event, list, idx)"
+      @dragenter.self="fMoveInt($event, list, idx)"
+      @dragover.prevent="fMoveIng($event)"
+      @dragleave="fMoveOut($event)"
+    >
+      <slot :item="item" :idx="idx">{{ item.label }}</slot>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+  import { reactive, PropType } from 'vue';
+  const props = defineProps({
+    list: {
+      type: Array as PropType<any[]>,
+      default: () => []
+    }
+  });
+  const state: any = reactive({});
+
+  // 按下
+  const fMoveSta = (e: any, arr: any, idx: any) => {
+    state.__page_moveing = 1;
+    state.__page_moveStaNode = { e, arr, idx };
+  };
+  // 移动
+  const fMoveIng = (e: any) => {
+    if (state.__page_moveing) {
+      const _h = e?.target?.getBoundingClientRect()?.height || 0;
+      const _v = _h / 2 > 0 ? _h / 2 : 0;
+      state.__page_moveEndNodeIsNext = e?.layerY > _v ? 1 : 0;
+      console.log(40, e, _v, e?.layerY > _v ? 'next' : 'prev');
+      e?.target?.setAttribute('data-ins', e?.layerY > _v ? 'next' : 'prev');
+    }
+  };
+  // 移入
+  const fMoveInt = (e: any, arr: any, idx: any, page: any = '') => {
+    if (state.__page_moveing) {
+      state.__page_moveEndNode = { e, arr, idx, page };
+    }
+  };
+  // 移出
+  const fMoveOut = (e: any) => {
+    if (state.__page_moveing) {
+      e?.target?.removeAttribute('data-ins');
+    }
+  };
+  // 松开
+  const fMoveEnd = (_e: any, arr: any, i2: any) => {
+    if (state.__page_moveing) {
+      if (state.__page_moveEndNode) {
+        const [item] = arr.splice(i2, 1);
+        let idx = state.__page_moveEndNode?.idx || 0;
+        if (state.__page_moveEndNodeIsNext && i2 >= idx) {
+          idx = idx + 1;
+        }
+        if (!state.__page_moveEndNodeIsNext && i2 < idx) {
+          idx = idx - 1;
+        }
+        state.__page_moveEndNode?.arr?.splice(idx, 0, item);
+        fMoveOut(state.__page_moveEndNode?.e);
+      }
+      state.__page_moveing = 0;
+    }
+  };
+</script>
+<style lang="scss">
+  .drag-page-move {
+    &[data-ins='prev'] {
+      box-shadow: inset 0 1px 0 0 #000;
+    }
+    &[data-ins='next'] {
+      box-shadow: inset 0 -1px 0 0 #000;
+    }
+  }
+</style>

package/src/components/basic/IDraggable@b.vue

@@ -0,0 +1,80 @@
+<template>
+  <ul ref="aaa">
+    <li
+      v-for="(item, idx) in list || []"
+      :key="idx"
+      style="user-select: none"
+      class="drag-move-item b-solid bk-line b-xs n-sm"
+      :data-move-ing="state.__moveing"
+      @mousedown="fMoveSta($event, list, idx)"
+      @mousemove="fMoveIng($event, list, idx)"
+      @mouseup="fMoveEnd($event, list, idx)"
+      @mouseleave="fMoveOut($event, list, idx)"
+    >
+      {{ item.label }}
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref, PropType } from 'vue';
+  const props = defineProps({
+    list: {
+      type: Array as PropType<any[]>,
+      default: () => []
+    }
+  });
+  const state: any = reactive({
+    __moveing: 0,
+    __x: 0,
+    __y: 0
+  });
+
+  const aaa: any = ref(null);
+
+  // class Drag {
+  //   constructor(el: any) {}
+  // }
+
+  // 按下
+  const fMoveSta = (e: any, arr: any, idx: any) => {
+    console.log('sta', e, idx);
+    state.__moveing = 1;
+    state.__x = e.clientX;
+    state.__y = e.clientY;
+    state.__e = e.target;
+    // state.__e.style.pointerEvents = 'none';
+  };
+  // 移动
+  const fMoveIng = (e: any, arr: any, idx: any) => {
+    if (state.__moveing) {
+      // const deltaX = e.clientX - state.__x;
+      // const deltaY = e.clientY - state.__y;
+      // state.__e.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+      if (e.target !== state.__e) {
+        const _h = e?.target?.getBoundingClientRect()?.height || 0;
+        const _v = _h / 2 > 0 ? _h / 2 : 0;
+        state.__moveEndNodeIsNext = e?.layerY > _v ? 1 : 0;
+        e?.target?.setAttribute('data-ins', e?.layerY > _v ? 'next' : 'prev');
+      }
+    }
+  };
+  const fMoveEnd = (e: any, arr: any, i2: any) => {
+    if (state.__moveing) {
+      e?.target?.removeAttribute('data-ins');
+    }
+    state.__moveing = 0;
+  };
+  const fMoveOut = (e: any, arr: any, idx: any) => {
+    e?.target?.removeAttribute('data-ins');
+  };
+</script>
+<style lang="scss">
+  .drag-move-item {
+    position: relative;
+    transition: all 250ms;
+    &[data-move-ing~='1'] {
+      transition: all 50ms;
+    }
+  }
+</style>

package/src/components/basic/IFollowView.vue

@@ -0,0 +1,211 @@
+<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" @mousedown="downdom">
+        <slot name="tips"></slot>
+        <div v-if="arrow" ui-tips-arrow="" v-bind="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;
+    arrow?: any;
+  }
+
+  // 入参
+  const props: any = withDefaults(defineProps<Props>(), {
+    modelValue: 0,
+    pos: 'bl',
+    event: 'click',
+    btnClass: 'dib',
+    btnStyle: 'dib',
+    tipClass: '',
+    tipStyle: '',
+    tipBoxClass: '',
+    tipBoxStyle: '',
+    arrow: {}
+  });
+
+  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,
+    tipdom: false
+  });
+
+  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 && !state.tipdom && !tip.value?.contains(target) && dom.value && !dom.value.contains(target) && !tip.value.querySelector('input:focus')) {
+      state.show = 0;
+    }
+  };
+
+  const downdom = (ev: any) => {
+    // 不记得了这个当时为什么要加上这个，这个会影响单选框的选中后不自动关闭下拉框啊～
+    // state.tipdom = true;
+    // document.addEventListener(
+    //   'mouseup',
+    //   () => {
+    //     setTimeout(() => {
+    //       state.tipdom = false;
+    //     }, 10);
+    //   },
+    //   true
+    // );
+  };
+
+  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 (!props?.pos?.includes(':fixed')) {
+          if (status === 'b') {
+            const _pos = props?.pos?.replace(/b/g, 't');
+            if (_pos) {
+              state.pos = _pos;
+            }
+          } else {
+            const _pos = props?.pos?.replace(/t/g, 'b');
+            if (_pos) {
+              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>