@varlet/ui 1.27.20 → 2.0.0-alpha.1663499244572

package/lib/style.js

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

package/lib/switch/Switch.js

@@ -55,7 +55,8 @@ function render(_ctx, _cache) {
     class: (0, _vue.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 ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_loading, {
     key: 0,
-    radius: _ctx.radius
+    radius: _ctx.radius,
+    color: "currentColor"
   }, null, 8
   /* PROPS */
   , ["radius"])) : (0, _vue.createCommentVNode)("v-if", true)], 6
@@ -116,12 +117,12 @@ var _default = (0, _vue.defineComponent)({
         handle: {
           width: (0, _elements.multiplySizeUnit)(size),
           height: (0, _elements.multiplySizeUnit)(size),
-          backgroundColor: modelValue === activeValue ? color || '' : closeColor || '',
-          color: loadingColor && loadingColor
+          backgroundColor: modelValue === activeValue ? color : closeColor,
+          color: loadingColor
         },
         ripple: {
           left: modelValue === activeValue ? (0, _elements.multiplySizeUnit)(size, 0.5) : "-" + (0, _elements.multiplySizeUnit)(size, 0.5),
-          color: modelValue === activeValue ? color || '' : closeColor || '#999',
+          color: modelValue === activeValue ? color : closeColor || '#999',
           width: (0, _elements.multiplySizeUnit)(size, 2),
           height: (0, _elements.multiplySizeUnit)(size, 2)
         },
@@ -130,7 +131,7 @@ var _default = (0, _vue.defineComponent)({
           width: (0, _elements.multiplySizeUnit)(size, 1.9),
           borderRadius: (0, _elements.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: (0, _elements.multiplySizeUnit)(size, 1.2),

package/lib/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/lib/tabs-items/TabsItems.js

@@ -10,10 +10,10 @@ var _vue = require("vue");
 
 var _provide = require("./provide");
 
-var _props = require("./props");
-
 var _components = require("../utils/components");
 
+var _props = require("./props");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var {
@@ -108,6 +108,11 @@ var _default = (0, _vue.defineComponent)({
       });
       var active = (_tabItem$name$value = tabItem.name.value) != null ? _tabItem$name$value : tabItem.index.value;
       (0, _components.call)(props['onUpdate:active'], active);
+    }; // expose
+
+
+    var getSwipe = () => {
+      return swipe.value;
     };
 
     var tabsItemsProvider = {};
@@ -117,7 +122,8 @@ var _default = (0, _vue.defineComponent)({
     return {
       swipe,
       n,
-      handleSwipeChange
+      handleSwipeChange,
+      getSwipe
     };
   }
 

package/lib/themes/dark/cell.js

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 var _default = {
-  '--cell-desc-color': '#aaa',
+  '--cell-description-color': '#aaa',
   '--cell-border-color': '#545454'
 };
 exports.default = _default;

package/lib/themes/dark/index.d.ts

@@ -1,5 +1,5 @@
-import { StyleVars } from '../../../types'
-
-declare const dark: StyleVars
-
-export default dark
+import { StyleVars } from '../../../types'
+
+declare const dark: StyleVars
+
+export default dark

package/lib/themes/dark/index.js

@@ -61,9 +61,11 @@ var _bottomNavigation = _interopRequireDefault(require("./bottomNavigation"));
 
 var _bottomNavigationItem = _interopRequireDefault(require("./bottomNavigationItem"));
 
+var _menu = _interopRequireDefault(require("./menu"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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); }
 
 var _default = _extends({
   // common
@@ -76,6 +78,6 @@ var _default = _extends({
   '--color-danger': '#ef5350',
   '--color-disabled': '#404040',
   '--color-text-disabled': '#757575'
-}, _button.default, _cell.default, _card.default, _timePicker.default, _datePicker.default, _skeleton.default, _tabs.default, _tab.default, _popup.default, _dialog.default, _actionSheet.default, _chip.default, _badge.default, _uploader.default, _collapse.default, _pullRefresh.default, _switch.default, _steps.default, _pagination.default, _table.default, _input.default, _select.default, _radio.default, _checkbox.default, _divider.default, _picker.default, _appBar.default, _bottomNavigation.default, _bottomNavigationItem.default);
+}, _button.default, _cell.default, _card.default, _timePicker.default, _datePicker.default, _skeleton.default, _tabs.default, _tab.default, _popup.default, _dialog.default, _actionSheet.default, _chip.default, _badge.default, _uploader.default, _collapse.default, _pullRefresh.default, _switch.default, _steps.default, _pagination.default, _table.default, _input.default, _select.default, _radio.default, _checkbox.default, _divider.default, _picker.default, _appBar.default, _bottomNavigation.default, _bottomNavigationItem.default, _menu.default);
 
 exports.default = _default;

package/lib/themes/dark/menu.js

@@ -0,0 +1,8 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--menu-background-color': '#272727'
+};
+exports.default = _default;

package/lib/themes/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _dark = _interopRequireDefault(require("./dark"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  dark: _dark.default
+};
+exports.default = _default;

package/lib/time-picker/TimePicker.js

@@ -6,7 +6,7 @@ exports.render = render;
 
 var _vue = require("vue");
 
-var _dayjs = _interopRequireDefault(require("dayjs"));
+var _esm = _interopRequireDefault(require("dayjs/esm"));
 
 var _clock = _interopRequireDefault(require("./clock.js"));
 
@@ -39,7 +39,7 @@ function render(_ctx, _cache) {
   var _component_clock = (0, _vue.resolveComponent)("clock");
 
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.shadow, 'var-elevation--2'])),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.elevation, 'var-elevation--2'])),
     ref: "picker"
   }, [(0, _vue.createElementVNode)("div", {
     class: (0, _vue.normalizeClass)(_ctx.n('title')),
@@ -231,9 +231,9 @@ var _default = (0, _vue.defineComponent)({
         second
       } = (0, _utils.getNumberTime)(value);
       return {
-        hour: (0, _dayjs.default)().hour(hour).format(hourFormat),
-        minute: (0, _dayjs.default)().minute(minute).format('mm'),
-        second: (0, _dayjs.default)().second(second).format('ss')
+        hour: (0, _esm.default)().hour(hour).format(hourFormat),
+        minute: (0, _esm.default)().minute(minute).format('mm'),
+        second: (0, _esm.default)().second(second).format('ss')
       };
     };
 
@@ -382,10 +382,10 @@ var _default = (0, _vue.defineComponent)({
           minute,
           second
         } = (0, _utils.getNumberTime)(value);
-        var formatHour12 = (0, _dayjs.default)().hour(hour).format('hh');
-        var formatHour24 = (0, _dayjs.default)().hour(hour).format('HH');
-        var formatMinute = (0, _dayjs.default)().minute(minute).format('mm');
-        var formatSecond = (0, _dayjs.default)().second(second).format('ss');
+        var formatHour12 = (0, _esm.default)().hour(hour).format('hh');
+        var formatHour24 = (0, _esm.default)().hour(hour).format('HH');
+        var formatMinute = (0, _esm.default)().minute(minute).format('mm');
+        var formatSecond = (0, _esm.default)().second(second).format('ss');
         hourRad.value = (formatHour12 === '12' ? 0 : (0, _shared.toNumber)(formatHour12)) * 30;
         minuteRad.value = (0, _shared.toNumber)(formatMinute) * 6;
         secondRad.value = (0, _shared.toNumber)(formatSecond) * 6;

package/lib/time-picker/clock.js

@@ -6,7 +6,7 @@ exports.render = render;
 
 var _vue = require("vue");
 
-var _dayjs = _interopRequireDefault(require("dayjs"));
+var _esm = _interopRequireDefault(require("dayjs/esm"));
 
 var _props = require("./props");
 
@@ -260,13 +260,13 @@ var _default = (0, _vue.defineComponent)({
       } = (0, _utils.convertHour)(props.format, props.ampm, props.time.hour);
 
       if (props.type === 'minute') {
-        var newMinute = (0, _dayjs.default)().minute(radToMinSec).format('mm');
+        var newMinute = (0, _esm.default)().minute(radToMinSec).format('mm');
         var second = props.useSeconds ? ":" + props.time.second : '';
         newTime = hourStr + ":" + newMinute + second;
       }
 
       if (props.type === 'second') {
-        var newSecond = (0, _dayjs.default)().second(radToMinSec).format('ss');
+        var newSecond = (0, _esm.default)().second(radToMinSec).format('ss');
 
         var _second = props.useSeconds ? ":" + newSecond : '';
 

package/lib/time-picker/props.js

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

package/lib/utils/components.js

@@ -1,7 +1,6 @@
 "use strict";
 
 exports.__esModule = true;
-exports.addRouteListener = addRouteListener;
 exports.call = call;
 exports.createNamespace = createNamespace;
 exports.exposeApis = exposeApis;
@@ -14,6 +13,7 @@ exports.useAtChildrenCounter = useAtChildrenCounter;
 exports.useAtParentIndex = useAtParentIndex;
 exports.useChildren = useChildren;
 exports.useParent = useParent;
+exports.useRouteListener = useRouteListener;
 exports.useTeleport = useTeleport;
 exports.useValidation = useValidation;
 
@@ -29,7 +29,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); }
 
 function pickProps(props, propsKey) {
   return Array.isArray(propsKey) ? propsKey.reduce((pickedProps, key) => {
@@ -262,7 +262,7 @@ function useValidation() {
   };
 }
 
-function addRouteListener(cb) {
+function useRouteListener(cb) {
   (0, _vue.onMounted)(() => {
     window.addEventListener('hashchange', cb);
     window.addEventListener('popstate', cb);

package/lib/utils/{jest.js → test.js}

@@ -7,7 +7,6 @@ exports.mockConsole = mockConsole;
 exports.mockDoubleRaf = mockDoubleRaf;
 exports.mockFileReader = mockFileReader;
 exports.mockImageNaturalSize = mockImageNaturalSize;
-exports.mockIndexBarOwnTop = mockIndexBarOwnTop;
 exports.mockOffset = mockOffset;
 exports.mockScrollTo = mockScrollTo;
 exports.mockStubs = mockStubs;
@@ -282,24 +281,4 @@ function mockScrollTo(Element) {
       this.scrollTop = y;
     }
   };
-}
-
-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;
-    }
-
-  };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "1.27.20",
+  "version": "2.0.0-alpha.1663499244572",
   "description": "A material like components library",
   "module": "es/index.js",
   "main": "lib/index.js",
@@ -26,7 +26,7 @@
   ],
   "author": "haoziqaq <357229046@qq.com>",
   "license": "MIT",
-  "homepage": "https://varlet-varletjs.vercel.app/",
+  "homepage": "https://varlet.gitee.io/varlet-ui/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/varletjs/varlet.git"
@@ -48,16 +48,20 @@
     "vue": "^3.2.0"
   },
   "dependencies": {
-    "@varlet/icons": "1.27.20",
-    "@varlet/shared": "1.27.20",
+    "@varlet/icons": "2.0.0-alpha.1663499244572",
+    "@varlet/shared": "2.0.0-alpha.1663499244572",
+    "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1"
   },
   "devDependencies": {
-    "@varlet/cli": "1.27.20",
-    "@varlet/touch-emulator": "1.27.20",
+    "@varlet/cli": "2.0.0-alpha.1663499244572",
+    "@varlet/touch-emulator": "2.0.0-alpha.1663499244572",
     "@vue/runtime-core": "3.2.25",
-    "@vue/test-utils": "2.0.0-rc.6",
+    "@vue/test-utils": "^2.0.2",
+    "@vitest/coverage-istanbul": "0.22.1",
+    "vitest": "0.22.1",
+    "jsdom": "^20.0.0",
     "clipboard": "^2.0.6",
     "live-server": "^1.2.1",
     "lodash-es": "^4.17.21",
@@ -76,8 +80,8 @@
     "preview": "varlet-cli preview",
     "compile": "varlet-cli compile",
     "create": "varlet-cli create",
-    "test": "varlet-cli jest",
-    "test:watch": "varlet-cli jest -w",
-    "test:watchAll": "varlet-cli jest -wa"
+    "test": "varlet-cli test",
+    "test:watch": "varlet-cli test -w",
+    "test:coverage": "varlet-cli test -cov"
   }
 }

package/types/actionSheet.d.ts

@@ -1,69 +1,68 @@
-import type { App, TeleportProps } from 'vue'
-import { VarComponent } from './varComponent'
-import type { BasicAttributes } from './varComponent'
-
-export interface ActionSheetProps extends BasicAttributes {
-  actions?: ActionItem[]
-  show?: boolean
-  title?: string
-  overlay?: boolean
-  overlayClass?: string
-  overlayStyle?: Record<string, any>
-  lockScroll?: boolean
-  closeOnClickAction?: boolean
-  closeOnClickOverlay?: boolean
-  teleport?: TeleportProps['to']
-  onOpen?: () => void
-  onOpened?: () => void
-  onClose?: () => void
-  onClosed?: () => void
-  onSelect?: (action: ActionItem) => void
-  onClickOverlay?: () => void
-  'onUpdate:show'?: (show: boolean) => void
-}
-
-export interface ActionItem {
-  name: string
-  color: string
-  icon: string
-  iconSize: string | number
-  className: string
-  disabled: boolean
-}
-
-export interface ActionSheetOptions {
-  actions: ActionItem[]
-  show?: boolean
-  title?: string
-  overlay?: boolean
-  overlayClass?: string
-  overlayStyle?: Record<string, any>
-  lockScroll?: boolean
-  closeOnClickAction?: boolean
-  closeOnClickOverlay?: boolean
-  onOpen?: () => void
-  onOpened?: () => void
-  onClose?: () => void
-  onClosed?: () => void
-  onClickOverlay?: () => void
-  onSelect?: (action: ActionItem) => void
-}
-
-export class ActionSheetComponent extends VarComponent {
-  $props: ActionSheetProps
-}
-
-export type ActionSheetActions = ActionItem | 'close'
-
-export interface IActionSheet {
-  (options: ActionSheetOptions): Promise<ActionSheetActions>
-  Component: typeof ActionSheetComponent
-
-  close(): void
-
-  install(app: App): void
-}
-
-export class _ActionSheetComponent extends ActionSheetComponent {}
-
-export const ActionSheet: IActionSheet
+import type { App, TeleportProps } from 'vue'
+import { VarComponent, BasicAttributes } from './varComponent'
+
+export interface ActionSheetProps extends BasicAttributes {
+  actions?: ActionItem[]
+  show?: boolean
+  title?: string
+  overlay?: boolean
+  overlayClass?: string
+  overlayStyle?: Record<string, any>
+  lockScroll?: boolean
+  closeOnClickAction?: boolean
+  closeOnClickOverlay?: boolean
+  teleport?: TeleportProps['to']
+  onOpen?: () => void
+  onOpened?: () => void
+  onClose?: () => void
+  onClosed?: () => void
+  onSelect?: (action: ActionItem) => void
+  onClickOverlay?: () => void
+  'onUpdate:show'?: (show: boolean) => void
+}
+
+export interface ActionItem {
+  name: string
+  color: string
+  icon: string
+  iconSize: string | number
+  className: string
+  disabled: boolean
+}
+
+export interface ActionSheetOptions {
+  actions: ActionItem[]
+  show?: boolean
+  title?: string
+  overlay?: boolean
+  overlayClass?: string
+  overlayStyle?: Record<string, any>
+  lockScroll?: boolean
+  closeOnClickAction?: boolean
+  closeOnClickOverlay?: boolean
+  onOpen?: () => void
+  onOpened?: () => void
+  onClose?: () => void
+  onClosed?: () => void
+  onClickOverlay?: () => void
+  onSelect?: (action: ActionItem) => void
+}
+
+export class ActionSheetComponent extends VarComponent {
+  $props: ActionSheetProps
+}
+
+export type ActionSheetActions = ActionItem | 'close'
+
+export interface IActionSheet {
+  (options: ActionSheetOptions): Promise<ActionSheetActions>
+  Component: typeof ActionSheetComponent
+
+  close(): void
+
+  install(app: App): void
+}
+
+export class _ActionSheetComponent extends ActionSheetComponent {}
+
+export const ActionSheet: IActionSheet

package/types/appBar.d.ts

@@ -1,16 +1,17 @@
-import { VarComponent } from './varComponent'
-import type { BasicAttributes } from './varComponent'
-
-export interface AppBarProps extends BasicAttributes {
-  color?: string
-  textColor?: string
-  title?: string
-  titlePosition?: 'left' | 'center' | 'right'
-  elevation?: boolean
-}
-
-export class AppBar extends VarComponent {
-  $props: AppBarProps
-}
-
-export class _AppBarComponent extends AppBar {}
+import { VarComponent, BasicAttributes } from './varComponent'
+
+export type AppBarTitlePosition = 'left' | 'center' | 'right'
+
+export interface AppBarProps extends BasicAttributes {
+  color?: string
+  textColor?: string
+  title?: string
+  titlePosition?: AppBarTitlePosition
+  elevation?: boolean
+}
+
+export class AppBar extends VarComponent {
+  $props: AppBarProps
+}
+
+export class _AppBarComponent extends AppBar {}

package/types/backTop.d.ts

@@ -1,17 +1,16 @@
-import { VarComponent } from './varComponent'
-import type { BasicAttributes } from './varComponent'
-
-export interface BackTopProps extends BasicAttributes {
-  visibilityHeight?: number | string
-  duration?: number
-  target?: string | HTMLElement
-  right?: number | string
-  bottom?: number | string
-  onClick?: (e: MouseEvent) => void
-}
-
-export class BackTop extends VarComponent {
-  $props: BackTopProps
-}
-
-export class _BackTopComponent extends BackTop {}
+import { VarComponent, BasicAttributes } from './varComponent'
+
+export interface BackTopProps extends BasicAttributes {
+  visibilityHeight?: number | string
+  duration?: number
+  target?: string | HTMLElement
+  right?: number | string
+  bottom?: number | string
+  onClick?: (e: MouseEvent) => void
+}
+
+export class BackTop extends VarComponent {
+  $props: BackTopProps
+}
+
+export class _BackTopComponent extends BackTop {}

package/types/badge.d.ts

@@ -1,19 +1,20 @@
-import { VarComponent } from './varComponent'
-import type { BasicAttributes } from './varComponent'
-
-export interface BadgeProps extends BasicAttributes {
-  type?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger'
-  hidden?: boolean
-  dot?: boolean
-  value?: string | number
-  maxValue?: string | number
-  color?: string
-  position?: 'right-top' | 'right-bottom' | 'left-top' | 'left-bottom'
-  icon?: string
-}
-
-export class Badge extends VarComponent {
-  $props: BadgeProps
-}
-
-export class _BadgeComponent extends Badge {}
+import { VarComponent, BasicAttributes, Type as BadgeType } from './varComponent'
+
+export type BadgePosition = 'right-top' | 'right-bottom' | 'left-top' | 'left-bottom'
+
+export interface BadgeProps extends BasicAttributes {
+  type?: BadgeType
+  hidden?: boolean
+  dot?: boolean
+  value?: string | number
+  maxValue?: string | number
+  color?: string
+  position?: BadgePosition
+  icon?: string
+}
+
+export class Badge extends VarComponent {
+  $props: BadgeProps
+}
+
+export class _BadgeComponent extends Badge {}