[3.x] add styles for tfoot td (for support TableBuilder footRows)

[ArtemYurov]

В TableBuilder через footRows можно добавить новые TableRow (например можно добавить строку "Итого"). Но для tfoot отсутствует дизайн ячеек, поэтому такие строки выбиваются из дизайна:

Коммит добавляет стили для tfoot tr td th, такие же как для tbody, в исключения добавлен класс td *-bulk-actions чтобы не трогать кнопки, которые находятся в tfoot

[lee-to]

Нельзя привязываться к динамическим классам (который -1) и добавьте в описание зачем нам это нужно добавлять с примерами

[ArtemYurov]

Нельзя привязываться к динамическим классам (который -1) и добавьте в описание зачем нам это нужно добавлять с примерами

привязку поправил (использовал -bulk-actions как тут - :class="$id('table-component') + '-bulk-actions'"), описание добавил

[lee-to]

А разве не выгоднее для нас оставлять новые строки без стилей и если разработчику нужно он их сам стилизует через customattributes?

[ArtemYurov]

А разве не выгоднее для нас оставлять новые строки без стилей и если разработчику нужно он их сам стилизует через customattributes?

Я исходил из идеи что раз можно теперь можно добавлять TableRow куда угодно (в данном случае в tfoot), то и стилистика должна оставаться единой. А потом уже модифицировать.
Там немало так-то нужно добавить атрибутов, чтобы сделать такой же дизайн как в стоке.

[ArtemYurov]

Для headRows та же проблема

Но тут все отступы такие как нужно, поэтому не уверен что нужно менять

font-weight если только убрать для thead td, иначе для добавляемого TableRow нельзя назначить свои стили и значит уже нужно каждой ячейке задавать

а так выглядит при stickyTable

[DissNik]

Для headRows та же проблема Но тут все отступы такие как нужно, поэтому не уверен что нужно менять

font-weight если только убрать для thead td, иначе для добавляемого TableRow нельзя назначить свои стили и значит уже нужно каждой ячейке задавать

а так выглядит при stickyTable

можно попробовать поправить стили для хедера таблицы, например:

.table-sticky {
  max-height: calc(70dvh);

  & > table > thead {
    @apply sticky -top-1 z-1;

    &:before {
      content: '';
      @apply -z-1 bg-slate-50 dark:bg-dark-700 absolute top-0 left-0 w-full h-full;
    }
  }
}

ну и в минималистичной теме тоже нужно будет изменить цвет фона

но нужно подумать, есть ли смысл в этом, больше похоже на частный случай

[ArtemYurov]

Добавил.

Да так всё ок

Я правильно понимаю что в отдельный пакет можно добавить свой css? Хочу добавить возможность сделать sticky для footRows

[ArtemYurov]

отловил ещё ситуацию, что если есть bulk action то tfoot не отображается, пока не выбран какой-либо элемент

[ArtemYurov]

добавлю позже чтобы в ->simple режиме нормально отображалось

[lee-to]

добавлю позже чтобы в ->simple режиме нормально отображалось

а сейчас какие проблемы? и в целом какой прогресс по этому пр?

[ArtemYurov]

добавлю позже чтобы в ->simple режиме нормально отображалось

а сейчас какие проблемы? и в целом какой прогресс по этому пр?

минималистик simple

обычная simple

[ArtemYurov]

@DissNik для minimalistic simple я добавил, а для обычной темы нужна подсказка, потому что там :last-child и first-child для чего- то используется
src/UI/resources/css/components/tables.css

  tbody {
    td,
    th {
      @apply max-w-lg break-words border-b p-2 py-3 dark:border-dark-400;
    }
    th {
      @apply font-semibold;
    }
    tr:last-child {
      td,
      th {
        @apply border-b-0;
      }
    }
  }

  tfoot {
    tr:first-child {
      td,
      th {
        @apply max-w-lg border-t pt-3 dark:border-dark-300;
      }
    }
  }

[DissNik]

@DissNik для minimalistic simple я добавил, а для обычной темы нужна подсказка, потому что там :last-child и first-child для чего- то используется src/UI/resources/css/components/tables.css

  tbody {
    td,
    th {
      @apply max-w-lg break-words border-b p-2 py-3 dark:border-dark-400;
    }
    th {
      @apply font-semibold;
    }
    tr:last-child {
      td,
      th {
        @apply border-b-0;
      }
    }
  }

  tfoot {
    tr:first-child {
      td,
      th {
        @apply max-w-lg border-t pt-3 dark:border-dark-300;
      }
    }
  }

в таблице последняя ячейка идет без нижнего бордера, а если присутствует в таблице tfoot то бордер нужно добавить, поэтому и используются первый и последний элемент

[DissNik]

а вот почему цвета отличаются я не знаю )

[ArtemYurov]

а вот почему цвета отличаются я не знаю )

цвета это я добавил (не в css)

[ArtemYurov]

в таблице последняя ячейка идет без нижнего бордера, а если присутствует в таблице tfoot то бордер нужно добавить, поэтому и используются первый и последний элемент

понял, попробую разобраться как сделать красиво

[DissNik]

цвета это я добавил (не в css)

я про бордер dark:border-dark-400 и dark:border-dark-300

[ArtemYurov]

в таблице последняя ячейка идет без нижнего бордера, а если присутствует в таблице tfoot то бордер нужно добавить, поэтому и используются первый и последний элемент

есть bulk - бордера нет, пока не появятся кнопки - тут всё ок
нет bulk - бордер есть (так как есть tfoot с пустым tr div)

<tr>
<td colspan="8" :class="$id('table-component') + '-bulk-actions'" class="table-component-1-bulk-actions">
    <div class="form-group sm:flex sm:flex-row gap-4 items-center justify-start"></div>
</td>
</tr>

Предлагаю для простоты всегда показывать нижний бордер в tbody.

[DissNik]

я завтра переключусь на пр, чтоб в живую посмотреть, может быть возникнут какие-нибудь идеи

[ArtemYurov]

Там этот пустой tr мешает, но убрать его тоже нельзя так как он передается в footRows. Если он в конце то к нему нельзя применить last-child чтобы скрыть нижний бордер у по факту отображаемой видимой предпоследней строки

[lee-to]

добавлю позже чтобы в ->simple режиме нормально отображалось

а сейчас какие проблемы? и в целом какой прогресс по этому пр?

минималистик simple

обычная simple

на вид снизу не хватает бордера или просто съело экраном?

[ArtemYurov]

проверяю на текущей 3.x-dev
обычная

minimalistic - там тоже самое

добавляем footrows перед default

[DissNik]

а если вот так?

  tfoot {
    td:not([class$='-bulk-actions']),
    th {
      @apply max-w-lg break-words p-2 py-3 dark:border-dark-400;
    }
    tr {
      td,
      th {
        @apply max-w-lg border-t pt-3 dark:border-dark-300;
      }
    }
  }

убрать у td:not([class$='-bulk-actions']) нижний бордер и сделать верхний бордер у всех ячеек tfoot

[ArtemYurov]

получилось так:

а если кнопок нет то к tr c bulk actions добавляется class hidden

[DissNik]

как вариант можно и скрывать

[ArtemYurov]

как вариант можно и скрывать

тогда как в итоге сделать? если возвращать null - меньше кода и вроде всё работает