@coffic/cosy-ui 0.7.4 → 0.8.6

package/dist/src-astro/container/Container.astro

@@ -0,0 +1,211 @@
+---
+/**
+ * @component Container
+ *
+ * @description
+ * Container 组件是一个基础的布局容器，用于限制内容宽度并居中显示。
+ * 它提供了多种尺寸和内边距选项，适用于各种布局需求。
+ *
+ * @design
+ * 设计理念：
+ * 1. 内容约束 - 限制内容宽度，提高可读性和视觉美感
+ * 2. 响应式设计 - 在不同屏幕尺寸下自动调整内边距
+ * 3. 灵活配置 - 支持多种尺寸和内边距选项
+ * 4. 简单易用 - 提供直观的API，易于集成到各种页面布局中
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Container>
+ *   <p>内容将被限制在一个合理的宽度内并居中显示</p>
+ * </Container>
+ * ```
+ *
+ * 自定义尺寸和内边距：
+ * ```astro
+ * <Container size="sm" padding="lg">
+ *   <p>小尺寸容器，大内边距</p>
+ * </Container>
+ * ```
+ *
+ * 全宽容器：
+ * ```astro
+ * <Container size="full" padding="none">
+ *   <p>全宽容器，无内边距</p>
+ * </Container>
+ * ```
+ *
+ * 不居中的容器：
+ * ```astro
+ * <Container centered={false}>
+ *   <p>不居中的容器，靠左对齐</p>
+ * </Container>
+ * ```
+ *
+ * 带边框的容器：
+ * ```astro
+ * <Container border>
+ *   <p>带有边框的容器</p>
+ * </Container>
+ * ```
+ *
+ * Flex布局容器（按行排列）：
+ * ```astro
+ * <Container flex="row" gap="md">
+ *   <div>第一项</div>
+ *   <div>第二项</div>
+ * </Container>
+ * ```
+ *
+ * Flex布局容器（按列排列）：
+ * ```astro
+ * <Container flex="col" gap="md" items="center" justify="between">
+ *   <div>第一项</div>
+ *   <div>第二项</div>
+ * </Container>
+ * ```
+ */
+
+import type { HTMLAttributes } from 'astro/types';
+import '../../style.ts';
+
+interface Props extends HTMLAttributes<'div'> {
+  /**
+   * 容器尺寸
+   * @default "md"
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+  /**
+   * 内边距大小
+   * @default "md"
+   */
+  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /**
+   * 是否居中显示
+   * @default true
+   */
+  centered?: boolean;
+
+  /**
+   * 是否显示边框
+   * @default false
+   */
+  border?: boolean;
+
+  /**
+   * flex布局方向，不设置则不启用flex布局
+   */
+  flex?: 'row' | 'col' | 'row-reverse' | 'col-reverse';
+
+  /**
+   * flex项目间距
+   * @default "none"
+   */
+  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /**
+   * flex项目水平对齐方式
+   */
+  items?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+
+  /**
+   * flex项目垂直对齐方式
+   */
+  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+
+  /**
+   * 自定义类名
+   */
+  class?: string;
+
+  /**
+   * 类名列表
+   */
+  'class:list'?: any;
+}
+
+const {
+  size = 'md',
+  padding = 'md',
+  centered = true,
+  border = false,
+  flex,
+  gap = 'none',
+  items,
+  justify,
+  class: className = '',
+  'class:list': classList,
+  ...rest
+} = Astro.props;
+
+// 静态类名映射
+const sizeClasses = {
+  xs: 'cosy:max-w-xs',
+  sm: 'cosy:max-w-sm',
+  md: 'cosy:max-w-2xl',
+  lg: 'cosy:max-w-4xl',
+  xl: 'cosy:max-w-6xl',
+  full: 'cosy:w-full',
+} as const;
+
+const paddingClasses = {
+  none: 'cosy:p-0',
+  sm: 'cosy:p-2',
+  md: 'cosy:p-4',
+  lg: 'cosy:p-6',
+  xl: 'cosy:p-8',
+} as const;
+
+const flexClasses = {
+  row: 'cosy:flex cosy:flex-row',
+  col: 'cosy:flex cosy:flex-col',
+  'row-reverse': 'cosy:flex cosy:flex-row-reverse',
+  'col-reverse': 'cosy:flex cosy:flex-col-reverse',
+} as const;
+
+const gapClasses = {
+  none: 'cosy:gap-0',
+  xs: 'cosy:gap-1',
+  sm: 'cosy:gap-2',
+  md: 'cosy:gap-4',
+  lg: 'cosy:gap-6',
+  xl: 'cosy:gap-8',
+} as const;
+
+const itemsClasses = {
+  start: 'cosy:items-start',
+  end: 'cosy:items-end',
+  center: 'cosy:items-center',
+  baseline: 'cosy:items-baseline',
+  stretch: 'cosy:items-stretch',
+} as const;
+
+const justifyClasses = {
+  start: 'cosy:justify-start',
+  end: 'cosy:justify-end',
+  center: 'cosy:justify-center',
+  between: 'cosy:justify-between',
+  around: 'cosy:justify-around',
+  evenly: 'cosy:justify-evenly',
+} as const;
+
+// 构建CSS类名
+const containerClasses = [
+  'cosy:w-full',
+  centered ? 'cosy:mx-auto' : '',
+  sizeClasses[size],
+  paddingClasses[padding],
+  border ? 'cosy:border cosy:rounded-lg' : '',
+  flex ? flexClasses[flex] : '',
+  flex ? gapClasses[gap] : '',
+  items && flex ? itemsClasses[items] : '',
+  justify && flex ? justifyClasses[justify] : '',
+  className,
+];
+---
+
+<section class:list={[containerClasses, classList]} {...rest}>
+  <slot />
+</section>

package/dist/src-astro/container/EContainerBasic.astro

@@ -0,0 +1,15 @@
+---
+/**
+ * @component Container.Basic
+ *
+ * @description
+ * 基础Container组件示例，展示最简单的容器用法。
+ */
+import { Container } from '../../index-astro';
+---
+
+<Container>
+  <p class="cosy:text-center">
+    这是一个基础容器，内容会被限制在一个合理的宽度内并居中显示
+  </p>
+</Container>

package/dist/src-astro/container/EContainerBasicContainer.astro

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../../index-astro';
+import ContainerBasic from './EContainerBasic.astro';
+import ContainerBasicSourceCode from './EContainerBasic.astro?raw';
+---
+
+<CodeContainer codes={[ContainerBasicSourceCode]}>
+  <div id="tab-1">
+    <ContainerBasic />
+  </div>
+</CodeContainer>

package/dist/src-astro/container/EContainerFlexBetween.astro

@@ -0,0 +1,23 @@
+---
+/**
+ * @component Container.FlexBetween
+ *
+ * @description
+ * 展示Container组件的两端对齐(justify="between")布局功能。
+ */
+import '../../style.ts';
+import { Container } from '../../index-astro';
+---
+
+<Container flex="row" justify="between" border padding="md">
+  <div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">
+    左侧
+  </div>
+  <div
+    class="cosy:bg-secondary cosy:text-secondary-content cosy:p-4 cosy:rounded">
+    中间
+  </div>
+  <div class="cosy:bg-accent cosy:text-accent-content cosy:p-4 cosy:rounded">
+    右侧
+  </div>
+</Container>

package/dist/src-astro/container/EContainerFlexCenter.astro

@@ -0,0 +1,30 @@
+---
+/**
+ * @component Container.FlexCenter
+ *
+ * @description
+ * 展示Container组件的居中对齐(items="center" justify="center")布局功能。
+ */
+import '../../style.ts';
+import { Container } from '../../index-astro';
+---
+
+<Container
+  flex="row"
+  gap="md"
+  items="center"
+  justify="center"
+  border
+  padding="md"
+  class="cosy:h-32">
+  <div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">
+    居中项
+  </div>
+  <div
+    class="cosy:bg-secondary cosy:text-secondary-content cosy:p-6 cosy:rounded">
+    较大项
+  </div>
+  <div class="cosy:bg-accent cosy:text-accent-content cosy:p-2 cosy:rounded">
+    较小项
+  </div>
+</Container>

package/dist/src-astro/container/EContainerFlexColumn.astro

@@ -0,0 +1,23 @@
+---
+/**
+ * @component Container.FlexColumn
+ *
+ * @description
+ * 展示Container组件的列排列(flex="col")布局功能。
+ */
+import '../../style.ts';
+import { Container } from '../../index-astro';
+---
+
+<Container flex="col" gap="md" border padding="md">
+  <div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">
+    第一项
+  </div>
+  <div
+    class="cosy:bg-secondary cosy:text-secondary-content cosy:p-4 cosy:rounded">
+    第二项
+  </div>
+  <div class="cosy:bg-accent cosy:text-accent-content cosy:p-4 cosy:rounded">
+    第三项
+  </div>
+</Container>

package/dist/src-astro/container/EContainerFlexContainer.astro

@@ -0,0 +1,34 @@
+---
+import { CodeContainer } from '../../index-astro';
+import ContainerFlexRow from './EContainerFlexRow.astro';
+import ContainerFlexColumn from './EContainerFlexColumn.astro';
+import ContainerFlexCenter from './EContainerFlexCenter.astro';
+import ContainerFlexBetween from './EContainerFlexBetween.astro';
+
+import ContainerFlexRowSourceCode from './EContainerFlexRow.astro?raw';
+import ContainerFlexColumnSourceCode from './EContainerFlexColumn.astro?raw';
+import ContainerFlexCenterSourceCode from './EContainerFlexCenter.astro?raw';
+import ContainerFlexBetweenSourceCode from './EContainerFlexBetween.astro?raw';
+---
+
+<CodeContainer
+  titles={['Row', 'Column', 'Center', 'Between']}
+  codes={[
+    ContainerFlexRowSourceCode,
+    ContainerFlexColumnSourceCode,
+    ContainerFlexCenterSourceCode,
+    ContainerFlexBetweenSourceCode,
+  ]}>
+  <div id="tab-1">
+    <ContainerFlexRow />
+  </div>
+  <div id="tab-2">
+    <ContainerFlexColumn />
+  </div>
+  <div id="tab-3">
+    <ContainerFlexCenter />
+  </div>
+  <div id="tab-4">
+    <ContainerFlexBetween />
+  </div>
+</CodeContainer>

package/dist/src-astro/container/EContainerFlexRow.astro

@@ -0,0 +1,23 @@
+---
+/**
+ * @component Container.FlexRow
+ *
+ * @description
+ * 展示Container组件的行排列(flex="row")布局功能。
+ */
+import '../../style.ts';
+import { Container } from '../../index-astro';
+---
+
+<Container flex="row" gap="md" border padding="md">
+  <div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">
+    第一项
+  </div>
+  <div
+    class="cosy:bg-secondary cosy:text-secondary-content cosy:p-4 cosy:rounded">
+    第二项
+  </div>
+  <div class="cosy:bg-accent cosy:text-accent-content cosy:p-4 cosy:rounded">
+    第三项
+  </div>
+</Container>

package/dist/src-astro/container/EContainerPadding.astro

@@ -0,0 +1,32 @@
+---
+/**
+ * @component Container.Padding
+ *
+ * @description
+ * 展示Container组件的不同内边距选项：none、sm、md、lg、xl。
+ */
+import '../../style.ts';
+import { Container } from '../../index-astro';
+---
+
+<div class="cosy:space-y-4">
+  <Container padding="none" border>
+    <p class="cosy:text-center">无内边距 (none)</p>
+  </Container>
+
+  <Container padding="sm" border>
+    <p class="cosy:text-center">小内边距 (sm)</p>
+  </Container>
+
+  <Container padding="md" border>
+    <p class="cosy:text-center">中等内边距 (md) - 默认</p>
+  </Container>
+
+  <Container padding="lg" border>
+    <p class="cosy:text-center">大内边距 (lg)</p>
+  </Container>
+
+  <Container padding="xl" border>
+    <p class="cosy:text-center">超大内边距 (xl)</p>
+  </Container>
+</div>

package/dist/src-astro/container/EContainerPaddingContainer.astro

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../../index-astro';
+import ContainerPadding from './EContainerPadding.astro';
+import ContainerPaddingSourceCode from './EContainerPadding.astro?raw';
+---
+
+<CodeContainer codes={[ContainerPaddingSourceCode]}>
+  <div id="tab-1">
+    <ContainerPadding />
+  </div>
+</CodeContainer>

package/dist/src-astro/container/EContainerSizes.astro

@@ -0,0 +1,36 @@
+---
+/**
+ * @component Container.Sizes
+ *
+ * @description
+ * 展示Container组件的不同尺寸选项：xs、sm、md、lg、xl、full。
+ */
+import '../../style.ts';
+import { Container } from '../../index-astro';
+---
+
+<div class="cosy:space-y-4">
+  <Container size="xs" border>
+    <p class="cosy:text-center">超小尺寸容器 (xs)</p>
+  </Container>
+
+  <Container size="sm" border>
+    <p class="cosy:text-center">小尺寸容器 (sm)</p>
+  </Container>
+
+  <Container size="md" border>
+    <p class="cosy:text-center">中等尺寸容器 (md) - 默认</p>
+  </Container>
+
+  <Container size="lg" border>
+    <p class="cosy:text-center">大尺寸容器 (lg)</p>
+  </Container>
+
+  <Container size="xl" border>
+    <p class="cosy:text-center">超大尺寸容器 (xl)</p>
+  </Container>
+
+  <Container size="full" border>
+    <p class="cosy:text-center">全宽容器 (full)</p>
+  </Container>
+</div>

package/dist/src-astro/container/EContainerSizesContainer.astro

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../../index-astro';
+import ContainerSizes from './EContainerSizes.astro';
+import ContainerSizesSourceCode from './EContainerSizes.astro?raw';
+---
+
+<CodeContainer codes={[ContainerSizesSourceCode]}>
+  <div id="tab-1">
+    <ContainerSizes />
+  </div>
+</CodeContainer>

package/dist/src-astro/container/index.ts

@@ -0,0 +1,16 @@
+import Container from './Container.astro';
+import ContainerBasicContainer from './EContainerBasicContainer.astro';
+import ContainerSizesContainer from './EContainerSizesContainer.astro';
+import ContainerPaddingContainer from './EContainerPaddingContainer.astro';
+import ContainerFlexContainer from './EContainerFlexContainer.astro';
+
+export { default as Container } from './Container.astro';
+export const ContainerPackage = {
+  Container,
+  ContainerContainers: {
+    Basic: ContainerBasicContainer,
+    Sizes: ContainerSizesContainer,
+    Padding: ContainerPaddingContainer,
+    Flex: ContainerFlexContainer,
+  },
+};

package/dist/src-astro/cosy.ts

@@ -0,0 +1,6 @@
+import { Logger } from './utils/logger';
+
+export const NAME = 'Cosy-UI';
+export const ERROR_PREFIX = 'Cosy-UI: ';
+
+export const cosyLogger = new Logger(NAME);