@varlet/ui 1.27.20 → 2.0.0-alpha.1663742071515

package/es/style.js

@@ -60,5 +60,6 @@ import './tab-item/style'
 import './table/style'
 import './tabs/style'
 import './tabs-items/style'
+import './themes/style'
 import './time-picker/style'
 import './uploader/style'

package/es/switch/Switch.js

@@ -39,7 +39,8 @@ export function render(_ctx, _cache) {
     class: _normalizeClass(_ctx.classes(_ctx.n('handle'), 'var-elevation--2', [_ctx.modelValue === _ctx.activeValue, _ctx.n('handle--active')], [_ctx.errorMessage, _ctx.n('handle--error')]))
   }, [_ctx.loading ? (_openBlock(), _createBlock(_component_var_loading, {
     key: 0,
-    radius: _ctx.radius
+    radius: _ctx.radius,
+    color: "currentColor"
   }, null, 8
   /* PROPS */
   , ["radius"])) : _createCommentVNode("v-if", true)], 6
@@ -99,12 +100,12 @@ export default defineComponent({
         handle: {
           width: multiplySizeUnit(size),
           height: multiplySizeUnit(size),
-          backgroundColor: modelValue === activeValue ? color || '' : closeColor || '',
-          color: loadingColor && loadingColor
+          backgroundColor: modelValue === activeValue ? color : closeColor,
+          color: loadingColor
         },
         ripple: {
           left: modelValue === activeValue ? multiplySizeUnit(size, 0.5) : "-" + multiplySizeUnit(size, 0.5),
-          color: modelValue === activeValue ? color || '' : closeColor || '#999',
+          color: modelValue === activeValue ? color : closeColor || '#999',
           width: multiplySizeUnit(size, 2),
           height: multiplySizeUnit(size, 2)
         },
@@ -113,7 +114,7 @@ export default defineComponent({
           width: multiplySizeUnit(size, 1.9),
           borderRadius: multiplySizeUnit(size, 2 / 3),
           filter: modelValue === activeValue || errorMessage != null && errorMessage.value ? 'opacity(.6)' : 'brightness(.6)',
-          backgroundColor: modelValue === activeValue ? color || '' : closeColor || ''
+          backgroundColor: modelValue === activeValue ? color : closeColor
         },
         switch: {
           height: multiplySizeUnit(size, 1.2),

package/es/tabs/tabs.css

@@ -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: 10; 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-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-vertical { flex-direction: column;}.var-tabs--layout-vertical-scrollable { overflow-x: hidden; overflow-y: auto;}.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--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;}
+: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: 10; 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-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--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;}

package/es/tabs-items/TabsItems.js

@@ -1,8 +1,8 @@
 import VarSwipe from '../swipe';
 import { defineComponent, watch, ref } from 'vue';
 import { useTabItem } from './provide';
-import { props } from './props';
 import { call, createNamespace } from '../utils/components';
+import { props } from './props';
 var {
   n
 } = createNamespace('tabs-items');
@@ -94,6 +94,11 @@ export default defineComponent({
       });
       var active = (_tabItem$name$value = tabItem.name.value) != null ? _tabItem$name$value : tabItem.index.value;
       call(props['onUpdate:active'], active);
+    }; // expose
+
+
+    var getSwipe = () => {
+      return swipe.value;
     };
 
     var tabsItemsProvider = {};
@@ -103,7 +108,8 @@ export default defineComponent({
     return {
       swipe,
       n,
-      handleSwipeChange
+      handleSwipeChange,
+      getSwipe
     };
   }
 

package/es/themes/dark/cell.js

@@ -1,4 +1,4 @@
 export default {
-  '--cell-desc-color': '#aaa',
+  '--cell-description-color': '#aaa',
   '--cell-border-color': '#545454'
 };

package/es/themes/dark/index.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import actionSheet from './actionSheet';
 import badge from './badge';
@@ -29,6 +29,7 @@ import tabs from './tabs';
 import appBar from './appBar';
 import bottomNavigation from './bottomNavigation';
 import bottomNavigationItem from './bottomNavigationItem';
+import menu from './menu';
 export default _extends({
   // common
   '--color-body': '#1e1e1e',
@@ -40,4 +41,4 @@ export default _extends({
   '--color-danger': '#ef5350',
   '--color-disabled': '#404040',
   '--color-text-disabled': '#757575'
-}, button, cell, card, timePicker, datePicker, skeleton, tabs, tab, popup, dialog, actionSheet, chip, badge, uploader, collapse, pullRefresh, switchThemes, steps, pagination, table, input, select, radio, checkbox, divider, picker, appBar, bottomNavigation, bottomNavigationItem);
+}, button, cell, card, timePicker, datePicker, skeleton, tabs, tab, popup, dialog, actionSheet, chip, badge, uploader, collapse, pullRefresh, switchThemes, steps, pagination, table, input, select, radio, checkbox, divider, picker, appBar, bottomNavigation, bottomNavigationItem, menu);

package/es/themes/dark/menu.js

@@ -0,0 +1,3 @@
+export default {
+  '--menu-background-color': '#272727'
+};

package/es/themes/index.js

@@ -0,0 +1,4 @@
+import dark from './dark';
+export default {
+  dark
+};

package/es/time-picker/TimePicker.js

@@ -24,7 +24,7 @@ export function render(_ctx, _cache) {
   var _component_clock = _resolveComponent("clock");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.shadow, 'var-elevation--2'])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.elevation, 'var-elevation--2'])),
     ref: "picker"
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.n('title')),

package/es/time-picker/props.js

@@ -10,7 +10,7 @@ export var props = {
   modelValue: {
     type: String
   },
-  shadow: {
+  elevation: {
     type: Boolean,
     default: false
   },

package/es/umdIndex.js

@@ -60,6 +60,7 @@ import TabItem, * as TabItemModule from './tab-item'
 import Table, * as TableModule from './table'
 import Tabs, * as TabsModule from './tabs'
 import TabsItems, * as TabsItemsModule from './tabs-items'
+import Themes, * as ThemesModule from './themes'
 import TimePicker, * as TimePickerModule from './time-picker'
 import Uploader, * as UploaderModule from './uploader'
 
@@ -125,6 +126,7 @@ import './tab-item/style'
 import './table/style'
 import './tabs/style'
 import './tabs-items/style'
+import './themes/style'
 import './time-picker/style'
 import './uploader/style'
 
@@ -192,6 +194,7 @@ function install(app) {
   Table.install && app.use(Table)
   Tabs.install && app.use(Tabs)
   TabsItems.install && app.use(TabsItems)
+  Themes.install && app.use(Themes)
   TimePicker.install && app.use(TimePicker)
   Uploader.install && app.use(Uploader)
 }
@@ -260,6 +263,7 @@ export {
   Table,
   Tabs,
   TabsItems,
+  Themes,
   TimePicker,
   Uploader
 }
@@ -328,6 +332,7 @@ export default {
   Table,
   Tabs,
   TabsItems,
+  Themes,
   TimePicker,
   Uploader
 }

package/es/utils/components.js

@@ -6,7 +6,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import { createApp, h, getCurrentInstance, inject, onUnmounted, computed, provide, reactive, isVNode, onMounted, onBeforeUnmount, nextTick, ref, onActivated, onDeactivated } from 'vue';
 import { isArray, removeItem } from '@varlet/shared';
@@ -231,7 +231,7 @@ export function useValidation() {
     validateWithTrigger
   };
 }
-export function addRouteListener(cb) {
+export function useRouteListener(cb) {
   onMounted(() => {
     window.addEventListener('hashchange', cb);
     window.addEventListener('popstate', cb);

package/es/utils/jest.js

@@ -250,23 +250,4 @@ export function mockScrollTo(Element) {
       this.scrollTop = y;
     }
   };
-}
-export function mockIndexBarOwnTop() {
-  var originForEach = Array.prototype.forEach; // eslint-disable-next-line no-extend-native
-
-  Array.prototype.forEach = function (fn, thisArg) {
-    var changedArr = this.map((value, index) => {
-      if (value.ownTop && !value.ownTop.value) value.ownTop.value = (index + 1) * 50;
-      return value;
-    });
-    originForEach.call(changedArr, fn, thisArg);
-  };
-
-  return {
-    mockRestore() {
-      // eslint-disable-next-line no-extend-native
-      Array.prototype.forEach = originForEach;
-    }
-
-  };
 }