@uzum-tech/ui 2.1.3 → 2.2.0

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

@@ -0,0 +1,240 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const icons_1 = require("../../_internal/icons");
+const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
+const debounce_1 = require("../../_utils/debounce");
+const ellipsis_1 = require("../../ellipsis");
+const empty_1 = require("../../empty");
+const input_1 = require("../../input");
+const scrollbar_1 = require("../../scrollbar");
+const styles_1 = require("../styles");
+const interface_1 = require("./interface");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+exports.default = (0, vue_1.defineComponent)({
+    name: 'IconPack',
+    props: interface_1.iconPackProps,
+    emits: ['update:value', 'update:searchValue', 'select', 'copy', 'search'],
+    setup(props, { emit }) {
+        const { mergedClsPrefixRef, mergedIconPacksRef } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('IconPack', '-icon-pack', index_cssr_1.default, styles_1.iconPackLight, props, mergedClsPrefixRef);
+        const formItem = (0, _mixins_1.useFormItem)(props);
+        const { mergedDisabledRef } = formItem;
+        (0, vue_1.provide)(interface_1.iconPackInjectionKey, {
+            mergedClsPrefixRef
+        });
+        const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
+        const mergedValueRef = (0, vue_1.computed)(() => props.value !== undefined ? props.value : uncontrolledValueRef.value);
+        const uncontrolledSearchRef = (0, vue_1.ref)(props.defaultSearchValue);
+        const mergedSearchRef = (0, vue_1.computed)(() => props.searchValue !== undefined
+            ? props.searchValue
+            : uncontrolledSearchRef.value);
+        const mergedPackRef = (0, vue_1.computed)(() => {
+            const { pack } = props;
+            if (pack && typeof pack === 'object')
+                return pack;
+            const config = mergedIconPacksRef === null || mergedIconPacksRef === void 0 ? void 0 : mergedIconPacksRef.value;
+            if (!config)
+                return undefined;
+            const name = typeof pack === 'string' ? pack : config.defaultPackName;
+            return config.packs.find(p => p.name === name);
+        });
+        function renderIconVNode(name) {
+            const pack = mergedPackRef.value;
+            if (!pack)
+                return null;
+            if (props.async === true && typeof pack.renderAsyncIcon === 'function')
+                return pack.renderAsyncIcon(name);
+            if (typeof pack.renderIcon === 'function')
+                return pack.renderIcon(name);
+            if (typeof pack.renderAsyncIcon === 'function')
+                return pack.renderAsyncIcon(name);
+            return null;
+        }
+        const allIconsRef = (0, vue_1.computed)(() => {
+            const pack = mergedPackRef.value;
+            if (!pack)
+                return [];
+            const format = props.formatIconLabel;
+            return pack.iconNames.map((name) => {
+                const slashIndex = name.indexOf('/');
+                const group = slashIndex === -1 ? '' : name.slice(0, slashIndex);
+                const defaultLabel = slashIndex === -1 ? name : name.slice(slashIndex + 1);
+                return {
+                    name,
+                    group,
+                    label: format ? format(name, group) : defaultLabel,
+                    render: () => renderIconVNode(name)
+                };
+            });
+        });
+        const searchIndexRef = (0, vue_1.computed)(() => allIconsRef.value.map(icon => `${icon.name}\n${icon.label}`.toLowerCase()));
+        const debouncedQueryRef = (0, vue_1.ref)(mergedSearchRef.value.trim().toLowerCase());
+        const applyQuery = (value) => {
+            debouncedQueryRef.value = value.trim().toLowerCase();
+        };
+        const applyQueryDebounced = (0, debounce_1.debounce)(applyQuery, props.searchDebounce);
+        (0, vue_1.watch)(mergedSearchRef, (value) => {
+            if (props.searchDebounce <= 0)
+                applyQuery(value);
+            else
+                applyQueryDebounced(value);
+        });
+        const filteredIconsRef = (0, vue_1.computed)(() => {
+            const query = debouncedQueryRef.value;
+            const icons = allIconsRef.value;
+            if (!query)
+                return icons;
+            const searchIndex = searchIndexRef.value;
+            const result = [];
+            for (let index = 0; index < icons.length; index++) {
+                if (searchIndex[index].includes(query))
+                    result.push(icons[index]);
+            }
+            return result;
+        });
+        const groupsRef = (0, vue_1.computed)(() => {
+            const icons = filteredIconsRef.value;
+            if (!props.grouped)
+                return [{ key: '', label: '', icons }];
+            const map = new Map();
+            for (const icon of icons) {
+                const existing = map.get(icon.group);
+                if (existing)
+                    existing.push(icon);
+                else
+                    map.set(icon.group, [icon]);
+            }
+            const format = props.formatGroupLabel;
+            return Array.from(map, ([key, groupIcons]) => ({
+                key,
+                label: format ? format(key) : key,
+                icons: groupIcons
+            }));
+        });
+        const isEmptyRef = (0, vue_1.computed)(() => filteredIconsRef.value.length === 0);
+        function handleSearch(value) {
+            if (props.searchValue === undefined)
+                uncontrolledSearchRef.value = value;
+            emit('update:searchValue', value);
+            emit('search', value);
+        }
+        function handleSelect(icon) {
+            if (mergedDisabledRef.value)
+                return;
+            if (props.value === undefined)
+                uncontrolledValueRef.value = icon.name;
+            emit('update:value', icon.name);
+            emit('select', icon.name, icon);
+            formItem.triggerFormInput();
+            formItem.triggerFormChange();
+            if (props.copyable) {
+                const text = props.formatCopy
+                    ? props.formatCopy(icon.name, icon)
+                    : icon.name;
+                void (0, _utils_1.copyToClipboard)(text).catch(() => { });
+                emit('copy', text, icon);
+            }
+        }
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { containerColor, borderRadius, titleTextColor, descriptionTextColor, groupTitleTextColor, groupCounterTextColor, cardColor, cardColorHover, cardColorPressed, cardColorSelected, cardBorderRadius, cardIconColor, cardIconColorSelected, cardLabelTextColor, cardLabelTextColorSelected, dividerColor } } = themeRef.value;
+            const { columns } = props;
+            const gridTemplateColumns = columns === undefined || columns === null || columns === 'auto'
+                ? `repeat(auto-fill, minmax(${(0, _utils_1.formatLength)(props.minColumnWidth)}, 1fr))`
+                : `repeat(${columns}, minmax(0, 1fr))`;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-icon-pack-container-color': containerColor,
+                '--u-icon-pack-border-radius': borderRadius,
+                '--u-icon-pack-title-text-color': titleTextColor,
+                '--u-icon-pack-description-text-color': descriptionTextColor,
+                '--u-icon-pack-group-title-text-color': groupTitleTextColor,
+                '--u-icon-pack-group-counter-text-color': groupCounterTextColor,
+                '--u-icon-pack-card-color': cardColor,
+                '--u-icon-pack-card-color-hover': cardColorHover,
+                '--u-icon-pack-card-color-pressed': cardColorPressed,
+                '--u-icon-pack-card-color-selected': cardColorSelected,
+                '--u-icon-pack-card-border-radius': cardBorderRadius,
+                '--u-icon-pack-card-icon-color': cardIconColor,
+                '--u-icon-pack-card-icon-color-selected': cardIconColorSelected,
+                '--u-icon-pack-card-label-text-color': cardLabelTextColor,
+                '--u-icon-pack-card-label-text-color-selected': cardLabelTextColorSelected,
+                '--u-icon-pack-divider-color': dividerColor,
+                '--u-icon-pack-grid-template-columns': gridTemplateColumns,
+                '--u-icon-pack-icon-size': (0, _utils_1.formatLength)(props.iconSize),
+                '--u-icon-pack-content-padding': (0, _utils_1.formatLength)(props.contentPadding)
+            };
+        });
+        const themeClassHandle = (0, _mixins_1.useThemeClass)('icon-pack', (0, vue_1.computed)(() => ''), cssVarsRef, props);
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            mergedTheme: themeRef,
+            cssVars: cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
+            mergedValue: mergedValueRef,
+            mergedSearch: mergedSearchRef,
+            mergedDisabled: mergedDisabledRef,
+            groups: groupsRef,
+            isEmpty: isEmptyRef,
+            handleSearch,
+            handleSelect
+        };
+    },
+    render() {
+        var _a;
+        const { mergedClsPrefix: cls, $slots, title, description, searchable, grouped, showGroupCounter, searchPlaceholder, searchInputProps, scrollbarProps, emptyText, emptyProps, height, maxBodyHeight, mergedDisabled } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        const showHeader = !!(title || description)
+            || !!$slots.header
+            || !!$slots.title
+            || !!$slots.description;
+        const hasFixedHeight = height !== undefined && height !== null;
+        const bodyStyle = hasFixedHeight
+            ? { flex: '1 1 auto', minHeight: 0 }
+            : { maxHeight: (0, _utils_1.formatLength)(maxBodyHeight) };
+        const renderCard = (icon) => {
+            const selected = this.mergedValue === icon.name;
+            return ((0, vue_1.h)("div", { key: icon.name, class: [
+                    `${cls}-icon-pack-card`,
+                    selected && `${cls}-icon-pack-card--selected`
+                ], role: "button", tabindex: mergedDisabled ? -1 : 0, "aria-pressed": selected, "aria-disabled": mergedDisabled, onClick: () => this.handleSelect(icon), onKeydown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.handleSelect(icon);
+                    }
+                } },
+                (0, vue_1.h)("div", { class: `${cls}-icon-pack-card__icon` }, icon.render()),
+                (0, vue_1.h)(ellipsis_1.UPerformantEllipsis, { class: `${cls}-icon-pack-card__label`, lineClamp: 1 }, { default: () => icon.label })));
+        };
+        return ((0, vue_1.h)("div", { class: [
+                `${cls}-icon-pack`,
+                this.themeClass,
+                mergedDisabled && `${cls}-icon-pack--disabled`
+            ], style: Object.assign(Object.assign({}, this.cssVars), (hasFixedHeight ? { height: (0, _utils_1.formatLength)(height) } : {})) },
+            showHeader && ((0, vue_1.h)("div", { class: `${cls}-icon-pack__header` },
+                (0, vue_1.h)("div", { class: `${cls}-icon-pack__header-main` }, (0, _utils_1.resolveSlot)($slots.header, () => [
+                    (title || $slots.title) && ((0, vue_1.h)("div", { class: `${cls}-icon-pack__title` }, $slots.title ? $slots.title() : title)),
+                    (description || $slots.description) && ((0, vue_1.h)("div", { class: `${cls}-icon-pack__description` }, $slots.description ? $slots.description() : description))
+                ])))),
+            searchable && ((0, vue_1.h)("div", { class: `${cls}-icon-pack__search` },
+                (0, vue_1.h)(input_1.UInput, Object.assign({ value: this.mergedSearch, clearable: true, disabled: mergedDisabled, placeholder: searchPlaceholder, onUpdateValue: this.handleSearch }, searchInputProps), { prefix: () => (0, vue_1.h)(icons_1.SearchOutlineIcon) }))),
+            (0, vue_1.h)(scrollbar_1.UScrollbar, Object.assign({ class: `${cls}-icon-pack__body`, style: bodyStyle }, scrollbarProps), {
+                default: () => this.isEmpty ? ((0, vue_1.h)("div", { class: `${cls}-icon-pack__empty` }, (0, _utils_1.resolveSlot)($slots.empty, () => [
+                    (0, vue_1.h)(empty_1.UEmpty, Object.assign({}, emptyProps, { size: "large", description: emptyText, theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty }))
+                ]))) : ((0, vue_1.h)("div", { class: `${cls}-icon-pack__groups` }, this.groups.map(group => ((0, vue_1.h)("div", { key: group.key, class: `${cls}-icon-pack__group` },
+                    grouped && group.key !== '' && ((0, vue_1.h)("div", { class: `${cls}-icon-pack__group-header` },
+                        (0, vue_1.h)("div", { class: `${cls}-icon-pack__group-title` }, group.label),
+                        showGroupCounter && ((0, vue_1.h)("span", { class: `${cls}-icon-pack__group-counter` },
+                            "(",
+                            group.icons.length,
+                            ")")))),
+                    (0, vue_1.h)("div", { class: `${cls}-icon-pack__grid` }, group.icons.map(renderCard)))))))
+            }),
+            $slots.footer && ((0, vue_1.h)("div", { class: `${cls}-icon-pack__footer` }, $slots.footer()))));
+    }
+});