@coffic/cosy-ui 0.8.7 → 0.8.11

package/dist/src-astro/code-container/CodeContainer.astro

@@ -3,12 +3,21 @@
  * @component CodeContainer
  *
  * @description
- * 用于展示代码示例的容器组件。使用时只需在默认slot中传入内容，
- * 并为每个示例设置对应的id (tab-1, tab-2等)
+ * 用于展示代码示例的容器组件，提供样式隔离功能防止内外样式相互影响。
+ * 支持两种隔离模式：样式重置模式和iframe完全隔离模式。
+ * 使用时只需在默认slot中传入内容，并为每个示例设置对应的id (tab-1, tab-2等)
+ *
+ * @features
+ * - 样式隔离：防止外部样式影响内部组件展示
+ * - 样式重置：重置内部样式，避免样式冲突
+ * - iframe模式：完全隔离的预览环境
+ * - 代码预览切换：支持预览和代码视图切换
+ * - 多标签页：支持多个示例的标签页展示
  *
  * @example
  * ```astro
- * <CodeContainer>
+ * <!-- 基础用法 -->
+ * <CodeContainer codes={[code1, code2]}>
  *   <div id="tab-1">
  *     <Alert type="info">这是第一个示例</Alert>
  *   </div>
@@ -16,6 +25,20 @@
  *     <Alert type="success">这是第二个示例</Alert>
  *   </div>
  * </CodeContainer>
+ *
+ * <!-- 使用iframe完全隔离 -->
+ * <CodeContainer codes={[code]} useIframe={true}>
+ *   <div id="tab-1">
+ *     <SomeComponent />
+ *   </div>
+ * </CodeContainer>
+ *
+ * <!-- 禁用样式重置 -->
+ * <CodeContainer codes={[code]} resetStyles={false}>
+ *   <div id="tab-1">
+ *     <CustomComponent />
+ *   </div>
+ * </CodeContainer>
  * ```
  */
 
@@ -35,9 +58,25 @@ interface Props {
    * 每个示例对应的源代码
    */
   codes: string[];
+  /**
+   * 是否使用iframe隔离内容
+   * @default false
+   */
+  useIframe?: boolean;
+  /**
+   * 是否重置内部样式
+   * @default true
+   */
+  resetStyles?: boolean;
 }
 
-const { titles = [], descriptions = [], codes } = Astro.props;
+const {
+  titles = [],
+  descriptions = [],
+  codes,
+  useIframe = false,
+  resetStyles = true,
+} = Astro.props;
 ---
 
 <div data-role="code-container" class="cosy:mb-8 cosy:card" ignore-heading>
@@ -93,7 +132,22 @@ const { titles = [], descriptions = [], codes } = Astro.props;
 
         <div class="cosy:relative cosy:p-4 cosy:bg-gradient-to-br cosy:from-red-100 cosy:to-green-300 cosy:rounded-b">
           <div class="cosy:block cosy:code-example-panel" data-panel="preview">
-            <slot />
+            {useIframe ? (
+              <div class="cosy:w-full cosy:min-h-64 cosy:bg-white cosy:rounded cosy:border">
+                <iframe
+                  class="cosy:w-full cosy:min-h-64 cosy:border-none cosy:rounded"
+                  data-preview-frame={`tab-${index + 1}`}
+                  sandbox="allow-scripts allow-same-origin"
+                  title={`示例预览 ${index + 1}`}
+                />
+              </div>
+            ) : (
+              <div
+                class={`cosy:code-preview-area ${resetStyles ? 'cosy:reset-styles' : ''}`}
+                data-preview-area={`tab-${index + 1}`}>
+                <slot />
+              </div>
+            )}
           </div>
 
           <div class="cosy:hidden cosy:code-example-panel" data-panel="code">
@@ -107,10 +161,156 @@ const { titles = [], descriptions = [], codes } = Astro.props;
   }
 </div>
 
+<!-- 样式隔离和重置 -->
+<style>
+  /* 预览区域样式重置，防止外部样式影响内部组件 */
+  [data-role='code-container'] .cosy\:reset-styles {
+    /* 重置所有可能影响布局的样式 */
+    all: initial;
+    font-family: inherit;
+    color: inherit;
+    line-height: 1.5;
+
+    /* 恢复必要的基础样式 */
+    display: block;
+    box-sizing: border-box;
+
+    /* 隔离样式作用域 */
+    isolation: isolate;
+    contain: layout style;
+  }
+
+  /* 重置内部所有元素的样式 */
+  [data-role='code-container'] .cosy\:reset-styles * {
+    all: unset;
+    display: revert;
+    box-sizing: border-box;
+  }
+
+  /* 恢复必要的文本样式 */
+  [data-role='code-container'] .cosy\:reset-styles {
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Arial,
+      sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #374151;
+  }
+
+  /* 恢复基本的HTML元素样式 */
+  [data-role='code-container'] .cosy\:reset-styles h1,
+  [data-role='code-container'] .cosy\:reset-styles h2,
+  [data-role='code-container'] .cosy\:reset-styles h3,
+  [data-role='code-container'] .cosy\:reset-styles h4,
+  [data-role='code-container'] .cosy\:reset-styles h5,
+  [data-role='code-container'] .cosy\:reset-styles h6 {
+    font-weight: bold;
+    margin-bottom: 0.5em;
+  }
+
+  [data-role='code-container'] .cosy\:reset-styles p {
+    margin-bottom: 1em;
+  }
+
+  [data-role='code-container'] .cosy\:reset-styles ul,
+  [data-role='code-container'] .cosy\:reset-styles ol {
+    padding-left: 1.5em;
+    margin-bottom: 1em;
+  }
+
+  [data-role='code-container'] .cosy\:reset-styles li {
+    margin-bottom: 0.25em;
+  }
+
+  /* iframe 隔离样式 */
+  [data-role='code-container'] iframe[data-preview-frame] {
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+  }
+
+  /* 防止内部组件的样式泄漏到外部 */
+  [data-role='code-container'] .cosy\:code-preview-area {
+    position: relative;
+    z-index: 0;
+  }
+
+  /* 确保预览区域的样式隔离 */
+  [data-role='code-container'] .cosy\:code-preview-area::before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+    pointer-events: none;
+    z-index: -1;
+  }
+</style>
+
 <script>
+  function initializeIframePreviews() {
+    const iframes = document.querySelectorAll('[data-preview-frame]');
+
+    iframes.forEach((iframe) => {
+      const container = iframe.closest('[data-role="code-container"]');
+      if (!container) return;
+
+      const frameId = iframe.getAttribute('data-preview-frame');
+      const contentElement = container.querySelector(`#${frameId}`);
+
+      if (contentElement) {
+        // 创建独立的HTML文档内容
+        const iframeElement = iframe as HTMLIFrameElement;
+        const iframeDoc =
+          iframeElement.contentDocument ||
+          iframeElement.contentWindow?.document;
+        if (iframeDoc) {
+          const htmlContent = `
+            <!DOCTYPE html>
+            <html>
+            <head>
+              <meta charset="UTF-8">
+              <meta name="viewport" content="width=device-width, initial-scale=1.0">
+              <title>示例预览</title>
+              <style>
+                /* 基础样式重置 */
+                * { margin: 0; padding: 0; box-sizing: border-box; }
+                body { 
+                  font-family: system-ui, -apple-system, sans-serif; 
+                  padding: 1rem;
+                  background: white;
+                  color: #374151;
+                  line-height: 1.5;
+                }
+              </style>
+            </head>
+            <body>
+              ${contentElement.innerHTML}
+            </body>
+            </html>
+          `;
+
+          iframeDoc.open();
+          iframeDoc.write(htmlContent);
+          iframeDoc.close();
+        }
+      }
+    });
+  }
+
   function initializeCodeContainer() {
     console.log('CodeContainer: 初始化代码容器');
 
+    // 初始化 iframe 预览
+    initializeIframePreviews();
+
     // 示例切换功能
     const exampleTabs = document.querySelectorAll(
       '[role="tab"][data-tab^="tab-"]'

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

@@ -1,14 +1,10 @@
-import { default as CodeContainer } from './CodeContainer.astro';
-import { default as CodeContainerBasic } from './ECodeContainerBasic.astro';
-import { default as CodeContainerMultiple } from './ECodeContainerMultiple.astro';
-import BasicSourceCode from './ECodeContainerBasic.astro?raw';
-import MultipleSourceCode from './ECodeContainerMultiple.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+export { default as CodeContainer } from './CodeContainer.astro';
 
-export { CodeContainer, CodeContainerBasic, CodeContainerMultiple };
-
-// 导出示例源代码
-export const CodeContainerExampleCodes = {
-  Basic: extractSimpleExample(BasicSourceCode, 'CodeContainer'),
-  Multiple: extractSimpleExample(MultipleSourceCode, 'CodeContainer'),
-};
+// Export types
+export interface CodeContainerProps {
+  titles?: string[];
+  descriptions?: string[];
+  codes: string[];
+  useIframe?: boolean;
+  resetStyles?: boolean;
+}

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

@@ -1,21 +1,17 @@
-import Contact from './Contact.astro';
+export { default as Contact } from './Contact.astro';
 
-// Container components
-import ContactBasicContainer from './EContactBasicContainer.astro';
-import ContactWithTitleContainer from './EContactWithTitleContainer.astro';
-import ContactSocialContainer from './EContactSocialContainer.astro';
-import ContactCompactContainer from './EContactCompactContainer.astro';
-import ContactCustomStyleContainer from './EContactCustomStyleContainer.astro';
-
-export { Contact };
-
-export const ContactPackage = {
-  Contact,
-  ContactContainers: {
-    Basic: ContactBasicContainer,
-    WithTitle: ContactWithTitleContainer,
-    Social: ContactSocialContainer,
-    Compact: ContactCompactContainer,
-    CustomStyle: ContactCustomStyleContainer,
-  },
-};
+// Export types
+export interface ContactProps {
+  title?: string;
+  description?: string;
+  email?: string;
+  phone?: string;
+  address?: string;
+  website?: string;
+  github?: string;
+  twitter?: string;
+  facebook?: string;
+  linkedin?: string;
+  compact?: boolean;
+  class?: string;
+}

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

@@ -3,30 +3,7 @@ import Error403 from './403.astro';
 import Error500 from './500.astro';
 import Error503 from './503.astro';
 import ErrorPage from './ErrorPage.astro';
-
 import Error404Basic from './404Basic.astro';
-import E404Basic from './E404Basic.astro';
-import E404WithDebug from './E404WithDebug.astro';
-import E403Basic from './E403Basic.astro';
-import E500Basic from './E500Basic.astro';
-import E503Maintenance from './E503Maintenance.astro';
-
-import E404BasicContainer from './E404BasicContainer.astro';
-import E403BasicContainer from './E403BasicContainer.astro';
-import E500BasicContainer from './E500BasicContainer.astro';
-import E503MaintenanceContainer from './E503MaintenanceContainer.astro';
-import EErrorPageShowcase from './EErrorPageShowcase.astro';
-import EErrorPageShowcaseContainer from './EErrorPageShowcaseContainer.astro';
-import EErrorPageCustomStyle from './EErrorPageCustomStyle.astro';
-import EErrorPageCustomStyleContainer from './EErrorPageCustomStyleContainer.astro';
-
-import BasicSourceCode from './E404Basic.astro?raw';
-import WithDebugSourceCode from './E404WithDebug.astro?raw';
-import Error403SourceCode from './E403Basic.astro?raw';
-import Error500SourceCode from './E500Basic.astro?raw';
-import Error503SourceCode from './E503Maintenance.astro?raw';
-
-import { extractSimpleExample } from '../utils/component';
 
 export {
   Error404,
@@ -35,43 +12,4 @@ export {
   Error503,
   ErrorPage,
   Error404Basic,
-  E404Basic,
-  E404WithDebug,
-  E403Basic,
-  E500Basic,
-  E503Maintenance,
-  E404BasicContainer,
-  E403BasicContainer,
-  E500BasicContainer,
-  E503MaintenanceContainer,
-  EErrorPageShowcase,
-  EErrorPageShowcaseContainer,
-  EErrorPageCustomStyle,
-  EErrorPageCustomStyleContainer,
-};
-
-// 错误页面组件包
-export const ErrorPackage = {
-  ErrorPage,
-  Error404,
-  Error403,
-  Error500,
-  Error503,
-  ErrorContainers: {
-    Basic404: E404BasicContainer,
-    Basic403: E403BasicContainer,
-    Basic500: E500BasicContainer,
-    Maintenance503: E503MaintenanceContainer,
-    Showcase: EErrorPageShowcaseContainer,
-    CustomStyle: EErrorPageCustomStyleContainer,
-  },
-};
-
-// 导出示例源代码
-export const ErrorExampleCodes = {
-  Basic404: extractSimpleExample(BasicSourceCode, 'Error404'),
-  WithDebug404: extractSimpleExample(WithDebugSourceCode, 'Error404'),
-  Basic403: extractSimpleExample(Error403SourceCode, 'Error403'),
-  Basic500: extractSimpleExample(Error500SourceCode, 'Error500'),
-  Maintenance503: extractSimpleExample(Error503SourceCode, 'Error503'),
 };

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

@@ -1,31 +1,2 @@
-import Footer from './Footer.astro';
-import FooterBasicContainer from './EFooterBasicContainer.astro';
-import FooterWithSocialContainer from './EFooterWithSocialContainer.astro';
-import FooterWithProductsContainer from './EFooterWithProductsContainer.astro';
-import FooterWithLogoContainer from './EFooterWithLogoContainer.astro';
-import FooterWithNavigationContainer from './EFooterWithNavigationContainer.astro';
-import FooterCompleteContainer from './EFooterCompleteContainer.astro';
-import FooterFeaturesContainer from './EFooterFeaturesContainer.astro';
-import EFooterBasicSourceCode from './EFooterBasic.astro?raw';
-import { extractSimpleExample } from '../utils/component';
-
 export { default as Footer } from './Footer.astro';
-
-// 导出示例源代码
-export const FooterExampleCodes = {
-  Basic: extractSimpleExample(EFooterBasicSourceCode, 'Footer'),
-};
-
-// 导出页脚包
-export const FooterPackage = {
-  Footer,
-  FooterContainers: {
-    Basic: FooterBasicContainer,
-    WithSocial: FooterWithSocialContainer,
-    WithProducts: FooterWithProductsContainer,
-    WithLogo: FooterWithLogoContainer,
-    WithNavigation: FooterWithNavigationContainer,
-    Complete: FooterCompleteContainer,
-    Features: FooterFeaturesContainer,
-  },
-};
+export { default as FooterSection } from './FooterSection.astro';

package/dist/src-astro/header/Header.astro

@@ -13,7 +13,6 @@
  * 3. 可定制性 - 支持多种配置选项，适应不同网站的风格和需求
  * 4. 多语言支持 - 内置语言切换功能，便于构建国际化网站
  */
-import '../../style.ts';
 import {
   LanguageSwitcher,
   LinkUtil,
@@ -23,7 +22,7 @@ import {
   Link,
   Image,
   ThemeSwitcher,
-} from '../../index-astro';
+} from '@coffic/cosy-ui';
 import Logo from '../assets/logo-rounded.png';
 
 export interface Props extends IHeaderProps {

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

@@ -1,40 +1 @@
-import Header from './Header.astro';
-import HeaderBasic from './HeaderBasic.astro';
-import HeaderWithNavigation from './HeaderWithNavigation.astro';
-import HeaderCustomPosition from './HeaderCustomPosition.astro';
-import HeaderCustomNavbarEnd from './HeaderCustomNavbarEnd.astro';
-import HeaderCustomNavbarStart from './HeaderCustomNavbarStart.astro';
-import HeaderCustomNavbarCenter from './HeaderCustomNavbarCenter.astro';
-import BasicSourceCode from './HeaderBasic.astro?raw';
-import WithNavigationSourceCode from './HeaderWithNavigation.astro?raw';
-import CustomPositionSourceCode from './HeaderCustomPosition.astro?raw';
-import CustomNavbarEndSourceCode from './HeaderCustomNavbarEnd.astro?raw';
-import CustomNavbarStartSourceCode from './HeaderCustomNavbarStart.astro?raw';
-import CustomNavbarCenterSourceCode from './HeaderCustomNavbarCenter.astro?raw';
-import { extractSimpleExample } from '../utils/component';
-
-export {
-  Header,
-  HeaderBasic,
-  HeaderWithNavigation,
-  HeaderCustomPosition,
-  HeaderCustomNavbarEnd,
-  HeaderCustomNavbarStart,
-  HeaderCustomNavbarCenter,
-};
-
-// 导出示例源代码
-export const HeaderExampleCodes = {
-  Basic: extractSimpleExample(BasicSourceCode, 'Header'),
-  WithNavigation: extractSimpleExample(WithNavigationSourceCode, 'Header'),
-  CustomPosition: extractSimpleExample(CustomPositionSourceCode, 'Header'),
-  CustomNavbarEnd: extractSimpleExample(CustomNavbarEndSourceCode, 'Header'),
-  CustomNavbarStart: extractSimpleExample(
-    CustomNavbarStartSourceCode,
-    'Header'
-  ),
-  CustomNavbarCenter: extractSimpleExample(
-    CustomNavbarCenterSourceCode,
-    'Header'
-  ),
-};
+export { default as Header } from './Header.astro';

package/dist/src-astro/hero/Hero.astro

@@ -296,7 +296,7 @@ const linksContainerClasses = [
 
 const appContainerClasses = [
   'cosy:w-full',
-  'cosy:max-w-3xl',
+  'cosy:max-w-full',
   'cosy:mx-auto',
   'cosy:my-8',
 ].join(' ');

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

@@ -1,39 +1 @@
-import Hero from './Hero.astro';
-import HeroBasic from './HeroBasic.astro';
-import HeroAlignCenter from './HeroAlignCenter.astro';
-import HeroAlignLeft from './HeroAlignLeft.astro';
-import HeroAlignRight from './HeroAlignRight.astro';
-import HeroWithImage from './HeroWithImage.astro';
-import HeroWithButton from './HeroWithButton.astro';
-import HeroPlainBackground from './HeroPlainBackground.astro';
-import HeroGradientBackground from './HeroGradientBackground.astro';
-import HeroBackgroundImage from './HeroBackgroundImage.astro';
-import HeroBasicContainer from './HeroBasicContainer.astro';
-import HeroAlignContainer from './HeroAlignContainer.astro';
-import HeroWithImageContainer from './HeroWithImageContainer.astro';
-import HeroWithButtonContainer from './HeroWithButtonContainer.astro';
-import HeroBackgroundContainer from './HeroBackgroundContainer.astro';
-import HeroBackgroundImageContainer from './HeroBackgroundImageContainer.astro';
-
-export { Hero };
-
-export const HeroPackage = {
-  Hero,
-  HeroBasic,
-  HeroAlignCenter,
-  HeroAlignLeft,
-  HeroAlignRight,
-  HeroWithImage,
-  HeroWithButton,
-  HeroPlainBackground,
-  HeroGradientBackground,
-  HeroBackgroundImage,
-  HeroContainers: {
-    Basic: HeroBasicContainer,
-    Align: HeroAlignContainer,
-    WithImage: HeroWithImageContainer,
-    WithButton: HeroWithButtonContainer,
-    Background: HeroBackgroundContainer,
-    BackgroundImage: HeroBackgroundImageContainer,
-  },
-};
+export { default as Hero } from './Hero.astro';

package/dist/src-astro/icons/ChartIcon.astro

@@ -0,0 +1,28 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="chart" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/DashboardIcon.astro

@@ -0,0 +1,28 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="dashboard" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/DeleteIcon.astro

@@ -0,0 +1,28 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="delete" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/DocumentIcon.astro

@@ -0,0 +1,28 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="document" size={size} stroke={color} class={className} />

package/dist/src-astro/icons/DownloadIcon.astro

@@ -0,0 +1,28 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="download" size={size} stroke={color} class={className} />