Lao Kip Text

lao-kip-text is a TypeScript library for converting numbers to Lao Kip text representation.

ເປັນ Library ສຳລັບແປງຕົວເລກ ເປັນຕົວໜັງສືຈຳນວນເງິນ ທີ່ເປັນພາສາລາວ — ໃຊ້ກັບທຸກ Framework (Vue, React, Angular, Nuxt, Next.js, ແລະອື່ນໆ)

ພັດທະນາໂດຍ: SornDev

Table of Contents

• Installation
• API
• Usage by Framework
  • Vue 3
  • Nuxt 3
  • React
  • Next.js
  • Angular
  • Svelte
  • Solid.js
  • Node.js / Express
  • Vanilla JavaScript
• Options
• License

Installation (ວິທີການຕິດຕັ້ງ)

npm install lao-kip-text

yarn add lao-kip-text

pnpm add lao-kip-text

API

numberToKipText(n: number, options?: KipTextOptions): string

ແປງຕົວເລກເປັນຂໍ້ຄວາມພາສາລາວ.

import { numberToKipText } from 'lao-kip-text'

numberToKipText(0)             // "ສູນ"
numberToKipText(5)             // "ຫ້າກີບຖ້ວນ"
numberToKipText(10)            // "ສິບກີບຖ້ວນ"
numberToKipText(11)            // "ສິບເອັດກີບຖ້ວນ"
numberToKipText(21)            // "ຊາວເອັດກີບຖ້ວນ"
numberToKipText(100)           // "ໜຶ່ງຮ້ອຍກີບຖ້ວນ"
numberToKipText(1000)          // "ໜຶ່ງພັນກີບຖ້ວນ"
numberToKipText(10000)         // "ສິບພັນກີບຖ້ວນ"
numberToKipText(123456789)     // "ໜຶ່ງຮ້ອຍຊາວສາມລ້ານສີ່ແສນຫ້າສິບຫົກພັນເຈັດຮ້ອຍແປດສິບເກົ້າກີບຖ້ວນ"
numberToKipText(1500.50)       // "ໜຶ່ງພັນຫ້າຮ້ອຍກີບຈ້ຳຫ້າສິບອັດ"
numberToKipText(1500.05)       // "ໜຶ່ງພັນຫ້າຮ້ອຍກີບຈ້ຳສູນຫ້າອັດ"
numberToKipText(-1500)         // "- ໜຶ່ງພັນຫ້າຮ້ອຍກີບຖ້ວນ"

Usage by Framework

Vue 3

Global registration:

import { createApp } from 'vue'
import App from './App.vue'
import KipText from 'lao-kip-text/vue'

const app = createApp(App)
app.component('KipText', KipText)
app.mount('#app')

<template>
  <KipText :number="123456789" />
</template>

Local import (Composition API + <script setup>):

<script setup lang="ts">
import { numberToKipText } from 'lao-kip-text'

const amount = 1500.50
const text = numberToKipText(amount)
</script>

<template>
  <p>{{ text }}</p>
  <!-- ໜຶ່ງພັນຫ້າຮ້ອຍກີບຈ້ຳຫ້າສິບອັດ -->
</template>

With Options API:

<template>
  <span>{{ kipText }}</span>
</template>

<script lang="ts">
import { numberToKipText } from 'lao-kip-text'

export default {
  data() {
    return { amount: 1500 }
  },
  computed: {
    kipText() {
      return numberToKipText(this.amount)
    }
  }
}
</script>

Nuxt 3

As a plugin (plugins/kip-text.ts):

import KipText from 'lao-kip-text/vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('KipText', KipText)
})

<template>
  <KipText :number="50000" />
</template>

Direct usage in component (auto-import):

<script setup lang="ts">
const { numberToKipText } = await import('lao-kip-text')
const text = numberToKipText(250000)
</script>

<template>
  <p>{{ text }}</p>
</template>

React

import { numberToKipText } from 'lao-kip-text'

function App() {
  const amount = 123456789

  return (
    <div>
      <p>{numberToKipText(amount)}</p>
      <p>{numberToKipText(1500.50, { useMeun: true })}</p>
    </div>
  )
}

export default App

With custom hook:

import { useMemo } from 'react'
import { numberToKipText, type KipTextOptions } from 'lao-kip-text'

function useKipText(amount: number, options?: KipTextOptions) {
  return useMemo(() => numberToKipText(amount, options), [amount, options])
}

// Usage
function PriceDisplay({ amount }: { amount: number }) {
  const text = useKipText(amount)
  return <span>{text}</span>
}

Next.js

App Router (app/page.tsx):

import { numberToKipText } from 'lao-kip-text'

export default function Home() {
  const price = 999999

  return (
    <div>
      <h1>{numberToKipText(price)}</h1>
    </div>
  )
}

Client Component (with state):

'use client'

import { useState } from 'react'
import { numberToKipText } from 'lao-kip-text'

export default function PriceInput() {
  const [value, setValue] = useState(0)

  return (
    <div>
      <input type="number" onChange={(e) => setValue(Number(e.target.value))} />
      <p>{numberToKipText(value)}</p>
    </div>
  )
}

Angular

In a component:

import { Component } from '@angular/core'
import { numberToKipText } from 'lao-kip-text'

@Component({
  selector: 'app-price',
  template: `<p>{{ kipText }}</p>`,
})
export class PriceComponent {
  amount = 123456789
  get kipText(): string {
    return numberToKipText(this.amount)
  }
}

As a Pipe (kip-text.pipe.ts):

import { Pipe, PipeTransform } from '@angular/core'
import { numberToKipText, type KipTextOptions } from 'lao-kip-text'

@Pipe({ name: 'kipText' })
export class KipTextPipe implements PipeTransform {
  transform(value: number, options?: KipTextOptions): string {
    return numberToKipText(value, options)
  }
}

<p>{{ 123456789 | kipText }}</p>
<p>{{ 1500.50 | kipText : { useMeun: true } }}</p>

Svelte

<script lang="ts">
  import { numberToKipText } from 'lao-kip-text'

  let amount = 50000
  $: text = numberToKipText(amount)
</script>

<input type="range" bind:value={amount} min={0} max={100000} />
<p>{text}</p>

Solid.js

import { createSignal } from 'solid-js'
import { numberToKipText } from 'lao-kip-text'

function App() {
  const [amount, setAmount] = createSignal(5000)

  return (
    <div>
      <input type="number" onInput={(e) => setAmount(Number(e.currentTarget.value))} />
      <p>{numberToKipText(amount())}</p>
    </div>
  )
}

Node.js / Express

import { numberToKipText } from 'lao-kip-text'

// REST API endpoint
app.get('/api/price/:amount', (req, res) => {
  const amount = Number(req.params.amount)
  res.json({
    amount,
    laoText: numberToKipText(amount),
  })
})

// CLI script
import { numberToKipText } from 'lao-kip-text'

const input = Number(process.argv[2])
console.log(numberToKipText(input))

Vanilla JavaScript

<script type="module">
  import { numberToKipText } from 'https://unpkg.com/lao-kip-text/dist/lao-kip-text.js'

  document.getElementById('output').textContent = numberToKipText(1500)
</script>

Or via CDN (UMD):

<script src="https://unpkg.com/lao-kip-text/dist/lao-kip-text.cjs"></script>
<script>
  const { numberToKipText } = window['lao-kip-text']
  console.log(numberToKipText(25000))
</script>

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | includeUnit | boolean | true | ສະແດງ "ກີບຖ້ວນ" / "ກີບຈ້ຳ...ອັດ" ຫຼືບໍ່ | | negativePrefix | string | "- " | ຂໍ້ຄວາມນຳໜ້າສຳລັບຕົວເລກຕິດລົບ | | integerUnit | string | "ກີບ" | ຫົວໜ່ວຍຈຳນວນເຕັມ | | decimalUnit | string | "ອັດ" | ຫົວໜ່ວຍທົດສະນິຍົມ | | useMeun | boolean | false | ໃຊ້ຮູບແບບດັ້ງເດີມ "ໝື່ນ" ແທນ "ສິບພັນ" |

Examples with options:

numberToKipText(10000)                       // "ສິບພັນກີບຖ້ວນ"
numberToKipText(10000, { useMeun: true })    // "ໜຶ່ງໝື່ນກີບຖ້ວນ"
numberToKipText(500, { includeUnit: false }) // "ຫ້າຮ້ອຍ"
numberToKipText(-1500, { negativePrefix: 'ຕິດລົບ ' }) // "ຕິດລົບ ໜຶ່ງພັນຫ້າຮ້ອຍກີບຖ້ວນ"

License

ISC