renusify 2.5.1 → 3.0.0

package/components/form/passwordInput/index.vue

@@ -1,130 +1,297 @@
 <template>
-  <div :class="$r.prefix+'password'">
-    <r-input v-bind="$attrs"
-             :active="active"
-             :model-value="modelValue"
-             @click.prevent="handleClick"
-             :error="errorState"
-             :preIcon="show?$r.icons.eye_off:$r.icons.eye"
-             ltr
-             @preIcon="show=!show"
-    >
-      <input :autofocus="autofocus"
-             :type="show?'text':'password'"
-             class="pb-0"
-             @focusin="active=true"
-             @focusout="active=false"
-             @input="emit"
-             :autocomplete="autocomplete"
-             ref="input"
-             v-model="lazyValue"
-      />
-    </r-input>
-    <template v-if="!hideLine">
-      <div :class="{'color-success-text':hasLength,'color-error-text':!hasLength}">
+  <r-input :active="active"
+           :class="$r.prefix+'password-input'"
+           :error="!isValid"
+           :icon="show?$r.icons.eye_off:$r.icons.eye"
+           :model-value="modelValue"
+           @icon="toggleShow"
+           @click.prevent="handleClick"
+  >
+    <input ref="inputRef"
+           v-model="lazyValue"
+           :autocomplete="autocomplete"
+           :autofocus="autofocus"
+           :placeholder="placeholder"
+           :type="show?'text':'password'"
+           @focusin="active=true"
+           @focusout="active=false"
+           @input="emitValue"
+    />
+    <template v-if="!hideRequirements" v-slot:message>
+      <r-progress-line :color="strengthColor" :model-value="passwordStrength" class="mb-2"></r-progress-line>
+      <div :class="{'color-success-text':hasLength,'color-error-text':!hasLength}" class="msg-item">
         <r-icon v-if="hasLength" exact v-html="$r.icons.check"></r-icon>
         <r-icon v-else v-html="$r.icons.close"></r-icon>
         {{ $t(['min_length_password', [minLength]]) }}
       </div>
-      <div v-if="lowerCase" :class="{'color-success-text':hasLowerCase,'color-error-text':!hasLowerCase}">
+      <div v-if="lowerCase" :class="{'color-success-text':hasLowerCase,'color-error-text':!hasLowerCase}"
+           class="msg-item">
         <r-icon v-if="hasLowerCase" exact v-html="$r.icons.check"></r-icon>
         <r-icon v-else v-html="$r.icons.close"></r-icon>
         {{ $t('lower_case_password') }}
       </div>
-      <div v-if="number" :class="{'color-success-text':hasNumber,'color-error-text':!hasNumber}">
+      <div v-if="number" :class="{'color-success-text':hasNumber,'color-error-text':!hasNumber}" class="msg-item">
         <r-icon v-if="hasNumber" exact v-html="$r.icons.check"></r-icon>
         <r-icon v-else v-html="$r.icons.close"></r-icon>
         {{ $t('number_password') }}
       </div>
-      <div v-if="upperCase" :class="{'color-success-text':hasUpperCase,'color-error-text':!hasUpperCase}">
+      <div v-if="upperCase" :class="{'color-success-text':hasUpperCase,'color-error-text':!hasUpperCase}"
+           class="msg-item">
         <r-icon v-if="hasUpperCase" exact v-html="$r.icons.check"></r-icon>
         <r-icon v-else v-html="$r.icons.close"></r-icon>
         {{ $t('upper_case_password') }}
       </div>
-      <div v-if="specialChar" :class="{'color-success-text':hasSpecialChar,'color-error-text':!hasSpecialChar}">
+      <div v-if="specialChar" :class="{'color-success-text':hasSpecialChar,'color-error-text':!hasSpecialChar}"
+           class="msg-item">
         <r-icon v-if="hasSpecialChar" exact v-html="$r.icons.check"></r-icon>
         <r-icon v-else v-html="$r.icons.close"></r-icon>
         {{ $t('special_char_password') }}
       </div>
     </template>
-  </div>
+  </r-input>
 </template>
-<script>
-export default {
-  name: 'r-password',
-  props: {
-    modelValue: [String, Number],
-    hideLine: Boolean,
-    autofocus: Boolean,
-    lowerCase: {type: Boolean, default: true},
-    upperCase: Boolean,
-    specialChar: Boolean,
-    number: Boolean,
-    minLength: {type: Number, default: 8},
-    autocomplete: {type: String, default: "no"},
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      lazyValue: this.modelValue,
-      show: false,
-      active: false,
-      p: 0,
-      errorState: false
-    }
-  },
-  computed: {
-    hasLength() {
-      if (!this.lazyValue) {
-        return false
-      }
-      return this.lazyValue.length >= this.minLength
-    },
-    hasUpperCase() {
-      return new RegExp("^(?=.*[A-Z])").test(this.lazyValue)
-    },
-    hasNumber() {
-      return new RegExp("^(?=.*[0-9])").test(this.lazyValue)
-    },
-    hasLowerCase() {
-      return new RegExp("^(?=.*[a-z])").test(this.lazyValue)
-    },
-    hasSpecialChar() {
-      return new RegExp("^(?=.*[!@#\$%\^&\*])").test(this.lazyValue)
-    }
+<script setup>
+import {ref, computed, watch, nextTick, useAttrs} from 'vue'
+
+const attr = useAttrs()
+const placeholder = attr.placeholder
+const autofocus = attr.autofocus
+
+const props = defineProps({
+  /**
+   * The password input's model value
+   * @type {String|Number}
+   */
+  modelValue: [String, Number],
+  /**
+   * Hide password strength requirements display
+   * @type {Boolean}
+   */
+  hideRequirements: Boolean,
+  /**
+   * Require at least one lowercase letter
+   * @type {Boolean}
+   */
+  lowerCase: Boolean,
+  /**
+   * Require at least one uppercase letter
+   * @type {Boolean}
+   */
+  upperCase: Boolean,
+  /**
+   * Require at least one special character (!@#$%^&*)
+   * @type {Boolean}
+   */
+  specialChar: Boolean,
+  /**
+   * Require at least one number
+   * @type {Boolean}
+   */
+  number: Boolean,
+  /**
+   * Minimum password length requirement
+   * @type {Number}
+   * @default 8
+   */
+  minLength: {
+    type: Number,
+    default: 8
   },
+  /**
+   * HTML autocomplete attribute value
+   * @type {String}
+   */
+  autocomplete: String
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when the password value changes
+   * @param {String} value - The updated password value
+   */
+  'update:modelValue',
+  /**
+   * Emitted when password strength changes
+   * @param {Object} strengthData - Password strength information
+   * @param {Number} strengthData.strength - Password strength score (0-100)
+   * @param {Number} strengthData.level - Password strength level (0-4)
+   */
+  'strength-change'
+])
+
+// Reactive data
+const lazyValue = ref(props.modelValue || '')
+const show = ref(false)
+const active = ref(false)
+const inputRef = ref(null)
+
+// Computed properties - Password requirement checks
+/**
+ * Checks if password meets minimum length requirement
+ * @returns {Boolean} True if password meets length requirement
+ */
+const hasLength = computed(() => {
+  if (!lazyValue.value) return false
+  return lazyValue.value.length >= props.minLength
+})
+
+/**
+ * Checks if password contains at least one uppercase letter
+ * @returns {Boolean} True if password contains uppercase letter
+ */
+const hasUpperCase = computed(() => {
+  if (!lazyValue.value) return false
+  return /[A-Z]/.test(lazyValue.value)
+})
+
+/**
+ * Checks if password contains at least one number
+ * @returns {Boolean} True if password contains number
+ */
+const hasNumber = computed(() => {
+  if (!lazyValue.value) return false
+  return /[0-9]/.test(lazyValue.value)
+})
+
+/**
+ * Checks if password contains at least one lowercase letter
+ * @returns {Boolean} True if password contains lowercase letter
+ */
+const hasLowerCase = computed(() => {
+  if (!lazyValue.value) return false
+  return /[a-z]/.test(lazyValue.value)
+})
+
+/**
+ * Checks if password contains at least one special character
+ * @returns {Boolean} True if password contains special character
+ */
+const hasSpecialChar = computed(() => {
+  if (!lazyValue.value) return false
+  return /[!@#$%^&*]/.test(lazyValue.value)
+})
+
+// Computed properties
+/**
+ * Calculates password strength score (0-100)
+ * @returns {Number} Password strength score
+ */
+const passwordStrength = computed(() => {
+  if (!lazyValue.value) return 0
+
+  let score = 0
+  const length = lazyValue.value.length
+  score += Math.min(40, (length / 128) * 40)
+
+  const varietyCount = [hasLowerCase.value, hasUpperCase.value, hasNumber.value, hasSpecialChar.value].filter(Boolean).length
+  score += (varietyCount / 4) * 40
+
+  if (length >= 12 && varietyCount >= 3) score += 20
+
+  return Math.min(100, score)
+})
 
-  methods: {
-    check() {
-      if (!this.hasLength) {
-        this.errorState = true
-      }
-      if (this.lowerCase && !this.hasLowerCase) {
-        this.errorState = true
-      }
-      if (this.number && !this.hasNumber) {
-        this.errorState = true
-      }
-      if (this.upperCase && !this.hasUpperCase) {
-        this.errorState = true
-      }
-      if (this.specialChar && !this.hasSpecialChar) {
-        this.errorState = true
-      }
-
-    },
-    handleClick(e) {
-      this.$refs.input.focus()
-    },
-    emit() {
-      this.$emit('update:modelValue', this.lazyValue)
-      this.errorState = false
-      this.msg = null
-      if (this.lazyValue && !this.hideLine) {
-        this.check()
-      }
+/**
+ * Determines CSS color class based on password strength
+ * @returns {String} CSS color class for strength indicator
+ */
+const strengthColor = computed(() => {
+  const strength = passwordStrength.value
+
+  if (strength >= 80) return 'color-success'
+  if (strength >= 60) return 'color-info'
+  if (strength >= 40) return 'color-warning'
+  return 'color-error'
+})
+
+/**
+ * Determines password strength level (0-4)
+ * @returns {Number} Password strength level
+ *
+ * Levels:
+ * - 0: No password or very weak
+ * - 1: Weak (score > 0)
+ * - 2: Fair (score >= 40)
+ * - 3: Good (score >= 60)
+ * - 4: Strong (score >= 80)
+ */
+const strengthLevel = computed(() => {
+  const strength = passwordStrength.value
+
+  if (strength >= 80) return 4
+  if (strength >= 60) return 3
+  if (strength >= 40) return 2
+  if (strength > 0) return 1
+  return 0
+})
+
+/**
+ * Checks if password meets all configured requirements
+ * @returns {Boolean} True if password is valid according to all requirements
+ */
+const isValid = computed(() => {
+  let valid = true
+  if (!hasLength.value) valid = false
+  if (props.lowerCase && !hasLowerCase.value) valid = false
+  if (props.upperCase && !hasUpperCase.value) valid = false
+  if (props.number && !hasNumber.value) valid = false
+  if (props.specialChar && !hasSpecialChar.value) valid = false
+
+  return valid
+})
+
+// Methods
+/**
+ * Focuses the password input field
+ */
+const handleClick = () => {
+  inputRef.value?.focus()
+}
+
+/**
+ * Emits updated password value and strength data
+ */
+const emitValue = () => {
+  emit('update:modelValue', lazyValue.value)
+  emit('strength-change', {
+    strength: passwordStrength.value,
+    level: strengthLevel.value
+  })
+}
+
+/**
+ * Toggles password visibility and refocuses input
+ */
+const toggleShow = () => {
+  show.value = !show.value
+  nextTick(() => inputRef.value?.focus())
+}
+
+// Watchers
+watch(() => props.modelValue, (newValue) => {
+  lazyValue.value = newValue || ''
+})
+
+watch(lazyValue, () => {
+  emitValue()
+})
+</script>
+<style lang="scss">
+@use "../../../style" as *;
+
+.#{$prefix}password-input {
+  .msg-item {
+    display: flex;
+    align-items: center;
+
+    svg {
+      width: 20px;
+      height: 20px;
     }
   }
-}
 
-</script>
+  .massage {
+    display: block;
+  }
+}
+</style>

package/components/form/radioInput/index.vue

@@ -1,107 +1,178 @@
 <template>
-  <r-input class="mt-3" :class="{[`${this.$r.prefix}radio-input`]:true,'radio-input-readonly': readonly}"
-           :modelValue="modelValue" hide labelControlClass="label-fixed">
-    <div class="mt-2" v-for="(item,i) in list" :key="i"
-         :class="{'d-flex v-end': true}">
+  <r-input :class="[`${$r.prefix}radio-input`]"
+           :modelValue="modelValue"
+           label-active>
+    <div v-for="(item,i) in list"
+         :key="i"
+         :class="{'radio-item-selected':current===item.value}" class="radio-item my-2">
+      <!-- Custom slot for radio item rendering with emit function, index, and item data -->
+      <slot :emit="emitValue" :index="i" :item="item">
             <span class="radio-input-item" :class="{
                    'br-circle':rounded,
                    'radio-input-select':current===item.value
-               }" @click.prevent="emit(item)">
-                   <transition name="scale">
-                       <r-icon v-if="current===item.value" class="color-white-text"
-                               v-html="$r.icons.check" exact></r-icon>
-                   </transition>
-            </span>
-      <span class="ms-2 radio-label" @click.prevent="emit(item)">
+               }" @click.prevent="emitValue(item)"></span>
+        <span class="ms-2 radio-label" @click.prevent="emitValue(item)">
                 {{ item[text] }}
             </span>
+      </slot>
     </div>
   </r-input>
 </template>
-<script>
-export default {
-  name: 'r-radio-input',
-  props: {
-    items: {
-      type: Array, default: () => {
-        return []
-      }
-    },
-    text: {type: String, default: 'title'},
-    readonly: Boolean,
-    rounded: Boolean,
-    justValue: Boolean,
-    translate: Boolean,
-    modelValue: [String, Number, Object]
+
+<script setup>
+import {computed, inject} from 'vue'
+
+const props = defineProps({
+  /**
+   * Array of radio items (objects or primitives)
+   * @type {Array}
+   * @default () => []
+   *
+   * If objects, each should have at least a 'value' property and optionally a text property
+   * If primitives, they will be converted to objects with value and text properties
+   */
+  items: {
+    type: Array,
+    default: () => []
   },
-  emits: ['update:modelValue'],
-  computed: {
-    current() {
-      if (!this.modelValue) {
-        return null
-      }
-      return this.justValue ? this.modelValue : this.modelValue.value
-    },
-    list() {
-      const l = this.items.length
-      if (typeof this.items[0] === 'object') {
-        return this.items
-      }
-      let r = []
-      for (let i = 0; i < l; i++) {
-        r.push({[this.text]: this.translate ? $t(this.items[i]) : this.items[i], 'value': this.items[i]})
-      }
-      return r
-    }
+  /**
+   * Property name to use for display text in items
+   * @type {String}
+   * @default 'title'
+   */
+  text: {
+    type: String,
+    default: 'title'
   },
-  methods: {
-    emit(val) {
-      if (this.readonly) {
-        return
-      }
+  /**
+   * Use circular radio buttons instead of square
+   * @type {Boolean}
+   */
+  rounded: Boolean,
+  /**
+   * Emit only the value instead of the entire item object
+   * @type {Boolean}
+   */
+  justValue: Boolean,
+  /**
+   * Enable translation for item texts
+   * @type {Boolean}
+   */
+  translate: Boolean,
+  /**
+   * The selected radio item's model value
+   * @type {String|Number|Object}
+   */
+  modelValue: [String, Number, Object]
+})
 
-      this.$emit('update:modelValue', this.justValue ? val.value : val)
-    }
+const emit = defineEmits([
+  /**
+   * Emitted when a radio item is selected
+   * @param {Object|String|Number} value - Selected item or value
+   *
+   * When justValue is true: emits the item's value property
+   * When justValue is false: emits the entire item object
+   */
+  'update:modelValue'
+])
+
+const {$t} = inject('renusify')
+
+// Computed properties
+/**
+ * Gets the current selected value for comparison
+ * @returns {String|Number|null} Current selected value or null if none
+ */
+const current = computed(() => {
+  if (!props.modelValue) {
+    return null
+  }
+  return props.justValue ? props.modelValue : props.modelValue.value
+})
+
+/**
+ * Processes items array for consistent format
+ * @returns {Array} Processed list of radio items
+ *
+ * Converts primitive values to objects with {text, value} structure
+ * Applies translation if enabled
+ */
+const list = computed(() => {
+  const l = props.items.length
+  if (typeof props.items[0] === 'object') {
+    return props.items
+  }
+
+  let r = []
+  for (let i = 0; i < l; i++) {
+    r.push({
+      [props.text]: props.translate ? $t(props.items[i]) : props.items[i],
+      'value': props.items[i]
+    })
+  }
+  return r
+})
+
+// Methods
+/**
+ * Emits the selected radio item
+ * @param {Object} val - The selected radio item
+ */
+const emitValue = (val) => {
+  if (props.readonly) {
+    return
   }
-}
 
+  emit('update:modelValue', props.justValue ? val.value : val)
+}
 </script>
+
 <style lang="scss">
 @use "sass:map";
-@use "../../../style/variables/base";
-
+@use "../../../style" as *;
 
-.#{base.$prefix}radio-input {
+.#{$prefix}radio-input {
   width: 100%;
   cursor: pointer;
 
+  .input-control {
+    height: auto;
+  }
+
   .radio-label {
     color: var(--color-on-sheet);
   }
 
-  .radio-input-item {
-    border: 1px solid var(--color-on-sheet-low)
+  .radio-item {
+    display: flex;
+    align-items: center;
   }
 
-  .#{base.$prefix}icon {
+  .radio-input-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 20px;
     height: 20px;
-  }
-
-  .radio-input-item {
-    text-align: center;
-    width: 25px;
-    height: 25px;
-    border-radius: map.get(base.$borders, 'sm');
-    transition: .3s all ease-in-out;
-  }
+    border-radius: map.get($borders, 'sm');
+    transition: all $primary-transition;
+    border: 1px solid var(--color-on-sheet-low);
 
-  &.radio-input-readonly {
-    pointer-events: none;
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      border-radius: inherit;
+      background-color: currentColor;
+      opacity: 0;
+      transition: all $primary-transition;
+    }
   }
 
-  .radio-input-select {
-    background-color: currentColor;
+  .radio-input-select::before {
+    opacity: 1;
   }
 }
 </style>