@varlet/ui 2.9.4-alpha.1680182061982 → 2.9.4-alpha.1680198474264

package/es/app-bar/AppBar.mjs

@@ -10,7 +10,7 @@ import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createT
 
 function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.round, _ctx.n('--round')], _ctx.formatElevation(_ctx.elevation, 3))),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.safeAreaTop, _ctx.n('--safe-area-top')], [_ctx.round, _ctx.n('--round')], _ctx.formatElevation(_ctx.elevation, 3))),
     style: _normalizeStyle(_ctx.rootStyles)
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.n('toolbar'))

package/es/app-bar/appBar.css

@@ -1 +1 @@
-:root { --app-bar-color: var(--color-primary); --app-bar-title-padding: 0 12px; --app-bar-title-font-size: var(--font-size-lg); --app-bar-text-color: #fff; --app-bar-height: 54px; --app-bar-left-gap: 6px; --app-bar-right-gap: 6px; --app-bar-border-radius: 4px; --app-bar-font-size: var(--font-size-lg);}.var-app-bar { position: relative; z-index: 0; width: 100%; font-size: var(--app-bar-font-size); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.var-app-bar__toolbar { position: relative; display: flex; justify-content: center; align-items: center; height: var(--app-bar-height);}.var-app-bar__title { font-size: var(--app-bar-title-font-size); flex: 1; display: flex; justify-content: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: var(--app-bar-title-padding);}.var-app-bar__left,.var-app-bar__right { display: flex; align-items: center; height: 100%; z-index: 2;}.var-app-bar__left { position: absolute; top: 0; left: var(--app-bar-left-gap);}.var-app-bar__right { position: absolute; top: 0; right: var(--app-bar-right-gap);}.var-app-bar--round { border-radius: var(--app-bar-border-radius);}
+:root { --app-bar-color: var(--color-primary); --app-bar-title-padding: 0 12px; --app-bar-title-font-size: var(--font-size-lg); --app-bar-text-color: #fff; --app-bar-height: 54px; --app-bar-left-gap: 6px; --app-bar-right-gap: 6px; --app-bar-border-radius: 4px; --app-bar-font-size: var(--font-size-lg);}.var-app-bar { position: relative; z-index: 0; width: 100%; font-size: var(--app-bar-font-size); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.var-app-bar__toolbar { position: relative; display: flex; justify-content: center; align-items: center; height: var(--app-bar-height);}.var-app-bar__title { font-size: var(--app-bar-title-font-size); flex: 1; display: flex; justify-content: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: var(--app-bar-title-padding);}.var-app-bar__left,.var-app-bar__right { display: flex; align-items: center; height: 100%; z-index: 2;}.var-app-bar__left { position: absolute; top: 0; left: var(--app-bar-left-gap);}.var-app-bar__right { position: absolute; top: 0; right: var(--app-bar-right-gap);}.var-app-bar--round { border-radius: var(--app-bar-border-radius);}.var-app-bar--safe-area-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); box-sizing: content-box !important;}

package/es/app-bar/props.mjs

@@ -30,5 +30,9 @@ export var props = {
   },
   imageLinearGradient: {
     type: String
+  },
+  safeAreaTop: {
+    type: Boolean,
+    default: false
   }
 };

package/es/bottom-navigation/BottomNavigation.mjs

@@ -26,7 +26,7 @@ function __render__(_ctx, _cache) {
   var _component_var_button = _resolveComponent("var-button");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.fixed, _ctx.n('--fixed')], [_ctx.border, _ctx.n('--border')], [_ctx.safeArea, _ctx.n('--safe-area')])),
+    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')])),
     ref: "bottomNavigationDom",
     style: _normalizeStyle("z-index:" + _ctx.zIndex)
   }, [_renderSlot(_ctx.$slots, "default"), _ctx.$slots.fab ? (_openBlock(), _createBlock(_component_var_button, _mergeProps({

package/es/bottom-navigation/bottomNavigation.css

@@ -1 +1 @@
-:root { --bottom-navigation-height: 50px; --bottom-navigation-z-index: 1; --bottom-navigation-background-color: #fff; --bottom-navigation-border-color: #e3e3e3; --bottom-navigation-fab-offset: 4px;}.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);}.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); 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);}
+:root { --bottom-navigation-height: 50px; --bottom-navigation-z-index: 1; --bottom-navigation-background-color: #fff; --bottom-navigation-border-color: #e3e3e3; --bottom-navigation-fab-offset: 4px;}.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); 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-item/BottomNavigationItem.mjs

@@ -23,7 +23,7 @@ function __render__(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
   return _withDirectives((_openBlock(), _createElementBlock("button", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.active === _ctx.index || _ctx.active === _ctx.name, _ctx.n('--active')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.active === _ctx.index || _ctx.active === _ctx.name, _ctx.n('--active')])),
     style: _normalizeStyle({
       color: _ctx.computeColorStyle()
     }),

package/es/collapse/Collapse.mjs

@@ -28,6 +28,7 @@ var __sfc__ = defineComponent({
     } = useCollapseItem();
     var active = computed(() => props.modelValue);
     var offset = computed(() => props.offset);
+    var divider = computed(() => props.divider);
     var elevation = computed(() => props.elevation);
 
     var checkValue = () => {
@@ -116,6 +117,7 @@ var __sfc__ = defineComponent({
     var collapseProvider = {
       active,
       offset,
+      divider,
       elevation,
       updateItem
     };
@@ -123,7 +125,8 @@ var __sfc__ = defineComponent({
     watch(() => length.value, () => nextTick().then(resize));
     watch(() => props.modelValue, () => nextTick().then(resize));
     return {
-      n
+      n,
+      divider
     };
   }
 

package/es/collapse/props.mjs

@@ -11,6 +11,10 @@ export var props = {
     type: Boolean,
     default: true
   },
+  divider: {
+    type: Boolean,
+    default: true
+  },
   elevation: {
     type: [Boolean, String, Number],
     default: true

package/es/collapse-item/CollapseItem.mjs

@@ -9,13 +9,14 @@ var {
   n,
   classes
 } = createNamespace('collapse-item');
-import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, vShow as _vShow, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, vShow as _vShow, withDirectives as _withDirectives, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 
 function __render__(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.offset && _ctx.isShow, _ctx.n('--active')], [_ctx.disabled, _ctx.n('--disable')]))
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.offset && _ctx.isShow, _ctx.n('--active')], [_ctx.disabled, _ctx.n('--disable')])),
+    style: _normalizeStyle("--collapse-divider-top: " + (_ctx.divider ? 'var(--collapse-border-top)' : 'none'))
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n('shadow'), _ctx.formatElevation(_ctx.elevation, 2)))
   }, null, 2
@@ -56,8 +57,8 @@ function __render__(_ctx, _cache) {
   /* CLASS */
   )], 34
   /* CLASS, HYDRATE_EVENTS */
-  ), [[_vShow, _ctx.showContent]])], 2
-  /* CLASS */
+  ), [[_vShow, _ctx.showContent]])], 6
+  /* CLASS, STYLE */
   );
 }
 
@@ -82,6 +83,7 @@ var __sfc__ = defineComponent({
     var {
       active,
       offset,
+      divider,
       elevation,
       updateItem
     } = collapse;
@@ -162,6 +164,7 @@ var __sfc__ = defineComponent({
       showContent,
       isShow,
       offset,
+      divider,
       elevation,
       toggle,
       contentEl,

package/es/collapse-item/collapseItem.css

@@ -1 +1 @@
-:root { --collapse-background: #fff; --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item__shadow { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1;}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-border-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item__header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item__header-title { transition: color 0.25s;}.var-collapse-item__header-icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item__header-open { transform: rotate(-180deg);}.var-collapse-item__header--disable { opacity: 0;}.var-collapse-item__content { display: flex; font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__content-wrap { padding: var(--collapse-content-padding); word-break: break-all; flex: 1;}.var-collapse-item--active + .var-collapse-item,.var-collapse-item--active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item--active + .var-collapse-item::after,.var-collapse-item--active:not(:first-child)::after { border-top: none;}.var-collapse-item--disable { color: var(--collapse-disable-color); cursor: not-allowed;}
+:root { --collapse-background: #fff; --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item__shadow { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1;}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-divider-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item__header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item__header-title { transition: color 0.25s;}.var-collapse-item__header-icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item__header-open { transform: rotate(-180deg);}.var-collapse-item__header--disable { opacity: 0;}.var-collapse-item__content { display: flex; font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__content-wrap { padding: var(--collapse-content-padding); word-break: break-all; flex: 1;}.var-collapse-item--active + .var-collapse-item,.var-collapse-item--active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item--active + .var-collapse-item::after,.var-collapse-item--active:not(:first-child)::after { border-top: none;}.var-collapse-item--disable { color: var(--collapse-disable-color); cursor: not-allowed;}

package/es/index-bar/IndexBar.mjs

@@ -68,7 +68,7 @@ var __sfc__ = defineComponent({
     var anchorNameList = ref([]);
     var active = ref();
     var sticky = computed(() => props.sticky);
-    var cssMode = computed(() => props.cssMode);
+    var cssMode = computed(() => props.stickyCssMode || props.cssMode);
     var stickyOffsetTop = computed(() => toPxNum(props.stickyOffsetTop));
     var zIndex = computed(() => props.zIndex);
     var scroller = null;

package/es/index-bar/props.mjs

@@ -8,10 +8,16 @@ export var props = {
     type: [String, Number],
     default: 0
   },
+
+  /** @deprecated Use stickyCssMode to instead. */
   cssMode: {
     type: Boolean,
     default: false
   },
+  stickyCssMode: {
+    type: Boolean,
+    default: false
+  },
   hideList: {
     type: Boolean,
     default: false

package/es/index.bundle.mjs

@@ -241,7 +241,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.9.4-alpha.1680182061982'
+const version = '2.9.4-alpha.1680198474264'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -160,7 +160,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.9.4-alpha.1680182061982'
+const version = '2.9.4-alpha.1680198474264'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/snackbar/style/index.mjs

@@ -1,8 +1,8 @@
 import '../../styles/common.css'
-import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../button/button.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
+import '../SnackbarSfc.css'