feat: simple database er view

nodedevpkg/vue-vite-presets/src/viteVue.ts

@@ -6,9 +6,10 @@ import vitePages, {
 } from "vite-plugin-pages";
 import { mdx } from "./mdx";
 import {
-  createPageMetaResolver, sortedRoutes,
+  createPageMetaResolver,
+  sortedRoutes,
   viteVueComponentCompleter,
-  viteVueComponentHMR
+  viteVueComponentHMR,
 } from "./vue";
 
 export interface ViteReactOptions {
@@ -38,7 +39,7 @@ export const viteVue = (options: ViteReactOptions = {}): PluginOption[] => {
         }
 
         if (r.children) {
-          r.children = sortedRoutes(r.children)
+          r.children = sortedRoutes(r.children);
         }
 
         return r;

nodedevpkg/vue-vite-presets/src/vue/__tests__/route.spec.ts

@@ -1,52 +1,57 @@
 import { expect, test } from "bun:test";
 import { sortedRoutes } from "../route.ts";
 
-
 test("#sortedRoutes", () => {
   const routes = [
     {
       name: "admin-remote-registries",
       path: "remote-registries",
-      component: "/page/admin/21_remote-registries/index.tsx"
-    }, {
+      component: "/page/admin/21_remote-registries/index.tsx",
+    },
+    {
       name: "admin-types",
       path: "types",
-      component: "/page/admin/10_types/index.tsx"
-    }, {
+      component: "/page/admin/10_types/index.tsx",
+    },
+    {
       name: "admin-robots",
       path: "robots",
-      component: "/page/admin/91_robots/index.tsx"
-    }, {
+      component: "/page/admin/91_robots/index.tsx",
+    },
+    {
       name: "admin-stations",
       path: "stations",
-      component: "/page/admin/12_stations/index.tsx"
-    }, {
+      component: "/page/admin/12_stations/index.tsx",
+    },
+    {
       name: "admin-users",
       path: "users",
-      component: "/page/admin/90_users/index.tsx"
-    }, {
+      component: "/page/admin/90_users/index.tsx",
+    },
+    {
       name: "admin-clusters",
       path: "clusters",
-      component: "/page/admin/20_clusters/index.tsx"
-    }, {
+      component: "/page/admin/20_clusters/index.tsx",
+    },
+    {
       name: "admin-vendors",
       path: "vendors",
-      component: "/page/admin/19_vendors/index.tsx"
-    }, {
+      component: "/page/admin/19_vendors/index.tsx",
+    },
+    {
       name: "admin",
       path: "",
-      component: "/page/admin/index.tsx"
-    }, {
+      component: "/page/admin/index.tsx",
+    },
+    {
       name: "admin-remote-registries-remoteRegistryCode",
       path: "remote-registries/:remoteRegistryCode",
-      component: "/page/admin/21_remote-registries/[remoteRegistryCode].tsx"
-    }
+      component: "/page/admin/21_remote-registries/[remoteRegistryCode].tsx",
+    },
   ];
 
   const sorted = sortedRoutes(routes);
 
-
   expect(sorted[0]?.name).toBe("admin");
   expect(sorted[sorted.length - 1]?.name).toBe("admin-robots");
 });
-

nodedevpkg/vue-vite-presets/src/vue/route.ts

@@ -1,4 +1,6 @@
-export const sortedRoutes = (children: Array<{ component: string, name: string, path?: string }> = []) => {
+export const sortedRoutes = (
+  children: Array<{ component: string; name: string; path?: string }> = [],
+) => {
   return children.toSorted((a, b) => {
     if (!a.path || !b.path) {
       if (!a.path) {

nodepkg/jsoneditor/example/jsoneditor.tsx

@@ -62,26 +62,26 @@ export default component(() => {
   const editor$ = JSONEditor.of(x, {
     name: "name",
     annotations: {
-      longtext: new Array(100).fill("longtext").join("")
+      longtext: new Array(100).fill("longtext").join(""),
     },
     ports: [],
     manifests: {
-      "x": {}
+      x: {},
     },
     anyjson: {
       obj: {
-        a: 1
+        a: 1,
       },
       arr: ["1", "2", "3"],
       nested: [
         {
-          a: 1
+          a: 1,
         },
         {
-          a: 2
-        }
-      ]
-    }
+          a: 2,
+        },
+      ],
+    },
   });
 
   rx(
@@ -95,7 +95,7 @@ export default component(() => {
       }
       console.log(JSON.stringify(v, null, 2));
     }),
-    subscribeUntilUnmount()
+    subscribeUntilUnmount(),
   );
 
   return () => (

nodepkg/jsoneditor/src/JSONEditorView.tsx

@@ -1,10 +1,24 @@
-import { component$, type Context, EmptyContext, rx, Schema, type Type } from "@innoai-tech/vuekit";
+import {
+  component$,
+  type Context,
+  EmptyContext,
+  rx,
+  Schema,
+  type Type,
+} from "@innoai-tech/vuekit";
 import { JSONEditorProvider, JSONEditorSlotsProvider } from "./models";
 import { LayoutContextProvider, Line } from "./views";
 import { styled } from "@innoai-tech/vueuikit";
 import { ref } from "vue";
 import { isUndefined } from "@innoai-tech/lodash";
-import { AnyInput, ArrayInput, ObjectInput, OneEditingProvider, RecordInput, ValueInput } from "./inputs";
+import {
+  AnyInput,
+  ArrayInput,
+  ObjectInput,
+  OneEditingProvider,
+  RecordInput,
+  ValueInput,
+} from "./inputs";
 
 export const defaultValueRender = (typedef: Type, value: any, ctx: Context) => {
   if (
@@ -52,7 +66,7 @@ export const JSONEditorView = component$(({}, { render }) => {
         <OneEditingProvider>
           <JSONEditorSlotsProvider
             value={{
-              $value: slots.$value ?? defaultValueRender
+              $value: slots.$value ?? defaultValueRender,
             }}
           >
             <JSONEditorContainer>
@@ -61,7 +75,7 @@ export const JSONEditorView = component$(({}, { render }) => {
                 <LayoutContextProvider
                   value={{
                     indent: 0,
-                    $container: $container
+                    $container: $container,
                   }}
                 >
                   <Line path={[]} viewOnly>
@@ -73,7 +87,7 @@ export const JSONEditorView = component$(({}, { render }) => {
           </JSONEditorSlotsProvider>
         </OneEditingProvider>
       );
-    })
+    }),
   );
 });
 
@@ -85,6 +99,6 @@ const JSONEditorContainer = styled("div")({
   section: {
     display: "flex",
     flexDirection: "column",
-    minWidth: "max-content"
-  }
+    minWidth: "max-content",
+  },
 });

nodepkg/jsoneditor/src/actions/index.ts

@@ -1 +1 @@
-export * from "./JSONRaw.tsx"
+export * from "./JSONRaw.tsx";

nodepkg/jsoneditor/src/inputs/AnyInput.tsx

@@ -1,4 +1,10 @@
-import { component$, type Context, rx, t, type Type } from "@innoai-tech/vuekit";
+import {
+  component$,
+  type Context,
+  rx,
+  t,
+  type Type,
+} from "@innoai-tech/vuekit";
 import { isArray, isObject } from "@innoai-tech/lodash";
 import { ArrayInput } from "./ArrayInput.tsx";
 import { RecordInput } from "./RecordInput.tsx";
@@ -13,14 +19,33 @@ export const AnyInput = component$<{
     props.value$,
     render((value) => {
       if (isArray(value)) {
-        return <ArrayInput value={value} typedef={t.array(t.any())} ctx={props.ctx} />;
+        return (
+          <ArrayInput
+            value={value}
+            typedef={t.array(t.any())}
+            ctx={props.ctx}
+          />
+        );
       }
 
       if (isObject(value)) {
-        return <RecordInput value={value} typedef={t.record(t.string(), t.any())} ctx={props.ctx} />;
+        return (
+          <RecordInput
+            value={value}
+            typedef={t.record(t.string(), t.any())}
+            ctx={props.ctx}
+          />
+        );
       }
 
-      return <ValueInput value={value} typedef={t.any()} ctx={props.ctx} allowRawJSON />;
-    })
+      return (
+        <ValueInput
+          value={value}
+          typedef={t.any()}
+          ctx={props.ctx}
+          allowRawJSON
+        />
+      );
+    }),
   );
 });

nodepkg/jsoneditor/src/inputs/ArrayInput.tsx

@@ -6,16 +6,29 @@ import {
   Schema,
   subscribeUntilUnmount,
   type Type,
-  type VNodeChild
+  type VNodeChild,
 } from "@innoai-tech/vuekit";
 import { Icon } from "@innoai-tech/vuematerial";
 import { mdiCancel, mdiCheckBold, mdiMinusBoxOutline } from "@mdi/js";
 import { JSONEditorProvider, JSONEditorSlotsProvider } from "../models";
 import { Box, Popper } from "@innoai-tech/vueuikit";
-import { InputActionSubject, InputText, ValueContainer, ValueInputActions } from "./ValueInput.tsx";
+import {
+  InputActionSubject,
+  InputText,
+  ValueContainer,
+  ValueInputActions,
+} from "./ValueInput.tsx";
 import { tap } from "rxjs";
 import { CopyAsJSONIconBtn } from "../actions";
-import { ActionBtn, Actions, Block, Line, PopupStatus, PropName, Tooltip } from "../views";
+import {
+  ActionBtn,
+  Actions,
+  Block,
+  Line,
+  PopupStatus,
+  PropName,
+  Tooltip,
+} from "../views";
 
 export const ArrayInput = component$<{
   ctx: Context;
@@ -47,7 +60,7 @@ export const ArrayInput = component$<{
                   (values: any) => {
                     values.push(value);
                   },
-                  []
+                  [],
                 );
               }}
             />
@@ -73,15 +86,15 @@ export const ArrayInput = component$<{
                   {slots.$value?.(propSchema, itemValue, {
                     ...props.ctx,
                     path: path,
-                    branch: [...props.ctx.branch, itemValue]
+                    branch: [...props.ctx.branch, itemValue],
                   })}
                 </Line>
               );
-            }
+            },
           )}
         </Block>
       );
-    })
+    }),
   );
 });
 
@@ -146,7 +159,7 @@ const AddItemIconBtn = component$<{
         }
       }
     }),
-    subscribeUntilUnmount()
+    subscribeUntilUnmount(),
   );
 
   rx(
@@ -161,7 +174,7 @@ const AddItemIconBtn = component$<{
           break;
       }
     }),
-    subscribeUntilUnmount()
+    subscribeUntilUnmount(),
   );
 
   const $input = rx(
@@ -197,7 +210,7 @@ const AddItemIconBtn = component$<{
           </div>
         </Popper>
       );
-    })
+    }),
   );
 
   return () => (