renusify 2.4.4 → 2.5.1

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,7 @@
       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() {
@@ -42,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;
@@ -56,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;
         }
@@ -106,7 +106,7 @@
   }
 
   .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;
@@ -129,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/form/colorInput/mixin.js

@@ -2,20 +2,24 @@ export const color = {
     methods: {
         setColorValue(color) {
             let rgba = {r: 0, g: 0, b: 0, a: 1}
-            if (/#/.test(color)) {
+            const rgbRegex = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*([01]?\.\d+)?\s*)?\)$/;
+            const hexRegex = /^#([a-f0-9]{6}|[a-f0-9]{8})$/i;
+            if (hexRegex.test(color)) {
                 rgba = this.hex2rgba(color)
-            } else if (/rgb/.test(color)) {
+            } else if (rgbRegex.test(color)) {
                 rgba = this.rgb2rgba(color)
             } else if (Object.prototype.toString.call(color) === '[object Object]') {
                 rgba = color
+            } else {
+                return
             }
             this.r = rgba.r
             this.g = rgba.g
             this.b = rgba.b
-            if (rgba.a >= 0) {
+            if (rgba.a >= 0 && rgba.a <= 1) {
                 this.a = rgba.a
             } else {
-                this.a = rgba.a || 1
+                this.a = 1
             }
 
             this.set_hsv(rgba)
@@ -56,20 +60,35 @@ export const color = {
             ctx.fillStyle = gradient
             ctx.fillRect(0, 0, width, height)
         },
-        rgb2hex({r, g, b}, toUpper) {
-            const change = (val) => ('0' + Number(val).toString(16)).slice(-2)
-            const color = `#${change(r)}${change(g)}${change(b)}`
-            return toUpper ? color.toUpperCase() : color
+        rgb2hex({r, g, b, a}, toUpper = false) {
+            const change = (val) => {
+                const hex = Math.round(val).toString(16);
+                return hex.length === 1 ? '0' + hex : hex;
+            };
+
+            let color = `#${change(r)}${change(g)}${change(b)}`;
+
+            if (a !== undefined && a !== 1) {
+                const alpha = Math.round(a * 255);
+                color += change(alpha);
+            }
+
+            return toUpper ? color.toUpperCase() : color;
         },
         hex2rgba(hex) {
             hex = hex.slice(1)
-            const change = (val) => parseInt(val, 16) || 0 // Avoid NaN situations
-            return {
-                r: change(hex.slice(0, 2)),
-                g: change(hex.slice(2, 4)),
-                b: change(hex.slice(4, 6)),
-                a: 1
+            const change = (val) => parseInt(val, 16) || 0;
+            const r = change(hex.slice(0, 2));
+            const g = change(hex.slice(2, 4));
+            const b = change(hex.slice(4, 6));
+
+            let a = 1;
+            if (hex.length === 8) {
+                const alphaHex = hex.slice(6, 8);
+                a = parseFloat((parseInt(alphaHex, 16) / 255).toFixed(2));
             }
+
+            return {r, g, b, a};
         },
         rgb2rgba(rgba) {
             rgba = (/rgba?\((.*?)\)/.exec(rgba) || ['', '0,0,0,1'])[1].split(',')

package/components/form/colorInput/picker.vue

@@ -129,9 +129,6 @@ export default {
     },
     inputHex(color) {
       const value = color.target.value
-      if (value.length !== 7) {
-        return
-      }
       this.setColorValue(value)
       this.$nextTick(() => {
 

package/components/form/numberInput/index.vue

@@ -5,7 +5,7 @@
              :active="active"
              inputControlClass="v-center"
     >
-      <r-btn @click.prevent.stop="minus" class="minus" icon :text="btnText">
+      <r-btn :disabled="min!==undefined&&number<=min" :text="btnText" class="minus" icon @click.prevent.stop="minus">
         <r-icon v-html="$r.icons.minus"></r-icon>
       </r-btn>
       <input @input="emit"
@@ -18,7 +18,7 @@
              autocomplete="no"
              v-model="number"
       />
-      <r-btn @click.prevent.stop="plus" class="plus" icon :text="btnText">
+      <r-btn :disabled="max!==undefined&&number>=max" :text="btnText" class="plus" icon @click.prevent.stop="plus">
         <r-icon v-html="$r.icons.plus"></r-icon>
       </r-btn>
     </r-input>

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/form/telInput/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="`${$r.prefix}input-tel`">
     <r-btn :disabled="!select||readonly"
-           :rounded="!c_tile" class="btn-country ltr ms-1" outlined @click.stop="toggleDropdown">
+           :rounded="!c_tile" class="btn-country ltr mr-1" outlined @click.stop="toggleDropdown">
       <div :class="activeCountry.iso2.toLowerCase()" class="iti-flag"></div>
       <span class="country-code pa-1"> +{{ activeCountry.dialCode }} </span>
       <span class="dropdown-arrow">{{ open ? "▲" : "▼" }}</span>
@@ -152,7 +152,7 @@ export default {
 
 .#{base.$prefix}input-tel {
   display: flex;
-  align-items: baseline;
+  align-items: end;
   direction: ltr;
   flex-wrap: wrap;
   .btn-country {

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,238 @@
+<template>
+  <div ref="container"
+       class="ltr"
+       :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>