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>