@daoyi/nmtl-ui 2.0.1-beta.13 → 2.0.1-beta.130

package/lib/components/Breadcrumbs.js

@@ -1 +1,122 @@
-import e from"react";import{c as t}from"./index-b2745105.js";import r from"prop-types";import{NavLink as a}from"react-router-dom";import{Typography as n,Breadcrumbs as o}from"@material-ui/core";import{s as c}from"./style-inject.es-1f59c1d0.js";c(".breadcrumbItem {\n  display: flex;\n  opacity: 0.8;\n  transition: opacity 0.1s ease-in-out; }\n  .breadcrumbItem:hover {\n    opacity: 1; }\n  .breadcrumbItem--last {\n    opacity: 1;\n    font-weight: 500 !important; }\n  .breadcrumbItem__icon {\n    display: flex;\n    align-items: center;\n    margin-right: 4px; }\n    .breadcrumbItem__icon svg {\n      font-size: 18px; }\n");const i=r=>{let{className:a,icon:o,text:c,lastItem:i,onClick:s}=r;return e.createElement(n,{color:"textPrimary",className:a,onClick:s},e.createElement("div",{className:t("breadcrumbItem",{"breadcrumbItem--last":i})},o&&e.createElement("span",{className:"breadcrumbItem__icon"},o),e.createElement("span",{className:"breadcrumbItem__text"},c)))};i.defaultProps={className:void 0,icon:void 0,text:void 0,lastItem:void 0,onClick:()=>{}},i.propTypes={className:r.string,icon:r.node,text:r.string,lastItem:r.bool,onClick:r.func};c(".breadcrumbs__link {\n  cursor: pointer;\n  text-decoration: none !important; }\n");var s=function(r){var n=r.className,c=r.links,s=r.separator;return e.createElement(o,{className:t("breadcrumbs",n),"aria-label":"breadcrumb",separator:s&&s.length>0?s:void 0},Array.isArray(c)&&c.length>0&&c.map((function(t,r){var n=t.icon,o=t.text,s=t.href,m=t.onClick;return r===c.length-1?e.createElement(i,{key:r.toString(),lastItem:!0,icon:n,text:o,onClick:m}):0===r?e.createElement(a,{className:"breadcrumbs__link",key:r.toString(),to:s||"/",onClick:m},e.createElement(i,{icon:n,text:o})):s?e.createElement(a,{className:"breadcrumbs__link",key:r.toString(),to:s,onClick:m},e.createElement(i,{icon:n,text:o})):e.createElement(i,{key:r.toString(),lastItem:!0,icon:n,text:o,onClick:m})})))};s.defaultProps={className:void 0,links:void 0,separator:void 0},s.propTypes={className:r.string,links:r.arrayOf(r.any),separator:r.string};export{s as default};
+import React__default from 'react';
+import { c as classNames } from './index-b76a85f4.js';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+import { Typography, Breadcrumbs as Breadcrumbs$1 } from '@material-ui/core';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z$1 = ".breadcrumbItem {\n  display: flex;\n  opacity: 0.8;\n  transition: opacity 0.1s ease-in-out;\n}\n.breadcrumbItem:hover {\n  opacity: 1;\n}\n.breadcrumbItem--last {\n  opacity: 1;\n  font-weight: 500 !important;\n}\n.breadcrumbItem__icon {\n  display: flex;\n  align-items: center;\n  margin-right: 4px;\n}\n.breadcrumbItem__icon svg {\n  font-size: 1.125rem;\n}";
+styleInject(css_248z$1);
+
+const BreadcrumbItem = _ref => {
+  let {
+    className,
+    icon,
+    text,
+    lastItem,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(Typography, {
+    color: "textPrimary",
+    className: className,
+    onClick: onClick
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('breadcrumbItem', {
+      'breadcrumbItem--last': lastItem
+    })
+  }, icon && /*#__PURE__*/React__default.createElement("span", {
+    className: "breadcrumbItem__icon"
+  }, icon), /*#__PURE__*/React__default.createElement("span", {
+    className: "breadcrumbItem__text"
+  }, text)));
+};
+BreadcrumbItem.defaultProps = {
+  className: undefined,
+  icon: undefined,
+  text: undefined,
+  lastItem: undefined,
+  onClick: () => {}
+};
+BreadcrumbItem.propTypes = {
+  className: PropTypes.string,
+  icon: PropTypes.node,
+  text: PropTypes.string,
+  lastItem: PropTypes.bool,
+  onClick: PropTypes.func
+};
+
+var css_248z = ".breadcrumbs__link {\n  cursor: pointer;\n  text-decoration: none !important;\n}";
+styleInject(css_248z);
+
+var Breadcrumbs = function Breadcrumbs(_ref) {
+  var className = _ref.className,
+    links = _ref.links,
+    separator = _ref.separator;
+  return /*#__PURE__*/React__default.createElement(Breadcrumbs$1, {
+    className: classNames('breadcrumbs', className),
+    "aria-label": "breadcrumb",
+    separator: separator && separator.length > 0 ? separator : undefined
+  }, Array.isArray(links) && links.length > 0 && links.map(function (_ref2, i) {
+    var icon = _ref2.icon,
+      text = _ref2.text,
+      href = _ref2.href,
+      onClick = _ref2.onClick;
+    var lastLink = i === links.length - 1;
+
+    /* 尾巴 */
+    if (lastLink) return /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
+      key: i.toString(),
+      lastItem: true,
+      icon: icon,
+      text: text,
+      onClick: onClick
+    });
+
+    /* 頭 */
+    if (i === 0) {
+      return /*#__PURE__*/React__default.createElement(NavLink, {
+        className: "breadcrumbs__link",
+        key: i.toString(),
+        to: href || '/',
+        onClick: onClick
+      }, /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
+        icon: icon,
+        text: text
+      }));
+    }
+
+    /* 中間 */
+    return href ? /*#__PURE__*/React__default.createElement(NavLink, {
+      className: "breadcrumbs__link",
+      key: i.toString(),
+      to: href,
+      onClick: onClick
+    }, /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
+      icon: icon,
+      text: text
+    })) : /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
+      key: i.toString(),
+      lastItem: true,
+      icon: icon,
+      text: text,
+      onClick: onClick
+    });
+  }));
+};
+Breadcrumbs.defaultProps = {
+  className: undefined,
+  links: undefined,
+  separator: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+Breadcrumbs.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 麵包穴的連結們 */
+  links: PropTypes.arrayOf(PropTypes.any),
+  /** 分割者的符號 */
+  separator: PropTypes.string
+};
+
+export { Breadcrumbs as default };

package/lib/components/Button-7bd5aa09.js

@@ -0,0 +1,114 @@
+import { c as _objectWithoutProperties, _ as _extends } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-b76a85f4.js';
+import { Button as Button$1, CircularProgress } from '@material-ui/core';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = ".button {\n  border: 1px solid #ffffff99;\n  border-radius: 45px;\n  padding: 8px 16px;\n  background: #007bff;\n  color: white;\n  cursor: pointer;\n}\n.button:hover {\n  opacity: 0.9;\n}";
+styleInject(css_248z);
+
+var _excluded = ["style", "className", "tabIndex", "alt", "text", "size", "variant", "type", "color", "loading", "disabled", "icon", "endIcon", "children", "onClick"];
+var Button = function Button(props) {
+  var style = props.style,
+    className = props.className,
+    tabIndex = props.tabIndex,
+    alt = props.alt,
+    text = props.text,
+    size = props.size,
+    variant = props.variant;
+  var type = props.type,
+    color = props.color,
+    loading = props.loading,
+    disabled = props.disabled,
+    icon = props.icon,
+    endIcon = props.endIcon,
+    children = props.children,
+    onClick = props.onClick;
+  /* 本元件原本逐一挑選 props，呼叫端傳入的 aria-*／title／role 會被靜默丟掉——
+     nmtl-web 有三處為了補可及名稱而傳 aria-label，其中 areaMap 那處自 80db4537
+     起就一直沒有生效（WCAG 4.1.2，Freego HM1410200C）。
+     把宣告過的 props 取出後，其餘一律往下傳。 */
+  props.style;
+    props.className;
+    props.tabIndex;
+    props.alt;
+    props.text;
+    props.size;
+    props.variant;
+    props.type;
+    props.color;
+    props.loading;
+    props.disabled;
+    props.icon;
+    props.endIcon;
+    props.children;
+    props.onClick;
+    var rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(Button$1, _extends({}, rest, {
+    style: style,
+    className: classNames('button', className),
+    tabIndex: tabIndex,
+    alt: alt,
+    size: size,
+    variant: variant,
+    color: type || color,
+    disabled: loading || disabled,
+    onClick: onClick,
+    startIcon: icon,
+    endIcon: loading ? /*#__PURE__*/React__default.createElement(CircularProgress, {
+      size: 16
+    }) : endIcon
+  }), text, children);
+};
+Button.defaultProps = {
+  style: undefined,
+  className: undefined,
+  tabIndex: undefined,
+  alt: undefined,
+  text: undefined,
+  loading: false,
+  disabled: false,
+  variant: undefined,
+  size: 'small',
+  color: 'primary',
+  type: undefined,
+  children: undefined,
+  icon: undefined,
+  endIcon: undefined,
+  onClick: function onClick() {}
+};
+Button.propTypes = {
+  /** 樣式 */
+  style: PropTypes.objectOf(PropTypes.any),
+  /** Css Name */
+  className: PropTypes.string,
+  /** Tab 鍵位置 */
+  tabIndex: PropTypes.number,
+  /** 註解 */
+  alt: PropTypes.string,
+  /** 輸入的文字 */
+  text: PropTypes.string,
+  /** 是否載入中 */
+  loading: PropTypes.bool,
+  /** 是否禁用 */
+  disabled: PropTypes.bool,
+  /** 按鈕種類 */
+  variant: PropTypes.oneOf(['contained', 'outlined', 'text']),
+  /** 按鈕的大小 */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** 按鈕顏色 */
+  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
+  /** 按鈕樣式(同按鈕顏色) */
+  type: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
+  /** 按鈕內容 */
+  children: PropTypes.node,
+  /** 按鈕圖案(前面) */
+  icon: PropTypes.node,
+  /** 按鈕圖案(後面) */
+  endIcon: PropTypes.node,
+  /** 點擊後的返回 */
+  onClick: PropTypes.func
+};
+
+export { Button as B };

package/lib/components/Button.js

@@ -1 +1,7 @@
-import e from"react";import o from"prop-types";import{c as n}from"./index-b2745105.js";import{Button as t,CircularProgress as i}from"@material-ui/core";import{s as a}from"./style-inject.es-1f59c1d0.js";a(".button {\n  border: 1px solid #ffffff99;\n  border-radius: 45px;\n  padding: 8px 16px;\n  background: #007bff;\n  color: white;\n  cursor: pointer; }\n  .button:hover {\n    opacity: 0.9; }\n");var r=function(o){var a=o.style,r=o.className,d=o.tabIndex,l=o.alt,s=o.text,c=o.size,f=o.variant,p=o.type,m=o.color,b=o.loading,u=o.disabled,v=o.icon,y=o.endIcon,x=o.children,g=o.onClick;return e.createElement(t,{style:a,className:n("button",r),tabIndex:d,alt:l,size:c,variant:f,color:p||m,disabled:b||u,onClick:g,startIcon:v,endIcon:b?e.createElement(i,{size:16}):y},s,x)};r.defaultProps={style:void 0,className:void 0,tabIndex:void 0,alt:void 0,text:void 0,loading:!1,disabled:!1,variant:void 0,size:"small",color:"primary",type:void 0,children:void 0,icon:void 0,endIcon:void 0,onClick:function(){}},r.propTypes={style:o.objectOf(o.any),className:o.string,tabIndex:o.number,alt:o.string,text:o.string,loading:o.bool,disabled:o.bool,variant:o.oneOf(["contained","outlined","text"]),size:o.oneOf(["small","medium","large"]),color:o.oneOf(["default","inherit","primary","secondary"]),type:o.oneOf(["default","inherit","primary","secondary"]),children:o.node,icon:o.node,endIcon:o.node,onClick:o.func};export{r as default};
+export { B as default } from './Button-7bd5aa09.js';
+import './_rollupPluginBabelHelpers-a52356f6.js';
+import 'react';
+import 'prop-types';
+import './index-b76a85f4.js';
+import '@material-ui/core';
+import './style-inject.es-1f59c1d0.js';