feat: hidden value plugins

src/lib/index.ts

@@ -3,6 +3,7 @@ import BooleanToggle from './plugins/value/components/BooleanToggle.svelte'
 import ColorPicker from './plugins/value/components/ColorPicker.svelte'
 import EditableValue from './plugins/value/components/EditableValue.svelte'
 import EnumValue from './plugins/value/components/EnumValue.svelte'
+import HiddenValue from './plugins/value/components/HiddenValue.svelte'
 import ReadonlyValue from './plugins/value/components/ReadonlyValue.svelte'
 import TimestampTag from './plugins/value/components/TimestampTag.svelte'
 
@@ -13,7 +14,15 @@ export * from './types.js'
 // value plugins
 export { renderValue } from './plugins/value/renderValue.js'
 export { renderJSONSchemaEnum } from './plugins/value/renderJSONSchemaEnum.js'
-export { BooleanToggle, ColorPicker, EditableValue, EnumValue, ReadonlyValue, TimestampTag }
+export {
+  BooleanToggle,
+  ColorPicker,
+  EditableValue,
+  EnumValue,
+  HiddenValue,
+  ReadonlyValue,
+  TimestampTag
+}
 
 // validator plugins
 export * from './plugins/validator/createAjvValidator.js'

src/lib/plugins/value/components/HiddenValue.svelte

@@ -0,0 +1,45 @@
+<svelte:options immutable={true} />
+
+<script>
+  import Icon from 'svelte-awesome'
+  import { faLock } from '@fortawesome/free-solid-svg-icons'
+  import { createValueSelection } from 'svelte-jsoneditor'
+
+  export let value
+  export let path
+  export let readOnly
+  export let onSelect
+
+  $: hiddenValue = '*'.repeat(String(value).length)
+
+  function handleValueDoubleClick(event) {
+    if (!readOnly) {
+      event.preventDefault()
+      event.stopPropagation()
+
+      // open in edit mode
+      onSelect(createValueSelection(path, true))
+    }
+  }
+</script>
+
+<div
+  role="button"
+  tabindex="-1"
+  class="jse-value jse-readonly-password"
+  data-type="selectable-value"
+  on:dblclick={handleValueDoubleClick}
+>
+  <Icon data={faLock} />
+  {hiddenValue}
+</div>
+
+<style>
+  .jse-readonly-password {
+    padding: 0 5px;
+  }
+
+  .jse-readonly-password:hover {
+    background: #ededed;
+  }
+</style>