winduum 0.1.5 → 0.1.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/dist/main.css +1 -1
- package/dist/tailwind.css +1 -1
- package/package.json +1 -1
- package/src/{styles/base → base}/config.css +3 -2
- package/src/{styles/base → base}/default.css +1 -2
- package/src/{styles/base → base}/icons.css +0 -0
- package/src/{styles/base → base}/keyframes.css +0 -0
- package/src/{styles/base → base}/reset.css +0 -0
- package/src/base/tailwind/base.css +3 -0
- package/src/base/tailwind/gutters.css +343 -0
- package/src/{styles/base/tailwind/base.css → base/tailwind/utilities.css} +0 -9
- package/src/{styles/base → base}/theme/dark.css +0 -0
- package/src/{styles/base → base}/theme/default.css +0 -0
- package/src/{styles/components → components}/+.css +0 -0
- package/src/{styles/components → components}/Dialog.css +0 -0
- package/src/{styles/components → components}/Drawer.css +0 -0
- package/src/{styles/components → components}/Dropdown.css +0 -0
- package/src/{styles/components → components}/Field.css +1 -1
- package/src/{styles/components → components}/Table.css +0 -0
- package/src/{styles/libraries → libraries}/+.css +0 -0
- package/src/{styles/libraries → libraries}/Dialog.css +0 -0
- package/src/{scripts/libraries → libraries}/Dialog.js +0 -0
- package/src/{styles/libraries → libraries}/Hint.css +0 -0
- package/src/{styles/main.css → main.css} +0 -0
- package/src/{scripts/main.js → main.js} +0 -0
- package/src/tailwind.css +3 -0
- package/src/{styles/ui → ui}/+.css +0 -0
- package/src/{styles/ui → ui}/Badge.css +0 -0
- package/src/{styles/ui → ui}/Btn.css +0 -0
- package/src/{styles/ui → ui}/Checkbox.css +1 -1
- package/src/{styles/ui → ui}/Heading.css +0 -0
- package/src/{styles/ui → ui}/Image.css +0 -0
- package/src/{styles/ui → ui}/Info.css +0 -0
- package/src/{styles/ui → ui}/Input.css +1 -1
- package/src/{styles/ui → ui}/Label.css +0 -0
- package/src/{styles/ui → ui}/Link.css +0 -0
- package/src/{styles/ui → ui}/Notice.css +0 -0
- package/src/{styles/ui → ui}/Progress.css +0 -0
- package/src/{styles/ui → ui}/Radio.css +0 -0
- package/src/{styles/ui → ui}/Range.css +0 -0
- package/src/{styles/ui → ui}/Select.css +0 -0
- package/src/{styles/ui → ui}/Switch.css +1 -1
- package/src/{styles/ui → ui}/Text.css +1 -1
- package/src/{styles/ui → ui}/Title.css +0 -0
- package/tailwind.config.cjs +2 -1
- package/utils/tailwind.cjs +6 -11
- package/utils/tailwind.js +5 -11
- package/src/App.vue +0 -12
- package/src/badge.html +0 -42
- package/src/btn.html +0 -102
- package/src/common.html +0 -58
- package/src/form.html +0 -98
- package/src/index.html +0 -17
- package/src/input-new.html +0 -146
- package/src/input.html +0 -153
- package/src/scripts/vue.js +0 -6
- package/src/styles/tailwind.css +0 -1
- package/src/tailwind.html +0 -18
- package/src/templates/Btn.vue +0 -11
package/src/input-new.html
DELETED
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" class="font-sans">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Winduum UI</title>
|
|
6
|
-
<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1, viewport-fit=cover"/>
|
|
7
|
-
<link rel="stylesheet" href="/src/styles/main.css">
|
|
8
|
-
<link rel="stylesheet" href="/src/styles/tailwind.css">
|
|
9
|
-
<script src="/src/scripts/main.js" type="module"></script>
|
|
10
|
-
</head>
|
|
11
|
-
<body class="bg-blue-100/10 dark:bg-dark dark:text-light p-md flex flex-col items-start gap-4 accent-warning">
|
|
12
|
-
<div class="col flex-row gap-2">
|
|
13
|
-
<button class="bg-white p-xs" id="action-btn-disabled">disabled</button>
|
|
14
|
-
<button class="bg-white p-xs" id="action-btn-loading">loading</button>
|
|
15
|
-
<button class="bg-white p-xs" id="action-btn-dark">dark</button>
|
|
16
|
-
</div>
|
|
17
|
-
|
|
18
|
-
<div class="c-field">
|
|
19
|
-
<label class="ui-label" for="input">Label</label>
|
|
20
|
-
<div class="ui-input">
|
|
21
|
-
<input type="text" id="input" placeholder=" " required>
|
|
22
|
-
</div>
|
|
23
|
-
<em class="ui-info">
|
|
24
|
-
Not good
|
|
25
|
-
</em>
|
|
26
|
-
</div>
|
|
27
|
-
|
|
28
|
-
<div class="c-field">
|
|
29
|
-
<div class="ui-input is-floating">
|
|
30
|
-
<input type="text" id="input-label" placeholder=" " required>
|
|
31
|
-
<label for="input-label">Name</label>
|
|
32
|
-
</div>
|
|
33
|
-
<em class="ui-info">
|
|
34
|
-
Not good
|
|
35
|
-
</em>
|
|
36
|
-
</div>
|
|
37
|
-
|
|
38
|
-
<div class="c-field">
|
|
39
|
-
<label class="ui-label">Name</label>
|
|
40
|
-
<div class="ui-input-group">
|
|
41
|
-
<div class="ui-btn is-square is-raised bg-gray-200 text-dark">@</div>
|
|
42
|
-
<div class="ui-input">
|
|
43
|
-
<input type="tel" required>
|
|
44
|
-
</div>
|
|
45
|
-
<button class="ui-btn">Button</button>
|
|
46
|
-
</div>
|
|
47
|
-
<em class="ui-info">Validation</em>
|
|
48
|
-
</div>
|
|
49
|
-
|
|
50
|
-
<div class="flex gap-8">
|
|
51
|
-
<div class="c-field">
|
|
52
|
-
<label class="ui-label">Label</label>
|
|
53
|
-
<div class="ui-input">
|
|
54
|
-
<input type="text" placeholder=" " required>
|
|
55
|
-
</div>
|
|
56
|
-
<em class="ui-info">
|
|
57
|
-
Not good
|
|
58
|
-
</em>
|
|
59
|
-
</div>
|
|
60
|
-
<div class="c-field">
|
|
61
|
-
<label class="ui-label">Label</label>
|
|
62
|
-
<div class="ui-checkbox is-input-offset">
|
|
63
|
-
<input type="checkbox" id="checkbox" required>
|
|
64
|
-
<label for="checkbox">Name</label>
|
|
65
|
-
</div>
|
|
66
|
-
<em class="ui-info">Not valid</em>
|
|
67
|
-
</div>
|
|
68
|
-
</div>
|
|
69
|
-
<div>
|
|
70
|
-
<div class="c-field">
|
|
71
|
-
<label class="ui-label">Name</label>
|
|
72
|
-
<div class="ui-switch">
|
|
73
|
-
<input type="checkbox" id="checkbox" required>
|
|
74
|
-
</div>
|
|
75
|
-
<em class="ui-info">Not valid</em>
|
|
76
|
-
</div>
|
|
77
|
-
</div>
|
|
78
|
-
|
|
79
|
-
<div class="c-field is-horizontal gap-4">
|
|
80
|
-
<div class="col">
|
|
81
|
-
<label class="ui-label">Label</label>
|
|
82
|
-
</div>
|
|
83
|
-
<div class="col">
|
|
84
|
-
<div class="ui-input">
|
|
85
|
-
<input type="text" placeholder=" " required>
|
|
86
|
-
</div>
|
|
87
|
-
<em class="ui-info w-full">
|
|
88
|
-
Not good
|
|
89
|
-
</em>
|
|
90
|
-
</div>
|
|
91
|
-
</div>
|
|
92
|
-
|
|
93
|
-
<div class="c-field is-horizontal gap-4">
|
|
94
|
-
<div class="col">
|
|
95
|
-
<label class="ui-label">Label</label>
|
|
96
|
-
</div>
|
|
97
|
-
<div class="col is-input-offset">
|
|
98
|
-
<label class="ui-checkbox">
|
|
99
|
-
<input type="checkbox" required>
|
|
100
|
-
This is a checkbox
|
|
101
|
-
</label>
|
|
102
|
-
</div>
|
|
103
|
-
</div>
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
<label class="ui-radio">
|
|
108
|
-
<input type="checkbox" required>
|
|
109
|
-
<span>Name</span>
|
|
110
|
-
</label>
|
|
111
|
-
|
|
112
|
-
<script>
|
|
113
|
-
document.getElementById('action-btn-active').addEventListener('click', () => {
|
|
114
|
-
if (!document.querySelector('.ui-input.is-active')) {
|
|
115
|
-
document.querySelectorAll('.ui-input').forEach(element => element.classList.add('is-active'))
|
|
116
|
-
} else {
|
|
117
|
-
document.querySelectorAll('.ui-input').forEach(element => element.classList.remove('is-active'))
|
|
118
|
-
}
|
|
119
|
-
})
|
|
120
|
-
|
|
121
|
-
document.getElementById('action-btn-loading').addEventListener('click', () => {
|
|
122
|
-
if (!document.querySelector('.ui-input.is-loading')) {
|
|
123
|
-
document.querySelectorAll('.ui-input').forEach(element => element.classList.add('is-loading'))
|
|
124
|
-
} else {
|
|
125
|
-
document.querySelectorAll('.ui-input').forEach(element => element.classList.remove('is-loading'))
|
|
126
|
-
}
|
|
127
|
-
})
|
|
128
|
-
|
|
129
|
-
document.getElementById('action-btn-disabled').addEventListener('click', () => {
|
|
130
|
-
if (!document.querySelector(':where(.ui-input, .ui-select) :where(input,select,textarea):disabled')) {
|
|
131
|
-
document.querySelectorAll(':where(.ui-input, .ui-select) :where(input,select,textarea)').forEach(element => element.setAttribute('disabled', ''))
|
|
132
|
-
} else {
|
|
133
|
-
document.querySelectorAll(':where(.ui-input, .ui-select) :where(input,select,textarea)').forEach(element => element.removeAttribute('disabled'))
|
|
134
|
-
}
|
|
135
|
-
})
|
|
136
|
-
|
|
137
|
-
document.getElementById('action-btn-dark').addEventListener('click', () => {
|
|
138
|
-
if (!document.documentElement.classList.contains('dark')) {
|
|
139
|
-
document.documentElement.classList.add('dark')
|
|
140
|
-
} else {
|
|
141
|
-
document.documentElement.classList.remove('dark')
|
|
142
|
-
}
|
|
143
|
-
})
|
|
144
|
-
</script>
|
|
145
|
-
</body>
|
|
146
|
-
</html>
|
package/src/input.html
DELETED
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" class="font-sans">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Winduum UI</title>
|
|
6
|
-
<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1, viewport-fit=cover"/>
|
|
7
|
-
<link rel="stylesheet" href="/src/styles/main.css">
|
|
8
|
-
<link rel="stylesheet" href="/src/styles/tailwind.css">
|
|
9
|
-
<script src="/src/scripts/main.js" type="module"></script>
|
|
10
|
-
</head>
|
|
11
|
-
<body class="bg-blue-100/10 dark:bg-dark dark:text-light p-md flex flex-col items-start gap-4 accent-warning">
|
|
12
|
-
<div class="col flex-row gap-2">
|
|
13
|
-
<button class="bg-white p-xs" id="action-btn-disabled">disabled</button>
|
|
14
|
-
<button class="bg-white p-xs" id="action-btn-loading">loading</button>
|
|
15
|
-
<button class="bg-white p-xs" id="action-btn-dark">dark</button>
|
|
16
|
-
</div>
|
|
17
|
-
|
|
18
|
-
<div class="ui-input is-floating">
|
|
19
|
-
<input type="text" id="input-label" placeholder=" " required>
|
|
20
|
-
<label for="input-label">Name</label>
|
|
21
|
-
</div>
|
|
22
|
-
|
|
23
|
-
<div class="ui-input">
|
|
24
|
-
<svg class="icon-l" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
25
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
|
|
26
|
-
</svg>
|
|
27
|
-
<div class="icon-r">
|
|
28
|
-
<svg class="text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
29
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
|
|
30
|
-
</svg>
|
|
31
|
-
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
32
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" />
|
|
33
|
-
</svg>
|
|
34
|
-
</div>
|
|
35
|
-
<input type="text" id="input" placeholder="Enter a value.." required>
|
|
36
|
-
</div>
|
|
37
|
-
|
|
38
|
-
<div>
|
|
39
|
-
<div class="ui-input">
|
|
40
|
-
<input type="text" placeholder="Enter a value.." required>
|
|
41
|
-
<div class="icon-r">
|
|
42
|
-
<svg class="text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
43
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
|
|
44
|
-
</svg>
|
|
45
|
-
<span aria-label="Kč"></span>
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
</div>
|
|
49
|
-
|
|
50
|
-
<div class="ui-select is-floating">
|
|
51
|
-
<select>
|
|
52
|
-
<option selected="" value="">- select option -</option>
|
|
53
|
-
<option value="1">Option 1</option>
|
|
54
|
-
<option value="2">Option 2</option>
|
|
55
|
-
<option value="3">Option 3</option>
|
|
56
|
-
</select>
|
|
57
|
-
<svg class="icon-r text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
58
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
|
|
59
|
-
</svg>
|
|
60
|
-
<label>How are you?</label>
|
|
61
|
-
</div>
|
|
62
|
-
|
|
63
|
-
<div class="ui-input is-floating">
|
|
64
|
-
<textarea id="textarea" required placeholder=" "></textarea>
|
|
65
|
-
<label for="textarea">Name</label>
|
|
66
|
-
</div>
|
|
67
|
-
|
|
68
|
-
<div class="ui-input is-floating">
|
|
69
|
-
<input type="number" id="number" required placeholder=" ">
|
|
70
|
-
<label for="number">Number</label>
|
|
71
|
-
</div>
|
|
72
|
-
|
|
73
|
-
<div class="ui-input is-floating">
|
|
74
|
-
<input type="datetime-local" id="datetime" required placeholder=" ">
|
|
75
|
-
<label for="datetime">Datetime</label>
|
|
76
|
-
</div>
|
|
77
|
-
|
|
78
|
-
<div class="ui-input is-floating">
|
|
79
|
-
<input type="time" id="time" required placeholder=" ">
|
|
80
|
-
<label for="time">Datetime</label>
|
|
81
|
-
</div>
|
|
82
|
-
|
|
83
|
-
<div class="ui-input">
|
|
84
|
-
<input type="file" id="file" required>
|
|
85
|
-
<label for="file">Datetime</label>
|
|
86
|
-
</div>
|
|
87
|
-
|
|
88
|
-
<div class="ui-input-group">
|
|
89
|
-
<div class="ui-btn is-square is-raised bg-gray-200 text-dark">@</div>
|
|
90
|
-
<div class="ui-input">
|
|
91
|
-
<input type="tel" id="input" required>
|
|
92
|
-
</div>
|
|
93
|
-
<button class="ui-btn">Button</button>
|
|
94
|
-
</div>
|
|
95
|
-
|
|
96
|
-
<div class="flex gap-8">
|
|
97
|
-
<div class="c-field">
|
|
98
|
-
<label class="ui-label">Name</label>
|
|
99
|
-
<div class="ui-input">
|
|
100
|
-
<input type="text" placeholder=" " required>
|
|
101
|
-
</div>
|
|
102
|
-
</div>
|
|
103
|
-
<div class="c-field">
|
|
104
|
-
<label class="ui-label">Name</label>
|
|
105
|
-
<div class="ui-checkbox is-input-offset">
|
|
106
|
-
<input type="checkbox" id="checkbox" required>
|
|
107
|
-
<label for="checkbox">Name</label>
|
|
108
|
-
</div>
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
<div>
|
|
112
|
-
<div class="ui-switch">
|
|
113
|
-
<input type="checkbox" id="checkbox" required>
|
|
114
|
-
</div>
|
|
115
|
-
</div>
|
|
116
|
-
|
|
117
|
-
<label class="ui-checkbox">
|
|
118
|
-
<input type="checkbox" required>
|
|
119
|
-
</label>
|
|
120
|
-
|
|
121
|
-
<label class="ui-radio">
|
|
122
|
-
<input type="checkbox" required>
|
|
123
|
-
<span>Name</span>
|
|
124
|
-
<em>Not valid</em>
|
|
125
|
-
</label>
|
|
126
|
-
|
|
127
|
-
<script>
|
|
128
|
-
document.getElementById('action-btn-loading').addEventListener('click', () => {
|
|
129
|
-
if (!document.querySelector('.ui-input.is-loading')) {
|
|
130
|
-
document.querySelectorAll('.ui-input').forEach(element => element.classList.add('is-loading'))
|
|
131
|
-
} else {
|
|
132
|
-
document.querySelectorAll('.ui-input').forEach(element => element.classList.remove('is-loading'))
|
|
133
|
-
}
|
|
134
|
-
})
|
|
135
|
-
|
|
136
|
-
document.getElementById('action-btn-disabled').addEventListener('click', () => {
|
|
137
|
-
if (!document.querySelector(':where(.ui-input, .ui-select) :where(input,select,textarea):disabled')) {
|
|
138
|
-
document.querySelectorAll(':where(.ui-input, .ui-select) :where(input,select,textarea)').forEach(element => element.setAttribute('disabled', ''))
|
|
139
|
-
} else {
|
|
140
|
-
document.querySelectorAll(':where(.ui-input, .ui-select) :where(input,select,textarea)').forEach(element => element.removeAttribute('disabled'))
|
|
141
|
-
}
|
|
142
|
-
})
|
|
143
|
-
|
|
144
|
-
document.getElementById('action-btn-dark').addEventListener('click', () => {
|
|
145
|
-
if (!document.documentElement.classList.contains('dark')) {
|
|
146
|
-
document.documentElement.classList.add('dark')
|
|
147
|
-
} else {
|
|
148
|
-
document.documentElement.classList.remove('dark')
|
|
149
|
-
}
|
|
150
|
-
})
|
|
151
|
-
</script>
|
|
152
|
-
</body>
|
|
153
|
-
</html>
|
package/src/scripts/vue.js
DELETED
package/src/styles/tailwind.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@import "base/tailwind/base.css";
|
package/src/tailwind.html
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" class="font-sans">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Winduum UI</title>
|
|
6
|
-
<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1, viewport-fit=cover"/>
|
|
7
|
-
<link rel="stylesheet" href="/src/styles/main.css">
|
|
8
|
-
<link rel="stylesheet" href="/src/styles/tailwind.css">
|
|
9
|
-
</head>
|
|
10
|
-
<body>
|
|
11
|
-
<div class="text-primary text-secondary text-info text-warning text-error text-success text-light text-dark text-accent text-default text-current text-background"></div>
|
|
12
|
-
<div class="accent-primary accent-secondary accent-info accent-warning accent-error accent-success accent-light accent-dark accent-accent accent-default accent-current accent-background"></div>
|
|
13
|
-
<div class="bg-primary bg-secondary bg-info bg-warning bg-error bg-success bg-light bg-dark bg-accent bg-default bg-current bg-background"></div>
|
|
14
|
-
<div class="current-primary current-secondary current-info current-warning current-error current-success current-light current-dark current-accent current-default current-current current-background"></div>
|
|
15
|
-
<div class="font-primary font-secondary"></div>
|
|
16
|
-
<div class="font-light font-normal font-medium font-semibold font-bold font-extrabold"></div>
|
|
17
|
-
</body>
|
|
18
|
-
</html>
|