@varlet/ui 2.3.1 → 2.4.0-alpha.1670751751241

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/card/Card.js

@@ -39,7 +39,7 @@ export function render(_ctx, _cache) {
     })
   }, [_createElementVNode("div", {
     ref: "cardFloater",
-    class: _normalizeClass(_ctx.classes(_ctx.n('floater'))),
+    class: _normalizeClass(_ctx.n('floater')),
     style: _normalizeStyle({
       width: _ctx.floaterWidth,
       height: _ctx.floaterHeight,

package/es/index.js

@@ -31,9 +31,11 @@ import Lazy, * as LazyModule from './lazy'
 import Link, * as LinkModule from './link'
 import List, * as ListModule from './list'
 import Loading, * as LoadingModule from './loading'
+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'
@@ -42,6 +44,7 @@ import PullRefresh, * as PullRefreshModule from './pull-refresh'
 import Radio, * as RadioModule from './radio'
 import RadioGroup, * as RadioGroupModule from './radio-group'
 import Rate, * as RateModule from './rate'
+import Result, * as ResultModule from './result'
 import Ripple, * as RippleModule from './ripple'
 import Row, * as RowModule from './row'
 import Select, * as SelectModule from './select'
@@ -98,9 +101,11 @@ export const _LazyComponent = LazyModule._LazyComponent || {}
 export const _LinkComponent = LinkModule._LinkComponent || {}
 export const _ListComponent = ListModule._ListComponent || {}
 export const _LoadingComponent = LoadingModule._LoadingComponent || {}
+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 || {}
@@ -109,6 +114,7 @@ export const _PullRefreshComponent = PullRefreshModule._PullRefreshComponent ||
 export const _RadioComponent = RadioModule._RadioComponent || {}
 export const _RadioGroupComponent = RadioGroupModule._RadioGroupComponent || {}
 export const _RateComponent = RateModule._RateComponent || {}
+export const _ResultComponent = ResultModule._ResultComponent || {}
 export const _RippleComponent = RippleModule._RippleComponent || {}
 export const _RowComponent = RowModule._RowComponent || {}
 export const _SelectComponent = SelectModule._SelectComponent || {}
@@ -167,9 +173,11 @@ function install(app) {
   Link.install && app.use(Link)
   List.install && app.use(List)
   Loading.install && app.use(Loading)
+  LoadingBar.install && app.use(LoadingBar)
   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)
@@ -178,6 +186,7 @@ function install(app) {
   Radio.install && app.use(Radio)
   RadioGroup.install && app.use(RadioGroup)
   Rate.install && app.use(Rate)
+  Result.install && app.use(Result)
   Ripple.install && app.use(Ripple)
   Row.install && app.use(Row)
   Select.install && app.use(Select)
@@ -237,9 +246,11 @@ export {
   Link,
   List,
   Loading,
+  LoadingBar,
   Locale,
   Menu,
   Option,
+  Overlay,
   Pagination,
   Picker,
   Popup,
@@ -248,6 +259,7 @@ export {
   Radio,
   RadioGroup,
   Rate,
+  Result,
   Ripple,
   Row,
   Select,
@@ -307,9 +319,11 @@ export default {
   Link,
   List,
   Loading,
+  LoadingBar,
   Locale,
   Menu,
   Option,
+  Overlay,
   Pagination,
   Picker,
   Popup,
@@ -318,6 +332,7 @@ export default {
   Radio,
   RadioGroup,
   Rate,
+  Result,
   Ripple,
   Row,
   Select,

package/es/loading-bar/LoadingBar.js

@@ -0,0 +1,33 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from 'vue';
+import context from '../context';
+import { createNamespace } from '../utils/components';
+import { toSizeUnit } from '../utils/elements';
+import { props } from './props';
+
+
+var {
+  classes,
+  n
+} = createNamespace('loading-bar');
+export default defineComponent({
+  name: 'VarLoadingBar',
+  props,
+
+  setup(props) {
+    return () => {
+      return _createVNode("div", {
+        "class": classes(n(), [props.error, n('--error')]),
+        "style": {
+          zIndex: context.zIndex + 10,
+          width: props.value + "%",
+          opacity: props.opacity,
+          height: toSizeUnit(props.height),
+          backgroundColor: props.error ? props.errorColor : props.color,
+          top: toSizeUnit(props.top)
+        }
+      }, null);
+    };
+  }
+
+});

package/es/loading-bar/index.js

@@ -0,0 +1,66 @@
+import LoadingBarComponent from './LoadingBar';
+import { reactive } from 'vue';
+import { mountInstance } from '../utils/components';
+var timer;
+var isMount;
+var props = reactive({
+  value: 0,
+  opacity: 0,
+  error: false
+});
+
+var mergeConfig = options => {
+  Object.assign(props, options);
+};
+
+var changeValue = () => {
+  timer = window.setTimeout(() => {
+    if (props.value >= 95) return;
+    var num = Math.random();
+    if (props.value < 70) num = Math.round(5 * Math.random());
+    props.value += num;
+    changeValue();
+  }, 200);
+};
+
+var start = () => {
+  if (!isMount) {
+    isMount = true;
+    mountInstance(LoadingBarComponent, props);
+  }
+
+  if (!props.error || props.value === 100) {
+    props.value = 0;
+  }
+
+  setTimeout(() => {
+    props.opacity = 1;
+  }, 200);
+  changeValue();
+};
+
+var finish = () => {
+  props.value = 100;
+  setTimeout(() => {
+    props.opacity = 0;
+    setTimeout(() => {
+      props.error = false;
+    }, 250);
+  }, 300);
+  window.clearTimeout(timer);
+};
+
+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/loadingBar.css

@@ -0,0 +1 @@
+:root { --loading-bar-color: var(--color-primary); --loading-bar-error-color: var(--color-danger); --loading-bar-height: 3px;}.var-loading-bar { position: fixed; left: 0; top: 0; transition: all 0.25s; height: var(--loading-bar-height); background-color: var(--loading-bar-color);}.var-loading-bar--error { background-color: var(--loading-bar-error-color);}

package/es/loading-bar/props.js

@@ -0,0 +1,26 @@
+export var props = {
+  value: {
+    type: Number,
+    default: 0
+  },
+  opacity: {
+    type: Number,
+    default: 0
+  },
+  error: {
+    type: Boolean,
+    default: false
+  },
+  color: {
+    type: String
+  },
+  errorColor: {
+    type: String
+  },
+  height: {
+    type: [Number, String]
+  },
+  top: {
+    type: [Number, String]
+  }
+};

package/es/loading-bar/style/index.js

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

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.js

@@ -78,7 +78,7 @@ export default defineComponent({
 
     var renderContent = () => {
       return _createVNode("div", _mergeProps({
-        "class": classes(n('content'), n('$-elevation--3'), n("--" + props.position)),
+        "class": classes(n('content'), n("--" + props.position), [props.defaultStyle, n('--content-background-color')], [props.defaultStyle, n('$-elevation--3')]),
         "style": {
           zIndex: zIndex.value
         }

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; background-color: var(--popup-content-background-color); transition: all 0.25s;}.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/popup/props.js

@@ -33,6 +33,10 @@ export var props = {
     type: Boolean,
     default: true
   },
+  defaultStyle: {
+    type: Boolean,
+    default: true
+  },
   teleport: {
     type: String
   },

package/es/result/Empty.js

@@ -0,0 +1,23 @@
+import { defineComponent } from 'vue';
+import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
+
+var _hoisted_1 = {
+  viewBox: "-4 -4 32 32"
+};
+
+var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNode("path", {
+  fill: "currentColor",
+  d: "M2,10.96C1.5,10.68 1.35,10.07 1.63,9.59L3.13,7C3.24,6.8 3.41,6.66 3.6,6.58L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.66,6.72 20.82,6.88 20.91,7.08L22.36,9.6C22.64,10.08 22.47,10.69 22,10.96L21,11.54V16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V10.96C2.7,11.13 2.32,11.14 2,10.96M12,4.15V4.15L12,10.85V10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V12.69L14,15.59C13.67,15.77 13.3,15.76 13,15.6V19.29L19,15.91M13.85,13.36L20.13,9.73L19.55,8.72L13.27,12.35L13.85,13.36Z"
+}, null, -1
+/* HOISTED */
+));
+
+var _hoisted_3 = [_hoisted_2];
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+export default defineComponent({
+  render
+});

package/es/result/Error.js

@@ -0,0 +1,23 @@
+import { defineComponent } from 'vue';
+import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
+
+var _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "2 2 20 20"
+};
+
+var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNode("path", {
+  d: "M19,3V5H19V19M17,8.4L13.4,12L17,15.6L15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4Z"
+}, null, -1
+/* HOISTED */
+));
+
+var _hoisted_3 = [_hoisted_2];
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+export default defineComponent({
+  render
+});

package/es/result/Info.js

@@ -0,0 +1,23 @@
+import { defineComponent } from 'vue';
+import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
+
+var _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "2 3.6 20 20"
+};
+
+var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNode("path", {
+  d: "M11,9H13V7H11M11,20H13V11H11V20Z"
+}, null, -1
+/* HOISTED */
+));
+
+var _hoisted_3 = [_hoisted_2];
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+export default defineComponent({
+  render
+});

package/es/result/Question.js

@@ -0,0 +1,23 @@
+import { defineComponent } from 'vue';
+import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
+
+var _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "-3 -3 30 30"
+};
+
+var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/_createElementVNode("path", {
+  d: "M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z"
+}, null, -1
+/* HOISTED */
+));
+
+var _hoisted_3 = [_hoisted_2];
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+export default defineComponent({
+  render
+});

package/es/result/Result.js

@@ -0,0 +1,95 @@
+import { computed, defineComponent } from 'vue';
+import { toNumber } from '@varlet/shared';
+import { props } from './props';
+import { createNamespace } from '../utils/components';
+import { toPxNum, toSizeUnit } from '../utils/elements';
+import Info from './Info.js'
+import Error from './Error.js'
+import Warning from './Warning.js'
+import Success from './Success.js'
+import Question from './Question.js'
+import Empty from './Empty.js'
+var {
+  n,
+  classes
+} = createNamespace('result');
+import { renderSlot as _renderSlot, resolveDynamicComponent as _resolveDynamicComponent, openBlock as _openBlock, createBlock as _createBlock, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString } from "vue";
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box')))
+  }, [_renderSlot(_ctx.$slots, "image", {}, () => [_ctx.type ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('image-container'))
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('image'), _ctx.n(_ctx.type))),
+    style: _normalizeStyle({
+      width: _ctx.circleSize,
+      height: _ctx.circleSize,
+      borderWidth: _ctx.borderSize
+    })
+  }, [(_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.type), {
+    "border-size": _ctx.borderSize,
+    animation: _ctx.animation
+  }, null, 8
+  /* PROPS */
+  , ["border-size", "animation"]))], 6
+  /* CLASS, STYLE */
+  )], 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true)]), _renderSlot(_ctx.$slots, "title", {}, () => [_ctx.title ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('title'))
+  }, _toDisplayString(_ctx.title), 3
+  /* TEXT, CLASS */
+  )) : _createCommentVNode("v-if", true)]), _renderSlot(_ctx.$slots, "description", {}, () => [_ctx.description ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('description'))
+  }, _toDisplayString(_ctx.description), 3
+  /* TEXT, CLASS */
+  )) : _createCommentVNode("v-if", true)]), _ctx.$slots.footer ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.n('footer'))
+  }, [_renderSlot(_ctx.$slots, "footer")], 2
+  /* CLASS */
+  )) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  );
+}
+export default defineComponent({
+  render,
+  name: 'VarResult',
+  components: {
+    Info,
+    Success,
+    Warning,
+    Error,
+    Question,
+    Empty
+  },
+  props,
+
+  setup(props) {
+    var circleSize = computed(() => {
+      var {
+        imageSize
+      } = props;
+      return "calc(" + (imageSize ? toSizeUnit(imageSize) : 'var(--result-image-size)') + " * 0.9)";
+    });
+    var borderSize = computed(() => {
+      var {
+        imageSize
+      } = props;
+      return "calc(" + (imageSize ? toSizeUnit(props.imageSize) : 'var(--result-image-size)') + " * 0.05)";
+    });
+    return {
+      n,
+      classes,
+      toNumber,
+      toPxNum,
+      toSizeUnit,
+      circleSize,
+      borderSize
+    };
+  }
+
+});