renusify 2.5.2 → 3.0.1

package/components/form/checkInput/index.vue

@@ -7,101 +7,168 @@
            @click.prevent="handleClick">
     <div class="check-input-container v-center">
       <input :autofocus="autofocus"
+             ref="inputRef"
              :type="type"
              @focusin="active=true"
              @focusout="active=false"
-             @input="emit"
+             :placeholder="placeholder"
              :value="lazyValue"
              autocomplete="no"
-             ref="input"
+             @input="emitValue"
       />
-      <r-btn size="small"
-             :class="{'color-success-text':pass!==null && pass!==false,'color-error-text':pass===false}"
-             :rounded="$attrs.tile===undefined||$attrs.tile===false"
-             :loading="loading" @click.prevent="check()" class="elevation-none mx-1">
+      <r-btn :class="{'color-success-text pe-1':pass!==null && pass!==false,'color-error-text pe-1':pass===false}"
+             :loading="loading"
+             class="elevation-none ms-1 btn-check" size="xs" @click.prevent="check()">
         {{ $t('check', 'renusify') }}
-        <r-icon v-if="pass!==null && pass!==false" class="color-success-text" exact height="20" width="20"
+        <r-icon v-if="pass!==null && pass!==false" class="color-success-text ms-1" exact height="20" width="20"
                 v-html="$r.icons.check"></r-icon>
-        <r-icon v-if=" pass===false" class="color-error-text" height="20" width="20" v-html="$r.icons.close"></r-icon>
+        <r-icon v-if="pass===false" class="color-error-text ms-1" height="20" width="20"
+                v-html="$r.icons.close"></r-icon>
       </r-btn>
     </div>
   </r-input>
 </template>
-<script>
-export default {
-  name: 'r-check-input',
-  props: {
-    type: {
-      type: String,
-      default: 'text'
-    },
-    name: {
-      type: String,
-      default: 'text'
-    },
-    link: String,
-    modelValue: [String, Number],
-    autofocus: Boolean,
-    headers: Object
-  },
-emits:['update:modelValue','data'],
-  data() {
-    return {
-      lazyValue: this.modelValue,
-      msg: null,
-      pass: null,
-      loading: false,
-      active: false
-    }
+<script setup>
+import {ref, watch, inject, useAttrs} from 'vue'
+
+const props = defineProps({
+  /**
+   * Input type attribute
+   * @type {String}
+   * @default 'text'
+   */
+  type: {
+    type: String,
+    default: 'text'
   },
-  watch: {
-    modelValue() {
-      this.msg = null
-      this.pass = null
-      this.$emit('data', {})
-      this.lazyValue = this.modelValue
-    }
+
+  /**
+   * Input name attribute
+   * @type {String}
+   * @default 'text'
+   */
+  name: {
+    type: String,
+    default: 'text'
   },
-  methods: {
-    check() {
-      if (this.link) {
-        this.loading = true
-        this.$axios.post(this.link, {
-          [this.name]: this.lazyValue
-        }, {headers: this.headers}).then(({data}) => {
-          this.$emit('data', data)
-          this.msg = null
-          this.loading = false
-          this.pass = true
-        }, ({response}) => {
-          if (response.data.msg) {
-            this.msg = this.$t(response.data.msg, 'renusify')
-          }
-          this.$emit('data', response.data)
-          this.loading = false
-          this.pass = false
-        })
-      }
-
-    },
-    handleClick(e) {
-      this.$refs.input.focus()
-    },
-    emit(e) {
-      this.lazyValue = e.target.value
-      this.$emit('update:modelValue', this.lazyValue)
+
+  /**
+   * API endpoint URL for validation/checking
+   * @type {String}
+   */
+  link: String,
+
+  /**
+   * The model value for the input (v-model)
+   * @type {String|Number}
+   */
+  modelValue: [String, Number],
+
+  /**
+   * Additional headers for the API request
+   * @type {Object}
+   */
+  headers: Object
+})
+
+const attr = useAttrs()
+const placeholder = attr.placeholder
+const autofocus = attr.autofocus
+
+const emit = defineEmits([
+  /**
+   * Emitted when the model value changes
+   * @param {String|Number} value - The new value
+   */
+  'update:modelValue',
+
+  /**
+   * Emitted when API validation/check completes
+   * @param {Object} data - Response data from the API
+   */
+  'data'
+])
+
+const {$t} = inject('renusify')
+const $axios = inject('axios')
+
+const lazyValue = ref(props.modelValue)
+const msg = ref(null)
+const pass = ref(null)
+const loading = ref(false)
+const active = ref(false)
+
+const inputRef = ref(null)
+
+watch(() => props.modelValue, (newValue) => {
+  msg.value = null
+  pass.value = null
+  emit('data', {})
+  lazyValue.value = newValue
+})
+
+/**
+ * Validates the input value against the API endpoint
+ * @async
+ */
+const check = async () => {
+  if (!props.link || !$axios) return
+
+  loading.value = true
+
+  try {
+    const response = await $axios.post(props.link, {
+      [props.name]: lazyValue.value
+    }, {headers: props.headers})
+
+    emit('data', response.data)
+    msg.value = null
+    pass.value = true
+  } catch (error) {
+    if (error.response?.data?.msg) {
+      msg.value = $t ? $t(error.response.data.msg, 'renusify') : error.response.data.msg
+    } else {
+      msg.value = error.message || 'An error occurred'
     }
+
+    emit('data', error.response?.data || {error: error.message})
+    pass.value = false
+  } finally {
+    loading.value = false
   }
 }
 
+/**
+ * Focuses the input element
+ */
+const handleClick = () => {
+  if (inputRef.value) {
+    inputRef.value.focus()
+  }
+}
+
+/**
+ * Handles input change and emits the updated value
+ * @param {Event} event - Input change event
+ */
+const emitValue = (event) => {
+  lazyValue.value = event.target.value
+  emit('update:modelValue', lazyValue.value)
+}
 </script>
 <style lang="scss">
-@use "../../../style/variables/base";
+@use "../../../style" as *;
 
-.#{base.$prefix}check-input {
+.#{$prefix}check-input {
   .check-input-container {
     display: flex;
     width: 100%;
+    border-radius: inherit;
+  }
+
+  .btn-check.#{$prefix}btn {
+    max-height: 30px;
+    border-radius: inherit;
   }
 }
 </style>

package/components/form/checkboxInput/index.vue

@@ -1,77 +1,111 @@
 <template>
   <r-input :class="{
-        [`${this.$r.prefix}checkbox`]:true,
-        'checkbox-readonly': this.readonly,
+        [`${$r.prefix}checkbox`]:true,
+        'checkbox-readonly': readonly,
     }" :modelValue="lazyValue" hide>
     <template v-slot="{isRequired}">
-      <div class="d-flex v-end">
+      <div class="checkbox-holder">
             <span class="checkbox-input" :class="{
                 [size]:true,
                    'br-circle':rounded,
                    'checkbox-select':modelValue
-               }" @click.prevent="emit">
+               }" @click.prevent="toggle">
                    <transition name="scale">
                        <r-icon v-if="modelValue"
                                class="color-white-text"
                                v-html="$r.icons.check" exact></r-icon>
                    </transition>
             </span>
-        <span class="ms-2 checkbox-label" @click.prevent="emit">
+        <span class="ms-2 checkbox-label" @click.prevent="toggle">
                 <span class="color-error-text" v-if="isRequired">*</span>
+          <!-- Slot for custom label.-->
           <slot name="label">{{ label }}</slot>
             </span>
       </div>
     </template>
   </r-input>
 </template>
-<script>
-export default {
-  name: 'r-checkbox',
-  props: {
-    label: String,
-    readonly: Boolean,
-    rounded: Boolean,
-    modelValue: Boolean,
-    size: {
-      type: String,
-      default: 'default',
-      validator: function (value) {
-        return ['x-small', 'small', 'default', 'large', 'x-large'].indexOf(value) !== -1
-      }
-    },
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      lazyValue: this.modelValue
+<script setup>
+import {ref, watch} from 'vue'
+
+const props = defineProps({
+  /**
+   * Label text for the component
+   * @type {String}
+   */
+  label: String,
+
+  /**
+   * Makes the component read-only
+   * @type {Boolean}
+   */
+  readonly: Boolean,
+
+  /**
+   * Applies rounded corners to the component
+   * @type {Boolean}
+   */
+  rounded: Boolean,
+
+  /**
+   * The model value for the component (v-model)
+   * @type {Boolean}
+   */
+  modelValue: Boolean,
+
+  /**
+   * Size of the component
+   * @type {String}
+   * @default 'default'
+   * @values xs, sm, md, lg, xl, xxl
+   */
+  size: {
+    type: String,
+    default: 'md',
+    validator: (value) => {
+      return ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(value)
     }
   },
-  watch: {
-    modelValue() {
-      this.lazyValue = this.modelValue
-    }
-  },
-  methods: {
-    emit() {
-      if (this.readonly) {
-        return
-      }
-
-      this.lazyValue = (!this.lazyValue) ? !this.lazyValue : false
-      this.$emit('update:modelValue', this.lazyValue)
-    }
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when the model value changes
+   * @param {Boolean} value - The new value
+   */
+  'update:modelValue'
+])
+
+const lazyValue = ref(props.modelValue)
+
+watch(() => props.modelValue, (newValue) => {
+  lazyValue.value = newValue
+})
+
+/**
+ * Toggles the component's value
+ */
+const toggle = () => {
+  if (props.readonly) {
+    return
   }
-}
 
+  lazyValue.value = !lazyValue.value
+  emit('update:modelValue', lazyValue.value)
+}
 </script>
 <style lang="scss">
 @use "sass:map";
-@use "../../../style/variables/base";
+@use "../../../style" as *;
 
-.#{base.$prefix}checkbox {
+.#{$prefix}checkbox {
   width: 100%;
   cursor: pointer;
 
+  .checkbox-holder{
+    display: flex;
+    align-items: center;
+  }
   .checkbox-label {
     color: var(--color-on-sheet);
   }
@@ -80,7 +114,7 @@ export default {
     border: 1px solid var(--color-on-sheet-low)
   }
 
-  .#{base.$prefix}icon {
+  .#{$prefix}icon {
     width: 100%;
     height: 100%;
     display: flex;
@@ -90,10 +124,10 @@ export default {
 
   .checkbox-input {
     text-align: center;
-    border-radius: map.get(base.$borders, 'sm');
+    border-radius: map.get($borders, 'sm');
     transition: .3s all ease-in-out;
 
-    &.x-small {
+    &.xs {
       width: 17px;
       height: 17px;
 
@@ -103,7 +137,7 @@ export default {
       }
     }
 
-    &.small {
+    &.sm {
       width: 20px;
       height: 20px;
 
@@ -113,7 +147,7 @@ export default {
       }
     }
 
-    &.default {
+    &.md {
       width: 22px;
       height: 22px;
 
@@ -123,7 +157,7 @@ export default {
       }
     }
 
-    &.large {
+    &.lg {
       width: 25px;
       height: 25px;
 
@@ -133,7 +167,7 @@ export default {
       }
     }
 
-    &.x-large {
+    &.xl {
       width: 30px;
       height: 30px;
 
@@ -142,6 +176,16 @@ export default {
         height: 25px;
       }
     }
+
+    &.xxl {
+      width: 40px;
+      height: 40px;
+
+      svg {
+        width: 35px;
+        height: 35px;
+      }
+    }
   }
 
   &.checkbox-readonly {

package/components/form/colorInput/Alpha.vue

@@ -1,94 +1,92 @@
 <template>
   <div class="color-alpha 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>
-
-import {color} from "./mixin.js";
-
-export default {
-  props: {
-    color: {
-      type: String,
-      default: '#000000',
-    },
-    rgba: {
-      type: Object,
-      default: null,
-    },
-    width: {
-      type: Number,
-      default: 15,
-    },
-    height: {
-      type: Number,
-      default: 152,
-    },
-  },
-  mixins: [color],
-  emits: ['selectAlpha'],
-  data() {
-    return {
-      style: {},
-      alphaSize: 5,
-      ctx: null
-    }
+<script setup>
+import {ref, watch, onMounted, computed} from 'vue'
+import {useColor} from './useColor.js'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: '#000000',
   },
-  watch: {
-    color() {
-      this.renderColor()
-    },
-    'rgba.a'() {
-      this.renderSlide()
-    },
+  rgba: {
+    type: Object,
+    default: () => ({a: 1}),
   },
-  mounted() {
-    this.ctx = this.$refs.canvas.getContext('2d', {willReadFrequently: true})
-    this.renderColor()
-    this.renderSlide()
+  width: {
+    type: Number,
+    default: 15,
   },
-  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.createLinearGradient(
-          'p',
-          this.ctx,
-          this.width,
-          this.height,
-          'rgba(255,255,255,0)',
-          this.color
-      )
-    },
-    renderSlide() {
-      this.style = {
-        top: this.rgba.a * this.height + 'px',
-      }
-    },
-    move(e) {
-      let y = e.current.y
-      if (y <= 0) {
-        this.$emit('selectAlpha', 0)
-        return
-      }
-      if (y >= this.height) {
-        this.$emit('selectAlpha', 1)
-        return
-      }
-
-      let a = parseFloat((y / this.height).toFixed(2))
-      this.$emit('selectAlpha', a)
-    }
+  height: {
+    type: Number,
+    default: 152,
   },
+})
+
+const emit = defineEmits(['selectAlpha'])
+
+const {createAlphaSquare, createLinearGradient} = useColor()
+
+const canvasRef = ref(null)
+const ctx = ref(null)
+const alphaSize = 5
+
+const slideStyle = computed(() => ({
+  top: `${(props.rgba?.a || 1) * props.height}px`,
+}))
+
+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)
+  ctx.value.fillStyle = ctx.value.createPattern(canvasSquare, 'repeat')
+  ctx.value.fillRect(0, 0, props.width, props.height)
+
+  createLinearGradient(
+      'p',
+      ctx.value,
+      props.width,
+      props.height,
+      'rgba(255,255,255,0)',
+      props.color
+  )
+}
+
+function handleMove(e) {
+  let y = e.current.y
+
+  if (y <= 0) {
+    emit('selectAlpha', 0)
+    return
+  }
+
+  if (y >= props.height) {
+    emit('selectAlpha', 1)
+    return
+  }
+
+  let a = parseFloat((y / props.height).toFixed(2))
+  emit('selectAlpha', a)
 }
 </script>
 
@@ -108,4 +106,4 @@ export default {
     pointer-events: none;
   }
 }
-</style>
+</style>