plain-design 1.0.0-beta.81 → 1.0.0-beta.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.81",
+  "version": "1.0.0-beta.83",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -34,7 +34,7 @@
     "color": "4.2.3",
     "dayjs": "1.11.10",
     "plain-icons": "0.0.7",
-    "plain-utils": "^0.1.62",
+    "plain-utils": "^0.1.63",
     "react-flip-move": "3.0.5",
     "react-transition-group": "4.4.5"
   },

package/src/packages/components/$search/SearchList.tsx

@@ -147,7 +147,7 @@ export const SearchList = designComponent({
             return (
               <div className="search-service-option-item-default" data-service-item-type={item.type}>
                 {item.type == 'group' ? (
-                  <div className="search-service-option-item-default-title">{item.title}</div>
+                  <div className="search-service-option-item-default-title">{i18n.$intl(item.title || '').d(item.title || '')}</div>
                 ) : (
                   <div className="search-service-option-item-default-box" onClick={() => methods.selectItem(item)}>
                     {isLastSubHeader != null && SearchTreeIcon[isLastSubHeader ? 'last' : 'normal']()}

package/src/packages/components/Paragraph/index.tsx

@@ -0,0 +1,46 @@
+import {designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
+import './paragraph.scss';
+import {ParagraphItem} from "../ParagraphItem";
+import {i18n} from "../i18n";
+
+export const Paragraph = designComponent({
+  name: 'paragraph',
+  props: {
+    order: { type: Boolean },
+    list: { type: [String, Array] as PropType<string | string[]> },
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const classes = useClasses(() => [
+      getComponentCls('paragraph')
+    ]);
+
+    return () => {
+      const Type = props.order ? 'ol' : 'ul';
+      return (
+        <Type className={classes.value}>
+          {slots.default()}
+          {!!props.list?.length && (() => {
+            let arr: string[] = [];
+            if (typeof props.list === "string") {
+              const i18nResult = i18n.$intl(props.list).d(props.list);
+              if (Array.isArray(i18nResult)) {
+                arr.push(...i18nResult);
+              } else {
+                arr.push(i18nResult);
+              }
+            } else {
+              arr.push(...props.list);
+            }
+            return arr.map((item, index) => (
+              <ParagraphItem key={index}>{item}</ParagraphItem>
+            ));
+          })()}
+        </Type>
+      );
+    };
+  },
+});
+
+export default Paragraph;

package/src/packages/components/Paragraph/paragraph.scss

@@ -0,0 +1,12 @@
+@include comp(paragraph) {
+
+  margin: 0;
+  padding-inline-start: 2em;
+
+  @include comp(paragraph-item) {
+
+    & + .#{componentName(paragraph-item)} {
+      margin-top: 1em;
+    }
+  }
+}

package/src/packages/components/ParagraphItem/index.tsx

@@ -0,0 +1,20 @@
+import {designComponent, getComponentCls, useClasses} from "plain-design-composition";
+
+export const ParagraphItem = designComponent({
+  props: {},
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const classes = useClasses(() => [
+      getComponentCls('paragraph-item')
+    ]);
+
+    return () => (
+      <li className={classes.value}>
+        {slots.default()}
+      </li>
+    );
+  },
+});
+
+export default ParagraphItem

package/src/packages/entry.tsx

@@ -121,6 +121,8 @@ export {PageCard} from './components/PageCard';
 export {PageCardTitle} from './components/PageCardTitle';
 export {PageCardContent} from './components/PageCardContent';
 export {RollingNumber} from './components/RollingNumber';
+export {Paragraph} from './components/Paragraph';
+export {ParagraphItem} from './components/ParagraphItem';
 
 export {VirtualTable} from './components/VirtualTable';
 export {Table} from './components/Table';