ketekny-ui-kit 1.0.99 → 1.0.101

package/package.json

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

package/src/ui/kOptionGroup.vue

@@ -18,7 +18,7 @@
         <div
           v-if="option.icon"
           class="shrink-0"
-          :class="iconWrapperClass(option)"
+          :class="[iconWrapperClass(option), { [intentStyles(option).text]: isColored(option) }]"
         >
           <kIcon
             v-if="typeof option.icon === 'string'"
@@ -35,7 +35,10 @@
         <div class="min-w-0 flex-1">
           <div :class="contentRowClass">
             <div class="min-w-0">
-              <div class="truncate text-sm font-semibold">
+              <div
+                class="truncate text-sm font-semibold"
+                :class="{ [intentStyles(option).text]: isColored(option) }"
+              >
                 {{ option.label }}
               </div>
               <div
@@ -45,11 +48,28 @@
                 {{ option.description }}
               </div>
             </div>
-            <span
-              :class="checkClass(option)"
-            >
-              ✓
-            </span>
+            <div class="flex shrink-0 items-center gap-2">
+              <span
+                v-if="option.badge !== null && option.badge !== ''"
+                :class="badgeClass(option)"
+              >
+                {{ option.badge }}
+              </span>
+              <span
+                v-if="showIndicator()"
+                :class="indicatorClass(option)"
+              >
+                <span
+                  v-if="indicator === 'radio'"
+                  v-show="isSelected(option)"
+                  class="h-2 w-2 rounded-full"
+                  :class="radioDotClass(option)"
+                />
+                <template v-else>
+                  ✓
+                </template>
+              </span>
+            </div>
           </div>
         </div>
       </button>
@@ -59,6 +79,7 @@
 
 <script>
 import kIcon from "./kIcon.vue";
+import { OPTION_INTENT_STYLES, OPTION_INTENTS } from "./themes/kOptionGroup.theme";
 
 export default {
   name: "kOptionGroup",
@@ -82,7 +103,25 @@ export default {
     variant: {
       type: String,
       default: "table",
-      validator: (value) => ["table", "card"].includes(value),
+      validator: (value) => ["table", "card", "list"].includes(value),
+    },
+    indicator: {
+      type: String,
+      default: "check",
+      validator: (value) => ["check", "checkbox", "radio", "none"].includes(value),
+    },
+    color: {
+      type: String,
+      default: "primary",
+      validator: (value) => OPTION_INTENTS.includes(value),
+    },
+    colorKey: {
+      type: String,
+      default: "color",
+    },
+    badgeKey: {
+      type: String,
+      default: "badge",
     },
     title: {
       type: String,
@@ -113,6 +152,9 @@ export default {
     isTableVariant() {
       return this.variant === "table";
     },
+    isListVariant() {
+      return this.variant === "list";
+    },
     normalizedSelection() {
       return Array.isArray(this.modelValue) ? this.modelValue : [];
     },
@@ -123,9 +165,13 @@ export default {
         label: option?.[this.labelKey] ?? "",
         description: option?.[this.descriptionKey] ?? "",
         icon: option?.[this.iconKey] ?? null,
+        color: option?.[this.colorKey] ?? null,
+        badge: option?.[this.badgeKey] ?? null,
       }));
     },
     containerClass() {
+      if (this.isListVariant) return "flex flex-col gap-2";
+
       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";
@@ -173,16 +219,59 @@ export default {
     resolveKey(option, index) {
       return `${String(option.value ?? option.label)}-${index}`;
     },
+    optionIntent(option) {
+      const key = option.color || this.color;
+      return OPTION_INTENT_STYLES[key] ? key : "primary";
+    },
+    intentStyles(option) {
+      return OPTION_INTENT_STYLES[this.optionIntent(option)];
+    },
+    isColored(option) {
+      return !!option.color;
+    },
+    isTinted(option) {
+      return !!option.color || this.color !== "primary";
+    },
     buttonClass(option) {
+      if (this.isListVariant) {
+        const selected = this.isSelected(option);
+        const colored = this.isColored(option);
+        const styles = this.intentStyles(option);
+        const pieces = ["items-center gap-3 rounded-lg border px-3 py-2.5 transition"];
+
+        if (selected) {
+          pieces.push(styles.selBg);
+          if (colored) pieces.push(`border-l-2 ${styles.accent}`);
+        } else if (colored) {
+          pieces.push(styles.text);
+          pieces.push(`border-l-2 ${styles.accent}`);
+          pieces.push("bg-white border-slate-200 hover:bg-slate-50 dark:bg-slate-900 dark:border-slate-700 dark:hover:bg-slate-800");
+        } else {
+          pieces.push("bg-white border-slate-200 text-gray-700 hover:bg-slate-50 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800");
+        }
+
+        return pieces.join(" ");
+      }
+
       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";
+        if (this.isSelected(option)) {
+          if (this.isTinted(option)) {
+            const styles = this.intentStyles(option);
+            return `items-center gap-3 border-b border-slate-200 px-3 py-3 last:border-b-0 dark:border-slate-700 ${styles.softBg} ${styles.text}`;
+          }
+          return "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";
+        }
+        return "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";
+      if (this.isSelected(option)) {
+        if (this.isTinted(option)) {
+          const styles = this.intentStyles(option);
+          return `items-start gap-3 rounded-xl border p-3 ${styles.selBg} ${styles.text}`;
+        }
+        return "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";
+      }
+      return "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) {
@@ -194,15 +283,52 @@ export default {
       return "flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary";
     },
     checkClass(option) {
+      const selected = this.isSelected(option);
+      const colored = this.isTinted(option);
+      const marker = this.intentStyles(option).marker;
+
       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";
+        if (selected) {
+          const fill = colored ? marker : "bg-primary";
+          return `inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full ${fill} text-[11px] font-semibold text-white`;
+        }
+        return "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";
+      }
+
+      if (selected) {
+        const fill = colored ? marker : "border-primary bg-primary";
+        return `mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border ${fill} text-[11px] font-semibold text-white`;
+      }
+      return "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";
+    },
+    showIndicator() {
+      return this.indicator !== "none";
+    },
+    indicatorClass(option) {
+      const selected = this.isSelected(option);
+      const marker = this.intentStyles(option).marker;
+
+      if (this.indicator === "checkbox") {
+        const base = "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border text-[11px] font-semibold";
+        return selected
+          ? `${base} ${marker} text-white`
+          : `${base} border-slate-300 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";
+      if (this.indicator === "radio") {
+        const base = "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border";
+        return selected
+          ? `${base} ${marker.split(" ")[1]}`
+          : `${base} border-slate-300 dark:border-slate-600`;
+      }
+
+      return this.checkClass(option);
+    },
+    radioDotClass(option) {
+      return this.intentStyles(option).marker.split(" ")[0];
+    },
+    badgeClass(option) {
+      return `text-sm font-semibold ${this.intentStyles(option).text}`;
     },
   },
 };

package/src/ui/themes/kOptionGroup.theme.js

@@ -0,0 +1,10 @@
+// intent -> pieces the row/marker/badge compose from
+export const OPTION_INTENT_STYLES = {
+  primary:   { text: "text-sky-700 dark:text-sky-300",         accent: "border-l-sky-500",     softBg: "bg-sky-100 dark:bg-sky-500/15",         selBg: "bg-sky-100 border-sky-300 dark:bg-sky-500/15 dark:border-sky-500/50",             marker: "bg-sky-600 border-sky-600" },
+  secondary: { text: "text-slate-700 dark:text-slate-200",     accent: "border-l-slate-500",   softBg: "bg-slate-100 dark:bg-slate-700/50",     selBg: "bg-slate-100 border-slate-300 dark:bg-slate-700/50 dark:border-slate-500",        marker: "bg-slate-700 border-slate-700" },
+  success:   { text: "text-emerald-700 dark:text-emerald-300", accent: "border-l-emerald-500", softBg: "bg-emerald-100 dark:bg-emerald-500/15", selBg: "bg-emerald-100 border-emerald-300 dark:bg-emerald-500/15 dark:border-emerald-500/50", marker: "bg-emerald-600 border-emerald-600" },
+  warning:   { text: "text-amber-700 dark:text-amber-300",     accent: "border-l-amber-500",   softBg: "bg-amber-100 dark:bg-amber-500/15",     selBg: "bg-amber-100 border-amber-300 dark:bg-amber-500/15 dark:border-amber-500/50",       marker: "bg-amber-600 border-amber-600" },
+  danger:    { text: "text-rose-700 dark:text-rose-300",       accent: "border-l-rose-500",    softBg: "bg-rose-100 dark:bg-rose-500/15",       selBg: "bg-rose-100 border-rose-300 dark:bg-rose-500/15 dark:border-rose-500/50",           marker: "bg-rose-600 border-rose-600" },
+};
+
+export const OPTION_INTENTS = Object.keys(OPTION_INTENT_STYLES);