@ozdao/prometheus-framework 0.2.35 → 0.2.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/prometheus-framework",
-  "version": "0.2.35",
+  "version": "0.2.36",
   "description": "Web3 Framework focused on user experience and ease of development.",
   "author": "OZ DAO <hello@ozdao.dev>",
   "license": "GPL-3.0-or-later",

package/src/components/Button/Button.vue

@@ -6,6 +6,17 @@
 			type: Function,
 			default: async () => { console.log('Button click.') }
 		},
+		text: {
+			type: Object,
+			default: (textComponent) => {
+				console.log(textComponent)
+				return textComponent = {
+					...textComponent.text,
+					success: '✔',
+					error: '✖'
+				}
+			}
+		},
 		counter: {
 	    type: Object
 	  },
@@ -31,12 +42,13 @@
 		},
 	})
 
+	
+
 	const button = ref(null);
 	const error = ref(null);
 	const loading = ref(false);
 	const finished = ref(false);
 
-
 	async function Submit() {
 	    button.value.style['pointer-events'] = 'none';
 	    error.value = null;
@@ -45,7 +57,7 @@
 	    // Функция для сброса состояния кнопки.
 	    const resetButton = () => {
 	        if (button.value) {
-	            button.value.classList.replace('bg-light-main', 'bg-main');
+	            button.value.classList.replace('bg-fifth', 'bg-main');
 	            button.value.style.pointerEvents = 'auto';
 	            loading.value = false;
 	            finished.value = false;
@@ -55,13 +67,15 @@
 
 	    try {
 	        await props.submit();
-	        button.value.classList.replace('bg-main', 'bg-light-main');
+
+	        button.value.classList.replace('bg-main', 'bg-fifth');
 
 	      
 	        loading.value = false;
+
 	        // Используем функцию сброса состояния кнопки здесь.
 	        if (props.showSucces) { 
-				finished.value = true;
+							finished.value = true;
 	            setTimeout(resetButton, 500);
 	        } else {
 	            resetButton();
@@ -73,7 +87,7 @@
 	    } catch (err) {
 	        // Если возникла ошибка, мы изменяем стили и устанавливаем сообщение об ошибке.
 	        button.value.classList.replace('bg-main', 'bg-fourth-nano');
-	        error.value = '❌';
+	        error.value = props.error;
 	        
 	        // После задержки снова сбрасываем состояние кнопки.
 	        setTimeout(() => {
@@ -88,15 +102,13 @@
 
 <template>
 	<button @click.stop="Submit" :disabled="validation" ref="button" class="button">
-		<!-- Slot -->
-		<transition  name="TransitionTranslateY-small">
+		<transition  name="moveFromTopAbsolute">
+			<!-- Slot -->
 			<span v-if="!loading && !error && !finished || !showLoader">
 				<slot></slot>
 			</span>
-		</transition>
-		<!-- Loading Circle Animation -->
-		<transition  name="TransitionTranslateY-small">
-			<span v-if="loading && !error && showLoader" class="loading">
+			<!-- Loading Circle Animation -->
+			<span v-else-if="loading && !error && showLoader" class="loading">
 				<svg class="i-regular" width="135"	height="140" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#fff">
 					<rect 			  y="10"	width="15" 	height="120" rx="6">	<animate attributeName="height"	begin="0.5s" 	dur="1s"	values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"	repeatCount="indefinite" /> <animate attributeName="y"	begin="0.5s" 	dur="1s"	values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"	repeatCount="indefinite"/> </rect> 
 					<rect x="30"	y="10" 	width="15" 	height="120" rx="6"> 	<animate attributeName="height"	begin="0.25s" dur="1s"	values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"	repeatCount="indefinite" /> <animate attributeName="y"	begin="0.25s" dur="1s"	values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"	repeatCount="indefinite"/> </rect>
@@ -105,14 +117,9 @@
 					<rect x="120" y="10" 	width="15" 	height="120" rx="6"> 	<animate attributeName="height"	begin="0.5s" 	dur="1s"	values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"	repeatCount="indefinite" /> <animate attributeName="y"	begin="0.5s" 	dur="1s"	values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"	repeatCount="indefinite"/> </rect> 
 				</svg>
 			</span>
-		</transition>
-		<!-- Checkmark if finished -->
-		<transition name="TransitionTranslateY-small">
-			<span v-if="finished && showSucces" class="loading t-white">✔</span>
-		</transition>
-		<!-- Error if not finished -->
-		<transition name="TransitionTranslateY-small">
-			<span v-if="error" class="error">{{ error }}</span>
+			<span v-else-if="finished && showSucces" class="t-semi loading t-black">{{text.success}}</span>
+			<!-- Error if not finished -->
+			<span v-else-if="error" class="error">{{ error }}</span>
 		</transition>
 		<!-- Counter -->
 		<p v-if="counter" class="button-counter">{{counter}}</p> 

package/src/components/FieldBig/FieldBig.vue

@@ -9,7 +9,7 @@
       @blur="checkInput"
       class="w-100 t-semi uppercase pd-small p-big"
     />
-    <button v-if="action" @click="emitAction" class="w-min hover-bg-black hover-t-white t-black bg-main  button" v-html="action"/>
+    <button v-if="action" @click="emitAction" class="w-max hover-bg-black hover-t-white t-black bg-main  button" v-html="action"/>
   </div>
 </template>
 

package/src/components/FieldPhone/FieldPhone.vue

@@ -1,7 +1,9 @@
 <script>
   import { defineComponent } from 'vue';
   import { parsePhoneNumberFromString } from 'libphonenumber-js';
+
   import utils, { getCountry, setCaretPosition } from './utils';
+
   import clickOutside from './click-outside';
 
   function getDefault(key) {
@@ -13,241 +15,44 @@
   }
 
   export default /*#__PURE__*/defineComponent({
-    name: 'Vue3ReactiveTelInput', // vue component name
+    name: 'Vue3ReactiveTelInput', 
     directives: {
       clickOutside,
     },
     props: {
-      /**
-       * reactive value of the tel input
-       */
-      modelValue: {
-        type: String,
-        default: '',
-      },
-      /**
-       * class assign to root when the input number is invalid belong to the country code
-       */
-      badClass: {
-        type: [String, Array, Object],
-        default: '',
-      },
-      /**
-       * class assign to root when the input number is valid belong to the country code
-       */
-      goodClass: {
-        type: [String, Array, Object],
-        default: '',
-      },
-      /**
-       * style assign to root when the input number is invalid belong to the country code
-       */
-      badStyle: {
-        type: [String, Array, Object],
-        default: '',
-      },
-      /**
-       * style assign to root when the input number is valid belong to the country code
-       */
-      goodStyle: {
-        type: [String, Array, Object],
-        default: '',
-      },
-      /**
-       * class assign when the input number is invalid belong to the country code
-       */
-      badInputClass: {
-        type: [String, Array, Object],
-        default: '',
-      },
-      /**
-       * class assign when the input number is valid belong to the country code
-       */
-      goodInputClass: {
-        type: [String, Array, Object],
-        default: '',
-      },
-      /**
-       * style assign when the input number is invalid belong to the country code
-       */
-      badInputStyle: {
-        type: [String, Array, Object],
-        default: '',
-      },
-      /**
-       * style assign when the input number is valid belong to the country code
-       */
-      goodInputStyle: {
-        type: [String, Array, Object],
-        default: '',
-      },
-      /**
-       * list of all contries
-       */
-      allCountries: {
-        type: Array,
-        default: () => getDefault('allCountries'),
-      },
-      /**
-       * flag to know if the value will be automatically formatted
-       */
-      autoFormat: {
-        type: Boolean,
-        default: () => getDefault('autoFormat'),
-      },
-      validation: {
-        type: [Boolean,Object],
-        default: false,
-      },
-      /**
-       * customized validation RegExp or flag 
-       */
-      customValidate: {
-        type: [Boolean, RegExp],
-        default: () => getDefault('customValidate'),
-      },
-      /**
-       * a default country
-       */
-      defaultCountry: {
-        // Default country code, ie: 'AU'
-        // Will override the current country of user
-        type: String,
-        default: () => getDefault('defaultCountry'),
-      },
-      /**
-       * flag defining whether the input must be disabled
-       */
-      disabled: {
-        type: Boolean,
-        default: () => getDefault('disabled'),
-      },
-      /**
-       * flag definir if we'll automatically choose a default country
-       */
-      autoDefaultCountry: {
-        type: Boolean,
-        default: () => getDefault('autoDefaultCountry'),
-      },
-      /**
-       * object of dropdown options
-       */
-      dropdownOptions: {
-        type: Object,
-        default: () => getDefault('dropdownOptions'),
-      },
-      /**
-       * list of countries to ignore
-       */
-      ignoredCountries: {
-        type: Array,
-        default: () => getDefault('ignoredCountries'),
-      },
-      /**
-       * object of input options
-       */
-      inputOptions: {
-        type: Object,
-        default: () => getDefault('inputOptions'),
-      },
-      /**
-       * valid message to display
-       */
-      invalidMsg: {
-        type: String,
-        default: () => getDefault('invalidMsg'),
-      },
-      /**
-       * the mode of the input
-       */
-      mode: {
-        type: String,
-        default: () => getDefault('mode'),
-      },
-      /**
-       * limit the giving input to only manage your list of contry
-       */
-      onlyCountries: {
-        type: Array,
-        default: () => getDefault('onlyCountries'),
-      },
-      /**
-       * the list of preferred countries
-       */
-      preferredCountries: {
-        type: Array,
-        default: () => getDefault('preferredCountries'),
-      },
-      /**
-       * the flag defining if the input must only content valid characters
-       */
-      validCharactersOnly: {
-        type: Boolean,
-        default: () => getDefault('validCharactersOnly'),
-      },
-      /**
-       * the root default class
-       */
-      rootClass: {
-        type: [String, Array, Object],
-        default: () => getDefault('styleClasses'),
-      },
-      /**
-       * the input default class
-       */
-      inputClass: {
-        type: [String, Array, Object],
-        default: () => {return ''},
-      },
-      /**
-       * the div input default class
-       */
-      divInputClass: {
-        type: [String, Array, Object],
-        default: () => {return ''},
-      },
-      /**
-       * the root default style
-       */
-      rootStyle: {
-        type: [String, Array, Object],
-        default: () => {return ''},
-      },
-      /**
-       * the dropdown button style
-       */
-      dropdownStyle: {
-        type: [String, Array, Object],
-        default: () => {return ''},
-      },
-      /**
-       * the dropdown list style
-       */
-      listStyle: {
-        type: [String, Array, Object],
-        default: () => {return ''},
-      },
-      /**
-       * the input style
-       */
-      inputStyle: {
-        type: [String, Array, Object],
-        default: () => {return ''},
-      },
-      /**
-       * the input id 
-       */
-      inputId: {
-        type: [String, Array, Object],
-        default: () => {return ''},
-      },
-      /**
-       * the input placeholder
-       */
-      Placeholder: {
-        type: [String, Object, Function],
-        default: () => {return ''},
-      },
+      modelValue: { type: String, default: '',},
+      badClass: { type: [String, Array, Object], default: '', },
+      goodClass: { type: [String, Array, Object], default: '', },
+      badStyle: { type: [String, Array, Object], default: '', },
+      goodStyle: { type: [String, Array, Object], default: '', },
+      badInputClass: { type: [String, Array, Object], default: '', },
+      goodInputClass: { type: [String, Array, Object], default: '', },
+      badInputStyle: { type: [String, Array, Object], default: '', },
+      goodInputStyle: { type: [String, Array, Object], default: '', },
+      allCountries: { type: Array, default: () => getDefault('allCountries'), },
+      autoFormat: { type: Boolean, default: () => getDefault('autoFormat'), },
+      validation: { type: [Boolean, Object], default: false, },
+      customValidate: { type: [Boolean, RegExp], default: () => getDefault('customValidate'), },
+      defaultCountry: { type: String, default: () => getDefault('defaultCountry'), },
+      disabled: { type: Boolean, default: () => getDefault('disabled'), },
+      autoDefaultCountry: { type: Boolean, default: () => getDefault('autoDefaultCountry'), },
+      dropdownOptions: { type: Object, default: () => getDefault('dropdownOptions'), },
+      ignoredCountries: { type: Array, default: () => getDefault('ignoredCountries'), },
+      inputOptions: { type: Object, default: () => getDefault('inputOptions'), },
+      invalidMsg: { type: String, default: () => getDefault('invalidMsg'), },
+      mode: { type: String, default: () => getDefault('mode'), },
+      onlyCountries: { type: Array, default: () => getDefault('onlyCountries'), },
+      preferredCountries: { type: Array, default: () => getDefault('preferredCountries'), },
+      validCharactersOnly: { type: Boolean, default: () => getDefault('validCharactersOnly'), },
+      rootClass: { type: [String, Array, Object], default: () => getDefault('styleClasses'), },
+      inputClass: { type: [String, Array, Object], default: () => {return ''}, },
+      divInputClass: { type: [String, Array, Object], default: () => {return ''}, },
+      rootStyle: { type: [String, Array, Object], default: () => {return ''}, },
+      dropdownStyle: { type: [String, Array, Object], default: () => {return ''}, },
+      listStyle: { type: [String, Array, Object], default: () => {return ''}, },
+      inputStyle: { type: [String, Array, Object], default: () => {return ''}, },
+      inputId: { type: [String, Array, Object], default: () => {return ''}, },
+      Placeholder: { type: [String, Object, Function], default: () => {return ''}, },
     },
     data() {
       return {
@@ -257,7 +62,6 @@
           action: null,
           amount: null,
         },
-        // vue3-reactive-tel-data
         phone: this.modelValue ? this.modelValue : '',
         activeCountryCode: '',
         open: false,
@@ -311,15 +115,6 @@
           // console.log(this.phoneObject?this.phoneObject.number !== "":false)
           this.$nextTick(() => { this.phone = oldValue; this.onInput(); });
         } else {
-          // let dataphone;
-          // console.log(this.phoneObject?this.phoneObject !== "":false)
-          // if(this.phoneObject?this.phoneObject !== "":false)
-          // {
-          //   dataphone = this.phoneObject.number
-          // }
-          // else{
-          //   dataphone = value
-          // }
           this.phone = value;
         }
       },
@@ -334,9 +129,9 @@
       },
     },
     mounted() {
-      // if (this.value) {
-      //   this.phone = this.value;
-      // }
+      if (this.value) {
+        this.phone = this.value;
+      }
 
       this.cleanInvalidCharacters();
 
@@ -352,7 +147,6 @@
         .catch(console.error)
         .then(() => {
           this.finishMounted = true;
-          // console.log(123)
         });
     },
     computed: {
@@ -400,18 +194,15 @@
       },
       phoneObject() {
         let result;
+
         if (this.phone?.[0] === '+') {
           result = parsePhoneNumberFromString(this.phone) || {};
         } else {
           result = parsePhoneNumberFromString(this.phone, this.activeCountryCode) || {};
         }
 
-        const {
-          metadata,
-          ...phoneObject
-        } = result;
+        const { metadata, ...phoneObject } = result;
         
-        // console.log(result.isValid?result.isValid():'loll')
         let valid = result.isValid?.();
         let formatted = this.phone;
 
@@ -483,68 +274,28 @@
     methods: {
       resetPlaceholder() {
         this.parsedPlaceholder = this.inputOptions.placeholder;
-        // TODO: Fix dynamicPlaceholder
-        // if (!this.inputOptions.dynamicPlaceholder) {
-        //   return result;
-        // }
-        // getExamples()
-        //   .then((results) => {
-        //     examples = results;
-        //     const mode = (!this.mode || this.mode === 'auto') ? 'international' : this.mode;
-        //     const number = getExampleNumber(this.activeCountryCode.toUpperCase(), results);
-        //     this.parsedPlaceholder = number?.format(mode.toUpperCase()) || this.placeholder;
-        //   })
-        //   .catch(console.error);
       },
       initializeCountry() {
         return new Promise((resolve) => {
-          /**
-             * 1. If the phone included prefix (i.e. +12), try to get the country and set it
-             */
-          if (this.phone?.[0] === '+') {
-            resolve();
-            return;
-          }
-          /**
-           * 2. Use default country if passed from parent
-           */
-          if (this.defaultCountry) {
-            this.choose(this.defaultCountry);
-            resolve();
-            return;
-          }
-
+          // 1. If the phone included prefix (i.e. +12), try to get the country and set it
+          if (this.phone?.[0] === '+') { resolve(); return; }
+          // 2. Use default country if passed from parent
+          if (this.defaultCountry) { this.choose(this.defaultCountry); resolve(); return; }
           const fallbackCountry = this.preferredCountries[0] || this.filteredCountries[0];
-          /**
-           * 3. Check if fetching country based on user's IP is allowed, set it as the default country
-           */
+          // 3. Check if fetching country based on user's IP is allowed, set it as the default country
           if (this.autoDefaultCountry) {
             getCountry()
-              .then((res) => {
-                this.choose(res || this.activeCountryCode);
-              })
-              .catch((error) => {
-                console.warn(error);
-                /**
-                 * 4. Use the first country from preferred list (if available) or all countries list
-                 */
-                this.choose(fallbackCountry);
-              })
-              .then(() => {
-                resolve();
-              });
+              .then((res) => { this.choose(res || this.activeCountryCode); })
+              .catch((error) => { console.warn(error); this.choose(fallbackCountry); })
+              .then(() => { resolve(); });
           } else {
-            /**
-               * 4. Use the first country from preferred list (if available) or all countries list
-               */
+          // 4. Use the first country from preferred list (if available) or all countries list
             this.choose(fallbackCountry);
             resolve();
           }
         });
       },
-      /**
-       * Get the list of countries from the list of iso2 code
-       */
+      // Get the list of countries from the list of iso2 code
       getCountries(list = []) {
         return list
           .map((countryCode) => this.findCountry(countryCode))
@@ -628,9 +379,6 @@
       },
       onInput() {
         this.$refs.input.setCustomValidity(this.phoneObject.valid ? '' : this.invalidMsg);
-        // Returns response.number to assign it to v-model (if being used)
-        // Returns full response for cases @input is used
-        // and parent wants to return the whole response.
         this.emitInput(this.phoneObject);
       },
       emitInput(value) {
@@ -787,9 +535,11 @@
     <!-- <div :class="[divInputClass]" > -->
       <input
         v-model="phone"
-        pattern="[0-9]*"
+        inputmode="numeric" 
+         pattern="\d*"
         ref="input"
         :type="inputOptions.type"
+
         :autocomplete="inputOptions.autocomplete"
         :autofocus="inputOptions.autofocus"
         :class="['vti__input', inputOptions.styleClasses, inputClass, Iclasses]"
@@ -819,6 +569,7 @@
     </div>
   </transition>
 </template>
+
 <style scoped>
 .vue3-reactive-tel-input{
   display:flex