@neatui/vue 1.0.0

package/README.md

@@ -0,0 +1,139 @@
+# 基础 UI 组件
+
+```javascript
+// 规则描述 Rule Description 简称 RD
+const rd = {
+  // 筛选配置
+  limit: [
+    {
+      label: '',
+      field: '',
+      paths: '',
+      enums: [],
+      modle: '',
+      value: '',
+      rules: [],
+      logic: true | false,
+      _view: 1,
+    }
+  ],
+
+  // 表格配置
+  table: [
+    {
+      label: '', // 标签名
+      field: '', // 字段名
+      paths: '', // 源数据里的JSON结构层级 如{a:{aa:{aaaa:1},b:{bb:{bbb:2}}} 如果field是bbb则需要在paths里填写'b.bb'告诉驱动器这个字段在源数据中所处的位置
+      enums: [], // 枚举
+      modle: '', // 模型 链接Link|复制Copy|图片Image|标签Tag|... 有一个特殊的自定义代码'@',当驱动器不会自动处理这个字段需要手工在业务代码里处理
+      value: '', // 显示内容，一般不填写，只有需要计算显示值时才使用，比如给显示值设置特殊格式{ value: ()=> idate(val).format('YYYY-MM-DD') }
+      event: {}, // 事件
+      attrs: {}, // 属性
+      popup: {}, // 提示（无限套娃遍历）
+      logic: true, // 逻辑控制（开启关闭）
+      fixed: true|false|1｜0｜'l'|'r' // 是否固定
+      rules: [], // 校验规则
+      view: true|false|'always', // 是否显示（自动生成静态值交互可控）
+      chlid:[], // 子元素（无限套娃遍历）
+      clear: true|false // 是否清除字段，代替logic，logic另有他用
+    }
+  ],
+
+  // 表单配置
+  form: [
+    {
+      label: '', // 标签名
+      field: '', // 字段名
+      paths: '', // 源数据里的JSON结构层级 如{a:{aa:{aaaa:1},b:{bb:{bbb:2}}} 如果field是bbb则需要在paths里填写'b.bb'告诉驱动器这个字段在源数据中所处的位置
+      enums: [], // 枚举
+      modle: '', // 模型 简写'Select'，详细写法 ['Select',{ attrName:'1' }]
+      value: '',
+      event: {}, // 事件
+      attrs: {}, // 属性
+      logic: true, // 逻辑控制（开启关闭）
+      rules: [
+        {
+          type: 'risk',
+          msg: '这是必填项',
+          required: true
+        },
+        {
+          type: 'risk',
+          msg: '请正确填写中文名',
+          validator: () => validateChineseName
+        }
+      ],
+      logic: true | false, // 是否显示
+      media: 'mob-24 pad-12 dpc-8', // 媒体查询
+
+      // 数组类型
+      array: true,
+      // 子块标题
+      title: (data: any, item: any) => {
+        return item.customerName + '的评价';
+      },
+      // 子块字段
+      child: []
+    }
+  ]
+};
+```
+
+## 封装组件
+
+```
+TableLoader           ✓
+LimitLoader           ✓
+FormView              ✓
+FormRowView           ✓
+FormColView           ✓
+
+
+Grid                  0%
+Button                0%
+Input                 ✓
+NumberInput           0%
+Radio                 0%
+Checkbox              0%
+Rate                  0%
+Slider                0%
+Select                ✓
+MoreSelect            ✓
+SearchSelect          ✓
+SearchMoreSelect      ✓
+PageSelect            ✓
+TreeSelect            ✓
+CascaderSelect        ✓
+DatePicker            50%  急
+TimePicker            50%  急
+DateTimePicker        50%  急
+Switch                50%
+Textarea              50%
+FileUpload            0%
+ImageUpload           ✓
+Avatar                0%
+Badge                 0%
+Calendar              0%
+Card                  0%
+Carousel              0%
+Collapse              0%
+Empty                 0%
+Image                 ✓
+InfiniteScroll        0%
+Pagination            ✓
+Progress              0%
+Result                0%
+Tag                   0%
+Timeline              0%
+Tree                  0%
+Tabs                  0%
+Divider               0%
+Message               0%
+```
+
+## Version
+
+```
+v1.0.0
+开源第一版本
+```

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@neatui/vue",
+  "version": "1.0.0",
+  "description": "basic component ui",
+  "main": "./src/index.ts",
+  "license": "MIT",
+  "author": "xiaojunbo",
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.1.6"
+  },
+  "dependencies": {
+    "@fekit/floor": "^2.2.2",
+    "@fekit/follow": "^1.0.9",
+    "@fekit/itable": "^1.1.3",
+    "@fekit/pullload": "^1.3.4",
+    "@fekit/scale": "^2.0.1",
+    "@fekit/scrollto": "^3.0.2",
+    "@fekit/toast": "^2.2.3",
+    "@fekit/url": "^2.0.1",
+    "@fekit/utils": "^2.10.7",
+    "swiper": "^11.0.4"
+  }
+}

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 b-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,172 @@
+<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';
+  // import Follow from './follow';
+
+  const emits = defineEmits(['onhide', 'onshow']);
+
+  const area: any = document.querySelector('#ifollow');
+  if (!area) {
+    const el = document.createElement('div');
+    el.id = 'ifollow';
+    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: '' }
+  });
+
+  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');
+      }
+    },
+    { 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/IFollowView@v2.vue

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