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

package/lib/components/Drawer-b770014f.js

@@ -0,0 +1,247 @@
+import { _ as _extends, a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { List, ListItem, ListItemIcon, ListItemText, IconButton, Drawer as Drawer$1, Divider } from '@material-ui/core';
+import { DehazeRounded, CloseRounded } from '@material-ui/icons';
+import { S as Select } from './Select-979f7e73.js';
+import { S as SegmentedControl } from './SegmentedControl-804da0a6.js';
+import { useRouteMatch, NavLink } from 'react-router-dom';
+import { getIntl } from './globalConfig';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var defaultSupportLanguage = [
+// { value: 'en', label: 'English' },
+{
+  value: 'zh-tw',
+  label: '繁體中文'
+}
+// { value: 'zh-cn', label: '簡體中文' },
+];
+
+/* [檢查-語系]本系統是否支援該語系 並回傳語系 */
+var checkLanguageSupport = function checkLanguageSupport(_ref) {
+  var language = _ref.language,
+    supportLanguages = _ref.supportLanguages;
+  var isSupport = supportLanguages.some(function (_ref2) {
+    var value = _ref2.value;
+    return value === language;
+  });
+  return isSupport ? language : supportLanguages[0].value;
+};
+
+/* 抽屜內的主選單：與桌機頁首一致用真連結（可長按另開、讀屏唸「連結」）。
+ * 保留 MUI List／ListItem／ListItemText 結構：各站以主題或 app.scss 覆蓋了這些 class
+ * （ada 的 MuiList 深底白字、tahl 的 hover 色），換成自訂標記會讓那些樣式失效。
+ * - ListItem 以 NavLink 渲染成 <a href>；目前所在頁由 NavLink 自動加 aria-current="page"，
+ *   並掛上 Mui-selected（沿用各站既有的選中底色）與 drawer__link--active（左側色條＋粗體）
+ * - ButtonBase 對非 <button> 元件會補 role="button"，須明確清掉，否則讀屏仍唸成按鈕 */
+const DrawerList = _ref => {
+  let {
+    drawerList,
+    setOpen
+  } = _ref;
+  const {
+    url
+  } = useRouteMatch();
+  return /*#__PURE__*/React__default.createElement("nav", null, /*#__PURE__*/React__default.createElement(List, {
+    className: "drawer__list"
+  }, Array.isArray(drawerList) && drawerList.map((_ref2, index) => {
+    let {
+      name,
+      icon,
+      path = ''
+    } = _ref2;
+    const internalProps = {
+      component: NavLink,
+      to: `${url}${path}`,
+      /* 不沿用 Mui-selected：各站的選中底色是為其他清單調的，套到抽屜會與文字色衝突
+         （ocean 白字配淺藍底只有 1.78:1）。選中樣式一律由 drawer__link--active 決定 */
+      activeClassName: 'drawer__link--active'
+    };
+    /* 外部連結比照桌機頁首另開新視窗，並預先提示（WCAG 3.2.2） */
+    const externalProps = {
+      component: 'a',
+      href: path,
+      target: '_blank',
+      rel: 'noopener noreferrer',
+      'aria-label': `${name}${getIntl().formatMessage({
+        id: 'aria.newWindow'
+      })}`
+    };
+    const linkProps = path.indexOf('http') > -1 ? externalProps : internalProps;
+    return /*#__PURE__*/React__default.createElement("li", {
+      key: index.toString()
+    }, /*#__PURE__*/React__default.createElement(ListItem, _extends({
+      button: true,
+      className: "drawer__link",
+      role: undefined,
+      onClick: () => setOpen(false)
+    }, linkProps), icon && /*#__PURE__*/React__default.createElement(ListItemIcon, {
+      style: {
+        marginRight: 24
+      }
+    }, icon), /*#__PURE__*/React__default.createElement(ListItemText, {
+      primary: name
+    })));
+  })));
+};
+DrawerList.defaultProps = {};
+DrawerList.propTypes = {
+  drawerList: PropTypes.arrayOf(PropTypes.any).isRequired,
+  setOpen: PropTypes.func.isRequired
+};
+
+var css_248z = "@charset \"UTF-8\";\n/* 抽屜內容統一靠左對齊在同一條線上（選單文字、工具區標籤都從 1.5rem 起排） */\n.drawer {\n  /* 兩層 class 提高權重，蓋過 MUI 主題注入的 .MuiIconButton-root */\n  /* ListItem（渲染成 <a>）。hover／選中底色沿用 MUI 與各站主題的 MuiListItem、Mui-selected 設定 */\n  /* 目前所在頁的淡底：取文字色加 8% 透明度疊在原本的底色上，\n     深淺底、各站自訂色都不會讓文字對比變差（不像各站的 Mui-selected 底色會衝突） */\n  /* 目前所在頁：左側色條＋粗體，不只靠底色（WCAG 1.4.1）。\n     色條畫在文字元素上取 currentColor：各站常以 !important 改抽屜文字色（ada 白字、tahl 藍綠），\n     色條才會與文字同色；ListItem 本身是 position:relative，色條貼齊整列左緣 */\n  /* 語系超過 3 種時退回下拉：撐滿工具區寬度 */\n}\n.drawer__icon {\n  display: none !important;\n}\n.drawer__paper {\n  width: 20rem;\n  max-width: 90vw;\n  /* 開啟時 MUI 把焦點放在紙面本身（tabindex=-1 的容器，非操作元件），不畫焦點框；\n     須 !important 才蓋得過各站 a11y.scss 的全域 :focus-visible */\n}\n.drawer__paper:focus {\n  outline: none !important;\n}\n.drawer__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: 0.75rem 0.5rem 0.75rem 1.5rem;\n}\n.drawer__header-brand {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n.drawer__header-title {\n  font-size: 1.125rem;\n  font-weight: bold;\n}\n.drawer__header .drawer__close {\n  flex-shrink: 0;\n  /* 觸控目標 48px（WCAG 2.5.5）：共用主題把 IconButton padding 改成 8（只剩 40px），\n     部分子站手機版又把根字級縮到 70%，故用 px 保底 */\n  min-width: 48px;\n  min-height: 48px;\n  margin-left: auto;\n  /* 深色主題（palette.type=dark，如 ada、tahl）的 IconButton 預設白色，在淺色抽屜上看不見 → 沿用抽屜文字色 */\n  color: inherit;\n}\n.drawer__header .drawer__close.Mui-focusVisible {\n  outline: 2px solid currentColor;\n}\n.drawer__list > li {\n  list-style: none;\n}\n.drawer__list .drawer__link {\n  /* 觸控目標 48px（WCAG 2.5.5） */\n  min-height: 3rem;\n  /* 文字與工具區標籤對齊 1.5rem（蓋過 MuiListItem-gutters 的 16px） */\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n  color: inherit;\n  text-decoration: none;\n  /* 連結撐滿抽屜寬度，紙面又會捲動（overflow:auto），外凸的焦點框左右會被裁掉 → 內縮完整框。\n     各站 a11y.scss 的全域 :focus-visible 以 !important 設 outline-offset，這裡也須 !important 才蓋得過 */\n}\n.drawer__list .drawer__link:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: -4px !important;\n}\n.drawer__link--active::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: currentColor;\n  opacity: 0.08;\n  pointer-events: none;\n}\n.drawer__link--active .MuiTypography-root {\n  font-weight: 700;\n}\n.drawer__link--active .MuiTypography-root::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 0.25rem;\n  background: currentColor;\n}\n.drawer__tools {\n  display: flex;\n  flex-direction: column;\n  gap: 1.25rem;\n  padding: 1.25rem 1.5rem;\n}\n.drawer__lang.select {\n  width: 100%;\n}\n\n@media screen and (max-width: 768px) {\n  .drawer {\n    display: flex;\n    justify-content: flex-end;\n  }\n  .drawer__icon {\n    display: flex !important;\n  }\n}";
+styleInject(css_248z);
+
+/* 語系不多時並排成分段按鈕（點一下即切換），太多才退回下拉 */
+var MAX_SEGMENTED_LANGUAGES = 3;
+var Drawer = function Drawer(_ref) {
+  var title = _ref.title,
+    logo = _ref.logo,
+    locale = _ref.locale,
+    supportLanguages = _ref.supportLanguages,
+    drawerList = _ref.drawerList,
+    onLanguageChange = _ref.onLanguageChange,
+    languageSelectLabel = _ref.languageSelectLabel,
+    extraTools = _ref.extraTools;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var languages = Array.isArray(supportLanguages) ? supportLanguages : [];
+  var currentLanguage = languages.length > 0 ? checkLanguageSupport({
+    language: locale,
+    supportLanguages: languages
+  }) : undefined;
+  /* extraTools 可傳函式，依擺放位置（header／drawer）給不同版面 */
+  var tools = typeof extraTools === 'function' ? extraTools({
+    placement: 'drawer'
+  }) : extraTools;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "drawer__icon",
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.header.menuOpen'
+    }),
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    onClick: function onClick() {
+      return setOpen(true);
+    }
+  }, /*#__PURE__*/React__default.createElement(DehazeRounded, {
+    fontSize: "large",
+    "aria-hidden": "true"
+  })), /*#__PURE__*/React__default.createElement(Drawer$1, {
+    anchor: "right",
+    open: open,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Escape') setOpen(false);
+    }
+    /* 抽屜是強制回應的浮層（背景不可操作），以 dialog 語意讓讀屏在開啟時唸出名稱（WCAG 4.1.2） */,
+    PaperProps: {
+      className: 'drawer__paper',
+      role: 'dialog',
+      'aria-modal': true,
+      'aria-label': getIntl().formatMessage({
+        id: 'aria.header.navigation'
+      })
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer__header"
+  }, (logo || title) && /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer__header-brand"
+  }, logo && /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer__header-logo"
+  }, logo), title && /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer__header-title"
+  }, title)), /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "drawer__close",
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.header.menuClose'
+    }),
+    onClick: function onClick() {
+      return setOpen(false);
+    }
+  }, /*#__PURE__*/React__default.createElement(CloseRounded, {
+    "aria-hidden": "true"
+  }))), /*#__PURE__*/React__default.createElement(Divider, null), /*#__PURE__*/React__default.createElement(DrawerList, {
+    drawerList: (Array.isArray(drawerList) ? drawerList : []).filter(function (_ref2) {
+      var showInHeader = _ref2.showInHeader;
+      return showInHeader;
+    }),
+    setOpen: setOpen
+  }), (languages.length > 0 || tools) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Divider, null), /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer__tools"
+  }, languages.length > 0 && languages.length <= MAX_SEGMENTED_LANGUAGES && /*#__PURE__*/React__default.createElement(SegmentedControl, {
+    className: "drawer__lang",
+    label: getIntl().formatMessage({
+      id: 'header.language'
+    }),
+    options: languages.map(function (_ref3) {
+      var value = _ref3.value,
+        label = _ref3.label,
+        lang = _ref3.lang;
+      return {
+        value: value,
+        label: label,
+        lang: lang
+      };
+    }),
+    value: currentLanguage,
+    onChange: function onChange(value) {
+      return onLanguageChange(value);
+    }
+  }), languages.length > MAX_SEGMENTED_LANGUAGES && /*#__PURE__*/React__default.createElement(Select, {
+    className: "drawer__lang",
+    ariaLabel: languageSelectLabel || getIntl().formatMessage({
+      id: 'aria.header.languageSelect'
+    }),
+    defaultValue: currentLanguage,
+    onChange: function onChange(value) {
+      return onLanguageChange(value);
+    },
+    options: languages
+  }), tools && /*#__PURE__*/React__default.createElement("div", {
+    className: "drawer__extraTools"
+  }, tools)))));
+};
+Drawer.defaultProps = {
+  title: undefined,
+  logo: undefined,
+  locale: undefined,
+  supportLanguages: [
+  // { value: 'en', label: 'English' },
+  {
+    value: 'zh-tw',
+    label: '繁體中文'
+  }
+  // { value: 'zh-cn', label: '簡體中文' },
+  ],
+
+  drawerList: undefined,
+  onLanguageChange: function onLanguageChange() {},
+  languageSelectLabel: undefined,
+  extraTools: undefined
+};
+Drawer.propTypes = {
+  title: PropTypes.string,
+  logo: PropTypes.node,
+  /** 目前語系（決定語言切換鈕的選中狀態） */
+  locale: PropTypes.string,
+  /** 支援的語系；3 種以內並排成分段按鈕，超過改用下拉 */
+  supportLanguages: PropTypes.arrayOf(PropTypes.any),
+  drawerList: PropTypes.arrayOf(PropTypes.any),
+  onLanguageChange: PropTypes.func,
+  /** 語言下拉的無障礙名稱（WCAG 3.3.2）；未提供時使用套件內 aria.header.languageSelect */
+  languageSelectLabel: PropTypes.string,
+  /** 呼叫端自訂的工具區（如字級縮放）；由 Header 一併傳入，窄畫面時顯示於抽屜內。
+      傳函式時以 ({ placement: 'drawer' }) 呼叫，可給抽屜專用的版面 */
+  extraTools: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+};
+
+export { Drawer as D, checkLanguageSupport as c, defaultSupportLanguage as d };

package/lib/components/Drawer.js

@@ -1 +1,18 @@
-import{a as e}from"./_rollupPluginBabelHelpers-ec4e2a53.js";import r,{useState as a}from"react";import n from"prop-types";import{List as t,ListItem as o,ListItemIcon as i,ListItemText as l,IconButton as s,Drawer as p,Divider as d}from"@material-ui/core";import{DehazeRounded as u}from"@material-ui/icons";import c from"./Select.js";import{useHistory as m,useRouteMatch as g}from"react-router-dom";import{s as f}from"./style-inject.es-1f59c1d0.js";import"./index-b2745105.js";import"./Empty.js";var w=function(e){var r=e.language,a=e.supportLanguages;return a.some((function(e){return e.value===r}))?r:a[0].value};const _=e=>{let{drawerList:a,setOpen:n}=e;const s=m(),{url:p}=g();return r.createElement(t,{className:"drawer__list"},Array.isArray(a)&&a.map(((e,a)=>{let{name:t,icon:d,path:u}=e;return r.createElement(o,{button:!0,key:a.toString(),onClick:()=>{u.indexOf("http")>-1?window.location=u:s.push({pathname:`${p}${u}`}),n(!1)}},d&&r.createElement(i,{style:{marginRight:24}},d),r.createElement(l,{primary:t}))})))};_.defaultProps={},_.propTypes={drawerList:n.arrayOf(n.any).isRequired,setOpen:n.func.isRequired};f(".drawer__icon {\n  display: none !important; }\n\n.drawer__header {\n  display: flex;\n  align-items: center;\n  padding: 20px; }\n  .drawer__header-title {\n    font-size: 18px;\n    font-weight: bold; }\n\n.drawer__list {\n  padding: 10px !important; }\n  .drawer__list .MuiSvgIcon-root {\n    margin-left: 8px; }\n\n.drawer__lang {\n  margin: 24px 36px !important; }\n\n@media screen and (max-width: 768px) {\n  .drawer {\n    display: flex;\n    justify-content: flex-end; }\n    .drawer__icon {\n      display: flex !important; } }\n");var y=function(n){var t=n.title,o=n.logo,i=n.locale,l=n.supportLanguages,m=n.drawerList,g=n.onLanguageChange,f=a(!1),y=e(f,2),h=y[0],v=y[1];return r.createElement("div",{className:"drawer"},r.createElement(s,{className:"drawer__icon",onClick:function(){return v(!0)}},r.createElement(u,{fontSize:"large"})),r.createElement(p,{anchor:"right",open:h,onClose:function(){return v(!1)},onKeyDown:function(){return v(!1)}},(o||t)&&r.createElement("div",{className:"drawer__header"},r.createElement("div",{className:"drawer__header-logo"},o),r.createElement("div",{className:"drawer__header-title"},t)),r.createElement(d,null),r.createElement(_,{drawerList:(Array.isArray(m)?m:[]).filter((function(e){return e.showInHeader})),setOpen:v}),r.createElement(d,null),Array.isArray(l)&&l.length>0&&r.createElement(c,{className:"drawer__lang",defaultValue:w({language:i,supportLanguages:l}),onChange:function(e){return g(e)},options:l})))};y.defaultProps={title:void 0,logo:void 0,locale:void 0,supportLanguages:[{value:"en",label:"English"},{value:"zh-tw",label:"繁體中文"},{value:"zh-cn",label:"簡體中文"}],drawerList:void 0,onLanguageChange:function(){}},y.propTypes={title:n.string,logo:n.node,locale:n.string,supportLanguages:n.arrayOf(n.any),drawerList:n.arrayOf(n.any),onLanguageChange:n.func};export{y as default};
+export { D as default } from './Drawer-b770014f.js';
+import './_rollupPluginBabelHelpers-a52356f6.js';
+import 'react';
+import 'prop-types';
+import '@material-ui/core';
+import '@material-ui/icons';
+import './Select-979f7e73.js';
+import './index-c33afcb5.js';
+import './defaultTheme-c5dd0f64.js';
+import 'react-is';
+import '@material-ui/styles';
+import './useTheme-98b6cf17.js';
+import './withTheme-3486f38b.js';
+import './Empty-48685dd0.js';
+import './style-inject.es-1f59c1d0.js';
+import './globalConfig';
+import './SegmentedControl-804da0a6.js';
+import 'react-router-dom';

package/lib/components/Dropdown.js

@@ -1 +1,134 @@
-import{a as e}from"./_rollupPluginBabelHelpers-ec4e2a53.js";import n,{useRef as o,useState as t}from"react";import{c as r}from"./index-b2745105.js";import i from"prop-types";import{Button as a,Menu as l,Divider as c,MenuItem as s,ListItemIcon as p,ListItemText as d}from"@material-ui/core";import{makeStyles as u}from"@material-ui/styles";import{s as m}from"./style-inject.es-1f59c1d0.js";m("");var f={default:"outlined",primary:"contained",link:"text"},b=function(i){var m=i.className,b=i.type,v=i.disabled,y=i.children,C=i.icon,E=i.options,g=i.onOpen,h=i.onClose,k=i.getPopupContainer,O=o(null),P=t(!1),j=e(P,2),x=j[0],A=j[1],N=u((function(){return{root:{opacity:.6,pointerEvents:"none",cursor:"pointer"},disabled:!0}}));return n.createElement("div",{className:r("dropdown",m)},n.createElement(a,{id:"basic-button",ref:O,"aria-controls":"basic-menu","aria-haspopup":"true","aria-expanded":x?"true":void 0,onClick:function(){E&&Array.isArray(E)&&E.length>0&&(A(!0),g&&g())},variant:f[b]||"text",startIcon:C||null,disabled:v||!1},y||null),n.createElement(l,{id:"basic-menu",getContentAnchorEl:null,container:k||O.current,anchorOrigin:{vertical:"bottom",horizontal:"center"},transformOrigin:{vertical:"top",horizontal:"center"},anchorEl:O.current,open:x,onClose:function(){A(!1),h&&h()},MenuListProps:{"aria-labelledby":"basic-button"}},E&&Array.isArray(E)&&E.map((function(e,o){return n.createElement("div",{key:o.toString()},e.divider&&n.createElement(c,null),n.createElement(s,{className:e.disabled?N().root:"",onClick:function(){A(!1),h&&h(),e.onClick&&e.onClick({label:e.label,value:e.value})}},e.icon&&n.createElement(p,null,e.icon),e.label&&n.createElement(d,null,e.label)))}))))};b.defaultProps={className:void 0,children:void 0,icon:void 0,type:"link",disabled:void 0,options:void 0,getPopupContainer:void 0,onOpen:void 0,onClose:void 0},b.propTypes={className:i.string,children:i.node,icon:i.node,type:i.oneOf(Object.keys(f)),disabled:i.bool,options:i.arrayOf(i.any),getPopupContainer:i.func,onOpen:i.func,onClose:i.func};export{b as default};
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default, { useRef, useState } from 'react';
+import { c as classNames } from './index-c33afcb5.js';
+import PropTypes from 'prop-types';
+import { Button, Menu, Divider, MenuItem, ListItemIcon, ListItemText } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = "";
+styleInject(css_248z);
+
+var buttonType = {
+  default: 'outlined',
+  primary: 'contained',
+  link: 'text'
+};
+var Dropdown = function Dropdown(props) {
+  var className = props.className,
+    type = props.type,
+    disabled = props.disabled; // Attributes
+
+  var children = props.children,
+    icon = props.icon; // Node/Elements
+
+  var options = props.options; // Data List
+
+  var onOpen = props.onOpen,
+    _onClose = props.onClose,
+    getPopupContainer = props.getPopupContainer; // Callback List
+
+  var buttonRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var useStyles = makeStyles(function () {
+    return {
+      root: {
+        opacity: 0.6,
+        pointerEvents: 'none',
+        cursor: 'pointer'
+      },
+      disabled: true
+    };
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('dropdown', className)
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    id: "basic-button",
+    ref: buttonRef,
+    "aria-controls": "basic-menu",
+    "aria-haspopup": "true",
+    "aria-expanded": open ? 'true' : undefined,
+    onClick: function onClick() {
+      if (options && Array.isArray(options) && options.length > 0) {
+        setOpen(true);
+        if (onOpen) onOpen();
+      }
+    },
+    variant: buttonType[type] || 'text',
+    startIcon: icon || null,
+    disabled: disabled || false
+  }, children || null), /*#__PURE__*/React__default.createElement(Menu, {
+    id: "basic-menu",
+    getContentAnchorEl: null,
+    container: getPopupContainer || buttonRef.current,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'center'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'center'
+    },
+    anchorEl: buttonRef.current,
+    open: open,
+    onClose: function onClose() {
+      setOpen(false);
+      if (_onClose) _onClose();
+    },
+    MenuListProps: {
+      'aria-labelledby': 'basic-button'
+    }
+  }, options && Array.isArray(options) && options.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: index.toString()
+    }, item.divider && /*#__PURE__*/React__default.createElement(Divider, null), /*#__PURE__*/React__default.createElement(MenuItem, {
+      className: item.disabled ? useStyles().root : '',
+      onClick: function onClick() {
+        setOpen(false);
+        if (_onClose) _onClose();
+        if (item.onClick) item.onClick({
+          label: item.label,
+          value: item.value
+        });
+      }
+    }, item.icon && /*#__PURE__*/React__default.createElement(ListItemIcon, null, item.icon), item.label && /*#__PURE__*/React__default.createElement(ListItemText, null, item.label)));
+  })));
+};
+Dropdown.defaultProps = {
+  className: undefined,
+  children: undefined,
+  icon: undefined,
+  type: 'link',
+  disabled: undefined,
+  options: undefined,
+  getPopupContainer: undefined,
+  onOpen: undefined,
+  onClose: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+Dropdown.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 按鈕內容 */
+  children: PropTypes.node,
+  /** 按鈕左側Icon */
+  icon: PropTypes.node,
+  /** 按鈕類型 */
+  type: PropTypes.oneOf(Object.keys(buttonType)),
+  /** Menu按鈕是否禁用 */
+  disabled: PropTypes.bool,
+  /** Menu Data list */
+  options: PropTypes.arrayOf(PropTypes.any),
+  /** Menu content render by node */
+  getPopupContainer: PropTypes.func,
+  /** Menu 開啟 Callback */
+  onOpen: PropTypes.func,
+  /** Menu 關閉 Callback */
+  onClose: PropTypes.func
+};
+
+export { Dropdown as default };

package/lib/components/Empty-48685dd0.js

@@ -0,0 +1,46 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-c33afcb5.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var img = "data:image/svg+xml,%3csvg class='ant-empty-img-default' width='184' height='152' viewBox='0 0 184 152' xmlns='http://www.w3.org/2000/svg'%3e %3cg fill='none' fill-rule='evenodd'%3e %3cg transform='translate(24 31.67)'%3e %3cellipse fill='%23f5f5f5' fill-opacity='0.8' cx='67.797' cy='106.89' rx='67.797' ry='12.668'%3e%3c/ellipse%3e %3cpath fill='%23aeb8c2' d='M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z'%3e%3c/path%3e %3cpath fill='url(%23linearGradient-1)' d='M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z' transform='translate(13.56)'%3e%3c/path%3e %3cpath fill='%23f5f5f7' d='M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z'%3e%3c/path%3e %3cpath fill='%23dce0e6' d='M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z'%3e%3c/path%3e %3c/g%3e %3cpath fill='%23dce0e6' d='M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z'%3e%3c/path%3e %3cg fill='white' transform='translate(149.65 15.383)'%3e %3cellipse cx='20.654' cy='3.167' rx='2.849' ry='2.815'%3e%3c/ellipse%3e %3cpath d='M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z'%3e%3c/path%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
+
+var css_248z = ".antd-empty {\n  width: 100%;\n  font-size: 1rem;\n  line-height: 1.5715;\n  text-align: center;\n  overflow: hidden;\n  height: 100%;\n}\n.antd-empty .ant-empty-image {\n  height: 100px;\n  margin-bottom: 8px;\n}\n.antd-empty .ant-empty-image img {\n  height: calc(100% - 22px);\n  margin: auto;\n}\n.antd-empty .antd-empty-description {\n  color: rgba(0, 0, 0, 0.85);\n}";
+styleInject(css_248z);
+
+var Empty = function Empty(_ref) {
+  var className = _ref.className,
+    description = _ref.description,
+    emptySrc = _ref.emptySrc,
+    imageStyle = _ref.imageStyle;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('antd-empty', className)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "ant-empty-image"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: emptySrc || img,
+    alt: "",
+    "aria-hidden": "true",
+    style: imageStyle
+  }), description && /*#__PURE__*/React__default.createElement("div", {
+    className: "ant-empty-description"
+  }, description)));
+};
+Empty.defaultProps = {
+  className: undefined,
+  emptySrc: undefined,
+  description: 'No Data',
+  imageStyle: {}
+};
+Empty.propTypes = {
+  /** Css名稱 */
+  className: PropTypes.string,
+  /** 空白時圖案的Src */
+  emptySrc: PropTypes.string,
+  /** 描述 */
+  description: PropTypes.node,
+  /** 圖案的style */
+  imageStyle: PropTypes.objectOf(PropTypes.any)
+};
+
+export { Empty as E };

package/lib/components/Empty.js

@@ -1 +1,5 @@
-import e from"react";import t from"prop-types";import{c as a}from"./index-b2745105.js";import{s as c}from"./style-inject.es-1f59c1d0.js";c(".antd-empty {\n  width: 100%;\n  font-size: 1rem;\n  line-height: 1.5715;\n  text-align: center;\n  overflow: hidden;\n  height: 100%; }\n  .antd-empty .ant-empty-image {\n    height: 100px;\n    margin-bottom: 8px; }\n    .antd-empty .ant-empty-image img {\n      height: calc(100% - 22px);\n      margin: auto; }\n  .antd-empty .antd-empty-description {\n    color: rgba(0, 0, 0, 0.85); }\n");var i=function(t){var c=t.className,i=t.description,l=t.emptySrc,n=t.imageStyle;return e.createElement("div",{className:a("antd-empty",c)},e.createElement("div",{className:"ant-empty-image"},e.createElement("img",{src:l||"data:image/svg+xml,%3csvg class='ant-empty-img-default' width='184' height='152' viewBox='0 0 184 152' xmlns='http://www.w3.org/2000/svg'%3e %3cg fill='none' fill-rule='evenodd'%3e %3cg transform='translate(24 31.67)'%3e %3cellipse fill='%23f5f5f5' fill-opacity='0.8' cx='67.797' cy='106.89' rx='67.797' ry='12.668'%3e%3c/ellipse%3e %3cpath fill='%23aeb8c2' d='M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z'%3e%3c/path%3e %3cpath fill='url(%23linearGradient-1)' d='M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z' transform='translate(13.56)'%3e%3c/path%3e %3cpath fill='%23f5f5f7' d='M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z'%3e%3c/path%3e %3cpath fill='%23dce0e6' d='M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z'%3e%3c/path%3e %3c/g%3e %3cpath fill='%23dce0e6' d='M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z'%3e%3c/path%3e %3cg fill='white' transform='translate(149.65 15.383)'%3e %3cellipse cx='20.654' cy='3.167' rx='2.849' ry='2.815'%3e%3c/ellipse%3e %3cpath d='M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z'%3e%3c/path%3e %3c/g%3e %3c/g%3e%3c/svg%3e",alt:i,style:n}),i&&e.createElement("div",{className:"ant-empty-description"},i)))};i.defaultProps={className:void 0,emptySrc:void 0,description:"No Data",imageStyle:{}},i.propTypes={className:t.string,emptySrc:t.string,description:t.node,imageStyle:t.objectOf(t.any)};export{i as default};
+export { E as default } from './Empty-48685dd0.js';
+import 'react';
+import 'prop-types';
+import './index-c33afcb5.js';
+import './style-inject.es-1f59c1d0.js';

package/lib/components/ExportButton.js

@@ -1 +1,128 @@
-import{a as t}from"./_rollupPluginBabelHelpers-ec4e2a53.js";import e,{useState as o}from"react";import r from"prop-types";import{c as n}from"./index-b2745105.js";import{ExitToApp as a}from"@material-ui/icons";import{Dialog as i,DialogContent as c,DialogContentText as l,DialogActions as s,Button as p}from"@material-ui/core";import{f as u,j as f,a as x}from"./dataExport-9fccd4f0.js";import{s as m}from"./style-inject.es-1f59c1d0.js";m(".exportButton {\n  display: flex;\n  align-items: center;\n  font-size: 1.5rem;\n  transition: color 0.3s ease-in-out;\n  -webkit-user-select: none;\n          user-select: none; }\n  .exportButton--right {\n    justify-content: flex-end; }\n  .exportButton__text {\n    display: flex;\n    align-items: center;\n    text-decoration: underline;\n    cursor: pointer; }\n    .exportButton__text__icon {\n      font-size: 2rem;\n      margin-right: 4px; }\n    .exportButton__text:hover {\n      font-weight: bold; }\n");var d=function(r){var m=r.className,d=r.color,y=r.right,g=r.forceTxt,T=r.exportText,_=r.exportTypeText,E=r.data,b=o(!1),v=t(b,2),B=v[0],k=v[1],h=[{type:"CSV",click:function(){return u("\ufeff".concat(x(E)),"output.csv")}},{type:"EXCEL",click:function(){return u("\ufeff".concat(x(E)),"output.xls")}},{type:"TXT",click:function(){return u("\ufeff".concat(f(E)),"output.txt")}}];return e.createElement("div",{style:{color:d},className:n("exportButton",{"exportButton--right":y},m)},e.createElement("div",{className:"exportButton__text",onClick:function(){return g?u("\ufeff".concat(f(E)),"output.txt"):k(!0)}},e.createElement(a,{className:"exportButton__text__icon"}),T),e.createElement(i,{open:B,keepMounted:!0,onClose:function(){return k(!1)},"aria-labelledby":"alert-dialog-slide-title","aria-describedby":"alert-dialog-slide-description"},e.createElement(c,null,e.createElement(l,null,_)),e.createElement(s,null,h.map((function(t){var o=t.type,r=t.click;return e.createElement(p,{key:o,variant:"text",onClick:function(){r(),k(!1)}},o)})))))};d.defaultProps={className:void 0,color:"#4e3a16",right:void 0,forceTxt:!0,exportText:"Export",exportTypeText:"Export Type",data:void 0},d.propTypes={className:r.string,color:r.string,right:r.bool,forceTxt:r.bool,exportText:r.string,exportTypeText:r.string,data:r.oneOfType([r.objectOf(r.any),r.arrayOf(r.any)])};export{d as default};
+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 { ExitToApp } from '@material-ui/icons';
+import { Dialog, DialogContent, DialogContentText, DialogActions, Button } from '@material-ui/core';
+import { f as fileDownload, j as jsonTxt, a as jsonExcel } from './dataExport-a9e3fae1.js';
+import { getIntl } from './globalConfig';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = ".exportButton {\n  display: flex;\n  align-items: center;\n  font-size: 1.5rem;\n  transition: color 0.3s ease-in-out;\n  -webkit-user-select: none;\n          user-select: none;\n}\n.exportButton--right {\n  justify-content: flex-end;\n}\n.exportButton__text {\n  display: flex;\n  align-items: center;\n  text-decoration: underline;\n  cursor: pointer;\n}\n.exportButton__text__icon {\n  font-size: 2rem;\n  margin-right: 4px;\n}\n.exportButton__text:hover {\n  font-weight: bold;\n}";
+styleInject(css_248z);
+
+var ExportButton = function ExportButton(_ref) {
+  var className = _ref.className,
+    color = _ref.color,
+    right = _ref.right,
+    forceTxt = _ref.forceTxt,
+    exportText = _ref.exportText,
+    exportTypeText = _ref.exportTypeText,
+    data = _ref.data;
+  var _getIntl = getIntl(),
+    formatMessage = _getIntl.formatMessage;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var buttons = [{
+    type: 'CSV',
+    click: function click() {
+      return fileDownload("\uFEFF".concat(jsonExcel(data)), 'output.csv');
+    }
+  }, {
+    type: 'EXCEL',
+    click: function click() {
+      return fileDownload("\uFEFF".concat(jsonExcel(data)), 'output.xls');
+    }
+  }, {
+    type: 'TXT',
+    click: function click() {
+      return fileDownload("\uFEFF".concat(jsonTxt(data)), 'output.txt');
+    }
+  }];
+  var handleExport = function handleExport() {
+    return forceTxt ? fileDownload("\uFEFF".concat(jsonTxt(data)), 'output.txt') : setOpen(true);
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      color: color
+    },
+    className: classNames('exportButton', {
+      'exportButton--right': right
+    }, className)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "exportButton__text",
+    role: "button",
+    tabIndex: 0,
+    "aria-haspopup": forceTxt ? undefined : 'dialog',
+    "aria-label": "".concat(exportText || formatMessage({
+      id: 'common.export'
+    })).concat(formatMessage({
+      id: forceTxt ? 'aria.export.download' : 'aria.opensDialog'
+    })),
+    onClick: handleExport,
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        handleExport();
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(ExitToApp, {
+    className: "exportButton__text__icon",
+    "aria-hidden": "true"
+  }), exportText || formatMessage({
+    id: 'common.export'
+  })), /*#__PURE__*/React__default.createElement(Dialog, {
+    open: open,
+    keepMounted: true,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    "aria-labelledby": "alert-dialog-slide-title",
+    "aria-describedby": "alert-dialog-slide-description"
+  }, /*#__PURE__*/React__default.createElement(DialogContent, null, /*#__PURE__*/React__default.createElement(DialogContentText, null, exportTypeText || formatMessage({
+    id: 'common.export.type'
+  }))), /*#__PURE__*/React__default.createElement(DialogActions, null, buttons.map(function (_ref2) {
+    var type = _ref2.type,
+      click = _ref2.click;
+    return /*#__PURE__*/React__default.createElement(Button, {
+      key: type,
+      variant: "text",
+      onClick: function onClick() {
+        click();
+        setOpen(false);
+      }
+    }, type);
+  }))));
+};
+ExportButton.defaultProps = {
+  className: undefined,
+  color: '#4e3a16',
+  right: undefined,
+  forceTxt: true,
+  // 聽說Excel怪怪的 先強制隱藏
+  exportText: undefined,
+  exportTypeText: 'Export Type',
+  data: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+ExportButton.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 主題顏色 */
+  color: PropTypes.string,
+  /** 靠右起來 */
+  right: PropTypes.bool,
+  /** 匯出是否強制txt */
+  forceTxt: PropTypes.bool,
+  /** 匯出的文字 */
+  exportText: PropTypes.string,
+  /** 匯出類型的文字 */
+  exportTypeText: PropTypes.string,
+  /** 要匯出的JSON資料 */
+  data: PropTypes.oneOfType([PropTypes.objectOf(PropTypes.any), PropTypes.arrayOf(PropTypes.any)])
+};
+
+export { ExportButton as default };