@rotki/ui-library 3.1.7 → 3.2.0

package/dist/components/tables/RuiTablePagination.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTablePagination.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","RuiMenuSelect","_isRef","_createBlock","RuiTextField","_withKeys","_createCommentVNode","_toDisplayString","RuiButton","_withCtx","RuiIcon"],"sources":["../../../src/components/tables/RuiTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiMenuSelect from '@/components/forms/select/RuiMenuSelect.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TablePaginationData, usePaginationNavigation } from '@/components/tables/use-pagination-navigation';\nimport { useTable } from '@/composables/defaults/table';\nimport { tv } from '@/utils/tv';\n\nexport type { TablePaginationData };\n\nexport interface Props {\n  dense?: boolean;\n  disablePerPage?: boolean;\n  loading?: boolean;\n  /**\n   * Render a compact, touch-friendly layout: the sections spread across the\n   * full width and the first/last jump buttons are dropped to save space.\n   */\n  mobile?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced\n   * with a numeric input. Set to `1` to use the input whenever there is more\n   * than one page, or `0` to always use the dropdown. Defaults to `500`, since\n   * past that materialising the full range list stalls the main thread.\n   */\n  rangesThreshold?: number;\n}\n\nconst modelValue = defineModel<TablePaginationData>({ required: true });\n\nconst {\n  dense = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n  mobile = false,\n} = defineProps<Props>();\n\nconst paginationStyles = tv({\n  slots: {\n    wrapper: 'relative flex flex-wrap items-center justify-end gap-x-4 gap-y-0',\n    limit: 'flex items-center between:ml-2 between:mr-0 text-caption',\n    ranges: 'flex items-center between:ml-2 between:mr-0 text-caption pr-2',\n    pageInput: 'w-14 [&_input]:text-center [&_input]:px-1! [&_input]:text-xs! [&_input]:leading-5!',\n    sectionLabel: 'text-rui-text-secondary whitespace-nowrap py-3',\n    select: 'text-xs! pl-3!',\n    indicator: 'text-rui-text text-caption whitespace-nowrap',\n    navigation: 'flex items-center',\n  },\n  variants: {\n    // the selects match the icon buttons, 28px with `size=\"sm\"` and 32px without\n    dense: {\n      true: {\n        select: 'min-h-7!',\n        pageInput: '[&_input]:py-1!',\n      },\n      false: {\n        select: 'min-h-8!',\n        pageInput: '[&_input]:py-1.5!',\n      },\n    },\n    mobile: {\n      true: {\n        wrapper: 'flex-nowrap justify-between gap-x-2 gap-y-0',\n        ranges: 'pr-0',\n        // sr-only rather than hidden: a display:none label names nothing\n        sectionLabel: 'sr-only',\n      },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof paginationStyles>>(() => paginationStyles({ dense, mobile }));\n\nconst tableDefaults = useTable();\n\nconst {\n  limits,\n  currentLimit,\n  pages,\n  ranges,\n  indicatorText,\n  currentRange,\n  useInputJump,\n  hasPrev,\n  hasNext,\n  onPrev,\n  onNext,\n  onFirst,\n  onLast,\n} = usePaginationNavigation(modelValue, tableDefaults, () => rangesThreshold);\n\n/**\n * With every row on one page the bar stays in place, as a summary, but the\n * page jump has nowhere to go, so it disables like the arrows beside it.\n */\nconst singlePage = computed<boolean>(() => get(pages) <= 1);\n\n/**\n * The rows-per-page select disables only once every option would fit all the\n * rows. Until then it stays live even on a single page: it is how a user\n * lowers a limit they raised past the row count.\n */\nconst everyLimitFits = computed<boolean>(() => {\n  const { total } = get(modelValue);\n  return get(singlePage) && get(limits).every(({ limit }) => limit >= total);\n});\n\nconst pageDraft = ref<string>(String(get(currentRange)));\n\nwatch(currentRange, (value) => {\n  set(pageDraft, String(value));\n});\n\nfunction commitPageInput(): void {\n  const parsed = Number.parseInt(get(pageDraft), 10);\n  const maxPage = get(pages);\n  if (!Number.isFinite(parsed) || maxPage === 0) {\n    set(pageDraft, String(get(currentRange)));\n    return;\n  }\n  const clamped = Math.min(Math.max(parsed, 1), maxPage);\n  if (clamped !== get(currentRange))\n    set(currentRange, clamped);\n  set(pageDraft, String(clamped));\n}\n\nconst limitId = useId();\nconst rangesId = useId();\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <div\n      :class=\"ui.limit()\"\n      data-id=\"table-pagination-limit-section\"\n    >\n      <label\n        :for=\"limitId\"\n        :class=\"ui.sectionLabel()\"\n      >\n        Rows per page:\n      </label>\n      <RuiMenuSelect\n        :id=\"limitId\"\n        v-model=\"currentLimit\"\n        :options=\"limits\"\n        :disabled=\"loading || disablePerPage || everyLimitFits\"\n        :class-names=\"{ label: ui.select() }\"\n        label=\"\"\n        name=\"limit\"\n        key-attr=\"limit\"\n        text-attr=\"limit\"\n        details=\"hidden\"\n        dense\n        data-id=\"table-pagination-limit\"\n      />\n    </div>\n    <div\n      :class=\"ui.ranges()\"\n      data-id=\"table-pagination-ranges-section\"\n    >\n      <label\n        :for=\"rangesId\"\n        :class=\"ui.sectionLabel({ class: useInputJump ? undefined : 'sr-only' })\"\n      >\n        Page\n      </label>\n      <RuiTextField\n        v-if=\"useInputJump\"\n        :id=\"rangesId\"\n        v-model=\"pageDraft\"\n        :disabled=\"loading || singlePage\"\n        :class=\"[ui.pageInput()]\"\n        type=\"number\"\n        min=\"1\"\n        :max=\"pages\"\n        inputmode=\"numeric\"\n        details=\"hidden\"\n        dense\n        data-id=\"table-pagination-ranges-input\"\n        @blur=\"commitPageInput()\"\n        @keydown.enter=\"commitPageInput()\"\n      />\n      <RuiMenuSelect\n        v-else-if=\"ranges.length > 0\"\n        :id=\"rangesId\"\n        v-model=\"currentRange\"\n        :options=\"ranges\"\n        :disabled=\"loading || singlePage\"\n        :class-names=\"{ label: ui.select() }\"\n        label=\"\"\n        name=\"ranges\"\n        key-attr=\"page\"\n        text-attr=\"text\"\n        details=\"hidden\"\n        dense\n        data-id=\"table-pagination-ranges\"\n      />\n      <span :class=\"ui.indicator()\">\n        {{ indicatorText }}\n      </span>\n    </div>\n    <div\n      :class=\"ui.navigation()\"\n      data-id=\"table-pagination-navigation\"\n    >\n      <RuiButton\n        v-if=\"!mobile\"\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"First page\"\n        data-id=\"table-pagination-first\"\n        @click=\"onFirst()\"\n      >\n        <RuiIcon name=\"lu-chevrons-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Previous page\"\n        data-id=\"table-pagination-prev\"\n        @click=\"onPrev()\"\n      >\n        <RuiIcon name=\"lu-chevron-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Next page\"\n        data-id=\"table-pagination-next\"\n        @click=\"onNext()\"\n      >\n        <RuiIcon name=\"lu-chevron-right\" />\n      </RuiButton>\n      <RuiButton\n        v-if=\"!mobile\"\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Last page\"\n        data-id=\"table-pagination-last\"\n        @click=\"onLast()\"\n      >\n        <RuiIcon name=\"lu-chevrons-right\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiTablePagination.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","RuiMenuSelect","_isRef","_createBlock","RuiTextField","_withKeys","_createCommentVNode","_toDisplayString","RuiButton","_withCtx","RuiIcon"],"sources":["../../../src/components/tables/RuiTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiMenuSelect from '@/components/forms/select/RuiMenuSelect.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TablePaginationData, usePaginationNavigation } from '@/components/tables/use-pagination-navigation';\nimport { useTable } from '@/composables/defaults/table';\nimport { paginationStyles } from './table-pagination-styles';\n\nexport type { TablePaginationData };\n\nexport interface Props {\n  dense?: boolean;\n  disablePerPage?: boolean;\n  loading?: boolean;\n  /**\n   * Render a compact, touch-friendly layout: the sections spread across the\n   * full width and the first/last jump buttons are dropped to save space.\n   */\n  mobile?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced\n   * with a numeric input. Set to `1` to use the input whenever there is more\n   * than one page, or `0` to always use the dropdown. Defaults to `500`, since\n   * past that materialising the full range list stalls the main thread.\n   */\n  rangesThreshold?: number;\n}\n\nconst modelValue = defineModel<TablePaginationData>({ required: true });\n\nconst {\n  dense = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n  mobile = false,\n} = defineProps<Props>();\n\nconst ui = computed<ReturnType<typeof paginationStyles>>(() => paginationStyles({ dense, mobile }));\n\nconst tableDefaults = useTable();\n\nconst {\n  limits,\n  currentLimit,\n  pages,\n  ranges,\n  indicatorText,\n  currentRange,\n  useInputJump,\n  hasPrev,\n  hasNext,\n  onPrev,\n  onNext,\n  onFirst,\n  onLast,\n} = usePaginationNavigation(modelValue, tableDefaults, () => rangesThreshold);\n\n/**\n * With every row on one page the bar stays in place, as a summary, but the\n * page jump has nowhere to go, so it disables like the arrows beside it.\n */\nconst singlePage = computed<boolean>(() => get(pages) <= 1);\n\n/**\n * The rows-per-page select disables only once every option would fit all the\n * rows. Until then it stays live even on a single page: it is how a user\n * lowers a limit they raised past the row count.\n */\nconst everyLimitFits = computed<boolean>(() => {\n  const { total } = get(modelValue);\n  return get(singlePage) && get(limits).every(({ limit }) => limit >= total);\n});\n\nconst pageDraft = ref<string>(String(get(currentRange)));\n\nwatch(currentRange, (value) => {\n  set(pageDraft, String(value));\n});\n\nfunction commitPageInput(): void {\n  const parsed = Number.parseInt(get(pageDraft), 10);\n  const maxPage = get(pages);\n  if (!Number.isFinite(parsed) || maxPage === 0) {\n    set(pageDraft, String(get(currentRange)));\n    return;\n  }\n  const clamped = Math.min(Math.max(parsed, 1), maxPage);\n  if (clamped !== get(currentRange))\n    set(currentRange, clamped);\n  set(pageDraft, String(clamped));\n}\n\nconst limitId = useId();\nconst rangesId = useId();\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <div\n      :class=\"ui.limit()\"\n      data-id=\"table-pagination-limit-section\"\n    >\n      <label\n        :for=\"limitId\"\n        :class=\"ui.sectionLabel()\"\n      >\n        Rows per page:\n      </label>\n      <RuiMenuSelect\n        :id=\"limitId\"\n        v-model=\"currentLimit\"\n        :options=\"limits\"\n        :disabled=\"loading || disablePerPage || everyLimitFits\"\n        :class-names=\"{ label: ui.select() }\"\n        label=\"\"\n        name=\"limit\"\n        key-attr=\"limit\"\n        text-attr=\"limit\"\n        details=\"hidden\"\n        dense\n        data-id=\"table-pagination-limit\"\n      />\n    </div>\n    <div\n      :class=\"ui.ranges()\"\n      data-id=\"table-pagination-ranges-section\"\n    >\n      <label\n        :for=\"rangesId\"\n        :class=\"ui.sectionLabel({ class: useInputJump ? undefined : 'sr-only' })\"\n      >\n        Page\n      </label>\n      <RuiTextField\n        v-if=\"useInputJump\"\n        :id=\"rangesId\"\n        v-model=\"pageDraft\"\n        :disabled=\"loading || singlePage\"\n        :class=\"[ui.pageInput()]\"\n        type=\"number\"\n        min=\"1\"\n        :max=\"pages\"\n        inputmode=\"numeric\"\n        details=\"hidden\"\n        dense\n        data-id=\"table-pagination-ranges-input\"\n        @blur=\"commitPageInput()\"\n        @keydown.enter=\"commitPageInput()\"\n      />\n      <RuiMenuSelect\n        v-else-if=\"ranges.length > 0\"\n        :id=\"rangesId\"\n        v-model=\"currentRange\"\n        :options=\"ranges\"\n        :disabled=\"loading || singlePage\"\n        :class-names=\"{ label: ui.select() }\"\n        label=\"\"\n        name=\"ranges\"\n        key-attr=\"page\"\n        text-attr=\"text\"\n        details=\"hidden\"\n        dense\n        data-id=\"table-pagination-ranges\"\n      />\n      <span :class=\"ui.indicator()\">\n        {{ indicatorText }}\n      </span>\n    </div>\n    <div\n      :class=\"ui.navigation()\"\n      data-id=\"table-pagination-navigation\"\n    >\n      <RuiButton\n        v-if=\"!mobile\"\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"First page\"\n        data-id=\"table-pagination-first\"\n        @click=\"onFirst()\"\n      >\n        <RuiIcon name=\"lu-chevrons-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Previous page\"\n        data-id=\"table-pagination-prev\"\n        @click=\"onPrev()\"\n      >\n        <RuiIcon name=\"lu-chevron-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Next page\"\n        data-id=\"table-pagination-next\"\n        @click=\"onNext()\"\n      >\n        <RuiIcon name=\"lu-chevron-right\" />\n      </RuiButton>\n      <RuiButton\n        v-if=\"!mobile\"\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        aria-label=\"Last page\"\n        data-id=\"table-pagination-last\"\n        @click=\"onLast()\"\n      >\n        <RuiIcon name=\"lu-chevrons-right\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,aAAaA,SAAgC,SAAA,YAAmB;EAUtE,MAAM,KAAK,eAAoD,iBAAiB;GAAE,OAAI,QAAA;GAAG,QAAK,QAAA;EAAE,CAAC,CAAC;EAElG,MAAM,gBAAgB,SAAS;EAE/B,MAAM,EACJ,QACA,cACA,OACA,QACA,eACA,cACA,cACA,SACA,SACA,QACA,QACA,SACA,WACE,wBAAwB,YAAY,qBAAqB,QAAA,eAAe;;;;;EAM5E,MAAM,aAAa,eAAwB,IAAI,KAAK,KAAK,CAAC;;;;;;EAO1D,MAAM,iBAAiB,eAAwB;GAC7C,MAAM,EAAE,UAAU,IAAI,UAAU;GAChC,OAAO,IAAI,UAAU,KAAK,IAAI,MAAM,CAAC,CAAC,OAAO,EAAE,YAAY,SAAS,KAAK;EAC3E,CAAC;EAED,MAAM,YAAY,IAAY,OAAO,IAAI,YAAY,CAAC,CAAC;EAEvD,MAAM,eAAe,UAAU;GAC7B,IAAI,WAAW,OAAO,KAAK,CAAC;EAC9B,CAAC;EAED,SAAS,kBAAwB;GAC/B,MAAM,SAAS,OAAO,SAAS,IAAI,SAAS,GAAG,EAAE;GACjD,MAAM,UAAU,IAAI,KAAK;GACzB,IAAI,CAAC,OAAO,SAAS,MAAM,KAAK,YAAY,GAAG;IAC7C,IAAI,WAAW,OAAO,IAAI,YAAY,CAAC,CAAC;IACxC;GACF;GACA,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,QAAQ,CAAC,GAAG,OAAO;GACrD,IAAI,YAAY,IAAI,YAAY,GAC9B,IAAI,cAAc,OAAO;GAC3B,IAAI,WAAW,OAAO,OAAO,CAAC;EAChC;EAEA,MAAM,UAAU,MAAM;EACtB,MAAM,WAAW,MAAM;;GAIrB,OAAAC,UAAA,GAAAC,mBA0HM,OAAA,EA1HA,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA,EAAA,GAAA;IACrBC,mBAwBM,OAAA;KAvBH,OAAKF,eAAEC,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;KAChB,WAAQ;IAERC,GAAAA,CAAAA,mBAKQ,SAAA;KAJL,KAAKD,MAAA,OAAA;KACL,OAAKD,eAAEC,MAAA,EAAA,CAAE,CAAC,aAAY,CAAA;IACxB,GAAA,oBAED,IAAA,UAAA,GACAE,YAaEC,uBAAA;KAZC,IAAIH,MAAA,OAAA;KACI,YAAAA,MAAA,YAAA;KAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAAI,MAAA,YAAA,IAAA,aAAY,QAAA,SAAA;KACpB,SAASJ,MAAA,MAAA;KACT,UAAU,QAAA,WAAW,QAAA,kBAAkBA,MAAA,cAAA;KACvC,eAAW,EAAA,OAAWA,MAAA,EAAA,CAAE,CAAC,OAAM,EAAA;KAChC,OAAM;KACN,MAAK;KACL,YAAS;KACT,aAAU;KACV,SAAQ;KACR,OAAA;KACA,WAAQ;;;;;;;;IAGZC,mBA4CM,OAAA;KA3CH,OAAKF,eAAEC,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;KACjB,WAAQ;;KAERC,mBAKQ,SAAA;MAJL,KAAKD,MAAA,QAAA;MACL,OAAKD,eAAEC,MAAA,EAAA,CAAE,CAAC,aAAY,EAAA,OAAUA,MAAA,YAAA,IAAe,KAAA,IAAS,UAAA,CAAA,CAAA;KAC1D,GAAA,UAED,IAAA,UAAA;KAEQA,MAAA,YAAA,KADRH,UAAA,GAAAQ,YAeEC,sBAAA;;MAbC,IAAIN,MAAA,QAAA;MACI,YAAAA,MAAA,SAAA;MAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAAI,MAAA,SAAA,IAAA,UAAS,QAAA,SAAA;MACjB,UAAU,QAAA,WAAWJ,MAAA,UAAA;MACrB,OAAKD,eAAA,CAAGC,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA,CAAA;MACrB,MAAK;MACL,KAAI;MACH,KAAKA,MAAA,KAAA;MACN,WAAU;MACV,SAAQ;MACR,OAAA;MACA,WAAQ;MACP,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,gBAAe;MACrB,WAAO,OAAA,OAAA,OAAA,KAAAO,UAAA,WAAQ,gBAAe,GAAA,CAAA,OAAA,CAAA;;;;;;;KAGpBP,CAAAA,KAAAA,MAAA,MAAA,CAAM,CAAC,SAAM,KAD1BH,UAAA,GAAAQ,YAcEF,uBAAA;;MAZC,IAAIH,MAAA,QAAA;MACI,YAAAA,MAAA,YAAA;MAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAAI,MAAA,YAAA,IAAA,aAAY,QAAA,SAAA;MACpB,SAASJ,MAAA,MAAA;MACT,UAAU,QAAA,WAAWA,MAAA,UAAA;MACrB,eAAW,EAAA,OAAWA,MAAA,EAAA,CAAE,CAAC,OAAM,EAAA;MAChC,OAAM;MACN,MAAK;MACL,YAAS;MACT,aAAU;MACV,SAAQ;MACR,OAAA;MACA,WAAQ;;;;;;;;KAEVC,mBAEO,QAAA,EAFA,OAAKF,eAAEC,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA,EACrB,GAAAS,gBAAAT,MAAA,aAAA,CAAa,GAAA,CAAA;;IAGpBC,mBAkDM,OAAA;KAjDH,OAAKF,eAAEC,MAAA,EAAA,CAAE,CAAC,WAAU,CAAA;KACrB,WAAQ;;KAGC,CAAA,QAAA,UADTH,UAAA,GAAAQ,YAWYK,mBAAA;;MATT,MAAM,QAAA,QAAK,OAAU,KAAA;MACrB,UAAQ,CAAGV,MAAA,OAAA,KAAW,QAAA;MACvB,SAAQ;MACR,MAAA;MACA,cAAW;MACX,WAAQ;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,OAAA,CAAO,CAAA;;MAEf,SAAAW,cAAmC,CAAnCT,YAAmCU,iBAAA,EAA1B,MAAK,mBAAkB,CAAA,CAAA,CAAA;;;KAElCV,YAUYQ,mBAAA;MATT,MAAM,QAAA,QAAK,OAAU,KAAA;MACrB,UAAQ,CAAGV,MAAA,OAAA,KAAW,QAAA;MACvB,SAAQ;MACR,MAAA;MACA,cAAW;MACX,WAAQ;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,MAAA,CAAM,CAAA;;MAEd,SAAAW,cAAkC,CAAlCT,YAAkCU,iBAAA,EAAzB,MAAK,kBAAiB,CAAA,CAAA,CAAA;;;KAEjCV,YAUYQ,mBAAA;MATT,MAAM,QAAA,QAAK,OAAU,KAAA;MACrB,UAAQ,CAAGV,MAAA,OAAA,KAAW,QAAA;MACvB,SAAQ;MACR,MAAA;MACA,cAAW;MACX,WAAQ;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,MAAA,CAAM,CAAA;;MAEd,SAAAW,cAAmC,CAAnCT,YAAmCU,iBAAA,EAA1B,MAAK,mBAAkB,CAAA,CAAA,CAAA;;;KAGzB,CAAA,QAAA,UADTf,UAAA,GAAAQ,YAWYK,mBAAA;;MATT,MAAM,QAAA,QAAK,OAAU,KAAA;MACrB,UAAQ,CAAGV,MAAA,OAAA,KAAW,QAAA;MACvB,SAAQ;MACR,MAAA;MACA,cAAW;MACX,WAAQ;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAEA,MAAA,MAAA,CAAM,CAAA;;MAEd,SAAAW,cAAoC,CAApCT,YAAoCU,iBAAA,EAA3B,MAAK,oBAAmB,CAAA,CAAA,CAAA"}

package/dist/components/tables/table-empty-state-styles.d.ts

@@ -0,0 +1,43 @@
+export declare const emptyStyles: import("tailwind-variants").TVReturnType<{
+    compact: {
+        true: {
+            root: string;
+            title: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    subtitle: string;
+}, undefined, {
+    compact: {
+        true: {
+            root: string;
+            title: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    subtitle: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    compact: {
+        true: {
+            root: string;
+            title: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    subtitle: string;
+}>>;

package/dist/components/tables/table-empty-state-styles.js

@@ -0,0 +1,20 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/tables/table-empty-state-styles.ts
+var emptyStyles = tv({
+	slots: {
+		root: "flex flex-col items-center justify-center flex-1",
+		title: "text-body-1 font-semibold text-center text-current pb-0 mb-0",
+		subtitle: "text-body-2 text-center text-rui-text-secondary pb-0 mb-0"
+	},
+	variants: { compact: {
+		true: {
+			root: "gap-1 py-6",
+			title: "font-normal text-rui-text-secondary"
+		},
+		false: { root: "gap-3 min-h-56 my-4" }
+	} }
+});
+//#endregion
+export { emptyStyles };
+
+//# sourceMappingURL=table-empty-state-styles.js.map

package/dist/components/tables/table-empty-state-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-empty-state-styles.js","names":[],"sources":["../../../src/components/tables/table-empty-state-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const emptyStyles = tv({\n  slots: {\n    root: 'flex flex-col items-center justify-center flex-1',\n    title: 'text-body-1 font-semibold text-center text-current pb-0 mb-0',\n    subtitle: 'text-body-2 text-center text-rui-text-secondary pb-0 mb-0',\n  },\n  variants: {\n    compact: {\n      true: {\n        root: 'gap-1 py-6',\n        title: 'font-normal text-rui-text-secondary',\n      },\n      false: {\n        root: 'gap-3 min-h-56 my-4',\n      },\n    },\n  },\n});\n"],"mappings":";;AAEA,IAAa,cAAc,GAAG;CAC5B,OAAO;EACL,MAAM;EACN,OAAO;EACP,UAAU;CACZ;CACA,UAAU,EACR,SAAS;EACP,MAAM;GACJ,MAAM;GACN,OAAO;EACT;EACA,OAAO,EACL,MAAM,sBACR;CACF,EACF;AACF,CAAC"}

package/dist/components/tables/table-error-state-styles.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Centred and capped, like the loading and empty states beside it. Left to
+ * span the table, a wide one puts the reason hard left and the retry hard
+ * right, with the whole width between them.
+ */
+export declare const errorStyles: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            alert?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            alert?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    alert: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            alert?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    alert: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    root: string;
+    alert: string;
+}>>;

package/dist/components/tables/table-error-state-styles.js

@@ -0,0 +1,15 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/tables/table-error-state-styles.ts
+/**
+* Centred and capped, like the loading and empty states beside it. Left to
+* span the table, a wide one puts the reason hard left and the retry hard
+* right, with the whole width between them.
+*/
+var errorStyles = tv({ slots: {
+	root: "flex justify-center p-4",
+	alert: "w-full max-w-2xl"
+} });
+//#endregion
+export { errorStyles };
+
+//# sourceMappingURL=table-error-state-styles.js.map

package/dist/components/tables/table-error-state-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-error-state-styles.js","names":[],"sources":["../../../src/components/tables/table-error-state-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * Centred and capped, like the loading and empty states beside it. Left to\n * span the table, a wide one puts the reason hard left and the retry hard\n * right, with the whole width between them.\n */\nexport const errorStyles = tv({\n  slots: {\n    root: 'flex justify-center p-4',\n    alert: 'w-full max-w-2xl',\n  },\n});\n"],"mappings":";;;;;;;AAOA,IAAa,cAAc,GAAG,EAC5B,OAAO;CACL,MAAM;CACN,OAAO;AACT,EACF,CAAC"}

package/dist/components/tables/table-head-styles.d.ts

@@ -0,0 +1,91 @@
+export declare const tableHeadStyles: import("tailwind-variants").TVReturnType<{
+    position: {
+        default: {};
+        sticky: {
+            thead: string;
+        };
+        fixed: {
+            thead: string;
+            th: string;
+        };
+    };
+    dense: {
+        true: {
+            th: string;
+        };
+        false: {
+            th: string;
+        };
+    };
+}, {
+    thead: string;
+    checkbox: string;
+    th: string;
+    columnText: string;
+    sortButton: string;
+    sortIcon: string;
+    sortPosition: string;
+    loaderRow: string;
+    progress: string;
+    progressWrapper: string;
+}, undefined, {
+    position: {
+        default: {};
+        sticky: {
+            thead: string;
+        };
+        fixed: {
+            thead: string;
+            th: string;
+        };
+    };
+    dense: {
+        true: {
+            th: string;
+        };
+        false: {
+            th: string;
+        };
+    };
+}, {
+    thead: string;
+    checkbox: string;
+    th: string;
+    columnText: string;
+    sortButton: string;
+    sortIcon: string;
+    sortPosition: string;
+    loaderRow: string;
+    progress: string;
+    progressWrapper: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    position: {
+        default: {};
+        sticky: {
+            thead: string;
+        };
+        fixed: {
+            thead: string;
+            th: string;
+        };
+    };
+    dense: {
+        true: {
+            th: string;
+        };
+        false: {
+            th: string;
+        };
+    };
+}, {
+    thead: string;
+    checkbox: string;
+    th: string;
+    columnText: string;
+    sortButton: string;
+    sortIcon: string;
+    sortPosition: string;
+    loaderRow: string;
+    progress: string;
+    progressWrapper: string;
+}>>;

package/dist/components/tables/table-head-styles.js

@@ -0,0 +1,39 @@
+import { tv } from "../../utils/tv.js";
+import { NESTED_BAR } from "./data-table-styles.js";
+//#region src/components/tables/table-head-styles.ts
+var tableHeadStyles = tv({
+	slots: {
+		thead: "between:border-t between:border-b-0 between:border-rui-divider",
+		checkbox: `px-2 w-14.5 max-w-14.5 [&_label]:ml-0 bg-rui-surface-muted ${NESTED_BAR}`,
+		th: `[:where(&)]:px-4 bg-rui-surface-muted ${NESTED_BAR}`,
+		columnText: "text-rui-text-secondary font-medium text-[0.8125rem] leading-5",
+		sortButton: "inline-flex group/sort -mx-1.5",
+		sortIcon: "transition opacity-75 group-hover/sort:opacity-100 group-focus-visible/sort:opacity-100",
+		sortPosition: "text-[0.6875rem] leading-none font-semibold tabular-nums text-rui-text-secondary",
+		loaderRow: "border-none",
+		progress: "p-0 h-0",
+		progressWrapper: "h-0 -mt-1"
+	},
+	variants: {
+		position: {
+			default: {},
+			sticky: { thead: "top-0 z-rui-raised absolute" },
+			fixed: {
+				thead: "top-0 z-rui-raised fixed",
+				th: "border-b border-b-rui-divider"
+			}
+		},
+		dense: {
+			true: { th: "[:where(&)]:py-0.5 [:where(&)]:h-8" },
+			false: { th: "[:where(&)]:py-1 [:where(&)]:h-10" }
+		}
+	},
+	defaultVariants: {
+		position: "default",
+		dense: false
+	}
+});
+//#endregion
+export { tableHeadStyles };
+
+//# sourceMappingURL=table-head-styles.js.map

package/dist/components/tables/table-head-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-head-styles.js","names":[],"sources":["../../../src/components/tables/table-head-styles.ts"],"sourcesContent":["import { NESTED_BAR } from '@/components/tables/data-table-styles';\nimport { tv } from '@/utils/tv';\n\nexport const tableHeadStyles = tv({\n  slots: {\n    thead: 'between:border-t between:border-b-0 between:border-rui-divider',\n    checkbox: `px-2 w-14.5 max-w-14.5 [&_label]:ml-0 bg-rui-surface-muted ${NESTED_BAR}`,\n    // tinted like the pagination bar, framing the body; opaque, so rows scroll behind a stuck header\n    th: `[:where(&)]:px-4 bg-rui-surface-muted ${NESTED_BAR}`,\n    // labels read as secondary to the data; the sorted column's label steps up to primary\n    columnText: 'text-rui-text-secondary font-medium text-[0.8125rem] leading-5',\n    // the negative margin cancels the button's own padding so the label lines up with the cells below\n    sortButton: 'inline-flex group/sort -mx-1.5',\n    // a resting icon marks sortable columns for keyboard and touch users, at 3:1 on a nested table's darker header\n    sortIcon: 'transition opacity-75 group-hover/sort:opacity-100 group-focus-visible/sort:opacity-100',\n    // tucked against the arrow, closer than the button's gap\n    sortPosition: 'text-[0.6875rem] leading-none font-semibold tabular-nums text-rui-text-secondary',\n    /*\n     * The row is always there and only its bar comes and goes: a collapsed-border table gives even a\n     * zero-height row half a pixel, so adding the row on load pushed the body down.\n     */\n    loaderRow: 'border-none',\n    progress: 'p-0 h-0',\n    progressWrapper: 'h-0 -mt-1',\n  },\n  variants: {\n    position: {\n      default: {},\n      sticky: { thead: 'top-0 z-rui-raised absolute' },\n      fixed: {\n        thead: 'top-0 z-rui-raised fixed',\n        th: 'border-b border-b-rui-divider',\n      },\n    },\n    // a fixed height evens out rows with and without sort buttons; `:where()` lets a column's `class` win\n    dense: {\n      true: { th: '[:where(&)]:py-0.5 [:where(&)]:h-8' },\n      false: { th: '[:where(&)]:py-1 [:where(&)]:h-10' },\n    },\n  },\n  defaultVariants: {\n    position: 'default',\n    dense: false,\n  },\n});\n"],"mappings":";;;AAGA,IAAa,kBAAkB,GAAG;CAChC,OAAO;EACL,OAAO;EACP,UAAU,8DAA8D;EAExE,IAAI,yCAAyC;EAE7C,YAAY;EAEZ,YAAY;EAEZ,UAAU;EAEV,cAAc;EAKd,WAAW;EACX,UAAU;EACV,iBAAiB;CACnB;CACA,UAAU;EACR,UAAU;GACR,SAAS,CAAC;GACV,QAAQ,EAAE,OAAO,8BAA8B;GAC/C,OAAO;IACL,OAAO;IACP,IAAI;GACN;EACF;EAEA,OAAO;GACL,MAAM,EAAE,IAAI,qCAAqC;GACjD,OAAO,EAAE,IAAI,oCAAoC;EACnD;CACF;CACA,iBAAiB;EACf,UAAU;EACV,OAAO;CACT;AACF,CAAC"}

package/dist/components/tables/table-loading-state-styles.d.ts

@@ -0,0 +1,34 @@
+export declare const loadingStyles: import("tailwind-variants").TVReturnType<{
+    compact: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, undefined, {
+    compact: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    compact: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}>>;

package/dist/components/tables/table-loading-state-styles.js

@@ -0,0 +1,13 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/tables/table-loading-state-styles.ts
+var loadingStyles = tv({
+	slots: { root: "flex items-center justify-center" },
+	variants: { compact: {
+		true: { root: "py-6" },
+		false: { root: "min-h-56 py-8" }
+	} }
+});
+//#endregion
+export { loadingStyles };
+
+//# sourceMappingURL=table-loading-state-styles.js.map

package/dist/components/tables/table-loading-state-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-loading-state-styles.js","names":[],"sources":["../../../src/components/tables/table-loading-state-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const loadingStyles = tv({\n  slots: {\n    root: 'flex items-center justify-center',\n  },\n  variants: {\n    compact: {\n      true: { root: 'py-6' },\n      false: { root: 'min-h-56 py-8' },\n    },\n  },\n});\n"],"mappings":";;AAEA,IAAa,gBAAgB,GAAG;CAC9B,OAAO,EACL,MAAM,mCACR;CACA,UAAU,EACR,SAAS;EACP,MAAM,EAAE,MAAM,OAAO;EACrB,OAAO,EAAE,MAAM,gBAAgB;CACjC,EACF;AACF,CAAC"}

package/dist/components/tables/table-pagination-styles.d.ts

@@ -0,0 +1,82 @@
+export declare const paginationStyles: import("tailwind-variants").TVReturnType<{
+    dense: {
+        true: {
+            select: string;
+            pageInput: string;
+        };
+        false: {
+            select: string;
+            pageInput: string;
+        };
+    };
+    mobile: {
+        true: {
+            wrapper: string;
+            ranges: string;
+            sectionLabel: string;
+        };
+    };
+}, {
+    wrapper: string;
+    limit: string;
+    ranges: string;
+    pageInput: string;
+    sectionLabel: string;
+    select: string;
+    indicator: string;
+    navigation: string;
+}, undefined, {
+    dense: {
+        true: {
+            select: string;
+            pageInput: string;
+        };
+        false: {
+            select: string;
+            pageInput: string;
+        };
+    };
+    mobile: {
+        true: {
+            wrapper: string;
+            ranges: string;
+            sectionLabel: string;
+        };
+    };
+}, {
+    wrapper: string;
+    limit: string;
+    ranges: string;
+    pageInput: string;
+    sectionLabel: string;
+    select: string;
+    indicator: string;
+    navigation: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    dense: {
+        true: {
+            select: string;
+            pageInput: string;
+        };
+        false: {
+            select: string;
+            pageInput: string;
+        };
+    };
+    mobile: {
+        true: {
+            wrapper: string;
+            ranges: string;
+            sectionLabel: string;
+        };
+    };
+}, {
+    wrapper: string;
+    limit: string;
+    ranges: string;
+    pageInput: string;
+    sectionLabel: string;
+    select: string;
+    indicator: string;
+    navigation: string;
+}>>;

package/dist/components/tables/table-pagination-styles.js

@@ -0,0 +1,35 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/tables/table-pagination-styles.ts
+var paginationStyles = tv({
+	slots: {
+		wrapper: "relative flex flex-wrap items-center justify-end gap-x-4 gap-y-0",
+		limit: "flex items-center between:ml-2 between:mr-0 text-caption",
+		ranges: "flex items-center between:ml-2 between:mr-0 text-caption pr-2",
+		pageInput: "w-14 [&_input]:text-center [&_input]:px-1! [&_input]:text-xs! [&_input]:leading-5!",
+		sectionLabel: "text-rui-text-secondary whitespace-nowrap py-3",
+		select: "text-xs! pl-3!",
+		indicator: "text-rui-text text-caption whitespace-nowrap",
+		navigation: "flex items-center"
+	},
+	variants: {
+		dense: {
+			true: {
+				select: "min-h-7!",
+				pageInput: "[&_input]:py-1!"
+			},
+			false: {
+				select: "min-h-8!",
+				pageInput: "[&_input]:py-1.5!"
+			}
+		},
+		mobile: { true: {
+			wrapper: "flex-nowrap justify-between gap-x-2 gap-y-0",
+			ranges: "pr-0",
+			sectionLabel: "sr-only"
+		} }
+	}
+});
+//#endregion
+export { paginationStyles };
+
+//# sourceMappingURL=table-pagination-styles.js.map

package/dist/components/tables/table-pagination-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-pagination-styles.js","names":[],"sources":["../../../src/components/tables/table-pagination-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const paginationStyles = tv({\n  slots: {\n    wrapper: 'relative flex flex-wrap items-center justify-end gap-x-4 gap-y-0',\n    limit: 'flex items-center between:ml-2 between:mr-0 text-caption',\n    ranges: 'flex items-center between:ml-2 between:mr-0 text-caption pr-2',\n    pageInput: 'w-14 [&_input]:text-center [&_input]:px-1! [&_input]:text-xs! [&_input]:leading-5!',\n    sectionLabel: 'text-rui-text-secondary whitespace-nowrap py-3',\n    select: 'text-xs! pl-3!',\n    indicator: 'text-rui-text text-caption whitespace-nowrap',\n    navigation: 'flex items-center',\n  },\n  variants: {\n    // the selects match the icon buttons, 28px with `size=\"sm\"` and 32px without\n    dense: {\n      true: {\n        select: 'min-h-7!',\n        pageInput: '[&_input]:py-1!',\n      },\n      false: {\n        select: 'min-h-8!',\n        pageInput: '[&_input]:py-1.5!',\n      },\n    },\n    mobile: {\n      true: {\n        wrapper: 'flex-nowrap justify-between gap-x-2 gap-y-0',\n        ranges: 'pr-0',\n        // sr-only rather than hidden: a display:none label names nothing\n        sectionLabel: 'sr-only',\n      },\n    },\n  },\n});\n"],"mappings":";;AAEA,IAAa,mBAAmB,GAAG;CACjC,OAAO;EACL,SAAS;EACT,OAAO;EACP,QAAQ;EACR,WAAW;EACX,cAAc;EACd,QAAQ;EACR,WAAW;EACX,YAAY;CACd;CACA,UAAU;EAER,OAAO;GACL,MAAM;IACJ,QAAQ;IACR,WAAW;GACb;GACA,OAAO;IACL,QAAQ;IACR,WAAW;GACb;EACF;EACA,QAAQ,EACN,MAAM;GACJ,SAAS;GACT,QAAQ;GAER,cAAc;EAChB,EACF;CACF;AACF,CAAC"}

package/dist/components/tables/table-styles.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Every rule that lands on a `th` or a `td` wraps the `&` in `:where()`, which
+ * compiles to `:where(.generated-class) th` and so carries the specificity of
+ * the element alone. A consumer writing `class="p-0"` on one cell is a single
+ * class, which outranks that, so a one-off override needs no `!important` the
+ * way a plain `[&_th]:` rule would.
+ */
+export declare const tableStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {};
+        outlined: {
+            root: string;
+        };
+    };
+    dense: {
+        true: {
+            table: string;
+        };
+        false: {
+            table: string;
+        };
+    };
+}, {
+    root: string;
+    table: string[];
+}, undefined, {
+    variant: {
+        default: {};
+        outlined: {
+            root: string;
+        };
+    };
+    dense: {
+        true: {
+            table: string;
+        };
+        false: {
+            table: string;
+        };
+    };
+}, {
+    root: string;
+    table: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: {};
+        outlined: {
+            root: string;
+        };
+    };
+    dense: {
+        true: {
+            table: string;
+        };
+        false: {
+            table: string;
+        };
+    };
+}, {
+    root: string;
+    table: string[];
+}>>;

package/dist/components/tables/table-styles.js

@@ -0,0 +1,37 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/tables/table-styles.ts
+/**
+* Every rule that lands on a `th` or a `td` wraps the `&` in `:where()`, which
+* compiles to `:where(.generated-class) th` and so carries the specificity of
+* the element alone. A consumer writing `class="p-0"` on one cell is a single
+* class, which outranks that, so a one-off override needs no `!important` the
+* way a plain `[&_th]:` rule would.
+*/
+var tableStyles = tv({
+	slots: {
+		root: "w-full overflow-y-auto",
+		table: [
+			"w-full text-rui-text",
+			"[:where(&)_thead]:border-b [:where(&)_thead]:border-rui-divider",
+			"[:where(&)_thead_th]:font-medium [:where(&)_thead_th]:text-rui-text-secondary [:where(&)_thead_th]:text-start",
+			"[:where(&)_thead_th]:text-[0.8125rem] [:where(&)_thead_th]:leading-5",
+			"[:where(&)_th]:px-4 [:where(&)_td]:px-4 [:where(&)_td]:text-body-2",
+			"[:where(&)_tbody>tr+tr]:border-t [:where(&)_tbody>tr+tr]:border-rui-divider",
+			"[:where(&)_tbody_td]:border-b-0"
+		]
+	},
+	variants: {
+		variant: {
+			default: {},
+			outlined: { root: "border rounded-rui-panel border-rui-divider" }
+		},
+		dense: {
+			true: { table: "[:where(&)_th]:py-0.5 [:where(&)_th]:h-8 [:where(&)_td]:py-1 [:where(&)_td]:h-9" },
+			false: { table: "[:where(&)_th]:py-1 [:where(&)_th]:h-10 [:where(&)_td]:py-1 [:where(&)_td]:h-11" }
+		}
+	}
+});
+//#endregion
+export { tableStyles };
+
+//# sourceMappingURL=table-styles.js.map

package/dist/components/tables/table-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-styles.js","names":[],"sources":["../../../src/components/tables/table-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * Every rule that lands on a `th` or a `td` wraps the `&` in `:where()`, which\n * compiles to `:where(.generated-class) th` and so carries the specificity of\n * the element alone. A consumer writing `class=\"p-0\"` on one cell is a single\n * class, which outranks that, so a one-off override needs no `!important` the\n * way a plain `[&_th]:` rule would.\n */\nexport const tableStyles = tv({\n  slots: {\n    root: 'w-full overflow-y-auto',\n    // matches RuiDataTable: text color, 13px header labels, body text, cell padding and row dividers\n    table: [\n      'w-full text-rui-text',\n      '[:where(&)_thead]:border-b [:where(&)_thead]:border-rui-divider',\n      '[:where(&)_thead_th]:font-medium [:where(&)_thead_th]:text-rui-text-secondary [:where(&)_thead_th]:text-start',\n      '[:where(&)_thead_th]:text-[0.8125rem] [:where(&)_thead_th]:leading-5',\n      '[:where(&)_th]:px-4 [:where(&)_td]:px-4 [:where(&)_td]:text-body-2',\n      '[:where(&)_tbody>tr+tr]:border-t [:where(&)_tbody>tr+tr]:border-rui-divider',\n      '[:where(&)_tbody_td]:border-b-0',\n    ],\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {\n        root: 'border rounded-rui-panel border-rui-divider',\n      },\n    },\n    // the data table's heights: a 40px header over 44px rows, or 32px over 36px when dense\n    dense: {\n      true: {\n        table: '[:where(&)_th]:py-0.5 [:where(&)_th]:h-8 [:where(&)_td]:py-1 [:where(&)_td]:h-9',\n      },\n      false: {\n        table: '[:where(&)_th]:py-1 [:where(&)_th]:h-10 [:where(&)_td]:py-1 [:where(&)_td]:h-11',\n      },\n    },\n  },\n});\n"],"mappings":";;;;;;;;;AASA,IAAa,cAAc,GAAG;CAC5B,OAAO;EACL,MAAM;EAEN,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF;CACA,UAAU;EACR,SAAS;GACP,SAAS,CAAC;GACV,UAAU,EACR,MAAM,8CACR;EACF;EAEA,OAAO;GACL,MAAM,EACJ,OAAO,kFACT;GACA,OAAO,EACL,OAAO,kFACT;EACF;CACF;AACF,CAAC"}

package/dist/components/tabs/tab/RuiTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTab.js","names":["_sfc_main"],"sources":["../../../../src/components/tabs/tab/RuiTab.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RouteLocationRaw } from 'vue-router';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { VueClassValue } from '@/types/class-value';\nimport { TabAlignment, TabIndicatorPosition, TabLayout, TabVariant } from '@/components/tabs/tab-props';\nimport { useTabLink } from '@/components/tabs/tab/use-tab-link';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiTabClassNames {\n  root?: VueClassValue;\n  active?: VueClassValue;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  disabled?: boolean;\n  grow?: boolean;\n  value?: number | string;\n  active?: boolean;\n  classNames?: RuiTabClassNames;\n  link?: boolean;\n  target?: string;\n  to?: RouteLocationRaw;\n  exact?: boolean;\n  vertical?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n  variant?: TabVariant;\n}\n\ndefineOptions({\n  name: 'RuiTab',\n  inheritAttrs: false,\n});\n\nconst {\n  color,\n  disabled = false,\n  grow = false,\n  value = useId(),\n  active = false,\n  classNames,\n  link = false,\n  to = '',\n  target = '_self',\n  exact = false,\n  vertical = false,\n  align = TabAlignment.center,\n  indicatorPosition = TabIndicatorPosition.end,\n  variant = TabVariant.underline,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  click: [value: string | number];\n}>();\n\nconst slots = defineSlots<{\n  default?: (props?: object) => any;\n  prepend?: (props?: object) => any;\n  append?: (props?: object) => any;\n}>();\n\n/**\n * A tab is a plain button or link: RuiTabs draws the active indicator, so a tab\n * only sets its label color, and its hover fill. On the underline bar the fill\n * hugs the label rather than the 40px cell, so the bar stays calm.\n */\nconst tab = tv({\n  slots: {\n    root: [\n      'group relative inline-flex shrink-0 items-center whitespace-nowrap rounded-rui-control',\n      'text-sm font-medium text-rui-text-secondary transition-colors duration-150 [--rui-icon-size:1rem]',\n      // inset, since the scrolling bar would clip a ring drawn outside the tab\n      'outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    ].join(' '),\n    content: 'inline-flex items-center gap-2 rounded-rui-control transition-colors duration-150',\n  },\n  variants: {\n    variant: {\n      [TabVariant.underline]: { root: 'px-1', content: 'h-8 px-2' },\n      // above the sliding pill, which RuiTabs renders behind the tabs\n      [TabVariant.segmented]: { root: 'z-1 h-8 px-3' },\n    },\n    layout: {\n      [TabLayout.horizontal]: {},\n      [TabLayout.vertical]: { root: 'w-full' },\n    },\n    align: {\n      start: { root: 'justify-start text-left rtl:justify-end rtl:text-right' },\n      center: { root: 'justify-center text-center' },\n      end: { root: 'justify-end text-right rtl:justify-start rtl:text-left' },\n    },\n    grow: {\n      true: { root: 'grow' },\n    },\n    active: {\n      true: { root: 'text-rui-text' },\n      false: {},\n    },\n    disabled: {\n      true: { root: 'cursor-not-allowed text-rui-text-disabled' },\n      false: { root: 'cursor-pointer hover:text-rui-text' },\n    },\n  },\n  compoundVariants: [\n    { variant: TabVariant.underline, layout: TabLayout.horizontal, class: { root: 'h-10' } },\n    { variant: TabVariant.underline, layout: TabLayout.horizontal, disabled: false, class: { content: 'group-hover:bg-rui-hover' } },\n    // a vertical list fills the whole row on hover and keeps that fill on the selected row\n    { variant: TabVariant.underline, layout: TabLayout.vertical, class: { root: 'min-h-9 px-3', content: 'h-auto px-0 py-2' } },\n    { variant: TabVariant.underline, layout: TabLayout.vertical, disabled: false, class: { root: 'hover:bg-rui-hover' } },\n    { variant: TabVariant.underline, layout: TabLayout.vertical, active: true, class: { root: 'bg-rui-hover' } },\n  ],\n  defaultVariants: {\n    variant: TabVariant.underline,\n    layout: TabLayout.horizontal,\n    align: 'center',\n    active: false,\n    disabled: false,\n  },\n});\n\nconst { isRouteActive, href: linkHref, navigate, isLink } = useTabLink({\n  link: () => link,\n  to: () => to,\n  exact: () => exact,\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst isSelf = computed<boolean>(() => target === '_self');\nconst isEffectivelyActive = computed<boolean>(() => active || get(isRouteActive));\nconst ui = computed<ReturnType<typeof tab>>(() => tab({\n  variant,\n  layout: get(layout),\n  align,\n  grow,\n  disabled,\n  active: get(isEffectivelyActive),\n}));\n\nfunction onClick(event: MouseEvent): void {\n  if (disabled) {\n    event.preventDefault();\n    return;\n  }\n\n  emit('click', value);\n  if (navigate && get(isSelf))\n    navigate(event);\n}\n</script>\n\n<template>\n  <component\n    :is=\"isLink ? 'a' : 'button'\"\n    :type=\"isLink ? undefined : 'button'\"\n    :class=\"[\n      ui.root({ class: cn(classNames?.root) }),\n      isEffectivelyActive && classNames?.active,\n    ]\"\n    :data-active-tab=\"isEffectivelyActive || undefined\"\n    :data-align=\"align\"\n    :data-indicator-position=\"indicatorPosition\"\n    :data-vertical=\"vertical || undefined\"\n    :data-variant=\"variant\"\n    :data-color=\"isEffectivelyActive ? color : undefined\"\n    :disabled=\"isLink ? undefined : disabled\"\n    :aria-disabled=\"isLink && disabled ? 'true' : undefined\"\n    :href=\"isLink && !isSelf && !disabled ? linkHref : undefined\"\n    :target=\"isLink ? target : undefined\"\n    role=\"tab\"\n    :aria-selected=\"isEffectivelyActive\"\n    :tabindex=\"isEffectivelyActive && !disabled ? 0 : -1\"\n    v-bind=\"$attrs\"\n    @click=\"onClick($event)\"\n  >\n    <span :class=\"ui.content()\">\n      <slot\n        v-if=\"slots.prepend\"\n        name=\"prepend\"\n      />\n      <slot />\n      <slot\n        v-if=\"slots.append\"\n        name=\"append\"\n      />\n    </span>\n  </component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTab.js","names":["_sfc_main"],"sources":["../../../../src/components/tabs/tab/RuiTab.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RouteLocationRaw } from 'vue-router';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { VueClassValue } from '@/types/class-value';\nimport { TabAlignment, TabIndicatorPosition, TabLayout, TabVariant } from '@/components/tabs/tab-props';\nimport { useTabLink } from '@/components/tabs/tab/use-tab-link';\nimport { cn } from '@/utils/tv';\nimport { tabStyles } from './tab-styles';\n\nexport interface RuiTabClassNames {\n  root?: VueClassValue;\n  active?: VueClassValue;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  disabled?: boolean;\n  grow?: boolean;\n  value?: number | string;\n  active?: boolean;\n  classNames?: RuiTabClassNames;\n  link?: boolean;\n  target?: string;\n  to?: RouteLocationRaw;\n  exact?: boolean;\n  vertical?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n  variant?: TabVariant;\n}\n\ndefineOptions({\n  name: 'RuiTab',\n  inheritAttrs: false,\n});\n\nconst {\n  color,\n  disabled = false,\n  grow = false,\n  value = useId(),\n  active = false,\n  classNames,\n  link = false,\n  to = '',\n  target = '_self',\n  exact = false,\n  vertical = false,\n  align = TabAlignment.center,\n  indicatorPosition = TabIndicatorPosition.end,\n  variant = TabVariant.underline,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  click: [value: string | number];\n}>();\n\nconst slots = defineSlots<{\n  default?: (props?: object) => any;\n  prepend?: (props?: object) => any;\n  append?: (props?: object) => any;\n}>();\n\nconst { isRouteActive, href: linkHref, navigate, isLink } = useTabLink({\n  link: () => link,\n  to: () => to,\n  exact: () => exact,\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst isSelf = computed<boolean>(() => target === '_self');\nconst isEffectivelyActive = computed<boolean>(() => active || get(isRouteActive));\nconst ui = computed<ReturnType<typeof tabStyles>>(() => tabStyles({\n  variant,\n  layout: get(layout),\n  align,\n  grow,\n  disabled,\n  active: get(isEffectivelyActive),\n}));\n\nfunction onClick(event: MouseEvent): void {\n  if (disabled) {\n    event.preventDefault();\n    return;\n  }\n\n  emit('click', value);\n  if (navigate && get(isSelf))\n    navigate(event);\n}\n</script>\n\n<template>\n  <component\n    :is=\"isLink ? 'a' : 'button'\"\n    :type=\"isLink ? undefined : 'button'\"\n    :class=\"[\n      ui.root({ class: cn(classNames?.root) }),\n      isEffectivelyActive && classNames?.active,\n    ]\"\n    :data-active-tab=\"isEffectivelyActive || undefined\"\n    :data-align=\"align\"\n    :data-indicator-position=\"indicatorPosition\"\n    :data-vertical=\"vertical || undefined\"\n    :data-variant=\"variant\"\n    :data-color=\"isEffectivelyActive ? color : undefined\"\n    :disabled=\"isLink ? undefined : disabled\"\n    :aria-disabled=\"isLink && disabled ? 'true' : undefined\"\n    :href=\"isLink && !isSelf && !disabled ? linkHref : undefined\"\n    :target=\"isLink ? target : undefined\"\n    role=\"tab\"\n    :aria-selected=\"isEffectivelyActive\"\n    :tabindex=\"isEffectivelyActive && !disabled ? 0 : -1\"\n    v-bind=\"$attrs\"\n    @click=\"onClick($event)\"\n  >\n    <span :class=\"ui.content()\">\n      <slot\n        v-if=\"slots.prepend\"\n        name=\"prepend\"\n      />\n      <slot />\n      <slot\n        v-if=\"slots.append\"\n        name=\"append\"\n      />\n    </span>\n  </component>\n</template>\n"],"mappings":""}