@varlet/ui 2.4.0-alpha.1670569085974 → 2.4.0-alpha.1670766368590

package/es/app-bar/AppBar.js

@@ -8,7 +8,7 @@ var {
 import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode } from "vue";
 export function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.elevation, _ctx.n('$-elevation--3')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.round, _ctx.n('--round')], [_ctx.elevation, _ctx.n('$-elevation--3')])),
     style: _normalizeStyle({
       background: _ctx.color,
       color: _ctx.textColor

package/es/app-bar/appBar.css

@@ -1 +1 @@
-:root { --app-bar-color: var(--color-primary); --app-bar-title-padding: 0 12px; --app-bar-text-color: #fff; --app-bar-height: 54px; --app-bar-left-gap: 6px; --app-bar-right-gap: 6px;}.var-app-bar { position: relative; display: flex; width: 100%; justify-content: center; align-items: center; height: var(--app-bar-height); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.var-app-bar__title { 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);}
+:root { --app-bar-color: var(--color-primary); --app-bar-title-padding: 0 12px; --app-bar-text-color: #fff; --app-bar-height: 54px; --app-bar-left-gap: 6px; --app-bar-right-gap: 6px; --app-bar-border-radius: 4px;}.var-app-bar { position: relative; display: flex; width: 100%; justify-content: center; align-items: center; height: var(--app-bar-height); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.var-app-bar__title { 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);}

package/es/app-bar/props.js

@@ -20,5 +20,9 @@ export var props = {
   elevation: {
     type: Boolean,
     default: true
+  },
+  round: {
+    type: Boolean,
+    default: false
   }
 };

package/es/index.js

@@ -35,6 +35,7 @@ import LoadingBar, * as LoadingBarModule from './loading-bar'
 import Locale, * as LocaleModule from './locale'
 import Menu, * as MenuModule from './menu'
 import Option, * as OptionModule from './option'
+import Overlay, * as OverlayModule from './overlay'
 import Pagination, * as PaginationModule from './pagination'
 import Picker, * as PickerModule from './picker'
 import Popup, * as PopupModule from './popup'
@@ -104,6 +105,7 @@ export const _LoadingBarComponent = LoadingBarModule._LoadingBarComponent || {}
 export const _LocaleComponent = LocaleModule._LocaleComponent || {}
 export const _MenuComponent = MenuModule._MenuComponent || {}
 export const _OptionComponent = OptionModule._OptionComponent || {}
+export const _OverlayComponent = OverlayModule._OverlayComponent || {}
 export const _PaginationComponent = PaginationModule._PaginationComponent || {}
 export const _PickerComponent = PickerModule._PickerComponent || {}
 export const _PopupComponent = PopupModule._PopupComponent || {}
@@ -175,6 +177,7 @@ function install(app) {
   Locale.install && app.use(Locale)
   Menu.install && app.use(Menu)
   Option.install && app.use(Option)
+  Overlay.install && app.use(Overlay)
   Pagination.install && app.use(Pagination)
   Picker.install && app.use(Picker)
   Popup.install && app.use(Popup)
@@ -247,6 +250,7 @@ export {
   Locale,
   Menu,
   Option,
+  Overlay,
   Pagination,
   Picker,
   Popup,
@@ -319,6 +323,7 @@ export default {
   Locale,
   Menu,
   Option,
+  Overlay,
   Pagination,
   Picker,
   Popup,

package/es/loading-bar/LoadingBar.js

@@ -23,7 +23,8 @@ export default defineComponent({
           width: props.value + "%",
           opacity: props.opacity,
           height: toSizeUnit(props.height),
-          backgroundColor: props.error ? props.errorColor : props.color
+          backgroundColor: props.error ? props.errorColor : props.color,
+          top: toSizeUnit(props.top)
         }
       }, null);
     };

package/es/loading-bar/index.js

@@ -9,7 +9,7 @@ var props = reactive({
   error: false
 });
 
-var LoadingBar = options => {
+var mergeConfig = options => {
   Object.assign(props, options);
 };
 
@@ -23,7 +23,7 @@ var changeValue = () => {
   }, 200);
 };
 
-LoadingBar.start = () => {
+var start = () => {
   if (!isMount) {
     isMount = true;
     mountInstance(LoadingBarComponent, props);
@@ -39,7 +39,7 @@ LoadingBar.start = () => {
   changeValue();
 };
 
-LoadingBar.finish = () => {
+var finish = () => {
   props.value = 100;
   setTimeout(() => {
     props.opacity = 0;
@@ -50,11 +50,17 @@ LoadingBar.finish = () => {
   window.clearTimeout(timer);
 };
 
-LoadingBar.error = () => {
+var error = () => {
   props.error = true;
   LoadingBar.start();
   setTimeout(LoadingBar.finish, 300);
 };
 
+var LoadingBar = {
+  start,
+  finish,
+  error,
+  mergeConfig
+};
 export var _LoadingBarComponent = LoadingBar;
 export default LoadingBar;

package/es/loading-bar/props.js

@@ -19,5 +19,8 @@ export var props = {
   },
   height: {
     type: [Number, String]
+  },
+  top: {
+    type: [Number, String]
   }
 };

package/es/overlay/Overlay.js

@@ -0,0 +1,83 @@
+import { isVNode as _isVNode, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { defineComponent, Teleport, Transition } from 'vue';
+import { props } from './props';
+import { useLock } from '../context/lock';
+import { useZIndex } from '../context/zIndex';
+import { createNamespace, useTeleport, call } from '../utils/components';
+
+
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
+
+var {
+  n
+} = createNamespace('overlay');
+export default defineComponent({
+  name: 'VarOverlay',
+  inheritAttrs: false,
+  props,
+
+  setup(props, _ref) {
+    var {
+      slots,
+      attrs
+    } = _ref;
+    var {
+      zIndex
+    } = useZIndex(() => props.show, 1);
+    var {
+      disabled
+    } = useTeleport();
+
+    var handleClickOverlay = () => {
+      call(props.onClick);
+      call(props['onUpdate:show'], false);
+    };
+
+    useLock(() => props.show, () => props.lockScroll);
+
+    var renderOverlay = () => {
+      return _createVNode("div", _mergeProps({
+        "class": n(),
+        "style": {
+          zIndex: zIndex.value - 1
+        }
+      }, attrs, {
+        "onClick": handleClickOverlay
+      }), [call(slots.default)]);
+    };
+
+    var renderTransitionOverlay = () => {
+      var {
+        show
+      } = props;
+      return _createVNode(Transition, {
+        "name": n('--fade')
+      }, {
+        default: () => [show && renderOverlay()]
+      });
+    };
+
+    return () => {
+      var {
+        teleport
+      } = props;
+
+      if (teleport) {
+        var _slot;
+
+        return _createVNode(Teleport, {
+          "to": teleport,
+          "disabled": disabled.value
+        }, _isSlot(_slot = renderTransitionOverlay()) ? _slot : {
+          default: () => [_slot]
+        });
+      }
+
+      return renderTransitionOverlay();
+    };
+  }
+
+});

package/es/overlay/index.js

@@ -0,0 +1,8 @@
+import Overlay from './Overlay';
+
+Overlay.install = function (app) {
+  app.component(Overlay.name, Overlay);
+};
+
+export var _PopupComponent = Overlay;
+export default Overlay;

package/es/overlay/overlay.css

@@ -0,0 +1 @@
+:root { --overlay-background-color: rgba(0, 0, 0, 0.6);}.var-overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--overlay-background-color); transition: all 0.25s;}.var-overlay--fade-enter-from,.var-overlay--fade-leave-to { opacity: 0;}.var-overlay--fade-enter-active,.var-overlay--fade-leave-active { transition: opacity 0.25s;}

package/es/overlay/props.js

@@ -0,0 +1,19 @@
+export var props = {
+  show: {
+    type: Boolean,
+    default: false
+  },
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
+  onClick: {
+    type: Function
+  },
+  teleport: {
+    type: String
+  },
+  'onUpdate:show': {
+    type: Function
+  }
+};

package/es/overlay/style/index.js

@@ -0,0 +1,2 @@
+import '../../styles/common.css'
+import '../overlay.css'

package/es/popup/popup.css

@@ -1 +1 @@
-:root { --popup-overlay-background-color: rgba(0, 0, 0, 0.6); --popup-content-background-color: #fff;}.var-fade-enter-from,.var-fade-leave-to { opacity: 0;}.var-fade-enter-active,.var-fade-leave-active { transition: opacity 0.25s;}.var-pop-center-enter-from,.var-pop-center-leave-to { transform: scale(0.3);}.var-pop-center-enter-active,.var-pop-center-leave-active { transition: all 0.25s;}.var-pop-bottom-enter-from,.var-pop-bottom-leave-to { transform: translateY(100%);}.var-pop-bottom-enter-active,.var-pop-bottom-leave-active { transition: all 0.25s;}.var-pop-top-enter-from,.var-pop-top-leave-to { transform: translateY(-100%);}.var-pop-top-enter-active,.var-pop-top-leave-active { transition: all 0.25s;}.var-pop-left-enter-from,.var-pop-left-leave-to { transform: translateX(-100%);}.var-pop-left-enter-active,.var-pop-left-leave-active { transition: all 0.25s;}.var-pop-right-enter-from,.var-pop-right-leave-to { transform: translateX(100%);}.var-pop-right-enter-active,.var-pop-right-leave-active { transition: all 0.25s;}.var-popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0;}.var-popup__overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--popup-overlay-background-color); transition: all 0.25s;}.var-popup__content { overflow: auto; transition: all 0.25s;}.var-popup--content-background-color { background-color: var(--popup-content-background-color);}.var-popup--center { position: relative;}.var-popup--bottom { min-width: 100%; position: absolute; left: 0; bottom: 0;}.var-popup--top { min-width: 100%; position: absolute; left: 0; top: 0;}.var-popup--left { min-height: 100%; position: absolute; left: 0; top: 0;}.var-popup--right { min-height: 100%; position: absolute; right: 0; top: 0;}
+:root { --popup-content-background-color: #fff; --popup-overlay-background-color: rgba(0, 0, 0, 0.6);}.var-fade-enter-from,.var-fade-leave-to { opacity: 0;}.var-fade-enter-active,.var-fade-leave-active { transition: opacity 0.25s;}.var-pop-center-enter-from,.var-pop-center-leave-to { transform: scale(0.3);}.var-pop-center-enter-active,.var-pop-center-leave-active { transition: all 0.25s;}.var-pop-bottom-enter-from,.var-pop-bottom-leave-to { transform: translateY(100%);}.var-pop-bottom-enter-active,.var-pop-bottom-leave-active { transition: all 0.25s;}.var-pop-top-enter-from,.var-pop-top-leave-to { transform: translateY(-100%);}.var-pop-top-enter-active,.var-pop-top-leave-active { transition: all 0.25s;}.var-pop-left-enter-from,.var-pop-left-leave-to { transform: translateX(-100%);}.var-pop-left-enter-active,.var-pop-left-leave-active { transition: all 0.25s;}.var-pop-right-enter-from,.var-pop-right-leave-to { transform: translateX(100%);}.var-pop-right-enter-active,.var-pop-right-leave-active { transition: all 0.25s;}.var-popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0;}.var-popup__overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--popup-overlay-background-color); transition: all 0.25s;}.var-popup__content { overflow: auto; transition: all 0.25s;}.var-popup--content-background-color { background-color: var(--popup-content-background-color);}.var-popup--center { position: relative;}.var-popup--bottom { min-width: 100%; position: absolute; left: 0; bottom: 0;}.var-popup--top { min-width: 100%; position: absolute; left: 0; top: 0;}.var-popup--left { min-height: 100%; position: absolute; left: 0; top: 0;}.var-popup--right { min-height: 100%; position: absolute; right: 0; top: 0;}

package/es/result/result.css

@@ -1 +1 @@
-:root { --result-background: #fff; --result-padding: 24px; --result-border-radius: 3px; --result-title-color: #444; --result-title-font-size: 32px; --result-title-margin: 15px 0 0 0; --result-image-size: 80px; --result-title-font-weight: 500; --result-description-margin: 10px 0 0 0; --result-description-font-size: 14px; --result-description-color: rgba(0, 0, 0, 0.6); --result-description-line-height: 1.6; --result-info-color: var(--color-info); --result-info-border-color: rgba(0, 175, 239, 0.3); --result-success-color: var(--color-success); --result-success-border-color: rgba(0, 196, 143, 0.3); --result-error-color: var(--color-danger); --result-error-border-color: rgba(244, 67, 54, 0.3); --result-warning-color: var(--color-warning); --result-warning-border-color: rgba(255, 159, 0, 0.3); --result-question-color: #607d8b; --result-question-border-color: rgba(96, 125, 139, 0.3); --result-empty-color: #9e9e9e; --result-empty-border-color: rgba(158, 158, 158, 0.3);}.var-result { display: flex; flex-direction: column; align-items: center; border-radius: var(--result-border-radius); width: 100%; padding: var(--result-padding); background-color: var(--result-background); transition: background-color 0.25s;}.var-result__image-container { overflow: hidden;}.var-result__image { margin: 0 auto; position: relative; border-radius: 50%; box-sizing: content-box; border-style: solid; border-color: transparent; width: var(--result-image-size); height: var(--result-image-size); display: flex; justify-content: center; align-items: center;}.var-result__image svg { margin: 0 auto; display: block; width: 100%; height: 100%;}.var-result__info { border-color: var(--result-info-border-color);}.var-result__info path { fill: var(--result-info-color);}.var-result__empty { border-color: var(--result-empty-border-color);}.var-result__empty path { fill: var(--result-empty-color);}.var-result__question { border-color: var(--result-question-border-color);}.var-result__question path { fill: var(--result-question-color);}.var-result__error { border-color: var(--result-error-border-color);}.var-result__error path { fill: var(--result-error-color);}.var-result__warning { border-color: var(--result-warning-border-color);}.var-result__warning path { fill: var(--result-warning-color);}.var-result__success { border-color: var(--result-success-color);}.var-result__success-cover-left { display: block; position: absolute; z-index: 1; top: -0.875%; left: -41.27%; width: 75%; height: 150%; border-radius: 150% 0 0 150%; transform: rotate(-45deg); background: var(--result-background); transition: background-color 0.25s;}.var-result__success-cover-right { display: block; position: absolute; top: -13.75%; left: 37.5%; width: 75%; height: 150%; border-radius: 0 125% 125% 0; animation-name: rotate-circle; animation-timing-function: ease-in; transform-origin: 0 50%; transform: rotate(-45deg); background: var(--result-background); transition: background-color 0.25s;}.var-result__success-line { height: 6.8%; background-color: var(--result-success-color); display: block; position: absolute; z-index: 10; transition: background-color 0.25s;}.var-result__success-line-tip { transform: rotate(45deg); animation-name: success-line-tip; animation-fill-mode: forwards;}.var-result__success-line-long { transform: rotate(-45deg); animation-name: success-line-long; animation-fill-mode: forwards;}.var-result__success-circle { z-index: 10; width: 100%; height: 100%; border-radius: 50%; position: absolute; box-sizing: content-box !important; border-style: solid; border-color: var(--result-success-border-color);}.var-result__success-line-fix { top: 10%; left: 32.5%; width: 8.75%; height: 112.5%; z-index: 1; position: absolute; transform: rotate(-45deg); background: var(--result-background); transition: background-color 0.25s;}@keyframes success-line-tip { 0% { top: 23.75%; left: 1.25%; width: 0; } 54% { top: 20.25%; left: 1%; width: 0; } 70% { top: 43.75%; left: -9.5%; width: 62.5%; } 84% { top: 60%; left: 26.25%; width: 21.25%; } 100% { top: 56.25%; left: 17.5%; width: 31.25%; }}@keyframes success-line-long { 0% { top: 67.5%; right: 57.5%; width: 0; } 65% { top: 67.5%; right: 57.5%; width: 0; } 84% { top: 43.75%; right: 0; width: 68.75%; } 100% { top: 47%; right: 9%; width: 58.75%; }}@keyframes rotate-circle { 0% { transform: rotate(-45deg); } 5% { transform: rotate(-45deg); } 12% { transform: rotate(-405deg); } 100% { transform: rotate(-405deg); }}.var-result__title { font-size: var(--result-title-font-size); word-break: break-word; margin: var(--result-title-margin); font-weight: var(--result-title-font-weight); color: var(--result-title-color); text-align: center;}.var-result__description { font-size: var(--result-description-font-size); word-break: break-word; color: var(--result-description-color); margin: var(--result-description-margin); line-height: var(--result-description-line-height); text-align: center;}.var-result__footer { z-index: 1; margin-top: 20px;}
+:root { --result-background: #fff; --result-padding: 24px; --result-border-radius: 3px; --result-title-color: #444; --result-title-font-size: 32px; --result-title-margin: 15px 0 0 0; --result-image-size: 80px; --result-title-font-weight: 500; --result-description-margin: 10px 0 0 0; --result-description-font-size: 14px; --result-description-color: rgba(0, 0, 0, 0.6); --result-description-line-height: 1.6; --result-info-color: var(--color-info); --result-info-border-color: rgba(0, 175, 239, 0.3); --result-success-color: var(--color-success); --result-success-border-color: rgba(0, 196, 143, 0.3); --result-error-color: var(--color-danger); --result-error-border-color: rgba(244, 67, 54, 0.3); --result-warning-color: var(--color-warning); --result-warning-border-color: rgba(255, 159, 0, 0.3); --result-question-color: #607d8b; --result-question-border-color: rgba(96, 125, 139, 0.3); --result-empty-color: #9e9e9e; --result-empty-border-color: rgba(158, 158, 158, 0.3);}.var-result { display: flex; flex-direction: column; align-items: center; border-radius: var(--result-border-radius); width: 100%; padding: var(--result-padding); background-color: var(--result-background); transition: background-color 0.25s;}.var-result__image-container { overflow: hidden;}.var-result__image { margin: 0 auto; position: relative; border-radius: 50%; box-sizing: content-box; border-style: solid; border-color: transparent; width: var(--result-image-size); height: var(--result-image-size); display: flex; justify-content: center; align-items: center;}.var-result__image svg { margin: 0 auto; display: block; width: 100%; height: 100%;}.var-result__info { border-color: var(--result-info-border-color);}.var-result__info path { fill: var(--result-info-color);}.var-result__empty { border-color: var(--result-empty-border-color);}.var-result__empty path { fill: var(--result-empty-color);}.var-result__question { border-color: var(--result-question-border-color);}.var-result__question path { fill: var(--result-question-color);}.var-result__error { border-color: var(--result-error-border-color);}.var-result__error path { fill: var(--result-error-color);}.var-result__warning { border-color: var(--result-warning-border-color);}.var-result__warning path { fill: var(--result-warning-color);}.var-result__success { border-color: var(--result-success-color);}.var-result__success-cover-left { display: block; position: absolute; z-index: 1; top: -0.875%; left: -41.27%; width: 75%; height: 150%; border-radius: 150% 0 0 150%; transform: rotate(-45deg); background: var(--result-background); transition: background-color 0.25s;}.var-result__success-cover-right { display: block; position: absolute; top: -13.75%; left: 37.5%; width: 75%; height: 150%; border-radius: 0 125% 125% 0; animation-name: rotate-circle; animation-timing-function: ease-in; transform-origin: 0 50%; transform: rotate(-45deg); background: var(--result-background); transition: background-color 0.25s;}.var-result__success-line { height: 6.8%; background-color: var(--result-success-color); display: block; position: absolute; z-index: 10; transition: background-color 0.25s;}.var-result__success-line-tip { transform: rotate(45deg); animation-name: success-line-tip; animation-fill-mode: forwards;}.var-result__success-line-long { transform: rotate(-45deg); animation-name: success-line-long; animation-fill-mode: forwards;}.var-result__success-circle { z-index: 10; width: 100%; height: 100%; border-radius: 50%; position: absolute; box-sizing: content-box !important; border-style: solid; border-color: var(--result-success-border-color);}.var-result__success-line-fix { top: 9%; left: 34%; width: 8.75%; height: 112.5%; z-index: 1; position: absolute; transform: rotate(-45deg); background: var(--result-background); transition: background-color 0.25s;}@keyframes success-line-tip { 0% { top: 23.75%; left: 1.25%; width: 0; } 54% { top: 20.25%; left: 1%; width: 0; } 70% { top: 43.75%; left: -9.5%; width: 62.5%; } 84% { top: 60%; left: 26.25%; width: 21.25%; } 100% { top: 56.25%; left: 17.5%; width: 31.25%; }}@keyframes success-line-long { 0% { top: 67.5%; right: 57.5%; width: 0; } 65% { top: 67.5%; right: 57.5%; width: 0; } 84% { top: 43.75%; right: 0; width: 68.75%; } 100% { top: 47%; right: 9%; width: 58.75%; }}@keyframes rotate-circle { 0% { transform: rotate(-45deg); } 5% { transform: rotate(-45deg); } 12% { transform: rotate(-405deg); } 100% { transform: rotate(-405deg); }}.var-result__title { font-size: var(--result-title-font-size); word-break: break-word; margin: var(--result-title-margin); font-weight: var(--result-title-font-weight); color: var(--result-title-color); text-align: center;}.var-result__description { font-size: var(--result-description-font-size); word-break: break-word; color: var(--result-description-color); margin: var(--result-description-margin); line-height: var(--result-description-line-height); text-align: center;}.var-result__footer { z-index: 1; margin-top: 20px;}

package/es/result/style/index.js

@@ -1,2 +1,3 @@
+import '../../styles/common.css'
 import '../result.css'
 import '../ResultSfc.css'