spoko-design-system 0.4.5 → 0.4.7
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/.astro/settings.json +1 -1
- package/.astro/types.d.ts +1 -0
- package/icon.config.ts +2 -1
- package/index.ts +2 -0
- package/package.json +4 -4
- package/src/components/Input.astro +58 -0
- package/src/pages/components/buttons.mdx +5 -1
- package/src/pages/components/input.mdx +28 -26
package/.astro/settings.json
CHANGED
package/.astro/types.d.ts
CHANGED
package/icon.config.ts
CHANGED
package/index.ts
CHANGED
|
@@ -8,6 +8,7 @@ export { default as FuckRussia } from './src/components/FuckRussia.vue';
|
|
|
8
8
|
export { default as FlagPL } from './src/components/flags/FlagPL.vue';
|
|
9
9
|
export { default as Badges } from './src/components/Badges.vue';
|
|
10
10
|
export { default as SlimBanner } from './src/components/SlimBanner.vue';
|
|
11
|
+
|
|
11
12
|
export { default as Jumbotron } from './src/components/Jumbotron.astro';
|
|
12
13
|
export { default as Button } from './src/components/Button.vue';
|
|
13
14
|
export { default as Breadcrumbs } from './src/components/Breadcrumbs.vue';
|
|
@@ -28,6 +29,7 @@ export { default as ProductNumber } from './src/components/Product/ProductNumber
|
|
|
28
29
|
export { default as ProductLink } from './src/components/Product/ProductLink.vue';
|
|
29
30
|
// export { default as ProductCarousel } from './src/components/Product/ProductCarousel.astro';
|
|
30
31
|
export { default as LanguageSuggestion } from './src/components/LanguageSuggestion.astro';
|
|
32
|
+
export { default as Input } from './src/components/Input.astro';
|
|
31
33
|
|
|
32
34
|
export { default as CategoryLink } from './src/components/Category/CategoryLink.vue';
|
|
33
35
|
export { default as CategorySidebarToggler } from './src/components/Category/CategorySidebarToggler.vue';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "spoko-design-system",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.7",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "./index.ts",
|
|
6
6
|
"module": "./index.ts",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@astrojs/sitemap": "^3.2.1",
|
|
47
47
|
"@astrojs/ts-plugin": "^1.10.4",
|
|
48
48
|
"@astrojs/vue": "^5.0.6",
|
|
49
|
-
"@docsearch/css": "^3.
|
|
49
|
+
"@docsearch/css": "^3.9.0",
|
|
50
50
|
"@iconify-json/ant-design": "^1.2.5",
|
|
51
51
|
"@iconify-json/bi": "^1.2.2",
|
|
52
52
|
"@iconify-json/bx": "^1.2.2",
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
"i18next-browser-languagedetector": "^8.0.3",
|
|
95
95
|
"i18next-fs-backend": "^2.6.0",
|
|
96
96
|
"i18next-http-backend": "^3.0.2",
|
|
97
|
-
"i18next-vue": "^5.
|
|
97
|
+
"i18next-vue": "^5.2.0",
|
|
98
98
|
"swiper": "^11.2.4",
|
|
99
99
|
"unocss": "^66.0.0",
|
|
100
100
|
"vue": "^3.5.13"
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
"@vue/compiler-sfc": "^3.5.13",
|
|
108
108
|
"astro": "^5.3.0",
|
|
109
109
|
"unocss": "^0.65.0",
|
|
110
|
-
"vite": "^6.1.
|
|
110
|
+
"vite": "^6.1.1"
|
|
111
111
|
},
|
|
112
112
|
"packageManager": "pnpm@9.15.3",
|
|
113
113
|
"pnpm": {
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
---
|
|
2
|
+
// Input.astro
|
|
3
|
+
interface Props {
|
|
4
|
+
id: string;
|
|
5
|
+
label: string;
|
|
6
|
+
variant?: 'filled' | 'standard';
|
|
7
|
+
type?: string;
|
|
8
|
+
value?: string;
|
|
9
|
+
required?: boolean;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const {
|
|
13
|
+
id,
|
|
14
|
+
label,
|
|
15
|
+
variant = 'standard',
|
|
16
|
+
type = 'text',
|
|
17
|
+
value = '',
|
|
18
|
+
required = false
|
|
19
|
+
} = Astro.props;
|
|
20
|
+
|
|
21
|
+
// Common classes for both variants
|
|
22
|
+
const baseInputClasses = "block w-full text-sm text-blue-medium border-0 border-b-2 border-neutral-light appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium peer";
|
|
23
|
+
|
|
24
|
+
const baseLabelClasses = "absolute text-sm text-slate-medium dark:text-neutral-defaultduration-300 transform scale-75 origin-[0] peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-focus:scale-75 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto";
|
|
25
|
+
|
|
26
|
+
// Variant specific classes
|
|
27
|
+
const variantClasses = {
|
|
28
|
+
filled: {
|
|
29
|
+
wrapper: "relative",
|
|
30
|
+
input: `${baseInputClasses} rounded-t-lg px-2.5 pb-2.5 pt-5 bg-gray-50 dark:bg-gray-700`,
|
|
31
|
+
label: `${baseLabelClasses} -translate-y-4 top-4 z-10 start-2.5 peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-4`
|
|
32
|
+
},
|
|
33
|
+
standard: {
|
|
34
|
+
wrapper: "relative z-0",
|
|
35
|
+
input: `${baseInputClasses} py-2.5 px-0 bg-transparent`,
|
|
36
|
+
label: `${baseLabelClasses} -translate-y-6 top-3 -z-10 peer-focus:start-0 peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-6`
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
const classes = variantClasses[variant];
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
<div class={classes.wrapper}>
|
|
44
|
+
<input
|
|
45
|
+
type={type}
|
|
46
|
+
id={id}
|
|
47
|
+
value={value}
|
|
48
|
+
required={required}
|
|
49
|
+
class={classes.input}
|
|
50
|
+
placeholder=" "
|
|
51
|
+
/>
|
|
52
|
+
<label
|
|
53
|
+
for={id}
|
|
54
|
+
class={classes.label}
|
|
55
|
+
>
|
|
56
|
+
{label}
|
|
57
|
+
</label>
|
|
58
|
+
</div>
|
|
@@ -200,7 +200,7 @@ Rounded edges
|
|
|
200
200
|
|
|
201
201
|
Text buttons are used for actions that do not require a primary or secondary button.
|
|
202
202
|
|
|
203
|
-
<div class="component-preview">
|
|
203
|
+
<div class="component-preview flex-wrap">
|
|
204
204
|
<Button primary-outline title="Title">Text button</Button>
|
|
205
205
|
<Button primary-outline rounded title="Title">Text button</Button>
|
|
206
206
|
|
|
@@ -209,6 +209,8 @@ Text buttons are used for actions that do not require a primary or secondary but
|
|
|
209
209
|
|
|
210
210
|
<Button tertiary-outline title="Title">Text button</Button>
|
|
211
211
|
<Button tertiary-outline rounded title="Title">Text button</Button>
|
|
212
|
+
|
|
213
|
+
<Button tertiary-outline title="Title" class="border-2">Text button</Button>
|
|
212
214
|
</div>
|
|
213
215
|
|
|
214
216
|
```js
|
|
@@ -220,6 +222,8 @@ Text buttons are used for actions that do not require a primary or secondary but
|
|
|
220
222
|
|
|
221
223
|
<Button tertiary-outline title="Title">Text button</Button>
|
|
222
224
|
<Button tertiary-outline rounded title="Title">Text button</Button>
|
|
225
|
+
|
|
226
|
+
<Button tertiary-outline title="Title" class="border-2">Text button</Button>
|
|
223
227
|
```
|
|
224
228
|
|
|
225
229
|
### Outline button - custom hover
|
|
@@ -3,8 +3,9 @@ title: Input
|
|
|
3
3
|
layout: ../../layouts/MainLayout.astro
|
|
4
4
|
---
|
|
5
5
|
import MainInput from '../../components/MainInput.vue'
|
|
6
|
+
import Input from '../../components/Input.astro';
|
|
6
7
|
|
|
7
|
-
# Input text
|
|
8
|
+
# Basic Input text
|
|
8
9
|
|
|
9
10
|
<div class="component-preview">
|
|
10
11
|
<MainInput label="Name"></MainInput>
|
|
@@ -14,33 +15,34 @@ import MainInput from '../../components/MainInput.vue'
|
|
|
14
15
|
<MainInput type="text" value="Hello world!"></MainInput>
|
|
15
16
|
```
|
|
16
17
|
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
# Floating Label Input
|
|
19
19
|
<div class="component-preview">
|
|
20
|
-
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
<div class="bg-white grid items-end w-full gap-6 md:grid-cols-3 px-4 py-6">
|
|
21
|
+
<Input
|
|
22
|
+
id="name-filled"
|
|
23
|
+
label="Floating filled"
|
|
24
|
+
variant="filled"
|
|
25
|
+
/>
|
|
26
|
+
<Input
|
|
27
|
+
id="email-standard"
|
|
28
|
+
label="Floating standard"
|
|
29
|
+
variant="standard"
|
|
30
|
+
/>
|
|
25
31
|
</div>
|
|
26
|
-
|
|
27
|
-
<div class="relative z-0">
|
|
28
|
-
<input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium peer" placeholder=" " />
|
|
29
|
-
<label for="floating_standard" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
|
|
30
|
-
</div>
|
|
31
|
-
</div>
|
|
32
|
-
|
|
33
32
|
</div>
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
|
|
36
34
|
```js
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
35
|
+
// Filled variant
|
|
36
|
+
<Input
|
|
37
|
+
id="name-filled"
|
|
38
|
+
label="Floating filled"
|
|
39
|
+
variant="filled"
|
|
40
|
+
/>
|
|
41
|
+
|
|
42
|
+
// Standard variant
|
|
43
|
+
<Input
|
|
44
|
+
id="email-standard"
|
|
45
|
+
label="Floating standard"
|
|
46
|
+
variant="standard"
|
|
47
|
+
/>
|
|
46
48
|
```
|