@varlet/ui 3.18.0-alpha.1781201095903 → 3.18.0-alpha.1781276267923

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/es/action-sheet/style/index.mjs +1 -1
  2. package/es/bottom-navigation/BottomNavigation.mjs +1 -1
  3. package/es/bottom-navigation/props.mjs +1 -0
  4. package/es/data-table/DataTable.mjs +1 -0
  5. package/es/data-table/dataTable.css +1 -1
  6. package/es/data-table/props.mjs +1 -0
  7. package/es/dialog/Dialog.mjs +37 -22
  8. package/es/dialog/dialog.css +1 -1
  9. package/es/dialog/props.mjs +2 -0
  10. package/es/index.bundle.mjs +1 -1
  11. package/es/index.mjs +1 -1
  12. package/es/rail-navigation/RailNavigation.mjs +1 -1
  13. package/es/rail-navigation/props.mjs +1 -1
  14. package/es/table/Table.mjs +1 -0
  15. package/es/table/props.mjs +2 -1
  16. package/es/table/table.css +1 -1
  17. package/es/themes/dark/table.mjs +1 -0
  18. package/es/themes/dark/treeMenu.mjs +1 -0
  19. package/es/themes/md3-dark/table.mjs +1 -0
  20. package/es/themes/md3-dark/treeMenu.mjs +1 -0
  21. package/es/themes/md3-light/table.mjs +1 -0
  22. package/es/themes/md3-light/treeMenu.mjs +1 -0
  23. package/es/tree-menu/TreeMenu.mjs +1 -1
  24. package/es/tree-menu/props.mjs +1 -0
  25. package/es/tree-menu/treeMenu.css +1 -1
  26. package/es/varlet.css +1 -1
  27. package/es/varlet.esm.js +4038 -4034
  28. package/highlight/web-types.en-US.json +39 -3
  29. package/highlight/web-types.zh-CN.json +30 -3
  30. package/lib/varlet.cjs.js +112 -103
  31. package/lib/varlet.css +1 -1
  32. package/package.json +7 -7
  33. package/types/bottomNavigation.d.ts +2 -0
  34. package/types/dataTable.d.ts +1 -0
  35. package/types/dialog.d.ts +5 -0
  36. package/types/railNavigation.d.ts +1 -1
  37. package/types/styleVars.d.ts +2 -0
  38. package/types/table.d.ts +1 -0
  39. package/types/treeMenu.d.ts +1 -0
  40. package/umd/varlet.js +7 -7
@@ -3,5 +3,5 @@ import '../../icon/icon.css'
3
3
  import '../../ripple/ripple.css'
4
4
  import '../../popup/popup.css'
5
5
  import '../actionSheet.css'
6
- import '../ActionItemSfc.css'
7
6
  import '../ActionSheetSfc.css'
7
+ import '../ActionItemSfc.css'
@@ -45,7 +45,7 @@ function __render__(_ctx, _cache) {
45
45
  _ctx.n(),
46
46
  _ctx.n("$--box"),
47
47
  [_ctx.fixed, _ctx.n("--fixed")],
48
- [_ctx.border, _ctx.n("--border")],
48
+ [_ctx.bordered || _ctx.border, _ctx.n("--border")],
49
49
  [_ctx.safeArea, _ctx.n("--safe-area")],
50
50
  [_ctx.variant, _ctx.n("--variant")]
51
51
  ),
@@ -14,6 +14,7 @@ const props = {
14
14
  },
15
15
  fixed: Boolean,
16
16
  border: Boolean,
17
+ bordered: Boolean,
17
18
  variant: Boolean,
18
19
  safeArea: Boolean,
19
20
  activeColor: String,
@@ -63,6 +63,7 @@ function __render__(_ctx, _cache) {
63
63
  [!_ctx.plain, _ctx.formatElevation(_ctx.elevation, 1)],
64
64
  _ctx.n("$--box"),
65
65
  [_ctx.surface === "low", _ctx.n("--surface-low")],
66
+ [_ctx.bordered, _ctx.n("--bordered")],
66
67
  [_ctx.cellBordered, _ctx.n("--cell-bordered")],
67
68
  [_ctx.plain, _ctx.n("--plain")],
68
69
  [_ctx.showPagination, _ctx.n("--with-footer")],
@@ -1 +1 @@
1
- :root { --data-table-background: #fff; --data-table-surface-low-background: var(--color-surface-container-highest); --data-table-header-cell-background: #fff; --data-table-header-cell-text-color: rgba(0, 0, 0, 0.6); --data-table-body-cell-text-color: #555; --data-table-border-color: var(--color-outline); --data-table-row-hover-background: #f5f5f5; --data-table-surface-low-row-hover-background: var(--color-surface-container-highest); --data-table-plain-row-hover-background: hsla(var(--hsl-on-surface), 0.04); --data-table-sort-trigger-color: hsla(var(--hsl-on-surface), 0.42); --data-table-sort-trigger-active-color: var(--color-primary); --data-table-sort-trigger-hover-background: hsla(var(--hsl-primary), 0.08); --data-table-empty-text-color: var(--color-text-disabled); --data-table-resize-trigger-color: hsla(var(--hsl-on-surface-variant), 0.36); --data-table-fixed-shadow-color: rgba(0, 0, 0, 0.04); --data-table-border-radius: 2px; --data-table-cell-padding: 8px 16px; --data-table-selection-cell-padding: 8px 8px; --data-table-expand-cell-padding: 8px 8px; --data-table-cell-font-size: 14px; --data-table-header-font-size: 14px; --data-table-header-font-weight: 500; --data-table-row-height: 46px; --data-table-row-small-height: 40px; --data-table-row-large-height: 52px; --data-table-footer-padding: 12px 16px; --data-table-empty-padding: 48px 16px;}.var-data-table { --scrollbar-track-background: var(--data-table-background); width: 100%; border-radius: var(--data-table-border-radius); background: var(--data-table-background);}.var-data-table * { box-sizing: border-box;}.var-data-table__container { position: relative; width: 100%; max-width: 100%;}.var-data-table__table { min-width: 100%; border-spacing: 0; border-collapse: collapse; line-height: normal; table-layout: fixed;}.var-data-table__header-row { background: var(--data-table-header-cell-background);}.var-data-table__row { background: var(--data-table-background); border-bottom: 1px solid var(--data-table-border-color); transition: background-color 0.25s;}.var-data-table__row:hover { background: var(--data-table-row-hover-background);}.var-data-table__row:last-child { border-bottom: 0;}.var-data-table--surface-low { --data-table-background: var(--data-table-surface-low-background); --data-table-header-cell-background: var(--data-table-surface-low-background); --data-table-row-hover-background: var(--data-table-surface-low-row-hover-background);}.var-data-table--plain { --data-table-background: transparent; --data-table-header-cell-background: transparent; --data-table-row-hover-background: var(--data-table-plain-row-hover-background); border-radius: 0;}.var-data-table__cell { height: var(--data-table-row-height); padding: var(--data-table-cell-padding); font-size: var(--data-table-cell-font-size); vertical-align: middle;}.var-data-table--cell-bordered .var-data-table__cell:not(:last-child) { border-right: 1px solid var(--data-table-border-color);}.var-data-table__header-cell { color: var(--data-table-header-cell-text-color); font-size: var(--data-table-header-font-size); font-weight: var(--data-table-header-font-weight); background: var(--data-table-header-cell-background); box-shadow: inset 0 -1px 0 var(--data-table-border-color); position: sticky; top: 0;}.var-data-table__sort-trigger { display: flex; align-items: center; width: auto; height: auto; padding: var(--data-table-cell-padding); border: 0; border-radius: 0; background: transparent; color: var(--data-table-sort-trigger-color); cursor: pointer; text-align: inherit; transition: color 0.2s ease, background-color 0.2s ease;}.var-data-table__sort-trigger:hover,.var-data-table__sort-trigger:focus-visible { background: var(--data-table-sort-trigger-hover-background);}.var-data-table__sort-trigger:focus-visible { outline: none;}.var-data-table__sort-trigger--align-left { justify-content: flex-start;}.var-data-table__sort-trigger--align-center { justify-content: center;}.var-data-table__sort-trigger--align-right { justify-content: flex-end;}.var-data-table__sort-trigger--active { color: var(--data-table-sort-trigger-active-color);}.var-data-table__sort-trigger-text { display: inline-flex; align-items: center; min-width: 0;}.var-data-table__sort-trigger-icon { display: inline-flex; flex-direction: column; justify-content: center; gap: 0; margin-inline-start: 8px; vertical-align: middle; color: inherit; opacity: 0.72;}.var-data-table__sort-trigger-icon-up[var-data-table-cover],.var-data-table__sort-trigger-icon-down[var-data-table-cover] { display: block; line-height: 1; opacity: 0.45; transition: opacity 0.2s ease;}.var-data-table__sort-trigger-icon-up[var-data-table-cover] { margin-bottom: -5px;}.var-data-table__sort-trigger-icon-down[var-data-table-cover] { margin-top: -5px;}.var-data-table__sort-trigger-icon--active[var-data-table-cover] { opacity: 1;}.var-data-table__resize-trigger { position: absolute; top: 0; right: -5px; z-index: 1; width: 10px; height: 100%; padding: 0; border: 0; background: transparent; cursor: col-resize; touch-action: none;}.var-data-table__resize-trigger::before { content: ''; position: absolute; top: 10px; left: 50%; bottom: 10px; width: 2px; transform: translateX(-50%); background: var(--data-table-resize-trigger-color);}.var-data-table__body-cell { color: var(--data-table-body-cell-text-color); background: inherit; background-clip: padding-box;}.var-data-table__summary-row { background: var(--data-table-background); border-top: 1px solid var(--data-table-border-color);}.var-data-table__summary-cell { color: var(--data-table-body-cell-text-color); background: inherit; background-clip: padding-box; font-weight: 500;}.var-data-table__fixed-cell { background: inherit; background-clip: padding-box;}.var-data-table__fixed-cell--shadow-right::after { content: ''; position: absolute; top: 0; right: -14px; bottom: 0; width: 14px; pointer-events: none; background: linear-gradient(to right, var(--data-table-fixed-shadow-color), transparent);}.var-data-table__fixed-cell--shadow-left::before { content: ''; position: absolute; top: 0; left: -14px; bottom: 0; width: 14px; pointer-events: none; background: linear-gradient(to left, var(--data-table-fixed-shadow-color), transparent);}.var-data-table__selection-cell,.var-data-table__expand-cell { text-align: center; min-width: 52px;}.var-data-table__selection-cell { padding: var(--data-table-selection-cell-padding);}.var-data-table__expand-cell { padding: var(--data-table-expand-cell-padding);}.var-data-table__selection-cell .var-checkbox[var-data-table-cover],.var-data-table__selection-cell .var-radio[var-data-table-cover] { transform: none;}.var-data-table__selection-cell .var-checkbox[var-data-table-cover] .var-checkbox__wrap,.var-data-table__selection-cell .var-radio[var-data-table-cover] .var-radio__wrap { display: flex; align-items: center; justify-content: center; width: 100%;}.var-data-table__expand-trigger { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer;}.var-data-table__expand-trigger:disabled { opacity: 0.4; cursor: not-allowed;}.var-data-table__tree-cell { display: flex; align-items: center; min-width: 0;}.var-data-table__tree-trigger,.var-data-table__tree-indent { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; margin-right: 4px;}.var-data-table__tree-trigger { padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer;}.var-data-table__expanded-row { background: var(--data-table-background); border-bottom: 1px solid var(--data-table-border-color);}.var-data-table__expanded-cell { padding-top: 12px; padding-bottom: 12px;}.var-data-table__empty { display: flex; align-items: center; justify-content: center; width: 100%; color: var(--data-table-empty-text-color); padding: var(--data-table-empty-padding);}.var-data-table__footer { display: flex; align-items: center; justify-content: space-between; padding: var(--data-table-footer-padding); border-top: 1px solid var(--data-table-border-color); background: var(--data-table-background); overflow: auto;}.var-data-table__footer .var-pagination[var-data-table-cover] { margin-left: auto;}.var-data-table--small .var-data-table__cell { height: var(--data-table-row-small-height);}.var-data-table--large .var-data-table__cell { height: var(--data-table-row-large-height);}
1
+ :root { --data-table-background: #fff; --data-table-surface-low-background: var(--color-surface-container-highest); --data-table-header-cell-background: #fff; --data-table-header-cell-text-color: rgba(0, 0, 0, 0.6); --data-table-body-cell-text-color: #555; --data-table-border-color: var(--color-outline); --data-table-row-hover-background: #f5f5f5; --data-table-surface-low-row-hover-background: var(--color-surface-container-highest); --data-table-plain-row-hover-background: hsla(var(--hsl-on-surface), 0.04); --data-table-sort-trigger-color: hsla(var(--hsl-on-surface), 0.42); --data-table-sort-trigger-active-color: var(--color-primary); --data-table-sort-trigger-hover-background: hsla(var(--hsl-primary), 0.08); --data-table-empty-text-color: var(--color-text-disabled); --data-table-resize-trigger-color: hsla(var(--hsl-on-surface-variant), 0.36); --data-table-fixed-shadow-color: rgba(0, 0, 0, 0.04); --data-table-border-radius: 2px; --data-table-cell-padding: 8px 16px; --data-table-selection-cell-padding: 8px 8px; --data-table-expand-cell-padding: 8px 8px; --data-table-cell-font-size: 14px; --data-table-header-font-size: 14px; --data-table-header-font-weight: 500; --data-table-row-height: 46px; --data-table-row-small-height: 40px; --data-table-row-large-height: 52px; --data-table-footer-padding: 12px 16px; --data-table-empty-padding: 48px 16px;}.var-data-table { --scrollbar-track-background: var(--data-table-background); width: 100%; border-radius: var(--data-table-border-radius); background: var(--data-table-background);}.var-data-table * { box-sizing: border-box;}.var-data-table__container { position: relative; width: 100%; max-width: 100%;}.var-data-table__table { min-width: 100%; border-spacing: 0; border-collapse: collapse; line-height: normal; table-layout: fixed;}.var-data-table__header-row { background: var(--data-table-header-cell-background);}.var-data-table__row { background: var(--data-table-background); border-bottom: 1px solid var(--data-table-border-color); transition: background-color 0.25s;}.var-data-table__row:hover { background: var(--data-table-row-hover-background);}.var-data-table__row:last-child { border-bottom: 0;}.var-data-table--surface-low { --data-table-background: var(--data-table-surface-low-background); --data-table-header-cell-background: var(--data-table-surface-low-background); --data-table-row-hover-background: var(--data-table-surface-low-row-hover-background);}.var-data-table--plain { --data-table-background: transparent; --data-table-header-cell-background: transparent; --data-table-row-hover-background: var(--data-table-plain-row-hover-background); border-radius: 0;}.var-data-table--bordered { border: 1px solid var(--data-table-border-color);}.var-data-table--plain.var-data-table--bordered { border-radius: var(--data-table-border-radius);}.var-data-table__cell { height: var(--data-table-row-height); padding: var(--data-table-cell-padding); font-size: var(--data-table-cell-font-size); vertical-align: middle;}.var-data-table--cell-bordered .var-data-table__cell:not(:last-child) { border-right: 1px solid var(--data-table-border-color);}.var-data-table__header-cell { color: var(--data-table-header-cell-text-color); font-size: var(--data-table-header-font-size); font-weight: var(--data-table-header-font-weight); background: var(--data-table-header-cell-background); box-shadow: inset 0 -1px 0 var(--data-table-border-color); position: sticky; top: 0;}.var-data-table__sort-trigger { display: flex; align-items: center; width: auto; height: auto; padding: var(--data-table-cell-padding); border: 0; border-radius: 0; background: transparent; color: var(--data-table-sort-trigger-color); cursor: pointer; text-align: inherit; transition: color 0.2s ease, background-color 0.2s ease;}.var-data-table__sort-trigger:hover,.var-data-table__sort-trigger:focus-visible { background: var(--data-table-sort-trigger-hover-background);}.var-data-table__sort-trigger:focus-visible { outline: none;}.var-data-table__sort-trigger--align-left { justify-content: flex-start;}.var-data-table__sort-trigger--align-center { justify-content: center;}.var-data-table__sort-trigger--align-right { justify-content: flex-end;}.var-data-table__sort-trigger--active { color: var(--data-table-sort-trigger-active-color);}.var-data-table__sort-trigger-text { display: inline-flex; align-items: center; min-width: 0;}.var-data-table__sort-trigger-icon { display: inline-flex; flex-direction: column; justify-content: center; gap: 0; margin-inline-start: 8px; vertical-align: middle; color: inherit; opacity: 0.72;}.var-data-table__sort-trigger-icon-up[var-data-table-cover],.var-data-table__sort-trigger-icon-down[var-data-table-cover] { display: block; line-height: 1; opacity: 0.45; transition: opacity 0.2s ease;}.var-data-table__sort-trigger-icon-up[var-data-table-cover] { margin-bottom: -5px;}.var-data-table__sort-trigger-icon-down[var-data-table-cover] { margin-top: -5px;}.var-data-table__sort-trigger-icon--active[var-data-table-cover] { opacity: 1;}.var-data-table__resize-trigger { position: absolute; top: 0; right: -5px; z-index: 1; width: 10px; height: 100%; padding: 0; border: 0; background: transparent; cursor: col-resize; touch-action: none;}.var-data-table__resize-trigger::before { content: ''; position: absolute; top: 10px; left: 50%; bottom: 10px; width: 2px; transform: translateX(-50%); background: var(--data-table-resize-trigger-color);}.var-data-table__body-cell { color: var(--data-table-body-cell-text-color); background: inherit; background-clip: padding-box;}.var-data-table__summary-row { background: var(--data-table-background); border-top: 1px solid var(--data-table-border-color);}.var-data-table__summary-cell { color: var(--data-table-body-cell-text-color); background: inherit; background-clip: padding-box; font-weight: 500;}.var-data-table__fixed-cell { background: inherit; background-clip: padding-box;}.var-data-table__fixed-cell--shadow-right::after { content: ''; position: absolute; top: 0; right: -14px; bottom: 0; width: 14px; pointer-events: none; background: linear-gradient(to right, var(--data-table-fixed-shadow-color), transparent);}.var-data-table__fixed-cell--shadow-left::before { content: ''; position: absolute; top: 0; left: -14px; bottom: 0; width: 14px; pointer-events: none; background: linear-gradient(to left, var(--data-table-fixed-shadow-color), transparent);}.var-data-table__selection-cell,.var-data-table__expand-cell { text-align: center; min-width: 52px;}.var-data-table__selection-cell { padding: var(--data-table-selection-cell-padding);}.var-data-table__expand-cell { padding: var(--data-table-expand-cell-padding);}.var-data-table__selection-cell .var-checkbox[var-data-table-cover],.var-data-table__selection-cell .var-radio[var-data-table-cover] { transform: none;}.var-data-table__selection-cell .var-checkbox[var-data-table-cover] .var-checkbox__wrap,.var-data-table__selection-cell .var-radio[var-data-table-cover] .var-radio__wrap { display: flex; align-items: center; justify-content: center; width: 100%;}.var-data-table__expand-trigger { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer;}.var-data-table__expand-trigger:disabled { opacity: 0.4; cursor: not-allowed;}.var-data-table__tree-cell { display: flex; align-items: center; min-width: 0;}.var-data-table__tree-trigger,.var-data-table__tree-indent { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; margin-right: 4px;}.var-data-table__tree-trigger { padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer;}.var-data-table__expanded-row { background: var(--data-table-background); border-bottom: 1px solid var(--data-table-border-color);}.var-data-table__expanded-cell { padding-top: 12px; padding-bottom: 12px;}.var-data-table__empty { display: flex; align-items: center; justify-content: center; width: 100%; color: var(--data-table-empty-text-color); padding: var(--data-table-empty-padding);}.var-data-table__footer { display: flex; align-items: center; justify-content: space-between; padding: var(--data-table-footer-padding); border-top: 1px solid var(--data-table-border-color); background: var(--data-table-background); overflow: auto;}.var-data-table__footer .var-pagination[var-data-table-cover] { margin-left: auto;}.var-data-table--small .var-data-table__cell { height: var(--data-table-row-small-height);}.var-data-table--large .var-data-table__cell { height: var(--data-table-row-large-height);}
@@ -74,6 +74,7 @@ const props = {
74
74
  default: true
75
75
  },
76
76
  cellBordered: Boolean,
77
+ bordered: Boolean,
77
78
  tableLayout: {
78
79
  type: String,
79
80
  default: "auto"
@@ -1,4 +1,6 @@
1
1
  var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
2
4
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
3
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
4
6
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,9 +16,10 @@ var __spreadValues = (a, b) => {
14
16
  }
15
17
  return a;
16
18
  };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
17
20
  import { call } from "@varlet/shared";
18
21
  import { useVModel } from "@varlet/use";
19
- import { defineComponent, ref, watch } from "vue";
22
+ import { computed, defineComponent, ref, watch } from "vue";
20
23
  import VarButton from "../button/index.mjs";
21
24
  import { t } from "../locale/index.mjs";
22
25
  import { injectLocaleProvider } from "../locale-provider/provide.mjs";
@@ -25,7 +28,7 @@ import { createNamespace } from "../utils/components.mjs";
25
28
  import { toSizeUnit } from "../utils/elements.mjs";
26
29
  import { props } from "./props.mjs";
27
30
  const { name, n, classes } = createNamespace("dialog");
28
- import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps } from "vue";
31
+ import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from "vue";
29
32
  function __render__(_ctx, _cache) {
30
33
  const _component_var_button = _resolveComponent("var-button");
31
34
  const _component_var_popup = _resolveComponent("var-popup");
@@ -105,17 +108,11 @@ function __render__(_ctx, _cache) {
105
108
  class: _normalizeClass(_ctx.n("actions"))
106
109
  },
107
110
  [
108
- _ctx.cancelButton ? (_openBlock(), _createBlock(_component_var_button, {
109
- key: 0,
110
- class: _normalizeClass(_ctx.classes(_ctx.n("button"), _ctx.n("cancel-button"))),
111
+ _ctx.cancelButton ? (_openBlock(), _createBlock(_component_var_button, _mergeProps({ key: 0 }, _ctx.cancelButtonNormalizedProps, {
112
+ class: _ctx.classes(_ctx.n("button"), _ctx.n("cancel-button"), [_ctx.cancelButtonProps != null, _ctx.n("--with-button-props")]),
111
113
  "var-dialog-cover": "",
112
- text: "",
113
- "text-color": _ctx.cancelButtonTextColor,
114
- color: _ctx.cancelButtonColor,
115
- loading: _ctx.cancelButtonLoading,
116
- disabled: _ctx.cancelButtonDisabled,
117
114
  onClick: _ctx.cancel
118
- }, {
115
+ }), {
119
116
  default: _withCtx(() => {
120
117
  var _a;
121
118
  return [
@@ -128,18 +125,12 @@ function __render__(_ctx, _cache) {
128
125
  }),
129
126
  _: 1
130
127
  /* STABLE */
131
- }, 8, ["class", "text-color", "color", "loading", "disabled", "onClick"])) : _createCommentVNode("v-if", true),
132
- _ctx.confirmButton ? (_openBlock(), _createBlock(_component_var_button, {
133
- key: 1,
134
- class: _normalizeClass(_ctx.classes(_ctx.n("button"), _ctx.n("confirm-button"))),
128
+ }, 16, ["class", "onClick"])) : _createCommentVNode("v-if", true),
129
+ _ctx.confirmButton ? (_openBlock(), _createBlock(_component_var_button, _mergeProps({ key: 1 }, _ctx.confirmButtonNormalizedProps, {
130
+ class: _ctx.classes(_ctx.n("button"), _ctx.n("confirm-button"), [_ctx.confirmButtonProps != null, _ctx.n("--with-button-props")]),
135
131
  "var-dialog-cover": "",
136
- text: "",
137
- "text-color": _ctx.confirmButtonTextColor,
138
- color: _ctx.confirmButtonColor,
139
- loading: _ctx.confirmButtonLoading,
140
- disabled: _ctx.confirmButtonDisabled,
141
132
  onClick: _ctx.confirm
142
- }, {
133
+ }), {
143
134
  default: _withCtx(() => {
144
135
  var _a;
145
136
  return [
@@ -152,7 +143,7 @@ function __render__(_ctx, _cache) {
152
143
  }),
153
144
  _: 1
154
145
  /* STABLE */
155
- }, 8, ["class", "text-color", "color", "loading", "disabled", "onClick"])) : _createCommentVNode("v-if", true)
146
+ }, 16, ["class", "onClick"])) : _createCommentVNode("v-if", true)
156
147
  ],
157
148
  2
158
149
  /* CLASS */
@@ -183,6 +174,28 @@ const __sfc__ = defineComponent({
183
174
  const cancelButtonLoading = useVModel(props2, "cancelButtonLoading");
184
175
  const confirmButtonDisabled = useVModel(props2, "confirmButtonDisabled");
185
176
  const cancelButtonDisabled = useVModel(props2, "cancelButtonDisabled");
177
+ const confirmButtonNormalizedProps = computed(() => {
178
+ var _a, _b, _c, _d, _e, _f;
179
+ return __spreadProps(__spreadValues({
180
+ text: true
181
+ }, props2.confirmButtonProps), {
182
+ textColor: (_b = props2.confirmButtonTextColor) != null ? _b : (_a = props2.confirmButtonProps) == null ? void 0 : _a.textColor,
183
+ color: (_d = props2.confirmButtonColor) != null ? _d : (_c = props2.confirmButtonProps) == null ? void 0 : _c.color,
184
+ loading: confirmButtonLoading.value || ((_e = props2.confirmButtonProps) == null ? void 0 : _e.loading),
185
+ disabled: confirmButtonDisabled.value || ((_f = props2.confirmButtonProps) == null ? void 0 : _f.disabled)
186
+ });
187
+ });
188
+ const cancelButtonNormalizedProps = computed(() => {
189
+ var _a, _b, _c, _d, _e, _f;
190
+ return __spreadProps(__spreadValues({
191
+ text: true
192
+ }, props2.cancelButtonProps), {
193
+ textColor: (_b = props2.cancelButtonTextColor) != null ? _b : (_a = props2.cancelButtonProps) == null ? void 0 : _a.textColor,
194
+ color: (_d = props2.cancelButtonColor) != null ? _d : (_c = props2.cancelButtonProps) == null ? void 0 : _c.color,
195
+ loading: cancelButtonLoading.value || ((_e = props2.cancelButtonProps) == null ? void 0 : _e.loading),
196
+ disabled: cancelButtonDisabled.value || ((_f = props2.cancelButtonProps) == null ? void 0 : _f.disabled)
197
+ });
198
+ });
186
199
  const exposedRefs = {
187
200
  confirmButtonLoading,
188
201
  cancelButtonLoading,
@@ -254,6 +267,8 @@ const __sfc__ = defineComponent({
254
267
  cancelButtonLoading,
255
268
  confirmButtonDisabled,
256
269
  cancelButtonDisabled,
270
+ confirmButtonNormalizedProps,
271
+ cancelButtonNormalizedProps,
257
272
  pt,
258
273
  t,
259
274
  n,
@@ -1 +1 @@
1
- :root { --dialog-width: 280px; --dialog-border-radius: 3px; --dialog-title-padding: 20px 20px 0; --dialog-message-color: #888; --dialog-message-padding: 12px 20px; --dialog-message-line-height: 24px; --dialog-message-font-size: var(--font-size-md); --dialog-title-font-size: var(--font-size-lg); --dialog-actions-padding: 0 12px 12px; --dialog-button-margin-left: 6px; --dialog-title-color: #555; --dialog-confirm-button-color: var(--color-primary); --dialog-cancel-button-color: var(--color-primary); --dialog-background: var(--color-surface-container-low);}.var-dialog { width: var(--dialog-width); background: var(--dialog-background); transition: 0.25s background-color;}.var-dialog__popup[var-dialog-cover] { background: transparent; border-radius: var(--dialog-border-radius);}.var-dialog__title { font-size: var(--dialog-title-font-size); font-weight: 400; padding: var(--dialog-title-padding); color: var(--dialog-title-color);}.var-dialog__message { padding: var(--dialog-message-padding); color: var(--dialog-message-color); line-height: var(--dialog-message-line-height); font-size: var(--dialog-message-font-size); word-wrap: break-word;}.var-dialog__actions { display: flex; justify-content: flex-end; padding: var(--dialog-actions-padding);}.var-dialog__button[var-dialog-cover] { margin-left: var(--dialog-button-margin-left); background-color: transparent; box-shadow: none;}.var-dialog__button[var-dialog-cover]:active { box-shadow: none;}.var-dialog__confirm-button[var-dialog-cover]:not(.var-button--disabled) { color: var(--dialog-confirm-button-color);}.var-dialog__cancel-button[var-dialog-cover]:not(.var-button--disabled) { color: var(--dialog-cancel-button-color);}
1
+ :root { --dialog-width: 280px; --dialog-border-radius: 3px; --dialog-title-padding: 20px 20px 0; --dialog-message-color: #888; --dialog-message-padding: 12px 20px; --dialog-message-line-height: 24px; --dialog-message-font-size: var(--font-size-md); --dialog-title-font-size: var(--font-size-lg); --dialog-actions-padding: 0 12px 12px; --dialog-button-margin-left: 6px; --dialog-title-color: #555; --dialog-confirm-button-color: var(--color-primary); --dialog-cancel-button-color: var(--color-primary); --dialog-background: var(--color-surface-container-low);}.var-dialog { width: var(--dialog-width); background: var(--dialog-background); transition: 0.25s background-color;}.var-dialog__popup[var-dialog-cover] { background: transparent; border-radius: var(--dialog-border-radius);}.var-dialog__title { font-size: var(--dialog-title-font-size); font-weight: 400; padding: var(--dialog-title-padding); color: var(--dialog-title-color);}.var-dialog__message { padding: var(--dialog-message-padding); color: var(--dialog-message-color); line-height: var(--dialog-message-line-height); font-size: var(--dialog-message-font-size); word-wrap: break-word;}.var-dialog__actions { display: flex; justify-content: flex-end; padding: var(--dialog-actions-padding);}.var-dialog__button[var-dialog-cover] { margin-left: var(--dialog-button-margin-left);}.var-dialog__button[var-dialog-cover]:not(.var-dialog--with-button-props).var-dialog__confirm-button:not(.var-button--disabled) { color: var(--dialog-confirm-button-color);}.var-dialog__button[var-dialog-cover]:not(.var-dialog--with-button-props).var-dialog__cancel-button:not(.var-button--disabled) { color: var(--dialog-cancel-button-color);}
@@ -39,6 +39,8 @@ const props = __spreadValues({
39
39
  cancelButtonTextColor: String,
40
40
  confirmButtonColor: String,
41
41
  cancelButtonColor: String,
42
+ confirmButtonProps: Object,
43
+ cancelButtonProps: Object,
42
44
  confirmButtonLoading: Boolean,
43
45
  cancelButtonLoading: Boolean,
44
46
  confirmButtonDisabled: Boolean,
@@ -304,7 +304,7 @@ import './tree-menu/style/index.mjs'
304
304
  import './uploader/style/index.mjs'
305
305
  import './watermark/style/index.mjs'
306
306
 
307
- const version = '3.18.0-alpha.1781201095903'
307
+ const version = '3.18.0-alpha.1781276267923'
308
308
 
309
309
  function install(app) {
310
310
  ActionSheet.install && app.use(ActionSheet)
package/es/index.mjs CHANGED
@@ -202,7 +202,7 @@ export * from './tree-menu/index.mjs'
202
202
  export * from './uploader/index.mjs'
203
203
  export * from './watermark/index.mjs'
204
204
 
205
- const version = '3.18.0-alpha.1781201095903'
205
+ const version = '3.18.0-alpha.1781276267923'
206
206
 
207
207
  function install(app) {
208
208
  ActionSheet.install && app.use(ActionSheet)
@@ -9,7 +9,7 @@ function __render__(_ctx, _cache) {
9
9
  return _openBlock(), _createElementBlock(
10
10
  "aside",
11
11
  _mergeProps({
12
- class: _ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.border, _ctx.n("--border")])
12
+ class: _ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.bordered, _ctx.n("--border")])
13
13
  }, _ctx.$attrs),
14
14
  [
15
15
  _ctx.$slots.start ? (_openBlock(), _createElementBlock(
@@ -12,7 +12,7 @@ const props = {
12
12
  type: Boolean,
13
13
  default: true
14
14
  },
15
- border: Boolean,
15
+ bordered: Boolean,
16
16
  onChange: defineListenerProp(),
17
17
  "onUpdate:active": defineListenerProp()
18
18
  };
@@ -14,6 +14,7 @@ function __render__(_ctx, _cache) {
14
14
  [!_ctx.plain, _ctx.formatElevation(_ctx.elevation, 1)],
15
15
  _ctx.n("$--box"),
16
16
  [_ctx.surfaceLow, _ctx.n("--surface-low")],
17
+ [_ctx.bordered, _ctx.n("--bordered")],
17
18
  [_ctx.plain, _ctx.n("--plain")]
18
19
  )
19
20
  )
@@ -11,7 +11,8 @@ const props = {
11
11
  default: true
12
12
  },
13
13
  surface: String,
14
- plain: Boolean
14
+ plain: Boolean,
15
+ bordered: Boolean
15
16
  };
16
17
  export {
17
18
  props
@@ -1 +1 @@
1
- :root { --table-background: #fff; --table-surface-low-background: var(--color-surface-container-highest); --table-surface-low-row-hover-background: var(--color-surface-container-highest); --table-plain-row-hover-background: hsla(var(--hsl-on-surface), 0.04); --table-border-radius: 2px; --table-thead-border-bottom: thin solid var(--color-outline); --table-thead-th-text-color: rgba(0, 0, 0, 0.6); --table-thead-th-text-align: left; --table-thead-th-font-size: 14px; --table-thead-th-font-weight: 500; --table-thead-tr-border-bottom: thin solid var(--color-outline); --table-tbody-tr-hover-background: #f5f5f5; --table-tbody-tr-border-bottom: thin solid var(--color-outline); --table-tbody-td-text-color: #555; --table-tbody-td-font-size: 14px; --table-tbody-td-text-align: left; --table-row-height: 46px; --table-row-padding: 8px 16px; --table-footer-border-top: thin solid var(--color-outline);}.var-table { --scrollbar-track-background: var(--table-background); width: 100%; border-radius: var(--table-border-radius);}.var-table * { box-sizing: border-box;}.var-table__main { width: 100%; overflow: auto;}.var-table__main > table { min-width: 100%; display: table; border-spacing: 0; border-collapse: collapse; line-height: normal;}.var-table__main > table thead { display: table-header-group; border-bottom: var(--table-thead-border-bottom);}.var-table__main > table thead tr { background: var(--table-background);}.var-table__main > table thead tr th { color: var(--table-thead-th-text-color); font-size: var(--table-thead-th-font-size);}.var-table__main > table thead tr:not(:last-child) { border-bottom: var(--table-thead-tr-border-bottom);}.var-table__main > table tbody { display: table-row-group;}.var-table__main > table tbody tr { display: table-row; outline: 0; vertical-align: middle; background: var(--table-background);}.var-table__main > table tbody tr:hover { background: var(--table-tbody-tr-hover-background); transition: background-color 0.25s;}.var-table__main > table tbody tr:not(:last-child) { border-bottom: var(--table-tbody-tr-border-bottom);}.var-table__main > table tbody td { color: var(--table-tbody-td-text-color); font-size: var(--table-tbody-td-font-size); background: inherit; background-clip: padding-box;}.var-table__main > table th { display: table-cell; height: var(--table-row-height); padding: var(--table-row-padding); font-weight: var(--table-thead-th-font-weight); text-align: var(--table-thead-th-text-align);}.var-table__main > table td { display: table-cell; padding: var(--table-row-padding); height: var(--table-row-height); text-align: var(--table-tbody-td-text-align);}.var-table--surface-low { --table-background: var(--table-surface-low-background); --table-tbody-tr-hover-background: var(--table-surface-low-row-hover-background);}.var-table--plain { --table-background: transparent; --table-tbody-tr-hover-background: var(--table-plain-row-hover-background); border-radius: 0;}.var-table__footer { width: 100%; min-height: var(--table-row-height); border-top: var(--table-footer-border-top); background: var(--table-background);}
1
+ :root { --table-background: #fff; --table-surface-low-background: var(--color-surface-container-highest); --table-surface-low-row-hover-background: var(--color-surface-container-highest); --table-plain-row-hover-background: hsla(var(--hsl-on-surface), 0.04); --table-border-radius: 2px; --table-border: thin solid var(--color-outline); --table-thead-border-bottom: thin solid var(--color-outline); --table-thead-th-text-color: rgba(0, 0, 0, 0.6); --table-thead-th-text-align: left; --table-thead-th-font-size: 14px; --table-thead-th-font-weight: 500; --table-thead-tr-border-bottom: thin solid var(--color-outline); --table-tbody-tr-hover-background: #f5f5f5; --table-tbody-tr-border-bottom: thin solid var(--color-outline); --table-tbody-td-text-color: #555; --table-tbody-td-font-size: 14px; --table-tbody-td-text-align: left; --table-row-height: 46px; --table-row-padding: 8px 16px; --table-footer-border-top: thin solid var(--color-outline);}.var-table { --scrollbar-track-background: var(--table-background); width: 100%; border-radius: var(--table-border-radius);}.var-table * { box-sizing: border-box;}.var-table__main { width: 100%; overflow: auto;}.var-table__main > table { min-width: 100%; display: table; border-spacing: 0; border-collapse: collapse; line-height: normal;}.var-table__main > table thead { display: table-header-group; border-bottom: var(--table-thead-border-bottom);}.var-table__main > table thead tr { background: var(--table-background);}.var-table__main > table thead tr th { color: var(--table-thead-th-text-color); font-size: var(--table-thead-th-font-size);}.var-table__main > table thead tr:not(:last-child) { border-bottom: var(--table-thead-tr-border-bottom);}.var-table__main > table tbody { display: table-row-group;}.var-table__main > table tbody tr { display: table-row; outline: 0; vertical-align: middle; background: var(--table-background);}.var-table__main > table tbody tr:hover { background: var(--table-tbody-tr-hover-background); transition: background-color 0.25s;}.var-table__main > table tbody tr:not(:last-child) { border-bottom: var(--table-tbody-tr-border-bottom);}.var-table__main > table tbody td { color: var(--table-tbody-td-text-color); font-size: var(--table-tbody-td-font-size); background: inherit; background-clip: padding-box;}.var-table__main > table th { display: table-cell; height: var(--table-row-height); padding: var(--table-row-padding); font-weight: var(--table-thead-th-font-weight); text-align: var(--table-thead-th-text-align);}.var-table__main > table td { display: table-cell; padding: var(--table-row-padding); height: var(--table-row-height); text-align: var(--table-tbody-td-text-align);}.var-table--surface-low { --table-background: var(--table-surface-low-background); --table-tbody-tr-hover-background: var(--table-surface-low-row-hover-background);}.var-table--plain { --table-background: transparent; --table-tbody-tr-hover-background: var(--table-plain-row-hover-background); border-radius: 0;}.var-table--bordered { border: var(--table-border);}.var-table--plain.var-table--bordered { border-radius: var(--table-border-radius);}.var-table__footer { width: 100%; min-height: var(--table-row-height); border-top: var(--table-footer-border-top); background: var(--table-background);}
@@ -8,6 +8,7 @@ var stdin_default = {
8
8
  "--table-tbody-td-text-color": "#fff",
9
9
  "--table-tbody-tr-hover-background": "#3a3a3a",
10
10
  "--table-border-radius": "2px",
11
+ "--table-border": "thin solid var(--color-outline)",
11
12
  "--table-thead-border-bottom": "thin solid var(--color-outline)",
12
13
  "--table-thead-th-font-size": "14px",
13
14
  "--table-thead-th-font-weight": "500",
@@ -1,5 +1,6 @@
1
1
  var stdin_default = {
2
2
  "--tree-menu-background": "var(--color-surface-container-high)",
3
+ "--tree-menu-border-color": "var(--color-outline)",
3
4
  "--tree-menu-item-text-color": "var(--color-text)",
4
5
  "--tree-menu-padding": "8px 0",
5
6
  "--tree-menu-item-gap": "0px",
@@ -8,6 +8,7 @@ var stdin_default = {
8
8
  "--table-tbody-td-text-color": "#fff",
9
9
  "--table-tbody-tr-hover-background": "var(--color-surface-container-high)",
10
10
  "--table-border-radius": "2px",
11
+ "--table-border": "thin solid var(--color-outline)",
11
12
  "--table-thead-border-bottom": "thin solid var(--color-outline)",
12
13
  "--table-thead-th-font-size": "14px",
13
14
  "--table-thead-th-font-weight": "500",
@@ -1,5 +1,6 @@
1
1
  var stdin_default = {
2
2
  "--tree-menu-background": "var(--color-surface-container)",
3
+ "--tree-menu-border-color": "var(--color-outline)",
3
4
  "--tree-menu-item-text-color": "var(--color-on-surface-variant)",
4
5
  "--tree-menu-padding": "8px 8px",
5
6
  "--tree-menu-item-gap": "1px",
@@ -5,6 +5,7 @@ var stdin_default = {
5
5
  "--table-surface-low-row-hover-background": "var(--color-surface-container-highest)",
6
6
  "--table-tbody-tr-hover-background": "var(--color-surface-container-high)",
7
7
  "--table-border-radius": "2px",
8
+ "--table-border": "thin solid var(--color-outline)",
8
9
  "--table-thead-border-bottom": "thin solid var(--color-outline)",
9
10
  "--table-thead-th-text-color": "rgba(0, 0, 0, 0.6)",
10
11
  "--table-thead-th-text-align": "left",
@@ -1,5 +1,6 @@
1
1
  var stdin_default = {
2
2
  "--tree-menu-background": "var(--color-surface-container)",
3
+ "--tree-menu-border-color": "var(--color-outline)",
3
4
  "--tree-menu-item-text-color": "var(--color-on-surface-variant)",
4
5
  "--tree-menu-padding": "8px 8px",
5
6
  "--tree-menu-item-gap": "1px",
@@ -12,7 +12,7 @@ function __render__(_ctx, _cache) {
12
12
  return _openBlock(), _createElementBlock(
13
13
  "nav",
14
14
  {
15
- class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
15
+ class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.bordered, _ctx.n("--border")])),
16
16
  style: _normalizeStyle(_ctx.styles)
17
17
  },
18
18
  [
@@ -30,6 +30,7 @@ const props = {
30
30
  type: Boolean,
31
31
  default: false
32
32
  },
33
+ bordered: Boolean,
33
34
  disabled: Boolean,
34
35
  onChange: defineListenerProp(),
35
36
  "onUpdate:active": defineListenerProp(),
@@ -1 +1 @@
1
- :root { --tree-menu-background: var(--color-surface-container-high); --tree-menu-item-text-color: var(--color-text); --tree-menu-padding: 8px 0; --tree-menu-item-gap: 0px; --tree-menu-item-height: 40px; --tree-menu-item-padding: 0 16px; --tree-menu-item-border-radius: 0; --tree-menu-item-indent: 16px; --tree-menu-item-icon-size: 22px; --tree-menu-item-icon-margin-right: 24px; --tree-menu-item-label-font-size: var(--font-size-md); --tree-menu-item-label-line-height: 1.5; --tree-menu-group-label-height: 32px; --tree-menu-group-label-padding: 0 16px; --tree-menu-group-label-color: var(--color-on-surface-variant); --tree-menu-group-label-font-size: var(--font-size-sm); --tree-menu-divider-margin: 8px 0; --tree-menu-divider-color: rgba(0, 0, 0, 0.12); --tree-menu-item-hover-background: rgba(85, 85, 85, 0.06); --tree-menu-item-pressed-background: rgba(85, 85, 85, 0.1); --tree-menu-item-active-background: hsla(var(--hsl-primary), 0.1); --tree-menu-item-active-text-color: var(--color-primary); --tree-menu-item-disabled-opacity: var(--opacity-disabled); --tree-menu-item-indicator-border-radius: 0; --tree-menu-item-indicator-active-transition-duration: 0ms; --tree-menu-expand-icon-color: var(--color-on-surface-variant); --tree-menu-expand-icon-size: 20px;}.var-tree-menu { display: block; min-width: 0; padding: var(--tree-menu-padding); color: var(--tree-menu-item-text-color); background: var(--tree-menu-background); -webkit-tap-highlight-color: transparent; transition: color 0.25s, background-color 0.25s;}.var-tree-menu__option + .var-tree-menu__option,.var-tree-menu__children > .var-tree-menu__option:first-child { margin-top: var(--tree-menu-item-gap);}.var-tree-menu__group-label { box-sizing: border-box; min-width: 0; height: var(--tree-menu-group-label-height); padding: var(--tree-menu-group-label-padding); display: flex; align-items: center; color: var(--tree-menu-group-label-color); font-size: var(--tree-menu-group-label-font-size); line-height: 1.5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.var-tree-menu__divider { height: 1px; margin: var(--tree-menu-divider-margin); background-color: var(--tree-menu-divider-color);}.var-tree-menu__item { position: relative; box-sizing: border-box; min-width: 0; height: var(--tree-menu-item-height); padding: var(--tree-menu-item-padding); display: flex; align-items: center; color: var(--tree-menu-item-text-color); cursor: pointer; overflow: hidden; border-radius: var(--tree-menu-item-border-radius); user-select: none; transition: color 0.25s;}.var-tree-menu__item-indicator { position: absolute; z-index: 0; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: var(--tree-menu-item-indicator-border-radius); transform: translate(-50%, -50%); pointer-events: none;}.var-tree-menu__item-indicator::before,.var-tree-menu__item-indicator::after { content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit;}.var-tree-menu__item-indicator::before { background-color: var(--tree-menu-item-hover-background); opacity: 0; transition: opacity 150ms, background-color 150ms;}.var-tree-menu__item-indicator::after { background: var(--tree-menu-item-active-background); transform: scaleX(0); transform-origin: center;}.var-tree-menu__item:hover .var-tree-menu__item-indicator::before { opacity: 1;}.var-tree-menu__item:active:not(.var-tree-menu--item-ripple-enabled):not(.var-tree-menu--item-disabled) .var-tree-menu__item-indicator::before { background-color: var(--tree-menu-item-pressed-background); opacity: 1;}.var-tree-menu--item-active,.var-tree-menu--item-active-path { color: var(--tree-menu-item-active-text-color);}.var-tree-menu--item-active .var-tree-menu__expand-icon,.var-tree-menu--item-active-path .var-tree-menu__expand-icon { color: var(--tree-menu-item-active-text-color);}.var-tree-menu--item-active .var-tree-menu__item-indicator::after { transform: scaleX(1); transition: transform var(--tree-menu-item-indicator-active-transition-duration) cubic-bezier(0.2, 0, 0, 1), background-color var(--tree-menu-item-indicator-active-transition-duration) cubic-bezier(0.2, 0, 0, 1);}.var-tree-menu--item-ripple-enabled.var-tree-menu--item-active .var-tree-menu__item-indicator::after { transition: none;}.var-tree-menu--item-active:hover .var-tree-menu__item-indicator::before { opacity: 0;}.var-tree-menu--item-disabled { cursor: not-allowed; opacity: var(--tree-menu-item-disabled-opacity);}.var-tree-menu--item-disabled:hover .var-tree-menu__item-indicator::before { opacity: 0;}.var-tree-menu__item-content { position: relative; z-index: 1; min-width: 0; flex: 1; margin-left: calc(var(--tree-menu-item-indent) * var(--tree-menu-level)); display: flex; align-items: center;}.var-tree-menu__icon-container { width: var(--tree-menu-item-icon-size); min-width: var(--tree-menu-item-icon-size); height: var(--tree-menu-item-icon-size); display: inline-flex; align-items: center; justify-content: center; margin-right: var(--tree-menu-item-icon-margin-right);}.var-tree-menu__icon { font-size: var(--tree-menu-item-icon-size);}.var-tree-menu__label { min-width: 0; height: var(--tree-menu-item-height); flex: 1; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--tree-menu-item-label-font-size); line-height: var(--tree-menu-item-label-line-height);}.var-tree-menu__expand-icon,.var-tree-menu__expand-placeholder { width: var(--tree-menu-expand-icon-size); min-width: var(--tree-menu-expand-icon-size); height: var(--tree-menu-expand-icon-size); margin-left: 8px;}.var-tree-menu__expand-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--tree-menu-expand-icon-color); font-size: var(--tree-menu-expand-icon-size); transform: rotate(-90deg); transition: color 0.25s, transform 0.25s;}.var-tree-menu--expand-icon-expanded { transform: rotate(0deg);}
1
+ :root { --tree-menu-background: var(--color-surface-container-high); --tree-menu-border-color: var(--color-outline); --tree-menu-item-text-color: var(--color-text); --tree-menu-padding: 8px 0; --tree-menu-item-gap: 0px; --tree-menu-item-height: 40px; --tree-menu-item-padding: 0 16px; --tree-menu-item-border-radius: 0; --tree-menu-item-indent: 16px; --tree-menu-item-icon-size: 22px; --tree-menu-item-icon-margin-right: 24px; --tree-menu-item-label-font-size: var(--font-size-md); --tree-menu-item-label-line-height: 1.5; --tree-menu-group-label-height: 32px; --tree-menu-group-label-padding: 0 16px; --tree-menu-group-label-color: var(--color-on-surface-variant); --tree-menu-group-label-font-size: var(--font-size-sm); --tree-menu-divider-margin: 8px 0; --tree-menu-divider-color: rgba(0, 0, 0, 0.12); --tree-menu-item-hover-background: rgba(85, 85, 85, 0.06); --tree-menu-item-pressed-background: rgba(85, 85, 85, 0.1); --tree-menu-item-active-background: hsla(var(--hsl-primary), 0.1); --tree-menu-item-active-text-color: var(--color-primary); --tree-menu-item-disabled-opacity: var(--opacity-disabled); --tree-menu-item-indicator-border-radius: 0; --tree-menu-item-indicator-active-transition-duration: 0ms; --tree-menu-expand-icon-color: var(--color-on-surface-variant); --tree-menu-expand-icon-size: 20px;}.var-tree-menu { display: block; min-width: 0; padding: var(--tree-menu-padding); color: var(--tree-menu-item-text-color); background: var(--tree-menu-background); -webkit-tap-highlight-color: transparent; transition: color 0.25s, background-color 0.25s, border-color 0.25s;}.var-tree-menu--border { border-right: 1px solid var(--tree-menu-border-color);}.var-tree-menu__option + .var-tree-menu__option,.var-tree-menu__children > .var-tree-menu__option:first-child { margin-top: var(--tree-menu-item-gap);}.var-tree-menu__group-label { box-sizing: border-box; min-width: 0; height: var(--tree-menu-group-label-height); padding: var(--tree-menu-group-label-padding); display: flex; align-items: center; color: var(--tree-menu-group-label-color); font-size: var(--tree-menu-group-label-font-size); line-height: 1.5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.var-tree-menu__divider { height: 1px; margin: var(--tree-menu-divider-margin); background-color: var(--tree-menu-divider-color);}.var-tree-menu__item { position: relative; box-sizing: border-box; min-width: 0; height: var(--tree-menu-item-height); padding: var(--tree-menu-item-padding); display: flex; align-items: center; color: var(--tree-menu-item-text-color); cursor: pointer; overflow: hidden; border-radius: var(--tree-menu-item-border-radius); user-select: none; transition: color 0.25s;}.var-tree-menu__item-indicator { position: absolute; z-index: 0; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: var(--tree-menu-item-indicator-border-radius); transform: translate(-50%, -50%); pointer-events: none;}.var-tree-menu__item-indicator::before,.var-tree-menu__item-indicator::after { content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit;}.var-tree-menu__item-indicator::before { background-color: var(--tree-menu-item-hover-background); opacity: 0; transition: opacity 150ms, background-color 150ms;}.var-tree-menu__item-indicator::after { background: var(--tree-menu-item-active-background); transform: scaleX(0); transform-origin: center;}.var-tree-menu__item:hover .var-tree-menu__item-indicator::before { opacity: 1;}.var-tree-menu__item:active:not(.var-tree-menu--item-ripple-enabled):not(.var-tree-menu--item-disabled) .var-tree-menu__item-indicator::before { background-color: var(--tree-menu-item-pressed-background); opacity: 1;}.var-tree-menu--item-active,.var-tree-menu--item-active-path { color: var(--tree-menu-item-active-text-color);}.var-tree-menu--item-active .var-tree-menu__expand-icon,.var-tree-menu--item-active-path .var-tree-menu__expand-icon { color: var(--tree-menu-item-active-text-color);}.var-tree-menu--item-active .var-tree-menu__item-indicator::after { transform: scaleX(1); transition: transform var(--tree-menu-item-indicator-active-transition-duration) cubic-bezier(0.2, 0, 0, 1), background-color var(--tree-menu-item-indicator-active-transition-duration) cubic-bezier(0.2, 0, 0, 1);}.var-tree-menu--item-ripple-enabled.var-tree-menu--item-active .var-tree-menu__item-indicator::after { transition: none;}.var-tree-menu--item-active:hover .var-tree-menu__item-indicator::before { opacity: 0;}.var-tree-menu--item-disabled { cursor: not-allowed; opacity: var(--tree-menu-item-disabled-opacity);}.var-tree-menu--item-disabled:hover .var-tree-menu__item-indicator::before { opacity: 0;}.var-tree-menu__item-content { position: relative; z-index: 1; min-width: 0; flex: 1; margin-left: calc(var(--tree-menu-item-indent) * var(--tree-menu-level)); display: flex; align-items: center;}.var-tree-menu__icon-container { width: var(--tree-menu-item-icon-size); min-width: var(--tree-menu-item-icon-size); height: var(--tree-menu-item-icon-size); display: inline-flex; align-items: center; justify-content: center; margin-right: var(--tree-menu-item-icon-margin-right);}.var-tree-menu__icon { font-size: var(--tree-menu-item-icon-size);}.var-tree-menu__label { min-width: 0; height: var(--tree-menu-item-height); flex: 1; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--tree-menu-item-label-font-size); line-height: var(--tree-menu-item-label-line-height);}.var-tree-menu__expand-icon,.var-tree-menu__expand-placeholder { width: var(--tree-menu-expand-icon-size); min-width: var(--tree-menu-expand-icon-size); height: var(--tree-menu-expand-icon-size); margin-left: 8px;}.var-tree-menu__expand-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--tree-menu-expand-icon-color); font-size: var(--tree-menu-expand-icon-size); transform: rotate(-90deg); transition: color 0.25s, transform 0.25s;}.var-tree-menu--expand-icon-expanded { transform: rotate(0deg);}