inertia-bootstrap-forms 1.0.59 → 1.0.61
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/style.css +1 -1
- package/package.json +1 -1
- package/src/UppyInput.vue +2 -2
- package/src/css/uppy-input.css +199 -0
package/package.json
CHANGED
package/src/UppyInput.vue
CHANGED
|
@@ -18,6 +18,8 @@ import {
|
|
|
18
18
|
} from '@uppy/vue';
|
|
19
19
|
import Uppy from '@uppy/core';
|
|
20
20
|
|
|
21
|
+
import '@uppy/vue/css/style.css';
|
|
22
|
+
|
|
21
23
|
const props = defineProps({
|
|
22
24
|
name: {type: String, required: true},
|
|
23
25
|
multiple: {type: Boolean, default: false},
|
|
@@ -158,8 +160,6 @@ function showError(message) {
|
|
|
158
160
|
</script>
|
|
159
161
|
|
|
160
162
|
<style>
|
|
161
|
-
@import "@uppy/vue/css/style.css" layer(uppy);
|
|
162
|
-
|
|
163
163
|
.uppy-reset p {
|
|
164
164
|
margin-bottom: 0;
|
|
165
165
|
}
|
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
/* --- Variables & Theme --- */
|
|
2
|
+
:root {
|
|
3
|
+
/* Red Palette */
|
|
4
|
+
--uppy-color-red-50: oklch(97.1% .013 17.38);
|
|
5
|
+
--uppy-color-red-500: oklch(63.7% .237 25.331);
|
|
6
|
+
--uppy-color-red-600: oklch(57.7% .245 27.325);
|
|
7
|
+
--uppy-color-red-700: oklch(50.5% .213 27.518);
|
|
8
|
+
|
|
9
|
+
/* Amber Palette */
|
|
10
|
+
--uppy-color-amber-50: oklch(98.7% .022 95.277);
|
|
11
|
+
--uppy-color-amber-500: oklch(76.9% .188 70.08);
|
|
12
|
+
|
|
13
|
+
/* Green Palette */
|
|
14
|
+
--uppy-color-green-50: oklch(98.2% .018 155.826);
|
|
15
|
+
--uppy-color-green-500: oklch(72.3% .219 149.579);
|
|
16
|
+
--uppy-color-green-600: oklch(62.7% .194 149.214);
|
|
17
|
+
--uppy-color-green-700: oklch(52.7% .154 150.069);
|
|
18
|
+
|
|
19
|
+
/* Blue Palette */
|
|
20
|
+
--uppy-color-blue-50: oklch(97% .014 254.604);
|
|
21
|
+
--uppy-color-blue-500: oklch(62.3% .214 259.815);
|
|
22
|
+
--uppy-color-blue-600: oklch(54.6% .245 262.881);
|
|
23
|
+
--uppy-color-blue-700: oklch(48.8% .243 264.376);
|
|
24
|
+
|
|
25
|
+
/* Gray & Basic */
|
|
26
|
+
--uppy-color-gray-50: oklch(98.5% .002 247.839);
|
|
27
|
+
--uppy-color-gray-100: oklch(96.7% .003 264.542);
|
|
28
|
+
--uppy-color-gray-300: oklch(87.2% .01 258.338);
|
|
29
|
+
--uppy-color-gray-500: oklch(55.1% .027 264.364);
|
|
30
|
+
--uppy-color-gray-600: oklch(44.6% .03 256.802);
|
|
31
|
+
--uppy-color-white: #ffffff;
|
|
32
|
+
|
|
33
|
+
/* Spacing & Utilities */
|
|
34
|
+
--uppy-spacing: .25rem;
|
|
35
|
+
--uppy-text-sm: .875rem;
|
|
36
|
+
--uppy-radius-lg: .5rem;
|
|
37
|
+
--uppy-font-weight-medium: 500;
|
|
38
|
+
--uppy-transition-duration: .15s;
|
|
39
|
+
--uppy-transition-timing: cubic-bezier(.4, 0, .2, 1);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* --- Base Reset --- */
|
|
43
|
+
.uppy-reset, .uppy-reset * {
|
|
44
|
+
box-sizing: border-box;
|
|
45
|
+
border: 0 solid;
|
|
46
|
+
margin: 0;
|
|
47
|
+
padding: 0;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.uppy-reset {
|
|
51
|
+
-webkit-text-size-adjust: 100%;
|
|
52
|
+
tab-size: 4;
|
|
53
|
+
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
54
|
+
line-height: 1.5;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.uppy-reset h1, .uppy-reset h2, .uppy-reset h3,
|
|
58
|
+
.uppy-reset h4, .uppy-reset h5, .uppy-reset h6 {
|
|
59
|
+
font-size: inherit;
|
|
60
|
+
font-weight: inherit;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.uppy-reset ol, .uppy-reset ul {
|
|
64
|
+
list-style: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.uppy-reset img, .uppy-reset video {
|
|
68
|
+
max-width: 100%;
|
|
69
|
+
height: auto;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.uppy-reset button, .uppy-reset input,
|
|
73
|
+
.uppy-reset select, .uppy-reset textarea {
|
|
74
|
+
font: inherit;
|
|
75
|
+
color: inherit;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* --- Layout & Positioning --- */
|
|
79
|
+
.uppy-absolute { position: absolute; }
|
|
80
|
+
.uppy-relative { position: relative; }
|
|
81
|
+
.uppy-inset-0 { inset: 0; }
|
|
82
|
+
.uppy-z-10 { z-index: 10; }
|
|
83
|
+
.uppy-block { display: block; }
|
|
84
|
+
.uppy-flex { display: flex; }
|
|
85
|
+
.uppy-grid { display: grid; }
|
|
86
|
+
.uppy-hidden { display: none; }
|
|
87
|
+
.uppy-flex-1 { flex: 1 1 0%; }
|
|
88
|
+
.uppy-flex-col { flex-direction: column; }
|
|
89
|
+
.uppy-items-center { align-items: center; }
|
|
90
|
+
.uppy-justify-center { justify-content: center; }
|
|
91
|
+
.uppy-ml-auto { margin-left: auto; }
|
|
92
|
+
|
|
93
|
+
/* --- Sizing --- */
|
|
94
|
+
.uppy-h-full { height: 100%; }
|
|
95
|
+
.uppy-w-full { width: 100%; }
|
|
96
|
+
.uppy-h-3-4 { height: 75%; }
|
|
97
|
+
.uppy-w-3-4 { width: 75%; }
|
|
98
|
+
.uppy-h-32px { height: 32px; }
|
|
99
|
+
.uppy-w-32px { width: 32px; }
|
|
100
|
+
.uppy-min-w-18 { min-width: calc(var(--uppy-spacing) * 18); }
|
|
101
|
+
|
|
102
|
+
/* --- Spacing --- */
|
|
103
|
+
.uppy-my-2 { margin-top: calc(var(--uppy-spacing) * 2); margin-bottom: calc(var(--uppy-spacing) * 2); }
|
|
104
|
+
.uppy-my-4 { margin-top: calc(var(--uppy-spacing) * 4); margin-bottom: calc(var(--uppy-spacing) * 4); }
|
|
105
|
+
.uppy-p-2 { padding: calc(var(--uppy-spacing) * 2); }
|
|
106
|
+
.uppy-p-6 { padding: calc(var(--uppy-spacing) * 6); }
|
|
107
|
+
.uppy-gap-2 { gap: calc(var(--uppy-spacing) * 2); }
|
|
108
|
+
.uppy-gap-4 { gap: calc(var(--uppy-spacing) * 4); }
|
|
109
|
+
|
|
110
|
+
/* --- Typography --- */
|
|
111
|
+
.uppy-text-sm {
|
|
112
|
+
font-size: var(--uppy-text-sm);
|
|
113
|
+
line-height: calc(1.25 / .875);
|
|
114
|
+
}
|
|
115
|
+
.uppy-font-medium { font-weight: var(--uppy-font-weight-medium); }
|
|
116
|
+
.uppy-text-right { text-align: right; }
|
|
117
|
+
.uppy-truncate {
|
|
118
|
+
overflow: hidden;
|
|
119
|
+
text-overflow: ellipsis;
|
|
120
|
+
white-space: nowrap;
|
|
121
|
+
}
|
|
122
|
+
.uppy-tabular-nums { font-variant-numeric: tabular-nums; }
|
|
123
|
+
|
|
124
|
+
/* --- Grid Systems --- */
|
|
125
|
+
.uppy-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
|
126
|
+
.uppy-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
127
|
+
.uppy-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
128
|
+
.uppy-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
129
|
+
.uppy-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
|
130
|
+
.uppy-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
|
131
|
+
|
|
132
|
+
/* --- Border & Radius --- */
|
|
133
|
+
.uppy-rounded { border-radius: .25rem; }
|
|
134
|
+
.uppy-rounded-full { border-radius: 9999px; }
|
|
135
|
+
.uppy-rounded-lg { border-radius: var(--uppy-radius-lg); }
|
|
136
|
+
.uppy-border-2 { border-width: 2px; border-style: solid; }
|
|
137
|
+
.uppy-border-dashed { border-style: dashed; }
|
|
138
|
+
.uppy-border-gray-300 { border-color: var(--uppy-color-gray-300); }
|
|
139
|
+
|
|
140
|
+
/* --- Background Colors --- */
|
|
141
|
+
.uppy-bg-blue-500 { background-color: var(--uppy-color-blue-500); }
|
|
142
|
+
.uppy-bg-blue-700 { background-color: var(--uppy-color-blue-700); }
|
|
143
|
+
.uppy-bg-gray-50 { background-color: var(--uppy-color-gray-50); }
|
|
144
|
+
.uppy-bg-green-500 { background-color: var(--uppy-color-green-500); }
|
|
145
|
+
.uppy-bg-red-500 { background-color: var(--uppy-color-red-500); }
|
|
146
|
+
.uppy-bg-transparent { background-color: transparent; }
|
|
147
|
+
|
|
148
|
+
/* --- Text Colors --- */
|
|
149
|
+
.uppy-text-blue-500 { color: var(--uppy-color-blue-500); }
|
|
150
|
+
.uppy-text-gray-500 { color: var(--uppy-color-gray-500); }
|
|
151
|
+
.uppy-text-green-500 { color: var(--uppy-color-green-500); }
|
|
152
|
+
.uppy-text-red-500 { color: var(--uppy-color-red-500); }
|
|
153
|
+
.uppy-text-white { color: var(--uppy-color-white); }
|
|
154
|
+
|
|
155
|
+
/* --- Transitions & Effects --- */
|
|
156
|
+
.uppy-transition-all {
|
|
157
|
+
transition-property: all;
|
|
158
|
+
transition-duration: var(--uppy-transition-duration);
|
|
159
|
+
transition-timing-function: var(--uppy-transition-timing);
|
|
160
|
+
}
|
|
161
|
+
.uppy-duration-200 { transition-duration: .2s; }
|
|
162
|
+
.uppy-cursor-pointer { cursor: pointer; }
|
|
163
|
+
.uppy-disabled-not-allowed:disabled { cursor: not-allowed; }
|
|
164
|
+
|
|
165
|
+
/* --- Hover States --- */
|
|
166
|
+
@media (hover: hover) {
|
|
167
|
+
.uppy-hover-bg-blue-50:hover { background-color: var(--uppy-color-blue-50); }
|
|
168
|
+
.uppy-hover-bg-blue-600:hover { background-color: var(--uppy-color-blue-600); }
|
|
169
|
+
.uppy-hover-bg-red-50:hover { background-color: var(--uppy-color-red-50); }
|
|
170
|
+
.uppy-hover-text-blue-700:hover { color: var(--uppy-color-blue-700); }
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* --- Progress Bar Styles --- */
|
|
174
|
+
.uppy-progress-blue::-webkit-progress-value { background-color: var(--uppy-color-blue-500); }
|
|
175
|
+
.uppy-progress-blue::-moz-progress-bar { background-color: var(--uppy-color-blue-500); }
|
|
176
|
+
.uppy-progress-green::-webkit-progress-value { background-color: var(--uppy-color-green-500); }
|
|
177
|
+
.uppy-progress-red::-webkit-progress-value { background-color: var(--uppy-color-red-500); }
|
|
178
|
+
.uppy-progress-bar-bg::-webkit-progress-bar { background-color: var(--uppy-color-gray-100); }
|
|
179
|
+
|
|
180
|
+
.uppy-reset p {
|
|
181
|
+
margin-bottom: 0;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.uppy-file-lists > ul {
|
|
185
|
+
list-style: none;
|
|
186
|
+
padding: 0;
|
|
187
|
+
margin: 0;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.uppy-input-area .uppy-error {
|
|
191
|
+
display: block;
|
|
192
|
+
padding: 5px;
|
|
193
|
+
background-color: #f8d7da;
|
|
194
|
+
border: 1px solid #f5c2c7;
|
|
195
|
+
color: #842029;
|
|
196
|
+
text-align: center;
|
|
197
|
+
border-radius: 0.5rem;
|
|
198
|
+
margin-bottom: 5px;
|
|
199
|
+
}
|