@varlet/ui 2.3.0 → 2.4.0-alpha.1670569085974

package/lib/result/Result.js

@@ -0,0 +1,117 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _shared = require("@varlet/shared");
+
+var _props = require("./props");
+
+var _components = require("../utils/components");
+
+var _elements = require("../utils/elements");
+
+var _Info = _interopRequireDefault(require("./Info.js"));
+
+var _Error = _interopRequireDefault(require("./Error.js"));
+
+var _Warning = _interopRequireDefault(require("./Warning.js"));
+
+var _Success = _interopRequireDefault(require("./Success.js"));
+
+var _Question = _interopRequireDefault(require("./Question.js"));
+
+var _Empty = _interopRequireDefault(require("./Empty.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('result');
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), _ctx.n('$--box')))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "image", {}, () => [_ctx.type ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('image-container'))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('image'), _ctx.n(_ctx.type))),
+    style: (0, _vue.normalizeStyle)({
+      width: _ctx.circleSize,
+      height: _ctx.circleSize,
+      borderWidth: _ctx.borderSize
+    })
+  }, [((0, _vue.openBlock)(), (0, _vue.createBlock)((0, _vue.resolveDynamicComponent)(_ctx.type), {
+    "border-size": _ctx.borderSize,
+    animation: _ctx.animation
+  }, null, 8
+  /* PROPS */
+  , ["border-size", "animation"]))], 6
+  /* CLASS, STYLE */
+  )], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [_ctx.title ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('title'))
+  }, (0, _vue.toDisplayString)(_ctx.title), 3
+  /* TEXT, CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.renderSlot)(_ctx.$slots, "description", {}, () => [_ctx.description ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('description'))
+  }, (0, _vue.toDisplayString)(_ctx.description), 3
+  /* TEXT, CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)]), _ctx.$slots.footer ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('footer'))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "footer")], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarResult',
+  components: {
+    Info: _Info.default,
+    Success: _Success.default,
+    Warning: _Warning.default,
+    Error: _Error.default,
+    Question: _Question.default,
+    Empty: _Empty.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var circleSize = (0, _vue.computed)(() => {
+      var {
+        imageSize
+      } = props;
+      return "calc(" + (imageSize ? (0, _elements.toSizeUnit)(imageSize) : 'var(--result-image-size)') + " * 0.9)";
+    });
+    var borderSize = (0, _vue.computed)(() => {
+      var {
+        imageSize
+      } = props;
+      return "calc(" + (imageSize ? (0, _elements.toSizeUnit)(props.imageSize) : 'var(--result-image-size)') + " * 0.05)";
+    });
+    return {
+      n,
+      classes,
+      toNumber: _shared.toNumber,
+      toPxNum: _elements.toPxNum,
+      toSizeUnit: _elements.toSizeUnit,
+      circleSize,
+      borderSize
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/result/Success.js

@@ -0,0 +1,86 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _components = require("../utils/components");
+
+var _shared = require("@varlet/shared");
+
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('result');
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)(_vue.Fragment, null, [(0, _vue.createElementVNode)("span", {
+    class: (0, _vue.normalizeClass)(_ctx.n('success-cover-left'))
+  }, null, 2
+  /* CLASS */
+  ), (0, _vue.createElementVNode)("span", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('success-line'), _ctx.n('success-line-tip'))),
+    style: (0, _vue.normalizeStyle)({
+      animationDuration: _ctx.animation ? "760ms" : '0ms',
+      borderRadius: "calc(" + _ctx.borderSize + " * 0.625)"
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  ), (0, _vue.createElementVNode)("span", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('success-line'), _ctx.n('success-line-long'))),
+    style: (0, _vue.normalizeStyle)({
+      animationDuration: _ctx.animation ? "770ms" : '0ms',
+      borderRadius: "calc(" + _ctx.borderSize + " * 0.625)"
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  ), (0, _vue.createElementVNode)("span", {
+    ref: "circle",
+    class: (0, _vue.normalizeClass)(_ctx.n('success-circle')),
+    style: (0, _vue.normalizeStyle)({
+      left: "-" + _ctx.borderSize,
+      top: "-" + _ctx.borderSize,
+      borderWidth: _ctx.borderSize
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  ), (0, _vue.createElementVNode)("span", {
+    class: (0, _vue.normalizeClass)(_ctx.n('success-line-fix'))
+  }, null, 2
+  /* CLASS */
+  ), (0, _vue.createElementVNode)("span", {
+    class: (0, _vue.normalizeClass)(_ctx.n('success-cover-right')),
+    style: (0, _vue.normalizeStyle)({
+      animationDuration: _ctx.animation ? "4250ms" : '0ms'
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  )], 64
+  /* STABLE_FRAGMENT */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  props: {
+    animation: {
+      type: Boolean
+    },
+    borderSize: {
+      type: String
+    }
+  },
+
+  setup() {
+    return {
+      n,
+      classes,
+      toNumber: _shared.toNumber
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/result/Warning.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "-6 -4 35 35"
+};
+
+var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("path", {
+  d: "M10,21H14A2,2 0 0,1 12,23A2,2 0 0,1 10,21M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M17,11A5,5 0 0,0 12,6A5,5 0 0,0 7,11V18H17V11M19.75,3.19L18.33,4.61M1,11"
+}, null, -1
+/* HOISTED */
+));
+
+var _hoisted_3 = [_hoisted_2];
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("svg", _hoisted_1, _hoisted_3);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render
+});
+
+exports.default = _default;

package/lib/result/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._ResultComponent = void 0;
+
+var _Result = _interopRequireDefault(require("./Result.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_Result.default.install = function (app) {
+  app.component(_Result.default.name, _Result.default);
+};
+
+var _ResultComponent = _Result.default;
+exports._ResultComponent = _ResultComponent;
+var _default = _Result.default;
+exports.default = _default;

package/lib/result/props.js

@@ -0,0 +1,30 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+
+function typeValidator(type) {
+  return ['info', 'success', 'warning', 'error', 'question', 'empty'].includes(type);
+}
+
+var props = {
+  imageSize: {
+    type: [String, Number]
+  },
+  type: {
+    type: String,
+    default: 'success',
+    validator: typeValidator
+  },
+  title: {
+    type: String
+  },
+  description: {
+    type: String
+  },
+  animation: {
+    type: Boolean,
+    default: true
+  }
+};
+exports.props = props;

package/lib/result/result.css

@@ -0,0 +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;}

package/lib/result/style/index.js

@@ -0,0 +1,2 @@
+require('../result.css')
+require('../ResultSfc.css')

package/lib/snackbar/style/index.js

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