@sheinx/shineout-style 3.0.0-alpha.1

package/esm/switch/switch.js

@@ -0,0 +1,148 @@
+"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 animation = {
+  '@keyframes ring': {
+    '0%': {
+      transform: 'rotateZ(0deg)'
+    },
+    '100%': {
+      transform: 'rotateZ(359deg)'
+    }
+  }
+};
+var transition = '.2s cubic-bezier(.34,.69,.1,1)';
+var switchStyle = _objectSpread(_objectSpread({}, animation), {}, {
+  wrapper: {
+    transition: "background-color ".concat(transition),
+    border: '0',
+    display: 'inline-block',
+    position: 'relative',
+    cursor: 'pointer',
+    whiteSpace: 'nowrap',
+    backgroundColor: _theme.default.switchBackgroundColor,
+    color: _theme.default.switchFontColor,
+    verticalAlign: 'middle',
+    '$wrapperDisabled&': {
+      backgroundColor: _theme.default.switchDisabledBackgroundColor,
+      color: _theme.default.switchDisabledFontColor
+    },
+    '$wrapperChecked&': {
+      backgroundColor: _theme.default.switchCheckedBackgroundColor,
+      color: _theme.default.switchCheckedFontColor
+    },
+    '$wrapperChecked$wrapperDisabled&': {
+      backgroundColor: _theme.default.switchCheckedDisabledBackgroundColor,
+      color: _theme.default.switchCheckedDisabledFontColor
+    },
+    // '$wrapperChecked$wrapperLoading&': {
+    //   backgroundColor: token.switchCheckedLoadingBackgroundColor,
+    //   color: token.switchCheckedLoadingFontColor,
+    // },
+    height: "calc( ".concat(_theme.default.switchCircleSize, " + ").concat(_theme.default.switchPaddingY, " * 2 )"),
+    padding: "".concat(_theme.default.switchPaddingY, " ").concat(_theme.default.switchPaddingX),
+    minWidth: _theme.default.switchWidth,
+    borderRadius: "calc( ".concat(_theme.default.switchCircleSize, " / 2 + ").concat(_theme.default.switchPaddingY, " )"),
+    fontSize: _theme.default.switchFontSize,
+    '$wrapperSmall&': {
+      height: "calc( ".concat(_theme.default.switchSmallCircleSize, " + ").concat(_theme.default.switchSmallPaddingY, " * 2 )"),
+      padding: "".concat(_theme.default.switchSmallPaddingY, " ").concat(_theme.default.switchSmallPaddingX),
+      minWidth: _theme.default.switchSmallWidth,
+      borderRadius: "calc( ".concat(_theme.default.switchSmallCircleSize, " / 2 + ").concat(_theme.default.switchSmallPaddingY, " )"),
+      fonSize: _theme.default.switchSmallFontSize
+    },
+    '$wrapperLarge&': {
+      height: "calc( ".concat(_theme.default.switchLargeCircleSize, " + ").concat(_theme.default.switchLargePaddingY, " * 2 )"),
+      padding: "".concat(_theme.default.switchLargePaddingY, " ").concat(_theme.default.switchLargePaddingX),
+      minWidth: _theme.default.switchLargeWidth,
+      borderRadius: "calc( ".concat(_theme.default.switchLargeCircleSize, " / 2 + ").concat(_theme.default.switchLargePaddingY, " )"),
+      fonSize: _theme.default.switchLargeFontSize
+    }
+  },
+  wrapperChecked: {},
+  // wrapperLoading: {},
+  wrapperSmall: {},
+  wrapperLarge: {},
+  indicator: {
+    width: _theme.default.switchCircleSize,
+    height: _theme.default.switchCircleSize,
+    left: _theme.default.switchPaddingX,
+    top: _theme.default.switchPaddingY,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: 'red',
+    '$wrapperChecked &': {
+      right: _theme.default.switchPaddingX,
+      left: "calc(100% - ".concat(_theme.default.switchCircleSize, " - ").concat(_theme.default.switchPaddingX, ")"),
+      '$wrapperSmall&': {
+        right: _theme.default.switchSmallPaddingX,
+        left: "calc(100% - ".concat(_theme.default.switchSmallCircleSize, " - ").concat(_theme.default.switchSmallPaddingX, ")")
+      },
+      '$wrapperLarge&': {
+        right: _theme.default.switchLargePaddingX,
+        left: "calc(100% - ".concat(_theme.default.switchLargeCircleSize, " - ").concat(_theme.default.switchLargePaddingX, ")")
+      }
+    },
+    '$wrapperSmall &': {
+      width: _theme.default.switchSmallCircleSize,
+      height: _theme.default.switchSmallCircleSize,
+      left: _theme.default.switchSmallPaddingX,
+      top: _theme.default.switchSmallPaddingY
+    },
+    '$wrapperLarge &': {
+      width: _theme.default.switchLargeCircleSize,
+      height: _theme.default.switchLargeCircleSize,
+      left: _theme.default.switchLargePaddingX,
+      top: _theme.default.switchLargePaddingY
+    },
+    borderRadius: '50%',
+    position: 'absolute',
+    backgroundColor: _theme.default.switchCircleFill,
+    boxShadow: _theme.default.switchCircleShadow,
+    transition: "left ".concat(transition, ", right ").concat(transition)
+  },
+  content: {
+    display: 'inline',
+    lineHeight: 1,
+    paddingLeft: _theme.default.switchCircleSize,
+    transition: "padding ".concat(transition),
+    '$wrapperChecked &': {
+      paddingLeft: 0,
+      paddingRight: _theme.default.switchCircleSize
+    }
+  },
+  wrapperDisabled: {
+    cursor: 'not-allowed'
+  },
+  loading: {
+    position: 'absolute',
+    top: '12%',
+    left: '12%',
+    right: '12%',
+    bottom: '12%',
+    borderRadius: '50%',
+    border: '1px solid',
+    borderColor: _theme.default.switchDisabledBackgroundColor,
+    borderTopColor: 'transparent',
+    animation: "$ring 1s ease-in-out infinite",
+    '$wrapperChecked &': {
+      borderColor: _theme.default.switchCheckedDisabledBackgroundColor,
+      borderTopColor: 'transparent'
+    }
+  }
+});
+var _default = switchStyle;
+exports.default = _default;

package/esm/table/index.d.ts

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

package/esm/table/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, "tableStyle", {
+  enumerable: true,
+  get: function get() {
+    return _table.default;
+  }
+});
+exports.useTableStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _table = _interopRequireDefault(require("./table"));
+var useTableStyle = (0, _jssStyle.styled)(_table.default, 'table');
+exports.useTableStyle = useTableStyle;
+var _default = useTableStyle;
+exports.default = _default;

package/esm/table/table.d.ts

@@ -0,0 +1,47 @@
+import { JsStyles } from '../jss-style';
+export declare type TableClasses = {
+    wrapper: string;
+    small: string;
+    large: string;
+    default: string;
+    scrollY: string;
+    floatLeft: string;
+    floatRight: string;
+    bordered: string;
+    sticky: string;
+    verticalAlignTop: string;
+    verticalAlignMiddle: string;
+    simple: string;
+    striped: string;
+    loading: string;
+    headWrapper: string;
+    bodyWrapper: string;
+    footWrapper: string;
+    emptyWrapper: string;
+    cellAlignRight: string;
+    cellAlignCenter: string;
+    cellFixedLeft: string;
+    cellFixedRight: string;
+    cellFixedLast: string;
+    cellGroup: string;
+    cellHover: string;
+    rowExpand: string;
+    rowStriped: string;
+    rowChecked: string;
+    hasSorter: string;
+    sorterContainer: string;
+    sorterActive: string;
+    sorterAsc: string;
+    sorterDesc: string;
+    resizeSpanner: string;
+    resizeSpannerActive: string;
+    resizeSpannerInactive: string;
+    cellIgnoreBorder: string;
+    expandIcon: string;
+    iconWrapper: string;
+    expandWrapper: string;
+    pagination: string;
+};
+export declare type TableClassType = keyof TableClasses;
+declare const tableStyle: JsStyles<TableClassType>;
+export default tableStyle;

package/esm/table/table.js

@@ -0,0 +1,374 @@
+"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"));
+var _mixin = require("../mixin");
+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 cellBaseIndex = 4;
+var sorterIndex = 10;
+var fixedIndex = 8;
+var headerIndex = 12;
+var loadingIndex = 16;
+var globalStyle = {
+  '@global': {
+    'body[data-soui-table-selection] *::selection': {
+      backgroundColor: 'transparent'
+    }
+  }
+};
+var tableStyle = _objectSpread(_objectSpread({}, globalStyle), {}, {
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    boxSizing: 'border-box',
+    position: 'relative',
+    zIndex: 0,
+    fontSize: _theme.default.tableFontSize,
+    '& table': {
+      textAlign: 'left',
+      minWidth: '100%',
+      boxSizing: 'border-box',
+      tableLayout: 'fixed',
+      borderCollapse: 'separate',
+      borderSpacing: 0,
+      '& th, & td': {
+        wordBreak: 'break-all',
+        position: 'relative',
+        borderBottom: "1px solid ".concat(_theme.default.tableCellBorderColor),
+        boxSizing: 'border-box',
+        lineHeight: _theme.default.lineHeightDynamic,
+        '&$cellFixedLeft, &$cellFixedRight': {
+          zIndex: fixedIndex
+        },
+        '$bordered&::after': {
+          content: '""',
+          position: 'absolute',
+          zIndex: cellBaseIndex,
+          top: 0,
+          right: 0,
+          bottom: 0,
+          width: '1px',
+          background: _theme.default.tableCellBorderColor
+        }
+      },
+      '& td': {
+        background: _theme.default.tableTbodyBackgroundColor,
+        color: _theme.default.tableTbodyFontColor,
+        '&[data-soui-table-selection]::before': {
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          border: "1px solid ".concat(_theme.default.tableSelectionBorderColor),
+          boxSizing: 'border-box'
+        }
+      },
+      '& th': {
+        verticalAlign: 'middle',
+        background: _theme.default.tableTheadBackgroundColor,
+        color: _theme.default.tableTheadFontColor,
+        fontWeight: 'bold',
+        boxSizing: 'border-box'
+      },
+      '& tfoot td': {
+        background: _theme.default.tableTfootBackgroundColor,
+        color: _theme.default.tableTfootFontColor
+      }
+    }
+  },
+  loading: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: 'flex',
+    overflow: 'hidden',
+    zIndex: loadingIndex,
+    backgroundColor: 'hsla(0,0%,100%,.4)'
+  },
+  default: {
+    '& th, & td': {
+      padding: "".concat(_theme.default.tableCellPaddingY, " ").concat(_theme.default.tableCellPaddingX)
+    }
+  },
+  small: {
+    '& th, & td': {
+      padding: "".concat(_theme.default.tableSmallCellPaddingY, " ").concat(_theme.default.tableSmallCellPaddingX)
+    }
+  },
+  large: {
+    '& th, & td': {
+      padding: "".concat(_theme.default.tableLargeCellPaddingY, " ").concat(_theme.default.tableLargeCellPaddingX)
+    }
+  },
+  bordered: {
+    border: "1px solid ".concat(_theme.default.tableCellBorderColor),
+    borderBottom: 'none',
+    '&::after': {
+      position: 'absolute',
+      content: '""',
+      display: 'block',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: '1px',
+      background: _theme.default.tableCellBorderColor
+    }
+  },
+  headWrapper: {
+    flex: '0 0 auto',
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+    background: _theme.default.tableTheadBackgroundColor,
+    '$sticky > &': {
+      zIndex: headerIndex
+    }
+  },
+  bodyWrapper: {
+    overflow: 'auto',
+    boxSizing: 'border-box',
+    flexGrow: 1,
+    minHeight: '0'
+  },
+  footWrapper: {
+    flex: '0 0 auto',
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+    background: _theme.default.tableTfootBackgroundColor
+  },
+  emptyWrapper: {
+    minHeight: '150px',
+    width: '100%',
+    height: '100%',
+    position: 'sticky',
+    left: 0,
+    top: 0,
+    justifyContent: 'center',
+    display: 'flex',
+    alignItems: 'center'
+  },
+  scrollY: {
+    '&$headWrapper, &$footWrapper': _objectSpread({
+      overflowY: 'scroll'
+    }, (0, _mixin.customScrollBar)({
+      background: 'transparent'
+    }))
+  },
+  cellFixedLeft: {
+    position: 'sticky'
+  },
+  cellFixedRight: {
+    position: 'sticky'
+  },
+  cellAlignCenter: {
+    textAlign: 'center'
+  },
+  cellAlignRight: {
+    textAlign: 'right'
+  },
+  cellFixedLast: {},
+  cellGroup: {
+    textAlign: 'center',
+    '$wrapper &': {
+      borderBottomWidth: 0
+    },
+    '$wrapper$bordered &': {
+      borderBottomWidth: 1
+    }
+  },
+  cellHover: {
+    'table tbody td&&': {
+      background: "".concat(_theme.default.tableTbodyHoverBackgroundColor)
+    }
+  },
+  floatLeft: {
+    '& $cellFixedLast$cellFixedLeft::after': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      width: '5px',
+      right: '-5px',
+      background: "linear-gradient(90deg, ".concat(_theme.default.tableFixedShadow, ", transparent)")
+    }
+  },
+  floatRight: {
+    '& $cellFixedLast$cellFixedRight::before': {
+      content: '""',
+      width: '5px',
+      left: '-5px',
+      background: "linear-gradient(270deg, ".concat(_theme.default.tableFixedShadow, ",transparent)"),
+      top: 0,
+      bottom: 0,
+      position: 'absolute'
+    }
+  },
+  hasSorter: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  sorterContainer: {
+    minWidth: '14px',
+    width: '14px',
+    position: 'relative',
+    transform: 'translateX(6px)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'stretch',
+    flexDirection: 'column',
+    '& $sorterAsc, & $sorterDesc': {
+      right: 0,
+      width: '7px',
+      height: '5px',
+      color: _theme.default.tableSorterColor,
+      display: 'flex',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      '&:hover': {
+        color: _theme.default.tableSorterHoverColor
+      },
+      '&$sorterActive': {
+        color: _theme.default.tableSorterActiveColor
+      }
+    }
+  },
+  sorterAsc: {
+    top: 0,
+    bottom: '50%'
+  },
+  sorterDesc: {
+    top: '50%',
+    bottom: 0,
+    marginTop: '4px'
+  },
+  sorterActive: {},
+  resizeSpanner: {
+    zIndex: sorterIndex,
+    position: 'absolute',
+    opacity: 0,
+    right: '-1px',
+    top: 0,
+    bottom: 0,
+    width: '3px',
+    boxSizing: 'border-box',
+    background: _theme.default.tableResizeColor,
+    transition: 'opacity 0.3s',
+    cursor: 'ew-resize',
+    '$wrapper th:hover &': {
+      opacity: 1
+    },
+    '$cellIgnoreBorder &': {
+      display: 'none'
+    },
+    '&::before, &::after': {
+      borderWidth: '3px',
+      content: '""',
+      position: 'absolute',
+      width: 0,
+      height: 0,
+      margin: 'auto',
+      bottom: 0,
+      top: 0
+    },
+    '&::after': {
+      borderStyle: 'dashed solid dashed dashed',
+      borderColor: "transparent ".concat(_theme.default.tableResizeColor, " transparent transparent"),
+      right: '4px'
+    },
+    '&::before': {
+      borderStyle: 'dashed dashed dashed solid',
+      borderColor: "transparent transparent transparent ".concat(_theme.default.tableResizeColor),
+      left: '4px'
+    }
+  },
+  resizeSpannerActive: {
+    opacity: 1
+  },
+  resizeSpannerInactive: {
+    opacity: 0,
+    '$wrapper th:hover &': {
+      opacity: 0
+    }
+  },
+  cellIgnoreBorder: {
+    '&::after': {
+      display: 'none'
+    }
+  },
+  sticky: {},
+  expandIcon: {
+    display: 'inline-block',
+    width: _theme.default.tableExpandIconSize,
+    height: _theme.default.tableExpandIconSize,
+    cursor: 'pointer',
+    color: _theme.default.tableExpandIconColor,
+    '&>svg': {
+      cursor: 'pointer'
+    }
+  },
+  verticalAlignTop: {
+    '& td': {
+      verticalAlign: 'top'
+    }
+  },
+  verticalAlignMiddle: {
+    '& td': {
+      verticalAlign: 'middle'
+    }
+  },
+  expandWrapper: {
+    '& $iconWrapper': {
+      marginRight: '8px'
+    }
+  },
+  iconWrapper: {
+    display: 'inline-block',
+    verticalAlign: 'top',
+    lineHeight: '1.85',
+    height: '14px'
+  },
+  rowStriped: {
+    '&& td': {
+      background: _theme.default.tableTbodyStripedBackgroundColor
+    }
+  },
+  rowChecked: {
+    '&& td': {
+      background: _theme.default.tableTbodyActiveBackgroundColor
+    }
+  },
+  rowExpand: {
+    '&& td': {
+      background: _theme.default.tableExpandBackgroundColor
+    }
+  },
+  pagination: {
+    margin: "".concat(_theme.default.tablePaginationMarginY, " 0")
+  },
+  striped: {
+    '& table tr:nth-child(even) td': {
+      background: "".concat(_theme.default.tableTbodyStripedBackgroundColor)
+    }
+  },
+  simple: {
+    '& table tr:hover td': {
+      background: "".concat(_theme.default.tableTbodyHoverBackgroundColor)
+    }
+  }
+});
+var _default = tableStyle;
+exports.default = _default;

package/esm/tabs/index.d.ts

@@ -0,0 +1,4 @@
+import tabsStyle from './tabs';
+declare const useTabsStyle: (data?: undefined) => import("jss").Classes<import("./tabs").TabsClass>;
+export { tabsStyle, useTabsStyle };
+export default useTabsStyle;

package/esm/tabs/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, "tabsStyle", {
+  enumerable: true,
+  get: function get() {
+    return _tabs.default;
+  }
+});
+exports.useTabsStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _tabs = _interopRequireDefault(require("./tabs"));
+var useTabsStyle = (0, _jssStyle.styled)(_tabs.default, 'tabs');
+exports.useTabsStyle = useTabsStyle;
+var _default = useTabsStyle;
+exports.default = _default;

package/esm/tabs/tabs.d.ts

@@ -0,0 +1,4 @@
+import { JsStyles } from '../jss-style';
+export declare type TabsClass = 'tabs' | 'panelWrapper' | 'panel' | 'tab' | 'header' | 'hr' | 'headerWrapper' | 'headerScroll' | 'button' | 'line' | 'lineInner' | 'fillInner' | 'iconInner' | 'bordered' | 'card' | 'dash' | 'active' | 'show' | 'disabled' | 'prev' | 'next' | 'extra' | 'collapsible' | 'collapsed' | 'autoFill';
+declare const tabsStyle: JsStyles<TabsClass>;
+export default tabsStyle;