renusify 1.0.3 → 1.0.4

package/LICENSE

@@ -1,6 +1,6 @@
 BSD 3-Clause License
 
-Copyright (c) 2021, smkoBa
+Copyright (c) 2021, https://github.com/smkoBa/renusify
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without

package/components/button/buttonGroup.vue

@@ -29,13 +29,9 @@
 </template>
 
 <script>
-import clickOutside from '../../directive/clickOutSide/index'
 
 export default {
   name: 'r-button-group',
-  directives: {
-    'click-outside': clickOutside
-  },
   props: {
     items: [Array, Object],
     icon: {

package/components/button/index.vue

@@ -23,11 +23,9 @@
 <script>
 import './style.scss'
 import { roots } from '../../tools/rootable'
-import Ripple from '../../directive/ripple/index'
 export default {
   name: 'r-btn',
   mixins: [roots],
-  directives: { ripple: Ripple },
   props: {
     tag: {
       type: String,

package/components/card/index.vue

@@ -8,13 +8,11 @@
 
 <script>
     import {roots} from '../../tools/rootable';
-    import Ripple from '../../directive/ripple/index';
     import './style.scss';
 
     export default {
         name: 'r-card',
         mixins: [roots],
-        directives: {ripple: Ripple},
         props: {
             flat: Boolean,
             hover: Boolean,

package/components/chat/MessageList.vue

@@ -14,11 +14,9 @@
 </template>
 
 <script>
-    import Scroll from "renusify/directive/scroll";
     import RChatMsg from "./chatMsg";
 
     export default {
-        directives: {'scroll': Scroll},
         components: {
             RChatMsg
         },

package/components/chat/chatMsg.vue

@@ -42,12 +42,12 @@
     </div>
 </template>
 <script>
-    import {Intersect} from '../../directive/intersect'
 
-    export default {
+
+export default {
         name: 'r-chat-msg',
-        directives: {Intersect},
-        props: {
+
+  props: {
             isMe: Boolean,
             user: {
                 type: Object,

package/components/form/colorPicker/Alpha.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="color-alpha ms-1" @mousedown.prevent.stop="selectAlpha">
-    <canvas ref="canvasAlpha"/>
-    <div :style="slideAlphaStyle" class="slide"/>
+  <div class="color-alpha ms-1">
+    <canvas ref="canvas" :width="width" :height="height" v-touch="{'end':move,
+                  'move':move}"/>
+    <div :style="style" class="slide"/>
   </div>
 </template>
 
@@ -32,8 +33,9 @@ export default {
   emits: ['selectAlpha'],
   data() {
     return {
-      slideAlphaStyle: {},
+      style: {},
       alphaSize: 5,
+      ctx: null
     }
   },
   watch: {
@@ -45,65 +47,44 @@ export default {
     },
   },
   mounted() {
+    this.ctx = this.$refs.canvas.getContext('2d', {willReadFrequently: true})
     this.renderColor()
     this.renderSlide()
   },
   methods: {
     renderColor() {
-      const canvas = this.$refs.canvasAlpha
-      const width = this.width
-      const height = this.height
-      const size = this.alphaSize
-      const canvasSquare = this.createAlphaSquare(size)
-
-      const ctx = canvas.getContext('2d')
-      canvas.width = width
-      canvas.height = height
-
-      ctx.fillStyle = ctx.createPattern(canvasSquare, 'repeat')
-      ctx.fillRect(0, 0, width, height)
+      const canvasSquare = this.createAlphaSquare(this.alphaSize)
+      this.ctx.fillStyle = this.ctx.createPattern(canvasSquare, 'repeat')
+      this.ctx.fillRect(0, 0, this.width, this.height)
 
       this.createLinearGradient(
           'p',
-          ctx,
-          width,
-          height,
+          this.ctx,
+          this.width,
+          this.height,
           'rgba(255,255,255,0)',
           this.color
       )
     },
     renderSlide() {
-      this.slideAlphaStyle = {
-        top: this.rgba.a * this.height - 2 + 'px',
+      this.style = {
+        top: this.rgba.a * this.height + 'px',
       }
     },
-    selectAlpha(e) {
-      const {top: hueTop} = this.$el.getBoundingClientRect()
-
-      const mousemove = (e) => {
-        let y = e.clientY - hueTop
-
-        if (y < 0) {
-          y = 0
-        }
-        if (y > this.height) {
-          y = this.height
-        }
-
-        let a = parseFloat((y / this.height).toFixed(2))
-        this.$emit('selectAlpha', a)
+    move(e) {
+      let y = e.current.y
+      if (y <= 0) {
+        this.$emit('selectAlpha', 0)
+        return
       }
-
-      mousemove(e)
-
-      const mouseup = () => {
-        document.removeEventListener('mousemove', mousemove)
-        document.removeEventListener('mouseup', mouseup)
+      if (y >= this.height) {
+        this.$emit('selectAlpha', 1)
+        return
       }
 
-      document.addEventListener('mousemove', mousemove)
-      document.addEventListener('mouseup', mouseup)
-    },
+      let a = parseFloat((y / this.height).toFixed(2))
+      this.$emit('selectAlpha', a)
+    }
   },
 }
 </script>

package/components/form/colorPicker/Hue.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="hue ms-1" @mousedown.prevent.stop="selectHue">
-    <canvas ref="canvasHue" />
-    <div :style="slideHueStyle" class="slide" />
+  <div class="hue ms-1">
+    <canvas ref="canvas" :width="width" :height="height" v-touch="{'end':move,
+                  'move':move}"/>
+    <div :style="style" class="slide"/>
   </div>
 </template>
 
@@ -26,71 +27,51 @@ export default
   emits: ['selectHue'],
   data() {
     return {
-      slideHueStyle: {},
+      style: {},
+      ctx: null
     }
   },
   mounted() {
+    this.ctx = this.$refs.canvas.getContext('2d', {willReadFrequently: true})
     this.renderColor()
     this.renderSlide()
   },
   methods: {
     renderColor() {
-      const canvas = this.$refs.canvasHue
-      const width = this.width
-      const height = this.height
-      const ctx = canvas.getContext('2d')
-      canvas.width = width
-      canvas.height = height
-
-      const gradient = ctx.createLinearGradient(0, 0, 0, height)
-      gradient.addColorStop(0, '#FF0000') // red
-      gradient.addColorStop(0.17 * 1, '#FF00FF') // purple
-      gradient.addColorStop(0.17 * 2, '#0000FF') // blue
-      gradient.addColorStop(0.17 * 3, '#00FFFF') // green
-      gradient.addColorStop(0.17 * 4, '#00FF00') // green
-      gradient.addColorStop(0.17 * 5, '#FFFF00') // yellow
-      gradient.addColorStop(1, '#FF0000') // red
-      ctx.fillStyle = gradient
-      ctx.fillRect(0, 0, width, height)
+      const g = this.ctx.createLinearGradient(0, 0, 0, this.height)
+      g.addColorStop(0, '#FF0000') // red
+      g.addColorStop(0.17 * 1, '#FF00FF') // purple
+      g.addColorStop(0.17 * 2, '#0000FF') // blue
+      g.addColorStop(0.17 * 3, '#00FFFF') // green
+      g.addColorStop(0.17 * 4, '#00FF00') // green
+      g.addColorStop(0.17 * 5, '#FFFF00') // yellow
+      g.addColorStop(1, '#FF0000') // red
+      this.ctx.fillStyle = g
+      this.ctx.fillRect(0, 0, this.width, this.height)
     },
     renderSlide() {
-      this.slideHueStyle = {
-        top: (1 - this.hsv.h / 360) * this.height - 2 + 'px',
+      this.style = {
+        top: (1 - this.hsv.h / 360) * this.height + 'px',
       }
     },
-    selectHue(e) {
-      const { top: hueTop } = this.$el.getBoundingClientRect()
-      const ctx = e.target.getContext('2d')
-
-      const mousemove = (e) => {
-        let y = e.clientY - hueTop
+    move(e) {
+      let y = e.current.y
 
-        if (y < 0) {
-          y = 0
-        }
-        if (y > this.height) {
-          y = this.height
-        }
-
-        this.slideHueStyle = {
-          top: y - 2 + 'px',
-        }
-        // If you use the maximum value, the selected pixel will be empty, and the empty default is black
-        const imgData = ctx.getImageData(0, Math.min(y, this.height - 1), 1, 1)
-        const [r, g, b] = imgData.data
-        this.$emit('selectHue', { r, g, b })
+      if (y < 0) {
+        y = 0
+      }
+      if (y > this.height) {
+        y = this.height
       }
 
-      mousemove(e)
-
-      const mouseup = () => {
-        document.removeEventListener('mousemove', mousemove)
-        document.removeEventListener('mouseup', mouseup)
+      this.style = {
+        top: y - 2 + 'px',
       }
 
-      document.addEventListener('mousemove', mousemove)
-      document.addEventListener('mouseup', mouseup)
-    },
+      const imgData = this.ctx.getImageData(0, Math.min(y, this.height - 1), 1, 1)
+      const [r, g, b] = imgData.data
+      this.$emit('selectHue', {r, g, b})
+    }
   },
 }
 </script>

package/components/form/colorPicker/Preview.vue

@@ -1,11 +1,10 @@
 <template>
-  <canvas />
+  <canvas ref="canvas" :width="width" :height="height"/>
 </template>
-<script >
+<script>
 import {color} from "./mixin";
 
-export default
-        {
+export default {
   props: {
     color: {
       type: String,
@@ -20,37 +19,31 @@ export default
       default: 30,
     },
   },
-          mixins: [color],
-          data() {
-            return {
-              alphaSize: 5,
-            }
-          },
-          watch: {
-            color() {
-              this.renderColor()
-            },
-          },
+  mixins: [color],
+  data() {
+    return {
+      alphaSize: 7,
+      ctx: null
+    }
+  },
+  watch: {
+    color() {
+      this.renderColor()
+    },
+  },
   mounted() {
+    this.ctx = this.$refs.canvas.getContext('2d', {willReadFrequently: true})
     this.renderColor()
   },
   methods: {
     renderColor() {
-      const canvas = this.$el
-      const width = this.width
-      const height = this.height
-      const size = this.alphaSize
-      const canvasSquare = this.createAlphaSquare(size)
-
-      const ctx = canvas.getContext('2d')
-      canvas.width = width
-      canvas.height = height
+      const canvasSquare = this.createAlphaSquare(this.alphaSize)
 
-      ctx.fillStyle = ctx.createPattern(canvasSquare, 'repeat')
-      ctx.fillRect(0, 0, width, height)
+      this.ctx.fillStyle = this.ctx.createPattern(canvasSquare, 'repeat')
+      this.ctx.fillRect(0, 0, this.width, this.height)
 
-      ctx.fillStyle = this.color
-      ctx.fillRect(0, 0, width, height)
+      this.ctx.fillStyle = this.color
+      this.ctx.fillRect(0, 0, this.width, this.height)
     },
   },
 }

package/components/form/colorPicker/Saturation.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="saturation" @mousedown.prevent.stop="selectSaturation">
-    <canvas ref="canvasSaturation" />
-    <div :style="slideSaturationStyle" class="slide" />
+  <div class="saturation">
+    <canvas ref="canvas" :width="size" :height="size" v-touch="{'end':move,
+                  'move':move}"/>
+    <div :style="style" class="slide"/>
   </div>
 </template>
 
-<script >
+<script>
 import {color} from "./mixin";
 
-export default
-        {
+export default {
   props: {
     color: {
       type: String,
@@ -24,94 +24,73 @@ export default
       default: 152,
     },
   },
-          mixins: [color],
-          emits: ['selectSaturation'],
-          data() {
-            return {
-              slideSaturationStyle: {},
-            }
-          },
-          mounted() {
-            this.renderColor()
-            this.renderSlide()
-          },
+  mixins: [color],
+  emits: ['selectSaturation'],
+  data() {
+    return {
+      style: {},
+      ctx: null
+    }
+  },
+  mounted() {
+    this.ctx = this.$refs.canvas.getContext('2d', {willReadFrequently: true})
+    this.renderColor()
+    this.renderSlide()
+  },
   methods: {
     renderColor() {
-      const canvas = this.$refs.canvasSaturation
       const size = this.size
-      const ctx = canvas.getContext('2d')
-      canvas.width = size
-      canvas.height = size
 
-      ctx.fillStyle = this.color
-      ctx.fillRect(0, 0, size, size)
+      this.ctx.fillStyle = this.color
+      this.ctx.fillRect(0, 0, size, size)
 
       this.createLinearGradient(
           'l',
-          ctx,
+          this.ctx,
           size,
           size,
           '#FFFFFF',
           'rgba(255,255,255,0)'
       )
-      this.createLinearGradient('p', ctx, size, size, 'rgba(0,0,0,0)', '#000000')
+      this.createLinearGradient('p', this.ctx, size, size, 'rgba(0,0,0,0)', '#000000')
     },
     renderSlide() {
-      this.slideSaturationStyle = {
+      this.style = {
         left: this.hsv.s * this.size - 5 + 'px',
         top: (1 - this.hsv.v) * this.size - 5 + 'px',
       }
     },
-    selectSaturation(e) {
-      const {
-        top: saturationTop,
-        left: saturationLeft,
-      } = this.$el.getBoundingClientRect()
-      const ctx = e.target.getContext('2d')
+    move(e) {
+      let x = e.current.x
+      let y = e.current.y
 
-      const mousemove = (e) => {
-        let x = e.clientX - saturationLeft
-        let y = e.clientY - saturationTop
+      if (x < 0) {
+        x = 0
+      }
+      if (y < 0) {
+        y = 0
+      }
+      if (x > this.size) {
+        x = this.size
+      }
+      if (y > this.size) {
+        y = this.size
+      }
 
-        if (x < 0) {
-          x = 0
-        }
-        if (y < 0) {
-          y = 0
-        }
-        if (x > this.size) {
-          x = this.size
-        }
-        if (y > this.size) {
-          y = this.size
-        }
+      this.style = {
+        left: x - 5 + 'px',
+        top: y - 5 + 'px',
+      }
 
-        // Do not modify the dom by monitoring data changes, otherwise when the color is #ffffff, the slide will go to the lower left corner
-        this.slideSaturationStyle = {
-          left: x - 5 + 'px',
-          top: y - 5 + 'px',
-        }
-        // If you use the maximum value, the selected pixel will be empty, and the empty default is black
-        const imgData = ctx.getImageData(
+      const imgData = this.ctx.getImageData(
           Math.min(x, this.size - 1),
           Math.min(y, this.size - 1),
           1,
           1
-        )
-        const [r, g, b] = imgData.data
-        this.$emit('selectSaturation', { r, g, b })
-      }
-
-      mousemove(e)
-
-      const mouseup = () => {
-        document.removeEventListener('mousemove', mousemove)
-        document.removeEventListener('mouseup', mouseup)
-      }
-
-      document.addEventListener('mousemove', mousemove)
-      document.addEventListener('mouseup', mouseup)
-    },
+      )
+      const [r, g, b] = imgData.data
+      this.$emit('selectSaturation', {r, g, b})
+    }
   },
 }
 </script>
@@ -120,6 +99,7 @@ export default
 .saturation {
   position: relative;
   cursor: pointer;
+
   .slide {
     position: absolute;
     left: 100px;

package/components/form/colorPicker/index.vue

@@ -1,50 +1,65 @@
 <template>
-    <r-input class="mt-5" :model-value="modelValue" hide labelControlClass="label-active" :class="`${$r.prefix}color-picker`">
-        <div @click="open=true" class="shower" :style="{'background-color':modelValue||'#DD0FB2'}"></div>
-        <r-modal v-model="open" maxWidth="260px" :closebtn="false" closable>
-            <picker :color="modelValue" @changeColor="emit"></picker>
-            <r-btn @click="close" block>{{ $t('close', 'renusify') }}</r-btn>
-        </r-modal>
-    </r-input>
+  <r-input class="mt-5" :model-value="modelValue" hide labelControlClass="label-active"
+           :class="`${$r.prefix}color-picker`">
+    <div @click="open=true" class="shower" :style="{'background-color':modelValue||'#ffffff'}"></div>
+    <r-modal v-model="open" maxWidth="260px" :closebtn="false" closable>
+      <picker :color="modelValue" @changeColor="emit"></picker>
+      <div class="d-flex h-space-between">
+        <r-btn class="color-success flex-grow-1 me-1" @click.prevent="close()">
+          <r-icon v-html="$r.icons.check" exact></r-icon>
+        </r-btn>
+        <r-btn class=" color-error flex-grow-1 ms-1" @click.prevent="clear()" exact>
+          <r-icon v-html="$r.icons.delete"></r-icon>
+        </r-btn>
+      </div>
+    </r-modal>
+  </r-input>
 </template>
 <script>
-    import Picker from "./picker";
-    export default {
-        name: 'r-color-picker',
-        components: {Picker},
-        props: {
-            modelValue: String,
-            format:{type:String,default:'rgba'}
-        },
-        data() {
-            return {
-                open:false
-            }
-        },
-        methods: {
-          close() {
-            this.open = false
-            this.$emit('close', true)
-          },
-          emit(e) {
-            let r = e.hex
-            if (this.format === 'rgba') {
-              r = e.rgba
-            }
-            this.$emit('update:model-value', r)
-          }
-        }
+import Picker from "./picker";
 
+export default {
+  name: 'r-color-picker',
+  components: {Picker},
+  props: {
+    modelValue: String,
+    format: {type: String, default: 'rgba'}
+  },
+  data() {
+    return {
+      open: false
     }
+  },
+  methods: {
+    clear() {
+      this.open = false
+      this.$emit('update:model-value', null)
+      this.$emit('close', true)
+    },
+    close() {
+      this.open = false
+      this.$emit('close', true)
+    },
+    emit(e) {
+      let r = e.hex
+      if (this.format === 'rgba') {
+        r = e.rgba
+      }
+      this.$emit('update:model-value', r)
+    }
+  }
+
+}
 </script>
 <style lang="scss">
-    @import "../../../style/include";
+@import "../../../style/include";
 
-    .#{$prefix}color-picker {
-.shower{
+.#{$prefix}color-picker {
+  .shower {
     width: 100%;
     height: 30px;
     cursor: pointer;
+    border: 1px solid black;
+  }
 }
-    }
-</style>
+</style>

package/components/form/colorPicker/mixin.js

@@ -12,7 +12,12 @@ export const color = {
             this.r = rgba.r
             this.g = rgba.g
             this.b = rgba.b
-            this.a = rgba.a || 1
+            if (rgba.a >= 0) {
+                this.a = rgba.a
+            } else {
+                this.a = rgba.a || 1
+            }
+
             this.set_hsv(rgba)
         },
         createAlphaSquare(size) {