qun33 / arayts Goto Github PK

ArayTS，A set of practical tools and services that make working with TypeScript in Vue projects easy and enjoyable.

Through ArayTS, you can easily use TypeScript in Vue3\other TS supported projects to improve development efficiency and reduce potential errors. Designed to simplify daily tasks, it provides developers with a set of practical tools and services to make using TypeScript in Vue projects easy and enjoyable.

Through ArayTS, you can easily use TypeScript in Vue3\other TS supported projects to improve development efficiency and reduce potential errors. Designed to simplify daily tasks, it provides developers with a set of practical tools and services to make using TypeScript in Vue projects easy and enjoyable.

I recommend that you install ArayTS using the NPM package manager.

npm install arayts --save

I recommend you to use ArayTS the way you introduce it inside the component.

Introduced in the vue file that needs to be used:

<script lang="ts" setup>
  import {Email} from 'arayts'  
</script>

If correct, return true, if incorrect, return false. There are three ways to use the email verification function:

1. Input the email address that needs to be verified.

   import {Email} from 'arayts';
   const isTrue = Email('[email protected]');
   

2. Enter the email address whose format needs to be verified and the email domain name that needs to be verified for compliance.

   import {Email} from 'arayts';
   const isTrue = Email('[email protected]','qq.com');
   

3. Enter the email address whose format needs to be verified and the array of email domain names that need to be verified for compliance.

   import {Email} from 'arayts';
   const isTrue = Email('[email protected]',["outlook.com","qq.com"]);
   

If correct, return true, if incorrect, return false. There are three ways to use the mobile phone number verification function:

1. Enter the mobile phone number whose format needs to be verified.

   import {Phone} from 'arayts';
   const isTrue = Phone('15156169999');
   

2. Input the mobile phone number that needs to be verified and the region that needs to be verified for compliance.

   import {Phone} from 'arayts';
   const isTrue = Phone('15156169999','zh-CN');
   

3. Pass in the mobile phone number whose format needs to be verified and the region array that needs to be verified for compliance.

   import {Phone} from 'arayts';
   const isTrue = Phone('15156169999',['zh-CN','en-hk']);
   

Attached is a comparison table of language (culture) codes and country regions:

There are four date operation functions:

1. Date acquisition (returns string type data).

   import {Time} from 'arayts';
   const date = Time.get();
   const date = Time.get("YYYY=MM=DD"); //The returned date format can be customized, but it must include one, two or all of YYYY, MM, DD
   

2. Determine the date range (return boolean type data).

   import {Time} from 'arayts';
   const verifiedDate = '2023/11/26';
   const previousDate = '2023/11/25';
   const laterDate = '2023/11/27';
   
   const isTrue = Time.range(verifiedDate,previousDate);//By default the latter date is the local date.
   const isTrueTwo = Time.range(verifiedDate,previousDate,laterDate);
   

3. Date comparison (returns boolean type data).

   import {Time} from 'arayts';
   const previousDate = '2023/11/25';
   const laterDate = '2023/11/27';
       
   const isTrue = Time.order(previousDate,laterDate);
   const isTrue = Time.order(previousDate); //By default the latter date is the local date.
   

4. Date calculation (return number type data).

Supports two usage methods, returning number type data:

1. Only pass in the number of digits of the random number;

    import {random} from 'arayts';
       
    const data = random(4);
   

2. Pass in the number of digits and range;

   Supports two usage methods, returning number type data:

   1. Only pass in the number of digits of the random number;

       import {random} from 'arayts';
          
       const data = random(4);
      

   2. Pass in the number of digits and range;

   import {random} from 'arayts';
       
   const data = random(4,0,100);
   

The temporary storage function function supports storing functions and calling them on any page, which greatly saves code redundancy and improves code reuse.

// custom function
import { Storage } from 'arayts';

function existingFunction() {
    console.log(123)
}
Storage.save('myFunction', existingFunction);   //Save function to repository
const storedFunction = Storage.get('myFunction');   //Call function from repository
storedFunction();   //Call functions
Storage.remove('myFunction');   //Delete this function
Storage.clear();    //Clear function

In [email protected] and above, the password encryption function has been canceled in the Vue project. You can only use the salt method to obtain the salt value. Because the use of built-in modules such as crypto has been canceled in webpack > 5 versions, it is being actively used. Find equivalent alternatives.

salt method, obtain the salt value;

import { salt } from 'arayts';
const salt = salt(16); // 16 represents the byte length, the default is 16 if not written.

Provides a function that can solve the compatibility issues of different browsers:

import { applyStyles } from 'arayts';

const myElement = document.getElementById('example') as HTMLElement;
if (myElement) {
  applyStyles(myElement);
}

In the [email protected] version, only the fuzzy matching function is temporarily provided:

import { fuzzyFilter } from 'arayts';

const userInput = "Hello";
const dataArray = [
  { name: "Hello World" },
  { name: "Hello little bird" },
  { name: "Hello little bird" },
  { name: "Hello World" },
  // Other data items...
];

const filteredItems = fuzzyFilter(userInput, dataArray, "name", 100);
console.log(filteredItems);

// userInput: reference for filtering data
// dataArray: the data array that needs to be filtered, the object name can be customized
// "name": the field name that needs to be filtered
// 100: The top 100 that best match the filtered data

The data returned are all objects.

1. Monitor mouse position

import {Doc} from 'arayts';

const currentPosition = Doc.getMouse();
console.log(`Mouse Position: x=${currentPosition.x}, y=${currentPosition.y}`);

2. Monitor the scroll bar position

import {Doc} from 'arayts';

const currentPosition2 = Doc.getScroll();
console.log(`Mouse Position: x=${currentPosition2.x}, y=${currentPosition2.y}`);

ArayTS，A set of practical tools and services that make working with TypeScript in Vue projects easy and enjoyable.