@neatui/nuxt 0.1.0 → 1.0.0

package/src/components/loader/MoveLoader/MoveLoader.vue

@@ -0,0 +1,628 @@
+<template>
+  <div id="layer-loader-root" :path="path" :class="`${!path ? '' : 'pr nl-ms'}`" :ui-lines="path ? line : null">
+    <template v-for="(item, idx) in data" :key="idx">
+      <div
+        ui-flex="row xm"
+        class="fekit-layer-loader-item ux-hover nx-ss r-ss pr z1"
+        :data-move="item._move"
+        :class="`${store.active === paths(idx) ? (store.error ? 'bg-risk+o-ss co-risk' : 'bg-main+o-ss co-main fekit-layer-node-active') : ''}${item?.attrs?.hide ? ' o-mm' : ''}`"
+        @mousedown="fMoveSta($event, data, idx, paths(idx))"
+        @mousemove="fMoveIng($event, item, paths(idx))"
+        @mouseout="fMoveOut($event, paths(idx))"
+        @mouseup="fMoveEnd($event, data, item, idx, paths(idx))"
+      >
+        <div :id="`LID${path.replace(/\./g, '')}-${idx}`" :path="paths(idx)" ui-flex="row lt" class="flex-block ny-ss" @click="store.active = paths(idx)">
+          <slot name="prefix" :item="item" :path="paths(idx)">
+            <i :class="`ml-ss mr-xs o-ms icon icon-model-${!path ? 'label' : item.model || 'null'}`"></i>
+          </slot>
+          <slot name="item" :item="item" :path="paths(idx)">
+            <span class="ux-none" ui-omit="1">
+              {{ (item.model === 'text' || !item.model ? item.value : null) || item.label || '‐‐' }}
+            </span>
+          </slot>
+          <slot name="suffix" :item="item" :path="paths(idx)"></slot>
+        </div>
+
+        <!-- Tools 区域 -->
+        <div class="move-tools">
+          <slot name="tools" :item="item" :path="paths(idx)" :moveUp="() => fMoveUp(data, idx)" :moveDown="() => fMoveDown(data, idx)">
+            <!-- 默认的上移下移按钮 -->
+            <button v-if="idx > 0" @click.stop="fMoveUp(data, idx)" class="move-btn" title="上移">↑</button>
+            <button v-if="idx < data.length - 1" @click.stop="fMoveDown(data, idx)" class="move-btn" title="下移">↓</button>
+          </slot>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+<script setup lang="ts">
+  import { nextTick, reactive, ref, watch, onMounted } from 'vue';
+
+  // 事件定义
+  const store: any = reactive({
+    active: '',
+    error: false,
+    isMouseInLayer: false,
+    layer: {
+      moveing: false,
+      from: null,
+      correct: '',
+    },
+  });
+  const word: any = {};
+
+  // 类型定义
+  interface Props {
+    data?: Array<any>;
+    path?: string;
+    line?: boolean;
+  }
+  // 外部入参
+  const props: any = withDefaults(defineProps<Props>(), {
+    data: () => [],
+    path: '',
+    line: true,
+  });
+
+  // 内部状态
+  const state: any = reactive({});
+  const tools: any = ref(null);
+
+  const ph = ref(0);
+  onMounted(() => {
+    const side = document.getElementById('side-layerloader');
+    ph.value = side?.clientHeight || 0;
+  });
+
+  // 计算路径
+  const paths = (idx: number) => {
+    return props.path ? `${props.path}-${idx}` : `${idx}`;
+  };
+
+  // 上移功能
+  const fMoveUp = (data: any[], idx: number) => {
+    if (idx > 0) {
+      const item = data.splice(idx, 1)[0];
+      data.splice(idx - 1, 0, item);
+      // 更新 active 路径
+      const currentPath = paths(idx);
+      const newPath = props.path ? `${props.path}-${idx - 1}` : `${idx - 1}`;
+      if (store.active === currentPath) {
+        store.active = newPath;
+      }
+    }
+  };
+
+  // 下移功能
+  const fMoveDown = (data: any[], idx: number) => {
+    if (idx < data.length - 1) {
+      const item = data.splice(idx, 1)[0];
+      data.splice(idx + 1, 0, item);
+      // 更新 active 路径
+      const currentPath = paths(idx);
+      const newPath = props.path ? `${props.path}-${idx + 1}` : `${idx + 1}`;
+      if (store.active === currentPath) {
+        store.active = newPath;
+      }
+    }
+  };
+
+  // 是否同祖
+  function inform(from: string, data: string) {
+    const _form = from.split('.');
+    const _data = data.split('.');
+    return _form.every((part, index) => part === _data[index]);
+  }
+
+  // 按住
+  const fMoveSta = (ev: any, data: any, idx: number, paths: any) => {
+    console.log('fMoveSta called:', { paths, pathsLength: paths.length });
+    store.layer.moveing = true;
+    store.layer.from = { data, idx, dom: ev?.currentTarget, y: ev.clientY, paths };
+
+    // 添加拖拽样式
+    ev?.currentTarget?.setAttribute('data-move', 'true');
+    document.body.classList.add('dragging');
+
+    console.log('Drag started:', store.layer.from);
+  };
+
+  const fMoveIng = (ev: any, item: any, paths: any) => {
+    if (!store.layer.moveing) return;
+    console.log('fMoveIng called:', { paths, moveing: store.layer.moveing });
+    const dom = ev?.currentTarget;
+    if (!dom || dom === store.layer.from.dom) return;
+    const rect = dom.getBoundingClientRect();
+    const halfHeight = rect.height / 2 || 1;
+    const offsetY = ev?.layerY ?? ev?.offsetY ?? 0;
+    const mode = offsetY > halfHeight ? 'next' : 'prev';
+
+    store.layer.correct = mode;
+    dom.setAttribute('data-ins', mode);
+    console.log('Move mode:', mode);
+  };
+
+  // 移出
+  const fMoveOut = (ev: any, paths: any) => {
+    if (store.layer.moveing) {
+      ev?.currentTarget?.removeAttribute('data-ins');
+    }
+  };
+
+  // 松开
+  const fMoveEnd = (ev: any, data: any, item: any, idx: number, paths: any) => {
+    console.log('fMoveEnd called:', { paths, moveing: store.layer.moveing });
+    if (store.layer.moveing && !inform(store.layer.from.paths, paths)) {
+      const from = store.layer.from;
+      if (from.data && from.dom !== ev?.currentTarget) {
+        const isAdjacent =
+          (store.layer.correct === 'prev' && from.dom?.nextElementSibling === ev?.currentTarget) ||
+          (store.layer.correct === 'next' && from.dom?.previousElementSibling === ev?.currentTarget);
+
+        if (!isAdjacent) {
+          const [node] = from.data.splice(from.idx, 1);
+          let newPath = paths;
+
+          // Adjust target index if it's after the removed item in the same array
+          let targetIdx = idx;
+          if (from.data === data && from.idx < idx) {
+            targetIdx -= 1;
+          }
+
+          if (store.layer.correct === 'prev') {
+            data.splice(targetIdx, 0, node);
+            newPath = props.path ? `${props.path}-${targetIdx}` : `${targetIdx}`;
+          } else if (store.layer.correct === 'next') {
+            const insertIndex = targetIdx + 1;
+            data.splice(insertIndex, 0, node);
+            newPath = props.path ? `${props.path}-${insertIndex}` : `${insertIndex}`;
+          }
+
+          console.log('Move completed:', { from: from.paths, to: newPath });
+          requestAnimationFrame(() => {
+            store.active = newPath;
+          });
+        }
+      }
+    }
+
+    // 清理拖拽样式
+    ev?.currentTarget?.removeAttribute('data-ins');
+    store.layer.from?.dom?.removeAttribute('data-move');
+    document.body.classList.remove('dragging');
+
+    store.layer.moveing = false;
+  };
+</script>
+<style lang="scss">
+  .fekit-json-tree {
+    &,
+    * {
+      user-select: none;
+    }
+
+    &[data-item-moveing='1'] {
+      * {
+        pointer-events: none;
+      }
+      .drag-item-move {
+        pointer-events: auto !important;
+        & > dt:hover {
+          opacity: 0;
+        }
+      }
+    }
+    &[data-page-moveing='1'] {
+      * {
+        pointer-events: none;
+      }
+      .drag-page-move {
+        pointer-events: auto !important;
+        & > dt:hover {
+          opacity: 0;
+        }
+      }
+    }
+    &[data-rows-moveing='1'] {
+      * {
+        pointer-events: none;
+      }
+      .drag-rows-move {
+        pointer-events: auto !important;
+        & > dt:hover {
+          opacity: 0;
+        }
+      }
+    }
+    &[data-opts-moveing='1'] {
+      * {
+        pointer-events: none;
+      }
+      .drag-opts-move {
+        pointer-events: auto !important;
+        & > dt:hover {
+          opacity: 0;
+        }
+      }
+    }
+
+    & > dl {
+      position: relative;
+      padding-left: 0.6em;
+      &::before {
+        left: 0.2em !important;
+      }
+      dl {
+        position: relative;
+        padding-left: 1em;
+      }
+    }
+
+    dl {
+      &::before {
+        position: absolute;
+        display: block;
+        content: '';
+        width: 1px;
+        top: 1.5em;
+        bottom: 0.5em;
+        left: 0.6em;
+        background-color: var(--co-line-o-ls);
+      }
+    }
+
+    dt {
+      display: flex;
+      position: relative;
+      cursor: pointer;
+      justify-content: flex-start;
+      align-items: baseline;
+      align-content: baseline;
+      border-radius: 0.3em;
+      padding: 0 0.3em;
+      &:hover {
+        background-color: var(--co-weak);
+      }
+
+      // 图标
+      &::after {
+        position: absolute;
+        display: inline-block;
+        content: '';
+        width: 0;
+        height: 0;
+        border-width: 0.25em 0 0.25em 0.25em;
+        border-style: solid;
+        border-color: transparent;
+        border-left-color: var(--co-read);
+        top: 0.65em;
+        // margin-top: -0.3em;
+        left: -0.5em;
+        transform: rotate(90deg);
+        border-radius: 30%;
+      }
+
+      &[data-sign]::before {
+        display: inline-block;
+        position: relative;
+        min-width: 1.2em;
+        height: 1.2em;
+        content: attr(data-sign);
+        text-align: center;
+        line-height: 1.2em;
+        font-weight: bold;
+        transform: rotate(0deg) !important;
+        opacity: 0.7;
+        margin-right: 0.3em;
+        font-style: italic;
+        border-radius: 1px;
+        left: 0;
+        top: -0.45em;
+        box-sizing: content-box;
+        padding: 1px;
+        font-size: 0.5em;
+        border: 1px dotted;
+        flex-shrink: 0;
+      }
+
+      &[select='1'] {
+        color: var(--co-main);
+      }
+
+      &.fekit-json-tree-end {
+        &::after {
+          display: none;
+        }
+      }
+
+      &[data-hide='1'] {
+        &::after {
+          transform: rotate(0deg);
+        }
+        & + dd {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .omit-1 {
+    display: block;
+    overflow: hidden;
+    text-align: justify;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .fekit-json-tree-menu {
+    position: absolute;
+    height: 1em;
+    line-height: 1em;
+    right: 0;
+    top: 50%;
+    margin-top: -0.5em;
+    opacity: 0;
+    pointer-events: none;
+
+    & > * {
+      margin: 0 0.25em;
+    }
+  }
+
+  dt:hover {
+    .fekit-json-tree-menu {
+      transition: opacity 1s;
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  .fekit-json-tree-switch {
+    position: absolute;
+    width: 1em;
+    height: 1em;
+    top: 0.65em;
+    // margin-top: -0.6em;
+    left: -0.9em;
+    z-index: 2;
+  }
+
+  [data-selected='true'] {
+    background: var(--co-main-o-ss) !important;
+  }
+
+  .fekit-json-tree-tools {
+    display: flex;
+    position: relative;
+    cursor: pointer;
+    justify-content: flex-end;
+    align-items: center;
+    align-content: center;
+    flex-wrap: nowrap;
+    flex-shrink: 0;
+    font-size: 0.85em;
+    // width: 1px;
+    opacity: 0;
+    transition: all 0.25s;
+    // & > * {
+    // transform: scale(0.8);
+    // transition: all 0.5s;
+    // }
+  }
+  .drag-page-move,
+  .drag-item-move,
+  .drag-rows-move,
+  .drag-opts-move {
+    cursor: pointer;
+    &:hover {
+      & dt {
+        &:hover {
+          .fekit-json-tree-tools {
+            width: auto;
+            opacity: 1;
+            // & > * {
+            //   transform: scale(1);
+            // }
+          }
+        }
+      }
+    }
+  }
+
+  [data-ins] {
+    position: relative;
+    &:hover {
+      box-shadow: inset 0 0 0 100em var(--co-fore) !important;
+
+      & > .parent-hover\:show {
+        opacity: 0 !important;
+      }
+    }
+  }
+  // 插入前面
+  [data-ins='prev'] {
+    &::before {
+      pointer-events: none;
+      position: absolute;
+      display: block;
+      content: '';
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      box-shadow: inset 0 1px 0 0 var(--co-main-o-ls);
+    }
+
+    // &[tree-level='2'] {
+    //   &::after {
+    //     position: absolute;
+    //     display: block;
+    //     content: '组内';
+    //     left: -2rem;
+    //     top: -0.25em;
+    //     font-size: 0.6em;
+    //     font-weight: bold;
+    //   }
+    // }
+  }
+  // 插入内部
+  [data-ins='inset'] {
+    &::after {
+      pointer-events: none;
+      position: absolute;
+      display: block;
+      content: '';
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      box-shadow: inset 0 0 0 1px var(--co-main-o-ls);
+    }
+  }
+  // 插入后面
+  [data-ins='next'] {
+    &::after {
+      pointer-events: none;
+      position: absolute;
+      display: block;
+      content: '';
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      box-shadow: inset 0 -1px 0 0 var(--co-main-o-ls);
+    }
+
+    // &[tree-level='2'] {
+    //   &::after {
+    //     position: absolute;
+    //     display: block;
+    //     content: '组内';
+    //     left: -2rem;
+    //     bottom: -0.25em;
+    //     font-size: 0.6em;
+    //     font-weight: bold;
+    //   }
+    // }
+  }
+
+  .fekit-json-tree-button {
+    &:hover {
+      background: none !important;
+    }
+
+    &::before {
+      display: none !important;
+    }
+  }
+
+  .editing {
+    pointer-events: auto !important;
+  }
+
+  .fekit-json-tree-value {
+    position: relative;
+    padding: 0.25em 0.5em;
+    border-radius: 0.3em;
+    border: 1px solid var(--co-case);
+  }
+
+  .edit-logic-json-tree {
+    & {
+      min-height: 2.5em;
+      border: 1px solid var(--co-case);
+      padding: 0.25em;
+      border-radius: 0.3em;
+    }
+
+    & > dl {
+      position: relative;
+      padding-left: 0.6em;
+
+      &::before {
+        opacity: 0;
+      }
+
+      &[data-group='1'] {
+        &::before {
+          opacity: 1;
+          left: 0.3em !important;
+          width: 5px;
+          top: 0.75em;
+          bottom: 0.75em;
+          background-color: transparent;
+          border: 1px solid var(--co-note);
+
+          border-right: none !important;
+        }
+      }
+
+      dl {
+        position: relative;
+        padding-left: 0;
+        &::before {
+          opacity: 0;
+        }
+      }
+    }
+
+    dt {
+      align-items: baseline;
+      align-content: baseline;
+
+      &[data-sign]::before {
+        position: relative;
+        min-width: 1.2em;
+        height: 1.2em;
+        top: -0.35em;
+      }
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  /* 新增的 MoveLoader 工具样式 */
+  .move-tools {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    margin-left: 8px;
+  }
+
+  .fekit-layer-loader-item:hover .move-tools {
+    opacity: 1;
+  }
+
+  .move-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border: 1px solid var(--co-line);
+    background: var(--co-back);
+    color: var(--co-text);
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 12px;
+    line-height: 1;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: var(--co-main);
+      color: var(--co-back);
+      border-color: var(--co-main);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+</style>

package/src/components/loader/MoveLoader/index.ts

@@ -0,0 +1,2 @@
+import LayerLoader from './LayerLoader.vue';
+export default LayerLoader;

package/src/components/loader/MoveLoader/style.scss

@@ -0,0 +1,77 @@
+.fekit-layer-loader-item {
+  user-select: none;
+  line-height: 1.2;
+}
+
+// 箭头
+[ui-arrow] {
+  position: relative;
+  width: 1em;
+  height: 1em;
+  left: 0.1em;
+
+  // &[ui-arrow~='0'] {
+  //   &::before {
+  //     position: absolute;
+  //     display: inline-block;
+  //     content: '';
+  //     width: 0.5em;
+  //     height: 0.5em;
+  //     border: 1px solid currentColor;
+  //     top: 0.25em;
+  //     left: 0.3em;
+  //     border-radius: 50%;
+  //   }
+  // }
+  &[ui-arrow~='0'] {
+    height: 1px;
+    border-bottom: 1px dotted var(--co-case);
+    position: relative;
+    left: -5px;
+  }
+
+  &[ui-arrow~='1'] {
+    &::before {
+      position: absolute;
+      display: inline-block;
+      content: '';
+      width: 0;
+      height: 0;
+      border-width: 0.35em 0 0.35em 0.35em;
+      border-style: solid;
+      border-color: transparent;
+      border-left-color: transparent;
+      border-left-color: currentColor;
+      top: 0.2em;
+      left: 0.35em;
+      transform: rotate(90deg);
+      border-radius: 25%;
+    }
+  }
+
+  &[ui-folding~='true']::before {
+    transform: rotate(0deg);
+  }
+}
+
+// 线条
+[ui-lines] {
+  position: relative;
+  &::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 5px;
+    height: 100%;
+    left: 0.85em;
+
+    border-left: 1px dotted var(--co-case);
+    border-bottom: 1px dotted var(--co-case);
+  }
+}
+
+.fekit-layer-node-active {
+  .layer-loader-tool {
+    opacity: 1;
+  }
+}