@varlet/ui 3.5.1 → 3.5.2

package/es/snackbar/Snackbar.mjs

@@ -0,0 +1,65 @@
+import VarSnackbarCore from "./core.mjs";
+import { defineComponent } from "vue";
+import { createNamespace, useTeleport } from "../utils/components.mjs";
+import { props } from "./props.mjs";
+const { name, n } = createNamespace("snackbar");
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, mergeProps as _mergeProps, withCtx as _withCtx, createSlots as _createSlots, createVNode as _createVNode, Transition as _Transition, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_snackbar_core = _resolveComponent("var-snackbar-core");
+  return _openBlock(), _createBlock(_Teleport, {
+    to: _ctx.teleport === false ? void 0 : _ctx.teleport,
+    disabled: _ctx.disabled || _ctx.teleport === false
+  }, [
+    _createVNode(_Transition, {
+      name: `${_ctx.n()}-fade`,
+      onAfterEnter: _ctx.onOpened,
+      onAfterLeave: _ctx.onClosed
+    }, {
+      default: _withCtx(() => [
+        _createVNode(_component_var_snackbar_core, _mergeProps(_ctx.$props, {
+          class: _ctx.n("transition")
+        }), _createSlots({
+          default: _withCtx(() => [
+            _renderSlot(_ctx.$slots, "default")
+          ]),
+          _: 2
+          /* DYNAMIC */
+        }, [
+          _ctx.$slots.icon ? {
+            name: "icon",
+            fn: _withCtx(() => [
+              _renderSlot(_ctx.$slots, "icon")
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots.action ? {
+            name: "action",
+            fn: _withCtx(() => [
+              _renderSlot(_ctx.$slots, "action")
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1040, ["class"])
+      ]),
+      _: 3
+      /* FORWARDED */
+    }, 8, ["name", "onAfterEnter", "onAfterLeave"])
+  ], 8, ["to", "disabled"]);
+}
+const __sfc__ = defineComponent({
+  name,
+  components: { VarSnackbarCore },
+  props,
+  setup() {
+    const { disabled } = useTeleport();
+    return {
+      disabled,
+      n
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/snackbar/core.mjs

@@ -0,0 +1,174 @@
+import VarLoading from "../loading/index.mjs";
+import VarIcon from "../icon/index.mjs";
+import { defineComponent, watch, ref, computed } from "vue";
+import { useZIndex } from "../context/zIndex.mjs";
+import { props } from "./props.mjs";
+import { useLock } from "../context/lock.mjs";
+import { SNACKBAR_TYPE } from "./index.mjs";
+import { createNamespace, formatElevation } from "../utils/components.mjs";
+import { onSmartMounted } from "@varlet/use";
+import { call } from "@varlet/shared";
+const { n, classes } = createNamespace("snackbar");
+const ICON_TYPE_DICT = {
+  success: "checkbox-marked-circle",
+  warning: "warning",
+  info: "information",
+  error: "error",
+  loading: ""
+};
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, vShow as _vShow, withDirectives as _withDirectives } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_loading = _resolveComponent("var-loading");
+  return _withDirectives((_openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n()),
+      style: _normalizeStyle({ pointerEvents: _ctx.isForbidClick ? "auto" : "none", zIndex: _ctx.zIndex })
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(
+            _ctx.classes(
+              _ctx.n("wrapper"),
+              _ctx.n(`wrapper-${_ctx.position}`),
+              _ctx.formatElevation(_ctx.elevation, 4),
+              [_ctx.vertical, _ctx.n("vertical")],
+              [_ctx.type && _ctx.SNACKBAR_TYPE.includes(_ctx.type), _ctx.n(`wrapper-${_ctx.type}`)]
+            )
+          ),
+          style: _normalizeStyle({ zIndex: _ctx.zIndex })
+        },
+        [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass([_ctx.n("content"), _ctx.contentClass])
+            },
+            [
+              _renderSlot(_ctx.$slots, "default", {}, () => [
+                _createTextVNode(
+                  _toDisplayString(_ctx.content),
+                  1
+                  /* TEXT */
+                )
+              ])
+            ],
+            2
+            /* CLASS */
+          ),
+          _ctx.iconName || _ctx.type === "loading" || _ctx.$slots.icon ? (_openBlock(), _createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: _normalizeClass(_ctx.n("icon"))
+            },
+            [
+              _ctx.iconName ? (_openBlock(), _createBlock(_component_var_icon, {
+                key: 0,
+                name: _ctx.iconName
+              }, null, 8, ["name"])) : _createCommentVNode("v-if", true),
+              _ctx.type === "loading" ? (_openBlock(), _createBlock(_component_var_loading, {
+                key: 1,
+                type: _ctx.loadingType,
+                size: _ctx.loadingSize,
+                color: _ctx.loadingColor,
+                radius: _ctx.loadingRadius
+              }, null, 8, ["type", "size", "color", "radius"])) : _createCommentVNode("v-if", true),
+              _renderSlot(_ctx.$slots, "icon")
+            ],
+            2
+            /* CLASS */
+          )) : _createCommentVNode("v-if", true),
+          _ctx.$slots.action ? (_openBlock(), _createElementBlock(
+            "div",
+            {
+              key: 1,
+              class: _normalizeClass(_ctx.n("action"))
+            },
+            [
+              _renderSlot(_ctx.$slots, "action")
+            ],
+            2
+            /* CLASS */
+          )) : _createCommentVNode("v-if", true)
+        ],
+        6
+        /* CLASS, STYLE */
+      )
+    ],
+    6
+    /* CLASS, STYLE */
+  )), [
+    [_vShow, _ctx.show]
+  ]);
+}
+const __sfc__ = defineComponent({
+  name: "VarSnackbarCore",
+  components: {
+    VarLoading,
+    VarIcon
+  },
+  props,
+  setup(props2) {
+    const timer = ref(null);
+    const { zIndex } = useZIndex(() => props2.show, 1);
+    useLock(
+      () => props2.show,
+      () => props2.lockScroll
+    );
+    const isForbidClick = computed(() => {
+      const { type, forbidClick } = props2;
+      return type === "loading" || forbidClick;
+    });
+    const iconName = computed(() => !props2.type ? "" : ICON_TYPE_DICT[props2.type]);
+    function updateAfterDuration() {
+      timer.value = setTimeout(() => {
+        if (props2.type !== "loading") {
+          call(props2["onUpdate:show"], false);
+        }
+      }, props2.duration);
+    }
+    watch(
+      () => props2.show,
+      (show) => {
+        if (show) {
+          call(props2.onOpen);
+          updateAfterDuration();
+        } else {
+          clearTimeout(timer.value);
+          call(props2.onClose);
+        }
+      }
+    );
+    watch(
+      () => props2._update,
+      () => {
+        clearTimeout(timer.value);
+        updateAfterDuration();
+      }
+    );
+    onSmartMounted(() => {
+      if (props2.show) {
+        call(props2.onOpen);
+        updateAfterDuration();
+      }
+    });
+    return {
+      SNACKBAR_TYPE,
+      zIndex,
+      iconName,
+      isForbidClick,
+      n,
+      classes,
+      formatElevation
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/snackbar/index.mjs

@@ -0,0 +1,229 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import VarSnackbarCore from "./core.mjs";
+import VarSnackbar from "./Snackbar.mjs";
+import context from "../context/index.mjs";
+import { reactive, TransitionGroup } from "vue";
+import { mountInstance, withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { isFunction, isPlainObject, isString, toNumber, call } from "@varlet/shared";
+import { props as snackbarProps } from "./props.mjs";
+const SNACKBAR_TYPE = ["loading", "success", "warning", "info", "error"];
+let sid = 0;
+let isMount = false;
+let unmount;
+let isAllowMultiple = false;
+const defaultOptionsValue = {
+  type: void 0,
+  content: "",
+  icon: "",
+  action: "",
+  position: "top",
+  duration: 3e3,
+  elevation: true,
+  vertical: false,
+  contentClass: void 0,
+  loadingType: "circle",
+  loadingSize: "normal",
+  lockScroll: false,
+  teleport: "body",
+  forbidClick: false,
+  onOpen: () => {
+  },
+  onOpened: () => {
+  },
+  onClose: () => {
+  },
+  onClosed: () => {
+  }
+};
+let uniqSnackbarOptions = reactive([]);
+let defaultOptions = defaultOptionsValue;
+const transitionGroupProps = {
+  name: "var-snackbar-fade",
+  tag: "div",
+  class: "var-transition-group"
+};
+const getSlotValue = (value) => () => isFunction(value) ? value() : value;
+const TransitionGroupHost = {
+  setup() {
+    return () => {
+      const snackbarList = uniqSnackbarOptions.map(({
+        id,
+        reactiveSnackOptions,
+        _update
+      }) => {
+        const transitionGroupEl = document.querySelector(".var-transition-group");
+        if (reactiveSnackOptions.forbidClick || reactiveSnackOptions.type === "loading") {
+          ;
+          transitionGroupEl.classList.add("var-pointer-auto");
+        } else {
+          ;
+          transitionGroupEl.classList.remove("var-pointer-auto");
+        }
+        const style = __spreadValues({
+          position: isAllowMultiple ? "relative" : "absolute"
+        }, getTop(reactiveSnackOptions.position));
+        const {
+          content,
+          icon,
+          action
+        } = reactiveSnackOptions;
+        const slots = {
+          default: getSlotValue(content),
+          icon: getSlotValue(icon),
+          action: getSlotValue(action)
+        };
+        return _createVNode(VarSnackbarCore, _mergeProps(reactiveSnackOptions, {
+          "key": id,
+          "style": style,
+          "data-id": id,
+          "_update": _update,
+          "show": reactiveSnackOptions.show,
+          "onUpdate:show": ($event) => reactiveSnackOptions.show = $event
+        }), slots);
+      });
+      return _createVNode(TransitionGroup, _mergeProps(transitionGroupProps, {
+        "style": {
+          zIndex: context.zIndex
+        },
+        "onAfterEnter": opened,
+        "onAfterLeave": removeUniqOption
+      }), {
+        default: () => [snackbarList]
+      });
+    };
+  }
+};
+const Snackbar = function(options) {
+  const snackOptions = normalizeOptions(options);
+  const reactiveSnackOptions = reactive(__spreadValues(__spreadValues({}, defaultOptions), snackOptions));
+  reactiveSnackOptions.show = true;
+  if (!isMount) {
+    isMount = true;
+    unmount = mountInstance(TransitionGroupHost).unmountInstance;
+  }
+  const {
+    length
+  } = uniqSnackbarOptions;
+  const uniqSnackbarOptionItem = {
+    id: sid++,
+    reactiveSnackOptions
+  };
+  if (length === 0 || isAllowMultiple) {
+    addUniqOption(uniqSnackbarOptionItem);
+  } else {
+    const _update = `update-${sid}`;
+    updateUniqOption(reactiveSnackOptions, _update);
+  }
+  return {
+    clear() {
+      if (!isAllowMultiple && uniqSnackbarOptions.length) {
+        uniqSnackbarOptions[0].reactiveSnackOptions.show = false;
+      } else {
+        reactiveSnackOptions.show = false;
+      }
+    }
+  };
+};
+SNACKBAR_TYPE.forEach((type) => {
+  Snackbar[type] = (options) => {
+    if (isPlainObject(options)) {
+      options.type = type;
+    } else {
+      options = {
+        content: options,
+        type
+      };
+    }
+    return Snackbar(options);
+  };
+});
+Snackbar.allowMultiple = function(bool = false) {
+  if (bool !== isAllowMultiple) {
+    uniqSnackbarOptions.forEach((option) => {
+      option.reactiveSnackOptions.show = false;
+    });
+    isAllowMultiple = bool;
+  }
+};
+Snackbar.clear = function() {
+  uniqSnackbarOptions.forEach((option) => {
+    option.reactiveSnackOptions.show = false;
+  });
+};
+Snackbar.setDefaultOptions = function(options) {
+  defaultOptions = options;
+};
+Snackbar.resetDefaultOptions = function() {
+  defaultOptions = defaultOptionsValue;
+};
+function opened(element) {
+  const id = element.getAttribute("data-id");
+  const option = uniqSnackbarOptions.find((option2) => option2.id === toNumber(id));
+  if (option) {
+    call(option.reactiveSnackOptions.onOpened);
+  }
+}
+function removeUniqOption(element) {
+  element.parentElement && element.parentElement.classList.remove("var-pointer-auto");
+  const id = element.getAttribute("data-id");
+  const option = uniqSnackbarOptions.find((option2) => option2.id === toNumber(id));
+  if (option) {
+    option.animationEnd = true;
+    call(option.reactiveSnackOptions.onClosed);
+  }
+  const isAllAnimationEnd = uniqSnackbarOptions.every((option2) => option2.animationEnd);
+  if (isAllAnimationEnd) {
+    call(unmount);
+    uniqSnackbarOptions = reactive([]);
+    isMount = false;
+  }
+}
+function addUniqOption(uniqSnackbarOptionItem) {
+  uniqSnackbarOptions.push(uniqSnackbarOptionItem);
+}
+function normalizeOptions(options = {}) {
+  return isString(options) ? {
+    content: options
+  } : options;
+}
+function updateUniqOption(reactiveSnackOptions, _update) {
+  const [firstOption] = uniqSnackbarOptions;
+  firstOption.reactiveSnackOptions = __spreadValues(__spreadValues({}, firstOption.reactiveSnackOptions), reactiveSnackOptions);
+  firstOption._update = _update;
+}
+function getTop(position = "top") {
+  if (position === "bottom") return {
+    top: "85%"
+  };
+  return {
+    top: position === "top" ? "5%" : "45%"
+  };
+}
+Snackbar.Component = VarSnackbar;
+withInstall(VarSnackbar);
+withInstall(VarSnackbar, Snackbar);
+withPropsDefaultsSetter(Snackbar, snackbarProps);
+const _SnackbarComponent = VarSnackbar;
+var stdin_default = Snackbar;
+export {
+  SNACKBAR_TYPE,
+  _SnackbarComponent,
+  stdin_default as default,
+  snackbarProps
+};

package/es/snackbar/props.mjs

@@ -0,0 +1,61 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { defineListenerProp, pickProps } from "../utils/components.mjs";
+import { loadingProps } from "../loading/index.mjs";
+const props = {
+  type: String,
+  position: {
+    type: String,
+    default: "top"
+  },
+  content: [String, Function, Object],
+  contentClass: String,
+  duration: {
+    type: Number,
+    default: 3e3
+  },
+  elevation: {
+    type: [Boolean, String, Number],
+    default: true
+  },
+  vertical: Boolean,
+  loadingType: pickProps(loadingProps, "type"),
+  loadingSize: pickProps(loadingProps, "size"),
+  loadingRadius: pickProps(loadingProps, "radius"),
+  loadingColor: __spreadProps(__spreadValues({}, pickProps(loadingProps, "color")), {
+    default: "currentColor"
+  }),
+  lockScroll: Boolean,
+  show: Boolean,
+  teleport: {
+    type: [String, Object, Boolean],
+    default: "body"
+  },
+  forbidClick: Boolean,
+  onOpen: defineListenerProp(),
+  onOpened: defineListenerProp(),
+  onClose: defineListenerProp(),
+  onClosed: defineListenerProp(),
+  "onUpdate:show": defineListenerProp(),
+  _update: String
+};
+export {
+  props
+};

package/es/snackbar/snackbar.css

@@ -0,0 +1 @@
+:root { --snackbar-width: 256px; --snackbar-color: rgba(255, 255, 255, 0.87); --snackbar-border-radius: 4px; --snackbar-background: #333; --snackbar-font-size: var(--font-size-md); --snackbar-margin: 6px 24px; --snackbar-border-color: currentColor; --snackbar-success-background: var(--color-success); --snackbar-info-background: var(--color-info); --snackbar-error-background: var(--color-danger); --snackbar-warning-background: var(--color-warning); --snackbar-content-padding: 14px 16px; --snackbar-action-margin: 0 8px; --snackbar-vertical-action-margin: 0 8px 8px 0; --snackbar-icon-margin: 0 8px;}.var-transition-group { position: fixed; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;}.var-pointer-auto { pointer-events: auto;}.var-snackbar { display: flex; justify-content: center; align-items: baseline; left: 0; right: 0; bottom: 0; transition: all 0.15s var(--cubic-bezier);}.var-snackbar__transition { top: 0; position: fixed;}.var-snackbar__transition .var-snackbar__wrapper { position: absolute;}.var-snackbar__transition .var-snackbar__wrapper-top { top: 5%;}.var-snackbar__transition .var-snackbar__wrapper-center { top: 45%;}.var-snackbar__transition .var-snackbar__wrapper-bottom { bottom: 5%;}.var-snackbar__wrapper { width: var(--snackbar-width); display: flex; border-radius: var(--snackbar-border-radius); color: var(--snackbar-color); background: var(--snackbar-background); font-size: var(--snackbar-font-size); margin: var(--snackbar-margin); align-items: center; border-color: var(--snackbar-border-color); pointer-events: auto; transition: 0.3s var(--cubic-bezier);}.var-snackbar__wrapper-success { background: var(--snackbar-success-background);}.var-snackbar__wrapper-info { background: var(--snackbar-info-background);}.var-snackbar__wrapper-warning { background: var(--snackbar-warning-background);}.var-snackbar__wrapper-error { background: var(--snackbar-error-background);}.var-snackbar__icon { margin: var(--snackbar-icon-margin);}.var-snackbar__content { flex-grow: 1; padding: var(--snackbar-content-padding);}.var-snackbar__action { margin: var(--snackbar-action-margin); display: flex;}.var-snackbar__vertical { flex-direction: column; align-items: flex-start;}.var-snackbar__vertical .var-snackbar__action { align-self: flex-end; margin: var(--snackbar-vertical-action-margin);}.var-snackbar-fade-enter-from,.var-snackbar-fade-leave-to { opacity: 0; transform: translateY(-30px);}

package/es/snackbar/style/index.mjs

@@ -0,0 +1,7 @@
+import '../../styles/common.css'
+import '../SnackbarSfc.css'
+import '../../styles/elevation.css'
+import '../../loading/loading.css'
+import '../../icon/icon.css'
+import '../snackbar.css'
+import '../coreSfc.css'

package/es/space/Space.mjs

@@ -0,0 +1,69 @@
+import { defineComponent, createVNode as _createVNode } from "vue";
+import { props } from "./props.mjs";
+import { isArray, call } from "@varlet/shared";
+import { createNamespace, flatFragment } from "../utils/components.mjs";
+import { padStartFlex, toSizeUnit } from "../utils/elements.mjs";
+import { computeMargin } from "./margin.mjs";
+
+
+const isInternalSize = (size) => ["mini", "small", "normal", "large"].includes(size);
+const {
+  name,
+  n,
+  classes
+} = createNamespace("space");
+function getSize(size, isInternalSize2) {
+  return isInternalSize2 ? [`var(--space-size-${size}-y)`, `var(--space-size-${size}-x)`] : isArray(size) ? size.map(toSizeUnit) : [toSizeUnit(size), toSizeUnit(size)];
+}
+var stdin_default = defineComponent({
+  name,
+  props,
+  setup(props2, {
+    slots
+  }) {
+    return () => {
+      var _a;
+      const {
+        inline,
+        justify,
+        align,
+        wrap,
+        direction,
+        size
+      } = props2;
+      const _children = (_a = call(slots.default)) != null ? _a : [];
+      const [y, x] = getSize(size, isInternalSize(size));
+      const children = flatFragment(_children);
+      const lastIndex = children.length - 1;
+      const spacers = children.map((child, index) => {
+        var _a2;
+        const margin = computeMargin(y, x, {
+          direction,
+          justify,
+          index,
+          lastIndex
+        });
+        return _createVNode("div", {
+          "class": classes([direction === "column", n("--auto")]),
+          "key": (_a2 = child.key) != null ? _a2 : void 0,
+          "style": {
+            margin
+          }
+        }, [child]);
+      });
+      return _createVNode("div", {
+        "class": classes(n(), n("$--box"), [inline, n("--inline")]),
+        "style": {
+          flexDirection: direction,
+          justifyContent: padStartFlex(justify),
+          alignItems: padStartFlex(align),
+          flexWrap: wrap ? "wrap" : "nowrap",
+          margin: direction === "row" ? `calc(-1 * ${y} / 2) 0` : void 0
+        }
+      }, [spacers]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/space/index.mjs

@@ -0,0 +1,12 @@
+import Space from "./Space.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as spaceProps } from "./props.mjs";
+withInstall(Space);
+withPropsDefaultsSetter(Space, spaceProps);
+const _SpaceComponent = Space;
+var stdin_default = Space;
+export {
+  _SpaceComponent,
+  stdin_default as default,
+  spaceProps
+};

package/es/space/margin.mjs

@@ -0,0 +1,34 @@
+function half(value) {
+  return `calc(${value} / 2)`;
+}
+function computeMargin(y, x, options) {
+  const { direction, justify, index, lastIndex } = options;
+  let margin = "0";
+  if (direction === "row") {
+    if (["flex-start", "center", "flex-end", "start", "end"].includes(justify)) {
+      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;
+}
+export {
+  computeMargin,
+  half
+};

package/es/space/props.mjs

@@ -0,0 +1,23 @@
+const props = {
+  size: {
+    type: [String, Number, Array],
+    default: "normal"
+  },
+  wrap: {
+    type: Boolean,
+    default: true
+  },
+  direction: {
+    type: String,
+    default: "row"
+  },
+  justify: {
+    type: String,
+    default: "flex-start"
+  },
+  align: String,
+  inline: Boolean
+};
+export {
+  props
+};

package/es/space/space.css

@@ -0,0 +1 @@
+: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--inline { display: inline-flex;}.var-space--auto { width: auto;}