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

package/dist/index.js

@@ -87,17 +87,251 @@ var SourceError = class extends Error {
 	}
 };
 //#endregion
+//#region src/view/components/amount-input.ts
+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"
+});
+//#endregion
 //#region src/view/components/button.ts
 const Button = defineComponent({
 	name: "Button",
 	props: {
 		variant: ["primary", "secondary"],
-		disabled: "boolean"
+		disabled: "boolean",
+		loading: "boolean"
 	},
 	events: ["click"],
 	children: "text"
 });
 //#endregion
+//#region src/view/components/options.ts
+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"
+];
+//#endregion
+//#region src/view/components/carousel.ts
+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"
+});
+//#endregion
+//#region src/view/components/chip.ts
+const Chip = defineComponent({
+	name: "Chip",
+	props: {
+		label: "string",
+		icon: ICON_NAMES,
+		selected: "boolean",
+		disabled: "boolean"
+	},
+	events: ["tap"],
+	children: "none"
+});
+//#endregion
+//#region src/view/components/code-input.ts
+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"
+});
+//#endregion
+//#region src/view/components/divider.ts
+const Divider = defineComponent({
+	name: "Divider",
+	children: "none"
+});
+//#endregion
+//#region src/view/components/empty-state.ts
+const EmptyState = defineComponent({
+	name: "EmptyState",
+	props: {
+		icon: ICON_NAMES,
+		title: "string",
+		text: "string"
+	},
+	children: "elements"
+});
+//#endregion
+//#region src/view/components/feedback.ts
+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"
+});
+//#endregion
+//#region src/view/components/footer.ts
+const Footer = defineComponent({
+	name: "Footer",
+	children: "elements"
+});
+//#endregion
+//#region src/view/components/grid.ts
+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"
+});
+//#endregion
+//#region src/view/components/icon.ts
+const Icon = defineComponent({
+	name: "Icon",
+	props: {
+		name: ICON_NAMES,
+		size: SIZES,
+		tone: TONES
+	},
+	children: "none",
+	inline: true
+});
+//#endregion
 //#region src/view/components/image.ts
 const Image = defineComponent({
 	name: "Image",
@@ -105,7 +339,13 @@ const Image = defineComponent({
 		src: "string",
 		alt: "string",
 		width: "number",
-		height: "number"
+		height: "number",
+		fit: ["cover", "contain"],
+		shape: [
+			"rounded",
+			"square",
+			"circle"
+		]
 	},
 	events: ["load", "error"],
 	children: "none"
@@ -118,6 +358,10 @@ const Input = defineComponent({
 		value: "string",
 		placeholder: "string",
 		label: "string",
+		hint: "string",
+		error: "string",
+		prefix: "string",
+		suffix: "string",
 		type: [
 			"text",
 			"number",
@@ -132,35 +376,223 @@ const Input = defineComponent({
 	children: "none"
 });
 //#endregion
+//#region src/view/components/list.ts
+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"
+});
+//#endregion
+//#region src/view/components/overlays.ts
+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"
+});
+//#endregion
+//#region src/view/components/qr-code.ts
+const QRCode = defineComponent({
+	name: "QRCode",
+	props: {
+		value: "string",
+		size: "number",
+		label: "string"
+	},
+	children: "none"
+});
+//#endregion
+//#region src/view/components/select.ts
+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"
+});
+//#endregion
+//#region src/view/components/skeleton.ts
+const Skeleton = defineComponent({
+	name: "Skeleton",
+	props: {
+		shape: [
+			"text",
+			"circle",
+			"box"
+		],
+		lines: "number",
+		height: "number"
+	},
+	children: "none"
+});
+//#endregion
+//#region src/view/components/tabs.ts
+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"
+});
+//#endregion
 //#region src/view/components/text.ts
 const Text = defineComponent({
 	name: "Text",
-	props: { variant: [
-		"title",
-		"body",
-		"caption"
-	] },
+	props: {
+		variant: [
+			"title",
+			"body",
+			"caption"
+		],
+		tone: TONES,
+		weight: [
+			"regular",
+			"medium",
+			"bold"
+		],
+		align: [
+			"start",
+			"center",
+			"end"
+		],
+		maxLines: "number"
+	},
 	children: "text",
 	inline: true
 });
 //#endregion
+//#region src/view/components/text-area.ts
+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"
+});
+//#endregion
+//#region src/view/components/toggles.ts
+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 Radio = defineComponent({
+	name: "Radio",
+	props: {
+		value: "string",
+		label: "string",
+		disabled: "boolean"
+	},
+	children: "none"
+});
+//#endregion
 //#region src/view/components/view.ts
 const 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"],
@@ -169,10 +601,39 @@ const View = defineComponent({
 //#endregion
 //#region src/view/components/index.ts
 const builtinComponents = {
+	AmountInput,
+	Badge,
 	Button,
+	Carousel,
+	Checkbox,
+	Chip,
+	CodeInput,
+	Divider,
+	EmptyState,
+	Footer,
+	Grid,
+	GridItem,
+	Icon,
 	Image,
 	Input,
+	List,
+	ListItem,
+	Notice,
+	Option,
+	ProgressBar,
+	QRCode,
+	Radio,
+	RadioGroup,
+	Select,
+	Sheet,
+	Skeleton,
+	Spinner,
+	Switch,
+	Tab,
+	Tabs,
 	Text,
+	TextArea,
+	Toast,
 	View
 };
 const builtinRegistry = componentRegistry(Object.values(builtinComponents));
@@ -192,10 +653,11 @@ var EventEmitter = class {
 };
 //#endregion
 //#region src/event/core.ts
-function createEvent(type, detail = {}) {
+function createEvent(type, detail = {}, data = {}) {
 	return {
 		type,
-		detail
+		detail,
+		data
 	};
 }
 //#endregion
@@ -244,6 +706,33 @@ function isPermission(value) {
 	return PERMISSIONS.includes(value);
 }
 //#endregion
+//#region src/host/files.ts
+const DOT_FILE_PATH_MAX_LENGTH = 512;
+const MAX_NAME_LENGTH = 255;
+function dotFilePathProblem(path, { allowRoot = false } = {}) {
+	if (path === "") return allowRoot ? null : "A path is needed, such as \"receipts/42.pdf\"";
+	if (path.length > 512) return `"${path.slice(0, 40)}…" is longer than 512 characters`;
+	if (path.startsWith("/")) return `"${path}" starts with "/": paths are relative to the dot's storage, such as "receipts/42.pdf"`;
+	if ([...path].some((char) => char === "\\" || char.charCodeAt(0) < 32)) return `"${path}" has a backslash or a control character`;
+	for (const name of path.split("/")) {
+		if (name === "" || name === "." || name === "..") return `"${path}" has an empty, "." or ".." part: write each folder once, such as "receipts/42.pdf"`;
+		if (name.length > MAX_NAME_LENGTH) return `"${path}" has a name longer than ${MAX_NAME_LENGTH} characters`;
+	}
+	return null;
+}
+//#endregion
+//#region src/host/network.ts
+const LABEL = "[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?";
+const NETWORK_HOST_PATTERN = new RegExp(`^(?:\\*\\.${LABEL}(?:\\.${LABEL})+|${LABEL}(?:\\.${LABEL})*)$`);
+const NETWORK_HOST_MAX_LENGTH = 253;
+function isNetworkHost(value) {
+	return value.length <= 253 && NETWORK_HOST_PATTERN.test(value);
+}
+function allowsHost(hosts, host) {
+	const name = host.toLowerCase().replace(/\.$/, "");
+	return hosts.some((pattern) => pattern.startsWith("*.") ? name.endsWith(pattern.slice(1)) : name === pattern);
+}
+//#endregion
 //#region src/version/semantic-version.ts
 const SEMVER_PATTERN = /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/;
 function isSemanticVersion(value) {
@@ -405,6 +894,42 @@ function applyChanges(state, changes) {
 	return next;
 }
 //#endregion
+//#region src/page/bars.ts
+const HEX_COLOR = /^#[0-9a-fA-F]{6}$/;
+function checkNavigationBar(options) {
+	const { title, hidden, backgroundColor, textColor } = options;
+	if (title !== void 0 && typeof title !== "string") throw new TypeError("The navigation bar's title must be text");
+	if (hidden !== void 0 && typeof hidden !== "boolean") throw new TypeError("The navigation bar's `hidden` must be true or false");
+	for (const [name, color] of Object.entries({
+		backgroundColor,
+		textColor
+	})) if (color !== void 0 && (typeof color !== "string" || !HEX_COLOR.test(color))) throw new TypeError(`The navigation bar's ${name} must be a color such as "#1A73E8"`);
+}
+function checkTabBar(options) {
+	if (options.hidden !== void 0 && typeof options.hidden !== "boolean") throw new TypeError("The tab bar's `hidden` must be true or false");
+}
+function checkConfigs(configs) {
+	checkNavigationBar(configs.navigationBar ?? {});
+	checkTabBar(configs.tabBar ?? {});
+}
+function mergeConfigs(...configs) {
+	const bars = {
+		navigationBar: {},
+		tabBar: {}
+	};
+	for (const config of configs) {
+		bars.navigationBar = {
+			...bars.navigationBar,
+			...config?.navigationBar
+		};
+		bars.tabBar = {
+			...bars.tabBar,
+			...config?.tabBar
+		};
+	}
+	return bars;
+}
+//#endregion
 //#region src/messageChannel.ts
 var MessageChannel = class {
 	#transport;
@@ -440,6 +965,6 @@ var MessageChannel = class {
 	}
 };
 //#endregion
-export { Button, DEFAULT_SYSTEM_CONTEXT, EventEmitter, HostError, Image, Input, MAX_STACK_DEPTH, MessageChannel, NavigationStack, PAGE_HOOKS, PERMISSIONS, REACT_HOST_MODULES, REACT_HOST_PATH, SEMVER_PATTERN, SourceError, Text, View, applyChanges, builtinComponents, builtinRegistry, callHost, compareVersions, componentRegistry, connectHost, createAdaptorTransport, createEvent, createHostRequest, createLocator, createTransportPair, defineComponent, eventName, eventProp, hostTransport, isEventProp, isPageId, isPermission, isReactCompatible, isSemanticVersion, isVersionAtLeast, locatedMessage, locationAt, majorVersion, newestReactOfMajor, reactHostUrl, toList, toText };
+export { AmountInput, Badge, Button, Carousel, Checkbox, Chip, CodeInput, DEFAULT_SYSTEM_CONTEXT, DOT_FILE_PATH_MAX_LENGTH, Divider, EmptyState, EventEmitter, Footer, Grid, GridItem, HostError, ICON_NAMES, Icon, Image, Input, List, ListItem, MAX_STACK_DEPTH, MessageChannel, NETWORK_HOST_MAX_LENGTH, NETWORK_HOST_PATTERN, NavigationStack, Notice, Option, PAGE_HOOKS, PERMISSIONS, ProgressBar, QRCode, REACT_HOST_MODULES, REACT_HOST_PATH, Radio, RadioGroup, SEMVER_PATTERN, SIZES, STATUS_TONES, Select, Sheet, Skeleton, SourceError, Spinner, Switch, TONES, Tab, Tabs, Text, TextArea, Toast, View, allowsHost, applyChanges, builtinComponents, builtinRegistry, callHost, checkConfigs, checkNavigationBar, checkTabBar, compareVersions, componentRegistry, connectHost, createAdaptorTransport, createEvent, createHostRequest, createLocator, createTransportPair, defineComponent, dotFilePathProblem, eventName, eventProp, hostTransport, isEventProp, isNetworkHost, isPageId, isPermission, isReactCompatible, isSemanticVersion, isVersionAtLeast, locatedMessage, locationAt, majorVersion, mergeConfigs, newestReactOfMajor, reactHostUrl, toList, toText };
 
 //# sourceMappingURL=index.js.map