@coffic/cosy-ui 0.6.40 → 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/dist/alert/{AlertBasicContainer.astro → EAlertBasicContainer.astro} +2 -2
  2. package/dist/alert/{AlertCustomStyleContainer.astro → EAlertCustomStyleContainer.astro} +2 -2
  3. package/dist/alert/{AlertTypesContainer.astro → EAlertTypesContainer.astro} +8 -8
  4. package/dist/alert/{AlertWithTitleContainer.astro → EAlertWithTitleContainer.astro} +2 -2
  5. package/dist/alert/index.ts +12 -12
  6. package/dist/app.css +1 -1
  7. package/dist/button/ButtonBasicContainer.astro +1 -7
  8. package/dist/button/ButtonLinkContainer.astro +1 -7
  9. package/dist/button/ButtonSizesContainer.astro +1 -7
  10. package/dist/button/ButtonVariantsContainer.astro +1 -8
  11. package/dist/button/ButtonWithIconsContainer.astro +2 -13
  12. package/dist/button/index_astro.ts +1 -3
  13. package/dist/code-container/CodeContainer.astro +2 -2
  14. package/dist/code-container/index.ts +7 -7
  15. package/dist/container/EContainerBasic.astro +13 -0
  16. package/dist/container/EContainerBasicContainer.astro +11 -0
  17. package/dist/container/EContainerFlexBetween.astro +16 -0
  18. package/dist/container/EContainerFlexCenter.astro +23 -0
  19. package/dist/container/EContainerFlexColumn.astro +16 -0
  20. package/dist/container/EContainerFlexContainer.astro +34 -0
  21. package/dist/container/EContainerFlexRow.astro +16 -0
  22. package/dist/container/EContainerPadding.astro +32 -0
  23. package/dist/container/EContainerPaddingContainer.astro +11 -0
  24. package/dist/container/EContainerSizes.astro +36 -0
  25. package/dist/container/EContainerSizesContainer.astro +11 -0
  26. package/dist/container/index.ts +16 -1
  27. package/dist/footer/{FooterBasic.astro → EFooterBasic.astro} +7 -1
  28. package/dist/footer/EFooterBasicContainer.astro +11 -0
  29. package/dist/footer/EFooterComplete.astro +45 -0
  30. package/dist/footer/EFooterCompleteContainer.astro +11 -0
  31. package/dist/footer/EFooterFeaturesContainer.astro +40 -0
  32. package/dist/footer/EFooterWithLogo.astro +23 -0
  33. package/dist/footer/EFooterWithLogoContainer.astro +11 -0
  34. package/dist/footer/EFooterWithNavigation.astro +24 -0
  35. package/dist/footer/EFooterWithNavigationContainer.astro +11 -0
  36. package/dist/footer/EFooterWithProducts.astro +24 -0
  37. package/dist/footer/EFooterWithProductsContainer.astro +11 -0
  38. package/dist/footer/EFooterWithSocial.astro +24 -0
  39. package/dist/footer/EFooterWithSocialContainer.astro +11 -0
  40. package/dist/footer/FooterSection.astro +4 -2
  41. package/dist/footer/index.ts +24 -4
  42. package/dist/icons/index.ts +3 -0
  43. package/dist/index_astro.ts +1 -0
  44. package/dist/layout-app/AppLayout.astro +1 -0
  45. package/dist/layout-basic/BaseLayout.astro +3 -3
  46. package/dist/types/meta.ts +5 -0
  47. package/package.json +2 -9
  48. package/dist/button/Button.vue +0 -105
  49. package/dist/button/ButtonBasic.vue +0 -11
  50. package/dist/button/ButtonFeature.vue +0 -91
  51. package/dist/button/ButtonFeatureBasic.vue +0 -8
  52. package/dist/button/ButtonFeatureContainer.astro +0 -18
  53. package/dist/button/ButtonFeatureWithTips.vue +0 -7
  54. package/dist/button/ButtonLink.vue +0 -13
  55. package/dist/button/ButtonSizes.vue +0 -12
  56. package/dist/button/ButtonWithIcons.vue +0 -21
  57. package/dist/button/index_vue.ts +0 -4
  58. package/dist/vue/AlertDialog/AlertDialog.vue +0 -120
  59. package/dist/vue/AlertDialog/Basic.vue +0 -38
  60. package/dist/vue/AlertDialog/Multilang.vue +0 -48
  61. package/dist/vue/AlertDialog/index.ts +0 -20
  62. package/dist/vue/BannerBox/BannerBox.vue +0 -296
  63. package/dist/vue/BannerBox/DownloadButton.vue +0 -202
  64. package/dist/vue/BannerBox/ExampleBasic.vue +0 -32
  65. package/dist/vue/BannerBox/ExampleCustomBg.vue +0 -32
  66. package/dist/vue/BannerBox/ExampleDisplayModeAlways.vue +0 -34
  67. package/dist/vue/BannerBox/ExampleDisplayModeHover.vue +0 -34
  68. package/dist/vue/BannerBox/ExampleDisplayModeNever.vue +0 -34
  69. package/dist/vue/BannerBox/ExampleImageExport.vue +0 -37
  70. package/dist/vue/BannerBox/ExampleSizePreset.vue +0 -35
  71. package/dist/vue/BannerBox/FeatureCard.vue +0 -190
  72. package/dist/vue/BannerBox/SmartBanner.vue +0 -44
  73. package/dist/vue/BannerBox/bgStyles.ts +0 -55
  74. package/dist/vue/BannerBox/index.ts +0 -48
  75. package/dist/vue/BannerBox/sizePresets.ts +0 -23
  76. package/dist/vue/BlogList/Basic.vue +0 -30
  77. package/dist/vue/BlogList/BlogList.vue +0 -100
  78. package/dist/vue/BlogList/Empty.vue +0 -8
  79. package/dist/vue/BlogList/EmptyEnglish.vue +0 -8
  80. package/dist/vue/BlogList/English.vue +0 -24
  81. package/dist/vue/BlogList/index.ts +0 -29
  82. package/dist/vue/ConfirmDialog/Basic.vue +0 -57
  83. package/dist/vue/ConfirmDialog/ConfirmDialog.vue +0 -134
  84. package/dist/vue/ConfirmDialog/CustomButtons.vue +0 -69
  85. package/dist/vue/ConfirmDialog/index.ts +0 -20
  86. package/dist/vue/Icons/AlertTriangleIcon.vue +0 -30
  87. package/dist/vue/Icons/CalendarIcon.vue +0 -30
  88. package/dist/vue/Icons/CheckCircleIcon.vue +0 -30
  89. package/dist/vue/Icons/CheckIcon.vue +0 -30
  90. package/dist/vue/Icons/ChevronDownIcon.vue +0 -30
  91. package/dist/vue/Icons/ClipboardIcon.vue +0 -30
  92. package/dist/vue/Icons/CloseIcon.vue +0 -30
  93. package/dist/vue/Icons/InboxArchiveIcon.vue +0 -30
  94. package/dist/vue/Icons/InfoCircleIcon.vue +0 -30
  95. package/dist/vue/Icons/InfoIcon.vue +0 -30
  96. package/dist/vue/Icons/LinkIcon.vue +0 -30
  97. package/dist/vue/Icons/MenuIcon.vue +0 -30
  98. package/dist/vue/Icons/SearchIcon.vue +0 -30
  99. package/dist/vue/Icons/SettingsIcon.vue +0 -30
  100. package/dist/vue/Icons/UserIcon.vue +0 -30
  101. package/dist/vue/Icons/VueIcon.vue +0 -76
  102. package/dist/vue/Icons/XCircleIcon.vue +0 -30
  103. package/dist/vue/ListItem.vue +0 -5
  104. package/dist/vue/MacWindow/Basic.vue +0 -11
  105. package/dist/vue/MacWindow/CustomHeight.vue +0 -13
  106. package/dist/vue/MacWindow/MacWindow.vue +0 -262
  107. package/dist/vue/MacWindow/WithEvents.vue +0 -34
  108. package/dist/vue/MacWindow/WithSidebar.vue +0 -21
  109. package/dist/vue/MacWindow/WithTabs.vue +0 -21
  110. package/dist/vue/MacWindow/WithToolbar.vue +0 -43
  111. package/dist/vue/MacWindow/index.ts +0 -36
  112. package/dist/vue/SmartLink.vue +0 -17
  113. package/dist/vue/TagList.vue +0 -23
  114. package/dist/vue/VueCounter.vue +0 -29
  115. package/dist/vue/iPhone/Basic.vue +0 -33
  116. package/dist/vue/iPhone/CustomBackground.vue +0 -33
  117. package/dist/vue/iPhone/NoFrame.vue +0 -33
  118. package/dist/vue/iPhone/WeatherApp.vue +0 -97
  119. package/dist/vue/iPhone/assets/iPhone 14 Pro - Deep Purple - Landscape.png +0 -0
  120. package/dist/vue/iPhone/assets/iPhone 14 Pro - Deep Purple - Portrait.png +0 -0
  121. package/dist/vue/iPhone/assets/iPhone 14 Pro - Gold - Landscape.png +0 -0
  122. package/dist/vue/iPhone/assets/iPhone 14 Pro - Gold - Portrait.png +0 -0
  123. package/dist/vue/iPhone/assets/iPhone 14 Pro - Silver - Landscape.png +0 -0
  124. package/dist/vue/iPhone/assets/iPhone 14 Pro - Silver - Portrait.png +0 -0
  125. package/dist/vue/iPhone/assets/iPhone 14 Pro - Space Black - Landscape.png +0 -0
  126. package/dist/vue/iPhone/assets/iPhone 14 Pro - Space Black - Portrait.png +0 -0
  127. package/dist/vue/iPhone/iPhoneWindow.vue +0 -193
  128. package/dist/vue/iPhone/index.ts +0 -28
  129. /package/dist/alert/{AlertBasic.astro → EAlertBasic.astro} +0 -0
  130. /package/dist/alert/{AlertCustomStyle.astro → EAlertCustomStyle.astro} +0 -0
  131. /package/dist/alert/{AlertError.astro → EAlertError.astro} +0 -0
  132. /package/dist/alert/{AlertInfo.astro → EAlertInfo.astro} +0 -0
  133. /package/dist/alert/{AlertSuccess.astro → EAlertSuccess.astro} +0 -0
  134. /package/dist/alert/{AlertWarning.astro → EAlertWarning.astro} +0 -0
  135. /package/dist/alert/{AlertWithTitle.astro → EAlertWithTitle.astro} +0 -0
  136. /package/dist/code-container/{CodeContainerBasic.astro → ECodeContainerBasic.astro} +0 -0
  137. /package/dist/code-container/{CodeContainerMultiple.astro → ECodeContainerMultiple.astro} +0 -0
@@ -0,0 +1,24 @@
1
+ ---
2
+ /**
3
+ * @component Footer.WithProducts
4
+ *
5
+ * @description
6
+ * 展示带有产品链接的页脚示例。
7
+ */
8
+ import { Footer } from '../index';
9
+ ---
10
+
11
+ <Footer
12
+ siteName="我的网站"
13
+ homeLink="/"
14
+ slogan="简单而强大"
15
+ company="我的公司"
16
+ copyright="保留所有权利"
17
+ inspirationalSlogan="构建美好的数字体验"
18
+ products={[
19
+ { name: '产品A', href: '/products/a' },
20
+ { name: '产品B', href: '/products/b' },
21
+ { name: '产品C', href: '/products/c' },
22
+ { name: '外部产品', href: 'https://example.com', external: true },
23
+ ]}
24
+ />
@@ -0,0 +1,11 @@
1
+ ---
2
+ import { CodeContainer } from '../index';
3
+ import FooterWithProducts from './EFooterWithProducts.astro';
4
+ import FooterWithProductsSourceCode from './EFooterWithProducts.astro?raw';
5
+ ---
6
+
7
+ <CodeContainer codes={[FooterWithProductsSourceCode]}>
8
+ <div id="tab-1">
9
+ <FooterWithProducts />
10
+ </div>
11
+ </CodeContainer>
@@ -0,0 +1,24 @@
1
+ ---
2
+ /**
3
+ * @component Footer.WithSocial
4
+ *
5
+ * @description
6
+ * 展示带有社交媒体链接的页脚示例。
7
+ */
8
+ import { Footer } from '../index';
9
+ ---
10
+
11
+ <Footer
12
+ siteName="我的网站"
13
+ homeLink="/"
14
+ slogan="简单而强大"
15
+ company="我的公司"
16
+ copyright="保留所有权利"
17
+ inspirationalSlogan="构建美好的数字体验"
18
+ socialLinks={[
19
+ 'https://github.com/myusername',
20
+ 'https://twitter.com/myusername',
21
+ 'https://linkedin.com/in/myusername',
22
+ 'https://facebook.com/myusername',
23
+ ]}
24
+ />
@@ -0,0 +1,11 @@
1
+ ---
2
+ import { CodeContainer } from '../index';
3
+ import FooterWithSocial from './EFooterWithSocial.astro';
4
+ import FooterWithSocialSourceCode from './EFooterWithSocial.astro?raw';
5
+ ---
6
+
7
+ <CodeContainer codes={[FooterWithSocialSourceCode]}>
8
+ <div id="tab-1">
9
+ <FooterWithSocial />
10
+ </div>
11
+ </CodeContainer>
@@ -31,9 +31,11 @@ const { title, links } = Astro.props;
31
31
  <ul class="cosy:flex cosy:flex-col cosy:gap-2">
32
32
  {
33
33
  links.map((link) => (
34
- <li>
34
+ <li class="cosy:list-none">
35
35
  {link.href ? (
36
- <a href={link.href} class="cosy:link cosy:link-hover">
36
+ <a
37
+ href={link.href}
38
+ class="cosy:link cosy:link-hover cosy:no-underline cosy:hover:no-underline">
37
39
  {link.name}
38
40
  </a>
39
41
  ) : (
@@ -1,11 +1,31 @@
1
1
  import Footer from './Footer.astro';
2
- import FooterBasic from './FooterBasic.astro';
3
- import BasicSourceCode from './FooterBasic.astro?raw';
2
+ import FooterBasicContainer from './EFooterBasicContainer.astro';
3
+ import FooterWithSocialContainer from './EFooterWithSocialContainer.astro';
4
+ import FooterWithProductsContainer from './EFooterWithProductsContainer.astro';
5
+ import FooterWithLogoContainer from './EFooterWithLogoContainer.astro';
6
+ import FooterWithNavigationContainer from './EFooterWithNavigationContainer.astro';
7
+ import FooterCompleteContainer from './EFooterCompleteContainer.astro';
8
+ import FooterFeaturesContainer from './EFooterFeaturesContainer.astro';
9
+ import EFooterBasicSourceCode from './EFooterBasic.astro?raw';
4
10
  import { extractSimpleExample } from '../utils/component';
5
11
 
6
- export { Footer, FooterBasic };
12
+ export { default as Footer } from './Footer.astro';
7
13
 
8
14
  // 导出示例源代码
9
15
  export const FooterExampleCodes = {
10
- Basic: extractSimpleExample(BasicSourceCode, 'Footer'),
16
+ Basic: extractSimpleExample(EFooterBasicSourceCode, 'Footer'),
17
+ };
18
+
19
+ // 导出页脚包
20
+ export const FooterPackage = {
21
+ Footer,
22
+ FooterContainers: {
23
+ Basic: FooterBasicContainer,
24
+ WithSocial: FooterWithSocialContainer,
25
+ WithProducts: FooterWithProductsContainer,
26
+ WithLogo: FooterWithLogoContainer,
27
+ WithNavigation: FooterWithNavigationContainer,
28
+ Complete: FooterCompleteContainer,
29
+ Features: FooterFeaturesContainer,
30
+ },
11
31
  };
@@ -0,0 +1,3 @@
1
+
2
+ // 导出所有图标组件
3
+ export * from '../index_icons';
@@ -31,6 +31,7 @@ export * from './code-block';
31
31
  export * from './modal';
32
32
  export * from './hero';
33
33
  export * from './code-example';
34
+ export * from './icons';
34
35
  export * from './products';
35
36
  export * from './blog';
36
37
  export * from './layout-basic/BaseLayout.astro';
@@ -202,6 +202,7 @@ const {
202
202
  author={metaConfig.author}
203
203
  robots={metaConfig.robots}
204
204
  head={metaConfig.head}
205
+ favicon={metaConfig.favicon}
205
206
  debug={debug}
206
207
  {...rest}>
207
208
  <ClientRouter />
@@ -50,7 +50,7 @@
50
50
  */
51
51
 
52
52
  import '../style.ts';
53
- import { LinkUtil, type IMetaProps } from '../index';
53
+ import { type IMetaProps } from '../index';
54
54
 
55
55
  export interface Props extends IMetaProps {
56
56
  debug?: boolean;
@@ -66,12 +66,12 @@ const {
66
66
  head,
67
67
  debug = true,
68
68
  class: className,
69
+ favicon,
69
70
  'class:list': classList,
70
71
  } = Astro.props;
71
72
 
72
73
  // 处理类名
73
74
  let bodyClasses = debug ? 'cosy:border cosy:border-red-500' : className || '';
74
- const faviconPath = LinkUtil.createUrl('/favicon.png');
75
75
  ---
76
76
 
77
77
  <!doctype html>
@@ -83,7 +83,7 @@ const faviconPath = LinkUtil.createUrl('/favicon.png');
83
83
  {description && <meta name="description" content={description} />}
84
84
  {keywords && <meta name="keywords" content={keywords} />}
85
85
  <meta name="generator" content={Astro.generator} />
86
- <link rel="icon" type="image/svg+xml" href={faviconPath} />
86
+ {favicon && <link rel="icon" type={favicon.format} href={favicon.src} />}
87
87
 
88
88
  <!-- 自定义样式 -->
89
89
  {customStyles && <style set:html={customStyles} />}
@@ -5,6 +5,11 @@ export interface IMetaProps {
5
5
  author: string;
6
6
  robots: string;
7
7
 
8
+ /**
9
+ * 图标
10
+ */
11
+ favicon?: ImageMetadata;
12
+
8
13
  /**
9
14
  * 基础路径,用于处理网站部署在二级目录的情况
10
15
  * @default ""
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coffic/cosy-ui",
3
- "version": "0.6.40",
3
+ "version": "0.7.2",
4
4
  "description": "An astro component library",
5
5
  "author": {
6
6
  "name": "nookery",
@@ -48,7 +48,6 @@
48
48
  "astro": "^5.1.3"
49
49
  },
50
50
  "dependencies": {
51
- "@remixicon/vue": "^4.6.0",
52
51
  "astro-integration-kit": "^0.18.0",
53
52
  "fs-extra": "^11.3.0",
54
53
  "html-to-image": "^1.11.13"
@@ -57,7 +56,6 @@
57
56
  "@astrojs/check": "^0.9.4",
58
57
  "@astrojs/mdx": "^4.2.6",
59
58
  "@astrojs/ts-plugin": "^1.10.4",
60
- "@astrojs/vue": "^5.0.13",
61
59
  "@eslint/js": "^9.27.0",
62
60
  "@tailwindcss/typography": "^0.5.16",
63
61
  "@tailwindcss/vite": "^4.1.7",
@@ -69,8 +67,6 @@
69
67
  "@types/node": "^22.15.19",
70
68
  "@types/react": "^19.1.4",
71
69
  "@typescript-eslint/parser": "^8.32.1",
72
- "@vitejs/plugin-vue": "^5.2.4",
73
- "@vue/tsconfig": "^0.7.0",
74
70
  "astro": "^5.7.13",
75
71
  "chai": "^4.5.0",
76
72
  "daisyui": "^5.0.35",
@@ -86,9 +82,6 @@
86
82
  "tsx": "^4.19.4",
87
83
  "typescript": "^5.8.3",
88
84
  "typescript-eslint": "^8.32.1",
89
- "vite": "^6.3.5",
90
- "vite-plugin-vue-devtools": "^7.7.6",
91
- "vue": "^3.5.14",
92
- "vue-eslint-parser": "^10.1.3"
85
+ "vite": "^6.3.5"
93
86
  }
94
87
  }
@@ -1,105 +0,0 @@
1
- <script setup lang="ts">
2
- import { computed } from 'vue'
3
-
4
- interface Props {
5
- variant?:
6
- | 'primary'
7
- | 'secondary'
8
- | 'accent'
9
- | 'info'
10
- | 'success'
11
- | 'warning'
12
- | 'error'
13
- | 'ghost'
14
- | 'link'
15
- | 'outline'
16
- | 'neutral'
17
- size?: 'lg' | 'md' | 'sm' | 'xs'
18
- shape?: 'circle' | 'square'
19
- wide?: boolean
20
- block?: boolean
21
- loading?: boolean
22
- disabled?: boolean
23
- type?: 'button' | 'submit' | 'reset'
24
- href?: string
25
- target?: string
26
- }
27
-
28
- const props = withDefaults(defineProps<Props>(), {
29
- variant: 'primary',
30
- size: 'md',
31
- wide: false,
32
- block: false,
33
- loading: false,
34
- disabled: false,
35
- type: 'button'
36
- })
37
-
38
- const buttonClasses = computed(() => {
39
- const classes = ['cosy:btn']
40
-
41
- // Variant classes
42
- const variantClasses = {
43
- primary: 'cosy:btn-primary',
44
- secondary: 'cosy:btn-secondary',
45
- accent: 'cosy:btn-accent',
46
- info: 'cosy:btn-info',
47
- success: 'cosy:btn-success',
48
- warning: 'cosy:btn-warning',
49
- error: 'cosy:btn-error',
50
- ghost: 'cosy:btn-ghost',
51
- link: 'cosy:btn-link',
52
- outline: 'cosy:btn-outline',
53
- neutral: 'cosy:btn-neutral',
54
- }
55
-
56
- // Size classes
57
- const sizeClasses = {
58
- lg: 'cosy:btn-lg',
59
- md: 'cosy:btn-md',
60
- sm: 'cosy:btn-sm',
61
- xs: 'cosy:btn-xs',
62
- }
63
-
64
- // Shape classes
65
- const shapeClasses = {
66
- circle: 'cosy:btn-circle',
67
- square: 'cosy:btn-square',
68
- }
69
-
70
- if (variantClasses[props.variant]) {
71
- classes.push(variantClasses[props.variant])
72
- }
73
-
74
- if (sizeClasses[props.size]) {
75
- classes.push(sizeClasses[props.size])
76
- }
77
-
78
- if (props.shape && shapeClasses[props.shape]) {
79
- classes.push(shapeClasses[props.shape])
80
- }
81
-
82
- if (props.wide) classes.push('cosy:btn-wide')
83
- if (props.block) classes.push('cosy:btn-block')
84
- if (props.loading) classes.push('cosy:loading')
85
-
86
- return classes
87
- })
88
- </script>
89
-
90
- <template>
91
- <component
92
- :is="props.href ? 'a' : 'button'"
93
- :class="buttonClasses"
94
- :type="props.href ? undefined : props.type"
95
- :disabled="props.disabled"
96
- :href="props.href"
97
- :target="props.target"
98
- >
99
- <span class="cosy:flex cosy:items-center cosy:gap-2">
100
- <slot name="icon-left" />
101
- <slot />
102
- <slot name="icon-right" />
103
- </span>
104
- </component>
105
- </template>
@@ -1,11 +0,0 @@
1
- <script setup lang="ts">
2
- import Button from './Button.vue'
3
- </script>
4
-
5
- <template>
6
- <div class="cosy:flex cosy:gap-2">
7
- <Button>默认按钮</Button>
8
- <Button variant="primary">主要按钮</Button>
9
- <Button variant="secondary">次要按钮</Button>
10
- </div>
11
- </template>
@@ -1,91 +0,0 @@
1
-
2
-
3
- <script setup lang="ts">
4
- import { ref } from 'vue'
5
-
6
- const props = defineProps({
7
- title: {
8
- type: String,
9
- required: false,
10
- default: 'Feature Button'
11
- },
12
- size: {
13
- type: String,
14
- default: 'w-64',
15
- validator: (value: string) => ['w-64', 'w-32', 'w-16', 'w-12', 'w-8'].includes(value)
16
- },
17
- lang: {
18
- type: String,
19
- default: 'en',
20
- validator: (value: string) => ['en', 'zh'].includes(value)
21
- },
22
- showTips: {
23
- type: Boolean,
24
- default: false
25
- }
26
- })
27
-
28
- const isPopupVisible = ref(false)
29
-
30
- const showPopup = () => {
31
- if (props.showTips) {
32
- isPopupVisible.value = true
33
- setTimeout(hidePopup, 2000) // Auto-hide after 2 seconds
34
- }
35
- }
36
-
37
- const hidePopup = () => {
38
- isPopupVisible.value = false
39
- }
40
- </script>
41
- <template>
42
- <div>
43
- <!-- Button with hover effects -->
44
- <button :class="[
45
- 'cosy:bg-cyan-500/20 cosy:text-cyan-500 cosy:border-cyan-500 cosy:border-2 cosy:hover:bg-cyan-500/30 cosy:hover:text-white cosy:hover:border-cyan-500/30 cosy:hover:scale-105 cosy:transition-all cosy:duration-300 cosy:rounded-2xl cosy:text-center cosy:backdrop-blur-lg cosy:text-2xl',
46
- props.size
47
- ]" @click="showPopup">
48
- <slot />
49
- {{ props.title }}
50
- </button>
51
-
52
- <!-- Popup message -->
53
- <Transition name="fade">
54
- <div v-if="isPopupVisible"
55
- class="cosy:fixed cosy:inset-0 cosy:flex cosy:items-center cosy:justify-center cosy:z-50"
56
- @click="hidePopup">
57
- <div
58
- class="cosy:bg-black/80 cosy:backdrop-blur-sm cosy:p-6 cosy:rounded-xl cosy:text-white cosy:animate-popup">
59
- {{ lang === 'zh' ? '这是展示图,不支持操作' : 'This is a preview image, no operation is supported' }}
60
- </div>
61
- </div>
62
- </Transition>
63
- </div>
64
- </template>
65
- <style scoped>
66
- .fade-enter-active,
67
- .fade-leave-active {
68
- transition: opacity 0.3s ease;
69
- }
70
-
71
- .fade-enter-from,
72
- .fade-leave-to {
73
- opacity: 0;
74
- }
75
-
76
- .animate-popup {
77
- animation: popup 0.3s ease-out;
78
- }
79
-
80
- @keyframes popup {
81
- from {
82
- transform: scale(0.95);
83
- opacity: 0;
84
- }
85
-
86
- to {
87
- transform: scale(1);
88
- opacity: 1;
89
- }
90
- }
91
- </style>
@@ -1,8 +0,0 @@
1
- <template>
2
- <FeatureButton title="特性按钮" />
3
- </template>
4
-
5
- <script setup lang="ts">
6
- import '../style';
7
- import FeatureButton from './ButtonFeature.vue';
8
- </script>
@@ -1,18 +0,0 @@
1
- ---
2
- import { CodeContainer } from '../index';
3
- import ButtonFeatureBasic from './ButtonFeatureBasic.vue';
4
- import ButtonFeatureWithTips from './ButtonFeatureWithTips.vue';
5
- import ButtonFeatureBasicSourceCode from './ButtonFeatureBasic.vue?raw';
6
- import ButtonFeatureWithTipsSourceCode from './ButtonFeatureWithTips.vue?raw';
7
- ---
8
-
9
- <CodeContainer
10
- titles={['Vue-基础用法', 'Vue-带提示功能']}
11
- codes={[ButtonFeatureBasicSourceCode, ButtonFeatureWithTipsSourceCode]}>
12
- <div id="tab-1">
13
- <ButtonFeatureBasic client:load />
14
- </div>
15
- <div id="tab-2">
16
- <ButtonFeatureWithTips client:load />
17
- </div>
18
- </CodeContainer>
@@ -1,7 +0,0 @@
1
- <template>
2
- <FeatureButton title="带提示特性" showTips />
3
- </template>
4
-
5
- <script setup lang="ts">
6
- import FeatureButton from './ButtonFeature.vue';
7
- </script>
@@ -1,13 +0,0 @@
1
- <script setup lang="ts">
2
- import VueButton from './Button.vue'
3
- </script>
4
-
5
- <template>
6
- <div class="cosy:flex cosy:gap-2">
7
- <VueButton href="#" variant="primary">内部链接</VueButton>
8
- <VueButton href="https://example.com" target="_blank" variant="primary">
9
- 外部链接
10
- <template #icon-right>↗</template>
11
- </VueButton>
12
- </div>
13
- </template>
@@ -1,12 +0,0 @@
1
- <script setup lang="ts">
2
- import VueButton from './Button.vue'
3
- </script>
4
-
5
- <template>
6
- <div class="cosy:flex cosy:items-center cosy:gap-2">
7
- <VueButton size="xs">超小按钮</VueButton>
8
- <VueButton size="sm">小型按钮</VueButton>
9
- <VueButton size="md">中等按钮</VueButton>
10
- <VueButton size="lg">大型按钮</VueButton>
11
- </div>
12
- </template>
@@ -1,21 +0,0 @@
1
- <script setup lang="ts">
2
- import VueButton from './Button.vue'
3
- </script>
4
-
5
- <template>
6
- <div class="cosy:flex cosy:gap-2">
7
- <VueButton>
8
- <template #icon-left>👈</template>
9
- 左侧图标
10
- </VueButton>
11
- <VueButton>
12
- 右侧图标
13
- <template #icon-right>👉</template>
14
- </VueButton>
15
- <VueButton>
16
- <template #icon-left>👈</template>
17
- 两侧图标
18
- <template #icon-right>👉</template>
19
- </VueButton>
20
- </div>
21
- </template>
@@ -1,4 +0,0 @@
1
- import FeatureButton from './ButtonFeature.vue';
2
- import Button from './Button.vue';
3
-
4
- export { FeatureButton, Button };
@@ -1,120 +0,0 @@
1
- <!--
2
- @component AlertDialog
3
-
4
- @description
5
- AlertDialog 组件用于显示简单的确认对话框,支持国际化,带有淡入淡出动画效果。
6
-
7
- @usage
8
- 基本用法:
9
- ```vue
10
- <AlertDialog v-model="showDialog" message="操作已完成" />
11
- ```
12
-
13
- 指定语言:
14
- ```vue
15
- <AlertDialog v-model="showDialog" message="Operation completed" lang="en" />
16
- ```
17
-
18
- 组合使用:
19
- ```vue
20
- <template>
21
- <button @click="showDialog = true">显示对话框</button>
22
- <AlertDialog v-model="showDialog" message="确认要继续吗?" />
23
- </template>
24
-
25
- <script setup lang="ts">
26
- import { ref } from 'vue';
27
- import { AlertDialog } from 'cosy-ui';
28
-
29
- const showDialog = ref(false);
30
- </script>
31
- ```
32
-
33
- @props
34
- @prop {boolean} modelValue - 控制对话框显示状态,支持v-model双向绑定
35
- @prop {string} message - 对话框显示的消息内容
36
- @prop {('zh-cn'|'en')} [lang='zh-cn'] - 语言设置,影响按钮文本
37
-
38
- @emits
39
- @emit {update:modelValue} - 当对话框关闭时触发,用于更新v-model绑定值
40
- -->
41
-
42
- <script lang="ts">
43
- import '../../style'
44
- import { defineComponent } from 'vue'
45
-
46
- type MessageKey = 'confirm';
47
-
48
- interface Messages {
49
- [key: string]: {
50
- [key in MessageKey]: string;
51
- };
52
- }
53
-
54
- export default defineComponent({
55
- name: 'AlertDialog',
56
- props: {
57
- modelValue: {
58
- type: Boolean,
59
- required: true
60
- },
61
- message: {
62
- type: String,
63
- required: true
64
- },
65
- lang: {
66
- type: String as () => 'zh-cn' | 'en',
67
- default: 'zh-cn'
68
- }
69
- },
70
- emits: ['update:modelValue'],
71
- setup(props) {
72
- // 多语言文本
73
- const t = (key: MessageKey) => {
74
- const messages: Messages = {
75
- 'zh-cn': {
76
- confirm: '确定'
77
- },
78
- 'en': {
79
- confirm: 'OK'
80
- }
81
- };
82
- return messages[props.lang][key];
83
- };
84
-
85
- return {
86
- t
87
- };
88
- }
89
- })
90
- </script>
91
-
92
- <template>
93
- <Transition name="fade" class="cosy:transition-opacity cosy:duration-200 cosy:ease-in-out">
94
- <div v-if="modelValue"
95
- class="cosy:fixed cosy:inset-0 cosy:z-50 cosy:flex cosy:items-center cosy:justify-center cosy:opacity-100 cosy:enter:opacity-0 cosy:leave:opacity-0">
96
- <!-- 背景遮罩 -->
97
- <div class="cosy:absolute cosy:inset-0 cosy:bg-base-200/80 cosy:backdrop-blur-sm"
98
- @click="$emit('update:modelValue', false)" />
99
-
100
- <!-- 对话框 -->
101
- <div
102
- class="cosy:relative cosy:bg-base-100 cosy:rounded-xl cosy:shadow-lg cosy:w-[400px] cosy:transform cosy:transition-all">
103
- <!-- 内容区域 -->
104
- <div class="cosy:p-6">
105
- <p class="cosy:text-base-content">
106
- {{ message }}
107
- </p>
108
- </div>
109
-
110
- <!-- 按钮区域 -->
111
- <div class="cosy:flex cosy:border-t cosy:border-base-300">
112
- <button class="cosy:btn cosy:btn-ghost cosy:flex-1 cosy:rounded-none cosy:rounded-b-xl"
113
- @click="$emit('update:modelValue', false)">
114
- {{ t('confirm') }}
115
- </button>
116
- </div>
117
- </div>
118
- </div>
119
- </Transition>
120
- </template>