ketekny-ui-kit 1.0.50 → 1.0.52

package/README.md

@@ -1,56 +1,95 @@
-# 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.
 
-## Installation
+## Requirements
+
+- `vue`: `^3.0.0` (peer dependency)
+- Tailwind CSS build pipeline in your app (`tailwindcss`, `postcss`, `autoprefixer`)
 
-1. Install the package:
+## Installation
 
 ```bash
 npm install ketekny-ui-kit
 ```
 
-2. Ensure required peer/runtime dependencies exist in your app:
+Required peer dependency:
+
+```bash
+npm install vue
+```
+
+If your app does not already use Tailwind CSS:
 
 ```bash
-npm install vue tailwindcss postcss autoprefixer
+npm install -D tailwindcss postcss autoprefixer
 ```
 
-If your project already has Vue + Tailwind configured, you can skip step 2.
+## 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);
 
-## CI Publish Auth (NPM Token)
+app.component("kButton", kButton);
+app.component("kInput", kInput);
+app.component("kSelect", kSelect);
+app.component("kDateSelector", kDateSelector);
+app.component("kToggle", kToggle);
 
-To publish from GitLab CI, create an npm granular token and store it in the runner/project CI variables.
+app.use(toastPlugin);
+app.use(confirmPlugin);
+app.use(alertPlugin);
+app.use(inputDialogPlugin);
+app.use(tooltipPlugin);
 
-### 1. Create npm token
+app.mount("#app");
+```
 
-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).
+Example component usage:
 
-### 2. Save token in GitLab CI/CD variables
+```vue
+<template>
+  <div class="p-6 space-y-3">
+    <kInput v-model="name" label="Name" />
+    <kButton label="Save" success @click="save" />
+  </div>
+</template>
 
-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.
+<script setup>
+import { ref } from "vue";
 
-### 3. Verify runner/tag
+const name = ref("");
 
-- Ensure the runner used by publish jobs has the required tag (currently `front`).
-- Ensure the project can use that runner.
+function save() {
+  console.log("Saved:", name.value);
+}
+</script>
+```
 
-## Tailwind Setup (Required)
+## Tailwind Setup
 
-Use the provided Tailwind preset so semantic colors and component color tokens are always available.
+Use the provided preset to include semantic tokens and safelist patterns used by dynamic component classes.
 
-### `tailwind.config.js` (ESM)
+`tailwind.config.js` (ESM):
 
 ```js
 import tailwindPreset from "ketekny-ui-kit/tailwind-preset.js";
@@ -66,7 +105,7 @@ export default {
 };
 ```
 
-### `tailwind.config.cjs` (CommonJS)
+`tailwind.config.cjs` (CommonJS):
 
 ```js
 const tailwindPreset = require("ketekny-ui-kit/tailwind-preset.js").default;
@@ -82,101 +121,66 @@ 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.
+- 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 +188,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.50",
+  "version": "1.0.52",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [
@@ -43,13 +43,10 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "element-plus": "^2.13.5",
-    "he-tree-vue": "^3.1.2",
-    "json-editor-vue": "^0.18.1",
     "lucide-vue-next": "^0.511.0",
     "moment": "^2.30.1",
     "primeicons": "^7.0.0",
     "primevue": "^4.3.4",
-    "quill": "2.0.2",
     "reka-ui": "^2.8.2",
     "simple-code-editor": "^2.0.9",
     "tailwind-merge": "^3.5.0",

package/src/ui/kTree.vue

@@ -1,54 +1,128 @@
 <template>
   <div class="k-tree text-primary/90" :class="disabled ? 'k-tree--disabled' : ''">
-    <HETree
-      ref="treeRef"
-      class="k-tree__root"
-      :value="treeData"
+    <TreeBranch
+      :nodes="treeData"
       :indent="indent"
+      :disabled="disabled"
       :draggable="draggable"
       :droppable="droppable"
-      :edge-scroll="edgeScroll"
-      :trigger-class="triggerClass"
-      @nodeFoldedChanged="syncExpandedFromTree"
-      @drop="onDrop"
-      @change="onChange">
-      <template #default="{ node, path, tree }">
+      :selected-keys="resolvedSelectionKeys"
+      :resolve-node-label="resolveNodeLabel"
+      @node-click="onNodeClick"
+      @toggle="toggleNode"
+      @drag-start="onDragStart"
+      @node-drop="onNodeDrop">
+      <template #default="{ node, path }">
+        <slot name="default" :node="node" :path="path" :tree="treeApi">
+          {{ resolveNodeLabel(node) }}
+        </slot>
+      </template>
+    </TreeBranch>
+  </div>
+</template>
+
+<script>
+import { ChevronRight } from 'lucide-vue-next'
+
+const TreeBranch = {
+  name: 'TreeBranch',
+  components: { ChevronRight },
+  props: {
+    nodes: { type: Array, default: () => [] },
+    indent: { type: Number, default: 20 },
+    disabled: { type: Boolean, default: false },
+    draggable: { type: [Boolean, Function], default: false },
+    droppable: { type: [Boolean, Function], default: false },
+    selectedKeys: { type: Object, default: () => ({}) },
+    resolveNodeLabel: { type: Function, required: true },
+  },
+  emits: ['node-click', 'toggle', 'drag-start', 'node-drop'],
+  methods: {
+    hasChildren(node) {
+      return Array.isArray(node?.children) && node.children.length > 0
+    },
+    canDrag(node) {
+      return this.draggable === true || (typeof this.draggable === 'function' && this.draggable(node.__raw || node))
+    },
+    canDrop(node) {
+      return this.droppable === true || (typeof this.droppable === 'function' && this.droppable(node.__raw || node))
+    },
+    isSelected(key) {
+      return this.selectedKeys?.[String(key)] === true
+    },
+    onDragStart(event, node) {
+      if (!this.canDrag(node)) {
+        event.preventDefault()
+        return
+      }
+      event.dataTransfer.effectAllowed = 'move'
+      event.dataTransfer.setData('text/plain', String(node.key))
+      this.$emit('drag-start', node)
+    },
+    onDrop(event, node) {
+      if (!this.canDrop(node)) return
+      event.preventDefault()
+      this.$emit('node-drop', node)
+    },
+  },
+  template: `
+    <ul class="k-tree-branch">
+      <li v-for="node in nodes" :key="node.key" class="k-tree-node">
         <div
           class="k-tree-node-content"
-          :class="isSelected(node.key) ? 'k-tree-node-content--selected' : ''"
-          @click="onNodeClick($event, node)">
+          :class="[
+            isSelected(node.key) ? 'k-tree-node-content--selected' : '',
+            canDrop(node) ? 'k-tree-node-content--droppable' : '',
+          ]"
+          :style="{ paddingLeft: node.__level ? (node.__level * indent + 7) + 'px' : undefined }"
+          :draggable="canDrag(node)"
+          @dragstart="onDragStart($event, node)"
+          @dragover.prevent="canDrop(node)"
+          @drop="onDrop($event, node)"
+          @click="$emit('node-click', $event, node)">
           <button
             v-if="hasChildren(node)"
             type="button"
             class="k-tree-node-toggler"
             :aria-label="node.$folded ? 'Expand node' : 'Collapse node'"
-            @click.stop="toggleNode(tree, node, path)">
+            @click.stop="$emit('toggle', node)">
             <ChevronRight class="k-tree-node-toggler-icon" :class="node.$folded ? '' : 'k-tree-node-toggler-icon--open'" />
           </button>
 
           <span v-else class="k-tree-node-toggler k-tree-node-toggler--empty"></span>
 
           <div class="k-tree-node-label">
-            <slot name="default" :node="node.__raw || node" :path="path" :tree="tree">
+            <slot :node="node.__raw || node" :path="node.__path">
               {{ resolveNodeLabel(node.__raw || node) }}
             </slot>
           </div>
         </div>
-      </template>
-    </HETree>
-  </div>
-</template>
 
-<script>
-import { ChevronRight } from 'lucide-vue-next'
-import { Tree as BaseTree, Fold, Draggable } from 'he-tree-vue'
-import 'he-tree-vue/dist/he-tree-vue.css'
-
-const HETree = BaseTree.mixPlugins([Fold, Draggable])
+        <TreeBranch
+          v-if="hasChildren(node) && !node.$folded"
+          :nodes="node.children"
+          :indent="indent"
+          :disabled="disabled"
+          :draggable="draggable"
+          :droppable="droppable"
+          :selected-keys="selectedKeys"
+          :resolve-node-label="resolveNodeLabel"
+          @node-click="(...args) => $emit('node-click', ...args)"
+          @toggle="(...args) => $emit('toggle', ...args)"
+          @drag-start="(...args) => $emit('drag-start', ...args)"
+          @node-drop="(...args) => $emit('node-drop', ...args)">
+          <template #default="slotProps">
+            <slot v-bind="slotProps" />
+          </template>
+        </TreeBranch>
+      </li>
+    </ul>
+  `,
+}
 
 export default {
   name: 'kTree',
-  components: { HETree, ChevronRight },
+  components: { TreeBranch },
   props: {
     value: { type: Array, default: () => [] },
     selectionKeys: { type: [Object, null], default: null },
@@ -67,6 +141,7 @@ export default {
   data() {
     return {
       internalExpandedKeys: { ...(this.expandedKeys || {}) },
+      draggedNode: null,
       treeData: [],
     }
   },
@@ -74,6 +149,12 @@ export default {
     resolvedSelectionKeys() {
       return this.selectionKeys ?? this.modelValue ?? {}
     },
+    treeApi() {
+      return {
+        toggleFold: this.toggleNode,
+        treeData: this.treeData,
+      }
+    },
   },
   watch: {
     value: {
@@ -95,15 +176,18 @@ export default {
     rebuildTreeData() {
       this.treeData = this.buildTreeData(this.value || [], '', this.internalExpandedKeys)
     },
-    buildTreeData(nodes, parentPath, expandedMap) {
+    buildTreeData(nodes, parentPath, expandedMap, level = 0) {
       return (nodes || []).map((node, index) => {
         const key = this.getNodeKey(node, parentPath, index)
-        const children = this.buildTreeData(node.children || [], key, expandedMap)
+        const path = parentPath ? `${parentPath}-${index}` : String(index)
+        const children = this.buildTreeData(node.children || [], key, expandedMap, level + 1)
         return {
           ...node,
           key,
           children,
           __raw: node,
+          __level: level,
+          __path: path,
           $folded: this.hasChildren(node) ? expandedMap?.[key] !== true : false,
         }
       })
@@ -148,19 +232,76 @@ export default {
       this.emitSelection(next)
       this.$emit('nodeSelect', { originalEvent, node: node.__raw || node, data: node.__raw || node })
     },
-    toggleNode(tree, node, path) {
-      tree.toggleFold(node, path)
-      this.$nextTick(() => this.syncExpandedFromTree(tree))
+    toggleNode(node) {
+      node.$folded = !node.$folded
+      this.syncExpandedFromTree()
+    },
+    onDragStart(node) {
+      this.draggedNode = node
     },
-    onDrop(store) {
-      this.$emit('drop', store)
+    onNodeDrop(targetNode) {
+      if (!this.draggedNode || this.draggedNode.key === targetNode.key) return
+      const nextTree = this.cloneWithoutNode(this.treeData, this.draggedNode.key)
+      const moved = this.stripInternalFields(this.draggedNode)
+      const changedTree = this.appendChild(nextTree, targetNode.key, moved)
+
+      this.treeData = changedTree
+      this.draggedNode = null
+      this.syncExpandedFromTree()
+
+      const payload = {
+        dragNode: moved,
+        dropNode: this.stripInternalFields(targetNode),
+        treeData: this.toRawNodes(this.treeData),
+      }
+      this.$emit('drop', payload)
+      this.$emit('change', payload)
     },
-    onChange(store) {
-      this.$nextTick(() => this.syncExpandedFromTree(store?.targetTree || this.$refs.treeRef))
-      this.$emit('change', store)
+    cloneWithoutNode(nodes, key) {
+      return (nodes || [])
+        .filter((node) => String(node.key) !== String(key))
+        .map((node) => ({
+          ...node,
+          children: this.cloneWithoutNode(node.children || [], key),
+        }))
+    },
+    appendChild(nodes, targetKey, child) {
+      return (nodes || []).map((node) => {
+        if (String(node.key) === String(targetKey)) {
+          const nextChildren = [...(node.children || []), this.decorateMovedNode(child, node)]
+          return { ...node, children: nextChildren, $folded: false }
+        }
+        return { ...node, children: this.appendChild(node.children || [], targetKey, child) }
+      })
     },
-    syncExpandedFromTree(treeVm) {
-      const source = treeVm?.treeData || this.treeData || []
+    decorateMovedNode(node, parent) {
+      const key = this.getNodeKey(node, String(parent.key), (parent.children || []).length)
+      const children = (node.children || []).map((child, index) => ({
+        ...this.decorateMovedNode(child, { key, children: node.children }),
+        __path: `${key}-${index}`,
+      }))
+      return {
+        ...node,
+        key,
+        children,
+        __raw: node,
+        __level: (parent.__level || 0) + 1,
+        __path: `${parent.__path}-${(parent.children || []).length}`,
+        $folded: this.hasChildren(node) ? false : false,
+      }
+    },
+    stripInternalFields(node) {
+      const { __raw, __level, __path, $folded, ...rest } = node || {}
+      return {
+        ...rest,
+        children: (rest.children || []).map((child) => this.stripInternalFields(child)),
+      }
+    },
+    toRawNodes(nodes) {
+      return (nodes || []).map((node) => this.stripInternalFields(node))
+    },
+    syncExpandedFromTree() {
+      const source = this.treeData || []
       const next = {}
       const walk = (nodes) => {
         ;(nodes || []).forEach((node) => {
@@ -179,7 +320,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .k-tree {
   background: #ffffff;
   border: 0;
@@ -188,6 +329,17 @@ export default {
   overflow: auto;
 }
 
+.k-tree-branch {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.k-tree-node {
+  margin: 0;
+  padding: 0;
+}
+
 .k-tree--disabled {
   opacity: 0.6;
   pointer-events: none;
@@ -211,6 +363,10 @@ export default {
   background: #f8fafc;
 }
 
+.k-tree-node-content--droppable {
+  cursor: grab;
+}
+
 .k-tree-node-content--selected {
   background: #ecfdf3;
   color: #15803d;