<script setup>
import { computed, provide } from "vue";
import { useNamespace } from "@yh-ui/hooks";
import { useComponentTheme } from "@yh-ui/theme";
import { rowProps, rowContextKey } from "./row";
defineOptions({
  name: "YhRow"
});
const props = defineProps(rowProps);
const ns = useNamespace("row");
const { themeStyle } = useComponentTheme(
  "row",
  computed(() => props.themeOverrides)
);
const gutter = computed(() => props.gutter);
provide(rowContextKey, {
  gutter
});
const style = computed(() => {
  const styles = {
    ...themeStyle.value
  };
  if (!props.gutter) {
    return styles;
  }
  styles.marginLeft = `-${props.gutter / 2}px`;
  styles.marginRight = `-${props.gutter / 2}px`;
  return styles;
});
const rowClasses = computed(() => [
  ns.b(),
  ns.is(`justify-${props.justify}`, props.justify !== "start"),
  ns.is(`align-${props.align}`, props.align !== "top")
]);
</script>

<template>
  <component :is="tag" :class="rowClasses" :style="style">
    <slot />
  </component>
</template>

<style>
@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-row {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  box-sizing: border-box;
}
.yh-row.is-justify-center {
  justify-content: center;
}

.yh-row.is-justify-end {
  justify-content: flex-end;
}

.yh-row.is-justify-space-between {
  justify-content: space-between;
}

.yh-row.is-justify-space-around {
  justify-content: space-around;
}

.yh-row.is-justify-space-evenly {
  justify-content: space-evenly;
}

.yh-row.is-align-middle {
  align-items: center;
}

.yh-row.is-align-bottom {
  align-items: flex-end;
}
</style>
