@sheinx/shineout-style 3.0.0-alpha.1

package/esm/tabs/tabs.js

@@ -0,0 +1,619 @@
+"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 active = function active(options) {
+  return {
+    '& [data-soui-state="active"]$tab': {
+      '&:after': _objectSpread({
+        position: 'absolute',
+        content: '""',
+        left: 'auto',
+        right: 'auto',
+        top: 'auto',
+        bottom: 'auto',
+        height: 'auto',
+        width: 'auto'
+      }, options)
+    }
+  };
+};
+var getHeaderPositionStyle = function getHeaderPositionStyle(position, options) {
+  return (0, _defineProperty2.default)({}, "&[data-soui-position^=\"".concat(position, "-\"]"), {
+    '& $headerWrapper': {
+      '&:after': options
+    }
+  });
+};
+var getCardStyle = function getCardStyle() {
+  return {
+    '&[data-soui-position^="left-"][data-soui-shape="card"]': _objectSpread({
+      '& $tab,& $next,& $prev': {
+        borderRadius: "".concat(_theme.default.tabsTabBorderRadius, " 0 0 ").concat(_theme.default.tabsTabBorderRadius)
+      },
+      '& $hr': {
+        right: 0,
+        width: 1,
+        height: '100%'
+      }
+    }, active({
+      top: 0,
+      bottom: 0,
+      right: -1,
+      width: 1,
+      background: '#FFFFFF'
+    })),
+    '&[data-soui-position^="right-"][data-soui-shape="card"]': _objectSpread({
+      '& $tab,& $next,& $prev': {
+        borderRadius: "0 ".concat(_theme.default.tabsTabBorderRadius, " ").concat(_theme.default.tabsTabBorderRadius, " 0")
+      },
+      '& $hr': {
+        left: 0,
+        width: 1,
+        height: '100%'
+      }
+    }, active({
+      top: 0,
+      bottom: 0,
+      left: -1,
+      width: 1,
+      background: '#FFFFFF'
+    })),
+    '&[data-soui-position^="top-"][data-soui-shape="card"]': _objectSpread({
+      '& $tab,& $next,& $prev': {
+        borderRadius: "".concat(_theme.default.tabsTabBorderRadius, " ").concat(_theme.default.tabsTabBorderRadius, " 0 0")
+      },
+      '& $hr': {
+        bottom: 0,
+        height: 1,
+        width: '100%'
+      }
+    }, active({
+      bottom: -1,
+      left: 0,
+      right: 0,
+      height: 1,
+      background: '#FFFFFF'
+    })),
+    '&[data-soui-position^="bottom-"][data-soui-shape="card"]': _objectSpread({
+      '& $tab,& $next,& $prev': {
+        borderRadius: "0 0 ".concat(_theme.default.tabsTabBorderRadius, " ").concat(_theme.default.tabsTabBorderRadius)
+      },
+      '& $hr': {
+        top: 0,
+        height: 1,
+        width: '100%'
+      }
+    }, active({
+      top: -1,
+      left: 0,
+      right: 0,
+      height: 1,
+      background: '#FFFFFF'
+    }))
+  };
+};
+var getLineStyle = function getLineStyle() {
+  return {
+    '&[data-soui-position^="left-"][data-soui-shape="line"]': _objectSpread({
+      '& $hr': {
+        right: 0,
+        width: 1,
+        height: '100%'
+      }
+    }, active({
+      top: 0,
+      bottom: 0,
+      right: 0,
+      width: 3
+    })),
+    '&[data-soui-position^="right-"][data-soui-shape="line"]': _objectSpread({
+      '& $hr': {
+        left: 0,
+        width: 1,
+        height: '100%'
+      }
+    }, active({
+      top: 0,
+      bottom: 0,
+      left: 0,
+      width: 3
+    })),
+    '&[data-soui-position^="top-"][data-soui-shape="line"]': _objectSpread({
+      '& $hr': {
+        bottom: 0,
+        height: 1,
+        width: '100%'
+      }
+    }, active({
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: 3
+    })),
+    '&[data-soui-position^="bottom-"][data-soui-shape="line"]': _objectSpread({
+      '& $hr': {
+        top: 0,
+        height: 1,
+        width: '100%'
+      }
+    }, active({
+      top: 0,
+      left: 0,
+      right: 0,
+      height: 3
+    }))
+  };
+};
+var getDashStyle = function getDashStyle() {
+  return {
+    '&[data-soui-position^="left-"][data-soui-shape="dash"]': _objectSpread({}, active({
+      top: "calc(50% - 12px)",
+      width: 3,
+      height: 24,
+      right: 0
+    })),
+    '&[data-soui-position^="right-"][data-soui-shape="dash"]': _objectSpread({}, active({
+      top: "calc(50% - 12px)",
+      width: 3,
+      height: 24,
+      left: 0
+    })),
+    '&[data-soui-position^="top-"][data-soui-shape="dash"]': _objectSpread({}, active({
+      bottom: 0,
+      left: "calc(50% - 12px)",
+      width: 24,
+      height: 3
+    })),
+    '&[data-soui-position^="bottom-"][data-soui-shape="dash"]': _objectSpread({}, active({
+      top: 0,
+      left: "calc(50% - 12px)",
+      width: 24,
+      height: 3
+    }))
+  };
+};
+var getFillStyle = function getFillStyle() {
+  return {
+    '&[data-soui-shape="fill"]': {
+      '& $tab': {
+        '&[data-soui-state="active"]': {
+          '& $fillInner': {
+            background: '#FFFFFF',
+            color: _theme.default.tabsActiveFontColor
+          }
+        },
+        '&:not([data-soui-state="active"]):hover $fillInner': {
+          background: _theme.default.tabsHoverBackgroundColor
+        },
+        '&:not([data-soui-state="active"]):active $fillInner': {
+          background: _theme.default.tabsClickBackgroundColor
+        },
+        '&:before': {
+          content: '""',
+          position: 'absolute',
+          left: 0,
+          top: 'calc(50% - 7px)',
+          width: 1,
+          height: 14,
+          background: 'transparent',
+          transition: 'all .15s ease-out'
+        }
+      },
+      '& $tab:not([data-soui-state="active"]):not(:hover) + $tab:not([data-soui-state="active"]):not(:hover)': {
+        '&:before': {
+          background: _theme.default.tabsSplitBorderColor
+        }
+      }
+    }
+  };
+};
+var getButtonStyle = function getButtonStyle() {
+  return {
+    '&[data-soui-shape="button"]': {}
+  };
+};
+var getHeaderStyle = function getHeaderStyle() {
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getHeaderPositionStyle('top', {
+    top: 'auto',
+    bottom: 0,
+    right: 0,
+    left: 0,
+    height: 1
+  })), getHeaderPositionStyle('bottom', {
+    top: 0,
+    bottom: 'auto',
+    right: 0,
+    left: 0,
+    height: 1
+  })), getHeaderPositionStyle('left', {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    left: 'auto',
+    width: 1
+  })), getHeaderPositionStyle('right', {
+    top: 0,
+    bottom: 0,
+    right: 'auto',
+    left: 0,
+    width: 1
+  })), {}, {
+    '&[data-soui-shape="fill"] $header': {
+      '& $tab': {
+        background: _theme.default.tabsBackgroundColor,
+        padding: "".concat(_theme.default.tabsFillPaddingY, " ").concat(_theme.default.tabsFillPaddingX)
+      },
+      '& $tab:first-child': {
+        borderRadius: "".concat(_theme.default.tabsTabBorderRadius, " 0 0 ").concat(_theme.default.tabsTabBorderRadius)
+      },
+      '& $tab:last-child': {
+        borderRadius: "0 ".concat(_theme.default.tabsTabBorderRadius, " ").concat(_theme.default.tabsTabBorderRadius, " 0")
+      }
+    },
+    '&[data-soui-shape="dash"],&[data-soui-shape="fill"]': {
+      '& $headerWrapper': {
+        '&:after': {
+          display: 'none'
+        }
+      }
+    }
+  });
+};
+var tabsStyle = {
+  tabs: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    // 水平模式
+    '&[data-soui-position^="top-"],&[data-soui-position^="bottom-"]': {
+      display: 'flex',
+      flexDirection: 'column',
+      '& $tab + $tab': {
+        marginLeft: _theme.default.tabsNearlyMargin
+      },
+      '&[data-soui-shape="fill"],&[data-soui-shape="button"]': {
+        '& $tab + $tab': {
+          margin: 0
+        }
+      },
+      '& $headerWrapper': {
+        alignItems: 'center'
+      },
+      '& $header': {
+        width: '100%',
+        alignItems: 'center'
+      },
+      '& $next,& $prev': {
+        padding: "".concat(_theme.default.tabsActionHorizontalPaddingY, " ").concat(_theme.default.tabsActionHorizontalPaddingX)
+      },
+      '& $panel': {
+        width: '100%'
+      }
+    },
+    // 垂直模式
+    '&[data-soui-position^="left-"],&[data-soui-position^="right-"]': {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      '& $tab': {
+        display: 'block'
+      },
+      '& $tab + $tab': {
+        marginTop: _theme.default.tabsNearlyMargin
+      },
+      '& $headerWrapper': {
+        flexDirection: 'column'
+      },
+      '& $next,& $prev': {
+        padding: "".concat(_theme.default.tabsActionVerticalPaddingY, " ").concat(_theme.default.tabsActionVerticalPaddingX),
+        '&:after': {
+          display: 'none'
+        }
+      },
+      '& $next': {
+        marginLeft: 0,
+        marginTop: _theme.default.tabsNearlyMargin,
+        '& svg': {
+          transform: 'rotate(90deg)'
+        }
+      },
+      '& $prev': {
+        marginRight: 0,
+        marginBottom: _theme.default.tabsNearlyMargin,
+        '& svg': {
+          transform: 'rotate(90deg)'
+        }
+      },
+      '& $header': {
+        height: '100%'
+      },
+      '& $panel': {
+        width: 'auto',
+        height: '100%'
+      }
+    },
+    '&[data-soui-position^="bottom-right"],&[data-soui-position^="top-right"]': {
+      '& $header': {
+        display: 'block',
+        textAlign: 'right'
+      },
+      '& $headerScroll': {
+        display: 'inline-block'
+      }
+    },
+    '&[data-soui-position="left-top"],&[data-soui-position="right-top"]': {
+      '& $header': {
+        alignItems: 'flex-start'
+      }
+    },
+    '&[data-soui-position="left-bottom"],&[data-soui-position="right-bottom"]': {
+      '& $header': {
+        alignItems: 'flex-start'
+      }
+    }
+  }, getCardStyle()), getLineStyle()), getDashStyle()), getFillStyle()), getButtonStyle()), getHeaderStyle()),
+  panelWrapper: {
+    width: 'auto',
+    height: 'auto',
+    overflow: 'hidden',
+    transition: 'all .2s ease-out'
+  },
+  panel: {
+    display: 'none'
+  },
+  autoFill: {
+    height: '100%',
+    '& $panelWrapper': {
+      flex: 1
+    },
+    '& $panel': {
+      overflow: 'auto',
+      height: '100%'
+    }
+  },
+  tab: {
+    position: 'relative',
+    display: 'inline-block',
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    lineHeight: _theme.default.lineHeightDynamic,
+    fontSize: _theme.default.tabsTabFontSize,
+    transition: 'all .2s',
+    '&[data-soui-state="active"]': {
+      '&:after': {
+        background: _theme.default.tabsActiveFontColor
+      }
+    }
+  },
+  hr: {
+    position: 'absolute',
+    background: _theme.default.tabsBorderColor
+  },
+  headerWrapper: {
+    display: 'flex',
+    overflow: 'hidden',
+    position: 'relative',
+    '& $prev[data-soui-shape="card"],$next[data-soui-shape="card"]': {
+      background: '#FFFFFF',
+      border: "1px solid ".concat(_theme.default.tabsBorderColor),
+      '&[data-soui-state="disabled"]': {
+        background: _theme.default.tabsBackgroundColor
+      },
+      '&:not([data-soui-state="disabled"]):hover': {
+        background: _theme.default.tabsHoverBackgroundColor
+      },
+      '&:not([data-soui-state="disabled"]):hover:active': {
+        background: _theme.default.tabsClickBackgroundColor
+      }
+    },
+    '& $prev[data-soui-shape="line"],$next[data-soui-shape="line"]': {
+      '&:not([data-soui-state="disabled"]):hover': {
+        '& $iconInner': {
+          background: _theme.default.tabsHoverBackgroundColor
+        }
+      },
+      '&:not([data-soui-state="disabled"]):hover:active': {
+        '& $iconInner': {
+          background: _theme.default.tabsClickBackgroundColor
+        }
+      }
+    },
+    // fill 同 line
+    '& $prev[data-soui-shape="fill"],$next[data-soui-shape="fill"]': {
+      '&:not([data-soui-state="disabled"]):hover': {
+        '& $iconInner': {
+          background: _theme.default.tabsHoverBackgroundColor
+        }
+      },
+      '&:not([data-soui-state="disabled"]):hover:active': {
+        '& $iconInner': {
+          background: _theme.default.tabsClickBackgroundColor
+        }
+      }
+    },
+    // button 同 line
+    '& $prev[data-soui-shape="button"],$next[data-soui-shape="button"]': {
+      '&:not([data-soui-state="disabled"]):hover': {
+        '& $iconInner': {
+          background: _theme.default.tabsHoverBackgroundColor
+        }
+      },
+      '&:not([data-soui-state="disabled"]):hover:active': {
+        '& $iconInner': {
+          background: _theme.default.tabsClickBackgroundColor
+        }
+      }
+    },
+    '& $prev[data-soui-shape="dash"],$next[data-soui-shape="dash"]': {
+      '&:not([data-soui-state="disabled"]):hover': {
+        '& $iconInner': {
+          background: _theme.default.tabsHoverBackgroundColor
+        }
+      },
+      '&:not([data-soui-state="disabled"]):hover:active': {
+        '& $iconInner': {
+          background: _theme.default.tabsClickBackgroundColor
+        }
+      }
+    },
+    '& $prev,& $next': {
+      cursor: 'pointer',
+      position: 'relative',
+      boxSizing: 'border-box',
+      '&[data-soui-state="disabled"]': {
+        cursor: 'not-allowed',
+        '& svg': {
+          fill: _theme.default.tabsDisabledFontColor
+        }
+      },
+      '& svg': {
+        width: 14
+      }
+    }
+  },
+  headerScroll: {
+    zIndex: 1,
+    transition: 'all .15s ease-out'
+  },
+  header: (0, _defineProperty2.default)({
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    '&[data-soui-shape="card"]': {
+      '& $tab': {
+        position: 'relative',
+        border: "1px solid ".concat(_theme.default.tabsBorderColor),
+        padding: "".concat(_theme.default.tabsTabPaddingY, " ").concat(_theme.default.tabsTabPaddingX),
+        background: _theme.default.tabsBackgroundColor,
+        '&[data-soui-state="active"]': {
+          color: _theme.default.tabsActiveFontColor,
+          background: _theme.default.tabsActiveBackgroundColor
+        },
+        '&$disabled': {
+          color: _theme.default.tabsDisabledFontColor
+        },
+        '&:not([data-soui-state="active"]):hover': {
+          background: _theme.default.tabsHoverBackgroundColor
+        },
+        '&:not([data-soui-state="active"]):active': {
+          background: _theme.default.tabsClickBackgroundColor
+        }
+      }
+    },
+    '&[data-soui-shape="line"]': {
+      '& $tab': {
+        position: 'relative',
+        padding: "".concat(_theme.default.tabsLinePaddingY, " ").concat(_theme.default.tabsLinePaddingX),
+        // background: '#FFF',
+
+        '&[data-soui-state="active"]': {
+          color: _theme.default.tabsActiveFontColor,
+          background: _theme.default.tabsActiveBackgroundColor
+        },
+        '&:not([data-soui-state="active"]):hover $lineInner': {
+          background: _theme.default.tabsHoverBackgroundColor
+        },
+        '&:not([data-soui-state="active"]):active $lineInner': {
+          background: _theme.default.tabsClickBackgroundColor
+        }
+      }
+    }
+  }, '&[data-soui-shape="dash"]', {
+    '& $tab': {
+      padding: "".concat(_theme.default.tabsLinePaddingY, " ").concat(_theme.default.tabsLinePaddingX),
+      '&[data-soui-state="active"]': {
+        color: _theme.default.tabsActiveFontColor,
+        background: _theme.default.tabsActiveBackgroundColor
+      },
+      '&:not([data-soui-state="active"]):hover $lineInner': {
+        background: _theme.default.tabsHoverBackgroundColor
+      },
+      '&:not([data-soui-state="active"]):active  $lineInner': {
+        background: _theme.default.tabsClickBackgroundColor
+      }
+    }
+  }),
+  button: {},
+  line: {},
+  lineInner: {
+    transition: 'all .2s',
+    borderRadius: _theme.default.tabsTabBorderRadius,
+    padding: "".concat(_theme.default.tabsLinePaddingY, " ").concat(_theme.default.tabsLinePaddingX)
+  },
+  fillInner: {
+    transition: 'all .2s',
+    borderRadius: _theme.default.tabsTabBorderRadius,
+    padding: "".concat(_theme.default.tabsFillInnerPaddingY, " ").concat(_theme.default.tabsFillInnerPaddingX)
+  },
+  iconInner: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '50%',
+    width: 22,
+    height: 22
+  },
+  bordered: {},
+  card: {},
+  dash: {},
+  active: {},
+  disabled: {},
+  show: {
+    display: 'block'
+  },
+  prev: {
+    textAlign: 'center',
+    lineHeight: _theme.default.lineHeightDynamic,
+    '&[data-soui-shape="card"]': {
+      marginRight: _theme.default.tabsNearlyMargin
+    }
+  },
+  next: {
+    textAlign: 'center',
+    lineHeight: _theme.default.lineHeightDynamic,
+    '&[data-soui-shape="card"]': {
+      marginLeft: _theme.default.tabsNearlyMargin
+    }
+  },
+  extra: {},
+  collapsible: {
+    padding: "".concat(_theme.default.tabsActionHorizontalPaddingY, " ").concat(_theme.default.tabsActionHorizontalPaddingX),
+    marginRight: _theme.default.tabsNearlyMargin,
+    cursor: 'pointer',
+    borderLeft: "1px solid transparent",
+    borderRight: "1px solid transparent",
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '&:hover': {
+      color: _theme.default.tabsActiveFontColor
+    },
+    '& svg': {
+      width: 14,
+      textAlign: 'center',
+      transform: 'rotate(-90deg)',
+      transition: 'transform .2s'
+    }
+  },
+  collapsed: {
+    '& $collapsible': {
+      '& svg': {
+        transform: 'rotate(-180deg)'
+      }
+    }
+  }
+};
+var _default = tabsStyle;
+exports.default = _default;

package/esm/tag/index.d.ts

@@ -0,0 +1,4 @@
+import tagStyle from './tag';
+declare const useTagStyle: (data?: undefined) => import("jss").Classes<"input" | "small" | "outline" | "fill" | "cyan" | "indigo" | "magenta" | "orange" | "purple" | "default" | "inline" | "large" | "disabled" | "info" | "success" | "warning" | "danger" | "rounded" | "tag" | "closeIcon" | "closeIconWrapper" | "neon" | "lemon" | "tangerine" | "bright" | "brightOutline">;
+export { tagStyle, useTagStyle };
+export default useTagStyle;

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

package/esm/tag/tag.d.ts

@@ -0,0 +1,4 @@
+import { JsStyles } from '../jss-style';
+declare type TagClass = 'tag' | 'inline' | 'disabled' | 'closeIcon' | 'closeIconWrapper' | 'info' | 'default' | 'success' | 'warning' | 'danger' | 'orange' | 'magenta' | 'purple' | 'indigo' | 'cyan' | 'neon' | 'lemon' | 'tangerine' | 'large' | 'small' | 'outline' | 'fill' | 'bright' | 'brightOutline' | 'rounded' | 'input';
+declare const TagStyle: JsStyles<TagClass>;
+export default TagStyle;