<script setup>
import { computed } from "vue";
import { useNamespace } from "@yh-ui/hooks";
import { useComponentTheme } from "@yh-ui/theme";
import { dividerProps } from "./divider";
defineOptions({
  name: "YhDivider"
});
const props = defineProps(dividerProps);
const ns = useNamespace("divider");
const { themeStyle } = useComponentTheme(
  "divider",
  computed(() => props.themeOverrides)
);
const dividerStyle = computed(() => {
  const styles = {
    "--yh-divider-border-style": props.borderStyle
  };
  if (props.color) {
    styles["--yh-divider-border-color"] = props.color;
  }
  if (props.borderWidth) {
    styles["--yh-divider-border-width"] = typeof props.borderWidth === "number" ? `${props.borderWidth}px` : props.borderWidth;
  }
  return { ...themeStyle.value, ...styles };
});
const classes = computed(() => [
  ns.b(),
  ns.m(props.direction),
  props.contentPosition !== "center" ? ns.m(`content-${props.contentPosition}`) : ""
]);
</script>

<template>
  <div :class="classes" :style="dividerStyle" role="separator">
    <div
      v-if="$slots.default && direction !== 'vertical'"
      :class="[ns.e('text'), ns.is(contentPosition)]"
    >
      <slot />
    </div>
  </div>
</template>

<style>
@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-divider {
  --yh-divider-border-color: var(--yh-border-color-lighter, #dcdfe6);
  --yh-divider-border-width: 1px;
  --yh-divider-border-style: solid;
  --yh-divider-margin-horizontal: 24px 0;
  --yh-divider-margin-vertical: 0 8px;
  --yh-divider-text-color: var(--yh-text-color-primary, #303133);
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.yh-divider--horizontal {
  display: flex;
  width: 100%;
  margin: var(--yh-divider-margin-horizontal);
}
.yh-divider--horizontal::before, .yh-divider--horizontal::after {
  content: "";
  flex: 1;
  border-top: var(--yh-divider-border-width) var(--yh-divider-border-style) var(--yh-divider-border-color);
}

.yh-divider--vertical {
  display: inline-block;
  width: 0;
  min-height: 1em;
  margin: var(--yh-divider-margin-vertical);
  vertical-align: middle;
  position: relative;
  border-left: var(--yh-divider-border-width) var(--yh-divider-border-style) var(--yh-divider-border-color);
}

.yh-divider--content-left::before {
  flex: 0 0 5%;
}

.yh-divider--content-right::after {
  flex: 0 0 5%;
}

.yh-divider__text {
  padding: 0 16px;
  font-weight: 500;
  color: var(--yh-divider-text-color);
  font-size: 14px;
  white-space: nowrap;
}
</style>
