@sheinx/shineout-style 3.0.0-alpha.1

package/cjs/upload/upload.js

@@ -0,0 +1,331 @@
+"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 uploadStyle = {
+  wrapper: {
+    display: 'block'
+  },
+  wrapperImage: {
+    display: 'flex',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: '8px'
+  },
+  wrapperDisabled: {
+    '& $imageHandler': {
+      cursor: 'not-allowed',
+      opacity: 0.5
+    }
+  },
+  handler: {
+    display: 'inline-block',
+    cursor: 'pointer',
+    boxSizing: 'border-box',
+    '$wrapperDrop:not($wrapperDisabled) &': {
+      width: '100%',
+      borderRadius: _theme.default.uploadImageBorderRadius,
+      border: "1px dashed ".concat(_theme.default.uploadImageHandlerBorderColor),
+      backgroundColor: _theme.default.uploadImageHandlerBackgroundColor,
+      color: _theme.default.uploadImageHandlerFontColor,
+      '&:hover': {
+        borderColor: _theme.default.uploadImageHandlerHoverBorderColor,
+        color: _theme.default.uploadImageHandlerHoverFontColor
+      }
+    }
+  },
+  result: {
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: _theme.default.uploadResultMarginY,
+    gap: _theme.default.uploadResultGap
+  },
+  icon: {
+    width: _theme.default.uploadResultIconSize,
+    height: _theme.default.uploadResultIconSize,
+    color: _theme.default.uploadResultIconColor,
+    display: 'flex',
+    alignItems: 'center',
+    '$resultError $resultText &': {
+      color: _theme.default.uploadResultErrorFontColor
+    },
+    '$resultDeleted $resultText &': {
+      color: _theme.default.uploadResultDeletedFontColor
+    }
+  },
+  iconHover: {
+    position: 'relative',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: '-5px',
+      left: '-5px',
+      right: '-5px',
+      bottom: '-5px',
+      borderRadius: '50%',
+      display: 'none',
+      backgroundColor: _theme.default.uploadResultIconHoverBackgroundColor
+    },
+    '& svg': {
+      position: 'relative'
+    },
+    '&:hover': {
+      '&::before': {
+        display: 'block'
+      }
+    }
+  },
+  resultError: {},
+  resultSuccess: {},
+  resultUploading: {},
+  resultDeleted: {},
+  resultStatusIcon: {
+    '$resultSuccess &': {
+      color: _theme.default.uploadResultSuccessIconColor
+    }
+  },
+  resultTextFooter: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: _theme.default.uploadResultGap,
+    color: _theme.default.uploadResultUploadingIconColor
+  },
+  resultText: {
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: '0',
+    flex: 1,
+    gap: _theme.default.uploadResultGap,
+    fontSize: _theme.default.uploadResultFontSize,
+    color: _theme.default.uploadResultFontColor,
+    lineHeight: _theme.default.lineHeightDynamic,
+    padding: "".concat(_theme.default.uploadResultPaddingY, " ").concat(_theme.default.uploadResultPaddingX),
+    backgroundColor: _theme.default.uploadResultBackgroundColor,
+    borderRadius: _theme.default.uploadResultBorderRadius,
+    '$resultError &': {
+      color: _theme.default.uploadResultErrorFontColor
+    },
+    '$resultDeleted &': {
+      textDecoration: 'line-through',
+      color: _theme.default.uploadResultDeletedFontColor
+    }
+  },
+  resultTextBody: {
+    flex: 1,
+    minWidth: '0'
+  },
+  resultClose: {
+    cursor: 'pointer'
+  },
+  imageHandler: {
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: _theme.default.uploadImageBorderRadius,
+    border: "1px dashed ".concat(_theme.default.uploadImageHandlerBorderColor),
+    backgroundColor: _theme.default.uploadImageHandlerBackgroundColor,
+    color: _theme.default.uploadImageHandlerFontColor,
+    '$wrapper:not($wrapperDisabled) &:hover': {
+      borderColor: _theme.default.uploadImageHandlerHoverBorderColor,
+      color: _theme.default.uploadImageHandlerHoverFontColor
+    }
+  },
+  imageHandlerIcon: {
+    display: 'flex',
+    alignItems: 'center',
+    '& > svg': {
+      width: 30,
+      height: 30
+    }
+  },
+  imageResult: {
+    border: "1px solid ".concat(_theme.default.uploadImageHandlerBorderColor),
+    boxSizing: 'border-box',
+    borderRadius: _theme.default.uploadImageBorderRadius,
+    position: 'relative',
+    '$resultError&': {
+      borderStyle: 'dashed',
+      borderColor: _theme.default.uploadImageHandlerErrorBorderColor,
+      color: _theme.default.uploadImageHandlerErrorFontColor
+    }
+  },
+  imageBg: {
+    '$wrapper &': {
+      position: 'absolute',
+      borderRadius: 'inherit',
+      zIndex: 0,
+      top: '0',
+      right: '0',
+      bottom: '0',
+      left: '0',
+      backgroundSize: 'cover',
+      border: 'none'
+    },
+    '$wrapper $resultDeleted &': {
+      filter: 'grayscale(100%)',
+      opacity: '0.6'
+    }
+  },
+  imageResultMask: {
+    position: 'absolute',
+    borderRadius: 'inherit',
+    boxSizing: 'border-box',
+    zIndex: 0,
+    right: '0',
+    bottom: '0',
+    width: '100%',
+    height: '100%',
+    backgroundColor: _theme.default.uploadImageResultMaskBackgroundColor,
+    opacity: 0,
+    transition: 'opacity 0.3s',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '$resultError &': {
+      display: 'none'
+    },
+    '&:hover': {
+      opacity: 1
+    }
+  },
+  imageResultMaskOperator: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+    width: '100%',
+    '& $icon': {
+      color: _theme.default.uploadImageResultMaskIconColor,
+      width: _theme.default.uploadImageResultMaskIconSize,
+      height: _theme.default.uploadImageResultMaskIconSize,
+      cursor: 'pointer'
+    }
+  },
+  imageResultLoading: {
+    boxSizing: 'border-box',
+    width: _theme.default.uploadImageResultMaskIconSize,
+    height: _theme.default.uploadImageResultMaskIconSize,
+    borderColor: _theme.default.uploadImageResultMaskIconColor,
+    borderTopColor: 'transparent'
+  },
+  imageResultMaskInfo: {
+    lineHeight: _theme.default.lineHeightDynamic,
+    color: _theme.default.uploadImageResultMaskIconColor
+  },
+  imageResultTopBtn: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    transform: 'translate(50%, -50%)',
+    color: _theme.default.uploadImageResultBtnCloseColor,
+    cursor: 'pointer',
+    '$resultDeleted &': {
+      color: _theme.default.uploadImageResultBtnRecoverColor
+    }
+  },
+  imageResultMaskShow: {
+    opacity: 1
+  },
+  customImageBtn: {
+    '$resultSuccess &': {
+      display: 'none'
+    },
+    '$resultSuccess:hover &': {
+      display: 'block'
+    }
+  },
+  imageResultTip: {
+    position: 'absolute',
+    top: '100%',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    padding: '2px 8px',
+    width: 'max-content',
+    minWidth: '120px',
+    maxWidth: '240px',
+    zIndex: '1000',
+    marginTop: '8px',
+    borderRadius: '4px',
+    boxShadow: '0 0 0 1px rgba(255,77,80,.1), 0 2px 8px rgba(0,0,0,.15)',
+    backgroundColor: _theme.default.uploadImageResultTipBackgroundColor,
+    fontSize: _theme.default.uploadImageResultTipFontSize,
+    fontColor: _theme.default.uploadImageResultErrorFontColor,
+    '&::before': {
+      position: 'absolute',
+      bottom: '100%',
+      left: '50%',
+      width: '6px',
+      height: '6px',
+      border: '1px solid rgba(255,77,80,.1)',
+      borderWidth: '1px 0 0 1px',
+      background: 'inherit',
+      content: '" "',
+      transform: 'rotate(45deg) translateY(3px)'
+    }
+  },
+  dropItem: {
+    ':not(wrapperDisabled) &[data-soui-dragover="true"]': {
+      '& $handler, & $imageHandler, & $imageResult': {
+        borderColor: _theme.default.uploadImageHandlerHoverBorderColor,
+        borderStyle: 'dashed',
+        color: _theme.default.uploadImageHandlerHoverFontColor
+      }
+    }
+  },
+  button: {
+    position: 'relative',
+    overflow: 'hidden',
+    '& > span': {
+      position: 'relative',
+      zIndex: '1'
+    }
+  },
+  buttonUploading: {
+    '&&': {
+      color: _theme.default.buttonSecondaryOutlineFontColor
+    }
+  },
+  buttonCover: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    background: '#fff'
+  },
+  buttonBg: {
+    overflow: 'hidden',
+    zIndex: '2',
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    transition: 'right .2s ease-in-out',
+    color: '#fff',
+    whiteSpace: 'nowrap',
+    paddingLeft: 'inherit',
+    background: 'inherit',
+    '& > span': {
+      display: 'flex',
+      padding: 'inherit',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      width: '100%',
+      alignItems: 'center'
+    }
+  },
+  buttonBgSpin: {
+    display: 'inline-block',
+    marginRight: '8px'
+  }
+};
+var _default = uploadStyle;
+exports.default = _default;

package/cjs/virtual-scroll/index.d.ts

@@ -0,0 +1,4 @@
+import virtualScrollStyle from './virtual-scroll';
+declare const useVirtualScrollStyle: (data?: undefined) => import("jss").Classes<"footer" | "iframe" | "container" | "scroll" | "bar" | "virtual" | "scrolled">;
+export { virtualScrollStyle, useVirtualScrollStyle };
+export default useVirtualScrollStyle;

package/cjs/virtual-scroll/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useVirtualScrollStyle = exports.default = void 0;
+Object.defineProperty(exports, "virtualScrollStyle", {
+  enumerable: true,
+  get: function get() {
+    return _virtualScroll.default;
+  }
+});
+var _jssStyle = require("../jss-style");
+var _virtualScroll = _interopRequireDefault(require("./virtual-scroll"));
+var useVirtualScrollStyle = (0, _jssStyle.styled)(_virtualScroll.default, 'virtual');
+exports.useVirtualScrollStyle = useVirtualScrollStyle;
+var _default = useVirtualScrollStyle;
+exports.default = _default;

package/cjs/virtual-scroll/virtual-scroll.d.ts

@@ -0,0 +1,4 @@
+import { JsStyles } from '../jss-style';
+declare type VirtualClass = 'scroll' | 'virtual' | 'iframe' | 'container' | 'footer' | 'bar' | 'scrolled';
+declare const VirtualScrollStyle: JsStyles<VirtualClass>;
+export default VirtualScrollStyle;

package/cjs/virtual-scroll/virtual-scroll.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var VirtualScrollStyle = {
+  scroll: {
+    position: 'relative',
+    overflow: 'hidden',
+    height: '100%',
+    boxSizing: 'border-box'
+  },
+  scrolled: {},
+  virtual: {},
+  iframe: {
+    position: 'absolute',
+    zIndex: -1,
+    top: 0,
+    left: 0,
+    right: 0,
+    // bottom: 0,
+    border: 'none',
+    width: '100%',
+    height: '100%'
+  },
+  container: {
+    height: '100%'
+  },
+  footer: {},
+  bar: {
+    width: 1,
+    visibility: 'hidden'
+  }
+};
+var _default = VirtualScrollStyle;
+exports.default = _default;

package/esm/alert/alert.d.ts

@@ -0,0 +1,4 @@
+import { JsStyles } from '../jss-style';
+export declare type AlertClass = 'alert' | 'noBordered' | 'content' | 'widthTitle' | 'title' | 'close' | 'info' | 'success' | 'warning' | 'confirmwarning' | 'danger' | 'infoIcon' | 'successIcon' | 'warningIcon' | 'confirmwarningIcon' | 'confirmIcon' | 'dangerIcon' | 'icon' | 'text' | 'pending';
+declare const alertStyle: JsStyles<AlertClass>;
+export default alertStyle;

package/esm/alert/alert.js

@@ -0,0 +1,135 @@
+"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 alertStyle = {
+  alert: {
+    // display: 'table',
+    display: 'flex',
+    width: '100%',
+    lineHeight: '1em',
+    boxSizing: 'border-box',
+    position: 'relative',
+    alignItems: 'flex-start',
+    color: _theme.default.alertFontColor,
+    padding: "".concat(_theme.default.alertPaddingY, " ").concat(_theme.default.alertPaddingX),
+    borderRadius: _theme.default.alertBorderRadius,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    opacity: 1,
+    transformOrigin: '0 0',
+    transform: 'scaleY(1) translateZ(0)',
+    '& [data-soui-layout="row"]': {
+      display: 'table-row'
+    },
+    '& [data-soui-layout="cell"]': {
+      display: 'table-cell',
+      verticalAlign: 'top',
+      height: 'auto'
+    },
+    '& [data-soui-children="true"]': {
+      fontSize: _theme.default.alertFontSize,
+      lineHeight: _theme.default.lineHeightDynamic
+    },
+    '&$widthTitle': {},
+    '& $icon': {}
+  },
+  widthTitle: {
+    '& $icon': {
+      // marginBottom: Token.alertNearlyMargin,
+      width: 20,
+      height: 24
+    },
+    '& $title': {
+      lineHeight: '24px'
+    },
+    '& $close': {
+      marginBottom: _theme.default.alertNearlyMargin
+    }
+  },
+  title: {
+    fontSize: _theme.default.alertTitleFontSize,
+    fontWeight: 500,
+    marginBottom: 4,
+    overflowWrap: 'anywhere',
+    lineHeight: _theme.default.alertTitleFontSize
+  },
+  text: {
+    overflowWrap: 'anywhere',
+    fontSize: _theme.default.alertFontSize
+  },
+  close: {
+    cursor: 'pointer',
+    width: _theme.default.alertFontSize,
+    color: _theme.default.alertCloseFontColor,
+    flex: '0 0 auto',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: _theme.default.alertNearlyMargin
+  },
+  content: {
+    flex: '1 1 0'
+  },
+  pending: {
+    opacity: 0,
+    transformOrigin: '0 0',
+    transform: 'scaleY(.8) translateZ(0)',
+    transition: 'transform .3s cubic-bezier(.3,1.3,.3,1),opacity .3s cubic-bezier(.3,1.3,.3,1)'
+  },
+  info: {
+    backgroundColor: _theme.default.alertInfoBackgroundColor,
+    borderColor: _theme.default.alertInfoBorderColor
+  },
+  success: {
+    backgroundColor: _theme.default.alertSuccessBackgroundColor,
+    borderColor: _theme.default.alertSuccessBorderColor
+  },
+  warning: {
+    backgroundColor: _theme.default.alertWarningBackgroundColor,
+    borderColor: _theme.default.alertWarningBorderColor
+  },
+  confirmwarning: {
+    backgroundColor: _theme.default.alertDangerBackgroundColor,
+    borderColor: _theme.default.alertDangerBorderColor
+  },
+  danger: {
+    backgroundColor: _theme.default.alertDangerBackgroundColor,
+    borderColor: _theme.default.alertDangerBorderColor
+  },
+  infoIcon: {
+    color: _theme.default.alertInfoFontColor
+  },
+  successIcon: {
+    color: _theme.default.alertSuccessFontColor
+  },
+  warningIcon: {
+    color: _theme.default.alertWarningFontColor
+  },
+  confirmwarningIcon: {
+    color: _theme.default.alertDangerFontColor
+  },
+  dangerIcon: {
+    color: _theme.default.alertDangerFontColor
+  },
+  confirmIcon: {
+    color: _theme.default.alertWarningFontColor
+  },
+  noBordered: {
+    borderColor: 'transparent'
+  },
+  icon: {
+    width: 16,
+    display: 'flex',
+    flex: '0 0 auto',
+    alignItems: 'center',
+    marginRight: _theme.default.alertNearlyMargin
+  }
+};
+var _default = alertStyle;
+exports.default = _default;

package/esm/alert/index.d.ts

@@ -0,0 +1,4 @@
+import alertStyle from './alert';
+declare const useAlertStyle: (data?: undefined) => import("jss").Classes<import("./alert").AlertClass>;
+export { alertStyle, useAlertStyle };
+export default useAlertStyle;

package/esm/alert/index.js

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

package/esm/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,16 @@
+import { JsStyles } from '../jss-style';
+export declare type BreadcrumbClasses = {
+    wrapper: string;
+    content: string;
+    item: string;
+    itemWithDrop: string;
+    down: string;
+    downOpen: string;
+    dropdownItem: string;
+    separator: string;
+    dropdown: string;
+    ellipsis: string;
+};
+export declare type BreadcrumbClassType = keyof BreadcrumbClasses;
+declare const breadcrumbStyle: JsStyles<BreadcrumbClassType>;
+export default breadcrumbStyle;

package/esm/breadcrumb/breadcrumb.js

@@ -0,0 +1,83 @@
+"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 breadcrumbStyle = {
+  wrapper: {
+    lineHeight: _theme.default.lineHeightDynamic,
+    fontSize: _theme.default.breadcrumbFontSize,
+    display: 'flex',
+    alignItems: 'center',
+    color: _theme.default.breadcrumbFontColor,
+    '& a': {
+      textDecoration: 'none',
+      color: _theme.default.breadcrumbLinkColor,
+      cursor: 'pointer',
+      '&:hover': {
+        color: _theme.default.breadcrumbLinkHoverColor
+      }
+    }
+  },
+  content: {
+    '&&': {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  },
+  ellipsis: {
+    color: _theme.default.breadcrumbLinkColor,
+    position: 'relative',
+    top: '-3px'
+  },
+  item: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  itemWithDrop: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  down: {
+    width: 14,
+    height: 14,
+    lineHeight: '1',
+    marginLeft: 4
+  },
+  downOpen: {
+    transform: 'rotate(180deg)'
+  },
+  dropdown: {
+    backgroundColor: _theme.default.breadcrumbListBackgroundColor,
+    boxShadow: _theme.default.breadcrumbListShadow,
+    border: "1px solid ".concat(_theme.default.breadcrumbListBorderColor),
+    padding: "".concat(_theme.default.breadcrumbListPaddingY, " 0"),
+    color: _theme.default.breadcrumbLinkColor
+  },
+  dropdownItem: {
+    lineHeight: _theme.default.lineHeightDynamic,
+    fontSize: _theme.default.breadcrumbFontSize,
+    cursor: 'pointer',
+    color: _theme.default.breadcrumbFontColor,
+    '&:hover': {
+      backgroundColor: _theme.default.breadcrumbListItemHoverBackgroundColor
+    },
+    '& $content, &  a': {
+      padding: "".concat(_theme.default.breadcrumbListItemPaddingY, " ").concat(_theme.default.breadcrumbListItemPaddingX),
+      display: 'inline-block',
+      textDecoration: 'none',
+      color: 'inherit',
+      minWidth: '100px'
+    }
+  },
+  separator: {
+    margin: "0 ".concat(_theme.default.breadcrumbSeparatorMarginX),
+    color: _theme.default.breadcrumbLinkColor
+  }
+};
+var _default = breadcrumbStyle;
+exports.default = _default;

package/esm/breadcrumb/index.d.ts

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

package/esm/breadcrumb/index.js

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