@daoyi/nmtl-ui 2.0.1-beta.45 → 2.0.1-beta.47

package/lib/components/Loading.js

@@ -1 +1,30 @@
-import e from"react";import{s as r,c as a}from"./vendor-851c6356.js";import{CircularProgress as t}from"@material-ui/core";import i from"prop-types";import"react-is";import"@material-ui/styles";import"react-dom";r(".loadingPage {\n  padding: 4rem 0;\n  color: #0087dc;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center; }\n");var o=function(r){var i=r.className;return e.createElement("div",{className:a("loadingPage",i)},e.createElement(t,{size:80}))};o.defaultProps={className:void 0},o.propTypes={className:i.string};export{o as default};
+import React__default from 'react';
+import { s as styleInject, c as classNames } from './vendor-851c6356.js';
+import { CircularProgress } from '@material-ui/core';
+import PropTypes from 'prop-types';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+
+var css_248z = ".loadingPage {\n  padding: 4rem 0;\n  color: #0087dc;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center; }\n";
+styleInject(css_248z);
+
+var Loading = function Loading(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('loadingPage', className)
+  }, /*#__PURE__*/React__default.createElement(CircularProgress, {
+    size: 80
+  }));
+};
+Loading.defaultProps = {
+  className: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+Loading.propTypes = {
+  /** Css Name */
+  className: PropTypes.string
+};
+
+export { Loading as default };

package/lib/components/MUITheme.js

@@ -1 +1,255 @@
-import o from"react";import r from"prop-types";import{s as e,Q as i,R as t}from"./vendor-851c6356.js";import{CssBaseline as n}from"@material-ui/core";import"react-is";import{ThemeProvider as a}from"@material-ui/styles";import"react-dom";var d=["Noto Sans TC","Microsoft JhengHei","sans-serif","-apple-system","BlinkMacSystemFont",'"Segoe UI"',"Roboto",'"Helvetica Neue"',"Arial","sans-serif",'"Apple Color Emoji"','"Segoe UI Emoji"','"Segoe UI Symbol"'];e('@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");\n');const p={primaryColor:"#0087dc",primaryColorFocus:"#339fe3",secondaryColor:"#ffc400"};var l=function(r){var e=r.children,l=r.themes,s=r.colors,u=r.darkMode,c=t((o=>{let{darkMode:r,colors:e}=o;const{primaryColor:t,secondaryColor:n}=e||p,a=r?"#8c8c8c":"#d9d9d9";return i({typography:{button:{textTransform:"none"},fontFamily:(d||[]).join(",")},palette:{type:r?"dark":"light",primary:{main:t},secondary:{main:n}},shape:{borderRadius:3},props:{MuiButton:{variant:"contained",color:"primary"},MuiSelect:{MenuProps:{anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"},getContentAnchorEl:null}},MuiTypography:{component:"span"}},overrides:{MuiPaper:{root:{background:"white",minWidth:300}},MuiSelect:{root:{padding:8}},MuiButton:{root:{padding:"4px 8px","&$outlined":{padding:"4px 8px"}}},MuiIconButton:{root:{padding:8}},MuiInput:{root:{width:"100%",border:`1px solid ${a}`,borderRadius:3,padding:"2px 8px 0"},underline:{"&::before":{display:"none"},"&::after":{display:"none"}}},MuiAutocomplete:{inputRoot:{paddingRight:"4px !important",backgroundColor:r?"#303030":"#fff","&:hover .MuiOutlinedInput-notchedOutline":{borderColor:t}},option:{textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden",display:"block",minHeight:"initial"},endAdornment:{display:"none"}},MuiChip:{root:{height:"28px",borderRadius:"2px",backgroundColor:r?"#595959":"#f5f5f5",border:"1px solid",borderColor:a}},MuiOutlinedInput:{root:{borderColor:a,"&.Mui-focused .MuiOutlinedInput-notchedOutline":{borderWidth:"1px",boxShadow:"0 0 0 2px rgb(24 144 255 / 20%)"},"&:hover .MuiOutlinedInput-notchedOutline":{borderColor:"#40a9ff"}},input:{padding:"4px 11px",fontSize:"14px",height:"24px",color:r?"#fff":"rgba(0, 0, 0, 0.85)"}},MuiListItemIcon:{root:{minWidth:"32px"}},MuiTableHead:{root:{background:"#fafafa"}},MuiTableContainer:{root:{boxShadow:"initial",border:"1px solid #e0e0e0",borderBottom:0}},MuiDialogTitle:{root:{padding:"0 4px 0 12px",background:t,color:"white"}},MuiDialogContent:{root:{padding:12,"&:first-child":"initial"}},MuiDialogActions:{root:{padding:12,borderTop:`1px solid ${a}`}}}})})({darkMode:u,colors:s}),l);return o.createElement(a,{theme:c},o.createElement(n,null),e)};l.defaultProps={children:void 0,themes:void 0,colors:void 0,darkMode:void 0},l.propTypes={children:r.node,themes:r.objectOf(r.any),colors:r.objectOf(r.any),darkMode:r.bool};export{l as default};
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { s as styleInject, Q as createTheme, R as merge_1 } from './vendor-851c6356.js';
+import { CssBaseline } from '@material-ui/core';
+import 'react-is';
+import { ThemeProvider } from '@material-ui/styles';
+import 'react-dom';
+
+var fonts = ['Noto Sans TC', 'Microsoft JhengHei', 'sans-serif', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'];
+
+var css_248z = "@import url(\"https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap\");\n";
+styleInject(css_248z);
+
+const defaultColors = {
+  primaryColor: '#0087dc',
+  primaryColorFocus: '#339fe3',
+  secondaryColor: '#ffc400'
+};
+
+// export const commonThemeProps = ({ darkMode, colors }) => {
+const commonTheme = _ref => {
+  let {
+    darkMode,
+    colors
+  } = _ref;
+  const {
+    primaryColor,
+    secondaryColor
+  } = colors || defaultColors;
+  const borderColor = darkMode ? '#8c8c8c' : '#d9d9d9';
+  return createTheme({
+    typography: {
+      button: {
+        textTransform: 'none'
+      },
+      fontFamily: (fonts || []).join(',')
+    },
+    palette: {
+      type: darkMode ? 'dark' : 'light',
+      primary: {
+        main: primaryColor
+      },
+      secondary: {
+        main: secondaryColor
+      }
+    },
+    shape: {
+      borderRadius: 3
+    },
+    props: {
+      MuiButton: {
+        variant: 'contained',
+        color: 'primary'
+      },
+      MuiSelect: {
+        // 讓下拉選單可以沿著Select下緣跳出
+        MenuProps: {
+          anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'left'
+          },
+          transformOrigin: {
+            vertical: 'top',
+            horizontal: 'left'
+          },
+          getContentAnchorEl: null
+        }
+      },
+      MuiTypography: {
+        component: 'span'
+      } // Typography component預設為<p>，但<p>裡面放<div>會報錯，所以Typography component統一換成<span>
+    },
+
+    overrides: {
+      MuiPaper: {
+        root: {
+          background: 'white',
+          minWidth: 300
+        }
+      },
+      MuiSelect: {
+        root: {
+          padding: 8
+        }
+      },
+      MuiButton: {
+        root: {
+          padding: '4px 8px',
+          '&$outlined': {
+            padding: '4px 8px'
+          }
+        }
+      },
+      MuiIconButton: {
+        root: {
+          padding: 8
+        }
+      },
+      // 原始12 有點太big了
+      MuiInput: {
+        root: {
+          width: '100%',
+          border: `1px solid ${borderColor}`,
+          borderRadius: 3,
+          padding: '2px 8px 0'
+        },
+        // Input 下方有一條line(MUI的) 換成border比較好看
+        underline: {
+          '&::before': {
+            display: 'none'
+          },
+          '&::after': {
+            display: 'none'
+          }
+        }
+      },
+      MuiAutocomplete: {
+        inputRoot: {
+          paddingRight: '4px !important',
+          backgroundColor: darkMode ? '#303030' : '#fff',
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: primaryColor
+          }
+        },
+        option: {
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          display: 'block',
+          minHeight: 'initial'
+        },
+        endAdornment: {
+          display: 'none'
+        }
+      },
+      MuiChip: {
+        root: {
+          height: '28px',
+          borderRadius: '2px',
+          backgroundColor: darkMode ? '#595959' : '#f5f5f5',
+          border: '1px solid',
+          borderColor
+        }
+      },
+      MuiOutlinedInput: {
+        root: {
+          borderColor,
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderWidth: '1px',
+            boxShadow: '0 0 0 2px rgb(24 144 255 / 20%)'
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#40a9ff'
+          }
+        },
+        input: {
+          padding: '4px 11px',
+          fontSize: '14px',
+          height: '24px',
+          color: darkMode ? '#fff' : 'rgba(0, 0, 0, 0.85)'
+        }
+      },
+      // 20211011 依照MUI設計 RadioButton的顏色就是secondaryColor (若使用primaryColor有可能會造成UI不顯眼)
+      // MuiRadio: {
+      // 	root: {
+      // 		'&.MuiIconButton-colorSecondary:hover': { backgroundColor: `${primaryColor}10 !important` },
+      // 		'&$checked': { color: `${primaryColor} !important` },
+      // 	},
+      // },
+      MuiListItemIcon: {
+        root: {
+          minWidth: '32px'
+        }
+      },
+      MuiTableHead: {
+        root: {
+          background: '#fafafa'
+        }
+      },
+      MuiTableContainer: {
+        root: {
+          boxShadow: 'initial',
+          border: '1px solid #e0e0e0',
+          borderBottom: 0
+        }
+      },
+      MuiDialogTitle: {
+        root: {
+          padding: '0 4px 0 12px',
+          background: primaryColor,
+          color: 'white'
+        }
+      },
+      MuiDialogContent: {
+        root: {
+          padding: 12,
+          '&:first-child': 'initial'
+        }
+      },
+      MuiDialogActions: {
+        root: {
+          padding: 12,
+          borderTop: `1px solid ${borderColor}`
+        }
+      }
+    }
+  });
+};
+
+var MUITheme = function MUITheme(_ref) {
+  var children = _ref.children,
+    themes = _ref.themes,
+    colors = _ref.colors,
+    darkMode = _ref.darkMode;
+  // theme 外部可以自行再注入
+  // commonTheme - 共用的主題(參考antd)
+  // 兩者合一
+  // const mergeTheme = createTheme(
+  // 	merge(
+  // 		commonThemeProps({ darkMode: darkMode === undefined ? useMediaQuery('(prefers-color-scheme: light)') : darkMode, colors }),
+  // 		themeProps
+  // 	)
+  // );
+
+  var mergeTheme = merge_1(
+  // commonTheme({ darkMode: darkMode === undefined ? useMediaQuery('(prefers-color-scheme: light)') : darkMode, colors }),
+  commonTheme({
+    darkMode: darkMode,
+    colors: colors
+  }), themes);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    theme: mergeTheme
+  }, /*#__PURE__*/React__default.createElement(CssBaseline, null), children);
+};
+MUITheme.defaultProps = {
+  children: undefined,
+  themes: undefined,
+  // themeProps: undefined,
+  colors: undefined,
+  darkMode: undefined
+};
+// /** 主題(請參考MUI) - Props */
+// themeProps: PropTypes.objectOf(PropTypes.any),
+MUITheme.propTypes = {
+  /** 內文 */
+  children: PropTypes.node,
+  /** 主題(請參考MUI) */
+  themes: PropTypes.objectOf(PropTypes.any),
+  /** 配色主色 */
+  colors: PropTypes.objectOf(PropTypes.any),
+  /** 暗黑模式是否開啟 */
+  darkMode: PropTypes.bool
+};
+
+export { MUITheme as default };

package/lib/components/Modal-a7591b98.js

@@ -1 +1,107 @@
-import e from"react";import{s as n,c as t}from"./vendor-851c6356.js";import o from"prop-types";import{Dialog as l,DialogTitle as a,IconButton as r,DialogContent as i,DialogActions as c,CircularProgress as s}from"@material-ui/core";import{CloseSharp as m}from"@material-ui/icons";import{B as d}from"./Button-63c7e9f3.js";import{S as p}from"./Spin-690a3597.js";n(".modal__title h2 {\n  display: flex;\n  align-items: center; }\n\n.modal__title__text {\n  flex: 1;\n  font-size: 16px;\n  padding: 8px 0;\n  color: white; }\n\n.modal__title__close {\n  cursor: pointer;\n  color: white; }\n\n.modal--transparent .MuiPaper-root {\n  background: transparent !important;\n  box-shadow: none; }\n\n.modal--transparent .modal__title {\n  background: transparent !important; }\n");var u=function(n){var o=n.className,u=n.title,f=n.children,_=n.footer,b=n.cancelText,v=n.okText,x=n.visible,g=n.onOk,k=n.onCancel,E=n.closable,h=n.loading,C=n.fullWidth,N=n.transparent,T=h&&e.createElement(s,{size:14});return e.createElement(l,{className:t("modal",{"modal--transparent":N},o),fullWidth:C,open:x||!1,onClose:function(){return E&&k()}},e.createElement(a,{className:"modal__title"},e.createElement("span",{className:"modal__title__text"},u),E&&e.createElement(r,{onClick:k},e.createElement(m,{className:"modal__title__close"}))),e.createElement(i,null,e.createElement(p,{spinning:h},f)),null!==_&&e.createElement(c,null,void 0===_&&(b||v)?e.createElement(e.Fragment,null,b&&e.createElement(d,{onClick:k,color:"default",endIcon:T,disabled:h},b),v&&e.createElement(d,{onClick:g,color:"primary",endIcon:T,disabled:h,autoFocus:!0},v)):_))};u.defaultProps={className:void 0,loading:void 0,transparent:void 0,closable:!0,title:void 0,children:void 0,fullWidth:void 0,footer:void 0,cancelText:"Cancel",okText:"Ok",visible:void 0,onOk:function(){},onCancel:function(){}},u.propTypes={className:o.string,loading:o.bool,transparent:o.bool,closable:o.bool,title:o.node,children:o.node,fullWidth:o.bool,footer:o.node,cancelText:o.string,okText:o.string,visible:o.bool,onOk:o.func,onCancel:o.func};export{u as M};
+import React__default from 'react';
+import { s as styleInject, c as classNames } from './vendor-851c6356.js';
+import PropTypes from 'prop-types';
+import { Dialog, DialogTitle, IconButton, DialogContent, DialogActions, CircularProgress } from '@material-ui/core';
+import { CloseSharp } from '@material-ui/icons';
+import { B as Button } from './Button-63c7e9f3.js';
+import { S as Spin } from './Spin-690a3597.js';
+
+var css_248z = ".modal__title h2 {\n  display: flex;\n  align-items: center; }\n\n.modal__title__text {\n  flex: 1;\n  font-size: 16px;\n  padding: 8px 0;\n  color: white; }\n\n.modal__title__close {\n  cursor: pointer;\n  color: white; }\n\n.modal--transparent .MuiPaper-root {\n  background: transparent !important;\n  box-shadow: none; }\n\n.modal--transparent .modal__title {\n  background: transparent !important; }\n";
+styleInject(css_248z);
+
+var Modal = function Modal(props) {
+  var className = props.className,
+    title = props.title,
+    children = props.children,
+    footer = props.footer,
+    cancelText = props.cancelText,
+    okText = props.okText,
+    visible = props.visible,
+    onOk = props.onOk,
+    onCancel = props.onCancel;
+  var closable = props.closable,
+    loading = props.loading,
+    fullWidth = props.fullWidth,
+    transparent = props.transparent;
+  var endIcon = loading && /*#__PURE__*/React__default.createElement(CircularProgress, {
+    size: 14
+  });
+  return /*#__PURE__*/React__default.createElement(Dialog, {
+    className: classNames('modal', {
+      'modal--transparent': transparent
+    }, className),
+    fullWidth: fullWidth,
+    open: visible || false,
+    onClose: function onClose() {
+      return closable && onCancel();
+    }
+  }, /*#__PURE__*/React__default.createElement(DialogTitle, {
+    className: "modal__title"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "modal__title__text"
+  }, title), closable && /*#__PURE__*/React__default.createElement(IconButton, {
+    onClick: onCancel
+  }, /*#__PURE__*/React__default.createElement(CloseSharp, {
+    className: "modal__title__close"
+  }))), /*#__PURE__*/React__default.createElement(DialogContent, null, /*#__PURE__*/React__default.createElement(Spin, {
+    spinning: loading
+  }, children)), footer !== null && /*#__PURE__*/React__default.createElement(DialogActions, null, footer === undefined && (cancelText || okText) ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, cancelText && /*#__PURE__*/React__default.createElement(Button, {
+    onClick: onCancel,
+    color: "default",
+    endIcon: endIcon,
+    disabled: loading
+  }, cancelText), okText && /*#__PURE__*/React__default.createElement(Button, {
+    onClick: onOk,
+    color: "primary",
+    endIcon: endIcon,
+    disabled: loading,
+    autoFocus: true
+  }, okText)) : footer));
+};
+Modal.defaultProps = {
+  className: undefined,
+  loading: undefined,
+  transparent: undefined,
+  closable: true,
+  title: undefined,
+  children: undefined,
+  fullWidth: undefined,
+  footer: undefined,
+  cancelText: 'Cancel',
+  okText: 'Ok',
+  visible: undefined,
+  onOk: function onOk() {},
+  onCancel: function onCancel() {}
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+Modal.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 是否正在載入中 */
+  loading: PropTypes.bool,
+  /** 是否正透明模式 */
+  transparent: PropTypes.bool,
+  /** 是否可以取消關閉(含close icon) */
+  closable: PropTypes.bool,
+  /** Modal Title */
+  title: PropTypes.node,
+  /** Modal 內容 */
+  children: PropTypes.node,
+  /** 版面是否滿版 */
+  fullWidth: PropTypes.bool,
+  /** Footer */
+  footer: PropTypes.node,
+  /** 取消文字 */
+  cancelText: PropTypes.string,
+  /** 確認文字 */
+  okText: PropTypes.string,
+  /** 是否出現 */
+  visible: PropTypes.bool,
+  /** 完成的callback */
+  onOk: PropTypes.func,
+  /** 關閉Modal */
+  onCancel: PropTypes.func
+};
+
+export { Modal as M };

package/lib/components/Modal.js

@@ -1 +1,11 @@
-export{M as default}from"./Modal-a7591b98.js";import"react";import"./vendor-851c6356.js";import"prop-types";import"react-is";import"@material-ui/styles";import"react-dom";import"@material-ui/core";import"@material-ui/icons";import"./Button-63c7e9f3.js";import"./Spin-690a3597.js";
+export { M as default } from './Modal-a7591b98.js';
+import 'react';
+import './vendor-851c6356.js';
+import 'prop-types';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+import '@material-ui/core';
+import '@material-ui/icons';
+import './Button-63c7e9f3.js';
+import './Spin-690a3597.js';

package/lib/components/MoreButton-f15ca38e.js

@@ -1 +1,109 @@
-import o from"react";import n from"prop-types";import{s as t,c as e}from"./vendor-851c6356.js";import{ExpandLess as r,ExpandMore as a}from"@material-ui/icons";t(".moreButton {\n  width: -moz-fit-content;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  position: relative;\n  margin: 1rem 0rem;\n  border-radius: 8px;\n  padding: 1rem 2.5rem;\n  -webkit-user-select: none;\n          user-select: none;\n  cursor: pointer; }\n  .moreButton__mask {\n    transition: all 0.3s ease-in-out;\n    position: absolute;\n    left: 0;\n    top: 0;\n    border-radius: 8px;\n    width: 100%;\n    height: 100%;\n    opacity: 0; }\n  .moreButton:hover .moreButton__mask {\n    opacity: 1; }\n  .moreButton--shadow {\n    transition: all 0.3s ease-in-out;\n    border: 3px solid #ffffff;\n    position: relative;\n    left: 0px;\n    top: 0px; }\n    .moreButton--shadow:hover {\n      box-shadow: initial !important;\n      left: 3px;\n      top: 3px; }\n  .moreButton--small {\n    border: 0;\n    padding: 0;\n    left: 0px !important;\n    top: 0px !important;\n    background: transparent !important;\n    box-shadow: initial !important; }\n    .moreButton--small .moreButton__mask {\n      opacity: 0 !important; }\n  .moreButton__icon {\n    display: flex;\n    z-index: 1; }\n    .moreButton__icon--small {\n      font-size: 1.5rem;\n      border-radius: 45px;\n      color: white !important; }\n  .moreButton__text {\n    z-index: 1;\n    font-size: 1.5rem;\n    line-height: 1.5rem;\n    transition: color 0.3s ease-in-out; }\n    .moreButton__text--small {\n      margin-left: 0.75rem;\n      font-size: 1.5rem;\n      color: #0c2a4d; }\n      .moreButton__text--small:hover {\n        text-decoration: underline; }\n");var i=function(n){var t=n.primaryColor,i=n.secondaryColor,m=n.shadowColor,s=n.small,l=n.enableShadow,c=n.customExpandIcon,d=n.expand,p=n.setExpand,u=n.onClick,x=n.formatMessage,f=s?d?"common.show.less":"common.show.more":"common.watch.more",_=s?d?o.createElement(r,{className:"moreButton__icon--small",style:{background:m||t}}):o.createElement(a,{className:"moreButton__icon--small",style:{background:m||t}}):c&&o.createElement("img",{src:c,alt:"more"});return o.createElement("div",{className:e("moreButton",{"moreButton--shadow":l},{"moreButton--small":s}),style:{color:m||"white",background:t,boxShadow:l?"3px 3px 0 0 ".concat(m):void 0},onClick:function(){p(!d),u()}},!l&&o.createElement("div",{className:"moreButton__mask",style:{background:i}}),o.createElement("div",{className:"moreButton__icon"},_),o.createElement("div",{className:e("moreButton__text",{"moreButton__text--small":s}),style:{color:s?m||t:void 0,marginLeft:_?"0.5rem":void 0}},x?x({id:f}):f))};i.defaultProps={primaryColor:"#271702",secondaryColor:"#aa8859",shadowColor:void 0,small:!1,enableShadow:!1,expand:!1,customExpandIcon:void 0,formatMessage:void 0,setExpand:function(){},onClick:function(){}},i.propTypes={primaryColor:n.string,secondaryColor:n.string,shadowColor:n.string,small:n.bool,enableShadow:n.bool,customExpandIcon:n.node,expand:n.bool,formatMessage:n.func,setExpand:n.func,onClick:n.func};export{i as M};
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { s as styleInject, c as classNames } from './vendor-851c6356.js';
+import { ExpandLess, ExpandMore } from '@material-ui/icons';
+
+var css_248z = ".moreButton {\n  width: -moz-fit-content;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  position: relative;\n  margin: 1rem 0rem;\n  border-radius: 8px;\n  padding: 1rem 2.5rem;\n  -webkit-user-select: none;\n          user-select: none;\n  cursor: pointer; }\n  .moreButton__mask {\n    transition: all 0.3s ease-in-out;\n    position: absolute;\n    left: 0;\n    top: 0;\n    border-radius: 8px;\n    width: 100%;\n    height: 100%;\n    opacity: 0; }\n  .moreButton:hover .moreButton__mask {\n    opacity: 1; }\n  .moreButton--shadow {\n    transition: all 0.3s ease-in-out;\n    border: 3px solid #ffffff;\n    position: relative;\n    left: 0px;\n    top: 0px; }\n    .moreButton--shadow:hover {\n      box-shadow: initial !important;\n      left: 3px;\n      top: 3px; }\n  .moreButton--small {\n    border: 0;\n    padding: 0;\n    left: 0px !important;\n    top: 0px !important;\n    background: transparent !important;\n    box-shadow: initial !important; }\n    .moreButton--small .moreButton__mask {\n      opacity: 0 !important; }\n  .moreButton__icon {\n    display: flex;\n    z-index: 1; }\n    .moreButton__icon--small {\n      font-size: 1.5rem;\n      border-radius: 45px;\n      color: white !important; }\n  .moreButton__text {\n    z-index: 1;\n    font-size: 1.5rem;\n    line-height: 1.5rem;\n    transition: color 0.3s ease-in-out; }\n    .moreButton__text--small {\n      margin-left: 0.75rem;\n      font-size: 1.5rem;\n      color: #0c2a4d; }\n      .moreButton__text--small:hover {\n        text-decoration: underline; }\n";
+styleInject(css_248z);
+
+var MoreButton = function MoreButton(props) {
+  var primaryColor = props.primaryColor,
+    secondaryColor = props.secondaryColor,
+    shadowColor = props.shadowColor;
+  var small = props.small,
+    enableShadow = props.enableShadow,
+    customExpandIcon = props.customExpandIcon;
+  var expand = props.expand,
+    setExpand = props.setExpand,
+    _onClick = props.onClick,
+    formatMessage = props.formatMessage;
+  var smallIcon = expand ? /*#__PURE__*/React__default.createElement(ExpandLess, {
+    className: "moreButton__icon--small",
+    style: {
+      background: shadowColor || primaryColor
+    }
+  }) : /*#__PURE__*/React__default.createElement(ExpandMore, {
+    className: "moreButton__icon--small",
+    style: {
+      background: shadowColor || primaryColor
+    }
+  });
+  var smallMessage = expand ? 'common.show.less' : 'common.show.more';
+  var message = small ? smallMessage : 'common.watch.more';
+  var largeIcon = customExpandIcon && /*#__PURE__*/React__default.createElement("img", {
+    src: customExpandIcon,
+    alt: "more"
+  });
+  var icon = small ? smallIcon : largeIcon;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('moreButton', {
+      'moreButton--shadow': enableShadow
+    }, {
+      'moreButton--small': small
+    }),
+    style: {
+      color: shadowColor || 'white',
+      background: primaryColor,
+      boxShadow: enableShadow ? "3px 3px 0 0 ".concat(shadowColor) : undefined
+    },
+    onClick: function onClick() {
+      setExpand(!expand);
+      _onClick();
+    }
+  }, !enableShadow && /*#__PURE__*/React__default.createElement("div", {
+    className: "moreButton__mask",
+    style: {
+      background: secondaryColor
+    }
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "moreButton__icon"
+  }, icon), /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('moreButton__text', {
+      'moreButton__text--small': small
+    }),
+    style: {
+      color: small ? shadowColor || primaryColor : undefined,
+      marginLeft: icon ? '0.5rem' : undefined
+    }
+  }, formatMessage ? formatMessage({
+    id: message
+  }) : message));
+};
+MoreButton.defaultProps = {
+  primaryColor: '#271702',
+  // default為文學網站的主色系
+  secondaryColor: '#aa8859',
+  // default為文學網站的次色系
+  shadowColor: undefined,
+  small: false,
+  enableShadow: false,
+  expand: false,
+  customExpandIcon: undefined,
+  formatMessage: undefined,
+  setExpand: function setExpand() {},
+  onClick: function onClick() {}
+};
+MoreButton.propTypes = {
+  /** 按鈕主色系顏色 */
+  primaryColor: PropTypes.string,
+  /** 按鈕次色系顏色 */
+  secondaryColor: PropTypes.string,
+  /** 按鈕影子顏色 */
+  shadowColor: PropTypes.string,
+  /** 展開是否為小圖示 */
+  small: PropTypes.bool,
+  /** 是否啟動陰影模式 */
+  enableShadow: PropTypes.bool,
+  /** 客製化自己的大圖標 */
+  customExpandIcon: PropTypes.node,
+  /** 是否展開(僅有在small=true作動) */
+  expand: PropTypes.bool,
+  /** 語系翻譯的formateMessag(useIntl) */
+  formatMessage: PropTypes.func,
+  /** 設定是否展開 */
+  setExpand: PropTypes.func,
+  /** 點擊的callback */
+  onClick: PropTypes.func
+};
+
+export { MoreButton as M };

package/lib/components/MoreButton.js

@@ -1 +1,8 @@
-export{M as default}from"./MoreButton-f15ca38e.js";import"react";import"prop-types";import"./vendor-851c6356.js";import"react-is";import"@material-ui/styles";import"react-dom";import"@material-ui/icons";
+export { M as default } from './MoreButton-f15ca38e.js';
+import 'react';
+import 'prop-types';
+import './vendor-851c6356.js';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+import '@material-ui/icons';

package/lib/components/Radio.js

@@ -1 +1,81 @@
-import{b as e}from"./_rollupPluginBabelHelpers-fde6d1c6.js";import a from"react";import o from"prop-types";import{RadioGroup as r,FormControlLabel as t,Radio as i}from"@material-ui/core";import{s as l}from"./vendor-851c6356.js";import"react-is";import"@material-ui/styles";import"react-dom";l("");var n=function(o){var l=o.className,n=o.name,s=o.defaultValue,m=o.value,u=o.size,d=o.style,c=o.direction,p=o.options,f=o.onChange;return a.createElement(r,{className:"radioGroup",style:e({flexDirection:c},d),name:n,defaultValue:s||void 0,value:m||void 0,onChange:function(e){f&&f(e.target.value)}},Array.isArray(p)&&p.map((function(e){return a.createElement(t,{value:e.value,key:e.value,control:a.createElement(i,{disabled:e.disabled||!1,size:u,className:l}),label:e.label})})))};n.defaultProps={className:void 0,name:void 0,defaultValue:void 0,value:void 0,size:"small",style:void 0,direction:"row",options:void 0,onChange:function(){}},n.propTypes={className:o.string,name:o.string,defaultValue:o.oneOfType([o.string,o.number]),value:o.oneOfType([o.string,o.number]),size:o.oneOf(["small","medium"]),style:o.objectOf(o.any),direction:o.oneOf(["row","column"]),options:o.arrayOf(o.any),onChange:o.func};export{n as default};
+import { b as _objectSpread2 } from './_rollupPluginBabelHelpers-fde6d1c6.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { RadioGroup, FormControlLabel, Radio as Radio$1 } from '@material-ui/core';
+import { s as styleInject } from './vendor-851c6356.js';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+
+var css_248z = "";
+styleInject(css_248z);
+
+var Radio = function Radio(props) {
+  var className = props.className,
+    name = props.name,
+    defaultValue = props.defaultValue,
+    value = props.value,
+    size = props.size,
+    style = props.style,
+    direction = props.direction; // Attributes
+  var options = props.options; // DataList
+  var _onChange = props.onChange; // Call Back functions
+
+  return /*#__PURE__*/React__default.createElement(RadioGroup, {
+    className: "radioGroup",
+    style: _objectSpread2({
+      flexDirection: direction
+    }, style),
+    name: name,
+    defaultValue: defaultValue || undefined,
+    value: value || undefined,
+    onChange: function onChange(event) {
+      if (_onChange) _onChange(event.target.value);
+    }
+  }, Array.isArray(options) && options.map(function (option) {
+    return /*#__PURE__*/React__default.createElement(FormControlLabel, {
+      value: option.value,
+      key: option.value,
+      control: /*#__PURE__*/React__default.createElement(Radio$1, {
+        disabled: option.disabled || false,
+        size: size,
+        className: className
+      }),
+      label: option.label
+    });
+  }));
+};
+Radio.defaultProps = {
+  className: undefined,
+  name: undefined,
+  defaultValue: undefined,
+  value: undefined,
+  size: 'small',
+  style: undefined,
+  direction: 'row',
+  options: undefined,
+  onChange: function onChange() {}
+};
+Radio.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 搭配FormControl 使用的名稱 */
+  name: PropTypes.string,
+  /** 預設內容 */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** 如果你就是好想要Value */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Radio的大小 */
+  // size: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium']),
+  /** 樣式 */
+  style: PropTypes.objectOf(PropTypes.any),
+  /** Radio的方向 */
+  direction: PropTypes.oneOf(['row', 'column']),
+  /** Radio的清單 */
+  options: PropTypes.arrayOf(PropTypes.any),
+  /** 選擇時的callback */
+  onChange: PropTypes.func
+};
+
+export { Radio as default };