v-pack-vue-component

A Vue 3 component library powered by TailwindCSS, built with TypeScript support and several 3rd-party integrations (CKEditor, Quill, ApexCharts, etc).

⚙️ Installation

npm install v-pack-vue-component

# Required peer dependencies
npm install vue tailwindcss @material-tailwind/html @mdi/js

# Optional dependencies (based on components)
npm install vue-tailwind-datepicker @vueup/vue-quill @ckeditor/ckeditor5-build-classic @ckeditor/ckeditor5-vue vue-cropperjs vue3-apexcharts

📄 Usage

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import 'tailwindcss/tailwind.css'

const app = createApp(App)
app.mount('#app')

📚 Components Documentation

📅 DatePicker

<DatePicker v-model="date" label="Tanggal Lahir" :range="false" />

Props

| Prop | Type | Default | Description | | ----------- | ------------------------ | ------------ | -------------------------- | | modelValue | string / string[] / Date | - | Selected date | | label | string | - | Label text | | placeholder | string | "" | Placeholder text | | format | string | "YYYY-MM-DD" | Display format | | range | boolean | false | Range selection mode | | weekStart | number | 0 | Start of the week (0=Sun) | | autoApply | boolean | true | Auto apply after selection | | i18n | object | Indonesian | Localization | | errors | any[] | [] | Validation errors |

Emits: update:modelValue

📝 CKEditor

<CkEditor v-model="editorContent" :editorConfig="{ toolbar: ['bold', 'italic'] }" />

Props

| Prop | Type | Default | Description | | ------------ | ------ | ------- | ---------------------- | | modelValue | string | "" | Editor content | | label | string | - | Input label | | placeholder | string | - | Placeholder | | errors | any[] | [] | Validation messages | | editorConfig | object | {} | CKEditor config object |

Emits: update:modelValue

✍️ Quill Editor

<Quill v-model="content" label="Isi Konten" />

Props

| Prop | Type | Default | Description | | ----------- | ------ | ------- | ----------------- | | modelValue | string | "" | Editor content | | label | string | - | Input label | | placeholder | string | "" | Placeholder | | errors | any[] | [] | Validation errors |

Emits: update:modelValue

🔽 Select

<Select v-model="selected" :options="['One', 'Two']" label="Pilih Opsi" :multiple="true" />

Props

| Prop | Type | Default | Description | | ----------- | ------------------------ | ------- | ----------------- | | modelValue | string / string[] / null | null | Selected value | | label | string | - | Input label | | placeholder | string | "" | Placeholder | | options | array | [] | Options | | multiple | boolean | false | Multi-select mode | | errors | string[] | [] | Validation errors |

Emits: update:modelValue

🧾 Input Field

<Input v-model="name" label="Nama Lengkap" />

Props

| Prop | Type | Default | Description | | ----------- | --------------- | ------- | ----------------- | | modelValue | string / number | - | Input value | | label | string | - | Field label | | type | string | text | Input type | | placeholder | string | - | Placeholder text | | options | any[] | [] | For select/radio | | errors | any[] | [] | Validation errors |

Emits: update:modelValue

🧠 Apexchart

<Chart :type="'bar'" :series="[{ name: 'Sales', data: [10, 20] }]" />

Props

| Prop | Type | Default | Description | | ---------------- | -------------- | --------- | ------------------------ | | type | string | - | Chart type | | series | array / object | - | Chart data | | categories | string[] | [] | X-axis categories | | title | string | - | Chart title | | subtitle | string | - | Chart subtitle | | colors | string[] | [] | Custom colors | | loading | boolean | false | Loading state | | noDataText | string | "No data" | Empty state message | | tooltipFormatter | function | - | Custom tooltip formatter | | labelFormatter | function | - | Custom label formatter | | yAxisFormatter | function | - | Custom Y-axis formatter | | drilldownSeries | array | [] | Drilldown data |

✂️ Cropper

<Cropper :imageUrls="[]" aspectRatio="1.5" />

Props

| Prop | Type | Default | Description | | ---------------- | ------- | ------- | ----------------------- | | imageUrl | string | - | Single image | | imageUrls | array | [] | Multiple image previews | | aspectRatio | number | 1 | Crop aspect ratio | | inputAspectRatio | boolean | false | Enable aspect input | | multiple | boolean | false | Allow multiple uploads | | text | string | Custom | Dropzone message |

📦 Card

<Card>
  <template #header>Judul</template>
  <template #default>Isi</template>
  <template #footer>Footer</template>
</Card>

Props

| Prop | Type | Default | Description | | ----------- | ------ | ------- | ------------------- | | headerClass | string | - | Custom header class | | bodyClass | string | - | Custom body class | | footerClass | string | - | Custom footer class |

🔘 Button

<Button variant="solid" color="primary" :isLoading="false">Simpan</Button>

Props

| Prop | Type | Default | Description | | --------- | ------- | ------- | ----------------------------------------------------------------------- | | variant | string | solid | 'ghost' | 'solid' | 'gradient' | 'outline' | | color | string | primary | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | | href | string | null | Use as anchor link | | type | string | button | HTML button type | | isLoading | boolean | false | Loading state | | class | string | - | Extra class name |

🧪 License

MIT © Miftach Noorvicki [email protected]