ketekny-ui-kit 1.0.115 → 1.0.116

package/package.json

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

package/src/ui/kMenu.vue

@@ -53,6 +53,13 @@
                   @click="handleLinkClick(link, $event)">
                   <kIcon v-if="link.icon" :name="link.icon" :size="16" class="shrink-0 self-center" :class="iconClass(link)" />
                   <span class="leading-none">{{ link.label }}</span>
+                  <kIcon
+                    v-if="link.checked"
+                    name="Check"
+                    :size="16"
+                    class="ml-auto shrink-0"
+                    :class="checkedIconClass(link)"
+                  />
                 </component>
               </li>
             </ul>
@@ -135,6 +142,10 @@ export default {
       if (link?.tone === "danger") return "text-orange-500 dark:text-orange-300";
       return "text-primary/80";
     },
+    checkedIconClass(link) {
+      if (link?.tone === "danger") return "text-orange-500 dark:text-orange-300";
+      return "text-primary dark:text-primary";
+    },
     handleLinkClick(link, event) {
       if (link?.disabled) {
         event.preventDefault();

package/src/ui/kToolbar.vue

@@ -37,24 +37,48 @@
       </button>
 
       <div v-if="actions.length && !isCompact" class="flex flex-wrap items-center justify-end gap-2 ml-auto shrink-0">
-        <kButton
-          v-for="(action, index) in actions"
-          :key="`${action.label || 'action'}-${index}`"
-          :label="action.label"
-          :icon="action.icon"
-          :loading="!!action.loading"
-          :disabled="disabled || !!action.disabled"
-          :aria-label="action.ariaLabel || action.label"
-          :tooltip="action.tooltip"
-          :size="resolveActionButtonSize(action)"
-          :small="action.small === true"
-          :icon-only="!!action.iconOnly"
-          :variant="action.variant || 'outlined'"
-          :secondary="!!action.secondary"
-          :success="!!action.success"
-          :warning="!!action.warning"
-          :danger="!!action.danger"
-          @click="handleActionClick(action)" />
+        <template v-for="(action, index) in actions" :key="`${action.label || 'action'}-${index}`">
+          <kMenu
+            v-if="isActionGroup(action)"
+            :links="resolveActionGroupLinks(action)"
+            :aria-label="action.ariaLabel || action.label || 'Action group'"
+          >
+            <template #trigger>
+              <button
+                type="button"
+                :disabled="disabled || !!action.disabled"
+                :aria-label="action.ariaLabel || action.label"
+                :class="resolveActionGroupTriggerClass(action)"
+              >
+                <kIcon
+                  v-if="action.icon"
+                  :name="action.icon"
+                  :size="resolveActionGroupIconSize(action)"
+                  class="shrink-0"
+                />
+                <span v-if="!action.iconOnly" class="truncate">{{ action.label }}</span>
+                <kIcon v-if="!action.iconOnly" name="ChevronDown" :size="16" class="shrink-0 opacity-80" />
+              </button>
+            </template>
+          </kMenu>
+          <kButton
+            v-else
+            :label="action.label"
+            :icon="action.icon"
+            :loading="!!action.loading"
+            :disabled="disabled || !!action.disabled"
+            :aria-label="action.ariaLabel || action.label"
+            :tooltip="action.tooltip"
+            :size="resolveActionButtonSize(action)"
+            :small="action.small === true"
+            :icon-only="!!action.iconOnly"
+            :variant="action.variant || 'outlined'"
+            :secondary="!!action.secondary"
+            :success="!!action.success"
+            :warning="!!action.warning"
+            :danger="!!action.danger"
+            @click="handleActionClick(action)" />
+        </template>
       </div>
     </div>
 
@@ -79,20 +103,42 @@
         </div>
 
         <div class="flex flex-col overflow-y-auto max-h-[60vh]">
-          <button
-            v-for="(action, index) in actions"
-            :key="`mobile-${action.label || 'action'}-${index}`"
-            type="button"
-            :disabled="disabled || !!action.disabled || !!action.loading"
-            :class="[
-              'flex items-center w-full gap-3 px-2 py-3 text-left rounded-lg min-h-11',
-              disabled || action.disabled || action.loading ? 'opacity-50 cursor-not-allowed' : 'hover:bg-primary/10 active:bg-primary/15',
-            ]"
-            @click="handleMobileAction(action)">
-            <kIcon v-if="action.icon" :name="action.icon" :size="18" class="shrink-0 text-slate-600 dark:text-slate-400" />
-            <span class="text-sm font-medium text-slate-900 dark:text-slate-200">{{ action.label }}</span>
-            <span v-if="action.loading" class="w-4 h-4 ml-auto border-2 rounded-full border-slate-300 border-t-transparent animate-spin dark:border-slate-600"></span>
-          </button>
+          <template v-for="(action, index) in actions" :key="`mobile-${action.label || 'action'}-${index}`">
+            <kMenu
+              v-if="isActionGroup(action)"
+              class="w-full"
+              :links="resolveActionGroupLinks(action)"
+              :aria-label="action.ariaLabel || action.label || 'Action group'"
+            >
+              <template #trigger>
+                <button
+                  type="button"
+                  :disabled="disabled || !!action.disabled"
+                  :class="[
+                    'flex items-center w-full gap-3 px-2 py-3 text-left rounded-lg min-h-11',
+                    disabled || action.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-primary/10 active:bg-primary/15',
+                  ]"
+                >
+                  <kIcon v-if="action.icon" :name="action.icon" :size="18" class="shrink-0 text-slate-600 dark:text-slate-400" />
+                  <span class="text-sm font-medium text-slate-900 dark:text-slate-200">{{ action.label }}</span>
+                  <kIcon name="ChevronDown" :size="16" class="ml-auto shrink-0 text-slate-500 dark:text-slate-400" />
+                </button>
+              </template>
+            </kMenu>
+            <button
+              v-else
+              type="button"
+              :disabled="disabled || !!action.disabled || !!action.loading"
+              :class="[
+                'flex items-center w-full gap-3 px-2 py-3 text-left rounded-lg min-h-11',
+                disabled || action.disabled || action.loading ? 'opacity-50 cursor-not-allowed' : 'hover:bg-primary/10 active:bg-primary/15',
+              ]"
+              @click="handleMobileAction(action)">
+              <kIcon v-if="action.icon" :name="action.icon" :size="18" class="shrink-0 text-slate-600 dark:text-slate-400" />
+              <span class="text-sm font-medium text-slate-900 dark:text-slate-200">{{ action.label }}</span>
+              <span v-if="action.loading" class="w-4 h-4 ml-auto border-2 rounded-full border-slate-300 border-t-transparent animate-spin dark:border-slate-600"></span>
+            </button>
+          </template>
         </div>
       </section>
     </div>
@@ -103,6 +149,13 @@
 import { ref, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
 import kButton from "./kButton.vue";
 import kIcon from "./kIcon.vue";
+import kMenu from "./kMenu.vue";
+import {
+  K_BUTTON_BASE,
+  K_BUTTON_FOCUS_RING,
+  K_BUTTON_SIZE_STYLES,
+  K_BUTTON_VARIANT_STYLES,
+} from "./themes/kButton.theme";
 
 const props = defineProps({
   title: {
@@ -140,6 +193,18 @@ const isCompact = ref(false);
 let resizeObserver = null;
 
 const VALID_BUTTON_SIZES = ["small", "normal", "large"];
+const ACTION_GROUP_KEYS = ["items", "children", "links"];
+
+const isActionGroup = (action) =>
+  ACTION_GROUP_KEYS.some((key) => Array.isArray(action?.[key]) && action[key].length > 0);
+
+const resolveActionGroupLinks = (action) => {
+  const items = ACTION_GROUP_KEYS.map((key) => action?.[key]).find((value) => Array.isArray(value)) || [];
+  return items.map((item) => ({
+    ...item,
+    action: item?.action || item?.onClick,
+  }));
+};
 
 const handleActionClick = (action) => {
   if (typeof action?.onClick === "function") action.onClick();
@@ -157,6 +222,52 @@ const resolveActionButtonSize = (action) => {
   return "normal";
 };
 
+const resolveActionGroupIntent = (action) => {
+  if (action?.danger) return "danger";
+  if (action?.success) return "success";
+  if (action?.warning) return "warning";
+  if (action?.secondary) return "secondary";
+  return "primary";
+};
+
+const resolveActionGroupVariant = (action) => {
+  if (action?.outlined) return "outlined";
+  if (action?.secondary && !action?.variant) return "soft";
+  return action?.variant || "outlined";
+};
+
+const resolveActionGroupSizeKey = (action) => {
+  const size = resolveActionButtonSize(action);
+  return K_BUTTON_SIZE_STYLES[size] ? size : "normal";
+};
+
+const resolveActionGroupTriggerClass = (action) => {
+  const intent = resolveActionGroupIntent(action);
+  const variant = resolveActionGroupVariant(action);
+  const sizeSet = K_BUTTON_SIZE_STYLES[resolveActionGroupSizeKey(action)];
+  const intentSet = K_BUTTON_VARIANT_STYLES[intent] || K_BUTTON_VARIANT_STYLES.primary;
+  const styleSet = intentSet[variant] || intentSet.outlined;
+  const variantClass = (action?.disabled || props.disabled) ? styleSet.disabled : styleSet.enabled;
+  const sizeClass = action?.iconOnly ? sizeSet.iconOnly : sizeSet.regular;
+
+  return [
+    K_BUTTON_BASE,
+    K_BUTTON_FOCUS_RING,
+    variantClass,
+    sizeClass,
+    "gap-2",
+    action?.fullWidth ? "w-full justify-center" : action?.iconOnly ? "" : "w-max shrink-0",
+  ];
+};
+
+const resolveActionGroupIconSize = (action) => {
+  const sizeSet = K_BUTTON_SIZE_STYLES[resolveActionGroupSizeKey(action)];
+  const iconClass = sizeSet?.icon || "h-4 w-4";
+  const match = /(?:^|\s)(?:size-|h-)(\d+(?:\.\d+)?)/.exec(iconClass);
+  if (!match) return 16;
+  return Number(match[1]) * 4;
+};
+
 const updateCompactMode = () => {
   if (!toolbarRef.value) return;
   isCompact.value = toolbarRef.value.clientWidth < 768;