TanStack · pont1s · Mar 1, 2024
diff --git a/docs/config.json b/docs/config.json
@@ -86,7 +86,39 @@
               "to": "framework/react/examples/update-on-drag"
             }
           ]
-        }    
+        }
+      ]
+    },
+    {
+      "framework": "vue",
+      "menuItems": [
+        {
+          "label": "Adapters",
+          "children": [
+            {
+              "label": "Vue Ranger",
+              "to": "framework/vue/vue-ranger"
+            }
+          ]
+        },
+        {
+          "label": "API Reference",
+          "children": [
+            {
+              "label": "Basic",
+              "to": "framework/vue/api/basic"
+            }
+          ]
+        },
+        {
+          "label": "Examples",
+          "children": [
+            {
+              "label": "Basic",
+              "to": "framework/vue/examples/basic"
+            }
+          ]
+        }
       ]
     }
   ]

diff --git a/docs/framework/vue/api/basic.md b/docs/framework/vue/api/basic.md
@@ -0,0 +1,68 @@
+---
+name: Basic
+route: /api/basic
+menu: API
+---
+
+## Examples
+Want to skip to the implementation? Check out these examples:
+
+- [basic](../../examples/vue/basic)
+
+The API below described how to use the **basic** features.
+
+## Options
+
+### values
+
+```tsx
+values: ReadonlyArray<number>
+```
+**Required** The current value (or values) for the range.
+
+### min
+
+```tsx
+min: number
+```
+**Required** The minimum limit for the range.
+
+### max
+
+```tsx
+max: number
+```
+**Required** The maximum limit for the range.
+
+### stepSize
+
+```ts
+stepSize: number
+```
+**Required** The distance between selectable steps.
+
+### onChange
+
+```ts
+onChange: (instance: Ranger<TTrackElement>) => void
+```
+A function that is called when the handle is released.
+
+## API
+
+### handles
+```tsx
+handles: ReadonlyArray<{value: number; isActive: boolean; onKeyDownHandler(event): function; onMouseDownHandler(event): function; onTouchStart(event): function}>
+```
+Handles to be rendered. Each `handle` has the following props:
+ - `value: number` - The current value for the handle.
+ - `isActive: boolean` - Denotes if the handle is currently being dragged.
+ - `onKeyDownHandler(event): func`
+ - `onMouseDownHandler(event): func`
+ - `onTouchStart(event): func`
+
+### activeHandleIndex
+```tsx
+activeHandleIndex: null | number
+```
+The zero-based index of the handle that is currently being dragged, or `null` if no handle is being dragged.
diff --git a/docs/framework/vue/vue-ranger.md b/docs/framework/vue/vue-ranger.md
@@ -0,0 +1,9 @@
+---
+title: Vue Ranger
+---
+
+You can install TanStack Ranger with any [NPM](https://npmjs.com) package manager.
+
+```sh
+npm install @tanstack/vue-ranger
+```
diff --git a/docs/installation.md b/docs/installation.md
@@ -8,6 +8,6 @@ Depending on your framework of choice, install one of the following packages:
 
 - [React](./adapters/react-ranger)
 - Solid (coming soon!)
-- Vue (coming soon!)
+- [Vue](./adapters/vue-ranger)
 - Svelte (coming soon!)
 - Angular (coming soon!)
diff --git a/examples/vue/basic/.gitignore b/examples/vue/basic/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vue/basic/README.md b/examples/vue/basic/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/vue/basic/index.html b/examples/vue/basic/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vue/basic/package.json b/examples/vue/basic/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "basic",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/vue-ranger": "0.0.4",
+    "vue": "^3.4.19"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "vite": "^5.1.4"
+  }
+}
diff --git a/examples/vue/basic/src/App.vue b/examples/vue/basic/src/App.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { Ranger, useRanger } from '@tanstack/vue-ranger'
+
+const rangerRefEl = ref<HTMLDivElement | null>(null)
+
+const values = ref([10, 15, 50,])
+
+const ranger = useRanger<HTMLDivElement>(computed(() => ({
+  min: 0,
+  max: 100,
+  values: values.value,
+  stepSize: 5,
+
+  onChange: (instance: Ranger<HTMLDivElement>) => {
+    values.value = instance.sortedValues
+  },
+  getRangerElement: () => rangerRefEl.value,
+})))
+</script>
+
+<template>
+  <div class="App" :style="{ padding: '10px' }">
+    <h1>Basic Range</h1>
+    <span>Active Index: {{ ranger.activeHandleIndex }}</span>
+    <br />
+    <br />
+    <div>
+      <div
+        ref="rangerRefEl"
+        :style="{
+          position: 'relative',
+          userSelect: 'none',
+          height: '4px',
+          background: '#ddd',
+          boxShadow: 'inset 0 1px 2px rgba(0,0,0,.6)',
+          borderRadius: '2px',
+        }"
+      >
+        <button
+          v-for="({
+            value,
+            onKeyDownHandler,
+            onMouseDownHandler,
+            onTouchStart,
+            isActive,
+          }, i) in ranger.handles()"
+          :key="i"
+          role="slider"
+          :aria-valuemin="ranger.options.min"
+          :aria-valuemax="ranger.options.max"
+          :aria-valuenow="value"
+          :style="{
+            position: 'absolute',
+            top: '50%',
+            left: `${ranger.getPercentageForValue(value)}%`,
+            zIndex: isActive ? '1' : '0',
+            transform: 'translate(-50%, -50%)',
+            width: '14px',
+            height: '14px',
+            outline: 'none',
+            borderRadius: '100%',
+            background: 'linear-gradient(to bottom, #eee 45%, #ddd 55%)',
+            border: 'solid 1px #888',
+          }"
+          @keydown="onKeyDownHandler"
+          @mousedown="onMouseDownHandler"
+          @touchstart="onTouchStart"
+        />
+      </div>
+    </div>
+    <br />
+    <br />
+    <br />
+    <pre
+      :style="{
+        display: 'inline-block',
+        textAlign: 'left',
+      }"
+    >
+    <code>
+      {{ JSON.stringify({ values }) }}
+    </code>
+    </pre>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/examples/vue/basic/src/main.ts b/examples/vue/basic/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/examples/vue/basic/tsconfig.dev.json b/examples/vue/basic/tsconfig.dev.json
@@ -0,0 +1,12 @@
+{
+  "composite": true,
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./build/types"
+  },
+  "files": ["src/main.tsx"],
+  "include": [
+    "src"
+    // "__tests__/**/*.test.*"
+  ]
+}
diff --git a/examples/vue/basic/tsconfig.json b/examples/vue/basic/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "react"
+  }
+}
diff --git a/examples/vue/basic/vite.config.js b/examples/vue/basic/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
   "pnpm": {
     "overrides": {
       "@tanstack/ranger": "workspace:*",
+      "@tanstack/vue-ranger": "workspace:*",
       "@tanstack/react-ranger": "workspace:*"
     }
   },
@@ -69,7 +70,7 @@
     "svelte": "^3.55.0",
     "ts-node": "^10.7.0",
     "typescript": "^4.9.4",
-    "vue": "^3.2.33"
+    "vue": "^3.3.4"
   },
   "dependencies": {
     "@rollup/plugin-commonjs": "^23.0.4",

diff --git a/packages/vue-ranger/README.md b/packages/vue-ranger/README.md
@@ -0,0 +1,38 @@
+![React Ranger Header](https://github.com/tanstack/ranger/raw/main/media/headerv1.png)
+
+Headless UI for building ranger component in TS/JS and React
+
+<a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
+  <img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack" />
+</a><a href="https://github.com/TanStack/ranger/actions/workflows/ci.yml">
+<img src="https://github.com/tanstack/ranger/actions/workflows/ci.yml/badge.svg" />
+</a><a href="https://npmjs.com/package/@tanstack/ranger-core" target="\_parent">
+  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/ranger-core.svg" />
+</a><a href="https://bundlephobia.com/result?p=@tanstack/ranger@latest" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/ranger@latest" />
+</a><a href="#badge">
+    <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+  </a><a href="https://github.com/tanstack/ranger/discussions">
+  <img alt="Join the discussion on Github" src="https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue" />
+</a><a href="https://github.com/tanstack/ranger" target="\_parent">
+  <img alt="" src="https://img.shields.io/github/stars/tanstack/ranger.svg?style=social&label=Star" />
+</a><a href="https://twitter.com/tannerlinsley" target="\_parent">
+  <img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" />
+</a>
+
+<br />
+<br />
+
+Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [React Query](https://github.com/TanStack/react-query), [TanStack Table](https://github.com/TanStack/table), [React Charts](https://github.com/TanStack/react-charts)
+
+## Visit [tanstack.com/ranger](https://tanstack.com/ranger) for docs, guides, API and more!
+
+## Quick Features
+
+- Headless!
+- Single or Multiple Handles
+- Handle Devider Items
+- Custom Steps or Step-Size
+- Custom Ticks
+
+<!-- Force  -->
diff --git a/packages/vue-ranger/__tests__/core/core.test.tsx b/packages/vue-ranger/__tests__/core/core.test.tsx
@@ -0,0 +1,7 @@
+import { describe, test, it, expect } from 'vitest'
+
+describe('Vue Ranger', () => {
+  it('has no tests', () => {
+    expect('yup').toEqual('yup')
+  })
+})
diff --git a/packages/vue-ranger/__tests__/jest.setup.js b/packages/vue-ranger/__tests__/jest.setup.js
@@ -0,0 +1,2 @@
+// import { act } from '@testing-library/react'
+import '@testing-library/jest-dom'