@bitrix24/b24ui-nuxt/.nuxt/b24ui/content/table-wrapper.ts

Bitrix24 UI-Kit for developing web applications REST API for NUXT & VUE

const size = [
  "xs",
  "sm",
  "md",
  "lg"
] as const

export default {
  "slots": {
    "base": "font-b24-primary [&>table]:text-md [&>table]:relative [&>table]:w-full [&>table]:text-left [&>table]:rtl:text-right [&>table]:text-base-900 dark:[&>table]:text-base-200 [&>table>thead>tr>td]:align-middle [&>table>thead>tr>th]:align-middle [&>table>tbody>tr>td]:align-middle [&>table>tbody>tr>th]:align-middle [&>table>tfoot>tr>td]:align-middle [&>table>tfoot>tr>th]:align-middle [&>table>thead>tr>td]:whitespace-nowrap  [&>table>thead>tr>td]:text-md [&>table>thead>tr>td]:font-normal [&>table>thead>tr>th]:whitespace-nowrap  [&>table>thead>tr>th]:text-md [&>table>thead>tr>th]:font-normal [&>table>tbody>tr>th]:whitespace-nowrap  [&>table>tbody>tr>th]:text-md [&>table>tbody>tr>th]:font-normal [&>table>tfoot>tr>td]:whitespace-nowrap  [&>table>tfoot>tr>td]:text-md [&>table>tfoot>tr>td]:font-normal [&>table>tfoot>tr>th]:whitespace-nowrap  [&>table>tfoot>tr>th]:text-md [&>table>tfoot>tr>th]:font-normal [&>table>thead>tr]:border-base-300 dark:[&>table>thead>tr]:border-base-800 [&>table>tbody>tr]:border-base-master/10 dark:[&>table>tbody>tr]:border-base-100/20 [&>table>tfoot]:border-base-300 dark:[&>table>tfoot]:border-base-800 [&>table>thead>tr]:border-b [&>table>tbody>tr:not(:last-child)]:border-b [&>table>tfoot]:border-t"
  },
  "variants": {
    "size": {
      "xs": "[&>table>thead>tr>td]:text-xs [&>table>thead>tr>td]:px-2 [&>table>thead>tr>td]:py-1 [&>table>thead>tr>th]:text-xs [&>table>thead>tr>th]:px-2 [&>table>thead>tr>th]:py-1 [&>table>tbody>tr>td]:text-xs [&>table>tbody>tr>td]:px-2 [&>table>tbody>tr>td]:py-1 [&>table>tbody>tr>th]:text-xs [&>table>tbody>tr>th]:px-2 [&>table>tbody>tr>th]:py-1 [&>table>tfoot>tr>td]:text-xs [&>table>tfoot>tr>td]:px-2 [&>table>tfoot>tr>td]:py-1 [&>table>tfoot>tr>th]:text-xs [&>table>tfoot>tr>th]:px-2 [&>table>tfoot>tr>th]:py-1",
      "sm": "[&>table>thead>tr>td]:text-sm [&>table>thead>tr>td]:px-3 [&>table>thead>tr>td]:py-2 [&>table>thead>tr>th]:text-sm [&>table>thead>tr>th]:px-3 [&>table>thead>tr>th]:py-2 [&>table>tbody>tr>td]:text-sm [&>table>tbody>tr>td]:px-3 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>th]:text-sm [&>table>tbody>tr>th]:px-3 [&>table>tbody>tr>th]:py-2 [&>table>tfoot>tr>td]:text-sm [&>table>tfoot>tr>td]:px-3 [&>table>tfoot>tr>td]:py-2 [&>table>tfoot>tr>th]:text-sm [&>table>tfoot>tr>th]:px-3 [&>table>tfoot>tr>th]:py-2",
      "md": "[&>table>thead>tr>td]:text-md [&>table>thead>tr>td]:px-4 [&>table>thead>tr>td]:py-3.5 [&>table>thead>tr>th]:text-md [&>table>thead>tr>th]:px-4 [&>table>thead>tr>th]:py-3.5 [&>table>tbody>tr>td]:text-md [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-3.5 [&>table>tbody>tr>th]:text-md [&>table>tbody>tr>th]:px-4 [&>table>tbody>tr>th]:py-3.5 [&>table>tfoot>tr>td]:text-md [&>table>tfoot>tr>td]:px-4 [&>table>tfoot>tr>td]:py-3.5 [&>table>tfoot>tr>th]:text-md [&>table>tfoot>tr>th]:px-4 [&>table>tfoot>tr>th]:py-3.5",
      "lg": "[&>table>thead>tr>td]:text-lg [&>table>thead>tr>td]:px-5 [&>table>thead>tr>td]:py-4 [&>table>thead>tr>th]:text-lg [&>table>thead>tr>th]:px-5 [&>table>thead>tr>th]:py-4 [&>table>tbody>tr>td]:text-lg [&>table>tbody>tr>td]:px-5 [&>table>tbody>tr>td]:py-4 [&>table>tbody>tr>th]:text-lg [&>table>tbody>tr>th]:px-5 [&>table>tbody>tr>th]:py-4 [&>table>tfoot>tr>td]:text-lg [&>table>tfoot>tr>td]:px-5 [&>table>tfoot>tr>td]:py-4 [&>table>tfoot>tr>th]:text-lg [&>table>tfoot>tr>th]:px-5 [&>table>tfoot>tr>th]:py-4"
    },
    "rounded": {
      "true": "rounded-md",
      "false": ""
    },
    "zebra": {
      "true": "[&>table>tbody>tr]:even:bg-base-30 [&>table>tbody>tr]:even:[&>td]:bg-base-30 [&>table>tbody>tr]:even:[&>th]:bg-base-30 dark:[&>table>tbody>tr]:even:bg-base-dark dark:[&>table>tbody>tr]:even:[&>td]:bg-base-dark dark:[&>table>tbody>tr]:even:[&>th]:bg-base-dark"
    },
    "pinRows": {
      "true": "[&>table>thead>tr]:sticky [&>table>thead>tr]:top-0 [&>table>thead>tr]:z-1 [&>table>thead>tr]:bg-white dark:[&>table>thead>tr]:bg-base-dark [&>table>thead>tr]:shadow-bottom-sm [&>table>tfoot>tr]:sticky [&>table>tfoot>tr]:bottom-0 [&>table>tfoot>tr]:z-1 [&>table>tfoot>tr]:bg-white dark:[&>table>tfoot>tr]:bg-base-dark [&>table>tfoot>tr]:shadow-top-sm"
    },
    "pinCols": {
      "true": "[&>table>thead>tr>th]:sticky [&>table>thead>tr>th]:right-0 [&>table>thead>tr>th]:left-0 [&>table>thead>tr>th]:bg-base-20 dark:[&>table>thead>tr>th]:bg-base-dark [&>table>tbody>tr>th]:sticky [&>table>tbody>tr>th]:right-0 [&>table>tbody>tr>th]:left-0 [&>table>tbody>tr>th]:bg-base-20 dark:[&>table>tbody>tr>th]:bg-base-dark [&>table>tfoot>tr>th]:sticky [&>table>tfoot>tr>th]:right-0 [&>table>tfoot>tr>th]:left-0 [&>table>tfoot>tr>th]:bg-base-20 dark:[&>table>tfoot>tr>th]:bg-base-dark"
    },
    "rowHover": {
      "true": "[&>table>tbody>tr]:hover:bg-base-40 [&>table>tbody>tr]:hover:[&>td]:bg-base-40 [&>table>tbody>tr]:hover:[&>th]:bg-base-40 dark:[&>table>tbody>tr]:hover:bg-base-900 dark:[&>table>tbody>tr]:hover:[&>td]:bg-base-900 dark:[&>table>tbody>tr]:hover:[&>th]:bg-base-900"
    },
    "bordered": {
      "true": "border border-base-master/10 dark:border-base-800"
    },
    "scrollbarThin": {
      "true": "scrollbar-thin"
    }
  },
  "defaultVariants": {
    "size": "md" as typeof size[number],
    "scrollbarThin": true
  }
}