renusify 2.4.3 → 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,9 @@
       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() {
         right: -300px;
       }
@@ -40,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;
@@ -54,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;
         }
@@ -94,7 +96,6 @@
     &:before {
       content: '-';
       position: absolute;
-      color: #9e9e9e;
       @include mixins.rtl() {
         right: -8px;
       }
@@ -105,15 +106,15 @@
   }
 
   .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;
     @include mixins.rtl() {
-      border-right: 1px solid #9e9e9e;
+      border-right: 1px solid;
     }
     @include mixins.ltr() {
-      border-left: 1px solid #9e9e9e;
+      border-left: 1px solid;
     }
   }
 
@@ -128,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/chart/chart.vue

@@ -3,34 +3,59 @@
 </template>
 
 <script>
-
 export default {
-  name: "r-chart",
+  name: 'r-chart',
   props: {
+    url: {type: String, default: 'https://codenus.com/storage/chart/apexcharts.js'},
+    dark: Boolean,
     options: Object
   },
   data() {
     return {
       chartShape: null,
-      Chart: null
-    };
+      timeout_id: null
+    }
   },
-  mounted(){
-    import('./apexcharts.js').then((d) => {
-      this.Chart=d.default;
+  mounted() {
+    let children = document.querySelectorAll('[name=\'apexcharts\']')
+    if (children.length === 0) {
+      let el = document.createElement('script')
+      el.setAttribute('src', this.url)
+      el.setAttribute('name', 'apexcharts')
+      document.head.append(el)
+    }
+    if (this.dark) {
+      if (!this.options['theme']) {
+        this.options['theme'] = {}
+      }
+      this.options['theme']['mode'] = 'dark'
+    }
+
+    this.timeout_id = setTimeout(() => {
       this.build()
-    })
+    }, 10)
+
   },
   methods: {
-    build() {
-      this.chartShape = new this.Chart(this.$refs.chart, this.options);
-      this.chartShape.render()
+    build(n = 0) {
+      try {
+        this.chartShape = new ApexCharts(this.$refs.chart, this.options)
+        this.chartShape.render()
+      } catch (e) {
+        this.timeout_id = setTimeout(() => {
+          this.build(n + 1)
+        }, 100)
+        if (n > 30) {
+          console.error(e)
+        }
+      }
     }
   },
   beforeUnmount() {
-    this.chartShape.destroy();
+    clearTimeout(this.timeout_id)
+    this.chartShape.destroy()
   }
-};
+}
 </script>
 <style lang="scss">
 @use "../../style/variables/base";

package/components/form/dateInput/index.vue

@@ -1,8 +1,8 @@
 <template>
   <r-input v-bind="$attrs" :readonly="readonly" :model-value="modelValue" @click.prevent="show=true">
-    <input
-        :value="modelValue?$d(modelValueDate,withTime?'long':'medium',locale):null"
-    />
+    <div :class="`${$r.prefix}date-color-input`">
+      {{ modelValue ? $d(modelValueDate, withTime ? 'long' : 'medium', locale) : null }}
+    </div>
   </r-input>
   <r-modal :model-value="show" @update:model-value="close()" :closebtn="false" closable class="text-center">
     <div v-if="!showTime" :class="`${$r.prefix}date-input`">
@@ -364,6 +364,9 @@ export default {
 <style lang="scss">
 @use "../../../style/variables/base";
 
+.#{base.$prefix}date-color-input {
+  color: var(--color-on-sheet);
+}
 .#{base.$prefix}date-input {
   position: relative;
   display: inline-block;

package/components/form/numberInput/index.vue

@@ -51,23 +51,12 @@ export default {
   },
   watch: {
     'modelValue': function (newVal) {
-      this.number = newVal
+      if (newVal !== undefined) {
+        this.number = newVal
+      }
     }
   },
   methods: {
-    setSplit(n) {
-      if (n && this.split > 0) {
-        const x = this.split
-        n = n.toString()
-        const step = n.indexOf('.')
-        const re = '\\d(?=(\\d{' + (x) + '})+' + (step > -1 ? '\\.' : '$') + ')';
-        return n.replace(new RegExp(re, 'g'), '$&,');
-      }
-      return n
-    },
-    set_step(number) {
-
-    },
     emit() {
       if (this.number === '' || this.number === null) {
         this.number = undefined
@@ -79,7 +68,8 @@ export default {
         d = this.max
       }
       if (this.min !== undefined && d < this.min) {
-        d = this.min
+        this.$emit('update:modelValue', undefined)
+        return
       }
 
       this.number = d
@@ -95,7 +85,7 @@ export default {
       this.number = n - this.step
       this.emit()
     }
-  },
+  }
 }
 </script>
 

package/components/form/passwordInput/index.vue

@@ -15,7 +15,7 @@
              @focusin="active=true"
              @focusout="active=false"
              @input="emit"
-             autocomplete="no"
+             :autocomplete="autocomplete"
              ref="input"
              v-model="lazyValue"
       />
@@ -61,6 +61,7 @@ export default {
     specialChar: Boolean,
     number: Boolean,
     minLength: {type: Number, default: 8},
+    autocomplete: {type: String, default: "no"},
   },
   emits: ['update:modelValue'],
   data() {

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>