@sheinx/shineout-style 3.0.0-alpha.1

package/cjs/list/list.js

@@ -0,0 +1,126 @@
+"use strict";
+
+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 _theme = _interopRequireDefault(require("@sheinx/theme"));
+var listStyle = {
+  wrapper: {
+    position: 'relative',
+    boxSizing: 'border-box',
+    maxHeight: '100%',
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  wrapperBordered: {
+    border: "1px solid ".concat(_theme.default.listBorderColor),
+    borderRadius: _theme.default.listBorderRadius
+  },
+  wrapperSmall: {},
+  wrapperLarge: {},
+  wrapperStriped: {
+    '& $row:nth-child(even)': {
+      backgroundColor: _theme.default.listStripedBackgroundColor
+    }
+  },
+  scrollContainer: {
+    overflow: 'auto',
+    flex: '1',
+    width: '100%',
+    minHeight: 0
+  },
+  loading: {
+    padding: "".concat(_theme.default.listItemPaddingY, " ").concat(_theme.default.listItemPaddingX),
+    backgroundColor: 'hsla(0,0%,100%,.4)',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  empty: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: "".concat(_theme.default.listItemPaddingY, " ").concat(_theme.default.listItemPaddingX)
+  },
+  footer: {},
+  row: {
+    display: 'flex',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    '&:not(:last-child)': {
+      borderBottom: "1px solid ".concat(_theme.default.listBorderColor)
+    }
+  },
+  item: {
+    fontSize: _theme.default.listFontSize,
+    lineHeight: _theme.default.lineHeightDynamic,
+    color: _theme.default.listFontColor,
+    display: 'flex',
+    flexWrap: 'nowrap',
+    boxSizing: 'border-box',
+    padding: "".concat(_theme.default.listItemPaddingY, " ").concat(_theme.default.listItemPaddingX),
+    '$wrapperSmall &': {
+      padding: "".concat(_theme.default.listSmallItemPaddingY, " ").concat(_theme.default.listSmallItemPaddingX)
+    },
+    '$wrapperLarge &': {
+      padding: "".concat(_theme.default.listLargeItemPaddingY, " ").concat(_theme.default.listLargeItemPaddingY)
+    }
+  },
+  checkContent: {
+    flex: '1',
+    minWidth: 0
+  },
+  pagination: {
+    margin: "".concat(_theme.default.listPaginationMarginY, " 0")
+  },
+  // baseItem
+  baseItem: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    justifyContent: 'space-between',
+    width: '100%'
+  },
+  baseItemMeta: {},
+  baseItemMetaIncludes: {},
+  baseItemMetaContainer: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    justifyContent: 'flex-start'
+  },
+  baseItemMetaMeta: {},
+  baseItemMetaAvatar: {
+    boxSizing: 'border-box',
+    width: '40px',
+    height: '40px',
+    marginRight: '12px',
+    flex: 'none'
+  },
+  baseItemMetaTitle: {},
+  baseItemMetaDesc: {},
+  baseItemMetaCenter: {},
+  baseItemMetaContent: {
+    boxSizing: 'border-box',
+    paddingTop: '12px'
+  },
+  baseItemExtra: {
+    display: 'flex',
+    alignItems: 'center',
+    marginLeft: '16px'
+  },
+  baseItemExtraSplit: {
+    width: '1px',
+    height: '16px',
+    backgroundColor: '#e9ecef'
+  }
+};
+var _default = listStyle;
+exports.default = _default;

package/cjs/menu/index.d.ts

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

package/cjs/menu/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, "menuStyle", {
+  enumerable: true,
+  get: function get() {
+    return _menu.default;
+  }
+});
+exports.useMenuStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _menu = _interopRequireDefault(require("./menu"));
+var useMenuStyle = (0, _jssStyle.styled)(_menu.default, 'menu');
+exports.useMenuStyle = useMenuStyle;
+var _default = useMenuStyle;
+exports.default = _default;

package/cjs/menu/menu.d.ts

@@ -0,0 +1,37 @@
+import { JsStyles } from '../jss-style';
+export declare type MenuClasses = {
+    wrapper: string;
+    wrapperInline: string;
+    wrapperVertical: string;
+    wrapperHorizontal: string;
+    wrapperHasExpand: string;
+    wrapperHasOpen: string;
+    wrapperLight: string;
+    wrapperDark: string;
+    root: string;
+    children: string;
+    childrenUp: string;
+    item: string;
+    itemActive: string;
+    itemDisabled: string;
+    itemOpen: string;
+    itemInPath: string;
+    itemHasChildren: string;
+    itemContent: string;
+    itemContentFront: string;
+    itemContentBack: string;
+    title: string;
+    expand: string;
+    expandFront: string;
+    expandBack: string;
+    expandHover: string;
+    scrollbar: string;
+    scrollbarX: string;
+    scrollbarY: string;
+    scrollbarDragging: string;
+    scrolbarHandler: string;
+    scrollbox: string;
+};
+export declare type MenuClassType = keyof MenuClasses;
+declare const menuStyle: JsStyles<MenuClassType>;
+export default menuStyle;

package/cjs/menu/menu.js

@@ -0,0 +1,285 @@
+"use strict";
+
+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 _theme = _interopRequireDefault(require("@sheinx/theme"));
+var menuStyle = {
+  wrapper: {},
+  wrapperLight: {},
+  wrapperDark: {},
+  scrollbox: {
+    '$wrapperVertical &': {
+      overflow: 'hidden',
+      height: '100%'
+    },
+    '$wrapperHorizontal &': {
+      overflow: 'hidden'
+    },
+    '$wrapperHasOpen$wrapperVertical &': {
+      width: '100vw'
+    },
+    '$wrapperHasOpen$wrapperHorizontal &': {
+      height: '100vh'
+    }
+  },
+  root: {
+    display: 'block',
+    padding: '0',
+    margin: '0',
+    fontSize: _theme.default.menuFontSize,
+    color: _theme.default.menuFontColor,
+    '$wrapperHorizontal &': {
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  },
+  wrapperInline: {},
+  wrapperVertical: {
+    position: 'relative',
+    zIndex: 0
+  },
+  wrapperHorizontal: {
+    height: '42px',
+    position: 'relative',
+    zIndex: 0
+  },
+  wrapperHasExpand: {},
+  wrapperHasOpen: {},
+  children: {
+    padding: '0',
+    display: 'none',
+    minWidth: '100%',
+    '$itemOpen > &': {
+      display: 'block'
+    },
+    '$wrapper:not($wrapperInline) &': {
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
+    },
+    '$wrapperHorizontal &': {
+      position: 'absolute',
+      bottom: '-2px',
+      left: 0,
+      transform: 'translateY(100%)'
+    },
+    '$wrapperHorizontal & &': {
+      position: 'absolute',
+      left: 'auto',
+      bottom: 'auto',
+      top: 0,
+      right: '-2px',
+      transform: 'translateX(100%)'
+    },
+    '$wrapperVertical &': {
+      position: 'absolute',
+      top: 0,
+      right: '-2px',
+      transform: 'translateX(100%)',
+      minWidth: 'auto',
+      '&$childrenUp': {
+        top: 'auto',
+        bottom: 0
+      }
+    }
+  },
+  childrenUp: {},
+  item: {
+    listStyle: 'none',
+    flexShrink: 0,
+    '$wrapperVertical &, $wrapperHorizontal &': {
+      position: 'relative'
+    }
+  },
+  itemActive: {},
+  itemDisabled: {},
+  itemOpen: {},
+  itemInPath: {},
+  itemHasChildren: {},
+  itemContent: {
+    lineHeight: _theme.default.lineHeightDynamic,
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    position: 'relative',
+    '$wrapperLight &': {
+      color: _theme.default.menuItemFontColor,
+      backgroundColor: _theme.default.menuItemBackgroundColor,
+      '&:hover': {
+        color: _theme.default.menuItemHoverFontColor,
+        backgroundColor: _theme.default.menuItemHoverBackgroundColor
+      }
+    },
+    '$wrapperDark &': {
+      color: _theme.default.menuDarkFontColor,
+      backgroundColor: _theme.default.menuDarkItemBackgroundColor,
+      '&:hover': {
+        color: _theme.default.menuDarkItemHoverFontColor,
+        backgroundColor: _theme.default.menuDarkItemHoverBackgroundColor
+      }
+    },
+    '$wrapperDark $itemOpen > &': {
+      color: _theme.default.menuDarkItemOpenFontColor,
+      backgroundColor: _theme.default.menuDarkItemOpenBackgroundColor
+    },
+    '$itemInPath > &': {
+      '$wrapperLight &': {
+        color: _theme.default.menuItemActiveFontColor
+      },
+      '$wrapperDark$wrapperInline &::before, $wrapperDark$wrapperVertical &::before': {
+        content: '""',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        width: '3px',
+        backgroundColor: _theme.default.menuDarkItemActiveBackgroundColor
+      },
+      '$wrapperLight$wrapperVertical &': {
+        '&::before': {
+          display: 'block',
+          content: '""',
+          position: 'absolute',
+          right: 0,
+          top: 0,
+          bottom: 0,
+          width: '4px',
+          borderTopLeftRadius: '4px',
+          borderBottomLeftRadius: '4px',
+          backgroundColor: _theme.default.menuItemActiveFontColor
+        }
+      }
+    },
+    '$itemActive > &': {
+      '$wrapperLight &': {
+        color: _theme.default.menuItemActiveFontColor,
+        backgroundColor: _theme.default.menuItemActiveBackgroundColor
+      },
+      '$wrapperDark &': {
+        color: _theme.default.menuDarkItemActiveFontColor,
+        backgroundColor: _theme.default.menuDarkItemActiveBackgroundColor
+      },
+      '$wrapperLight$wrapperInline &,  $wrapperLight$wrapperHorizontal &': {
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          display: 'block',
+          top: 0,
+          right: 0,
+          width: '3px',
+          height: '100%',
+          backgroundColor: _theme.default.menuItemActiveFontColor
+        }
+      },
+      '$wrapperLight$wrapperHorizontal $root > &::before': {
+        display: 'none'
+      }
+    },
+    '$wrapperLight $itemDisabled > &': {
+      cursor: 'not-allowed',
+      color: _theme.default.menuItemDisabledFontColor,
+      backgroundColor: _theme.default.menuItemDisabledBackgroundColor
+    }
+  },
+  itemContentFront: {},
+  itemContentBack: {},
+  title: {
+    flex: 1,
+    textDecoration: 'none',
+    color: 'inherit',
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: 0,
+    padding: "".concat(_theme.default.menuTitlePaddingY, " ").concat(_theme.default.menuTitlePaddingX),
+    '$wrapperHasExpand $itemContentBack > &': {
+      paddingRight: _theme.default.menuExpandWidth
+    },
+    '$wrapperHasExpand $itemHasChildren > $itemContentBack > &': {
+      paddingRight: 0
+    },
+    '$wrapperHasExpand $itemContentFront > &': {
+      paddingLeft: 0
+    }
+  },
+  expand: {
+    alignSelf: 'stretch',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    '& > div': {
+      lineHeight: 1,
+      width: _theme.default.menuExpandSize,
+      height: _theme.default.menuExpandSize,
+      '$wrapper:not($wrapperVertical) $itemOpen > $itemContent &': {
+        transform: 'rotate(180deg)'
+      }
+    },
+    '$wrapperVertical &': {
+      transform: 'rotate(-90deg)'
+    }
+  },
+  expandHover: {
+    '&:hover': {
+      backgroundColor: _theme.default.menuExpandHoverBackgroundColor
+    }
+  },
+  expandFront: {
+    width: 'auto',
+    visibility: 'hidden',
+    paddingLeft: _theme.default.menuTitlePaddingX,
+    paddingRight: '8px',
+    '$itemHasChildren > $itemContent &': {
+      visibility: 'visible'
+    }
+  },
+  expandBack: {
+    width: _theme.default.menuExpandWidth
+  },
+  scrollbar: {
+    position: 'absolute',
+    zIndex: 99,
+    border: '1px solid transparent',
+    background: '#fafafa',
+    display: 'none',
+    '$wrapper:hover &': {
+      display: 'block'
+    }
+  },
+  scrollbarX: {
+    right: 0,
+    bottom: 0,
+    left: 0,
+    height: '16px',
+    boxSizing: 'border-box',
+    borderWidth: '1px 0'
+  },
+  scrollbarY: {
+    right: 0,
+    top: 0,
+    bottom: 0,
+    width: '16px',
+    boxSizing: 'border-box',
+    borderWidth: '0 1px'
+  },
+  scrolbarHandler: {
+    position: 'absolute',
+    background: 'rgba(0, 0, 0, 0.3)',
+    borderRadius: '6px',
+    height: '10px',
+    cursor: 'default',
+    zIndex: 2,
+    '$scrollbarX &': {
+      top: '2px',
+      height: '10px'
+    },
+    '$scrollbarY &': {
+      left: '2px',
+      width: '10px'
+    }
+  },
+  scrollbarDragging: {}
+};
+var _default = menuStyle;
+exports.default = _default;

package/cjs/message/index.d.ts

@@ -0,0 +1,4 @@
+import messageStyle from './message';
+declare const useMessageStyle: (data?: undefined) => import("jss").Classes<import("./message").MessageClass>;
+export { messageStyle, useMessageStyle };
+export default useMessageStyle;

package/cjs/message/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, "messageStyle", {
+  enumerable: true,
+  get: function get() {
+    return _message.default;
+  }
+});
+exports.useMessageStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _message = _interopRequireDefault(require("./message"));
+var useMessageStyle = (0, _jssStyle.styled)(_message.default, 'message');
+exports.useMessageStyle = useMessageStyle;
+var _default = useMessageStyle;
+exports.default = _default;

package/cjs/message/message.d.ts

@@ -0,0 +1,4 @@
+import { JsStyles } from '../jss-style';
+export declare type MessageClass = 'wrapper' | 'item' | 'itemDismissed' | 'itemShow' | 'message';
+declare const messageStyle: JsStyles<MessageClass>;
+export default messageStyle;

package/cjs/message/message.js

@@ -0,0 +1,136 @@
+"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;
+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 animationDuration = '0.2s';
+var animations = {
+  '@keyframes left-in': {
+    '0%': {
+      transform: 'translateX(-100%)'
+    },
+    '100%': {
+      transform: 'translateX(0)'
+    }
+  },
+  '@keyframes right-in': {
+    '0%': {
+      transform: 'translateX(100%)'
+    },
+    '100%': {
+      transform: 'translateX(0)'
+    }
+  },
+  '@keyframes left-out': {
+    '0%': {
+      transform: 'translateX(0%)',
+      opacity: 1
+    },
+    '100%': {
+      transform: 'translateX(-100%)',
+      opacity: 0
+    }
+  },
+  '@keyframes right-out': {
+    '0%': {
+      transform: 'translateX(0%)',
+      opacity: 1
+    },
+    '100%': {
+      transform: 'translateX(100%)',
+      opacity: 0
+    }
+  },
+  '@keyframes middle-in': {
+    '0%': {
+      transform: ' translateY(-25px)',
+      opacity: 0
+    },
+    '100%': {
+      transform: 'translateY(0)',
+      opacity: 1
+    }
+  }
+};
+var messageStyle = _objectSpread(_objectSpread({}, animations), {}, {
+  wrapper: {
+    position: 'fixed',
+    zIndex: 1060,
+    maxWidth: '50%',
+    '@media screen and (max-width: 992px) &': {
+      'max-width': 'none'
+    },
+    margin: 'auto',
+    '&[data-soui-position="top"]': {
+      top: '20px',
+      left: '50%',
+      transform: 'translateX(-50%)'
+    },
+    '&[data-soui-position="middle"]': {
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    },
+    '&[data-soui-position="top-left"]': {
+      top: '20px',
+      left: '20px'
+    },
+    '&[data-soui-position="top-right"]': {
+      top: '20px',
+      right: '20px'
+    },
+    '&[data-soui-position="bottom-left"]': {
+      bottom: '0',
+      left: '20px'
+    },
+    '&[data-soui-position="bottom-right"]': {
+      bottom: '0',
+      right: '20px'
+    }
+  },
+  item: {
+    display: 'flex',
+    transition: 'all 200ms',
+    zIndex: 1
+  },
+  itemDismissed: {
+    ' [data-soui-position="bottom-left"] &': {
+      animation: "$left-out ".concat(animationDuration, " ease-in-out")
+    },
+    ' [data-soui-position="bottom-right"] &': {
+      animation: "$right-out ".concat(animationDuration, " ease-in-out")
+    }
+  },
+  itemShow: {
+    '[data-soui-position="top-left"] &, [data-soui-position="bottom-left"] &': {
+      animation: "$left-in ".concat(animationDuration, " ease-in-out")
+    },
+    '[data-soui-position="top-right"] &, [data-soui-position="bottom-right"] &': {
+      animation: "$right-in ".concat(animationDuration, " ease-in-out")
+    },
+    '[data-soui-position="middle"] &, [data-soui-position="top"] &': {
+      animation: "$middle-in ".concat(animationDuration, " ease-in-out")
+    }
+  },
+  message: {
+    '&&': {
+      width: 'auto',
+      margin: "0 auto ".concat(_theme.default.messageMarginBottom),
+      borderColor: _theme.default.messageBorderColor,
+      background: _theme.default.messageBackgroundColor,
+      boxShadow: _theme.default.messageShadow,
+      color: _theme.default.messageFontColor
+    }
+  }
+});
+var _default = messageStyle;
+exports.default = _default;

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

@@ -0,0 +1,8 @@
+export default function customScrollBar(info: {
+    background: string;
+}): {
+    'scrollbar-color': string;
+    '&::-webkit-scrollbar': {
+        background: string;
+    };
+};

package/cjs/mixin/custom-scrollbar.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = customScrollBar;
+function customScrollBar(info) {
+  return {
+    'scrollbar-color': info.background,
+    '&::-webkit-scrollbar': {
+      background: info.background
+    }
+  };
+}

package/cjs/mixin/divider.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from 'react';
+declare const _default: (color: string, { margin, }?: {
+    dir?: "left" | "right" | "bottom" | "top" | undefined;
+    margin?: number | undefined;
+}) => {
+    '&:after': CSSProperties;
+};
+export default _default;