@varlet/ui 2.9.4 → 2.9.5-alpha.1680376695197

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 (14) hide show
  1. package/es/hover/index.mjs +5 -0
  2. package/es/index.bundle.mjs +1 -1
  3. package/es/index.mjs +1 -1
  4. package/es/style.css +1 -1
  5. package/es/tab/Tab.mjs +6 -10
  6. package/es/tabs/Tabs.mjs +7 -1
  7. package/es/tabs/tabs.css +1 -1
  8. package/es/varlet.esm.js +747 -749
  9. package/highlight/web-types.en-US.json +1 -1
  10. package/highlight/web-types.zh-CN.json +1 -1
  11. package/lib/style.css +1 -1
  12. package/lib/varlet.cjs.js +22 -14
  13. package/package.json +6 -6
  14. package/umd/varlet.js +5 -5
package/es/tab/Tab.mjs CHANGED
@@ -62,20 +62,16 @@ var __sfc__ = defineComponent({
62
62
  };
63
63
  bindTabs(tabProvider);
64
64
 
65
+ var shouldActive = () => {
66
+ return props.name != null && active.value === props.name || active.value === (index == null ? void 0 : index.value);
67
+ };
68
+
65
69
  var computeColorStyle = () => {
66
- var {
67
- disabled,
68
- name
69
- } = props;
70
- return disabled ? disabledColor.value : active.value === name || active.value === (index == null ? void 0 : index.value) ? activeColor.value : inactiveColor.value;
70
+ return props.disabled ? disabledColor.value : shouldActive() ? activeColor.value : inactiveColor.value;
71
71
  };
72
72
 
73
73
  var computeColorClass = () => {
74
- var {
75
- disabled,
76
- name
77
- } = props;
78
- return disabled ? n('$-tab--disabled') : active.value === name || active.value === (index == null ? void 0 : index.value) ? n('$-tab--active') : n('$-tab--inactive');
74
+ return props.disabled ? n('$-tab--disabled') : shouldActive() ? n('$-tab--active') : n('$-tab--inactive');
79
75
  };
80
76
 
81
77
  var handleClick = event => {
package/es/tabs/Tabs.mjs CHANGED
@@ -37,11 +37,17 @@ function __render__(_ctx, _cache) {
37
37
  style: _normalizeStyle({
38
38
  width: _ctx.layoutDirection === 'horizontal' ? _ctx.indicatorWidth : _ctx.toSizeUnit(_ctx.indicatorSize),
39
39
  height: _ctx.layoutDirection === 'horizontal' ? _ctx.toSizeUnit(_ctx.indicatorSize) : _ctx.indicatorHeight,
40
- transform: _ctx.layoutDirection === 'horizontal' ? "translateX(" + _ctx.indicatorX + ")" : "translateY(" + _ctx.indicatorY + ")",
40
+ transform: _ctx.layoutDirection === 'horizontal' ? "translateX(" + _ctx.indicatorX + ")" : "translateY(" + _ctx.indicatorY + ")"
41
+ })
42
+ }, [_createElementVNode("div", {
43
+ class: _normalizeClass(_ctx.classes(_ctx.n('indicator-inner'), _ctx.n("--layout-" + _ctx.layoutDirection + "-indicator-inner"))),
44
+ style: _normalizeStyle({
41
45
  background: _ctx.indicatorColor || _ctx.activeColor
42
46
  })
43
47
  }, null, 6
44
48
  /* CLASS, STYLE */
49
+ )], 6
50
+ /* CLASS, STYLE */
45
51
  )], 2
46
52
  /* CLASS */
47
53
  )], 16
package/es/tabs/tabs.css CHANGED
@@ -1 +1 @@
1
- :root { --tabs-item-horizontal-height: 44px; --tabs-item-vertical-height: 66px; --tabs-radius: 2px; --tabs-padding: 12px; --tabs-indicator-size: 2px; --tabs-indicator-background: var(--color-primary); --tabs-background: #fff;}.var-tabs { border-radius: var(--tabs-radius); background: var(--tabs-background); overflow: hidden; transition: background-color 0.25s;}.var-tabs__tab-wrap { position: relative; display: flex; height: 100%;}.var-tabs__indicator { position: absolute; z-index: 1; transition-property: width, transform; transition-duration: 0.3s;}.var-tabs--layout-horizontal { flex-direction: row;}.var-tabs--layout-horizontal-scrollable { overflow-x: auto; overflow-y: hidden;}.var-tabs--layout-horizontal-scrollable::-webkit-scrollbar { display: none;}.var-tabs--layout-horizontal-padding { padding: 0 var(--tabs-padding);}.var-tabs--layout-horizontal-indicator { left: 0; bottom: 0; height: var(--tabs-indicator-size); background: var(--tabs-indicator-background);}.var-tabs--layout-horizontal-reverse-indicator { left: 0; top: 0; height: var(--tabs-indicator-size); background: var(--tabs-indicator-background);}.var-tabs--layout-vertical { flex-direction: column;}.var-tabs--layout-vertical-scrollable { overflow-x: hidden; overflow-y: auto;}.var-tabs--layout-vertical-scrollable::-webkit-scrollbar { display: none;}.var-tabs--layout-vertical-padding { padding: 0;}.var-tabs--layout-vertical-indicator { left: 0; top: 0; width: var(--tabs-indicator-size); background: var(--tabs-indicator-background);}.var-tabs--layout-vertical-reverse-indicator { right: 0; top: 0; width: var(--tabs-indicator-size); background: var(--tabs-indicator-background);}.var-tabs--item-horizontal { height: var(--tabs-item-horizontal-height);}.var-tabs--item-vertical { height: var(--tabs-item-vertical-height);}.var-tabs--fixed-bottom { position: fixed; width: 100%; left: 0; bottom: 0; z-index: 99;}.var-tabs--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box !important;}
1
+ :root { --tabs-item-horizontal-height: 44px; --tabs-item-vertical-height: 66px; --tabs-radius: 2px; --tabs-padding: 12px; --tabs-indicator-size: 2px; --tabs-indicator-background: var(--color-primary); --tabs-background: #fff; --tabs-indicator-inner-size: 100%;}.var-tabs { border-radius: var(--tabs-radius); background: var(--tabs-background); overflow: hidden; transition: background-color 0.25s;}.var-tabs__tab-wrap { position: relative; display: flex; height: 100%;}.var-tabs__indicator { display: flex; justify-content: center; align-items: center; position: absolute; z-index: 1; transition-property: width, transform; transition-duration: 0.3s;}.var-tabs__indicator-inner { background: var(--tabs-indicator-background);}.var-tabs--layout-horizontal { flex-direction: row;}.var-tabs--layout-horizontal-scrollable { overflow-x: auto; overflow-y: hidden;}.var-tabs--layout-horizontal-scrollable::-webkit-scrollbar { display: none;}.var-tabs--layout-horizontal-padding { padding: 0 var(--tabs-padding);}.var-tabs--layout-horizontal-indicator { left: 0; bottom: 0; height: var(--tabs-indicator-size);}.var-tabs--layout-horizontal-reverse-indicator { left: 0; top: 0; height: var(--tabs-indicator-size);}.var-tabs--layout-horizontal-indicator-inner { width: var(--tabs-indicator-inner-size); height: 100%;}.var-tabs--layout-vertical { flex-direction: column;}.var-tabs--layout-vertical-scrollable { overflow-x: hidden; overflow-y: auto;}.var-tabs--layout-vertical-scrollable::-webkit-scrollbar { display: none;}.var-tabs--layout-vertical-padding { padding: 0;}.var-tabs--layout-vertical-indicator { left: 0; top: 0; width: var(--tabs-indicator-size);}.var-tabs--layout-vertical-reverse-indicator { right: 0; top: 0; width: var(--tabs-indicator-size);}.var-tabs--layout-vertical-indicator-inner { width: 100%; height: var(--tabs-indicator-inner-size);}.var-tabs--item-horizontal { height: var(--tabs-item-horizontal-height);}.var-tabs--item-vertical { height: var(--tabs-item-vertical-height);}.var-tabs--fixed-bottom { position: fixed; width: 100%; left: 0; bottom: 0; z-index: 99;}.var-tabs--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box !important;}