Vue persian tools

Persian tools wrapper for vue.js

See demo

Persian tools repo

Installation

npm

npm i @persian-tools/vue-persian-tools

⚠️ If you are using vue2 you need to install composition api alongside the main package

npm i @vue/composition-api

Usage

// in vue 2
import Vue from "vue";
import tools from "@persian-tools/vue-persian-tools";

Vue.use(tools, {
    components: true,
    directives: true
});

// in vue 3
import tools from "@persian-tools/vue-persian-tools";
createApp(App).use(tools, options);

this way, you can install directives & components globally. by default only components will install globally. by passing directives: true to plugin options you can also enable directives

{
    components: false, // it wont install components
    directives: true, // install directives globally
}

You can also install components & directives globally by their names.

{
    components: ['isPersian', 'addOrdinalSuffix', '...'],
    directives: ['halfSpace'],
}

Or import them locally

// import components from module directory
import { halfSpace } from "@persian-tools/vue-persian-tools/dist/modules";
// import directives from directive directory
import { numberToWords, removeOrdinalSuffix } from "@persian-tools/vue-persian-tools/dist/directives";

export default {
    // install locally
    directives: { numberToWords, removeOrdinalSuffix },
    components: { halfSpace }
};

components

`tag prop`

every component accept a tag prop. you can use it to customize component html tag. default is span

<is-persian tag="div"></is-persian>

`isPersian` See details

slots:
isPersian: boolean

<is-persian :str="text" :isComplex="complex" :trimPattern="trim" v-slot="{isPersian}">{{ isPersian }}</is-persian>

`URLfix` See details

slots:
url: string

<URLfix :url="your url" v-slot="{ url }">fixed URL: <b>{{ url }}</b></URLfix>

`Sheba` See details

slots:
isValid: boolean
info: ShebaResult

<Sheba :shebaCode="code" v-slot="{ isValid, info }">
    is sheba valid: {{ isValid }}

    <h3>info about sheba</h3>
    <p>nickname: {{ info.nickname }}</p>
    <p>name: {{ info.name }}</p>
    <p>persianName: {{ info.persianName }}</p>
    <p>code: {{ info.code }}</p>
    <p>accountNumberAvailable: {{ info.accountNumberAvailable }}</p>
</Sheba>

`addOrdinalSuffix` See details

slots:
text: string

<addOrdinalSuffix :number="text" v-slot="{ text }">{{ text }}</addOrdinalSuffix>

`bill` See details

slots:
result: billResult
amount: number
type: billType
isBillValid: boolean
isBillIdValid: boolean
isBillPaymentValid: boolean

<bill :bill="val" v-slot="{ result, amount, type, isBillValid, isBillIdValid, isBillPaymentValid }">
    <p>result of bill:{{ result }}</p>
    <p>amount:{{ amount }}</p>
    <p>bill type:{{ type }}</p>
    <p>is bill valid:{{ isBillValid }}</p>
    <p>is bill id valid:{{ isBillIdValid }}</p>
    <p>is bill payment id valid:{{ isBillPaymentValid }}</p>
</bill>

`commas` See details

slots:
number: number | string

<div>
    <addCommas :number="your number..." v-slot="{ number }"> {{ number }}</addCommas>
    <removeCommas :number="your number..." v-slot="{ number }">{{ number }}</removeCommas>
</div>

`digits` See details

slots:
value: string

<digits :number="input number..." :convert="language to convert..." v-slot="{ value }">converted to: {{ value }}</digits>

`extractCardNumber` See details

slots:
cards: ExtractCardNumber[]
valid: ExtractCardNumber[]

<extractCardNumber :str="val" v-slot="{ cards, valid }">
    <ul>
        <h4>all extracted cards:</h4>
        <li v-for="(card, i) in cards" :key="i">
            <p>index: {{ card.index }}</p>
            <p>pure: {{ card.pure }}</p>
            <p>base: {{ card.base }}</p>
            <p>isValid: {{ card.isValid }}</p>
        </li>
        <li v-for="(card, i) in valid" :key="i">
            <p>index: {{ card.index }}</p>
            <p>pure: {{ card.pure }}</p>
            <p>base: {{ card.base }}</p>
            <p>isValid: {{ card.isValid }}</p>
        </li>
    </ul>
</extractCardNumber>

`getBankNameFromCardNumber` See details

slots:
bankName: string

<getBankNameFromCardNumber :digits="card_number..." v-slot="{ bankName }"> {{ bankName }}</getBankNameFromCardNumber>

`getPlaceByIranNationalId` See details

slots:
city: string
codes: string[]
province: string

<getPlaceByIranNationalId :nationalId="id..." v-slot="{ city, codes, province }">
    city: <b> {{ city }} </b> <br />
    province: <b> {{ province}} </b> codes: <b> {{ codes }} </b>
</getPlaceByIranNationalId>

`halfSpace` See details

slots:
text: string

<halfSpace :str="text" v-slot="{ text }">{{ text }}</halfSpace>

`hasPersian` See details

slots:
hasPersian: boolean

<hasPersian :str="text" v-slot="{ hasPersian }">{{ hasPersian }}</hasPersian>

`isArabic` See details

slots:
isArabic: boolean

<isArabic :str="text" :trimPattern="trim" v-slot="{ isArabic }">{{ isArabic }}</isArabic>

`numberToWords` See details

slots:
words: string

<numberToWords :number="val" v-slot="{ words }">{{ words }}</numberToWords>

`phoneNumber` See details

slots:
details: OperatorModel | null
isValid: boolean

<phoneNumber :number="val" v-slot="{ details, isValid }">
    <p>details: {{ details }}</p>
    <p>is phone number valid: {{ isValid }}</p>
</phoneNumber>

`removeOrdinalSuffix` See details

slots:
text: string

<removeOrdinalSuffix :number="text" v-slot="{ text }"><b>{{ text }}</b></removeOrdinalSuffix>

`toPersianChars` See details

slots:
text: string

<toPersianChars :str="val" v-slot="{ text }">{{ text }}</toPersianChars>

`verifyCardNumber` See details

slots:
isValid: boolean

<verifyCardNumber :digits="text" v-slot="{ isValid }">{{ isValid }}</verifyCardNumber>

`verifyIranianNationalId` See details

slots:
isValid: boolean

<verifyIranianNationalId :nationalId="text" v-slot="{ isValid }">{{ isValid }}</verifyIranianNationalId>

`wordsToNumber` See details

slots:
number: number

<wordsToNumber :words="val..." fuzzy addCommas v-slot="{ number }">{{ number }}</wordsToNumber>

`plate` See details

slots:
number: String | PlateOptions

<plate number="12D45147" v-slot="{ info, isValid }">{{ info }} | {{ isValid }}</plate>

`timeAgo` See details

slots:
date: String

<timeAgo date="1400/04/07 18:00:00" v-slot="{ time }">{{ time }}</timeAgo>

directives

all directives have sync modifiers. using this modifier will enable reactive data in your directive.

`halfSpace directive` See details

<span v-half-space>your text</span> <input :value="text" v-half-space.sync />

`toPersian directive` See details

<span v-to-persian>...</span> <input :value="text" v-to-persian.sync />

`URLFix directive` See details

<span v-url-fix>...</span> <input :value="text" v-url-fix.sync />

`addOrdinalSuffix directive` See details

<span v-add-ordinal-suffix>...</span> <input :value="text" v-add-ordinal-suffix.sync />

`removeOrdinalSuffix directive` See details

<span v-remove-ordinal-suffix>...</span> <input :value="text" v-remove-ordinal-suffix.sync />

`numberToWords directive` See details

<span v-number-to-words>...</span> <input :value="text" v-number-to-words.sync />

`wordsToNumber directive` See details

modifires:
addCommas, fuzzy
argument:
digits: 'fa' | 'en' | 'ar'

<span v-words-to-number:fa.addCommas>...</span> <input :value="text" v-words-to-number:en.fuzzy.sync />

Contributing

check Contributing.md for more information

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Changelogs

changelog

persian-tools / vue-persian-tools Goto Github PK