iceshrimp/packages/client/src/components/MkTab.vue

<script lang="ts">
import { defineComponent, h, resolveDirective, withDirectives } from "vue";

export default defineComponent({
	props: {
		modelValue: {
			required: true,
		},
		style: {
			required: false,
		},
	},
	render() {
		const options = this.$slots.default();

		return h(
			"div",
			{
				class: [
					"pxhvhrfw",
					{ chips: this.style === "chips" },
					{ underline: this.style === "underline" },
				],
				role: "tablist",
			},
			options.map((option) =>
				withDirectives(
					h(
						"button",
						{
							class: "_button",
							role: "tab",
							key: option.key,
							"aria-selected":
								this.modelValue === option.props?.value
									? "true"
									: "false",
							onClick: () => {
								this.$emit(
									"update:modelValue",
									option.props?.value
								);
							},
						},
						option.children
					),
					[[resolveDirective("click-anime")]]
				)
			)
		);
	},
});
</script>

<style lang="scss">
.pxhvhrfw {
	display: flex;
	font-size: 90%;
	border-radius: var(--radius);
	padding: 10px 8px;

	> button {
		flex: 1;
		padding: 10px 8px;
		margin: 0 8px;
		border-radius: var(--radius);

		&:disabled {
			opacity: 1 !important;
			cursor: default;
		}

		&[aria-selected="true"] {
			color: var(--accent);
			background: var(--accentedBg) !important;
		}

		&:not([aria-selected="true"]):hover {
			color: var(--fgHighlighted);
			background: var(--panelHighlight);
		}

		&:not(:first-child) {
			margin-left: 8px;
		}

		> .icon {
			margin-right: 6px;
		}

		&:empty {
			display: none !important;
		}
	}

	&.chips,
	&.underline {
		padding: 12px 32px;
		font-size: 0.85em;
		overflow-x: auto;
		mask: linear-gradient(to right, black calc(100% - 90px), transparent);
		-webkit-mask: linear-gradient(
			to right,
			black calc(100% - 90px),
			transparent
		);
		padding-right: 90px !important;
		&::-webkit-scrollbar {
			display: none;
		}
		> button {
			display: flex;
			gap: 6px;
			align-items: center;
			flex: unset;
			margin: 0;
			margin-right: 8px;
			padding: 0.5em 1em;
			border-radius: 100px;
			background: var(--buttonBg);
			> i {
				margin-top: -0.1em;
			}
			> .count {
				margin-right: -0.2em;
			}
		}
	}

	&.underline {
		padding-block: 0 !important;
		margin-bottom: -1px;
		border-radius: 0;
		button {
			background: none !important;
			border-radius: 0 !important;
			padding-block: 10px !important;
			border-bottom: 2px solid transparent;
			&[aria-selected="true"] {
				background: none !important;
				font-weight: 700;
				border-bottom-color: var(--accent);
			}
		}
	}

	&.max-width_500px {
		font-size: 80%;

		> button {
			padding: 11px 8px;
		}
	}
}
</style>