Range input (viamrobotics#442)

ethanlookpotts · Dec 20, 2023 · 7fcb3e5 · 7fcb3e5
1 parent 653d0b8
commit 7fcb3e5
Show file tree

Hide file tree

Showing 14 changed files with 752 additions and 12 deletions.
diff --git a/packages/blocks/src/lib/navigation-map/components/input/lnglat.svelte b/packages/blocks/src/lib/navigation-map/components/input/lnglat.svelte
@@ -7,7 +7,7 @@ import { LngLat } from 'maplibre-gl';
 export let label: string | undefined = undefined;
 
 /** Whether the inputs are readonly. */
-export let readonly: boolean | undefined = undefined;
+export let readonly = false;
 
 /** The longitude value. */
 export let lng: number | undefined = undefined;

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -16,6 +16,7 @@ Install [Tailwind][]. In the `tailwind.config.js`, add the components to the con
 
 ```js
 import { theme } from '@viamrobotics/prime-core/theme';
+import { plugins } from '@viamrobotics/prime-core/plugins';
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -24,7 +25,7 @@ export default {
     './node_modules/@viamrobotics/prime-core/**/*.{ts,svelte}',
   ],
   theme,
-  plugins: [],
+  plugins,
 };
 ```
 

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -24,8 +24,9 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
     },
-    "./theme": "./theme.ts",
-    "./prime.css": "./prime.css"
+    "./prime.css": "./prime.css",
+    "./plugins": "./plugins.ts",
+    "./theme": "./theme.ts"
   },
   "files": [
     "dist",

diff --git a/packages/core/plugins.ts b/packages/core/plugins.ts
@@ -26,7 +26,7 @@ export const plugins = [
           },
         }),
       },
-      { values: theme('spacing') }
+      { values: theme('width') }
     );
 
     matchUtilities(
@@ -83,5 +83,239 @@ export const plugins = [
       },
       { values: theme('borderColor') }
     );
+
+    matchUtilities(
+      {
+        'slider-track': (value: string) => ({
+          '&::-webkit-slider-runnable-track': {
+            background: value,
+          },
+          '&::-moz-range-track': {
+            background: value,
+          },
+          '&::-ms-track': {
+            background: 'transparent',
+          },
+          '&::-ms-fill-lower': {
+            background: value,
+          },
+          '&::-ms-fill-upper': {
+            background: value,
+          },
+        }),
+      },
+      { values: theme('colors') }
+    );
+
+    matchUtilities(
+      {
+        'slider-track-w': (value: string) => ({
+          '&::-webkit-slider-runnable-track': {
+            width: value,
+          },
+          '&::-moz-range-track': {
+            width: value,
+          },
+          '&::-ms-track': {
+            width: value,
+          },
+        }),
+      },
+      { values: theme('width') }
+    );
+
+    matchUtilities(
+      {
+        'slider-track-h': (value: string) => ({
+          '&::-webkit-slider-runnable-track': {
+            height: value,
+          },
+          '&::-moz-range-track': {
+            height: value,
+          },
+          '&::-ms-track': {
+            height: value,
+          },
+        }),
+      },
+      { values: theme('height') }
+    );
+
+    matchUtilities(
+      {
+        'slider-track-cursor': (value: string) => ({
+          '&::-webkit-slider-runnable-track': {
+            cursor: value,
+          },
+          '&::-moz-range-track': {
+            cursor: value,
+          },
+          '&::-ms-track': {
+            cursor: value,
+          },
+        }),
+      },
+      { values: theme('cursor') }
+    );
+
+    matchUtilities(
+      {
+        'slider-thumb': (value: string) => ({
+          '&::-webkit-slider-thumb': {
+            background: value,
+          },
+          '&::-moz-range-thumb': {
+            background: value,
+          },
+          '&::-ms-thumb': {
+            background: value,
+          },
+        }),
+      },
+      {
+        values: {
+          ...theme('backgroundColor'),
+        },
+      }
+    );
+
+    matchUtilities(
+      {
+        'slider-thumb-w': (value: string) => ({
+          '&::-webkit-slider-thumb': {
+            width: value,
+          },
+          '&::-moz-range-thumb': {
+            width: value,
+          },
+          '&::-ms-thumb': {
+            width: value,
+          },
+        }),
+      },
+      { values: theme('width') }
+    );
+
+    matchUtilities(
+      {
+        'slider-thumb-h': (value: string) => ({
+          '&::-webkit-slider-thumb': {
+            height: value,
+            marginTop: `calc(-${value} / 2)`,
+          },
+          '&::-moz-range-thumb': {
+            height: value,
+          },
+          '&::-ms-thumb': {
+            height: value,
+          },
+        }),
+      },
+      { values: theme('height') }
+    );
+
+    /*
+     * The default border properties were causing rendering issues, so we
+     * split the width utility into it's own class to avoid that
+     */
+    matchUtilities(
+      {
+        'slider-thumb-border': (value: string) => ({
+          '&::-webkit-slider-thumb': {
+            borderWidth: value,
+          },
+          '&::-moz-range-thumb': {
+            borderWidth: value,
+          },
+          '&::-ms-thumb': {
+            borderWidth: value,
+          },
+        }),
+      },
+      { values: theme('borderWidth') }
+    );
+
+    matchUtilities(
+      {
+        'slider-thumb-border': (value: string) => ({
+          '&::-webkit-slider-thumb': {
+            borderStyle: value,
+          },
+          '&::-moz-range-thumb': {
+            borderStyle: value,
+          },
+          '&::-ms-thumb': {
+            borderStyle: value,
+          },
+        }),
+      },
+      {
+        values: {
+          DEFAULT: 'solid',
+          solid: 'solid',
+          dashed: 'dashed',
+          dotted: 'dotted',
+          double: 'double',
+        },
+      }
+    );
+
+    matchUtilities(
+      {
+        'slider-thumb-border': (value: string) => ({
+          '&::-webkit-slider-thumb': {
+            borderColor: value,
+          },
+          '&::-moz-range-thumb': {
+            borderColor: value,
+          },
+          '&::-ms-thumb': {
+            borderColor: value,
+          },
+        }),
+      },
+      {
+        values: {
+          ...theme('borderColor'),
+          DEFAULT: theme('borderColor.light'),
+        },
+      }
+    );
+
+    matchUtilities(
+      {
+        'slider-thumb-border': (value: string) => ({
+          '&::-webkit-slider-thumb': {
+            borderRadius: value,
+          },
+          '&::-moz-range-thumb': {
+            borderRadius: value,
+          },
+          '&::-ms-thumb': {
+            borderRadius: value,
+          },
+        }),
+      },
+      {
+        values: { ...theme('borderRadius'), DEFAULT: '9999px' },
+      }
+    );
+
+    matchUtilities(
+      {
+        'slider-thumb-cursor': (value: string) => ({
+          '&::-webkit-slider-thumb': {
+            cursor: value,
+          },
+          '&::-moz-range-thumb': {
+            cursor: value,
+          },
+          '&::-ms-thumb': {
+            cursor: value,
+          },
+        }),
+      },
+      { values: theme('cursor') }
+    );
   }),
 ] satisfies OptionalConfig['plugins'];
diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
@@ -29,6 +29,7 @@ export type { IconName } from './icon/icons';
 export {
   Input,
   NumericInput,
+  RangeInput,
   RestrictedTextInput,
   SliderInput,
   TextInput,