ketekny-ui-kit 1.0.91 → 1.0.92
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/README.md +41 -1
- package/index.js +3 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -46,6 +46,7 @@ import {
|
|
|
46
46
|
kDateSelector,
|
|
47
47
|
kToggle,
|
|
48
48
|
kCheckbox,
|
|
49
|
+
twoColLayout,
|
|
49
50
|
toastPlugin,
|
|
50
51
|
confirmPlugin,
|
|
51
52
|
alertPlugin,
|
|
@@ -61,6 +62,7 @@ app.component("kSelect", kSelect);
|
|
|
61
62
|
app.component("kDateSelector", kDateSelector);
|
|
62
63
|
app.component("kToggle", kToggle);
|
|
63
64
|
app.component("kCheckbox", kCheckbox);
|
|
65
|
+
app.component("twoColLayout", twoColLayout);
|
|
64
66
|
|
|
65
67
|
app.use(toastPlugin);
|
|
66
68
|
app.use(confirmPlugin);
|
|
@@ -92,6 +94,44 @@ function save() {
|
|
|
92
94
|
</script>
|
|
93
95
|
```
|
|
94
96
|
|
|
97
|
+
Two-column layout usage:
|
|
98
|
+
|
|
99
|
+
```vue
|
|
100
|
+
<template>
|
|
101
|
+
<twoColLayout
|
|
102
|
+
title="App title"
|
|
103
|
+
:main-menu="menu"
|
|
104
|
+
:account="account"
|
|
105
|
+
@select-menu="handleSelect"
|
|
106
|
+
>
|
|
107
|
+
<kSingleColPage app-title="Demo" page-title="Dashboard">
|
|
108
|
+
<div class="p-6">Page content</div>
|
|
109
|
+
</kSingleColPage>
|
|
110
|
+
</twoColLayout>
|
|
111
|
+
</template>
|
|
112
|
+
|
|
113
|
+
<script setup>
|
|
114
|
+
import { ref } from "vue";
|
|
115
|
+
import { kSingleColPage } from "ketekny-ui-kit";
|
|
116
|
+
|
|
117
|
+
const account = ref({
|
|
118
|
+
loggedIn: true,
|
|
119
|
+
firstName: "Demo",
|
|
120
|
+
lastName: "User",
|
|
121
|
+
email: "demo@ketekny.gr",
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
const menu = [
|
|
125
|
+
{ id: "dashboard", label: "Dashboard", icon: "LayoutDashboard" },
|
|
126
|
+
{ id: "reports", label: "Reports", icon: "BarChart3" },
|
|
127
|
+
];
|
|
128
|
+
|
|
129
|
+
function handleSelect(id) {
|
|
130
|
+
console.log("Selected menu item:", id);
|
|
131
|
+
}
|
|
132
|
+
</script>
|
|
133
|
+
```
|
|
134
|
+
|
|
95
135
|
## Tailwind Setup
|
|
96
136
|
|
|
97
137
|
Use the provided preset to include semantic tokens and safelist patterns used by dynamic component classes.
|
|
@@ -165,6 +205,7 @@ Components:
|
|
|
165
205
|
- `kSelectButton`, `kTags`, `kSearch`, `kArrayList`, `kList`, `kTextArea`
|
|
166
206
|
- `kDialog`, `kDrawer`
|
|
167
207
|
- `kAppHeader`, `kAppFooter`, `kAppMain`, `kHero`
|
|
208
|
+
- `kSingleColPage`, `kTwoColPage`, `twoColLayout`, `legacyTwoColLayout`
|
|
168
209
|
|
|
169
210
|
Other exports:
|
|
170
211
|
|
|
@@ -202,4 +243,3 @@ ISC
|
|
|
202
243
|
- Live demo/docs: https://ui.ketekny.gr
|
|
203
244
|
- npm: https://www.npmjs.com/package/ketekny-ui-kit
|
|
204
245
|
|
|
205
|
-
|
package/index.js
CHANGED
|
@@ -38,7 +38,8 @@ import kAppMain from './src/layout/kAppMain.vue'
|
|
|
38
38
|
import kHero from './src/layout/kHero.vue'
|
|
39
39
|
import kSingleColPage from './src/layout/kSingleColPage.vue'
|
|
40
40
|
import kTwoColPage from './src/layout/kTwoColPage.vue'
|
|
41
|
-
import twoColLayout from './src/
|
|
41
|
+
import twoColLayout from './src/twoColLayout/components/TwoColLayout.vue'
|
|
42
|
+
import legacyTwoColLayout from './src/layout/twoColLayout.vue'
|
|
42
43
|
|
|
43
44
|
// Toast/Confirm/Alert Plugins
|
|
44
45
|
import toastPlugin from './src/plugins/toastPlugin.js'
|
|
@@ -62,7 +63,7 @@ export {
|
|
|
62
63
|
kDialog, kDrawer,
|
|
63
64
|
|
|
64
65
|
// Layout Components
|
|
65
|
-
kAppHeader, kAppFooter, kAppMain, kHero, kSingleColPage, kTwoColPage, twoColLayout,
|
|
66
|
+
kAppHeader, kAppFooter, kAppMain, kHero, kSingleColPage, kTwoColPage, twoColLayout, legacyTwoColLayout,
|
|
66
67
|
|
|
67
68
|
// Plugins
|
|
68
69
|
toastPlugin, confirmPlugin, alertPlugin, tooltipPlugin, inputDialogPlugin,
|