Inwentaryzacja

Inwentaryzacja

Każdy element, który dostarcza pakiet, oraz formaty, w jakich jest dostarczany. Tabela nie jest listą, którą ktoś utrzymuje: to rejestr, który dostarcza każdy pakiet, skompilowany z jego deklaracji i sprawdzony w kontekście jego komponentów. Odpowiada na pytanie, co jest obecne — nigdy na pytanie, co powinno być, co jest pytaniem, którego żaden skan nie może rozwiązać, a które elementy muszą zadeklarować same.

Co jest liczoneIle
Znalezione elementy 131
Formaty do zrobienia 541
Decyzje jeszcze nie podjęte 0
Kształty 61
Bazy abstrakcyjne 6
Styl 103
Szablon 91
Vue 100
Skrypt 63
Schemat 0
AI 0
React 0
Flutter 0

Element według formatu

Jeden wiersz na komponent, jedna kolumna na renderer. Komponent to katalog pod `components/`, który zawiera każdy sposób, w jaki można go narysować — `spinner/spinner.scss`, `spinner.html.twig`, `spinner.vue`, `spinner.ts` — więc nic tutaj nie musi już uzgadniać czterech katalogów według nazwy. Komórka zlicza pliki za nią — najedź na nią, aby je zobaczyć. Każdy zadeklarowany element odczytuje na tym samym poziomie — wiersz znaleziony w jednym formacie może być luką lub prymitywem, który nie chce nic więcej, a uporządkowanie tego jest pracą, do której ta tabela jest przeznaczona, a nie czymś, co już wie. Cztery stany, rozróżniane przez to, czyja kolej jest następna: sprawdzenie, element jest obecny; ostrzeżenie, jest pożądane i brakujące; przekreślone koło, działa celowo bez; puste, nikt jeszcze nie orzekł. Najedź na ostrzeżenie lub koło, aby zobaczyć, co mówi deklaracja.
ElementStylSzablonVueSkryptSchematAIReactFlutter
@WexampleSymfonyCodingBundle
code-input 2
console 2
source-editor 2
source-findings 2
source-view 2
@WexampleSymfonyDesignSystemBundle
banner 2 2
bar 2
breadcrumb 2
button 2
button-link 2
button-menu 2
button-target 2
code-block 2
collection/bar-list/abstract-entity-bar-list 2
collection/chat/abstract-entity-chat 2
collection/grid/abstract-entity-grid 2
collection/table/abstract-entity-table 2
collection/wall/abstract-entity-wall 2
color-scheme-switch
confirm
content-image 2
copy-button
count-badge
data-table 2
date-display 2
dev-menu
diff
distribution 2
dock 2
document-embed 2
dots 2
dropzone
embed
fallback
file-explorer 2
file-path 2
filter-bar 2
form/button-input 2
form/checkbox-input 2
form/date-input 2
form/datetime-input 2
form/email-input 2
form/emoji-picker 2
form/file-input 2
form/hidden-input 2
form/number-input 2
form/otp-input 2
form/password-input 2
form/radio-input 2
form/range-input 2
form/select-input 2
form/submit-input 2
form/switch-input 2
form/tel-input 2
form/text-input 2
form/textarea-input 2
form/time-input 2
form/url-input 2
form/week-input 2
graph-log 2
image-crop 2
inline-svg
isolated
led
list-expanded 2
live-update-status 2
load-more 2
marker 2
media 2
menu-collapsible-panel
menu-item-collapsible
menu-item-link 2
menu-navigation
menu-separator 2
message 2
modal 2
overlay 2
page-tabs
pagination 2
panel 2
period-nav 2
progress-bar 2
properties 2
select
select-search
spinner 2
status-icon 2
stepper 2
switch 2
tab 2
tab-item
text-link 2
theme-select
timeline 2
toast 2 2
toast-stack
tool-dock
tooltip
tour
tree 2
tree-node 2
tree-row-directory 2
tree-row-file 2
upload-handler
wall
zone-collapsible 2
zone-resizer 2
zone-toolbar
@WexampleSymfonyDesignSystemDemoBundle
collection/bar-list/demo-bar-list 2
collection/chat/demo-entity-chat 2
collection/table/demo-compact-table 2
collection/table/demo-dates-table 2
collection/table/demo-entity-table 2
collection/table/demo-live-table 2
collection/table/demo-selectable-table 2
collection/wall/demo-entity-wall 2
demo-console 2
demo-dates 2
demo-distribution 2
demo-explorer 2
demo-file-explorer 2
demo-image-crop 2
demo-keyboard 2
demo-period 2
demo-progress 2
demo-status-icons 2
demo-tabs 2
form/demo-form 2
search/demo-search-box 2
search/result/demo-message 2
search/result/demo-room 2

Abstrakcyjny

Pięć baz pod `components/_abstract/`, które nigdy nie są rysowane — są tylko rozszerzane. `_abstract/vue` to trzy puste bloki twig, które wypełniają trzydzieści jeden szablonów; `_abstract/form-field` to to, na czym opiera się dwanaście inputów. Są poza matrycą z tego samego powodu, co kształty: nie są dostarczane nikomu, więc pytanie ich o schemat lub reaktora bliźniaka jest pytaniem, na które nie mają sposobu odpowiedzieć. Podkreślenie mówi to samo, zanim ktokolwiek otworzy katalog. To, co jest pokazane, to to, co każdy już przynosi do tego, kto to rozszerza.
ElementStylSzablonVueSkryptSchematAIReactFlutter
_abstract/form-field
_abstract/vue
_abstract/form
_abstract/vue-wrapper
_abstract/entity
_abstract/entity/bar

Kształty

Kształt to styl bez renderera: piszesz markup, umieszczasz klasę na nim i `@use` arkusz stylów z własnego. `.stack`, `.grid`, `.block`, `.cluster`. Są wymienione tutaj, a nie w tabeli powyżej, ponieważ tabela rendererów nie ma kolumny, by oferować coś, co nie ma — a ich brak w niej jest powodem, dla którego wszystkie ostrzeżenia oznaczają pracę, a nie źle zadane pytanie. Linia jest rysowana przez pliki, a nie przez gust: kształt to dokładnie jeden `.scss` i nic go nie renderuje, więc w momencie, gdy zyskuje `.html.twig`, przenosi się do `components/` i dołącza do matrycy. To przeniesienie jest jedyną promocją, jaka istnieje. To, co każdy mówi o sobie, odczytuje się z nagłówka własnego arkusza stylów, więc nie ma drugiego miejsca, z którego mogłoby odpłynąć.
KształtDo czego służy
action-icon A muted icon button for a secondary action sitting in a corner — close, expand, dismiss —, its corners the controls' own: no button of the design system is round.
action-link An inline link with an icon beside its label, muted until hovered, for a secondary action inside text or a row.
avatar A round frame at text size holding a portrait, an icon or initials, cropped to fill.
block The card: a raised rectangle with a title, a body, media, meta and a footer, each optional.
chat A conversation — the thread of messages, their authors and dates, and the composer under it.
cluster A row of small things that wraps when it runs out of room: tags, pills, buttons.
container Centres its content and caps its width at one of the reading sizes.
content Prose written elsewhere — an article, a description, rendered markdown — given spacing, headings and figures.
corner-actions Icon actions in the corner of a framed thing — a code block, a lead, a block, a message —, out of the way until it is pointed at or reached by the keyboard.
count
diff What changes, field by field: what it was and what it becomes, facing each other across an arrow — the value that goes struck, the one that stays in full. Read in a sync under review, a record's history, a change to confirm.
disk-item A file or a directory shown as an icon with its name under it.
disk-item-explorer The grid that lays disk items out, wrapping at a fixed item width.
doc A documentation page: sections in two columns, the prose on one side and the code on the other.
empty What stands where a list, a table or a panel has nothing to show: said once, in the middle of the room the rows would have taken, and quietly — nothing having happened is not an error.
file-chip Files held by a field, one chip each: a thumbnail when it is an image, its kind's icon otherwise, its name — cut, whole in its title —, and the way to take it out. What a media picker shows of its choice, what a file field shows of the files dropped on it.
flow The default vertical rhythm between blocks, and `no-flow` to drop it where it is unwanted.
footer The strip closing a page, aligned on the same gutters as the rest of it.
form Every form shape at once, for whoever draws a form and does not want to name them one by one.
form/actions The row closing a form, where its buttons sit.
form/addon A field with a fixed word beside its value — a unit, a currency — that is not part of it. The frame is the group's: it draws the field's border and ground, the input inside drops its own, so the word and the value sit in one field. The ring of focus goes round the whole, the frozen look too.
form/assisted A field whose value is being filled for it, and how it reads while that happens.
form/base What every input and textarea looks like before anything is said about it.
form/checkbox A checkbox and its label, as a row that can be clicked whole.
form/filter A field narrowing what is shown beside it — a table's rows, a menu's items, a folder's files: a magnifier and what is typed, in one frame. Written on a field with a word beside it (`form--input-group`), the magnifier being that word: <div class="form--input-group form--filter"> <span class="form--input-addon" aria-hidden="true">{{ icon('ph:bold/magnifying-glass') }}</span> <input class="form--input" type="search"> </div>
form/inline A field and what acts on it, on one line: a message and its Send, a name and its Add, a search and its filter. The field takes the room, what acts on it keeps its width and never goes to another line — the shape a bar of options holds (shapes/toolbar), and a form of one question anywhere else.
form/layout The frame of a form: its groups, their labels, and how they follow one another.
form/messages The help text under a field, and the errors that replace it.
form/password A password field and the control revealing what it holds.
form/radio
form/select A native select made to read like the other inputs, caret included.
form/state What a field looks like when it is focused, in error, or refusing input.
form/stepper A number changed one step at a time — a quantity —: a button on each side of its figure. The figure keeps the width of a few digits, centred; the browser's own spinner, too small to aim at, is left out.
form/surface Form fields set on a raised ground rather than on the page.
form/switch A checkbox drawn as a switch.
graph The frame a chart is drawn in, filling what it is given and clipping what overflows.
grid Columns that fit themselves to the room available, or a fixed number when asked.
gutters The horizontal and vertical margins a page keeps at its edges, shared so its parts line up.
header The bar at the top of a page: its title, and the controls that belong to it.
layout The frame of a page — a horizontal or vertical split, and a body that scrolls or does not.
layout-reset-modern The reset: box model, margins, lists and typographic defaults, applied once to the document.
lead An introductory paragraph, set apart in italics inside a dotted frame.
media An image or a video held at a ratio — square, round, 16:9 — cropped rather than distorted.
menu A menu, as a bar or as a column: its items, their icons, their counts and their submenus.
meta-bar A thin line of secondary information between two separators, its groups pushed to either end.
overlay-resizer The edges of a box that can be sized: strips lying across its border, drawn nothing — the cursor is what says the edge can be pulled.
page
page-actions What a page does, at its foot: its actions in one row, whatever holds the page — a modal, a panel, an embed, the page's own zone. The first group stands at the start, the last one at the end: previous and next, cancel and save.
page-loading A page on its way into the room it will fill — an embed today, a modal or a panel tomorrow: the manager wears `is-page-loading`, the page it held dims, and a spinner stands in the middle of the room.
page-transition A page replaced by the next inside what holds it — a step of a tunnel in a modal: the one leaving slides a few pixels the way the visitor goes and fades, the one arriving comes in from the other side. Only a page marked `data-page-transition="slide"` moves; the classes are the page manager's.
rail A column with a scrolling track between fixed ends, for a side panel or a toolbar of its own.
stack Children laid in a row or a column with one gap, optionally split at a point or divided by rules.
status-bar The line at the foot of what it describes — a listing, an editor, a card — saying where it stands: how many there are, which language, whether what is shown is saved. Read and never acted on: what is done to the thing is its footer's (`block--footer`), and what leads to it is a breadcrumb's. Its height is its own, the same empty or not, so what it sits under does not jump when a word comes and goes. The part said last, at the far end, is `status-bar--end`.
surface The raised ground a block sits on, and the class that tells its children they are on one.
table-sort A header that sorts — a table's, a listing's — is a button dressed as the header it sits in, so the row of labels reads the same sortable or not. The arrow is always there: a faint pair while the column does not order the list, one strong arrow once it does.
timeline Things one under the other, each on a marker, joined by a line: the steps of a procedure, the events of a history, the stages of a run. What each holds is free — a title, a line of text, a table, a form — and the line runs down the whole height of it, to the next marker.
toolbar A row of controls above or below what they act on, grouped and separated.
upload-tray The rows of the uploads window: the design system's progress bar for each file — its name, how far it got —, and what came of it under it.
wall Pictures of every height packed side by side with no holes, each one at its own ratio, as a photo wall is hung. The rows are a twelfth of a column's width, so a tile is as tall as its ratio says by spanning that many twelfths: `grid-row-end: span 9` for a 4:3 landscape — what wallSpan() and the wall template work out from a width and a height. Measuring a column needs the wall to be a container, which is why the tiles sit in a box of their own: a grid cannot read its own width. <div class="wall"> <div class="wall--tiles"> <a class="wall--tile media media--placeholder" style="grid-row-end: span 9">…</a> </div> </div>
zone A region of a layout given its own size, splittable, scrollable, and never handing that size to its children.
zone-table A zone given whole to a table: the table is the region, not a sheet laid in it. Whatever drives the table — its search, its filters, its bulk actions — stands at the top, its pages at the foot, both out of what scrolls; between them the table's own ground runs to the bottom of the zone however few rows there are, and the rows scroll under a header that stays. Any table of the system goes in it, written by the server or by a vue, with whatever holds it on the way — a collection, a mounted component: each of them, down to the table's frame, becomes a column handing its height on.

Czego to nie obejmuje

Katalogi `assets/`, które skanowanie pomija, wymienione z dysku, a nie z pamięci. Mixiny, narzędzia i tokeny nie są elementami i nigdy nie mogą być wierszami tutaj; układy i wspólne skrypty są, i nie są jeszcze objęte.
@WexampleSymfonyDesignSystemBundle/common@WexampleSymfonyDesignSystemBundle/css/fonts@WexampleSymfonyDesignSystemBundle/css/mixins@WexampleSymfonyDesignSystemBundle/css/partials@WexampleSymfonyDesignSystemBundle/css/primitives@WexampleSymfonyDesignSystemBundle/css/utilities@WexampleSymfonyDesignSystemBundle/fixtures@WexampleSymfonyDesignSystemBundle/js@WexampleSymfonyDesignSystemBundle/layouts@WexampleSymfonyDesignSystemBundle/partials@WexampleSymfonyDesignSystemDemoBundle/Common@WexampleSymfonyDesignSystemDemoBundle/Entity@WexampleSymfonyDesignSystemDemoBundle/Repository@WexampleSymfonyDesignSystemDemoBundle/forms@WexampleSymfonyDesignSystemDemoBundle/layouts@WexampleSymfonyDesignSystemDemoBundle/pages@WexampleSymfonyDesignSystemDemoBundle/partials@WexampleSymfonyCodingBundle/common@WexampleSymfonyCodingBundle/js

Skąd to pochodzi

Pakiet znajduje się w tabeli, ponieważ tak powiedział — implementując `DesignSystemElementsBundleInterface`, sposób, w jaki pakiet informuje loadera o swoich ścieżkach frontowych. Każdy pisze `data/elements.json` wewnątrz swoich własnych zasobów, publikowanych z nimi, dzięki czemu budowa, strona node, inny język lub agent działają z tych samych plików; ta strona jest tylko ich unią.
@WexampleSymfonyDesignSystemBundle@WexampleSymfonyDesignSystemDemoBundle@WexampleSymfonyCodingBundle
v1.0.29