Skip to content

Commit

Permalink
update: migrate to @refina/mdui2
Browse files Browse the repository at this point in the history
  • Loading branch information
KermanX committed Nov 21, 2023
1 parent a28ebf7 commit bb311c0
Show file tree
Hide file tree
Showing 11 changed files with 120 additions and 145 deletions.
72 changes: 32 additions & 40 deletions packages/block-data/src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,12 @@ export default {
"Button",
null,
content("inner", "as-primary"),
[],
input("disabled", t.boolean, "as-hidden-socket"),
[],
event("onClick", "void"),
[],
[],
[
textProp("class"),
dropdownProp("color", ["unset", "primary", "accent"], "unset"),
switchProp("raised", true),
switchProp("ripple", false),
],
[textProp("class")],
),

p: contentWrapper("Paragraph"),
Expand Down Expand Up @@ -67,10 +62,7 @@ export default {
[],
[],
[],
[
dropdownProp("type", ["toolbar", "tab", "both", "neither"], "toolbar"),
switchProp("colored", true),
],
[textProp("class")],
),

list: component(
Expand All @@ -85,36 +77,36 @@ export default {
[textProp("class"), textProp("key", "$index")],
),

table: component(
"Table",
"TableModel",
content("inner", "as-socket", Direction.BOTTOM),
input("data", "iterable"),
[
output("current", "unknown", "as-hidable-socket", Direction.RIGHT),
output("renderingState", "unknown", "as-hidden-socket", Direction.RIGHT),
],
[],
[],
[],
[textProp("class"), textProp("key", "$index")],
),
// table: component(
// "Table",
// "TableModel",
// content("inner", "as-socket", Direction.BOTTOM),
// input("data", "iterable"),
// [
// output("current", "unknown", "as-hidable-socket", Direction.RIGHT),
// output("renderingState", "unknown", "as-hidden-socket", Direction.RIGHT),
// ],
// [],
// [],
// [],
// [textProp("class"), textProp("key", "$index")],
// ),

tableCol: component(
"Table Col",
"TableColModel",
content("inner"),
input("prop", "string", "as-primary"),
output("value", "unknown", "as-hidable-socket", Direction.TOP),
[],
[],
[],
[
textProp("head class"),
textProp("cell class"),
textProp("header", "$prop"),
],
),
// tableCol: component(
// "Table Col",
// "TableColModel",
// content("inner"),
// input("prop", "string", "as-primary"),
// output("value", "unknown", "as-hidable-socket", Direction.TOP),
// [],
// [],
// [],
// [
// textProp("head class"),
// textProp("cell class"),
// textProp("header", "$prop"),
// ],
// ),

forEach: component(
"For each",
Expand Down
2 changes: 1 addition & 1 deletion packages/northstar/src/views/preview.r.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { HTMLElementComponent, ref, view } from "refina";

import runtimeURL from "@quasi-dev/runtime/src/index.ts?url";
import mduiStyleUrl from "@quasi-dev/runtime/styles.css?url"; // Used in development
import mduiStyleContent from "@quasi-dev/runtime/styles.min.css?raw"; // Used in production
import mduiStyleContent from "@quasi-dev/runtime/styles.css?inline"; // Used in production
import iframeURL from "./iframe/index.html?url";

import { compileTailwindCSS } from "@quasi-dev/browser-tailwind";
Expand Down
5 changes: 2 additions & 3 deletions packages/runtime/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,11 @@
],
"exports": {
".": "./src/index.ts",
"./styles.css": "./node_modules/@refina/mdui/node_modules/mdui/dist/css/mdui.css",
"./styles.min.css": "./node_modules/@refina/mdui/node_modules/mdui/dist/css/mdui.min.css",
"./styles.css": "./node_modules/@refina/mdui2/node_modules/mdui/mdui.css",
"./*": "./*"
},
"dependencies": {
"@refina/mdui": "link:..\\..\\..\\refina\\packages\\mdui",
"@refina/mdui2": "link:..\\..\\..\\refina\\packages\\mdui2",
"refina": "link:..\\..\\..\\refina\\packages\\core"
}
}
11 changes: 4 additions & 7 deletions packages/runtime/src/appbar.r.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
import { ComponentContext, Content, OutputComponent, fromProp } from "refina";
import QuasiRuntime from "./plugin";
import "@refina/mdui";
import { AppbarType, Color } from "@refina/mdui";
import "@refina/mdui2";

export interface AppbarProps {
class: string;
inner: Content;
type: AppbarType;
colored: boolean;
}

@QuasiRuntime.outputComponent("appbar")
export class QAppbar extends OutputComponent {
main(_: ComponentContext, props: AppbarProps): void {
_.mdAppbar(props.type, _ => {
_.mdToolbar(props.inner, props.colored);
});
_.$cls(props.class);
_.mdTopAppBar(props.inner);
}
}

Expand Down
15 changes: 1 addition & 14 deletions packages/runtime/src/button.r.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,15 @@ import QuasiRuntime from "./plugin";
export interface ButtonProps {
inner: Content;
class: string;
color: "primary" | "accent" | "unset";
raised: boolean;
disabled: boolean;
ripple: boolean;
icon: boolean;
onClick: () => void;
}

@QuasiRuntime.outputComponent("button")
export class QButton extends OutputComponent {
main(_: ComponentContext, props: ButtonProps): void {
_.$cls(props.class);
if (
_.mdIntrinsicButton(
props.inner,
props.color === "unset" ? undefined : props.color,
props.raised,
props.disabled,
props.ripple,
props.icon,
)
) {
if (_.mdButton(props.inner, props.disabled)) {
props.onClick();
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/runtime/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ export * from "./input.r";
export * from "./list.r";
export * from "./paragraph.r";
export * from "./span.r";
export * from "./table.r";
export * from "./tableItem.r";
// export * from "./table.r";
// export * from "./tableItem.r";
export * from "./textNode.r";

import QuasiRuntime from "./plugin";
Expand Down
2 changes: 1 addition & 1 deletion packages/runtime/src/input.r.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export class QInput extends OutputComponent {
main(_: ComponentContext, model: InputModel, props: InputProps): void {
model.value ??= props.initial;
_.$cls(props.class);
if (_.mdInput(fromProp(model, "value"), props.label, props.disabled)) {
if (_.mdTextField(fromProp(model, "value"), props.label, props.disabled)) {
props.onInput?.(_.$ev);
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/runtime/src/plugin.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import MdUI from "@refina/mdui";
import MdUI2 from "@refina/mdui2";
import { Plugin } from "refina";

const QuasiRuntime = new Plugin("quasi-runtime", (app) => {
MdUI.install(app, "indigo", "blue");
MdUI2.install(app);
});
export default QuasiRuntime;
80 changes: 40 additions & 40 deletions packages/runtime/src/table.r.ts
Original file line number Diff line number Diff line change
@@ -1,45 +1,45 @@
import { ComponentContext, Content, OutputComponent, byIndex, bySelf } from "refina";
import QuasiRuntime from "./plugin";
// import { ComponentContext, Content, OutputComponent, byIndex, bySelf } from "refina";
// import QuasiRuntime from "./plugin";

export const currentTableSymbol = Symbol("currentTable");
// export const currentTableSymbol = Symbol("currentTable");

export interface TableProps {
inner: Content;
class: string;
data: Iterable<any>;
key: string;
}
// export interface TableProps {
// inner: Content;
// class: string;
// data: Iterable<any>;
// key: string;
// }

export class TableModel {
renderingState: "head" | "body";
current: any;
}
// export class TableModel {
// renderingState: "head" | "body";
// current: any;
// }

@QuasiRuntime.outputComponent("table")
export class QTable extends OutputComponent {
main(_: ComponentContext, model: TableModel, props: TableProps): void {
_.provide(currentTableSymbol, model, _ => {
_.$cls(props.class);
_.mdTable(
props.data,
_ => {
model.renderingState = "head";
_.embed(props.inner);
},
props.key === "$index" ? byIndex : props.key === "$self" ? bySelf : props.key,
v => {
model.renderingState = "body";
model.current = v;
_.embed(props.inner);
},
);
model.current = null;
});
}
}
// @QuasiRuntime.outputComponent("table")
// export class QTable extends OutputComponent {
// main(_: ComponentContext, model: TableModel, props: TableProps): void {
// _.provide(currentTableSymbol, model, _ => {
// _.$cls(props.class);
// _.mdTable(
// props.data,
// _ => {
// model.renderingState = "head";
// _.embed(props.inner);
// },
// props.key === "$index" ? byIndex : props.key === "$self" ? bySelf : props.key,
// v => {
// model.renderingState = "body";
// model.current = v;
// _.embed(props.inner);
// },
// );
// model.current = null;
// });
// }
// }

declare module "refina" {
interface OutputComponents {
table: QTable;
}
}
// declare module "refina" {
// interface OutputComponents {
// table: QTable;
// }
// }
64 changes: 32 additions & 32 deletions packages/runtime/src/tableItem.r.ts
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
import { ComponentContext, Content, OutputComponent } from "refina";
import QuasiRuntime from "./plugin";
import { TableModel, currentTableSymbol } from "./table.r";
// import { ComponentContext, Content, OutputComponent } from "refina";
// import QuasiRuntime from "./plugin";
// import { TableModel, currentTableSymbol } from "./table.r";

export interface TableColProps {
inner: Content;
prop: string;
header: string;
"head class": string;
"cell class": string;
}
// export interface TableColProps {
// inner: Content;
// prop: string;
// header: string;
// "head class": string;
// "cell class": string;
// }

export class TableColModel {
value: any;
}
// export class TableColModel {
// value: any;
// }

@QuasiRuntime.outputComponent("tableCol")
export class QTableCol extends OutputComponent {
main(_: ComponentContext, model: TableColModel, props: TableColProps): void {
const currentTable = _.$runtimeData[currentTableSymbol] as TableModel;
if (currentTable.renderingState === "head") {
_.$cls(props["head class"]);
_.mdTableHeader(props.header === "$prop" ? props.prop : props.header);
} else {
model.value = currentTable.current[props.prop];
_.$cls(props["cell class"]);
_.mdTableCell(props.inner);
}
}
}
// @QuasiRuntime.outputComponent("tableCol")
// export class QTableCol extends OutputComponent {
// main(_: ComponentContext, model: TableColModel, props: TableColProps): void {
// const currentTable = _.$runtimeData[currentTableSymbol] as TableModel;
// if (currentTable.renderingState === "head") {
// _.$cls(props["head class"]);
// _.mdTableHeader(props.header === "$prop" ? props.prop : props.header);
// } else {
// model.value = currentTable.current[props.prop];
// _.$cls(props["cell class"]);
// _.mdTableCell(props.inner);
// }
// }
// }

declare module "refina" {
interface OutputComponents {
tableCol: QTableCol;
}
}
// declare module "refina" {
// interface OutputComponents {
// tableCol: QTableCol;
// }
// }
6 changes: 3 additions & 3 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit bb311c0

Please sign in to comment.