@varlet/ui 2.4.3-alpha.1671110229484 → 2.4.3-alpha.1671117595604

package/es/space/Space.js

@@ -1,10 +1,10 @@
 import { createVNode as _createVNode } from "vue";
 import { defineComponent, Fragment, Comment } from 'vue';
 import { internalSizeValidator, props } from './props';
-import { toPxNum } from '../utils/elements';
-import { inBrowser, isArray } from '@varlet/shared';
+import { isArray } from '@varlet/shared';
 import { call, createNamespace } from '../utils/components';
-import { spacePluginOptions } from './context';
+import { toSizeUnit } from '../utils/elements';
+import { computeMargin } from './margin';
 
 
 var {
@@ -19,36 +19,15 @@ export default defineComponent({
     var {
       slots
     } = _ref;
-    var internalSizes = {
-      mini: [0, 0],
-      small: [0, 0],
-      normal: [0, 0],
-      large: [0, 0]
-    };
-
-    var computeInternalSizes = () => {
-      Object.entries(spacePluginOptions).forEach(_ref2 => {
-        var [key, size] = _ref2;
-        internalSizes[key] = isArray(size) ? size.map(toPxNum) : [toPxNum(size), toPxNum(size)];
-      });
-    };
 
     var getSize = (size, isInternalSize) => {
-      if (!inBrowser()) {
-        return [0, 0];
-      }
-
-      return isInternalSize ? internalSizes[size] : isArray(size) ? size.map(toPxNum) : [toPxNum(size), toPxNum(size)];
+      return isInternalSize ? ["var(--space-size-" + size + "-y)", "var(--space-size-" + size + "-x)"] : isArray(size) ? size.map(toSizeUnit) : [toSizeUnit(size), toSizeUnit(size)];
     };
 
     var padStartFlex = style => {
       return style === 'start' || style === 'end' ? "flex-" + style : style;
     };
 
-    if (inBrowser()) {
-      computeInternalSizes();
-    }
-
     return () => {
       var _call;
 
@@ -84,32 +63,12 @@ export default defineComponent({
       children = flatten(children);
       var lastIndex = children.length - 1;
       var spacers = children.map((child, index) => {
-        var margin = '0';
-
-        if (direction === 'row') {
-          if (justify === 'start' || justify === 'center' || justify === 'end') {
-            if (index !== lastIndex) {
-              margin = y / 2 + "px " + x + "px " + y / 2 + "px 0";
-            } else {
-              margin = y / 2 + "px 0";
-            }
-          } else if (justify === 'space-around') {
-            margin = y / 2 + "px " + x / 2 + "px";
-          } else if (justify === 'space-between') {
-            if (index === 0) {
-              margin = y / 2 + "px " + x / 2 + "px " + y / 2 + "px 0";
-            } else if (index === lastIndex) {
-              margin = y / 2 + "px 0 " + y / 2 + "px " + x / 2 + "px";
-            } else {
-              margin = y / 2 + "px " + x / 2 + "px";
-            }
-          }
-        }
-
-        if (direction === 'column' && index !== lastIndex) {
-          margin = "0 0 " + y + "px 0";
-        }
-
+        var margin = computeMargin(y, x, {
+          direction,
+          justify,
+          index,
+          lastIndex
+        });
         return _createVNode("div", {
           "style": {
             margin
@@ -123,7 +82,7 @@ export default defineComponent({
           justifyContent: padStartFlex(justify),
           alignItems: padStartFlex(align),
           flexWrap: wrap ? 'wrap' : 'nowrap',
-          margin: direction === 'row' ? "-" + y / 2 + "px 0" : undefined
+          margin: direction === 'row' ? "calc(-1 * " + y + " / 2) 0" : undefined
         }
       }, [spacers]);
     };

package/es/space/index.js

@@ -1,8 +1,6 @@
 import Space from './Space';
-import { mergeSpacePluginOptions } from './context';
 
-Space.install = function (app, spacePluginOptions) {
-  mergeSpacePluginOptions(spacePluginOptions);
+Space.install = function (app) {
   app.component(Space.name, Space);
 };
 

package/es/space/margin.js

@@ -0,0 +1,38 @@
+export function half(value) {
+  return "calc(" + value + " / 2)";
+}
+export function computeMargin(y, x, options) {
+  var {
+    direction,
+    justify,
+    index,
+    lastIndex
+  } = options;
+  var margin = '0';
+
+  if (direction === 'row') {
+    if (justify === 'start' || justify === 'center' || justify === 'end') {
+      if (index !== lastIndex) {
+        margin = half(y) + " " + x + " " + half(y) + " 0";
+      } else {
+        margin = half(y) + " 0";
+      }
+    } else if (justify === 'space-around') {
+      margin = half(y) + " " + half(x);
+    } else if (justify === 'space-between') {
+      if (index === 0) {
+        margin = half(y) + " " + half(x) + " " + half(y) + " 0";
+      } else if (index === lastIndex) {
+        margin = half(y) + " 0 " + half(y) + " " + half(x);
+      } else {
+        margin = half(y) + " " + half(x);
+      }
+    }
+  }
+
+  if (direction === 'column' && index !== lastIndex) {
+    margin = "0 0 " + y + " 0";
+  }
+
+  return margin;
+}

package/es/space/space.css

@@ -1 +1 @@
-.var-space { display: flex;}.var-space--line { display: inline-flex;}
+:root { --space-size-mini-y: 4px; --space-size-mini-x: 4px; --space-size-small-y: 6px; --space-size-small-x: 6px; --space-size-normal-y: 8px; --space-size-normal-x: 12px; --space-size-large-y: 12px; --space-size-large-x: 20px;}.var-space { display: flex;}.var-space--line { display: inline-flex;}

package/es/styles/elevation.less

@@ -0,0 +1,128 @@
+@import './common';
+
+.var-elevation {
+  &--0 {
+    box-shadow: 0 0 0 0 var(--shadow-key-umbra-opacity), 0 0 0 0 var(--shadow-key-penumbra-opacity),
+      0 0 0 0 var(--shadow-key-ambient-opacity);
+  }
+
+  &--1 {
+    box-shadow: 0 2px 1px -1px var(--shadow-key-umbra-opacity), 0 1px 1px 0 var(--shadow-key-penumbra-opacity),
+      0 1px 3px 0 var(--shadow-key-ambient-opacity);
+  }
+
+  &--2 {
+    box-shadow: 0 3px 1px -2px var(--shadow-key-umbra-opacity), 0 2px 2px 0 var(--shadow-key-penumbra-opacity),
+      0 1px 5px 0 var(--shadow-key-ambient-opacity);
+  }
+
+  &--3 {
+    box-shadow: 0 3px 3px -2px var(--shadow-key-umbra-opacity), 0 3px 4px 0 var(--shadow-key-penumbra-opacity),
+      0 1px 8px 0 var(--shadow-key-ambient-opacity);
+  }
+
+  &--4 {
+    box-shadow: 0 2px 4px -1px var(--shadow-key-umbra-opacity), 0 4px 5px 0 var(--shadow-key-penumbra-opacity),
+      0 1px 10px 0 var(--shadow-key-ambient-opacity);
+  }
+
+  &--5 {
+    box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity),
+      0 1px 14px 0 var(--shadow-key-ambient-opacity);
+  }
+
+  &--6 {
+    box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 6px 10px 0 var(--shadow-key-penumbra-opacity),
+      0 1px 18px 0 var(--shadow-key-ambient-opacity);
+  }
+
+  &--7 {
+    box-shadow: 0 4px 5px -2px var(--shadow-key-umbra-opacity), 0 7px 10px 1px var(--shadow-key-penumbra-opacity),
+      0 2px 16px 1px var(--shadow-key-ambient-opacity);
+  }
+
+  &--8 {
+    box-shadow: 0 5px 5px -3px var(--shadow-key-umbra-opacity), 0 8px 10px 1px var(--shadow-key-penumbra-opacity),
+      0 3px 14px 2px var(--shadow-key-ambient-opacity);
+  }
+
+  &--9 {
+    box-shadow: 0 5px 6px -3px var(--shadow-key-umbra-opacity), 0 9px 12px 1px var(--shadow-key-penumbra-opacity),
+      0 3px 16px 2px var(--shadow-key-ambient-opacity);
+  }
+
+  &--10 {
+    box-shadow: 0 6px 6px -3px var(--shadow-key-umbra-opacity), 0 10px 14px 1px var(--shadow-key-penumbra-opacity),
+      0 4px 18px 3px var(--shadow-key-ambient-opacity);
+  }
+
+  &--11 {
+    box-shadow: 0 6px 7px -4px var(--shadow-key-umbra-opacity), 0 11px 15px 1px var(--shadow-key-penumbra-opacity),
+      0 4px 20px 3px var(--shadow-key-ambient-opacity);
+  }
+
+  &--12 {
+    box-shadow: 0 7px 8px -4px var(--shadow-key-umbra-opacity), 0 12px 17px 2px var(--shadow-key-penumbra-opacity),
+      0 5px 22px 4px var(--shadow-key-ambient-opacity);
+  }
+
+  &--13 {
+    box-shadow: 0 7px 8px -4px var(--shadow-key-umbra-opacity), 0 13px 19px 2px var(--shadow-key-penumbra-opacity),
+      0 5px 24px 4px var(--shadow-key-ambient-opacity);
+  }
+
+  &--14 {
+    box-shadow: 0 7px 9px -4px var(--shadow-key-umbra-opacity), 0 14px 21px 2px var(--shadow-key-penumbra-opacity),
+      0 5px 26px 4px var(--shadow-key-ambient-opacity);
+  }
+
+  &--15 {
+    box-shadow: 0 8px 9px -5px var(--shadow-key-umbra-opacity), 0 15px 22px 2px var(--shadow-key-penumbra-opacity),
+      0 6px 28px 5px var(--shadow-key-ambient-opacity);
+  }
+
+  &--16 {
+    box-shadow: 0 8px 10px -5px var(--shadow-key-umbra-opacity), 0 16px 24px 2px var(--shadow-key-penumbra-opacity),
+      0 6px 30px 5px var(--shadow-key-ambient-opacity);
+  }
+
+  &--17 {
+    box-shadow: 0 8px 11px -5px var(--shadow-key-umbra-opacity), 0 17px 26px 2px var(--shadow-key-penumbra-opacity),
+      0 6px 32px 5px var(--shadow-key-ambient-opacity);
+  }
+
+  &--18 {
+    box-shadow: 0 9px 11px -5px var(--shadow-key-umbra-opacity), 0 18px 28px 2px var(--shadow-key-penumbra-opacity),
+      0 7px 34px 6px var(--shadow-key-ambient-opacity);
+  }
+
+  &--19 {
+    box-shadow: 0 9px 12px -6px var(--shadow-key-umbra-opacity), 0 19px 29px 2px var(--shadow-key-penumbra-opacity),
+      0 7px 36px 6px var(--shadow-key-ambient-opacity);
+  }
+
+  &--20 {
+    box-shadow: 0 10px 13px -6px var(--shadow-key-umbra-opacity), 0 20px 31px 3px var(--shadow-key-penumbra-opacity),
+      0 8px 38px 7px var(--shadow-key-ambient-opacity);
+  }
+
+  &--21 {
+    box-shadow: 0 10px 13px -6px var(--shadow-key-umbra-opacity), 0 21px 33px 3px var(--shadow-key-penumbra-opacity),
+      0 8px 40px 7px var(--shadow-key-ambient-opacity);
+  }
+
+  &--22 {
+    box-shadow: 0 10px 14px -6px var(--shadow-key-umbra-opacity), 0 22px 35px 3px var(--shadow-key-penumbra-opacity),
+      0 8px 42px 7px var(--shadow-key-ambient-opacity);
+  }
+
+  &--23 {
+    box-shadow: 0 11px 14px -7px var(--shadow-key-umbra-opacity), 0 23px 36px 3px var(--shadow-key-penumbra-opacity),
+      0 9px 44px 8px var(--shadow-key-ambient-opacity);
+  }
+
+  &--24 {
+    box-shadow: 0 11px 15px -7px var(--shadow-key-umbra-opacity), 0 24px 38px 3px var(--shadow-key-penumbra-opacity),
+      0 9px 46px 8px var(--shadow-key-ambient-opacity);
+  }
+}

package/lib/space/Space.js

@@ -7,13 +7,13 @@ var _vue = require("vue");
 
 var _props = require("./props");
 
-var _elements = require("../utils/elements");
-
 var _shared = require("@varlet/shared");
 
 var _components = require("../utils/components");
 
-var _context = require("./context");
+var _elements = require("../utils/elements");
+
+var _margin = require("./margin");
 
 
 
@@ -32,36 +32,15 @@ var _default = (0, _vue.defineComponent)({
     var {
       slots
     } = _ref;
-    var internalSizes = {
-      mini: [0, 0],
-      small: [0, 0],
-      normal: [0, 0],
-      large: [0, 0]
-    };
-
-    var computeInternalSizes = () => {
-      Object.entries(_context.spacePluginOptions).forEach(_ref2 => {
-        var [key, size] = _ref2;
-        internalSizes[key] = (0, _shared.isArray)(size) ? size.map(_elements.toPxNum) : [(0, _elements.toPxNum)(size), (0, _elements.toPxNum)(size)];
-      });
-    };
 
     var getSize = (size, isInternalSize) => {
-      if (!(0, _shared.inBrowser)()) {
-        return [0, 0];
-      }
-
-      return isInternalSize ? internalSizes[size] : (0, _shared.isArray)(size) ? size.map(_elements.toPxNum) : [(0, _elements.toPxNum)(size), (0, _elements.toPxNum)(size)];
+      return isInternalSize ? ["var(--space-size-" + size + "-y)", "var(--space-size-" + size + "-x)"] : (0, _shared.isArray)(size) ? size.map(_elements.toSizeUnit) : [(0, _elements.toSizeUnit)(size), (0, _elements.toSizeUnit)(size)];
     };
 
     var padStartFlex = style => {
       return style === 'start' || style === 'end' ? "flex-" + style : style;
     };
 
-    if ((0, _shared.inBrowser)()) {
-      computeInternalSizes();
-    }
-
     return () => {
       var _call;
 
@@ -97,32 +76,12 @@ var _default = (0, _vue.defineComponent)({
       children = flatten(children);
       var lastIndex = children.length - 1;
       var spacers = children.map((child, index) => {
-        var margin = '0';
-
-        if (direction === 'row') {
-          if (justify === 'start' || justify === 'center' || justify === 'end') {
-            if (index !== lastIndex) {
-              margin = y / 2 + "px " + x + "px " + y / 2 + "px 0";
-            } else {
-              margin = y / 2 + "px 0";
-            }
-          } else if (justify === 'space-around') {
-            margin = y / 2 + "px " + x / 2 + "px";
-          } else if (justify === 'space-between') {
-            if (index === 0) {
-              margin = y / 2 + "px " + x / 2 + "px " + y / 2 + "px 0";
-            } else if (index === lastIndex) {
-              margin = y / 2 + "px 0 " + y / 2 + "px " + x / 2 + "px";
-            } else {
-              margin = y / 2 + "px " + x / 2 + "px";
-            }
-          }
-        }
-
-        if (direction === 'column' && index !== lastIndex) {
-          margin = "0 0 " + y + "px 0";
-        }
-
+        var margin = (0, _margin.computeMargin)(y, x, {
+          direction,
+          justify,
+          index,
+          lastIndex
+        });
         return (0, _vue.createVNode)("div", {
           "style": {
             margin
@@ -136,7 +95,7 @@ var _default = (0, _vue.defineComponent)({
           justifyContent: padStartFlex(justify),
           alignItems: padStartFlex(align),
           flexWrap: wrap ? 'wrap' : 'nowrap',
-          margin: direction === 'row' ? "-" + y / 2 + "px 0" : undefined
+          margin: direction === 'row' ? "calc(-1 * " + y + " / 2) 0" : undefined
         }
       }, [spacers]);
     };

package/lib/space/index.js

@@ -5,12 +5,9 @@ exports.default = exports._SpaceComponent = void 0;
 
 var _Space = _interopRequireDefault(require("./Space"));
 
-var _context = require("./context");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-_Space.default.install = function (app, spacePluginOptions) {
-  (0, _context.mergeSpacePluginOptions)(spacePluginOptions);
+_Space.default.install = function (app) {
   app.component(_Space.default.name, _Space.default);
 };
 

package/lib/space/margin.js

@@ -0,0 +1,45 @@
+"use strict";
+
+exports.__esModule = true;
+exports.computeMargin = computeMargin;
+exports.half = half;
+
+function half(value) {
+  return "calc(" + value + " / 2)";
+}
+
+function computeMargin(y, x, options) {
+  var {
+    direction,
+    justify,
+    index,
+    lastIndex
+  } = options;
+  var margin = '0';
+
+  if (direction === 'row') {
+    if (justify === 'start' || justify === 'center' || justify === 'end') {
+      if (index !== lastIndex) {
+        margin = half(y) + " " + x + " " + half(y) + " 0";
+      } else {
+        margin = half(y) + " 0";
+      }
+    } else if (justify === 'space-around') {
+      margin = half(y) + " " + half(x);
+    } else if (justify === 'space-between') {
+      if (index === 0) {
+        margin = half(y) + " " + half(x) + " " + half(y) + " 0";
+      } else if (index === lastIndex) {
+        margin = half(y) + " 0 " + half(y) + " " + half(x);
+      } else {
+        margin = half(y) + " " + half(x);
+      }
+    }
+  }
+
+  if (direction === 'column' && index !== lastIndex) {
+    margin = "0 0 " + y + " 0";
+  }
+
+  return margin;
+}

package/lib/space/space.css

@@ -1 +1 @@
-.var-space { display: flex;}.var-space--line { display: inline-flex;}
+:root { --space-size-mini-y: 4px; --space-size-mini-x: 4px; --space-size-small-y: 6px; --space-size-small-x: 6px; --space-size-normal-y: 8px; --space-size-normal-x: 12px; --space-size-large-y: 12px; --space-size-large-x: 20px;}.var-space { display: flex;}.var-space--line { display: inline-flex;}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "2.4.3-alpha.1671110229484",
+  "version": "2.4.3-alpha.1671117595604",
   "description": "A material like components library",
   "module": "es/index.js",
   "main": "lib/index.js",
@@ -47,8 +47,8 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "2.4.3-alpha.1671110229484",
-    "@varlet/shared": "2.4.3-alpha.1671110229484"
+    "@varlet/icons": "2.4.3-alpha.1671117595604",
+    "@varlet/shared": "2.4.3-alpha.1671117595604"
   },
   "devDependencies": {
     "@types/jest": "^26.0.15",
@@ -63,8 +63,8 @@
     "typescript": "^4.4.4",
     "vue": "3.2.25",
     "vue-router": "4.0.12",
-    "@varlet/touch-emulator": "2.4.3-alpha.1671110229484",
-    "@varlet/cli": "2.4.3-alpha.1671110229484"
+    "@varlet/cli": "2.4.3-alpha.1671117595604",
+    "@varlet/touch-emulator": "2.4.3-alpha.1671117595604"
   },
   "browserslist": [
     "Chrome >= 54",

package/types/space.d.ts

@@ -1,5 +1,5 @@
 import { VarComponent, BasicAttributes } from './varComponent'
-import { App, VNode } from 'vue'
+import { VNode } from 'vue'
 
 export type SpaceAlign = 'stretch' | 'center' | 'start' | 'end' | 'baseline' | 'initial' | 'inherit'
 
@@ -11,15 +11,6 @@ export type SpaceInternalSize = 'mini' | 'small' | 'normal' | 'large'
 
 export type SpaceSize = SpaceInternalSize | number | string | [number | string, number | string]
 
-export interface SpacePluginOptions {
-  mini?: SpacePluginOptionsSize
-  small?: SpacePluginOptionsSize
-  normal?: SpacePluginOptionsSize
-  large?: SpacePluginOptionsSize
-}
-
-export type SpacePluginOptionsSize = number | string | [number | string, number | string]
-
 export interface SpaceProps extends BasicAttributes {
   align?: SpaceAlign
   size?: SpaceSize
@@ -30,8 +21,6 @@ export interface SpaceProps extends BasicAttributes {
 }
 
 export class Space extends VarComponent {
-  static install(app: App, options: SpacePluginOptions): void
-
   $props: SpaceProps
 
   $slots: {

package/es/index.d.ts

@@ -1 +0,0 @@
-export * from '../types'