renusify 2.4.3 → 2.5.0

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/components/table/crud/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div :class="`${$r.prefix}table-manage`">
     <r-modal v-model="showForm" bottom full-width>
-      <slot :autoSend="autoSend" :method="method"
+      <slot :autoSend="autoSend"
+            :method="method"
             :modelValue="editedItem"
             :ok="ok"
             :options="table.option"
@@ -444,9 +445,13 @@ export default {
       this.refresh()
     },
     ok() {
-      this.refresh()
+      this.table.startTime = false
+      this.page = 1;
+      this.sortBy = null;
+      this.sortType = 0;
       this.autoSend = false
       this.showForm = false
+      this.refresh()
     },
     refresh(e) {
       this.loading = true

package/components/tabs/index.vue

@@ -98,8 +98,6 @@ export default {
 <style lang="scss">
 @use "../../style/variables/base";
 
-$btnTabsWidth: 50px;
-
 .#{base.$prefix}tabs {
   max-width: 100%;
   display: flex;
@@ -109,7 +107,7 @@ $btnTabsWidth: 50px;
     position: relative;
     margin: 0 auto;
     white-space: nowrap;
-    width: calc(100% - #{$btnTabsWidth*2});
+    width: 100%;
     overflow: auto;
 
     scroll-behavior: smooth;
@@ -149,9 +147,5 @@ $btnTabsWidth: 50px;
       margin-right: 0;
     }
   }
-
-  .btn-tabs {
-    width: $btnTabsWidth;
-  }
 }
 </style>

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.3",
+  "version": "2.5.0",
   "description": "Vue3 Framework",
   "keywords": [
     "vuejs",