plain-design 1.0.0-beta.147 → 1.0.0-beta.148

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

@@ -1,221 +1,221 @@
-@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;
-        text-align: center;
-
-        svg + div {
-          margin-top: $margin;
-        }
-      }
-    }
-  }
-}
+@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;
+        text-align: center;
+
+        svg + div {
+          margin-top: $margin;
+        }
+      }
+    }
+  }
+}

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

@@ -1,112 +1,112 @@
-import {iMouseEvent} from "@peryl/react-compose";
-
-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>
-    );
-  },
-};
+import {iMouseEvent} from "@peryl/react-compose";
+
+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>
+    );
+  },
+};