@cahyo-dimas/freeday 1.54.0 → 2.0.0
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/CHANGELOG.md +625 -545
- package/COMPONENTS.md +141 -138
- package/README.id.md +46 -45
- package/README.md +46 -43
- package/USAGE.md +34 -34
- package/adapters/blazor/FdyAppShell.razor +2 -2
- package/adapters/blazor/FdyAppShell.razor.cs +6 -6
- package/adapters/blazor/FdyCfl.razor.cs +1 -1
- package/adapters/blazor/FdyChart.razor +1 -1
- package/adapters/blazor/FdyChart.razor.cs +3 -3
- package/adapters/blazor/FdyChartSeries.cs +1 -1
- package/adapters/blazor/FdyCombo.razor.cs +2 -2
- package/adapters/blazor/FdyModal.razor +1 -1
- package/adapters/blazor/FdyTable.razor.cs +7 -7
- package/adapters/blazor/FdyTableFilter.razor +1 -1
- package/adapters/blazor/FdyTableFooter.razor +1 -1
- package/adapters/blazor/FdyTableFooter.razor.cs +4 -4
- package/adapters/blazor/Freeday.Blazor.csproj +1 -1
- package/adapters/blazor/FreedayComponentBase.cs +1 -1
- package/adapters/blazor/TableModel.cs +3 -3
- package/adapters/blazor/TableTypes.cs +3 -3
- package/adapters/blazor/freeday-blazor.js +5 -5
- package/adapters/core/app-shell.d.ts +1 -1
- package/adapters/core/app-shell.js +6 -6
- package/adapters/core/table-model.d.ts +2 -2
- package/adapters/core/table-model.js +8 -8
- package/adapters/react/components/FdyAppShell.tsx +5 -5
- package/adapters/react/components/FdyAutocomplete.tsx +1 -1
- package/adapters/react/components/FdyCascade.tsx +1 -1
- package/adapters/react/components/FdyCfl.tsx +11 -11
- package/adapters/react/components/FdyDateRange.tsx +2 -2
- package/adapters/react/components/FdyDatepicker.tsx +5 -5
- package/adapters/react/components/FdyDrawer.tsx +1 -1
- package/adapters/react/components/FdyModal.tsx +2 -2
- package/adapters/react/components/FdyTable.tsx +7 -7
- package/adapters/react/components/FdyTableFilter.tsx +1 -1
- package/adapters/react/components/FdyTableFooter.tsx +5 -5
- package/adapters/react/index.d.ts +1 -1
- package/adapters/react/useFreeday.js +3 -3
- package/adapters/vue/components/FdyAppShell.vue +5 -5
- package/adapters/vue/components/FdyAutocomplete.vue +1 -1
- package/adapters/vue/components/FdyCascade.vue +1 -1
- package/adapters/vue/components/FdyCfl.vue +8 -8
- package/adapters/vue/components/FdyChart.vue +2 -2
- package/adapters/vue/components/FdyCombo.vue +1 -1
- package/adapters/vue/components/FdyDateRange.vue +2 -2
- package/adapters/vue/components/FdyDatepicker.vue +5 -5
- package/adapters/vue/components/FdyDrawer.vue +3 -3
- package/adapters/vue/components/FdyModal.vue +3 -3
- package/adapters/vue/components/FdyTable.vue +7 -7
- package/adapters/vue/components/FdyTableFilter.vue +1 -1
- package/adapters/vue/components/FdyTableFooter.vue +5 -5
- package/adapters/vue/index.d.ts +2 -2
- package/adapters/vue/useFreeday.js +3 -3
- package/dist/asset.d.ts +3 -3
- package/dist/freeday-app-shell.js +9 -9
- package/dist/freeday-autocomplete.js +2 -2
- package/dist/freeday-breakpoint.js +1 -1
- package/dist/freeday-carousel.js +5 -5
- package/dist/freeday-cascade.js +7 -7
- package/dist/freeday-cfl.js +9 -9
- package/dist/freeday-chart.js +11 -11
- package/dist/freeday-chip.js +3 -3
- package/dist/freeday-datepicker.js +11 -7
- package/dist/freeday-datetime.js +5 -5
- package/dist/freeday-drawer.js +1 -1
- package/dist/freeday-form.js +14 -14
- package/dist/freeday-mask.js +6 -6
- package/dist/freeday-menu.js +1 -1
- package/dist/freeday-number.js +3 -3
- package/dist/freeday-popover.js +3 -3
- package/dist/freeday-rating.js +2 -2
- package/dist/freeday-select.js +5 -5
- package/dist/freeday-slider.js +2 -2
- package/dist/freeday-stepper.js +7 -7
- package/dist/freeday-table.js +15 -15
- package/dist/freeday-tabs.js +1 -1
- package/dist/freeday-timepicker.js +2 -2
- package/dist/freeday-toast.js +8 -8
- package/dist/freeday-tree.js +3 -3
- package/dist/freeday-upload.js +25 -25
- package/dist/freeday.bundle.css +176 -176
- package/dist/freeday.css +170 -170
- package/dist/freeday.d.ts +2 -2
- package/dist/freeday.js +162 -158
- package/dist/freeday.tokens.css +5 -5
- package/docs/agent-onboarding.md +41 -41
- package/docs/getting-started.md +35 -35
- package/docs/integrations.md +18 -18
- package/docs/reference-screen.html +14 -14
- package/package.json +4 -3
- package/src/base.css +6 -6
- package/src/components/accordion.css +4 -4
- package/src/components/alert.css +1 -1
- package/src/components/app-shell.css +10 -10
- package/src/components/appbar.css +3 -3
- package/src/components/autocomplete.css +1 -1
- package/src/components/avatar.css +3 -3
- package/src/components/badge.css +5 -5
- package/src/components/breadcrumb.css +1 -1
- package/src/components/breakpoints.css +4 -4
- package/src/components/button.css +13 -13
- package/src/components/card.css +8 -8
- package/src/components/carousel.css +2 -2
- package/src/components/cascade.css +2 -2
- package/src/components/cfl.css +4 -4
- package/src/components/chart.css +3 -3
- package/src/components/chip.css +2 -2
- package/src/components/combo.css +3 -3
- package/src/components/composition.css +7 -7
- package/src/components/datepicker.css +6 -6
- package/src/components/datetimepicker.css +1 -1
- package/src/components/description-list.css +1 -1
- package/src/components/divider.css +1 -1
- package/src/components/drawer.css +1 -1
- package/src/components/file-upload.css +5 -5
- package/src/components/filterbar.css +7 -7
- package/src/components/form-grid.css +2 -2
- package/src/components/input-group.css +6 -6
- package/src/components/input.css +6 -6
- package/src/components/kbd.css +1 -1
- package/src/components/list.css +6 -6
- package/src/components/menu.css +3 -3
- package/src/components/modal.css +1 -1
- package/src/components/pagination.css +1 -1
- package/src/components/progress.css +1 -1
- package/src/components/rating.css +2 -2
- package/src/components/selection.css +4 -4
- package/src/components/skeleton.css +1 -1
- package/src/components/slider.css +1 -1
- package/src/components/spinner.css +1 -1
- package/src/components/states.css +1 -1
- package/src/components/stepper.css +2 -2
- package/src/components/table.css +15 -15
- package/src/components/tabs.css +3 -3
- package/src/components/timeline.css +1 -1
- package/src/components/timepicker.css +1 -1
- package/src/components/toast.css +3 -3
- package/src/components/tooltip.css +1 -1
- package/src/components/tree.css +2 -2
- package/tokens/breakpoints.d.ts +2 -2
- package/tokens/breakpoints.mjs +3 -3
- package/tokens/tokens.json +1 -1
package/dist/freeday-upload.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
/* Freeday
|
|
1
|
+
/* Freeday, file-upload enhancer (optional, zero-dependency).
|
|
2
2
|
* A drop target that also opens the file dialog on click / Enter / Space, validates each file
|
|
3
3
|
* (accept + max size), and renders a per-file row with explicit state. Actual upload is the
|
|
4
|
-
* consumer's job
|
|
4
|
+
* consumer's job, this is a controlled reference: wire the emitted event's row API to your
|
|
5
5
|
* upload call, or set data-fdy-upload-simulate for a demo progress animation.
|
|
6
6
|
*
|
|
7
7
|
* Markup contract:
|
|
8
8
|
* <div class="fdy-dropzone" data-fdy-dropzone role="button" tabindex="0"
|
|
9
9
|
* data-max-size="10485760" data-filelist="#dz-list" [data-fdy-upload-simulate]
|
|
10
|
-
* aria-label="Unggah berkas
|
|
10
|
+
* aria-label="Unggah berkas, seret ke sini atau tekan Enter">
|
|
11
11
|
* <span class="fdy-dropzone__icon">…svg…</span>
|
|
12
12
|
* <span class="fdy-dropzone__title">…</span>
|
|
13
13
|
* <span class="fdy-dropzone__hint">…</span>
|
|
@@ -15,15 +15,15 @@
|
|
|
15
15
|
* </div>
|
|
16
16
|
* <div class="fdy-filelist" id="dz-list"></div>
|
|
17
17
|
*
|
|
18
|
-
* Emits bubbling CustomEvents
|
|
18
|
+
* Emits bubbling CustomEvents. BOTH on the dropzone element, which is the one target a consumer
|
|
19
19
|
* needs to listen on:
|
|
20
20
|
* "fdy-upload-add" {file, rejected, reason, row}
|
|
21
21
|
* "fdy-upload-remove" {file}
|
|
22
22
|
* `row` is the state machine over the rendered .fdy-file:
|
|
23
|
-
* .ready() (rest
|
|
23
|
+
* .ready() (rest, where a dropped file starts) / .uploading() / .setProgress(pct) /
|
|
24
24
|
* .waiting(label) (sent, awaiting the server) / .done() / .fail(msg) / .el
|
|
25
25
|
* Note the file list is a SIBLING of the dropzone above, so nothing dispatched on a row would ever
|
|
26
|
-
* bubble through the zone
|
|
26
|
+
* bubble through the zone, which is why removal fires on the zone and not on the row.
|
|
27
27
|
*/
|
|
28
28
|
(function () {
|
|
29
29
|
'use strict';
|
|
@@ -51,21 +51,21 @@
|
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
|
|
54
|
-
/* User-facing strings. Indonesian by default
|
|
55
|
-
* path
|
|
54
|
+
/* User-facing strings. Indonesian by default, documented and deliberate for the raw enhancer
|
|
55
|
+
* path, and every one overridable per element, so a host that speaks another language (the
|
|
56
56
|
* Blazor adapters, an English app on the raw path) supplies its own without forking this file.
|
|
57
57
|
* Keeping them in ONE table is also what lets a guard prove none is hard-coded further down. */
|
|
58
58
|
var TEXT = {
|
|
59
|
-
remove: '
|
|
60
|
-
progress: '
|
|
61
|
-
uploading: '
|
|
62
|
-
waiting: '
|
|
63
|
-
done: '
|
|
64
|
-
badType: '
|
|
65
|
-
tooBig: '
|
|
59
|
+
remove: 'Remove {name}',
|
|
60
|
+
progress: 'Upload progress for {name}',
|
|
61
|
+
uploading: 'Uploading…',
|
|
62
|
+
waiting: 'Waiting for the server…',
|
|
63
|
+
done: 'Uploaded',
|
|
64
|
+
badType: 'Unsupported file type.',
|
|
65
|
+
tooBig: 'Over the {max} limit.'
|
|
66
66
|
};
|
|
67
67
|
/* HTML lowercases attribute names, so a camelCase key like `filterText` can only ever be written
|
|
68
|
-
as `data-fdy-text-filtertext
|
|
68
|
+
as `data-fdy-text-filtertext`, while the kebab form anybody would reach for,
|
|
69
69
|
`data-fdy-text-filter-text`, becomes a DIFFERENT attribute the enhancer never reads, and the
|
|
70
70
|
override fails silently. So the key is kebab-cased for the lookup; the run-together spelling
|
|
71
71
|
still resolves, for markup written against 1.39.0. */
|
|
@@ -103,12 +103,12 @@
|
|
|
103
103
|
remove.setAttribute('aria-label', textOf(zone, 'remove', { name: file.name }));
|
|
104
104
|
remove.innerHTML = '×';
|
|
105
105
|
remove.addEventListener('click', function () {
|
|
106
|
-
/* Dispatched on the ZONE, not on the row
|
|
106
|
+
/* Dispatched on the ZONE, not on the row, the same target as fdy-upload-add, so one listener
|
|
107
107
|
on the dropzone gets both. The row lives in the file list, which the kit's own markup
|
|
108
108
|
contract puts as a SIBLING of the dropzone, so a row event never bubbles through the zone:
|
|
109
109
|
a consumer following the docs saw `add` arrive and `remove` never fire, with no error.
|
|
110
|
-
Firing on both would look safer, but it makes the pair asymmetric
|
|
111
|
-
anyone delegating on a common ancestor, two `remove`s
|
|
110
|
+
Firing on both would look safer, but it makes the pair asymmetric, one `add` and, for
|
|
111
|
+
anyone delegating on a common ancestor, two `remove`s, which is its own silent bug. It
|
|
112
112
|
also fixes the listless case: a row that was never attached bubbles to nothing at all. */
|
|
113
113
|
zone.dispatchEvent(new CustomEvent('fdy-upload-remove', { bubbles: true, detail: { file: file } }));
|
|
114
114
|
el.remove();
|
|
@@ -140,14 +140,14 @@
|
|
|
140
140
|
}
|
|
141
141
|
/* Back to a measured bar. While the indeterminate modifier is on it owns the bar's width, so an
|
|
142
142
|
explicit one has to be restored when it comes off: .fdy-progress__bar is a plain block div, and
|
|
143
|
-
with no width at all it fills the track
|
|
143
|
+
with no width at all it fills the track, a full bar, which is the opposite of what 0% means. */
|
|
144
144
|
function determinate() {
|
|
145
145
|
progressEl.classList.remove('fdy-progress--indeterminate');
|
|
146
146
|
if (!bar.style.width) bar.style.width = '0%';
|
|
147
147
|
}
|
|
148
148
|
return {
|
|
149
149
|
el: el,
|
|
150
|
-
/* The state a row starts in: chosen, not yet sent. The size alone
|
|
150
|
+
/* The state a row starts in: chosen, not yet sent. The size alone, it makes no claim about
|
|
151
151
|
a transfer, and no progress bar is shown, because nothing is in flight. Without this the
|
|
152
152
|
state machine had no start state: done() claims success, fail() claims an error, and
|
|
153
153
|
uploading() is a lie until the consumer actually sends the file. */
|
|
@@ -171,12 +171,12 @@
|
|
|
171
171
|
bar.style.width = v + '%';
|
|
172
172
|
progressEl.setAttribute('aria-valuenow', String(Math.round(v)));
|
|
173
173
|
},
|
|
174
|
-
/* The bytes are gone and the server has not answered yet
|
|
174
|
+
/* The bytes are gone and the server has not answered yet, extraction, scanning, transcoding.
|
|
175
175
|
"Mengunggah…" turns false the moment the last byte leaves, and a determinate bar parked at
|
|
176
176
|
100% is the most convincing "hung" signal a UI can produce, so this state reports no
|
|
177
177
|
percentage: the bar goes indeterminate and the label belongs to the consumer, because only
|
|
178
178
|
they know what the server is doing ("Membaca PDF…", "Memindai…"). done()/fail()/ready() need
|
|
179
|
-
no counterpart here
|
|
179
|
+
no counterpart here, they drop the progress element outright, modifier and all. */
|
|
180
180
|
waiting: function (label) {
|
|
181
181
|
el.classList.remove('fdy-file--error', 'fdy-file--success');
|
|
182
182
|
icon.innerHTML = FILE_ICON;
|
|
@@ -184,7 +184,7 @@
|
|
|
184
184
|
ensureProgress();
|
|
185
185
|
progressEl.classList.add('fdy-progress--indeterminate');
|
|
186
186
|
/* The modifier styles .fdy-progress__bar, so it must sit on the CONTAINER, and the inline
|
|
187
|
-
width setProgress wrote has to go
|
|
187
|
+
width setProgress wrote has to go, an inline style beats any rule the modifier brings.
|
|
188
188
|
aria-valuenow goes with it: a progressbar with no value is precisely what ARIA calls
|
|
189
189
|
indeterminate, which is the contract COMPONENTS.md already states for this component. */
|
|
190
190
|
bar.style.width = '';
|
|
@@ -255,7 +255,7 @@
|
|
|
255
255
|
if (input) input.addEventListener('change', function () { handleFiles(input.files); input.value = ''; });
|
|
256
256
|
|
|
257
257
|
/* The list is optional: rendering a row and announcing the file are separate jobs. A consumer
|
|
258
|
-
that wants its own markup simply provides no list
|
|
258
|
+
that wants its own markup simply provides no list, it still gets `fdy-upload-add`, and
|
|
259
259
|
`detail.row` still works (its element is just never attached). Gating the EVENT on the list
|
|
260
260
|
meant "bring your own row" silently cost you the notification that a file had arrived. */
|
|
261
261
|
function handleFiles(fileList) {
|