upd: qAppLayout of runtime

packages/runtime/src/components/appLayout.r.ts

@@ -0,0 +1,45 @@
+/// <reference types="vite/client" />
+import { ComponentContext, Content, OutputComponent } from "refina";
+import QuasiRuntime from "../plugin";
+import { Direction, component, content, textProp } from "../types";
+
+export default component({
+  displayName: () => "App layout",
+  contents: {
+    title: content("title", "as-primary"),
+    topBar: content("top bar", "as-socket"),
+    main: content("main", "as-socket", Direction.BOTTOM),
+  },
+  props: {
+    class: textProp("class"),
+  },
+});
+
+export interface AppLayoutProps {
+  class: string;
+  title: string;
+  topBar: Content;
+  main: Content;
+}
+
+@QuasiRuntime.outputComponent("qAppLayout")
+export class QAppLayout extends OutputComponent {
+  main(_: ComponentContext, props: AppLayoutProps): void {
+    _.$cls(props.class);
+    _.mdTopAppBar(_ => {
+      _.mdTopAppBarTitle(
+        _ =>
+          _.$css`user-select:none;text-decoration:none;color:inherit` &&
+          _._a({ href: window.__QUASI_PREVIEW__ ? "" : import.meta.env.BASE_URL }, props.title),
+      );
+      _.embed(props.topBar);
+    });
+    _.mdLayoutMain(props.main);
+  }
+}
+
+declare module "refina" {
+  interface OutputComponents {
+    qAppLayout: QAppLayout;
+  }
+}

packages/runtime/src/components/index.ts

@@ -1,4 +1,4 @@
-export * from "./appbar.r";
+export * from "./appLayout.r";
 export * from "./button.r";
 export * from "./div.r";
 export * from "./forEach.r";
@@ -11,7 +11,7 @@ export * from "./table.r";
 export * from "./tableItem.r";
 export * from "./textNode.r";
 
-import qAppbar from "./appbar.r";
+import qAppLayout from "./appLayout.r";
 import qButton from "./button.r";
 import qDiv from "./div.r";
 import qForEach from "./forEach.r";
@@ -25,7 +25,7 @@ import qTableItem from "./tableItem.r";
 import qTextNode from "./textNode.r";
 
 export const componentInfoObj = {
-  qAppbar,
+  qAppLayout,
   qButton,
   qDiv,
   qForEach,