plain-design 1.0.0-beta.78 → 1.0.0-beta.79

package/src/packages/components/$search/search-service.scss

@@ -0,0 +1,220 @@
+@include comp(dialog) {
+  &.#{componentName(search-service)} {
+    align-items: flex-start;
+    padding: 80px 0;
+
+    .dialog-content {
+      overflow: hidden;
+    }
+
+    @include comp(empty) {
+      min-height: 100px;
+    }
+
+    .search-service-input-box {
+      @include comp(input) {
+        border-color: plv(primary-6) !important;
+
+        .input-box {
+          color: plv(primary-6) !important;
+          font-size: 1.2em;
+          height: 2.5em !important;
+        }
+
+        .input-prefix-icon {
+          width: 2em;
+          font-size: 1.6em;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: plv(primary-6);
+          position: relative;
+          left: 0.15em;
+        }
+        .input-suffix-icon-wrapper {
+          width: 1.5em;
+          font-size: 1.6em;
+        }
+        @include comp(loading) {
+        }
+      }
+    }
+
+    .search-service-foot {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.8em;
+      color: plv(text-3);
+      border-top: solid 1px plv(border-color);
+
+      & > * + * {
+        display: inline-block;
+        margin-left: 1em;
+      }
+
+      svg {
+        position: relative;
+        top: -1px;
+      }
+    }
+
+    .search-service-option-virtual-list {
+      height: 50vh;
+    }
+
+    .search-service-option-item {
+      user-select: none;
+
+      .search-service-option-item-default {
+        text-align: left;
+        box-sizing: border-box;
+
+        &[data-service-item-type="group"] {
+          .search-service-option-item-default-title {
+            font-weight: 600;
+            color: plv(primary-6);
+            font-size: 1em;
+          }
+        }
+
+        &:not([data-service-item-type="group"]) {
+          background-color: plv(bg-4);
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
+          transition: all ease 150ms;
+
+          .search-service-option-item-default-box {
+            display: flex;
+            align-items: center;
+
+            .search-service-option-item-default-label {
+              flex: 1;
+              display: flex;
+              flex-direction: column;
+            }
+
+            .search-service-option-item-default-button {
+              opacity: 0;
+              display: flex;
+              align-items: center;
+            }
+          }
+        }
+
+      }
+
+      &[data-active=true] {
+        .search-service-option-item-default {
+          &:not([data-service-item-type="group"]) {
+            background-color: plv(primary-6);
+
+            svg, .search-service-option-item-default-label {
+              color: plv(pbfc);
+
+              span {
+                color: plv(pbfc) !important;
+              }
+            }
+
+            .search-service-option-item-default-button {
+              opacity: 1;
+            }
+          }
+        }
+      }
+
+      .search-service-option-item-default-button {
+        padding: 0.2em;
+
+        &[data-search-button="favorite"], &[data-search-button="remove"] {
+          &:hover {
+            background-color: plv(primary-8);
+            border-radius: 99px;
+          }
+        }
+
+        &[data-search-button="favorite"] {
+          &:hover {
+            path {
+              fill: plv(pbfc)
+            }
+          }
+        }
+
+        & + .search-service-option-item-default-button {
+          margin-left: 0.1em !important;
+        }
+      }
+    }
+  }
+
+  @include comp(search-service-panel) {
+    @include sizeMixin(box, ()) {
+      .search-service-input-box {
+        padding: $margin;
+        @include comp(input) {
+          border-radius: calc(#{$border-radius} / 1.5);
+        }
+      }
+      .search-service-foot {
+        padding: calc(#{$margin});
+      }
+
+      .search-service-option-item {
+        width: calc(100% - (#{$margin} * 2));
+        margin-left: $margin;
+        padding-bottom: 8px;
+
+        .search-service-option-item-default {
+          border-radius: calc(#{$border-radius} / 1.5);
+
+          &:not([data-service-item-type="group"]) {
+            padding: calc(#{$margin} / 2);
+            cursor: pointer;
+
+            .search-service-option-item-default-box {
+              min-height: calc(3.5em - #{$margin} / 2);
+
+              & > * + * {
+                margin-left: 0.5em;
+              }
+
+              .search-service-option-item-default-tree {
+                width: 1.8em;
+                height: 3.2em;
+              }
+
+              .search-service-option-item-default-label {
+
+                & > span:nth-child(1) {
+                  color: plv(text-1);
+                }
+
+                & > span:nth-child(2) {
+                  color: plv(text-3);
+                  font-size: 0.8em;
+                  margin-top: 0.25em;
+                }
+              }
+            }
+          }
+        }
+      }
+      .search-service-option-item-default {
+        &[data-service-item-type="group"] {
+          .search-service-option-item-default-title {
+          }
+        }
+      }
+
+      .search-service-empty {
+        padding-bottom: $margin;
+        margin: $margin 0;
+
+        svg + div {
+          margin-top: $margin;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,112 @@
+import {iMouseEvent} from "plain-design-composition";
+
+export interface iSearchDataRender {
+  (dataMeta: iSearchDataMeta): any;
+}
+
+export interface iSearchDataMeta {
+  title?: string,
+  desc?: string,
+  type: 'group' | 'page' | 'header' | 'sub_header' | 'content' | 'favorite' | 'history',
+  data?: any
+}
+
+export interface iSearchServiceDefaultConfig {
+  width: number,
+  render?: iSearchDataRender,
+  placeholder: string,
+  footer?: () => any,
+  cacheName?: string,
+}
+
+export interface iSearchServiceCustomConfig {
+  getData: (searchKey: string) => Promise<iSearchDataMeta[]>,
+  onSelect: (data: iSearchDataMeta) => void,
+}
+
+export type iSearchServiceConfig = iSearchServiceDefaultConfig & iSearchServiceCustomConfig
+
+export const SearchType2Icon: Record<iSearchDataMeta['type'], () => any> = {
+  group: () => null,
+  page: () => (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <path d="M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4" stroke="currentColor" fill="none" fillRule="evenodd" strokeLinejoin="round"></path>
+    </svg>
+  ),
+  header: () => (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <path d="M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z" stroke="currentColor" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round"></path>
+    </svg>
+  ),
+  sub_header: () => (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <path d="M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z" stroke="currentColor" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round"></path>
+    </svg>
+  ),
+  content: () => (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <path d="M17 5H3h14zm0 5H3h14zm0 5H3h14z" stroke="currentColor" fill="none" fillRule="evenodd" strokeLinejoin="round"></path>
+    </svg>
+  ),
+  history: () => (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <g stroke="currentColor" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M3.18 6.6a8.23 8.23 0 1112.93 9.94h0a8.23 8.23 0 01-11.63 0"></path>
+        <path d="M6.44 7.25H2.55V3.36M10.45 6v5.6M10.45 11.6L13 13"></path>
+      </g>
+    </svg>
+  ),
+  favorite: () => (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <path d="M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z" stroke="currentColor" fill="none" fillRule="evenodd" strokeLinejoin="round"></path>
+    </svg>
+  ),
+};
+
+export const SearchTreeIcon = {
+  normal: () => (<svg className="search-service-option-item-default-tree" viewBox="0 0 24 54">
+    <g stroke="currentColor" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M8 6v42M20 27H8.3"></path>
+    </g>
+  </svg>),
+  last: () => (
+    <svg className="search-service-option-item-default-tree" viewBox="0 0 24 54">
+      <g stroke="currentColor" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M8 6v21M20 27H8.3"></path>
+      </g>
+    </svg>
+  )
+};
+
+export const SearchOptionButton = {
+  normal: (onClick?: (e: iMouseEvent) => void) => {
+    return (
+      <div key="normal" className="search-service-option-item-default-button" data-search-button="normal" onClick={onClick}>
+        <svg width="20" height="20" viewBox="0 0 20 20">
+          <g stroke="currentColor" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M18 3v4c0 2-2 4-4 4H2"></path>
+            <path d="M8 17l-6-6 6-6"></path>
+          </g>
+        </svg>
+      </div>
+    );
+  },
+  favorite: (onClick?: (e: iMouseEvent) => void) => {
+    return (
+      <div key="favorite" className="search-service-option-item-default-button" data-search-button="favorite" onClick={onClick}>
+        <svg width="20" height="20" viewBox="0 0 20 20">
+          <path d="M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z" stroke="currentColor" fill="none" fillRule="evenodd" strokeLinejoin="round"></path>
+        </svg>
+      </div>
+    );
+  },
+  remove: (onClick?: (e: iMouseEvent) => void) => {
+    return (
+      <div key="remove" className="search-service-option-item-default-button" data-search-button="remove" onClick={onClick}>
+        <svg width="20" height="20" viewBox="0 0 20 20">
+          <path d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z" stroke="currentColor" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round"></path>
+        </svg>
+      </div>
+    );
+  },
+};

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, Fragment, getComponentCls, iHTMLDivElement, mergeAttrs, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, Fragment, getComponentCls, iHTMLDivElement, mergeAttrs, onMounted, useClasses, useRefs, useStyles} from "plain-design-composition";
 import './index.scss';
 import {ThemeStatus, useStyle} from "../../uses/useStyle";
 import {useEdit} from "../../uses/useEdit";
@@ -17,6 +17,7 @@ import {useFocusHandler} from "../../uses/useFocusHandler";
 import {useSuggestionInput} from "./useSuggestionInput";
 import {useMultipleModel} from "../../uses/useMultipleModel";
 import {useParentPopupId} from "../usePopup/utils/popup.utils";
+import {delay} from "plain-utils/utils/delay";
 
 export const Input = designComponent({
   name: '-input',
@@ -106,6 +107,13 @@ export const Input = designComponent({
     hooks.onInput.use(val => emit.onInput(val));
     hooks.onSuggestion.use(data => emit.onSuggestion(data));
 
+    onMounted(async () => {
+      await delay(78);
+      if (attrs.autoFocus) {
+        refs.input?.focus();
+      }
+    });
+
     return {
       refer: {
         model,

package/src/packages/components/Input/input.utils.ts

@@ -26,10 +26,11 @@ export const InputPropsOption = {
   multipleSeparator: { default: /[\s\n,，]/ },                                  // 多值输入的时候的分隔符。类型为字符串或者正则表达式；有这个分隔符的话，会自动按照这个分隔符对输入的文本分割
   fixedWidth: { type: Boolean },                                                // InputGroup下是否固定宽度
   bare: { type: Boolean },                                                      // 去掉包裹节点
+  loadingType: { type: String },                                                // loading类型
 
   /*clear*/
   noClear: { type: Boolean },                                                   // 去掉清空按钮
-  clearHandler: { type: Function as PropType<(e: iMouseEvent) => void> },     // 自定义处理清空逻辑
+  clearHandler: { type: Function as PropType<(e: iMouseEvent) => void> },       // 自定义处理清空逻辑
 
   /*textarea*/
   textarea: { type: Boolean },                                                  // 当前是否为文本域输入框

package/src/packages/components/Input/uses/useInputSuffixIcon.tsx

@@ -59,7 +59,7 @@ export function useInputSuffixIcon({ slots, hooks, props, editComputed, model, e
       <span className="input-suffix-icon-wrapper" onMouseDown={handler.onMousedownSuffix}>
         {hasSuffixIcon.value && slots.suffixIconContent(<Icon icon={props.suffixIcon} className="input-suffix-icon"/>)}
         {hasSuffixClear.value && (<Icon icon="pi-close-circle-fill" className="input-suffix-clear"/>)}
-        {editComputed.value.loading && <Loading/>}
+        {editComputed.value.loading && <Loading type={props.loadingType}/>}
       </span>
     );
 

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

@@ -8,6 +8,7 @@ import {VerticalScrollbar} from "./VerticalScrollbar";
 import {HorizontalScrollbar} from "./HorizontalScrollbar";
 import {ResizeDetectFuncParam, useResizeDetector} from "../../directives/ResizeDetector";
 import {createScrollUtils} from "../createScrollUtils";
+import {getRectAutoFormat} from "plain-utils/dom/getRectAutoFormat";
 
 export enum PLAIN_SCROLL_VERTICAL_POSITION {
   top = 'top',
@@ -213,6 +214,39 @@ export const Scroll = designComponent({
       autoScrollLeft() {scrollUtils.autoScrollLeft();},
       autoScrollRight() {scrollUtils.autoScrollRight();},
       stopAutoScroll() {scrollUtils.stopAutoScroll();},
+      showElement: (elementSelector: string | HTMLElement): boolean => {
+        if (!refs.host || !refs.content) {return false;}
+        const selectElement = typeof elementSelector === "string" ? refs.content?.querySelector(elementSelector) : elementSelector;
+
+        if (selectElement == null) {return false;}
+        const selectElementRect = getRectAutoFormat(selectElement as any);
+        const contentElementRect = getRectAutoFormat(refs.content);
+        const hostElementRect = getRectAutoFormat(refs.host);
+
+        /*vertical*/
+        if (selectElementRect.bottom >= hostElementRect.bottom) {
+          /*在下面*/
+          const offsetTop = selectElementRect.top - contentElementRect.top;
+          methods.scrollTop(offsetTop - (hostElementRect.height - selectElementRect.height));
+        } else if (selectElementRect.top <= hostElementRect.top) {
+          /*在上面*/
+          const offsetTop = selectElementRect.top - contentElementRect.top;
+          methods.scrollTop(offsetTop);
+        }
+
+        /*horizontal*/
+        if (selectElementRect.right >= hostElementRect.right) {
+          /*在右边*/
+          const offsetLeft = selectElementRect.left - contentElementRect.left;
+          methods.scrollLeft(offsetLeft - (hostElementRect.width - selectElementRect.width));
+        } else if (selectElementRect.left <= hostElementRect.left) {
+          /*在左边*/
+          const offsetLeft = selectElementRect.left - contentElementRect.left;
+          methods.scrollLeft(offsetLeft);
+        }
+
+        return true;
+      },
       /**
        * 禁用list的队列动画，300ms后恢复正常
        * @author  韦胜健

package/src/packages/components/Table/standard/PlcTree/PlcTree.renderNode.tsx

@@ -58,6 +58,9 @@ export function usePlcTreeRenderNode(
    */
   const renderTreeNode = (renderScope: iTableCellRenderScope) => {
     const treeNode = treeCore.flatNodeComputedData.value[renderScope.node.state.index];
+    if (!treeNode) {
+      return null;
+    }
     return (
       <RenderPlcTreeNode
         treeCore={treeCore}

package/src/packages/entry.tsx

@@ -189,6 +189,14 @@ export type {
   iPlainResponseDataType,
   iHttpResponseDataType
 } from './components/createHttp/http.utils';
+export type {
+  iSearchServiceCustomConfig,
+  iSearchServiceConfig,
+  iSearchServiceDefaultConfig,
+  iSearchDataMeta,
+  iSearchDataRender,
+} from './components/$search/search.utils';
+export {$search} from './components/$search';
 
 export {Address} from './components/Address';
 export {AddressCascade} from './components/AddressCascade';

package/src/packages/i18n/lang/en-us.ts

@@ -305,5 +305,13 @@ export const EnUsLocale: tZhCnLocale = {
     洋红: 'Magenta',
     极昼: 'Light',
     黑夜: 'Dark',
-  }
+  },
+  search: {
+    select: 'Select',
+    switch: 'Switch',
+    noHistory: 'No Search History',
+    noMatch: 'There are no search result that can match "{val}"',
+    searchHistory: 'Search History',
+    favorite: 'Favorite'
+  },
 };

package/src/packages/i18n/lang/zh-cn.ts

@@ -115,8 +115,8 @@ export const ZhCnLocale = {
       save: '保存',
       done: '完成',
     },
-    yes:'是',
-    no:'否',
+    yes: '是',
+    no: '否',
   },
   formatter: {
     week: 'gggg年第ww周',
@@ -303,7 +303,15 @@ export const ZhCnLocale = {
     洋红: '洋红',
     极昼: '极昼',
     黑夜: '黑夜',
-  }
+  },
+  search: {
+    select: '选择',
+    switch: '切换',
+    noHistory: '没有搜索历史',
+    noMatch: '无法找到搜索结果 "{val}"',
+    searchHistory: '搜索历史',
+    favorite: '收藏'
+  },
 } as const;
 
 type ZhCnLocaleUtils<T> = { [k in keyof T]: T[k] extends string ? string : ZhCnLocaleUtils<T[k]> }

package/src/packages/utils/createListUtils.ts

@@ -0,0 +1,38 @@
+export function createListUtils<T>(
+  {
+    getList,
+    current,
+  }: {
+    getList: () => T[],
+    current: () => number | undefined | null,
+  }
+) {
+  return {
+    prevIndex: () => {
+      const list = getList();
+      if (!list.length) {
+        return -1;
+      }
+      let curIdx = current();
+      if (curIdx == null || curIdx - 1 < 0) {
+        curIdx = list.length - 1;
+      } else {
+        curIdx = curIdx - 1;
+      }
+      return curIdx;
+    },
+    nextIndex: () => {
+      const list = getList();
+      if (!list.length) {
+        return -1;
+      }
+      let curIdx = current();
+      if (curIdx == null || curIdx + 1 > list.length - 1) {
+        curIdx = 0;
+      } else {
+        curIdx = curIdx + 1;
+      }
+      return curIdx;
+    },
+  };
+}