CSV import

1. root.fx-importşart
2. file.fx-import__fileixtiyoriy
3. hint.fx-import__hintixtiyoriy
4. link.fx-import__linkixtiyoriy
5. map.fx-import__mapşart
6. sample.fx-import__sampleixtiyoriy
7. arrow.fx-import__arrowixtiyoriy
8. required.fx-import__requiredixtiyoriy
9. stats.fx-import__statsixtiyoriy
10. stat.fx-import__statixtiyoriy
11. errors.fx-import__errorsixtiyoriy
12. value.fx-import__valueixtiyoriy
13. done.fx-import__doneixtiyoriy
14. done-title.fx-import__done-titleixtiyoriy

Qadamlar — fx-wizard (fokus har qadam sarlavhasiga, xato qadam «xato bor» sr-only bilan). Moslaş jadvalida har select aria-label «“Tel” ustuni qaysi maydonga»; majburiy maydonlar röyxati ✓/○ belgisi va sr-only «Ulangan/Ulanmagan». Natija sonlari aria-live; xatolar jadvali caption bilan. Import tugagaç fokus natija sarlavhasiga.

npx foxui add import

<form class="fx-wizard fx-import" data-fx-wizard data-fx-importer data-fields='[{"key":"ism","label":"Ism familiya","required":true,"match":["fish","fio","ism","name","mijoz"]},{"key":"telefon","label":"Telefon","required":true,"type":"phone","match":["tel","phone","raqam"]},{"key":"email","label":"Email","type":"email","match":["pochta","mail"]},{"key":"shahar","label":"Şahar","match":["city","viloyat","hudud"]},{"key":"summa","label":"Bitim summasi","type":"number","match":["amount","narx","summa"]}]'>
  <ol class="fx-steps" aria-label="Mijozlarni import qiliş">
    <li class="fx-steps__item" aria-current="step"><span class="fx-steps__label">Fayl</span></li>
    <li class="fx-steps__item"><span class="fx-steps__label">Ustunlar</span></li>
    <li class="fx-steps__item"><span class="fx-steps__label">Tekşiruv</span></li>
  </ol>
  <section class="fx-wizard__panel">
    <h2 class="fx-wizard__title">Mijozlar faylini yuklang</h2>
    <label class="fx-dropzone" data-fx-dropzone>
      <input type="file" accept=".csv,text/csv" required aria-describedby="im-h">
      <span class="fx-dropzone__title">CSV faylni şu yerga taşlang yoki tanlang</span>
      <span class="fx-dropzone__hint" id="im-h">Birinçi qator — ustun nomlari. 10 000 qatorgaça, UTF-8.</span>
    </label>
    <p class="fx-import__file" hidden aria-live="polite"></p>
    <p class="fx-import__hint">Fayl yöqmi? <button class="fx-import__link" type="button" data-import-sample>Namuna fayl bilan sinab köring</button> yoki <a href="#">şablonni yuklab oling</a>.</p>
    <template data-import-sample-data>F.I.Sh;Tel;E-poçta;Şahar;Summa;Izoh
Dilnoza Rahimova;+998 93 512 40 18;[email protected];Toşkent;12 500 000;Yillik tarif
Bobur Toshmatov;90 123 45 67;[email protected];Samarqand;4 200 000;
Madina Yusupova;+998 97 700 11 22;madina[at]misol.uz;Fargʻona;3 900 000;Qayta qönğiroq
;+998 91 222 33 44;;Andijon;1 500 000;Ism yozilmagan
Jasur Abdullayev;+998 90 555 66 77;[email protected];Toşkent;8 750 000;
Sardor Qodirov;12345;[email protected];Buxoro;2 000 000;Telefon xato
Nilufar Karimova;+998 93 512 40 18;[email protected];Toşkent;6 300 000;Takror telefon
Aziz Ergashev;+998 95 400 80 90;[email protected];Namangan;5 100 000;
Gulnora Saidova;+998 99 811 23 45;[email protected];Qarşi;2 750 000;
Otabek Nazarov;+998 88 300 12 12;[email protected];Toşkent;11 000 000;Korporativ</template>
  </section>
  <section class="fx-wizard__panel" hidden>
    <h2 class="fx-wizard__title">Ustunlarni moslang</h2>
    <p class="fx-wizard__text">Ustun nomlariga qarab taxmin qildik — tekşirib çiqing. Keraksiz ustunni «Ötkazib yuboriş» qiling.</p>
    <ul class="fx-import__required" aria-label="Majburiy maydonlar"></ul>
    <div class="fx-table-scroll"><table class="fx-table fx-import__map" data-density="compact"><thead><tr><th scope="col">Fayldagi ustun</th><th scope="col">Namuna</th><th scope="col"><span class="fx-sr-only">→</span></th><th scope="col">CRM maydoni</th></tr></thead><tbody></tbody></table></div>
  </section>
  <section class="fx-wizard__panel" hidden>
    <h2 class="fx-wizard__title">Tekşiruv natijasi</h2>
    <dl class="fx-import__stats" aria-live="polite"></dl>
    <div class="fx-table-scroll fx-import__errors"><table class="fx-table" data-density="compact"><caption class="fx-sr-only">Xatoli qatorlar</caption><thead><tr><th scope="col" data-type="num">Qator</th><th scope="col">Maydon</th><th scope="col">Qiymat</th><th scope="col">Muammo</th></tr></thead><tbody></tbody></table></div>
    <label class="fx-check"><input type="checkbox" data-import-skip checked><span class="fx-check__box"></span>Xatoli va takror qatorlarni ötkazib yuboriş</label>
  </section>
  <div class="fx-wizard__footer">
    <button class="fx-btn" data-variant="ghost" type="button" data-wizard="prev">Orqaga</button>
    <span class="fx-wizard__status" data-wizard-status></span>
    <button class="fx-btn" type="button" data-wizard="next">Keyingi</button>
    <button class="fx-btn" type="submit" data-variant="primary" data-wizard="submit">Import qiliş</button>
  </div>
  <div class="fx-import__done" hidden>
    <h2 class="fx-import__done-title">Import tugadi</h2>
    <p class="fx-wizard__text" data-import-count></p>
    <div style="display:flex;gap:var(--fx-space-2);flex-wrap:wrap"><a class="fx-btn" data-variant="primary" href="#">Mijozlarga ötiş</a><a class="fx-btn" data-import-report hidden>Xatolar röyxatini yuklab oliş (CSV)</a></div>
  </div>
</form>

Tokenlar: --fx-bg-surface --fx-border-color-default --fx-border-color-error --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-dialog-width --fx-fg-success --fx-fg-warning --fx-font-adjust-mono --fx-font-family-mono --fx-font-size-lg --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-radius-badge --fx-radius-control --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-brand --fx-text-error --fx-text-primary --fx-text-secondary --fx-text-tertiary