@uzum-tech/ui 1.0.2 → 1.1.0

package/es/_internal/account-option/index.d.ts

@@ -0,0 +1 @@
+export { default } from './src/AccountOption';

package/es/_internal/account-option/index.js

@@ -0,0 +1 @@
+export { default } from './src/AccountOption';

package/es/_internal/account-option/src/AccountOption.d.ts

@@ -0,0 +1,162 @@
+import { type PropType, VNodeChild } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    icon: PropType<() => VNodeChild>;
+    avatar: PropType<() => VNodeChild>;
+    label: PropType<VNodeChild>;
+    value: (StringConstructor | NumberConstructor)[];
+    theme: PropType<import("../../../_mixins").Theme<"AccountOption", {
+        height: string;
+        labelColor: string;
+        labelFontSize: string;
+        labelFontWeight: string;
+        labelLineHeight: string;
+        valueFontSize: string;
+        valueFontWeight: string;
+        valueLineHeight: string;
+        avatarColor: string;
+        avatarIconColor: string;
+        iconWidth: string;
+        iconHeight: string;
+        iconMargin: string;
+        iconSize: string;
+        labelMargin: string;
+        avatarWidth: string;
+        avatarHeight: string;
+        avatarRadius: string;
+        avatarSize: string;
+    }, any>>;
+    themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"AccountOption", {
+        height: string;
+        labelColor: string;
+        labelFontSize: string;
+        labelFontWeight: string;
+        labelLineHeight: string;
+        valueFontSize: string;
+        valueFontWeight: string;
+        valueLineHeight: string;
+        avatarColor: string;
+        avatarIconColor: string;
+        iconWidth: string;
+        iconHeight: string;
+        iconMargin: string;
+        iconSize: string;
+        labelMargin: string;
+        avatarWidth: string;
+        avatarHeight: string;
+        avatarRadius: string;
+        avatarSize: string;
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"AccountOption", {
+        height: string;
+        labelColor: string;
+        labelFontSize: string;
+        labelFontWeight: string;
+        labelLineHeight: string;
+        valueFontSize: string;
+        valueFontWeight: string;
+        valueLineHeight: string;
+        avatarColor: string;
+        avatarIconColor: string;
+        iconWidth: string;
+        iconHeight: string;
+        iconMargin: string;
+        iconSize: string;
+        labelMargin: string;
+        avatarWidth: string;
+        avatarHeight: string;
+        avatarRadius: string;
+        avatarSize: string;
+    }, any>>>;
+}, {
+    mergedClsPrefix: import("vue").Ref<string>;
+    cssVars: import("vue").ComputedRef<{
+        '--u-height': string;
+        '--u-icon-width': string;
+        '--u-icon-height': string;
+        '--u-icon-margin': string;
+        '--u-icon-size': string;
+        '--u-label-margin': string;
+        '--u-label-color': string;
+        '--u-label-font-size': string;
+        '--u-label-font-weight': string;
+        '--u-label-line-height': string;
+        '--u-value-font-size': string;
+        '--u-value-font-weight': string;
+        '--u-value-line-height': string;
+        '--u-avatar-width': string;
+        '--u-avatar-height': string;
+        '--u-avatar-radius': string;
+        '--u-avatar-color': string;
+        '--u-avatar-icon-color': string;
+        '--u-avatar-size': string;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: PropType<() => VNodeChild>;
+    avatar: PropType<() => VNodeChild>;
+    label: PropType<VNodeChild>;
+    value: (StringConstructor | NumberConstructor)[];
+    theme: PropType<import("../../../_mixins").Theme<"AccountOption", {
+        height: string;
+        labelColor: string;
+        labelFontSize: string;
+        labelFontWeight: string;
+        labelLineHeight: string;
+        valueFontSize: string;
+        valueFontWeight: string;
+        valueLineHeight: string;
+        avatarColor: string;
+        avatarIconColor: string;
+        iconWidth: string;
+        iconHeight: string;
+        iconMargin: string;
+        iconSize: string;
+        labelMargin: string;
+        avatarWidth: string;
+        avatarHeight: string;
+        avatarRadius: string;
+        avatarSize: string;
+    }, any>>;
+    themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"AccountOption", {
+        height: string;
+        labelColor: string;
+        labelFontSize: string;
+        labelFontWeight: string;
+        labelLineHeight: string;
+        valueFontSize: string;
+        valueFontWeight: string;
+        valueLineHeight: string;
+        avatarColor: string;
+        avatarIconColor: string;
+        iconWidth: string;
+        iconHeight: string;
+        iconMargin: string;
+        iconSize: string;
+        labelMargin: string;
+        avatarWidth: string;
+        avatarHeight: string;
+        avatarRadius: string;
+        avatarSize: string;
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"AccountOption", {
+        height: string;
+        labelColor: string;
+        labelFontSize: string;
+        labelFontWeight: string;
+        labelLineHeight: string;
+        valueFontSize: string;
+        valueFontWeight: string;
+        valueLineHeight: string;
+        avatarColor: string;
+        avatarIconColor: string;
+        iconWidth: string;
+        iconHeight: string;
+        iconMargin: string;
+        iconSize: string;
+        labelMargin: string;
+        avatarWidth: string;
+        avatarHeight: string;
+        avatarRadius: string;
+        avatarSize: string;
+    }, any>>>;
+}>>, {}, {}>;
+export default _default;

package/es/_internal/account-option/src/AccountOption.js

@@ -0,0 +1,56 @@
+import { h, defineComponent, computed } from 'vue';
+import { useConfig, useTheme } from '../../../_mixins';
+import { UBaseIcon } from '../../icon';
+import style from './styles/index.cssr';
+import { accountOptionLight } from '../styles';
+export default defineComponent({
+    name: 'BaseClear',
+    inheritAttrs: false,
+    props: Object.assign(Object.assign({}, useTheme.props), { icon: Function, avatar: Function, label: [String, Object], value: [String, Number] }),
+    setup(props) {
+        const { mergedClsPrefixRef } = useConfig(props);
+        const themeRef = useTheme('AccountOption', '-base-account-option', style, accountOptionLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { self: { height, iconWidth, iconHeight, iconMargin, iconSize, labelMargin, labelColor, labelFontSize, labelFontWeight, labelLineHeight, valueFontSize, valueFontWeight, valueLineHeight, avatarWidth, avatarHeight, avatarRadius, avatarColor, avatarIconColor, avatarSize } } = themeRef.value;
+            return {
+                '--u-height': height,
+                '--u-icon-width': iconWidth,
+                '--u-icon-height': iconHeight,
+                '--u-icon-margin': iconMargin,
+                '--u-icon-size': iconSize,
+                '--u-label-margin': labelMargin,
+                '--u-label-color': labelColor,
+                '--u-label-font-size': labelFontSize,
+                '--u-label-font-weight': labelFontWeight,
+                '--u-label-line-height': labelLineHeight,
+                '--u-value-font-size': valueFontSize,
+                '--u-value-font-weight': valueFontWeight,
+                '--u-value-line-height': valueLineHeight,
+                '--u-avatar-width': avatarWidth,
+                '--u-avatar-height': avatarHeight,
+                '--u-avatar-radius': avatarRadius,
+                '--u-avatar-color': avatarColor,
+                '--u-avatar-icon-color': avatarIconColor,
+                '--u-avatar-size': avatarSize
+            };
+        });
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            cssVars: cssVarsRef
+        };
+    },
+    render() {
+        const { mergedClsPrefix, cssVars } = this;
+        const icon = this.avatar || this.icon ? (h("div", { class: `${mergedClsPrefix}-base-account-option__icon` }, h(UBaseIcon, { clsPrefix: mergedClsPrefix }, {
+            default: this.avatar || this.icon
+        }))) : null;
+        return (h("div", { class: [
+                `${mergedClsPrefix}-base-account-option`,
+                this.avatar && `${mergedClsPrefix}-base-account-option--avatar`
+            ], style: cssVars },
+            icon,
+            h("div", { class: `${mergedClsPrefix}-base-account-option__wrap` },
+                h("div", { class: `${mergedClsPrefix}-base-account-option__label` }, this.label),
+                h("div", { class: `${mergedClsPrefix}-base-account-option__value` }, this.value))));
+    }
+});

package/es/_internal/account-option/src/styles/index.cssr.d.ts

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

package/es/_internal/account-option/src/styles/index.cssr.js

@@ -0,0 +1,40 @@
+import { cB, cE, cM } from '../../../../_utils/cssr';
+export default cB('base-account-option', `
+ display: flex;
+ align-items: center;
+ position: relative;
+ height: var(--u-height);
+`, [cE('icon', `
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ width: var(--u-icon-width);
+ height: var(--u-icon-height);
+ margin: var(--u-icon-margin);
+ font-size: var(--u-icon-size);
+ `), cE('wrap', `
+ width: 10px;
+ flex-grow: 1;
+ `), cE('label', `
+ margin: var(--u-label-margin);
+ color: var(--u-label-color);
+ font-size: var(--u-label-font-size);
+ font-weight: var(--u-label-font-weight);
+ line-height: var(--u-label-line-height);
+ text-overflow: ellipsis;
+ overflow: hidden;
+ `), cE('value', `
+ font-size: var(--u-value-font-size);
+ font-weight: var(--u-value-font-weight);
+ line-height: var(--u-value-line-height);
+ text-overflow: ellipsis;
+ overflow: hidden;
+ `), cM('avatar', [cE('icon', `
+ width: var(--u-avatar-width);
+ height: var(--u-avatar-height);
+ border-radius: var(--u-avatar-radius);
+ background: var(--u-avatar-color);
+ color: var(--u-avatar-icon-color);
+ font-size: var(--u-avatar-size);
+ `)])]);

package/es/_internal/account-option/styles/_common.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    iconWidth: string;
+    iconHeight: string;
+    iconMargin: string;
+    iconSize: string;
+    labelMargin: string;
+    avatarWidth: string;
+    avatarHeight: string;
+    avatarRadius: string;
+    avatarSize: string;
+};
+export default _default;

package/es/_internal/account-option/styles/_common.js

@@ -0,0 +1,11 @@
+export default {
+    iconWidth: '44px',
+    iconHeight: '44px',
+    iconMargin: '0 16px 0 0',
+    iconSize: '44px',
+    labelMargin: '0 0 4px 0',
+    avatarWidth: '44px',
+    avatarHeight: '28px',
+    avatarRadius: '4px',
+    avatarSize: '16px'
+};

package/es/_internal/account-option/styles/dark.d.ts

@@ -0,0 +1,2 @@
+import { type AccountOptionTheme } from './light';
+export declare const accountOptionDark: AccountOptionTheme;

package/es/_internal/account-option/styles/dark.js

@@ -0,0 +1,7 @@
+import { commonDark } from '../../../_styles/common';
+import { self } from './light';
+export const accountOptionDark = {
+    name: 'AccountOption',
+    common: commonDark,
+    self
+};

package/es/_internal/account-option/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { accountOptionDark } from './dark';
+export { accountOptionLight } from './light';
+export type { AccountOptionTheme, AccountOptionThemeVars } from './light';

package/es/_internal/account-option/styles/index.js

@@ -0,0 +1,2 @@
+export { accountOptionDark } from './dark';
+export { accountOptionLight } from './light';

package/es/_internal/account-option/styles/light.d.ts

@@ -0,0 +1,26 @@
+import type { ThemeCommonVars } from '../../../_styles/common';
+import { type Theme } from '../../../_mixins';
+export declare const self: (vars: ThemeCommonVars) => {
+    height: string;
+    labelColor: string;
+    labelFontSize: string;
+    labelFontWeight: string;
+    labelLineHeight: string;
+    valueFontSize: string;
+    valueFontWeight: string;
+    valueLineHeight: string;
+    avatarColor: string;
+    avatarIconColor: string;
+    iconWidth: string;
+    iconHeight: string;
+    iconMargin: string;
+    iconSize: string;
+    labelMargin: string;
+    avatarWidth: string;
+    avatarHeight: string;
+    avatarRadius: string;
+    avatarSize: string;
+};
+export type AccountOptionThemeVars = ReturnType<typeof self>;
+export declare const accountOptionLight: Theme<'AccountOption', AccountOptionThemeVars>;
+export type AccountOptionTheme = typeof accountOptionLight;

package/es/_internal/account-option/styles/light.js

@@ -0,0 +1,11 @@
+import { commonLight } from '../../../_styles/common';
+import commonVars from './_common';
+export const self = (vars) => {
+    const { heightHuge, fontBodyLarge, fontTitleMedium, lineHeightBodyLarge, lineHeightTitleMedium, fontWeight, fontWeightStrong, textSecondary, elementsPrimary, elementsSecondary } = vars;
+    return Object.assign(Object.assign({}, commonVars), { height: heightHuge, labelColor: textSecondary, labelFontSize: fontBodyLarge, labelFontWeight: fontWeight, labelLineHeight: lineHeightBodyLarge, valueFontSize: fontTitleMedium, valueFontWeight: fontWeightStrong, valueLineHeight: lineHeightTitleMedium, avatarColor: elementsPrimary, avatarIconColor: elementsSecondary });
+};
+export const accountOptionLight = {
+    name: 'AccountOption',
+    common: commonLight,
+    self
+};

package/es/_internal/index.d.ts

@@ -22,3 +22,4 @@ export { checkboxGroupInjectionKey, checkboxBaseProps, useCheckbox } from './che
 export type { CheckboxBaseProps, UseCheckbox, OnUpdateChecked, OnUpdateCheckedImpl, CheckboxInst } from './checkbox';
 export { radioBaseProps, radioGroupInjectionKey, useRadio } from './radio';
 export type { OnUpdateValue, OnUpdateValueImpl, RadioGroupInjection, UseRadio, RadioBaseProps } from './radio';
+export { default as UBaseAccountOption } from './account-option';

package/es/_internal/index.js

@@ -15,3 +15,4 @@ export { default as UBaseSuffix } from './suffix';
 export { UScrollbar, UxScrollbar } from './scrollbar';
 export { checkboxGroupInjectionKey, checkboxBaseProps, useCheckbox } from './checkbox';
 export { radioBaseProps, radioGroupInjectionKey, useRadio } from './radio';
+export { default as UBaseAccountOption } from './account-option';

package/es/_internal/select-menu/src/SelectMenu.d.ts

@@ -16,6 +16,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     multiple: BooleanConstructor;
+    account: BooleanConstructor;
     size: {
         type: PropType<Size>;
         default: string;
@@ -474,6 +475,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     multiple: BooleanConstructor;
+    account: BooleanConstructor;
     size: {
         type: PropType<Size>;
         default: string;
@@ -686,6 +688,7 @@ declare const _default: import("vue").DefineComponent<{
     loading: boolean;
     inlineThemeDisabled: boolean;
     scrollable: boolean;
+    account: boolean;
     showCheckmark: boolean;
     labelField: string;
     autoPending: boolean;

package/es/_internal/select-menu/src/SelectMenu.js

@@ -25,7 +25,7 @@ export default defineComponent({
         }, treeMate: {
             type: Object,
             required: true
-        }, multiple: Boolean, size: {
+        }, multiple: Boolean, account: Boolean, size: {
             type: String,
             default: 'medium'
         }, value: {
@@ -246,6 +246,7 @@ export default defineComponent({
             nodePropsRef: toRef(props, 'nodeProps'),
             showCheckmarkRef: toRef(props, 'showCheckmark'),
             multipleRef: toRef(props, 'multiple'),
+            accountRef: toRef(props, 'account'),
             valueRef: toRef(props, 'value'),
             renderLabelRef: toRef(props, 'renderLabel'),
             renderOptionRef: toRef(props, 'renderOption'),

package/es/_internal/select-menu/src/SelectOption.d.ts

@@ -13,6 +13,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     multiple: Ref<boolean>;
+    account: Ref<boolean>;
     isGrouped: import("vue").ComputedRef<boolean | null>;
     showCheckmark: Ref<boolean>;
     nodeProps: Ref<import("./interface").NodeProps | undefined>;

package/es/_internal/select-menu/src/SelectOption.js

@@ -4,6 +4,7 @@ import { render, mergeEventHandlers } from '../../../_utils';
 import { CheckmarkIcon } from '../../icons';
 import { UBaseIcon } from '../../icon';
 import { internalSelectionMenuInjectionKey } from './interface';
+import { UBaseAccountOption } from '../..';
 function renderCheckMark(show, clsPrefix) {
     return (h(Transition, { name: "fade-in-scale-up-transition" }, {
         default: () => show ? (h(UBaseIcon, { clsPrefix: clsPrefix, class: `${clsPrefix}-base-select-option__check` }, {
@@ -24,7 +25,7 @@ export default defineComponent({
         }
     },
     setup(props) {
-        const { valueRef, pendingTmNodeRef, multipleRef, valueSetRef, renderLabelRef, renderOptionRef, labelFieldRef, valueFieldRef, showCheckmarkRef, nodePropsRef, handleOptionClick, handleOptionMouseEnter
+        const { valueRef, pendingTmNodeRef, multipleRef, accountRef, valueSetRef, renderLabelRef, renderOptionRef, labelFieldRef, valueFieldRef, showCheckmarkRef, nodePropsRef, handleOptionClick, handleOptionMouseEnter
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(internalSelectionMenuInjectionKey);
         const isPendingRef = useMemo(() => {
@@ -54,6 +55,7 @@ export default defineComponent({
         }
         return {
             multiple: multipleRef,
+            account: accountRef,
             isGrouped: useMemo(() => {
                 const { tmNode } = props;
                 const { parent } = tmNode;
@@ -85,14 +87,17 @@ export default defineComponent({
         };
     },
     render() {
-        const { clsPrefix, tmNode: { rawNode }, isSelected, isPending, isGrouped, showCheckmark, nodeProps, renderOption, renderLabel, handleClick, handleMouseEnter, handleMouseMove } = this;
+        const { clsPrefix, tmNode: { rawNode }, isSelected, isPending, isGrouped, showCheckmark, nodeProps, renderOption, renderLabel, handleClick, handleMouseEnter, handleMouseMove, account } = this;
         const checkmark = renderCheckMark(isSelected, clsPrefix);
-        const children = renderLabel
-            ? [renderLabel(rawNode, isSelected), showCheckmark && checkmark]
-            : [
-                render(rawNode[this.labelField], rawNode, isSelected),
+        const label = renderLabel
+            ? renderLabel(rawNode, isSelected)
+            : render(rawNode[this.labelField], rawNode, isSelected);
+        const children = account
+            ? [
+                h(UBaseAccountOption, Object.assign({}, rawNode, { label: label })),
                 showCheckmark && checkmark
-            ];
+            ]
+            : [label, showCheckmark && checkmark];
         const attrs = nodeProps === null || nodeProps === void 0 ? void 0 : nodeProps(rawNode);
         const node = (h("div", Object.assign({}, attrs, { class: [
                 `${clsPrefix}-base-select-option`,
@@ -103,7 +108,8 @@ export default defineComponent({
                     [`${clsPrefix}-base-select-option--selected`]: isSelected,
                     [`${clsPrefix}-base-select-option--grouped`]: isGrouped,
                     [`${clsPrefix}-base-select-option--pending`]: isPending,
-                    [`${clsPrefix}-base-select-option--show-checkmark`]: showCheckmark
+                    [`${clsPrefix}-base-select-option--show-checkmark`]: showCheckmark,
+                    [`${clsPrefix}-base-select-option--account`]: account
                 }
             ], style: [(attrs === null || attrs === void 0 ? void 0 : attrs.style) || '', rawNode.style || ''], onClick: mergeEventHandlers([handleClick, attrs === null || attrs === void 0 ? void 0 : attrs.onClick]), onMouseenter: mergeEventHandlers([
                 handleMouseEnter,

package/es/_internal/select-menu/src/interface.d.ts

@@ -22,6 +22,7 @@ export interface InternalSelectMenuInjection {
     valueSetRef: Ref<Set<number | string>>;
     pendingTmNodeRef: Ref<TreeNode<SelectBaseOption> | null>;
     multipleRef: Ref<boolean>;
+    accountRef: Ref<boolean>;
     valueRef: Ref<string | number | Array<string | number> | null>;
     renderLabelRef: Ref<RenderLabel | undefined>;
     renderOptionRef: Ref<RenderOption | undefined>;

package/es/_internal/select-menu/src/styles/index.cssr.js

@@ -68,6 +68,7 @@ export default cB('base-select-menu', `
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
+ width: 100%;
  `), cM('show-checkmark', `
  padding-right: calc(var(--u-option-padding-right) + 20px);
  `), c('&::before', `
@@ -91,9 +92,9 @@ export default cB('base-select-menu', `
  padding-left: var(--u-option-padding-left);
  `), cM('pending', [c('&::before', `
  background-color: var(--u-option-color-pending);
- `)]), cM('selected', `
+ `)]), cM('selected', [cNotM('account', `
  color: var(--u-option-text-color-active);
- `, [c('&::before', `
+ `), c('&::before', `
  background-color: var(--u-option-color-active);
  `), cM('pending', [c('&::before', `
  background-color: var(--u-option-color-active-pending);
@@ -104,7 +105,7 @@ export default cB('base-select-menu', `
  `), cM('selected', `
  opacity: var(--u-option-opacity-disabled);
  `)]), cE('check', `
- font-size: 16px;
+ font-size: 24px;
  position: absolute;
  right: calc(var(--u-option-padding-right) - 4px);
  top: calc(50% - 7px);