EditableValueView

EditableValueView(
  this: void,
  internals: Brand<"ComponentInternals">,
  props: (
    ValueViewProps &
    {
      className?: string;
      showType?: boolean;
    }
  ),
): {
  $on?: (type: string, callback: (e: any) => void): () => void;
  $set?: (props: Partial<(
    ValueViewProps &
    {
      className?: string;
      showType?: boolean;
    }
  )>): void;
}

See the <EditableValueView /> (Svelte) demo for this component in action.

The component's props identify which Value to render based on Table Id, Row Id, Value Id, and Store (which is either the default context Store, a named context Store, or an explicit reference).

A Value contains a string, number, boolean, object or array (since v8.0) so the value is rendered in an appropriate <input> tag, possibly as JSON and a button lets the user cycle through the types.

Set the showType prop to false to remove the ability for the user to see or change the Value type. They will also not be able to change the type if there is a ValuesSchema applied to the Store.

This component uses the useValue hook under the covers, which means that any changes to the specified Value outside of this component will cause a re-render.

You can provide a custom className prop which well be used on the root of the resulting element. If omitted the element's class will be editableValue. The debugIds prop has no effect on this component.

<script>
  import {Provider} from 'tinybase/ui-svelte';
  import {EditableValueView} from 'tinybase/ui-svelte-dom';

  export let store;
</script>

<Provider {store}>
  <EditableValueView valueId="employees" />
</Provider>

import {flushSync, mount} from 'svelte';
import {createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore().setValue('employees', 3);
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {store}}));
console.log(app.innerHTML);
// ->
`
<div class="editableValue">
  <button title="number" class="number">number</button>
  <input type="number" value="3">
</div>
`;