ketekny-ui-kit 1.0.96 → 1.0.97

package/index.js

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

package/package.json

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

package/src/ui/kList.vue

@@ -7,7 +7,13 @@
       <div
         v-for="(stat, index) in normalizedStats"
         :key="resolveKey(stat, index)"
-        class="flex items-center gap-3 p-3 border border-gray-200 rounded-xl bg-white dark:bg-slate-800 dark:border-slate-700"
+        class="flex items-center gap-3 border border-gray-200 rounded-xl bg-white p-3 dark:border-slate-700 dark:bg-slate-800"
+        :class="entryClass(stat)"
+        :role="stat.action ? 'button' : undefined"
+        :tabindex="stat.action ? 0 : undefined"
+        @click="handleAction(stat, index)"
+        @keydown.enter.prevent="handleAction(stat, index)"
+        @keydown.space.prevent="handleAction(stat, index)"
       >
         <div
           v-if="stat.icon"
@@ -39,6 +45,12 @@
             v-for="(stat, index) in normalizedStats"
             :key="resolveKey(stat, index)"
             class="border-b border-gray-200 last:border-b-0 dark:border-slate-700"
+            :class="entryClass(stat)"
+            :role="stat.action ? 'button' : undefined"
+            :tabindex="stat.action ? 0 : undefined"
+            @click="handleAction(stat, index)"
+            @keydown.enter.prevent="handleAction(stat, index)"
+            @keydown.space.prevent="handleAction(stat, index)"
           >
             <td class="px-4 py-3 text-sm text-gray-600 dark:text-slate-400">
               <div class="flex items-center gap-2">
@@ -89,15 +101,18 @@ export default {
       validator: (value) => ['col', 'row'].includes(value),
     },
   },
+  emits: ['action'],
   computed: {
     isRowFormat() {
       return this.format === 'row'
     },
     normalizedStats() {
       return this.stats.map((stat) => ({
+        raw: stat,
         label: stat?.label ?? '',
         value: stat?.value ?? '-',
         icon: stat?.icon ?? null,
+        action: typeof stat?.action === 'function' ? stat.action : null,
       }))
     },
   },
@@ -105,6 +120,16 @@ export default {
     resolveKey(stat, index) {
       return `${String(stat.label)}-${index}`
     },
+    entryClass(stat) {
+      return stat.action
+        ? 'cursor-pointer transition hover:border-primary/40 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-primary/20 dark:hover:bg-slate-700/70'
+        : ''
+    },
+    handleAction(stat, index) {
+      if (!stat.action) return
+      stat.action(stat.raw, index)
+      this.$emit('action', stat.raw, index)
+    },
   },
 }
 </script>

package/src/ui/kOptionGroup.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="w-full">
+    <div
+      v-if="title"
+      :class="titleClass"
+    >
+      {{ title }}
+    </div>
+    <div :class="containerClass">
+      <button
+        v-for="(option, index) in normalizedOptions"
+        :key="resolveKey(option, index)"
+        type="button"
+        class="flex w-full text-left transition"
+        :class="buttonClass(option)"
+        @click="toggleOption(option)"
+      >
+        <div
+          v-if="option.icon"
+          class="shrink-0"
+          :class="iconWrapperClass(option)"
+        >
+          <kIcon
+            v-if="typeof option.icon === 'string'"
+            :name="option.icon"
+            :size="iconSize"
+          />
+          <component
+            :is="option.icon"
+            v-else
+            :class="iconComponentClass"
+          />
+        </div>
+
+        <div class="min-w-0 flex-1">
+          <div :class="contentRowClass">
+            <div class="min-w-0">
+              <div class="truncate text-sm font-semibold">
+                {{ option.label }}
+              </div>
+              <div
+                v-if="option.description"
+                :class="descriptionClass"
+              >
+                {{ option.description }}
+              </div>
+            </div>
+            <span
+              :class="checkClass(option)"
+            >
+              ✓
+            </span>
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import kIcon from "./kIcon.vue";
+
+export default {
+  name: "kOptionGroup",
+  components: {
+    kIcon,
+  },
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => [],
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    selection: {
+      type: String,
+      default: "multiple",
+      validator: (value) => ["single", "multiple"].includes(value),
+    },
+    variant: {
+      type: String,
+      default: "table",
+      validator: (value) => ["table", "card"].includes(value),
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    valueKey: {
+      type: String,
+      default: "value",
+    },
+    labelKey: {
+      type: String,
+      default: "label",
+    },
+    descriptionKey: {
+      type: String,
+      default: "description",
+    },
+    iconKey: {
+      type: String,
+      default: "icon",
+    },
+  },
+  emits: ["update:modelValue", "change"],
+  computed: {
+    isMultiple() {
+      return this.selection === "multiple";
+    },
+    isTableVariant() {
+      return this.variant === "table";
+    },
+    normalizedSelection() {
+      return Array.isArray(this.modelValue) ? this.modelValue : [];
+    },
+    normalizedOptions() {
+      return this.options.map((option) => ({
+        raw: option,
+        value: option?.[this.valueKey],
+        label: option?.[this.labelKey] ?? "",
+        description: option?.[this.descriptionKey] ?? "",
+        icon: option?.[this.iconKey] ?? null,
+      }));
+    },
+    containerClass() {
+      return this.isTableVariant
+        ? "overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"
+        : "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3";
+    },
+    titleClass() {
+      return this.isTableVariant
+        ? "mb-2 text-xs font-semibold uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400"
+        : "mb-3 text-sm font-semibold text-slate-800 dark:text-slate-100";
+    },
+    contentRowClass() {
+      return this.isTableVariant ? "flex items-center justify-between gap-3" : "flex items-start justify-between gap-3";
+    },
+    descriptionClass() {
+      return this.isTableVariant
+        ? "mt-0.5 text-xs text-gray-500 dark:text-slate-400"
+        : "mt-1 text-xs text-gray-500 dark:text-slate-400";
+    },
+    iconSize() {
+      return this.isTableVariant ? 16 : 18;
+    },
+    iconComponentClass() {
+      return this.isTableVariant ? "h-4 w-4" : "h-[18px] w-[18px]";
+    },
+  },
+  methods: {
+    isSelected(option) {
+      return this.normalizedSelection.includes(option.value);
+    },
+    toggleOption(option) {
+      let nextSelection = [];
+
+      if (this.isMultiple) {
+        nextSelection = [...this.normalizedSelection];
+        const selectedIndex = nextSelection.indexOf(option.value);
+
+        if (selectedIndex === -1) nextSelection.push(option.value);
+        else nextSelection.splice(selectedIndex, 1);
+      } else {
+        nextSelection = this.isSelected(option) ? [] : [option.value];
+      }
+
+      this.$emit("update:modelValue", nextSelection);
+      this.$emit("change", nextSelection);
+    },
+    resolveKey(option, index) {
+      return `${String(option.value ?? option.label)}-${index}`;
+    },
+    buttonClass(option) {
+      if (this.isTableVariant) {
+        return this.isSelected(option)
+          ? "items-center gap-3 border-b border-slate-200 bg-primary/10 px-3 py-3 text-primary last:border-b-0 dark:border-slate-700 dark:bg-primary/15 dark:text-slate-100"
+          : "items-center gap-3 border-b border-slate-200 bg-white px-3 py-3 text-gray-700 hover:bg-slate-50 last:border-b-0 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800";
+      }
+
+      return this.isSelected(option)
+        ? "items-start gap-3 rounded-xl border border-primary bg-primary/10 p-3 text-primary dark:border-primary dark:bg-primary/15 dark:text-slate-100"
+        : "items-start gap-3 rounded-xl border border-gray-200 bg-white p-3 text-gray-700 hover:border-primary/40 hover:bg-primary/5 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-primary/50 dark:hover:bg-primary/10";
+    },
+    iconWrapperClass(option) {
+      if (this.isTableVariant) {
+        return this.isSelected(option)
+          ? "flex h-8 w-8 items-center justify-center rounded-md bg-primary/15 text-primary"
+          : "flex h-8 w-8 items-center justify-center rounded-md bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300";
+      }
+
+      return "flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary";
+    },
+    checkClass(option) {
+      if (this.isTableVariant) {
+        return this.isSelected(option)
+          ? "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-[11px] font-semibold text-white"
+          : "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-slate-300 text-[11px] font-semibold text-transparent dark:border-slate-600";
+      }
+
+      return this.isSelected(option)
+        ? "mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-primary bg-primary text-[11px] font-semibold text-white"
+        : "mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-gray-300 text-[11px] font-semibold text-transparent dark:border-slate-600";
+    },
+  },
+};
+</script>