@nutui/nutui-react 3.0.0 → 3.0.2

package/dist/cjs/packages/sidenavbar/style/style.css

@@ -1,443 +0,0 @@
-@charset "UTF-8";
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
-.nut-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
-  z-index: var(--nutui-overlay-zIndex, 1000);
-}
-
-.nut-overflow-hidden {
-  overflow: hidden !important;
-}
-
-@keyframes nut-fade-in {
-  0% {
-    opacity: 0;
-  }
-  1% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes nut-fade-out {
-  0% {
-    opacity: 1;
-  }
-  1% {
-    opacity: 1;
-  }
-  100% {
-    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, 0.3s);
-}
-.nut-overlay-slide-exit-active {
-  animation-fill-mode: both;
-  animation-name: nut-fade-out;
-  animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
-}
-
-[dir=rtl] .nut-overlay,
-.nut-rtl .nut-overlay {
-  left: auto;
-  right: 0;
-}
-
-.nut-popup {
-  position: fixed;
-  min-height: 46%;
-  max-height: 100%;
-  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
-  -webkit-overflow-scrolling: touch;
-  font-size: var(--nutui-font-size-base, 14px);
-}
-.nut-popup-title {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  border-bottom: var(--nutui-popup-title-border-bottom, 0);
-  padding: var(--nutui-popup-title-padding, 16px);
-  position: relative;
-}
-.nut-popup-title-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-.nut-popup-title-title {
-  color: var(--nutui-color-title, #1a1a1a);
-  font-weight: var(--nutui-font-weight-bold, 600);
-  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
-  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
-}
-.nut-popup-title-description {
-  color: var(--nutui-color-text, #505259);
-  font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14px));
-  font-weight: var(--nutui-font-weight, 400);
-}
-.nut-popup-title-description-gap {
-  margin-top: var(--nutui-popup-description-spacing, var(--nutui-spacing-base, 8px));
-}
-.nut-popup-title-left {
-  position: absolute;
-  top: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
-}
-.nut-popup-title-right {
-  position: absolute;
-  top: var(--nutui-popup-title-padding, 16px);
-  right: var(--nutui-popup-title-padding, 16px);
-  z-index: 1;
-  width: var(--nutui-popup-icon-size, 20px);
-  height: var(--nutui-popup-icon-size, 20px);
-  color: var(--nutui-color-title, #1a1a1a);
-  cursor: pointer;
-}
-.nut-popup-title-right:active {
-  opacity: 0.7;
-}
-.nut-popup-title-right-top-left {
-  top: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
-}
-.nut-popup-title-right-bottom-left {
-  bottom: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
-}
-.nut-popup-title-right-bottom-right {
-  right: var(--nutui-popup-title-padding, 16px);
-  bottom: var(--nutui-popup-title-padding, 16px);
-}
-.nut-popup-center {
-  top: 50%;
-  left: 50%;
-  min-height: 10%;
-  max-width: 295px;
-  transform: translate(-50%, -50%);
-}
-.nut-popup-center.nut-popup-round {
-  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
-}
-.nut-popup-bottom, .nut-popup-top {
-  max-height: 87%;
-}
-.nut-popup-bottom {
-  bottom: 0;
-  left: 0;
-  width: 100%;
-}
-.nut-popup-bottom.nut-popup-round {
-  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
-}
-.nut-popup-right {
-  top: 0;
-  right: 0;
-  width: 100px;
-  height: 100%;
-}
-.nut-popup-right.nut-popup-round {
-  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
-}
-.nut-popup-left {
-  top: 0;
-  left: 0;
-  width: 100px;
-  height: 100%;
-}
-.nut-popup-left.nut-popup-round {
-  border-radius: 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0;
-}
-.nut-popup-top {
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-.nut-popup-top.nut-popup-round {
-  border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
-}
-.nut-popup-slide {
-  /* 从顶部滑出 */
-  /* 从右侧滑出 */
-  /* 从底部滑出 */
-  /* 从左侧滑出 */
-}
-@keyframes popup-scale-fade-in {
-  from {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes popup-scale-fade-out {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-}
-.nut-popup-slide-default-enter-active {
-  animation-fill-mode: both;
-  animation-name: popup-scale-fade-in;
-  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
-}
-.nut-popup-slide-default-exit-active {
-  animation-fill-mode: both;
-  animation-name: popup-scale-fade-out;
-  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
-}
-@keyframes popup-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes popup-fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-.nut-popup-slide-center-enter-active {
-  animation-fill-mode: both;
-  animation-name: popup-fade-in;
-  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
-}
-.nut-popup-slide-center-exit-active {
-  animation-fill-mode: both;
-  animation-name: popup-fade-out;
-  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
-}
-@keyframes popup-slide-top-enter {
-  from {
-    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: translate3d(0, 0%, 0);
-  animation-fill-mode: both;
-  animation-name: popup-slide-top-enter;
-  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
-}
-.nut-popup-slide-top-exit-active {
-  animation-fill-mode: both;
-  animation-name: popup-slide-top-exit;
-  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
-}
-@keyframes popup-slide-right-enter {
-  from {
-    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: translate3d(0, 0, 0);
-  animation-fill-mode: both;
-  animation-name: popup-slide-right-enter;
-  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
-}
-.nut-popup-slide-right-exit {
-  animation-fill-mode: both;
-  animation-name: popup-slide-right-exit;
-  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
-}
-@keyframes popup-slide-bottom-enter {
-  from {
-    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, 0);
-  animation-fill-mode: both;
-  animation-name: popup-slide-bottom-enter;
-  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
-}
-.nut-popup-slide-bottom-exit {
-  animation-fill-mode: both;
-  animation-name: slide-bottom-exit;
-  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
-}
-@keyframes popup-slide-left-enter {
-  from {
-    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, 0);
-  animation-fill-mode: both;
-  animation-name: popup-slide-left-enter;
-  animation-duration: var(--nutui-popup-animation-duration, 0.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: var(--nutui-popup-animation-duration, 0.3s);
-}
-.nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
-  display: none;
-}
-.nut-popup .nut-overflow-hidden {
-  overflow: hidden;
-}
-
-[dir=rtl] .nut-popup-title-left,
-.nut-rtl .nut-popup-title-left {
-  left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
-}
-[dir=rtl] .nut-popup-title-right,
-.nut-rtl .nut-popup-title-right {
-  right: auto;
-  left: var(--nutui-popup-title-padding, 16px);
-}
-[dir=rtl] .nut-popup-title-right-top-left,
-.nut-rtl .nut-popup-title-right-top-left {
-  left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
-}
-[dir=rtl] .nut-popup-title-right-bottom-left,
-.nut-rtl .nut-popup-title-right-bottom-left {
-  left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
-}
-[dir=rtl] .nut-popup-title-right-bottom-right,
-.nut-rtl .nut-popup-title-right-bottom-right {
-  right: auto;
-  left: var(--nutui-popup-title-padding, 16px);
-}
-[dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,
-.nut-rtl .nut-popup-title .nut-icon-ArrowLeft {
-  transform: rotate(180deg);
-}
-[dir=rtl] .nut-popup-center,
-.nut-rtl .nut-popup-center {
-  left: auto;
-  right: 50%;
-  transform: translate(50%, -50%);
-}
-[dir=rtl] .nut-popup-bottom,
-.nut-rtl .nut-popup-bottom {
-  left: auto;
-  right: 0;
-}
-[dir=rtl] .nut-popup-top,
-.nut-rtl .nut-popup-top {
-  left: auto;
-  right: 0;
-}
-
-.nut-sidenavbar {
-  color: #1d1d21;
-  font-size: 14px;
-  height: 100%;
-  overflow: auto;
-  display: block;
-  background-color: var(--nutui-sidenavbar-content-bg-color, #ffffff);
-}
-.nut-sidenavbar .arrow-icon {
-  position: absolute;
-  width: 0;
-  height: 0;
-  right: 16px;
-  top: 18px;
-  cursor: pointer;
-}
-.nut-sidenavbar .arrow-down {
-  border-top: 4px solid var(--nutui-color-text-help, #888b94);
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-}
-.nut-sidenavbar .arrow-up {
-  border-bottom: 4px solid var(--nutui-color-text-help, #888b94);
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-}
-.nut-sidenavbar-title {
-  height: var(--nutui-sidenavbar-item-height, 40px);
-  padding: var(--nutui-sidenavbar-title-padding, 10px 8px 10px 20px);
-  background: var(--nutui-sidenavbar-title-background, var(--nutui-color-background, #f2f3f5));
-  color: var(--nutui-sidenavbar-title-color, var(--nutui-color-title, #1a1a1a));
-  box-sizing: border-box;
-  transition: transform 0.5s;
-}
-.nut-sidenavbar-content {
-  position: relative;
-  display: block;
-}
-.nut-sidenavbar-list.sidenavbar-show .nut-sidenavbar-content {
-  height: auto;
-  overflow: inherit;
-}
-.nut-sidenavbar-list.sidenavbar-hide .nut-sidenavbar-content {
-  height: 0;
-  overflow: hidden;
-}
-.nut-sidenavbar .nut-subsidenavbar-border-bt {
-  position: relative;
-}
-.nut-sidenavbar .nut-subsidenavbar-border-bt:after {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 1px;
-  background: #eeeff2;
-  transform: scale(1, 0.5);
-  left: 0;
-  bottom: 0;
-}
-
-[dir=rtl] .nut-sidenavbar .arrow-icon,
-.nut-rtl .nut-sidenavbar .arrow-icon {
-  right: auto;
-  left: 16px;
-}
-[dir=rtl] .nut-sidenavbar .nut-subsidenavbar-border-bt:after,
-.nut-rtl .nut-sidenavbar .nut-subsidenavbar-border-bt:after {
-  left: auto;
-  right: 0;
-}

package/dist/cjs/packages/sidenavbar/utils.d.ts

@@ -1,3 +0,0 @@
-import { MouseEventHandler } from 'react';
-declare const handleClick: MouseEventHandler<HTMLDivElement>;
-export { handleClick };

package/dist/cjs/packages/sidenavbar/utils.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "handleClick", {
-    enumerable: true,
-    get: function() {
-        return handleClick;
-    }
-});
-var handleClick = function handleClick(e) {
-    e.stopPropagation();
-    var isIcon = e.target.className.includes('arrow-icon');
-    var isTitle = e.target.className.includes('-title') || isIcon;
-    var currentClass = e.currentTarget.className;
-    var isShow = currentClass.includes('sidenavbar-show');
-    var arrowIcon = e.currentTarget.querySelector('.arrow-icon');
-    var iconClass = arrowIcon.className;
-    if (isTitle) {
-        e.currentTarget.className = isShow ? currentClass.replace('sidenavbar-show', 'sidenavbar-hide') : currentClass.replace('sidenavbar-hide', 'sidenavbar-show');
-        arrowIcon.className = isShow ? iconClass.replace('arrow-down', 'arrow-up') : iconClass.replace('arrow-up', 'arrow-down');
-    }
-};

package/dist/cjs/packages/sidenavbaritem/index.d.ts

@@ -1,3 +0,0 @@
-import { SideNavBarItem } from './sidenavbaritem';
-export type { SideNavBarItemProps } from './sidenavbaritem';
-export default SideNavBarItem;

package/dist/cjs/packages/sidenavbaritem/index.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return _default;
-    }
-});
-var _sidenavbaritem = require("./sidenavbaritem");
-var _default = _sidenavbaritem.SideNavBarItem;

package/dist/cjs/packages/sidenavbaritem/sidenavbaritem.d.ts

@@ -1,11 +0,0 @@
-import React, { FunctionComponent } from 'react';
-export type SideNavBarItemProps = {
-    title: string;
-    value: string | number;
-    onClick?: ({ title, value, }: {
-        title: string;
-        value: string | number;
-    }) => void;
-    children?: React.ReactNode;
-};
-export declare const SideNavBarItem: FunctionComponent<SideNavBarItemProps>;

package/dist/cjs/packages/sidenavbaritem/sidenavbaritem.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "SideNavBarItem", {
-    enumerable: true,
-    get: function() {
-        return SideNavBarItem;
-    }
-});
-var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-var _object_spread = require("@swc/helpers/_/_object_spread");
-var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
-var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
-var SideNavBarItem = function SideNavBarItem(props) {
-    var classPrefix = 'nut-subsidenavbar';
-    var title = props.title, value = props.value, children = props.children, onClick = props.onClick, rest = (0, _object_without_properties._)(props, [
-        "title",
-        "value",
-        "children",
-        "onClick"
-    ]);
-    var clickFn = function clickFn(e) {
-        e.stopPropagation();
-        onClick && onClick({
-            title: title,
-            value: value
-        });
-    };
-    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
-        className: "".concat(classPrefix, "-item ").concat(classPrefix, "-border-bt"),
-        onClick: clickFn
-    }, rest), title);
-};

package/dist/cjs/packages/sidenavbaritem/style/index.js

@@ -1 +0,0 @@
-import './sidenavbaritem.scss';

package/dist/cjs/packages/sidenavbaritem/style/sidenavbaritem.scss

@@ -1,13 +0,0 @@
-.nut-subsidenavbar {
-  &-item {
-    height: $sidenavbar-item-height;
-    color: $sidenavbar-sub-item-color;
-    padding: $sidenavbar-sub-item-padding;
-    box-sizing: border-box;
-  }
-
-  &-list {
-    background-color: $sidenavbar-sub-list-background;
-    color: $sidenavbar-sub-list-color;
-  }
-}

package/dist/cjs/packages/sidenavbaritem/style/style.css

@@ -1,14 +0,0 @@
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
-.nut-subsidenavbar-item {
-  height: var(--nutui-sidenavbar-item-height, 40px);
-  color: var(--nutui-sidenavbar-sub-item-color, var(--nutui-color-text, #505259));
-  padding: var(--nutui-sidenavbar-sub-item-padding, 10px 8px 10px 55px);
-  box-sizing: border-box;
-}
-.nut-subsidenavbar-list {
-  background-color: var(--nutui-sidenavbar-sub-list-background, #ffffff);
-  color: var(--nutui-sidenavbar-sub-list-background, var(--nutui-color-text, #505259));
-}

package/dist/cjs/packages/subsidenavbar/index.d.ts

@@ -1,3 +0,0 @@
-import { SubSideNavBar } from './subsidenavbar';
-export type { SubSideNavBarProps } from './subsidenavbar';
-export default SubSideNavBar;

package/dist/cjs/packages/subsidenavbar/style/css.js

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

package/dist/cjs/packages/subsidenavbar/style/index.js

@@ -1 +0,0 @@
-import './subsidenavbar.scss';

package/dist/cjs/packages/subsidenavbar/style/style.css

@@ -1,20 +0,0 @@
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
-.nut-subsidenavbar-title {
-  height: var(--nutui-sidenavbar-item-height, 40px);
-  padding: var(--nutui-sidenavbar-sub-title-padding, 10px 8px 10px 35px);
-  box-sizing: border-box;
-  background-color: var(--nutui-sidenavbar-sub-title-background, var(--nutui-color-background-sunken, #f7f8fc));
-  color: var(--nutui-sidenavbar-sub-title-color, var(--nutui-color-title, #1a1a1a));
-  box-sizing: border-box;
-}
-.nut-subsidenavbar-list.sidenavbar-show .nut-subsidenavbar-content {
-  height: auto;
-  overflow: inherit;
-}
-.nut-subsidenavbar-list.sidenavbar-hide .nut-subsidenavbar-content {
-  height: 0;
-  overflow: hidden;
-}

package/dist/cjs/packages/subsidenavbar/style/subsidenavbar.scss

@@ -1,26 +0,0 @@
-.nut-subsidenavbar {
-  &-title {
-    height: $sidenavbar-item-height;
-    padding: $sidenavbar-sub-title-padding;
-    box-sizing: border-box;
-    background-color: $sidenavbar-sub-title-background;
-    color: $sidenavbar-sub-title-color;
-    box-sizing: border-box;
-  }
-
-  &-list {
-    &.sidenavbar-show {
-      .nut-subsidenavbar-content {
-        height: auto;
-        overflow: inherit;
-      }
-    }
-
-    &.sidenavbar-hide {
-      .nut-subsidenavbar-content {
-        height: 0;
-        overflow: hidden;
-      }
-    }
-  }
-}

package/dist/cjs/packages/subsidenavbar/subsidenavbar.d.ts

@@ -1,13 +0,0 @@
-import React, { FunctionComponent } from 'react';
-export type SubSideNavBarProps = {
-    title: string;
-    value: string | number;
-    open?: boolean;
-    children?: React.ReactNode;
-    onClick?: ({ title, value, isShow, }: {
-        title: string;
-        value: string | number;
-        isShow: boolean;
-    }) => void;
-};
-export declare const SubSideNavBar: FunctionComponent<SubSideNavBarProps>;