ketekny-ui-kit 1.0.138 → 1.0.140

package/package.json

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

package/src/ui/kSelect.vue

@@ -4,7 +4,7 @@
       {{ label }}
     </label>
 
-    <SelectRoot v-model="internalValue" v-model:open="open" :disabled="disabled">
+    <SelectRoot v-model="internalValue" v-model:open="open" :disabled="disabled" :multiple="multiple">
       <SelectTrigger as-child>
         <div
           :id="computedId"
@@ -13,9 +13,36 @@
           :aria-label="label || 'Select option'"
         >
           <SelectValue
+            v-if="!multiple"
             :placeholder="placeholder"
             class="block pr-10 truncate text-gray-700 data-[placeholder]:text-gray-400 dark:text-slate-100 dark:data-[placeholder]:text-slate-500"
           />
+          <div v-else ref="selectedContainer" class="flex items-center gap-0.5 pr-10 overflow-hidden whitespace-nowrap">
+            <span v-if="selectedOptions.length === 0" class="text-gray-400 dark:text-slate-500">
+              {{ placeholder }}
+            </span>
+            <kChip
+              v-for="option in visibleSelectedOptions"
+              :key="option[optionValue]"
+              class="shrink-0"
+              size="small"
+            >
+              <span>{{ option[optionLabel] }}</span>
+              <button
+                v-if="!disabled"
+                type="button"
+                class="ml-1 text-primary/70 transition-colors hover:text-primary"
+                :aria-label="`Remove ${option[optionLabel]}`"
+                @pointerdown.stop.prevent
+                @click.stop.prevent="removeSelection(option[optionValue])"
+              >
+                <X class="w-3 h-3" />
+              </button>
+            </kChip>
+            <span v-if="hiddenSelectedCount > 0" class="text-xs text-gray-500 shrink-0 dark:text-slate-400">
+              +{{ hiddenSelectedCount }}...
+            </span>
+          </div>
 
           <button
             v-if="clearable && isSelectionSet && !disabled"
@@ -89,6 +116,14 @@
       </SelectPortal>
     </SelectRoot>
 
+    <div ref="chipMeasureContainer" class="fixed invisible flex items-center gap-0.5 pointer-events-none" aria-hidden="true">
+      <kChip v-for="option in selectedOptions" :key="option[optionValue]" size="small">
+        <span>{{ option[optionLabel] }}</span>
+        <X class="w-3 h-3 ml-1" />
+      </kChip>
+      <span ref="overflowLabelMeasure" class="text-xs">+{{ selectedOptions.length }}...</span>
+    </div>
+
     <div class="mt-1 text-sm text-red-500 dark:text-rose-400" v-if="hasError && error !== true && error !== ''">
       {{ error }}
     </div>
@@ -100,7 +135,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import {
   SelectContent,
   SelectItem,
@@ -113,10 +148,12 @@ import {
   SelectViewport,
 } from "reka-ui";
 import { X, ChevronDown, Check, Search, SearchX } from "@lucide/vue";
+import kChip from "./kChip.vue";
 
 const props = defineProps({
   options: { type: Array, required: true },
-  modelValue: [String, Number],
+  modelValue: [String, Number, Array],
+  multiple: { type: Boolean, default: false },
   optionValue: { type: String, default: "value" },
   optionLabel: { type: String, default: "label" },
   label: String,
@@ -136,6 +173,11 @@ const open = ref(false);
 const searchQuery = ref("");
 const searchInput = ref(null);
 const viewportRef = ref(null);
+const selectedContainer = ref(null);
+const chipMeasureContainer = ref(null);
+const overflowLabelMeasure = ref(null);
+const visibleSelectedCount = ref(0);
+let selectedContainerObserver;
 const generatedId = `select-${Math.random().toString(36).substr(2, 9)}`;
 const defaultStyle = "w-full px-3 py-2 border rounded-lg transition shadow-sm focus-visible:outline-none text-gray-700 focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:border-primary bg-white placeholder-gray-400 dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500";
 const errorStyle = "border-red-500 focus-visible:ring focus-visible:ring-red-300 dark:border-rose-500 dark:focus-visible:ring-rose-500/20";
@@ -177,15 +219,59 @@ function normalizeDropdownHeight(value) {
 
 const computedId = computed(() => (props.id != null && props.id !== "" ? props.id : generatedId));
 const hasError = computed(() => props.error != null && props.error !== false);
-const isSelectionSet = computed(() => props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== "");
+const isSelectionSet = computed(() => {
+  if (props.multiple) return Array.isArray(props.modelValue) && props.modelValue.length > 0;
+  return props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== "";
+});
 const resolvedDropdownHeight = computed(() => normalizeDropdownHeight(props.dropdownHeight));
+const selectedOptions = computed(() => {
+  if (!props.multiple || !Array.isArray(props.modelValue)) return [];
+  return props.modelValue
+    .map((value) => props.options.find((option) => option?.[props.optionValue] === value))
+    .filter(Boolean);
+});
+const visibleSelectedOptions = computed(() => selectedOptions.value.slice(0, visibleSelectedCount.value));
+const hiddenSelectedCount = computed(() => selectedOptions.value.length - visibleSelectedOptions.value.length);
+
+function updateVisibleSelectedCount() {
+  if (!props.multiple || !selectedContainer.value || !chipMeasureContainer.value) return;
+
+  const chipElements = Array.from(chipMeasureContainer.value.children).slice(0, selectedOptions.value.length);
+  const availableWidth = selectedContainer.value.clientWidth;
+  const overflowLabelWidth = overflowLabelMeasure.value?.offsetWidth ?? 0;
+  const gap = 2;
+  let usedWidth = 0;
+  let count = 0;
+
+  for (const chip of chipElements) {
+    const nextWidth = usedWidth + (count > 0 ? gap : 0) + chip.offsetWidth;
+    const remainingAfterNext = selectedOptions.value.length - count - 1;
+    const reservedWidth = remainingAfterNext > 0 ? gap + overflowLabelWidth : 0;
+    if (nextWidth + reservedWidth > availableWidth) break;
+    usedWidth = nextWidth;
+    count += 1;
+  }
+
+  visibleSelectedCount.value = count;
+}
+
+onMounted(() => {
+  selectedContainerObserver = new ResizeObserver(updateVisibleSelectedCount);
+  if (selectedContainer.value) selectedContainerObserver.observe(selectedContainer.value);
+  nextTick(updateVisibleSelectedCount);
+});
+
+onBeforeUnmount(() => selectedContainerObserver?.disconnect());
+
+watch(selectedOptions, () => nextTick(updateVisibleSelectedCount), { deep: true });
 
 const internalValue = computed({
   get() {
+    if (props.multiple) return Array.isArray(props.modelValue) ? props.modelValue : [];
     return props.modelValue === null ? undefined : props.modelValue;
   },
   set(val) {
-    emit("update:modelValue", val ?? null);
+    emit("update:modelValue", props.multiple ? (Array.isArray(val) ? val : []) : (val ?? null));
   },
 });
 
@@ -219,10 +305,15 @@ watch(open, (val) => {
 });
 
 function clearSelection() {
-  emit("update:modelValue", null);
+  emit("update:modelValue", props.multiple ? [] : null);
   open.value = false;
 }
 
+function removeSelection(value) {
+  if (props.disabled || !Array.isArray(props.modelValue)) return;
+  emit("update:modelValue", props.modelValue.filter((selectedValue) => selectedValue !== value));
+}
+
 function getOptionNodes() {
   const el = viewportRef.value?.$el ?? viewportRef.value;
   if (!el) return [];