renusify 2.5.2 → 3.0.1

package/components/form/numberInput/index.vue

@@ -1,147 +1,256 @@
 <template>
-  <div :class="`${$r.prefix}add-btn`">
-    <r-input v-bind="$attrs"
-             :modelValue="modelValue"
-             :active="active"
-             inputControlClass="v-center"
-    >
-      <r-btn :disabled="min!==undefined&&number<=min" :text="btnText" class="minus" icon @click.prevent.stop="minus">
+  <r-input :active="active"
+           :class="`${$r.prefix}number-input`"
+           :icon="$r.icons.plus"
+           :modelValue="modelValue"
+           :pre-icon="$r.icons.minus"
+           @icon="plus"
+           @pre-icon="minus"
+  >
+    <template v-slot:preIcon>
+        <span :class="{'btn-disabled':min!==undefined&&number<=min}" class="btn">
         <r-icon v-html="$r.icons.minus"></r-icon>
-      </r-btn>
-      <input @input="emit"
-             class="text-center ltr"
-             @focusin="active=true"
-             @focusout="active=false"
-             ref="input"
-             :step="step"
-             type="number"
-             autocomplete="no"
-             v-model="number"
+      </span>
+    </template>
+    <div class="view-holder ltr text-center">
+      <input
+          ref="input"
+          :autofocus="autofocus"
+          :step="step"
+          :value="number"
+          autocomplete="no"
+          class="text-center"
+          type="number"
+          @focusin="active=true"
+          @focusout="active=false"
+          @input="emitValue"
       />
-      <r-btn :disabled="max!==undefined&&number>=max" :text="btnText" class="plus" icon @click.prevent.stop="plus">
+      <div class="number-view" v-html="formatNumber"></div>
+    </div>
+    <template v-slot:icon>
+        <span :class="{'btn-disabled':max!==undefined&&number>=max}" class="btn">
         <r-icon v-html="$r.icons.plus"></r-icon>
-      </r-btn>
-    </r-input>
-  </div>
-
+      </span>
+    </template>
+  </r-input>
 </template>
 
-<script>
-export default {
-  name: 'r-number',
-  inheritAttrs: false,
-  props: {
-    modelValue: Number,
-    step: {type: Number, default: 1},
-    split: {type: Number, default: 0},
-    min: {
-      type: Number
-    },
-    max: {
-      type: Number
-    },
-    btnText: Boolean
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      number: this.modelValue,
-      active: false
-    }
+<script setup>
+import {ref, watch, computed, useAttrs} from 'vue'
+
+const attr = useAttrs()
+const placeholder = attr.placeholder
+const autofocus = attr.autofocus
+
+const props = defineProps({
+  /**
+   * The input's model value (number or string)
+   * @type {Number|String}
+   */
+  modelValue: [Number, String],
+  /**
+   * Step value for increment/decrement buttons
+   * @type {Number}
+   * @default 1
+   */
+  step: {
+    type: Number,
+    default: 1
   },
-  watch: {
-    'modelValue': function (newVal) {
-      if (newVal !== undefined) {
-        this.number = newVal
-      }
-    }
+  /**
+   * Number of digits to group with commas for display
+   * @type {Number}
+   * @default 0
+   *
+   * When greater than 0, formats numbers with commas (e.g., 1000 becomes 1,000)
+   * Set to 0 to disable number formatting
+   */
+  split: {
+    type: Number,
+    default: 0
   },
-  methods: {
-    emit() {
-      if (this.number === '' || this.number === null) {
-        this.number = undefined
-        this.$emit('update:modelValue', this.number)
-        return
-      }
-      let d = this.number
-      if (this.max !== undefined && d > this.max) {
-        d = this.max
-      }
-      if (this.min !== undefined && d < this.min) {
-        this.$emit('update:modelValue', undefined)
-        return
-      }
+  /**
+   * Minimum allowed value
+   * @type {Number}
+   */
+  min: Number,
+  /**
+   * Maximum allowed value
+   * @type {Number}
+   */
+  max: Number
+})
 
-      this.number = d
-      this.$emit('update:modelValue', this.number)
-    },
-    plus() {
-      let n = this.modelValue || 0
-      this.number = n + this.step
-      this.emit()
-    },
-    minus() {
-      let n = this.modelValue || 0
-      this.number = n - this.step
-      this.emit()
-    }
+const emit = defineEmits([
+  /**
+   * Emitted when the number value changes
+   * @param {Number|undefined} value - The updated number value, undefined if invalid or empty
+   */
+  'update:modelValue'
+])
+
+// Reactive data
+const number = ref(props.modelValue)
+const active = ref(false)
+
+// Methods
+/**
+ * Emits the updated value to parent component
+ * @param {Event} [e=false] - Optional event object from input
+ */
+const emitValue = (e = false) => {
+  if (e) {
+    number.value = e.target.value
   }
+
+  if (number.value === '' || number.value === null) {
+    number.value = undefined
+    emit('update:modelValue', number.value)
+    return
+  }
+
+  let value = number.value
+
+  if (props.max !== undefined && value > props.max) {
+    value = props.max
+  }
+  if (props.min !== undefined && value < props.min) {
+    emit('update:modelValue', undefined)
+    return;
+  }
+
+  number.value = value
+  emit('update:modelValue', number.value)
+}
+
+/**
+ * Increments the number by the step value
+ */
+const plus = () => {
+  const currentValue = parseFloat(props.modelValue || props.min || 0)
+  number.value = currentValue + props.step
+  emitValue()
 }
+
+/**
+ * Decrements the number by the step value
+ */
+const minus = () => {
+  const currentValue = parseFloat(props.modelValue || 0)
+  number.value = currentValue - props.step
+  emitValue()
+}
+
+// Computed properties
+/**
+ * Formats the number for display with optional thousands separator
+ * @returns {String} Formatted number string or placeholder
+ */
+const formatNumber = computed(() => {
+  if (number.value == null || number.value === '') return placeholder || ''
+
+  if (isNaN(number.value)) return number.value.toString()
+
+  const txt = number.value.toString()
+  const [integerPart, decimalPart = ''] = txt.split('.')
+
+  if (props.split > 0) {
+    const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, '<span class="sep">,</span>')
+    return decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger
+  }
+
+  return decimalPart ? `${integerPart}.${decimalPart}` : integerPart
+})
+
+// Watchers
+watch(() => props.modelValue, (newVal) => {
+  if (newVal !== undefined) {
+    number.value = newVal
+  }
+})
 </script>
 
 <style lang="scss">
 @use "sass:map";
-@use "../../../style/variables/base";
-@use "../../../style/mixins";
-
+@use "../../../style" as *;
 
-.#{base.$prefix}add-btn {
-  position: relative;
 
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
+.#{$prefix}number-input {
+  text-align: center;
 
-  input {
-    -moz-appearance: textfield;
+  .view-holder {
+    position: relative;
     width: 100%;
-  }
+    height: 32px;
 
-  .plus {
-    position: absolute;
-    right: 2px;
-    top: 1px;
-    z-index: 2;
-    width: 36px !important;
-    height: 36px !important;
-  }
+    .number-view, input {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 32px;
+      max-height: 32px;
+      white-space: pre-wrap;
+      word-break: keep-all;
+      overflow-wrap: break-word;
+      overflow: hidden;
+      @include typography($headings, 'body-1');
+      letter-spacing: 1px;
+    }
 
-  .minus {
-    position: absolute;
-    left: 2px;
-    top: 1px;
-    z-index: 2;
-    width: 36px !important;
-    height: 36px !important;
-  }
+    .sep {
+      width: 0px;
+      transform: translateX(-2.5px);
+    }
 
-  .#{base.$prefix}input-container:not(.input-focused) {
-    .label:not(.label-active) {
-      @include mixins.ltr() {
-        margin-left: 24px;
-      }
-      @include mixins.rtl() {
-        margin-right: 24px;
+    .number-view {
+      z-index: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+    }
+
+    input {
+      z-index: 1;
+      -webkit-font-smoothing: antialiased;
+      -webkit-text-fill-color: transparent;
+
+      &::selection {
+        background-color: var(--color-one);
+        -webkit-text-fill-color: var(--color-on-one);
+        color: var(--color-on-one);
       }
     }
   }
 
-  .input-tile {
-    .#{base.$prefix}btn {
-      border-radius: map.get(base.$borders, 'sm');
+  .input-control {
+    @include rtl() {
+      flex-direction: row-reverse;
     }
+    padding: 0;
+  }
+
+  .btn-disabled {
+    pointer-events: none;
+    opacity: 0.5;
+    cursor: none;
+  }
+
+  .pre-icon, .icon {
+    border-radius: inherit;
+  }
+
+  .btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    background: var(--color-sheet-container-low);
+    padding: 4px;
+    width: 30px;
+    height: 30px;
+    border-radius: inherit;
   }
 }
 

package/components/form/passwordInput/index.js

@@ -1,3 +1,4 @@
 export * as rPasswordInput from './index.vue'
 export * as l_Input from '../input/index.js'
-export * as l_icon from '../../icon/index.js'
+export * as l_icon from '../../icon/index.js'
+export * as l_progress_line from '../../progress/line.js'