renusify 2.5.2 → 3.0.0

package/components/form/uniqueInput/index.vue

@@ -5,60 +5,117 @@
       :model-value="modelValue"
       :error="error"
       :msg="msg"
-      :msgShake="false"
   ></r-text-input>
 </template>
 
-<script>
-export default {
-  name: 'r-unique-input',
-  props: {
-    link: {
-      type: String,
-      required: true
-    },
+<script setup>
+import {ref, watch, inject} from 'vue'
 
-    modelValue: {
-      default: null,
-      type: String
-    },
-    headers: Object
+const props = defineProps({
+  /**
+   * API endpoint URL for uniqueness validation
+   * @type {String}
+   * @required
+   */
+  link: {
+    type: String,
+    required: true
   },
-  emits:['update:modelValue'],
-  data() {
-    return {
-      item: null,
-      color: null,
-      msg: null,
-      error: false
-    }
+  /**
+   * The model value to validate for uniqueness
+   * @type {String}
+   * @default null
+   */
+  modelValue: {
+    default: null,
+    type: String
   },
-  methods: {
-    check(e) {
-      this.item = e
-      this.error = true
-      this.color = 'color-error-text'
-      this.$emit('update:modelValue', this.item)
-      if (this.item) {
-        this.$axios.post(this.link, {
-          'unique_name': this.item
-        }, {headers: this.headers})
-            .then((res) => {
-              if (res.data) {
-                this.color = 'color-success-text'
-                this.error = false
-                this.msg = null
-              }
-            }, (res) => {
-              this.msg = this.$t(res.response.data.msg)
-              this.color = 'color-error-text'
-              this.error = true
-            })
-      } else {
-        this.error = false
-        this.color = ''
-      }
-    }
+  /**
+   * Additional headers for the validation request
+   * @type {Object}
+   */
+  headers: Object
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when the value changes
+   * @param {String} value - The updated value
+   */
+  'update:modelValue'
+])
+
+// Inject dependencies
+const $axios = inject('axios')
+const $t = inject('renusify').$t
+
+// Reactive data
+const item = ref(props.modelValue)
+const color = ref(null)
+const msg = ref(null)
+const error = ref(false)
+const isLoading = ref(false)
+
+// Methods
+/**
+ * Validates the input value for uniqueness against the API
+ * @param {String} value - The value to validate
+ */
+const check = (value) => {
+  item.value = value
+  error.value = true
+  color.value = 'color-error-text'
+
+  emit('update:modelValue', item.value)
+
+  if (item.value) {
+    isLoading.value = true
+
+    $axios.post(props.link, {
+      'unique_name': item.value
+    }, {headers: props.headers})
+        .then((res) => {
+          if (res.data) {
+            color.value = 'color-success-text'
+            error.value = false
+            msg.value = null
+          } else {
+            color.value = 'color-error-text'
+            error.value = true
+            msg.value = $t('validation.unique')
+          }
+        })
+        .catch((errorResponse) => {
+          color.value = 'color-error-text'
+          error.value = true
+
+          const errorMsg = errorResponse?.response?.data?.msg ||
+              'Validation failed'
+
+          msg.value = $t(errorMsg)
+
+          console.error('Unique validation error:', errorResponse)
+        })
+        .finally(() => {
+          isLoading.value = false
+        })
+  } else {
+    error.value = false
+    color.value = ''
+    msg.value = null
   }
 }
+
+// Initialize validation if modelValue exists
+if (props.modelValue) {
+  check(props.modelValue)
+}
+
+// Watchers
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== item.value) {
+    item.value = newValue
+    check(newValue)
+  }
+})
 </script>

package/components/form/unitInput/index.vue

@@ -2,116 +2,171 @@
   <r-input :class="`${$r.prefix}unit-input`" :active="active"
            :model-value="lazyValue"
            @click.prevent="handleClick">
-    <input :autofocus="autofocus"
-           :type="type"
-           @focusin="active=true"
-           @focusout="active=false"
-           @input="emit"
-           autocomplete="no"
-           ref="input"
-           v-model="lazyValue"
-           :readonly="disableInput"
-           :class="{'input-shadow':disableInput}"
-           class="me-1"
-    />
-    <div class="select-unit" :class="{'input-shadow':disableUnit}">
-      <r-select-input :readonly="disableUnit" :items="units" v-model="unit"
-                      @update:model-value="emit" hide justValue :translate="translate"
-                      class="mt-0"
-                      disableSearch
-                      firstSelect></r-select-input>
+    <div class="d-flex v-center">
+      <input ref="inputRef"
+             :autofocus="$attrs.autofocus"
+             :type="type"
+             @focusin="active=true"
+             @focusout="active=false"
+             :placeholder="$attrs.placeholder"
+             autocomplete="no"
+             @input="emitValue"
+             v-model="lazyValue"
+             :readonly="disableInput"
+             :class="{'input-shadow':disableInput}"
+             class="me-1"
+      />
+      <div class="select-unit" :class="{'input-shadow':disableUnit}">
+        <r-select-input :readonly="disableUnit" :items="units" v-model="unit"
+                        :translate="translate" hide justValue @update:model-value="emitValue"
+                        class="mt-0"
+                        disableSearch
+                        firstSelect></r-select-input>
+      </div>
     </div>
   </r-input>
 </template>
-<script>
-export default {
-  name: 'r-unit-input',
-  props: {
-    type: {
-      type: String,
-      default: 'text'
-    },
-    units: {
-      type: Array,
-      required: true
-    },
-    modelValue: {
-      type: Object, default: () => {
-        return {
-          value: null,
-          unit: null
-        }
-      }
-    },
-    disableInput: Boolean,
-    disableUnit: Boolean,
-    autofocus: Boolean,
-    translate: Boolean
+<script setup>
+import {ref, watch, computed} from 'vue'
+
+const props = defineProps({
+  /**
+   * Input type (text, number, etc.)
+   * @type {String}
+   * @default 'text'
+   */
+  type: {
+    type: String,
+    default: 'text'
   },
-emits:['update:modelValue'],
-  data() {
-    return {
-      lazyValue: this.modelValue ? this.modelValue.value : null,
-      active: false,
-      unit: this.modelValue ? this.modelValue.unit : null
-    }
+  /**
+   * Array of available unit options
+   * @type {Array}
+   * @required
+   */
+  units: {
+    type: Array,
+    required: true
   },
-  watch: {
-    modelValue() {
-      this.lazyValue = this.modelValue.value
-      this.unit = this.modelValue.unit
-    }
+  /**
+   * The model value object containing value and unit
+   * @type {Object}
+   * @default () => ({ value: null, unit: null })
+   */
+  modelValue: {
+    type: Object,
+    default: () => ({
+      value: null,
+      unit: null
+    })
   },
-  methods: {
-    handleClick(e) {
-      this.$refs.input.focus()
-    },
-    emit() {
-      if (this.unit === null) {
-        this.unit = this.units[0]
-      }
-      this.$emit('update:modelValue', {value: this.lazyValue, unit: this.unit})
-    }
+  /**
+   * Disable the value input field
+   * @type {Boolean}
+   */
+  disableInput: Boolean,
+  /**
+   * Disable the unit selector
+   * @type {Boolean}
+   */
+  disableUnit: Boolean,
+  /**
+   * Enable translation for unit labels
+   * @type {Boolean}
+   */
+  translate: Boolean
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when the value or unit changes
+   * @param {Object} value - The updated object with value and unit properties
+   */
+  'update:modelValue'
+])
+
+// Reactive data
+const lazyValue = ref(props.modelValue?.value ?? null)
+const active = ref(false)
+const unit = ref(props.modelValue?.unit ?? null)
+const inputRef = ref(null)
+
+// Computed properties
+/**
+ * Gets the currently selected unit or defaults to first unit in array
+ * @returns {any|null} The selected unit
+ */
+const selectedUnit = computed(() => {
+  return unit.value || (props.units.length > 0 ? props.units[0] : null)
+})
+
+// Methods
+/**
+ * Focuses the input element
+ */
+const handleClick = () => {
+  inputRef.value?.focus()
+}
+
+/**
+ * Emits the updated value and unit to the parent component
+ */
+const emitValue = () => {
+  const value = {
+    value: lazyValue.value,
+    unit: selectedUnit.value
   }
+
+  emit('update:modelValue', value)
 }
 
+// Watchers
+watch(() => props.modelValue, (newValue) => {
+  if (newValue) {
+    lazyValue.value = newValue.value ?? null
+    unit.value = newValue.unit ?? null
+  } else {
+    lazyValue.value = null
+    unit.value = null
+  }
+}, {deep: true})
 </script>
+
 <style lang="scss">
-@use "../../../style/variables/base";
-@use "../../../style/mixins";
-@use "../../../style/functions";
+@use "../../../style" as *;
 
-.#{base.$prefix}unit-input {
+.#{$prefix}unit-input {
   .input-shadow, .input-shadow * {
-    @include mixins.disable-states()
+    @include disable-states()
   }
 
-  input {
-    width: calc(65% - 4px);
+  > .input-control {
+    @include rtl() {
+      padding-left: 0;
+    }
+    @include ltr() {
+      padding-right: 0;
+    }
   }
 
-
-  --c-unit: var(--color-sheet-low);
-
+  input {
+    flex-grow: 1;
+  }
 
   .select-unit {
     width: calc(35% + 16px);
     overflow-x: clip;
 
-    * {
-      font-size: functions.map-metro-get(base.$headings, 'label-3', 'size') !important;
+    @include rtl() {
+      border-right: 1px solid var(--color-border-low);
+    }
+
+    @include ltr() {
+      border-left: 1px solid var(--color-border-low);
     }
 
     .input-control {
-      border-radius: 0;
       padding: 4px;
-      @include mixins.rtl() {
-        border-right: 1px solid var(--c-unit) !important;
-      }
-
-      @include mixins.ltr() {
-        border-left: 1px solid var(--c-unit) !important;
-      }
     }
 
 

package/components/formCreator/index.js

@@ -4,5 +4,4 @@ export * as l_card from '../card/index.js'
 export * as l_container from '../container/index.js'
 export * as l_row from '../container/row.js'
 export * as l_col from '../container/col.js'
-export * as l_message from '../message/index.js'
 export * as l_form from '../form/index.js'