Type EnvDropdown

packages/bbui/src/Form/Core/EnvDropdown.svelte

@@ -1,25 +1,25 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher, onMount } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Divider from "../../Divider/Divider.svelte"
 
-  export let value = null
-  export let placeholder = null
-  export let type = "text"
-  export let disabled = false
-  export let id = null
-  export let readonly = false
-  export let updateOnChange = true
-  export let align
-  export let autofocus = false
+  export let value: string | number | null = null
+  export let placeholder: string | null = null
+  export let type: "text" | "number" = "text"
+  export let disabled: boolean = false
+  export let id: string | null = null
+  export let readonly: boolean = false
+  export let updateOnChange: boolean = true
+  export let align: string | undefined = undefined
+  export let autofocus: boolean = false
   export let variables
   export let showModal
   export let environmentVariablesEnabled
   export let handleUpgradePanel
   const dispatch = createEventDispatcher()
 
-  let field
+  let field: HTMLInputElement
   let focus = false
   let iconFocused = false
   let open = false
@@ -30,7 +30,7 @@
   // Strips the name out of the value which is {{ env.Variable }} resulting in an array like ["Variable"]
   $: hbsValue = String(value)?.match(STRIP_NAME_REGEX) || []
 
-  const updateValue = newValue => {
+  const updateValue = (newValue: any) => {
     if (readonly) {
       return
     }
@@ -48,7 +48,7 @@
     focus = true
   }
 
-  const onBlur = event => {
+  const onBlur = (event: any) => {
     if (readonly) {
       return
     }
@@ -56,14 +56,14 @@
     updateValue(event.target.value)
   }
 
-  const onInput = event => {
+  const onInput = (event: any) => {
     if (readonly || !updateOnChange) {
       return
     }
     updateValue(event.target.value)
   }
 
-  const handleOutsideClick = event => {
+  const handleOutsideClick = (event: Event) => {
     if (open) {
       event.stopPropagation()
       open = false
@@ -73,7 +73,7 @@
     }
   }
 
-  const handleVarSelect = variable => {
+  const handleVarSelect = (variable: string) => {
     open = false
     focus = false
     iconFocused = false
@@ -121,7 +121,7 @@
 
     <input
       bind:this={field}
-      disabled={hbsValue.length || disabled}
+      disabled={!!hbsValue.length || disabled}
       {readonly}
       {id}
       value={hbsValue.length ? `{{ ${hbsValue[0]} }}` : value}

packages/bbui/src/Form/EnvDropdown.svelte

@@ -1,26 +1,25 @@
-<script>
+<script lang="ts">
   import Field from "./Field.svelte"
   import EnvDropdown from "./Core/EnvDropdown.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
-  export let label = null
+  export let value: string | undefined = undefined
+  export let label: string | undefined = undefined
   export let labelPosition = "above"
   export let placeholder = null
-  export let type = "text"
+  export let type: "text" | "number" = "text"
   export let disabled = false
   export let readonly = false
-  export let error = null
+  export let error: string | undefined = undefined
   export let updateOnChange = true
-  export let quiet = false
   export let autofocus
   export let variables
   export let showModal
-  export let helpText = null
+  export let helpText: string | undefined = undefined
   export let environmentVariablesEnabled
   export let handleUpgradePanel
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: any) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -29,13 +28,11 @@
 <Field {helpText} {label} {labelPosition} {error}>
   <EnvDropdown
     {updateOnChange}
-    {error}
     {disabled}
     {readonly}
     {value}
     {placeholder}
     {type}
-    {quiet}
     {autofocus}
     {variables}
     {showModal}