Newer
Older
vmk-ui-kit / src / vue / utils.js
@Eugene Sukhodolskiy Eugene Sukhodolskiy 1 day ago 2 KB Implement Button component and Vue adapter
import { h } from "vue";
import VmkIcon from "./components/Icon.js";

export const variants = new Set([
	"primary",
	"secondary",
	"accent",
	"success",
	"warning",
	"danger",
	"error",
	"info"
]);

export function cx(...items) {
	return items
		.flatMap(item => {
			if (!item) {
				return [];
			}

			if (Array.isArray(item)) {
				return item;
			}

			if (typeof item === "object") {
				return Object.entries(item)
					.filter(([, enabled]) => enabled)
					.map(([name]) => name);
			}

			return [item];
		})
		.filter(Boolean)
		.join(" ");
}

export function normalizeVariant(value, fallback = "primary") {
	return variants.has(value) ? value : fallback;
}

const SIZE_MAP = {
	xxs: "btn-xxs",
	xs: "btn-xs",
	sm: "btn-sm",
	md: "btn-md",
	lg: "btn-lg"
};

export function normalizeSize(value, fallback = "btn-md") {
	return SIZE_MAP[value] || fallback;
}

const PHOSPHOR_TO_VMK = {
	spinner: "essentials/loading",
	loader: "essentials/loading",
	loading: "essentials/loading",
	"arrow-right": "arrows/arrow/right",
	"arrow-left": "arrows/arrow/left",
	"arrow-up": "arrows/arrow/up",
	"arrow-down": "arrows/arrow/down",
	"chevron-right": "arrows/chevron/right",
	"chevron-left": "arrows/chevron/left",
	"chevron-up": "arrows/chevron/up",
	"chevron-down": "arrows/chevron/down",
	plus: "essentials/plus",
	minus: "essentials/minus",
	x: "essentials/close-cross",
	close: "essentials/close-cross",
	check: "essentials/check",
	user: "essentials/user",
	trash: "essentials/trash",
	information: "essentials/information/circle",
	info: "essentials/information/circle",
	alert: "essentials/alert-sign",
	warning: "essentials/alert-sign",
	danger: "essentials/alert/circle",
	error: "essentials/alert/circle",
	success: "essentials/check/circle"
};

const PHOSPHOR_PREFIX_RE = /^ph[-\s]/;

export function iconNode(icon, extraClass = "") {
	if (!icon) {
		return null;
	}

	let name = icon.trim();

	// Accept legacy Phosphor prefixes (ph-plus, ph bold ph-spinner, etc).
	if (PHOSPHOR_PREFIX_RE.test(name)) {
		name = name.slice(3).trim();
	}

	// If the name already looks like a VMK key, use it directly.
	if (!name.includes("/")) {
		name = PHOSPHOR_TO_VMK[name] || `essentials/${name}`;
	}

	return h(VmkIcon, {
		name,
		class: extraClass
	});
}