@uzum-tech/ui 2.1.3 → 2.2.0

package/es/icon-pack/src/IconPack.mjs

@@ -0,0 +1,300 @@
+import { computed, defineComponent, h, provide, ref, watch } from 'vue';
+import { SearchOutlineIcon } from "../../_internal/icons/index.mjs";
+import { useConfig, useFormItem, useTheme, useThemeClass } from "../../_mixins/index.mjs";
+import { copyToClipboard, formatLength, resolveSlot } from "../../_utils/index.mjs";
+import { debounce } from "../../_utils/debounce/index.mjs";
+import { UPerformantEllipsis } from "../../ellipsis/index.mjs";
+import { UEmpty } from "../../empty/index.mjs";
+import { UInput } from "../../input/index.mjs";
+import { UScrollbar } from "../../scrollbar/index.mjs";
+import { iconPackLight } from "../styles/index.mjs";
+import { iconPackInjectionKey, iconPackProps } from "./interface.mjs";
+import style from "./styles/index.cssr.mjs";
+export default defineComponent({
+  name: 'IconPack',
+  props: iconPackProps,
+  emits: ['update:value', 'update:searchValue', 'select', 'copy', 'search'],
+  setup(props, {
+    emit
+  }) {
+    const {
+      mergedClsPrefixRef,
+      mergedIconPacksRef
+    } = useConfig(props);
+    const themeRef = useTheme('IconPack', '-icon-pack', style, iconPackLight, props, mergedClsPrefixRef);
+    const formItem = useFormItem(props);
+    const {
+      mergedDisabledRef
+    } = formItem;
+    provide(iconPackInjectionKey, {
+      mergedClsPrefixRef
+    });
+    const uncontrolledValueRef = ref(props.defaultValue);
+    const mergedValueRef = computed(() => props.value !== undefined ? props.value : uncontrolledValueRef.value);
+    const uncontrolledSearchRef = ref(props.defaultSearchValue);
+    const mergedSearchRef = computed(() => props.searchValue !== undefined ? props.searchValue : uncontrolledSearchRef.value);
+    const mergedPackRef = 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 = 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 = computed(() => allIconsRef.value.map(icon => `${icon.name}\n${icon.label}`.toLowerCase()));
+    const debouncedQueryRef = ref(mergedSearchRef.value.trim().toLowerCase());
+    const applyQuery = value => {
+      debouncedQueryRef.value = value.trim().toLowerCase();
+    };
+    const applyQueryDebounced = debounce(applyQuery, props.searchDebounce);
+    watch(mergedSearchRef, value => {
+      if (props.searchDebounce <= 0) applyQuery(value);else applyQueryDebounced(value);
+    });
+    const filteredIconsRef = 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 = 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 = 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 copyToClipboard(text).catch(() => {});
+        emit('copy', text, icon);
+      }
+    }
+    const cssVarsRef = 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(${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': formatLength(props.iconSize),
+        '--u-icon-pack-content-padding': formatLength(props.contentPadding)
+      };
+    });
+    const themeClassHandle = useThemeClass('icon-pack', 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: formatLength(maxBodyHeight)
+    };
+    const renderCard = icon => {
+      const selected = this.mergedValue === icon.name;
+      return 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);
+          }
+        }
+      }, h("div", {
+        class: `${cls}-icon-pack-card__icon`
+      }, icon.render()), h(UPerformantEllipsis, {
+        class: `${cls}-icon-pack-card__label`,
+        lineClamp: 1
+      }, {
+        default: () => icon.label
+      }));
+    };
+    return h("div", {
+      class: [`${cls}-icon-pack`, this.themeClass, mergedDisabled && `${cls}-icon-pack--disabled`],
+      style: Object.assign(Object.assign({}, this.cssVars), hasFixedHeight ? {
+        height: formatLength(height)
+      } : {})
+    }, showHeader && h("div", {
+      class: `${cls}-icon-pack__header`
+    }, h("div", {
+      class: `${cls}-icon-pack__header-main`
+    }, resolveSlot($slots.header, () => [(title || $slots.title) && h("div", {
+      class: `${cls}-icon-pack__title`
+    }, $slots.title ? $slots.title() : title), (description || $slots.description) && h("div", {
+      class: `${cls}-icon-pack__description`
+    }, $slots.description ? $slots.description() : description)]))), searchable && h("div", {
+      class: `${cls}-icon-pack__search`
+    }, h(UInput, Object.assign({
+      value: this.mergedSearch,
+      clearable: true,
+      disabled: mergedDisabled,
+      placeholder: searchPlaceholder,
+      onUpdateValue: this.handleSearch
+    }, searchInputProps), {
+      prefix: () => h(SearchOutlineIcon)
+    })), h(UScrollbar, Object.assign({
+      class: `${cls}-icon-pack__body`,
+      style: bodyStyle
+    }, scrollbarProps), {
+      default: () => this.isEmpty ? h("div", {
+        class: `${cls}-icon-pack__empty`
+      }, resolveSlot($slots.empty, () => [h(UEmpty, Object.assign({}, emptyProps, {
+        size: "large",
+        description: emptyText,
+        theme: this.mergedTheme.peers.Empty,
+        themeOverrides: this.mergedTheme.peerOverrides.Empty
+      }))])) : h("div", {
+        class: `${cls}-icon-pack__groups`
+      }, this.groups.map(group => h("div", {
+        key: group.key,
+        class: `${cls}-icon-pack__group`
+      }, grouped && group.key !== '' && h("div", {
+        class: `${cls}-icon-pack__group-header`
+      }, h("div", {
+        class: `${cls}-icon-pack__group-title`
+      }, group.label), showGroupCounter && h("span", {
+        class: `${cls}-icon-pack__group-counter`
+      }, "(", group.icons.length, ")")), h("div", {
+        class: `${cls}-icon-pack__grid`
+      }, group.icons.map(renderCard)))))
+    }), $slots.footer && h("div", {
+      class: `${cls}-icon-pack__footer`
+    }, $slots.footer()));
+  }
+});