@blocklet/list 0.9.8 → 0.9.9

package/lib/base.js

@@ -128,9 +128,7 @@ function ListBase() {
   });
 }
 
-const StyledMin = _styled.default.main(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  .filter-bar {\n    justify-content: space-between;\n    margin-bottom: ", ";\n  }\n  .sort-button {\n    white-space: nowrap;\n  }\n  .search-container {\n    flex: 2;\n    margin-left: 0px;\n  }\n\n  .filter-container {\n    flex: 1;\n    display: flex;\n    justify-content: flex-end;\n  }\n  @media (max-width: ", "px) {\n    .search-container {\n      width: 100%;\n      margin-bottom: ", ";\n    }\n    .filter-container {\n      margin-left: 0;\n      display: flex;\n      justify-content: flex-start;\n    }\n    .filter-bar {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n    }\n  }\n  @media (max-width: ", "px) {\n    .sort-button {\n      font-size: 12px;\n    }\n  }\n"])), props => {
-  return props.theme.spacing(2);
-}, props => props.theme.breakpoints.values.md, props => props.theme.spacing(2), props => props.theme.breakpoints.values.md);
+const StyledMin = _styled.default.main(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  .filter-bar {\n    justify-content: space-between;\n    margin-bottom: ", ";\n  }\n  .sort-button {\n    white-space: nowrap;\n  }\n  .bl-search-container {\n    flex: 2;\n    margin-left: 0px;\n  }\n\n  .filter-container {\n    flex: 1;\n    display: flex;\n    justify-content: flex-end;\n  }\n  @media (max-width: ", "px) {\n    .bl-search-container {\n      width: 100%;\n      margin-bottom: ", ";\n    }\n    .filter-container {\n      margin-left: 0;\n      display: flex;\n      justify-content: flex-start;\n    }\n    .filter-bar {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n    }\n  }\n  @media (max-width: ", "px) {\n    .sort-button {\n      font-size: 12px;\n    }\n  }\n"])), props => props.theme.spacing(2), props => props.theme.breakpoints.values.md, props => props.theme.spacing(2), props => props.theme.breakpoints.values.md);
 
 const FilterContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: sticky;\n  top: 0;\n  z-index: 9;\n  background-color: white;\n"])));
 

package/lib/components/autocomplete/index.js

@@ -23,8 +23,6 @@ var _filter = require("../../contexts/filter");
 
 var _item = _interopRequireDefault(require("./item"));
 
-require("@algolia/autocomplete-theme-classic");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -109,9 +107,10 @@ function Autocomplete() {
       },
 
       classNames: {
-        panel: 'blocklet-list-panel',
-        label: 'blocklet-list-label',
-        form: 'blocklet-list-form'
+        panel: 'bl-autocomplete-panel',
+        label: 'bl-autocomplete-label',
+        form: 'bl-autocomplete-form',
+        input: 'bl-autocomplete-input'
       },
       placeholder: t('common.searchStore'),
       initialState: {
@@ -180,7 +179,7 @@ function Autocomplete() {
             },
 
             noResults() {
-              return 'No results.';
+              return t('blocklet.noResults');
             }
 
           }
@@ -193,7 +192,7 @@ function Autocomplete() {
     };
   }, [endpoint, filters, getResults, muiTheme, onReset, onSubmit, t]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "search-container",
+    className: "bl-search-container",
     ref: containerRef
   });
 }

package/lib/index.js

@@ -17,7 +17,7 @@ var _propTypes = require("./libs/prop-types");
 
 var _utils = require("./libs/utils");
 
-require("@algolia/autocomplete-theme-classic");
+require("@algolia/autocomplete-theme-classic/dist/theme.css");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -37,7 +37,7 @@ function BlockletList(props) {
   const muiTheme = (0, _styles.useTheme)();
   const primaryColor = (0, _utils.toColorRgb)(muiTheme.palette.primary.main);
   const globalStyles = {
-    autocomplete: theme => (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      :root {\n        --aa-detached-media-query: (max-width: ", "px) !important;\n        --aa-detached-modal-media-query: (min-width: ", "px) !important;\n        --aa-detached-modal-max-width: ", "px !important;\n        --aa-selected-color-rgb: ", ", ", ", ", " !important;\n        --aa-primary-color-rgb: ", ", ", ", ", " !important;\n        --aa-input-background-color-rgb: 250, 250, 250 !important;\n      }\n      .blocklet-list-panel {\n        z-index: ", " !important;\n      }\n      .blocklet-list-label {\n        .aa-SubmitIcon {\n          color: ", " !important;\n        }\n      }\n      .blocklet-list-form {\n        border: none !important;\n        &:focus-within {\n          box-shadow: none !important;\n        }\n      }\n      .aa-DetachedSearchButton {\n        border: none !important;\n        &:focus-within {\n          box-shadow: none !important;\n        }\n        .aa-SubmitIcon {\n          color: ", " !important;\n        }\n      }\n    "])), theme.breakpoints.values.md, theme.breakpoints.values.md, theme.breakpoints.values.md, primaryColor.r, primaryColor.g, primaryColor.b, primaryColor.r, primaryColor.g, primaryColor.b, theme.zIndex.modal + 1, theme.palette.grey[500], theme.palette.grey[500])
+    autocomplete: theme => (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      :root {\n        --aa-detached-media-query: (max-width: ", "px) !important;\n        --aa-detached-modal-media-query: (min-width: ", "px) !important;\n        --aa-detached-modal-max-width: ", "px !important;\n        --aa-selected-color-rgb: ", ", ", ", ", " !important;\n        --aa-primary-color-rgb: ", ", ", ", ", " !important;\n        --aa-input-background-color-rgb: 250, 250, 250 !important;\n      }\n      .bl-autocomplete-panel {\n        z-index: ", " !important;\n      }\n      .bl-autocomplete-label {\n        .aa-SubmitIcon {\n          color: ", " !important;\n        }\n      }\n      .bl-autocomplete-form {\n        border: none !important;\n        &:focus-within {\n          box-shadow: none !important;\n        }\n      }\n      .aa-DetachedSearchButton {\n        border: none !important;\n        &:focus-within {\n          box-shadow: none !important;\n        }\n        .aa-SubmitIcon {\n          color: ", " !important;\n        }\n      }\n    "])), theme.breakpoints.values.md, theme.breakpoints.values.md, theme.breakpoints.values.md, primaryColor.r, primaryColor.g, primaryColor.b, primaryColor.r, primaryColor.g, primaryColor.b, theme.zIndex.modal + 1, theme.palette.grey[500], theme.palette.grey[500])
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_filter.FilterProvider, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Global, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -68,5 +68,5 @@
     "eslint": "^8.21.0",
     "prettier": "^2.7.1"
   },
-  "gitHead": "ba3bddff0fbbcf7f9a79c9a346dcf1810c0435fc"
+  "gitHead": "bb89ecfc4767e5799d59141d633d5955666fd8bf"
 }

package/src/base.js

@@ -96,14 +96,12 @@ const StyledMin = styled.main`
   height: 100%;
   .filter-bar {
     justify-content: space-between;
-    margin-bottom: ${(props) => {
-      return props.theme.spacing(2);
-    }};
+    margin-bottom: ${(props) => props.theme.spacing(2)};
   }
   .sort-button {
     white-space: nowrap;
   }
-  .search-container {
+  .bl-search-container {
     flex: 2;
     margin-left: 0px;
   }
@@ -114,7 +112,7 @@ const StyledMin = styled.main`
     justify-content: flex-end;
   }
   @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
-    .search-container {
+    .bl-search-container {
       width: 100%;
       margin-bottom: ${(props) => props.theme.spacing(2)};
     }

package/src/components/autocomplete/index.js

@@ -10,8 +10,6 @@ import constant from '../../libs/constant';
 import { useFilterContext } from '../../contexts/filter';
 import Blocklet from './item';
 
-import '@algolia/autocomplete-theme-classic';
-
 const cachePool = new Map();
 
 export default function Autocomplete() {
@@ -74,9 +72,10 @@ export default function Autocomplete() {
         panelRootRef.current.render(children);
       },
       classNames: {
-        panel: 'blocklet-list-panel',
-        label: 'blocklet-list-label',
-        form: 'blocklet-list-form',
+        panel: 'bl-autocomplete-panel',
+        label: 'bl-autocomplete-label',
+        form: 'bl-autocomplete-form',
+        input: 'bl-autocomplete-input',
       },
       placeholder: t('common.searchStore'),
       initialState: {
@@ -127,7 +126,7 @@ export default function Autocomplete() {
                 );
               },
               noResults() {
-                return 'No results.';
+                return t('blocklet.noResults');
               },
             },
           },
@@ -140,5 +139,5 @@ export default function Autocomplete() {
     };
   }, [endpoint, filters, getResults, muiTheme, onReset, onSubmit, t]);
 
-  return <div className="search-container" ref={containerRef} />;
+  return <div className="bl-search-container" ref={containerRef} />;
 }

package/src/index.js

@@ -4,8 +4,8 @@ import SelectBase from './base';
 import { FilterProvider } from './contexts/filter';
 import { propTypes, defaultProps } from './libs/prop-types';
 import { toColorRgb } from './libs/utils';
-
-import '@algolia/autocomplete-theme-classic';
+// 不知道为什么引入 theme.min.css 话，blocklet-store 打包就会报错
+import '@algolia/autocomplete-theme-classic/dist/theme.css';
 
 export default function BlockletList(props) {
   const muiTheme = useTheme();
@@ -21,15 +21,15 @@ export default function BlockletList(props) {
         --aa-primary-color-rgb: ${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b} !important;
         --aa-input-background-color-rgb: 250, 250, 250 !important;
       }
-      .blocklet-list-panel {
+      .bl-autocomplete-panel {
         z-index: ${theme.zIndex.modal + 1} !important;
       }
-      .blocklet-list-label {
+      .bl-autocomplete-label {
         .aa-SubmitIcon {
           color: ${theme.palette.grey[500]} !important;
         }
       }
-      .blocklet-list-form {
+      .bl-autocomplete-form {
         border: none !important;
         &:focus-within {
           box-shadow: none !important;