@flux-ui/components 3.0.0-next.20 → 3.0.0-next.22

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

@@ -3,6 +3,7 @@ type __VLS_Props = Omit<FluxButtonProps, 'isFilled' | 'isSubmit' | 'size'> & {
     readonly command?: string;
     readonly commandIcon?: FluxIconName;
     readonly commandLoading?: boolean;
+    readonly imageAlt?: string;
     readonly imageSrc?: string;
     readonly isActive?: boolean;
     readonly isDestructive?: boolean;

package/dist/component/FluxMenuItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FluxMenuItem.vue.d.ts","sourceRoot":"","sources":["../../src/component/FluxMenuItem.vue"],"names":[],"mappings":"AAuFI,OAAO,KAAK,EAAmB,eAAe,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AASrF,KAAK,WAAW,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC,GAAG;IACzE,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,WAAW,CAAC,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;;;;;;;;;;AAkKN,wBAQG"}
+{"version":3,"file":"FluxMenuItem.vue.d.ts","sourceRoot":"","sources":["../../src/component/FluxMenuItem.vue"],"names":[],"mappings":"AAwFI,OAAO,KAAK,EAAmB,eAAe,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AASrF,KAAK,WAAW,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC,GAAG;IACzE,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,WAAW,CAAC,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;;;;;;;;;;AAkKN,wBAQG"}

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

@@ -5,7 +5,9 @@ type __VLS_Props = {
     readonly changeValue?: string;
     readonly color?: FluxColor;
     readonly direction?: FluxDirection;
-    readonly icon: FluxIconName;
+    readonly icon?: FluxIconName;
+    readonly imageSrc?: string;
+    readonly imageAlt?: string;
     readonly label: string;
     readonly value: string;
 };

package/dist/component/FluxStatistic.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FluxStatistic.vue.d.ts","sourceRoot":"","sources":["../../src/component/FluxStatistic.vue"],"names":[],"mappings":"AAsEI,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM7E,KAAK,WAAW,GAAG;IACf,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC;IACnC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,aAAa,CAAC;IACnC,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CAC1B,CAAC;;AAiIN,wBAOG"}
+{"version":3,"file":"FluxStatistic.vue.d.ts","sourceRoot":"","sources":["../../src/component/FluxStatistic.vue"],"names":[],"mappings":"AAiFI,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM7E,KAAK,WAAW,GAAG;IACf,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC;IACnC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,aAAa,CAAC;IACnC,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CAC1B,CAAC;;AA4IN,wBAOG"}

package/dist/component/primitive/SelectBase.vue.d.ts

@@ -216,6 +216,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
         readonly command?: string;
         readonly commandIcon?: import('@flux-ui/types').FluxIconName;
         readonly commandLoading?: boolean;
+        readonly imageAlt?: string;
         readonly imageSrc?: string;
         readonly isActive?: boolean;
         readonly isDestructive?: boolean;
@@ -242,6 +243,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
         readonly command?: string;
         readonly commandIcon?: import('@flux-ui/types').FluxIconName;
         readonly commandLoading?: boolean;
+        readonly imageAlt?: string;
         readonly imageSrc?: string;
         readonly isActive?: boolean;
         readonly isDestructive?: boolean;

package/dist/component/primitive/SelectBase.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBase.vue.d.ts","sourceRoot":"","sources":["../../../src/component/primitive/SelectBase.vue"],"names":[],"mappings":"AAuVI,OAAO,KAAK,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAElF,OAAO,EAAE,uBAAuB,EAAY,QAAQ,EAA4C,MAAM,KAAK,CAAC;AAqC5G,KAAK,WAAW,GAAG;IACf,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,QAAQ,CAAC,OAAO,EAAE,qBAAqB,EAAE,CAAC;IAC1C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,oBAAoB,EAAE,CAAC;CAC7C,CAAC;AA0KN,KAAK,iBAAiB,GAAG;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAuLc,GAC9B,8CACqB,GACrB,yBAAyB,GAAG,6DACjB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAJgB,GAC9B,8CACqB,GACrB,yBAAyB,GAAG,6DACjB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsPd,wBAQG"}
+{"version":3,"file":"SelectBase.vue.d.ts","sourceRoot":"","sources":["../../../src/component/primitive/SelectBase.vue"],"names":[],"mappings":"AA6VI,OAAO,KAAK,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAElF,OAAO,EAAE,uBAAuB,EAAY,QAAQ,EAA4C,MAAM,KAAK,CAAC;AAqC5G,KAAK,WAAW,GAAG;IACf,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,QAAQ,CAAC,OAAO,EAAE,qBAAqB,EAAE,CAAC;IAC1C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,oBAAoB,EAAE,CAAC;CAC7C,CAAC;AA0KN,KAAK,iBAAiB,GAAG;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA8KgC,GAAG,8CAC9B,GACpB,yBAAyB,GAAG,6DAEvB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAJuC,GAAG,8CAC9B,GACpB,yBAAyB,GAAG,6DAEvB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2QT,wBAQG"}

package/dist/index.css

@@ -5259,6 +5259,12 @@ tfoot .table-cell {
   border-radius: var(--radius);
 }
 
+.statistic-image {
+  height: 48px;
+  width: 48px;
+  border-radius: var(--radius);
+}
+
 .statistic-horizontal {
   display: flex;
 }

package/dist/index.js

@@ -3431,7 +3431,7 @@ const iconBoxedSuccess = `icon-boxed-success icon-boxed-colored icon-boxed ${_0$
 const iconBoxedWarning = `icon-boxed-warning icon-boxed-colored icon-boxed ${_0$g}`;
 const $style$I = { icon: icon$b, fontAwesomeIcon, materialSymbolIcon, iconBoxed: iconBoxed$1, iconBoxedDefault, iconBoxedColored, iconBoxedGray, iconBoxedPrimary, iconBoxedDanger, iconBoxedInfo, iconBoxedSuccess, iconBoxedWarning };
 const _hoisted_1$I = ["viewBox"];
-const _hoisted_2$i = ["d"];
+const _hoisted_2$j = ["d"];
 const _sfc_main$2C = /* @__PURE__ */ defineComponent({
   __name: "FluxIcon",
   props: {
@@ -3476,7 +3476,7 @@ const _sfc_main$2C = /* @__PURE__ */ defineComponent({
           return openBlock(), createElementBlock("path", {
             d: path,
             fill: "currentColor"
-          }, null, 8, _hoisted_2$i);
+          }, null, 8, _hoisted_2$j);
         }), 256))
       ], 14, _hoisted_1$I)) : __props.name ? (openBlock(), createElementBlock("i", {
         key: 1,
@@ -3713,12 +3713,12 @@ const _sfc_main$2z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const { "button": _0$f, "buttonIcon": _1$8, "buttonLabel": _2$5 } = cssModule0$4;
-const action$1 = `action ${_0$f}`;
+const { "buttonLabel": _0$f, "buttonIcon": _1$8, "button": _2$5 } = cssModule0$4;
+const action$1 = `action ${_2$5}`;
 const spinner$5 = `spinner`;
 const actionIcon = `action-icon ${_1$8}`;
 const isDestructive = `is-destructive`;
-const actionLabel = `action-label ${_2$5}`;
+const actionLabel = `action-label ${_0$f}`;
 const actionBar = `action-bar`;
 const separator$4 = `separator`;
 const formInput$3 = `form-input`;
@@ -4964,7 +4964,7 @@ const persona = `persona`;
 const personaDetails = `persona-details`;
 const $style$z = { avatar: avatar$2, avatarImage, avatarFallback, icon: icon$9, avatarFallbackColorized, avatarFallbackNeutral, avatarLoading, spinner: spinner$3, avatarStatus, avatarStatusGray, avatarStatusPrimary, avatarStatusDanger, avatarStatusInfo, avatarStatusSuccess, avatarStatusWarning, avatarClickable, statusAvatar, persona, personaDetails };
 const _hoisted_1$F = ["alt", "src"];
-const _hoisted_2$h = { key: 0 };
+const _hoisted_2$i = { key: 0 };
 const _sfc_main$27 = /* @__PURE__ */ defineComponent({
   __name: "FluxAvatar",
   props: {
@@ -5041,7 +5041,7 @@ const _sfc_main$27 = /* @__PURE__ */ defineComponent({
             key: 1,
             class: normalizeClass(__props.fallback === "colorized" ? unref($style$z).avatarFallbackColorized : unref($style$z).avatarFallbackNeutral)
           }, [
-            __props.fallbackInitials ? (openBlock(), createElementBlock("span", _hoisted_2$h, toDisplayString(__props.fallbackInitials), 1)) : __props.fallbackIcon ? (openBlock(), createBlock(_sfc_main$2C, {
+            __props.fallbackInitials ? (openBlock(), createElementBlock("span", _hoisted_2$i, toDisplayString(__props.fallbackInitials), 1)) : __props.fallbackIcon ? (openBlock(), createBlock(_sfc_main$2C, {
               key: 1,
               name: __props.fallbackIcon
             }, null, 8, ["name"])) : createCommentVNode("", true)
@@ -5400,16 +5400,16 @@ const _sfc_main$21 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const { "buttonIcon": _0$b, "buttonLabel": _1$5, "button": _2$2 } = cssModule0$4;
+const { "buttonIcon": _0$b, "button": _1$5, "buttonLabel": _2$2 } = cssModule0$4;
 const menu$1 = `menu`;
 const menuNormal = `menu-normal menu`;
 const menuLarge = `menu-large menu`;
 const menuGroup$1 = `menu-group`;
 const menuGroupHorizontal = `menu-group-horizontal menu-group`;
 const menuGroupVertical = `menu-group-vertical menu-group`;
-const menuItem$2 = `menu-item ${_2$2}`;
+const menuItem$2 = `menu-item ${_1$5}`;
 const menuItemIcon = `menu-item-icon ${_0$b}`;
-const menuItemLabel$2 = `menu-item-label ${_1$5}`;
+const menuItemLabel$2 = `menu-item-label ${_2$2}`;
 const menuItemActive = `menu-item-active`;
 const menuItemDestructive = `menu-item-destructive`;
 const menuItemHighlighted = `menu-item-highlighted`;
@@ -5429,7 +5429,7 @@ const divider$2 = `divider`;
 const separator$3 = `separator`;
 const expandableBody$1 = `expandable-body`;
 const $style$x = { menu: menu$1, menuNormal, menuLarge, menuGroup: menuGroup$1, menuGroupHorizontal, menuGroupVertical, menuItem: menuItem$2, menuItemIcon, menuItemLabel: menuItemLabel$2, menuItemActive, menuItemDestructive, menuItemHighlighted, menuItemIndented, menuItemSelectableIcon, menuItemSelected, menuItemCommand, menuItemCommandIcon, icon: icon$7, menuItemImage, menuTitle, menuSubHeader: menuSubHeader$2, menuSubHeaderIcon, menuSubHeaderLabel, basePane: basePane$2, divider: divider$2, separator: separator$3, expandableBody: expandableBody$1 };
-const _hoisted_1$E = ["src"];
+const _hoisted_1$E = ["src", "alt"];
 const _sfc_main$20 = /* @__PURE__ */ defineComponent({
   __name: "FluxMenuItem",
   props: {
@@ -5447,6 +5447,7 @@ const _sfc_main$20 = /* @__PURE__ */ defineComponent({
     command: {},
     commandIcon: {},
     commandLoading: { type: Boolean },
+    imageAlt: {},
     imageSrc: {},
     isActive: { type: Boolean },
     isDestructive: { type: Boolean },
@@ -5490,7 +5491,7 @@ const _sfc_main$20 = /* @__PURE__ */ defineComponent({
             createElementVNode("img", {
               class: normalizeClass(unref($style$x).menuItemImage),
               src: __props.imageSrc,
-              alt: ""
+              alt: __props.imageAlt ?? ""
             }, null, 10, _hoisted_1$E)
           ]),
           key: "1"
@@ -5598,7 +5599,7 @@ const toggleIconOn = `toggle-icon-on toggle-icon`;
 const toggleIconOff = `toggle-icon-off toggle-icon`;
 const $style$w = { formInputGroup, buttonGroup, button: button$4, formInput: formInput$2, formSelect, formStructureElement, form, pane, formColumn, formSection, formRow, formSectionTitle, formField, formFieldHeader, formFieldLabel: formFieldLabel$1, formFieldOptional, formFieldValue, formFieldCounter, formFieldAddition, formFieldAdditionIcon, formFieldAdditionError, formFieldAdditionHint, isSecondary, formInputDisabled, formInputEnabled, formInputIcon, formInputIconTrailing, formInputIconLeading, formInputIconPasswordToggle, formInputNative, formInputNativeHasIconLeading, formInputNativeHasIconTrailing, formInputAddition, isCondensed, secondaryButton: secondaryButton$1, formDateInput, formDateRangeInput, formDateTimeInput, inputGroup, formTimeInput, isDisabled: isDisabled$4, isFocused, badge, formSelectIcon, formSelectInput, formSelectPlaceholder, formSelectPopup, menuItem: menuItem$1, isKeyboardAction, isSearchable, menuSubHeader: menuSubHeader$1, formSelectSelected, buttonLabel, formTextArea, formTextAreaDisabled, formTextAreaEnabled, checkbox, checkboxElement, checkboxNative, icon: icon$6, checkboxLabel, quantitySelector, quantitySelectorButton, quantitySelectorInput, pinInput, pinInputField, pinInputEnabled, pinInputDisabled, toggle, isChecked, toggleInput, isSwitch, toggleIcon, toggleIconOn, toggleIconOff };
 const _hoisted_1$D = ["aria-disabled"];
-const _hoisted_2$g = ["id", "autocomplete", "autofocus", "aria-disabled", "disabled", "max", "maxlength", "min", "placeholder", "readonly", "step", "type", "value"];
+const _hoisted_2$h = ["id", "autocomplete", "autofocus", "aria-disabled", "disabled", "max", "maxlength", "min", "placeholder", "readonly", "step", "type", "value"];
 const _sfc_main$1$ = /* @__PURE__ */ defineComponent({
   __name: "FluxFormInput",
   props: /* @__PURE__ */ mergeModels({
@@ -5755,7 +5756,7 @@ const _sfc_main$1$ = /* @__PURE__ */ defineComponent({
           onFocus: _cache[1] || (_cache[1] = ($event) => onFocus()),
           onInput,
           onKeydown: onKeyDown
-        }, null, 42, _hoisted_2$g),
+        }, null, 42, _hoisted_2$h),
         __props.iconLeading ? (openBlock(), createBlock(_sfc_main$2C, {
           key: 0,
           class: normalizeClass(unref($style$w).formInputIconLeading),
@@ -6160,9 +6161,11 @@ const _sfc_main$1V = /* @__PURE__ */ defineComponent({
               command: __props.selected[0].command,
               "command-icon": __props.selected[0].commandIcon,
               "icon-leading": __props.selected[0].icon,
+              "image-alt": __props.selected[0].imageAlt,
+              "image-src": __props.selected[0].imageSrc,
               label: __props.selected[0].label,
               tabindex: "-1"
-            }, null, 8, ["class", "command", "command-icon", "icon-leading", "label"])) : __props.isMultiple && __props.selected[0] ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(__props.selected, (option) => {
+            }, null, 8, ["class", "command", "command-icon", "icon-leading", "image-alt", "image-src", "label"])) : __props.isMultiple && __props.selected[0] ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(__props.selected, (option) => {
               return openBlock(), createBlock(_sfc_main$1W, {
                 key: option.value ?? "null option",
                 label: option.label,
@@ -6242,12 +6245,14 @@ const _sfc_main$1V = /* @__PURE__ */ defineComponent({
                                     command: subItem.command,
                                     "command-icon": subItem.commandIcon,
                                     "icon-leading": subItem.icon,
+                                    "image-alt": subItem.imageAlt,
+                                    "image-src": subItem.imageSrc,
                                     "is-active": !!__props.selected.find((so) => so.value === subItem.value),
                                     "is-highlighted": highlightedId.value === subItem.value,
                                     label: subItem.label,
                                     type: "button",
                                     onClick: ($event) => select(subItem.value)
-                                  }, null, 8, ["command", "command-icon", "icon-leading", "is-active", "is-highlighted", "label", "onClick"])) : createCommentVNode("", true)
+                                  }, null, 8, ["command", "command-icon", "icon-leading", "image-alt", "image-src", "is-active", "is-highlighted", "label", "onClick"])) : createCommentVNode("", true)
                                 ], 64);
                               }), 256))
                             ]),
@@ -6260,12 +6265,14 @@ const _sfc_main$1V = /* @__PURE__ */ defineComponent({
                             command: item.command,
                             "command-icon": item.commandIcon,
                             "icon-leading": item.icon,
+                            "image-alt": item.imageAlt,
+                            "image-src": item.imageSrc,
                             "is-active": !!__props.selected.find((so) => so.value === item.value),
                             "is-highlighted": highlightedId.value === item.value,
                             label: item.label,
                             type: "button",
                             onClick: ($event) => select(item.value)
-                          }, null, 8, ["command", "command-icon", "icon-leading", "is-active", "is-highlighted", "label", "onClick"])) : createCommentVNode("", true)
+                          }, null, 8, ["command", "command-icon", "icon-leading", "image-alt", "image-src", "is-active", "is-highlighted", "label", "onClick"])) : createCommentVNode("", true)
                         ], 64);
                       }), 128))
                     ]),
@@ -6848,7 +6855,7 @@ const datePickerDay = `date-picker-day`;
 const button$3 = `button`;
 const $style$s = { datePicker, datePickerDates, datePickerMonths, datePickerYears, datePickerHeader, datePickerHeaderView, datePickerHeaderViewButton, datePickerDate, isDisabled: isDisabled$1, isRangeEntry, isRangeEnd, isRangeStart, isSelectionEntry, isSelectionEnd, isSelectionStart, isSelected: isSelected$1, datePickerDatesGrid, datePickerDay, button: button$3 };
 const _hoisted_1$z = ["onClick"];
-const _hoisted_2$f = ["onClick"];
+const _hoisted_2$g = ["onClick"];
 const _sfc_main$1O = /* @__PURE__ */ defineComponent({
   __name: "FluxCalendar",
   props: {
@@ -6964,7 +6971,7 @@ const _sfc_main$1O = /* @__PURE__ */ defineComponent({
                     class: normalizeClass(unref($style$t).calendarCurrentYear),
                     type: "button",
                     onClick: open2
-                  }, toDisplayString(unref(viewYear)), 11, _hoisted_2$f)
+                  }, toDisplayString(unref(viewYear)), 11, _hoisted_2$g)
                 ]),
                 default: withCtx(({ close: close2 }) => [
                   createElementVNode("div", {
@@ -7106,8 +7113,8 @@ const _sfc_main$1N = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$y = ["for"];
-const _hoisted_2$e = ["id"];
-const _hoisted_3$5 = ["aria-checked"];
+const _hoisted_2$f = ["id"];
+const _hoisted_3$6 = ["aria-checked"];
 const _sfc_main$1M = /* @__PURE__ */ defineComponent({
   __name: "FluxCheckbox",
   props: /* @__PURE__ */ mergeModels({
@@ -7139,7 +7146,7 @@ const _sfc_main$1M = /* @__PURE__ */ defineComponent({
           type: "checkbox",
           class: normalizeClass(unref($style$w).checkboxNative),
           id: unref(id)
-        }, null, 10, _hoisted_2$e), [
+        }, null, 10, _hoisted_2$f), [
           [vModelCheckbox, modelValue.value]
         ]),
         createElementVNode("button", {
@@ -7156,7 +7163,7 @@ const _sfc_main$1M = /* @__PURE__ */ defineComponent({
             name: "check",
             size: 16
           }))
-        ], 10, _hoisted_3$5),
+        ], 10, _hoisted_3$6),
         __props.label ? (openBlock(), createElementBlock("span", {
           key: 0,
           class: normalizeClass(unref($style$w).checkboxLabel)
@@ -7275,7 +7282,7 @@ const isTyping = `is-typing`;
 const commentTyping = `comment-typing`;
 const $style$q = { comment, avatar: avatar$1, commentContent, commentFooter, isReceived, isTyping, commentTyping };
 const _hoisted_1$x = { key: 0 };
-const _hoisted_2$d = ["datetime"];
+const _hoisted_2$e = ["datetime"];
 const _sfc_main$1J = /* @__PURE__ */ defineComponent({
   __name: "FluxComment",
   props: {
@@ -7326,7 +7333,7 @@ const _sfc_main$1J = /* @__PURE__ */ defineComponent({
           iso.value && relative.value && !__props.isTyping ? (openBlock(), createElementBlock("time", {
             key: 1,
             datetime: iso.value
-          }, toDisplayString(isJustNowVisible.value ? unref(translate)("flux.justNow") : relative.value), 9, _hoisted_2$d)) : createCommentVNode("", true)
+          }, toDisplayString(isJustNowVisible.value ? unref(translate)("flux.justNow") : relative.value), 9, _hoisted_2$e)) : createCommentVNode("", true)
         ], 2)
       ], 2);
     };
@@ -8061,7 +8068,7 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$s = ["onClick"];
-const _hoisted_2$c = ["onClick"];
+const _hoisted_2$d = ["onClick"];
 const _sfc_main$1B = /* @__PURE__ */ defineComponent({
   __name: "FluxColorSelect",
   props: /* @__PURE__ */ mergeModels({
@@ -8112,7 +8119,7 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
                 name: "ellipsis-h",
                 size: 16
               })
-            ], 10, _hoisted_2$c)
+            ], 10, _hoisted_2$d)
           ]),
           default: withCtx(({ close: close2 }) => [
             createVNode(_sfc_main$1D, {
@@ -8210,15 +8217,15 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const { "secondaryButtonLabel": _0$7, "secondaryButton": _1$3, "secondaryButtonIcon": _2$1 } = $style$F;
+const { "secondaryButtonIcon": _0$7, "secondaryButton": _1$3, "secondaryButtonLabel": _2$1 } = $style$F;
 const pagination = `pagination`;
 const paginationButton = `pagination-button ${_1$3}`;
 const secondaryButton = `secondary-button`;
 const paginationButtonArrow = `pagination-button-arrow`;
 const paginationButtonCurrent = `pagination-button-current`;
 const paginationButtonSpacer = `pagination-button-spacer`;
-const paginationButtonIcon = `pagination-button-icon ${_2$1}`;
-const paginationButtonLabel = `pagination-button-label ${_0$7}`;
+const paginationButtonIcon = `pagination-button-icon ${_0$7}`;
+const paginationButtonLabel = `pagination-button-label ${_2$1}`;
 const paginationBar = `pagination-bar`;
 const paginationBarLimit = `pagination-bar-limit`;
 const paginationBarLimitDisplayingOf = `pagination-bar-limit-displaying-of`;
@@ -8529,8 +8536,8 @@ const _sfc_main$1u = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$q = { key: 0 };
-const _hoisted_2$b = { key: 1 };
-const _hoisted_3$4 = { key: 2 };
+const _hoisted_2$c = { key: 1 };
+const _hoisted_3$5 = { key: 2 };
 const _sfc_main$1t = /* @__PURE__ */ defineComponent({
   __name: "FluxTable",
   props: {
@@ -8561,7 +8568,7 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
           slots.header ? (openBlock(), createElementBlock("thead", _hoisted_1$q, [
             renderSlot(_ctx.$slots, "header")
           ])) : createCommentVNode("", true),
-          slots.default ? (openBlock(), createElementBlock("tbody", _hoisted_2$b, [
+          slots.default ? (openBlock(), createElementBlock("tbody", _hoisted_2$c, [
             renderSlot(_ctx.$slots, "default"),
             __props.fillColumns ? (openBlock(), createBlock(_sfc_main$1u, {
               key: 0,
@@ -8575,7 +8582,7 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
               _: 1
             }, 8, ["class"])) : createCommentVNode("", true)
           ])) : createCommentVNode("", true),
-          slots.footer ? (openBlock(), createElementBlock("tfoot", _hoisted_3$4, [
+          slots.footer ? (openBlock(), createElementBlock("tfoot", _hoisted_3$5, [
             renderSlot(_ctx.$slots, "footer")
           ])) : createCommentVNode("", true),
           slots.caption ? (openBlock(), createElementBlock("caption", {
@@ -8709,8 +8716,8 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$p = ["id"];
-const _hoisted_2$a = ["aria-labelledby"];
-const _hoisted_3$3 = ["onClick", "onMouseover"];
+const _hoisted_2$b = ["aria-labelledby"];
+const _hoisted_3$4 = ["onClick", "onMouseover"];
 const _sfc_main$1r = /* @__PURE__ */ defineComponent({
   __name: "FluxDatePicker",
   props: /* @__PURE__ */ mergeModels({
@@ -8974,13 +8981,13 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
                         onClick: ($event) => setDate(date),
                         onMouseover: ($event) => onDateMouseOver(date),
                         onMouseout: onDateMouseOut
-                      }, toDisplayString(date.toLocaleString({ day: "numeric" })), 43, _hoisted_3$3);
+                      }, toDisplayString(date.toLocaleString({ day: "numeric" })), 43, _hoisted_3$4);
                     }), 128))
                   ], 2))
                 ]),
                 _: 1
               }, 8, ["is-back"])
-            ], 10, _hoisted_2$a)) : viewMode.value === "month" ? (openBlock(), createElementBlock("div", {
+            ], 10, _hoisted_2$b)) : viewMode.value === "month" ? (openBlock(), createElementBlock("div", {
               key: "month",
               class: normalizeClass(unref($style$s).datePickerMonths)
             }, [
@@ -9069,8 +9076,8 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$o = ["id", "width", "height"];
-const _hoisted_2$9 = ["r", "cx", "cy"];
-const _hoisted_3$2 = ["fill"];
+const _hoisted_2$a = ["r", "cx", "cy"];
+const _hoisted_3$3 = ["fill"];
 const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   __name: "FluxDotPattern",
   props: {
@@ -9118,7 +9125,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
               r: __props.cr,
               cx: __props.width / 2 - __props.cx,
               cy: __props.height / 2 - __props.cy
-            }, null, 8, _hoisted_2$9)
+            }, null, 8, _hoisted_2$a)
           ], 8, _hoisted_1$o)
         ]),
         createElementVNode("rect", {
@@ -9126,7 +9133,7 @@ const _sfc_main$1o = /* @__PURE__ */ defineComponent({
           height: "100%",
           "stroke-width": "0",
           fill: `url(#${unref(id)})`
-        }, null, 8, _hoisted_3$2)
+        }, null, 8, _hoisted_3$3)
       ], 2);
     };
   }
@@ -9143,7 +9150,7 @@ const dropZoneBorderAnimation = `drop-zone-border-animation`;
 const dropZoneLoader = `drop-zone-loader`;
 const $style$l = { dropZone, dropZoneContent, avatar, placeholder: placeholder$1, dropZoneActions, dropZoneBorder, isDragging, isDraggingOver, dropZoneBorderAnimation, dropZoneLoader };
 const _hoisted_1$n = ["aria-disabled"];
-const _hoisted_2$8 = ["pathLength"];
+const _hoisted_2$9 = ["pathLength"];
 const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   __name: "FluxDropZone",
   props: {
@@ -9261,7 +9268,7 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               pathLength: pathLength.value
-            }, null, 8, _hoisted_2$8)
+            }, null, 8, _hoisted_2$9)
           ], 2)),
           renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ isDragging: isDragging2.value, isDraggingOver: isDraggingOver2.value, showPicker }))),
           createVNode(unref(_sfc_main$2e), null, {
@@ -9311,7 +9318,7 @@ const basePane$1 = `base-pane`;
 const expandableGroup = `expandable-group`;
 const $style$k = { expandable, expandableOpened, expandableHeader, icon: icon$4, expandableBody, expandableContent, basePane: basePane$1, expandableGroup };
 const _hoisted_1$m = ["id", "aria-controls", "aria-expanded"];
-const _hoisted_2$7 = ["id", "aria-labelledby"];
+const _hoisted_2$8 = ["id", "aria-labelledby"];
 const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   __name: "FluxExpandable",
   props: {
@@ -9410,7 +9417,7 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
                   renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ label: __props.label, close: close2 })))
                 ], 2)
               ])
-            ], 10, _hoisted_2$7)) : createCommentVNode("", true)
+            ], 10, _hoisted_2$8)) : createCommentVNode("", true)
           ]),
           _: 3
         })
@@ -10712,7 +10719,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$h = ["id", "autofocus", "aria-disabled"];
-const _hoisted_2$6 = ["autocomplete", "autofocus", "disabled", "tabindex", "type", "value"];
+const _hoisted_2$7 = ["autocomplete", "autofocus", "disabled", "tabindex", "type", "value"];
 const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "FluxFormPinInput",
   props: /* @__PURE__ */ mergeModels({
@@ -10817,7 +10824,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
             onInput,
             onKeydown: onKeyDown,
             onPaste
-          }, null, 42, _hoisted_2$6);
+          }, null, 42, _hoisted_2$7);
         }), 128))
       ], 14, _hoisted_1$h);
     };
@@ -12058,8 +12065,8 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$e = ["id", "width", "height"];
-const _hoisted_2$5 = ["d", "stroke-dasharray"];
-const _hoisted_3$1 = ["fill"];
+const _hoisted_2$6 = ["d", "stroke-dasharray"];
+const _hoisted_3$2 = ["fill"];
 const _hoisted_4 = {
   key: 0,
   style: { "overflow": "visible" }
@@ -12093,7 +12100,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
               d: `M.5 ${__props.height}V.5H${__props.width}`,
               fill: "none",
               "stroke-dasharray": __props.strokeDasharray
-            }, null, 8, _hoisted_2$5)
+            }, null, 8, _hoisted_2$6)
           ], 8, _hoisted_1$e)
         ]),
         createElementVNode("rect", {
@@ -12101,7 +12108,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           height: "100%",
           "stroke-width": "0",
           fill: `url(#${unref(id)})`
-        }, null, 8, _hoisted_3$1),
+        }, null, 8, _hoisted_3$2),
         __props.squares ? (openBlock(), createElementBlock("svg", _hoisted_4, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.squares, ([x2, y2]) => {
             return openBlock(), createElementBlock("rect", {
@@ -12162,9 +12169,9 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const { "stackHorizontal": _0$4, "stackVertical": _1$1 } = cssModule0$2;
-const legendHorizontal = `legend-horizontal ${_0$4}`;
-const legendVertical = `legend-vertical ${_1$1}`;
+const { "stackVertical": _0$4, "stackHorizontal": _1$1 } = cssModule0$2;
+const legendHorizontal = `legend-horizontal ${_1$1}`;
+const legendVertical = `legend-vertical ${_0$4}`;
 const legendItem = `legend-item`;
 const $style$c = { legendHorizontal, legendVertical, legendItem };
 const _sfc_main$K = /* @__PURE__ */ defineComponent({
@@ -12405,7 +12412,7 @@ const _sfc_main$E = defineComponent({
   }
 });
 const _hoisted_1$d = { key: 0 };
-const _hoisted_2$4 = { key: 1 };
+const _hoisted_2$5 = { key: 1 };
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "FluxPaneHeader",
   props: {
@@ -12430,7 +12437,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           class: normalizeClass(unref($style$E).paneHeaderCaption)
         }, [
           __props.title ? (openBlock(), createElementBlock("strong", _hoisted_1$d, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
-          __props.subTitle ? (openBlock(), createElementBlock("span", _hoisted_2$4, toDisplayString(__props.subTitle), 1)) : createCommentVNode("", true)
+          __props.subTitle ? (openBlock(), createElementBlock("span", _hoisted_2$5, toDisplayString(__props.subTitle), 1)) : createCommentVNode("", true)
         ], 2)) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "after")
       ], 2);
@@ -12845,7 +12852,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$a = { key: 0 };
-const _hoisted_2$3 = { key: 1 };
+const _hoisted_2$4 = { key: 1 };
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "FluxPlaceholder",
   props: {
@@ -12882,7 +12889,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           class: normalizeClass(unref($style$g).placeholderCaption)
         }, [
           __props.title ? (openBlock(), createElementBlock("strong", _hoisted_1$a, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
-          __props.message ? (openBlock(), createElementBlock("p", _hoisted_2$3, toDisplayString(__props.message), 1)) : createCommentVNode("", true)
+          __props.message ? (openBlock(), createElementBlock("p", _hoisted_2$4, toDisplayString(__props.message), 1)) : createCommentVNode("", true)
         ], 2),
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -13690,10 +13697,13 @@ const isSuccess = `is-success`;
 const isWarning = `is-warning`;
 const statisticChange = `statistic-change`;
 const statisticData = `statistic-data`;
+const statisticImage = `statistic-image`;
 const statisticHorizontal = `statistic-horizontal statistic`;
 const statisticVertical = `statistic-vertical statistic`;
-const $style$4 = { statistic, isGray, statisticIcon, isPrimary, isDanger, isInfo, isSuccess, isWarning, statisticChange, statisticData, statisticHorizontal, statisticVertical };
-const _hoisted_1$5 = { key: 0 };
+const $style$4 = { statistic, isGray, statisticIcon, isPrimary, isDanger, isInfo, isSuccess, isWarning, statisticChange, statisticData, statisticImage, statisticHorizontal, statisticVertical };
+const _hoisted_1$5 = { key: 1 };
+const _hoisted_2$3 = ["src", "alt"];
+const _hoisted_3$1 = { key: 0 };
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "FluxStatistic",
   props: {
@@ -13703,6 +13713,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     color: { default: "gray" },
     direction: { default: "horizontal" },
     icon: {},
+    imageSrc: {},
+    imageAlt: {},
     label: {},
     value: {}
   },
@@ -13721,14 +13733,21 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         ))
       }, {
         default: withCtx(() => [
-          createElementVNode("div", {
+          __props.icon ? (openBlock(), createElementBlock("div", {
+            key: 0,
             class: normalizeClass(unref($style$4).statisticIcon)
           }, [
             createVNode(_sfc_main$2C, {
               name: __props.icon,
               size: 24
             }, null, 8, ["name"])
-          ], 2),
+          ], 2)) : __props.imageSrc ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
+            createElementVNode("img", {
+              class: normalizeClass(unref($style$4).statisticImage),
+              src: __props.imageSrc,
+              alt: __props.imageAlt
+            }, null, 10, _hoisted_2$3)
+          ])) : createCommentVNode("", true),
           createElementVNode("div", {
             class: normalizeClass(unref($style$4).statisticData)
           }, [
@@ -13736,7 +13755,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             createElementVNode("strong", null, toDisplayString(__props.value), 1)
           ], 2),
           __props.changeIcon || __props.changeValue ? (openBlock(), createElementBlock("div", {
-            key: 0,
+            key: 2,
             class: normalizeClass(unref(clsx)(
               unref($style$4).statisticChange,
               __props.changeColor === "gray" && unref($style$4).isGray,
@@ -13747,7 +13766,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               __props.changeColor === "warning" && unref($style$4).isWarning
             ))
           }, [
-            __props.changeValue ? (openBlock(), createElementBlock("span", _hoisted_1$5, toDisplayString(__props.changeValue), 1)) : createCommentVNode("", true),
+            __props.changeValue ? (openBlock(), createElementBlock("span", _hoisted_3$1, toDisplayString(__props.changeValue), 1)) : createCommentVNode("", true),
             __props.changeIcon ? (openBlock(), createBlock(_sfc_main$2C, {
               key: 1,
               name: __props.changeIcon,