@uzum-tech/ui 2.0.0-beta.9 → 2.0.0

package/dist/index.js

@@ -5809,6 +5809,7 @@
       inlineThemeDisabled: UConfigProvider?.inlineThemeDisabled,
       mergedRtlRef: UConfigProvider?.mergedRtlRef,
       mergedComponentPropsRef: UConfigProvider?.mergedComponentPropsRef,
+      mergedIconPacksRef: UConfigProvider?.mergedIconPacksRef,
       mergedBreakpointsRef: UConfigProvider?.mergedBreakpointsRef,
       mergedBorderedRef: vue.computed(() => {
         const {
@@ -13049,6 +13050,28 @@
     }
   });
 
+  var style$1U = cB("icon", `
+  height: 1em;
+  width: 1em;
+  line-height: 1em;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  fill: currentColor;
+  transform: translateZ(0);
+`, [cM("color-transition", {
+    transition: "color .3s var(--u-bezier)"
+  }), cM("depth", {
+    color: "var(--u-color)"
+  }, [c$1("svg", {
+    opacity: "var(--u-opacity)",
+    transition: "opacity .3s var(--u-bezier)"
+  })]), c$1("svg", {
+    height: "100%",
+    width: "100%",
+    display: "block"
+  })]);
+
   const derived$1 = {
     name: "common",
     ...commonVariables$6,
@@ -13213,6 +13236,154 @@
     boxShadow2: "0px 20px 80px 0px rgba(0, 0, 0, 0.07)"
   };
 
+  function self$1B(vars) {
+    const {
+      elementsPrimary
+    } = vars;
+    return {
+      color: elementsPrimary,
+      opacity1Depth: "0.82",
+      opacity2Depth: "0.72",
+      opacity3Depth: "0.38",
+      opacity4Depth: "0.24",
+      opacity5Depth: "0.18"
+    };
+  }
+  const iconLight = {
+    name: "Icon",
+    common: derived,
+    self: self$1B
+  };
+
+  const iconDark$1 = {
+    name: "Icon",
+    common: derived$1,
+    self: self$1B
+  };
+
+  const iconProps = {
+    ...useTheme.props,
+    depth: [String, Number],
+    size: [Number, String],
+    color: String,
+    component: Object,
+    name: String,
+    pack: String,
+    onClick: Function
+  };
+  const UIconImpl = vue.defineComponent({
+    _n_icon__: true,
+    name: "Icon",
+    props: iconProps,
+    setup(props) {
+      const {
+        mergedClsPrefixRef,
+        mergedIconPacksRef,
+        inlineThemeDisabled
+      } = useConfig(props);
+      const themeRef = useTheme("Icon", "-icon", style$1U, iconLight, props, mergedClsPrefixRef);
+      const cssVarsRef = vue.computed(() => {
+        const {
+          depth
+        } = props;
+        const {
+          common: {
+            cubicBezierEaseInOut
+          },
+          self
+        } = themeRef.value;
+        if (depth !== void 0) {
+          const {
+            color,
+            [`opacity${depth}Depth`]: opacity
+          } = self;
+          return {
+            "--u-bezier": cubicBezierEaseInOut,
+            "--u-color": color,
+            "--u-opacity": opacity
+          };
+        }
+        return {
+          "--u-bezier": cubicBezierEaseInOut,
+          "--u-color": "",
+          "--u-opacity": ""
+        };
+      });
+      const themeClassHandle = inlineThemeDisabled ? useThemeClass("icon", vue.computed(() => `${props.depth || "d"}`), cssVarsRef, props) : void 0;
+      const resolvedPackedIconRef = vue.computed(() => {
+        const {
+          name,
+          pack
+        } = props;
+        if (!name) return null;
+        const config = mergedIconPacksRef?.value;
+        if (!config) {
+          warn("icon", "no icon packs configured on `u-config-provider`");
+          return null;
+        }
+        const targetName = pack ?? config.defaultPackName;
+        const target = config.packs.find(p => p.name === targetName);
+        if (!target) {
+          warn("icon", `icon pack "${targetName}" not found`);
+          return null;
+        }
+        if (config.async) {
+          return target.renderAsyncIcon(name);
+        }
+        if (!("renderIcon" in target)) {
+          warn("icon", `pack "${target.name}" is async-only, set \`async: true\` on \`u-config-provider :icon-packs\``);
+          return null;
+        }
+        return target.renderIcon(name);
+      });
+      return {
+        mergedClsPrefix: mergedClsPrefixRef,
+        resolvedPackedIcon: resolvedPackedIconRef,
+        mergedStyle: vue.computed(() => {
+          const {
+            size,
+            color
+          } = props;
+          return {
+            fontSize: formatLength(size),
+            color
+          };
+        }),
+        cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
+        themeClass: themeClassHandle?.themeClass,
+        onRender: themeClassHandle?.onRender
+      };
+    },
+    render() {
+      const {
+        $parent,
+        depth,
+        mergedClsPrefix,
+        component,
+        onRender,
+        themeClass,
+        resolvedPackedIcon
+      } = this;
+      if ($parent?.$options?._n_icon__) {
+        warn("icon", "don't wrap `u-icon` inside `u-icon`");
+      }
+      onRender?.();
+      return vue.h(UBaseIcon, {
+        clsPrefix: mergedClsPrefix,
+        role: "img",
+        class: [`${mergedClsPrefix}-icon`, themeClass, {
+          [`${mergedClsPrefix}-icon--depth`]: depth,
+          [`${mergedClsPrefix}-icon--color-transition`]: depth !== void 0
+        }],
+        style: [this.cssVars, this.mergedStyle],
+        onClick: this.onClick
+      }, {
+        default: () => resolvedPackedIcon ?? (component ? vue.h(component) : this.$slots.default?.())
+      });
+    }
+  });
+  const UIcon$1 = UIconImpl;
+
   var commonVars$b = {
     iconWidth: "44px",
     iconHeight: "44px",
@@ -13225,7 +13396,7 @@
     avatarSize: "16px"
   };
 
-  function self$1B(vars) {
+  function self$1A(vars) {
     const {
       heightHuge,
       fontBodyLarge,
@@ -13255,16 +13426,16 @@
   const accountOptionLight = {
     name: "AccountOption",
     common: derived,
-    self: self$1B
+    self: self$1A
   };
 
   const accountOptionDark = {
     name: "AccountOption",
     common: derived$1,
-    self: self$1B
+    self: self$1A
   };
 
-  var style$1U = cB("base-account-option", `
+  var style$1T = cB("base-account-option", `
   display: flex;
   align-items: center;
   position: relative;
@@ -13319,7 +13490,7 @@
       const themeRef = useTheme(
         "AccountOption",
         "-base-account-option",
-        style$1U,
+        style$1T,
         accountOptionLight,
         props,
         mergedClsPrefixRef
@@ -14758,7 +14929,7 @@
     })];
   }
 
-  var style$1T = cB("base-clear", `
+  var style$1S = cB("base-clear", `
   flex-shrink: 0;
   height: 1em;
   width: 1em;
@@ -14799,7 +14970,7 @@
       onClear: Function
     },
     setup(props) {
-      useStyle("-base-clear", style$1T, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-clear", style$1S, vue.toRef(props, "clsPrefix"));
       return {
         handleMouseDown(e) {
           e.preventDefault();
@@ -14830,7 +15001,7 @@
     }
   });
 
-  var style$1S = cB("base-close", `
+  var style$1R = cB("base-close", `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -14902,7 +15073,7 @@
       absolute: Boolean
     },
     setup(props) {
-      useStyle("-base-close", style$1S, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-close", style$1R, vue.toRef(props, "clsPrefix"));
       return () => {
         const { clsPrefix, disabled, absolute, round, isButtonTag } = props;
         const Tag = isButtonTag ? "button" : "div";
@@ -15061,7 +15232,7 @@
     }
   });
 
-  var style$1R = c$1([c$1("@keyframes loading-container-rotate", `
+  var style$1Q = c$1([c$1("@keyframes loading-container-rotate", `
     to {
       -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
@@ -15231,7 +15402,7 @@
       ...exposedLoadingProps
     },
     setup(props) {
-      useStyle("-base-loading", style$1R, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-loading", style$1Q, vue.toRef(props, "clsPrefix"));
     },
     render() {
       const { clsPrefix, radius, strokeWidth, stroke, scale } = this;
@@ -15361,7 +15532,7 @@
     })];
   }
 
-  var style$1Q = cB("base-menu-mask", `
+  var style$1P = cB("base-menu-mask", `
   position: absolute;
   left: 0;
   right: 0;
@@ -15384,7 +15555,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-menu-mask", style$1Q, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-menu-mask", style$1P, vue.toRef(props, "clsPrefix"));
       const messageRef = vue.ref(null);
       let timerId = null;
       const uncontrolledShowRef = vue.ref(false);
@@ -15572,7 +15743,7 @@
     railColor: "transparent"
   };
 
-  function self$1A(vars) {
+  function self$1z(vars) {
     const {
       scrollbarColor,
       scrollbarColorHover,
@@ -15592,13 +15763,13 @@
   const safeTopScrollbarLight = {
     name: "SafeTopScrollbar",
     common: derived,
-    self: self$1A
+    self: self$1z
   };
 
   const safeTopScrollbarDark = {
     name: "SafeTopScrollbar",
     common: derived$1,
-    self: self$1A
+    self: self$1z
   };
 
   cB("scrollbar", [cM("rtl", `
@@ -15611,7 +15782,7 @@
           right: unset;
         `)])])])]);
 
-  var style$1P = cB("safe-top-scrollbar", `
+  var style$1O = cB("safe-top-scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -15760,7 +15931,7 @@
       const themeRef = useTheme(
         "SafeTopScrollbar",
         "-safe-top-scrollbar",
-        style$1P,
+        style$1O,
         safeTopScrollbarLight,
         props,
         mergedClsPrefixRef
@@ -16494,7 +16665,7 @@
     railColor: "transparent"
   };
 
-  function self$1z(vars) {
+  function self$1y(vars) {
     const {
       scrollbarColor,
       scrollbarColorHover,
@@ -16514,13 +16685,13 @@
   const scrollbarLight = {
     name: "Scrollbar",
     common: derived,
-    self: self$1z
+    self: self$1y
   };
 
   const scrollbarDark = {
     name: "Scrollbar",
     common: derived$1,
-    self: self$1z
+    self: self$1y
   };
 
   var rtlStyle$t = cB("scrollbar", [cM("rtl", `
@@ -16538,7 +16709,7 @@
     style: rtlStyle$t
   };
 
-  var style$1O = cB("scrollbar", `
+  var style$1N = cB("scrollbar", `
   overflow: hidden;
   position: relative;
   z-index: auto;
@@ -16681,7 +16852,7 @@
       const themeRef = useTheme(
         "Scrollbar",
         "-scrollbar",
-        style$1O,
+        style$1N,
         scrollbarLight,
         props,
         mergedClsPrefixRef
@@ -18053,7 +18224,7 @@
     return treemate;
   }
 
-  function self$1y(vars) {
+  function self$1x(vars) {
     const {
       fontBodyMedium,
       fontTitleLarge,
@@ -18085,16 +18256,16 @@
   const emptyLight = {
     name: "Empty",
     common: derived,
-    self: self$1y
+    self: self$1x
   };
 
   const emptyDark$1 = {
     name: "Empty",
     common: derived$1,
-    self: self$1y
+    self: self$1x
   };
 
-  var style$1N = cB("empty", `
+  var style$1M = cB("empty", `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -18172,7 +18343,7 @@
       const themeRef = useTheme(
         "Empty",
         "-empty",
-        style$1N,
+        style$1M,
         emptyLight,
         props,
         mergedClsPrefixRef
@@ -18260,7 +18431,7 @@
     }
   });
 
-  function self$1x(vars) {
+  function self$1w(vars) {
     const {
       borderRadius,
       iconMedium,
@@ -18317,7 +18488,7 @@
       Scrollbar: scrollbarLight,
       Empty: emptyLight
     },
-    self: self$1x
+    self: self$1w
   });
 
   const internalSelectMenuDark = {
@@ -18327,7 +18498,7 @@
       Scrollbar: scrollbarDark,
       Empty: emptyDark$1
     },
-    self: self$1x
+    self: self$1w
   };
 
   cB("base-select-menu", [cM("rtl", `
@@ -18568,7 +18739,7 @@
     })];
   }
 
-  var style$1M = cB("base-select-menu", `
+  var style$1L = cB("base-select-menu", `
   line-height: 1.5;
   outline: none;
   z-index: 0;
@@ -18756,7 +18927,7 @@
       const themeRef = useTheme(
         "InternalSelectMenu",
         "-internal-select-menu",
-        style$1M,
+        style$1L,
         internalSelectMenuLight,
         props,
         vue.toRef(props, "clsPrefix")
@@ -19224,7 +19395,7 @@
     }
   });
 
-  function self$1w(vars) {
+  function self$1v(vars) {
     const {
       fontBodyMedium,
       containerPrimary,
@@ -19251,13 +19422,13 @@
   const popoverLight = {
     name: "Popover",
     common: derived,
-    self: self$1w
+    self: self$1v
   };
 
   const popoverDark = {
     name: "Popover",
     common: derived$1,
-    self: self$1w
+    self: self$1v
   };
 
   cB("popover", [cM("rtl", `
@@ -19272,7 +19443,7 @@
     right: "left"
   };
   const arrowSize = "var(--u-arrow-height) * 1.414";
-  var style$1L = c$1([cB("popover", `
+  var style$1K = c$1([cB("popover", `
     transition:
       box-shadow .3s var(--u-bezier),
       background-color .3s var(--u-bezier),
@@ -19491,7 +19662,7 @@
       const themeRef = useTheme(
         "Popover",
         "-popover",
-        style$1L,
+        style$1K,
         popoverLight,
         props,
         mergedClsPrefixRef
@@ -20318,7 +20489,7 @@
     }
   });
 
-  function self$1v(vars) {
+  function self$1u(vars) {
     const {
       opacityDisabled,
       borderRadiusSmall: borderRadius,
@@ -20416,13 +20587,13 @@
   const tagLight = {
     name: "Tag",
     common: derived,
-    self: self$1v
+    self: self$1u
   };
 
   const tagDark = {
     name: "Tag",
     common: derived$1,
-    self: self$1v
+    self: self$1u
   };
 
   var rtlStyle$s = cB("tag", [cM("rtl", `
@@ -20469,7 +20640,7 @@
     }
   };
 
-  var style$1K = cB("tag", `
+  var style$1J = cB("tag", `
   white-space: nowrap;
   position: relative;
   box-sizing: border-box;
@@ -20636,7 +20807,7 @@
       const themeRef = useTheme(
         "Tag",
         "-tag",
-        style$1K,
+        style$1J,
         tagLight,
         props,
         mergedClsPrefixRef
@@ -21000,7 +21171,7 @@
     }
   });
 
-  function self$1u(vars) {
+  function self$1t(vars) {
     const {
       heightSmall,
       heightMedium,
@@ -21020,10 +21191,10 @@
   }
   const skeletonLight$1 = {
     common: derived,
-    self: self$1u
+    self: self$1t
   };
 
-  var style$1J = c$1([cB("skeleton", `
+  var style$1I = c$1([cB("skeleton", `
     height: 1em;
     width: 100%;
     transition: background-color .3s var(--u-bezier);
@@ -21079,7 +21250,7 @@
       const themeRef = useTheme(
         "Skeleton",
         "-skeleton",
-        style$1J,
+        style$1I,
         skeletonLight$1,
         props,
         mergedClsPrefixRef
@@ -21195,7 +21366,7 @@
     }
   });
 
-  function self$1t(vars) {
+  function self$1s(vars) {
     const {
       borderRadius,
       iconMedium,
@@ -21353,7 +21524,7 @@
     peers: {
       Popover: popoverLight
     },
-    self: self$1t
+    self: self$1s
   });
 
   const internalSelectionDark = {
@@ -21362,7 +21533,7 @@
     peers: {
       Popover: popoverDark
     },
-    self: self$1t
+    self: self$1s
   };
 
   cB("base-selection", [cM("rtl", `
@@ -21395,7 +21566,7 @@
         color: var(--u-arrow-color${state}-secondary);
       `)])];
   }
-  var style$1I = c$1([cB("base-selection", `
+  var style$1H = c$1([cB("base-selection", `
     position: relative;
     z-index: auto;
     box-shadow: none;
@@ -21746,7 +21917,7 @@
       const themeRef = useTheme(
         "InternalSelection",
         "-internal-selection",
-        style$1I,
+        style$1H,
         internalSelectionLight,
         props,
         vue.toRef(props, "clsPrefix")
@@ -22827,7 +22998,7 @@
     })];
   }
 
-  var style$1H = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
+  var style$1G = c$1([c$1("@keyframes u-base-slot-machine-fade-up-in", `
     from {
       transform: translateY(60%);
       opacity: 0;
@@ -22946,7 +23117,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-slot-machine", style$1H, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-slot-machine", style$1G, vue.toRef(props, "clsPrefix"));
       const oldValueRef = vue.ref();
       const newValueRef = vue.ref();
       const numbersRef = vue.computed(() => {
@@ -23001,7 +23172,7 @@
     }
   });
 
-  function self$1s(vars) {
+  function self$1r(vars) {
     const {
       borderRadiusSmall,
       brandPrimary500,
@@ -23037,10 +23208,10 @@
   }
   const typographyLight$1 = {
     common: derived,
-    self: self$1s
+    self: self$1r
   };
 
-  var style$1G = cB("text", `
+  var style$1F = cB("text", `
   transition: color .3s var(--u-bezier);
   color: var(--u-text-color);
   margin: 0;
@@ -23348,7 +23519,7 @@
       const themeRef = useTheme(
         "Typography",
         "-text",
-        style$1G,
+        style$1F,
         typographyLight$1,
         props,
         mergedClsPrefixRef
@@ -23436,7 +23607,7 @@
     }
   });
 
-  var style$1F = cB("base-wave", `
+  var style$1E = cB("base-wave", `
   position: absolute;
   left: 0;
   right: 0;
@@ -23454,7 +23625,7 @@
       }
     },
     setup(props) {
-      useStyle("-base-wave", style$1F, vue.toRef(props, "clsPrefix"));
+      useStyle("-base-wave", style$1E, vue.toRef(props, "clsPrefix"));
       const selfRef = vue.ref(null);
       const activeRef = vue.ref(false);
       let animationTimerId = null;
@@ -23499,142 +23670,6 @@
     }
   });
 
-  function self$1r(vars) {
-    const {
-      elementsPrimary
-    } = vars;
-    return {
-      color: elementsPrimary,
-      opacity1Depth: "0.82",
-      opacity2Depth: "0.72",
-      opacity3Depth: "0.38",
-      opacity4Depth: "0.24",
-      opacity5Depth: "0.18"
-    };
-  }
-  const iconLight = {
-    name: "Icon",
-    common: derived,
-    self: self$1r
-  };
-
-  const iconDark$1 = {
-    name: "Icon",
-    common: derived$1,
-    self: self$1r
-  };
-
-  var style$1E = cB("icon", `
-  height: 1em;
-  width: 1em;
-  line-height: 1em;
-  text-align: center;
-  display: inline-block;
-  position: relative;
-  fill: currentColor;
-  transform: translateZ(0);
-`, [cM("color-transition", {
-    transition: "color .3s var(--u-bezier)"
-  }), cM("depth", {
-    color: "var(--u-color)"
-  }, [c$1("svg", {
-    opacity: "var(--u-opacity)",
-    transition: "opacity .3s var(--u-bezier)"
-  })]), c$1("svg", {
-    height: "100%",
-    width: "100%",
-    display: "block"
-  })]);
-
-  const iconProps = {
-    ...useTheme.props,
-    depth: [String, Number],
-    size: [Number, String],
-    color: String,
-    component: Object,
-    onClick: Function
-  };
-  const UIcon$1 = vue.defineComponent({
-    _n_icon__: true,
-    name: "Icon",
-    inheritAttrs: false,
-    props: iconProps,
-    setup(props) {
-      const {
-        mergedClsPrefixRef,
-        inlineThemeDisabled
-      } = useConfig(props);
-      const themeRef = useTheme("Icon", "-icon", style$1E, iconLight, props, mergedClsPrefixRef);
-      const cssVarsRef = vue.computed(() => {
-        const {
-          depth
-        } = props;
-        const {
-          common: {
-            cubicBezierEaseInOut
-          },
-          self
-        } = themeRef.value;
-        if (depth !== void 0) {
-          const {
-            color,
-            [`opacity${depth}Depth`]: opacity
-          } = self;
-          return {
-            "--u-bezier": cubicBezierEaseInOut,
-            "--u-color": color,
-            "--u-opacity": opacity
-          };
-        }
-        return {
-          "--u-bezier": cubicBezierEaseInOut,
-          "--u-color": "",
-          "--u-opacity": ""
-        };
-      });
-      const themeClassHandle = inlineThemeDisabled ? useThemeClass("icon", vue.computed(() => `${props.depth || "d"}`), cssVarsRef, props) : void 0;
-      return {
-        mergedClsPrefix: mergedClsPrefixRef,
-        mergedStyle: vue.computed(() => {
-          const {
-            size,
-            color
-          } = props;
-          return {
-            fontSize: formatLength(size),
-            color
-          };
-        }),
-        cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
-        themeClass: themeClassHandle?.themeClass,
-        onRender: themeClassHandle?.onRender
-      };
-    },
-    render() {
-      const {
-        $parent,
-        depth,
-        mergedClsPrefix,
-        component,
-        onRender,
-        themeClass
-      } = this;
-      if ($parent?.$options?._n_icon__) {
-        warn("icon", "don't wrap `u-icon` inside `u-icon`");
-      }
-      onRender?.();
-      return vue.h("i", vue.mergeProps(this.$attrs, {
-        role: "img",
-        class: [`${mergedClsPrefix}-icon`, themeClass, {
-          [`${mergedClsPrefix}-icon--depth`]: depth,
-          [`${mergedClsPrefix}-icon--color-transition`]: depth !== void 0
-        }],
-        style: [this.cssVars, this.mergedStyle],
-        onClick: this.onClick
-      }), component ? vue.h(component) : this.$slots);
-    }
-  });
-
   function self$1q(vars) {
     const {
       borderRadius,
@@ -59840,6 +59875,7 @@
     themeOverrides: Object,
     componentOptions: Object,
     icons: Object,
+    iconPacks: Object,
     breakpoints: Object,
     breakpointProps: Object,
     breakpointThemeOverrides: Object,
@@ -59982,6 +60018,12 @@
         } = props;
         return icons === void 0 ? UConfigProvider?.mergedIconsRef.value : icons;
       });
+      const mergedIconPacksRef = vue.computed(() => {
+        const {
+          iconPacks
+        } = props;
+        return iconPacks === void 0 ? UConfigProvider?.mergedIconPacksRef.value : iconPacks;
+      });
       const updateWindowWidth = () => {
         if (isBrowser$1) {
           windowWidthRef.value = window.innerWidth;
@@ -60090,6 +60132,7 @@
         mergedSsrBreakpointWidthRef,
         mergedRtlRef,
         mergedIconsRef,
+        mergedIconPacksRef,
         mergedComponentPropsRef,
         mergedBreakpointPropsRef,
         mergedBreakpointThemeOverridesRef,
@@ -112355,7 +112398,7 @@
     });
   }
 
-  var version = "2.0.0-beta.9";
+  var version = "2.0.0";
 
   function create({
     componentPrefix = "U",