@sheinx/shineout-style 3.0.0-alpha.1

package/esm/transfer/transfer.js

@@ -0,0 +1,198 @@
+"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 TransferStyle = {
+  transfer: {
+    display: 'flex',
+    alignItems: 'center',
+    color: _theme.default.transferFontColor,
+    fontSize: _theme.default.transferFontSize
+  },
+  small: {
+    '& $operations': {
+      '& svg': {
+        width: 12
+      }
+    },
+    '& $header': {
+      height: _theme.default.transferSmallHeaderHeight
+    },
+    '& $title,$count,$simpleTarget,$removeAll': {
+      fontSize: _theme.default.transferSmallFontSize
+    },
+    '& $close': {
+      width: 20
+    }
+  },
+  large: {
+    '& $operations': {
+      '& svg': {
+        width: 16
+      }
+    },
+    '& $header': {
+      height: _theme.default.transferLargeHeaderHeight
+    },
+    '& $title,$count,$simpleTarget,$removeAll': {
+      fontSize: _theme.default.transferLargeFontSize
+    },
+    '& $close': {
+      width: 24
+    }
+  },
+  simple: {
+    '& $source': {
+      borderRadius: "".concat(_theme.default.transferBorderRadius, " 0 0 ").concat(_theme.default.transferBorderRadius),
+      borderRight: 0
+    },
+    '& $target': {
+      borderRadius: "0 ".concat(_theme.default.transferBorderRadius, " ").concat(_theme.default.transferBorderRadius, " 0"),
+      '& $header': {
+        paddingRight: 6
+      }
+    }
+  },
+  view: {
+    minWidth: 200,
+    boxSizing: 'border-box',
+    borderRadius: _theme.default.transferBorderRadius,
+    border: "1px solid ".concat(_theme.default.transferBorderColor),
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  source: {},
+  target: {},
+  simpleTarget: {
+    display: 'flex',
+    padding: '5px 3px',
+    paddingLeft: 8,
+    fontSize: _theme.default.transferFontSize,
+    justifyContent: 'space-between',
+    lineHeight: _theme.default.lineHeightDynamic
+  },
+  removeAll: {
+    width: 24,
+    height: 24,
+    borderRadius: '50%',
+    minWidth: 24,
+    fontSize: _theme.default.transfer,
+    lineHeight: '14px',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 3,
+    '& svg': {
+      width: 14,
+      color: _theme.default.transferIconColor
+    },
+    '&:hover': {
+      background: _theme.default.transferIconBackgroundColor
+    }
+  },
+  close: {
+    width: 24,
+    borderRadius: '50%',
+    minWidth: 12,
+    fontSize: 12,
+    cursor: 'pointer',
+    color: _theme.default.transferIconColor,
+    lineHeight: "calc(".concat(_theme.default.lineHeightDynamic, " + 2px)"),
+    marginLeft: _theme.default.transferIconNearlyMargin,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '& svg': {
+      width: 12
+    },
+    '&:hover': {
+      background: _theme.default.transferIconBackgroundColor
+    }
+  },
+  operations: {
+    padding: '0 24px',
+    textAlign: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    '& svg': {
+      width: 14
+    }
+  },
+  input: {
+    padding: '6px 12px',
+    '& svg': {
+      width: 14,
+      minWidth: 14,
+      color: _theme.default.transferIconColor
+    }
+  },
+  left: {
+    marginTop: 12
+  },
+  right: {},
+  header: {
+    height: _theme.default.transferHeaderHeight,
+    padding: 12,
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    justifyContent: 'space-between',
+    background: _theme.default.transferHeaderBackgroundColor
+  },
+  title: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  count: {
+    fontSize: _theme.default.transferFontSize
+  },
+  list: {},
+  footer: {
+    height: 48,
+    boxSizing: 'border-box',
+    borderTop: "1px solid ".concat(_theme.default.transferBorderColor)
+  },
+  item: {
+    padding: '1px 4px',
+    '&:not($disabled):hover': {
+      '& $itemWrapper': {
+        background: _theme.default.transferItemHoverBackgroundColor
+      }
+    }
+  },
+  disabled: {
+    cursor: 'not-allowed',
+    color: _theme.default.transferDisabledFontColor,
+    '& $close': {
+      cursor: 'not-allowed',
+      color: _theme.default.transferDisabledFontColor,
+      '&:hover': {
+        background: 'transparent'
+      }
+    }
+  },
+  itemWrapper: {
+    borderRadius: _theme.default.transferBorderRadius,
+    cursor: 'pointer',
+    '& $checkbox': {
+      width: '100%',
+      padding: '5px 8px',
+      marginRight: 0
+    }
+  },
+  checkbox: {},
+  empty: {
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+};
+var _default = TransferStyle;
+exports.default = _default;

package/esm/tree/index.d.ts

@@ -0,0 +1,4 @@
+import treeStyle from './tree';
+declare const useTreeStyle: (data?: undefined) => import("jss").Classes<import("./tree").TreeClass>;
+export { treeStyle, useTreeStyle };
+export default useTreeStyle;

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

package/esm/tree/tree.d.ts

@@ -0,0 +1,4 @@
+import { JsStyles } from '../jss-style';
+export declare type TreeClass = 'tree' | 'line' | 'noline' | 'small' | 'large' | 'root' | 'contentWrapper' | 'inlineContent' | 'content' | 'checkbox' | 'text' | 'list' | 'node' | 'leaf' | 'childnode' | 'iconWrapper' | 'icon' | 'children' | 'placement';
+declare const treeStyle: JsStyles<TreeClass>;
+export default treeStyle;

package/esm/tree/tree.js

@@ -0,0 +1,185 @@
+"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 treeStyle = {
+  tree: {},
+  line: {
+    '& $node': {
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        left: 0,
+        height: '100%',
+        width: 1,
+        background: '#ebebeb'
+      },
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        top: 18,
+        left: 0,
+        height: 1,
+        width: 12,
+        background: '#ebebeb'
+      }
+    },
+    '& $node:first-child': {},
+    '& $node:first-child:last-child': {
+      '&::before,&::after': {
+        display: 'none'
+      }
+    },
+    '& $node:last-child': {
+      '&::before': {
+        top: 0,
+        height: 18
+      }
+    },
+    '& $contentWrapper': {},
+    '& $iconWrapper': {
+      left: 16,
+      width: 24,
+      '& $icon': {
+        // width: 16,
+      }
+    },
+    '& $childnode': {
+      marginLeft: 12
+    }
+  },
+  noline: {
+    '& $iconWrapper': {
+      // left: 12,
+    },
+    '& $iconWrapper[data-expanded="false"][data-icon="false"]': {
+      '& $icon': {
+        transform: 'rotate(-90deg)'
+      }
+    },
+    '& $iconWrapper[data-expanded="true"][data-icon="false"]': {
+      '& $icon': {
+        transform: 'rotate(0deg)'
+      }
+    },
+    '& $node': {
+      paddingLeft: 24,
+      '&$leaf': {
+        paddingLeft: 24
+      }
+    }
+  },
+  root: {
+    '& > :first-child$node': {
+      '&::before': {
+        top: 18
+      }
+    },
+    '& > :last-child$node': {
+      '&::before': {}
+    }
+  },
+  small: {},
+  large: {},
+  contentWrapper: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    padding: '5px 0'
+  },
+  inlineContent: {
+    display: 'inline-flex'
+  },
+  content: {
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    lineHeight: '26px',
+    padding: "0 ".concat(_theme.default.treePaddingX),
+    borderRadius: _theme.default.treeContentBorderRadius,
+    '&[data-active="true"]': {
+      background: _theme.default.treeContentActiveBackgroundColor,
+      '& $text': {
+        color: _theme.default.treeContentActiveFontColor
+      }
+    },
+    '&:hover:not([data-active="true"])': {
+      background: _theme.default.treeContentHoverBackgroundColor
+    }
+  },
+  checkbox: {
+    '&[class*="checkbox-wrapper"]': {
+      height: 26,
+      marginRight: 0
+    }
+  },
+  text: {
+    fontSize: _theme.default.treeFontSize,
+    color: _theme.default.treeFontColor
+  },
+  list: {},
+  node: {
+    position: 'relative',
+    paddingLeft: 28,
+    '&$leaf': {
+      paddingLeft: 40,
+      '&::after': {
+        width: 12
+      }
+    }
+  },
+  leaf: {},
+  childnode: {},
+  iconWrapper: {
+    position: 'absolute',
+    left: 0,
+    width: 24,
+    height: 26,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '&[data-expanded="true"][data-icon="false"]': {
+      '& $icon': {
+        transform: 'rotate(0deg)'
+      }
+    }
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '50%',
+    transition: 'all 0.2s ease',
+    color: _theme.default.treeItemFontColor,
+    cursor: 'pointer',
+    // transform: 'rotate(-90deg)',
+    '&:hover': {
+      background: _theme.default.treeItemHoverBackgroundColor
+    },
+    '&:active': {
+      background: _theme.default.treeItemActiveBackgroundColor
+    },
+    '& svg': {
+      width: 14
+    }
+  },
+  children: {},
+  placement: {
+    position: 'relative',
+    zIndex: 0,
+    width: '100%',
+    height: 0,
+    '& div': {
+      borderBottom: "2px solid ".concat(_theme.default.treeDragBorderColor),
+      background: _theme.default.treeDragBackgroundColor
+    }
+  }
+};
+var _default = treeStyle;
+exports.default = _default;

package/esm/upload/index.d.ts

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

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

package/esm/upload/upload.d.ts

@@ -0,0 +1,40 @@
+import { JsStyles } from '../jss-style';
+export interface UploadClasses {
+    wrapper: string;
+    wrapperImage: string;
+    wrapperDisabled: string;
+    dropItem: string;
+    handler: string;
+    icon: string;
+    iconHover: string;
+    result: string;
+    resultText: string;
+    resultTextBody: string;
+    resultUploading: string;
+    resultSuccess: string;
+    resultTextFooter: string;
+    resultError: string;
+    resultDeleted: string;
+    resultClose: string;
+    resultStatusIcon: string;
+    imageHandler: string;
+    imageHandlerIcon: string;
+    imageBg: string;
+    imageResult: string;
+    imageResultMask: string;
+    imageResultMaskOperator: string;
+    imageResultLoading: string;
+    imageResultMaskInfo: string;
+    imageResultMaskShow: string;
+    imageResultTopBtn: string;
+    imageResultTip: string;
+    customImageBtn: string;
+    button: string;
+    buttonUploading: string;
+    buttonCover: string;
+    buttonBg: string;
+    buttonBgSpin: string;
+}
+export declare type UploadClassType = keyof UploadClasses;
+declare const uploadStyle: JsStyles<UploadClassType>;
+export default uploadStyle;