@14ch/svelte-ui 0.0.10 → 0.0.11
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.
- package/README.md +1 -1
- package/dist/constants/skeleton.d.ts +21 -0
- package/dist/constants/skeleton.js +158 -0
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { SkeletonPatternConfig, SkeletonMediaConfig, SkeletonThumbnailConfig, SkeletonTextConfig, SkeletonHeadingConfig, SkeletonButtonConfig, SkeletonAvatarConfig, SkeletonAvatarImageConfig } from '../types/skeleton';
|
|
2
|
+
export declare const DEFAULT_PATTERN_CONFIG: {
|
|
3
|
+
readonly repeat: 1;
|
|
4
|
+
readonly repeatDirection: "vertical";
|
|
5
|
+
readonly repeatGap: "var(--svelte-ui-skeleton-repeat-gap)";
|
|
6
|
+
};
|
|
7
|
+
export declare const PRESET_PATTERNS: Record<string, SkeletonPatternConfig[]>;
|
|
8
|
+
export declare const DEFAULT_BOX_CONFIG: {
|
|
9
|
+
readonly width: "100%";
|
|
10
|
+
readonly height: "var(--svelte-ui-skeleton-box-height, 240px)";
|
|
11
|
+
readonly radius: "var(--svelte-ui-skeleton-box-border-radius, 8px)";
|
|
12
|
+
};
|
|
13
|
+
export declare const DEFAULT_MEDIA_CONFIG: Partial<SkeletonMediaConfig>;
|
|
14
|
+
export declare const DEFAULT_THUMBNAIL_CONFIG: SkeletonThumbnailConfig;
|
|
15
|
+
export declare const DEFAULT_TEXT_CONFIG_MEDIA: SkeletonTextConfig;
|
|
16
|
+
export declare const DEFAULT_TEXT_CONFIG: SkeletonTextConfig;
|
|
17
|
+
export declare const DEFAULT_TEXT_CONFIG_AVATAR: SkeletonTextConfig;
|
|
18
|
+
export declare const DEFAULT_HEADING_CONFIG: SkeletonHeadingConfig;
|
|
19
|
+
export declare const DEFAULT_BUTTON_CONFIG: SkeletonButtonConfig;
|
|
20
|
+
export declare const DEFAULT_AVATAR_IMAGE_CONFIG: SkeletonAvatarImageConfig;
|
|
21
|
+
export declare const DEFAULT_AVATAR_CONFIG: SkeletonAvatarConfig;
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
// =========================================================================
|
|
2
|
+
// Default Pattern Config
|
|
3
|
+
// =========================================================================
|
|
4
|
+
export const DEFAULT_PATTERN_CONFIG = {
|
|
5
|
+
repeat: 1,
|
|
6
|
+
repeatDirection: 'vertical',
|
|
7
|
+
repeatGap: 'var(--svelte-ui-skeleton-repeat-gap)'
|
|
8
|
+
};
|
|
9
|
+
// =========================================================================
|
|
10
|
+
// Preset Patterns
|
|
11
|
+
// =========================================================================
|
|
12
|
+
export const PRESET_PATTERNS = {
|
|
13
|
+
'article-detail': [
|
|
14
|
+
{
|
|
15
|
+
type: 'box'
|
|
16
|
+
},
|
|
17
|
+
{ type: 'avatar', showName: true },
|
|
18
|
+
{
|
|
19
|
+
type: 'text',
|
|
20
|
+
lines: 5,
|
|
21
|
+
repeat: 1
|
|
22
|
+
}
|
|
23
|
+
],
|
|
24
|
+
'article-list': [
|
|
25
|
+
{
|
|
26
|
+
type: 'media',
|
|
27
|
+
layout: 'horizontal',
|
|
28
|
+
thumbnailConfig: {
|
|
29
|
+
width: 'var(--svelte-ui-skeleton-media-thumbnail-width, 160px)',
|
|
30
|
+
aspectRatio: '4/3'
|
|
31
|
+
},
|
|
32
|
+
textConfig: { lines: 3 },
|
|
33
|
+
repeat: 3
|
|
34
|
+
}
|
|
35
|
+
],
|
|
36
|
+
'product-list': [
|
|
37
|
+
{
|
|
38
|
+
type: 'media',
|
|
39
|
+
layout: 'vertical',
|
|
40
|
+
thumbnailConfig: { width: '100%', aspectRatio: '1' },
|
|
41
|
+
textConfig: { lines: 2 },
|
|
42
|
+
repeat: 4,
|
|
43
|
+
repeatDirection: 'horizontal'
|
|
44
|
+
}
|
|
45
|
+
],
|
|
46
|
+
'video-list': [
|
|
47
|
+
{
|
|
48
|
+
type: 'media',
|
|
49
|
+
layout: 'vertical',
|
|
50
|
+
thumbnailConfig: { width: '100%', aspectRatio: '16/9' },
|
|
51
|
+
textConfig: { lines: 2 },
|
|
52
|
+
repeat: 3,
|
|
53
|
+
repeatDirection: 'horizontal'
|
|
54
|
+
}
|
|
55
|
+
],
|
|
56
|
+
'user-list': [
|
|
57
|
+
{
|
|
58
|
+
type: 'avatar',
|
|
59
|
+
showName: true
|
|
60
|
+
}
|
|
61
|
+
],
|
|
62
|
+
'button-group': [
|
|
63
|
+
{
|
|
64
|
+
type: 'button',
|
|
65
|
+
width: 'var(--svelte-ui-skeleton-button-width, 120px)',
|
|
66
|
+
repeat: 2,
|
|
67
|
+
repeatDirection: 'horizontal',
|
|
68
|
+
repeatGap: '16px'
|
|
69
|
+
}
|
|
70
|
+
]
|
|
71
|
+
};
|
|
72
|
+
// =========================================================================
|
|
73
|
+
// Default Box Config
|
|
74
|
+
// =========================================================================
|
|
75
|
+
export const DEFAULT_BOX_CONFIG = {
|
|
76
|
+
width: '100%',
|
|
77
|
+
height: 'var(--svelte-ui-skeleton-box-height, 240px)',
|
|
78
|
+
radius: 'var(--svelte-ui-skeleton-box-border-radius, 8px)'
|
|
79
|
+
};
|
|
80
|
+
// =========================================================================
|
|
81
|
+
// Default Media Config
|
|
82
|
+
// =========================================================================
|
|
83
|
+
export const DEFAULT_MEDIA_CONFIG = {
|
|
84
|
+
type: 'media',
|
|
85
|
+
layout: 'horizontal',
|
|
86
|
+
thumbnailConfig: {
|
|
87
|
+
width: 'var(--svelte-ui-skeleton-media-thumbnail-width, 160px)',
|
|
88
|
+
aspectRatio: '16/9'
|
|
89
|
+
},
|
|
90
|
+
textConfig: { width: '100%', lines: 2 }
|
|
91
|
+
};
|
|
92
|
+
// =========================================================================
|
|
93
|
+
// Default Thumbnail Config
|
|
94
|
+
// =========================================================================
|
|
95
|
+
export const DEFAULT_THUMBNAIL_CONFIG = {
|
|
96
|
+
type: 'thumbnail',
|
|
97
|
+
width: 'var(--svelte-ui-skeleton-media-thumbnail-width, 160px)',
|
|
98
|
+
radius: 'var(--svelte-ui-skeleton-media-thumbnail-border-radius, var(--svelte-ui-border-radius))',
|
|
99
|
+
customStyle: ''
|
|
100
|
+
};
|
|
101
|
+
// =========================================================================
|
|
102
|
+
// Default Text Configs
|
|
103
|
+
// =========================================================================
|
|
104
|
+
// For SkeletonMedia
|
|
105
|
+
export const DEFAULT_TEXT_CONFIG_MEDIA = {
|
|
106
|
+
type: 'text',
|
|
107
|
+
width: '100%',
|
|
108
|
+
lines: 2,
|
|
109
|
+
customStyle: ''
|
|
110
|
+
};
|
|
111
|
+
// For SkeletonText
|
|
112
|
+
export const DEFAULT_TEXT_CONFIG = {
|
|
113
|
+
type: 'text',
|
|
114
|
+
width: '100%',
|
|
115
|
+
lines: 1,
|
|
116
|
+
customStyle: ''
|
|
117
|
+
};
|
|
118
|
+
// For SkeletonAvatar
|
|
119
|
+
export const DEFAULT_TEXT_CONFIG_AVATAR = {
|
|
120
|
+
type: 'text',
|
|
121
|
+
width: 'var(--svelte-ui-skeleton-avatar-text-width, 160px)',
|
|
122
|
+
lines: 1,
|
|
123
|
+
customStyle: ''
|
|
124
|
+
};
|
|
125
|
+
// =========================================================================
|
|
126
|
+
// Default Heading Config
|
|
127
|
+
// =========================================================================
|
|
128
|
+
export const DEFAULT_HEADING_CONFIG = {
|
|
129
|
+
type: 'heading',
|
|
130
|
+
width: 'var(--svelte-ui-skeleton-heading-width, 50%)',
|
|
131
|
+
fontSize: 'var(--svelte-ui-skeleton-heading-font-size, 2rem)',
|
|
132
|
+
customStyle: ''
|
|
133
|
+
};
|
|
134
|
+
// =========================================================================
|
|
135
|
+
// Default Button Config
|
|
136
|
+
// =========================================================================
|
|
137
|
+
export const DEFAULT_BUTTON_CONFIG = {
|
|
138
|
+
type: 'button',
|
|
139
|
+
width: 'var(--svelte-ui-skeleton-button-width, 120px)',
|
|
140
|
+
height: 'var(--svelte-ui-skeleton-button-height, 36px)',
|
|
141
|
+
radius: 'var(--svelte-ui-skeleton-button-border-radius)',
|
|
142
|
+
align: 'left',
|
|
143
|
+
customStyle: ''
|
|
144
|
+
};
|
|
145
|
+
// =========================================================================
|
|
146
|
+
// Default Avatar Configs
|
|
147
|
+
// =========================================================================
|
|
148
|
+
export const DEFAULT_AVATAR_IMAGE_CONFIG = {
|
|
149
|
+
type: 'avatar-image',
|
|
150
|
+
size: 'var(--svelte-ui-skeleton-avatar-image-size, 48px)',
|
|
151
|
+
radius: 'var(--svelte-ui-skeleton-avatar-image-border-radius)',
|
|
152
|
+
customStyle: ''
|
|
153
|
+
};
|
|
154
|
+
export const DEFAULT_AVATAR_CONFIG = {
|
|
155
|
+
type: 'avatar',
|
|
156
|
+
avatarImageConfig: DEFAULT_AVATAR_IMAGE_CONFIG,
|
|
157
|
+
textConfig: DEFAULT_TEXT_CONFIG_AVATAR
|
|
158
|
+
};
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@14ch/svelte-ui",
|
|
3
3
|
"description": "Modern Svelte UI components library with TypeScript support",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "0.0.
|
|
5
|
+
"version": "0.0.11",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"keywords": [
|
|
8
8
|
"svelte",
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
"dist/components/",
|
|
36
36
|
"dist/types/",
|
|
37
37
|
"dist/utils/",
|
|
38
|
+
"dist/constants/",
|
|
38
39
|
"dist/assets/",
|
|
39
40
|
"dist/i18n/",
|
|
40
41
|
"dist/index.js",
|