add qCard component

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

@@ -0,0 +1,43 @@
+import { OutputComponent, ComponentContext, Content } from "refina";
+import QuasiRuntime from "../plugin";
+import { component, content, Direction, textProp } from "..";
+
+export default component({
+  displayName: () => "Card",
+  contents: {
+    title: content("title", "as-primary"),
+    inner: content("inner", "as-socket", Direction.BOTTOM),
+  },
+  props: {
+    class: textProp("class"),
+  },
+});
+
+export interface CardProps {
+  title: Content;
+  inner: Content;
+  class: string;
+}
+
+@QuasiRuntime.outputComponent("qCard")
+export class QCard extends OutputComponent {
+  main(_: ComponentContext, props: CardProps): void {
+    _.$css`width:80%;left:10%;padding:18px;padding-top:0`;
+    _.$cls(props.class);
+    _._mdui_card(
+      {
+        variant: "filled",
+      },
+      _ => {
+        _._h2({}, props.title);
+        _.embed(props.inner);
+      },
+    );
+  }
+}
+
+declare module "refina" {
+  interface OutputComponents {
+    qCard: QCard;
+  }
+}

packages/runtime/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from "./appLayout.r";
 export * from "./button.r";
+export * from "./card.r";
 export * from "./div.r";
 export * from "./forEach.r";
 export * from "./ifElse.r";
@@ -13,6 +14,7 @@ export * from "./textNode.r";
 
 import qAppLayout from "./appLayout.r";
 import qButton from "./button.r";
+import qCard from "./card.r";
 import qDiv from "./div.r";
 import qForEach from "./forEach.r";
 import qIfElse from "./ifElse.r";
@@ -27,6 +29,7 @@ import qTextNode from "./textNode.r";
 export const componentInfoObj = {
   qAppLayout,
   qButton,
+  qCard,
   qDiv,
   qForEach,
   qIfElse,