@uzum-tech/ui 2.1.3 → 2.2.0

package/es/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/es/icon-pack/src/interface.mjs

@@ -0,0 +1,75 @@
+import { useTheme } from "../../_mixins/index.mjs";
+import { createInjectionKey } from "../../_utils/index.mjs";
+export const iconPackProps = Object.assign(Object.assign({}, 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
+});
+export const iconPackInjectionKey = createInjectionKey('icon-pack');

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

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

package/es/icon-pack/src/styles/index.cssr.mjs

@@ -0,0 +1,131 @@
+import { c, cB, cE, cM } from "../../../_utils/cssr/index.mjs";
+export default 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);
+`, [cM('disabled', `
+ opacity: .5;
+ `, [cB('icon-pack-card', `
+ cursor: not-allowed;
+ `)]), cE('header', `
+ display: flex;
+ align-items: flex-start;
+ gap: 32px;
+ padding: var(--u-icon-pack-content-padding) var(--u-icon-pack-content-padding) 0;
+ `, [cE('header-main', `
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ `), 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);
+ `), 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);
+ `)]), cE('search', `
+ padding: 0 var(--u-icon-pack-content-padding);
+ `), cE('body', `
+ min-height: 0;
+ `, [c('.u-scrollbar-content', `
+ padding: 0 var(--u-icon-pack-content-padding) var(--u-icon-pack-content-padding);
+ `)]), cE('groups', `
+ display: flex;
+ flex-direction: column;
+ gap: 28px;
+ `), cE('group', `
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ `), cE('group-header', `
+ display: flex;
+ align-items: flex-end;
+ gap: 8px;
+ `, [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);
+ `), 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);
+ `)]), cE('grid', `
+ display: grid;
+ grid-template-columns: var(--u-icon-pack-grid-template-columns);
+ gap: 20px;
+ `), 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);
+ `, [c('&:hover', `
+ background-color: var(--u-icon-pack-card-color-hover);
+ `), c('&:active', `
+ background-color: var(--u-icon-pack-card-color-pressed);
+ `), 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);
+ `, [c('&:hover', `
+ background-color: var(--u-icon-pack-card-color-selected);
+ `)]), 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);
+ `, [c('svg', `
+ width: var(--u-icon-pack-icon-size);
+ height: var(--u-icon-pack-icon-size);
+ `)]), 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);
+ `)]), cE('empty', `
+ padding: 40px 0;
+ display: flex;
+ justify-content: center;
+ `), 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);
+ `)]);