fix(webui): improve displaying header controls in source view component

test(javascript): add test for shared values

Author: marle3003

js/mokapi/shared_test.go

@@ -343,6 +343,21 @@ func TestModule_Shared(t *testing.T) {
 				r.Equal(t, "bar", mokapi.Export(v))
 			},
 		},
+		{
+			name: "delete field in object",
+			test: func(t *testing.T, newVm func() *goja.Runtime) {
+				vm1 := newVm()
+
+				v, err := vm1.RunString(`
+					const m = require('mokapi');
+					const shared = m.shared.update('foo', (v) => v ?? { foo: 'bar' });
+					delete shared.foo
+					shared
+				`)
+				r.NoError(t, err)
+				r.Equal(t, map[string]any{}, mokapi.Export(v))
+			},
+		},
 		{
 			name: "push array",
 			test: func(t *testing.T, newVm func() *goja.Runtime) {

webui/src/components/dashboard/SourceView.vue

@@ -297,6 +297,12 @@ watch(
   place-content: center;
   border-right: 1px solid var(--source-border);
 }
+.source-view .header .controls > a {
+  font-size: 0.9rem;
+  border-right: 1px solid var(--source-border);
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
 .source-view .header button.active {
   background-color: black !important;
   outline: 1px solid var(--source-border);