ketekny-ui-kit 1.0.133 → 1.0.134

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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/ui/kCard.vue +37 -12
  3. package/src/ui/kList.vue +23 -6
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ketekny-ui-kit",
3
3
  "type": "module",
4
- "version": "1.0.133",
4
+ "version": "1.0.134",
5
5
  "description": "A Vue 3 UI component library with Tailwind CSS styling",
6
6
  "main": "index.js",
7
7
  "files": [
package/src/ui/kCard.vue CHANGED
@@ -2,10 +2,12 @@
2
2
  <article class="self-start overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
3
3
  <header
4
4
  v-if="hasHeader"
5
- class="flex items-start justify-between gap-3 border-slate-200 px-5 py-4"
5
+ class="flex justify-between gap-3 border-slate-200 bg-slate-50/70 px-5 py-4"
6
6
  :class="{
7
7
  'border-b': !isCollapsed,
8
- 'group cursor-pointer select-none transition-colors hover:bg-slate-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand/30': collapsible,
8
+ 'group cursor-pointer select-none transition-colors hover:bg-slate-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand/30': collapsible,
9
+ 'items-start': subtitle,
10
+ 'items-center': !subtitle,
9
11
  }"
10
12
  :role="collapsible ? 'button' : undefined"
11
13
  :tabindex="collapsible ? 0 : undefined"
@@ -17,12 +19,22 @@
17
19
  >
18
20
  <div class="min-w-0 flex-1">
19
21
  <slot name="header">
20
- <p v-if="title" class="text-sm font-semibold text-slate-900">
21
- {{ title }}
22
- </p>
23
- <p v-if="subtitle" :class="title ? 'mt-1 text-sm text-slate-500' : 'text-sm text-slate-500'">
24
- {{ subtitle }}
25
- </p>
22
+ <div class="flex items-center gap-3">
23
+ <span
24
+ v-if="icon"
25
+ class="inline-flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary"
26
+ >
27
+ <kIcon :name="icon" :size="18" />
28
+ </span>
29
+ <div class="min-w-0">
30
+ <p v-if="title" class="text-sm font-semibold text-slate-900">
31
+ {{ title }}
32
+ </p>
33
+ <p v-if="subtitle" :class="title ? 'mt-1 text-sm text-slate-500' : 'text-sm text-slate-500'">
34
+ {{ subtitle }}
35
+ </p>
36
+ </div>
37
+ </div>
26
38
  </slot>
27
39
  </div>
28
40
 
@@ -38,13 +50,17 @@
38
50
  </span>
39
51
  </header>
40
52
 
41
- <div v-show="!isCollapsed" class="px-5 py-4">
53
+ <div
54
+ v-show="!isCollapsed"
55
+ class="bg-white"
56
+ :class="dense ? 'p-0' : 'px-5 py-4'"
57
+ >
42
58
  <slot />
43
59
  </div>
44
60
 
45
61
  <footer
46
62
  v-if="$slots.footer"
47
- class="border-t border-slate-200 px-5 py-4"
63
+ class="border-t border-slate-200 bg-slate-50 px-5 py-4"
48
64
  >
49
65
  <slot name="footer" />
50
66
  </footer>
@@ -53,10 +69,11 @@
53
69
 
54
70
  <script>
55
71
  import { ChevronDown } from '@lucide/vue'
72
+ import kIcon from './kIcon.vue'
56
73
 
57
74
  export default {
58
75
  name: 'kCard',
59
- components: { ChevronDown },
76
+ components: { ChevronDown, kIcon },
60
77
  emits: ['update:collapsed', 'toggle'],
61
78
  props: {
62
79
  title: {
@@ -67,6 +84,10 @@ export default {
67
84
  type: String,
68
85
  default: '',
69
86
  },
87
+ icon: {
88
+ type: String,
89
+ default: '',
90
+ },
70
91
  collapsible: {
71
92
  type: Boolean,
72
93
  default: false,
@@ -75,6 +96,10 @@ export default {
75
96
  type: Boolean,
76
97
  default: false,
77
98
  },
99
+ dense: {
100
+ type: Boolean,
101
+ default: false,
102
+ },
78
103
  },
79
104
  data() {
80
105
  return {
@@ -83,7 +108,7 @@ export default {
83
108
  },
84
109
  computed: {
85
110
  hasHeader() {
86
- return Boolean(this.$slots.header || this.title || this.subtitle || this.collapsible)
111
+ return Boolean(this.$slots.header || this.title || this.subtitle || this.icon || this.collapsible)
87
112
  },
88
113
  isCollapsed() {
89
114
  return this.collapsible && this.internalCollapsed
package/src/ui/kList.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="w-full">
2
+ <div class="w-full" :class="{ 'k-list--dense': dense }">
3
3
  <dl
4
4
  v-if="!isRowFormat"
5
5
  class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"
@@ -7,8 +7,11 @@
7
7
  <div
8
8
  v-for="(stat, index) in normalizedStats"
9
9
  :key="resolveKey(stat, index)"
10
- class="flex items-center gap-3 border border-gray-200 rounded-xl bg-white p-3 dark:border-slate-700 dark:bg-slate-800"
11
- :class="entryClass(stat)"
10
+ class="flex items-center gap-3"
11
+ :class="[
12
+ dense ? '' : 'border border-gray-200 rounded-xl bg-white p-3 dark:border-slate-700 dark:bg-slate-800',
13
+ entryClass(stat),
14
+ ]"
12
15
  :role="stat.action ? 'button' : undefined"
13
16
  :tabindex="stat.action ? 0 : undefined"
14
17
  @click="handleAction(stat, index)"
@@ -38,7 +41,11 @@
38
41
  </div>
39
42
  </dl>
40
43
 
41
- <div v-else class="overflow-hidden bg-white border border-gray-200 rounded-xl dark:bg-slate-800 dark:border-slate-700">
44
+ <div
45
+ v-else
46
+ class="overflow-hidden bg-white dark:bg-slate-800"
47
+ :class="{ 'border border-gray-200 rounded-xl dark:border-slate-700': !dense }"
48
+ >
42
49
  <table class="w-full">
43
50
  <tbody>
44
51
  <tr
@@ -52,7 +59,10 @@
52
59
  @keydown.enter.prevent="handleAction(stat, index)"
53
60
  @keydown.space.prevent="handleAction(stat, index)"
54
61
  >
55
- <td class="px-4 py-3 text-sm text-gray-600 dark:text-slate-400">
62
+ <td
63
+ class="py-3 text-sm text-gray-600 dark:text-slate-400"
64
+ :class="dense ? 'px-5' : 'px-4'"
65
+ >
56
66
  <div class="flex items-center gap-2">
57
67
  <div
58
68
  v-if="stat.icon"
@@ -72,7 +82,10 @@
72
82
  <span>{{ stat.label }}</span>
73
83
  </div>
74
84
  </td>
75
- <td class="px-4 py-3 text-base font-semibold text-right text-gray-900 dark:text-slate-100">
85
+ <td
86
+ class="py-3 text-base font-semibold text-right text-gray-900 dark:text-slate-100"
87
+ :class="dense ? 'px-5' : 'px-4'"
88
+ >
76
89
  {{ stat.value }}
77
90
  </td>
78
91
  </tr>
@@ -100,6 +113,10 @@ export default {
100
113
  default: 'col',
101
114
  validator: (value) => ['col', 'row'].includes(value),
102
115
  },
116
+ dense: {
117
+ type: Boolean,
118
+ default: false,
119
+ },
103
120
  },
104
121
  emits: ['action'],
105
122
  computed: {