<script setup>
// 常用属性：
//   label - 显示文字
//   outlined - 显示有边框的样式
//   icon - 显示Icon
//   link - 以链接的方式显示当前按钮
//   severity - 类型："success" | "help" | "secondary" | "info" | "warn" | "danger" | "contrast"
//   rounded - 圆角形式的按钮
//   loading - 加载状态的按钮
//   text - 文字形式的按钮
//   size - 按钮尺寸："small" | "large"
//   badge - 显示Badge数字
//   badgeSeverity - Badge类型
//   badgeClass - Badge样式表Class
//   type - 按钮类型：submit, reset, button, ...
//   disabled <bool> 是否禁用
//   as <string> 标签名

import Button from "primevue/button";
import T from "./T.js";
import {ref, watch} from "vue";

const severities = ["success", "help", "secondary", "info", "warn", "danger", "contrast", "warning", "error"]
const props = defineProps(["severity", "success", "help", "secondary", "info", "warn", "danger", "contrast", "warning", "error"])
const severity = ref(T.composeSeverity(props, severities, {
	"warning": "warn",
	"error": "danger"
}))

watch(props, () => {
	severity.value = T.composeSeverity(props, severities, {
		"warning": "warn",
		"error": "danger"
	})
})

</script>

<template>
	<Button :severity="severity">
		<slot></slot>
	</Button>
</template>

<style scoped lang="postcss">
tr:hover .p-button-secondary {
	@apply border-gray-200 dark:border-gray-700;
}
</style>