npm - @nutui/nutui-react - Versions diffs - 2.0.0-beta.0 → 2.0.0-beta.2 - Mend

@nutui/nutui-react 2.0.0-beta.0 → 2.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1791) hide show

package/dist/esm/FormItem/style/css.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import './style.css'

package/dist/esm/FormItem/style/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+
2	+ import '../../../packages/formitem/formitem.scss'

package/dist/esm/FormItem/style/style.css ADDED Viewed

@@ -0,0 +1 @@

+ .nut-form-item{display:flex}.nut-form-item:before{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:16px;bottom:0;left:16px;transform:scaleX(0)}.nut-form-item.error.line:before{border-bottom:1px solid var(--nutui-form-item-error-line-color, var(--nutui-brand-color, #fa2c19));transform:scaleX(1);transition:transform .2s cubic-bezier(0,0,.2,1) 0ms}.nut-form-item__label{font-size:var(--nutui-form-item-label-font-size, 14px);font-weight:400;width:var(--nutui-form-item-label-width, 90px);margin-right:var(--nutui-form-item-label-margin-right, 10px);flex:none!important;display:inline-block!important;word-wrap:break-word;text-align:var(--nutui-form-item-label-text-align, left)}.nut-form-item__label .required:before{content:"*";color:var(--nutui-form-item-required-color, var(--nutui-brand-color, #fa2c19));margin-right:var(--nutui-form-item-required-margin-right, 4px)}.nut-form-item__body{flex:1;display:flex!important;flex-direction:column}.nut-form-item__body__slots{text-align:var(--nutui-form-item-body-slots-text-align, left)}.nut-form-item__body__slots .nut-input{padding:0;border:0}.nut-form-item__body__slots .nut-input-text{font-size:var(--nutui-form-item-body-font-size, 14px);text-align:var(--nutui-form-item-body-input-text-align, left);color:var(--nutui-gray-0, #000000);width:100%;outline:0 none;border:0;text-decoration:none;background:transparent}.nut-form-item__body__slots .nut-range-container{min-height:24px}.nut-form-item__body__slots .nut-textarea{padding:0!important}.nut-form-item__body__slots .nut-textarea .nut-textarea__textarea{font:inherit;text-align:var(--nutui-form-item-body-input-text-align, left)}.nut-form-item__body__tips{text-align:var(--nutui-form-item-tip-text-align, left);font-size:var(--nutui-form-item-tip-font-size, 10px);color:var(--nutui-form-item-error-message-color, var(--nutui-brand-color, #fa2c19))}

package/dist/esm/FormItem.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { F as FormItem } from "./formitem2.js";
+import "react";
+import "./Cell.js";
+import "./typings.js";
+export {
+  FormItem as default
+};

package/dist/esm/Grid/style/css.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import './style.css'

package/dist/esm/Grid/style/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import '../../GridItem/style'
2	+ import '../../../packages/grid/grid.scss'

package/dist/esm/Grid/style/style.css ADDED Viewed

@@ -0,0 +1 @@

+ .nut-grid-item{position:relative;box-sizing:border-box;color:var(--nutui-grid-item-text-color, var(--nutui-gray-1, #1a1a1a))}.nut-grid-item__text{color:var(--nutui-grid-item-text-color, var(--nutui-gray-1, #1a1a1a));font-size:var(--nutui-grid-item-text-font-size, var(--nutui-font-size-1, 12px));line-height:1.5;word-break:break-all;margin:var(--nutui-grid-item-text-margin, 8px) 0 0 0}.nut-grid-item__content{display:flex;flex-direction:column;box-sizing:border-box;height:100%;padding:var(--nutui-grid-item-content-padding, 16px 8px);background:var(--nutui-grid-item-content-bg-color, var(--nutui-gray-6, #ffffff));border:0 solid var(--nutui-grid-border-color, #f5f6f7)}.nut-grid-item__content--border{border-right-width:1px;border-bottom-width:1px}.nut-grid-item__content--surround{border-top-width:1px;border-left-width:1px}.nut-grid-item__content--center{align-items:center;justify-content:center}.nut-grid-item__content--square{position:absolute;top:0;right:0;left:0}.nut-grid-item__content--reverse{flex-direction:column-reverse}.nut-grid-item__content--reverse .nut-grid-item__text{margin:0 0 var(--nutui-grid-item-text-margin, 8px)}.nut-grid-item__content--horizontal{flex-direction:row}.nut-grid-item__content--horizontal .nut-grid-item__text{margin:0 0 0 var(--nutui-grid-item-text-margin, 8px)}.nut-grid-item__content--horizontal.nut-grid-item__content--reverse{flex-direction:row-reverse}.nut-grid-item__content--horizontal.nut-grid-item__content--reverse .nut-grid-item__text{margin:0 var(--nutui-grid-item-text-margin, 8px) 0 0}.nut-grid-item__content--clickable{cursor:pointer}.nut-grid-item__content--clickable:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:var(--nutui-gray-0, #000000);border:inherit;border-color:var(--nutui-gray-0, #000000);border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.nut-grid-item__content--clickable:active:before{opacity:.1}.nut-grid{display:flex;flex-wrap:wrap;border:0 solid var(--nutui-grid-border-color, #f5f6f7)}.nut-grid__border{border-top-width:1px;border-left-width:1px}

package/dist/esm/Grid.js ADDED Viewed

@@ -0,0 +1,79 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "columns", "gap", "center", "square", "reverse", "direction", "style", "className", "onClick"];
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+import React__default from "react";
+import classNames from "classnames";
+import { G as GridContext, a as GridItem } from "./griditem2.js";
+import { p as pxCheck } from "./px-check.js";
+import "./ConfigProvider.js";
+var defaultProps = {
+  columns: 4,
+  gap: 0,
+  center: true,
+  square: false,
+  reverse: false,
+  direction: "vertical"
+};
+var Grid = function Grid2(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, columns = _defaultProps$props.columns, gap = _defaultProps$props.gap, center = _defaultProps$props.center, square = _defaultProps$props.square, reverse = _defaultProps$props.reverse, direction = _defaultProps$props.direction, style = _defaultProps$props.style, className = _defaultProps$props.className, onClick = _defaultProps$props.onClick, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var childrenDom = React__default.Children.toArray(children);
+  var classPrefix = "nut-grid";
+  var rootClass = function rootClass2() {
+    return classNames(className, classPrefix, _defineProperty({}, "".concat(classPrefix, "__border"), !gap));
+  };
+  var rootStyle = function rootStyle2() {
+    var styleSelf = {};
+    if (style) {
+      styleSelf = style;
+    }
+    if (gap) {
+      styleSelf.paddingLeft = pxCheck(gap);
+    }
+    return styleSelf;
+  };
+  return React__default.createElement("div", _objectSpread({
+    className: rootClass(),
+    style: rootStyle()
+  }, rest), React__default.createElement(GridContext.Provider, {
+    value: {
+      onClick
+    }
+  }, childrenDom.map(function(item, idex) {
+    return React__default.cloneElement(item, {
+      index: idex,
+      columns,
+      center,
+      gap,
+      square,
+      reverse,
+      direction
+    });
+  })));
+};
+Grid.defaultProps = defaultProps;
+Grid.displayName = "NutGrid";
+Grid.Item = GridItem;
+export {
+  Grid as default
+};

package/dist/esm/GridItem/style/css.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import './style.css'

package/dist/esm/GridItem/style/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+
2	+ import '../../../packages/griditem/griditem.scss'

package/dist/esm/GridItem/style/style.css ADDED Viewed

@@ -0,0 +1 @@

package/dist/esm/GridItem.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { a as GridItem } from "./griditem2.js";
+import "react";
+import "classnames";
+import "./ConfigProvider.js";
+import "./px-check.js";
+export {
+  GridItem as default
+};

package/dist/esm/Image/style/css.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import './style.css'

package/dist/esm/Image/style/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+
2	+ import '../../../packages/image/image.scss'

package/dist/esm/Image/style/style.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ .nut-image{display:block;position:relative}.nut-image .nut-img{display:block;width:100%;height:100%}.nut-image.nut-image-round{border-radius:50%;overflow:hidden}.nut-image .nut-img-loading,.nut-image .nut-img-error{width:100%;height:100%;position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f7f8fa;background-size:100% 100%}

package/dist/esm/Image.js ADDED Viewed

@@ -0,0 +1,166 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+import React__default, { useState, useRef, useEffect, useCallback } from "react";
+import { ImageError, Image as Image$1 } from "@nutui/icons-react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings.js";
+import { p as pxCheck } from "./px-check.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  fit: "fill",
+  position: "center",
+  alt: "",
+  width: "center",
+  height: "",
+  error: true,
+  loading: true,
+  lazy: false
+});
+var classPrefix = "nut-image";
+var Image = function Image2(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, src = _defaultProps$props.src, fit = _defaultProps$props.fit, position = _defaultProps$props.position, alt = _defaultProps$props.alt, width = _defaultProps$props.width, height = _defaultProps$props.height, radius = _defaultProps$props.radius, error = _defaultProps$props.error, loading = _defaultProps$props.loading, lazy = _defaultProps$props.lazy, onClick = _defaultProps$props.onClick, onLoad = _defaultProps$props.onLoad, onError = _defaultProps$props.onError;
+  var _useState = useState(true), _useState2 = _slicedToArray(_useState, 2), innerLoading = _useState2[0], setInnerLoading = _useState2[1];
+  var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 2), isError = _useState4[0], setIsError = _useState4[1];
+  var imgRef = useRef(null);
+  useEffect(function() {
+    if (imgRef.current && imgRef.current.complete && imgRef.current.naturalHeight !== 0) {
+      setInnerLoading(false);
+    } else if (src) {
+      setInnerLoading(true);
+    }
+  }, [src]);
+  var handleLoad = function handleLoad2() {
+    setIsError(false);
+    setInnerLoading(false);
+    onLoad && onLoad();
+  };
+  var handleError = function handleError2() {
+    setIsError(true);
+    setInnerLoading(false);
+    onError && onError();
+  };
+  var containerStyle = {
+    height: height ? pxCheck(height) : "",
+    width: width ? pxCheck(width) : "",
+    overflow: radius !== void 0 && radius !== null ? "hidden" : "",
+    borderRadius: radius !== void 0 && radius !== null ? pxCheck(radius) : ""
+  };
+  var imgStyle = _objectSpread({
+    objectFit: fit,
+    objectPosition: position
+  }, style);
+  var observer = useRef(null);
+  var initObserver = function initObserver2() {
+    var options = {
+      threshold: [0],
+      rootMargin: "0px"
+      // 对视口进行收缩和扩张
+    };
+    observer.current = new IntersectionObserver(function(entires, self) {
+      entires.forEach(function(item) {
+        if (item.isIntersecting) {
+          setTimeout(function() {
+            var img = item.target;
+            if (img.dataset.src) {
+              img.src = img.dataset.src;
+              img.removeAttribute("data-src");
+            }
+            resetObserver();
+          }, 300);
+        }
+      });
+    }, options);
+    observer.current.observe(imgRef.current);
+  };
+  var resetObserver = function resetObserver2() {
+    observer.current.disconnect && observer.current.disconnect();
+  };
+  useEffect(function() {
+    lazy && initObserver();
+    return function() {
+      lazy && resetObserver();
+    };
+  }, [lazy]);
+  var imageClick = function imageClick2(event) {
+    onClick && onClick(event);
+  };
+  var renderErrorImg = useCallback(function() {
+    if (!isError)
+      return null;
+    if (typeof error === "boolean" && error === true && !innerLoading) {
+      return React__default.createElement("div", {
+        className: "nut-img-error"
+      }, React__default.createElement(ImageError, null));
+    }
+    if (React__default.isValidElement(error) && !innerLoading) {
+      return React__default.createElement("div", {
+        className: "nut-img-error"
+      }, error);
+    }
+    return null;
+  }, [error, isError]);
+  var renderLoading = useCallback(function() {
+    if (!loading)
+      return null;
+    if (typeof loading === "boolean" && loading === true && innerLoading) {
+      return React__default.createElement("div", {
+        className: "nut-img-loading"
+      }, React__default.createElement(Image$1, null));
+    }
+    if (React__default.isValidElement(loading) && innerLoading) {
+      return React__default.createElement("div", {
+        className: "nut-img-loading"
+      }, loading);
+    }
+    return null;
+  }, [loading, innerLoading]);
+  return React__default.createElement("div", {
+    className: classNames(classPrefix, className),
+    style: containerStyle,
+    onClick: function onClick2(e) {
+      imageClick(e);
+    }
+  }, lazy ? React__default.createElement("img", {
+    ref: imgRef,
+    className: "nut-img lazyload",
+    style: imgStyle,
+    "data-src": src,
+    alt,
+    loading: "lazy",
+    onLoad: handleLoad,
+    onError: handleError
+  }) : React__default.createElement("img", {
+    ref: imgRef,
+    className: "nut-img",
+    style: imgStyle,
+    src,
+    alt,
+    onLoad: handleLoad,
+    onError: handleError
+  }), renderLoading(), renderErrorImg());
+};
+Image.defaultProps = defaultProps;
+Image.displayName = "NutImage";
+export {
+  Image as default
+};

package/dist/esm/ImagePreview/style/css.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import './style.css'

package/dist/esm/ImagePreview/style/index.js ADDED Viewed

@@ -0,0 +1,4 @@
+import '../../Popup/style'
+import '../../Swiper/style'
+import '../../Video/style'
+import '../../../packages/imagepreview/imagepreview.scss'

package/dist/esm/ImagePreview/style/style.css ADDED Viewed

@@ -0,0 +1 @@

+ .nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);-webkit-overflow-scrolling:touch}.nut-popup-title{display:flex;align-items:center;justify-content:center;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);padding:var(--nutui-popup-title-padding, 15px);font-weight:var(--nutui-font-weight-bold, 400);line-height:var(--nutui-popup-title-line-height, 18px);font-size:var(--nutui-popup-title-font-size, 18px);border-bottom:var(--nutui-popup-title-border-bottom, 0)}.nut-popup-left-icon{position:absolute;top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon{position:absolute!important;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 24px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 24px) 0 0 var(--nutui-popup-border-radius, 24px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:.3s}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:.3s}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:.3s}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:.3s}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:.3s}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:.3s}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:.3s}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:.3s}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:.3s}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:.3s}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:.3s}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:.3s}.nut-overflow-hidden{overflow:hidden!important}.nut-swiper-item{height:100%}.nut-swiper{position:relative;z-index:1;display:flex;transition-property:transform;box-sizing:content-box;overflow:hidden}.nut-swiper__inner{display:flex;height:100%}.nut-swiper__vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.nut-swiper__indicator{display:flex;position:absolute;left:50%;bottom:var(--nutui-swiper-indicator-bottom, 12px);transform:translate(-50%)}.nut-swiper__indicator-vertical{top:50%;left:12px;bottom:auto;flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;transform:translateY(-50%)}.nut-video{width:100%;height:100%;position:relative;display:flex}.nut-video-player{width:100%;background:#000}.nut-video-player:focus{outline:none}.nut-video video{width:100%;height:100%;object-fit:fill}.nut-imagepreview{width:100%;height:100%}.nut-imagepreview-swiper{height:100%;width:100vw;background-color:transparent}.nut-imagepreview-index{position:fixed;z-index:2002;top:50px;text-align:center;left:0;right:0;background:transparent;color:#fff}.nut-imagepreview-index .arrow{position:absolute;left:15px;transform:rotate(180deg)}.nut-imagepreview .popup-bg{background:rgba(0,0,0,.9)}.nut-imagepreview .popup-box{height:100%;overflow:visible;background-color:transparent}.nut-imagepreview-pop{height:100%;background:transparent!important;display:flex;align-items:center;width:100%}.nut-imagepreview-swiper swiper{width:100%;height:100%}.nut-imagepreview-swiper swiper-item{display:flex;align-items:center;justify-content:center;height:100%}.nut-imagepreview-swiper swiper-item .nut-image-preview-box{width:100%}.nut-imagepreview-swiper swiper-item .nut-video video{object-fit:contain}.nut-imagepreview-swiper .nut-swiper-item{display:flex;align-items:center;justify-content:center;height:100%}.nut-imagepreview-swiper .nut-swiper-item .nut-image-preview-box{width:100%}.nut-imagepreview-swiper .nut-swiper-item .nut-video video{object-fit:contain}

package/dist/esm/ImagePreview.js ADDED Viewed

@@ -0,0 +1,217 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+import React__default, { useRef, useState, useEffect } from "react";
+import Popup from "./Popup.js";
+import Image from "./Image.js";
+import Video from "./Video.js";
+import Swiper from "./Swiper.js";
+import SwiperItem from "./SwiperItem.js";
+import { C as ComponentDefaults } from "./typings.js";
+import { u as usePropsValue } from "./use-props-value.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  images: [],
+  videos: [],
+  visible: false,
+  autoPlay: 3e3,
+  defaultValue: 0,
+  closeOnContentClick: false,
+  indicator: false,
+  indicatorColor: "#fff",
+  onChange: function onChange(value) {
+  },
+  onClose: function onClose() {
+  }
+});
+var ImagePreview = function ImagePreview2(props) {
+  var images = props.images, videos = props.videos, visible = props.visible, defaultValue = props.defaultValue, indicatorColor = props.indicatorColor, indicator = props.indicator, autoPlay = props.autoPlay, closeOnContentClick = props.closeOnContentClick, onClose2 = props.onClose;
+  var classPrefix = "nut-imagepreview";
+  var ref = useRef(null);
+  var _usePropsValue = usePropsValue({
+    value: props.value,
+    defaultValue,
+    finalValue: defaultValue,
+    onChange: function onChange2(val) {
+      var _props$onChange;
+      (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, val);
+    }
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), innerNo = _usePropsValue2[0], setInnerNo = _usePropsValue2[1];
+  var _useState = useState(visible), _useState2 = _slicedToArray(_useState, 2), showPop = _useState2[0], setShowPop = _useState2[1];
+  var _useState3 = useState(0), _useState4 = _slicedToArray(_useState3, 2), active = _useState4[0], setActive = _useState4[1];
+  var _useState5 = useState((images === null || images === void 0 ? void 0 : images.length) || 0 + ((videos === null || videos === void 0 ? void 0 : videos.length) || 0)), _useState6 = _slicedToArray(_useState5, 1), maxNo = _useState6[0];
+  var _useState7 = useState({
+    scale: 1,
+    moveable: false
+  }), _useState8 = _slicedToArray(_useState7, 2), store = _useState8[0], setStore = _useState8[1];
+  var _useState9 = useState(0), _useState10 = _slicedToArray(_useState9, 2), lastTouchEndTime = _useState10[0], setLastTouchEndTime = _useState10[1];
+  var onTouchStart = function onTouchStart2(event) {
+    var touches = event.touches;
+    var events = touches[0];
+    var events2 = touches[1];
+    var curTouchTime = /* @__PURE__ */ (/* @__PURE__ */ new Date()).getTime();
+    if (curTouchTime - lastTouchEndTime < 300) {
+      var store12 = store;
+      if (store12.scale > 1) {
+        store12.scale = 1;
+      } else if (store12.scale === 1) {
+        store12.scale = 2;
+      }
+      scaleNow();
+    }
+    var store1 = store;
+    store1.moveable = true;
+    if (events2) {
+      store1.oriDistance = getDistance({
+        x: events.pageX,
+        y: events.pageY
+      }, {
+        x: events2.pageX,
+        y: events2.pageY
+      });
+    }
+    store1.originScale = store1.scale || 1;
+  };
+  var onTouchMove = function onTouchMove2(event) {
+    var touches = event.touches;
+    var events = touches[0];
+    var events2 = touches[1];
+    if (!store.moveable) {
+      return;
+    }
+    var store1 = store;
+    if (events2) {
+      var curDistance = getDistance({
+        x: events.pageX,
+        y: events.pageY
+      }, {
+        x: events2.pageX,
+        y: events2.pageY
+      });
+      var curScale = curDistance / store1.oriDistance;
+      store1.scale = store1.originScale * curScale;
+      if (store1.scale > 3) {
+        store1.scale = 3;
+      }
+      scaleNow();
+    }
+  };
+  var onTouchEnd = function onTouchEnd2() {
+    setLastTouchEndTime(/* @__PURE__ */ (/* @__PURE__ */ new Date()).getTime());
+    var store1 = store;
+    store1.moveable = false;
+    if (store1.scale < 1.1 && store1.scale > 1 || store1.scale < 1) {
+      store1.scale = 1;
+      scaleNow();
+    }
+  };
+  useEffect(function() {
+    init();
+  }, []);
+  var init = function init2() {
+    document.addEventListener("touchmove", onTouchMove);
+    document.addEventListener("touchend", onTouchEnd);
+    document.addEventListener("touchcancel", onTouchEnd);
+  };
+  useEffect(function() {
+    setShowPop(visible);
+  }, [visible]);
+  useEffect(function() {
+    setInnerNo(defaultValue || 1);
+  }, [defaultValue]);
+  useEffect(function() {
+    setActive(innerNo);
+  }, [innerNo]);
+  var scaleNow = function scaleNow2() {
+    if (ref.current) {
+      ref.current.style.transform = "scale(".concat(store.scale, ")");
+    }
+  };
+  var getDistance = function getDistance2(first, second) {
+    return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
+  };
+  var slideChangeEnd = function slideChangeEnd2(page) {
+    setActive(page + 1);
+  };
+  var onCloseInner = function onCloseInner2() {
+    setShowPop(false);
+    setActive(1);
+    scaleNow();
+    onClose2 && onClose2();
+    setStore(_objectSpread(_objectSpread({}, store), {}, {
+      scale: 1
+    }));
+  };
+  var closeOnImg = function closeOnImg2() {
+    if (closeOnContentClick) {
+      onCloseInner();
+    }
+  };
+  return React__default.createElement(Popup, {
+    visible: showPop,
+    className: "".concat(classPrefix, "-pop"),
+    style: {
+      width: "100%"
+    },
+    onClick: onCloseInner
+  }, React__default.createElement("div", {
+    className: classPrefix,
+    ref,
+    onClick: closeOnImg,
+    onTouchStart
+  }, React__default.createElement(Swiper, {
+    autoPlay,
+    className: "".concat(classPrefix, "-swiper"),
+    loop: true,
+    preventDefault: false,
+    style: {
+      display: showPop ? "block" : "none",
+      "--nutui-indicator-color": indicatorColor
+    },
+    direction: "horizontal",
+    onChange: function onChange2(page) {
+      return slideChangeEnd(page);
+    },
+    defaultValue: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1),
+    indicator
+  }, (videos && videos.length > 0 ? videos.map(function(item, index) {
+    return React__default.createElement(SwiperItem, {
+      key: index
+    }, React__default.createElement(Video, {
+      source: item.source,
+      options: item.options
+    }));
+  }) : []).concat(images && images.length > 0 ? images.map(function(item, index) {
+    return React__default.createElement(SwiperItem, {
+      key: index
+    }, React__default.createElement(Image, {
+      src: item.src
+    }));
+  }) : []))), React__default.createElement("div", {
+    className: "".concat(classPrefix, "-index")
+  }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0)));
+};
+ImagePreview.defaultProps = defaultProps;
+ImagePreview.displayName = "NutImagePreview";
+export {
+  ImagePreview as default
+};

package/dist/esm/Indicator/style/css.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import './style.css'

package/dist/esm/Indicator/style/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-require('../../../packages/indicator/indicator.scss')
+import '../../../packages/indicator/indicator.scss'

package/dist/esm/Indicator/style/style.css ADDED Viewed

@@ -0,0 +1 @@

+ .nut-indicator__dot{margin:0 var(--nutui-indicator-dot-margin, 4px)}.nut-indicator__dot:first-child{margin-left:0}.nut-indicator__dot:last-child{margin-right:0}.nut-indicator__dot{display:inline-block;vertical-align:middle;width:var(--nutui-indicator-dot-size, 5px);height:var(--nutui-indicator-dot-size, 5px);border-radius:50%;background-color:var(--nutui-indicator-dot-color, var(--nutui-gray-3, #bfbfbf))}.nut-indicator__active{width:var(--nutui-indicator-dot-active-size, 15px);border-radius:var(--nutui-indicator-border-size, 3px);background-color:var(--nutui-indicator-color, var(--nutui-brand-color, #fa2c19))}.nut-indicator__vertical{display:flex;flex-direction:column;align-items:center;justify-content:center}.nut-indicator__vertical .nut-indicator__dot{margin:var(--nutui-indicator-dot-vertical-margin, 4px) 0}.nut-indicator__vertical .nut-indicator__dot:first-child{margin-top:0}.nut-indicator__vertical .nut-indicator__dot:last-child{margin-bottom:0}.nut-indicator__vertical .nut-indicator__active{width:var(--nutui-indicator-dot-size, 5px);height:var(--nutui-indicator-dot-active-size, 15px)}