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