ketekny-ui-kit 1.0.60 → 1.0.62

package/README.md

@@ -155,7 +155,7 @@ Components:
 - `kMessage`, `kCode`, `kToolbar`, `kTable`, `kTabs`, `kChip`
 - `kSpinner`, `kDatatable`, `kIcon`, `kMenu`, `kSkeleton`
 - `kProgressBar`, `kTree`, `kButton`, `kSelect`, `kUploader`
-- `kToggle`, `kInput`, `kDateSelector`, `kDateSelectorV2`, `kEditor`
+- `kToggle`, `kInput`, `kDateSelector`, `kEditor`
 - `kSelectButton`, `kTags`, `kSearch`, `kArrayList`, `kList`, `kTextArea`
 - `kDialog`, `kDrawer`
 - `kAppHeader`, `kAppFooter`, `kAppMain`, `kHero`

package/index.js

@@ -7,7 +7,6 @@ import kDialog from './src/ui/kDialog.vue'
 import kDrawer from './src/ui/kDrawer.vue'
 import kInput from './src/ui/kInput.vue'
 import kDateSelector from './src/ui/kDateSelector.vue'
-import kDateSelectorV2 from './src/ui/kDateSelector_v2.vue'
 import kToolbar from './src/ui/kToolbar.vue'
 import kSelect from './src/ui/kSelect.vue'
 import kTable from './src/ui/kTable.vue'
@@ -51,7 +50,7 @@ export {
   kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kTree,
 
   // Form Components
-  kButton, kSelect, kUploader, kToggle, kInput, kDateSelector, kDateSelectorV2, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea,
+  kButton, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea,
 
   // Dialogs
   kDialog, kDrawer,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.60",
+  "version": "1.0.62",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [

package/src/ui/kDateSelector.vue

@@ -1,326 +1,152 @@
 <template>
-  <div class="relative w-full">
-    <label :for="id" class="inputLabel" :class="hasError || inputInvalid ? 'text-red-500' : 'text-primary/90'">
-      {{ label }}
-    </label>
-
-    <!-- Date Mode (text input + calendar icon opens Vue Datepicker popup) -->
-    <div v-if="type === 'date'">
-      <div class="relative">
-        <input
-          :id="id"
-          type="text"
-          v-model="textDate"
-          :placeholder="placeholder || 'dd/mm/yyyy'"
-          :disabled="disabled"
-          :class="[defaultStyle, hasError || inputInvalid ? errorStyle : '', disabled ? disabledStyle : '']"
-          @input="onTextInput"
-          @blur="commitTextDate"
-          @keydown.enter.prevent="commitTextDate"
-        />
-
-        <!-- Right-side calendar icon (opens popup) -->
-        <button
-          type="button"
-          class="absolute p-1 text-primary/70 -translate-y-1/2 right-2 top-1/2 hover:text-primary disabled:opacity-50"
-          :disabled="disabled"
-          @click="openCalendar"
-          aria-label="Open calendar"
-        >
-          <Calendar class="w-5 h-5" />
-        </button>
-      </div>
-
-      <!-- Hidden input; only used to render the popup -->
-      <Datepicker ref="dp" v-model="calendarDate" :format="dateFormat" :enable-time-picker="false" auto-apply :disabled="disabled" :hide-input-icon="true" teleport="body" class="sr-only" />
-    </div>
-
-    <!-- Year-Month Mode -->
-    <div v-else class="relative">
-      <div class="relative">
-        <div ref="trigger" :class="[defaultStyle, hasError ? errorStyle : '', disabled ? disabledStyle : '']" @click="togglePopup">
-          {{ displayValue || placeholder }}
-        </div>
-
-        <!-- Right-side calendar icon (opens month grid) -->
-        <button
-          type="button"
-          class="absolute p-1 text-primary/70 -translate-y-1/2 right-2 top-1/2 hover:text-primary disabled:opacity-50"
-          :disabled="disabled"
-          @click.stop="togglePopup"
-          aria-label="Open month selector"
-        >
-          <Calendar class="w-5 h-5" />
-        </button>
-
-        <!-- Clear Button (sits just left of the calendar icon) -->
-        <button
-          v-if="displayValue && !disabled"
-          @click.stop="clearSelection"
-          type="button"
-          class="absolute text-sm font-bold text-gray-400 -translate-y-1/2 right-9 top-1/2 hover:text-red-500"
-          aria-label="Clear"
-        >
-          <X class="w-5 h-5" />
-        </button>
-      </div>
-
-      <!-- Month Grid Popover (Teleported) -->
-      <teleport to="body">
-        <div v-if="showPopup" class="p-4 bg-white dark:bg-slate-800 border border-primary/20 dark:border-slate-600 rounded-lg shadow-lg" :style="popupStyles">
-          <!-- Year Nav -->
-          <div class="flex items-center justify-between pb-3 mb-4 border-b border-slate-200 dark:border-slate-600">
-            <button @click.stop="currentYear--" class="text-primary/80 dark:text-sky-300 hover:text-primary dark:hover:text-sky-200" aria-label="Previous year">
-              <ChevronLeft />
-            </button>
-            <span class="font-medium text-primary dark:text-sky-300">{{ currentYear }}</span>
-            <button @click.stop="currentYear++" class="text-primary/80 dark:text-sky-300 hover:text-primary dark:hover:text-sky-200" aria-label="Next year">
-              <ChevronRight />
-            </button>
-          </div>
-
-          <!-- Month Grid -->
-          <div class="grid grid-cols-3 gap-2">
-            <div
-              v-for="(month, index) in months"
-              :key="index"
-              @click="selectMonth(index + 1)"
-              class="px-3 py-2 text-center transition rounded-lg cursor-pointer"
-              :class="[isSelected(index + 1) ? 'bg-primary text-white' : 'text-gray-700 dark:text-slate-200 hover:bg-primary/15 dark:hover:bg-sky-500/30 dark:hover:text-sky-100']"
-            >
-              {{ month }}
-            </div>
-          </div>
-        </div>
-      </teleport>
-    </div>
-
-    <!-- API-provided error -->
-    <div class="text-sm text-red-500" v-if="hasError && error !== true && error !== ''">
-      {{ error }}
-    </div>
-
-    <!-- Local parse error -->
-    <div class="text-sm text-red-500" v-if="inputInvalid && !hasError">Μη έγκυρη ημερομηνία. Χρησιμοποιήστε μορφή dd/mm/yyyy.</div>
-
-    <!-- Info message -->
-    <div class="text-sm text-primary/80" v-if="info != null">
-      {{ info }}
-    </div>
+  <div>
+    <label v-if="label" class="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{{ label }}</label>
+    <el-date-picker
+      :id="computedId"
+      :model-value="normalizedModelValue"
+      :type="pickerType"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :clearable="clearable"
+      :editable="editable"
+      :size="size"
+      :format="resolvedFormat"
+      :value-format="resolvedValueFormat"
+      :disabled-date="disabledDate"
+      :start-placeholder="startPlaceholder"
+      :end-placeholder="endPlaceholder"
+      :range-separator="rangeSeparator"
+      class="k-date"
+      style="width: 100%"
+      @update:model-value="$emit('update:modelValue', $event)"
+      @change="$emit('change', $event)"
+    />
+    <p v-if="hasError" class="mt-1 text-xs text-red-600 dark:text-red-400">{{ typeof error === 'string' ? error : '' }}</p>
+    <p v-else-if="info" class="mt-1 text-xs text-slate-500 dark:text-slate-400">{{ info }}</p>
   </div>
 </template>
 
-<script>
-import Datepicker from "@vuepic/vue-datepicker";
-import "@vuepic/vue-datepicker/dist/main.css";
-import moment from "moment";
-import { ChevronLeft, ChevronRight, X, Calendar } from "lucide-vue-next";
-
-export default {
-  name: "kDatePicker",
-  components: { Datepicker, ChevronLeft, ChevronRight, X, Calendar },
-  props: {
-    modelValue: [String, Date],
-    type: {
-      type: String,
-      default: "date",
-      validator: (val) => ["date", "yearMonth"].includes(val),
-    },
-    info: { type: String, default: null },
-    error: { type: [String, Boolean], default: null },
-    label: { type: String, default: "Ημερομηνία" },
-    placeholder: { type: String, default: "Επιλέξτε ημερομηνία" },
-    disabled: { type: Boolean, default: false },
-    valueFormat: { type: String, default: null },
-    id: {
-      type: String,
-      default: () => `datepicker-${Math.random().toString(36).substr(2, 9)}`,
-    },
-  },
-  data() {
-    const parsed = moment(this.modelValue, "YYYY-MM", true);
-    const current = moment();
-
-    const initText = (() => {
-      if (!this.modelValue) return "";
-      const m = moment(this.modelValue);
-      return m.isValid() ? m.format("DD/MM/YYYY") : "";
-    })();
+<script setup>
+import { computed } from 'vue'
+import { ElDatePicker } from 'element-plus'
 
-    return {
-      defaultStyle: "w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg transition shadow-sm focus:outline-none text-gray-700 dark:text-slate-200 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white dark:bg-slate-800 placeholder-gray-400 dark:placeholder-slate-500",
-      errorStyle: "border-red-500 focus:ring focus:ring-red-300",
-      disabledStyle: "!bg-gray-100 dark:!bg-slate-700 !text-gray-400 dark:!text-slate-500 !cursor-not-allowed",
-
-      // Year-Month UI state
-      showPopup: false,
-      currentYear: parsed.isValid() ? parsed.year() : current.year(),
-      selectedMonth: parsed.isValid() ? parsed.month() + 1 : null,
-      months: ["Ιαν", "Φεβ", "Μάρ", "Απρ", "Μάι", "Ιούν", "Ιούλ", "Αυγ", "Σεπ", "Οκτ", "Νοέ", "Δεκ"],
-      popupStyles: {
-        position: "absolute",
-        top: "0px",
-        left: "0px",
-        width: "100%",
-      },
-
-      textDate: initText,
-      inputInvalid: false,
-    };
-  },
-  computed: {
-    hasError() {
-      return this.error != null && this.error !== false;
-    },
-    displayValue() {
-      if (!this.selectedMonth || !this.currentYear) return "";
-      return moment(`${this.currentYear}-${String(this.selectedMonth).padStart(2, "0")}`).format("MM/YYYY");
-    },
-    calendarDate: {
-      get() {
-        if (!this.modelValue) return null;
-        const m = moment(this.modelValue);
-        return m.isValid() ? m.toDate() : null;
-      },
-      set(val) {
-        const m = moment(val);
-        if (!m.isValid()) {
-          this.$emit("update:modelValue", null);
-          return;
-        }
-        const emitValue = this.valueFormat ? m.format(this.valueFormat) : m.toDate();
-        this.$emit("update:modelValue", emitValue);
-      },
-    },
-    dateFormat() {
-      return "dd/MM/yyyy";
-    },
-  },
-  watch: {
-    modelValue(newVal) {
-      if (!newVal) {
-        this.textDate = "";
-        return;
-      }
-      const m = moment(newVal);
-      this.textDate = m.isValid() ? m.format("DD/MM/YYYY") : "";
-    },
+const props = defineProps({
+  modelValue: { type: [String, Date, Array], default: null },
+  id: {
+    type: [String, Array],
+    default: () => `datepicker-${Math.random().toString(36).slice(2, 11)}`,
   },
-  mounted() {
-    this.clickOutsideHandler = (e) => {
-      if (this.showPopup && !this.$el.contains(e.target)) {
-        this.showPopup = false;
-      }
-    };
-    document.addEventListener("click", this.clickOutsideHandler);
+  label: { type: String, default: '' },
+  type: {
+    type: String,
+    default: 'date',
+    validator: (val) => ['year', 'month', 'date', 'dates', 'datetime', 'week', 'datetimerange', 'daterange', 'monthrange', 'yearMonth'].includes(val),
   },
-  beforeUnmount() {
-    document.removeEventListener("click", this.clickOutsideHandler);
-  },
-  methods: {
-    /**
-     * Live input handler:
-     * - Keeps digits and slashes
-     * - Allows user to type `/` manually
-     * - Auto-inserts missing slashes when needed
-     * - Emits update when full valid date entered
-     */
-    onTextInput(e) {
-      if (this.disabled) return;
-
-      let value = e.target.value || "";
-
-      // Allow digits and slashes only
-      value = value.replace(/[^0-9/]/g, "");
-
-      // Auto-add slashes if user omits them
-      const digits = value.replace(/\D/g, "");
-      if (digits.length > 2 && !value.includes("/")) {
-        // add first slash after 2 digits
-        value = `${digits.slice(0, 2)}/${digits.slice(2)}`;
-      }
-      if (digits.length > 4 && (value.match(/\//g) || []).length < 2) {
-        // ensure second slash exists after month
-        value = `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4)}`;
-      }
-
-      // Prevent double slashes like "12//03"
-      value = value.replace(/\/{2,}/g, "/");
-
-      this.textDate = value;
-
-      // When 8 digits exist, try to parse automatically
-      if (digits.length === 8) {
-        const m = moment(value, "DD/MM/YYYY", true);
-        if (m.isValid()) {
-          this.inputInvalid = false;
-          const emitValue = this.valueFormat ? m.format(this.valueFormat) : m.toDate();
-          this.$emit("update:modelValue", emitValue);
-        } else {
-          this.inputInvalid = true;
-        }
-      } else {
-        this.inputInvalid = false;
-      }
-    },
-
-    commitTextDate() {
-      const raw = (this.textDate || "").trim();
-      if (!raw) {
-        this.inputInvalid = false;
-        this.$emit("update:modelValue", null);
-        return;
-      }
-      const formats = ["DD/MM/YYYY", "D/M/YYYY", "YYYY-MM-DD", moment.ISO_8601];
-      const m = moment(raw, formats, true);
-      if (!m.isValid()) {
-        this.inputInvalid = true;
-        return;
-      }
-      this.inputInvalid = false;
-      const emitValue = this.valueFormat ? m.format(this.valueFormat) : m.toDate();
-      this.$emit("update:modelValue", emitValue);
-    },
-
-    openCalendar() {
-      if (this.disabled) return;
-      this.$refs.dp && this.$refs.dp.openMenu && this.$refs.dp.openMenu();
-    },
-    togglePopup() {
-      if (this.disabled) return;
-      this.showPopup = !this.showPopup;
-      if (this.showPopup) {
-        this.$nextTick(() => {
-          const trigger = this.$refs.trigger;
-          if (trigger) {
-            const rect = trigger.getBoundingClientRect();
-            this.popupStyles = {
-              position: "absolute",
-              top: `${rect.bottom + window.scrollY}px`,
-              left: `${rect.left + window.scrollX}px`,
-              width: `${rect.width}px`,
-              zIndex: 9999,
-            };
-          }
-        });
-      }
-    },
-    clearSelection() {
-      this.selectedMonth = null;
-      this.$emit("update:modelValue", null);
-      this.showPopup = false;
-    },
-    selectMonth(month) {
-      this.selectedMonth = month;
-      const m = moment(`${this.currentYear}-${String(month).padStart(2, "0")}`, "YYYY-MM");
-      const emitValue = this.valueFormat ? m.format(this.valueFormat) : m.toDate();
-      this.$emit("update:modelValue", emitValue);
-      this.showPopup = false;
-    },
-    isSelected(month) {
-      const m = moment(this.modelValue, "YYYY-MM", true);
-      return this.selectedMonth === month && m.isValid() && m.year() === this.currentYear;
-    },
+  placeholder: { type: String, default: 'Select date' },
+  startPlaceholder: { type: String, default: 'Start date' },
+  endPlaceholder: { type: String, default: 'End date' },
+  rangeSeparator: { type: String, default: 'To' },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: true },
+  editable: { type: Boolean, default: true },
+  size: {
+    type: String,
+    default: 'default',
+    validator: (val) => ['large', 'default', 'small'].includes(val),
   },
-};
+  format: { type: String, default: '' },
+  valueFormat: { type: String, default: '' },
+  disabledDate: { type: Function, default: undefined },
+  error: { type: [String, Boolean], default: null },
+  info: { type: String, default: '' },
+})
+
+defineEmits(['update:modelValue', 'change'])
+
+const pickerType = computed(() => props.type === 'yearMonth' ? 'month' : props.type)
+const isRange = computed(() => ['daterange', 'datetimerange', 'monthrange'].includes(pickerType.value))
+const computedId = computed(() => {
+  if (Array.isArray(props.id)) return props.id
+  return isRange.value ? [`${props.id}-start`, `${props.id}-end`] : props.id
+})
+const hasError = computed(() => props.error != null && props.error !== false)
+
+const defaultFormatByType = {
+  date: 'YYYY-MM-DD',
+  dates: 'YYYY-MM-DD',
+  week: 'gggg[w]ww',
+  year: 'YYYY',
+  month: 'YYYY-MM',
+  datetime: 'YYYY-MM-DD HH:mm:ss',
+  monthrange: 'YYYY-MM',
+  daterange: 'YYYY-MM-DD',
+  datetimerange: 'YYYY-MM-DD HH:mm:ss',
+}
+
+const resolvedFormat = computed(() => {
+  const custom = String(props.format || '').trim()
+  if (custom) return custom
+  return defaultFormatByType[pickerType.value] || 'YYYY-MM-DD'
+})
+
+const resolvedValueFormat = computed(() => {
+  const custom = String(props.valueFormat || '').trim()
+  if (custom) return custom
+  return defaultFormatByType[pickerType.value] || 'YYYY-MM-DD'
+})
+
+function normalizeIsoString(value, type) {
+  if (typeof value !== 'string' || !value.includes('T')) return value
+
+  if (type === 'year') return value.slice(0, 4)
+  if (type === 'month' || type === 'monthrange') return value.slice(0, 7)
+
+  if (type === 'datetime' || type === 'datetimerange') {
+    const normalized = value.replace('T', ' ').replace(/Z$/, '')
+    const fullMatch = normalized.match(/^(\d{4}-\d{2}-\d{2})\s(\d{2}:\d{2}:\d{2})/)
+    if (fullMatch) return `${fullMatch[1]} ${fullMatch[2]}`
+    const shortMatch = normalized.match(/^(\d{4}-\d{2}-\d{2})\s(\d{2}:\d{2})/)
+    if (shortMatch) return `${shortMatch[1]} ${shortMatch[2]}:00`
+    return normalized
+  }
+
+  const dateMatch = value.match(/^(\d{4}-\d{2}-\d{2})/)
+  return dateMatch ? dateMatch[1] : value
+}
+
+const normalizedModelValue = computed(() => {
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.map((item) => normalizeIsoString(item, pickerType.value))
+  }
+  return normalizeIsoString(props.modelValue, pickerType.value)
+})
 </script>
+
+<style>
+/* Global because Element Plus picker panel is teleported to body. */
+html.dark .el-date-picker,
+html.dark .el-date-range-picker {
+  --el-datepicker-inrange-bg-color: rgba(3, 105, 161, 0.22);
+  --el-datepicker-inrange-hover-bg-color: rgba(3, 105, 161, 0.32);
+}
+
+html.dark .el-date-table td.in-range .el-date-table-cell,
+html.dark .el-month-table td.in-range .el-date-table-cell,
+html.dark .el-year-table td.in-range .el-date-table-cell {
+  background-color: rgba(3, 105, 161, 0.22);
+}
+
+html.dark .el-date-table td.in-range .el-date-table-cell:hover,
+html.dark .el-month-table td.in-range .el-date-table-cell:hover,
+html.dark .el-year-table td.in-range .el-date-table-cell:hover {
+  background-color: rgba(3, 105, 161, 0.32);
+}
+
+html.dark .el-month-table td.available:hover .el-date-table-cell,
+html.dark .el-year-table td.available:hover .el-date-table-cell {
+  background-color: rgba(148, 163, 184, 0.16);
+  border-radius: 24px;
+}
+</style>

package/src/ui/kTree.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="k-tree text-primary/90" :class="disabled ? 'k-tree--disabled' : ''">
-    <TreeBranch
+    <kTreeBranch
       :nodes="treeData"
       :indent="indent"
       :disabled="disabled"
@@ -17,112 +17,16 @@
           {{ resolveNodeLabel(node) }}
         </slot>
       </template>
-    </TreeBranch>
+    </kTreeBranch>
   </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' : '',
-            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="$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 :node="node.__raw || node" :path="node.__path">
-              {{ resolveNodeLabel(node.__raw || node) }}
-            </slot>
-          </div>
-        </div>
-
-        <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>
-  `,
-}
+import kTreeBranch from './kTreeBranch.vue'
 
 export default {
   name: 'kTree',
-  components: { TreeBranch },
+  components: { kTreeBranch },
   props: {
     value: { type: Array, default: () => [] },
     selectionKeys: { type: [Object, null], default: null },