persian-tools
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-apiUsage
// 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.