@univerjs/ui 0.1.2 → 0.1.3

package/lib/index.css

@@ -1 +1 @@
-.univer-ui-plugin-sheets-font-family{overflow:hidden;width:120px;font-size:var(--font-size-xs);text-overflow:ellipsis;white-space:nowrap}.univer-ui-plugin-sheets-font-family-item{font-size:var(--font-size-xs)}.univer-ui-plugin-sheets-font-size{width:28px;height:24px;font-size:var(--font-size-xs)}.univer-ui-plugin-sheets-font-size-input{height:24px;line-height:24px;background-color:transparent;border:none}.univer-ui-plugin-sheets-font-size-input input{font-size:var(--font-size-xs);background-color:transparent}.univer-menu-item-no-hover{background:none}.univer-menu-item-content{display:inline-flex;gap:var(--margin-xs);align-items:center}.univer-menu-item-selectable{position:relative;padding-left:var(--padding-xl)}.univer-menu-item-selectable-icon{position:absolute;left:0;display:inline-flex;align-items:center;font-size:var(--font-size-lg)}.univer-menu-item-more-icon{font-size:var(--font-size-sm);color:rgb(var(--text-color))}.univer-app-layout{display:flex;flex-direction:column;height:100%;background-color:rgb(var(--bg-color))}.univer-app-container{position:relative;display:flex;flex:1;flex-direction:column}.univer-app-container-header{position:relative;z-index:10;width:100%}.univer-app-container-wrapper{display:grid;grid-template-columns:1fr auto;height:100%;overflow:hidden}.univer-app-container-content{position:relative;overflow:hidden;display:grid;grid-template-rows:auto 1fr;flex:1;background-color:rgb(var(--bg-color-secondary));border-bottom:1px solid rgb(var(--border-color))}.univer-app-container-canvas{position:relative}.univer-app-container-sidebar{height:100%}.univer-toolbar-btn{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0;font-size:var(--font-size-lg);color:rgb(var(--text-color));background-color:transparent;border:none;border-radius:var(--border-radius-base);outline:none}.univer-toolbar-btn:not([disabled]):hover{background-color:rgb(var(--grey-100))}.univer-toolbar-btn[disabled]{cursor:not-allowed;color:rgb(var(--grey-200))}.univer-toolbar-btn-active{background-color:rgb(var(--grey-100))}.univer-headerbar{user-select:none;position:relative}.univer-headerbar>.univer-header-menu{position:absolute;top:0;right:0;display:flex;box-sizing:border-box;height:100%}.univer-headerbar>.univer-header-menu>div{user-select:none;display:inline-flex;align-items:center;height:28px;margin-left:4px;padding:2px 4px;text-align:center;border-radius:4px}.univer-headerbar>.univer-header-menu>div:hover{background-color:rgb(var(--grey-300))}.univer-menubar{display:flex;gap:var(--margin-xs);align-items:center;justify-content:center;height:32px}.univer-menubar-item{cursor:pointer;display:block;padding:var(--padding-xs) var(--padding-sm);font-size:var(--font-size-xs);font-weight:400;border-radius:var(--border-radius-base);transition:all .1s ease-in-out}.univer-menubar-item:hover:not(.univer-menubar-item-active){background:rgb(var(--grey-300))}.univer-menubar-item-active{color:rgb(var(--color-white));background:rgb(var(--primary-color))}.univer-toolbar{user-select:none;position:relative;display:flex;align-items:center;box-sizing:border-box;height:32px;font-size:var(--font-size-base);color:rgb(var(--text-color));background-color:rgb(var(--bg-color-secondary));border-bottom:1px solid rgb(var(--border-color))}.univer-toolbar-container{display:flex;gap:var(--margin-xs);align-items:center;justify-content:center;box-sizing:border-box;height:100%;margin:0 auto}.univer-toolbar-more{max-width:80%}.univer-toolbar-more-container{display:grid;gap:var(--margin-xs) 0;box-sizing:border-box;padding:var(--padding-sm);background-color:rgb(var(--bg-color-secondary));border-radius:var(--border-radius-base);box-shadow:var(--box-shadow-base)}.univer-toolbar-more-container .univer-toolbar-group{flex-wrap:wrap}.univer-toolbar-more-container .univer-toolbar-group:not(:last-child):after{content:initial}.univer-toolbar-group{display:flex;gap:var(--margin-xs);align-items:center}.univer-toolbar-group:not(:last-child,:empty):after{content:"";display:block;width:1px;height:20px;background-color:rgb(var(--border-color))}.univer-toolbar-item-select-button{cursor:pointer;position:relative;overflow:hidden;display:flex;gap:var(--margin-xs);align-items:center;height:24px;padding-right:18px;font-size:var(--font-size-lg);border-radius:var(--border-radius-base)}.univer-toolbar-item-select-button-disabled{cursor:not-allowed;color:rgb(var(--grey-200))}.univer-toolbar-item-select-button:hover,.univer-toolbar-item-select-button:hover .univer-toolbar-item-select-button-label{background-color:rgb(var(--grey-100))}.univer-toolbar-item-select-button-label{position:relative;z-index:1;display:flex;align-items:center;height:100%;padding:0 var(--padding-xs)}.univer-toolbar-item-select-button-label:hover{background-color:rgb(var(--grey-300))!important}.univer-toolbar-item-select-button-arrow{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;width:100%;height:100%;padding-right:var(--padding-xs);font-size:10px;color:rgb(var(--grey-400))}.univer-toolbar-item-select-button-arrow:hover{background-color:rgb(var(--grey-300))}.univer-toolbar-item-select{cursor:pointer;position:relative;display:flex;gap:var(--margin-xs);align-items:center;height:24px;padding:0 var(--padding-xs);font-size:var(--font-size-lg);border-radius:var(--border-radius-base)}.univer-toolbar-item-select-disabled{cursor:not-allowed;color:rgb(var(--grey-200))}.univer-toolbar-item-select:hover{background-color:rgb(var(--grey-100));border-radius:var(--border-radius-base)}.univer-toolbar-item-select-arrow{display:flex;align-items:center;height:100%;font-size:10px;color:rgb(var(--grey-400))}.univer-toolbar-item-select-arrow-disabled{cursor:not-allowed;color:rgb(var(--grey-200))}.univer-sidebar{position:relative;transform:translate(100%);box-sizing:border-box;width:0;height:100%;color:rgb(var(--text-color));transition:all .15s}.univer-sidebar.univer-sidebar-open{transform:translate(0);width:380px}.univer-sidebar-container{overflow-y:auto;display:grid;grid-template-rows:auto 1fr auto;box-sizing:border-box;width:100%;height:0;min-height:100%;margin:auto;background-color:rgb(var(--bg-color-secondary));border-bottom:1px solid rgb(var(--border-color));border-left:1px solid rgb(var(--border-color))}.univer-sidebar-header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;height:44px;padding:var(--padding-xl) var(--padding-xl) 0;font-size:var(--font-size-lg);font-weight:500;background:rgb(var(--bg-color-secondary))}.univer-sidebar-header-close{cursor:pointer;color:rgb(var(--text-color-secondary))}.univer-sidebar-body{padding:0 var(--padding-xl)}.univer-sidebar-footer{position:sticky;bottom:0;padding:var(--padding-xl);background:rgb(var(--bg-color-secondary))}.univer-zen-zone{position:absolute;display:none}.univer-zen-zone-open{z-index:100;top:0;left:0;display:block;width:100%;height:100%;background:rgb(var(--bg-color))}.univer-zen-zone-close{display:none}.univer-notification{position:fixed;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;box-sizing:border-box;margin:var(--margin-xs) 0}.univer-notification-notice{display:flex;gap:var(--margin-xs);justify-content:space-between;width:280px;padding:var(--padding-lg);font-size:var(--font-size-lg);background-color:rgb(var(--color-white));border-radius:var(--border-radius-base);box-shadow:var(--box-shadow-lg)}.univer-notification-notice-wrapper{margin:var(--margin-xs) var(--margin-base)}.univer-notification-notice-content{display:inline-flex;gap:var(--margin-xs);align-items:center;align-items:flex-start}.univer-notification-notice-close{cursor:pointer;display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;padding:var(--padding-xs);color:rgb(var(--text-color-secondary));border-radius:var(--border-radius-base);outline:none;transition:background-color .2s}.univer-notification-notice-close:hover{background-color:rgb(var(--bg-color-hover))}.univer-notification-icon{padding:var(--padding-xs)}.univer-notification-icon-success{color:rgb(var(--success-color))}.univer-notification-icon-info{color:rgb(var(--info-color))}.univer-notification-icon-warning{color:rgb(var(--warning-color))}.univer-notification-icon-error{color:rgb(var(--error-color))}.univer-notification-content-container{display:inline-flex;flex-direction:column;gap:var(--margin-xs);align-items:flex-start;padding-top:var(--padding-xs)}.univer-notification-title{color:rgb(var(--text-color))}.univer-notification-content{color:rgb(var(--text-color-secondary))}.univer-notification-content-ellipsis{overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical}.univer-notification-top,.univer-notification-topLeft,.univer-notification-topRight{top:0}.univer-notification-bottom,.univer-notification-bottomRight,.univer-notification-bottomLeft{bottom:0}.univer-notification-bottomRight,.univer-notification-topRight{right:0}.univer-notification-fade{overflow:hidden;transition:all .3s}.univer-notification-fade-appear-prepare{opacity:0}.univer-notification-fade-appear-start{transform:translate(100%);opacity:0}.univer-notification-fade-appear-active{transform:translate(0);opacity:1}.univer-notification-fade-appear,.univer-notification-fade-enter{opacity:0;animation-play-state:paused;animation-duration:.3s;animation-timing-function:cubic-bezier(.55,0,.55,.2);animation-fill-mode:both}.univer-notification-fade-leave{animation-duration:.3s;animation-timing-function:cubic-bezier(.55,0,.55,.2);animation-fill-mode:both;animation-play-state:paused}.univer-notification-fade-appear.univer-notification-fade-appear-active,.univer-notification-fade-enter.univer-notification-fade-enter-active{animation-name:univer-notification-fade-in;animation-play-state:running}.univer-notification-fade-leave.univer-notification-fade-leave-active{animation-name:univer-notification-fade-out;animation-play-state:running}@keyframes univer-notification-fade-in{0%{opacity:0}to{opacity:1}}@keyframes univer-notification-fade-out{0%{opacity:1}to{opacity:0}}.univer-global-zone{position:absolute;display:none}.univer-global-zone-open{z-index:100;top:0;left:0;display:block;width:100%;height:100%;background:rgb(var(--bg-color))}.univer-global-zone-close{display:none}.univer-shortcut-panel-group-title{height:40px;font-size:13px;font-weight:700;line-height:40px}.univer-shortcut-panel-item{display:flex;justify-content:space-between;height:40px;font-size:13px;line-height:40px}.univer-shortcut-panel-item-title{overflow:hidden;flex-grow:1;flex-shrink:1;max-width:200px;text-overflow:ellipsis;text-wrap:nowrap}.univer-shortcut-panel-item-shortcut{flex-grow:0;flex-shrink:0}.univer-shortcut-panel-item:not(:last-of-type){border-bottom:1px solid rgb(var(--grey-200))}.univer-text-editor-container{position:relative;width:100%;height:30px;user-select:none;border:1px solid rgb(var(--border-color));transition:all .15s;border-radius:var(--border-radius-base)}.univer-text-editor-container:hover,.univer-text-editor-container:active,.univer-text-editor-container-active{border:1px solid rgb(var(--primary-color))}.univer-text-editor-container-error,.univer-text-editor-container-error:hover{border:1px solid rgb(var(--error-color))}.univer-text-editor-validation-error{font-size:10px;color:rgb(var(--error-color))}
+.univer-ui-plugin-sheets-font-family{overflow:hidden;width:120px;font-size:var(--font-size-xs);text-overflow:ellipsis;white-space:nowrap}.univer-ui-plugin-sheets-font-family-item{font-size:var(--font-size-xs)}.univer-ui-plugin-sheets-font-size{width:28px;height:24px;font-size:var(--font-size-xs)}.univer-ui-plugin-sheets-font-size-input{height:24px;line-height:24px;background-color:transparent;border:none}.univer-ui-plugin-sheets-font-size-input input{font-size:var(--font-size-xs);background-color:transparent}.univer-menu-item-no-hover{background:none}.univer-menu-item-content{display:inline-flex;gap:var(--margin-xs);align-items:center}.univer-menu-item-selectable{position:relative;padding-left:var(--padding-xl)}.univer-menu-item-selectable-icon{position:absolute;left:0;display:inline-flex;align-items:center;font-size:var(--font-size-lg)}.univer-menu-item-more-icon{font-size:var(--font-size-sm);color:rgb(var(--text-color))}.univer-app-layout{display:flex;flex-direction:column;height:100%;background-color:rgb(var(--bg-color))}.univer-app-container{position:relative;display:flex;flex:1;flex-direction:column}.univer-app-container-header{position:relative;z-index:10;width:100%}.univer-app-container-wrapper{display:grid;grid-template-columns:1fr auto;height:100%;overflow:hidden}.univer-app-container-content{position:relative;overflow:hidden;display:grid;grid-template-rows:auto 1fr;flex:1;background-color:rgb(var(--bg-color-secondary));border-bottom:1px solid rgb(var(--border-color))}.univer-app-container-canvas{position:relative}.univer-app-container-sidebar{height:100%}.univer-toolbar-btn{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0;font-size:var(--font-size-lg);color:rgb(var(--text-color));background-color:transparent;border:none;border-radius:var(--border-radius-base);outline:none}.univer-toolbar-btn:not([disabled]):hover{background-color:rgb(var(--grey-100))}.univer-toolbar-btn[disabled]{cursor:not-allowed;color:rgb(var(--grey-200))}.univer-toolbar-btn-active{background-color:rgb(var(--grey-100))}.univer-headerbar{user-select:none;position:relative}.univer-headerbar>.univer-header-menu{position:absolute;top:0;right:0;display:flex;box-sizing:border-box;height:100%}.univer-headerbar>.univer-header-menu>div{user-select:none;display:inline-flex;align-items:center;height:28px;margin-left:4px;padding:2px 4px;text-align:center;border-radius:4px}.univer-headerbar>.univer-header-menu>div:hover{background-color:rgb(var(--grey-300))}.univer-menubar{display:flex;gap:var(--margin-xs);align-items:center;justify-content:center;height:32px}.univer-menubar-item{cursor:pointer;display:block;padding:var(--padding-xs) var(--padding-sm);font-size:var(--font-size-xs);font-weight:400;border-radius:var(--border-radius-base);transition:all .1s ease-in-out}.univer-menubar-item:hover:not(.univer-menubar-item-active){background:rgb(var(--grey-300))}.univer-menubar-item-active{color:rgb(var(--color-white));background:rgb(var(--primary-color))}.univer-toolbar{user-select:none;position:relative;display:flex;align-items:center;box-sizing:border-box;height:32px;font-size:var(--font-size-base);color:rgb(var(--text-color));background-color:rgb(var(--bg-color-secondary));border-bottom:1px solid rgb(var(--border-color))}.univer-toolbar-container{display:flex;gap:var(--margin-xs);align-items:center;justify-content:center;box-sizing:border-box;height:100%;margin:0 auto}.univer-toolbar-more{max-width:80%}.univer-toolbar-more-container{display:grid;gap:var(--margin-xs) 0;box-sizing:border-box;padding:var(--padding-sm);background-color:rgb(var(--bg-color-secondary));border-radius:var(--border-radius-base);box-shadow:var(--box-shadow-base)}.univer-toolbar-more-container .univer-toolbar-group{flex-wrap:wrap}.univer-toolbar-more-container .univer-toolbar-group:not(:last-child):after{content:initial}.univer-toolbar-group{display:flex;gap:var(--margin-xs);align-items:center}.univer-toolbar-group:not(:last-child,:empty):after{content:"";display:block;width:1px;height:20px;background-color:rgb(var(--border-color))}.univer-toolbar-item-select-button{cursor:pointer;position:relative;overflow:hidden;display:flex;gap:var(--margin-xs);align-items:center;height:24px;padding-right:18px;font-size:var(--font-size-lg);border-radius:var(--border-radius-base)}.univer-toolbar-item-select-button-disabled{cursor:not-allowed;color:rgb(var(--grey-200))}.univer-toolbar-item-select-button:hover,.univer-toolbar-item-select-button:hover .univer-toolbar-item-select-button-label{background-color:rgb(var(--grey-100))}.univer-toolbar-item-select-button-label{position:relative;z-index:1;display:flex;align-items:center;height:100%;padding:0 var(--padding-xs)}.univer-toolbar-item-select-button-label:hover{background-color:rgb(var(--grey-300))!important}.univer-toolbar-item-select-button-arrow{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;width:100%;height:100%;padding-right:var(--padding-xs);font-size:10px;color:rgb(var(--grey-400))}.univer-toolbar-item-select-button-arrow:hover{background-color:rgb(var(--grey-300))}.univer-toolbar-item-select{cursor:pointer;position:relative;display:flex;gap:var(--margin-xs);align-items:center;height:24px;padding:0 var(--padding-xs);font-size:var(--font-size-lg);border-radius:var(--border-radius-base)}.univer-toolbar-item-select-disabled{cursor:not-allowed;color:rgb(var(--grey-200))}.univer-toolbar-item-select:hover{background-color:rgb(var(--grey-100));border-radius:var(--border-radius-base)}.univer-toolbar-item-select-arrow{display:flex;align-items:center;height:100%;font-size:10px;color:rgb(var(--grey-400))}.univer-toolbar-item-select-arrow-disabled{cursor:not-allowed;color:rgb(var(--grey-200))}.univer-sidebar{position:relative;transform:translate(100%);box-sizing:border-box;width:0;height:100%;color:rgb(var(--text-color));transition:all .15s}.univer-sidebar.univer-sidebar-open{transform:translate(0);width:380px}.univer-sidebar-container{overflow-y:auto;display:grid;grid-template-rows:auto 1fr auto;box-sizing:border-box;width:100%;height:0;min-height:100%;margin:auto;background-color:rgb(var(--bg-color-secondary));border-bottom:1px solid rgb(var(--border-color));border-left:1px solid rgb(var(--border-color))}.univer-sidebar-header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;height:44px;padding:var(--padding-xl) var(--padding-xl) 0;font-size:var(--font-size-lg);font-weight:500;background:rgb(var(--bg-color-secondary))}.univer-sidebar-header-close{cursor:pointer;color:rgb(var(--text-color-secondary))}.univer-sidebar-body{padding:0 var(--padding-xl)}.univer-sidebar-footer{position:sticky;bottom:0;padding:var(--padding-xl);background:rgb(var(--bg-color-secondary))}.univer-zen-zone{position:absolute;display:none}.univer-zen-zone-open{z-index:100;top:0;left:0;display:block;width:100%;height:100%;background:rgb(var(--bg-color))}.univer-zen-zone-close{display:none}.univer-notification{position:fixed;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;box-sizing:border-box;margin:var(--margin-xs) 0}.univer-notification-notice{display:flex;gap:var(--margin-xs);justify-content:space-between;width:280px;padding:var(--padding-lg);font-size:var(--font-size-lg);background-color:rgb(var(--color-white));border-radius:var(--border-radius-base);box-shadow:var(--box-shadow-lg)}.univer-notification-notice-wrapper{margin:var(--margin-xs) var(--margin-base)}.univer-notification-notice-content{display:inline-flex;gap:var(--margin-xs);align-items:center;align-items:flex-start}.univer-notification-notice-close{cursor:pointer;display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;padding:var(--padding-xs);color:rgb(var(--text-color-secondary));border-radius:var(--border-radius-base);outline:none;transition:background-color .2s}.univer-notification-notice-close:hover{background-color:rgb(var(--bg-color-hover))}.univer-notification-icon{padding:var(--padding-xs)}.univer-notification-icon-success{color:rgb(var(--success-color))}.univer-notification-icon-info{color:rgb(var(--info-color))}.univer-notification-icon-warning{color:rgb(var(--warning-color))}.univer-notification-icon-error{color:rgb(var(--error-color))}.univer-notification-content-container{display:inline-flex;flex-direction:column;gap:var(--margin-xs);align-items:flex-start;padding-top:var(--padding-xs)}.univer-notification-title{color:rgb(var(--text-color))}.univer-notification-content{color:rgb(var(--text-color-secondary))}.univer-notification-content-ellipsis{overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical}.univer-notification-top,.univer-notification-topLeft,.univer-notification-topRight{top:0}.univer-notification-bottom,.univer-notification-bottomRight,.univer-notification-bottomLeft{bottom:0}.univer-notification-bottomRight,.univer-notification-topRight{right:0}.univer-notification-fade{overflow:hidden;transition:all .3s}.univer-notification-fade-appear-prepare{opacity:0}.univer-notification-fade-appear-start{transform:translate(100%);opacity:0}.univer-notification-fade-appear-active{transform:translate(0);opacity:1}.univer-notification-fade-appear,.univer-notification-fade-enter{opacity:0;animation-play-state:paused;animation-duration:.3s;animation-timing-function:cubic-bezier(.55,0,.55,.2);animation-fill-mode:both}.univer-notification-fade-leave{animation-duration:.3s;animation-timing-function:cubic-bezier(.55,0,.55,.2);animation-fill-mode:both;animation-play-state:paused}.univer-notification-fade-appear.univer-notification-fade-appear-active,.univer-notification-fade-enter.univer-notification-fade-enter-active{animation-name:univer-notification-fade-in;animation-play-state:running}.univer-notification-fade-leave.univer-notification-fade-leave-active{animation-name:univer-notification-fade-out;animation-play-state:running}@keyframes univer-notification-fade-in{0%{opacity:0}to{opacity:1}}@keyframes univer-notification-fade-out{0%{opacity:1}to{opacity:0}}.univer-global-zone{position:absolute;display:none}.univer-global-zone-open{z-index:100;top:0;left:0;display:block;width:100%;height:100%;background:rgb(var(--bg-color))}.univer-global-zone-close{display:none}.univer-shortcut-panel-group-title{height:40px;font-size:13px;font-weight:700;line-height:40px}.univer-shortcut-panel-item{display:flex;justify-content:space-between;height:40px;font-size:13px;line-height:40px}.univer-shortcut-panel-item-title{overflow:hidden;flex-grow:1;flex-shrink:1;max-width:200px;text-overflow:ellipsis;text-wrap:nowrap}.univer-shortcut-panel-item-shortcut{flex-grow:0;flex-shrink:0}.univer-shortcut-panel-item:not(:last-of-type){border-bottom:1px solid rgb(var(--grey-200))}.univer-text-editor-container{position:relative;width:100%;height:30px;user-select:none;border:1px solid rgb(var(--border-color));transition:all .15s;border-radius:var(--border-radius-base)}.univer-text-editor-container:hover,.univer-text-editor-container:active,.univer-text-editor-container-active,.univer-text-editor-container-active:hover{border:1px solid rgb(var(--hyacinth-500))}.univer-text-editor-container-error,.univer-text-editor-container-error:hover{border:1px solid rgb(var(--red-400))}.univer-text-editor-container-disabled,.univer-text-editor-container-disabled:hover{border-color:rgb(var(--grey-100))}.univer-text-editor-container-placeholder{position:absolute;top:49%;left:5px;transform:translateY(-50%);color:rgb(var(--grey-400));font-size:var(--font-size-xs);pointer-events:none}.univer-text-editor-validation-error{font-size:10px;color:rgb(var(--red-400))}.univer-range-selector{overflow:hidden;display:flex;align-items:center;justify-content:space-between;color:rgb(var(--grey-600));border:1px solid rgb(var(--border-color));border-radius:var(--border-radius-base);width:220px;height:32px}.univer-range-selector-editor{position:relative;user-select:none;width:100%;height:100%;border:0;outline:0}.univer-range-selector-icon{cursor:pointer;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;margin-right:4px;font-size:var(--font-size-lg);color:rgb(var(--text-color));background-color:transparent;border:none;border-radius:var(--border-radius-base);outline:none}.univer-range-selector-icon:not([disabled]):hover{background-color:rgb(var(--grey-100))}.univer-range-selector-icon[disabled]{cursor:not-allowed;color:rgb(var(--grey-200))}.univer-range-selector:hover,.univer-range-selector-active{border-color:rgb(var(--hyacinth-500))}.univer-range-selector-active .univer-range-selector-icon{color:rgb(var(--hyacinth-500))}.univer-range-selector-error{border-color:rgb(var(--red-400))}.univer-range-selector-error .univer-range-selector-icon{color:rgb(var(--red-400))}.univer-range-selector-error:hover{border-color:rgb(var(--red-400))}.univer-range-selector-disabled{border-color:rgb(var(--grey-100))}.univer-range-selector-disabled .univer-range-selector-icon{color:rgb(var(--grey-100))}.univer-range-selector-disabled:hover{border-color:rgb(var(--grey-100))}.univer-range-selector-modal{position:relative;max-height:500px;overflow:hidden;overflow-y:auto}.univer-range-selector-modal-container{display:flex;flex-direction:row;align-items:center;margin-bottom:10px}.univer-range-selector-modal-container-input{display:inline-block;width:280px}.univer-range-selector-modal-container-input-active{border-color:rgb(var(--hyacinth-500))}.univer-range-selector-modal-container-button{display:inline-block;text-align:center;width:28px}.univer-range-selector-modal-container-button:hover{cursor:pointer;color:rgb(var(--hyacinth-500))}.univer-range-selector-modal-add{position:relative;width:300px;margin-top:5px;text-align:left;color:rgb(var(--hyacinth-500));font-size:var(--font-size-xs)}.univer-range-selector-modal-add-button{display:flex;align-items:center;justify-content:center}.univer-range-selector-modal-add-button:hover{cursor:pointer;background-color:rgb(var(--hyacinth-500),.05)}

package/lib/types/common/component-manager.d.ts

@@ -14,15 +14,34 @@
  * limitations under the License.
  */
 import type { IDisposable } from '@wendellhu/redi';
-export interface ICustomComponent {
-    name: string;
-    props?: any;
+import type { defineComponent } from 'vue';
+import type React from 'react';
+type ComponentFramework = 'vue3' | 'react';
+interface IComponentOptions {
+    framework?: ComponentFramework;
 }
-export type ComponentList = Map<string, React.ForwardRefExoticComponent<any>>;
+export interface IVue3Component {
+    framework: 'vue3';
+    component: ReturnType<typeof defineComponent>;
+}
+export interface IReactComponent {
+    framework: 'react';
+    component: React.ForwardRefExoticComponent<any>;
+}
+export type ComponentType = React.ForwardRefExoticComponent<any> | ReturnType<typeof defineComponent>;
+export type ComponentList = Map<string, IVue3Component | IReactComponent>;
 export declare class ComponentManager {
     private _components;
     constructor();
-    register(name: string, component: any): IDisposable;
-    get(name: string): import("react").ForwardRefExoticComponent<any> | undefined;
+    register(name: string, component: ComponentType, options?: IComponentOptions): IDisposable;
+    get(name: string): React.ForwardRefExoticComponent<any> | ((props: any) => React.FunctionComponentElement<{
+        component: any;
+        props: Record<string, any>;
+    }>) | undefined;
     delete(name: string): void;
 }
+export declare function VueComponentWrapper(options: {
+    component: ReturnType<typeof defineComponent>;
+    props: Record<string, any>;
+}): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+export {};

package/lib/types/components/custom-label/CustomLabel.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/// <reference types="react" />
 import type { Observable } from 'rxjs';
 import type { IMenuSelectorItem } from '../../services/menu/menu';
 export type ICustomLabelProps<T = undefined> = {

package/lib/types/components/editor/TextEditor.d.ts

@@ -31,10 +31,17 @@ export interface ITextEditorProps {
     onlyInputFormula?: boolean;
     onlyInputRange?: boolean;
     onlyInputContent?: boolean;
+    isSingleChoice?: boolean;
+    openForSheetUnitId?: Nullable<string>;
+    openForSheetSubUnitId?: Nullable<string>;
+    onChange?: (value: Nullable<string>) => void;
+    onActive?: (state: boolean) => void;
+    onValid?: (state: boolean) => void;
+    placeholder?: string;
 }
 /**
  * The component to render toolbar item label and menu item label.
  * @param props
  */
-export declare function TextEditor(props: ITextEditorProps & MyComponentProps): JSX.Element | null;
+export declare function TextEditor(props: ITextEditorProps & Omit<MyComponentProps, 'onChange' | 'onActive'>): JSX.Element | null;
 export {};

package/lib/types/components/hooks/observable.d.ts

@@ -14,5 +14,8 @@
  * limitations under the License.
  */
 import type { Observable } from 'rxjs';
+type ObservableOrFn<T> = Observable<T> | (() => Observable<T>);
 export declare function useObservable<T>(observable: Observable<T>, defaultValue?: T): T | undefined;
 export declare function useObservable<T>(observable: Observable<T>, defaultValue?: T, shouldHaveSyncValue?: true): T;
+export declare function useObservable<T>(observable: ObservableOrFn<T>, defaultValue?: T, shouldHaveSyncValue?: false, deps?: any[]): T | undefined;
+export {};

package/lib/types/components/range-selector/RangeSelector.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { IUnitRange, Nullable } from '@univerjs/core';
+import React from 'react';
+export interface IRangeSelectorProps {
+    id: string;
+    value?: string;
+    onChange?: (ranges: IUnitRange[]) => void;
+    onActive?: (state: boolean) => void;
+    onValid?: (state: boolean) => void;
+    isSingleChoice?: boolean;
+    isReadonly?: boolean;
+    openForSheetUnitId?: Nullable<string>;
+    openForSheetSubUnitId?: Nullable<string>;
+    width?: number;
+    size?: 'mini' | 'small' | 'middle' | 'large';
+    placeholder?: string;
+}
+export declare function RangeSelector(props: IRangeSelectorProps): React.JSX.Element;

package/lib/types/controllers/shared-shortcut.controller.d.ts

@@ -18,10 +18,12 @@ import { Injector } from '@wendellhu/redi';
 import { IMenuService } from '../services/menu/menu.service';
 import type { IShortcutItem } from '../services/shortcut/shortcut.service';
 import { IShortcutService } from '../services/shortcut/shortcut.service';
-import { IClipboardInterfaceService } from '../services/clipboard/clipboard-interface.service';
 export declare const CopyShortcutItem: IShortcutItem;
 export declare const CutShortcutItem: IShortcutItem;
-export declare const PasteShortcutItem: IShortcutItem;
+/**
+ * This shortcut item is just for displaying shortcut info, do not use it.
+ */
+export declare const OnlyDisplayPasteShortcutItem: IShortcutItem;
 export declare const UndoShortcutItem: IShortcutItem;
 export declare const RedoShortcutItem: IShortcutItem;
 /**
@@ -32,8 +34,7 @@ export declare class SharedController extends Disposable {
     private readonly _menuService;
     private readonly _shortcutService;
     private readonly _commandService;
-    private readonly _interfaceService;
-    constructor(_injector: Injector, _menuService: IMenuService, _shortcutService: IShortcutService, _commandService: ICommandService, _interfaceService: IClipboardInterfaceService);
+    constructor(_injector: Injector, _menuService: IMenuService, _shortcutService: IShortcutService, _commandService: ICommandService);
     initialize(): void;
     private _registerMenus;
     private _registerCommands;

package/lib/types/controllers/shortcut-display/shortcut-panel.controller.d.ts

@@ -17,10 +17,10 @@ import { Disposable, ICommandService } from '@univerjs/core';
 import { Injector } from '@wendellhu/redi';
 import { ComponentManager } from '../../common/component-manager';
 import { IMenuService } from '../../services/menu/menu.service';
+import { IShortcutService } from '../../services/shortcut/shortcut.service';
 /**
  * This controller add a side panel to the application to display the shortcuts.
  */
 export declare class ShortcutPanelController extends Disposable {
-    private readonly _injector;
-    constructor(_injector: Injector, menuService: IMenuService, commandService: ICommandService, componentManager: ComponentManager);
+    constructor(injector: Injector, componentManager: ComponentManager, shortcutService: IShortcutService, menuService: IMenuService, commandService: ICommandService);
 }

package/lib/types/controllers/ui/ui-desktop.controller.d.ts

@@ -47,14 +47,14 @@ export declare class DesktopUIController extends Disposable implements IDesktopU
     private readonly _injector;
     private readonly _lifecycleService;
     private readonly _renderManagerService;
-    private readonly _layoutService;
+    private readonly _layoutService?;
     private _headerComponents;
     private _headerMenuComponents;
     private _contentComponents;
     private _footerComponents;
     private _componentRegistered$;
     componentRegistered$: Observable<void>;
-    constructor(_injector: Injector, _lifecycleService: LifecycleService, _renderManagerService: IRenderManagerService, _layoutService: ILayoutService);
+    constructor(_injector: Injector, _lifecycleService: LifecycleService, _renderManagerService: IRenderManagerService, _layoutService?: ILayoutService | undefined);
     bootstrapWorkbench(options: IWorkbenchOptions): void;
     private _initializeEngine;
     registerComponent(part: DesktopUIPart, component: () => React.ComponentType): IDisposable;

package/lib/types/index.d.ts

@@ -18,7 +18,7 @@ export { getMenuHiddenObservable } from './common/menu-hidden-observable';
 export * from './components';
 export { t } from './components/hooks/locale';
 export { useObservable } from './components/hooks/observable';
-export { CopyShortcutItem, CutShortcutItem, PasteShortcutItem, RedoShortcutItem, SharedController, UndoShortcutItem, } from './controllers/shared-shortcut.controller';
+export { CopyShortcutItem, CutShortcutItem, RedoShortcutItem, SharedController, UndoShortcutItem, } from './controllers/shared-shortcut.controller';
 export { IUIController } from './controllers/ui/ui.controller';
 export { DesktopUIPart, type IDesktopUIController } from './controllers/ui/ui-desktop.controller';
 export { enUS, zhCN } from './locale';
@@ -51,3 +51,7 @@ export { type IConfirmPartMethodOptions } from './views/components/confirm-part/
 export { IEditorService, EditorService } from './services/editor/editor.service';
 export { TextEditor } from './components/editor/TextEditor';
 export { SetEditorResizeOperation } from './commands/operations/editor/set-editor-resize.operation';
+export { RangeSelector } from './components/range-selector/RangeSelector';
+export { IRangeSelectorService } from './services/range-selector/range-selector.service';
+export { DesktopLocalStorageService } from './services/local-storage/local-storage.service';
+export { useActiveWorkbook, useActiveWorksheet } from './views/hooks/active';

package/lib/types/locale/zh-CN.d.ts

@@ -49,6 +49,7 @@ declare const locale: {
         cut: string;
         copy: string;
         paste: string;
+        'shortcut-panel': string;
     };
     'common-edit': string;
     'toggle-shortcut-panel': string;
@@ -62,5 +63,14 @@ declare const locale: {
         formulaError: string;
         rangeError: string;
     };
+    rangeSelector: {
+        title: string;
+        addAnotherRange: string;
+        buttonTooltip: string;
+        placeHolder: string;
+        confirm: string;
+        cancel: string;
+    };
+    'global-shortcut': string;
 };
 export default locale;

package/lib/types/services/editor/editor.service.d.ts

@@ -37,6 +37,9 @@ export interface IEditorConfigParam {
     onlyInputFormula: boolean;
     onlyInputRange: boolean;
     onlyInputContent: boolean;
+    isSingleChoice: boolean;
+    openForSheetUnitId: Nullable<string>;
+    openForSheetSubUnitId: Nullable<string>;
 }
 export interface IEditorSetParam extends IEditorConfigParam, IEditorStateParam {
     render: IRender;
@@ -51,15 +54,22 @@ export interface IEditorInputFormulaParam {
     editorUnitId: string;
     formulaString: string;
 }
-declare class Editor {
+export declare class Editor {
     private _param;
     private _focus;
     private _valueLegality;
+    private _openForSheetUnitId;
+    private _openForSheetSubUnitId;
     constructor(_param: IEditorSetParam);
     get documentDataModel(): DocumentDataModel;
     get editorUnitId(): string;
     get cancelDefaultResizeListener(): boolean | undefined;
     get render(): IRender;
+    isSingleChoice(): boolean;
+    setOpenForSheetUnitId(unitId: Nullable<string>): void;
+    getOpenForSheetUnitId(): Nullable<string>;
+    setOpenForSheetSubUnitId(subUnitId: Nullable<string>): void;
+    getOpenForSheetSubUnitId(): Nullable<string>;
     isValueLegality(): boolean;
     setValueLegality(state?: boolean): void;
     isFocus(): boolean;
@@ -74,15 +84,13 @@ declare class Editor {
     isSheetEditor(): boolean;
     getValue(): string;
     getBody(): IDocumentBody | undefined;
-    update(param: IEditorStateParam): void;
+    update(param: Partial<IEditorSetParam>): void;
     verticalAlign(): void;
     updateCanvasStyle(): void;
 }
 export interface IEditorService {
     getEditor(id?: string): Readonly<Nullable<Editor>>;
-    setState(param: IEditorStateParam, id: string): void;
     register(config: IEditorConfigParam, container: HTMLDivElement): IDisposable;
-    unRegister(editorUnitId: string): void;
     isVisible(id: string): Nullable<boolean>;
     inputFormula$: Observable<IEditorInputFormulaParam>;
     setFormula(formulaString: string): void;
@@ -103,8 +111,8 @@ export interface IEditorService {
     getOperationSheetSubUnitId(): Nullable<string>;
     isEditor(editorUnitId: string): boolean;
     isSheetEditor(editorUnitId: string): boolean;
-    changeEditorFocus$: Observable<unknown>;
-    changeEditorFocus(): void;
+    closeRangePrompt$: Observable<unknown>;
+    closeRangePrompt(): void;
     blur$: Observable<unknown>;
     blur(): void;
     focus$: Observable<ISuccinctTextRangeParam>;
@@ -114,10 +122,19 @@ export interface IEditorService {
     setValue(val: string, editorUnitId?: string): void;
     setRichValue(body: IDocumentBody, editorUnitId?: string): void;
     getFirstEditor(): Editor;
-    focusStyle$: Observable<string>;
-    focusStyle(editorUnitId: string): void;
+    focusStyle$: Observable<Nullable<string>>;
+    focusStyle(editorUnitId: Nullable<string>): void;
     refreshValueChange(editorId: string): void;
     checkValueLegality(editorId: string): boolean;
+    getValue(id: string): Nullable<string>;
+    getRichValue(id: string): Nullable<IDocumentBody>;
+    changeSpreadsheetFocusState(state: boolean): void;
+    getSpreadsheetFocusState(): boolean;
+    selectionChangingState(): boolean;
+    singleSelection$: Observable<boolean>;
+    singleSelection(state: boolean): void;
+    setFocusId(id: Nullable<string>): void;
+    getFocusId(): Nullable<string>;
 }
 export declare class EditorService extends Disposable implements IEditorService, IDisposable {
     private readonly _currentUniverService;
@@ -125,6 +142,7 @@ export declare class EditorService extends Disposable implements IEditorService,
     private readonly _lexerTreeBuilder;
     private readonly _contextService;
     private _editors;
+    private _focusEditorUnitId;
     private readonly _state$;
     readonly state$: Observable<Nullable<IEditorStateParam>>;
     private _currentSheetUnitId;
@@ -133,8 +151,8 @@ export declare class EditorService extends Disposable implements IEditorService,
     readonly inputFormula$: Observable<IEditorInputFormulaParam>;
     private readonly _resize$;
     readonly resize$: Observable<string>;
-    private readonly _changeEditorFocus$;
-    readonly changeEditorFocus$: Observable<unknown>;
+    private readonly _closeRangePrompt$;
+    readonly closeRangePrompt$: Observable<unknown>;
     private readonly _blur$;
     readonly blur$: Observable<unknown>;
     private readonly _focus$;
@@ -144,32 +162,40 @@ export declare class EditorService extends Disposable implements IEditorService,
     private readonly _valueChange$;
     readonly valueChange$: Observable<Readonly<Editor>>;
     private readonly _focusStyle$;
-    readonly focusStyle$: Observable<string>;
+    readonly focusStyle$: Observable<Nullable<string>>;
+    private readonly _singleSelection$;
+    readonly singleSelection$: Observable<boolean>;
+    private _spreadsheetFocusState;
     constructor(_currentUniverService: IUniverInstanceService, _renderManagerService: IRenderManagerService, _lexerTreeBuilder: LexerTreeBuilder, _contextService: IContextService);
+    setFocusId(id: Nullable<string>): void;
+    getFocusId(): Nullable<string>;
     isEditor(editorUnitId: string): boolean;
     isSheetEditor(editorUnitId: string): boolean;
-    changeEditorFocus(): void;
+    closeRangePrompt(): void;
+    changeSpreadsheetFocusState(state: boolean): void;
+    getSpreadsheetFocusState(): boolean;
     focusStyle(editorUnitId: string): false | undefined;
+    singleSelection(state: boolean): void;
+    selectionChangingState(): boolean;
     blur(): void;
     focus(editorUnitId?: string): void;
     setFormula(formulaString: string, editorUnitId?: string): void;
     setValue(val: string, editorUnitId?: string): void;
-    getValue(id?: string): string | undefined;
+    getValue(id: string): string | undefined;
     setRichValue(body: IDocumentBody, editorUnitId?: string): void;
-    getRichValue(id?: string): IDocumentBody | undefined;
+    getRichValue(id: string): IDocumentBody | undefined;
     dispose(): void;
     getEditor(id?: string): Readonly<Nullable<Editor>>;
     getAllEditor(): Map<string, Editor>;
     getFirstEditor(): Editor;
     resize(unitId: string): void;
-    setState(param: IEditorStateParam, id: string): void;
     isVisible(id: string): boolean | undefined;
     setOperationSheetUnitId(unitId: Nullable<string>): void;
     getOperationSheetUnitId(): Nullable<string>;
     setOperationSheetSubUnitId(sheetId: Nullable<string>): void;
     getOperationSheetSubUnitId(): Nullable<string>;
     register(config: IEditorConfigParam, container: HTMLDivElement): IDisposable;
-    unRegister(editorUnitId: string): void;
+    private _unRegister;
     refreshValueChange(editorUnitId: string): void;
     checkValueLegality(editorUnitId: string): boolean;
     private _refreshValueChange;
@@ -178,4 +204,3 @@ export declare class EditorService extends Disposable implements IEditorService,
     private _getBlank;
 }
 export declare const IEditorService: import("@wendellhu/redi").IdentifierDecorator<IEditorService>;
-export {};

package/lib/types/services/range-selector/range-selector.service.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { IUnitRange, Nullable } from '@univerjs/core';
+import { Disposable } from '@univerjs/core';
+import type { IDisposable } from '@wendellhu/redi';
+import type { Observable } from 'rxjs';
+export interface IRangeSelectorRange extends IUnitRange {
+    sheetName: string;
+}
+export interface IRangeSelectorService {
+    selectionChange$: Observable<IRangeSelectorRange[]>;
+    selectionChange(ranges: IRangeSelectorRange[]): void;
+    setCurrentSelectorId(id: Nullable<string>): void;
+    getCurrentSelectorId(): Nullable<string>;
+    openSelector$: Observable<unknown>;
+    openSelector(): void;
+}
+export declare class RangeSelectorService extends Disposable implements IRangeSelectorService, IDisposable {
+    private _currentSelectorId;
+    private readonly _selectionChange$;
+    readonly selectionChange$: Observable<IRangeSelectorRange[]>;
+    private readonly _openSelector$;
+    readonly openSelector$: Observable<unknown>;
+    setCurrentSelectorId(id: Nullable<string>): void;
+    getCurrentSelectorId(): Nullable<string>;
+    selectionChange(range: IRangeSelectorRange[]): void;
+    openSelector(): void;
+}
+export declare const IRangeSelectorService: import("@wendellhu/redi").IdentifierDecorator<IRangeSelectorService>;

package/lib/types/services/shortcut/keycode.d.ts

@@ -13,11 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export declare const KeyCodeToChar: {
-    [key: number]: string;
-};
 /** KeyCode that maps to browser standard keycode. */
-export declare const enum KeyCode {
+export declare enum KeyCode {
     UNKNOWN = 0,
     BACKSPACE = 8,
     TAB = 9,
@@ -81,13 +78,19 @@ export declare const enum KeyCode {
     NUM_LOCK = 144,
     SCROLL_LOCK = 145,
     MINUS = 189,
-    EQUAL = 187
+    EQUAL = 187,
+    BACK_SLASH = 220
 }
-export declare const enum MetaKeys {
+export declare const KeyCodeToChar: {
+    [key: number]: string;
+};
+/** Define meta key numbers. */
+export declare enum MetaKeys {
     SHIFT = 1024,
     /** Option key on MacOS. Alt key on other systems. */
     ALT = 2048,
     /** Command key on MacOS. Ctrl key on other systems. */
     CTRL_COMMAND = 4096,
+    /** Ctrl key for MacOS. Not valid on other systems. */
     MAC_CTRL = 8192
 }

package/lib/types/views/hooks/active.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { Nullable, Workbook, Worksheet } from '@univerjs/core';
+/**
+ * A react hooks to get the active workbook.
+ */
+export declare function useActiveWorkbook(): Nullable<Workbook>;
+/**
+ * A react hooks to get the active worksheet.
+ */
+export declare function useActiveWorksheet(): Nullable<Worksheet>;