Additional settings

README.md

@@ -1,24 +1,14 @@
-# NumberSpinner
+# budibase-component-number-spinner
 
 A Budibase **number field form input wrapper** for https://github.com/bohnacker/svelte-number-spinner
 
 ![Screenshot 2022-09-29 at 16 25 37](https://user-images.githubusercontent.com/101575380/193073284-c8369e94-d56c-4a60-acb7-757d0ba1bbc6.png)
 
 
 # Description
-A number input that can be controlled with the mouse and keyboard
+A number input that can be controlled with the mouse and keyboard.
 
-Find out more about [Budibase](https://github.com/Budibase/budibase).
+Adjust the mininum and maximum values, as well as the speed, decimals and step of the spinner. 
 
-## Instructions
-
-To build your new  plugin run the following in your Budibase CLI:
-```
-budi plugins --build
-```
-
-You can also re-build everytime you make a change to your plugin with the command:
-```
-budi plugins --watch
-```
+You can check the circular checkbox to loop the max into the min value and vice-versa
 

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "NumberSpinner",
-  "version": "1.0.0",
+  "name": "budibase-component-number-spinner",
+  "version": "1.1.0",
   "description": "A number input that can be controlled with the mouse and keyboard",
   "license": "MIT",
   "svelte": "index.js",

schema.json

@@ -2,7 +2,7 @@
   "type": "component",
   "metadata": {},
   "schema": {
-    "name": "NumberSpinner",
+    "name": "budibase-component-number-spinner",
     "friendlyName": "Number Spinner",
     "description": "A number input that can be controlled with the mouse and keyboard",
     "icon": "MoveLeftRight",
@@ -13,6 +13,11 @@
         "label": "Field",
         "required": true
       },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
       {
         "type": "select",
         "label": "Alignment",
@@ -78,6 +83,42 @@
             "value": "XXXL"
           }
         ]
+      },
+      {
+        "type": "number",
+        "label": "Min",
+        "key": "min",
+        "defaultValue": -1000
+      },
+      {
+        "type": "number",
+        "label": "Max",
+        "key": "max",
+        "defaultValue": 1000
+      },
+      {
+        "type": "number",
+        "label": "Speed",
+        "key": "speed",
+        "defaultValue": 1
+      },
+      {
+        "type": "number",
+        "label": "Decimals",
+        "key": "decimals",
+        "defaultValue": 0
+      },
+      {
+        "type": "text",
+        "label": "Step",
+        "key": "step",
+        "defaultValue": 1
+      },
+      {
+        "type": "boolean",
+        "label": "Circular",
+        "key": "circular",
+        "defaultValue": false
       }
     ]
   }

src/Component.svelte

@@ -1,10 +1,18 @@
 <script>
   import { getContext, onDestroy } from "svelte"
   import NumberSpinner from "svelte-number-spinner";
+  import Label from "./Label.svelte";
 
   export let field
+  export let label
   export let align
   export let size
+  export let min
+  export let max
+  export let step
+  export let speed
+  export let decimals
+  export let circular
 
   let fieldApi
   let fieldState
@@ -24,13 +32,28 @@
     fieldApi?.deregister();
     unsubscribe?.();
   });
+
+  const parseStep = () => {
+    let parsedStep = parseFloat(step)
+    if (parsedStep && !isNaN(parsedStep)) {
+      return parsedStep
+    }
+    return 1
+  }
 </script>
 
 <div use:styleable={$component.styles}>
   {#if !formContext}
     <div class="placeholder">Form components need to be wrapped in a form.</div>
   {:else}
+    <Label>{label}</Label>
     <NumberSpinner 
+      min={min || -1000}
+      max={max || 1000}
+      step={parseStep(step)}
+      speed={speed || 1}
+      decimals={decimals || 0}
+      circular={circular || false}
       class={`spectrum-Textfield spectrum-Textfield-input spectrum-Heading--size${size || "M"}`}
       mainStyle={`text-align: ${align}; height:auto;`}
       value={fieldState?.value}

src/Label.svelte

@@ -0,0 +1,26 @@
+<script>
+    import "@spectrum-css/fieldlabel/dist/index-vars.css"
+  
+    export let size = "M"
+    export let muted
+  </script>
+
+    <label
+      class:muted
+      for=""
+      class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}
+    >
+      <slot />
+    </label>
+
+  <style>
+    label {
+      padding: 0;
+      white-space: nowrap;
+      color: var(--spectrum-global-color-gray-700);
+    }
+  
+    .muted {
+      opacity: 0.5;
+    }
+  </style>