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

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

@@ -9,114 +9,120 @@ export const EnUsLocale: tZhCnLocale = {
     reset: 'Reset',
     loading: 'Loading',
     loaded: 'Loaded',
-    loadFailed: 'Load Failed',
+    loadFailed: 'Load failed',
     clear: 'Clear',
     close: 'Close',
-    width: 'width',
-    empty: 'no data',
-    more: 'more',
-    selectData: 'select data',
-    selectPieceOfData: 'select piece of data',
-    selectAtLeastOnePieceOfData: 'select at lease on piece of data',
-    prevStep: 'previous step',
-    nextStep: 'next step',
-    total: 'total',
-    data: 'rows',
-    go: 'go',
-    page: 'page',
-    totalPage: 'total {total} rows',
-    collapse: 'collapse',
-    main: 'main',
-    fixed: 'fixed',
-    hide: 'hidden',
-    exportData: 'export data',
-    custom: 'custom',
-    setting: 'setting',
-    asc: 'asc',
-    desc: 'desc',
-    sort: 'sort',
-    name: 'name',
-    pleaseSelect: 'please select',
-    noData: 'no data',
-    noMatch: 'no match',
-    query: 'query',
-    id: 'id',
-    isEmpty: 'is empty',
-    isNotEmpty: 'is not empty',
-    largerThan: 'larger than',
-    lessThan: 'less than',
-    and: 'and',
-    invalidAmount: 'invalid amount',
-    province: 'province',
-    city: 'city',
-    district: 'district',
-    lookUp: 'look up',
-    operation: 'operation',
-    noFilter: 'no filter',
+    width: 'Width',
+    empty: 'No data',
+    more: 'More',
+    selectData: 'Select Data',
+    selectPieceOfData: 'Select piece of data',
+    selectAtLeastOnePieceOfData: 'Select at lease on piece of data',
+    prevStep: 'Previous step',
+    nextStep: 'Next step',
+    total: 'Total',
+    data: 'Rows',
+    go: 'Go',
+    page: 'Page',
+    totalPage: 'Total {total} rows',
+    collapse: 'Collapse',
+    main: 'Main',
+    fixed: 'Fixed',
+    hide: 'Hidden',
+    exportData: 'Export data',
+    custom: 'Custom',
+    setting: 'Setting',
+    asc: 'Asc',
+    desc: 'Desc',
+    sort: 'Sort',
+    name: 'Name',
+    pleaseSelect: 'Please select',
+    noData: 'No data',
+    noMatch: 'No match',
+    query: 'Search',
+    id: 'ID',
+    isEmpty: 'Is empty',
+    isNotEmpty: 'Is not empty',
+    largerThan: 'Larger than',
+    lessThan: 'Less than',
+    and: 'And',
+    invalidAmount: 'Invalid amount',
+    province: 'Province',
+    city: 'City',
+    district: 'District',
+    lookUp: 'Look up',
+    operation: 'Operation',
+    noFilter: 'No filter',
+    back: 'Back',
+    error403: 'You do not have permission to access this page',
+    error404: 'The page does not exist or has expired',
+    error500: 'Page abnormality, please report the issue to the system administrator',
     validate: {
-      require: 'require',
-      notMatchPattern: 'not match patter',
-      canNotUseMinInAnyType: 'any type cannot use min validation',
-      canNotUseMaxInAnyType: 'any type cannot use max validation',
-      canNotUseLenInAnyType: 'any type cannot use len validation',
-      outOfRange: 'value "{value}" is out of range {range}',
-      pleaseEnterArrayValue: 'please enter array value',
-      arrayCannotUsePatternValidation: 'array cannot use pattern validation',
-      minimunValues: 'minimun {num} values',
-      maximunValues: 'maximun {num} values',
-      minimunCharacters: 'minimun {num} characters',
-      maximunCharacters: 'maximun {num} characters',
-      fixedValues: 'fixed {num} values',
-      fixedCharacters: 'fixed {num} characters',
-      notLessThan: 'not less than {num}',
-      notLargerThan: 'not larger than{num}',
-      minValue: 'min {num}',
-      maxValue: 'max {num}',
-      fixedLength: 'fixed length {num} characters',
-      pleaseEnterCorrectEmail: 'please enter correct email',
-      pleaseEnterCorrectIdCard: 'please enter correct idcard',
-      pleaseEnterNumber: 'please enter correct number',
-      pleaseEnterCorrectPhoneNumber: 'please enter correct phone number',
-      pleaseEnterCorrectQQNum: 'please enter correct qq',
-      valueShouldBeStringOrNumber: 'please enter correct string or number',
+      require: ' Require',
+      notMatchPattern: ' not match patter',
+      canNotUseMinInAnyType: ' any type cannot use min validation',
+      canNotUseMaxInAnyType: ' any type cannot use max validation',
+      canNotUseLenInAnyType: ' any type cannot use len validation',
+      outOfRange: ' value "{value}" is out of range {range}',
+      pleaseEnterArrayValue: ' please enter array value',
+      arrayCannotUsePatternValidation: ' array cannot use pattern validation',
+      minimunValues: ' minimun {num} values',
+      maximunValues: ' maximun {num} values',
+      minimunCharacters: ' minimun {num} characters',
+      maximunCharacters: ' maximun {num} characters',
+      fixedValues: ' fixed {num} values',
+      fixedCharacters: ' fixed {num} characters',
+      notLessThan: ' not less than {num}',
+      notLargerThan: ' not larger than{num}',
+      minValue: ' min {num}',
+      maxValue: ' max {num}',
+      fixedLength: ' fixed length {num} characters',
+      pleaseEnterCorrectEmail: ' please enter correct email',
+      pleaseEnterCorrectIdCard: ' please enter correct idcard',
+      pleaseEnterNumber: ' please enter correct number',
+      pleaseEnterCorrectPhoneNumber: ' please enter correct phone number',
+      pleaseEnterCorrectQQNum: ' please enter correct qq',
+      valueShouldBeStringOrNumber: ' please enter correct string or number',
 
     },
     filter: {
-      like: 'like',
-      equal: 'equal',
-      notInclude: 'not include',
-      include: 'include',
-      range: 'range',
+      like: 'Like',
+      equal: 'Equal',
+      notInclude: 'Not include',
+      include: 'Include',
+      range: 'Range',
     },
     select: {
-      all: 'all',
-      reverse: 'reverse',
-      none: 'clear',
-      selectOptionsAtMost: 'select {val} options at most',
-      selectOptionsAtLeast: 'select {val} options at least',
+      all: 'All',
+      reverse: 'Reverse',
+      none: 'Clear',
+      selectOptionsAtMost: 'Select {val} options at most',
+      selectOptionsAtLeast: 'Select {val} options at least',
     },
-    zoomIn: 'zoom in',
-    zoomOut: 'zoom out',
-    address: 'address',
+    zoomIn: 'Zoom in',
+    zoomOut: 'Zoom out',
+    address: 'Address',
     edit: {
-      create: 'create',
-      edit: 'edit',
-      remove: 'delete',
-      apply: 'apply',
-      override: 'override',
-      copy: 'copy',
-      rename: 'rename',
-      add: 'add',
-      expandAll: 'expand all',
-      collapseAll: 'collapse all',
-      summary: 'sum',
-      save: 'save',
-      done: 'done',
+      create: 'Create',
+      edit: 'Edit',
+      remove: 'Delete',
+      apply: 'Apply',
+      override: 'Override',
+      copy: 'Copy',
+      rename: 'Rename',
+      add: 'Add',
+      expandAll: 'Expand all',
+      collapseAll: 'Collapse all',
+      summary: 'Sum',
+      save: 'Save',
+      done: 'Done',
     },
+    yes: 'YES',
+    no: 'NO',
   },
   formatter: {
-    week: 'year gggg,week ww',
-    quarter: 'year YYYY, quarter Q',
+    week: 'Year gggg,week ww',
+    quarter: 'Year YYYY, quarter Q',
   },
   week: {
     sunday: 'SUN',
@@ -142,106 +148,172 @@ export const EnUsLocale: tZhCnLocale = {
     december: 'DEV',
   },
   file: {
-    upload: 'upload',
-    selectFile: 'select file',
-    toBeUpload: 'to be upload',
-    uploadFailed: 'upload failed',
-    dropFilesOr: 'drop file here, or',
+    upload: 'Upload',
+    selectFile: 'Select file',
+    toBeUpload: 'To be upload',
+    uploadFailed: 'Upload failed',
+    dropFilesOr: 'Drop file here, or',
     clickToUpload: 'click to upload',
     oversize: '[{filename}]file size is {filesize}MB，the maximunize is {max}MB',
-    notUpload: 'not upload',
+    notUpload: 'Not upload',
     areYouSureToDeleteFile: 'Are you sure to delete {name} ?',
-    uploadFileSucceed: 'file {name} upload success',
+    uploadFileSucceed: 'File {name} upload success',
   },
   image: {
-    compressByImageMeasure: 'compress by image measure',
-    compressByImageCapacity: 'compress by image capacity',
-    noPicture: 'no picture',
-    rotation90: 'rotate 90 degree',
-    rotation_90: 'rotate -90 degree',
-    prevPicture: 'previous pickture',
-    nextPicture: 'next picture',
+    compressByImageMeasure: 'Compress by image measure',
+    compressByImageCapacity: 'Compress by image capacity',
+    noPicture: 'No picture',
+    rotation90: 'Rotate 90 degree',
+    rotation_90: 'Rotate -90 degree',
+    prevPicture: 'Previous pickture',
+    nextPicture: 'Next picture',
   },
   table: {
-    exportingData: 'exporting data',
-    exportCompleted: 'export completed',
-    exportFailed: 'export failed',
-    expression: 'expresison',
-    configSeniorFilter: 'senior filter',
-    formFilter: 'form filter',
-    formQuery: 'form query',
-    searchBar: 'search bar',
-    pleaseEditSearchParam: 'please input search param directly',
-    allFilter: 'all filter',
-    noFilter: 'no filter',
-    clearAll: 'clear all',
-    pleaseInputThConfigurationName: 'please input configuration name',
-    bak: 'backup',
+    exportingData: 'Exporting data',
+    exportCompleted: 'Export completed',
+    exportFailed: 'Export failed',
+    expression: 'Expresison',
+    configSeniorFilter: 'Senior filter',
+    formFilter: 'Form filter',
+    formQuery: 'Form query',
+    searchBar: 'Search bar',
+    pleaseEditSearchParam: 'Please input search param directly',
+    allFilter: 'All filter',
+    noFilter: 'No filter',
+    clearAll: 'Clear all',
+    pleaseInputThConfigurationName: 'Please input configuration name',
+    bak: 'Backup',
     areYouSureToOverrideTheConfiguration: 'Are you sure to override "{title}" to be the latest configuration',
-    cacheSetting: 'cache setting',
-    clearFilterSortAndConfiguration: 'clear filter, sort and configuration',
-    withoutAnyConfiguration: 'use none configuration',
-    saveToNewConfiguration: 'save current to be new configuration',
-    cacheName: 'cache name',
-    createTime: 'create time',
-    customSetting: 'custom setting',
-    title: 'title',
-    alignType: 'align type',
-    alignLeft: 'left',
-    alignCenter: 'center',
-    alignRight: 'right',
-    exportCurrentPageData: 'export current page data',
-    exportDataInTable: 'export data showed in table',
-    exportAllDataWithFilterSortMaybeFailedWithLargeData: 'export all data by sort and filter condition(maybe failed with latge data)',
-    selectDataToExport: 'select data to export',
-    customSelectDataToExport: 'custom select data to export',
-    selectExportType: 'select export type',
-    selectExportFields: 'select export fields',
-    exportType: 'export type',
-    exportFields: 'export fields',
-    exportData: 'export data',
-    exportShowData: 'export show data',
-    fieldName: 'field name',
-    exportAgain: 'export again',
-    importData: 'import data',
-    pleaseEnterCompleteParamsForCondition: 'please input complete param for the {invalidIndex} condition ',
-    seniorFilter: 'senior filter',
-    pleaseAddFilterCondition: 'please add filter condition',
-    seniorQuery: 'senior query',
-    ascOrDesc: 'asc or desc',
-    formEdit: 'form edit',
-    batchCreate: 'batch create',
-    batchDelete: 'batch delete',
-    batchEdit: 'batch edit',
-    batchModify: 'batch modify',
-    seniorSort: 'senior sort',
-    canNotDeleteUsingCache: 'can not delete cache which is using',
-    columnFilter: 'column filter',
-    distinctFilter: 'distinct filter',
+    cacheSetting: 'Cache setting',
+    clearFilterSortAndConfiguration: 'Clear filter, sort and configuration',
+    withoutAnyConfiguration: 'Use none configuration',
+    saveToNewConfiguration: 'Save current to be new configuration',
+    cacheName: 'Cache name',
+    createTime: 'Create time',
+    customSetting: 'Custom setting',
+    title: 'Title',
+    alignType: 'Align type',
+    alignLeft: 'Left',
+    alignCenter: 'Center',
+    alignRight: 'Right',
+    exportCurrentPageData: 'Export current page data',
+    exportDataInTable: 'Export data showed in table',
+    exportCurrentAllData: 'Export current all data',
+    exportAllDataWithFilterSortMaybeFailedWithLargeData: 'Export all data by sort and filter condition(maybe failed with latge data)',
+    selectDataToExport: 'Select data to export',
+    customSelectDataToExport: 'Custom select data to export',
+    selectExportType: 'Select export type',
+    selectExportFields: 'Select export fields',
+    exportType: 'Export type',
+    exportFields: 'Export fields',
+    exportData: 'Export data',
+    exportShowData: 'Export show data',
+    fieldName: 'Field name',
+    exportAgain: 'Export again',
+    importData: 'Import data',
+    pleaseEnterCompleteParamsForCondition: 'Please input complete param for the {invalidIndex} condition ',
+    seniorFilter: 'Senior filter',
+    pleaseAddFilterCondition: 'Please add filter condition',
+    seniorQuery: 'Senior query',
+    ascOrDesc: 'Asc Or Desc',
+    formEdit: 'Form edit',
+    batchCreate: 'Batch create',
+    batchDelete: 'Batch delete',
+    batchEdit: 'Batch edit',
+    batchModify: 'Batch modify',
+    seniorSort: 'Senior sort',
+    canNotDeleteUsingCache: 'Can not delete cache which is using',
+    columnFilter: 'Column filter',
+    distinctFilter: 'Distinct filter',
     filterTipInclude: '{field} includes {val}',
-    clearDistinctFilter: 'clear distinct filter',
-    continueCreate: 'continue create',
-    pleaseSelectOneRecord: 'please select one record',
-    selectRowToDelete: 'select row to delete',
+    clearDistinctFilter: 'Clear distinct filter',
+    continueCreate: 'Continue create',
+    pleaseSelectOneRecord: 'Please select one record',
+    selectRowToDelete: 'Select row to delete',
     areYouSureYouWantToDeleteTheData: 'Are you sure to delete the {index} record?',
-    deleteFailed: 'delete failed',
-    savingData: 'saving',
-    articleDataVerificationFailed: 'the {index} record is invalid',
-    pleaseEnterTheNumberOfRowsToCreate: 'please input the number of rows to create',
-    deleting: 'deleting',
-    deleteSucceed: 'delete succeed',
-    queryTotalFailed: 'query total failed',
-    sortInTypeOrderOfField: 'sort by {description}',
-    pleaseEnterSearchKey: 'please input search key',
+    deleteFailed: 'Delete failed',
+    savingData: 'Saving',
+    articleDataVerificationFailed: 'The {index} record is invalid',
+    pleaseEnterTheNumberOfRowsToCreate: 'Please input the number of rows to create',
+    deleting: 'Deleting',
+    deleteSucceed: 'Delete succeed',
+    queryTotalFailed: 'Query total failed',
+    sortInTypeOrderOfField: 'Sort by {description}',
+    pleaseEnterSearchKey: 'Please input search key',
     rowPerPage: '{num} per page',
-    checkAll: 'check all',
-    checkClear: 'check clear',
-    fixedLeft: 'fixed left',
-    fixedRight: 'fixed right',
-    pleaseClickNext: 'please click next step',
-    tableScrollTips: 'scroll by wheeling on table head or scroll with wheeling and press alt to scroll horizontal',
-    pleaseEnterNewConfigName: 'please input new config name',
-    queryTotal: 'query total',
-    columnTitle: 'column title',
+    checkAll: 'Check all',
+    checkClear: 'Check clear',
+    fixedLeft: 'Fixed left',
+    fixedRight: 'Fixed right',
+    pleaseClickNext: 'Please click next step',
+    tableScrollTips: 'Scroll by wheeling on table head or scroll with wheeling and press alt to scroll horizontal',
+    pleaseEnterNewConfigName: 'Please input new config name',
+    queryTotal: 'Query total',
+    columnTitle: 'Column title',
+  },
+  theme: {
+    inputMode: 'INPUT MODE',
+    inputModeFlat: 'Flat',
+    inputModelStroke: 'Stroke',
+    buttonMode: 'BUTTON MODE',
+    buttonModeFlat: 'Flat',
+    buttonModeFill: 'Fill',
+    buttonModeOutline: 'Outline',
+    buttonModeStroke: 'Stroke',
+    buttonModeText: 'Text',
+    primaryColor: 'PRIMARY COLOR',
+    size: 'SIZE',
+    sizeLarge: 'Large',
+    sizeNormal: 'Normal',
+    sizeSmall: 'Small',
+    sizeMini: 'Mini',
+    darkMode: 'DARK MODE',
+    darkModeOn: 'Dark',
+    darkModeOff: 'Light',
+    radiusMode: 'RADIUS MODE',
+    radiusModeRound: 'Round',
+    radiusModeNormal: 'Filet',
+    radiusModeNone: 'None',
+    scale: 'SCALE',
+    pageScale: 'Page Scale',
+    reset: 'RESET',
+    resetThem: 'Reset Theme',
+    darkOrLight: 'Dark / Light',
+    sizeOptions: {
+      large: 'Large',
+      normal: 'Normal',
+      small: 'Small',
+      mini: 'Mini',
+    },
+    radiusOptions: {
+      round: 'Corner',
+      square: 'Small Corner',
+      none: 'None',
+    }
+  },
+  colorName: {
+    默认主题: 'Default',
+    薄暮: 'Twilight',
+    火山: 'Volcano',
+    日暮: 'Sunset',
+    金盏花: 'MarigoldFlower',
+    日出: 'sunrise',
+    青柠: 'GreenLime',
+    极光绿: 'AuroraGreen',
+    明青: 'MingQing',
+    拂晓蓝: 'FuXiaolan',
+    极客蓝: 'GeekBlue',
+    酱紫: 'SaucePurple',
+    洋红: '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

@@ -51,6 +51,10 @@ export const ZhCnLocale = {
     lookUp: '查看',
     operation: '操作',
     noFilter: '暂无筛选',
+    back: '返回',
+    error403: '您没有权限访问该页面',
+    error404: '页面不存在或者页面已经失效',
+    error500: '页面异常，请向系统管理员反馈问题',
     validate: {
       require: '必填',
       notMatchPattern: '不符合表达式',
@@ -111,6 +115,8 @@ export const ZhCnLocale = {
       save: '保存',
       done: '完成',
     },
+    yes: '是',
+    no: '否',
   },
   formatter: {
     week: 'gggg年第ww周',
@@ -190,6 +196,7 @@ export const ZhCnLocale = {
     alignRight: '右对齐',
     exportCurrentPageData: '导出当前页数据',
     exportDataInTable: '导出表格当前显示的数据',
+    exportCurrentAllData: '导出当前所有数据',
     exportAllDataWithFilterSortMaybeFailedWithLargeData: '根据当前的筛选排序条件导出所有数据(数据量比较大的话可能会导出失败)',
     selectDataToExport: '选择需要导出的数据',
     customSelectDataToExport: '自定义选择导出需要的数据',
@@ -242,6 +249,71 @@ export const ZhCnLocale = {
     queryTotal: '查询总数',
     columnTitle: '列标题',
   },
+  theme: {
+    inputMode: '输入框类型',
+    inputModeFlat: '填充',
+    inputModelStroke: '描边',
+    buttonMode: '按钮类型',
+    buttonModeFlat: '扁平',
+    buttonModeFill: '填充',
+    buttonModeOutline: '线框',
+    buttonModeStroke: '描边',
+    buttonModeText: '文字',
+    primaryColor: '主题色',
+    size: '大小尺寸',
+    sizeLarge: '大尺寸',
+    sizeNormal: '中等尺寸',
+    sizeSmall: '小尺寸',
+    sizeMini: '极小尺寸',
+    darkMode: '黑白主题',
+    darkModeOn: '黑色主题',
+    darkModeOff: '白色主题',
+    radiusMode: '圆角类型',
+    radiusModeRound: '圆角',
+    radiusModeNormal: '小圆角',
+    radiusModeNone: '无圆角',
+    scale: '大小缩放',
+    pageScale: '页面缩放',
+    reset: '重置',
+    resetThem: '重置主题',
+    darkOrLight: '深浅主题',
+    sizeOptions: {
+      large: '大',
+      normal: '中',
+      small: '小',
+      mini: '极小',
+    },
+    radiusOptions: {
+      round: '圆角',
+      square: '小圆角',
+      none: '无圆角',
+    }
+  },
+  colorName: {
+    默认主题: '默认主题',
+    薄暮: '薄暮',
+    火山: '火山',
+    日暮: '日暮',
+    金盏花: '金盏花',
+    日出: '日出',
+    青柠: '青柠',
+    极光绿: '极光绿',
+    明青: '明青',
+    拂晓蓝: '拂晓蓝',
+    极客蓝: '极客蓝',
+    酱紫: '酱紫',
+    洋红: '洋红',
+    极昼: '极昼',
+    黑夜: '黑夜',
+  },
+  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/styles/global.import.scss

@@ -55,7 +55,7 @@
 }
 
 @mixin hover($component) {
-  &:not(.#{$component}-disabled):not(.#{$component}-loading):not(.#{$component}-readonly) {
+  &:not(.#{$component}-disabled):not(.#{$component}-loading):not(.#{$component}-readonly):not(.#{$component}-focus) {
     &:hover, &.#{$component}-hover {
       @content;
     }
@@ -98,6 +98,22 @@
         #{$attr}: plv(box-size-#{$key}-#{$attr});
       }
       @content;
+
+      &.mt{margin-top: $margin}
+      &.mb{margin-bottom: $margin}
+      &.ml{margin-left: $margin}
+      &.mr{margin-right: $margin}
+      &.mx{margin-left: $margin;margin-right: $margin}
+      &.my{margin-top: $margin;margin-bottom: $margin}
+      &.margin {margin: $margin}
+
+      &.pt{padding-top: $margin}
+      &.pb{padding-bottom: $margin}
+      &.pl{padding-left: $margin}
+      &.pr{padding-right: $margin}
+      &.px{padding-left: $margin;padding-right: $margin}
+      &.py{padding-top: $margin;padding-bottom: $margin}
+      &.padding {padding: $margin}
     }
   }
 }

package/src/packages/uses/useCollapseStyles.tsx

@@ -0,0 +1,56 @@
+import {computed, iTransitionEvent, reactive, StyleProperties, useStyleCache, watch} from "plain-design-composition";
+import {delay} from "plain-utils/utils/delay";
+
+export function useCollapseStyles(
+  {
+    isShow,
+    active,
+    inactive
+  }: {
+    isShow: () => boolean,
+    active: () => StyleProperties,
+    inactive: () => StyleProperties,
+  }
+) {
+
+  const state = (() => {
+    const show = isShow();
+    return reactive({
+      isMount: show,
+      styles: show ? active() : inactive(),
+
+      onTransitionEnd: undefined as undefined | ((e: iTransitionEvent) => void)
+    });
+  })();
+
+  watch(() => isShow(), async show => {
+    if (show) {
+      if (!state.isMount) {
+        state.isMount = true;
+        await delay(23);
+      }
+      state.styles = active();
+      state.onTransitionEnd = undefined;
+    } else {
+      if (!state.isMount) {
+        return;
+      }
+      await delay(23);
+      state.styles = inactive();
+      state.onTransitionEnd = () => {
+        state.isMount = false;
+        state.onTransitionEnd = undefined;
+      };
+    }
+  });
+
+  const styles = useStyleCache(styles => {
+    Object.assign(styles, state.styles);
+  });
+
+  return reactive({
+    styles,
+    show: computed(() => state.isMount),
+    onTransitionEnd: (e: iTransitionEvent) => state.onTransitionEnd?.(e)
+  });
+}