@flux-ui/components 3.0.0-next.67 → 3.0.0-next.69

package/README.md

@@ -30,6 +30,6 @@ Documentation lives at [flux-ui.dev](https://flux-ui.dev). This readme covers bu
 
 - [`@flux-ui/types`](../types) — public TypeScript types.
 - [`@flux-ui/internals`](../internals) — shared composables, utilities, and directives.
-- [`@flux-ui/statistics`](../statistics) — chart components built on ApexCharts.
+- [`@flux-ui/statistics`](../statistics) — chart components built on Apache ECharts.
 - [`@flux-ui/dashboard`](../dashboard) — dashboard layout components.
 - [`@flux-ui/application`](../application) — application shell components.

package/dist/component/FluxLayerPane.vue.d.ts

@@ -1,8 +1,12 @@
+import { FluxColor } from '@flux-ui/types';
 import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly color?: FluxColor;
+};
 type __VLS_Slots = {
     default(): VNode[];
 };
-declare const __VLS_base: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/index.css

@@ -536,6 +536,22 @@
     margin-left: -2px;
     margin-right: -2px;
   }
+  .button:has(.button-icon:only-child) {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .button:has(.button-icon:only-child).is-small {
+    width: 36px;
+  }
+  .button:has(.button-icon:only-child).is-medium {
+    width: 42px;
+  }
+  .button:has(.button-icon:only-child).is-large {
+    width: 48px;
+  }
+  .button:has(.button-icon:only-child).is-xl {
+    width: 54px;
+  }
   .button-icon {
     margin: 1px;
     flex-shrink: 0;
@@ -663,7 +679,7 @@
 
 .overlay-shade {
   background: var(--overlay);
-  backdrop-filter: blur(3px) saturate(180%);
+  backdrop-filter: blur(3px) grayscale(0.5) saturate(180%);
   pointer-events: none;
   transition: opacity 600ms var(--swift-out);
 }
@@ -704,8 +720,8 @@
   background: var(--overlay-secondary);
   opacity: 0;
   pointer-events: none;
-  transition: opacity 420ms var(--swift-out);
-  z-index: 1;
+  transition: opacity 600ms var(--swift-out);
+  z-index: 1000;
 }
 .overlay.is-current > .base-pane-structure {
   pointer-events: auto;
@@ -744,6 +760,7 @@
   max-height: calc(100% - 18px);
   width: min(100dvw, 720px);
   contain: paint;
+  transition-duration: 600ms;
   overflow: auto;
 }
 .slide-over > .base-pane-structure > .pane-header,
@@ -779,11 +796,11 @@
 
 .overlay-transition-enter-active,
 .overlay-transition-leave-active {
-  transition: opacity 420ms var(--swift-out);
+  transition: opacity 300ms var(--swift-out);
 }
 .overlay-transition-enter-active > .base-pane-structure,
 .overlay-transition-leave-active > .base-pane-structure {
-  transition: 420ms var(--swift-out);
+  transition: 300ms var(--swift-out);
   transition-property: opacity, scale;
 }
 
@@ -805,11 +822,11 @@
 
 .slide-over-transition-enter-active,
 .slide-over-transition-leave-active {
-  transition: opacity 600ms var(--swift-out);
+  transition: opacity 480ms var(--swift-out);
 }
 .slide-over-transition-enter-active > .base-pane-structure,
 .slide-over-transition-leave-active > .base-pane-structure {
-  transition: 600ms var(--swift-out);
+  transition: 480ms var(--swift-out);
   transition-property: opacity, transform;
 }
 
@@ -1266,13 +1283,13 @@
 .vertical-window-transition-enter-active,
 .vertical-window-transition-back-enter-active {
   contain: paint;
-  transition: 120ms var(--deceleration-curve);
+  transition: 105ms var(--deceleration-curve);
   transition-property: opacity, transform;
 }
 
 .vertical-window-transition-leave-active,
 .vertical-window-transition-back-leave-active {
-  transition: 120ms var(--acceleration-curve);
+  transition: 105ms var(--acceleration-curve);
   transition-property: opacity, transform;
 }
 
@@ -1290,13 +1307,13 @@
 
 .window-transition-enter-active,
 .window-transition-back-enter-active {
-  transition: 120ms var(--deceleration-curve);
+  transition: 105ms var(--deceleration-curve);
   transition-property: height, opacity, transform;
 }
 
 .window-transition-leave-active,
 .window-transition-back-leave-active {
-  transition: 120ms var(--acceleration-curve);
+  transition: 105ms var(--acceleration-curve);
   transition-property: height, opacity, transform;
 }
 
@@ -1557,7 +1574,7 @@
   animation: close 210ms var(--swift-out) both;
 }
 .flyout-pane.is-opening {
-  animation: open 210ms var(--deceleration-curve) both;
+  animation: open 210ms var(--swift-out) both;
 }
 
 @keyframes close {
@@ -2538,23 +2555,68 @@
 }.layer-pane {
   display: flex;
   flex-flow: column;
-  border: 1px solid var(--surface-stroke-out);
-  border-radius: var(--radius);
-  background: var(--gray-50);
   background-clip: padding-box;
+  border: 1px solid;
+  border-radius: var(--radius);
+  contain: paint;
+}
+.layer-pane > .base-pane-structure {
+  border-color: inherit;
+}
+
+.layer-pane-gray {
+  background-color: var(--gray-50);
+  border-color: var(--surface-stroke-out);
+}
+
+.layer-pane-primary {
+  background-color: var(--primary-100);
+  border-color: var(--primary-200);
+}
+
+.layer-pane-danger {
+  background-color: var(--danger-100);
+  border-color: var(--danger-200);
+}
+.layer-pane-danger .pane-header-icon {
+  color: var(--danger-600);
+}
+
+.layer-pane-info {
+  background-color: var(--info-100);
+  border-color: var(--info-200);
+}
+.layer-pane-info .pane-header-icon {
+  color: var(--info-600);
+}
+
+.layer-pane-success {
+  background-color: var(--success-100);
+  border-color: var(--success-200);
+}
+.layer-pane-success .pane-header-icon {
+  color: var(--success-600);
+}
+
+.layer-pane-warning {
+  background-color: var(--warning-100);
+  border-color: var(--warning-200);
+}
+.layer-pane-warning .pane-header-icon {
+  color: var(--warning-600);
 }
 
 .layer-pane > .base-pane-structure {
-  border-right-width: 0;
-  border-left-width: 0;
+  margin-left: -1px;
+  margin-right: -1px;
 }
 
 .layer-pane > .base-pane-structure:first-child {
-  border-top-width: 0;
+  margin-top: -1px;
 }
 
 .layer-pane > .base-pane-structure:last-child {
-  border-bottom-width: 0;
+  margin-bottom: -1px;
 }
 
 .layer-pane > .base-pane-structure + .base-pane-structure {

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export * from './component';
 export * from './composable';
 export * from './transition';
-export { fluxRegisterIcons, isFluxFormSelectGroup, isFluxFormSelectOption, showAlert, showConfirm, showPrompt, showSnackbar, useFluxStore } from './data';
+export { fluxRegisterIcons, iconRegistry, isFluxFormSelectGroup, isFluxFormSelectOption, showAlert, showConfirm, showPrompt, showSnackbar, useFluxStore } from './data';
 export type { FluxAdaptiveGroupChild, FluxAdaptiveGroupInjection, FluxExpandableGroupInjection, FluxFilterInjection, FluxFlyoutInjection, FluxFormFieldInjection, FluxTooltipInjection, FluxState, FluxStore } from './data';
 export { defineFilter, isFluxFilterOptionHeader, isFluxFilterOptionItem, pickFilterCommon } from './util';
 export type { FluxFilterDefinitionFactory } from './util';