@neatui/vue 2.4.0 → 2.5.1

package/src/components/loader/LimitLoader/LimitLoader@v3.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="full-x" ui-flex="row xt">
-    <div class="mr-mm-sub my-sm-sub" ui-flex="row lm :wrap">
+    <div class="flex-block mr-mm-sub my-sm-sub" ui-flex="row lm wrap">
       <template v-for="(item, idx) in state.limit" :key="idx">
         <div v-if="!item._close" ui-flex="row lm" v-bind="{ ...(item.attrs || {}) }">
           <span class="nr-sm flex-fixed o-ls">{{ item.label }}{{ item.label ? ':' : '' }}</span>
@@ -22,17 +22,17 @@
         </div>
       </template>
     </div>
-    <div class="mr-sl-sub my-sm-sub nowrap" ui-flex="row rm" ui-hide="<pad">
-      <IFollowView tipBoxClass="nr-no">
-        <button ui-btn="@a s case :border">
-          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="co-read" style="width: 1em; height: 1em">
+    <div class="flex-fixed mr-sl-sub my-sm-sub nowrap" ui-flex="row rm" ui-hide="<pad">
+      <IFollowView v-if="tools" tipBoxClass="nr-no">
+        <button class="bg-fore" ui-btn="@a s case :border :square">
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="co-read fs-ss" style="width: 1em; height: 1em">
             <path
               d="M372 981.6c-80 0-154.4-43.2-195.2-112L35.2 624.8c-40-68.8-40-155.2 0-224.8l141.6-244.8c40-69.6 115.2-112 195.2-112h282.4c80 0 154.4 43.2 195.2 112L991.2 400c40 68.8 40 155.2 0 224.8l-141.6 244.8c-40 69.6-115.2 112-195.2 112H372z m0-825.6c-39.2 0-76.8 21.6-96.8 56L134.4 456c-20 34.4-20 76.8 0 112l140.8 244.8c20 34.4 56.8 55.2 96.8 55.2h282.4c39.2 0 76.8-21.6 96.8-56l140.8-244.8c20-34.4 20-76.8 0-112L751.2 211.2c-20-34.4-56.8-55.2-96.8-55.2H372z m140.8 552.8c-108.8 0-196.8-88-196.8-196.8 0-108.8 88-196.8 196.8-196.8 108.8 0 196.8 88 196.8 196.8 0.8 108.8-88 196.8-196.8 196.8z m0-280c-45.6 0-83.2 37.6-83.2 83.2s37.6 83.2 83.2 83.2c22.4 0 43.2-8.8 59.2-24 16-16 24-36.8 24-59.2 0-45.6-37.6-83.2-83.2-83.2z"
-            ></path>
+            />
           </svg>
         </button>
         <template v-if="state.limit.length" #tips>
-          <div class="w-mm h-ls nr-sl" ui-scroll="x:hidden :y">
+          <div class="w-mm max-h-ls n-sl" ui-scroll="x:hidden :y">
             <div v-for="(item, idx) in state.limit" :key="idx" class="item ux-hover nowrap r-ss">
               <label class="ny-xs nx-sm" ui-form="@a type:checkbox">
                 <input :checked="!item._close" type="checkbox" @change="item._close = item._close ? 0 : 1" />
@@ -42,25 +42,9 @@
           </div>
         </template>
       </IFollowView>
-      <button ui-btn="@a s main" @click="fResetLimit">{{ words['common.reset'] || '重置' }}</button>
+      <button class="bg-fore" ui-btn="@a s case :border" @click="fResetLimit">{{ words['common.reset'] || '重置' }}</button>
     </div>
   </div>
-  <div class="mr-sl-sub my-sm-sub nowrap" ui-hide=">mob">
-    <IFollowView tipBoxClass="nr-no">
-      <button ui-btn="@a s case :border"><i class="icon icon-add2 fs-xs"></i>添加条件</button>
-      <template v-if="state.limit.length" #tips>
-        <div class="w-mm h-ls nr-sl" ui-scroll="x:hidden :y">
-          <div v-for="(item, idx) in state.limit" :key="idx" class="item ux-hover nowrap r-ss">
-            <label class="ny-xs nx-sm" ui-form="@a type:checkbox">
-              <input :checked="!item._close" type="checkbox" @change="item._close = item._close ? 0 : 1" />
-              <span>{{ item.label }}</span>
-            </label>
-          </div>
-        </div>
-      </template>
-    </IFollowView>
-    <button ui-btn="@a s main" @click="fResetLimit">{{ words['common.reset'] || '重置' }}</button>
-  </div>
 </template>
 <script lang="ts" setup>
   import { computed, reactive, watch } from 'vue';
@@ -97,12 +81,14 @@
     words?: { [key: string | number]: any };
     limit: Array<LimitProps>;
     param: any;
+    tools: boolean;
   }
 
   const props: any = withDefaults(defineProps<Props>(), {
     words: () => ({}),
     limit: () => [],
-    param: () => ({})
+    param: () => ({}),
+    tools: false
   });
 
   // 内部数据
@@ -111,6 +97,7 @@
     limit: [],
     param: {}
   });
+
   // 监听外部配置
   watch(
     () => props.limit,
@@ -152,6 +139,7 @@
     },
     { deep: true, immediate: true }
   );
+
   // 缓存交互配置
   watch(
     [() => state.limit],

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-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-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-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-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-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;