@varlet/ui 2.20.1 → 2.20.2

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,150 @@
+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 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 = event.touches[0].clientX - left;
+  const localY = event.touches[0].clientY - top;
+  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;
+}
+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 });
+  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);
+  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 '../ripple.css'
+import '../../styles/common.css'

package/es/row/Row.mjs

@@ -0,0 +1,62 @@
+import { defineComponent, computed, watch } 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 { cols, bindCols, length } = useCols();
+    const rowProvider = { computePadding };
+    watch(() => length.value, computePadding);
+    watch(() => props2.gutter, computePadding);
+    bindCols(rowProvider);
+    function computePadding() {
+      cols.forEach((col) => {
+        const [y, x] = average.value;
+        col.setPadding({ left: x, right: x, top: y, bottom: y });
+      });
+    }
+    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 { bindChildren, childProviders, length } = useChildren(ROW_BIND_COL_KEY);
+  return {
+    length,
+    cols: childProviders,
+    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'