renusify 2.5.2 → 3.0.1

package/components/form/switchInput/index.vue

@@ -1,69 +1,83 @@
 <template>
-    <r-input :class="`${$r.prefix}switch`" :modelValue="lazyValue" hide>
-        <div class="switch-container" :class="{'switch-active':modelValue}">
-            <div class="switch-label me-1 mt-1"
-            >{{label}}
-            </div>
-            <div class="switch-holder" @click.prevent="toggle()">
-              <div class="switch-line"></div>
-              <div class="switch-dot"></div>
-            </div>
-            <div class="switch-label ms-1 mt-1"
-                 v-if="label2">{{label2}}</div>
-        </div>
-    </r-input>
+  <r-input :class="`${$r.prefix}switch`" :modelValue="lazyValue" hide>
+    <div class="switch-container" :class="{'switch-active':modelValue}">
+      <div class="switch-label me-1"
+      >{{ label }}
+      </div>
+      <div class="switch-holder" @click.prevent="toggle()">
+        <div class="switch-line"></div>
+        <div class="switch-dot"></div>
+      </div>
+      <div class="switch-label ms-1"
+           v-if="label2">{{ label2 }}
+      </div>
+    </div>
+  </r-input>
 </template>
-<script>
+<script setup>
+import {ref, watch} from 'vue'
 
-    export default {
-        name: 'r-switch',
-        props: {
-            label: String,
-            label2: String,
-            readonly: Boolean,
-            modelValue: {
-                type: [Boolean, String]
-            }
-        },
-emits:['update:modelValue','change'],
-        data() {
-            return {
-                lazyValue: this.modelValue || false
+const props = defineProps({
+  /**
+   * Primary label for the switch
+   * @type {String}
+   */
+  label: String,
+  /**
+   * Secondary label for the switch (optional)
+   * @type {String}
+   */
+  label2: String,
+  /**
+   * The switch's model value
+   * @type {Boolean|String}
+   */
+  modelValue: {
+    type: [Boolean, String]
+  }
+})
 
-            }
-        },
-        watch: {
-            modelValue() {
-                this.lazyValue = this.modelValue
-            }
-        },
-        methods: {
-            toggle() {
-                if (!this.readonly) {
-                    if (this.lazyValue === true) {
-                        this.lazyValue = false
-                        this.$emit('change', true)
-                        this.$emit('update:modelValue', false)
-                    } else {
-                        this.lazyValue = true
-                        this.$emit('change', true)
-                        this.$emit('update:modelValue', true)
-                    }
-                }
-            }
-        }
-    }
+const emit = defineEmits([
+  /**
+   * Emitted when the switch value changes
+   * @param {Boolean|String} value - The updated switch value
+   */
+  'update:modelValue',
+  /**
+   * Emitted when the switch is toggled
+   * @param {Boolean|String} value - The new switch state
+   */
+  'change'
+])
+
+// Reactive data
+const lazyValue = ref(props.modelValue || false)
 
+// Watchers
+watch(() => props.modelValue, (newValue) => {
+  lazyValue.value = newValue
+})
+
+// Methods
+/**
+ * Toggles the switch state and emits events
+ */
+const toggle = () => {
+  const newValue = !lazyValue.value
+  lazyValue.value = newValue
+  emit('change', newValue)
+  emit('update:modelValue', newValue)
+}
 </script>
 <style lang="scss">
 @use "sass:map";
-@use "../../../style/variables/base";
-@use "../../../style/mixins";
+@use "../../../style" as *;
 
-.#{base.$prefix}switch {
+.#{$prefix}switch {
   .switch-label {
     color: var(--color-on-sheet);
   }
+
   .switch-container {
     display: flex;
     flex-direction: row;
@@ -94,11 +108,11 @@ emits:['update:modelValue','change'],
     height: 20px;
     border-radius: 50%;
     background-color: #cdcbcb;
-    transition: .3s map.get(base.$transition, 'fast-in-fast-out');
-    @include mixins.rtl() {
+    transition: .3s map.get($transition, 'fast-in-fast-out');
+    @include rtl() {
       right: 0;
     }
-    @include mixins.ltr() {
+    @include ltr() {
       left: 0;
     }
   }
@@ -111,10 +125,10 @@ emits:['update:modelValue','change'],
 
     .switch-dot {
       background-color: currentColor;
-      @include mixins.rtl() {
+      @include rtl() {
         right: 25px;
       }
-      @include mixins.ltr() {
+      @include ltr() {
         left: 25px;
       }
     }

package/components/form/telInput/index.js

@@ -2,6 +2,5 @@ export * as rTelInput from './index.vue'
 export * as l_textInput from '../textInput/index.js'
 export * as l_modal from '../../modal/index.js'
 export * as l_card from '../../card/index.js'
-export * as l_list from '../../list/index.js'
 export * as l_spacer from '../../container/spacer.js'
 export * as l_btn from '../../button/index.js'

package/components/form/telInput/index.vue

@@ -1,169 +1,272 @@
 <template>
-  <div :class="`${$r.prefix}input-tel`">
-    <r-btn :disabled="!select||readonly"
-           :rounded="!c_tile" class="btn-country ltr mr-1" outlined @click.stop="toggleDropdown">
-      <div :class="activeCountry.iso2.toLowerCase()" class="iti-flag"></div>
-      <span class="country-code pa-1"> +{{ activeCountry.dialCode }} </span>
-      <span class="dropdown-arrow">{{ open ? "▲" : "▼" }}</span>
-    </r-btn>
-    <r-text-input v-model="tel.phone" :label="label?label:$t('phone','renusify')"
-                  :readonly="readonly"
-                  :rules="required?['required','number']:['number']"
-                  :tile="c_tile"
-                  class="input-phone"
-                  @update:model-value="emit"
-    >
-    </r-text-input>
+  <r-input v-model="tel.phone"
+           :active="active"
+           :class="`${$r.prefix}input-tel`"
+           :rules="required?['required','number']:['number']"
+           ltr
+           @update:model-value="emitValue"
+           @click.prevent="handleClick">
+    <div class="d-flex v-center">
+      <r-btn :disabled="!select"
+             class="btn-country mr-1" text @click.stop="toggleDropdown">
+        <div :class="activeCountry.iso2.toLowerCase()" class="iti-flag"></div>
+        <span class="country-code pa-1"> +{{ activeCountry.dialCode }} </span>
+        <span class="dropdown-arrow">{{ open ? "▲" : "▼" }}</span>
+      </r-btn>
+      <input ref="input"
+             v-model="tel.phone"
+             :autofocus="autofocus"
+             :placeholder="placeholder"
+             :type="type"
+             autocomplete="no"
+             @focusin="active=true"
+             @focusout="active=false"
+             @input="emitValue"
+      />
+    </div>
     <r-modal
+        :class="`${$r.prefix}input-tel`"
         v-model="open"
     >
-      <div class="pa-2">
+      <div class="px-2 py-5">
         <r-text-input
             :label="$t('search','renusify')"
             v-model="search"
         ></r-text-input>
-        <r-list :items="countries" :filter="search" @update:model-value="choose">
-          <template v-slot="{item}">
-            <div
-                :class="item.iso2.toLowerCase()"
-                class="iti-flag"></div>
-            <div class="list-title">{{ item.name }}</div>
-            <r-spacer></r-spacer>
-            <span class="ltr">+{{ item.dialCode }}</span>
-          </template>
-        </r-list>
       </div>
+      <div v-for="(item,i) in genItems" :key="i" class="list-item d-flex v-center py-5 px-3 cursor-pointer"
+           @click="choose(item)">
+        <div
+            :class="item.iso2.toLowerCase()"
+            class="iti-flag"></div>
+        <div class="list-title me-1">{{ item.name }}</div>
+        <r-spacer></r-spacer>
+        <span class="ltr">+{{ item.dialCode }}</span>
+      </div>
+
     </r-modal>
-  </div>
+  </r-input>
 </template>
 
-<script>
-
-export default {
-  name: 'inputTel',
-  props: {
-    label: {
-      type: String
-    },
-    modelValue: {
-      type: String
-    },
-    defaultCountry: {
-      type: String,
-      default: 'US'
-    },
-    tile: {type: Boolean, default: undefined},
-    required: Boolean,
-    readonly: Boolean,
-    select: {
-      type: Boolean,
-      default: false
-    }
+<script setup>
+import {ref, nextTick, useAttrs, computed} from 'vue'
 
+const attr = useAttrs()
+const placeholder = attr.placeholder
+const autofocus = attr.autofocus
+
+const props = defineProps({
+  /**
+   * Input type attribute
+   * @type {String}
+   * @default 'text'
+   */
+  type: {
+    type: String,
+    default: 'text'
   },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      tel: {
-        'phone': '',
-        'country_code': ''
-      },
-      search: '',
-      countries: [],
-      activeCountry: {iso2: 'US', dialCode: '1'},
-      open: false
-    }
+  /**
+   * The telephone input's model value (format: "country_code phone_number")
+   * @type {String|Number}
+   *
+   * Example: "1 5551234567" for US number
+   */
+  modelValue: [String, Number],
+  /**
+   * Default country ISO code to pre-select
+   * @type {String}
+   * @default 'US'
+   */
+  defaultCountry: {
+    type: String,
+    default: 'US'
   },
-  created() {
-    import('./assets/all-countries.js').then((d) => {
-      this.countries = d.default;
-      if (this.modelValue) {
-        let a = this.modelValue.split(' ')
-        this.tel.country_code = a[0]
-        this.tel.phone = a[1]
-        this.activeCountry = this.findCountryByCode(this.tel.country_code)
+  /**
+   * Whether the input is required
+   * @type {Boolean}
+   */
+  required: Boolean,
+  /**
+   * Whether to show country code as a selectable dropdown
+   * @type {Boolean}
+   * @default false
+   */
+  select: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when the telephone value changes
+   * @param {String} value - The updated telephone value in format "country_code phone_number"
+   */
+  'update:modelValue'
+])
+
+// Reactive data
+const open = ref(false)
+const active = ref(false)
+const input = ref(null)
+const tel = ref({country_code: '', phone: ''})
+const search = ref('')
+const activeCountry = ref({iso2: 'US', dialCode: '1'})
+
+// Load countries data
+let countries = []
+import('./assets/all-countries.js').then((d) => {
+  countries = d.default;
+  if (props.modelValue) {
+    let a = props.modelValue.split(' ')
+    tel.value.country_code = a[0]
+    tel.value.phone = a[1]
+    activeCountry.value = findCountryByCode(tel.value.country_code)
+  } else {
+    initializeCountry()
+  }
+})
+
+// Methods
+/**
+ * Focuses the telephone input field
+ */
+const handleClick = () => {
+  if (input.value) {
+    input.value.focus()
+  }
+}
+
+/**
+ * Emits the formatted telephone value
+ */
+const emitValue = () => {
+  tel.value.country_code = activeCountry.value.dialCode
+
+  nextTick(() => {
+    tel.value.phone = tel.value.phone.replaceAll(' ', '')
+    if (tel.value.phone.startsWith('0')) {
+      tel.value.phone = tel.value.phone.substring(1, tel.value.phone.length)
+      emit('update:modelValue', tel.value.country_code + ' ' + tel.value.phone)
+    } else {
+      emit('update:modelValue', tel.value.country_code + ' ' + tel.value.phone)
+    }
+  })
+}
+
+/**
+ * Initializes the default country based on props
+ */
+const initializeCountry = () => {
+  if (props.defaultCountry) {
+    const defaultCountry = findCountry(props.defaultCountry)
+    if (defaultCountry) {
+      activeCountry.value = defaultCountry
+    }
+  }
+}
+
+/**
+ * Finds a country by ISO2 code
+ * @param {String} iso - ISO2 country code (e.g., 'US', 'GB')
+ * @returns {Object|undefined} Country object if found
+ */
+const findCountry = (iso = '') => {
+  return countries.find(country => country.iso2 === iso)
+}
+
+/**
+ * Finds a country by dial code
+ * @param {String} code - Country dial code (e.g., '1', '44')
+ * @returns {Object|undefined} Country object if found
+ */
+const findCountryByCode = (code = '') => {
+  return countries.find(country => country.dialCode === code)
+}
+
+/**
+ * Selects a country and updates the telephone value
+ * @param {Object} country - Selected country object
+ */
+const choose = (country) => {
+  activeCountry.value = country
+  emitValue()
+  reset()
+}
+
+/**
+ * Resets the country search and closes dropdown
+ */
+const reset = () => {
+  search.value = ''
+  open.value = false
+}
+
+/**
+ * Toggles the country dropdown visibility
+ */
+const toggleDropdown = () => {
+  open.value = !open.value
+}
+
+// Computed properties
+/**
+ * Generates and filters countries list for dropdown
+ * @returns {Array} Filtered list of country objects
+ */
+const genItems = computed(() => {
+  const res = []
+  if (countries) {
+    const lng = countries.length
+    for (let i = 0; i < lng; i++) {
+      if (typeof countries[i] === 'object') {
+        res[i] = countries[i]
       } else {
-        this.initializeCountry()
+        res[i] = {name: countries[i].toString(), value: countries[i]}
       }
-    })
+    }
+  }
+  if (search.value) {
+    const re = new RegExp(search.value, 'gi')
 
-  },
-  computed: {
-    c_tile() {
-      if (this.tile === undefined && this.$r.inputs.tile) {
-        return this.$r.inputs.tile
+    return res.filter(function (el) {
+      if (el.name.match(re) || el.dialCode.match(re)) {
+        return el
       }
-      return this.tile
-    },
-  },
-  methods: {
-    initializeCountry() {
-      if (this.defaultCountry) {
-        const defaultCountry = this.findCountry(this.defaultCountry)
-        if (defaultCountry) {
-          this.activeCountry = defaultCountry
-        }
-      }
-    },
-    findCountry(iso = '') {
-      return this.countries.find(country => country.iso2 === iso)
-    },
-    findCountryByCode(code = '') {
-      return this.countries.find(country => country.dialCode === code)
-    },
-
-    choose(country) {
-      this.activeCountry = country
-      this.emit()
-      this.reset()
-    },
-    reset() {
-      this.search = ''
-      this.open = false
-    },
-
-    emit(e) {
-      if (this.readonly) {
-        return
-      }
-      this.tel.country_code = this.activeCountry.dialCode
-
-      setTimeout(() => {
-        this.tel.phone = this.$helper.replacer(this.tel.phone, ' ', '')
-        if (this.tel.phone.startsWith('0')) {
-          this.tel.phone = this.tel.phone.substr(1, this.tel.phone.length)
-          this.$emit('update:modelValue', this.tel.country_code + ' ' + this.tel.phone)
-        } else {
-          this.$emit('update:modelValue', this.tel.country_code + ' ' + this.tel.phone)
-        }
-      }, 10)
-
-    },
-    toggleDropdown() {
-      this.open = !this.open
-    }
+    })
   }
-}
+  return res
+})
 </script>
 
 <style src="./assets/sprite.css"></style>
 <style lang="scss">
-@use "../../../style/variables/base";
+@use "../../../style" as *;
 
-.#{base.$prefix}input-tel {
-  display: flex;
-  align-items: end;
+.#{$prefix}input-tel {
   direction: ltr;
-  flex-wrap: wrap;
+
   .btn-country {
     width: 100px;
-    border-color: var(--color-sheet-low)
+  }
+
+  > .input-control {
+    padding-left: 0;
+  }
 
+  .label {
+    @include ltr() {
+      left: 100px;
+    }
   }
 
-  .input-phone {
-    width: calc(100% - 104px);
-    min-width: 150px;
+  .list-item {
+    border-bottom: 1px solid var(--color-sheet-low);
+
+    &:hover {
+      background-color: var(--color-one-container);
+      color: var(--color-on-one-container);
+    }
   }
 }
 </style>