tamga-ui 0.7.3 → 0.8.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 +39 -0
- package/dist/blocks/filter-bar.d.ts +18 -1
- package/dist/blocks/filter-bar.d.ts.map +1 -1
- package/dist/blocks/filter-bar.js +37 -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 +139 -1
- package/dist/styles.css +1 -1
- package/dist/theme.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,45 @@ 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.0
|
|
9
|
+
|
|
10
|
+
> A choice panel opened from a button, and a filter bar made of chips.
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
|
|
14
|
+
- **`SelectPanel`** · a choice panel opened from an ordinary button, like GitHub Primer's: the
|
|
15
|
+
trigger shows the chosen value or the placeholder with a caret (`aria-haspopup="listbox"`,
|
|
16
|
+
`aria-expanded`, the given `aria-label`); the panel has a `title`, an optional search box
|
|
17
|
+
(`searchable`: focus lands there on open, the list filters as you type, `labels.noMatch` when
|
|
18
|
+
nothing matches, the down arrow enters the list), the options with a check beside the chosen
|
|
19
|
+
one and an optional tone square. `allLabel` adds a first "All" option worth the empty value,
|
|
20
|
+
checked when the value is empty, kept at the top while searching. Arrows move, Enter chooses,
|
|
21
|
+
Esc closes and focus returns to the trigger. `multiple` takes an array, shows a summary like
|
|
22
|
+
"Atlas Lojistik +2" and keeps the panel open, with `labels.clear` under the list. `prefix`
|
|
23
|
+
("Status:"), `caret`, `variant` and `size` shape the trigger for a filter chip. `Combobox`'s
|
|
24
|
+
trigger is a text box and people expected to type into it.
|
|
25
|
+
- **`FilterBar` `look="chips"`** · one line: a fixed search box (17.5rem), then a chip-button
|
|
26
|
+
per top field that always reads name and value together: "Status: All" empty (outlined,
|
|
27
|
+
small, the value faint), "Status: Critical" set (soft) with its own remove button named
|
|
28
|
+
`labels.remove(label)`. Each chip opens a `SelectPanel` whose first option is `labels.all`;
|
|
29
|
+
`searchable` fields search in the panel; `panelTitle` names the panel, else the label.
|
|
30
|
+
`labels.clearAll` closes the row once a filter is set. No separate applied-filters row: the
|
|
31
|
+
chip is the summary. Text and date-range fields keep their boxes. On a narrow screen the
|
|
32
|
+
0.7.3 behaviour holds: search and "Filter · N", the sheet with every field (as panels,
|
|
33
|
+
"All" when empty, titled `labels.filter`), and the set chips in a horizontally scrolling row.
|
|
34
|
+
`fields` is the default and unchanged. The drawer's "+ Filter" chip is left for later.
|
|
35
|
+
|
|
36
|
+
### Fixed
|
|
37
|
+
|
|
38
|
+
- **`SortHeader`'s unsorted glyph carried a grey square**: `Icon` defaults to `duotone`, and
|
|
39
|
+
Phosphor's two-way arrow puts a 20% filled rectangle behind the down arrow in that weight.
|
|
40
|
+
The glyph is drawn `regular`.
|
|
41
|
+
- **A table's header row inside an open card painted over the card's rounded corners**
|
|
42
|
+
(`ListTemplate`'s list card is `tamga-card-open`, so nothing is clipped): the first and last
|
|
43
|
+
header cells now take the card's corner radius. The selector is a descendant one, so a
|
|
44
|
+
`ScrollX` or scroll wrapper around the table is fine; it assumes the table is the card's first
|
|
45
|
+
content.
|
|
46
|
+
|
|
8
47
|
## 0.7.3
|
|
9
48
|
|
|
10
49
|
> 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,11 @@ 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;
|
|
57
62
|
/**
|
|
58
63
|
* A glyph before the value, naming what this filter is about. TR: Değerin
|
|
59
64
|
* önünde, bu filtrenin neyle ilgili olduğunu söyleyen glif.
|
|
@@ -173,7 +178,19 @@ export type FilterBarProps = {
|
|
|
173
178
|
extra?: ReactNode;
|
|
174
179
|
/** For `DatePicker`'s calendar: "tr-TR", "en-GB". TR: `DatePicker`ın takvimi için: "tr-TR", "en-GB". */
|
|
175
180
|
locale?: string;
|
|
181
|
+
/**
|
|
182
|
+
* `fields` the boxes with a label above each (today's layout). `chips` one line: a fixed
|
|
183
|
+
* search box, then a chip-button per top field that always reads name and value together,
|
|
184
|
+
* "Status: All" empty and "Status: Critical" set, with its own remove; each chip opens a
|
|
185
|
+
* `SelectPanel` whose first option is "All". No separate applied-filters row: the chip is the
|
|
186
|
+
* summary. Text and date-range fields keep their boxes. TR: `fields` her birinin üstünde adı
|
|
187
|
+
* olan kutular (bugünkü düzen). `chips` tek satır: sabit arama kutusu, sonra her üst alan için
|
|
188
|
+
* adı ve değeri hep birlikte okunan bir çip-düğme, boşken "Durum: Tümü", doluyken "Durum:
|
|
189
|
+
* Kritik" ve kendi kaldırması; her çip ilk seçeneği "Tümü" olan bir `SelectPanel` açar. Ayrı bir
|
|
190
|
+
* uygulanan-filtreler satırı yok: çip özetin kendisi. Metin ve tarih aralığı kutu kalır.
|
|
191
|
+
*/
|
|
192
|
+
look?: "fields" | "chips";
|
|
176
193
|
labels: FilterBarLabels;
|
|
177
194
|
};
|
|
178
|
-
export declare function FilterBar({ values, onChange, top, drawer, optionSource, searchKey, fileSearchKey, onFile, fileAccept, extra, locale, labels, }: FilterBarProps): import("react").JSX.Element;
|
|
195
|
+
export declare function FilterBar({ values, onChange, top, drawer, optionSource, searchKey, fileSearchKey, onFile, fileAccept, extra, locale, look, labels, }: FilterBarProps): import("react").JSX.Element;
|
|
179
196
|
//# 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,38 @@ 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
|
+
prefix: `${field.label}:`,
|
|
66
|
+
placeholder: labels.all,
|
|
67
|
+
searchable: field.kind === "searchable",
|
|
68
|
+
labels: { noMatch: labels.noMatch, search: labels.search, clear: labels.clear },
|
|
69
|
+
size: cip ? "sm" : "base",
|
|
70
|
+
className: cip ? undefined : "tamga-select-panel-tam",
|
|
71
|
+
};
|
|
72
|
+
if (field.kind === "multi") {
|
|
73
|
+
const selected = (values[field.key] ?? "").split(",").filter(Boolean);
|
|
74
|
+
const dolu = selected.length > 0;
|
|
75
|
+
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) }));
|
|
76
|
+
}
|
|
77
|
+
const v = values[field.key] ?? "";
|
|
78
|
+
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) }));
|
|
79
|
+
}
|
|
51
80
|
/** Seçenekler tek biçimde: düz dizgi, değeri de adı da kendisi olan bir çift. */
|
|
52
81
|
function secenekler(field, optionSource) {
|
|
53
82
|
const ham = field.options?.length ? field.options : (optionSource[field.key] ?? []);
|
|
54
83
|
return ham.map((o) => (typeof o === "string" ? { value: o, label: o } : o));
|
|
55
84
|
}
|
|
56
|
-
export function FilterBar({ values, onChange, top, drawer, optionSource = {}, searchKey = "q", fileSearchKey, onFile, fileAccept, extra, locale = "en-GB", labels, }) {
|
|
85
|
+
export function FilterBar({ values, onChange, top, drawer, optionSource = {}, searchKey = "q", fileSearchKey, onFile, fileAccept, extra, locale = "en-GB", look = "fields", labels, }) {
|
|
86
|
+
const cipler = look === "chips";
|
|
57
87
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
58
88
|
const formId = useId();
|
|
59
89
|
const active = Object.entries(values).filter(([, v]) => v);
|
|
@@ -94,11 +124,13 @@ export function FilterBar({ values, onChange, top, drawer, optionSource = {}, se
|
|
|
94
124
|
const adlar = new Map(secenekler(field, optionSource).map((o) => [o.value, o.label]));
|
|
95
125
|
return value.split(",").map((v) => adlar.get(v) ?? v).join(field.kind === "multi" ? ", " : ",");
|
|
96
126
|
};
|
|
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
|
-
|
|
127
|
+
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)));
|
|
128
|
+
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, placeholder: labels.search, value: values[searchKey] ?? "", onChange: (e) => write(searchKey, e.target.value) })] }));
|
|
129
|
+
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 })] }));
|
|
130
|
+
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: "text-small font-bold text-ink-faint", 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, { variant: "link", size: "sm", 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
131
|
e.preventDefault();
|
|
100
132
|
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: () => {
|
|
133
|
+
}, 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
134
|
write(fileSearchKey, "");
|
|
103
135
|
onFile?.(null);
|
|
104
136
|
}, 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.0 · MIT · https://tamga.org.tr */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
--overlay-gap: 8px;
|
|
@@ -1145,6 +1145,65 @@
|
|
|
1145
1145
|
gap: 14px;
|
|
1146
1146
|
}
|
|
1147
1147
|
|
|
1148
|
+
.tamga-filter-cips {
|
|
1149
|
+
display: flex;
|
|
1150
|
+
flex-wrap: wrap;
|
|
1151
|
+
align-items: flex-end;
|
|
1152
|
+
gap: 8px;
|
|
1153
|
+
}
|
|
1154
|
+
.tamga-filter-ara-sabit {
|
|
1155
|
+
display: flex;
|
|
1156
|
+
flex-direction: column;
|
|
1157
|
+
gap: 6px;
|
|
1158
|
+
min-width: 0;
|
|
1159
|
+
max-width: 100%;
|
|
1160
|
+
flex: 0 0 17.5rem;
|
|
1161
|
+
}
|
|
1162
|
+
.tamga-filter-cip-sira {
|
|
1163
|
+
display: contents;
|
|
1164
|
+
}
|
|
1165
|
+
.tamga-filter-cip {
|
|
1166
|
+
display: inline-flex;
|
|
1167
|
+
align-items: center;
|
|
1168
|
+
gap: 4px;
|
|
1169
|
+
max-width: 100%;
|
|
1170
|
+
}
|
|
1171
|
+
.tamga-filter-cip-x {
|
|
1172
|
+
display: grid;
|
|
1173
|
+
place-items: center;
|
|
1174
|
+
width: calc(var(--control) - 8px);
|
|
1175
|
+
height: calc(var(--control) - 8px);
|
|
1176
|
+
flex-shrink: 0;
|
|
1177
|
+
border: 1.5px solid var(--color-edge-strong);
|
|
1178
|
+
border-radius: var(--radius-ctl);
|
|
1179
|
+
background: var(--color-accent-soft);
|
|
1180
|
+
color: var(--color-accent-soft-ink);
|
|
1181
|
+
box-shadow: 3px 3px 0 var(--color-edge-strong);
|
|
1182
|
+
cursor: pointer;
|
|
1183
|
+
}
|
|
1184
|
+
.tamga-filter-cip-x:hover {
|
|
1185
|
+
transform: translate(-1px, -1px);
|
|
1186
|
+
box-shadow: 4px 4px 0 var(--color-edge-strong);
|
|
1187
|
+
}
|
|
1188
|
+
.tamga-filter-cip-x:active {
|
|
1189
|
+
transform: translate(3px, 3px);
|
|
1190
|
+
box-shadow: 0 0 0 var(--color-edge-strong);
|
|
1191
|
+
}
|
|
1192
|
+
|
|
1193
|
+
.tamga-select-panel-tam,
|
|
1194
|
+
.tamga-select-panel-tam > .tamga-select-panel-tetik {
|
|
1195
|
+
display: flex;
|
|
1196
|
+
width: 100%;
|
|
1197
|
+
}
|
|
1198
|
+
.tamga-select-panel-tam > .tamga-select-panel-tetik {
|
|
1199
|
+
justify-content: flex-start;
|
|
1200
|
+
}
|
|
1201
|
+
.tamga-select-panel-tam > .tamga-select-panel-tetik > .tamga-select-panel-bos,
|
|
1202
|
+
.tamga-select-panel-tam > .tamga-select-panel-tetik > span:not(.tamga-select-panel-onek) {
|
|
1203
|
+
flex: 1;
|
|
1204
|
+
text-align: start;
|
|
1205
|
+
}
|
|
1206
|
+
|
|
1148
1207
|
@media (max-width: 39.9375rem) {
|
|
1149
1208
|
.tamga-filter-genis {
|
|
1150
1209
|
display: none;
|
|
@@ -1152,6 +1211,25 @@
|
|
|
1152
1211
|
.tamga-filter-row > .tamga-filter-ara {
|
|
1153
1212
|
flex-basis: 0;
|
|
1154
1213
|
}
|
|
1214
|
+
|
|
1215
|
+
.tamga-filter-cips > .tamga-filter-ara-sabit {
|
|
1216
|
+
flex: 1 1 0;
|
|
1217
|
+
}
|
|
1218
|
+
.tamga-filter-cips .tamga-filter-cip:not([data-set]) {
|
|
1219
|
+
display: none;
|
|
1220
|
+
}
|
|
1221
|
+
.tamga-filter-cip-sira {
|
|
1222
|
+
display: flex;
|
|
1223
|
+
order: 2;
|
|
1224
|
+
flex: 1 1 100%;
|
|
1225
|
+
flex-wrap: nowrap;
|
|
1226
|
+
gap: 8px;
|
|
1227
|
+
overflow-x: auto;
|
|
1228
|
+
scrollbar-width: none;
|
|
1229
|
+
}
|
|
1230
|
+
.tamga-filter-cip-sira:empty {
|
|
1231
|
+
display: none;
|
|
1232
|
+
}
|
|
1155
1233
|
}
|
|
1156
1234
|
@media (min-width: 40rem) {
|
|
1157
1235
|
.tamga-filter-dar {
|
|
@@ -3145,6 +3223,59 @@
|
|
|
3145
3223
|
padding: 5px;
|
|
3146
3224
|
}
|
|
3147
3225
|
|
|
3226
|
+
.tamga-select-panel {
|
|
3227
|
+
position: relative;
|
|
3228
|
+
display: inline-flex;
|
|
3229
|
+
max-width: 100%;
|
|
3230
|
+
}
|
|
3231
|
+
.tamga-select-panel-tetik {
|
|
3232
|
+
max-width: 100%;
|
|
3233
|
+
}
|
|
3234
|
+
.tamga-select-panel-onek {
|
|
3235
|
+
font-weight: var(--weight-body);
|
|
3236
|
+
}
|
|
3237
|
+
.tamga-select-panel-bos {
|
|
3238
|
+
color: var(--color-ink-faint);
|
|
3239
|
+
font-weight: var(--weight-body);
|
|
3240
|
+
}
|
|
3241
|
+
.tamga-select-panel-kutu {
|
|
3242
|
+
position: absolute;
|
|
3243
|
+
left: 0;
|
|
3244
|
+
top: var(--overlay-below);
|
|
3245
|
+
z-index: 40;
|
|
3246
|
+
display: flex;
|
|
3247
|
+
flex-direction: column;
|
|
3248
|
+
gap: 2px;
|
|
3249
|
+
min-width: 15rem;
|
|
3250
|
+
max-width: 22rem;
|
|
3251
|
+
}
|
|
3252
|
+
.tamga-select-panel-arama {
|
|
3253
|
+
position: relative;
|
|
3254
|
+
display: flex;
|
|
3255
|
+
align-items: center;
|
|
3256
|
+
padding: 2px 5px 6px;
|
|
3257
|
+
}
|
|
3258
|
+
.tamga-select-panel-liste {
|
|
3259
|
+
display: flex;
|
|
3260
|
+
flex-direction: column;
|
|
3261
|
+
gap: 2px;
|
|
3262
|
+
max-height: 18rem;
|
|
3263
|
+
overflow-y: auto;
|
|
3264
|
+
}
|
|
3265
|
+
.tamga-select-panel-yok {
|
|
3266
|
+
display: block;
|
|
3267
|
+
padding: 8px 10px;
|
|
3268
|
+
font-size: var(--text-small);
|
|
3269
|
+
color: var(--color-ink-faint);
|
|
3270
|
+
}
|
|
3271
|
+
.tamga-select-panel-alt {
|
|
3272
|
+
display: flex;
|
|
3273
|
+
justify-content: flex-end;
|
|
3274
|
+
padding: 6px 10px 4px;
|
|
3275
|
+
border-top: 1px dashed var(--color-line);
|
|
3276
|
+
font-size: var(--text-small);
|
|
3277
|
+
}
|
|
3278
|
+
|
|
3148
3279
|
.tamga-option {
|
|
3149
3280
|
display: flex;
|
|
3150
3281
|
width: 100%;
|
|
@@ -3499,6 +3630,13 @@
|
|
|
3499
3630
|
letter-spacing: inherit;
|
|
3500
3631
|
}
|
|
3501
3632
|
|
|
3633
|
+
.tamga-card .tamga-table thead th:first-child {
|
|
3634
|
+
border-start-start-radius: calc(var(--radius-card) - 1px);
|
|
3635
|
+
}
|
|
3636
|
+
.tamga-card .tamga-table thead th:last-child {
|
|
3637
|
+
border-start-end-radius: calc(var(--radius-card) - 1px);
|
|
3638
|
+
}
|
|
3639
|
+
|
|
3502
3640
|
.tamga-table tbody tr {
|
|
3503
3641
|
|
|
3504
3642
|
font-size: 14px;
|
package/dist/styles.css
CHANGED
package/dist/theme.css
CHANGED