tamga-ui 0.7.3 → 0.8.1
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 +67 -0
- package/dist/blocks/filter-bar.d.ts +31 -1
- package/dist/blocks/filter-bar.d.ts.map +1 -1
- package/dist/blocks/filter-bar.js +39 -5
- package/dist/components/a11y.d.ts.map +1 -1
- package/dist/components/a11y.js +5 -0
- package/dist/components/data-table.d.ts.map +1 -1
- package/dist/components/data-table.js +1 -1
- package/dist/components/select-panel.d.ts +69 -0
- package/dist/components/select-panel.d.ts.map +1 -0
- package/dist/components/select-panel.js +68 -0
- package/dist/fonts.css +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/kit.css +193 -3
- package/dist/styles.css +1 -1
- package/dist/theme.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,73 @@ Versions follow [semver](https://semver.org/). Through `0.x`, breaking changes m
|
|
|
5
5
|
|
|
6
6
|
> 🇹🇷 Türkçe için [tamga.org.tr/tr](https://tamga.org.tr/tr).
|
|
7
7
|
|
|
8
|
+
## 0.8.1
|
|
9
|
+
|
|
10
|
+
> Five things the chip layout showed on a real page.
|
|
11
|
+
|
|
12
|
+
### Fixed
|
|
13
|
+
|
|
14
|
+
- **`FilterBar` `look="chips"`** · the search box's visible label is gone (it stays for screen
|
|
15
|
+
readers), the box is the chips' size and sits on their line, centred with them. "Clear all"
|
|
16
|
+
is a plain link at the end of the chip row, on the same line. A set chip is one object: the
|
|
17
|
+
edge and shadow belong to the chip, the trigger inside and the remove square carry none, the
|
|
18
|
+
remove stays a separate button named `labels.remove(label)`. In the narrow-screen sheet the
|
|
19
|
+
panels show only the value; the field's name is already above each. On a narrow screen the
|
|
20
|
+
scrolling row of set chips and "Clear all" stay inside the card. All of it in kit classes;
|
|
21
|
+
`pnpm olc:filtre` measures each point at 1280 and 390.
|
|
22
|
+
- **The narrow layout keys off the bar's own width, not the screen's.** With the app's sidebar
|
|
23
|
+
open on a phone the card is 210px wide while the viewport is 390; a viewport media query
|
|
24
|
+
could not see that, so the fixed search box and the "Filter · N" button overflowed the card.
|
|
25
|
+
`.tamga-filter-bar` is now an inline-size container and the narrow/wide rules are
|
|
26
|
+
`@container` queries; every flex ancestor down to the chip has `min-width: 0`, the search
|
|
27
|
+
shrinks (`flex: 1 1 0`), the button never does (`flex-shrink: 0`), the set-chip row scrolls
|
|
28
|
+
inside the card, and the chips in it never shrink (`flex-shrink: 0`, one line of text): with
|
|
29
|
+
three filters set they were squashed to 24px and the row did not scroll. `pnpm olc:filtre`
|
|
30
|
+
also measures a 210px card on a 1280px screen, with three set chips. Applies to
|
|
31
|
+
`look="fields"` too.
|
|
32
|
+
- **A chip panel's search box showed the bar's own search text** ("Search by name or
|
|
33
|
+
address" inside the Tags panel). It now reads the field's `searchPlaceholder`, else
|
|
34
|
+
`labels.searchIn(label)`, else the field's label.
|
|
35
|
+
|
|
36
|
+
## 0.8.0
|
|
37
|
+
|
|
38
|
+
> A choice panel opened from a button, and a filter bar made of chips.
|
|
39
|
+
|
|
40
|
+
### Added
|
|
41
|
+
|
|
42
|
+
- **`SelectPanel`** · a choice panel opened from an ordinary button, like GitHub Primer's: the
|
|
43
|
+
trigger shows the chosen value or the placeholder with a caret (`aria-haspopup="listbox"`,
|
|
44
|
+
`aria-expanded`, the given `aria-label`); the panel has a `title`, an optional search box
|
|
45
|
+
(`searchable`: focus lands there on open, the list filters as you type, `labels.noMatch` when
|
|
46
|
+
nothing matches, the down arrow enters the list), the options with a check beside the chosen
|
|
47
|
+
one and an optional tone square. `allLabel` adds a first "All" option worth the empty value,
|
|
48
|
+
checked when the value is empty, kept at the top while searching. Arrows move, Enter chooses,
|
|
49
|
+
Esc closes and focus returns to the trigger. `multiple` takes an array, shows a summary like
|
|
50
|
+
"Atlas Lojistik +2" and keeps the panel open, with `labels.clear` under the list. `prefix`
|
|
51
|
+
("Status:"), `caret`, `variant` and `size` shape the trigger for a filter chip. `Combobox`'s
|
|
52
|
+
trigger is a text box and people expected to type into it.
|
|
53
|
+
- **`FilterBar` `look="chips"`** · one line: a fixed search box (17.5rem), then a chip-button
|
|
54
|
+
per top field that always reads name and value together: "Status: All" empty (outlined,
|
|
55
|
+
small, the value faint), "Status: Critical" set (soft) with its own remove button named
|
|
56
|
+
`labels.remove(label)`. Each chip opens a `SelectPanel` whose first option is `labels.all`;
|
|
57
|
+
`searchable` fields search in the panel; `panelTitle` names the panel, else the label.
|
|
58
|
+
`labels.clearAll` closes the row once a filter is set. No separate applied-filters row: the
|
|
59
|
+
chip is the summary. Text and date-range fields keep their boxes. On a narrow screen the
|
|
60
|
+
0.7.3 behaviour holds: search and "Filter · N", the sheet with every field (as panels,
|
|
61
|
+
"All" when empty, titled `labels.filter`), and the set chips in a horizontally scrolling row.
|
|
62
|
+
`fields` is the default and unchanged. The drawer's "+ Filter" chip is left for later.
|
|
63
|
+
|
|
64
|
+
### Fixed
|
|
65
|
+
|
|
66
|
+
- **`SortHeader`'s unsorted glyph carried a grey square**: `Icon` defaults to `duotone`, and
|
|
67
|
+
Phosphor's two-way arrow puts a 20% filled rectangle behind the down arrow in that weight.
|
|
68
|
+
The glyph is drawn `regular`.
|
|
69
|
+
- **A table's header row inside an open card painted over the card's rounded corners**
|
|
70
|
+
(`ListTemplate`'s list card is `tamga-card-open`, so nothing is clipped): the first and last
|
|
71
|
+
header cells now take the card's corner radius. The selector is a descendant one, so a
|
|
72
|
+
`ScrollX` or scroll wrapper around the table is fine; it assumes the table is the card's first
|
|
73
|
+
content.
|
|
74
|
+
|
|
8
75
|
## 0.7.3
|
|
9
76
|
|
|
10
77
|
> What the first real consumer found: the filter bar's names, its phone layout, its option values, a thin progress bar, one card instead of two.
|
|
@@ -54,6 +54,18 @@ export type FilterField = {
|
|
|
54
54
|
* · ve bunu yalnız çağıran biliyor. Verilirse kırılma her genişlikte duruyor.
|
|
55
55
|
*/
|
|
56
56
|
break?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* `look="chips"` only: the line at the top of the chip's panel, "Choose a customer"; absent,
|
|
59
|
+
* the label. TR: Yalnız `look="chips"`: çipin panelinin başlığı, "Müşteri seçin"; yoksa ad.
|
|
60
|
+
*/
|
|
61
|
+
panelTitle?: string;
|
|
62
|
+
/**
|
|
63
|
+
* `look="chips"`, `searchable` only: the panel's search box text, "Search tags". Absent,
|
|
64
|
+
* `labels.searchIn(label)`, else the label itself; never the bar's own search text. TR: Yalnız
|
|
65
|
+
* `look="chips"` ve `searchable`: panelin arama kutusunun metni, "Etiket ara". Yoksa
|
|
66
|
+
* `labels.searchIn(label)`, o da yoksa alanın adı; asla çubuğun kendi arama metni.
|
|
67
|
+
*/
|
|
68
|
+
searchPlaceholder?: string;
|
|
57
69
|
/**
|
|
58
70
|
* A glyph before the value, naming what this filter is about. TR: Değerin
|
|
59
71
|
* önünde, bu filtrenin neyle ilgili olduğunu söyleyen glif.
|
|
@@ -110,6 +122,12 @@ export type FilterBarLabels = {
|
|
|
110
122
|
open: (label: string) => string;
|
|
111
123
|
/** Like "Remove the <filter> filter". TR: "<filtre> filtresini kaldır". */
|
|
112
124
|
remove: (label: string) => string;
|
|
125
|
+
/**
|
|
126
|
+
* Like "Search in <field>"; the chip panel's search box when the field gives no
|
|
127
|
+
* `searchPlaceholder`. TR: "<alan> içinde ara" gibi; alan `searchPlaceholder` vermezse çip
|
|
128
|
+
* panelinin arama kutusu.
|
|
129
|
+
*/
|
|
130
|
+
searchIn?: (label: string) => string;
|
|
113
131
|
rangeStart: string;
|
|
114
132
|
rangeEnd: string;
|
|
115
133
|
calendar: {
|
|
@@ -173,7 +191,19 @@ export type FilterBarProps = {
|
|
|
173
191
|
extra?: ReactNode;
|
|
174
192
|
/** For `DatePicker`'s calendar: "tr-TR", "en-GB". TR: `DatePicker`ın takvimi için: "tr-TR", "en-GB". */
|
|
175
193
|
locale?: string;
|
|
194
|
+
/**
|
|
195
|
+
* `fields` the boxes with a label above each (today's layout). `chips` one line: a fixed
|
|
196
|
+
* search box, then a chip-button per top field that always reads name and value together,
|
|
197
|
+
* "Status: All" empty and "Status: Critical" set, with its own remove; each chip opens a
|
|
198
|
+
* `SelectPanel` whose first option is "All". No separate applied-filters row: the chip is the
|
|
199
|
+
* summary. Text and date-range fields keep their boxes. TR: `fields` her birinin üstünde adı
|
|
200
|
+
* olan kutular (bugünkü düzen). `chips` tek satır: sabit arama kutusu, sonra her üst alan için
|
|
201
|
+
* adı ve değeri hep birlikte okunan bir çip-düğme, boşken "Durum: Tümü", doluyken "Durum:
|
|
202
|
+
* Kritik" ve kendi kaldırması; her çip ilk seçeneği "Tümü" olan bir `SelectPanel` açar. Ayrı bir
|
|
203
|
+
* uygulanan-filtreler satırı yok: çip özetin kendisi. Metin ve tarih aralığı kutu kalır.
|
|
204
|
+
*/
|
|
205
|
+
look?: "fields" | "chips";
|
|
176
206
|
labels: FilterBarLabels;
|
|
177
207
|
};
|
|
178
|
-
export declare function FilterBar({ values, onChange, top, drawer, optionSource, searchKey, fileSearchKey, onFile, fileAccept, extra, locale, labels, }: FilterBarProps): import("react").JSX.Element;
|
|
208
|
+
export declare function FilterBar({ values, onChange, top, drawer, optionSource, searchKey, fileSearchKey, onFile, fileAccept, extra, locale, look, labels, }: FilterBarProps): import("react").JSX.Element;
|
|
179
209
|
//# sourceMappingURL=filter-bar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-bar.d.ts","sourceRoot":"","sources":["../../src/blocks/filter-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"filter-bar.d.ts","sourceRoot":"","sources":["../../src/blocks/filter-bar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,12 +9,16 @@ import { Icon } from "../components/icon.js";
|
|
|
9
9
|
import { Close, Customize, Search, Upload } from "../components/icons.js";
|
|
10
10
|
import { Input } from "../components/input.js";
|
|
11
11
|
import { Select, Sheet } from "../components/primitives.js";
|
|
12
|
+
import { SelectPanel } from "../components/select-panel.js";
|
|
12
13
|
/* Tarih aralığı İKİ ANAHTAR tutuyor. Tek bir dizgeye sıkıştırmak, sunucuya iki
|
|
13
14
|
ayrı parametre giderken burada tekrar ayrıştırmak demekti. */
|
|
14
15
|
export const rangeStart = (key) => `${key}Start`;
|
|
15
16
|
export const rangeEnd = (key) => `${key}End`;
|
|
16
|
-
function FieldControl({ field, values, write, optionSource, locale, labels, }) {
|
|
17
|
+
function FieldControl({ field, values, write, optionSource, locale, labels, panel = false, }) {
|
|
17
18
|
const options = secenekler(field, optionSource);
|
|
19
|
+
if (panel && (field.kind === "select" || field.kind === "searchable" || field.kind === "multi")) {
|
|
20
|
+
return _jsx(PanelAlani, { field: field, values: values, write: write, optionSource: optionSource, labels: labels });
|
|
21
|
+
}
|
|
18
22
|
/* HER KONTROLÜN ADI VAR: alanın adı bir <span>, kontrole bağlı değil; ekran
|
|
19
23
|
okuyucu beş kutuyu da "Tümü" diye okuyordu. */
|
|
20
24
|
if (field.kind === "dateRange") {
|
|
@@ -48,12 +52,40 @@ function FieldControl({ field, values, write, optionSource, locale, labels, }) {
|
|
|
48
52
|
}
|
|
49
53
|
return (_jsx(Input, { full: true, "aria-label": field.label, value: values[field.key] ?? "", onChange: (e) => write(field.key, e.target.value) }));
|
|
50
54
|
}
|
|
55
|
+
/**
|
|
56
|
+
* ÇİP-DÜĞME VE PANEL: tetik "Durum: Tümü ▾" ya da "Durum: Kritik"; paneli
|
|
57
|
+
* `SelectPanel`, ilk seçeneği "Tümü" (geri dönüş yolu gidiş yoluyla aynı yerde).
|
|
58
|
+
* Çipte boşken kenarlı küçük, doluyken yumuşak ve oksuz; ✕ ayrı düğme.
|
|
59
|
+
*/
|
|
60
|
+
function PanelAlani({ field, values, write, optionSource, labels, cip = false, }) {
|
|
61
|
+
const options = secenekler(field, optionSource).map((o) => ({ ...o, tone: field.tones?.[o.value] }));
|
|
62
|
+
const ortak = {
|
|
63
|
+
title: field.panelTitle ?? field.label,
|
|
64
|
+
"aria-label": field.label,
|
|
65
|
+
/* Çipte ad önek ("Durum:"); çekmece panelinde ad zaten üstte, önek yok. */
|
|
66
|
+
prefix: cip ? `${field.label}:` : undefined,
|
|
67
|
+
placeholder: labels.all,
|
|
68
|
+
searchable: field.kind === "searchable",
|
|
69
|
+
/* Panelin araması kendi metnini taşır; çubuğun arama metni ("Ad ya da adres ara") değil. */
|
|
70
|
+
labels: { noMatch: labels.noMatch, search: field.searchPlaceholder ?? labels.searchIn?.(field.label) ?? field.label, clear: labels.clear },
|
|
71
|
+
size: cip ? "sm" : "base",
|
|
72
|
+
className: cip ? undefined : "tamga-select-panel-tam",
|
|
73
|
+
};
|
|
74
|
+
if (field.kind === "multi") {
|
|
75
|
+
const selected = (values[field.key] ?? "").split(",").filter(Boolean);
|
|
76
|
+
const dolu = selected.length > 0;
|
|
77
|
+
return (_jsx(SelectPanel, { multiple: true, ...ortak, options: options, value: selected, onChange: (n) => write(field.key, n.join(",")), variant: cip && dolu ? "soft" : "secondary", caret: !(cip && dolu) }));
|
|
78
|
+
}
|
|
79
|
+
const v = values[field.key] ?? "";
|
|
80
|
+
return (_jsx(SelectPanel, { ...ortak, allLabel: labels.all, options: options, value: v, onChange: (n) => write(field.key, n), variant: cip && v ? "soft" : "secondary", caret: !(cip && v) }));
|
|
81
|
+
}
|
|
51
82
|
/** Seçenekler tek biçimde: düz dizgi, değeri de adı da kendisi olan bir çift. */
|
|
52
83
|
function secenekler(field, optionSource) {
|
|
53
84
|
const ham = field.options?.length ? field.options : (optionSource[field.key] ?? []);
|
|
54
85
|
return ham.map((o) => (typeof o === "string" ? { value: o, label: o } : o));
|
|
55
86
|
}
|
|
56
|
-
export function FilterBar({ values, onChange, top, drawer, optionSource = {}, searchKey = "q", fileSearchKey, onFile, fileAccept, extra, locale = "en-GB", labels, }) {
|
|
87
|
+
export function FilterBar({ values, onChange, top, drawer, optionSource = {}, searchKey = "q", fileSearchKey, onFile, fileAccept, extra, locale = "en-GB", look = "fields", labels, }) {
|
|
88
|
+
const cipler = look === "chips";
|
|
57
89
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
58
90
|
const formId = useId();
|
|
59
91
|
const active = Object.entries(values).filter(([, v]) => v);
|
|
@@ -94,11 +126,13 @@ export function FilterBar({ values, onChange, top, drawer, optionSource = {}, se
|
|
|
94
126
|
const adlar = new Map(secenekler(field, optionSource).map((o) => [o.value, o.label]));
|
|
95
127
|
return value.split(",").map((v) => adlar.get(v) ?? v).join(field.kind === "multi" ? ", " : ",");
|
|
96
128
|
};
|
|
97
|
-
const ustAlanlar = (sinif) => top.map((field) => (_jsxs("div", { className: `tamga-filter-alan ${field.kind === "dateRange" ? "sm:col-span-2" : ""}`, children: [_jsx("span", { className: sinif, children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels })] }, field.key)));
|
|
98
|
-
|
|
129
|
+
const ustAlanlar = (sinif) => top.map((field) => (_jsxs("div", { className: `tamga-filter-alan ${field.kind === "dateRange" ? "sm:col-span-2" : ""}`, children: [_jsx("span", { className: sinif, children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels, panel: cipler })] }, field.key)));
|
|
130
|
+
const aramaKutusu = (_jsxs("span", { className: "relative flex items-center", children: [_jsx(Icon, { icon: Search, size: "xs", "aria-hidden": true, className: "pointer-events-none absolute left-2.5 text-ink-faint" }), _jsx(Input, { type: "search", full: true, leading: true, size: cipler ? "sm" : "md", placeholder: labels.search, value: values[searchKey] ?? "", onChange: (e) => write(searchKey, e.target.value) })] }));
|
|
131
|
+
const cekmeceDugmesi = (drawer.length > 0 || top.length > 0) && (_jsxs(Button, { className: drawer.length > 0 ? "ml-auto" : "tamga-filter-dar ml-auto", onClick: () => setDrawerOpen(true), children: [_jsx(Icon, { icon: Customize, size: "xs" }), _jsxs("span", { className: "tamga-filter-genis", children: [labels.allFilters, hiddenActive > 0 && _jsx("span", { className: "tamga-count ml-1 tabular-nums", children: hiddenActive })] }), _jsx("span", { className: "tamga-filter-dar", children: darMetin })] }));
|
|
132
|
+
return (_jsxs("div", { className: "tamga-card tamga-card-open tamga-filter-bar", children: [cipler ? (_jsxs("div", { className: "tamga-filter-cips", children: [_jsxs("label", { className: "tamga-filter-ara-sabit", children: [_jsx("span", { className: "tamga-filter-ara-etiket", children: labels.search }), aramaKutusu] }), _jsxs("span", { className: "tamga-filter-cip-sira", children: [top.map((field) => field.kind === "select" || field.kind === "searchable" || field.kind === "multi" ? (_jsxs("span", { className: "tamga-filter-cip", "data-set": values[field.key] ? "true" : undefined, children: [_jsx(PanelAlani, { field: field, values: values, write: write, optionSource: optionSource, labels: labels, cip: true }), values[field.key] ? (_jsx("button", { type: "button", className: "tamga-filter-cip-x", "aria-label": labels.remove(field.label), onClick: () => write(field.key, ""), children: _jsx(Icon, { icon: Close, size: "xs" }) })) : null] }, field.key)) : (_jsxs("div", { className: "tamga-filter-genis tamga-filter-alan", "data-range": field.kind === "dateRange" || undefined, children: [_jsx("span", { className: "text-small font-bold text-ink-faint", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels })] }, field.key))), darAktif > 0 ? (_jsx("button", { type: "button", className: "tamga-link tamga-filter-cip-temizle", onClick: () => onChange({}), children: labels.clearAll })) : null] }), cekmeceDugmesi, extra] })) : (_jsxs("div", { className: "tamga-filter-row", children: [_jsxs("label", { className: "tamga-filter-ara", children: [_jsx("span", { className: "text-small font-bold text-ink-faint", children: labels.search }), aramaKutusu] }), top.map((field) => (_jsxs(Fragment, { children: [field.break ? _jsx("span", { "aria-hidden": true, className: "tamga-filter-genis tamga-filter-kir" }) : null, _jsxs("div", { className: `tamga-filter-genis tamga-filter-alan ${field.kind === "dateRange" ? "" : "tamga-filter-cap"}`, "data-range": field.kind === "dateRange" || undefined, children: [_jsx("span", { className: "text-small font-bold text-ink-faint", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels })] })] }, field.key))), cekmeceDugmesi, extra] })), !cipler && active.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [active.map(([key, value]) => (_jsxs("span", { className: "tamga-token", children: [_jsxs("span", { className: "font-normal text-ink-faint", children: [labelFor(key), ":"] }), valueText(key, value), _jsx("button", { type: "button", className: "tamga-token-x", "aria-label": labels.remove(labelFor(key)), onClick: () => write(key, ""), children: _jsx(Icon, { icon: Close, size: "xs" }) })] }, key))), _jsx(Button, { variant: "link", size: "sm", onClick: () => onChange({}), children: labels.clearAll })] })), _jsx(Sheet, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: cipler ? (labels.filter ?? labels.allFilters) : labels.allFilters, closeLabel: labels.calendar.clear, footer: _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", onClick: () => onChange({}), children: labels.clear }), _jsx(Button, { type: "submit", form: formId, variant: "primary", children: labels.apply })] }), children: _jsxs("form", { id: formId, onSubmit: (e) => {
|
|
99
133
|
e.preventDefault();
|
|
100
134
|
setDrawerOpen(false);
|
|
101
|
-
}, className: "flex flex-col", children: [top.length > 0 && (_jsx("div", { className: "tamga-filter-dar tamga-filter-grup border-b border-dashed border-line py-4.5 last:border-b-0", children: _jsx("div", { className: "grid gap-3 sm:grid-cols-[repeat(2,minmax(0,1fr))]", children: ustAlanlar("text-small text-ink-soft") }) })), drawer.map((group) => (_jsxs("div", { className: "flex flex-col gap-3.5 border-b border-dashed border-line py-4.5 last:border-b-0", children: [_jsx("p", { className: "text-caption font-extrabold uppercase tracking-label text-ink-faint", children: group.title }), _jsx("div", { className: "grid gap-3 sm:grid-cols-[repeat(2,minmax(0,1fr))]", children: group.fields.map((field) => (_jsxs("div", { className: `flex flex-col gap-1.5 ${field.kind === "dateRange" ? "sm:col-span-2" : ""}`, children: [_jsx("span", { className: "text-small text-ink-soft", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels })] }, field.key))) })] }, group.title))), fileSearchKey && labels.fileSearch && (_jsxs("div", { children: [_jsx("p", { className: "mb-3 text-micro font-semibold uppercase tracking-wide text-ink-faint", children: labels.fileSearch.title }), _jsx("p", { className: "mb-3 text-small leading-relaxed text-ink-soft", children: labels.fileSearch.help }), values[fileSearchKey] ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-small text-ink", children: values[fileSearchKey] }), _jsx(Button, { type: "button", size: "sm", onClick: () => {
|
|
135
|
+
}, className: "flex flex-col", children: [top.length > 0 && (_jsx("div", { className: "tamga-filter-dar tamga-filter-grup border-b border-dashed border-line py-4.5 last:border-b-0", children: _jsx("div", { className: "grid gap-3 sm:grid-cols-[repeat(2,minmax(0,1fr))]", children: ustAlanlar("text-small text-ink-soft") }) })), drawer.map((group) => (_jsxs("div", { className: "flex flex-col gap-3.5 border-b border-dashed border-line py-4.5 last:border-b-0", children: [_jsx("p", { className: "text-caption font-extrabold uppercase tracking-label text-ink-faint", children: group.title }), _jsx("div", { className: "grid gap-3 sm:grid-cols-[repeat(2,minmax(0,1fr))]", children: group.fields.map((field) => (_jsxs("div", { className: `flex flex-col gap-1.5 ${field.kind === "dateRange" ? "sm:col-span-2" : ""}`, children: [_jsx("span", { className: "text-small text-ink-soft", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels, panel: cipler })] }, field.key))) })] }, group.title))), fileSearchKey && labels.fileSearch && (_jsxs("div", { children: [_jsx("p", { className: "mb-3 text-micro font-semibold uppercase tracking-wide text-ink-faint", children: labels.fileSearch.title }), _jsx("p", { className: "mb-3 text-small leading-relaxed text-ink-soft", children: labels.fileSearch.help }), values[fileSearchKey] ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-small text-ink", children: values[fileSearchKey] }), _jsx(Button, { type: "button", size: "sm", onClick: () => {
|
|
102
136
|
write(fileSearchKey, "");
|
|
103
137
|
onFile?.(null);
|
|
104
138
|
}, children: labels.fileSearch.remove })] })) : (_jsxs("label", { className: `${buttonVariants({})} cursor-pointer`, children: [_jsx(Icon, { icon: Upload, size: "xs" }), labels.fileSearch.choose, _jsx("input", { type: "file", accept: fileAccept, className: "sr-only", onChange: (e) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"a11y.d.ts","sourceRoot":"","sources":["../../src/components/a11y.ts"],"names":[],"mappings":"AAkCA;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAAE,IAAI,EAAE,OAAO,uCA0DhE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,OAAO,GACR,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,
|
|
1
|
+
{"version":3,"file":"a11y.d.ts","sourceRoot":"","sources":["../../src/components/a11y.ts"],"names":[],"mappings":"AAkCA;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAAE,IAAI,EAAE,OAAO,uCA0DhE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,OAAO,GACR,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,QA8DA;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,uCAgBlG"}
|
package/dist/components/a11y.js
CHANGED
|
@@ -119,6 +119,11 @@ export function useListKeys({ open, containerRef, onClose, }) {
|
|
|
119
119
|
if (list.length === 0)
|
|
120
120
|
return;
|
|
121
121
|
const i = list.indexOf(document.activeElement);
|
|
122
|
+
/* Bir yazı kutusunun içindeyken (panelin araması) Space, Home ve End
|
|
123
|
+
metnin; yalnız oklar listeye iner. */
|
|
124
|
+
const yazida = e.target?.tagName === "INPUT";
|
|
125
|
+
if (yazida && (e.key === " " || e.key === "Home" || e.key === "End"))
|
|
126
|
+
return;
|
|
122
127
|
switch (e.key) {
|
|
123
128
|
case "ArrowDown":
|
|
124
129
|
e.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC;;;;GAIG;AAEH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3C;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,KAAc,EACd,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,2FAA2F;IAC3F,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,+
|
|
1
|
+
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC;;;;GAIG;AAEH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3C;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,KAAc,EACd,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,2FAA2F;IAC3F,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,+BAsC3D;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,aAAa,EACb,QAAQ,EACR,KAAK,EACL,GAAG,IAAI,EACR,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAgBA;AAED,sDAAsD;AACtD,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,QAAQ,EACR,KAAK,EACL,GAAG,IAAI,EACR,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAUA;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,MAAM,EAAE;QAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,sCAsBA"}
|
|
@@ -14,7 +14,7 @@ import { Checkbox } from "./checkbox.js";
|
|
|
14
14
|
*/
|
|
15
15
|
export function SortHeader({ children, direction, onSort, align = "left", className, ...rest }) {
|
|
16
16
|
const next = direction === "asc" ? "desc" : "asc";
|
|
17
|
-
return (_jsx("th", { scope: "col", "aria-sort": direction ? (direction === "asc" ? "ascending" : "descending") : "none", className: cn(align === "right" && "text-right", className), ...rest, children: _jsxs("button", { type: "button", onClick: () => onSort?.(next), className: cn("inline-flex items-center gap-1.5", align === "right" && "flex-row-reverse", direction ? "text-ink" : undefined), children: [children, direction ? (_jsx(Icon, { icon: CaretDown, size: "xs", className: cn("text-accent", direction === "asc" && "rotate-180") })) : (_jsx(Icon, { icon: Sort, size: "xs", className: "text-ink-faint" }))] }) }));
|
|
17
|
+
return (_jsx("th", { scope: "col", "aria-sort": direction ? (direction === "asc" ? "ascending" : "descending") : "none", className: cn(align === "right" && "text-right", className), ...rest, children: _jsxs("button", { type: "button", onClick: () => onSort?.(next), className: cn("inline-flex items-center gap-1.5", align === "right" && "flex-row-reverse", direction ? "text-ink" : undefined), children: [children, direction ? (_jsx(Icon, { icon: CaretDown, size: "xs", className: cn("text-accent", direction === "asc" && "rotate-180") })) : (_jsx(Icon, { icon: Sort, size: "xs", weight: "regular", className: "text-ink-faint" }))] }) }));
|
|
18
18
|
}
|
|
19
19
|
/**
|
|
20
20
|
* Baş onay kutusu — ve `indeterminate` neden önemli.
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import type { Tone } from "./tone.js";
|
|
2
|
+
/**
|
|
3
|
+
* SelectPanel · düğmeden açılan seçim paneli: başlık, isteğe bağlı arama,
|
|
4
|
+
* seçenekler. Tetik bir DÜĞME, metin kutusu değil: `Combobox`un kutusu
|
|
5
|
+
* "buraya yaz" diyordu ve bir seçim yapıldığı anlaşılmıyordu.
|
|
6
|
+
*
|
|
7
|
+
* Gerekçe: docs/gerekce/01-form-ve-girdi.md
|
|
8
|
+
*/
|
|
9
|
+
export type SelectPanelOption = {
|
|
10
|
+
value: string;
|
|
11
|
+
label: string;
|
|
12
|
+
/** A state's colour square before the label, as in `Select`. TR: Etiketin önünde durum karesi, `Select`teki gibi. */
|
|
13
|
+
tone?: Tone;
|
|
14
|
+
/** The quiet second text beside the label: "2-3 days". TR: Etiketin yanındaki sessiz ikinci metin: "2-3 gün". */
|
|
15
|
+
hint?: string;
|
|
16
|
+
} & Record<string, unknown>;
|
|
17
|
+
type Ortak = {
|
|
18
|
+
options: readonly SelectPanelOption[];
|
|
19
|
+
/** The line at the top of the panel: "Choose a carrier". TR: Panelin üstündeki satır: "Kargo seçin". */
|
|
20
|
+
title: string;
|
|
21
|
+
/** The trigger's text when nothing is chosen. TR: Hiçbir şey seçili değilken tetiğin metni. */
|
|
22
|
+
placeholder: string;
|
|
23
|
+
/** The trigger's accessible name; the visible text is a value, not a name. TR: Tetiğin erişilebilir adı; görünen metin bir değer, ad değil. */
|
|
24
|
+
"aria-label": string;
|
|
25
|
+
/**
|
|
26
|
+
* A search box under the title; focus lands there on open, the list filters as you type.
|
|
27
|
+
* TR: Başlığın altında arama kutusu; açılınca odak orada, yazdıkça liste süzülür.
|
|
28
|
+
*/
|
|
29
|
+
searchable?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Single choice only: a first option named like this, worth the empty value. Chosen, the
|
|
32
|
+
* value empties; while searching it stays at the top. The way back sits where the way in
|
|
33
|
+
* was. TR: Yalnız tek seçimde: bu adla, boş değerli bir ilk seçenek. Seçilince değer boşalır;
|
|
34
|
+
* ararken de başta kalır. Geri dönüş yolu gidiş yoluyla aynı yerde.
|
|
35
|
+
*/
|
|
36
|
+
allLabel?: string;
|
|
37
|
+
/** Text before the value in the trigger: "Status:". TR: Tetikte değerin önündeki metin: "Durum:". */
|
|
38
|
+
prefix?: string;
|
|
39
|
+
/** The caret at the trigger's end; off for a chip that carries its own remove button. TR: Tetiğin ucundaki ok; kendi kaldırma düğmesini taşıyan çipte kapalı. */
|
|
40
|
+
caret?: boolean;
|
|
41
|
+
/** The trigger's look, from `Button`. TR: Tetiğin görünümü, `Button`dan. */
|
|
42
|
+
variant?: "secondary" | "soft" | "ghost";
|
|
43
|
+
/** The trigger's size, from `Button`. TR: Tetiğin boyu, `Button`dan. */
|
|
44
|
+
size?: "base" | "sm";
|
|
45
|
+
disabled?: boolean;
|
|
46
|
+
labels: {
|
|
47
|
+
/** Shown when the search matches nothing. TR: Arama hiçbir şeyle eşleşmeyince. */
|
|
48
|
+
noMatch: string;
|
|
49
|
+
/** The search box's name and placeholder; falls back to `title`. TR: Arama kutusunun adı ve yer tutucusu; yoksa `title`. */
|
|
50
|
+
search?: string;
|
|
51
|
+
/** Multiple only: the button under the list that empties the choice. TR: Yalnız çoklu: listenin altında seçimi boşaltan düğme. */
|
|
52
|
+
clear?: string;
|
|
53
|
+
};
|
|
54
|
+
className?: string;
|
|
55
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
56
|
+
[k: `data-${string}`]: unknown;
|
|
57
|
+
};
|
|
58
|
+
export type SelectPanelProps = Ortak & ({
|
|
59
|
+
multiple?: false;
|
|
60
|
+
value?: string;
|
|
61
|
+
onChange: (next: string) => void;
|
|
62
|
+
} | {
|
|
63
|
+
multiple: true;
|
|
64
|
+
value: readonly string[];
|
|
65
|
+
onChange: (next: string[]) => void;
|
|
66
|
+
});
|
|
67
|
+
export declare function SelectPanel({ options, title, placeholder, "aria-label": ariaLabel, searchable, allLabel, prefix, caret, variant, size, disabled, labels, className, multiple, value, onChange, ...rest }: SelectPanelProps): import("react").JSX.Element;
|
|
68
|
+
export {};
|
|
69
|
+
//# sourceMappingURL=select-panel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select-panel.d.ts","sourceRoot":"","sources":["../../src/components/select-panel.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAGtC;;;;;;GAMG;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,qHAAqH;IACrH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,iHAAiH;IACjH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACtC,wGAAwG;IACxG,KAAK,EAAE,MAAM,CAAC;IACd,+FAA+F;IAC/F,WAAW,EAAE,MAAM,CAAC;IACpB,+IAA+I;IAC/I,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qGAAqG;IACrG,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iKAAiK;IACjK,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;IACzC,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE;QACN,kFAAkF;QAClF,OAAO,EAAE,MAAM,CAAC;QAChB,4HAA4H;QAC5H,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,kIAAkI;QAClI,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAClC,CACI;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,GAEtE;IAAE,QAAQ,EAAE,IAAI,CAAC;IAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAAE,CACnF,CAAC;AAEJ,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,WAAW,EACX,YAAY,EAAE,SAAS,EACvB,UAAkB,EAClB,QAAQ,EACR,MAAM,EACN,KAAY,EACZ,OAAqB,EACrB,IAAa,EACb,QAAgB,EAChB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAoIlB"}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { createElement as _createElement } from "react";
|
|
4
|
+
import { useCallback, useEffect, useId, useRef, useState } from "react";
|
|
5
|
+
import { useDismiss, useListKeys } from "./a11y.js";
|
|
6
|
+
import { buttonVariants } from "./button.js";
|
|
7
|
+
import { cn } from "../lib/cn.js";
|
|
8
|
+
import { dataProps } from "../lib/data-props.js";
|
|
9
|
+
import { Icon } from "./icon.js";
|
|
10
|
+
import { CaretDown, Check, Search } from "./icons.js";
|
|
11
|
+
import { Input } from "./input.js";
|
|
12
|
+
import { toneOf } from "./tone.js";
|
|
13
|
+
export function SelectPanel({ options, title, placeholder, "aria-label": ariaLabel, searchable = false, allLabel, prefix, caret = true, variant = "secondary", size = "base", disabled = false, labels, className, multiple, value, onChange, ...rest }) {
|
|
14
|
+
const id = useId();
|
|
15
|
+
const [open, setOpen] = useState(false);
|
|
16
|
+
const [sorgu, setSorgu] = useState("");
|
|
17
|
+
const tetik = useRef(null);
|
|
18
|
+
const liste = useRef(null);
|
|
19
|
+
const arama = useRef(null);
|
|
20
|
+
const kapat = useCallback(() => setOpen(false), []);
|
|
21
|
+
const kutu = useDismiss(open, kapat);
|
|
22
|
+
/* Klavyeyle kapanınca odak tetiğe döner: panel kaybolup odak gövdeye düşerse
|
|
23
|
+
ekran okuyucu kullanıcısı nerede olduğunu kaybediyor. */
|
|
24
|
+
const kapatOdakla = useCallback(() => {
|
|
25
|
+
setOpen(false);
|
|
26
|
+
tetik.current?.focus();
|
|
27
|
+
}, []);
|
|
28
|
+
useListKeys({ open, containerRef: kutu, onClose: kapatOdakla });
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
if (!open) {
|
|
31
|
+
setSorgu("");
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
if (searchable)
|
|
35
|
+
arama.current?.focus();
|
|
36
|
+
else
|
|
37
|
+
liste.current?.querySelector("[data-tamga-option]")?.focus();
|
|
38
|
+
}, [open, searchable]);
|
|
39
|
+
const secili = multiple ? value : value ? [value] : [];
|
|
40
|
+
const seciliSecenekler = secili
|
|
41
|
+
.map((v) => options.find((o) => o.value === v))
|
|
42
|
+
.filter((o) => Boolean(o));
|
|
43
|
+
const q = sorgu.trim().toLocaleLowerCase();
|
|
44
|
+
const gorunen = q ? options.filter((o) => o.label.toLocaleLowerCase().includes(q)) : options;
|
|
45
|
+
const sec = (v) => {
|
|
46
|
+
if (multiple) {
|
|
47
|
+
const simdiki = value;
|
|
48
|
+
onChange(simdiki.includes(v) ? simdiki.filter((x) => x !== v) : [...simdiki, v]);
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
onChange(v);
|
|
52
|
+
kapatOdakla();
|
|
53
|
+
};
|
|
54
|
+
const ozet = seciliSecenekler.length === 0
|
|
55
|
+
? null
|
|
56
|
+
: multiple && seciliSecenekler.length > 1
|
|
57
|
+
? `${seciliSecenekler[0].label} +${seciliSecenekler.length - 1}`
|
|
58
|
+
: seciliSecenekler[0].label;
|
|
59
|
+
const secenek = (o, kanca = {}) => {
|
|
60
|
+
const isaretli = secili.includes(o.value) || (o.value === "" && secili.length === 0);
|
|
61
|
+
return (_createElement("button", { ...kanca, key: o.value || "*", type: "button", role: "option", "aria-selected": isaretli, "data-tamga-option": true, "data-selected": isaretli, className: "tamga-option", onClick: () => sec(o.value) },
|
|
62
|
+
o.tone ? _jsx("span", { "aria-hidden": true, className: "tamga-mark shrink-0", style: { background: toneOf(o.tone).mark } }) : null,
|
|
63
|
+
_jsx("span", { className: "min-w-0 flex-1 truncate", children: o.label }),
|
|
64
|
+
o.hint ? _jsx("span", { className: "shrink-0 text-small text-ink-faint", children: o.hint }) : null,
|
|
65
|
+
isaretli ? _jsx(Icon, { icon: Check, size: "xs", weight: "bold", className: "shrink-0 text-[var(--color-accent-line)]" }) : null));
|
|
66
|
+
};
|
|
67
|
+
return (_jsxs("div", { ...dataProps(rest), ref: kutu, className: cn("tamga-select-panel", className), children: [_jsxs("button", { ref: tetik, type: "button", className: cn(buttonVariants({ variant, size }), "tamga-select-panel-tetik"), "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? `${id}-liste` : undefined, "aria-label": ariaLabel, "data-set": ozet ? "true" : undefined, disabled: disabled || undefined, onClick: () => setOpen((o) => !o), children: [prefix ? _jsx("span", { className: "tamga-select-panel-onek", children: prefix }) : null, _jsx("span", { className: cn("min-w-0 truncate", ozet ? "" : "tamga-select-panel-bos"), children: ozet ?? placeholder }), caret ? _jsx(Icon, { icon: CaretDown, size: "xs", weight: "bold", className: "shrink-0" }) : null] }), open ? (_jsxs("div", { className: "tamga-overlay tamga-menu tamga-select-panel-kutu", children: [_jsx("span", { className: "tamga-menu-baslik", children: title }), searchable ? (_jsxs("span", { className: "tamga-select-panel-arama", children: [_jsx(Icon, { icon: Search, size: "xs", "aria-hidden": true, className: "pointer-events-none absolute left-2.5 text-ink-faint" }), _jsx(Input, { ref: arama, type: "search", full: true, leading: true, size: "sm", "aria-label": labels.search ?? title, placeholder: labels.search ?? title, value: sorgu, onChange: (e) => setSorgu(e.target.value) })] })) : null, _jsxs("div", { ref: liste, id: `${id}-liste`, role: "listbox", "aria-label": title, "aria-multiselectable": multiple || undefined, className: "tamga-select-panel-liste", children: [allLabel && !multiple ? secenek({ value: "", label: allLabel }) : null, gorunen.map(({ value: v, label, tone, hint, ...kanca }) => secenek({ value: v, label, tone, hint }, kanca)), gorunen.length === 0 ? _jsx("span", { className: "tamga-select-panel-yok", children: labels.noMatch }) : null] }), multiple && labels.clear ? (_jsx("span", { className: "tamga-select-panel-alt", children: _jsx("button", { type: "button", className: "tamga-link", onClick: () => onChange([]), children: labels.clear }) })) : null] })) : null] }));
|
|
68
|
+
}
|
package/dist/fonts.css
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export { type Tone, type ToneStyle, tones, toneOf, TONE_RANK, rankOf, neutral, a
|
|
|
10
10
|
export { useFocusTrap, useListKeys } from "./components/a11y.js";
|
|
11
11
|
export { Button, buttonVariants, type ButtonProps, IconButton, iconButtonVariants, MiniButton, } from "./components/button.js";
|
|
12
12
|
export { Input, InputGroup, inputVariants, type InputProps, Textarea, type TextareaProps } from "./components/input.js";
|
|
13
|
+
export { SelectPanel, type SelectPanelOption, type SelectPanelProps } from "./components/select-panel.js";
|
|
13
14
|
export { Checkbox } from "./components/checkbox.js";
|
|
14
15
|
export { RadioGroup } from "./components/radio-group.js";
|
|
15
16
|
export { Switch } from "./components/switch.js";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EACL,KAAK,IAAI,EACT,KAAK,SAAS,EACd,KAAK,EACL,MAAM,EACN,SAAS,EACT,MAAM,EACN,OAAO,EACP,MAAM,GACP,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGjE,OAAO,EACL,MAAM,EACN,cAAc,EACd,KAAK,WAAW,EAChB,UAAU,EACV,kBAAkB,EAClB,UAAU,GACX,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -12,6 +12,7 @@ export { useFocusTrap, useListKeys } from "./components/a11y.js";
|
|
|
12
12
|
/* --- controls ---------------------------------------------------------- */
|
|
13
13
|
export { Button, buttonVariants, IconButton, iconButtonVariants, MiniButton, } from "./components/button.js";
|
|
14
14
|
export { Input, InputGroup, inputVariants, Textarea } from "./components/input.js";
|
|
15
|
+
export { SelectPanel } from "./components/select-panel.js";
|
|
15
16
|
/* --- seçim kontrolleri -------------------------------------------------- */
|
|
16
17
|
export { Checkbox } from "./components/checkbox.js";
|
|
17
18
|
export { RadioGroup } from "./components/radio-group.js";
|
package/dist/kit.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tamga-ui 0.
|
|
1
|
+
/*! tamga-ui 0.8.1 · MIT · https://tamga.org.tr */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
--overlay-gap: 8px;
|
|
@@ -1106,6 +1106,9 @@
|
|
|
1106
1106
|
flex-direction: column;
|
|
1107
1107
|
gap: 14px;
|
|
1108
1108
|
padding: 16px;
|
|
1109
|
+
|
|
1110
|
+
container-type: inline-size;
|
|
1111
|
+
min-width: 0;
|
|
1109
1112
|
}
|
|
1110
1113
|
|
|
1111
1114
|
[data-filters] > .tamga-filter-bar {
|
|
@@ -1145,15 +1148,140 @@
|
|
|
1145
1148
|
gap: 14px;
|
|
1146
1149
|
}
|
|
1147
1150
|
|
|
1148
|
-
|
|
1151
|
+
.tamga-filter-cips {
|
|
1152
|
+
display: flex;
|
|
1153
|
+
flex-wrap: wrap;
|
|
1154
|
+
align-items: center;
|
|
1155
|
+
gap: 8px;
|
|
1156
|
+
min-width: 0;
|
|
1157
|
+
}
|
|
1158
|
+
.tamga-filter-ara-sabit {
|
|
1159
|
+
display: flex;
|
|
1160
|
+
flex-direction: column;
|
|
1161
|
+
min-width: 0;
|
|
1162
|
+
max-width: 100%;
|
|
1163
|
+
flex: 0 0 17.5rem;
|
|
1164
|
+
}
|
|
1165
|
+
|
|
1166
|
+
.tamga-filter-ara-etiket {
|
|
1167
|
+
position: absolute;
|
|
1168
|
+
width: 1px;
|
|
1169
|
+
height: 1px;
|
|
1170
|
+
overflow: hidden;
|
|
1171
|
+
clip: rect(0 0 0 0);
|
|
1172
|
+
white-space: nowrap;
|
|
1173
|
+
}
|
|
1174
|
+
.tamga-filter-cip-sira {
|
|
1175
|
+
display: contents;
|
|
1176
|
+
}
|
|
1177
|
+
.tamga-filter-cip-temizle {
|
|
1178
|
+
white-space: nowrap;
|
|
1179
|
+
font-size: var(--text-small);
|
|
1180
|
+
}
|
|
1181
|
+
|
|
1182
|
+
.tamga-filter-cip {
|
|
1183
|
+
display: inline-flex;
|
|
1184
|
+
align-items: center;
|
|
1185
|
+
flex-shrink: 0;
|
|
1186
|
+
max-width: 100%;
|
|
1187
|
+
white-space: nowrap;
|
|
1188
|
+
}
|
|
1189
|
+
|
|
1190
|
+
.tamga-filter-cip[data-set] {
|
|
1191
|
+
gap: 2px;
|
|
1192
|
+
padding-right: 6px;
|
|
1193
|
+
border: 1.5px solid var(--color-edge-strong);
|
|
1194
|
+
border-radius: var(--radius-ctl);
|
|
1195
|
+
background: var(--color-accent-soft);
|
|
1196
|
+
color: var(--color-accent-soft-ink);
|
|
1197
|
+
box-shadow: 3px 3px 0 var(--color-edge-strong);
|
|
1198
|
+
}
|
|
1199
|
+
.tamga-filter-cip[data-set] > .tamga-select-panel > .tamga-select-panel-tetik {
|
|
1200
|
+
border: 0;
|
|
1201
|
+
box-shadow: none;
|
|
1202
|
+
background: transparent;
|
|
1203
|
+
padding-right: 4px;
|
|
1204
|
+
}
|
|
1205
|
+
.tamga-filter-cip[data-set] > .tamga-select-panel > .tamga-select-panel-tetik:not(:disabled):hover,
|
|
1206
|
+
.tamga-filter-cip[data-set] > .tamga-select-panel > .tamga-select-panel-tetik:not(:disabled):active {
|
|
1207
|
+
transform: none;
|
|
1208
|
+
box-shadow: none;
|
|
1209
|
+
background: transparent;
|
|
1210
|
+
text-decoration: underline;
|
|
1211
|
+
text-underline-offset: 3px;
|
|
1212
|
+
}
|
|
1213
|
+
.tamga-filter-cip-x {
|
|
1214
|
+
display: grid;
|
|
1215
|
+
place-items: center;
|
|
1216
|
+
width: 18px;
|
|
1217
|
+
height: 18px;
|
|
1218
|
+
flex-shrink: 0;
|
|
1219
|
+
border: 0;
|
|
1220
|
+
border-radius: var(--mark-dot-radius);
|
|
1221
|
+
background: transparent;
|
|
1222
|
+
color: var(--color-accent-soft-ink);
|
|
1223
|
+
box-shadow: none;
|
|
1224
|
+
cursor: pointer;
|
|
1225
|
+
}
|
|
1226
|
+
.tamga-filter-cip-x:hover {
|
|
1227
|
+
background: var(--color-shell);
|
|
1228
|
+
}
|
|
1229
|
+
|
|
1230
|
+
.tamga-select-panel-tam,
|
|
1231
|
+
.tamga-select-panel-tam > .tamga-select-panel-tetik {
|
|
1232
|
+
display: flex;
|
|
1233
|
+
width: 100%;
|
|
1234
|
+
}
|
|
1235
|
+
.tamga-select-panel-tam > .tamga-select-panel-tetik {
|
|
1236
|
+
justify-content: flex-start;
|
|
1237
|
+
}
|
|
1238
|
+
.tamga-select-panel-tam > .tamga-select-panel-tetik > .tamga-select-panel-bos,
|
|
1239
|
+
.tamga-select-panel-tam > .tamga-select-panel-tetik > span:not(.tamga-select-panel-onek) {
|
|
1240
|
+
flex: 1;
|
|
1241
|
+
text-align: start;
|
|
1242
|
+
}
|
|
1243
|
+
|
|
1244
|
+
@container (max-width: 39.9375rem) {
|
|
1149
1245
|
.tamga-filter-genis {
|
|
1150
1246
|
display: none;
|
|
1151
1247
|
}
|
|
1152
1248
|
.tamga-filter-row > .tamga-filter-ara {
|
|
1153
1249
|
flex-basis: 0;
|
|
1154
1250
|
}
|
|
1251
|
+
|
|
1252
|
+
.tamga-filter-cips > .tamga-filter-ara-sabit {
|
|
1253
|
+
flex: 1 1 0;
|
|
1254
|
+
min-width: 0;
|
|
1255
|
+
}
|
|
1256
|
+
|
|
1257
|
+
.tamga-filter-cips > .tamga-btn,
|
|
1258
|
+
.tamga-filter-row > .tamga-btn {
|
|
1259
|
+
flex-shrink: 0;
|
|
1260
|
+
}
|
|
1261
|
+
.tamga-filter-cips .tamga-filter-cip:not([data-set]) {
|
|
1262
|
+
display: none;
|
|
1263
|
+
}
|
|
1264
|
+
.tamga-filter-cip-sira {
|
|
1265
|
+
display: flex;
|
|
1266
|
+
order: 2;
|
|
1267
|
+
flex: 1 1 100%;
|
|
1268
|
+
min-width: 0;
|
|
1269
|
+
max-width: 100%;
|
|
1270
|
+
align-items: center;
|
|
1271
|
+
flex-wrap: nowrap;
|
|
1272
|
+
gap: 8px;
|
|
1273
|
+
overflow-x: auto;
|
|
1274
|
+
scrollbar-width: none;
|
|
1275
|
+
}
|
|
1276
|
+
.tamga-filter-cip-sira:empty {
|
|
1277
|
+
display: none;
|
|
1278
|
+
}
|
|
1279
|
+
.tamga-filter-cip-sira > .tamga-filter-cip,
|
|
1280
|
+
.tamga-filter-cip-sira > .tamga-filter-cip-temizle {
|
|
1281
|
+
flex: 0 0 auto;
|
|
1282
|
+
}
|
|
1155
1283
|
}
|
|
1156
|
-
@
|
|
1284
|
+
@container (min-width: 40rem) {
|
|
1157
1285
|
.tamga-filter-dar {
|
|
1158
1286
|
display: none;
|
|
1159
1287
|
}
|
|
@@ -3145,6 +3273,61 @@
|
|
|
3145
3273
|
padding: 5px;
|
|
3146
3274
|
}
|
|
3147
3275
|
|
|
3276
|
+
.tamga-select-panel {
|
|
3277
|
+
position: relative;
|
|
3278
|
+
display: inline-flex;
|
|
3279
|
+
min-width: 0;
|
|
3280
|
+
max-width: 100%;
|
|
3281
|
+
}
|
|
3282
|
+
.tamga-select-panel-tetik {
|
|
3283
|
+
min-width: 0;
|
|
3284
|
+
max-width: 100%;
|
|
3285
|
+
}
|
|
3286
|
+
.tamga-select-panel-onek {
|
|
3287
|
+
font-weight: var(--weight-body);
|
|
3288
|
+
}
|
|
3289
|
+
.tamga-select-panel-bos {
|
|
3290
|
+
color: var(--color-ink-faint);
|
|
3291
|
+
font-weight: var(--weight-body);
|
|
3292
|
+
}
|
|
3293
|
+
.tamga-select-panel-kutu {
|
|
3294
|
+
position: absolute;
|
|
3295
|
+
left: 0;
|
|
3296
|
+
top: var(--overlay-below);
|
|
3297
|
+
z-index: 40;
|
|
3298
|
+
display: flex;
|
|
3299
|
+
flex-direction: column;
|
|
3300
|
+
gap: 2px;
|
|
3301
|
+
min-width: 15rem;
|
|
3302
|
+
max-width: 22rem;
|
|
3303
|
+
}
|
|
3304
|
+
.tamga-select-panel-arama {
|
|
3305
|
+
position: relative;
|
|
3306
|
+
display: flex;
|
|
3307
|
+
align-items: center;
|
|
3308
|
+
padding: 2px 5px 6px;
|
|
3309
|
+
}
|
|
3310
|
+
.tamga-select-panel-liste {
|
|
3311
|
+
display: flex;
|
|
3312
|
+
flex-direction: column;
|
|
3313
|
+
gap: 2px;
|
|
3314
|
+
max-height: 18rem;
|
|
3315
|
+
overflow-y: auto;
|
|
3316
|
+
}
|
|
3317
|
+
.tamga-select-panel-yok {
|
|
3318
|
+
display: block;
|
|
3319
|
+
padding: 8px 10px;
|
|
3320
|
+
font-size: var(--text-small);
|
|
3321
|
+
color: var(--color-ink-faint);
|
|
3322
|
+
}
|
|
3323
|
+
.tamga-select-panel-alt {
|
|
3324
|
+
display: flex;
|
|
3325
|
+
justify-content: flex-end;
|
|
3326
|
+
padding: 6px 10px 4px;
|
|
3327
|
+
border-top: 1px dashed var(--color-line);
|
|
3328
|
+
font-size: var(--text-small);
|
|
3329
|
+
}
|
|
3330
|
+
|
|
3148
3331
|
.tamga-option {
|
|
3149
3332
|
display: flex;
|
|
3150
3333
|
width: 100%;
|
|
@@ -3499,6 +3682,13 @@
|
|
|
3499
3682
|
letter-spacing: inherit;
|
|
3500
3683
|
}
|
|
3501
3684
|
|
|
3685
|
+
.tamga-card .tamga-table thead th:first-child {
|
|
3686
|
+
border-start-start-radius: calc(var(--radius-card) - 1px);
|
|
3687
|
+
}
|
|
3688
|
+
.tamga-card .tamga-table thead th:last-child {
|
|
3689
|
+
border-start-end-radius: calc(var(--radius-card) - 1px);
|
|
3690
|
+
}
|
|
3691
|
+
|
|
3502
3692
|
.tamga-table tbody tr {
|
|
3503
3693
|
|
|
3504
3694
|
font-size: 14px;
|
package/dist/styles.css
CHANGED
package/dist/theme.css
CHANGED