@uzum-tech/ui 2.1.3 → 2.2.0

package/lib/icon-pack/src/interface.d.ts

@@ -0,0 +1,465 @@
+import type { AnyIconPack } from '@uzum-tech/icons';
+import type { ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNodeChild } from 'vue';
+import type { EmptyProps } from '../../empty';
+import type { InputProps } from '../../input';
+import type { ScrollbarProps } from '../../scrollbar';
+export interface IconPackIcon {
+    name: string;
+    group: string;
+    label: string;
+    render: () => VNodeChild;
+}
+export interface IconPackGroupData {
+    key: string;
+    label: string;
+    icons: IconPackIcon[];
+}
+export type RenderableIconPack = AnyIconPack & {
+    renderIcon?: (name: string) => VNodeChild;
+    renderAsyncIcon?: (name: string) => VNodeChild;
+};
+export type IconPackValue = string | null;
+export type OnIconPackSelect = (name: string, icon: IconPackIcon) => void;
+export type OnIconPackCopy = (text: string, icon: IconPackIcon) => void;
+export type IconPackFormatCopy = (name: string, icon: IconPackIcon) => string;
+export type IconPackFormatGroupLabel = (groupKey: string) => string;
+export type IconPackFormatIconLabel = (name: string, groupKey: string) => string;
+export declare const iconPackProps: {
+    readonly pack: PropType<AnyIconPack | string>;
+    readonly value: PropType<IconPackValue>;
+    readonly defaultValue: {
+        readonly type: PropType<IconPackValue>;
+        readonly default: null;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly title: StringConstructor;
+    readonly description: StringConstructor;
+    readonly searchable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly searchValue: StringConstructor;
+    readonly defaultSearchValue: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly searchPlaceholder: StringConstructor;
+    readonly searchDebounce: {
+        readonly type: NumberConstructor;
+        readonly default: 200;
+    };
+    readonly grouped: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly columns: {
+        readonly type: PropType<number | "auto">;
+        readonly default: "auto";
+    };
+    readonly minColumnWidth: {
+        readonly type: PropType<number | string>;
+        readonly default: 150;
+    };
+    readonly iconSize: {
+        readonly type: PropType<number | string>;
+        readonly default: 40;
+    };
+    readonly height: PropType<number | string>;
+    readonly maxBodyHeight: {
+        readonly type: PropType<number | string>;
+        readonly default: 496;
+    };
+    readonly contentPadding: {
+        readonly type: PropType<number | string>;
+        readonly default: 24;
+    };
+    readonly async: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly copyable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly formatCopy: PropType<IconPackFormatCopy>;
+    readonly formatGroupLabel: PropType<IconPackFormatGroupLabel>;
+    readonly formatIconLabel: PropType<IconPackFormatIconLabel>;
+    readonly showGroupCounter: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly emptyText: StringConstructor;
+    readonly emptyProps: PropType<Partial<EmptyProps>>;
+    readonly searchInputProps: PropType<Partial<InputProps>>;
+    readonly scrollbarProps: PropType<Partial<ScrollbarProps>>;
+    readonly theme: PropType<import("../../_mixins").Theme<"IconPack", {
+        containerColor: string;
+        borderRadius: string;
+        titleTextColor: string;
+        descriptionTextColor: string;
+        groupTitleTextColor: string;
+        groupCounterTextColor: string;
+        cardColor: string;
+        cardColorHover: string;
+        cardColorPressed: string;
+        cardColorSelected: string;
+        cardBorderRadius: string;
+        cardIconColor: string;
+        cardIconColorSelected: string;
+        cardLabelTextColor: string;
+        cardLabelTextColorSelected: string;
+        dividerColor: string;
+    }, {
+        Input: import("../../_mixins").Theme<"Input", {
+            paddingTiny: string;
+            paddingSmall: string;
+            paddingMedium: string;
+            paddingLarge: string;
+            paddingHuge: string;
+            clearSize: string;
+            countTextColorDisabled: string;
+            countTextColor: string;
+            heightTiny: string;
+            heightSmall: string;
+            heightMedium: string;
+            heightLarge: string;
+            heightHuge: string;
+            fontSizeTiny: string;
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            fontSizeHuge: string;
+            lineHeight: string;
+            lineHeightTextarea: string;
+            borderRadius: string;
+            iconSize: string;
+            groupLabelTextColor: string;
+            textColor: string;
+            textColorDisabled: string;
+            textDecorationColor: string;
+            caretColor: string;
+            placeholderColor: string;
+            placeholderColorDisabled: string;
+            color: string;
+            colorDisabled: string;
+            colorFocus: string;
+            groupLabelBorder: string;
+            border: string;
+            borderHover: string;
+            borderDisabled: string;
+            borderFocus: string;
+            boxShadowFocus: string;
+            loadingColor: string;
+            loadingColorSuccess: string;
+            borderSuccess: string;
+            borderHoverSuccess: string;
+            colorFocusSuccess: string;
+            borderFocusSuccess: string;
+            boxShadowFocusSuccess: string;
+            caretColorSuccess: string;
+            loadingColorWarning: string;
+            borderWarning: string;
+            borderHoverWarning: string;
+            colorFocusWarning: string;
+            borderFocusWarning: string;
+            boxShadowFocusWarning: string;
+            caretColorWarning: string;
+            loadingColorError: string;
+            borderError: string;
+            borderHoverError: string;
+            colorFocusError: string;
+            borderFocusError: string;
+            boxShadowFocusError: string;
+            caretColorError: string;
+            clearColor: string;
+            clearColorHover: string;
+            clearColorPressed: string;
+            iconColor: string;
+            iconColorDisabled: string;
+            iconColorHover: string;
+            iconColorPressed: string;
+            suffixTextColor: string;
+            selectionColor: string;
+        }, any>;
+        Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
+            color: string;
+            colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
+        }, any>;
+        Empty: import("../../_mixins").Theme<"Empty", {
+            iconSizeSmall: string;
+            iconSizeMedium: string;
+            iconSizeLarge: string;
+            iconSizeHuge: string;
+            titleFontSizeSmall: string;
+            titleFontSizeMedium: string;
+            titleFontSizeLarge: string;
+            titleFontSizeHuge: string;
+            descriptionFontSizeSmall: string;
+            descriptionFontSizeMedium: string;
+            descriptionFontSizeLarge: string;
+            descriptionFontSizeHuge: string;
+            titleColor: string;
+            descriptionColor: string;
+            iconColor: string;
+            iconBgColor: string;
+            extraTextColor: string;
+        }, any>;
+    }>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconPack", {
+        containerColor: string;
+        borderRadius: string;
+        titleTextColor: string;
+        descriptionTextColor: string;
+        groupTitleTextColor: string;
+        groupCounterTextColor: string;
+        cardColor: string;
+        cardColorHover: string;
+        cardColorPressed: string;
+        cardColorSelected: string;
+        cardBorderRadius: string;
+        cardIconColor: string;
+        cardIconColorSelected: string;
+        cardLabelTextColor: string;
+        cardLabelTextColorSelected: string;
+        dividerColor: string;
+    }, {
+        Input: import("../../_mixins").Theme<"Input", {
+            paddingTiny: string;
+            paddingSmall: string;
+            paddingMedium: string;
+            paddingLarge: string;
+            paddingHuge: string;
+            clearSize: string;
+            countTextColorDisabled: string;
+            countTextColor: string;
+            heightTiny: string;
+            heightSmall: string;
+            heightMedium: string;
+            heightLarge: string;
+            heightHuge: string;
+            fontSizeTiny: string;
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            fontSizeHuge: string;
+            lineHeight: string;
+            lineHeightTextarea: string;
+            borderRadius: string;
+            iconSize: string;
+            groupLabelTextColor: string;
+            textColor: string;
+            textColorDisabled: string;
+            textDecorationColor: string;
+            caretColor: string;
+            placeholderColor: string;
+            placeholderColorDisabled: string;
+            color: string;
+            colorDisabled: string;
+            colorFocus: string;
+            groupLabelBorder: string;
+            border: string;
+            borderHover: string;
+            borderDisabled: string;
+            borderFocus: string;
+            boxShadowFocus: string;
+            loadingColor: string;
+            loadingColorSuccess: string;
+            borderSuccess: string;
+            borderHoverSuccess: string;
+            colorFocusSuccess: string;
+            borderFocusSuccess: string;
+            boxShadowFocusSuccess: string;
+            caretColorSuccess: string;
+            loadingColorWarning: string;
+            borderWarning: string;
+            borderHoverWarning: string;
+            colorFocusWarning: string;
+            borderFocusWarning: string;
+            boxShadowFocusWarning: string;
+            caretColorWarning: string;
+            loadingColorError: string;
+            borderError: string;
+            borderHoverError: string;
+            colorFocusError: string;
+            borderFocusError: string;
+            boxShadowFocusError: string;
+            caretColorError: string;
+            clearColor: string;
+            clearColorHover: string;
+            clearColorPressed: string;
+            iconColor: string;
+            iconColorDisabled: string;
+            iconColorHover: string;
+            iconColorPressed: string;
+            suffixTextColor: string;
+            selectionColor: string;
+        }, any>;
+        Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
+            color: string;
+            colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
+        }, any>;
+        Empty: import("../../_mixins").Theme<"Empty", {
+            iconSizeSmall: string;
+            iconSizeMedium: string;
+            iconSizeLarge: string;
+            iconSizeHuge: string;
+            titleFontSizeSmall: string;
+            titleFontSizeMedium: string;
+            titleFontSizeLarge: string;
+            titleFontSizeHuge: string;
+            descriptionFontSizeSmall: string;
+            descriptionFontSizeMedium: string;
+            descriptionFontSizeLarge: string;
+            descriptionFontSizeHuge: string;
+            titleColor: string;
+            descriptionColor: string;
+            iconColor: string;
+            iconBgColor: string;
+            extraTextColor: string;
+        }, any>;
+    }>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconPack", {
+        containerColor: string;
+        borderRadius: string;
+        titleTextColor: string;
+        descriptionTextColor: string;
+        groupTitleTextColor: string;
+        groupCounterTextColor: string;
+        cardColor: string;
+        cardColorHover: string;
+        cardColorPressed: string;
+        cardColorSelected: string;
+        cardBorderRadius: string;
+        cardIconColor: string;
+        cardIconColorSelected: string;
+        cardLabelTextColor: string;
+        cardLabelTextColorSelected: string;
+        dividerColor: string;
+    }, {
+        Input: import("../../_mixins").Theme<"Input", {
+            paddingTiny: string;
+            paddingSmall: string;
+            paddingMedium: string;
+            paddingLarge: string;
+            paddingHuge: string;
+            clearSize: string;
+            countTextColorDisabled: string;
+            countTextColor: string;
+            heightTiny: string;
+            heightSmall: string;
+            heightMedium: string;
+            heightLarge: string;
+            heightHuge: string;
+            fontSizeTiny: string;
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            fontSizeHuge: string;
+            lineHeight: string;
+            lineHeightTextarea: string;
+            borderRadius: string;
+            iconSize: string;
+            groupLabelTextColor: string;
+            textColor: string;
+            textColorDisabled: string;
+            textDecorationColor: string;
+            caretColor: string;
+            placeholderColor: string;
+            placeholderColorDisabled: string;
+            color: string;
+            colorDisabled: string;
+            colorFocus: string;
+            groupLabelBorder: string;
+            border: string;
+            borderHover: string;
+            borderDisabled: string;
+            borderFocus: string;
+            boxShadowFocus: string;
+            loadingColor: string;
+            loadingColorSuccess: string;
+            borderSuccess: string;
+            borderHoverSuccess: string;
+            colorFocusSuccess: string;
+            borderFocusSuccess: string;
+            boxShadowFocusSuccess: string;
+            caretColorSuccess: string;
+            loadingColorWarning: string;
+            borderWarning: string;
+            borderHoverWarning: string;
+            colorFocusWarning: string;
+            borderFocusWarning: string;
+            boxShadowFocusWarning: string;
+            caretColorWarning: string;
+            loadingColorError: string;
+            borderError: string;
+            borderHoverError: string;
+            colorFocusError: string;
+            borderFocusError: string;
+            boxShadowFocusError: string;
+            caretColorError: string;
+            clearColor: string;
+            clearColorHover: string;
+            clearColorPressed: string;
+            iconColor: string;
+            iconColorDisabled: string;
+            iconColorHover: string;
+            iconColorPressed: string;
+            suffixTextColor: string;
+            selectionColor: string;
+        }, any>;
+        Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
+            color: string;
+            colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
+        }, any>;
+        Empty: import("../../_mixins").Theme<"Empty", {
+            iconSizeSmall: string;
+            iconSizeMedium: string;
+            iconSizeLarge: string;
+            iconSizeHuge: string;
+            titleFontSizeSmall: string;
+            titleFontSizeMedium: string;
+            titleFontSizeLarge: string;
+            titleFontSizeHuge: string;
+            descriptionFontSizeSmall: string;
+            descriptionFontSizeMedium: string;
+            descriptionFontSizeLarge: string;
+            descriptionFontSizeHuge: string;
+            titleColor: string;
+            descriptionColor: string;
+            iconColor: string;
+            iconBgColor: string;
+            extraTextColor: string;
+        }, any>;
+    }>>>;
+};
+export type IconPackProps = ExtractPublicPropTypes<typeof iconPackProps>;
+export declare const iconPackInjectionKey: InjectionKey<{
+    mergedClsPrefixRef: Ref<string>;
+}>;

package/lib/icon-pack/src/interface.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconPackInjectionKey = exports.iconPackProps = void 0;
+const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
+exports.iconPackProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { pack: [Object, String], value: String, defaultValue: {
+        type: String,
+        default: null
+    }, disabled: {
+        type: Boolean,
+        default: undefined
+    }, title: String, description: String, searchable: {
+        type: Boolean,
+        default: true
+    }, searchValue: String, defaultSearchValue: {
+        type: String,
+        default: ''
+    }, searchPlaceholder: String, searchDebounce: {
+        type: Number,
+        default: 200
+    }, grouped: {
+        type: Boolean,
+        default: true
+    }, columns: {
+        type: [Number, String],
+        default: 'auto'
+    }, minColumnWidth: {
+        type: [Number, String],
+        default: 150
+    }, iconSize: {
+        type: [Number, String],
+        default: 40
+    }, height: [Number, String], maxBodyHeight: {
+        type: [Number, String],
+        default: 496
+    }, contentPadding: {
+        type: [Number, String],
+        default: 24
+    }, async: {
+        type: Boolean,
+        default: undefined
+    }, copyable: {
+        type: Boolean,
+        default: true
+    }, formatCopy: Function, formatGroupLabel: Function, formatIconLabel: Function, showGroupCounter: {
+        type: Boolean,
+        default: true
+    }, emptyText: String, emptyProps: Object, searchInputProps: Object, scrollbarProps: Object });
+exports.iconPackInjectionKey = (0, _utils_1.createInjectionKey)('icon-pack');

package/lib/icon-pack/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/icon-pack/src/styles/index.cssr.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+exports.default = (0, cssr_1.cB)('icon-pack', `
+ box-sizing: border-box;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 28px;
+ background-color: var(--u-icon-pack-container-color);
+ border-radius: var(--u-icon-pack-border-radius);
+ transition: background-color .3s var(--u-bezier);
+`, [(0, cssr_1.cM)('disabled', `
+ opacity: .5;
+ `, [(0, cssr_1.cB)('icon-pack-card', `
+ cursor: not-allowed;
+ `)]), (0, cssr_1.cE)('header', `
+ display: flex;
+ align-items: flex-start;
+ gap: 32px;
+ padding: var(--u-icon-pack-content-padding) var(--u-icon-pack-content-padding) 0;
+ `, [(0, cssr_1.cE)('header-main', `
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ `), (0, cssr_1.cE)('title', `
+ margin: 0;
+ font-size: 22px;
+ line-height: 32px;
+ font-weight: 700;
+ color: var(--u-icon-pack-title-text-color);
+ transition: color .3s var(--u-bezier);
+ `), (0, cssr_1.cE)('description', `
+ margin: 0;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 500;
+ color: var(--u-icon-pack-description-text-color);
+ transition: color .3s var(--u-bezier);
+ `)]), (0, cssr_1.cE)('search', `
+ padding: 0 var(--u-icon-pack-content-padding);
+ `), (0, cssr_1.cE)('body', `
+ min-height: 0;
+ `, [(0, cssr_1.c)('.u-scrollbar-content', `
+ padding: 0 var(--u-icon-pack-content-padding) var(--u-icon-pack-content-padding);
+ `)]), (0, cssr_1.cE)('groups', `
+ display: flex;
+ flex-direction: column;
+ gap: 28px;
+ `), (0, cssr_1.cE)('group', `
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ `), (0, cssr_1.cE)('group-header', `
+ display: flex;
+ align-items: flex-end;
+ gap: 8px;
+ `, [(0, cssr_1.cE)('group-title', `
+ margin: 0;
+ font-size: 18px;
+ line-height: 28px;
+ font-weight: 700;
+ color: var(--u-icon-pack-group-title-text-color);
+ transition: color .3s var(--u-bezier);
+ `), (0, cssr_1.cE)('group-counter', `
+ font-size: 14px;
+ line-height: 24px;
+ font-weight: 500;
+ color: var(--u-icon-pack-group-counter-text-color);
+ transition: color .3s var(--u-bezier);
+ `)]), (0, cssr_1.cE)('grid', `
+ display: grid;
+ grid-template-columns: var(--u-icon-pack-grid-template-columns);
+ gap: 20px;
+ `), (0, cssr_1.cB)('icon-pack-card', `
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ padding: 24px 12px;
+ border: none;
+ outline: none;
+ background-color: var(--u-icon-pack-card-color);
+ border-radius: var(--u-icon-pack-card-border-radius);
+ cursor: pointer;
+ user-select: none;
+ transition:
+ background-color .2s var(--u-bezier),
+ color .2s var(--u-bezier);
+ `, [(0, cssr_1.c)('&:hover', `
+ background-color: var(--u-icon-pack-card-color-hover);
+ `), (0, cssr_1.c)('&:active', `
+ background-color: var(--u-icon-pack-card-color-pressed);
+ `), (0, cssr_1.cM)('selected', `
+ background-color: var(--u-icon-pack-card-color-selected);
+ --u-icon-pack-card-icon-color: var(--u-icon-pack-card-icon-color-selected);
+ --u-icon-pack-card-label-text-color: var(--u-icon-pack-card-label-text-color-selected);
+ `, [(0, cssr_1.c)('&:hover', `
+ background-color: var(--u-icon-pack-card-color-selected);
+ `)]), (0, cssr_1.cE)('icon', `
+ flex-shrink: 0;
+ width: var(--u-icon-pack-icon-size);
+ height: var(--u-icon-pack-icon-size);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--u-icon-pack-card-icon-color);
+ `, [(0, cssr_1.c)('svg', `
+ width: var(--u-icon-pack-icon-size);
+ height: var(--u-icon-pack-icon-size);
+ `)]), (0, cssr_1.cE)('label', `
+ max-width: 100%;
+ padding: 0 12px;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 600;
+ text-align: center;
+ color: var(--u-icon-pack-card-label-text-color);
+ transition: color .2s var(--u-bezier);
+ `)]), (0, cssr_1.cE)('empty', `
+ padding: 40px 0;
+ display: flex;
+ justify-content: center;
+ `), (0, cssr_1.cE)('footer', `
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding: 16px var(--u-icon-pack-content-padding) var(--u-icon-pack-content-padding);
+ border-top: 1px solid var(--u-icon-pack-divider-color);
+ `)]);