@daoyi/nmtl-ui 2.0.1-beta.14 → 2.0.1-beta.141

package/lib/components/Modal-aa77d4d8.js

@@ -0,0 +1,171 @@
+import React__default, { useRef } from 'react';
+import { c as classNames } from './index-c33afcb5.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-8cf35bc0.js';
+import { S as Spin } from './Spin-07679812.js';
+import { getIntl } from './globalConfig';
+import { s as styleInject } from './style-inject.es-1f59c1d0.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: 1rem;\n  padding: 8px 0;\n  color: inherit;\n}\n.modal__title__close {\n  cursor: pointer;\n  color: inherit;\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);
+
+/* 每個 Modal 實例需要唯一 id，才能把標題和 role="dialog" 綁起來 */
+var modalSeq = 0;
+
+/* WCAG 2.4.3 對話框關閉後，焦點要回到開啟它的按鈕。MUI Dialog 會還給「開啟當下」的那個 DOM 元素，
+   但開啟期間若頁面資料才回來、版面重排，觸發按鈕會被換成新的元素（例：主站版本頁「我要補充資料」
+   依有無書影放在不同位置），舊元素已不在頁面上，焦點就掉回 body。
+   因此開啟時記下觸發元素的特徵，關閉後若舊元素已脫離頁面，找特徵相同且看得到的元素補還焦點。 */
+var describeTrigger = function describeTrigger(el) {
+  if (!el || el === document.body || el === document.documentElement) return null;
+  return {
+    el: el,
+    tag: el.tagName,
+    label: el.getAttribute('aria-label'),
+    text: (el.textContent || '').trim()
+  };
+};
+var findTrigger = function findTrigger(trigger) {
+  if (!trigger) return null;
+  if (trigger.el.isConnected) return trigger.el;
+  var candidates = Array.from(document.getElementsByTagName(trigger.tag));
+  return candidates.find(function (el) {
+    return el.offsetParent !== null && el.getAttribute('aria-label') === trigger.label && (el.textContent || '').trim() === trigger.text;
+  }) || null;
+};
+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
+  });
+
+  /* WCAG 4.1.2 對話框需有可及名稱。MUI Dialog 只把 aria-labelledby 轉給
+     role="dialog" 的那層 Paper；aria-label 會被歸進 ...other 掛到外層 Modal
+     容器上，讀屏開啟時等於沒名字，故改用 aria-labelledby 指向標題文字。 */
+  var titleIdRef = useRef(null);
+  if (!titleIdRef.current) {
+    modalSeq += 1;
+    titleIdRef.current = "nmtl-modal-".concat(modalSeq, "-title");
+  }
+  var titleId = titleIdRef.current;
+
+  /* 在 render 階段（MUI 把焦點移進對話框之前）記下觸發元素 */
+  var triggerRef = useRef(null);
+  var wasVisibleRef = useRef(false);
+  if (visible && !wasVisibleRef.current && typeof document !== 'undefined') {
+    triggerRef.current = describeTrigger(document.activeElement);
+  }
+  wasVisibleRef.current = Boolean(visible);
+
+  /* onExited 觸發時對話框還沒卸載、焦點仍在對話框內；等下一輪卸載後再判斷焦點是否掉回 body */
+  var restoreFocus = function restoreFocus() {
+    setTimeout(function () {
+      var active = document.activeElement;
+      /* MUI 已成功還原（焦點不在 body）就不動 */
+      if (active && active !== document.body) return;
+      var target = findTrigger(triggerRef.current);
+      if (target) target.focus();
+    }, 0);
+  };
+  return /*#__PURE__*/React__default.createElement(Dialog, {
+    className: classNames('modal', {
+      'modal--transparent': transparent
+    }, className),
+    fullWidth: fullWidth,
+    open: visible || false,
+    onClose: function onClose() {
+      return closable && onCancel();
+    },
+    "aria-labelledby": title ? titleId : undefined,
+    TransitionProps: {
+      onExited: restoreFocus
+    }
+  }, /*#__PURE__*/React__default.createElement(DialogTitle, {
+    className: "modal__title"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    id: titleId,
+    className: "modal__title__text"
+  }, title), closable && /*#__PURE__*/React__default.createElement(IconButton, {
+    autoFocus: true,
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.modal.close'
+    }),
+    onClick: onCancel
+  }, /*#__PURE__*/React__default.createElement(CloseSharp, {
+    className: "modal__title__close",
+    "aria-hidden": "true"
+  }))), /*#__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
+  }, 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 @@
-import e from"react";import{c as n}from"./index-b2745105.js";import t from"prop-types";import{Dialog as o,DialogTitle as l,IconButton as a,DialogContent as r,DialogActions as i,CircularProgress as c}from"@material-ui/core";import{CloseSharp as s}from"@material-ui/icons";import m from"./Button.js";import d from"./Spin.js";import{s as p}from"./style-inject.es-1f59c1d0.js";p(".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 f=function(t){var p=t.className,f=t.title,u=t.children,_=t.footer,b=t.cancelText,x=t.okText,v=t.visible,g=t.onOk,k=t.onCancel,E=t.closable,h=t.loading,C=t.fullWidth,N=t.transparent,T=h&&e.createElement(c,{size:14});return e.createElement(o,{className:n("modal",{"modal--transparent":N},p),fullWidth:C,open:v||!1,onClose:function(){return E&&k()}},e.createElement(l,{className:"modal__title"},e.createElement("span",{className:"modal__title__text"},f),E&&e.createElement(a,{onClick:k},e.createElement(s,{className:"modal__title__close"}))),e.createElement(r,null,e.createElement(d,{spinning:h},u)),null!==_&&e.createElement(i,null,void 0===_&&(b||x)?e.createElement(e.Fragment,null,b&&e.createElement(m,{onClick:k,color:"default",endIcon:T,disabled:h},b),x&&e.createElement(m,{onClick:g,color:"primary",endIcon:T,disabled:h,autoFocus:!0},x)):_))};f.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(){}},f.propTypes={className:t.string,loading:t.bool,transparent:t.bool,closable:t.bool,title:t.node,children:t.node,fullWidth:t.bool,footer:t.node,cancelText:t.string,okText:t.string,visible:t.bool,onOk:t.func,onCancel:t.func};export{f as default};
+export { M as default } from './Modal-aa77d4d8.js';
+import 'react';
+import './index-c33afcb5.js';
+import 'prop-types';
+import '@material-ui/core';
+import '@material-ui/icons';
+import './Button-8cf35bc0.js';
+import './_rollupPluginBabelHelpers-a52356f6.js';
+import './style-inject.es-1f59c1d0.js';
+import './Spin-07679812.js';
+import './globalConfig';

package/lib/components/MoreButton-0b5aaef3.js

@@ -0,0 +1,148 @@
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-c33afcb5.js';
+import { ExpandLess, ExpandMore } from '@material-ui/icons';
+import { getIntl } from './globalConfig';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+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}\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}\n.moreButton:hover .moreButton__mask {\n  opacity: 1;\n}\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}\n.moreButton--shadow:hover {\n  box-shadow: initial !important;\n  left: 3px;\n  top: 3px;\n}\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}\n.moreButton--small .moreButton__mask {\n  opacity: 0 !important;\n}\n.moreButton__icon {\n  display: flex;\n  z-index: 1;\n}\n.moreButton__icon--small {\n  font-size: 1.5rem;\n  border-radius: 45px;\n  color: white !important;\n}\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}\n.moreButton__text--small {\n  margin-left: 0.75rem;\n  font-size: 1.5rem;\n  color: #0c2a4d;\n}\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;
+  /* WCAG 4.1.3 點選後結果在原頁面更新，需播報（實測回饋 R9） */
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    liveMessage = _useState2[0],
+    setLiveMessage = _useState2[1];
+  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: "",
+    "aria-hidden": "true"
+  });
+  var icon = small ? smallIcon : largeIcon;
+  var handleAction = function handleAction() {
+    setExpand(!expand);
+    onClick();
+    setLiveMessage(getIntl().formatMessage({
+      id: expand ? 'aria.moreButton.collapsed' : 'aria.moreButton.loaded'
+    }));
+    setTimeout(function () {
+      return setLiveMessage('');
+    }, 3000);
+  };
+  var messageText = formatMessage ? formatMessage({
+    id: message
+  }) : message;
+  return (
+    /*#__PURE__*/
+    /* WCAG 2.1.1/4.1.2 看更多為互動元件：role="button" + tabIndex + 鍵盤操作，
+       報讀補「點選後載入更多結果」預先提示、aria-expanded 表達展開狀態 */
+    React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      role: "status",
+      className: "visually-hidden"
+    }, liveMessage), /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('moreButton', {
+        'moreButton--shadow': enableShadow
+      }, {
+        'moreButton--small': small
+      }),
+      role: "button",
+      tabIndex: 0,
+      "aria-expanded": expand,
+      "aria-label": "".concat(messageText).concat(getIntl().formatMessage({
+        id: expand ? 'aria.moreButton.hintCollapse' : 'aria.moreButton.hint'
+      })),
+      style: {
+        color: shadowColor || 'white',
+        background: primaryColor,
+        boxShadow: enableShadow ? "3px 3px 0 0 ".concat(shadowColor) : undefined
+      },
+      onClick: handleAction,
+      onKeyDown: function onKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          handleAction();
+        }
+      }
+    }, !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
+      }
+    }, messageText)))
+  );
+};
+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 @@
-import o from"react";import n from"prop-types";import{c as t}from"./index-11391ca3.js";import{ExpandLess as e,ExpandMore as r}from"@material-ui/icons";import{s as a}from"./style-inject.es-c875d022.js";a(".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");const s=n=>{const{primaryColor:a,secondaryColor:s,shadowColor:m}=n,{small:i,enableShadow:l,customExpandIcon:c}=n,{expand:d,setExpand:p,onClick:u,formatMessage:x}=n,f=i?d?"common.show.less":"common.show.more":"common.watch.more",_=i?d?o.createElement(e,{className:"moreButton__icon--small",style:{background:m||a}}):o.createElement(r,{className:"moreButton__icon--small",style:{background:m||a}}):c&&o.createElement("img",{src:c,alt:"more"});return o.createElement("div",{className:t("moreButton",{"moreButton--shadow":l},{"moreButton--small":i}),style:{color:m||"white",background:a,boxShadow:l?`3px 3px 0 0 ${m}`:void 0},onClick:()=>{p(!d),u()}},!l&&o.createElement("div",{className:"moreButton__mask",style:{background:s}}),o.createElement("div",{className:"moreButton__icon"},_),o.createElement("div",{className:t("moreButton__text",{"moreButton__text--small":i}),style:{color:i?m||a:void 0,marginLeft:_?"0.5rem":void 0}},x?x({id:f}):f))};s.defaultProps={primaryColor:"#271702",secondaryColor:"#aa8859",shadowColor:void 0,small:!1,enableShadow:!1,expand:!1,customExpandIcon:void 0,formatMessage:void 0,setExpand:()=>{},onClick:()=>{}},s.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{s as default};
+export { M as default } from './MoreButton-0b5aaef3.js';
+import './_rollupPluginBabelHelpers-a52356f6.js';
+import 'react';
+import 'prop-types';
+import './index-c33afcb5.js';
+import '@material-ui/icons';
+import './globalConfig';
+import './style-inject.es-1f59c1d0.js';