@sheinx/shineout-style 3.0.0-alpha.1

package/cjs/mixin/divider.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = function _default(color) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    margin = _ref.margin;
+  return {
+    '&:after': {
+      position: 'absolute',
+      boxSizing: 'border-box',
+      content: '" "',
+      bottom: 0,
+      left: margin || 0,
+      right: margin || 0,
+      borderBottom: "1px solid ".concat(color),
+      transform: "scaleY(0.5)",
+      transition: "all .2s"
+    }
+  };
+};
+exports.default = _default;

package/cjs/mixin/ellipsis.d.ts

@@ -0,0 +1,3 @@
+import type { CSSProperties } from 'react';
+declare const _default: (line?: number) => CSSProperties;
+export default _default;

package/cjs/mixin/ellipsis.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = function _default() {
+  var line = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+  if (line === 1) return {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  };else return {
+    display: "-webkit-box",
+    '-webkit-line-clamp': line,
+    '-webkit-box-orient': 'vertical',
+    overflow: 'hidden'
+  };
+};
+exports.default = _default;

package/cjs/mixin/hide-scrollbar.d.ts

@@ -0,0 +1,6 @@
+export default function hideScrollBar(): {
+    scrollbarWidth: string;
+    '&::-webkit-scrollbar': {
+        display: string;
+    };
+};

package/cjs/mixin/hide-scrollbar.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = hideScrollBar;
+function hideScrollBar() {
+  return {
+    scrollbarWidth: "none",
+    '&::-webkit-scrollbar': {
+      display: "none"
+    }
+  };
+}

package/cjs/mixin/index.d.ts

@@ -0,0 +1,4 @@
+export { default as divider } from './divider';
+export { default as ellipsis } from './ellipsis';
+export { default as hideScrollBar } from './hide-scrollbar';
+export { default as customScrollBar } from './custom-scrollbar';

package/cjs/mixin/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "customScrollBar", {
+  enumerable: true,
+  get: function get() {
+    return _customScrollbar.default;
+  }
+});
+Object.defineProperty(exports, "divider", {
+  enumerable: true,
+  get: function get() {
+    return _divider.default;
+  }
+});
+Object.defineProperty(exports, "ellipsis", {
+  enumerable: true,
+  get: function get() {
+    return _ellipsis.default;
+  }
+});
+Object.defineProperty(exports, "hideScrollBar", {
+  enumerable: true,
+  get: function get() {
+    return _hideScrollbar.default;
+  }
+});
+var _divider = _interopRequireDefault(require("./divider"));
+var _ellipsis = _interopRequireDefault(require("./ellipsis"));
+var _hideScrollbar = _interopRequireDefault(require("./hide-scrollbar"));
+var _customScrollbar = _interopRequireDefault(require("./custom-scrollbar"));

package/cjs/modal/index.d.ts

@@ -0,0 +1,4 @@
+import modalStyle from './modal';
+declare const useModalStyle: (data?: undefined) => import("jss").Classes<keyof import("./modal").ModalClasses>;
+export { modalStyle, useModalStyle };
+export default useModalStyle;

package/cjs/modal/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "modalStyle", {
+  enumerable: true,
+  get: function get() {
+    return _modal.default;
+  }
+});
+exports.useModalStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _modal = _interopRequireDefault(require("./modal"));
+var useModalStyle = (0, _jssStyle.styled)(_modal.default, 'modal');
+exports.useModalStyle = useModalStyle;
+var _default = useModalStyle;
+exports.default = _default;

package/cjs/modal/modal.d.ts

@@ -0,0 +1,32 @@
+import { JsStyles } from '../jss-style';
+export declare type ModalClasses = {
+    wrapper: string;
+    wrapperShow: string;
+    wrapperHide: string;
+    wrapperFullScreen: string;
+    wrapperMoveable: string;
+    wrapperAnimation: string;
+    wrapperZoom: string;
+    wrapperIsMask: string;
+    wrapperHideMask: string;
+    wrapperDrawer: string;
+    wrapperDrawerLeft: string;
+    wrapperDrawerRight: string;
+    wrapperDrawerTop: string;
+    wrapperDrawerBottom: string;
+    mask: string;
+    panel: string;
+    header: string;
+    headerIcon: string;
+    headerTitle: string;
+    headerClose: string;
+    body: string;
+    bodyWithIcon: string;
+    footer: string;
+    resizeX: string;
+    resizeY: string;
+    resizeXY: string;
+};
+export declare type ModalClassType = keyof ModalClasses;
+declare const modalStyle: JsStyles<ModalClassType>;
+export default modalStyle;

package/cjs/modal/modal.js

@@ -0,0 +1,395 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.concat.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+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), !0).forEach(function (key) { (0, _defineProperty2.default)(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; }
+var zoomOut = 'cubic-bezier(0.78, 0.14, 0.15, 0.86)';
+var zoomIn = 'cubic-bezier(0.08, 0.82, 0.17, 1)';
+var modalIndex = 1050;
+var animationStyle = {
+  '@keyframes fadeIn': {
+    from: {
+      opacity: 0
+    },
+    to: {
+      opacity: 1
+    }
+  },
+  '@keyframes fadeOut': {
+    from: {
+      opacity: 1
+    },
+    to: {
+      opacity: 0
+    }
+  },
+  '@keyframes topIn': {
+    from: {
+      transform: 'translate(0, -100px)'
+    },
+    to: {
+      transform: 'translate(0, 0)'
+    }
+  },
+  '@keyframes topOut': {
+    from: {
+      transform: 'translate(0, 0)'
+    },
+    to: {
+      transform: 'translate(0, -100px)'
+    }
+  },
+  // 0% - 10% scale(1) for getBoundingClientRect
+  '@keyframes zoomIn': {
+    '0%': {
+      transform: 'scale(1)',
+      opacity: 0
+    },
+    '10%': {
+      transform: 'scale(1)',
+      opacity: 0
+    },
+    '10.001%': {
+      transform: 'scale(.2)',
+      opacity: 0
+    },
+    '10.002%': {
+      transform: 'scale(.2)',
+      opacity: 1
+    },
+    '100%': {
+      transform: 'scale(1)'
+    }
+  },
+  '@keyframes zoomOut': {
+    '0%': {
+      transform: 'scale(1)'
+    },
+    '100%': {
+      transform: 'scale(.2)'
+    }
+  },
+  '@keyframes drawerTopIn': {
+    from: {
+      transform: 'translate(0, -100%)'
+    },
+    to: {
+      transform: 'translate(0, 0)'
+    }
+  },
+  '@keyframes drawerTopOut': {
+    from: {
+      transform: 'translate(0, 0)'
+    },
+    to: {
+      transform: 'translate(0, -100%)'
+    }
+  },
+  '@keyframes drawerBottomIn': {
+    from: {
+      transform: 'translate(0, 100%)'
+    },
+    to: {
+      transform: 'translate(0, 0)'
+    }
+  },
+  '@keyframes drawerBottomOut': {
+    from: {
+      transform: 'translate(0, 0)'
+    },
+    to: {
+      transform: 'translate(0, 100%)'
+    }
+  },
+  '@keyframes drawerLeftIn': {
+    from: {
+      transform: 'translate(-100%, 0)'
+    },
+    to: {
+      transform: 'translate(0, 0)'
+    }
+  },
+  '@keyframes drawerLeftOut': {
+    from: {
+      transform: 'translate(0, 0)'
+    },
+    to: {
+      transform: 'translate(-100%, 0)'
+    }
+  },
+  '@keyframes drawerRightIn': {
+    from: {
+      transform: 'translate(100%, 0)'
+    },
+    to: {
+      transform: 'translate(0, 0)'
+    }
+  },
+  '@keyframes drawerRightOut': {
+    from: {
+      transform: 'translate(0, 0)'
+    },
+    to: {
+      transform: 'translate(100%, 0)'
+    }
+  }
+};
+var modalStyle = _objectSpread(_objectSpread({}, animationStyle), {}, {
+  wrapper: {
+    position: 'fixed',
+    zIndex: modalIndex,
+    top: 0,
+    left: 0,
+    overflow: 'auto',
+    width: '100%',
+    boxSizing: 'border-box',
+    height: '100%',
+    textAlign: 'center',
+    lineHeight: _theme.default.lineHeightDynamic
+  },
+  wrapperIsMask: {
+    background: _theme.default.modalMaskBackground
+  },
+  wrapperHideMask: {
+    '&$wrapper': {
+      background: 'transparent',
+      pointerEvents: 'none'
+    }
+  },
+  wrapperMoveable: {
+    '& $header': {
+      cursor: 'move'
+    }
+  },
+  wrapperFullScreen: {
+    '& $panel': {
+      top: 0,
+      height: '100vh',
+      width: '100vw'
+    }
+  },
+  wrapperZoom: {
+    transform: 'none'
+  },
+  wrapperAnimation: {
+    '&$wrapperShow': {
+      animation: "$fadeIn .3s ".concat(zoomIn),
+      '&:not($wrapperZoom):not($wrapperDrawer) $mask': {
+        animation: "$topIn .3s ".concat(zoomIn)
+      },
+      '&$wrapperZoom $panel': {
+        animation: "$zoomIn .3s ".concat(zoomIn)
+      },
+      '&$wrapperDrawerTop $mask': {
+        animation: "$drawerTopIn .3s ".concat(zoomIn)
+      },
+      '&$wrapperDrawerBottom $mask': {
+        animation: "$drawerBottomIn .3s ".concat(zoomIn)
+      },
+      '&$wrapperDrawerLeft $mask': {
+        animation: "$drawerLeftIn .3s ".concat(zoomIn)
+      },
+      '&$wrapperDrawerRight $mask': {
+        animation: "$drawerRightIn .3s ".concat(zoomIn)
+      }
+    },
+    '&$wrapperHide': {
+      animation: "$fadeOut .3s ".concat(zoomOut),
+      '&:not($wrapperZoom):not($wrapperDrawer) $mask': {
+        animation: "$topOut .3s ".concat(zoomOut)
+      },
+      '&$wrapperZoom $panel': {
+        animation: "$zoomOut .3s ".concat(zoomOut)
+      },
+      '&$wrapperDrawerTop $mask': {
+        animation: "$drawerTopOut .3s ".concat(zoomOut)
+      },
+      '&$wrapperDrawerBottom $mask': {
+        animation: "$drawerBottomOut .3s ".concat(zoomOut)
+      },
+      '&$wrapperDrawerLeft $mask': {
+        animation: "$drawerLeftOut .3s ".concat(zoomOut)
+      },
+      '&$wrapperDrawerRight $mask': {
+        animation: "$drawerRightOut .3s ".concat(zoomOut)
+      }
+    }
+  },
+  wrapperShow: {
+    opacity: 1
+  },
+  wrapperHide: {
+    opacity: 0,
+    '&:not($wrapperAnimation)': {
+      display: 'none'
+    }
+  },
+  wrapperDrawer: {
+    '& $panel': {
+      borderRadius: 0,
+      position: 'absolute',
+      padding: 0,
+      '& $header': {
+        padding: "".concat(_theme.default.modalDrawerTitlePaddingY, " ").concat(_theme.default.modalDrawerTitlePaddingX),
+        background: _theme.default.modalDrawerTitleBackgroundColor,
+        marginBottom: 0
+      },
+      '& $body': {
+        padding: "".concat(_theme.default.modalDrawerBodyPaddingY, " ").concat(_theme.default.modalDrawerBodyPaddingX)
+      },
+      '& $bodyWithIcon': {
+        paddingLeft: "calc(".concat(_theme.default.modalHeaderIconMarginEnd, " + ").concat(_theme.default.modalHeaderIconSize, " + ").concat(_theme.default.modalDrawerBodyPaddingX, ")")
+      },
+      '& $footer': {
+        padding: "".concat(_theme.default.modalDrawerFooterPaddingY, " ").concat(_theme.default.modalDrawerFooterPaddingX),
+        marginTop: 0
+      }
+    }
+  },
+  wrapperDrawerLeft: {
+    '& $panel': {
+      left: 0,
+      height: '100vh'
+    }
+  },
+  wrapperDrawerRight: {
+    '& $panel': {
+      right: 0,
+      height: '100vh'
+    }
+  },
+  wrapperDrawerTop: {
+    '& $panel': {
+      top: 0,
+      left: 0,
+      width: '100vw'
+    }
+  },
+  wrapperDrawerBottom: {
+    '& $panel': {
+      bottom: 0,
+      left: 0,
+      width: '100vw'
+    }
+  },
+  mask: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    minHeight: '100%',
+    boxSizing: 'border-box'
+  },
+  panel: {
+    pointerEvents: 'all',
+    position: 'relative',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    textAlign: 'left',
+    minWidth: 0,
+    background: '#fff',
+    borderRadius: _theme.default.modalPanelRadius,
+    padding: "".concat(_theme.default.modalPanelPaddingY, " ").concat(_theme.default.modalPanelPaddingX),
+    fontSize: _theme.default.modalPanelFontSize,
+    boxSizing: 'border-box',
+    boxShadow: _theme.default.modalPanelShadow
+  },
+  header: {
+    display: 'flex',
+    marginBottom: _theme.default.modalPanelGap
+  },
+  headerIcon: {
+    '$wrapper &': {
+      marginRight: _theme.default.modalHeaderIconMarginEnd,
+      marginTop: _theme.default.modalHeaderIconMarginTop,
+      width: _theme.default.modalHeaderIconSize,
+      height: _theme.default.modalHeaderIconSize,
+      display: 'block',
+      alignItems: 'center'
+    }
+  },
+  headerTitle: {
+    flex: '1',
+    minWidth: 0,
+    textAlign: 'left',
+    fontWeight: 'bold',
+    fontSize: _theme.default.modalHeaderFontSize
+  },
+  headerClose: {
+    marginLeft: _theme.default.modalHeaderCloseMarginXStart,
+    marginTop: _theme.default.modalHeaderCloseTop,
+    width: _theme.default.modalHeaderCloseSize,
+    height: _theme.default.modalHeaderCloseSize,
+    cursor: 'pointer',
+    display: 'block'
+  },
+  body: {
+    flex: '1 1 auto',
+    minHeight: '1px',
+    overflow: 'auto'
+  },
+  bodyWithIcon: {
+    paddingLeft: "calc(".concat(_theme.default.modalHeaderIconMarginEnd, " + ").concat(_theme.default.modalHeaderIconSize, ")")
+  },
+  footer: {
+    width: '100%',
+    boxSizing: 'border-box',
+    textAlign: 'right',
+    marginTop: _theme.default.modalPanelGap
+  },
+  resizeX: {
+    cursor: 'e-resize',
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: '6px',
+    right: '-4px',
+    zIndex: 11,
+    background: 'transparent',
+    touchAction: 'none',
+    '$wrapperDrawerRight &': {
+      left: '-4px',
+      right: 'auto',
+      cursor: 'w-resize'
+    }
+  },
+  resizeY: {
+    cursor: 's-resize',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: '6px',
+    bottom: '-4px',
+    zIndex: 11,
+    background: 'transparent',
+    touchAction: 'none',
+    '$wrapperDrawerBottom &': {
+      top: '-4px',
+      bottom: 'auto',
+      cursor: 'n-resize'
+    }
+  },
+  resizeXY: {
+    cursor: 'se-resize',
+    position: 'absolute',
+    right: '0',
+    bottom: '0',
+    width: '10px',
+    height: '10px',
+    zIndex: 12,
+    background: 'transparent',
+    touchAction: 'none'
+  }
+});
+var _default = modalStyle;
+exports.default = _default;

package/cjs/pagination/index.d.ts

@@ -0,0 +1,5 @@
+import paginationStyle from './pagination';
+declare const usePaginationStyle: (data?: undefined) => import("jss").Classes<keyof import("./pagination").PaginationClasses>;
+export { paginationStyle, usePaginationStyle };
+export type { PaginationClasses } from './pagination';
+export default usePaginationStyle;

package/cjs/pagination/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "paginationStyle", {
+  enumerable: true,
+  get: function get() {
+    return _pagination.default;
+  }
+});
+exports.usePaginationStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _pagination = _interopRequireDefault(require("./pagination"));
+var usePaginationStyle = (0, _jssStyle.styled)(_pagination.default, 'tag');
+exports.usePaginationStyle = usePaginationStyle;
+var _default = usePaginationStyle;
+exports.default = _default;

package/cjs/pagination/pagination.d.ts

@@ -0,0 +1,18 @@
+import { JsStyles } from '../jss-style';
+export interface PaginationClasses {
+    pagination: string;
+    section: string;
+    buttons: string;
+    left: string;
+    right: string;
+    center: string;
+    jumper: string;
+    split: string;
+    icon: string;
+    simple: string;
+    small: string;
+    large: string;
+}
+declare type PaginationClass = keyof PaginationClasses;
+declare const PaginationStyle: JsStyles<PaginationClass>;
+export default PaginationStyle;

package/cjs/pagination/pagination.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+var PaginationStyle = {
+  pagination: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    fontSize: _theme.default.paginationFontSize,
+    color: _theme.default.paginationFontColor
+  },
+  left: {
+    justifyContent: 'flex-start'
+  },
+  right: {
+    justifyContent: 'flex-end'
+  },
+  center: {
+    justifyContent: 'center'
+  },
+  section: {
+    '& + &': {
+      marginLeft: _theme.default.paginationNearlyMargin
+    }
+  },
+  split: {
+    width: 23,
+    display: 'inline-block',
+    textAlign: 'center'
+  },
+  icon: {
+    lineHeight: 0,
+    display: 'inline-block',
+    width: _theme.default.paginationFontSize
+  },
+  buttons: {},
+  jumper: {},
+  simple: {},
+  small: {
+    '& $icon': {
+      width: _theme.default.paginationSmallFontSize
+    }
+  },
+  large: {
+    '& $icon': {
+      width: _theme.default.paginationLargeFontSize
+    }
+  }
+};
+var _default = PaginationStyle;
+exports.default = _default;

package/cjs/popover/index.d.ts

@@ -0,0 +1,4 @@
+import popoverStyle from './popover';
+declare const usePopoverStyle: (data?: undefined) => import("jss").Classes<import("./popover").PopoverClass>;
+export { popoverStyle, usePopoverStyle };
+export default usePopoverStyle;