renusify 2.0.4 → 2.0.6

package/components/form/json/index.vue

@@ -258,8 +258,8 @@ export default {
     textarea {
       &::selection {
         background-color: var(--color-one);
-        -webkit-text-fill-color: var(--color-one-text);
-        color: var(--color-one-text);
+        -webkit-text-fill-color: var(--color-on-one);
+        color: var(--color-on-one);
       }
 
       padding: 12px;

package/components/form/text-editor/preview.vue

@@ -1,21 +1,22 @@
 <template>
-    <div ref="editorPreview" :class="`${$r.prefix}text-editor`" v-html="$helper.cleanXss(text)"></div>
+    <div ref="editorPreview" :class="`${$r.prefix}text-editor text-editor-preview`"
+         v-html="$helper.cleanXss(text)"></div>
 </template>
 
 <script>
-    import './style.scss'
+import './style.scss'
 
-    export default {
-        name: "law",
-        props: {
-            text: String
-        },
-        data(){
-          return{
-              id:null,
-              imgs:[]
-          }
-        },
+export default {
+  name: "law",
+  props: {
+    text: String
+  },
+  data() {
+    return {
+      id: null,
+      imgs: []
+    }
+  },
         mounted() {
             this.id=setTimeout(() => {
                 this.imgs = this.$refs.editorPreview.querySelectorAll('img')

package/components/form/text-editor/style.scss

@@ -1,8 +1,10 @@
 @import '../../../style/include';
 
 .#{$prefix}text-editor {
-  background-color: var(--color-sheet-container);
-  margin-top: 20px;
+  &:not(.text-editor-preview) {
+    background-color: var(--color-sheet-container);
+    margin-top: 20px;
+  }
 
   &.input-tile {
     border-radius: map-get($borders, 'sm');

package/components/index.js

@@ -1,6 +1,5 @@
 const list = {
     'r-app': {'p': 'app/index.vue', 'c': ['r-btn', 'r-icon', 'r-spacer'], 'd': []},
-    'r-notify': {'p': 'notify/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
     'r-avatar': {'p': 'avatar/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
     'r-toolbar': {
         'p': 'bar/toolbar/index.vue',
@@ -140,6 +139,8 @@ const list = {
     'r-message': {'p': 'message/index.vue', 'c': ['r-container', 'r-row', 'r-col'], 'd': []},
     'r-meta': {'p': 'meta/index.js', 'c': [], 'd': []},
     'r-modal': {'p': 'modal/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
+    'r-nestable': {'p': 'nestable/index.vue', 'c': [], 'd': []},
+    'r-notify': {'p': 'notify/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
     'r-progress-circle': {'p': 'progress/circle.vue', 'c': [], 'd': []},
     'r-progress-line': {'p': 'progress/line.vue', 'c': [], 'd': []},
     'r-search-box': {

package/components/nestable/NestableItem.vue

@@ -0,0 +1,163 @@
+<template>
+  <div
+      :class="itemClasses"
+      class="nestable-handle"
+      draggable="true"
+      @dragstart="dragstart"
+      @touchend="touchend"
+      @touchmove="touchmove"
+      @touchstart="dragstart"
+  >
+    <div
+        class="nestable-item-content"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
+        @mousemove="onMouseMove"
+    >
+      <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"></slot>
+    </div>
+
+    <div v-if="hasChildren" class="nestable-list ms-5">
+      <template
+          v-for="(child, childIndex) in item[childrenProp]"
+          :key="childIndex"
+      >
+        <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-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></slot>
+          </template>
+        </NestableItem>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NestableItem",
+  props: {
+    editable: Boolean,
+    keyProp: String,
+    item: {
+      type: Object,
+      required: true,
+      default: () => ({}),
+    },
+    index: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    isChild: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    childrenProp: String,
+    dragItem: Object,
+  },
+  data() {
+    return {
+      breakPoint: null,
+      moveDown: false,
+    };
+  },
+
+  computed: {
+    isDragging() {
+      return (
+          this.dragItem && this.dragItem[this.keyProp] === this.item[this.keyProp]
+      );
+    },
+
+    hasChildren() {
+      return (
+          this.item[this.childrenProp] && this.item[this.childrenProp].length > 0
+      );
+    },
+
+    itemClasses() {
+      const isDragging = this.isDragging ? ["is-dragging"] : [];
+
+      return [
+        "nestable-item",
+        `nestable-item-${this.item[this.keyProp]}`,
+        ...isDragging,
+      ];
+    },
+  },
+
+  methods: {
+    del(item) {
+      this.$emit("delete", item);
+    },
+    dragstart(event) {
+      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;
+
+      if (!event.movementY) {
+        return this.sendNotification(event);
+      }
+
+      this.moveDown = event.movementY > 0;
+
+      this.breakPoint = event.target.getBoundingClientRect().height / 2;
+    },
+    onMouseLeave() {
+      this.breakPoint = null;
+    },
+    onMouseMove(event) {
+      if (!this.breakPoint) return;
+
+      const delta = event.offsetY - this.breakPoint;
+
+      if (this.moveDown && delta < this.breakPoint / 4) return;
+      if (!this.moveDown && delta > -this.breakPoint / 4) return;
+
+      this.sendNotification(event);
+    },
+    sendNotification(event) {
+      this.breakPoint = null;
+      this.$emit("mouse-enter", [event, this.item]);
+    },
+  },
+};
+</script>

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.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 NestableItem from "./NestableItem.vue";
+import methods from "./methods";
+import editable from "./editable";
+
+export default {
+  name: "r-nestable",
+  components: {
+    NestableItem,
+  },
+  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 "~renusify/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/table/index.vue

@@ -71,34 +71,27 @@
     </div>
   </div>
   <r-modal v-if="editable" v-model="showModal">
-      <r-container
-          v-sortable="{
+    <div
+        v-sortable="{
             items: cols,
             end: store_db,
             grab: '.drag-btn'
           }"
-      >
-        <r-row
-            v-for="(col, i) in cols"
-            :key="col.value+i"
-            class="no-gutters"
-        >
-          <r-col>
-            <r-card class="pa-4 ma-1 d-flex h-space-between" tile>
+    >
+      <r-card v-for="(col, i) in cols"
+              :key="i" class="pa-4 ma-1 d-flex h-space-between" tile>
                 <span class="title-1">
                   <r-btn class="drag-btn" icon text>
                     <r-icon v-html="$r.icons.drag"></r-icon>
                   </r-btn>
                   {{ col.text }}
                 </span>
-              <span>
-                                <r-switch-input :label="$t('show','renusify')" v-model="col.show"
-                                                @update:model-value="store_db(cols)"></r-switch-input>
+        <span>
+          <r-switch-input v-model="col.show" :label="$t('show','renusify')"
+                          @update:model-value="store_db(cols)"></r-switch-input>
                 </span>
-            </r-card>
-          </r-col>
-        </r-row>
-      </r-container>
+      </r-card>
+    </div>
   </r-modal>
 </template>
 

package/package.json

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