התנהגות מצופה — ל-QA
שני ערוצים נפרדים: מיון (chips, צד שמאל) מול סינון (כפתור "סינון" + פופ).
כפתור "סינון"
- בלחיצה אמור להיפתח פופ סינון — שם בוחרים את הפילטרים.
- לא מומש עדיין: הפופ לא נבנה/אופיין. כרגע הכפתור רק מדגיש את עצמו — זה לא באג, פשוט עוד לא נבנה.
ה-chips (צד שמאל)
- אלו מיון / חלוקה של הטבלה — לא סינון.
- משתנים לפי הטבלה וההקשר, ולא תמיד מוצגים.
- בחירה יחידה (radio): chip אחד נבחר בכל פעם, "הכל" = ברירת מחדל.
- ה-count על כל chip = ספירת שורות אמיתית מהטבלה.
- להסתרת כל צד המיון:
data-has-sort="false" על .filter-row.
שדה חיפוש
- Placeholder: המילה "חפש" מודגשת, השאר רגיל.
- בפוקוס: הטקסט מתחלף ל-"חפשו", והשדה מתרחב ל-70% (רוחב בלבד — הגובה לא משתנה).
- כשיש מקום מצומצם / צד מיון פתוח — השדה מתכווץ ולא חופף את ה-chips.
- ניקוי החיפוש: כפתור X מופיע כשיש טקסט.
המספר ליד "סינון"
- = מספר הפילטרים שנבחרו בפופ — לא מספר תוצאות, ולא קשור ל-chips.
- מומלץ להציג רק כשיש פילטר פעיל (count > 0).
- ספירת תוצאות מוצגת בנפרד ליד הטבלה — לא על הכפתור.
כמה סינונים יחד
- השילוב נעשה בתוך הפופ ומשתקף ב-count. ה-chips נשארים בחירה יחידה.
התנהגות בצמצום רוחב (responsive) — לפי הסדר
- 1. שדה החיפוש מתכווץ כדי לפנות מקום — בלי לחפוף את צד המיון.
- 2. כשאין מקום בכלל — ה-chips של המיון מתקפלים לתוך כפתור "סינון", ומופיע count = כמות אופציות המיון.
- במובייל — אין chips; רק חיפוש + כפתור "סינון".
בקרת תצוגה (demo בלבד)
- הטוגל "הסתר צד מיון" מדליק/מכבה
data-has-sort כדי לראות את שני המצבים — לא חלק מה-UI האמיתי.