renusify 2.5.2 → 3.0.1

package/components/form/colorInput/Hue.vue

@@ -1,85 +1,108 @@
 <template>
   <div class="hue ms-1">
-    <canvas ref="canvas" :width="width" :height="height" v-touch="{'end':move,
-                  'move':move}"/>
-    <div :style="style" class="slide"/>
+    <canvas
+        ref="canvasRef"
+        v-touch="{'end': handleMove, 'move': handleMove}"
+        :height="height"
+        :width="width"
+    />
+    <div :style="slideStyle" class="slide"/>
   </div>
 </template>
 
-<script >
-
-export default
-        {
-  props: {
-    hsv: {
-      type: Object,
-      default: null,
-    },
-    width: {
-      type: Number,
-      default: 15,
-    },
-    height: {
-      type: Number,
-      default: 152,
-    },
-  },
-  emits: ['selectHue'],
-  data() {
-    return {
-      style: {},
-      ctx: null
-    }
+<script setup>
+import {ref, watch, onMounted, computed} from 'vue'
+
+const props = defineProps({
+  hsv: {
+    type: Object,
+    default: () => ({h: 0}),
   },
-  mounted() {
-    this.ctx = this.$refs.canvas.getContext('2d', {willReadFrequently: true})
-    this.renderColor()
-    this.renderSlide()
+  width: {
+    type: Number,
+    default: 15,
   },
-  methods: {
-    renderColor() {
-      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.style = {
-        top: (1 - this.hsv.h / 360) * this.height + 'px',
-      }
-    },
-    move(e) {
-      let y = e.current.y
-
-      if (y < 0) {
-        y = 0
-      }
-      if (y > this.height) {
-        y = this.height
-      }
-
-      this.style = {
-        top: y - 2 + 'px',
-      }
-
-      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})
-    }
+  height: {
+    type: Number,
+    default: 152,
   },
+})
+
+const emit = defineEmits(['selectHue'])
+
+const canvasRef = ref(null)
+const ctx = ref(null)
+const slideTop = ref('0px')
+
+const slideStyle = computed(() => ({
+  top: slideTop.value,
+}))
+
+watch(() => props.hsv?.h, () => {
+  renderSlide()
+}, {immediate: true})
+
+
+onMounted(() => {
+  if (canvasRef.value) {
+    ctx.value = canvasRef.value.getContext('2d', {willReadFrequently: true})
+    renderColor()
+    renderSlide()
+  }
+})
+
+function renderColor() {
+  if (!ctx.value) return
+
+  const gradient = ctx.value.createLinearGradient(0, 0, 0, props.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') // cyan
+  gradient.addColorStop(0.17 * 4, '#00FF00') // green
+  gradient.addColorStop(0.17 * 5, '#FFFF00') // yellow
+  gradient.addColorStop(1, '#FF0000') // red
+
+  ctx.value.fillStyle = gradient
+  ctx.value.fillRect(0, 0, props.width, props.height)
 }
+
+function renderSlide() {
+  if (!props.hsv) return
+
+  const hue = props.hsv.h || 0
+  const topPosition = (1 - hue / 360) * props.height
+  slideTop.value = `${topPosition}px`
+}
+
+function handleMove(e) {
+  let y = e.current.y
+
+  if (y < 0) y = 0
+  if (y > props.height) y = props.height
+
+  slideTop.value = `${y - 2}px`
+
+  if (!ctx.value) return
+
+  const pixelY = Math.min(y, props.height - 1)
+  const imgData = ctx.value.getImageData(0, pixelY, 1, 1)
+  const [r, g, b] = imgData.data
+
+  emit('selectHue', {r, g, b})
+}
+
+defineExpose({
+  renderColor,
+  renderSlide
+})
 </script>
 
 <style lang="scss">
 .hue {
   position: relative;
   cursor: pointer;
+
   .slide {
     position: absolute;
     left: 0;
@@ -91,4 +114,4 @@ export default
     pointer-events: none;
   }
 }
-</style>
+</style>

package/components/form/colorInput/Preview.vue

@@ -1,53 +1,49 @@
 <template>
-  <canvas ref="canvas" :width="width" :height="height"/>
+  <canvas ref="canvasRef" :height="height" :width="width"/>
 </template>
-<script>
-import {color} from "./mixin.js";
-
-export default {
-  props: {
-    color: {
-      type: String,
-      default: '#000000',
-    },
-    width: {
-      type: Number,
-      default: 100,
-    },
-    height: {
-      type: Number,
-      default: 30,
-    },
-  },
-  mixins: [color],
-  data() {
-    return {
-      alphaSize: 7,
-      ctx: null
-    }
-  },
-  watch: {
-    color() {
-      this.renderColor()
-    },
+
+<script setup>
+import {ref, watch, onMounted} from 'vue'
+import {useColor} from './useColor.js'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: '#000000',
   },
-  mounted() {
-    this.ctx = this.$refs.canvas.getContext('2d', {willReadFrequently: true})
-    this.renderColor()
+  width: {
+    type: Number,
+    default: 100,
   },
-  methods: {
-    renderColor() {
-      if (!this.ctx) {
-        return
-      }
-      const canvasSquare = this.createAlphaSquare(this.alphaSize)
-
-      this.ctx.fillStyle = this.ctx.createPattern(canvasSquare, 'repeat')
-      this.ctx.fillRect(0, 0, this.width, this.height)
-
-      this.ctx.fillStyle = this.color
-      this.ctx.fillRect(0, 0, this.width, this.height)
-    },
+  height: {
+    type: Number,
+    default: 30,
   },
+})
+
+const {createAlphaSquare} = useColor()
+
+const canvasRef = ref(null)
+const ctx = ref(null)
+const alphaSize = ref(7)
+
+watch(() => props.color, renderColor)
+
+onMounted(() => {
+  if (canvasRef.value) {
+    ctx.value = canvasRef.value.getContext('2d', {willReadFrequently: true})
+    renderColor()
+  }
+})
+
+function renderColor() {
+  if (!ctx.value) return
+
+  const canvasSquare = createAlphaSquare(alphaSize.value)
+  ctx.value.fillStyle = ctx.value.createPattern(canvasSquare, 'repeat')
+  ctx.value.fillRect(0, 0, props.width, props.height)
+
+  ctx.value.fillStyle = props.color
+  ctx.value.fillRect(0, 0, props.width, props.height)
 }
-</script>
+</script>

package/components/form/colorInput/Saturation.vue

@@ -1,98 +1,113 @@
 <template>
   <div class="saturation">
-    <canvas ref="canvas" :width="size" :height="size" v-touch="{'end':move,
-                  'move':move}"/>
+    <canvas
+        ref="canvasRef"
+        v-touch="{'end': handleMove, 'move': handleMove}"
+        :height="size"
+        :width="size"
+    />
     <div :style="style" class="slide"/>
   </div>
 </template>
 
-<script>
-import {color} from "./mixin.js";
-
-export default {
-  props: {
-    color: {
-      type: String,
-      default: '#000000',
-    },
-    hsv: {
-      type: Object,
-      default: null,
-    },
-    size: {
-      type: Number,
-      default: 152,
-    },
-  },
-  mixins: [color],
-  emits: ['selectSaturation'],
-  data() {
-    return {
-      style: {},
-      ctx: null
-    }
+
+<script setup>
+import {ref, onMounted} from 'vue'
+import {useColor} from './useColor.js'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: '#000000',
   },
-  mounted() {
-    this.ctx = this.$refs.canvas.getContext('2d', {willReadFrequently: true})
-    this.renderColor()
-    this.renderSlide()
+  hsv: {
+    type: Object,
+    default: null,
   },
-  methods: {
-    renderColor() {
-      const size = this.size
-
-      this.ctx.fillStyle = this.color
-      this.ctx.fillRect(0, 0, size, size)
-
-      this.createLinearGradient(
-          'l',
-          this.ctx,
-          size,
-          size,
-          '#FFFFFF',
-          'rgba(255,255,255,0)'
-      )
-      this.createLinearGradient('p', this.ctx, size, size, 'rgba(0,0,0,0)', '#000000')
-    },
-    renderSlide() {
-      this.style = {
-        left: this.hsv.s * this.size - 5 + 'px',
-        top: (1 - this.hsv.v) * this.size - 5 + 'px',
-      }
-    },
-    move(e) {
-      let x = e.current.x
-      let y = e.current.y
-
-      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',
-      }
-
-      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})
-    }
+  size: {
+    type: Number,
+    default: 152,
   },
+})
+
+const emit = defineEmits(['selectSaturation'])
+
+const {createLinearGradient} = useColor()
+
+const canvasRef = ref(null)
+const ctx = ref(null)
+const style = ref({})
+
+
+onMounted(() => {
+  if (canvasRef.value) {
+    ctx.value = canvasRef.value.getContext('2d', {willReadFrequently: true})
+    renderColor()
+    renderSlide()
+  }
+})
+
+function renderColor() {
+  const size = props.size
+
+  ctx.value.fillStyle = props.color
+  ctx.value.fillRect(0, 0, size, size)
+
+  createLinearGradient(
+      'l',
+      ctx.value,
+      size,
+      size,
+      '#FFFFFF',
+      'rgba(255,255,255,0)'
+  )
+  createLinearGradient('p', ctx.value, size, size, 'rgba(0,0,0,0)', '#000000')
 }
+
+
+function renderSlide() {
+  style.value = {
+    left: props.hsv.s * props.size - 5 + 'px',
+    top: (1 - props.hsv.v) * props.size - 5 + 'px',
+  }
+}
+
+function handleMove(e) {
+  let x = e.current.x
+  let y = e.current.y
+
+  if (x < 0) {
+    x = 0
+  }
+  if (y < 0) {
+    y = 0
+  }
+  if (x > props.size) {
+    x = props.size
+  }
+  if (y > props.size) {
+    y = props.size
+  }
+
+  style.value = {
+    left: x - 5 + 'px',
+    top: y - 5 + 'px',
+  }
+
+  const imgData = ctx.value.getImageData(
+      Math.min(x, props.size - 1),
+      Math.min(y, props.size - 1),
+      1,
+      1
+  )
+  const [r, g, b] = imgData.data
+  emit('selectSaturation', {r, g, b})
+}
+
+defineExpose({
+  renderColor,
+  renderSlide
+})
 </script>
 
 <style lang="scss">
@@ -112,4 +127,4 @@ export default {
     pointer-events: none;
   }
 }
-</style>
+</style>

package/components/form/colorInput/index.vue

@@ -1,9 +1,10 @@
 <template>
-  <r-input class="mt-5" :model-value="modelValue" hide labelControlClass="label-active"
+  <r-input :model-value="modelValue"
+           @click.prevent="open=true"
            :class="`${$r.prefix}color-picker`">
-    <div :style="{'background-color':modelValue||'#ffffff'}" class="shower" @click.prevent="open=true"></div>
+    <div :style="{'background-color':modelValue}" class="shower"></div>
     <r-modal v-model="open" class="color-picker-modal" maxWidth="260px" no-close-btn>
-      <picker :color="modelValue" @changeColor="emit"></picker>
+      <picker :color="modelValue" @changeColor="emitColor"></picker>
       <div class="d-flex h-space-between">
         <r-btn class="color-success flex-grow-1 me-1" outlined @click.prevent="close()">
           <r-icon v-html="$r.icons.check" exact></r-icon>
@@ -15,52 +16,83 @@
     </r-modal>
   </r-input>
 </template>
-<script>
-import {defineAsyncComponent} from 'vue'
+<script setup>
+import {ref} from 'vue'
+import Picker from "./picker.vue";
 
-export default {
-  name: 'r-color-picker',
-  components: {Picker:defineAsyncComponent(()=>import('./picker.vue'))},
-  props: {
-    modelValue: String,
-    format: {type: String, default: 'rgba'}
-  },
-  emits: ['update:modelValue', 'close'],
-  data() {
-    return {
-      open: false
-    }
-  },
-  methods: {
-    clear() {
-      this.open = false
-      this.$emit('update:modelValue', 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:modelValue', r)
-    }
+const props = defineProps({
+  /**
+   * The model value for the color picker (v-model)
+   * @type {String}
+   */
+  modelValue: String,
+
+  /**
+   * Color format to output
+   * @type {String}
+   * @default 'rgba'
+   * @values rgba, hex
+   */
+  format: {
+    type: String,
+    default: 'rgba'
   }
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when the color value changes
+   * @param {String} color - The new color value
+   */
+  'update:modelValue',
+
+  /**
+   * Emitted when the color picker is closed
+   * @param {Boolean} true - Indicates the picker is closed
+   */
+  'close'
+])
 
+const open = ref(false)
+
+/**
+ * Clears the selected color and closes the picker
+ */
+function clear() {
+  open.value = false
+  emit('update:modelValue', null)
+  emit('close', true)
+}
+
+/**
+ * Closes the color picker
+ */
+function close() {
+  open.value = false
+  emit('close', true)
+}
+
+/**
+ * Emits the selected color in the specified format
+ * @param {Object} e - Color picker event object
+ * @param {String} e.hex - Hex color value
+ * @param {String} e.rgba - RGBA color value
+ */
+function emitColor(e) {
+  let result = e.hex
+  if (props.format === 'rgba') {
+    result = e.rgba
+  }
+  emit('update:modelValue', result)
 }
 </script>
 <style lang="scss">
-@use "../../../style/variables/base";
+@use "../../../style" as *;
 
-.#{base.$prefix}color-picker {
+.#{$prefix}color-picker {
   .shower {
     width: 100%;
     height: 30px;
-    cursor: pointer;
-    border: 1px solid black;
   }
 
   .color-picker-modal {