@tak-ps/vue-tabler 4.14.0 → 4.16.0

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v4.16.0 - 2026-04-23
+
+- :tada: Add Tabler Border Component
+
+### v4.15.0 - 2026-04-20
+
+- :rocket: Click anywhere collapse
+
 ### v4.14.0 - 2026-04-19
 
 - :rocket: Add ability to turn off border

package/README.md

@@ -56,6 +56,7 @@ import { TablerButton, TablerAlert } from '@tak-ps/vue-tabler';
 | 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. |

package/components/Border.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class='card h-100 border border-light-subtle shadow-sm'>
+        <div
+            class='card-body d-flex flex-column'
+            :class='{
+                "gap-4": gap === "lg",
+                "gap-3": gap === "md",
+                "gap-2": gap === "sm",
+            }'
+        >
+            <div
+                v-if='label || $slots.header'
+                class='d-flex align-items-center justify-content-between'
+            >
+                <p
+                    v-if='label'
+                    class='text-uppercase small mb-0'
+                    v-text='label'
+                />
+                <slot name='header' />
+            </div>
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+export interface BorderProps {
+    label?: string;
+    gap?: 'sm' | 'md' | 'lg';
+}
+
+withDefaults(defineProps<BorderProps>(), {
+    label: '',
+    gap: 'md',
+});
+</script>

package/components/Slidedown.vue

@@ -3,10 +3,10 @@
         class='hover-expandable rounded position-relative px-2 py-2'
         :class='{
             "expanded mb-3": isExpanded,
-            "cursor-pointer": props.clickAnywhereExpand && !isExpanded,
+            "cursor-pointer": props.clickAnywhereExpand || props.clickAnywhereCollapse,
             "no-border": !props.border
         }'
-        @click='(props.clickAnywhereExpand && !isExpanded) ? toggle() : null'
+        @click='handleClick'
     >
         <div
             :class='{
@@ -53,12 +53,14 @@ export interface SlidedownProps {
     arrow?: boolean;
     border?: boolean;
     clickAnywhereExpand?: boolean;
+    clickAnywhereCollapse?: boolean;
 }
 
 const props = withDefaults(defineProps<SlidedownProps>(), {
     arrow: true,
     border: true,
-    clickAnywhereExpand: false
+    clickAnywhereExpand: false,
+    clickAnywhereCollapse: false
 });
 
 const isExpanded = ref(false);
@@ -77,6 +79,19 @@ function toggle() {
             el.style.maxHeight = ''; // Reset to CSS default (0)
         }
     }
+}
+
+function handleClick(event: MouseEvent) {
+    // Don't handle clicks from the expanded content wrapper
+    const el = contentWrapperRef.value;
+    if (el && el === event.target) return;
+    if (el && el.contains(event.target as Node)) return;
+    
+    if (props.clickAnywhereExpand) {
+        toggle();
+    } else if (props.clickAnywhereCollapse && isExpanded.value) {
+        toggle();
+    }
 };
 </script>
 

package/lib.ts

@@ -9,6 +9,7 @@ export { default as TablerFileInput } from './components/input/FileInput.vue'
 export { default as TablerEnum } from './components/input/Enum.vue';
 
 export { default as TablerAlert } from './components/Alert.vue'
+export { default as TablerBorder } from './components/Border.vue'
 export { default as TablerInlineAlert } from './components/InlineAlert.vue'
 export { default as TablerBadge } from './components/Badge.vue'
 export { default as TablerButton } from './components/Button.vue'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "4.14.0",
+    "version": "4.16.0",
     "lib": "lib.ts",
     "main": "lib.ts",
     "module": "lib.ts",