renusify 2.5.1 → 3.0.0

package/components/modal/style.scss

@@ -1,146 +0,0 @@
-@use "sass:map";
-@use "../../style/variables/base";
-@use "../../style/mixins";
-@use "../../style/mixins/container" as mixins2;
-
-
-.#{base.$prefix}modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: map.get(base.$z-index, 'important');
-  background-color: var(--color-overlay);
-  backdrop-filter: blur(3px) grayscale(30%);
-}
-
-.#{base.$prefix}modal {
-  position: fixed;
-  inset: 0;
-  display: flex;
-  z-index: map.get(base.$z-index, 'important');
-  outline: none;
-
-  // Position variants
-  &.modal-center {
-    align-items: center;
-    justify-content: center;
-  }
-
-  &.modal-bottom {
-    align-items: flex-end;
-    justify-content: center;
-  }
-
-  &.modal-top {
-    align-items: flex-start;
-    justify-content: center;
-  }
-
-  &.modal-start {
-    align-items: center;
-    justify-content: flex-start;
-  }
-
-  &.modal-end {
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .modal-btn {
-    width: 100%;
-    position: relative;
-
-    .#{base.$prefix}btn {
-      position: absolute;
-      bottom: -40px;
-      z-index: map.get(base.$z-index, 'important') + 1;
-
-      @include mixins.rtl() {
-        left: 5px;
-      }
-
-      @include mixins.ltr() {
-        right: 5px;
-      }
-    }
-  }
-
-  .modal-container {
-    width: 95%;
-    max-width: 100vw;
-    max-height: 90vh;
-    z-index: map.get(base.$z-index, 'important');
-    background-color: var(--color-sheet-container-low);
-    color: var(--color-on-sheet);
-    border: 1px solid var(--color-sheet-container-low);
-    border-radius: base.$border-modal;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-
-    &.modal-bottom,
-    &.modal-top {
-      width: 100%;
-      border-radius: base.$border-modal base.$border-modal 0 0;
-
-      &:not(.modal-full-width) {
-        max-width: map.get(base.$container-max-widths, 'lg');
-      }
-    }
-
-    &.modal-start,
-    &.modal-end {
-      height: 100%;
-      max-height: 100vh;
-      border-radius: 0 base.$border-modal base.$border-modal 0;
-
-      &:not(.modal-full-height) {
-        max-height: 90vh;
-      }
-    }
-
-    &.modal-start {
-      border-radius: base.$border-modal 0 0 base.$border-modal;
-    }
-  }
-
-  .modal-content {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-
-  @include mixins2.media-breakpoint-up('md') {
-    .modal-container:not(.modal-full-width):not(.modal-mini) {
-      width: 75%;
-      max-width: 75vw;
-    }
-  }
-
-  .modal-mini {
-    max-width: 500px;
-  }
-
-  .modal-full-width {
-    width: 100%;
-    max-width: 100vw;
-  }
-
-  .modal-full-height {
-    height: 100%;
-    max-height: 100vh;
-  }
-}
-
-// Animations
-.animate-modal-vibrate {
-  animation: animate-modal-vibrate 0.15s map.get(base.$transition, 'fast-in-fast-out');
-
-  @keyframes animate-modal-vibrate {
-    0%, 100% {
-      transform: scale(1);
-    }
-    50% {
-      transform: scale(1.03);
-    }
-  }
-}

package/components/nestable/NestableItem.vue

@@ -1,307 +0,0 @@
-<template>
-  <div
-      :class="itemClasses"
-      class="nestable-handle"
-      draggable="true"
-      @dragstart="dragstart"
-      @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"
-          :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"
-          :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
-          aria-hidden="true"
-          class="mr-2"
-          icon
-          text
-      ></r-btn>
-
-      <slot :item="item">{{ item.title || `Item ${item[keyProp]}` }}</slot>
-    </div>
-
-    <transition name="nestable-children">
-      <div
-          v-if="hasChildren && !closed"
-          class="nestable-list ms-5"
-          role="group"
-      >
-        <template
-            v-for="(child, childIndex) in item[childrenProp]"
-            :key="child[keyProp]"
-        >
-          <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>
-
-<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,
-    maxDepth: Number,
-  },
-  data() {
-    return {
-      breakPoint: null,
-      moveDown: false,
-      closed: false,
-      isKeyboardNavigating: 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 classes = [
-        "nestable-item",
-        `nestable-item-${this.item[this.keyProp]}`,
-      ];
-
-      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;
-
-      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]);
-    },
-
-    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/editable.js

@@ -1,44 +0,0 @@
-export default {
-    data() {
-        return {
-            form: {},
-        };
-    },
-    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;
-            Object.assign(this.form, {
-                [this.keyProp]: this.lastId(items) + 1,
-                [this.childrenProp]: [],
-            })
-            items.push(this.form);
-            this.$emit("update:model-value", items);
-            this.form = {};
-        },
-        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

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

package/components/nestable/index.vue

@@ -1,226 +0,0 @@
-<template>
-  <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"
-            :editable="editable"
-            :index="index"
-            :item="item"
-            :keyProp="keyProp"
-            :maxDepth="maxDepth"
-            @delete="del"
-            @drag-start="dragstart"
-            @touch-move="touchmove"
-            @mouse-enter="mouseenter"
-            @drag-end="onDragEnd"
-        >
-          <template v-slot="{ item }">
-            <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 mt-3">
-      <slot :add="add" :form="form" name="form">
-        <div class="pe-1 flex-grow-1">
-          <r-text-input
-              ref="inputField"
-              v-model="form.title"
-              :label="labelInput"
-              @keydown.enter="form.title && add()"
-          ></r-text-input>
-        </div>
-        <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>
-    </div>
-  </div>
-</template>
-
-<script>
-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')),
-  },
-  mixins: [methods, editable],
-  props: {
-    labelInput: {
-      type: String,
-      default: "New item"
-    },
-    editable: {
-      type: Boolean,
-      default: false
-    },
-    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, y: 0},
-        shift: {x: 0, y: 0},
-      },
-    };
-  },
-  mounted() {
-    const items = this.listAddChildren(this.modelValue, this.childrenProp);
-    this.$emit("update:model-value", items);
-  },
-  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;
-  }
-
-  .nestable-drag-item {
-    display: none;
-  }
-
-  .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>