renusify 2.5.2 → 3.0.1

package/components/img/preview.vue

@@ -35,204 +35,186 @@
   </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
-    }
+<script setup>
+import {ref, computed, onMounted, onBeforeUnmount} from 'vue'
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  maxScale: {
+    type: Number,
+    default: 5
   },
+  minScale: {
+    type: Number,
+    default: 0.1
+  },
+  showControls: {
+    type: Boolean,
+    default: true
+  }
+})
+
+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)
 
-  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
-    };
+  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
   }
-};
-</script>
+
+  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(() => {
+  container.value.addEventListener('mousemove', handleDrag)
+  container.value.addEventListener('mouseup', endDrag)
+  container.value.addEventListener('touchmove', handleDrag, {passive: false})
+  container.value.addEventListener('touchend', endDrag)
+  container.value.addEventListener('resize', updateContainerSize)
+})
+
+onBeforeUnmount(() => {
+  container.value.removeEventListener('mousemove', handleDrag)
+  container.value.removeEventListener('mouseup', endDrag)
+  container.value.removeEventListener('touchmove', handleDrag)
+  container.value.removeEventListener('touchend', endDrag)
+  container.value.removeEventListener('resize', updateContainerSize)
+})
+</script>

package/components/img/svgImg.vue

@@ -1,45 +1,48 @@
 <template>
-  <span ref="img"></span>
+  <span ref="imgRef"></span>
 </template>
-<script>
-export default {
-  name: "svgImg",
-  props: {
-    link: String,
-    size: Object
-  },
-  created() {
-    this.ImgToSvg()
-  },
-  methods: {
-    replace(svg) {
-      if (!this.$refs.img) {
-        setTimeout(() => {
-          this.replace(svg)
-        }, 10)
-        return
-      }
-      this.$refs.img.replaceWith(svg)
-    },
-    ImgToSvg() {
-      const that = this
-      fetch(this.link).then(x => {
-        x.text().then((d) => {
-          const el = document.createElement('div')
-          el.innerHTML = d
-          let svg = el.querySelector('svg')
-          if (svg) {
-            svg.setAttribute('width', that.size.width + 'px')
-            svg.setAttribute('height', that.size.height + 'px')
-            that.replace(svg)
-          }
-        })
-      })
-    }
+<script setup>
+import {ref, onMounted, nextTick} from 'vue'
+
+const props = defineProps({
+  link: String,
+  size: Object
+})
+
+const imgRef = ref(null)
+
+const replace = (svg) => {
+  if (!imgRef.value) {
+    nextTick(() => {
+      replace(svg)
+    })
+    return
   }
+  imgRef.value.replaceWith(svg)
 }
-</script>
 
-<style lang="scss">
+const imgToSvg = () => {
+  fetch(props.link)
+      .then(response => response.text())
+      .then(data => {
+        const el = document.createElement('div')
+        el.innerHTML = data
+        const svg = el.querySelector('svg')
+
+        if (svg && props.size) {
+          svg.setAttribute('width', `${props.size.width}px`)
+          svg.setAttribute('height', `${props.size.height}px`)
+          replace(svg)
+        }
+      })
+      .catch(error => {
+        console.error('Failed to load SVG:', error)
+      })
+}
+
+onMounted(() => {
+  imgToSvg()
+})
+
+</script>
 
-</style>

package/components/index.js

@@ -1,17 +1,10 @@
 export * as rApp from './app/index.js'
 export * as rAvatar from './avatar/index.js'
-export * as rToolbar from './bar/toolbar/index.js'
-export * as rBottomNavigation from './bar/bottomNav.js'
-export * as rBottomNavigationCircle from './bar/bottomNavigationCircle.js'
-export * as rBreadcrumbs from './breadcrumb/index.js'
 export * as rBtn from './button/index.js'
 export * as rBtnConfirm from './button/buttonConfirm.js'
+export * as rBtnGroup from './button/buttonGroup.js'
 export * as rCalendar from './calendar/index.js'
 export * as rCard from './card/index.js'
-export * as rChart from './chart/chart.js'
-export * as rChartMap from './chart/worldMap.js'
-export * as rChat from './chat/index.js'
-export * as rChip from './chip/index.js'
 export * as rCodeEditor from './codeEditor/index.js'
 export * as rConfirm from './confirm/index.js'
 export * as rContainer from './container/index.js'
@@ -20,17 +13,17 @@ export * as rCol from './container/col.js'
 export * as rSpacer from './container/spacer.js'
 export * as rDivider from './container/divider.js'
 export * as rContent from './content/index.js'
-export * as rCountDown from './countdown/index.js'
 export * as rCropper from './cropper/index.js'
 export * as rFloat from './float/index.js'
 export * as rForm from './form/index.js'
+export * as rInput from './form/input/index.js'
 export * as rColorInput from './form/colorInput/index.js'
 export * as rDateInput from './form/dateInput/index.js'
 export * as rFileInput from './form/fileInput/index.js'
 export * as rTelInput from './form/telInput/index.js'
 export * as rJsonInput from './form/jsonInput/index.js'
-export * as rTextEditor from './form/text-editor/index.js'
-export * as rTextEditorPreview from './form/text-editor/preview.js'
+export * as rTextEditor from './form/textEditor/index.js'
+export * as rTextEditorPreview from './form/textEditor/preview.js'
 export * as rTimeInput from './form/timeInput/index.js'
 export * as rTimeRangeInput from './form/timeInput/range.js'
 export * as rUniqueInput from './form/uniqueInput/index.js'
@@ -39,7 +32,6 @@ export * as rCamInput from './form/camInput/index.js'
 export * as rCheckInput from './form/checkInput/index.js'
 export * as rCheckboxInput from './form/checkboxInput/index.js'
 export * as rGroupInput from './form/groupInput/index.js'
-export * as rInput from './form/input/index.js'
 export * as rMaskInput from './form/maskInput/index.js'
 export * as rNumberInput from './form/numberInput/index.js'
 export * as rPasswordInput from './form/passwordInput/index.js'
@@ -54,18 +46,13 @@ export * as rUnitInput from './form/unitInput/index.js'
 export * as rFormCreator from './formCreator/index.js'
 export * as rIcon from './icon/index.js'
 export * as rImg from './img/index.js'
-export * as rInfiniteDiv from './infinite/div.js'
-export * as rInfinitePage from './infinite/page.js'
-export * as rInfiniteBox from './infinite/index.js'
-export * as rList from './list/index.js'
+export * as rInfinite from './infinite/index.js'
 export * as rMap from './map/index.js'
 export * as rMapSelect from './map/select.js'
 export * as rMapRoute from './map/route.js'
 export * as rMenu from './menu/index.js'
-export * as rMessage from './message/index.js'
 export * as rMeta from './meta/index.js'
 export * as rModal from './modal/index.js'
-export * as rNestable from './nestable/index.js'
 export * as rNotify from './notify/index.js'
 export * as rProgressCircle from './progress/circle.js'
 export * as rProgressLine from './progress/line.js'
@@ -74,9 +61,7 @@ export * as rSlider from './slider/index.js'
 export * as rSwiper from './swiper/index.js'
 export * as rTable from './table/index.js'
 export * as rTableCrud from './table/crud/index.js'
-export * as rTabs from './tabs/index.js'
 export * as rTimeAgo from './timeAgo/index.js'
-export * as rTimeline from './timeline/index.js'
 export * as rTour from './tour/index.js'
 export * as rTree from './tree/index.js'
 export * as rHighlight from './highlight/index.js'

package/components/infinite/index.js

@@ -1,7 +1,7 @@
-export * as rInfiniteBox from './index.vue'
-export * as l_div from './div.js'
+export * as rInfinite from './index.vue'
 export * as l_card from '../card/index.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_switch from '../form/switchInput/index.js'
+export * as l_switch from '../form/switchInput/index.js'
+export * as d_scroll from '../../directive/scroll/index.js'