renusify 2.4.4 → 2.5.0

package/components/bar/scss/toolbar.scss

@@ -12,7 +12,7 @@
       width: 40px;
       height: 40px;
       position: absolute;
-      transition: 2s all map.get(base.$transition, 'swing');
+      transition: 0.5s all map.get(base.$transition, 'swing');
       @include mixins.rtl() {
         right: -40px;
       }
@@ -25,7 +25,7 @@
       height: 100%;
       overflow: auto;
       position: absolute;
-      transition: .5s all map.get(base.$transition, 'swing');
+      transition: .3s all map.get(base.$transition, 'swing');
       background-color: var(--color-sheet);
       color: var(--color-on-sheet);
       @include mixins.rtl() {
@@ -42,7 +42,7 @@
       height: 100vh;
       z-index: map.get(base.$z-index, 'important');
       background-color: var(--color-overlay);
-      transition: 1s width map.get(base.$transition, 'swing');
+      transition: .1s width map.get(base.$transition, 'swing');
       overflow: hidden;
       @include mixins.rtl() {
         right: 0;
@@ -56,7 +56,7 @@
         width: 100vw;
       }
       .toolbar-side {
-        transition: 2s all map.get(base.$transition, 'swing');
+        transition: 0.3s all map.get(base.$transition, 'swing');
         @include mixins.rtl() {
           right: 0;
         }
@@ -106,7 +106,7 @@
   }
 
   .menu-list {
-    transition: 1s map.get(base.$transition, 'swing');
+    transition: 0.3s map.get(base.$transition, 'swing');
     min-width: 200px;
     max-height: 500px;
     overflow-y: auto;
@@ -129,7 +129,7 @@
     position: relative;
 
     .toolbar-childs {
-      transition: 1s map.get(base.$transition, 'swing');
+      transition: 0.3s map.get(base.$transition, 'swing');
       position: absolute;
       top: 40px;
       max-height: 0;

package/components/form/switchInput/index.vue

@@ -85,7 +85,7 @@ emits:['update:modelValue','change'],
     width: 100%;
     height: 100%;
     border-radius: 10px;
-    background-color: var(--color-sheet-container);
+    background-color: var(--color-border);
   }
 
   .switch-dot {

package/components/img/index.vue

@@ -1,18 +1,13 @@
 <template>
   <div v-intersect.[modifier]="check" :class="{
         [$r.prefix+'img']:true,
-        'img-hoverZoom':hoverZoom,'img-hoverDark':hoverDark,'img-hoverTitle':hoverTitle}"
+        'img-hoverZoom':hoverZoom,'img-hoverDark':hoverDark,'img-hover-preview':preview}"
        ref="rImg">
-    <div v-if="hoverTitle" class="title-3 color-white-text img-title w-full pa-1"
-         :class="{
-            'title-hs':titleHs,
-            'title-hc':titleHc,
-            'title-he':titleHe,
-            'title-vs':titleVs,
-            'title-vc':titleVc,
-            'title-ve':titleVe
-        }"
-    >{{ alt }}
+    <div v-if="preview" class="img-preview w-full h-full d-flex v-center h-center"
+    >
+      <r-btn icon @click="show_preview=true">
+        <r-icon v-html="$r.icons.eye"></r-icon>
+      </r-btn>
     </div>
     <img v-if="load &&!isSvg" ref="img" :alt="alt" :height="size.height>0?size.height:'auto'" :src="link" :style="{'height':size.height>0?undefined:'auto',
          'width':size.width>0?undefined:'auto'
@@ -21,6 +16,9 @@
          draggable="false"/>
     <svg-img v-else-if="load &&isSvg&&link" :link="link" :size="size">
     </svg-img>
+    <teleport v-if="preview&&show_preview" :to="`.${$r.prefix}app`">
+      <preview-img :src="preview" @close="show_preview=false"></preview-img>
+    </teleport>
   </div>
 </template>
 <script>
@@ -28,12 +26,16 @@ import {defineAsyncComponent} from 'vue'
 
 export default {
   name: 'r-img',
-  components: {SvgImg:defineAsyncComponent(()=>import('./svgImg.vue'))},
+  components: {
+    SvgImg: defineAsyncComponent(() => import('./svgImg.vue')),
+    previewImg: defineAsyncComponent(() => import('./preview.vue')),
+  },
   props: {
     src: {
       type: String,
       required: true
     },
+    preview: String,
     alt: {
       type: String,
       required: true
@@ -55,19 +57,13 @@ export default {
     autoSize: Boolean,
     hoverZoom: Boolean,
     hoverDark: Boolean,
-    hoverTitle: Boolean,
-    titleHs: Boolean,
-    titleHc: Boolean,
-    titleHe: Boolean,
-    titleVs: Boolean,
-    titleVc: Boolean,
-    titleVe: Boolean,
     isSvg: Boolean,
     svgCache: {type: Number, default: 86400},
     wPH: Number
   },
   data() {
     return {
+      show_preview: false,
       load: false,
       view: false,
       modifier: this.lazy !== 'no' ? 'once' : 'pre',
@@ -180,6 +176,7 @@ export default {
 }
 </script>
 <style lang="scss">
+@use "sass:map";
 @use "../../style/variables/base";
 
 .#{base.$prefix}img {
@@ -211,44 +208,65 @@ export default {
     }
   }
 
-  &.img-hoverTitle {
+  &.img-hover-preview {
     &:hover {
-      .img-title {
+      .img-preview {
+        background: rgba(0, 0, 0, 0.5);
         max-width: 100%;
       }
     }
   }
 
-  .img-title {
+  .img-preview {
+    transition: 0.1s all ease;
     position: absolute;
     z-index: 1;
+    top: 0;
+    left: 0;
     max-width: 0;
     overflow: hidden;
+  }
+}
 
-    &.title-hs {
-      text-align: start;
-    }
-
-    &.title-hc {
-      text-align: center;
-    }
-
-    &.title-he {
-      text-align: end;
-    }
+.#{base.$prefix}img-preview-container {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  position: fixed;
+  touch-action: none;
+  background: var(--color-overlay);
+  backdrop-filter: blur(3px) grayscale(30%);
+  z-index: map.get(base.$z-index, 'important');
+  top: 0;
+  left: 0;
 
-    &.title-vs {
-      top: 10px
-    }
+  .image-wrapper {
+    position: absolute;
+    will-change: transform;
+  }
 
-    &.title-vc {
-      top: 50%
-    }
+  .image-wrapper img {
+    display: block;
+  }
 
-    &.title-ve {
-      bottom: 10px
-    }
+  .controls {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    padding: 5px 10px;
+    border-radius: 5px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    z-index: 2;
+  }
 
+  .controls button {
+    padding: 2px 8px;
+    cursor: pointer;
   }
 }
 </style>

package/components/img/preview.vue

@@ -0,0 +1,237 @@
+<template>
+  <div ref="container"
+       :class="{ [$r.prefix+'img-preview-container']:true}">
+    <div
+        :style="wrapperStyle"
+        class="image-wrapper"
+        @mousedown="startDrag"
+        @touchstart="startDrag"
+        @wheel.prevent="handleWheel"
+    >
+      <span :style="imageHolderStyle">
+        <img
+            :src="src"
+            :style="imageStyle"
+            alt="Preview image"
+            @load="handleImageLoad"
+        >
+      </span>
+    </div>
+
+    <div v-if="showControls" class="controls">
+      <button @click="zoomIn">
+        <r-icon v-html="$r.icons.plus"></r-icon>
+      </button>
+      <button @click="zoomOut">
+        <r-icon v-html="$r.icons.minus"></r-icon>
+      </button>
+      <button class="font-weight-bold" @click="rotate">↻</button>
+      <button @click="reset">R</button>
+      <button @click="$emit('close',true)">
+        <r-icon v-html="$r.icons.close"></r-icon>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {computed, onBeforeUnmount, onMounted, ref} from 'vue';
+
+export default {
+  props: {
+    src: {
+      type: String,
+      required: true
+    },
+    maxScale: {
+      type: Number,
+      default: 5
+    },
+    minScale: {
+      type: Number,
+      default: 0.1
+    },
+    showControls: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  setup(props) {
+    const container = ref(null);
+    const scale = ref(1);
+    const rotation = ref(0);
+    const position = ref({x: 0, y: 0});
+    const isDragging = ref(false);
+    const dragStart = ref({x: 0, y: 0});
+    const naturalSize = ref({width: 0, height: 0});
+    const containerSize = ref({width: 0, height: 0});
+
+    const wrapperStyle = computed(() => ({
+      transform: `translate(${position.value.x}px, ${position.value.y}px)`,
+      cursor: isDragging.value ? 'grabbing' : 'grab'
+    }));
+
+    const imageStyle = computed(() => ({
+      transform: `scale(${scale.value})`,
+      transformOrigin: '0 0',
+      width: naturalSize.value.width ? `${naturalSize.value.width}px` : 'auto',
+      height: naturalSize.value.height ? `${naturalSize.value.height}px` : 'auto',
+      display: 'block'
+    }));
+    const imageHolderStyle = computed(() => ({
+      transform: `rotate(${rotation.value}deg)`,
+      transformOrigin: 'center center',
+      width: naturalSize.value.width ? `${naturalSize.value.width * scale.value}px` : 'auto',
+      height: naturalSize.value.height ? `${naturalSize.value.height * scale.value}px` : 'auto',
+      display: 'block'
+    }));
+
+    const handleImageLoad = (event) => {
+      naturalSize.value = {
+        width: event.target.naturalWidth,
+        height: event.target.naturalHeight
+      };
+      updateContainerSize();
+      centerImage();
+    };
+
+    const updateContainerSize = () => {
+      if (container.value) {
+        containerSize.value = {
+          width: container.value.clientWidth,
+          height: container.value.clientHeight
+        };
+      }
+    };
+
+    const centerImage = () => {
+      if (!container.value || !naturalSize.value.width) return;
+
+      const widthRatio = containerSize.value.width / naturalSize.value.width;
+      const heightRatio = containerSize.value.height / naturalSize.value.height;
+      const initialScale = Math.min(widthRatio, heightRatio, 1); // Don't scale up initially
+
+      scale.value = initialScale;
+      rotation.value = 0;
+
+      position.value = {
+        x: (containerSize.value.width - naturalSize.value.width * scale.value) / 2,
+        y: (containerSize.value.height - naturalSize.value.height * scale.value) / 2
+      };
+    };
+
+    const rotate = () => {
+      if (!container.value) return;
+      rotation.value = (rotation.value + 22.5) % 360;
+    };
+
+    const zoom = (factor, clientX, clientY) => {
+      if (!container.value) return;
+
+      const oldScale = scale.value;
+      scale.value = Math.min(
+          Math.max(scale.value * factor, props.minScale),
+          props.maxScale
+      );
+
+      const rect = container.value.getBoundingClientRect();
+      const containerX = clientX - rect.left;
+      const containerY = clientY - rect.top;
+
+      const imageX = (containerX - position.value.x) / oldScale;
+      const imageY = (containerY - position.value.y) / oldScale;
+
+      position.value.x = containerX - imageX * scale.value;
+      position.value.y = containerY - imageY * scale.value;
+    };
+
+    const zoomIn = () => {
+      if (!container.value) return;
+      const rect = container.value.getBoundingClientRect();
+      zoom(1.2, rect.left + rect.width / 2, rect.top + rect.height / 2);
+    };
+
+    const zoomOut = () => {
+      if (!container.value) return;
+      const rect = container.value.getBoundingClientRect();
+      zoom(0.8, rect.left + rect.width / 2, rect.top + rect.height / 2);
+    };
+
+    const reset = () => {
+      centerImage();
+    };
+
+    const startDrag = (e) => {
+      if (isDragging.value) return
+      isDragging.value = true;
+      const clientX = e.clientX || e.touches[0].clientX;
+      const clientY = e.clientY || e.touches[0].clientY;
+
+      dragStart.value = {
+        x: clientX - position.value.x,
+        y: clientY - position.value.y
+      };
+
+      e.preventDefault();
+    };
+
+    const handleDrag = (e) => {
+      if (!isDragging.value) return;
+
+      const clientX = e.clientX || (e.touches && e.touches[0].clientX);
+      const clientY = e.clientY || (e.touches && e.touches[0].clientY);
+
+      if (clientX === undefined || clientY === undefined) return;
+
+      position.value = {
+        x: clientX - dragStart.value.x,
+        y: clientY - dragStart.value.y
+      };
+      e.preventDefault();
+    };
+
+    const endDrag = () => {
+      isDragging.value = false;
+    };
+
+    const handleWheel = (e) => {
+      const factor = e.deltaY < 0 ? 1.1 : 0.9;
+      zoom(factor, e.clientX, e.clientY);
+    };
+
+    onMounted(() => {
+      window.addEventListener('mousemove', handleDrag);
+      window.addEventListener('mouseup', endDrag);
+      window.addEventListener('touchmove', handleDrag, {passive: false});
+      window.addEventListener('touchend', endDrag);
+      window.addEventListener('resize', updateContainerSize);
+    });
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('mousemove', handleDrag);
+      window.removeEventListener('mouseup', endDrag);
+      window.removeEventListener('touchmove', handleDrag);
+      window.removeEventListener('touchend', endDrag);
+      window.removeEventListener('resize', updateContainerSize);
+    });
+
+    return {
+      container,
+      scale,
+      rotation,
+      position,
+      wrapperStyle,
+      imageStyle,
+      imageHolderStyle,
+      handleImageLoad,
+      startDrag,
+      handleWheel,
+      zoomIn,
+      zoomOut,
+      reset,
+      rotate
+    };
+  }
+};
+</script>

package/components/nestable/NestableItem.vue

@@ -7,61 +7,83 @@
       @touchend="touchend"
       @touchmove="touchmove"
       @touchstart="dragstart"
+      :aria-expanded="!closed"
+      :aria-label="item.title || `Item ${item[keyProp]}`"
+      role="listitem"
   >
     <div
         class="nestable-item-content"
         @mouseenter="onMouseEnter"
         @mouseleave="onMouseLeave"
         @mousemove="onMouseMove"
+        tabindex="0"
+        @keydown="onKeyDown"
     >
       <r-btn-confirm
           v-if="editable"
-          class="color-error-text"
+          :aria-label="`Delete ${item.title || 'item'}`"
           icon
           text
           @click="del(item)"
+          class="color-error-text mr-2"
       >
         <r-icon v-html="$r.icons.delete"></r-icon>
       </r-btn-confirm>
-      <r-btn v-if="hasChildren" icon text @click="closed=!closed">
-        <r-icon v-html="closed?$r.icons.plus:$r.icons.minus"></r-icon>
+
+      <r-btn
+          v-if="hasChildren"
+          :aria-label="closed ? 'Expand' : 'Collapse'"
+          class="mr-2"
+          icon
+          text
+          @click="toggleChildren"
+      >
+        <r-icon v-html="closed ? $r.icons.plus : $r.icons.minus"></r-icon>
       </r-btn>
-      <r-btn v-else icon text></r-btn>
-      <slot :item="item">{{ item }}</slot>
+
+      <r-btn
+          v-else
+          aria-hidden="true"
+          class="mr-2"
+          icon
+          text
+      ></r-btn>
+
+      <slot :item="item">{{ item.title || `Item ${item[keyProp]}` }}</slot>
     </div>
-    <div v-if="hasChildren&&!closed" class="nestable-list ms-5">
-      <template
-          v-for="(child, childIndex) in item[childrenProp]"
-          :key="childIndex"
+
+    <transition name="nestable-children">
+      <div
+          v-if="hasChildren && !closed"
+          class="nestable-list ms-5"
+          role="group"
       >
-        <NestableItem
-            :childrenProp="childrenProp"
-            :dragItem="dragItem"
-            :index="childIndex"
-            :item="child"
-            :key-prop="keyProp"
-            is-child
-            @delete="$emit('delete', $event)"
-            @drag-start="$emit('drag-start', $event)"
-            @touch-move="$emit('touch-move', $event)"
-            @mouse-enter="$emit('mouse-enter', $event)"
-            @drag-end="$emit('drag-end', $event)"
+        <template
+            v-for="(child, childIndex) in item[childrenProp]"
+            :key="child[keyProp]"
         >
-          <template v-slot="{ item }">
-            <r-btn-confirm
-                v-if="editable"
-                class="color-error-text"
-                icon
-                text
-                @click="del(item)"
-            >
-              <r-icon v-html="$r.icons.delete"></r-icon>
-            </r-btn-confirm>
-            <slot :item="item" itemscope>{{ item }}</slot>
-          </template>
-        </NestableItem>
-      </template>
-    </div>
+          <NestableItem
+              :childrenProp="childrenProp"
+              :dragItem="dragItem"
+              :editable="editable"
+              :index="childIndex"
+              :item="child"
+              :keyProp="keyProp"
+              :maxDepth="maxDepth"
+              is-child
+              @delete="$emit('delete', $event)"
+              @drag-start="$emit('drag-start', $event)"
+              @touch-move="$emit('touch-move', $event)"
+              @mouse-enter="$emit('mouse-enter', $event)"
+              @drag-end="$emit('drag-end', $event)"
+          >
+            <template v-slot="{ item }">
+              <slot :item="item" itemscope>{{ item.title || `Item ${item[keyProp]}` }}</slot>
+            </template>
+          </NestableItem>
+        </template>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -88,12 +110,14 @@ export default {
     },
     childrenProp: String,
     dragItem: Object,
+    maxDepth: Number,
   },
   data() {
     return {
       breakPoint: null,
       moveDown: false,
-      closed: false
+      closed: false,
+      isKeyboardNavigating: false
     };
   },
   computed: {
@@ -110,28 +134,65 @@ export default {
     },
 
     itemClasses() {
-      const isDragging = this.isDragging ? ["is-dragging"] : [];
-
-      return [
+      const classes = [
         "nestable-item",
         `nestable-item-${this.item[this.keyProp]}`,
-        ...isDragging,
       ];
+
+      if (this.isDragging) {
+        classes.push("is-dragging");
+      }
+
+      if (this.isKeyboardNavigating) {
+        classes.push("is-focused");
+      }
+
+      return classes;
     },
+
+    depth() {
+      return this.getDepth(this.item);
+    }
   },
   methods: {
+    getDepth(item, level = 0) {
+      if (!item[this.childrenProp] || item[this.childrenProp].length === 0) {
+        return level;
+      }
+
+      let maxDepth = level;
+      item[this.childrenProp].forEach(child => {
+        const childDepth = this.getDepth(child, level + 1);
+        if (childDepth > maxDepth) {
+          maxDepth = childDepth;
+        }
+      });
+
+      return maxDepth;
+    },
+
+    toggleChildren() {
+      this.closed = !this.closed;
+    },
+
     del(item) {
       this.$emit("delete", item);
     },
+
     dragstart(event) {
+      event.dataTransfer.setData('text/plain', this.item[this.keyProp]);
+      event.dataTransfer.effectAllowed = 'move';
       this.$emit("drag-start", [event, this.item]);
     },
+
     touchend(event) {
       this.$emit("drag-end", event);
     },
+
     touchmove(event) {
       this.$emit("touch-move", event);
     },
+
     onMouseEnter(event) {
       if (!this.dragItem) return;
 
@@ -140,12 +201,13 @@ export default {
       }
 
       this.moveDown = event.movementY > 0;
-
       this.breakPoint = event.target.getBoundingClientRect().height / 2;
     },
+
     onMouseLeave() {
       this.breakPoint = null;
     },
+
     onMouseMove(event) {
       if (!this.breakPoint) return;
 
@@ -156,10 +218,90 @@ export default {
 
       this.sendNotification(event);
     },
+
     sendNotification(event) {
       this.breakPoint = null;
       this.$emit("mouse-enter", [event, this.item]);
     },
-  },
+
+    onKeyDown(event) {
+      // Handle keyboard navigation
+      switch (event.key) {
+        case 'ArrowUp':
+          this.navigate(-1);
+          break;
+        case 'ArrowDown':
+          this.navigate(1);
+          break;
+        case 'ArrowLeft':
+          if (!this.closed && this.hasChildren) {
+            this.closed = true;
+          }
+          break;
+        case 'ArrowRight':
+          if (this.closed && this.hasChildren) {
+            this.closed = false;
+          }
+          break;
+        case 'Enter':
+        case ' ':
+          if (this.hasChildren) {
+            this.closed = !this.closed;
+          }
+          break;
+        case 'Delete':
+          if (this.editable) {
+            this.del(this.item);
+          }
+          break;
+        default:
+          return;
+      }
+
+      event.preventDefault();
+    },
+
+    navigate(direction) {
+      // Implement keyboard navigation between items
+      this.isKeyboardNavigating = true;
+      // You'll need to implement actual navigation logic here
+      // This would involve finding the next/previous item in the tree
+      // and focusing it
+    }
+  }
 };
 </script>
+
+<style lang="scss">
+@use "../../style/variables/base";
+
+.#{base.$prefix}nestable {
+  .nestable-item {
+    outline: none;
+
+    &.is-focused {
+      box-shadow: 0 0 0 2px #4a90e2;
+    }
+  }
+
+  .nestable-children-enter-active,
+  .nestable-children-leave-active {
+    transition: all 0.3s ease;
+    overflow: hidden;
+  }
+
+  .nestable-children-enter-from,
+  .nestable-children-leave-to {
+    opacity: 0;
+    transform: translateY(-10px);
+    max-height: 0;
+  }
+
+  .nestable-children-enter-to,
+  .nestable-children-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 1000px;
+  }
+}
+</style>

package/components/nestable/index.vue

@@ -1,7 +1,11 @@
 <template>
-  <div ref="nestable" :class="`${$r.prefix}nestable`">
-    <div class="nestable-list nestable-group">
-      <template v-for="(item, index) in modelValue" :key="index">
+  <div
+      ref="nestable"
+      :class="`${$r.prefix}nestable`"
+      aria-label="Nestable list"
+  >
+    <div class="nestable-list nestable-group" role="list">
+      <template v-for="(item, index) in modelValue" :key="item[keyProp]">
         <nestable-item
             :childrenProp="childrenProp"
             :dragItem="dragItem"
@@ -9,6 +13,7 @@
             :index="index"
             :item="item"
             :keyProp="keyProp"
+            :maxDepth="maxDepth"
             @delete="del"
             @drag-start="dragstart"
             @touch-move="touchmove"
@@ -16,17 +21,31 @@
             @drag-end="onDragEnd"
         >
           <template v-slot="{ item }">
-            <slot :item="item">{{ item }}</slot>
+            <slot :item="item">{{ item.title || `Item ${item[keyProp]}` }}</slot>
           </template>
         </nestable-item>
       </template>
+
+
     </div>
-    <div v-if="editable" class="d-flex v-end w-full">
+
+    <div v-if="editable" class="d-flex v-end w-full mt-3">
       <slot :add="add" :form="form" name="form">
         <div class="pe-1 flex-grow-1">
-          <r-text-input v-model="form.title" :label="labelInput"></r-text-input>
+          <r-text-input
+              ref="inputField"
+              v-model="form.title"
+              :label="labelInput"
+              @keydown.enter="form.title && add()"
+          ></r-text-input>
         </div>
-        <r-btn :disabled="!form.title" class="color-success" icon @click="add">
+        <r-btn
+            :aria-label="'Add new item'"
+            :disabled="!form.title"
+            class="color-success"
+            icon
+            @click="add"
+        >
           <r-icon v-html="$r.icons.plus"></r-icon>
         </r-btn>
       </slot>
@@ -35,19 +54,25 @@
 </template>
 
 <script>
-import {defineAsyncComponent} from 'vue'
+import {defineAsyncComponent, nextTick} from 'vue'
 import methods from "./methods.js";
 import editable from "./editable.js";
 
 export default {
   name: "r-nestable",
   components: {
-    NestableItem:defineAsyncComponent(()=>import('./NestableItem.vue')),
+    NestableItem: defineAsyncComponent(() => import('./NestableItem.vue')),
   },
   mixins: [methods, editable],
   props: {
-    labelInput: String,
-    editable: Boolean,
+    labelInput: {
+      type: String,
+      default: "New item"
+    },
+    editable: {
+      type: Boolean,
+      default: false
+    },
     modelValue: {
       type: Array,
       default: () => [],
@@ -74,8 +99,8 @@ export default {
       itemsOld: null,
       dragItem: null,
       mouse: {
-        last: {x: 0},
-        shift: {x: 0},
+        last: {x: 0, y: 0},
+        shift: {x: 0, y: 0},
       },
     };
   },
@@ -86,17 +111,94 @@ export default {
   beforeUnmount() {
     this.stopTrackMouse();
   },
+  methods: {
+    // Override add method to focus input after adding
+    async add() {
+      let items = this.modelValue;
+      Object.assign(this.form, {
+        [this.keyProp]: this.lastId(items) + 1,
+        [this.childrenProp]: [],
+      })
+      items.push(this.form);
+      this.$emit("update:model-value", items);
+      this.form = {};
+
+      await nextTick();
+      this.$refs.inputField?.focus();
+    },
+
+    // Update mouse move for placeholder positioning
+    onMouseMove(event) {
+      event && event.preventDefault();
+
+      const {clientX, clientY} = this.getXandYFromEvent(event);
+
+      if (this.mouse.last.x === 0) {
+        this.mouse.last.x = clientX;
+        this.mouse.last.y = clientY;
+      }
+
+      const diffX = this.$r.rtl
+          ? this.mouse.last.x - clientX
+          : clientX - this.mouse.last.x;
+
+      if (
+          (diffX >= 0 && this.mouse.shift.x >= 0) ||
+          (diffX <= 0 && this.mouse.shift.x <= 0)
+      ) {
+        this.mouse.shift.x += diffX;
+      } else {
+        this.mouse.shift.x = 0;
+      }
+      this.mouse.last.x = clientX;
+      this.mouse.last.y = clientY;
+
+      if (Math.abs(this.mouse.shift.x) > this.threshold) {
+        if (this.mouse.shift.x > 0) {
+          this.tryIncreaseDepth(this.dragItem);
+        } else {
+          this.tryDecreaseDepth(this.dragItem);
+        }
+
+        this.mouse.shift.x = 0;
+      }
+    },
+
+    onDragEnd(event, isCancel = false) {
+      event?.preventDefault();
+
+      this.stopTrackMouse();
+      if (isCancel) {
+        this.dragRevert();
+      } else {
+        this.dragApply();
+      }
+
+      this.pathTo = null;
+      this.itemsOld = null;
+      this.dragItem = null;
+    },
+  }
 };
 </script>
+
 <style lang="scss">
 @use "../../style/variables/base";
 
 .#{base.$prefix}nestable {
+  position: relative;
+
   .nestable-handle {
     cursor: grab;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+
+    &:active {
+      cursor: grabbing;
+    }
   }
 
   .is-dragging {
+    opacity: 0.5;
     cursor: grabbing !important;
   }
 
@@ -106,6 +208,19 @@ export default {
 
   .nestable-item-content {
     display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    transition: background 0.2s ease;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+
+  .nestable-list {
+    position: relative;
+    transition: all 0.3s ease;
   }
 }
-</style>
+</style>

package/components/nestable/methods.js

@@ -44,7 +44,11 @@ export default {
             this.startTrackMouse();
 
             this.dragItem = item;
-            this.itemsOld = this.modelValue;
+            this.itemsOld = JSON.parse(JSON.stringify(this.modelValue));
+
+            const {clientX, clientY} = this.getXandYFromEvent(event);
+            this.mouse.last = {x: clientX, y: clientY};
+            this.mouse.shift = {x: 0, y: 0};
 
             this.$nextTick(() => {
                 this.onMouseMove(event);
@@ -119,6 +123,15 @@ export default {
         },
 
         moveItem({dragItem, pathFrom, pathTo}) {
+            if (JSON.stringify(pathFrom) === JSON.stringify(pathTo)) {
+                return;
+            }
+
+            const newDepth = pathTo.length + this.getItemDepth(dragItem);
+            if (newDepth > this.maxDepth) {
+                return;
+            }
+
             const realPathTo = this.getRealNextPath(pathFrom, pathTo);
 
             const removePath = this.getSplicePath(pathFrom, {
@@ -138,6 +151,12 @@ export default {
 
             this.pathTo = realPathTo;
             this.$emit("update:model-value", items);
+            this.$emit("change", {
+                movedItem: dragItem,
+                fromPath: pathFrom,
+                toPath: pathTo,
+                items
+            });
         },
         isEquals(x, y) {
             return x === y;

package/directive/animate/index.js

@@ -1,4 +1,4 @@
-import './style.scss'
+import 'renusify/directive/animate/style.scss'
 
 function mounted(el, binding) {
     const modifiers = binding.modifiers || {}
@@ -17,15 +17,18 @@ function mounted(el, binding) {
         observer
     ) => {
         if (!el._observe) return
-        const isIntersecting = Boolean(entries.find(entry => entry.isIntersecting))
-
+        if (el._observe.loading) return
+        const isIntersecting = entries[0].isIntersecting
         if (isIntersecting) {
+            el._observe.init = true
+            el._observe.loading = true
             setTimeout(() => {
                 if (timing) {
                     el.classList.add(timing)
                 }
                 el.classList.add('du-' + duration * 1000)
                 el.classList.add('animate')
+                el._observe.loading = false
             }, delay)
 
         } else if(!modifiers.once) {
@@ -37,12 +40,13 @@ function mounted(el, binding) {
         if (el._observe.init && modifiers.once) {
             unmounted(el, binding)
         }
-        else (el._observe.init = true)
-    }, {threshold: 0})
+    }, {threshold: value.threshold || 0})
 
-    el._observe = {init: false, observer}
+    el._observe = {init: false, loading: false, observer}
 
-    observer.observe(el)
+    setTimeout(() => {
+        observer.observe(el)
+    }, 100)
 }
 
 function unmounted(el,binding) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "renusify",
-  "version": "2.4.4",
+  "version": "2.5.0",
   "description": "Vue3 Framework",
   "keywords": [
     "vuejs",