@iankibetsh/shframework 5.6.8 → 5.6.9

package/dist/library.js

@@ -2073,125 +2073,137 @@ const countries = [
   }
 ];
 
-var script$A = {
-  name: 'PhoneInput',
-  props: ['modelValue', 'country_code','disabled'],
-  data () {
-    return {
-      input: this.modelValue,
-      countries: countries,
-      selectedCountry: {
-        name: 'Kenya',
-        dialCode: '+254',
-        isoCode: 'KE',
-        flag: 'https://www.countryflags.io/KE/flat/64.png'
-      },
-      flag: undefined.VITE_APP_HOME_URL + 'flags/ke.svg',
-      appUrl: undefined.VITE_APP_HOME_URL
-    }
-  },
-  updated () {
-    if (!this.selectedCountry || !this.input) ;
-  },
-  mounted () {
-    this.setSelectedCountry();
-  },
-  watch: {
-    modelValue: function(newVal){
-      if(!this.input){
-        let phone = newVal.replace('+254','');
-        this.input = phone.replace('+1','');
-      }
-    }
-  },
-  methods: {
-    updateValue: function () {
-      let phone = this.input;
-      phone = '-' + phone;
-      phone = phone.replace('-0', '');
-      phone = phone.replace('-', '');
-      // this.input = phone
-      if (this.selectedCountry) {
-        phone = this.selectedCountry.dialCode + '' + phone;
-      }
-      this.$emit('update:modelValue', phone);
-      this.flag = this.appUrl + 'flags/' + this.selectedCountry.isoCode.toLowerCase() + '.svg';
-    },
-    setSelectedCountry: function () {
-      let countryCode = 'KE';
-      if (this.country_code) {
-        countryCode = this.country_code;
-      }
-      this.input = this.modelValue;
-      const country = this.countries.find(function (country) {
-        if (countryCode.toUpperCase() === country.isoCode) {
-          return country
-        }
-      }, this);
-      if (this.input) {
-        if (!this.input.includes('+')) {
-          this.input = '+' + this.input;
-        }
-        this.flag = this.appUrl + 'flags/' + country.isoCode.toLowerCase() + '.svg';
-        this.input = this.input.replace(country.dialCode, '');
-        this.input = this.input.replace(':', '');
-        this.input = this.input.replace(':', '');
-        this.input = this.input.replace(':', '');
-        this.selectedCountry = country;
-      }
-    }
-  }
-};
-
 const _hoisted_1$q = {
-  class: "sh-phone mb-3",
+  class: "sh-phone mb-3 form-control",
   style: {"display":"flex"}
 };
 const _hoisted_2$i = {
   key: 0,
   style: {"display":"contents"}
 };
-const _hoisted_3$f = ["src"];
+const _hoisted_3$f = ["src", "alt"];
 const _hoisted_4$f = ["value"];
 const _hoisted_5$d = ["disabled"];
 
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+var script$A = {
+  __name: 'PhoneInput',
+  props: {
+  modelValue: String,
+  country_code: String,
+  disabled: Boolean
+},
+  emits: ['update:modelValue'],
+  setup(__props, { emit: __emit }) {
+
+const props = __props;
+const countryCode = vue.ref(props.country_code || 'KE');
+const emit = __emit;
+const input = vue.ref(props.modelValue);
+const countriesList = vue.ref(countries);
+const selectedCountry = vue.ref({
+  name: 'Kenya',
+  dialCode: '+254',
+  isoCode: 'KE',
+  flag: 'https://www.countryflags.io/KE/flat/64.png'
+});
+const flag = vue.computed(()=> {
+      const homeUrl = undefined.VITE_APP_HOME_URL;
+      if (selectedCountry.value) {
+        return homeUrl + 'flags/' + selectedCountry.value.isoCode.toLowerCase() + '.svg';
+      }
+    }
+);
+undefined.VITE_APP_HOME_URL;
+
+const updateValue = () => {
+  let phone = input.value || '';
+  phone = phone.replace(/^0/, '');
+  if (selectedCountry.value) {
+    phone = selectedCountry.value.dialCode + phone;
+  }
+  emit('update:modelValue', phone);
+  // flag.value = appUrl + 'flags/' + selectedCountry.value.isoCode.toLowerCase() + '.svg';
+};
+
+const setSelectedCountry = () => {
+  input.value = props.modelValue;
+  const country = countriesList.value.find(country => country.isoCode === countryCode.value.toUpperCase());
+  if (country) {
+    selectedCountry.value = country;
+    if (input.value) {
+      if (!input.value.includes('+')) {
+        input.value = '+' + input.value;
+      }
+      // flag.value = appUrl + 'flags/' + country.isoCode.toLowerCase() + '.svg';
+      input.value = input.value.replace(country.dialCode, '').replace(/:/g, '');
+    }
+  }
+};
+
+vue.watch(() => props.modelValue, (newVal) => {
+  if (!input.value) {
+    input.value = newVal.replace('+254', '').replace('+1', '');
+  }
+});
+
+vue.onMounted(() => {
+  getCountryCodeFromBackend();
+});
+
+const getCountryCodeFromBackend = ()=>{
+  if(!props.modelValue){
+    shApis.doGet('sh-country-code').then(response=>{
+      if(response.data && response.data.countryCode){
+        countryCode.value = response.data.countryCode;
+      }
+    }).finally(()=>{
+      setSelectedCountry();
+    });
+  }
+};
+
+return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
-    ($data.selectedCountry)
+    (selectedCountry.value)
       ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$i, [
-          vue.createElementVNode("img", { src: $data.flag }, null, 8 /* PROPS */, _hoisted_3$f),
-          vue.createTextVNode(" " + vue.toDisplayString($data.selectedCountry.dialCode), 1 /* TEXT */)
+          vue.createElementVNode("img", {
+            src: flag.value,
+            alt: selectedCountry.value.name + ' flag'
+          }, null, 8 /* PROPS */, _hoisted_3$f),
+          vue.createTextVNode(" " + vue.toDisplayString(selectedCountry.value.dialCode), 1 /* TEXT */)
         ]))
       : vue.createCommentVNode("v-if", true),
     vue.withDirectives(vue.createElementVNode("select", {
-      onChange: _cache[0] || (_cache[0] = (...args) => ($options.updateValue && $options.updateValue(...args))),
-      "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.selectedCountry) = $event)),
+      onChange: updateValue,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((selectedCountry).value = $event)),
       class: "phone-country"
     }, [
-      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.countries, (country) => {
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(countries), (country) => {
         return (vue.openBlock(), vue.createElementBlock("option", {
           value: country,
           key: country.dialCode
         }, vue.toDisplayString(country.name + '(' + country.dialCode + ')'), 9 /* TEXT, PROPS */, _hoisted_4$f))
       }), 128 /* KEYED_FRAGMENT */))
     ], 544 /* NEED_HYDRATION, NEED_PATCH */), [
-      [vue.vModelSelect, $data.selectedCountry]
+      [vue.vModelSelect, selectedCountry.value]
     ]),
     vue.withDirectives(vue.createElementVNode("input", {
-      type: "number",
+      type: "text",
       class: "phone-number",
-      disabled: $props.disabled,
+      disabled: __props.disabled,
       "data-cy": "phone_input",
-      onInput: _cache[2] || (_cache[2] = (...args) => ($options.updateValue && $options.updateValue(...args))),
+      onInput: updateValue,
       placeholder: "712345678",
-      "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => (($data.input) = $event))
+      "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((input).value = $event))
     }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_5$d), [
-      [vue.vModelText, $data.input]
+      [vue.vModelText, input.value]
     ])
   ]))
 }
+}
+
+};
 
-script$A.render = render$4;
 script$A.__file = "src/lib/components/form-components/PhoneInput.vue";
 
 const _hoisted_1$p = {

package/dist/library.mjs

@@ -3,7 +3,7 @@ import { DateTime } from 'luxon';
 import Swal from 'sweetalert2';
 import { Modal, Offcanvas } from 'bootstrap';
 import NProgress from 'nprogress';
-import { openBlock, createElementBlock, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, withDirectives, Fragment, renderList, vModelSelect, vModelText, ref, onMounted, watch, unref, normalizeClass, createBlock, resolveDynamicComponent, resolveComponent, inject, useTemplateRef, mergeProps, renderSlot, normalizeStyle, computed, Teleport, createVNode, withCtx, useSlots, onBeforeUnmount, reactive, vModelCheckbox, resolveDirective, shallowRef, markRaw, isRef } from 'vue';
+import { ref, computed, watch, onMounted, openBlock, createElementBlock, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, withDirectives, Fragment, renderList, unref, vModelSelect, vModelText, normalizeClass, createBlock, resolveDynamicComponent, resolveComponent, inject, useTemplateRef, mergeProps, renderSlot, normalizeStyle, Teleport, createVNode, withCtx, useSlots, onBeforeUnmount, reactive, vModelCheckbox, resolveDirective, shallowRef, markRaw, isRef } from 'vue';
 import _ from 'lodash';
 import { defineStore, storeToRefs } from 'pinia';
 import { useRoute, useRouter } from 'vue-router';
@@ -2062,125 +2062,137 @@ const countries = [
   }
 ];
 
-var script$A = {
-  name: 'PhoneInput',
-  props: ['modelValue', 'country_code','disabled'],
-  data () {
-    return {
-      input: this.modelValue,
-      countries: countries,
-      selectedCountry: {
-        name: 'Kenya',
-        dialCode: '+254',
-        isoCode: 'KE',
-        flag: 'https://www.countryflags.io/KE/flat/64.png'
-      },
-      flag: import.meta.env.VITE_APP_HOME_URL + 'flags/ke.svg',
-      appUrl: import.meta.env.VITE_APP_HOME_URL
-    }
-  },
-  updated () {
-    if (!this.selectedCountry || !this.input) ;
-  },
-  mounted () {
-    this.setSelectedCountry();
-  },
-  watch: {
-    modelValue: function(newVal){
-      if(!this.input){
-        let phone = newVal.replace('+254','');
-        this.input = phone.replace('+1','');
-      }
-    }
-  },
-  methods: {
-    updateValue: function () {
-      let phone = this.input;
-      phone = '-' + phone;
-      phone = phone.replace('-0', '');
-      phone = phone.replace('-', '');
-      // this.input = phone
-      if (this.selectedCountry) {
-        phone = this.selectedCountry.dialCode + '' + phone;
-      }
-      this.$emit('update:modelValue', phone);
-      this.flag = this.appUrl + 'flags/' + this.selectedCountry.isoCode.toLowerCase() + '.svg';
-    },
-    setSelectedCountry: function () {
-      let countryCode = 'KE';
-      if (this.country_code) {
-        countryCode = this.country_code;
-      }
-      this.input = this.modelValue;
-      const country = this.countries.find(function (country) {
-        if (countryCode.toUpperCase() === country.isoCode) {
-          return country
-        }
-      }, this);
-      if (this.input) {
-        if (!this.input.includes('+')) {
-          this.input = '+' + this.input;
-        }
-        this.flag = this.appUrl + 'flags/' + country.isoCode.toLowerCase() + '.svg';
-        this.input = this.input.replace(country.dialCode, '');
-        this.input = this.input.replace(':', '');
-        this.input = this.input.replace(':', '');
-        this.input = this.input.replace(':', '');
-        this.selectedCountry = country;
-      }
-    }
-  }
-};
-
 const _hoisted_1$q = {
-  class: "sh-phone mb-3",
+  class: "sh-phone mb-3 form-control",
   style: {"display":"flex"}
 };
 const _hoisted_2$i = {
   key: 0,
   style: {"display":"contents"}
 };
-const _hoisted_3$f = ["src"];
+const _hoisted_3$f = ["src", "alt"];
 const _hoisted_4$f = ["value"];
 const _hoisted_5$d = ["disabled"];
 
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+var script$A = {
+  __name: 'PhoneInput',
+  props: {
+  modelValue: String,
+  country_code: String,
+  disabled: Boolean
+},
+  emits: ['update:modelValue'],
+  setup(__props, { emit: __emit }) {
+
+const props = __props;
+const countryCode = ref(props.country_code || 'KE');
+const emit = __emit;
+const input = ref(props.modelValue);
+const countriesList = ref(countries);
+const selectedCountry = ref({
+  name: 'Kenya',
+  dialCode: '+254',
+  isoCode: 'KE',
+  flag: 'https://www.countryflags.io/KE/flat/64.png'
+});
+const flag = computed(()=> {
+      const homeUrl = import.meta.env.VITE_APP_HOME_URL;
+      if (selectedCountry.value) {
+        return homeUrl + 'flags/' + selectedCountry.value.isoCode.toLowerCase() + '.svg';
+      }
+    }
+);
+import.meta.env.VITE_APP_HOME_URL;
+
+const updateValue = () => {
+  let phone = input.value || '';
+  phone = phone.replace(/^0/, '');
+  if (selectedCountry.value) {
+    phone = selectedCountry.value.dialCode + phone;
+  }
+  emit('update:modelValue', phone);
+  // flag.value = appUrl + 'flags/' + selectedCountry.value.isoCode.toLowerCase() + '.svg';
+};
+
+const setSelectedCountry = () => {
+  input.value = props.modelValue;
+  const country = countriesList.value.find(country => country.isoCode === countryCode.value.toUpperCase());
+  if (country) {
+    selectedCountry.value = country;
+    if (input.value) {
+      if (!input.value.includes('+')) {
+        input.value = '+' + input.value;
+      }
+      // flag.value = appUrl + 'flags/' + country.isoCode.toLowerCase() + '.svg';
+      input.value = input.value.replace(country.dialCode, '').replace(/:/g, '');
+    }
+  }
+};
+
+watch(() => props.modelValue, (newVal) => {
+  if (!input.value) {
+    input.value = newVal.replace('+254', '').replace('+1', '');
+  }
+});
+
+onMounted(() => {
+  getCountryCodeFromBackend();
+});
+
+const getCountryCodeFromBackend = ()=>{
+  if(!props.modelValue){
+    shApis.doGet('sh-country-code').then(response=>{
+      if(response.data && response.data.countryCode){
+        countryCode.value = response.data.countryCode;
+      }
+    }).finally(()=>{
+      setSelectedCountry();
+    });
+  }
+};
+
+return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("div", _hoisted_1$q, [
-    ($data.selectedCountry)
+    (selectedCountry.value)
       ? (openBlock(), createElementBlock("div", _hoisted_2$i, [
-          createElementVNode("img", { src: $data.flag }, null, 8 /* PROPS */, _hoisted_3$f),
-          createTextVNode(" " + toDisplayString($data.selectedCountry.dialCode), 1 /* TEXT */)
+          createElementVNode("img", {
+            src: flag.value,
+            alt: selectedCountry.value.name + ' flag'
+          }, null, 8 /* PROPS */, _hoisted_3$f),
+          createTextVNode(" " + toDisplayString(selectedCountry.value.dialCode), 1 /* TEXT */)
         ]))
       : createCommentVNode("v-if", true),
     withDirectives(createElementVNode("select", {
-      onChange: _cache[0] || (_cache[0] = (...args) => ($options.updateValue && $options.updateValue(...args))),
-      "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.selectedCountry) = $event)),
+      onChange: updateValue,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((selectedCountry).value = $event)),
       class: "phone-country"
     }, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList($data.countries, (country) => {
+      (openBlock(true), createElementBlock(Fragment, null, renderList(unref(countries), (country) => {
         return (openBlock(), createElementBlock("option", {
           value: country,
           key: country.dialCode
         }, toDisplayString(country.name + '(' + country.dialCode + ')'), 9 /* TEXT, PROPS */, _hoisted_4$f))
       }), 128 /* KEYED_FRAGMENT */))
     ], 544 /* NEED_HYDRATION, NEED_PATCH */), [
-      [vModelSelect, $data.selectedCountry]
+      [vModelSelect, selectedCountry.value]
     ]),
     withDirectives(createElementVNode("input", {
-      type: "number",
+      type: "text",
       class: "phone-number",
-      disabled: $props.disabled,
+      disabled: __props.disabled,
       "data-cy": "phone_input",
-      onInput: _cache[2] || (_cache[2] = (...args) => ($options.updateValue && $options.updateValue(...args))),
+      onInput: updateValue,
       placeholder: "712345678",
-      "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => (($data.input) = $event))
+      "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((input).value = $event))
     }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_5$d), [
-      [vModelText, $data.input]
+      [vModelText, input.value]
     ])
   ]))
 }
+}
+
+};
 
-script$A.render = render$4;
 script$A.__file = "src/lib/components/form-components/PhoneInput.vue";
 
 const _hoisted_1$p = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iankibetsh/shframework",
-  "version": "5.6.8",
+  "version": "5.6.9",
   "description": "Vue library for handling laravel backend",
   "main": "dist/library.js",
   "module": "dist/library.mjs",