ketekny-ui-kit 1.0.137 → 1.0.139

package/README.md

@@ -42,6 +42,7 @@ import "ketekny-ui-kit/styles.css";
 import {
   kButton,
   kInput,
+  kRange,
   kSelect,
   kDateSelector,
   kToggle,
@@ -58,6 +59,7 @@ const app = createApp(App);
 
 app.component("kButton", kButton);
 app.component("kInput", kInput);
+app.component("kRange", kRange);
 app.component("kSelect", kSelect);
 app.component("kDateSelector", kDateSelector);
 app.component("kToggle", kToggle);
@@ -194,6 +196,49 @@ module.exports = {
 
 Note: exact option keys may vary by component/plugin implementation version.
 
+## Integer Range
+
+`kRange` is a dual-handle slider that selects two integers. Its `v-model` is a
+two-item array in `[from, to]` order.
+
+```vue
+<template>
+  <kRange
+    v-model="range"
+    label="Allowed age"
+    :min="18"
+    :max="80"
+    :step="1"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { kRange } from "ketekny-ui-kit";
+
+const range = ref([25, 65]);
+</script>
+```
+
+The configured minimum and maximum appear at the slider ends. Selected values
+appear below their handles.
+
+Props:
+
+- `modelValue` (`Number[]`, default `[0, 100]`): selected `[from, to]` integers.
+- `min` (`Number`, default `0`): minimum selectable value.
+- `max` (`Number`, default `100`): maximum selectable value.
+- `step` (`Number`, default `1`): positive integer increment.
+- `label`, `info`, `error`, `id`: standard field metadata.
+- `disabled`: disables the slider.
+- `showStops`: shows every step along the slider.
+- `showTooltip`: shows handle tooltips while dragging.
+
+Events:
+
+- `update:modelValue`: emitted while either handle moves.
+- `change`: emitted when the selected range changes.
+
 ## Exports
 
 Components:
@@ -201,7 +246,7 @@ Components:
 - `kMessage`, `kCode`, `kToolbar`, `kTable`, `kTabs`, `kChip`
 - `kSpinner`, `kDatatable`, `kIcon`, `kMenu`, `kSkeleton`
 - `kProgressBar`, `kPagination`, `kTree`, `kButton`, `kSelect`, `kUploader`
-- `kToggle`, `kCheckbox`, `kInput`, `kDateSelector`, `kEditor`
+- `kToggle`, `kCheckbox`, `kInput`, `kRange`, `kDateSelector`, `kEditor`
 - `kSelectButton`, `kTags`, `kSearch`, `kArrayList`, `kList`, `kTextArea`
 - `kDialog`, `kDrawer`
 - `kAppHeader`, `kAppFooter`, `kAppMain`, `kHero`

package/index.js

@@ -9,6 +9,7 @@ import kCode from './src/ui/kCode.vue'
 import kDialog from './src/ui/kDialog.vue'
 import kDrawer from './src/ui/kDrawer.vue'
 import kInput from './src/ui/kInput.vue'
+import kRange from './src/ui/kRange.vue'
 import kDateSelector from './src/ui/kDateSelector.vue'
 import kToolbar from './src/ui/kToolbar.vue'
 import kTooltip from './src/ui/kTooltip.vue'
@@ -63,7 +64,7 @@ export {
   kMessage, kCode, kToolbar, kTooltip, kTable, kTabs, kCard, kChip, kClipboard, 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, kOptionGroup,
+  kButton, kCheckbox, kSelect, kUploader, kToggle, kInput, kRange, 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.137",
+  "version": "1.0.139",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [

package/src/ui/kRange.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="w-full text-primary/90">
+    <label v-if="label != null" :for="rangeId" class="inputLabel" :class="labelClass">
+      {{ label }}
+    </label>
+
+    <div class="flex items-start gap-4">
+      <span class="min-w-8 pt-2 text-right text-sm tabular-nums">{{ min }}</span>
+      <div class="relative min-w-0 flex-1 pb-7">
+        <el-slider
+          :id="rangeId"
+          :model-value="rangeValue"
+          :min="min"
+          :max="max"
+          :step="step"
+          :disabled="disabled"
+          :show-stops="showStops"
+          :show-tooltip="showTooltip"
+          range
+          @update:model-value="updateValue"
+          @change="$emit('change', $event)"
+        />
+        <span
+          v-for="marker in selectedMarkers"
+          :key="marker.key"
+          class="absolute top-8 text-sm tabular-nums"
+          :class="marker.alignment"
+          :style="{ left: `${marker.position}%` }"
+        >
+          {{ marker.label }}
+        </span>
+      </div>
+      <span class="min-w-8 pt-2 text-sm tabular-nums">{{ max }}</span>
+    </div>
+
+    <div :id="errorId" :class="theme.errorText" v-if="hasError && error !== true && error !== ''">
+      {{ error }}
+    </div>
+    <div :id="infoId" :class="theme.infoText" v-else-if="info != null">
+      {{ info }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { ElSlider } from "element-plus";
+import { K_INPUT_THEME } from "./themes/kInput.theme";
+
+export default {
+  name: "kRange",
+  components: { ElSlider },
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => [0, 100],
+      validator: (value) => value.length === 2,
+    },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: {
+      type: Number,
+      default: 1,
+      validator: (value) => Number.isInteger(value) && value > 0,
+    },
+    label: { type: String, default: null },
+    info: { type: String, default: null },
+    error: { type: [String, Boolean], default: null },
+    disabled: { type: Boolean, default: false },
+    showStops: { type: Boolean, default: false },
+    showTooltip: { type: Boolean, default: true },
+    id: { type: String, default: null },
+  },
+  emits: ["update:modelValue", "change"],
+  data() {
+    return {
+      theme: K_INPUT_THEME,
+      generatedId: `range-${Math.random().toString(36).slice(2, 11)}`,
+    };
+  },
+  computed: {
+    rangeId() {
+      return this.id || this.generatedId;
+    },
+    errorId() {
+      return `${this.rangeId}-error`;
+    },
+    infoId() {
+      return `${this.rangeId}-info`;
+    },
+    rangeValue() {
+      const values = this.modelValue?.length === 2 ? this.modelValue : [this.min, this.max];
+      return values.map((value, index) => {
+        const fallback = index === 0 ? this.min : this.max;
+        const integer = Number.isFinite(Number(value)) ? Math.round(Number(value)) : fallback;
+        return Math.min(this.max, Math.max(this.min, integer));
+      });
+    },
+    selectedMarkers() {
+      if (this.rangeValue[0] === this.rangeValue[1]) {
+        return [this.createMarker(this.rangeValue[0], `${this.rangeValue[0]} – ${this.rangeValue[1]}`, "range")];
+      }
+      return [
+        this.createMarker(this.rangeValue[0], this.rangeValue[0], "from"),
+        this.createMarker(this.rangeValue[1], this.rangeValue[1], "to"),
+      ];
+    },
+    hasError() {
+      return this.error != null && this.error !== false;
+    },
+    labelClass() {
+      if (this.hasError) return this.theme.labelError;
+      if (this.disabled) return this.theme.labelDisabled;
+      return this.theme.label;
+    },
+  },
+  methods: {
+    createMarker(value, label, key) {
+      const span = this.max - this.min;
+      const position = span === 0 ? 0 : ((value - this.min) / span) * 100;
+      let alignment = "-translate-x-1/2";
+      if (position <= 0) alignment = "translate-x-0";
+      if (position >= 100) alignment = "-translate-x-full";
+      return { key, label, position, alignment };
+    },
+    updateValue(value) {
+      this.$emit("update:modelValue", value.map((item) => Math.round(item)));
+    },
+  },
+};
+</script>

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,32 @@
           :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 class="flex flex-wrap items-center gap-1 pr-10">
+            <span v-if="selectedOptions.length === 0" class="text-gray-400 dark:text-slate-500">
+              {{ placeholder }}
+            </span>
+            <kChip
+              v-for="option in selectedOptions"
+              :key="option[optionValue]"
+              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>
+          </div>
 
           <button
             v-if="clearable && isSelectionSet && !disabled"
@@ -113,10 +136,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,
@@ -177,15 +202,25 @@ 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 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 +254,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 [];