@lobehub/ui 5.61.0 → 5.62.0

package/es/base-ui/ProTable/style.mjs

@@ -0,0 +1,373 @@
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/ProTable/style.ts
+const PRO_PREFIX_CLS = "lobe-pro-table";
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	alert: css`
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+
+    min-height: 40px;
+    margin-block-end: 12px;
+    padding-block: 6px;
+    padding-inline: 12px;
+    border-radius: ${cssVar.borderRadius};
+
+    font-size: ${cssVar.fontSize};
+    color: ${cssVar.colorText};
+
+    background: color-mix(in srgb, ${cssVar.colorPrimary} 8%, transparent);
+  `,
+	alertInfo: css`
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    gap: 12px;
+    align-items: center;
+
+    min-width: 0;
+  `,
+	alertOption: css`
+    display: flex;
+    flex: none;
+    gap: 8px;
+    align-items: center;
+  `,
+	part: css`
+    min-width: 0;
+  `,
+	partBordered: css`
+    padding: 16px;
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: ${cssVar.borderRadiusLG};
+  `,
+	code: css`
+    padding-block: 1px;
+    padding-inline: 6px;
+    border-radius: ${cssVar.borderRadiusSM};
+
+    font-family: ${cssVar.fontFamilyCode};
+    font-size: 0.9em;
+
+    background: ${cssVar.colorFillTertiary};
+  `,
+	copyable: css`
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+    max-width: 100%;
+  `,
+	copyableText: css`
+    overflow: hidden;
+    min-width: 0;
+    text-overflow: ellipsis;
+  `,
+	density: css`
+    display: flex;
+    flex-direction: column;
+    min-width: 140px;
+    padding: 4px;
+  `,
+	densityItem: css`
+    cursor: pointer;
+
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: space-between;
+
+    height: 32px;
+    padding-inline: 8px;
+    border: none;
+    border-radius: ${cssVar.borderRadiusSM};
+
+    font: inherit;
+    color: ${cssVar.colorText};
+    text-align: start;
+
+    background: transparent;
+
+    &:hover,
+    &:focus-visible {
+      background: ${cssVar.colorFillTertiary};
+      outline: none;
+    }
+
+    &[aria-checked='true'] {
+      font-weight: 500;
+    }
+  `,
+	enumList: css`
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  `,
+	indexBorder: css`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    min-width: 18px;
+    height: 18px;
+    padding-inline: 4px;
+    border-radius: 9px;
+
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    color: ${cssVar.colorText};
+
+    background: ${cssVar.colorFillSecondary};
+
+    &[data-top] {
+      color: ${cssVar.colorTextLightSolid};
+      background: ${cssVar.colorPrimary};
+    }
+  `,
+	lightFilter: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+  `,
+	lightFilterItem: css`
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    width: 160px;
+
+    & > * {
+      width: 100%;
+    }
+  `,
+	lightFilterLabel: css`
+    font-size: ${cssVar.fontSizeSM};
+    color: ${cssVar.colorTextSecondary};
+    white-space: nowrap;
+  `,
+	optionCell: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    align-items: center;
+    justify-content: flex-end;
+  `,
+	root: css`
+    --lobe-pro-table-status-default: ${cssVar.colorTextQuaternary};
+    --lobe-pro-table-status-error: ${cssVar.colorError};
+    --lobe-pro-table-status-processing: ${cssVar.colorPrimary};
+    --lobe-pro-table-status-success: ${cssVar.colorSuccess};
+    --lobe-pro-table-status-warning: ${cssVar.colorWarning};
+
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-width: 0;
+
+    &[data-fullscreen] {
+      overflow: auto;
+      padding: 16px;
+      background: ${cssVar.colorBgLayout};
+    }
+  `,
+	search: css`
+    display: grid;
+    gap: 16px 24px;
+    align-items: center;
+  `,
+	searchActions: css`
+    display: flex;
+    grid-column-end: -1;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+    justify-content: flex-end;
+  `,
+	searchField: css`
+    min-width: 0;
+
+    /* The base-ui Form.Field row: no list padding, fixed-width label column, full-width control. */
+    & > div {
+      gap: 8px;
+      padding-block: 0;
+    }
+
+    & > div > label {
+      overflow: hidden;
+      flex: none;
+
+      width: var(--lobe-pro-table-label-width, auto);
+
+      color: ${cssVar.colorTextSecondary};
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &[data-layout='horizontal'] > div > label {
+      text-align: end;
+    }
+
+    & > div > div {
+      flex: 1;
+      align-items: stretch;
+      min-width: 0;
+    }
+  `,
+	searchFieldControl: css`
+    flex: 1;
+    min-width: 0;
+  `,
+	searchLabel: css`
+    overflow: hidden;
+    flex: none;
+
+    color: ${cssVar.colorTextSecondary};
+    text-align: end;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &[data-layout='vertical'] {
+      text-align: start;
+    }
+  `,
+	setting: css`
+    display: flex;
+    flex-direction: column;
+
+    width: 260px;
+    max-height: 420px;
+    padding-block: 4px;
+  `,
+	settingGroupTitle: css`
+    padding-block: 6px 2px;
+    padding-inline: 12px;
+    font-size: ${cssVar.fontSizeSM};
+    color: ${cssVar.colorTextDescription};
+  `,
+	settingHeader: css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-block: 4px 8px;
+    padding-inline: 12px;
+    border-block-end: 1px solid ${cssVar.colorSplit};
+  `,
+	settingItem: css`
+    display: flex;
+    gap: 4px;
+    align-items: center;
+
+    min-height: 32px;
+    padding-inline: 12px 8px;
+
+    &:hover {
+      background: ${cssVar.colorFillTertiary};
+    }
+
+    &:hover [data-setting-actions] {
+      opacity: 1;
+    }
+  `,
+	settingItemActions: css`
+    display: flex;
+    flex: none;
+    gap: 2px;
+    opacity: 0;
+
+    &:focus-within {
+      opacity: 1;
+    }
+  `,
+	settingItemTitle: css`
+    overflow: hidden;
+    flex: 1;
+
+    min-width: 0;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+	settingList: css`
+    overflow: auto;
+    flex: 1;
+    padding-block: 4px;
+  `,
+	status: css`
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+  `,
+	statusDot: css`
+    flex: none;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+  `,
+	statusProcessing: css`
+    @keyframes lobe-pro-table-status-pulse {
+      0% {
+        box-shadow: 0 0 0 0 color-mix(in srgb, currentcolor 40%, transparent);
+      }
+
+      100% {
+        box-shadow: 0 0 0 4px transparent;
+      }
+    }
+
+    color: ${cssVar.colorPrimary};
+    animation: lobe-pro-table-status-pulse 1.2s ease-out infinite;
+  `,
+	title: css`
+    display: flex;
+    flex: none;
+    gap: 4px;
+    align-items: center;
+
+    min-width: 0;
+
+    font-size: ${cssVar.fontSizeLG};
+    font-weight: 600;
+    color: ${cssVar.colorText};
+  `,
+	titleSub: css`
+    font-size: ${cssVar.fontSize};
+    font-weight: normal;
+    color: ${cssVar.colorTextDescription};
+  `,
+	titleTooltip: css`
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+  `,
+	toolbar: css`
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+
+    margin-block-end: 16px;
+  `,
+	toolbarActions: css`
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+    justify-content: flex-end;
+
+    min-width: 0;
+    margin-inline-start: auto;
+  `,
+	toolbarOptions: css`
+    display: flex;
+    flex: none;
+    gap: 2px;
+    align-items: center;
+  `
+}));
+//#endregion
+export { PRO_PREFIX_CLS, styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/ProTable/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ProTable/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const PRO_PREFIX_CLS = 'lobe-pro-table';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  alert: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    min-height: 40px;\n    margin-block-end: 12px;\n    padding-block: 6px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: ${cssVar.fontSize};\n    color: ${cssVar.colorText};\n\n    background: color-mix(in srgb, ${cssVar.colorPrimary} 8%, transparent);\n  `,\n  alertInfo: css`\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: 12px;\n    align-items: center;\n\n    min-width: 0;\n  `,\n  alertOption: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n  `,\n  part: css`\n    min-width: 0;\n  `,\n  partBordered: css`\n    padding: 16px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n  code: css`\n    padding-block: 1px;\n    padding-inline: 6px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-family: ${cssVar.fontFamilyCode};\n    font-size: 0.9em;\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  copyable: css`\n    display: inline-flex;\n    gap: 4px;\n    align-items: center;\n    max-width: 100%;\n  `,\n  copyableText: css`\n    overflow: hidden;\n    min-width: 0;\n    text-overflow: ellipsis;\n  `,\n  density: css`\n    display: flex;\n    flex-direction: column;\n    min-width: 140px;\n    padding: 4px;\n  `,\n  densityItem: css`\n    cursor: pointer;\n\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    height: 32px;\n    padding-inline: 8px;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font: inherit;\n    color: ${cssVar.colorText};\n    text-align: start;\n\n    background: transparent;\n\n    &:hover,\n    &:focus-visible {\n      background: ${cssVar.colorFillTertiary};\n      outline: none;\n    }\n\n    &[aria-checked='true'] {\n      font-weight: 500;\n    }\n  `,\n  enumList: css`\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 8px;\n  `,\n  indexBorder: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    min-width: 18px;\n    height: 18px;\n    padding-inline: 4px;\n    border-radius: 9px;\n\n    font-size: 12px;\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillSecondary};\n\n    &[data-top] {\n      color: ${cssVar.colorTextLightSolid};\n      background: ${cssVar.colorPrimary};\n    }\n  `,\n  lightFilter: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n  `,\n  lightFilterItem: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    width: 160px;\n\n    & > * {\n      width: 100%;\n    }\n  `,\n  lightFilterLabel: css`\n    font-size: ${cssVar.fontSizeSM};\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n  `,\n  optionCell: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n    justify-content: flex-end;\n  `,\n  root: css`\n    --lobe-pro-table-status-default: ${cssVar.colorTextQuaternary};\n    --lobe-pro-table-status-error: ${cssVar.colorError};\n    --lobe-pro-table-status-processing: ${cssVar.colorPrimary};\n    --lobe-pro-table-status-success: ${cssVar.colorSuccess};\n    --lobe-pro-table-status-warning: ${cssVar.colorWarning};\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    min-width: 0;\n\n    &[data-fullscreen] {\n      overflow: auto;\n      padding: 16px;\n      background: ${cssVar.colorBgLayout};\n    }\n  `,\n  search: css`\n    display: grid;\n    gap: 16px 24px;\n    align-items: center;\n  `,\n  searchActions: css`\n    display: flex;\n    grid-column-end: -1;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n    justify-content: flex-end;\n  `,\n  searchField: css`\n    min-width: 0;\n\n    /* The base-ui Form.Field row: no list padding, fixed-width label column, full-width control. */\n    & > div {\n      gap: 8px;\n      padding-block: 0;\n    }\n\n    & > div > label {\n      overflow: hidden;\n      flex: none;\n\n      width: var(--lobe-pro-table-label-width, auto);\n\n      color: ${cssVar.colorTextSecondary};\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    &[data-layout='horizontal'] > div > label {\n      text-align: end;\n    }\n\n    & > div > div {\n      flex: 1;\n      align-items: stretch;\n      min-width: 0;\n    }\n  `,\n  searchFieldControl: css`\n    flex: 1;\n    min-width: 0;\n  `,\n  searchLabel: css`\n    overflow: hidden;\n    flex: none;\n\n    color: ${cssVar.colorTextSecondary};\n    text-align: end;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    &[data-layout='vertical'] {\n      text-align: start;\n    }\n  `,\n  setting: css`\n    display: flex;\n    flex-direction: column;\n\n    width: 260px;\n    max-height: 420px;\n    padding-block: 4px;\n  `,\n  settingGroupTitle: css`\n    padding-block: 6px 2px;\n    padding-inline: 12px;\n    font-size: ${cssVar.fontSizeSM};\n    color: ${cssVar.colorTextDescription};\n  `,\n  settingHeader: css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    padding-block: 4px 8px;\n    padding-inline: 12px;\n    border-block-end: 1px solid ${cssVar.colorSplit};\n  `,\n  settingItem: css`\n    display: flex;\n    gap: 4px;\n    align-items: center;\n\n    min-height: 32px;\n    padding-inline: 12px 8px;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:hover [data-setting-actions] {\n      opacity: 1;\n    }\n  `,\n  settingItemActions: css`\n    display: flex;\n    flex: none;\n    gap: 2px;\n    opacity: 0;\n\n    &:focus-within {\n      opacity: 1;\n    }\n  `,\n  settingItemTitle: css`\n    overflow: hidden;\n    flex: 1;\n\n    min-width: 0;\n\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  settingList: css`\n    overflow: auto;\n    flex: 1;\n    padding-block: 4px;\n  `,\n  status: css`\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n  `,\n  statusDot: css`\n    flex: none;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n  `,\n  statusProcessing: css`\n    @keyframes lobe-pro-table-status-pulse {\n      0% {\n        box-shadow: 0 0 0 0 color-mix(in srgb, currentcolor 40%, transparent);\n      }\n\n      100% {\n        box-shadow: 0 0 0 4px transparent;\n      }\n    }\n\n    color: ${cssVar.colorPrimary};\n    animation: lobe-pro-table-status-pulse 1.2s ease-out infinite;\n  `,\n  title: css`\n    display: flex;\n    flex: none;\n    gap: 4px;\n    align-items: center;\n\n    min-width: 0;\n\n    font-size: ${cssVar.fontSizeLG};\n    font-weight: 600;\n    color: ${cssVar.colorText};\n  `,\n  titleSub: css`\n    font-size: ${cssVar.fontSize};\n    font-weight: normal;\n    color: ${cssVar.colorTextDescription};\n  `,\n  titleTooltip: css`\n    display: inline-flex;\n    gap: 4px;\n    align-items: center;\n  `,\n  toolbar: css`\n    display: flex;\n    flex-wrap: nowrap;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    margin-block-end: 16px;\n  `,\n  toolbarActions: css`\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n    justify-content: flex-end;\n\n    min-width: 0;\n    margin-inline-start: auto;\n  `,\n  toolbarOptions: css`\n    display: flex;\n    flex: none;\n    gap: 2px;\n    align-items: center;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,iBAAiB;AAE9B,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;qBAUS,OAAO,aAAa;;iBAExB,OAAO,SAAS;aACpB,OAAO,UAAU;;qCAEO,OAAO,aAAa;;CAEvD,WAAW,GAAG;;;;;;;;;CASd,aAAa,GAAG;;;;;;CAMhB,MAAM,GAAG;;;CAGT,cAAc,GAAG;;wBAEK,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;CAEzC,MAAM,GAAG;;;qBAGU,OAAO,eAAe;;mBAExB,OAAO,eAAe;;;kBAGvB,OAAO,kBAAkB;;CAEzC,UAAU,GAAG;;;;;;CAMb,cAAc,GAAG;;;;;CAKjB,SAAS,GAAG;;;;;;CAMZ,aAAa,GAAG;;;;;;;;;;;qBAWG,OAAO,eAAe;;;aAG9B,OAAO,UAAU;;;;;;;oBAOV,OAAO,kBAAkB;;;;;;;;CAQ3C,UAAU,GAAG;;;;;CAKb,aAAa,GAAG;;;;;;;;;;;;aAYL,OAAO,UAAU;;kBAEZ,OAAO,mBAAmB;;;eAG7B,OAAO,oBAAoB;oBACtB,OAAO,aAAa;;;CAGtC,aAAa,GAAG;;;;;;CAMhB,iBAAiB,GAAG;;;;;;;;;;CAUpB,kBAAkB,GAAG;iBACN,OAAO,WAAW;aACtB,OAAO,mBAAmB;;;CAGrC,YAAY,GAAG;;;;;;;CAOf,MAAM,GAAG;uCAC4B,OAAO,oBAAoB;qCAC7B,OAAO,WAAW;0CACb,OAAO,aAAa;uCACvB,OAAO,aAAa;uCACpB,OAAO,aAAa;;;;;;;;;;oBAUvC,OAAO,cAAc;;;CAGvC,QAAQ,GAAG;;;;;CAKX,eAAe,GAAG;;;;;;;;CAQlB,aAAa,GAAG;;;;;;;;;;;;;;;eAeH,OAAO,mBAAmB;;;;;;;;;;;;;;;CAevC,oBAAoB,GAAG;;;;CAIvB,aAAa,GAAG;;;;aAIL,OAAO,mBAAmB;;;;;;;;;CASrC,SAAS,GAAG;;;;;;;;CAQZ,mBAAmB,GAAG;;;iBAGP,OAAO,WAAW;aACtB,OAAO,qBAAqB;;CAEvC,eAAe,GAAG;;;;;;;kCAOc,OAAO,WAAW;;CAElD,aAAa,GAAG;;;;;;;;;oBASE,OAAO,kBAAkB;;;;;;;CAO3C,oBAAoB,GAAG;;;;;;;;;;CAUvB,kBAAkB,GAAG;;;;;;;;;CASrB,aAAa,GAAG;;;;;CAKhB,QAAQ,GAAG;;;;;CAKX,WAAW,GAAG;;;;;;CAMd,kBAAkB,GAAG;;;;;;;;;;;aAWV,OAAO,aAAa;;;CAG/B,OAAO,GAAG;;;;;;;;iBAQK,OAAO,WAAW;;aAEtB,OAAO,UAAU;;CAE5B,UAAU,GAAG;iBACE,OAAO,SAAS;;aAEpB,OAAO,qBAAqB;;CAEvC,cAAc,GAAG;;;;;CAKjB,SAAS,GAAG;;;;;;;;;CASZ,gBAAgB,GAAG;;;;;;;;;;;CAWnB,gBAAgB,GAAG;;;;;;AAMrB,EAAE"}