@tak-ps/vue-tabler 3.87.4 → 4.1.0

package/CHANGELOG.md

@@ -10,6 +10,15 @@
 
 ## Version History
 
+### v4.1.0
+
+- :rocket: Add delete confirmation to TablerDelete
+
+### v4.0.0
+
+- :rocket: Migrate to Typescript
+- :rocket: Remove Hardcoded `No` prefix from TablerNone
+
 ### v3.87.4
 
 - :rocket: Continue iterating on adding npm Trusted Publisher

package/README.md

@@ -1,2 +1,102 @@
-# vue-tabler
-Tabler UI components for Vue3
+# Vue Tabler
+
+<p align="center">
+  <a href="https://vuejs.org/">
+    <img src="https://img.shields.io/badge/vue-3.x-brightgreen.svg" alt="Vue 3">
+  </a>
+  <a href="https://www.npmjs.com/package/@tak-ps/vue-tabler">
+    <img src="https://img.shields.io/npm/v/@tak-ps/vue-tabler.svg" alt="npm version">
+  </a>
+  <a href="https://github.com/tak-ps/vue-tabler/blob/main/LICENSE">
+    <img src="https://img.shields.io/npm/l/@tak-ps/vue-tabler.svg" alt="License">
+  </a>
+</p>
+
+<p align="center">
+  <strong>A comprehensive collection of Vue 3 components based on the Tabler UI kit.</strong>
+</p>
+
+---
+
+## 🚀 Introduction
+
+`@tak-ps/vue-tabler` brings the beautiful and responsive [Tabler](https://tabler.io/) 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:
+
+```bash
+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.
+
+```vue
+<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. |
+| **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. |
+| **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](https://vuejs.org/)
+- [@tabler/icons-vue](https://www.npmjs.com/package/@tabler/icons-vue)
+- [showdown](https://www.npmjs.com/package/showdown) (for Markdown rendering)
+
+## 📄 License
+
+This project is licensed under the [ISC License](LICENSE).

package/components/Alert.vue

@@ -9,12 +9,12 @@
             <IconAlertTriangle
                 v-if='compact'
                 :size='32'
-                :stroke='1'
+                stroke='1'
             />
             <IconAlertTriangle
                 v-else
                 :size='48'
-                :stroke='1'
+                stroke='1'
             />
         </div>
 
@@ -40,13 +40,13 @@
                     <IconChevronRight
                         v-if='!open'
                         :size='24'
-                        :stroke='1'
+                        stroke='1'
                         class='cursor-pointer'
                     />
                     <IconChevronDown
                         v-else
                         :size='24'
-                        :stroke='1'
+                        stroke='1'
                         class='cursor-pointer'
                     />
                     <span>Advanced</span>
@@ -61,7 +61,7 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 import {
     IconAlertTriangle,
@@ -69,24 +69,19 @@ import {
     IconChevronDown,
 } from '@tabler/icons-vue'
 
-defineProps({
-    title: {
-        type: String,
-        default: 'Generic Error'
-    },
-    err: {
-        type: Error,
-        default: new Error('Something is amiss')
-    },
-    compact: {
-        type: Boolean,
-        default: false
-    },
-    advanced: {
-        type: Boolean,
-        default: true
-    },
-})
+export interface AlertProps {
+    title?: string;
+    err?: Error & { body?: string };
+    compact?: boolean;
+    advanced?: boolean;
+}
+
+withDefaults(defineProps<AlertProps>(), {
+    title: 'Generic Error',
+    err: () => new Error('Something is amiss'),
+    compact: false,
+    advanced: true
+});
 
 const open = ref(false)
 </script>

package/components/BreadCrumb.vue

@@ -37,25 +37,25 @@
     </ol>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 
-const props = defineProps({
-    normalize: {
-        type: Boolean,
-        default: true,
-        description: 'Perform Title Casing on URL Components'
-    }
-})
+export interface BreadCrumbProps {
+    normalize?: boolean;
+}
+
+const props = withDefaults(defineProps<BreadCrumbProps>(), {
+    normalize: true
+});
 
 const router = useRouter()
 const route = useRoute()
 
 const crumbs = computed(() => {
-    return route.path.split('/').filter((crumb) => {
+    return route.path.split('/').filter((crumb: string) => {
         return crumb.length
-    }).map((crumb) => {
+    }).map((crumb: string) => {
         if (props.normalize) {
             return `${crumb[0].toUpperCase()}${crumb.slice(1, crumb.length)}`
         } else {

package/components/Button.vue

@@ -8,8 +8,10 @@
     </button>
 </template>
 
-<script setup>
-    const props = defineProps({
-    disabled: Boolean
-    })
+<script setup lang="ts">
+export interface ButtonProps {
+    disabled?: boolean;
+}
+
+const props = defineProps<ButtonProps>();
 </script>

package/components/Bytes.vue

@@ -2,18 +2,18 @@
     <span v-text='display' />
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 
-const props = defineProps({
-    bytes: {
-        type: Number,
-        required: true
-    }
-})
+export interface BytesProps {
+    bytes: number;
+}
+
+const props = defineProps<BytesProps>();
 
 const display = computed(() => {
     const i = props.bytes == 0 ? 0 : Math.floor(Math.log(props.bytes) / Math.log(1024))
+    // @ts-expect-error: Type checking for array indexing
     return (props.bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
 })
 </script>

package/components/Delete.vue

@@ -4,7 +4,7 @@
             <button
                 class='btn btn-outline-danger'
                 :disabled='props.disabled'
-                @click.stop.prevent='props.disabled ? undefined : modal = true'
+                @click.stop.prevent='openModal'
             >
                 <span v-text='props.label' />
             </button>
@@ -15,7 +15,7 @@
                 :class='{
                     "cursor-pointer": !props.disabled,
                 }'
-                @click.stop.prevent='props.disabled ? undefined : modal = true'
+                @click.stop.prevent='openModal'
             >
                 <IconTrash
                     :size='32'
@@ -31,11 +31,11 @@
             <TablerIconButton
                 title='Delete'
                 :disabled='props.disabled'
-                @click.stop.prevent='props.disabled ? undefined : modal = true'
+                @click.stop.prevent='openModal'
             >
                 <IconTrash
                     :size='props.size'
-                    :stroke='1'
+                    stroke='1'
                 />
             </TablerIconButton>
         </template>
@@ -52,12 +52,25 @@
                 Deletion Confirmation
             </div>
             <div class='modal-body text-center py-4'>
-                Are you sure you wish to perform this deletion?
+                <div>Are you sure you wish to perform this deletion?</div>
+                <div
+                    v-if='props.match'
+                    class='mt-3'
+                >
+                    <div class='mb-2'>
+                        Type <span class='fw-bold'>{{ props.match }}</span> to confirm
+                    </div>
+                    <TablerInput
+                        v-model='matchInput'
+                        :placeholder='props.match'
+                    />
+                </div>
             </div>
             <div class='modal-footer'>
                 <div
                     class='btn btn-danger'
-                    @click='deleting'
+                    :class='{ "disabled": props.match && matchInput !== props.match }'
+                    @click='(props.match && matchInput !== props.match) ? undefined : deleting()'
                 >
                     <TablerLoading
                         v-if='loading'
@@ -66,7 +79,7 @@
                     <template v-else>
                         <IconTrash
                             :size='props.size'
-                            :stroke='1'
+                            stroke='1'
                         /><span
                             class='mx-2'
                             v-text='props.label'
@@ -78,38 +91,44 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 import TablerModal from './Modal.vue';
 import TablerIconButton from './IconButton.vue';
 import TablerLoading from './Loading.vue';
+import TablerInput from './input/Input.vue';
 import {
     IconTrash
 } from '@tabler/icons-vue';
 
-const props = defineProps({
-    label: {
-        type: String,
-        default: 'Delete'
-    },
-    size: {
-        type: Number,
-        default: 32
-    },
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    displaytype: {
-        type: String,
-        default: 'button' // Or icon
-    }
-})
+export interface DeleteProps {
+    label?: string;
+    size?: number;
+    disabled?: boolean;
+    displaytype?: 'button' | 'icon' | 'menu';
+    match?: string;
+}
+
+const props = withDefaults(defineProps<DeleteProps>(), {
+    label: 'Delete',
+    size: 32,
+    disabled: false,
+    displaytype: 'button'
+});
 
-const emit = defineEmits(['delete'])
+const emit = defineEmits<{
+    (e: 'delete'): void
+}>()
 
 const loading = ref(false)
 const modal = ref(false)
+const matchInput = ref('')
+
+const openModal = () => {
+    if (props.disabled) return;
+    matchInput.value = '';
+    modal.value = true;
+}
 
 const deleting = () => {
     loading.value = true;

package/components/Dropdown.vue

@@ -29,33 +29,22 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed } from 'vue';
 import {
     IconSettings
 } from '@tabler/icons-vue';
 
-const props = defineProps({
-    width: {
-        type: Number,
-        default: 200
-    },
-    autoclose: {
-        type: String,
-        default: 'true'
-    },
-    position: {
-        type: String,
-        default: 'bottom-end',
-        validator: (value) => {
-            const validPositions = [
-                'bottom', 'bottom-start', 'bottom-end',
-                'top', 'top-start', 'top-end',
-                'left', 'right'
-            ];
-            return validPositions.includes(value);
-        }
-    }
+export interface DropdownProps {
+    width?: number | string;
+    autoclose?: string;
+    position?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' | 'left' | 'right';
+}
+
+const props = withDefaults(defineProps<DropdownProps>(), {
+    width: 200,
+    autoclose: 'true',
+    position: 'bottom-end'
 });
 
 const id = ref('tabler-dropdown-' + Math.random().toString(36).substr(2, 9) + '-' + Date.now().toString(36));

package/components/Epoch.vue

@@ -2,21 +2,19 @@
     <span v-text='display' />
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 
-const props = defineProps({
-    date: {
-        type: [Number, String],
-        required: true
-    },
-    format: {
-        type: String,
-        default: 'Human'
-    }
-})
+export interface EpochProps {
+    date: number | string;
+    format?: string;
+}
+
+const props = withDefaults(defineProps<EpochProps>(), {
+    format: 'Human'
+});
 
-const suffix = {
+const suffix: Record<string, string> = {
     1: 'st',
     2: 'nd',
     3: 'rd'

package/components/EpochRange.vue

@@ -2,25 +2,20 @@
     <span v-text='display' />
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 
-const props = defineProps({
-    format: {
-        type: String,
-        default: 'Human'
-    },
-    start: {
-        type: [Number, String],
-        required: true
-    },
-    end: {
-        type: [Number, String],
-        required: true
-    },
-})
+export interface EpochRangeProps {
+    format?: string;
+    start: number | string;
+    end: number | string;
+}
+
+const props = withDefaults(defineProps<EpochRangeProps>(), {
+    format: 'Human'
+});
 
-const suffix = {
+const suffix: Record<string, string> = {
     1: 'st',
     2: 'nd',
     3: 'rd'

package/components/Err.vue

@@ -28,28 +28,24 @@
     </Modal>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import Modal from './Modal.vue'
 import Alert from './Alert.vue'
 
-defineProps({
-    err: {
-        type: Error,
-        required: true
-    },
-    title: {
-        type: String,
-        default: 'Website Error'
-    },
-    trace: {
-        type: Boolean,
-        default: true
-    }
-})
+export interface ErrProps {
+    err: Error;
+    title?: string;
+    trace?: boolean;
+}
+
+withDefaults(defineProps<ErrProps>(), {
+    title: 'Website Error',
+    trace: true
+});
 
-const emit = defineEmits([
-    'close'
-])
+const emit = defineEmits<{
+    (e: 'close'): void
+}>()
 
 const close = () => {
     emit('close')

package/components/Help.vue

@@ -34,23 +34,21 @@
     </Modal>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import Modal from './Modal.vue'
 
-defineProps({
-    label: {
-        type: String,
-        default: 'Help'
-    },
-    description: {
-        type: String,
-        required: true
-    }
-})
+export interface HelpProps {
+    label?: string;
+    description: string;
+}
+
+withDefaults(defineProps<HelpProps>(), {
+    label: 'Help'
+});
 
-const emit = defineEmits([
-    'close'
-])
+const emit = defineEmits<{
+    (e: 'close'): void
+}>()
 
 const close = () => {
     emit('close')

package/components/IconButton.vue

@@ -10,33 +10,29 @@
             "custom-hover": props.hover,
         }'
         class='rounded'
-        @keyup.enter='icon.click()'
+        @keyup.enter='icon?.click()'
     >
         <slot />
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useId, useTemplateRef } from 'vue'
 
 const iconid = useId();
 
-const icon = useTemplateRef(iconid);
+const icon = useTemplateRef<HTMLElement>(iconid);
 
-const props = defineProps({
-    title: {
-        type: String,
-        required: true
-    },
-    hover: {
-        type: Boolean,
-        default: true
-    },
-    disabled: {
-        type: Boolean,
-        default: false
-    }
-})
+export interface IconButtonProps {
+    title: string;
+    hover?: boolean;
+    disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<IconButtonProps>(), {
+    hover: true,
+    disabled: false
+});
 </script>
 
 <style scoped>

package/components/InlineAlert.vue

@@ -63,12 +63,14 @@ import {
     IconAlertTriangle
 } from '@tabler/icons-vue';
 
-const props = withDefaults(defineProps<{
-    severity?: string // info, danger, warning, success
-    title: string
-    description?: string
-    dismissable?: boolean
-}>(), {
+export interface InlineAlertProps {
+    severity?: 'info' | 'danger' | 'warning' | 'success';
+    title: string;
+    description?: string;
+    dismissable?: boolean;
+}
+
+const props = withDefaults(defineProps<InlineAlertProps>(), {
     severity: 'info',
     dismissable: false,
 });