@nutui/nutui-react 2.7.0 → 3.0.0-beta.1

package/dist/esm/Ellipsis.js

@@ -1,160 +0,0 @@
-import { _ as __rest } from "./tslib.es6.js";
-import React__default, { useLayoutEffect, useEffect, useState, useRef } from "react";
-import classNames from "classnames";
-import { C as ComponentDefaults } from "./typings.js";
-import { c as canUseDom } from "./can-use-dom.js";
-import { a as useRtl } from "./configprovider2.js";
-const useIsomorphicLayoutEffect = canUseDom ? useLayoutEffect : useEffect;
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { content: "", direction: "end", rows: 1, expandText: "", collapseText: "", symbol: "...", lineHeight: "20" });
-const classPrefix = `nut-ellipsis`;
-const Ellipsis = (props) => {
-  var _a, _b;
-  const _c = Object.assign(Object.assign({}, defaultProps), props), { children, content, className, direction, rows, expandText, collapseText, symbol, lineHeight, onClick, onChange } = _c, rest = __rest(_c, ["children", "content", "className", "direction", "rows", "expandText", "collapseText", "symbol", "lineHeight", "onClick", "onChange"]);
-  const rtl = useRtl();
-  let container = null;
-  let maxHeight = 0;
-  const [exceeded, setExceeded] = useState(false);
-  const [expanded, setExpanded] = useState(false);
-  const ellipsis = useRef();
-  const root = useRef(null);
-  const rtlClasses = classNames({
-    [`${classPrefix}-rtl`]: rtl
-  });
-  const classes = classNames(classPrefix, rtlClasses, className);
-  useIsomorphicLayoutEffect(() => {
-    if (content) {
-      createContainer();
-    }
-  }, [content]);
-  const createContainer = () => {
-    if (!root.current)
-      return;
-    const originStyle = window.getComputedStyle(root.current);
-    container = document.createElement("div");
-    const styleNames = Array.prototype.slice.apply(originStyle);
-    styleNames.forEach((name) => {
-      container.style.setProperty(name, originStyle.getPropertyValue(name));
-    });
-    container.style.position = "fixed";
-    container.style.left = "999999px";
-    container.style.top = "999999px";
-    container.style.zIndex = "-1000";
-    container.style.height = "auto";
-    container.style.minHeight = "auto";
-    container.style.maxHeight = "auto";
-    container.style.textOverflow = "clip";
-    container.style.whiteSpace = "normal";
-    container.style.webkitLineClamp = "unset";
-    container.style.display = "block";
-    const lineH = pxToNumber(originStyle.lineHeight === "normal" ? lineHeight : originStyle.lineHeight);
-    maxHeight = Math.floor(lineH * (Number(rows) + 0.5) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
-    container.innerText = content;
-    document.body.appendChild(container);
-    calcEllipse();
-    document.body.removeChild(container);
-  };
-  const calcEllipse = () => {
-    if (container.offsetHeight <= maxHeight) {
-      setExceeded(false);
-    } else {
-      setExceeded(true);
-      const end = content.length;
-      const middle = Math.floor((0 + end) / 2);
-      const ellipsised = direction === "middle" ? tailorMiddle([0, middle], [middle, end]) : tailor(0, end);
-      ellipsis.current = ellipsised;
-    }
-  };
-  const tailor = (left, right) => {
-    const actionText = expanded ? collapseText : expandText;
-    const end = content.length;
-    if (right - left <= 1) {
-      if (direction === "end") {
-        return {
-          leading: content.slice(0, left) + symbol
-        };
-      }
-      return {
-        tailing: symbol + content.slice(right, end)
-      };
-    }
-    const middle = Math.round((left + right) / 2);
-    if (direction === "end") {
-      container.innerText = content.slice(0, middle) + symbol + actionText;
-    } else {
-      container.innerText = actionText + symbol + content.slice(middle, end);
-    }
-    if (container.offsetHeight <= maxHeight) {
-      if (direction === "end") {
-        return tailor(middle, right);
-      }
-      return tailor(left, middle);
-    }
-    if (direction === "end") {
-      return tailor(left, middle);
-    }
-    return tailor(middle, right);
-  };
-  const tailorMiddle = (leftPart, rightPart) => {
-    const actionText = expanded ? collapseText : expandText;
-    const end = content.length;
-    if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
-      return {
-        leading: content.slice(0, leftPart[0]) + symbol,
-        tailing: symbol + content.slice(rightPart[1], end)
-      };
-    }
-    const leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
-    const rightPartMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
-    container.innerText = content.slice(0, leftPartMiddle) + symbol + actionText + symbol + content.slice(rightPartMiddle, end);
-    if (container.offsetHeight <= maxHeight) {
-      return tailorMiddle([leftPartMiddle, leftPart[1]], [rightPart[0], rightPartMiddle]);
-    }
-    return tailorMiddle([leftPart[0], leftPartMiddle], [rightPartMiddle, rightPart[1]]);
-  };
-  const pxToNumber = (value) => {
-    if (!value)
-      return 0;
-    const match = value.match(/^\d*(\.\d*)?/);
-    return match ? Number(match[0]) : 0;
-  };
-  const clickHandle = (type) => {
-    if (type === 1) {
-      setExpanded(true);
-      onChange && onChange("expand");
-    } else {
-      setExpanded(false);
-      onChange && onChange("collapse");
-    }
-  };
-  const handleClick = () => {
-    onClick && onClick();
-  };
-  return React__default.createElement(
-    "div",
-    Object.assign({ className: classes, onClick: handleClick, ref: root }, rest),
-    !exceeded ? content : null,
-    exceeded && !expanded ? React__default.createElement(
-      "span",
-      null,
-      (_a = ellipsis.current) === null || _a === void 0 ? void 0 : _a.leading,
-      expandText ? React__default.createElement("span", { className: "nut-ellipsis-text", onClick: (e) => {
-        e.stopPropagation();
-        clickHandle(1);
-      } }, expandText) : null,
-      (_b = ellipsis.current) === null || _b === void 0 ? void 0 : _b.tailing
-    ) : null,
-    exceeded && expanded ? React__default.createElement(
-      "span",
-      null,
-      content,
-      expandText ? React__default.createElement("span", { className: "nut-ellipsis-text", onClick: (e) => {
-        e.stopPropagation();
-        clickHandle(2);
-      } }, collapseText) : null
-    ) : null
-  );
-};
-Ellipsis.displayName = "NutEllipsis";
-export {
-  Ellipsis as default
-};

package/dist/esm/Empty/style/index.js

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

package/dist/esm/Empty/style/style.css

@@ -1 +0,0 @@
-.nut-empty{box-sizing:border-box;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:var(--nutui-empty-padding, 32px 40px);background-color:var(--nutui-empty-background-color, #fff)}.nut-empty-image{width:var(--nutui-empty-image-size, 160px);height:var(--nutui-empty-image-size, 160px)}.nut-empty-image .img{width:100%;height:100%}.nut-empty-image img,.nut-empty-image image{width:100%;height:100%}.nut-empty-title{margin-top:var(--nutui-empty-title-margin-top, 0px);margin-bottom:var(--nutui-empty-title-margin-bottom, 8px);color:var(--nutui-gray-7, #1a1a1a);font-size:var(--nutui-font-size-3, 14px);line-height:var(--nutui-empty-title-line-height, var(--nutui-font-size-3, 14px))}.nut-empty-description{margin-top:var(--nutui-empty-description-margin-top, 0px);color:var(--nutui-gray-5, #8c8c8c);font-size:var(--nutui-font-size-2, 12px);line-height:var(--nutui-empty-description-line-height, 1.2)}.nut-empty-small .nut-empty-image{width:var(--nutui-empty-image-small-size, 120px);height:var(--nutui-empty-image-small-size, 120px)}.nut-empty-actions{display:flex;margin-top:16px}.nut-empty-actions .nut-button.nut-empty-actions-left,.nut-empty-actions .nut-button.nut-empty-actions-right{height:28px;padding:0 12px;font-weight:400}.nut-empty-actions .nut-button.nut-empty-actions-left{margin-right:16px}[dir=rtl] .nut-empty-actions .nut-button.nut-empty-actions-left,.nut-rtl .nut-empty-actions .nut-button.nut-empty-actions-left{margin-right:0;margin-left:16px}

package/dist/esm/Empty.js

@@ -1,57 +0,0 @@
-import { _ as __rest } from "./tslib.es6.js";
-import React__default, { useState, useEffect } from "react";
-import classNames from "classnames";
-import { C as ComponentDefaults } from "./typings.js";
-import { B as Button } from "./button2.js";
-const defaultStatus = {
-  empty: "https://storage.360buyimg.com/imgtools/30186cfda0-0d3eee40-c0ac-11ee-9382-9125782aa3b8.png",
-  error: "https://storage.360buyimg.com/imgtools/f3278d0ebb-0ce360c0-c0ac-11ee-8375-193101bb1a46.png",
-  network: "https://storage.360buyimg.com/imgtools/43c30f7e29-0d483d10-c0ac-11ee-bec4-eb4d2a09a51d.png"
-};
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { title: "", description: "", imageSize: "", size: "base", status: "empty", actions: [] });
-const classPrefix = `nut-empty`;
-const Empty = (props) => {
-  const _a = Object.assign(Object.assign({}, defaultProps), props), { image, imageSize, title, description, children, className, size, status, actions } = _a, rest = __rest(_a, ["image", "imageSize", "title", "description", "children", "className", "size", "status", "actions"]);
-  const [imgStyle, setImgStyle] = useState({});
-  const imageUrl = image || defaultStatus[status];
-  const imageNode = typeof imageUrl === "string" ? React__default.createElement("img", { className: "img", src: imageUrl, alt: "empty" }) : imageUrl;
-  useEffect(() => {
-    setImgStyle(() => {
-      if (!imageSize) {
-        return {};
-      }
-      if (typeof imageSize === "number") {
-        return {
-          width: `${imageSize}px`,
-          height: `${imageSize}px`
-        };
-      }
-      return {
-        width: imageSize,
-        height: imageSize
-      };
-    });
-  }, [imageSize]);
-  const classes = classNames({
-    [`${classPrefix}-${size}`]: size !== "base"
-  });
-  const cls = classNames(classPrefix, classes, className);
-  return React__default.createElement(
-    "div",
-    Object.assign({ className: cls }, rest),
-    React__default.createElement("div", { className: `${classPrefix}-image`, style: imgStyle }, imageNode),
-    typeof title === "string" && title ? React__default.createElement("div", { className: `${classPrefix}-title` }, title) : title,
-    typeof description === "string" ? React__default.createElement("div", { className: `${classPrefix}-description` }, description) : description,
-    actions.length > 0 && React__default.createElement("div", { className: `${classPrefix}-actions` }, actions.map((item, index) => {
-      return React__default.createElement(Button, { className: classNames({
-        [`${classPrefix}-actions-right`]: actions.length === 1,
-        [`${classPrefix}-actions-left`]: actions.length > 1 && index === 0
-      }), type: `${actions.length > 1 && index === 0 ? "default" : "primary"}`, size: "small", fill: "outline", key: `action-${index}` }, item === null || item === void 0 ? void 0 : item.text);
-    })),
-    children
-  );
-};
-Empty.displayName = "NutEmpty";
-export {
-  Empty as default
-};

package/dist/esm/FixedNav/style/index.js

@@ -1,2 +0,0 @@
-import '../../Overlay/style'
-import '../../../packages/fixednav/fixednav.scss'

package/dist/esm/FixedNav/style/style.css

@@ -1 +0,0 @@
-.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-black-10, rgba(0, 0, 0, .7)));z-index:var(--nutui-overlay-zIndex, 1000)}.nut-overlay .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-1, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-7, #1a1a1a))}[dir=rtl] .nut-overlay,.nut-rtl .nut-overlay{left:auto;right:0}.nut-overflow-hidden{overflow:hidden!important}@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-overlay-slide-enter-active,.nut-overlay-slide-appear-active{animation-fill-mode:both;animation-name:nut-fade-in;animation-duration:var(--nutui-overlay-animation-duration, .3s)}.nut-overlay-slide-exit-active{animation-fill-mode:both;animation-name:nut-fade-out;animation-duration:var(--nutui-overlay-animation-duration, .3s)}.nut-fixednav{position:fixed;z-index:var(--nutui-fixednav-index, 900);display:inline-block;height:50px;right:0}.nut-fixednav.active .nut-fixednav-btn .nut-icon{transform:rotate(180deg)}.nut-fixednav.active .nut-fixednav-list{transform:translate(0)!important}.nut-fixednav.active.left .nut-icon{transform:rotate(0)!important}.nut-fixednav-btn{box-sizing:border-box;position:absolute;right:0;z-index:var(--nutui-fixednav-index, 900);width:70px;height:100%;background:var(--nutui-fixednav-button-background, var(--nutui-color-primary, #fa2c19));border-radius:45px 0 0 45px;box-shadow:0 2px 4px #0003;display:flex;align-items:center;justify-content:center}.nut-fixednav-btn .text{width:24px;line-height:13px;font-size:var(--nutui-font-size-2, 12px);color:#fff;flex-shrink:0}.nut-fixednav-btn .nut-icon{margin-right:5px;transform:rotate(0);transition:all .3s}.nut-fixednav-list{position:absolute;right:0;transform:translate(100%);transition:all .5s;z-index:var(--nutui-fixednav-index, 900);flex-shrink:0;height:100%;background:var(--nutui-fixednav-background-color, #ffffff);display:flex;justify-content:space-between;border-radius:25px 0 0 25px;box-shadow:2px 2px 8px #0003;padding-left:20px;padding-right:80px}.nut-fixednav-list-item{position:relative;flex:1;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:50px;flex-shrink:0;color:var(--nutui-fixednav-color, #1a1a1a)}.nut-fixednav-list-item img{width:20px;height:20px;margin-bottom:2px}.nut-fixednav-list-item .nut-fixednav-list-text{font-size:10px}.nut-fixednav-list-item .b{position:absolute;right:0;top:1px;height:14px;line-height:14px;font-size:10px;padding:0 3px;color:#fff;background:var(--nutui-color-primary, #fa2c19);border-radius:7px;text-align:center;min-width:12px}.nut-fixednav.left{right:auto;left:0}.nut-fixednav.left .nut-fixednav-btn{flex-direction:row-reverse;right:auto;left:0;border-radius:0 45px 45px 0}.nut-fixednav.left .nut-fixednav-btn .nut-icon{transform:rotate(180deg);margin-right:0;margin-left:5px}.nut-fixednav.left .nut-fixednav-list{transform:translate(-100%);right:auto;border-radius:0 25px 25px 0;padding-left:80px;padding-right:20px;margin:0}[dir=rtl] .nut-fixednav,.nut-rtl .nut-fixednav{right:auto;left:0}[dir=rtl] .nut-fixednav.active .nut-icon,.nut-rtl .nut-fixednav.active .nut-icon{transform:rotate(-180deg)}[dir=rtl] .nut-fixednav-btn,.nut-rtl .nut-fixednav-btn{right:auto;left:0;border-radius:0 45px 45px 0}[dir=rtl] .nut-fixednav-btn .nut-icon,.nut-rtl .nut-fixednav-btn .nut-icon{margin-right:0;margin-left:5px;transform:rotate(180deg)}[dir=rtl] .nut-fixednav-list,.nut-rtl .nut-fixednav-list{right:auto;left:0;transform:translate(-100%);border-radius:0 25px 25px 0;box-shadow:-2px 2px 8px #0003;padding-right:20px;padding-left:80px}[dir=rtl] .nut-fixednav-list-item .b,.nut-rtl .nut-fixednav-list-item .b{right:auto;left:0}[dir=rtl] .nut-fixednav.left,.nut-rtl .nut-fixednav.left{left:auto;right:0}[dir=rtl] .nut-fixednav.left .nut-fixednav-btn,.nut-rtl .nut-fixednav.left .nut-fixednav-btn{left:auto;right:0;border-radius:45px 0 0 45px}[dir=rtl] .nut-fixednav.left .nut-fixednav-btn .nut-icon,.nut-rtl .nut-fixednav.left .nut-fixednav-btn .nut-icon{transform:rotate(0);margin-right:5px;margin-left:0}[dir=rtl] .nut-fixednav.left .nut-fixednav-list,.nut-rtl .nut-fixednav.left .nut-fixednav-list{transform:translate(100%);right:auto;left:auto;border-radius:25px 0 0 25px;padding-right:80px;padding-left:20px}.nut-drag .nut-fixednav{position:relative}

package/dist/esm/FixedNav.js

@@ -1,49 +0,0 @@
-import { _ as __rest } from "./tslib.es6.js";
-import React__default from "react";
-import classNames from "classnames";
-import { ArrowLeft } from "@nutui/icons-react";
-import Overlay__default from "./Overlay.js";
-import { useConfig } from "./ConfigProvider.js";
-import { C as ComponentDefaults } from "./typings.js";
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { activeText: "", inactiveText: "", type: "right", position: {
-  top: "auto",
-  bottom: "auto"
-} });
-const FixedNav = (props) => {
-  const { locale } = useConfig();
-  const _a = Object.assign(Object.assign({}, defaultProps), props), { className, overlay, visible, list, activeText, inactiveText, position, onChange, onSelect, type, children, style, content } = _a, rest = __rest(_a, ["className", "overlay", "visible", "list", "activeText", "inactiveText", "position", "onChange", "onSelect", "type", "children", "style", "content"]);
-  const classPrefix = "nut-fixednav";
-  const classes = classNames(classPrefix, {
-    active: visible
-  }, type, className);
-  const handleClick = (item, event) => {
-    onSelect(item, event);
-  };
-  const onUpdateValue = (value = !visible) => {
-    onChange(value);
-  };
-  return React__default.createElement(
-    "div",
-    Object.assign({ className: classes, style: Object.assign(Object.assign({}, position), style) }, rest),
-    overlay && React__default.createElement(Overlay__default, { visible, style: { "--nutui-overlay-zIndex": 200 }, onClick: () => onUpdateValue(false) }),
-    React__default.createElement("div", { className: "list" }, children || React__default.createElement("div", { className: `${classPrefix}-list` }, list.map((item, index) => {
-      return React__default.createElement(
-        "div",
-        { className: `${classPrefix}-list-item`, onClick: (event) => handleClick(item, event), key: item.id || index },
-        React__default.isValidElement(item.icon) ? item.icon : React__default.createElement("img", { src: item.icon, alt: "" }),
-        React__default.createElement("div", { className: `${classPrefix}-list-text` }, item.text),
-        item.num && React__default.createElement("div", { className: "b" }, item.num)
-      );
-    }))),
-    React__default.createElement("div", { className: `${classPrefix}-btn`, onClick: () => onUpdateValue() }, content || React__default.createElement(
-      React__default.Fragment,
-      null,
-      React__default.createElement(ArrowLeft, { color: "#fff" }),
-      React__default.createElement("div", { className: "text" }, visible ? activeText || locale.fixednav.activeText : inactiveText || locale.fixednav.inactiveText)
-    ))
-  );
-};
-FixedNav.displayName = "NutFixedNav";
-export {
-  FixedNav as default
-};

package/dist/esm/Form/style/index.js

@@ -1,4 +0,0 @@
-import '../../CellGroup/style'
-import '../../Cell/style'
-import '../../FormItem/style'
-import '../../../packages/form/form.scss'

package/dist/esm/Form/style/style.css

@@ -1 +0,0 @@
-.nut-cell-group{display:block}.nut-cell-group-title{display:inherit;padding:var(--nutui-cell-group-title-padding, 0 10px);color:var(--nutui-cell-group-title-color, var(--nutui-gray-7, #1a1a1a));font-size:var(--nutui-cell-group-title-font-size, var(--nutui-font-size-3, 14px));line-height:var(--nutui-cell-group-title-line-height, 20px);margin-top:30px;margin-bottom:10px}.nut-cell-group-description{display:inherit;padding:var(--nutui-cell-group-description-padding, 0 10px);color:var(--nutui-cell-group-description-color, var(--nutui-gray-6, #595959));font-size:var(--nutui-cell-group-description-font-size, var(--nutui-font-size-2, 12px));line-height:var(--nutui-cell-group-description-line-height, 16px);margin-top:10px;margin-bottom:10px}.nut-cell-group-wrap{display:inherit;border-radius:var(--nutui-cell-border-radius, 6px);overflow:hidden;background-color:var(--nutui-cell-group-background-color, var(--nutui-gray-1, #ffffff));margin:var(--nutui-cell-group-wrap-margin, 10px 0)}.nut-cell-group-wrap .nut-cell{margin:0;box-shadow:none;border-radius:0}.nut-cell-group-wrap-divider .nut-cell-divider{position:absolute;box-sizing:border-box;pointer-events:none;right:var(--nutui-cell-divider-right, 16px);bottom:0;left:var(--nutui-cell-divider-left, 16px);transform:scaleY(.5);border-top:var(--nutui-cell-divider-border-bottom, 2px solid var(--nutui-black-3, rgba(0, 0, 0, .06)))}.nut-cell-group-wrap-divider .nut-cell:last-child .nut-cell-divider{border-top:0!important}[dir=rtl] .nut-cell-group-wrap-divider .nut-cell-divider,.nut-rtl .nut-cell-group-wrap-divider .nut-cell-divider{left:var(--nutui-cell-divider-right, 16px);right:var(--nutui-cell-divider-left, 16px)}.nut-cell{position:relative;display:flex;width:100%;line-height:var(--nutui-cell-line-height, 20px);padding:var(--nutui-cell-padding, 13px 16px);background-color:var(--nutui-cell-background-color, var(--nutui-gray-1, #ffffff));border-radius:var(--nutui-cell-border-radius, 6px);box-shadow:var(--nutui-cell-box-shadow, 0px 1px 7px 0px rgb(237, 238, 241));font-size:var(--nutui-cell-title-font-size, var(--nutui-font-size-3, 14px));color:var(--nutui-cell-title-color, var(--nutui-gray-7, #1a1a1a));margin:10px 0;box-sizing:border-box}.nut-cell-left{display:flex;flex-direction:column;flex:1}.nut-cell-description{font-size:var(--nutui-cell-description-font-size, var(--nutui-font-size-2, 12px));color:var(--nutui-cell-description-color, var(--nutui-gray-6, #595959))}.nut-cell-extra{display:inline-flex;justify-content:flex-end;align-items:center;flex:1;min-width:0;word-break:break-all;font-size:var(--nutui-cell-extra-font-size, var(--nutui-font-size-3, 14px));color:var(--nutui-cell-extra-color, var(--nutui-gray-6, #595959))}.nut-cell:active:before{opacity:.1}.nut-cell-clickable{cursor:pointer}.nut-cell-clickable:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:var(--nutui-gray-7, #1a1a1a);border:inherit;border-color:var(--nutui-gray-7, #1a1a1a);border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.nut-form-item{display:flex}.nut-form-item.error.line:before{border-bottom:1px solid var(--nutui-form-item-error-line-color, var(--nutui-color-primary, #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, var(--nutui-font-size-3, 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-color-primary, #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, var(--nutui-font-size-3, 14px));text-align:var(--nutui-form-item-body-input-text-align, left);color:var(--nutui-gray-7, #1a1a1a);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, var(--nutui-font-size-1, 10px));color:var(--nutui-form-item-error-message-color, var(--nutui-color-primary, #fa2c19))}[dir=rtl] .nut-form-item-label,.nut-rtl .nut-form-item-label{text-align:right;margin-right:0;margin-left:var(--nutui-form-item-label-margin-right, 10px)}[dir=rtl] .nut-form-item-label .required:before,.nut-rtl .nut-form-item-label .required:before{margin-right:0;margin-left:var(--nutui-form-item-required-margin-right, 4px)}[dir=rtl] .nut-form-item-body-slots,.nut-rtl .nut-form-item-body-slots{text-align:right}[dir=rtl] .nut-form-item-body-slots .nut-icon-ArrowRight,[dir=rtl] .nut-form-item-body-slots .nut-icon-ArrowLeft,.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowRight,.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowLeft{transform:rotateY(180deg)}[dir=rtl] .nut-form-item-body-slots .nut-input-text,.nut-rtl .nut-form-item-body-slots .nut-input-text,[dir=rtl] .nut-form-item-body-slots .nut-textarea-textarea,.nut-rtl .nut-form-item-body-slots .nut-textarea-textarea,[dir=rtl] .nut-form-item-tips,.nut-rtl .nut-form-item-tips{text-align:right}.form-layout-right .nut-form-item-label{text-align:right;padding-right:24px;white-space:nowrap}.form-layout-left .nut-form-item-label{position:relative;text-align:left;padding-left:12px;white-space:nowrap}.form-layout-left .nut-form-item-label .required{display:block;line-height:1.5;position:absolute;left:.1em}.form-layout-top .nut-form-item{flex-direction:column;align-items:flex-start;white-space:nowrap}.form-layout-top .nut-form-item-label{padding-bottom:4px;display:block;padding-right:24px}.form-layout-top .nut-form-item-body{margin-left:0;width:100%}[dir=rtl] .form-layout-right .nut-form-item-label,.nut-rtl .form-layout-right .nut-form-item-label{text-align:left;padding-right:0;padding-left:24px}[dir=rtl] .form-layout-left .nut-form-item-label,.nut-rtl .form-layout-left .nut-form-item-label{text-align:right;padding-left:0;padding-right:12px}[dir=rtl] .form-layout-left .nut-form-item-label .required,.nut-rtl .form-layout-left .nut-form-item-label .required{left:auto;right:.1em}[dir=rtl] .form-layout-top .nut-form-item-label,.nut-rtl .form-layout-top .nut-form-item-label{padding-right:0;padding-left:24px}[dir=rtl] .form-layout-top .nut-form-item-body,.nut-rtl .form-layout-top .nut-form-item-body{margin-left:0;margin-right:0}

package/dist/esm/Form.js

@@ -1,61 +0,0 @@
-import React__default from "react";
-import classNames from "classnames";
-import { u as useForm, S as SECRET, C as Context, F as FormItem } from "./formitem2.js";
-import { C as ComponentDefaults } from "./typings.js";
-import Cell__default from "./Cell.js";
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { labelPosition: "right", starPosition: "left", divider: false, onFinish: (values) => {
-}, onFinishFailed: (values, errorFields) => {
-} });
-const PositionInfo = {
-  top: "form-layout-top",
-  left: "form-layout-left",
-  right: "form-layout-right"
-};
-const Form = React__default.forwardRef((props, ref) => {
-  const classPrefix = "nut-form";
-  const { className, style, footer, children, initialValues, divider, onFinish, onFinishFailed, labelPosition, starPosition, form } = Object.assign(Object.assign({}, defaultProps), props);
-  let formInstance;
-  if (form !== void 0) {
-    formInstance = form;
-  } else {
-    [formInstance] = useForm();
-  }
-  React__default.useImperativeHandle(ref, () => formInstance);
-  formInstance.starPosition = starPosition;
-  const { submit, resetFields } = formInstance;
-  const { setCallback, setInitialValues } = formInstance.getInternal(SECRET);
-  setCallback({
-    onFinish,
-    onFinishFailed
-  });
-  const mountRef = React__default.useRef(false);
-  setInitialValues(initialValues, !mountRef.current);
-  if (!mountRef.current) {
-    mountRef.current = true;
-  }
-  return React__default.createElement(
-    "form",
-    { className: classNames(classPrefix, PositionInfo[labelPosition], className), style, onSubmit: (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      submit();
-    }, onReset: (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      resetFields();
-    } },
-    React__default.createElement(
-      Cell__default.Group,
-      { divider },
-      React__default.createElement(Context.Provider, { value: formInstance }, children),
-      footer ? React__default.createElement(Cell__default, { className: `${classPrefix}-footer` }, footer) : null
-    )
-  );
-});
-Form.displayName = "NutForm";
-const InnerForm = Form;
-InnerForm.Item = FormItem;
-InnerForm.useForm = useForm;
-export {
-  InnerForm as default
-};

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

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

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

@@ -1 +0,0 @@
-.nut-form-item{display:flex}.nut-form-item.error.line:before{border-bottom:1px solid var(--nutui-form-item-error-line-color, var(--nutui-color-primary, #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, var(--nutui-font-size-3, 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-color-primary, #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, var(--nutui-font-size-3, 14px));text-align:var(--nutui-form-item-body-input-text-align, left);color:var(--nutui-gray-7, #1a1a1a);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, var(--nutui-font-size-1, 10px));color:var(--nutui-form-item-error-message-color, var(--nutui-color-primary, #fa2c19))}[dir=rtl] .nut-form-item-label,.nut-rtl .nut-form-item-label{text-align:right;margin-right:0;margin-left:var(--nutui-form-item-label-margin-right, 10px)}[dir=rtl] .nut-form-item-label .required:before,.nut-rtl .nut-form-item-label .required:before{margin-right:0;margin-left:var(--nutui-form-item-required-margin-right, 4px)}[dir=rtl] .nut-form-item-body-slots,.nut-rtl .nut-form-item-body-slots{text-align:right}[dir=rtl] .nut-form-item-body-slots .nut-icon-ArrowRight,[dir=rtl] .nut-form-item-body-slots .nut-icon-ArrowLeft,.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowRight,.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowLeft{transform:rotateY(180deg)}[dir=rtl] .nut-form-item-body-slots .nut-input-text,.nut-rtl .nut-form-item-body-slots .nut-input-text,[dir=rtl] .nut-form-item-body-slots .nut-textarea-textarea,.nut-rtl .nut-form-item-body-slots .nut-textarea-textarea,[dir=rtl] .nut-form-item-tips,.nut-rtl .nut-form-item-tips{text-align:right}

package/dist/esm/FormItem.js

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

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

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

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

@@ -1 +0,0 @@
-.nut-grid-item{position:relative;box-sizing:border-box;color:var(--nutui-grid-item-text-color, var(--nutui-gray-7, #1a1a1a))}.nut-grid-item-text{color:var(--nutui-grid-item-text-color, var(--nutui-gray-7, #1a1a1a));font-size:var(--nutui-grid-item-text-font-size, var(--nutui-font-size-2, 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, #ffffff);border:0 solid var(--nutui-grid-border-color, var(--nutui-black-3, rgba(0, 0, 0, .06)))}.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-black-10, rgba(0, 0, 0, .7));border:inherit;border-color:var(--nutui-black-10, rgba(0, 0, 0, .7));border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.nut-grid-item-content-clickable:active:before{opacity:.1}[dir=rtl] .nut-grid-item-content-border,.nut-rtl .nut-grid-item-content-border{border-right-width:0;border-left-width:1px}[dir=rtl] .nut-grid-item-content-surround,.nut-rtl .nut-grid-item-content-surround{border-left-width:0;border-right-width:1px}[dir=rtl] .nut-grid-item-content-horizontal .nut-grid-item-text,.nut-rtl .nut-grid-item-content-horizontal .nut-grid-item-text{margin:0 var(--nutui-grid-item-text-margin, 8px) 0 0}[dir=rtl] .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text,.nut-rtl .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text{margin:0 0 0 var(--nutui-grid-item-text-margin, 8px)}[dir=rtl] .nut-grid-item-content-clickable:before,.nut-rtl .nut-grid-item-content-clickable:before{left:auto;right:50%;transform:translate(50%,-50%)}.nut-grid{display:flex;flex-wrap:wrap;border:0 solid var(--nutui-grid-border-color, var(--nutui-black-3, rgba(0, 0, 0, .06)))}.nut-grid-border{border-top-width:1px;border-left-width:1px}[dir=rtl] .nut-grid-border,.nut-rtl .nut-grid-border{border-left-width:0;border-right-width:1px}

package/dist/esm/Grid.js

@@ -1,53 +0,0 @@
-import { _ as __rest } from "./tslib.es6.js";
-import React__default from "react";
-import classNames from "classnames";
-import { a as GridContext, G as GridItem } from "./griditem2.js";
-import { p as pxCheck } from "./px-check.js";
-const defaultProps = {
-  columns: 4,
-  gap: 0,
-  center: true,
-  square: false,
-  reverse: false,
-  direction: "vertical"
-};
-const Grid = (props) => {
-  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, columns, gap, center, square, reverse, direction, style, className, onClick } = _a, rest = __rest(_a, ["children", "columns", "gap", "center", "square", "reverse", "direction", "style", "className", "onClick"]);
-  const childrenDom = React__default.Children.toArray(children);
-  const classPrefix = "nut-grid";
-  const rootClass = () => {
-    return classNames(classPrefix, {
-      [`${classPrefix}-border`]: !gap
-    }, className);
-  };
-  const rootStyle = () => {
-    let styleSelf = {};
-    if (style) {
-      styleSelf = style;
-    }
-    if (gap) {
-      styleSelf.paddingLeft = pxCheck(gap);
-    }
-    return styleSelf;
-  };
-  return React__default.createElement(
-    "div",
-    Object.assign({ className: rootClass(), style: rootStyle() }, rest),
-    React__default.createElement(GridContext.Provider, { value: { onClick } }, childrenDom.map((item, idex) => {
-      return React__default.cloneElement(item, {
-        index: idex,
-        columns,
-        center,
-        gap,
-        square,
-        reverse,
-        direction
-      });
-    }))
-  );
-};
-Grid.displayName = "NutGrid";
-Grid.Item = GridItem;
-export {
-  Grid as default
-};

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

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

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

@@ -1 +0,0 @@
-.nut-grid-item{position:relative;box-sizing:border-box;color:var(--nutui-grid-item-text-color, var(--nutui-gray-7, #1a1a1a))}.nut-grid-item-text{color:var(--nutui-grid-item-text-color, var(--nutui-gray-7, #1a1a1a));font-size:var(--nutui-grid-item-text-font-size, var(--nutui-font-size-2, 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, #ffffff);border:0 solid var(--nutui-grid-border-color, var(--nutui-black-3, rgba(0, 0, 0, .06)))}.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-black-10, rgba(0, 0, 0, .7));border:inherit;border-color:var(--nutui-black-10, rgba(0, 0, 0, .7));border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.nut-grid-item-content-clickable:active:before{opacity:.1}[dir=rtl] .nut-grid-item-content-border,.nut-rtl .nut-grid-item-content-border{border-right-width:0;border-left-width:1px}[dir=rtl] .nut-grid-item-content-surround,.nut-rtl .nut-grid-item-content-surround{border-left-width:0;border-right-width:1px}[dir=rtl] .nut-grid-item-content-horizontal .nut-grid-item-text,.nut-rtl .nut-grid-item-content-horizontal .nut-grid-item-text{margin:0 var(--nutui-grid-item-text-margin, 8px) 0 0}[dir=rtl] .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text,.nut-rtl .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text{margin:0 0 0 var(--nutui-grid-item-text-margin, 8px)}[dir=rtl] .nut-grid-item-content-clickable:before,.nut-rtl .nut-grid-item-content-clickable:before{left:auto;right:50%;transform:translate(50%,-50%)}

package/dist/esm/GridItem.js

@@ -1,4 +0,0 @@
-import { G as GridItem } from "./griditem2.js";
-export {
-  GridItem as default
-};

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

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

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

@@ -1 +0,0 @@
-.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:var(--nutui-gray-3, #f6f6f6);background-size:100% 100%}[dir=rtl] .nut-image .nut-img-loading,.nut-rtl .nut-image .nut-img-loading,[dir=rtl] .nut-image .nut-img-error,.nut-rtl .nut-image .nut-img-error{left:auto;right:0}

package/dist/esm/Image.js

@@ -1,125 +0,0 @@
-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";
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { fit: "fill", position: "center", alt: "", width: "", height: "", error: true, loading: true, lazy: false });
-const classPrefix = "nut-image";
-const Image = (props) => {
-  const { className, style, src, fit, position, alt, width, height, radius, error, loading, lazy, draggable, onClick, onLoad, onError } = Object.assign(Object.assign({}, defaultProps), props);
-  const [innerLoading, setInnerLoading] = useState(false);
-  const [isError, setIsError] = useState(false);
-  const [complete, setComplete] = useState(false);
-  const imgRef = useRef(null);
-  useEffect(() => {
-    if (imgRef.current && imgRef.current.complete && !lazy) {
-      if (imgRef.current.naturalHeight === 0) {
-        handleError();
-      } else {
-        handleLoad();
-      }
-    } else {
-      setInnerLoading(true);
-    }
-  }, [imgRef]);
-  useEffect(() => {
-    setComplete(false);
-  }, [src]);
-  const handleLoad = () => {
-    if (!complete) {
-      setIsError(false);
-      setInnerLoading(false);
-      onLoad && onLoad();
-      setComplete(true);
-    }
-  };
-  const handleError = () => {
-    if (!complete) {
-      setIsError(true);
-      setInnerLoading(false);
-      onError && onError();
-      setComplete(true);
-    }
-  };
-  const containerStyle = Object.assign({ height: height ? pxCheck(height) : "", width: width ? pxCheck(width) : "", overflow: radius !== void 0 && radius !== null ? "hidden" : "", borderRadius: radius !== void 0 && radius !== null ? pxCheck(radius) : "" }, style);
-  const imgStyle = Object.assign({ objectFit: fit, objectPosition: position }, style);
-  const observer = useRef(null);
-  const initObserver = () => {
-    const options = {
-      threshold: [0],
-      // 交会处
-      rootMargin: "0px"
-      // 对视口进行收缩和扩张
-    };
-    observer.current = new IntersectionObserver((entires, self) => {
-      entires.forEach((item) => {
-        if (item.isIntersecting) {
-          setTimeout(() => {
-            const img = item.target;
-            if (img.dataset.src) {
-              img.src = img.dataset.src;
-              img.removeAttribute("data-src");
-            }
-            resetObserver();
-          }, 300);
-        }
-      });
-    }, options);
-    observer.current.observe(imgRef.current);
-  };
-  const resetObserver = () => {
-    observer.current.disconnect && observer.current.disconnect();
-  };
-  useEffect(() => {
-    lazy && initObserver();
-    return () => {
-      lazy && resetObserver();
-    };
-  }, [lazy]);
-  const imageClick = (event) => {
-    onClick && onClick(event);
-  };
-  const renderErrorImg = useCallback(() => {
-    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]);
-  const renderLoading = useCallback(() => {
-    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: (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, draggable }) : React__default.createElement("img", { ref: imgRef, className: "nut-img", style: imgStyle, src, alt, onLoad: handleLoad, onError: handleError, draggable }),
-    renderLoading(),
-    renderErrorImg()
-  );
-};
-Image.displayName = "NutImage";
-export {
-  Image as default
-};

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

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