renusify 2.0.4 → 2.1.0

package/components/nestable/editable.js

@@ -0,0 +1,44 @@
+export default {
+    data() {
+        return {
+            name: null,
+        };
+    },
+    methods: {
+        lastId(list) {
+            let r = 0;
+            list.map((item) => {
+                if (typeof item.id === "number" && item.id > r) {
+                    r = item.id;
+                }
+                let d = this.lastId(item[this.childrenProp]);
+                if (d > r) {
+                    r = d;
+                }
+            });
+            return r;
+        },
+        add() {
+            let items = this.modelValue;
+            items.push({
+                title: this.name,
+                [this.keyProp]: this.lastId(items) + 1,
+                [this.childrenProp]: [],
+            });
+            this.$emit("update:model-value", items);
+            this.name = null;
+        },
+        del(item) {
+            const removePath = this.getSplicePath(
+                this.getPathById(item[this.keyProp]),
+                {
+                    numToRemove: 1,
+                    childrenProp: this.childrenProp,
+                }
+            );
+            let items = this.modelValue;
+            items = this.update(items, removePath);
+            this.$emit("update:model-value", items);
+        },
+    },
+};

package/components/nestable/index.js

@@ -0,0 +1 @@
+export * as rNestable from './index.vue'

package/components/nestable/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div ref="nestable" :class="`${$r.prefix}nestable`">
+    <div class="nestable-list nestable-group">
+      <template v-for="(item, index) in modelValue" :key="index">
+        <nestable-item
+            :childrenProp="childrenProp"
+            :dragItem="dragItem"
+            :editable="editable"
+            :index="index"
+            :item="item"
+            :keyProp="keyProp"
+            @delete="del"
+            @drag-start="dragstart"
+            @touch-move="touchmove"
+            @mouse-enter="mouseenter"
+            @drag-end="onDragEnd"
+        >
+          <template v-slot="{ item }">
+            <slot :item="item">{{ item }}</slot>
+          </template>
+        </nestable-item>
+      </template>
+    </div>
+    <div v-if="editable" class="d-flex v-end w-full">
+      <div class="pe-1 flex-grow-1">
+        <r-text-input v-model="name" :label="labelInput"></r-text-input>
+      </div>
+      <r-btn :disabled="!name" class="color-success" icon @click="add">
+        <r-icon v-html="$r.icons.plus"></r-icon>
+      </r-btn>
+    </div>
+  </div>
+</template>
+
+<script>
+import {defineAsyncComponent} from 'vue'
+import methods from "./methods";
+import editable from "./editable";
+
+export default {
+  name: "r-nestable",
+  components: {
+    NestableItem:defineAsyncComponent(()=>import('./NestableItem.vue')),
+  },
+  mixins: [methods, editable],
+  props: {
+    labelInput: String,
+    editable: Boolean,
+    modelValue: {
+      type: Array,
+      default: () => [],
+    },
+    threshold: {
+      type: Number,
+      default: 30,
+    },
+    maxDepth: {
+      type: Number,
+      default: 7,
+    },
+    keyProp: {
+      type: String,
+      default: "id",
+    },
+    childrenProp: {
+      type: String,
+      default: "children",
+    },
+  },
+  data() {
+    return {
+      itemsOld: null,
+      dragItem: null,
+      mouse: {
+        last: {x: 0},
+        shift: {x: 0},
+      },
+    };
+  },
+  mounted() {
+    const items = this.listAddChildren(this.modelValue, this.childrenProp);
+    this.$emit("update:model-value", items);
+  },
+  beforeUnmount() {
+    this.stopTrackMouse();
+  },
+};
+</script>
+<style lang="scss">
+@import "../../style/include";
+
+.#{$prefix}nestable {
+  .nestable-handle {
+    cursor: grab;
+  }
+
+  .is-dragging {
+    cursor: grabbing !important;
+  }
+
+  .nestable-drag-item {
+    display: none;
+  }
+
+  .nestable-item-content {
+    display: flex;
+  }
+}
+</style>

package/components/nestable/methods.js

@@ -0,0 +1,397 @@
+export default {
+    methods: {
+        listAddChildren(list, childrenProp) {
+            return list.map((item) => {
+                return {
+                    ...item,
+                    [childrenProp]: item[childrenProp]
+                        ? this.listAddChildren(item[childrenProp], childrenProp)
+                        : [],
+                };
+            });
+        },
+        mouseenter(e) {
+            this.onMouseEnter(e[0], e[1]);
+        },
+        touchmove(e) {
+            this.onMouseMove(e);
+        },
+        dragstart(e) {
+            this.onDragStart(e[0], e[1]);
+        },
+        startTrackMouse() {
+            document.addEventListener("mousemove", this.onMouseMove);
+            document.addEventListener("mouseup", this.onDragEnd);
+            document.addEventListener("touchend", this.onDragEnd);
+            document.addEventListener("touchcancel", this.onDragEnd);
+            document.addEventListener("keydown", this.onKeyDown);
+        },
+
+        stopTrackMouse() {
+            document.removeEventListener("mousemove", this.onMouseMove);
+            document.removeEventListener("mouseup", this.onDragEnd);
+            document.removeEventListener("touchend", this.onDragEnd);
+            document.removeEventListener("touchcancel", this.onDragEnd);
+            document.removeEventListener("keydown", this.onKeyDown);
+        },
+
+        onDragStart(event, item) {
+            if (event) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+
+            this.startTrackMouse();
+
+            this.dragItem = item;
+            this.itemsOld = this.modelValue;
+
+            this.$nextTick(() => {
+                this.onMouseMove(event);
+            });
+        },
+
+        onDragEnd(event, isCancel) {
+            event && event.preventDefault();
+
+            this.stopTrackMouse();
+
+            isCancel ? this.dragRevert() : this.dragApply();
+        },
+
+        onKeyDown(event) {
+            if (event.which === 27) {
+                // ESC
+                this.onDragEnd(null, true);
+            }
+        },
+
+        getXandYFromEvent(event) {
+            let {clientX, clientY} = event;
+
+            const {targetTouches} = event;
+
+            if (targetTouches) {
+                const touch = targetTouches[0];
+                clientX = touch.clientX;
+                clientY = touch.clientY;
+                const event = new Event("mouseenter");
+                const element = document.elementFromPoint(clientX, clientY);
+                const touchElement =
+                    element && element.closest(".nestable-item-content");
+                if (touchElement) touchElement.dispatchEvent(event);
+            }
+
+            return {clientX, clientY};
+        },
+
+        onMouseMove(event) {
+            event && event.preventDefault();
+
+            const {clientX} = this.getXandYFromEvent(event);
+
+            if (this.mouse.last.x === 0) {
+                this.mouse.last.x = clientX;
+            }
+
+            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;
+
+            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;
+            }
+        },
+
+        moveItem({dragItem, pathFrom, pathTo}) {
+            const realPathTo = this.getRealNextPath(pathFrom, pathTo);
+
+            const removePath = this.getSplicePath(pathFrom, {
+                numToRemove: 1,
+                childrenProp: this.childrenProp,
+            });
+
+            const insertPath = this.getSplicePath(realPathTo, {
+                numToRemove: 0,
+                itemsToInsert: [dragItem],
+                childrenProp: this.childrenProp,
+            });
+
+            let items = this.modelValue;
+            items = this.update(items, removePath);
+            items = this.update(items, insertPath);
+
+            this.pathTo = realPathTo;
+            this.$emit("update:model-value", items);
+        },
+        isEquals(x, y) {
+            return x === y;
+        },
+        copy(o) {
+            return JSON.parse(JSON.stringify(o));
+        },
+        update(object, $spec) {
+            if (!object) {
+                return;
+            }
+            const that = this;
+            const commands = {
+                $splice(value, nextObject, spec, originalObject) {
+                    value.forEach((args) => {
+                        if (nextObject === originalObject && args.length) {
+                            nextObject = that.copy(originalObject);
+                        }
+                        Array.prototype.splice.apply(nextObject, args);
+                    });
+                    return nextObject;
+                },
+            };
+            const spec = typeof $spec === "function" ? {$apply: $spec} : $spec;
+            let nextObject = object;
+            Object.keys(spec).forEach((key) => {
+                if (commands[key]) {
+                    const objectWasNextObject = object === nextObject;
+                    nextObject = commands[key](spec[key], nextObject, spec, object);
+                    if (objectWasNextObject && this.isEquals(nextObject, object)) {
+                        nextObject = object;
+                    }
+                } else {
+                    const nextValueForKey = this.update(object[key], spec[key]);
+                    const nextObjectValue = nextObject[key];
+                    if (
+                        !this.isEquals(nextValueForKey, nextObjectValue) ||
+                        (typeof nextValueForKey === "undefined" && !object[key])
+                    ) {
+                        if (nextObject === object) {
+                            nextObject = this.copy(object);
+                        }
+                        nextObject[key] = nextValueForKey;
+                    }
+                }
+            });
+            return nextObject;
+        },
+        tryIncreaseDepth(dragItem) {
+            let pathFrom;
+            try {
+                pathFrom = this.getPathById(dragItem[this.keyProp]);
+            } catch (e) {
+                this.dragRevert();
+                return;
+            }
+            const itemIndex = pathFrom[pathFrom.length - 1];
+            const newDepth = pathFrom.length + this.getItemDepth(dragItem);
+            if (itemIndex > 0 && newDepth <= this.maxDepth) {
+                const prevSibling = this.getItemByPath(
+                    pathFrom.slice(0, -1).concat(itemIndex - 1)
+                );
+
+                if (
+                    prevSibling[this.childrenProp] &&
+                    (!prevSibling[this.childrenProp].length || true)
+                ) {
+                    const pathTo = pathFrom
+                        .slice(0, -1)
+                        .concat(itemIndex - 1)
+                        .concat(prevSibling[this.childrenProp].length);
+
+                    this.moveItem({dragItem, pathFrom, pathTo});
+                }
+            }
+        },
+
+        tryDecreaseDepth(dragItem) {
+            let pathFrom;
+            try {
+                pathFrom = this.getPathById(dragItem[this.keyProp]);
+            } catch (e) {
+                this.dragRevert();
+                return;
+            }
+            const itemIndex = pathFrom[pathFrom.length - 1];
+
+            if (pathFrom.length > 1) {
+                const parent = this.getItemByPath(pathFrom.slice(0, -1));
+
+                if (itemIndex + 1 === parent[this.childrenProp].length) {
+                    const pathTo = pathFrom.slice(0, -1);
+                    pathTo[pathTo.length - 1] += 1;
+
+                    this.moveItem({dragItem, pathFrom, pathTo});
+                }
+            }
+        },
+
+        onMouseEnter(event, item) {
+            if (event) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+
+            if (!this.dragItem) return;
+
+            if (item !== null && this.dragItem[this.keyProp] === item[this.keyProp])
+                return;
+            let pathFrom;
+            try {
+                pathFrom = this.getPathById(this.dragItem[this.keyProp]);
+            } catch (e) {
+                this.dragRevert();
+                return;
+            }
+
+            if (pathFrom.length === 0) return;
+
+            let pathTo = null;
+            if (item === null) {
+                pathTo = pathFrom.length > 0 ? [] : [0];
+            } else {
+                pathTo = this.getPathById(item[this.keyProp]);
+            }
+
+            const newDepth =
+                this.getRealNextPath(pathFrom, pathTo).length +
+                (this.getItemDepth(this.dragItem) - 1);
+            if (newDepth > this.maxDepth) {
+                return;
+            }
+
+            this.moveItem({dragItem: this.dragItem, pathFrom, pathTo});
+        },
+
+        dragApply() {
+            this.$emit("change", this.dragItem, {
+                items: this.modelValue,
+                pathTo: this.pathTo,
+            });
+
+            this.pathTo = null;
+            this.itemsOld = null;
+            this.dragItem = null;
+        },
+
+        dragRevert() {
+            if (this.itemsOld) {
+                this.$emit("update:model-value", this.itemsOld);
+            }
+            this.pathTo = null;
+            this.itemsOld = null;
+            this.dragItem = null;
+        },
+        getPathById(id, items = this.modelValue) {
+            let path = [];
+            items.every((item, i) => {
+                if (item[this.keyProp] === id) {
+                    path.push(i);
+                } else if (item[this.childrenProp]) {
+                    const childrenPath = this.getPathById(id, item[this.childrenProp]);
+
+                    if (childrenPath.length) {
+                        path = path.concat(i).concat(childrenPath);
+                    }
+                }
+
+                return path.length === 0;
+            });
+
+            return path;
+        },
+
+        getItemByPath(path, items = this.modelValue) {
+            let item = null;
+
+            path.forEach((index) => {
+                const list =
+                    item && item[this.childrenProp] ? item[this.childrenProp] : items;
+                item = list[index];
+            });
+
+            return item;
+        },
+
+        getItemDepth(item) {
+            let level = 1;
+
+            if (item[this.childrenProp] && item[this.childrenProp].length > 0) {
+                const childrenDepths = item[this.childrenProp].map(this.getItemDepth);
+                level += Math.max(...childrenDepths);
+            }
+
+            return level;
+        },
+
+        getSplicePath(path, options = {}) {
+            const splicePath = {};
+            const numToRemove = options.numToRemove || 0;
+            const itemsToInsert = options.itemsToInsert || [];
+            const lastIndex = path.length - 1;
+            let currentPath = splicePath;
+
+            path.forEach((index, i) => {
+                if (i === lastIndex) {
+                    currentPath.$splice = [[index, numToRemove, ...itemsToInsert]];
+                } else {
+                    const nextPath = {};
+                    currentPath[index] = {[options.childrenProp]: nextPath};
+                    currentPath = nextPath;
+                }
+            });
+
+            return splicePath;
+        },
+
+        getRealNextPath(prevPath, nextPath) {
+            const ppLastIndex = prevPath.length - 1;
+            const npLastIndex = nextPath.length - 1;
+
+            if (prevPath.length < nextPath.length) {
+                let wasShifted = false;
+
+                return nextPath.map((nextIndex, i) => {
+                    if (wasShifted) {
+                        return i === npLastIndex ? nextIndex + 1 : nextIndex;
+                    }
+
+                    if (typeof prevPath[i] !== "number") {
+                        return nextIndex;
+                    }
+
+                    if (nextPath[i] > prevPath[i] && i === ppLastIndex) {
+                        wasShifted = true;
+                        return nextIndex - 1;
+                    }
+
+                    return nextIndex;
+                });
+            } else if (prevPath.length === nextPath.length) {
+                if (nextPath[npLastIndex] > prevPath[npLastIndex]) {
+                    const target = this.getItemByPath(nextPath);
+
+                    if (target[this.childrenProp] && target[this.childrenProp].length) {
+                        return nextPath
+                            .slice(0, -1)
+                            .concat(nextPath[npLastIndex] - 1)
+                            .concat(0);
+                    }
+                }
+            }
+
+            return nextPath;
+        },
+    },
+};

package/components/notify/index.js

@@ -0,0 +1,3 @@
+export * as rNotify from './index.vue'
+export * as l_btn from '../button/index.js'
+export * as l_icon from '../icon/index.js'

package/components/notify/index.vue

@@ -30,11 +30,11 @@
     </div>
 </template>
 <script>
-import Notification from './notification.vue'
+import {defineAsyncComponent} from 'vue'
 
 export default {
   components: {
-    notification: Notification
+    notification: defineAsyncComponent(()=>import('./notification.vue'))
   },
   props: {
     permanent: {

package/components/progress/circle.js

@@ -0,0 +1 @@
+export * as rProgressCircle from './circle.vue'

package/components/progress/line.js

@@ -0,0 +1 @@
+export * as rProgressLine from './line.vue'

package/components/searchBox/index.js

@@ -0,0 +1,8 @@
+export * as rSearchBox from './index.vue'
+export * as l_line from '../progress/line.js'
+export * as l_btn from '../button/index.js'
+export * as l_card from '../card/index.js'
+export * as l_list from '../list/index.js'
+export * as l_icon from '../icon/index.js'
+export * as l_select from '../form/selectInput/index.js'
+export * as d_clickOutside from '../../directive/clickOutSide/index.js'

package/components/searchBox/index.vue

@@ -158,7 +158,7 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "~renusify/style/include";
+@import "../../style/include";
 
 .#{$prefix}search-box {
   position: relative;

package/components/skeleton/index.js

@@ -0,0 +1 @@
+export * as rSkeleton from './index.vue'

package/components/skeleton/index.vue

@@ -27,7 +27,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "~renusify/style/include";
+@import "../../style/include";
 
 .#{$prefix}skeleton {
   .sk-card, .sk-line, .sk-avatar {

package/components/slider/index.js

@@ -0,0 +1,6 @@
+export * as rSlider from './index.vue'
+
+export * as l_btn from '../button/index.js'
+export * as l_icon from '../icon/index.js'
+export * as l_line from '../progress/line.js'
+export * as d_touch from '../../directive/touch/index.js'

package/components/swiper/index.js

@@ -0,0 +1,2 @@
+export * as rSwiper from './index.vue'
+export * as d_touch from '../../directive/touch/index.js'

package/components/table/crud/index.js

@@ -0,0 +1,20 @@
+export * as rTableCrud from './index.vue'
+export * as l_table from '../index.js'
+export * as l_modal from '../../modal/index.js'
+export * as l_card from '../../card/index.js'
+export * as l_form from '../../formCreator/index.js'
+export * as l_btn from '../../button/index.js'
+export * as l_icon from '../../icon/index.js'
+export * as l_time from '../../timeAgo/index.js'
+export * as l_confirm from '../../confirm/index.js'
+export * as l_line from '../../progress/line.js'
+export * as l_container from '../../container/index.js'
+export * as l_row from '../../container/row.js'
+export * as l_col from '../../container/col.js'
+export * as l_divider from '../../container/divider.js'
+export * as l_json from '../../form/jsonInput/index.js'
+export * as l_text from '../../form/textInput/index.js'
+export * as l_select from '../../form/selectInput/index.js'
+export * as l_date from '../../form/dateInput/index.js'
+export * as l_number from '../../form/numberInput/index.js'
+export * as l_switch from '../../form/switchInput/index.js'