@varlet/ui 3.5.1 → 3.5.3

package/es/result/Result.mjs

@@ -0,0 +1,123 @@
+import Info from "./Info.mjs";
+import Error from "./Error.mjs";
+import Warning from "./Warning.mjs";
+import Success from "./Success.mjs";
+import Question from "./Question.mjs";
+import Empty from "./Empty.mjs";
+import { computed, defineComponent } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+const { name, 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";
+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, ["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 */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    Info,
+    Success,
+    Warning,
+    Error,
+    Question,
+    Empty
+  },
+  props,
+  setup(props2) {
+    const circleSize = computed(
+      () => `calc(${props2.imageSize ? toSizeUnit(props2.imageSize) : "var(--result-image-size)"} * 0.9)`
+    );
+    const borderSize = computed(
+      () => `calc(${props2.imageSize ? toSizeUnit(props2.imageSize) : "var(--result-image-size)"} * 0.05)`
+    );
+    return {
+      circleSize,
+      borderSize,
+      n,
+      classes
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/result/Success.mjs

@@ -0,0 +1,102 @@
+import { defineComponent } from "vue";
+import { createNamespace } from "../utils/components.mjs";
+const { n, classes } = createNamespace("result");
+import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    _Fragment,
+    null,
+    [
+      _createElementVNode(
+        "span",
+        {
+          class: _normalizeClass(_ctx.n("success-cover-left"))
+        },
+        null,
+        2
+        /* CLASS */
+      ),
+      _createElementVNode(
+        "span",
+        {
+          class: _normalizeClass(_ctx.classes(_ctx.n("success-line"), _ctx.n("success-line-tip"))),
+          style: _normalizeStyle({
+            animationDuration: _ctx.animation ? "760ms" : "0ms",
+            borderRadius: `calc(${_ctx.borderSize} * 0.625)`
+          })
+        },
+        null,
+        6
+        /* CLASS, STYLE */
+      ),
+      _createElementVNode(
+        "span",
+        {
+          class: _normalizeClass(_ctx.classes(_ctx.n("success-line"), _ctx.n("success-line-long"))),
+          style: _normalizeStyle({
+            animationDuration: _ctx.animation ? "770ms" : "0ms",
+            borderRadius: `calc(${_ctx.borderSize} * 0.625)`
+          })
+        },
+        null,
+        6
+        /* CLASS, STYLE */
+      ),
+      _createElementVNode(
+        "span",
+        {
+          ref: "circle",
+          class: _normalizeClass(_ctx.n("success-circle")),
+          style: _normalizeStyle({ left: `-${_ctx.borderSize}`, top: `-${_ctx.borderSize}`, borderWidth: _ctx.borderSize })
+        },
+        null,
+        6
+        /* CLASS, STYLE */
+      ),
+      _createElementVNode(
+        "span",
+        {
+          class: _normalizeClass(_ctx.n("success-line-fix"))
+        },
+        null,
+        2
+        /* CLASS */
+      ),
+      _createElementVNode(
+        "span",
+        {
+          class: _normalizeClass(_ctx.n("success-cover-right")),
+          style: _normalizeStyle({
+            animationDuration: _ctx.animation ? "4250ms" : "0ms"
+          })
+        },
+        null,
+        6
+        /* CLASS, STYLE */
+      )
+    ],
+    64
+    /* STABLE_FRAGMENT */
+  );
+}
+const __sfc__ = defineComponent({
+  props: {
+    animation: {
+      type: Boolean
+    },
+    borderSize: {
+      type: String
+    }
+  },
+  setup() {
+    return {
+      n,
+      classes
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/result/Warning.mjs

@@ -0,0 +1,23 @@
+import { defineComponent } from "vue";
+import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "-6 -4 35 35"
+};
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+    _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 */
+    )
+  ]));
+}
+const __sfc__ = defineComponent({});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/result/index.mjs

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

package/es/result/props.mjs

@@ -0,0 +1,16 @@
+const props = {
+  imageSize: [String, Number],
+  type: {
+    type: String,
+    default: "success"
+  },
+  title: String,
+  description: String,
+  animation: {
+    type: Boolean,
+    default: true
+  }
+};
+export {
+  props
+};

package/es/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: 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.mjs

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

package/es/ripple/index.mjs

@@ -0,0 +1,174 @@
+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 context from "../context/index.mjs";
+import { supportTouch, getStyle, getRect } from "@varlet/shared";
+import { createNamespace } from "../utils/components.mjs";
+
+
+const { n } = createNamespace("ripple");
+const ANIMATION_DURATION = 250;
+function setStyles(element) {
+  const { zIndex, position } = getStyle(element);
+  element.style.overflow = "hidden";
+  element.style.overflowX = "hidden";
+  element.style.overflowY = "hidden";
+  position === "static" && (element.style.position = "relative");
+  zIndex === "auto" && (element.style.zIndex = "1");
+}
+function isTouchEvent(event) {
+  return "touches" in event;
+}
+function computeRippleStyles(element, event) {
+  const { top, left } = getRect(element);
+  const { clientWidth, clientHeight } = element;
+  const radius = Math.sqrt(clientWidth ** 2 + clientHeight ** 2) / 2;
+  const size = radius * 2;
+  const localX = isTouchEvent(event) ? event.touches[0].clientX - left : clientWidth / 2;
+  const localY = isTouchEvent(event) ? event.touches[0].clientY - top : clientHeight / 2;
+  const centerX = (clientWidth - radius * 2) / 2;
+  const centerY = (clientHeight - radius * 2) / 2;
+  const x = localX - radius;
+  const y = localY - radius;
+  return { x, y, centerX, centerY, size };
+}
+function createRipple(event) {
+  const _ripple = this._ripple;
+  _ripple.removeRipple();
+  if (_ripple.disabled || _ripple.tasker || !context.enableRipple) {
+    return;
+  }
+  const task = () => {
+    _ripple.tasker = null;
+    const { x, y, centerX, centerY, size } = computeRippleStyles(this, event);
+    const ripple = document.createElement("div");
+    ripple.classList.add(n());
+    ripple.style.opacity = `0`;
+    ripple.style.transform = `translate(${x}px, ${y}px) scale3d(.3, .3, .3)`;
+    ripple.style.width = `${size}px`;
+    ripple.style.height = `${size}px`;
+    _ripple.color && (ripple.style.backgroundColor = _ripple.color);
+    ripple.dataset.createdAt = String(performance.now());
+    setStyles(this);
+    this.appendChild(ripple);
+    window.setTimeout(() => {
+      ripple.style.transform = `translate(${centerX}px, ${centerY}px) scale3d(1, 1, 1)`;
+      ripple.style.opacity = `.25`;
+    }, 20);
+  };
+  _ripple.tasker = window.setTimeout(task, 30);
+}
+function removeRipple() {
+  const _ripple = this._ripple;
+  const task = () => {
+    const ripples = this.querySelectorAll(`.${n()}`);
+    if (!ripples.length) {
+      return;
+    }
+    const lastRipple = ripples[ripples.length - 1];
+    const delay = ANIMATION_DURATION - performance.now() + Number(lastRipple.dataset.createdAt);
+    window.setTimeout(() => {
+      lastRipple.style.opacity = `0`;
+      window.setTimeout(() => {
+        var _a;
+        return (_a = lastRipple.parentNode) == null ? void 0 : _a.removeChild(lastRipple);
+      }, ANIMATION_DURATION);
+    }, delay);
+  };
+  _ripple.tasker ? window.setTimeout(task, 30) : task();
+}
+function forbidRippleTask() {
+  if (!supportTouch() || !context.enableRipple) {
+    return;
+  }
+  const _ripple = this._ripple;
+  _ripple.tasker && window.clearTimeout(_ripple.tasker);
+  _ripple.tasker = null;
+}
+let hasKeyboardRipple = false;
+function createKeyboardRipple(event) {
+  if (hasKeyboardRipple || !(event.key === " " || event.key === "Enter")) {
+    return;
+  }
+  createRipple.call(this, event);
+  hasKeyboardRipple = true;
+}
+function removeKeyboardRipple() {
+  if (!hasKeyboardRipple) {
+    return;
+  }
+  removeRipple.call(this);
+  hasKeyboardRipple = false;
+}
+function mounted(el, binding) {
+  var _a;
+  el._ripple = __spreadProps(__spreadValues({
+    tasker: null
+  }, (_a = binding.value) != null ? _a : {}), {
+    removeRipple: removeRipple.bind(el)
+  });
+  el.addEventListener("touchstart", createRipple, { passive: true });
+  el.addEventListener("touchmove", forbidRippleTask, { passive: true });
+  el.addEventListener("dragstart", removeRipple, { passive: true });
+  el.addEventListener("keydown", createKeyboardRipple);
+  el.addEventListener("keyup", removeKeyboardRipple);
+  el.addEventListener("blur", removeKeyboardRipple);
+  document.addEventListener("touchend", el._ripple.removeRipple, { passive: true });
+  document.addEventListener("touchcancel", el._ripple.removeRipple, { passive: true });
+  document.addEventListener("dragend", el._ripple.removeRipple, { passive: true });
+}
+function unmounted(el) {
+  el.removeEventListener("touchstart", createRipple);
+  el.removeEventListener("touchmove", forbidRippleTask);
+  el.removeEventListener("dragstart", removeRipple);
+  if (!el._ripple || !el._ripple.removeRipple) {
+    return;
+  }
+  document.removeEventListener("touchend", el._ripple.removeRipple);
+  document.removeEventListener("touchcancel", el._ripple.removeRipple);
+  document.removeEventListener("dragend", el._ripple.removeRipple);
+}
+function updated(el, binding) {
+  var _a, _b, _c, _d, _e, _f;
+  const newBinding = {
+    color: (_a = binding.value) == null ? void 0 : _a.color,
+    disabled: (_b = binding.value) == null ? void 0 : _b.disabled
+  };
+  const diff = newBinding.color !== ((_c = el._ripple) == null ? void 0 : _c.color) || newBinding.disabled !== ((_d = el._ripple) == null ? void 0 : _d.disabled);
+  if (diff) {
+    el._ripple = __spreadValues({
+      tasker: newBinding.disabled ? null : (_e = el._ripple) == null ? void 0 : _e.tasker,
+      removeRipple: (_f = el._ripple) == null ? void 0 : _f.removeRipple
+    }, newBinding);
+  }
+}
+const Ripple = {
+  mounted,
+  unmounted,
+  updated,
+  install(app) {
+    app.directive("ripple", this);
+  }
+};
+const _RippleComponent = Ripple;
+var stdin_default = Ripple;
+export {
+  _RippleComponent,
+  stdin_default as default
+};

package/es/ripple/ripple.css

@@ -0,0 +1 @@
+:root { --ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6); --ripple-color: currentColor;}.var-ripple { position: absolute; transition: transform 0.2s var(--ripple-cubic-bezier), opacity 0.14s linear; top: 0; left: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity; pointer-events: none; z-index: 100; background-color: var(--ripple-color);}

package/es/ripple/style/index.mjs

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

package/es/row/Row.mjs

@@ -0,0 +1,53 @@
+import { defineComponent, computed } from "vue";
+import { props } from "./props.mjs";
+import { isArray, call } from "@varlet/shared";
+import { useCols } from "./provide.mjs";
+import { toPxNum, padStartFlex } from "../utils/elements.mjs";
+import { createNamespace } from "../utils/components.mjs";
+const { name, n, classes } = createNamespace("row");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
+      style: _normalizeStyle({
+        justifyContent: _ctx.padStartFlex(_ctx.justify),
+        alignItems: _ctx.padStartFlex(_ctx.align),
+        margin: `${-_ctx.average[0]}px ${-_ctx.average[1]}px`
+      }),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    },
+    [
+      _renderSlot(_ctx.$slots, "default")
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const average = computed(
+      () => isArray(props2.gutter) ? props2.gutter.map((numeric) => toPxNum(numeric) / 2) : [0, toPxNum(props2.gutter) / 2]
+    );
+    const { bindCols } = useCols();
+    bindCols({ average });
+    function handleClick(e) {
+      call(props2.onClick, e);
+    }
+    return {
+      average,
+      n,
+      classes,
+      handleClick,
+      padStartFlex
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/row/index.mjs

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

package/es/row/props.mjs

@@ -0,0 +1,19 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  gutter: {
+    type: [String, Number, Array],
+    default: 0
+  },
+  justify: {
+    type: String,
+    default: "flex-start"
+  },
+  align: {
+    type: String,
+    default: "flex-start"
+  },
+  onClick: defineListenerProp()
+};
+export {
+  props
+};

package/es/row/provide.mjs

@@ -0,0 +1,14 @@
+import { useChildren } from "@varlet/use";
+const ROW_BIND_COL_KEY = Symbol("ROW_BIND_COL_KEY");
+function useCols() {
+  const { length, childProviders: cols, bindChildren } = useChildren(ROW_BIND_COL_KEY);
+  return {
+    length,
+    cols,
+    bindCols: bindChildren
+  };
+}
+export {
+  ROW_BIND_COL_KEY,
+  useCols
+};

package/es/row/row.css

@@ -0,0 +1 @@
+.var-row { display: flex; flex-wrap: wrap;}

package/es/row/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../row.css'
+import '../RowSfc.css'