@varlet/ui 3.1.4 → 3.2.0-alpha.1710928822670

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 (32) hide show
  1. package/es/bottom-navigation/BottomNavigation.mjs +12 -1
  2. package/es/bottom-navigation/bottomNavigation.css +1 -1
  3. package/es/bottom-navigation/props.mjs +1 -0
  4. package/es/bottom-navigation-item/BottomNavigationItem.mjs +49 -16
  5. package/es/bottom-navigation-item/bottomNavigationItem.css +1 -1
  6. package/es/floating-panel/FloatingPanel.mjs +1 -1
  7. package/es/index.bundle.mjs +1 -1
  8. package/es/index.mjs +1 -1
  9. package/es/snackbar/style/index.mjs +1 -1
  10. package/es/style.css +1 -1
  11. package/es/table/Table.mjs +4 -3
  12. package/es/table/props.mjs +3 -0
  13. package/es/table/table.css +1 -1
  14. package/es/themes/dark/bottomNavigation.mjs +1 -0
  15. package/es/themes/dark/bottomNavigationItem.mjs +7 -1
  16. package/es/themes/dark/table.mjs +1 -0
  17. package/es/themes/md3-dark/bottomNavigation.mjs +1 -0
  18. package/es/themes/md3-dark/bottomNavigationItem.mjs +6 -1
  19. package/es/themes/md3-dark/table.mjs +1 -0
  20. package/es/themes/md3-light/bottomNavigation.mjs +1 -0
  21. package/es/themes/md3-light/bottomNavigationItem.mjs +7 -1
  22. package/es/themes/md3-light/table.mjs +1 -0
  23. package/es/varlet.esm.js +3379 -3308
  24. package/highlight/web-types.en-US.json +20 -2
  25. package/highlight/web-types.zh-CN.json +8163 -0
  26. package/lib/style.css +1 -1
  27. package/lib/varlet.cjs.js +96 -24
  28. package/package.json +7 -7
  29. package/types/bottomNavigation.d.ts +1 -0
  30. package/types/styleVars.d.ts +14 -0
  31. package/types/table.d.ts +1 -0
  32. package/umd/varlet.js +6 -6
package/es/bottom-navigation/BottomNavigation.mjs CHANGED
@@ -35,7 +35,16 @@ function __render__(_ctx, _cache) {
35
35
  return _openBlock(), _createElementBlock(
36
36
  "div",
37
37
  {
38
- class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.fixed, _ctx.n("--fixed")], [_ctx.border, _ctx.n("--border")], [_ctx.safeArea, _ctx.n("--safe-area")])),
38
+ class: _normalizeClass(
39
+ _ctx.classes(
40
+ _ctx.n(),
41
+ _ctx.n("$--box"),
42
+ [_ctx.fixed, _ctx.n("--fixed")],
43
+ [_ctx.border, _ctx.n("--border")],
44
+ [_ctx.safeArea, _ctx.n("--safe-area")],
45
+ [_ctx.variant, _ctx.n("--variant")]
46
+ )
47
+ ),
39
48
  ref: "bottomNavigationDom",
40
49
  style: _normalizeStyle(`z-index:${_ctx.zIndex}`)
41
50
  },
@@ -67,12 +76,14 @@ const __sfc__ = defineComponent({
67
76
  const active = computed(() => props2.active);
68
77
  const activeColor = computed(() => props2.activeColor);
69
78
  const inactiveColor = computed(() => props2.inactiveColor);
79
+ const variant = computed(() => props2.variant);
70
80
  const fabProps = ref({});
71
81
  const { length, bottomNavigationItems, bindBottomNavigationItem } = useBottomNavigationItems();
72
82
  const bottomNavigationProvider = {
73
83
  active,
74
84
  activeColor,
75
85
  inactiveColor,
86
+ variant,
76
87
  onToggle
77
88
  };
78
89
  bindBottomNavigationItem(bottomNavigationProvider);
package/es/bottom-navigation/bottomNavigation.css CHANGED
@@ -1 +1 @@
1
- :root { --bottom-navigation-height: 50px; --bottom-navigation-z-index: 1; --bottom-navigation-background-color: var(--color-surface-container-high); --bottom-navigation-border-color: var(--color-outline); --bottom-navigation-fab-offset: 4px; --bottom-navigation-fab-border-radius: 50%;}.var-bottom-navigation { width: 100%; height: var(--bottom-navigation-height); display: flex; position: relative; background-color: var(--bottom-navigation-background-color); transition: background-color 250ms, border-color 250ms; -webkit-tap-highlight-color: transparent;}.var-bottom-navigation--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box !important;}.var-bottom-navigation--fixed { position: fixed; left: 0; bottom: 0;}.var-bottom-navigation--border { border-top: 1px solid var(--bottom-navigation-border-color);}.var-bottom-navigation__fab[var-bottom-navigation__fab] { width: var(--bottom-navigation-height); height: var(--bottom-navigation-height); border-radius: var(--bottom-navigation-fab-border-radius); position: absolute; z-index: 2; transform: translateY(-50%); overflow: hidden; transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.var-bottom-navigation--fab-center { right: calc(50% - var(--bottom-navigation-height) / 2);}.var-bottom-navigation--fab-right { right: var(--bottom-navigation-fab-offset);}
1
+ :root { --bottom-navigation-height: 50px; --bottom-navigation-variant-height: 66px; --bottom-navigation-z-index: 1; --bottom-navigation-background-color: var(--color-surface-container-high); --bottom-navigation-border-color: var(--color-outline); --bottom-navigation-fab-offset: 4px; --bottom-navigation-fab-border-radius: 50%;}.var-bottom-navigation { width: 100%; height: var(--bottom-navigation-height); display: flex; position: relative; background-color: var(--bottom-navigation-background-color); transition: background-color 250ms, border-color 250ms; -webkit-tap-highlight-color: transparent;}.var-bottom-navigation--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box !important;}.var-bottom-navigation--fixed { position: fixed; left: 0; bottom: 0;}.var-bottom-navigation--border { border-top: 1px solid var(--bottom-navigation-border-color);}.var-bottom-navigation--variant { height: var(--bottom-navigation-variant-height);}.var-bottom-navigation__fab[var-bottom-navigation__fab] { width: var(--bottom-navigation-height); height: var(--bottom-navigation-height); border-radius: var(--bottom-navigation-fab-border-radius); position: absolute; z-index: 2; transform: translateY(-50%); overflow: hidden; transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.var-bottom-navigation--fab-center { right: calc(50% - var(--bottom-navigation-height) / 2);}.var-bottom-navigation--fab-right { right: var(--bottom-navigation-fab-offset);}
package/es/bottom-navigation/props.mjs CHANGED
@@ -10,6 +10,7 @@ const props = {
10
10
  },
11
11
  fixed: Boolean,
12
12
  border: Boolean,
13
+ variant: Boolean,
13
14
  safeArea: Boolean,
14
15
  activeColor: String,
15
16
  inactiveColor: String,
package/es/bottom-navigation-item/BottomNavigationItem.mjs CHANGED
@@ -11,7 +11,7 @@ const defaultBadgeProps = {
11
11
  type: "danger",
12
12
  dot: true
13
13
  };
14
- import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
14
+ import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, withCtx as _withCtx, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
15
15
  function __render__(_ctx, _cache) {
16
16
  const _component_var_icon = _resolveComponent("var-icon");
17
17
  const _component_var_badge = _resolveComponent("var-badge");
@@ -19,26 +19,58 @@ function __render__(_ctx, _cache) {
19
19
  return _withDirectives((_openBlock(), _createElementBlock(
20
20
  "button",
21
21
  {
22
- class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.isActive, _ctx.n("--active")])),
22
+ class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.variant, _ctx.n("--variant-padding")], [_ctx.isActive && !_ctx.variant, _ctx.n("--active")])),
23
23
  style: _normalizeStyle({
24
24
  color: _ctx.isActive ? _ctx.activeColor : _ctx.inactiveColor
25
25
  }),
26
26
  onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
27
27
  },
28
28
  [
29
- _renderSlot(_ctx.$slots, "icon", { active: _ctx.isActive }, () => [
30
- _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
31
- key: 0,
32
- name: _ctx.icon,
33
- namespace: _ctx.namespace,
34
- class: _normalizeClass(_ctx.n("icon")),
35
- "var-bottom-navigation-item-cover": ""
36
- }, null, 8, ["name", "namespace", "class"])) : _createCommentVNode("v-if", true)
37
- ]),
38
- _ctx.badge ? (_openBlock(), _createBlock(_component_var_badge, _mergeProps({ key: 0 }, _ctx.badgeProps, {
39
- class: _ctx.n("badge"),
40
- "var-bottom-navigation-item-cover": ""
41
- }), null, 16, ["class"])) : _createCommentVNode("v-if", true),
29
+ _createElementVNode(
30
+ "div",
31
+ {
32
+ class: _normalizeClass(
33
+ _ctx.classes(
34
+ _ctx.n("icon-container"),
35
+ [_ctx.variant, _ctx.n("--variant-icon-container")],
36
+ [_ctx.isActive && _ctx.variant, _ctx.n("--variant-active")]
37
+ )
38
+ )
39
+ },
40
+ [
41
+ _ctx.badge ? (_openBlock(), _createBlock(_component_var_badge, _mergeProps({ key: 0 }, _ctx.badgeProps, {
42
+ class: _ctx.n("badge"),
43
+ "var-bottom-navigation-item-cover": ""
44
+ }), {
45
+ default: _withCtx(() => [
46
+ _renderSlot(_ctx.$slots, "icon", { active: _ctx.isActive }, () => [
47
+ _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
48
+ key: 0,
49
+ name: _ctx.icon,
50
+ namespace: _ctx.namespace,
51
+ class: _normalizeClass(_ctx.n("icon")),
52
+ "var-bottom-navigation-item-cover": ""
53
+ }, null, 8, ["name", "namespace", "class"])) : _createCommentVNode("v-if", true)
54
+ ])
55
+ ]),
56
+ _: 3
57
+ /* FORWARDED */
58
+ }, 16, ["class"])) : _renderSlot(_ctx.$slots, "icon", {
59
+ key: 1,
60
+ active: _ctx.isActive
61
+ }, () => [
62
+ _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
63
+ key: 0,
64
+ name: _ctx.icon,
65
+ namespace: _ctx.namespace,
66
+ class: _normalizeClass(_ctx.n("icon")),
67
+ "var-bottom-navigation-item-cover": ""
68
+ }, null, 8, ["name", "namespace", "class"])) : _createCommentVNode("v-if", true)
69
+ ])
70
+ ],
71
+ 2
72
+ /* CLASS */
73
+ ),
42
74
  _createElementVNode(
43
75
  "span",
44
76
  {
@@ -76,7 +108,7 @@ const __sfc__ = defineComponent({
76
108
  const isActive = computed(() => [name2.value, index.value].includes(active.value));
77
109
  const badgeProps = computed(() => props2.badge === true ? defaultBadgeProps : props2.badge);
78
110
  const { index, bottomNavigation, bindBottomNavigation } = useBottomNavigation();
79
- const { active, activeColor, inactiveColor } = bottomNavigation;
111
+ const { active, activeColor, inactiveColor, variant } = bottomNavigation;
80
112
  const bottomNavigationItemProvider = {
81
113
  name: name2,
82
114
  index
@@ -93,6 +125,7 @@ const __sfc__ = defineComponent({
93
125
  inactiveColor,
94
126
  badgeProps,
95
127
  isActive,
128
+ variant,
96
129
  n,
97
130
  classes,
98
131
  handleClick
package/es/bottom-navigation-item/bottomNavigationItem.css CHANGED
@@ -1 +1 @@
1
- :root { --bottom-navigation-item-font-size: var(--font-size-sm); --bottom-navigation-item-inactive-color: #646566; --bottom-navigation-item-active-color: var(--color-primary); --bottom-navigation-item-active-background-color: var(--color-surface-container-high); --bottom-navigation-item-line-height: 1; --bottom-navigation-item-icon-size: 22px; --bottom-navigation-item-icon-margin-bottom: 5px;}.var-bottom-navigation-item { height: 100%; padding: 6px 12px 8px; position: relative; display: inline-flex; flex: 1 1 0%; flex-direction: column; align-items: center; justify-content: center; line-height: var(--bottom-navigation-item-line-height); color: var(--bottom-navigation-item-inactive-color); cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; background-color: transparent; outline: 0; border: 0; transition: color 250ms, margin 250ms;}.var-bottom-navigation-item--active { color: var(--bottom-navigation-item-active-color); background-color: var(--bottom-navigation-item-active-background-color); transition: background-color 250ms;}.var-bottom-navigation-item--active .var-bottom-navigation-item__label { font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);}.var-bottom-navigation-item--right-half-space { margin-right: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--left-half-space { margin-left: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--right-space { margin-right: calc(var(--bottom-navigation-height) + var(--bottom-navigation-fab-offset));}.var-bottom-navigation-item__icon[var-bottom-navigation-item-cover] { font-size: var(--bottom-navigation-item-icon-size);}.var-bottom-navigation-item__badge[var-bottom-navigation-item-cover] { position: absolute; left: 4px; transform: translateY(-22px);}.var-bottom-navigation-item__label { margin-top: var(--bottom-navigation-item-icon-margin-bottom); font-size: var(--bottom-navigation-item-font-size); transition: font-size 0.2s ease 0.1s; white-space: nowrap;}
1
+ :root { --bottom-navigation-item-font-size: var(--font-size-sm); --bottom-navigation-item-inactive-color: #646566; --bottom-navigation-item-active-color: var(--color-primary); --bottom-navigation-item-active-background-color: var(--color-surface-container-high); --bottom-navigation-item-variant-active-background-color: var(--color-primary-container); --bottom-navigation-item-variant-active-color: var(--color-on-primary-container); --bottom-navigation-item-line-height: 1; --bottom-navigation-item-icon-size: 22px; --bottom-navigation-item-icon-margin-bottom: 5px; --bottom-navigation-item-variant-icon-container-height: 30px; --bottom-navigation-item-variant-icon-container-border-radius: 100px; --bottom-navigation-item-variant-icon-container-max-width: 58px;}.var-bottom-navigation-item { height: 100%; padding-bottom: 2px; position: relative; display: inline-flex; flex: 1 1 0%; flex-direction: column; align-items: center; justify-content: center; line-height: var(--bottom-navigation-item-line-height); color: var(--bottom-navigation-item-inactive-color); cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; background-color: transparent; outline: 0; border: 0; transition: color 250ms, margin 250ms;}.var-bottom-navigation-item--variant-padding { padding-bottom: 6px;}.var-bottom-navigation-item--active { color: var(--bottom-navigation-item-active-color); background-color: var(--bottom-navigation-item-active-background-color); transition: background-color 250ms;}.var-bottom-navigation-item--active .var-bottom-navigation-item__label { font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);}.var-bottom-navigation-item--variant-icon-container { display: flex; justify-content: center; align-items: center; width: 0; height: var(--bottom-navigation-item-variant-icon-container-height); border-radius: var(--bottom-navigation-item-variant-icon-container-border-radius); max-width: var(--bottom-navigation-item-variant-icon-container-max-width);}.var-bottom-navigation-item--variant-active { color: var(--bottom-navigation-item-variant-active-color); background-color: var(--bottom-navigation-item-variant-active-background-color); width: 100%; transition: background-color 0.2s, width 0.15s;}.var-bottom-navigation-item--right-half-space { margin-right: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--left-half-space { margin-left: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--right-space { margin-right: calc(var(--bottom-navigation-height) + var(--bottom-navigation-fab-offset));}.var-bottom-navigation-item__icon[var-bottom-navigation-item-cover] { font-size: var(--bottom-navigation-item-icon-size);}.var-bottom-navigation-item__badge[var-bottom-navigation-item-cover] { margin-top: 6px; margin-right: -4px;}.var-bottom-navigation-item__label { margin-top: var(--bottom-navigation-item-icon-margin-bottom); font-size: var(--bottom-navigation-item-font-size); transition: font-size 0.2s ease 0.1s; white-space: nowrap;}
package/es/floating-panel/FloatingPanel.mjs CHANGED
@@ -76,7 +76,7 @@ const __sfc__ = defineComponent({
76
76
  const contentRef = ref(null);
77
77
  const { height: windowHeight } = useWindowSize();
78
78
  const defaultEndAnchor = computed(() => windowHeight.value * 0.6);
79
- const anchor = useVModel(props2, "anchor");
79
+ const anchor = useVModel(props2, "anchor", { defaultValue: DEFAULT_START_ANCHOR });
80
80
  const anchors = computed(() => {
81
81
  const defaultAnchors = [DEFAULT_START_ANCHOR, defaultEndAnchor.value];
82
82
  const { anchors: anchors2 } = props2;
package/es/index.bundle.mjs CHANGED
@@ -262,7 +262,7 @@ import './tooltip/style/index.mjs'
262
262
  import './uploader/style/index.mjs'
263
263
  import './watermark/style/index.mjs'
264
264
 
265
- const version = '3.1.4'
265
+ const version = '3.2.0-alpha.1710928822670'
266
266
 
267
267
  function install(app) {
268
268
  ActionSheet.install && app.use(ActionSheet)
package/es/index.mjs CHANGED
@@ -174,7 +174,7 @@ export * from './tooltip/index.mjs'
174
174
  export * from './uploader/index.mjs'
175
175
  export * from './watermark/index.mjs'
176
176
 
177
- const version = '3.1.4'
177
+ const version = '3.2.0-alpha.1710928822670'
178
178
 
179
179
  function install(app) {
180
180
  ActionSheet.install && app.use(ActionSheet)
package/es/snackbar/style/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import '../../styles/common.css'
2
- import '../SnackbarSfc.css'
3
2
  import '../../styles/elevation.css'
4
3
  import '../../loading/loading.css'
5
4
  import '../../icon/icon.css'
6
5
  import '../snackbar.css'
7
6
  import '../coreSfc.css'
7
+ import '../SnackbarSfc.css'