# @persian-tools/vue-persian-tools

> Persian tools wrapper for vue.js

Latest version **0.14.0** (published 2021-09-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @persian-tools/vue-persian-tools
pnpm add @persian-tools/vue-persian-tools
yarn add @persian-tools/vue-persian-tools
bun add @persian-tools/vue-persian-tools
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.14.0 |
| Published | 2021-09-22 |
| First published | 2021-09-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 66.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 26 |
| Author | mediv0 |
| Maintainers | use_strict, moh3n95, mediv0 |
| Keywords | persian tools, number to persian words, persian words to number, Arabic numbers to Persian, Arabic numbers to English, English numbers to Persian, Persian numbers to English, verify iranian national id, verify iranian card-number, Persian zero-width non-joiner, vue persian tools, persian tools for vue2, persian tools for vue3, persian tools wrapper |

## Links

- npm: https://www.npmjs.com/package/@persian-tools/vue-persian-tools
- Repository: https://github.com/persian-tools/vue-persian-tools
- Issues: https://github.com/persian-tools/vue-persian-tools/issues
- npm.io page: https://npm.io/package/@persian-tools/vue-persian-tools

## Dependencies (2)

- [vue-demi](https://npm.io/package/vue-demi.md) ^0.7.1
- [@persian-tools/persian-tools](https://npm.io/package/@persian-tools/persian-tools.md) 3.0.1

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.14.0 (latest) — 2021-09-22

## README

<div align="center">
	<p align="center">
		<img src="https://github.com/persian-tools/react-persian-tools/raw/master/images/logo.png" width="200">
	</p>
  <h1 align="center">Vue persian tools</h1>
  <p align="center">Persian tools wrapper for vue.js</p>
	
![CI/CD](https://github.com/persian-tools/vue-persian-tools/actions/workflows/storybook.yml/badge.svg)
![CI/CD](https://github.com/persian-tools/vue-persian-tools/actions/workflows/continuous-integration.yml/badge.svg)
![codecov](https://codecov.io/gh/persian-tools/vue-persian-tools/branch/master/graph/badge.svg)
[![GitHub license](https://img.shields.io/github/license/persian-tools/vue-persian-tools)](https://github.com/persian-tools/vue-persian-tools/blob/master/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-orange.svg)](https://github.com/persian-tools/vue-persian-tools/compare) 
[![CodeFactor](https://www.codefactor.io/repository/github/persian-tools/vue-persian-tools/badge)](https://www.codefactor.io/repository/github/persian-tools/vue-persian-tools)
</div>

---

### [See demo](https://persian-tools.github.io/vue-persian-tools)

### [Persian tools repo](https://github.com/persian-tools/persian-tools)

<br />

---

<br />

### Installation

npm

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

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

```bash
npm i @vue/composition-api
```

### Usage

```js
// 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

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

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

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

Or import them locally

```js
// 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 }
};
```

<br />

---

<br />

## components

### `tag prop`

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

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

<br />

---

### `isPersian` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-ispersian--default)

**slots**:
<br />
`isPersian`: boolean

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

<br />

---

### `URLfix` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-urlfix--default)

**slots**:
<br />
`url`: string

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

<br />

---

### `Sheba` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-sheba--default)

**slots**:
<br />
`isValid`: boolean
<br />
`info`: ShebaResult

```html
<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>
```

<br />

---

### `addOrdinalSuffix` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-addordinalsuffix--default)

**slots**:
<br />
`text`: string

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

<br />

---

### `bill` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-bill--default)

**slots**:
<br />
`result`: billResult
<br />
`amount`: number
<br />
`type`: billType
<br />
`isBillValid`: boolean
<br />
`isBillIdValid`: boolean
<br />
`isBillPaymentValid`: boolean

```html
<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>
```

<br />

---

### `commas` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-commas--default)

**slots**:
<br />
`number`: number | string

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

<br />

---

### `digits` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-digits--default)

**slots**:
<br />
`value`: string

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

<br />

---

### `extractCardNumber` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-extractcardnumber--default)

**slots**:
<br />
`cards`: ExtractCardNumber[]
<br />
`valid`: ExtractCardNumber[]

```html
<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>
```

<br />

---

### `getBankNameFromCardNumber` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-getbanknamefromcardnumber--default)

**slots**:
<br />
`bankName`: string

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

<br />

---

### `getPlaceByIranNationalId` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-getplacebyirannationalid--default)

**slots**:
<br />
`city`: string
<br />
`codes`: string[]
<br />
`province`: string

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

<br />

---

### `halfSpace` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-halfspace--default)

**slots**:
<br />
`text`: string

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

<br />

---

### `hasPersian` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-haspersian--default)

**slots**:
<br />
`hasPersian`: boolean

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

<br />

---

### `isArabic` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-isarabic--default)

**slots**:
<br />
`isArabic`: boolean

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

<br />

---

### `numberToWords` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-numbertowords--default)

**slots**:
<br />
`words`: string

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

<br />

---

### `phoneNumber` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-phonenumber--default)

**slots**:
<br />
`details`: OperatorModel | null
<br />
`isValid`: boolean

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

<br />

---

### `removeOrdinalSuffix` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-removeordinalsuffix--default)

**slots**:
<br />
`text`: string

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

<br />

---

### `toPersianChars` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-topersianchars--default)

**slots**:
<br />
`text`: string

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

<br />

---

### `verifyCardNumber` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-verifycardnumber--default)

**slots**:
<br />
`isValid`: boolean

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

<br />

---

### `verifyIranianNationalId` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-verifyiraniannationalid--default)

**slots**:
<br />
`isValid`: boolean

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

<br />

---

### `wordsToNumber` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-wordstonumber--default)

**slots**:
<br />
`number`: number

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

<br />

---

### `plate` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-plate--default)

**slots**:
<br />
`number`: String | PlateOptions

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

<br />

---

### `timeAgo` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/modules-timeago--default)

**slots**:
<br />
`date`: String

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

<br />

## directives

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

### `halfSpace directive` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/directives-halfspace--default)

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

<br />

---

### `toPersian directive` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/directives-topersian--default)

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

<br />

---

### `URLFix directive` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/directives-topersian--default)

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

<br />

---

### `addOrdinalSuffix directive` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/directives-addordinalsuffix--default)

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

<br />

---

### `removeOrdinalSuffix directive` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/directives-removeordinalsuffix--default)

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

<br />

---

### `numberToWords directive` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/directives-numbertowords--default)

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

<br />

---

### `wordsToNumber directive` [See details](https://persian-tools.github.io/vue-persian-tools/?path=/docs/directives-wordsToNumber--default)

**modifires**:
<br />
`addCommas`, `fuzzy`
<br />
**argument**:
<br />
`digits`: 'fa' | 'en' | 'ar'

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

<br />

---

## Contributing

check [Contributing.md](https://github.com/persian-tools/vue-persian-tools/blob/master/.github/contributing.md) for more information

## License

This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/persian-tools/vue-persian-tools/blob/master/LICENSE) file for details.

## Changelogs

-   [changelog](https://github.com/persian-tools/vue-persian-tools/blob/master/CHANGELOG.md)

---
_Source: https://npm.io/package/@persian-tools/vue-persian-tools · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._