+
+
+
+
+
+ `
+ }
+}
diff --git a/examples/lit/basic/tsconfig.json b/examples/lit/basic/tsconfig.json
new file mode 100644
index 0000000..daebef6
--- /dev/null
+++ b/examples/lit/basic/tsconfig.json
@@ -0,0 +1,8 @@
+{
+ "compilerOptions": {
+ "strict": true,
+ "esModuleInterop": true,
+ "experimentalDecorators": true,
+ "useDefineForClassFields": false
+ }
+}
diff --git a/examples/lit/basic/vite.config.js b/examples/lit/basic/vite.config.js
new file mode 100644
index 0000000..da02301
--- /dev/null
+++ b/examples/lit/basic/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: []
+})
diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json
index e614138..fafd81b 100644
--- a/examples/react/basic/package.json
+++ b/examples/react/basic/package.json
@@ -8,7 +8,7 @@
"start": "vite"
},
"dependencies": {
- "@tanstack/react-ranger": "0.0.4",
+ "@tanstack/react-ranger": "workspace:*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
diff --git a/examples/react/custom-steps/package.json b/examples/react/custom-steps/package.json
index fbf2d69..d99f908 100644
--- a/examples/react/custom-steps/package.json
+++ b/examples/react/custom-steps/package.json
@@ -8,7 +8,7 @@
"start": "vite"
},
"dependencies": {
- "@tanstack/react-ranger": "0.0.4",
+ "@tanstack/react-ranger": "workspace:*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
diff --git a/examples/react/custom-styles/package.json b/examples/react/custom-styles/package.json
index e592fe3..6581aca 100644
--- a/examples/react/custom-styles/package.json
+++ b/examples/react/custom-styles/package.json
@@ -8,7 +8,7 @@
"start": "vite"
},
"dependencies": {
- "@tanstack/react-ranger": "0.0.4",
+ "@tanstack/react-ranger": "workspace:*",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "^5.3.6"
diff --git a/examples/react/logarithmic-interpolator/package.json b/examples/react/logarithmic-interpolator/package.json
index b20eaf0..fbadeed 100644
--- a/examples/react/logarithmic-interpolator/package.json
+++ b/examples/react/logarithmic-interpolator/package.json
@@ -8,7 +8,7 @@
"start": "vite"
},
"dependencies": {
- "@tanstack/react-ranger": "0.0.4",
+ "@tanstack/react-ranger": "workspace:*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
diff --git a/examples/react/update-on-drag/package.json b/examples/react/update-on-drag/package.json
index 32182f5..25e2723 100644
--- a/examples/react/update-on-drag/package.json
+++ b/examples/react/update-on-drag/package.json
@@ -8,7 +8,7 @@
"start": "vite"
},
"dependencies": {
- "@tanstack/react-ranger": "0.0.4",
+ "@tanstack/react-ranger": "workspace:*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
diff --git a/jest.config.ts b/jest.config.ts
deleted file mode 100644
index efd2b7a..0000000
--- a/jest.config.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-const path = require('path')
-const { lstatSync, readdirSync } = require('fs')
-
-// get listing of packages in the mono repo
-const basePath = path.resolve(__dirname, 'packages')
-
-const packages = readdirSync(basePath).filter((name) => {
- return lstatSync(path.join(basePath, name)).isDirectory()
-})
-
-const { namespace } = require('./package.json')
-
-const moduleNameMapper = {
- ...packages.reduce(
- (acc, name) => ({
- ...acc,
- [`${namespace}/${name}(.*)$`]: `Basic Range
+ Active Index: ${rangerInstance.activeHandleIndex} +
+ ${rangerInstance
+ .handles()
+ .map(
+ ({
+ value,
+ onTouchStart,
+ onMouseDownHandler,
+ onKeyDownHandler,
+ isActive,
+ }) => html` `,
+ )}
+
+ +
+
+
+
+ _values: ${JSON.stringify(this._values)}
+
+
+ 
+
+
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+
++
+ +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 + + diff --git a/packages/lit-ranger/__tests__/core/core.test.tsx b/packages/lit-ranger/__tests__/core/core.test.tsx new file mode 100644 index 0000000..4311158 --- /dev/null +++ b/packages/lit-ranger/__tests__/core/core.test.tsx @@ -0,0 +1,7 @@ +import { describe, test, it, expect } from 'vitest' + +describe('React Ranger', () => { + it('has no tests', () => { + expect('yup').toEqual('yup') + }) +}) diff --git a/packages/lit-ranger/package.json b/packages/lit-ranger/package.json new file mode 100644 index 0000000..feb5292 --- /dev/null +++ b/packages/lit-ranger/package.json @@ -0,0 +1,38 @@ +{ + "name": "@tanstack/lit-ranger", + "author": "Tanner Linsley", + "version": "0.0.0", + "description": "Hooks for building range and multi-range sliders in Lit", + "license": "MIT", + "homepage": "https://github.com/tanstack/ranger#readme", + "repository": { + "type": "git", + "url": "git+https://github.com/tanstack/ranger.git", + "directory": "packages/lit-ranger" + }, + "publishConfig": { + "registry": "https://registry.npmjs.org/" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "module": "build/esm/index.js", + "main": "build/cjs/index.js", + "browser": "build/umd/index.production.js", + "types": "build/types/index.d.ts", + "sideEffects": false, + "files": [ + "build/**", + "src" + ], + "devDependencies": { + "lit": "^3.1.3" + }, + "dependencies": { + "@tanstack/ranger": "workspace:*" + }, + "peerDependencies": { + "lit": "^3.0.0" + } +} diff --git a/packages/lit-ranger/src/index.ts b/packages/lit-ranger/src/index.ts new file mode 100644 index 0000000..78c01d8 --- /dev/null +++ b/packages/lit-ranger/src/index.ts @@ -0,0 +1,42 @@ +import { ReactiveController, ReactiveControllerHost } from 'lit' +import { Ranger, RangerConfig, RangerOptions } from '@tanstack/ranger' + +export * from '@tanstack/ranger' + +export class RangerController