@tak-ps/vue-tabler 4.15.0 → 4.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/README.md +1 -0
- package/components/Border.vue +39 -0
- package/lib.ts +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -10,6 +10,18 @@
|
|
|
10
10
|
|
|
11
11
|
## Version History
|
|
12
12
|
|
|
13
|
+
### v4.16.1
|
|
14
|
+
|
|
15
|
+
- :rocket: Update Core Deps
|
|
16
|
+
|
|
17
|
+
### v4.16.0
|
|
18
|
+
|
|
19
|
+
- :tada: Add `TablerBorder` component for bordered card sections
|
|
20
|
+
|
|
21
|
+
### v4.16.0 - 2026-04-23
|
|
22
|
+
|
|
23
|
+
- :tada: Add Tabler Border Component
|
|
24
|
+
|
|
13
25
|
### v4.15.0 - 2026-04-20
|
|
14
26
|
|
|
15
27
|
- :rocket: Click anywhere collapse
|
package/README.md
CHANGED
|
@@ -56,6 +56,7 @@ import { TablerButton, TablerAlert } from '@tak-ps/vue-tabler';
|
|
|
56
56
|
| Component | Description |
|
|
57
57
|
|-----------|-------------|
|
|
58
58
|
| **TablerAlert** | Display important messages and feedback. |
|
|
59
|
+
| **TablerBorder** | Bordered card section with optional label and header slot. |
|
|
59
60
|
| **TablerBreadCrumb** | Navigation aid indicating the current page's location. |
|
|
60
61
|
| **TablerButton** | Standard action buttons with various styles. |
|
|
61
62
|
| **TablerBytes** | Utility to format byte values into human-readable strings. |
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class='card h-100 border border-light-subtle shadow-sm'>
|
|
3
|
+
<div
|
|
4
|
+
class='card-body d-flex flex-column'
|
|
5
|
+
:class='{
|
|
6
|
+
"gap-4": gap === "lg",
|
|
7
|
+
"gap-3": gap === "md",
|
|
8
|
+
"gap-2": gap === "sm",
|
|
9
|
+
}'
|
|
10
|
+
>
|
|
11
|
+
<div
|
|
12
|
+
v-if='label || $slots.label || $slots.header'
|
|
13
|
+
class='d-flex align-items-center justify-content-between'
|
|
14
|
+
>
|
|
15
|
+
<slot name='label'>
|
|
16
|
+
<p
|
|
17
|
+
v-if='label'
|
|
18
|
+
class='text-uppercase small mb-0'
|
|
19
|
+
v-text='label'
|
|
20
|
+
/>
|
|
21
|
+
</slot>
|
|
22
|
+
<slot name='header' />
|
|
23
|
+
</div>
|
|
24
|
+
<slot />
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
</template>
|
|
28
|
+
|
|
29
|
+
<script setup lang='ts'>
|
|
30
|
+
export interface BorderProps {
|
|
31
|
+
label?: string;
|
|
32
|
+
gap?: 'sm' | 'md' | 'lg';
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
withDefaults(defineProps<BorderProps>(), {
|
|
36
|
+
label: '',
|
|
37
|
+
gap: 'md',
|
|
38
|
+
});
|
|
39
|
+
</script>
|
package/lib.ts
CHANGED
|
@@ -9,6 +9,7 @@ export { default as TablerFileInput } from './components/input/FileInput.vue'
|
|
|
9
9
|
export { default as TablerEnum } from './components/input/Enum.vue';
|
|
10
10
|
|
|
11
11
|
export { default as TablerAlert } from './components/Alert.vue'
|
|
12
|
+
export { default as TablerBorder } from './components/Border.vue'
|
|
12
13
|
export { default as TablerInlineAlert } from './components/InlineAlert.vue'
|
|
13
14
|
export { default as TablerBadge } from './components/Badge.vue'
|
|
14
15
|
export { default as TablerButton } from './components/Button.vue'
|