shineout 3.6.0-beta.24 → 3.6.0-beta.26

package/cjs/index.js

@@ -514,5 +514,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 此文件由脚本自动生成，请勿直接修改。
 // This file was generated automatically by a script. Please do not modify it directly.
 var _default = exports.default = {
-  version: '3.6.0-beta.24'
+  version: '3.6.0-beta.26'
 };

package/cjs/upload/dragger.d.ts

@@ -0,0 +1,3 @@
+import { UploadDraggerProps } from './dragger.type';
+declare const BaseUploadDragger: <T>(props: UploadDraggerProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default BaseUploadDragger;

package/cjs/upload/dragger.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _base = require("@sheinx/base");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _jsxRuntime = require("react/jsx-runtime");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var jssStyle = {
+  upload: _shineoutStyle.useUploadStyle
+};
+var BaseUploadDragger = function BaseUploadDragger(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.UploadDragger, _objectSpread({
+    jssStyle: jssStyle
+  }, props));
+};
+var _default = exports.default = BaseUploadDragger;

package/cjs/upload/dragger.type.d.ts

@@ -0,0 +1,2 @@
+import { UploadDraggerProps as UnStyledUploadDraggerProps } from '@sheinx/base';
+export type UploadDraggerProps<T> = UnStyledUploadDraggerProps<T>;

package/cjs/upload/dragger.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/upload/index.d.ts

@@ -1,13 +1,16 @@
 import Upload from './upload';
 import UploadImage from './image';
 import UploadButton from './button';
+import UploadDragger from './dragger';
 type RefUpload = typeof Upload;
 type RefUploadImage = typeof UploadImage;
 type RefUploadButton = typeof UploadButton;
+type RefUploadDragger = typeof UploadDragger;
 export interface UploadComponent extends RefUpload {
     displayName: string;
     Image: UploadImageComponent;
     Button: UploadButtonComponent;
+    Dragger: UploadDraggerComponent;
 }
 export interface UploadImageComponent extends RefUploadImage {
     displayName: string;
@@ -15,5 +18,8 @@ export interface UploadImageComponent extends RefUploadImage {
 export interface UploadButtonComponent extends RefUploadButton {
     displayName: string;
 }
+export interface UploadDraggerComponent extends RefUploadDragger {
+    displayName: string;
+}
 declare const UploadComp: UploadComponent;
 export default UploadComp;

package/cjs/upload/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _upload = _interopRequireDefault(require("./upload"));
 var _image = _interopRequireDefault(require("./image"));
 var _button = _interopRequireDefault(require("./button"));
+var _dragger = _interopRequireDefault(require("./dragger"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var UploadImageComp = _image.default;
 UploadImageComp.displayName = 'ShineoutUploadImage';
@@ -15,6 +16,9 @@ var UploadButtonComp = _button.default;
 UploadButtonComp.displayName = 'ShineoutUploadButton';
 var UploadComp = _upload.default;
 UploadComp.displayName = 'ShineoutUpload';
+var UploadDraggerComp = _dragger.default;
+UploadDraggerComp.displayName = 'ShineoutUploadDragger';
 UploadComp.Image = UploadImageComp;
 UploadComp.Button = UploadButtonComp;
+UploadComp.Dragger = UploadDraggerComp;
 var _default = exports.default = UploadComp;

package/cjs/upload/interface.d.ts

@@ -1,3 +1,4 @@
 export type { UploadProps as Props, Validator } from './upload.type';
 export type { UploadImageProps as ImageProps } from './image.type';
+export type { UploadDraggerProps as DraggerProps } from './dragger.type';
 export type { UploadOptions as Options } from '@sheinx/hooks';

package/dist/shineout.js

@@ -12136,7 +12136,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.6.0-beta.24');
+/* harmony default export */ var version = ('3.6.0-beta.26');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -16050,6 +16050,22 @@ var ButtonStyle = {
     },
     '&:active': {
       transition: 'none'
+    },
+    '[data-soui-role="input-group-seperate"] > &': {
+      borderRadius: 0,
+      marginLeft: -1,
+      '&:first-child': {
+        marginLeft: 0,
+        borderTopLeftRadius: src.buttonBorderRadius,
+        borderBottomLeftRadius: src.buttonBorderRadius
+      },
+      '&:last-child': {
+        borderTopRightRadius: src.buttonBorderRadius,
+        borderBottomRightRadius: src.buttonBorderRadius
+      },
+      '&:hover': {
+        zIndex: 1
+      }
     }
   },
   small: {
@@ -16910,6 +16926,7 @@ var useCarouselStyle = styled(carousel_carousel, 'carousel');
     verticalAlign: 'top',
     transition: "border-color .15s ease-in-out,box-shadow .15s ease-in-out;",
     '&:hover': defineProperty_default()({
+      zIndex: 1,
       borderColor: token.hoverBorderColor
     }, "&:not($".concat(name, "Disabled):not($").concat(name, "Error)"), {
       backgroundColor: token.hoverBackgroundColor
@@ -16919,11 +16936,34 @@ var useCarouselStyle = styled(carousel_carousel, 'carousel');
       borderRadius: 0,
       boxShadow: 'none',
       backgroundColor: 'transparent',
-      flex: 1,
+      // flex: 1,
       minWidth: 0
     },
     '[data-soui-role="input-group"] [data-soui-input-border] + &': {
       borderLeftWidth: '1px'
+    },
+    '[data-soui-role="input-group-seperate"] &&&, [data-soui-role="input-group-seperate"] &&&:hover': {
+      borderRadius: 0,
+      flexShrink: 0,
+      width: 'auto',
+      'margin-left': "-1px",
+      '&:first-child': {
+        marginLeft: 0,
+        borderTopLeftRadius: token.borderRadius,
+        borderBottomLeftRadius: token.borderRadius
+      },
+      '&:last-child': {
+        borderTopRightRadius: token.borderRadius,
+        borderBottomRightRadius: token.borderRadius
+      }
+    },
+    '[dir=rtl][data-soui-role="input-group-seperate"] &&&, [dir=rtl][data-soui-role="input-group-seperate"] &&&:hover': {
+      '&:first-child': {
+        borderRadius: "0 ".concat(token.borderRadius, " ").concat(token.borderRadius, " 0")
+      },
+      '&:last-child': {
+        borderRadius: "".concat(token.borderRadius, " 0 0 ").concat(token.borderRadius)
+      }
     }
   }), "".concat(name, "PaddingBox"), defineProperty_default()(defineProperty_default()(defineProperty_default()({
     borderRadius: token.borderRadius
@@ -16965,6 +17005,12 @@ var useCarouselStyle = styled(carousel_carousel, 'carousel');
     borderColor: token.focusBorderColor,
     boxShadow: "0 0 0 2px ".concat(token.focusShadow),
     background: token.focusBackgroundColor,
+    '&[data-soui-role="input-group-seperate"]': {
+      boxShadow: 'none'
+    },
+    '[data-soui-role="input-group-seperate"] &': {
+      zIndex: 1
+    },
     '&:hover': {
       borderColor: token.focusBorderColor
     }
@@ -20296,6 +20342,13 @@ var input_input = objectSpread2_default()(objectSpread2_default()(objectSpread2_
       background: 'transparent'
     }
   }, groupSpace(src.inputPaddingX)),
+  groupSeperate: {
+    border: 'none',
+    '& > b': {
+      border: "1px solid ".concat(src.inputBorderColor),
+      'margin-left': '-1px'
+    }
+  },
   groupSmall: objectSpread2_default()(objectSpread2_default()({}, groupSmall), groupSpace(src.inputSmallPaddingX)),
   groupLarge: objectSpread2_default()(objectSpread2_default()({}, groupLarge), groupSpace(src.inputLargePaddingX))
 }, resetGroup), {}, {
@@ -22177,13 +22230,11 @@ var popoverStyle = {
       }
     },
     '&[data-soui-position^="left"]': {
-      // '&[dir=ltr]': { marginLeft: (arrowGap - 2) * -1 },
       '&[dir=ltr]': {
-        marginLeft: "calc((".concat(hideArrowGap, " - 2px) * -1)")
+        marginRight: "calc((".concat(hideArrowGap, " - 2px))")
       },
-      // '&[dir=rtl]': { marginRight: (arrowGap - 2) * -1 },
       '&[dir=rtl]': {
-        marginRight: "calc((".concat(hideArrowGap, " - 2px) * -1)")
+        marginLeft: "calc((".concat(hideArrowGap, " - 2px))")
       },
       '& $arrow': {
         right: src.popoverBorderWidth,
@@ -22193,7 +22244,6 @@ var popoverStyle = {
         margin: 'auto'
       },
       '&::after': {
-        // left: arrowGap * -1,
         right: "calc(".concat(hideArrowGap, " * -1)"),
         top: '0',
         bottom: '0',
@@ -22204,11 +22254,9 @@ var popoverStyle = {
       }
     },
     '&[data-soui-position^="right"]': {
-      // '&[dir=ltr]': { marginLeft: arrowGap - 2 },
       '&[dir=ltr]': {
         marginLeft: "calc(".concat(hideArrowGap, " - 2px)")
       },
-      // '&[dir=rtl]': { marginRight: arrowGap - 2 },
       '&[dir=rtl]': {
         marginRight: "calc(".concat(hideArrowGap, " - 2px)")
       },
@@ -27324,13 +27372,13 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({
     },
     '&[data-soui-position^="left"]': {
       '&[dir=ltr]': {
-        marginLeft: -(arrowGap - 2),
+        marginRight: arrowGap - 2,
         '& $arrow': {
           transform: 'translateX(11px) rotate(90deg)'
         }
       },
       '&[dir=rtl]': {
-        marginRight: -(arrowGap - 2),
+        'margin-right': arrowGap - 2,
         '& $arrow': {
           left: 0,
           transform: 'translateX(11px) rotate(90deg)'
@@ -27394,7 +27442,7 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({
         width: arrowGap,
         height: '100%',
         top: 0,
-        right: 0,
+        left: 0,
         transform: 'translateX(-100%)'
       }
     }
@@ -28497,6 +28545,39 @@ var uploadStyle = {
     }
   },
   wrapperDrop: {},
+  draggerWrapper: {
+    display: 'block',
+    width: '100%'
+  },
+  draggerArea: {
+    position: 'relative',
+    padding: 16,
+    width: '100%',
+    height: '100%',
+    textAlign: 'center',
+    backgroundColor: src.uploadImageHandlerBackgroundColor,
+    borderRadius: src.uploadImageBorderRadius,
+    cursor: 'pointer',
+    color: src.uploadImageHandlerFontColor,
+    // after
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      top: -1,
+      right: -1,
+      bottom: -1,
+      left: -1,
+      borderRadius: src.uploadImageBorderRadius,
+      border: "1px dashed ".concat(src.uploadImageHandlerBorderColor),
+      transition: 'border-color 0.3s'
+    },
+    // hover
+    '&:hover': {
+      '&:after': {
+        borderColor: src.uploadImageHandlerHoverBorderColor
+      }
+    }
+  },
   handler: {
     display: 'inline-block',
     cursor: 'pointer',
@@ -30387,10 +30468,12 @@ var usePositionStyle = function usePositionStyle(config) {
       }
       if (_h === 'right') {
         style.left = rect.right - containerRect.left + containerScroll.left + popupGap;
+        arrayStyle.left = '0px';
+        arrayStyle.right = 'auto';
       } else {
-        style.left = rect.left - containerRect.left + containerScroll.left - popupGap;
-        arrayStyle.right = "0px";
-        style.transform += ' translateX(-100%)';
+        style.right = containerRect.right - rect.left;
+        arrayStyle.right = '0px';
+        arrayStyle.left = 'auto';
       }
     } else if (position === 'cover') {
       style.top = rect.top - containerRect.top + containerScroll.top;
@@ -31095,7 +31178,7 @@ var useContainer = function useContainer() {
     if (!is_isBrowser()) return null;
     if (!context.element) {
       context.element = document.createElement('div');
-      context.element.setAttribute('style', ' position: absolute; top: 0px; left: 0px; width: 100% ');
+      context.element.setAttribute('style', 'position: absolute; top: 0px; left: 0px; width: 100%;');
     }
     var rootContainer = getRootContainer(props);
     if (rootContainer && context.element.parentElement !== rootContainer) {
@@ -51858,9 +51941,9 @@ var input_input_Input = function Input(props) {
     className = props.className,
     width = props.width,
     style = props.style;
-  var rootClass = classnames_default()(className, inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.group, size === 'small' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupSmall), size === 'large' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupLarge), !!disabled && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupDisabled), !!focus && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupFocus), (status === 'error' || error) && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupError));
+  var rootClass = classnames_default()(className, inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.group, props.seperate && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupSeperate), size === 'small' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupSmall), size === 'large' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupLarge), !!disabled && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupDisabled), !!focus && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupFocus), (status === 'error' || error) && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupError));
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", objectSpread2_default()(objectSpread2_default()({}, getDataAttribute({
-    role: 'input-group'
+    role: props.seperate ? 'input-group-seperate' : 'input-group'
   })), {}, {
     className: rootClass,
     style: objectSpread2_default()({
@@ -67032,18 +67115,70 @@ var BaseUploadButton = function BaseUploadButton(props) {
   });
   return use_field_common(objectSpread2_default()(objectSpread2_default()({}, props), customProps), BaseUploadButton);
 });
+;// CONCATENATED MODULE: ../base/src/upload/dragger.tsx
+
+
+var Dragger = function Dragger(props) {
+  var _jssStyle$upload;
+  var children = props.children,
+    multiple = props.multiple,
+    addFile = props.addFile,
+    accept = props.accept,
+    disabled = props.disabled,
+    jssStyle = props.jssStyle,
+    _props$limit = props.limit,
+    limit = _props$limit === void 0 ? 100 : _props$limit;
+  var uploadClasses = jssStyle === null || jssStyle === void 0 || (_jssStyle$upload = jssStyle.upload) === null || _jssStyle$upload === void 0 ? void 0 : _jssStyle$upload.call(jssStyle);
+  var handleDrop = function handleDrop(files) {
+    addFile === null || addFile === void 0 || addFile({
+      files: files,
+      fromDragger: true
+    });
+  };
+  return /*#__PURE__*/(0,jsx_runtime.jsx)(upload_drop, {
+    drop: true,
+    className: uploadClasses === null || uploadClasses === void 0 ? void 0 : uploadClasses.draggerWrapper,
+    accept: accept,
+    disabled: disabled,
+    multiple: multiple || limit > 1,
+    onDrop: handleDrop,
+    children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      className: uploadClasses === null || uploadClasses === void 0 ? void 0 : uploadClasses.draggerArea,
+      children: children
+    })
+  });
+};
+/* harmony default export */ var dragger = (Dragger);
+;// CONCATENATED MODULE: ./src/upload/dragger.tsx
+
+
+
+
+var dragger_jssStyle = {
+  upload: useUploadStyle
+};
+var BaseUploadDragger = function BaseUploadDragger(props) {
+  return /*#__PURE__*/(0,jsx_runtime.jsx)(dragger, objectSpread2_default()({
+    jssStyle: dragger_jssStyle
+  }, props));
+};
+/* harmony default export */ var upload_dragger = (BaseUploadDragger);
 ;// CONCATENATED MODULE: ./src/upload/index.ts
 
 
 
+
 var UploadImageComp = src_upload_image;
 UploadImageComp.displayName = 'ShineoutUploadImage';
 var UploadButtonComp = src_upload_button;
 UploadButtonComp.displayName = 'ShineoutUploadButton';
 var UploadComp = src_upload_upload_0;
 UploadComp.displayName = 'ShineoutUpload';
+var UploadDraggerComp = upload_dragger;
+UploadDraggerComp.displayName = 'ShineoutUploadDragger';
 UploadComp.Image = UploadImageComp;
 UploadComp.Button = UploadButtonComp;
+UploadComp.Dragger = UploadDraggerComp;
 /* harmony default export */ var src_upload_0 = (UploadComp);
 ;// CONCATENATED MODULE: ../theme/src/hooks/useToken/use-token.ts
 
@@ -69374,7 +69509,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.6.0-beta.24'
+  version: '3.6.0-beta.26'
 });
 }();
 /******/ 	return __webpack_exports__;