Newer
Older
vmk-ui-kit / src / vue / components / GnDivider.js
/**
 * GnDivider - Horizontal or vertical divider.
 * Keeps API compatible with gnexus-ui-kit.
 */

import { defineComponent, h } from "vue";
import { cx } from "../utils.js";

export default defineComponent({
	name: "GnDivider",
	props: {
		orientation: { type: String, default: "horizontal" },
		variant: { type: String, default: "default" },
		dashed: { type: Boolean, default: false }
	},
	setup(props, { slots }) {
		return () => h("hr", {
			class: cx("divider", {
				"divider-strong": props.variant === "strong",
				"divider-dashed": props.dashed,
				"divider-vertical": props.orientation === "vertical"
			}),
			"data-variant": props.variant !== "default" ? props.variant : undefined,
			"data-orientation": props.orientation !== "horizontal" ? props.orientation : undefined,
			"aria-hidden": "true"
		}, slots.default?.());
	}
});