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

package/es/icon/src/Icon.d.ts

@@ -1,109 +1,2 @@
-import type { Component, PropType } from 'vue';
-import type { ExtractPublicPropTypes } from '../../_utils';
-export type Depth = 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5' | undefined;
-export declare const iconProps: {
-    readonly depth: PropType<Depth>;
-    readonly size: PropType<number | string>;
-    readonly color: StringConstructor;
-    readonly component: PropType<Component>;
-    readonly onClick: PropType<(e: MouseEvent) => void>;
-    readonly theme: PropType<import("../../_mixins").Theme<"Icon", {
-        color: string;
-        opacity1Depth: string;
-        opacity2Depth: string;
-        opacity3Depth: string;
-        opacity4Depth: string;
-        opacity5Depth: string;
-    }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Icon", {
-        color: string;
-        opacity1Depth: string;
-        opacity2Depth: string;
-        opacity3Depth: string;
-        opacity4Depth: string;
-        opacity5Depth: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Icon", {
-        color: string;
-        opacity1Depth: string;
-        opacity2Depth: string;
-        opacity3Depth: string;
-        opacity4Depth: string;
-        opacity5Depth: string;
-    }, any>>>;
-};
-export type IconProps = ExtractPublicPropTypes<typeof iconProps>;
-export declare const UIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    readonly depth: PropType<Depth>;
-    readonly size: PropType<number | string>;
-    readonly color: StringConstructor;
-    readonly component: PropType<Component>;
-    readonly onClick: PropType<(e: MouseEvent) => void>;
-    readonly theme: PropType<import("../../_mixins").Theme<"Icon", {
-        color: string;
-        opacity1Depth: string;
-        opacity2Depth: string;
-        opacity3Depth: string;
-        opacity4Depth: string;
-        opacity5Depth: string;
-    }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Icon", {
-        color: string;
-        opacity1Depth: string;
-        opacity2Depth: string;
-        opacity3Depth: string;
-        opacity4Depth: string;
-        opacity5Depth: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Icon", {
-        color: string;
-        opacity1Depth: string;
-        opacity2Depth: string;
-        opacity3Depth: string;
-        opacity4Depth: string;
-        opacity5Depth: string;
-    }, any>>>;
-}>, {
-    mergedClsPrefix: import("vue").Ref<string, string>;
-    mergedStyle: import("vue").ComputedRef<{
-        fontSize: string | undefined;
-        color: string | undefined;
-    }>;
-    cssVars: import("vue").ComputedRef<{
-        '--u-bezier': string;
-        '--u-color': string;
-        '--u-opacity': string;
-    }> | undefined;
-    themeClass: import("vue").Ref<string, string> | undefined;
-    onRender: (() => void) | undefined;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly depth: PropType<Depth>;
-    readonly size: PropType<number | string>;
-    readonly color: StringConstructor;
-    readonly component: PropType<Component>;
-    readonly onClick: PropType<(e: MouseEvent) => void>;
-    readonly theme: PropType<import("../../_mixins").Theme<"Icon", {
-        color: string;
-        opacity1Depth: string;
-        opacity2Depth: string;
-        opacity3Depth: string;
-        opacity4Depth: string;
-        opacity5Depth: string;
-    }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Icon", {
-        color: string;
-        opacity1Depth: string;
-        opacity2Depth: string;
-        opacity3Depth: string;
-        opacity4Depth: string;
-        opacity5Depth: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Icon", {
-        color: string;
-        opacity1Depth: string;
-        opacity2Depth: string;
-        opacity3Depth: string;
-        opacity4Depth: string;
-        opacity5Depth: string;
-    }, any>>>;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export { iconProps, UIcon } from '../../_internal/icon';
+export type { Depth, GenericUIcon, IconNameOf, IconProps } from '../../_internal/icon';

package/es/icon/src/Icon.mjs

@@ -1,93 +1 @@
-import { computed, defineComponent, h, mergeProps } from 'vue';
-import { useConfig, useTheme, useThemeClass } from "../../_mixins/index.mjs";
-import { formatLength, warn } from "../../_utils/index.mjs";
-import { iconLight } from "../styles/index.mjs";
-import style from "./styles/index.cssr.mjs";
-export const iconProps = Object.assign(Object.assign({}, useTheme.props), {
-  depth: [String, Number],
-  size: [Number, String],
-  color: String,
-  component: Object,
-  onClick: Function
-});
-export const UIcon = defineComponent({
-  _n_icon__: true,
-  name: 'Icon',
-  inheritAttrs: false,
-  props: iconProps,
-  setup(props) {
-    const {
-      mergedClsPrefixRef,
-      inlineThemeDisabled
-    } = useConfig(props);
-    const themeRef = useTheme('Icon', '-icon', style, iconLight, props, mergedClsPrefixRef);
-    const cssVarsRef = computed(() => {
-      const {
-        depth
-      } = props;
-      const {
-        common: {
-          cubicBezierEaseInOut
-        },
-        self
-      } = themeRef.value;
-      if (depth !== undefined) {
-        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', computed(() => `${props.depth || 'd'}`), cssVarsRef, props) : undefined;
-    return {
-      mergedClsPrefix: mergedClsPrefixRef,
-      mergedStyle: computed(() => {
-        const {
-          size,
-          color
-        } = props;
-        return {
-          fontSize: formatLength(size),
-          color
-        };
-      }),
-      cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
-      themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
-      onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
-    };
-  },
-  render() {
-    var _a;
-    const {
-      $parent,
-      depth,
-      mergedClsPrefix,
-      component,
-      onRender,
-      themeClass
-    } = this;
-    if ((_a = $parent === null || $parent === void 0 ? void 0 : $parent.$options) === null || _a === void 0 ? void 0 : _a._n_icon__) {
-      warn('icon', 'don\'t wrap `u-icon` inside `u-icon`');
-    }
-    onRender === null || onRender === void 0 ? void 0 : onRender();
-    return h('i', mergeProps(this.$attrs, {
-      role: 'img',
-      class: [`${mergedClsPrefix}-icon`, themeClass, {
-        [`${mergedClsPrefix}-icon--depth`]: depth,
-        [`${mergedClsPrefix}-icon--color-transition`]: depth !== undefined
-      }],
-      style: [this.cssVars, this.mergedStyle],
-      onClick: this.onClick
-    }), component ? h(component) : this.$slots);
-  }
-});
+export { iconProps, UIcon } from "../../_internal/icon/index.mjs";

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.0.0-beta.9";
+declare const _default: "2.0.0";
 export default _default;

package/es/version.mjs

@@ -1 +1 @@
-export default '2.0.0-beta.9';
+export default '2.0.0';

package/lib/_internal/icon/index.d.ts

@@ -1 +1,3 @@
 export { default as UBaseIcon } from './src/Icon';
+export { iconProps, UIcon } from './src/UIcon';
+export type { Depth, GenericUIcon, IconNameOf, IconProps } from './src/UIcon';

package/lib/_internal/icon/index.js

@@ -3,6 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UBaseIcon = void 0;
+exports.UIcon = exports.iconProps = exports.UBaseIcon = void 0;
 var Icon_1 = require("./src/Icon");
 Object.defineProperty(exports, "UBaseIcon", { enumerable: true, get: function () { return __importDefault(Icon_1).default; } });
+var UIcon_1 = require("./src/UIcon");
+Object.defineProperty(exports, "iconProps", { enumerable: true, get: function () { return UIcon_1.iconProps; } });
+Object.defineProperty(exports, "UIcon", { enumerable: true, get: function () { return UIcon_1.UIcon; } });

package/lib/_internal/icon/src/UIcon.d.ts

@@ -0,0 +1,126 @@
+import type { IconPackBase, IconPackRegistry } from '@uzum-tech/icons';
+import type { Component, PropType, VNodeChild } from 'vue';
+import type { ExtractPublicPropTypes } from '../../../_utils';
+import type { IconPackName } from '../../../config-provider/src/internal-interface';
+export type Depth = 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5' | undefined;
+export type IconNameOf<P extends IconPackName> = IconPackRegistry extends Record<P, infer Pack> ? Pack extends IconPackBase<infer Name> ? Name : string : string;
+export declare const iconProps: {
+    readonly depth: PropType<Depth>;
+    readonly size: PropType<number | string>;
+    readonly color: StringConstructor;
+    readonly component: PropType<Component>;
+    readonly name: PropType<string>;
+    readonly pack: PropType<IconPackName>;
+    readonly onClick: PropType<(e: MouseEvent) => void>;
+    readonly theme: PropType<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>>;
+};
+export type IconProps = ExtractPublicPropTypes<typeof iconProps>;
+declare const UIconImpl: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly depth: PropType<Depth>;
+    readonly size: PropType<number | string>;
+    readonly color: StringConstructor;
+    readonly component: PropType<Component>;
+    readonly name: PropType<string>;
+    readonly pack: PropType<IconPackName>;
+    readonly onClick: PropType<(e: MouseEvent) => void>;
+    readonly theme: PropType<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>>;
+}>, {
+    mergedClsPrefix: import("vue").Ref<string, string>;
+    resolvedPackedIcon: import("vue").ComputedRef<VNodeChild>;
+    mergedStyle: import("vue").ComputedRef<{
+        fontSize: string | undefined;
+        color: string | undefined;
+    }>;
+    cssVars: import("vue").ComputedRef<{
+        '--u-bezier': string;
+        '--u-color': string;
+        '--u-opacity': string;
+    }> | undefined;
+    themeClass: import("vue").Ref<string, string> | undefined;
+    onRender: (() => void) | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly depth: PropType<Depth>;
+    readonly size: PropType<number | string>;
+    readonly color: StringConstructor;
+    readonly component: PropType<Component>;
+    readonly name: PropType<string>;
+    readonly pack: PropType<IconPackName>;
+    readonly onClick: PropType<(e: MouseEvent) => void>;
+    readonly theme: PropType<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Icon", {
+        color: string;
+        opacity1Depth: string;
+        opacity2Depth: string;
+        opacity3Depth: string;
+        opacity4Depth: string;
+        opacity5Depth: string;
+    }, any>>>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type IconBaseProps = Omit<IconProps, 'name' | 'pack'>;
+export type GenericUIcon = <P extends IconPackName = IconPackName>(props: IconBaseProps & {
+    pack?: P;
+    name?: IconNameOf<P>;
+}) => any;
+export declare const UIcon: typeof UIconImpl & GenericUIcon;
+export {};

package/lib/_internal/icon/src/UIcon.js

@@ -0,0 +1,108 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIcon = exports.iconProps = void 0;
+const vue_1 = require("vue");
+const _mixins_1 = require("../../../_mixins");
+const _utils_1 = require("../../../_utils");
+const index_cssr_1 = __importDefault(require("../../../icon/src/styles/index.cssr"));
+const styles_1 = require("../../../icon/styles");
+const Icon_1 = __importDefault(require("./Icon"));
+exports.iconProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { depth: [String, Number], size: [Number, String], color: String, component: Object, name: String, pack: String, onClick: Function });
+const UIconImpl = (0, vue_1.defineComponent)({
+    _n_icon__: true,
+    name: 'Icon',
+    props: exports.iconProps,
+    setup(props) {
+        const { mergedClsPrefixRef, mergedIconPacksRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('Icon', '-icon', index_cssr_1.default, styles_1.iconLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { depth } = props;
+            const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
+            if (depth !== undefined) {
+                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
+            ? (0, _mixins_1.useThemeClass)('icon', (0, vue_1.computed)(() => `${props.depth || 'd'}`), cssVarsRef, props)
+            : undefined;
+        const resolvedPackedIconRef = (0, vue_1.computed)(() => {
+            const { name, pack } = props;
+            if (!name)
+                return null;
+            const config = mergedIconPacksRef === null || mergedIconPacksRef === void 0 ? void 0 : mergedIconPacksRef.value;
+            if (!config) {
+                (0, _utils_1.warn)('icon', 'no icon packs configured on `u-config-provider`');
+                return null;
+            }
+            const targetName = pack !== null && pack !== void 0 ? pack : config.defaultPackName;
+            const target = config.packs.find(p => p.name === targetName);
+            if (!target) {
+                (0, _utils_1.warn)('icon', `icon pack "${targetName}" not found`);
+                return null;
+            }
+            if (config.async) {
+                return target.renderAsyncIcon(name);
+            }
+            if (!('renderIcon' in target)) {
+                (0, _utils_1.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: (0, vue_1.computed)(() => {
+                const { size, color } = props;
+                return {
+                    fontSize: (0, _utils_1.formatLength)(size),
+                    color
+                };
+            }),
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        var _a;
+        const { $parent, depth, mergedClsPrefix, component, onRender, themeClass, resolvedPackedIcon } = this;
+        if ((_a = $parent === null || $parent === void 0 ? void 0 : $parent.$options) === null || _a === void 0 ? void 0 : _a._n_icon__) {
+            (0, _utils_1.warn)('icon', 'don\'t wrap `u-icon` inside `u-icon`');
+        }
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return (0, vue_1.h)(Icon_1.default, {
+            clsPrefix: mergedClsPrefix,
+            role: 'img',
+            class: [
+                `${mergedClsPrefix}-icon`,
+                themeClass,
+                {
+                    [`${mergedClsPrefix}-icon--depth`]: depth,
+                    [`${mergedClsPrefix}-icon--color-transition`]: depth !== undefined
+                }
+            ],
+            style: [this.cssVars, this.mergedStyle],
+            onClick: this.onClick
+        }, {
+            default: () => {
+                var _a, _b;
+                return resolvedPackedIcon !== null && resolvedPackedIcon !== void 0 ? resolvedPackedIcon : (component ? (0, vue_1.h)(component) : (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a));
+            }
+        });
+    }
+});
+exports.UIcon = UIconImpl;

package/lib/_mixins/use-config.d.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef, Ref } from 'vue';
-import type { Breakpoints, GlobalComponentConfig, RtlEnabledState } from '../config-provider/src/internal-interface';
+import type { Breakpoints, GlobalComponentConfig, IconPacksConfig, RtlEnabledState } from '../config-provider/src/internal-interface';
 type UseConfigProps = Readonly<{
     bordered?: boolean;
     [key: string]: unknown;
@@ -14,6 +14,7 @@ export default function useConfig(props?: UseConfigProps, options?: {
     mergedClsPrefixRef: Ref<string>;
     mergedBreakpointsRef: Ref<Breakpoints> | undefined;
     mergedComponentPropsRef: Ref<GlobalComponentConfig | undefined> | undefined;
+    mergedIconPacksRef: Ref<IconPacksConfig | undefined> | undefined;
     namespaceRef: ComputedRef<string | undefined>;
 };
 export declare function useMergedClsPrefix(): Ref<string>;

package/lib/_mixins/use-config.js

@@ -15,6 +15,7 @@ function useConfig(props = {}, options = {
         inlineThemeDisabled: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.inlineThemeDisabled,
         mergedRtlRef: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedRtlRef,
         mergedComponentPropsRef: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedComponentPropsRef,
+        mergedIconPacksRef: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedIconPacksRef,
         mergedBreakpointsRef: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointsRef,
         mergedBorderedRef: (0, vue_1.computed)(() => {
             var _a, _b;