ketekny-ui-kit 1.0.51 → 1.0.53

package/README.md

@@ -1,56 +1,98 @@
-# Ketekny UI Kit
+# ketekny-ui-kit
 
-Vue 3 UI component library styled with Tailwind CSS.
+Vue 3 UI component library with Tailwind CSS styling and utility plugins.
+
+## Requirements
+
+- `vue`: `^3.0.0` (peer dependency)
+- Tailwind CSS 3 build pipeline in your app (`tailwindcss`, `postcss`, `autoprefixer`)
+- This package is built and tested against Tailwind CSS 3.x; Tailwind CSS 4 is not supported by the current setup
 
 ## Installation
 
-1. Install the package:
+Needed packages (install what is missing)
 
 ```bash
-npm install ketekny-ui-kit
-```
+# Required peer dependency:
+npm install vue
 
-2. Ensure required peer/runtime dependencies exist in your app:
+# If your app does not already use Tailwind CSS 3:
+npm install -D tailwindcss@^3 postcss autoprefixer
+```
 
 ```bash
-npm install vue tailwindcss postcss autoprefixer
+npm install ketekny-ui-kit
 ```
 
-If your project already has Vue + Tailwind configured, you can skip step 2.
 
-## CI Publish Auth (NPM Token)
 
-To publish from GitLab CI, create an npm granular token and store it in the runner/project CI variables.
+## Quick Start
+
+In your app entry (`main.js` / `main.ts`):
+
+```js
+import { createApp } from "vue";
+import App from "./App.vue";
+import "ketekny-ui-kit/styles.css";
+
+import {
+  kButton,
+  kInput,
+  kSelect,
+  kDateSelector,
+  kToggle,
+  toastPlugin,
+  confirmPlugin,
+  alertPlugin,
+  inputDialogPlugin,
+  tooltipPlugin,
+} from "ketekny-ui-kit";
+
+const app = createApp(App);
+
+app.component("kButton", kButton);
+app.component("kInput", kInput);
+app.component("kSelect", kSelect);
+app.component("kDateSelector", kDateSelector);
+app.component("kToggle", kToggle);
+
+app.use(toastPlugin);
+app.use(confirmPlugin);
+app.use(alertPlugin);
+app.use(inputDialogPlugin);
+app.use(tooltipPlugin);
+
+app.mount("#app");
+```
 
-### 1. Create npm token
+Example component usage:
 
-1. Open npm -> `Access Tokens` -> `Generate New Token` (Granular).
-2. Set permissions to `Read and write`.
-3. Under package access, allow `ketekny-ui-kit`.
-4. Enable `Bypass two-factor authentication (2FA)`.
-5. Create token and copy it (shown only once).
+```vue
+<template>
+  <div class="p-6 space-y-3">
+    <kInput v-model="name" label="Name" />
+    <kButton label="Save" success @click="save" />
+  </div>
+</template>
 
-### 2. Save token in GitLab CI/CD variables
+<script setup>
+import { ref } from "vue";
 
-1. Open GitLab project -> `Settings` -> `CI/CD` -> `Variables`.
-2. Add variable:
-- Key: `NPM_TOKEN`
-- Value: `<your npm token>`
-- Type: `Variable`
-- Masked: `true`
-- Protected: `true` (if publishing only from protected branches, e.g. `main`)
-3. Save and rerun pipeline.
+const name = ref("");
 
-### 3. Verify runner/tag
+function save() {
+  console.log("Saved:", name.value);
+}
+</script>
+```
 
-- Ensure the runner used by publish jobs has the required tag (currently `front`).
-- Ensure the project can use that runner.
+## Tailwind Setup
 
-## Tailwind Setup (Required)
+Use the provided preset to include semantic tokens and safelist patterns used by dynamic component classes.
 
-Use the provided Tailwind preset so semantic colors and component color tokens are always available.
+This README assumes Tailwind CSS 3. The `tailwind.config.js` / `tailwind.config.cjs` examples below are the supported integration path for this kit.
 
-### `tailwind.config.js` (ESM)
+`tailwind.config.js` (ESM):
 
 ```js
 import tailwindPreset from "ketekny-ui-kit/tailwind-preset.js";
@@ -66,7 +108,7 @@ export default {
 };
 ```
 
-### `tailwind.config.cjs` (CommonJS)
+`tailwind.config.cjs` (CommonJS):
 
 ```js
 const tailwindPreset = require("ketekny-ui-kit/tailwind-preset.js").default;
@@ -82,101 +124,68 @@ module.exports = {
 };
 ```
 
-Notes:
-- The preset contains the semantic color definitions and safelist patterns used by dynamic classes (alerts/toasts/button intents).
-- If you replace `safelist` in your own config, keep equivalent patterns or dynamic semantic classes may be purged.
+## Plugins
 
-## App CSS Setup
+- `toastPlugin`: adds `$toast.success|error|warning|info|show(...)`
+- `confirmPlugin`: adds `$confirm(options)`
+- `alertPlugin`: adds `$alert.success|warning|error|info(...)`
+- `inputDialogPlugin`: adds `$prompt(options)`
+- `tooltipPlugin`: registers `v-tooltip`
 
-Import the kit stylesheet in your app entry (`main.js` / `main.ts`):
+### Plugin API (quick reference)
 
-```js
-import "ketekny-ui-kit/styles.css";
-```
+- `$toast.success(message, options?)`
+- `$toast.error(message, options?)`
+- `$toast.warning(message, options?)`
+- `$toast.info(message, options?)`
+- `$toast.show({ type?, message, duration?, ... })`
+- `$confirm({ title?, message, onConfirm?, onCancel? })`
+- `$alert.success(message)`
+- `$alert.error(message)`
+- `$alert.warning(message)`
+- `$alert.info(message)`
+- `$prompt({ title?, message?, placeholder?, onConfirm? })`
 
-## Vue Setup
+Note: exact option keys may vary by component/plugin implementation version.
 
-`main.js` / `main.ts` example:
+## Exports
 
-```js
-import { createApp } from "vue";
-import App from "./App.vue";
-import "./style.css";
+Components:
 
-import {
-  kButton,
-  kInput,
-  kSelect,
-  kDateSelector,
-  kToggle,
-  toastPlugin,
-  confirmPlugin,
-  alertPlugin,
-  inputDialogPlugin,
-  tooltipPlugin,
-} from "ketekny-ui-kit";
+- `kMessage`, `kCode`, `kToolbar`, `kTable`, `kTabs`, `kChip`
+- `kSpinner`, `kDatatable`, `kIcon`, `kMenu`, `kSkeleton`
+- `kProgressBar`, `kTree`, `kButton`, `kSelect`, `kUploader`
+- `kToggle`, `kInput`, `kDateSelector`, `kDateSelectorV2`, `kEditor`
+- `kSelectButton`, `kTags`, `kSearch`, `kArrayList`, `kList`, `kTextArea`
+- `kDialog`, `kDrawer`
+- `kAppHeader`, `kAppFooter`, `kAppMain`, `kHero`
 
-const app = createApp(App);
+Other exports:
 
-app.component("kButton", kButton);
-app.component("kInput", kInput);
-app.component("kSelect", kSelect);
-app.component("kDateSelector", kDateSelector);
-app.component("kToggle", kToggle);
+- `toastPlugin`, `confirmPlugin`, `alertPlugin`, `tooltipPlugin`, `inputDialogPlugin`
+- `tailwindPreset`
 
-app.use(toastPlugin);
-app.use(confirmPlugin);
-app.use(alertPlugin);
-app.use(inputDialogPlugin);
-app.use(tooltipPlugin);
+## Common Issues
 
-app.mount("#app");
-```
+- Styles look missing:
+  - Confirm `import "ketekny-ui-kit/styles.css";` is in your app entry file.
+- Tailwind classes from the kit are not applied:
+  - Confirm `tailwind.config` includes `./node_modules/ketekny-ui-kit/**/*.{vue,js,ts,jsx,tsx}` in `content`.
+  - Confirm `presets: [tailwindPreset]` is present.
+- Date/time pickers fail to resolve `dayjs/plugin/customParseFormat.js`:
+  - Upgrade to `ketekny-ui-kit` `1.0.36` or newer.
+- Vue peer dependency warning:
+  - Install/update Vue 3 in your app: `npm install vue@^3`.
+- Dynamic semantic classes are purged:
+  - Keep the provided preset safelist patterns, or replicate them in your own Tailwind config.
 
-## Available Plugins
-
-- `toastPlugin` adds `$toast` (`success`, `error`, `warning`, `info`, `show`)
-- `confirmPlugin` adds `$confirm(options)`
-- `alertPlugin` adds `$alert.success|warning|error|info(...)`
-- `inputDialogPlugin` adds `$prompt(options)`
-- `tooltipPlugin` registers `v-tooltip`
-
-## Available Exports
-
-### Components
-
-- `kMessage`
-- `kButton`
-- `kChip`
-- `kCode`
-- `kDialog`
-- `kDrawer`
-- `kInput`
-- `kDateSelector`
-- `kToolbar`
-- `kSelect`
-- `kTable`
-- `kTabs`
-- `kToggle`
-- `kUploader`
-- `kEditor`
-- `kSpinner`
-- `kSelectButton`
-- `kDatatable`
-- `kIcon`
-- `kMenu`
-- `kTags`
-- `kSearch`
-- `kArrayList`
-- `kSkeleton`
-- `kAppHeader`
-- `kAppFooter`
-- `kAppMain`
-- `kHero`
-
-### Tailwind preset export
+## Development
 
-- `tailwindPreset`
+```bash
+npm run dev
+npm run build
+npm run preview
+```
 
 ## License
 
@@ -184,4 +193,5 @@ ISC
 
 ## Links
 
-- [npm](https://www.npmjs.com/package/ketekny-ui-kit)
+- Live demo/docs: https://ui.ketekny.gr
+- npm: https://www.npmjs.com/package/ketekny-ui-kit

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.51",
+  "version": "1.0.53",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [
@@ -42,6 +42,7 @@
     "@vuepic/vue-datepicker": "^11.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "dayjs": "1.11.19",
     "element-plus": "^2.13.5",
     "lucide-vue-next": "^0.511.0",
     "moment": "^2.30.1",