@nexxtmove/ui 1.2.2 → 1.2.3

package/dist/nuxt.js

@@ -47599,6 +47599,7 @@ var Xw, Zw, Qw, $w, eT, tT = f((() => {
 	NexxtSidebarMenuItem: "components/SidebarMenuItem/SidebarMenuItem.vue",
 	NexxtSkeleton: "components/Skeleton/Skeleton.vue",
 	NexxtSkeletonPropertyCard: "components/SkeletonPropertyCard/SkeletonPropertyCard.vue",
+	NexxtSlider: "components/Slider/Slider.vue",
 	NexxtSocialIcons: "components/SocialIcons/SocialIcons.vue",
 	NexxtSocialMediaCustomTemplate: "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue",
 	NexxtSocialMediaTemplate: "components/SocialMediaTemplate/SocialMediaTemplate.vue",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/Slider/Slider.vue

@@ -0,0 +1,146 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui'
+
+type SliderColor = 'blue' | 'green'
+type SliderSize = 'sm' | 'md' | 'lg'
+type SliderVariant = 'filled' | 'plain'
+
+interface NexxtSliderProps {
+  label?: string
+  min?: number
+  max?: number
+  step?: number
+  color?: SliderColor
+  size?: SliderSize
+  variant?: SliderVariant
+  showValue?: boolean
+  valueSuffix?: string
+  minStepsBetweenThumbs?: number
+  disabled?: boolean
+}
+
+defineOptions({
+  name: 'NexxtSlider',
+  inheritAttrs: false,
+})
+
+const {
+  label,
+  min = 0,
+  max = 100,
+  step = 1,
+  color = 'blue',
+  size = 'md',
+  variant = 'filled',
+  showValue = false,
+  valueSuffix = '',
+  minStepsBetweenThumbs = 0,
+  disabled = false,
+} = defineProps<NexxtSliderProps>()
+
+/**
+ * One entry per thumb: `[40]` is a plain slider, `[200, 800]` a range. The array is what drives the
+ * thumb count, so a range needs no prop of its own.
+ */
+const model = defineModel<number[]>({ default: () => [0] })
+
+const rangeColorClasses: Record<SliderColor, string> = {
+  blue: 'bg-cornflower-blue-500',
+  green: 'bg-green-400',
+}
+
+/** Only `plain` colours the thumb — `filled` leaves it white against the coloured track */
+const thumbColorClasses: Record<SliderColor, string> = {
+  blue: 'border-cornflower-blue-500 bg-cornflower-blue-500',
+  green: 'border-green-400 bg-green-400',
+}
+
+const thumbFocusClasses: Record<SliderColor, string> = {
+  blue: 'focus-visible:outline-cornflower-blue-500',
+  green: 'focus-visible:outline-green-400',
+}
+
+const trackClasses: Record<SliderSize, string> = {
+  sm: 'h-0.5',
+  md: 'h-1',
+  lg: 'h-1.5',
+}
+
+/**
+ * reka-ui preventDefaults the pointerdown and focuses the thumb from script, so the browser cannot
+ * tell a click from a keypress and `:focus-visible` matches on both. Tracking the modality here
+ * keeps the ring on keyboard users only. Focus leaving the slider resets it, so tabbing back in
+ * still rings.
+ */
+const usingPointer = ref(false)
+
+const onFocusOut = (event: FocusEvent) => {
+  const next = event.relatedTarget as Node | null
+  if (!next || !(event.currentTarget as HTMLElement).contains(next)) usingPointer.value = false
+}
+
+const displayValue = computed(() =>
+  model.value.map((value) => `${value}${valueSuffix}`).join(' – '),
+)
+</script>
+
+<template>
+  <div class="flex w-full flex-col gap-2">
+    <label v-if="label" class="small-normal text-gray-700">
+      {{ label }}
+    </label>
+
+    <div class="flex items-center gap-4">
+      <SliderRoot
+        v-bind="$attrs"
+        v-model="model"
+        :min="min"
+        :max="max"
+        :step="step"
+        :min-steps-between-thumbs="minStepsBetweenThumbs"
+        :disabled="disabled"
+        @pointerdown="usingPointer = true"
+        @keydown="usingPointer = false"
+        @focusout="onFocusOut"
+        :class="[
+          'relative flex w-full touch-none items-center select-none',
+          disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
+        ]"
+      >
+        <SliderTrack :class="['relative w-full grow rounded-full bg-gray-200', trackClasses[size]]">
+          <SliderRange
+            :class="[
+              'absolute h-full rounded-full',
+              variant === 'filled' ? rangeColorClasses[color] : 'bg-transparent',
+            ]"
+          />
+        </SliderTrack>
+
+        <SliderThumb
+          v-for="(_, index) in model"
+          :key="index"
+          :aria-label="label"
+          :class="[
+            'block size-4 rounded-full border shadow-sm transition-colors',
+            variant === 'filled' ? 'border-gray-200 bg-white' : thumbColorClasses[color],
+            usingPointer
+              ? 'focus-visible:outline-none'
+              : [
+                  'focus-visible:outline-2 focus-visible:outline-offset-2',
+                  thumbFocusClasses[color],
+                ],
+          ]"
+        />
+      </SliderRoot>
+
+      <span
+        v-if="showValue"
+        class="shrink-0 text-right small-normal whitespace-nowrap text-gray-500"
+        :class="model.length > 1 ? 'min-w-24' : 'min-w-12'"
+      >
+        {{ displayValue }}
+      </span>
+    </div>
+  </div>
+</template>

package/src/components.json

@@ -34,6 +34,7 @@
   "NexxtSidebarMenuItem": "components/SidebarMenuItem/SidebarMenuItem.vue",
   "NexxtSkeleton": "components/Skeleton/Skeleton.vue",
   "NexxtSkeletonPropertyCard": "components/SkeletonPropertyCard/SkeletonPropertyCard.vue",
+  "NexxtSlider": "components/Slider/Slider.vue",
   "NexxtSocialIcons": "components/SocialIcons/SocialIcons.vue",
   "NexxtSocialMediaCustomTemplate": "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue",
   "NexxtSocialMediaTemplate": "components/SocialMediaTemplate/SocialMediaTemplate.vue",

package/src/index.ts

@@ -37,6 +37,7 @@ export { default as NexxtSelect } from './components/Select/Select.vue'
 export { default as NexxtSidebarMenuItem } from './components/SidebarMenuItem/SidebarMenuItem.vue'
 export { default as NexxtSkeleton } from './components/Skeleton/Skeleton.vue'
 export { default as NexxtSkeletonPropertyCard } from './components/SkeletonPropertyCard/SkeletonPropertyCard.vue'
+export { default as NexxtSlider } from './components/Slider/Slider.vue'
 export { default as NexxtSocialIcons } from './components/SocialIcons/SocialIcons.vue'
 export { default as NexxtSocialMediaCustomTemplate } from './components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue'
 export { default as NexxtSocialMediaTemplate } from './components/SocialMediaTemplate/SocialMediaTemplate.vue'