<script setup>
import { computed } from "vue";
import { useNamespace } from "@yh-ui/hooks";
import { useComponentTheme } from "@yh-ui/theme";
defineOptions({ name: "YhTypographyText" });
const props = defineProps({
  type: { type: String, required: false },
  bold: { type: Boolean, required: false, default: false },
  delete: { type: Boolean, required: false, default: false },
  underline: { type: Boolean, required: false, default: false },
  italic: { type: Boolean, required: false, default: false },
  mark: { type: Boolean, required: false, default: false },
  code: { type: Boolean, required: false, default: false },
  keyboard: { type: Boolean, required: false, default: false },
  ellipsis: { type: Boolean, required: false, default: false },
  size: { type: String, required: false },
  tag: { type: String, required: false, default: "span" },
  themeOverrides: { type: null, required: false }
});
const ns = useNamespace("typography");
const { themeStyle } = useComponentTheme(
  "typography",
  computed(() => props.themeOverrides)
);
const textClasses = computed(() => [
  ns.e("text"),
  props.type && ns.em("text", props.type),
  props.size && ns.em("text", props.size),
  props.bold && ns.is("bold"),
  props.delete && ns.is("delete"),
  props.underline && ns.is("underline"),
  props.italic && ns.is("italic"),
  props.code && ns.is("code"),
  props.keyboard && ns.is("keyboard"),
  props.ellipsis && ns.is("ellipsis")
]);
</script>

<template>
  <component :is="tag" :class="textClasses" :style="themeStyle">
    <mark v-if="mark">
      <slot />
    </mark>
    <code v-else-if="code"><slot /></code>
    <kbd v-else-if="keyboard">
      <slot />
    </kbd>
    <slot v-else />
  </component>
</template>

<style>
@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-typography__title {
  margin: 0 0 0.5em;
  color: var(--yh-typography-title-color, var(--yh-text-color-primary, #303133));
  font-weight: var(--yh-typography-title-weight, 600);
  line-height: var(--yh-typography-line-height, 1.5);
}
.yh-typography__title--h1 {
  font-size: var(--yh-typography-h1-size, 32px);
}

.yh-typography__title--h2 {
  font-size: var(--yh-typography-h2-size, 28px);
}

.yh-typography__title--h3 {
  font-size: var(--yh-typography-h3-size, 24px);
}

.yh-typography__title--h4 {
  font-size: var(--yh-typography-h4-size, 20px);
}

.yh-typography__title--h5 {
  font-size: var(--yh-typography-h5-size, 16px);
}

.yh-typography__title--h6 {
  font-size: var(--yh-typography-h6-size, 14px);
}

.yh-typography__title--primary {
  color: var(--yh-color-primary);
}

.yh-typography__title--success {
  color: var(--yh-color-success);
}

.yh-typography__title--warning {
  color: var(--yh-color-warning);
}

.yh-typography__title--danger {
  color: var(--yh-color-danger);
}

.yh-typography__title--info {
  color: var(--yh-color-info);
}

.yh-typography__title--secondary {
  color: var(--yh-text-color-secondary, #909399);
}

.yh-typography__text {
  color: var(--yh-typography-text-color, var(--yh-text-color-regular, #606266));
  font-size: var(--yh-typography-text-size, 14px);
  line-height: var(--yh-typography-line-height, 1.5);
}
.yh-typography__text--small {
  font-size: 12px;
}

.yh-typography__text--default {
  font-size: 14px;
}

.yh-typography__text--large {
  font-size: 16px;
}

.yh-typography__text--primary {
  color: var(--yh-color-primary);
}

.yh-typography__text--success {
  color: var(--yh-color-success);
}

.yh-typography__text--warning {
  color: var(--yh-color-warning);
}

.yh-typography__text--danger {
  color: var(--yh-color-danger);
}

.yh-typography__text--info {
  color: var(--yh-color-info);
}

.yh-typography__text--secondary {
  color: var(--yh-text-color-secondary, #909399);
}

.yh-typography__paragraph {
  margin: 0 0 1em;
  color: var(--yh-typography-text-color, var(--yh-text-color-regular, #606266));
  font-size: var(--yh-typography-text-size, 14px);
  line-height: var(--yh-typography-paragraph-line-height, 1.8);
}
.yh-typography__paragraph--left {
  text-align: left;
}

.yh-typography__paragraph--center {
  text-align: center;
}

.yh-typography__paragraph--right {
  text-align: right;
}

.yh-typography__paragraph--justify {
  text-align: justify;
}

.yh-typography__paragraph--compact {
  margin-bottom: 0.5em;
}

.yh-typography__paragraph--default {
  margin-bottom: 1em;
}

.yh-typography__paragraph--loose {
  margin-bottom: 1.5em;
}

.yh-typography__paragraph--primary {
  color: var(--yh-color-primary);
}

.yh-typography__paragraph--success {
  color: var(--yh-color-success);
}

.yh-typography__paragraph--warning {
  color: var(--yh-color-warning);
}

.yh-typography__paragraph--danger {
  color: var(--yh-color-danger);
}

.yh-typography__paragraph--info {
  color: var(--yh-color-info);
}

.yh-typography__paragraph--secondary {
  color: var(--yh-text-color-secondary, #909399);
}

.yh-typography__link {
  display: inline;
  color: var(--yh-typography-link-color, var(--yh-color-primary, #409eff));
  font-size: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s, opacity 0.2s;
}
.yh-typography__link:hover {
  color: var(--yh-typography-link-hover-color, var(--yh-color-primary-light-3, #79bbff));
}
.yh-typography__link.is-underline {
  text-decoration: underline;
}

.yh-typography__link.is-disabled {
  color: var(--yh-text-color-disabled, #c0c4cc);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}

.yh-typography__link--success {
  color: var(--yh-color-success);
}
.yh-typography__link--success:hover {
  opacity: 0.8;
}

.yh-typography__link--warning {
  color: var(--yh-color-warning);
}
.yh-typography__link--warning:hover {
  opacity: 0.8;
}

.yh-typography__link--danger {
  color: var(--yh-color-danger);
}
.yh-typography__link--danger:hover {
  opacity: 0.8;
}

.yh-typography__link--info {
  color: var(--yh-color-info);
}
.yh-typography__link--info:hover {
  opacity: 0.8;
}

.yh-typography .is-bold {
  font-weight: 700;
}
.yh-typography .is-delete {
  text-decoration: line-through;
}
.yh-typography .is-underline {
  text-decoration: underline;
}
.yh-typography .is-italic {
  font-style: italic;
}
.yh-typography .is-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yh-typography .is-code code,
.yh-typography .is-keyboard kbd {
  padding: 2px 6px;
  font-size: 0.875em;
  font-family: var(--yh-font-family-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
  border-radius: var(--yh-border-radius-small, 2px);
}
.yh-typography .is-code code {
  background: var(--yh-fill-color-light, #f5f7fa);
  border: 1px solid var(--yh-border-color-lighter, #e4e7ed);
  color: var(--yh-color-danger, #f56c6c);
}
.yh-typography .is-keyboard kbd {
  background: var(--yh-fill-color-lighter, #fafcff);
  border: 1px solid var(--yh-border-color, #dcdfe6);
  box-shadow: 0 1px 0 var(--yh-border-color-light, #e4e7ed);
  color: var(--yh-text-color-regular, #606266);
}
.yh-typography mark {
  padding: 0 2px;
  background-color: var(--yh-typography-mark-bg, #ffe58f);
  color: inherit;
}
</style>
