Vue Tabler

🚀 Introduction

@tak-ps/vue-tabler brings the beautiful and responsive Tabler UI kit to your Vue 3 applications. It provides a set of reusable, high-quality components designed to speed up your development process while maintaining a clean and professional look.

📦 Installation

Install the package using npm:

npm install @tak-ps/vue-tabler

💻 Usage

Import the components you need directly into your Vue files. All components are exported with a Tabler prefix to avoid conflicts.

<script setup>
import { TablerButton, TablerAlert } from '@tak-ps/vue-tabler';
</script>

<template>
  <TablerAlert title="Success!" variant="success">
    Your operation was completed successfully.
  </TablerAlert>

  <TablerButton variant="primary" @click="doSomething">
    Click Me
  </TablerButton>
</template>

🧩 Components

Core Components

| Component | Description | |-----------|-------------| | TablerAlert | Display important messages and feedback. | | TablerBorder | Bordered card section with optional label and header slot. | | TablerBreadCrumb | Navigation aid indicating the current page's location. | | TablerButton | Standard action buttons with various styles. | | TablerBytes | Utility to format byte values into human-readable strings. | | TablerDelete | Specialized button/action for delete operations. | | TablerDropdown | Toggleable menus for actions or navigation. | | TablerEpoch | Display formatted dates and times. | | TablerEpochRange | Display a range of dates/times. | | TablerError | Standardized error message display. | | TablerHelp | Tooltips or help text for user guidance. | | TablerIconButton | Buttons designed to contain icons. | | TablerInlineAlert | Contextual alerts for inline feedback. | | TablerList | Display data in list format. | | TablerLoading | Loading indicators and spinners. | | TablerMarkdown | Render markdown content safely. | | TablerMarkdownEditor | WYSIWYG Markdown editor with table editing, styled the same as TablerMarkdown. Loaded on first render. | | TablerModal | Dialog boxes for user interaction. | | TablerNone | Placeholder component for empty states. | | TablerPager | Pagination controls for lists and tables. | | TablerProgress | Progress bars to indicate status. | | TablerRefreshButton | A dedicated button for refresh actions. | | TablerSchema | Visualization for data schemas. | | TablerSlidedown | Expandable/collapsible content areas. |

Input Components

| Component | Description | |-----------|-------------| | TablerColour | Color picker input. | | TablerEnum | Selection input for enumerated values. | | TablerFileInput | File upload input. | | TablerInput | Standard text and data input fields. | | TablerRange | Range slider input. | | TablerSelect | Dropdown selection input. | | TablerTimeZone | Timezone selector. | | TablerToggle | Switch/Toggle control. |

🛠️ Dependencies

This library relies on the following core dependencies:

• Vue 3
• @tabler/icons-vue
• marked (for Markdown rendering)
• Tiptap (for Markdown editing)
• DOMPurify (for HTML sanitization)

📄 License

This project is licensed under the ISC License.