plain-design 1.0.0-beta.1 → 1.0.0-beta.100

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/$upload/createUploadService.tsx

@@ -44,7 +44,7 @@ export function createUploadService(config: iUploadServiceConfig) {
       });
       uploadConfig.onSuccess?.(response);
     } catch (e) {
-      $notice.error(`${i18n('file.uploadFailed').d('上传失败')},` + String(e).toString());
+      $notice.error(`${i18n.$it('file.uploadFailed').d('上传失败')},` + String(e).toString());
       uploadConfig.onError?.(e as any);
       throw e;
     }

package/src/packages/components/AddressCascade/createAddressCascade.multiple.tsx

@@ -35,6 +35,7 @@ export function createAddressCascadeMultiple(
 
   effects.push(hooks.onRender.use({
     processor: ({ list, render }) => {list.push({ render, key: '1', seq: 1 });},
+    separate: false,
     render: () => (
       <Cascade
         modelValue={state.modelMetas}

package/src/packages/components/AddressCascade/createAddressCascade.single.tsx

@@ -58,6 +58,7 @@ export function createAddressCascadeSingle(
 
   effects.push(hooks.onRender.use({
     processor: ({ list, render }) => {list.push({ render, key: '1', seq: 1 });},
+    separate: false,
     render: () => (
       <Cascade
         modelValue={metaArray.value}

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

@@ -8,6 +8,7 @@ import {createAddressCascadeHooks} from "./createAddressCascade.hooks";
 import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
 import {createAddressCascadeMultiple} from "./createAddressCascade.multiple";
 import {createAddressCascadeSingle} from "./createAddressCascade.single";
+import {useEdit} from "../../uses/useEdit";
 
 export const AddressCascade = designComponent({
   name: 'address-cascade',
@@ -17,6 +18,7 @@ export const AddressCascade = designComponent({
   setup({ props, event }) {
 
     useStyle();
+    useEdit();
 
     const hooks = createAddressCascadeHooks();
 

package/src/packages/components/Alert/alert.scss

@@ -4,15 +4,16 @@
   border-radius: plv(box-size-normal-border-radius);
   position: relative;
   padding: 8px 16px;
+  line-height: initial;
 
   .alert-label {
     font-size: plv(font-size-small);
-    line-height: 1.5715;
+    line-height: plv(line-height);
   }
 
   .alert-desc {
     font-size: plv(font-size-small);
-    line-height: 1.5715;
+    line-height: plv(line-height);
   }
 
   &.alert-has-icon {
@@ -23,7 +24,7 @@
       position: absolute;
       width: $icon-width-normal;
       left: 0;
-      top: 0.15em;
+      top: 0.075em;
       padding-top: inherit;
       display: inline-flex;
       align-items: center;
@@ -37,6 +38,7 @@
     padding-right: $close-width;
 
     .alert-close {
+      border-radius: inherit;
       position: absolute;
       top: 0;
       right: 0;
@@ -112,6 +114,7 @@
 
   &.alert-theme-lite {
     @include statusMixin(alert) {
+      border:solid 1px $color-3;
       background-color: $color-light-2;
       color: $color-6;
       .alert-close {
@@ -125,7 +128,7 @@
   &.alert-theme-deep {
     @include statusMixin(alert) {
       background-color: $color-6;
-      color: white;
+      color: plv(pbfc);
       .alert-close {
         &:hover {
           background-color: $color-8;

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

@@ -17,7 +17,7 @@ export const Alert = designComponent({
     theme: { type: String, default: 'lite' },                     // 主题，lite轻色，deep深色
     noClose: { type: Boolean },                                   // 禁用关闭
     icon: { type: String as PropType<string | null | undefined>, default: undefined },     // 显示的图标
-    message: { type: String },                                    // desc内容消息
+    description: { type: String },                                    // desc内容消息
   },
   slots: ['desc', 'close', 'default'],
   setup({ props, slots, attrs }) {
@@ -46,7 +46,7 @@ export const Alert = designComponent({
       `alert-align-${props.align}`,
       {
         'alert-has-icon': !!icon.value,
-        'alert-has-desc': !!props.message || slots.desc.isExist(),
+        'alert-has-desc': !!props.description || slots.desc.isExist(),
         'alert-has-close': !props.noClose,
       }
     ]);
@@ -76,9 +76,9 @@ export const Alert = designComponent({
                   {slots.default(props.label)}
                 </div>
               )}
-              {(props.message || slots.desc.isExist()) && (
+              {(props.description || slots.desc.isExist()) && (
                 <div className="alert-desc">
-                  {slots.desc(props.message)}
+                  {slots.desc(props.description)}
                 </div>
               )}
             </div>

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

@@ -4,13 +4,15 @@ import {DeepPartial} from "../../utils/type";
 import './application.scss';
 import {useApplicationService} from "./service/useApplicationService";
 import {createThemeConfigurationData} from "./theme/theme";
-import {ThemeShape, ThemeSize} from "../../uses/useStyle";
+import {InputMode, ThemeMode, ThemeShape, ThemeSize} from "../../uses/useStyle";
 import {useApplicationPopup} from "../usePopup/usePopupManager";
 
 export const Application = designComponent({
   name: 'application',
   props: {
-    configuration: { type: Object as PropType<DeepPartial<iApplicationConfiguration>>, }
+    configuration: { type: Object as PropType<DeepPartial<iApplicationConfiguration>>, },
+    defaultInputMode: { type: String as PropType<typeof InputMode.TYPE>, default: InputMode.flat },
+    defaultButtonMode: { type: String as PropType<typeof ThemeMode.TYPE>, default: ThemeMode.stroke },
   },
   slots: ['default'],
   setup({ props, slots }) {
@@ -21,7 +23,8 @@ export const Application = designComponent({
       default: {
         size: ThemeSize.normal,
         shape: ThemeShape.square,
-        inputMode: 'flat',
+        inputMode: props.defaultInputMode,
+        buttonMode: props.defaultButtonMode,
         ...props.configuration?.default,
       },
     }));

package/src/packages/components/Application/service/createApplicationServiceManager.tsx

@@ -84,8 +84,11 @@ export function createApplicationServiceManager<Option extends { hold?: boolean
                 option={item}
                 ref={onRefList(i)}
                 onDestroy={() => {
-                  options.value.splice(i, 1);
-                  optionIds.splice(i, 1);
+                  const index = options.value.indexOf(item);
+                  if (index > -1) {
+                    options.value.splice(index, 1);
+                    optionIds.splice(index, 1);
+                  }
                 }}
                 onReady={() => serviceReadyObserver.onReady({ option: item, ins: refList[i] })}
               />

package/src/packages/components/Application/service/useApplicationService.tsx

@@ -2,6 +2,7 @@ import {getComponentCls, getCurrentDesignInstance, markRaw, onBeforeUnmount, Por
 import {defer, DFD} from 'plain-utils/utils/defer';
 import {createCounter} from "plain-utils/utils/createCounter";
 import {APPLICATION_SERVICE_CONTAINER_CLASS, ApplicationHooks} from "../utils/application.utils";
+import {$previewer} from "../../$previewer";
 
 /**
  * applications渲染manager数组的时候，给manager传递的 getManagerData函数的返回值类型
@@ -104,6 +105,7 @@ export function useApplicationService() {
       render: () => (
         <Portal to="body">
           <div className={getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}>
+            {$previewer.render()}
             {state.managers.map(({ getManagerData, RenderComponent, dfd, id }, index) => {
               return (
                 <RenderComponent