@univerjs/ui 0.25.0 → 1.0.0-alpha.0

package/lib/facade.js

@@ -3,7 +3,7 @@ import { IRenderManagerService } from "@univerjs/engine-render";
 import { BuiltInUIPart, ComponentManager, CopyCommand, IDialogService, IFontService, IMenuManagerService, IMessageService, IShortcutService, ISidebarService, IUIPartsService, KeyCode, MenuItemType, MenuManagerPosition, PasteCommand, RibbonPosition, RibbonStartGroup, SheetPasteShortKeyCommandName, connectInjector } from "@univerjs/ui";
 import { CommandType, ICommandService, IUniverInstanceService, Inject, Injector, UniverInstanceType, generateRandomId } from "@univerjs/core";
 
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -14,7 +14,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -27,14 +27,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -45,7 +45,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -53,7 +53,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/lib/index.css

@@ -49,10 +49,6 @@
   left: 0;
 }
 
-.univer-left-1 {
-  left: .25rem;
-}
-
 .univer-left-1\/2 {
   left: 50%;
 }
@@ -73,10 +69,6 @@
   top: 0;
 }
 
-.univer-top-0\.5 {
-  top: .125rem;
-}
-
 .univer-top-1\/2 {
   top: 50%;
 }
@@ -85,10 +77,6 @@
   top: -9999px;
 }
 
-.univer-top-\[calc\(50\%-6px\)\] {
-  top: calc(50% - 6px);
-}
-
 .univer-z-10 {
   z-index: 10;
 }
@@ -97,10 +85,6 @@
   z-index: 20;
 }
 
-.univer-z-\[-1\] {
-  z-index: -1;
-}
-
 .univer-z-\[100\] {
   z-index: 100;
 }
@@ -135,6 +119,10 @@
   margin-bottom: 0;
 }
 
+.univer-ml-auto {
+  margin-left: auto;
+}
+
 .univer-mr-2 {
   margin-right: .5rem;
 }
@@ -183,9 +171,19 @@
   height: .875rem !important;
 }
 
-.univer-size-0\.5 {
-  width: .125rem;
-  height: .125rem;
+.\!univer-size-4 {
+  width: 1rem !important;
+  height: 1rem !important;
+}
+
+.univer-size-1\.5 {
+  width: .375rem;
+  height: .375rem;
+}
+
+.univer-size-10 {
+  width: 2.5rem;
+  height: 2.5rem;
 }
 
 .univer-size-12 {
@@ -208,6 +206,11 @@
   height: 1rem;
 }
 
+.univer-size-5 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 .univer-size-6 {
   width: 1.5rem;
   height: 1.5rem;
@@ -285,6 +288,10 @@
   min-height: 0;
 }
 
+.univer-min-h-10 {
+  min-height: 2.5rem;
+}
+
 .univer-min-h-8 {
   min-height: 2rem;
 }
@@ -321,6 +328,10 @@
   width: 8rem;
 }
 
+.univer-w-4 {
+  width: 1rem;
+}
+
 .univer-w-40 {
   width: 10rem;
 }
@@ -341,6 +352,14 @@
   width: 24rem;
 }
 
+.univer-w-\[52px\] {
+  width: 52px;
+}
+
+.univer-w-\[68px\] {
+  width: 68px;
+}
+
 .univer-w-full {
   width: 100%;
 }
@@ -365,6 +384,10 @@
   min-width: 1.5rem;
 }
 
+.univer-min-w-64 {
+  min-width: 16rem;
+}
+
 .univer-min-w-min {
   min-width: min-content;
 }
@@ -443,6 +466,13 @@
   transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
 }
 
+.univer-scale-105 {
+  --univer-tw-scale-x: 1.05;
+  --univer-tw-scale-y: 1.05;
+  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(1.05) scaleY(1.05);
+  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+}
+
 .univer-cursor-col-resize {
   cursor: col-resize;
 }
@@ -480,6 +510,10 @@
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
+.univer-grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
 .univer-grid-cols-\[1fr\] {
   grid-template-columns: 1fr;
 }
@@ -532,6 +566,10 @@
   align-items: center;
 }
 
+.univer-justify-end {
+  justify-content: flex-end;
+}
+
 .univer-justify-center {
   justify-content: center;
 }
@@ -540,6 +578,18 @@
   justify-content: space-between;
 }
 
+.univer-justify-items-start {
+  justify-items: start;
+}
+
+.univer-justify-items-center {
+  justify-items: center;
+}
+
+.univer-gap-0 {
+  gap: 0;
+}
+
 .univer-gap-0\.5 {
   gap: .125rem;
 }
@@ -564,6 +614,10 @@
   gap: .75rem;
 }
 
+.univer-gap-4 {
+  gap: 1rem;
+}
+
 .univer-gap-6 {
   gap: 1.5rem;
 }
@@ -634,6 +688,10 @@
   border-radius: .375rem;
 }
 
+.univer-rounded-none {
+  border-radius: 0;
+}
+
 .univer-rounded-sm {
   border-radius: .125rem;
 }
@@ -681,16 +739,16 @@
   border-color: var(--univer-gray-200);
 }
 
-.\!univer-bg-gray-200 {
-  background-color: var(--univer-gray-200) !important;
+.univer-border-primary-600 {
+  border-color: var(--univer-primary-600);
 }
 
-.\!univer-bg-gray-500 {
-  background-color: var(--univer-gray-500) !important;
+.univer-border-white {
+  border-color: var(--univer-white);
 }
 
-.\!univer-bg-gray-900 {
-  background-color: var(--univer-gray-900) !important;
+.\!univer-bg-gray-200 {
+  background-color: var(--univer-gray-200) !important;
 }
 
 .univer-bg-\[rgba\(15\,23\,42\,0\.32\)\] {
@@ -760,10 +818,18 @@
   padding: 0;
 }
 
+.univer-p-0\.5 {
+  padding: .125rem;
+}
+
 .univer-p-1 {
   padding: .25rem;
 }
 
+.univer-p-1\.5 {
+  padding: .375rem;
+}
+
 .univer-p-2 {
   padding: .5rem;
 }
@@ -826,6 +892,11 @@
   padding-bottom: .375rem;
 }
 
+.univer-py-2 {
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+}
+
 .univer-py-3 {
   padding-top: .75rem;
   padding-bottom: .75rem;
@@ -855,10 +926,6 @@
   padding-left: 1rem;
 }
 
-.univer-pl-6 {
-  padding-left: 1.5rem;
-}
-
 .univer-pr-1\.5 {
   padding-right: .375rem;
 }
@@ -875,6 +942,10 @@
   padding-top: .25rem;
 }
 
+.univer-pt-2 {
+  padding-top: .5rem;
+}
+
 .univer-pt-3 {
   padding-top: .75rem;
 }
@@ -951,14 +1022,6 @@
   letter-spacing: -.025em;
 }
 
-.\!univer-text-gray-600 {
-  color: var(--univer-gray-600) !important;
-}
-
-.\!univer-text-white {
-  color: var(--univer-white) !important;
-}
-
 .univer-text-current {
   color: currentColor;
 }
@@ -1032,13 +1095,6 @@
   opacity: .6;
 }
 
-.univer-shadow {
-  --univer-tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
-  --univer-tw-shadow-colored: 0 1px 3px 0 var(--univer-tw-shadow-color), 0 1px 2px -1px var(--univer-tw-shadow-color);
-  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
-  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
-}
-
 .univer-shadow-\[0_-16px_48px_rgba\(15\,23\,42\,0\.18\)\] {
   --univer-tw-shadow: 0 -16px 48px #0f172a2e;
   --univer-tw-shadow-colored: 0 -16px 48px var(--univer-tw-shadow-color);
@@ -1147,6 +1203,10 @@
   --univer-tw-enter-opacity: .7;
 }
 
+.univer-context-menu-hover-suppressed button:hover:not(:focus) {
+  background-color: #0000 !important;
+}
+
 .last\:univer-border-b-0:last-child {
   border-bottom-width: 0;
 }
@@ -1155,6 +1215,10 @@
   display: none;
 }
 
+.hover\:univer-border-primary-600:hover {
+  border-color: var(--univer-primary-600);
+}
+
 .hover\:univer-bg-gray-100:hover {
   background-color: var(--univer-gray-100);
 }
@@ -1175,6 +1239,17 @@
   opacity: .5;
 }
 
+.hover\:univer-shadow-md:hover {
+  --univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;
+  --univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);
+  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 6px -2px #1e284d14, 0 2px 6px -1px #1e284d1a;
+  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
+}
+
+.focus\:univer-bg-gray-50:focus {
+  background-color: var(--univer-gray-50);
+}
+
 .focus\:univer-bg-white:focus {
   background-color: var(--univer-white);
 }
@@ -1191,6 +1266,11 @@
   box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), var(--univer-tw-shadow, 0 0 #0000);
 }
 
+.focus-visible\:univer-outline-none:focus-visible {
+  outline-offset: 2px;
+  outline: 2px solid #0000;
+}
+
 .focus-visible\:univer-ring-2:focus-visible {
   --univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);
   --univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);
@@ -1198,6 +1278,10 @@
   box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), var(--univer-tw-shadow, 0 0 #0000);
 }
 
+.focus-visible\:univer-ring-primary-100:focus-visible {
+  --univer-tw-ring-color: var(--univer-primary-100);
+}
+
 .focus-visible\:univer-ring-primary-600:focus-visible {
   --univer-tw-ring-color: var(--univer-primary-600);
 }
@@ -1235,8 +1319,8 @@
 }
 
 @media (min-width: 640px) {
-  .sm\:\!univer-block {
-    display: block !important;
+  .sm\:\!univer-flex {
+    display: flex !important;
   }
 }
 
@@ -1256,10 +1340,18 @@
   border-color: var(--univer-gray-600) !important;
 }
 
+.dark\:\!univer-border-gray-700:where(.univer-dark, .univer-dark *) {
+  border-color: var(--univer-gray-700) !important;
+}
+
 .dark\:\!univer-bg-gray-200:where(.univer-dark, .univer-dark *) {
   background-color: var(--univer-gray-200) !important;
 }
 
+.dark\:\!univer-bg-gray-300:where(.univer-dark, .univer-dark *) {
+  background-color: var(--univer-gray-300) !important;
+}
+
 .dark\:\!univer-bg-gray-500:where(.univer-dark, .univer-dark *) {
   background-color: var(--univer-gray-500) !important;
 }
@@ -1348,6 +1440,14 @@
   background-color: #0000 !important;
 }
 
+.dark\:focus\:\!univer-bg-gray-600:focus:where(.univer-dark, .univer-dark *) {
+  background-color: var(--univer-gray-600) !important;
+}
+
+.dark\:focus\:\!univer-bg-gray-900:focus:where(.univer-dark, .univer-dark *) {
+  background-color: var(--univer-gray-900) !important;
+}
+
 .dark\:active\:\!univer-bg-gray-600:active:where(.univer-dark, .univer-dark *) {
   background-color: var(--univer-gray-600) !important;
 }
@@ -1646,6 +1746,10 @@
   width: 1.75rem;
 }
 
+.\[\&_input\]\:univer-w-\[52px\] input {
+  width: 52px;
+}
+
 .\[\&_input\]\:\!univer-appearance-none input {
   -webkit-appearance: none !important;
   appearance: none !important;
@@ -1671,11 +1775,33 @@
   padding: 0;
 }
 
+.\[\&_input\]\:univer-px-1 input {
+  padding-left: .25rem;
+  padding-right: .25rem;
+}
+
+.\[\&_input\]\:univer-text-center input {
+  text-align: center;
+}
+
 .\[\&_input\]\:univer-text-sm input {
   font-size: .875rem;
   line-height: 1.25rem;
 }
 
+.\[\&_input\]\:univer-text-xs input {
+  font-size: .75rem;
+  line-height: 1rem;
+}
+
+.\[\&_input\]\:univer-tabular-nums input {
+  --univer-tw-numeric-spacing: tabular-nums;
+  font-feature-settings: var(--univer-tw-ordinal) var(--univer-tw-slashed-zero) var(--univer-tw-numeric-figure) tabular-nums var(--univer-tw-numeric-fraction);
+  font-feature-settings: var(--univer-tw-ordinal) var(--univer-tw-slashed-zero) var(--univer-tw-numeric-figure) var(--univer-tw-numeric-spacing) var(--univer-tw-numeric-fraction);
+  font-variant-numeric: var(--univer-tw-ordinal) var(--univer-tw-slashed-zero) var(--univer-tw-numeric-figure) tabular-nums var(--univer-tw-numeric-fraction);
+  font-variant-numeric: var(--univer-tw-ordinal) var(--univer-tw-slashed-zero) var(--univer-tw-numeric-figure) var(--univer-tw-numeric-spacing) var(--univer-tw-numeric-fraction);
+}
+
 .\[\&_input\]\:\!univer-leading-none input {
   line-height: 1 !important;
 }