@monimesl/dot-simulator 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/client/service-bridge.js

@@ -15,72 +15,498 @@
 		}
 		return registry;
 	}
+	const AmountInput = defineComponent({
+		name: "AmountInput",
+		props: {
+			value: "number",
+			currency: "string",
+			decimals: "number",
+			label: "string",
+			placeholder: "string",
+			hint: "string",
+			error: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "none"
+	});
+	const Button = defineComponent({
+		name: "Button",
+		props: {
+			variant: ["primary", "secondary"],
+			disabled: "boolean",
+			loading: "boolean"
+		},
+		events: ["click"],
+		children: "text"
+	});
+	const SIZES = [
+		"small",
+		"medium",
+		"large"
+	];
+	const SPACES = [
+		"none",
+		"small",
+		"medium",
+		"large"
+	];
+	const TONES = [
+		"default",
+		"muted",
+		"info",
+		"success",
+		"warning",
+		"danger"
+	];
+	const STATUS_TONES = [
+		"default",
+		"info",
+		"success",
+		"warning",
+		"danger"
+	];
+	const ICON_NAMES = [
+		"arrow-down",
+		"arrow-left",
+		"arrow-right",
+		"arrow-up",
+		"bank",
+		"bell",
+		"bolt",
+		"calendar",
+		"card",
+		"cart",
+		"cash",
+		"check",
+		"chevron-down",
+		"chevron-left",
+		"chevron-right",
+		"chevron-up",
+		"clock",
+		"close",
+		"copy",
+		"download",
+		"edit",
+		"error",
+		"eye",
+		"eye-off",
+		"file",
+		"gift",
+		"grid",
+		"heart",
+		"help",
+		"history",
+		"home",
+		"image",
+		"info",
+		"list",
+		"location",
+		"lock",
+		"logout",
+		"mail",
+		"minus",
+		"mobile",
+		"more",
+		"phone",
+		"plus",
+		"qr-code",
+		"receipt",
+		"refresh",
+		"search",
+		"send",
+		"settings",
+		"share",
+		"star",
+		"success",
+		"trash",
+		"upload",
+		"user",
+		"users",
+		"wallet",
+		"warning",
+		"water",
+		"wifi"
+	];
+	const Carousel = defineComponent({
+		name: "Carousel",
+		props: {
+			autoplay: "boolean",
+			interval: "number",
+			loop: "boolean",
+			indicator: ["dots", "none"],
+			gap: SPACES,
+			effect: ["slide", "scale"],
+			index: "number"
+		},
+		events: ["change"],
+		children: "elements"
+	});
+	const Chip = defineComponent({
+		name: "Chip",
+		props: {
+			label: "string",
+			icon: ICON_NAMES,
+			selected: "boolean",
+			disabled: "boolean"
+		},
+		events: ["tap"],
+		children: "none"
+	});
+	const CodeInput = defineComponent({
+		name: "CodeInput",
+		props: {
+			value: "string",
+			length: "number",
+			label: "string",
+			hint: "string",
+			error: "string",
+			secure: "boolean",
+			disabled: "boolean"
+		},
+		events: ["change", "complete"],
+		children: "none"
+	});
+	const Divider = defineComponent({
+		name: "Divider",
+		children: "none"
+	});
+	const EmptyState = defineComponent({
+		name: "EmptyState",
+		props: {
+			icon: ICON_NAMES,
+			title: "string",
+			text: "string"
+		},
+		children: "elements"
+	});
+	const Spinner = defineComponent({
+		name: "Spinner",
+		props: { size: SIZES },
+		children: "none"
+	});
+	const ProgressBar = defineComponent({
+		name: "ProgressBar",
+		props: { value: "number" },
+		children: "none"
+	});
+	const Notice = defineComponent({
+		name: "Notice",
+		props: {
+			tone: STATUS_TONES,
+			title: "string"
+		},
+		children: "text"
+	});
+	const Badge = defineComponent({
+		name: "Badge",
+		props: { tone: STATUS_TONES },
+		children: "text"
+	});
+	const Footer = defineComponent({
+		name: "Footer",
+		children: "elements"
+	});
+	const Grid = defineComponent({
+		name: "Grid",
+		props: {
+			columns: "number",
+			gap: SPACES
+		},
+		children: "elements"
+	});
+	const GridItem = defineComponent({
+		name: "GridItem",
+		props: {
+			label: "string",
+			icon: ICON_NAMES,
+			image: "string",
+			badge: "string"
+		},
+		events: ["tap"],
+		children: "none"
+	});
+	const Icon = defineComponent({
+		name: "Icon",
+		props: {
+			name: ICON_NAMES,
+			size: SIZES,
+			tone: TONES
+		},
+		children: "none",
+		inline: true
+	});
+	const Image = defineComponent({
+		name: "Image",
+		props: {
+			src: "string",
+			alt: "string",
+			width: "number",
+			height: "number",
+			fit: ["cover", "contain"],
+			shape: [
+				"rounded",
+				"square",
+				"circle"
+			]
+		},
+		events: ["load", "error"],
+		children: "none"
+	});
+	const Input = defineComponent({
+		name: "Input",
+		props: {
+			value: "string",
+			placeholder: "string",
+			label: "string",
+			hint: "string",
+			error: "string",
+			prefix: "string",
+			suffix: "string",
+			type: [
+				"text",
+				"number",
+				"email",
+				"phone",
+				"password"
+			],
+			maxLength: "number",
+			disabled: "boolean"
+		},
+		events: ["change", "submit"],
+		children: "none"
+	});
+	const List = defineComponent({
+		name: "List",
+		children: "elements"
+	});
+	const ListItem = defineComponent({
+		name: "ListItem",
+		props: {
+			title: "string",
+			subtitle: "string",
+			value: "string",
+			icon: ICON_NAMES,
+			image: "string"
+		},
+		events: ["tap"],
+		children: "elements"
+	});
+	const Sheet = defineComponent({
+		name: "Sheet",
+		props: {
+			open: "boolean",
+			title: "string"
+		},
+		events: ["close"],
+		children: "elements"
+	});
+	const Toast = defineComponent({
+		name: "Toast",
+		props: {
+			message: "string",
+			tone: STATUS_TONES,
+			duration: "number"
+		},
+		events: ["hide"],
+		children: "none"
+	});
+	const QRCode = defineComponent({
+		name: "QRCode",
+		props: {
+			value: "string",
+			size: "number",
+			label: "string"
+		},
+		children: "none"
+	});
+	const Select = defineComponent({
+		name: "Select",
+		props: {
+			value: "string",
+			label: "string",
+			placeholder: "string",
+			hint: "string",
+			error: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "elements"
+	});
+	const Option = defineComponent({
+		name: "Option",
+		props: {
+			value: "string",
+			label: "string"
+		},
+		children: "none"
+	});
+	const Skeleton = defineComponent({
+		name: "Skeleton",
+		props: {
+			shape: [
+				"text",
+				"circle",
+				"box"
+			],
+			lines: "number",
+			height: "number"
+		},
+		children: "none"
+	});
+	const Tabs = defineComponent({
+		name: "Tabs",
+		props: {
+			value: "string",
+			variant: ["underline", "segmented"]
+		},
+		events: ["change"],
+		children: "elements"
+	});
+	const Tab = defineComponent({
+		name: "Tab",
+		props: {
+			value: "string",
+			label: "string",
+			badge: "number"
+		},
+		children: "none"
+	});
+	const Text = defineComponent({
+		name: "Text",
+		props: {
+			variant: [
+				"title",
+				"body",
+				"caption"
+			],
+			tone: TONES,
+			weight: [
+				"regular",
+				"medium",
+				"bold"
+			],
+			align: [
+				"start",
+				"center",
+				"end"
+			],
+			maxLines: "number"
+		},
+		children: "text",
+		inline: true
+	});
+	const TextArea = defineComponent({
+		name: "TextArea",
+		props: {
+			value: "string",
+			placeholder: "string",
+			label: "string",
+			hint: "string",
+			error: "string",
+			rows: "number",
+			maxLength: "number",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "none"
+	});
+	const Switch = defineComponent({
+		name: "Switch",
+		props: {
+			checked: "boolean",
+			label: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "none"
+	});
+	const Checkbox = defineComponent({
+		name: "Checkbox",
+		props: {
+			checked: "boolean",
+			label: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "none"
+	});
+	const RadioGroup = defineComponent({
+		name: "RadioGroup",
+		props: {
+			value: "string",
+			label: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "elements"
+	});
 	const builtinComponents = {
-		Button: defineComponent({
-			name: "Button",
-			props: {
-				variant: ["primary", "secondary"],
-				disabled: "boolean"
-			},
-			events: ["click"],
-			children: "text"
-		}),
-		Image: defineComponent({
-			name: "Image",
-			props: {
-				src: "string",
-				alt: "string",
-				width: "number",
-				height: "number"
-			},
-			events: ["load", "error"],
-			children: "none"
-		}),
-		Input: defineComponent({
-			name: "Input",
+		AmountInput,
+		Badge,
+		Button,
+		Carousel,
+		Checkbox,
+		Chip,
+		CodeInput,
+		Divider,
+		EmptyState,
+		Footer,
+		Grid,
+		GridItem,
+		Icon,
+		Image,
+		Input,
+		List,
+		ListItem,
+		Notice,
+		Option,
+		ProgressBar,
+		QRCode,
+		Radio: defineComponent({
+			name: "Radio",
 			props: {
 				value: "string",
-				placeholder: "string",
 				label: "string",
-				type: [
-					"text",
-					"number",
-					"email",
-					"phone",
-					"password"
-				],
-				maxLength: "number",
 				disabled: "boolean"
 			},
-			events: ["change", "submit"],
 			children: "none"
 		}),
-		Text: defineComponent({
-			name: "Text",
-			props: { variant: [
-				"title",
-				"body",
-				"caption"
-			] },
-			children: "text",
-			inline: true
-		}),
+		RadioGroup,
+		Select,
+		Sheet,
+		Skeleton,
+		Spinner,
+		Switch,
+		Tab,
+		Tabs,
+		Text,
+		TextArea,
+		Toast,
 		View: defineComponent({
 			name: "View",
 			props: {
+				gap: SPACES,
 				direction: ["column", "row"],
-				gap: [
-					"none",
-					"small",
-					"medium",
-					"large"
-				],
 				align: [
 					"stretch",
 					"start",
 					"center",
 					"end"
 				],
+				justify: [
+					"start",
+					"center",
+					"end",
+					"between"
+				],
+				wrap: "boolean",
+				grow: "boolean",
+				padding: SPACES,
+				paddingTop: SPACES,
+				paddingStart: SPACES,
+				paddingEnd: SPACES,
+				paddingBottom: SPACES,
 				variant: ["plain", "card"]
 			},
 			events: ["tap"],
@@ -88,6 +514,8 @@
 		})
 	};
 	componentRegistry(Object.values(builtinComponents));
+	const LABEL = "[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?";
+	new RegExp(`^(?:\\*\\.${LABEL}(?:\\.${LABEL})+|${LABEL}(?:\\.${LABEL})*)$`);
 	function createAdaptorTransport(adapter) {
 		return {
 			post: (message) => adapter.postMessage(message),
@@ -100,6 +528,12 @@
 	}
 	const SERVICE_URL = `/dot/logic/dot.js`;
 	//#endregion
+	//#region src/client/hot-reload.ts
+	function hotReloadIn(data) {
+		const reload = data?.dotHotReload;
+		return typeof reload === "number" ? reload : void 0;
+	}
+	//#endregion
 	//#region src/client/wire.ts
 	function isWire(data) {
 		return typeof data?.dot === "string";
@@ -117,6 +551,10 @@
 	const scope = globalThis;
 	globalThis.__hostTransport = wireTransport(createAdaptorTransport(scope));
 	scope.importScripts(SERVICE_URL);
+	scope.addEventListener("message", ({ data }) => {
+		const reload = hotReloadIn(data);
+		if (reload !== void 0) scope.importScripts(`${SERVICE_URL}?hot=${reload}`);
+	});
 	//#endregion
 })();