@uzum-tech/ui 0.1.2 → 1.0.0

package/es/list/src/ListItem.js

@@ -1,24 +1,196 @@
-import { h, defineComponent, inject } from 'vue';
-import { throwError } from '../../_utils';
-import { listInjectionKey } from './List';
+import { h, defineComponent, inject, computed, ref } from 'vue';
+import { call, createRefFromPropsAndInjection, throwError } from '../../_utils';
+import { listInjectionKey, listItemProps } from './props';
+import { ChevronRightIcon } from '../../_internal/icons';
+import { UBaseIcon, UBaseLoading, UBaseSkeleton } from '../../_internal';
 export default defineComponent({
     name: 'ListItem',
-    setup() {
+    props: listItemProps,
+    setup(props, { slots }) {
         const listInjection = inject(listInjectionKey, null);
         if (!listInjection) {
             throwError('list-item', '`u-list-item` must be placed in `u-list`.');
         }
+        function createRef(name) {
+            if (!listInjection) {
+                return computed(() => props[name]);
+            }
+            return createRefFromPropsAndInjection(props, listInjection, name);
+        }
+        const mergedHoverable = createRef('hoverable');
+        const mergedDisabled = createRef('disabled');
+        const mergedLoading = createRef('loading');
+        const mergedLoadingSkeleton = createRef('loadingSkeleton');
+        const mergedClickHandler = createRef('onClick');
+        const mergedKeypressHandler = createRef('onKeypress');
+        const mergedPressHandler = createRef('onPress');
+        const mergedBlurHandler = createRef('onBlur');
+        const mergedFocusHandler = createRef('onFocus');
+        const hasFocus = computed(() => {
+            return !mergedDisabled.value && mergedHoverable.value;
+        });
+        const isPressed = ref(false);
+        const handleClick = (e) => {
+            if (!mergedDisabled.value) {
+                if (mergedClickHandler.value)
+                    call(mergedClickHandler.value, e);
+                if (e.which === 1 || e.button === 0) {
+                    handlePress('mouseup');
+                }
+            }
+        };
+        const handleKeyPress = (e) => {
+            if (!mergedDisabled.value) {
+                const { code } = e;
+                if (code === 'Enter' || code === 'Space' || code === 'NumpadEnter') {
+                    e.preventDefault();
+                    if (!e.repeat) {
+                        handlePress('keyup');
+                    }
+                }
+                if (mergedKeypressHandler.value)
+                    call(mergedKeypressHandler.value, e);
+            }
+        };
+        const handleBlur = (e) => {
+            if (hasFocus.value) {
+                if (mergedBlurHandler.value)
+                    call(mergedBlurHandler.value, e);
+            }
+        };
+        const handleFocus = (e) => {
+            if (hasFocus.value) {
+                if (mergedFocusHandler.value)
+                    call(mergedFocusHandler.value, e);
+            }
+        };
+        const handlePress = (eventName) => {
+            if (mergedDisabled.value ||
+                mergedLoading.value ||
+                mergedLoadingSkeleton.value) {
+                return;
+            }
+            if (mergedPressHandler.value)
+                call(mergedPressHandler.value);
+            if (hasFocus.value) {
+                isPressed.value = true;
+                window.addEventListener(eventName, () => {
+                    isPressed.value = false;
+                }, {
+                    once: true,
+                    passive: true
+                });
+            }
+        };
+        const resolveFirst = (name) => {
+            if (!(name in props))
+                return null;
+            return props[name] || slots[name] || listInjection[name].value || null;
+        };
         return {
-            showDivider: listInjection.showDividerRef,
-            mergedClsPrefix: listInjection.mergedClsPrefixRef
+            mergedClsPrefix: listInjection.mergedClsPrefix,
+            mergedShowIcon: createRef('showIcon'),
+            mergedDescriptionFirst: createRef('descriptionFirst'),
+            mergedColumnsEven: createRef('columnsEven'),
+            mergedRounded: createRef('rounded'),
+            mergedDisabled,
+            mergedLoading,
+            mergedLoadingSkeleton,
+            mergedHoverable,
+            mergedTag: createRef('tag'),
+            resolveFirst,
+            hasFocus,
+            isPressed,
+            handleClick,
+            handleKeyPress,
+            handleBlur,
+            handleFocus,
+            bordered: listInjection.bordered,
+            showDivider: listInjection.showDivider
         };
     },
     render() {
-        const { $slots, mergedClsPrefix } = this;
-        return (h("li", { class: `${mergedClsPrefix}-list-item` },
-            $slots.prefix ? (h("div", { class: `${mergedClsPrefix}-list-item__prefix` }, $slots.prefix())) : null,
-            $slots.default ? (h("div", { class: `${mergedClsPrefix}-list-item__main` }, $slots)) : null,
-            $slots.suffix ? (h("div", { class: `${mergedClsPrefix}-list-item__suffix` }, $slots.suffix())) : null,
-            this.showDivider && (h("div", { class: `${mergedClsPrefix}-list-item__divider` }))));
+        const { $slots, mergedClsPrefix, resolveFirst, showDivider } = this;
+        const mergedTag = this.mergedTag || 'ul';
+        const sharedCls = [
+            `${mergedClsPrefix}-list-item`,
+            this.mergedHoverable && `${mergedClsPrefix}-list-item--hoverable`,
+            this.mergedRounded && `${mergedClsPrefix}-list-item--rounded`,
+            this.mergedDisabled && `${mergedClsPrefix}-list-item--disabled`,
+            this.isPressed && `${mergedClsPrefix}-list-item--pressed`,
+            this.bordered && `${mergedClsPrefix}-list-item--bordered`
+        ];
+        const sharedAttrs = {
+            tabindex: this.hasFocus ? 0 : -1,
+            onMousedown: this.handleClick,
+            onKeydown: this.handleKeyPress,
+            onBlur: this.handleBlur,
+            onFocus: this.handleFocus
+        };
+        const prefixNode = $slots.prefix && (h("div", { class: `${mergedClsPrefix}-list-item__prefix` }, $slots.prefix()));
+        const suffixNode = $slots.suffix && (h("div", { class: `${mergedClsPrefix}-list-item__suffix` }, $slots.suffix()));
+        if ($slots.default) {
+            return h(mergedTag, Object.assign({ class: [...sharedCls] }, sharedAttrs), [
+                prefixNode,
+                h("div", { class: `${mergedClsPrefix}-list-item__main` }, $slots.default()),
+                suffixNode,
+                showDivider && h("hr", { class: `${mergedClsPrefix}-list-item__divider` })
+            ]);
+        }
+        else {
+            let avatarNode, headerNode, descriptionNode, headerSideNode, descriptionSideNode, iconNode;
+            const resolveAvatar = resolveFirst('avatar');
+            const resolveHeader = resolveFirst('header');
+            const resolveDescription = resolveFirst('description');
+            const resolveHeaderSide = resolveFirst('headerSide');
+            const resolveDescriptionSide = resolveFirst('descriptionSide');
+            const resolveIcon = resolveFirst('icon');
+            if (this.mergedLoading) {
+                iconNode = (h("div", { class: `${mergedClsPrefix}-list-item__icon` },
+                    h(UBaseLoading, { clsPrefix: mergedClsPrefix, key: "loading", strokeWidth: 20 })));
+            }
+            if (this.mergedLoadingSkeleton) {
+                avatarNode = resolveAvatar && (h(UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__avatar`, circle: true, height: "48px" }));
+                headerNode = resolveHeader && (h(UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__title`, text: true, sharp: false, style: "border-radius: 4px;" }));
+                descriptionNode = resolveDescription && (h(UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__subtitle`, text: true, sharp: false, width: "82%", style: "border-radius: 4px;" }));
+                headerSideNode = resolveHeaderSide && (h(UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__title`, text: true, sharp: false, width: "60%", style: "border-radius: 4px;" }));
+                descriptionSideNode = resolveDescriptionSide && (h(UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__subtitle`, text: true, sharp: false, style: "border-radius: 4px;" }));
+                iconNode = resolveIcon && (h(UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__icon`, circle: true, height: "24px" }));
+            }
+            else {
+                avatarNode = resolveAvatar && (h("div", { class: `${mergedClsPrefix}-list-item__avatar` }, resolveAvatar()));
+                headerNode = resolveHeader && (h("div", { class: `${mergedClsPrefix}-list-item__title` }, resolveHeader()));
+                descriptionNode = resolveDescription && (h("div", { class: `${mergedClsPrefix}-list-item__subtitle` }, resolveDescription()));
+                headerSideNode = resolveHeaderSide && (h("div", { class: `${mergedClsPrefix}-list-item__title` }, resolveHeaderSide()));
+                descriptionSideNode = resolveDescriptionSide && (h("div", { class: `${mergedClsPrefix}-list-item__subtitle` }, resolveDescriptionSide()));
+                iconNode = this.mergedShowIcon ? (h("div", { class: `${mergedClsPrefix}-list-item__icon` }, resolveIcon ? (h("div", { class: `${mergedClsPrefix}-list-item__subtitle` }, resolveIcon())) : (h(UBaseIcon, { clsPrefix: mergedClsPrefix }, () => h(ChevronRightIcon, null))))) : null;
+            }
+            const leftNode = headerNode || descriptionNode ? (h("div", { class: `${mergedClsPrefix}-list-item__content ${mergedClsPrefix}-list-item__content--left` },
+                headerNode,
+                descriptionNode)) : null;
+            const rightNode = headerSideNode || descriptionSideNode ? (h("div", { class: `${mergedClsPrefix}-list-item__content ${mergedClsPrefix}-list-item__content--right` },
+                headerSideNode,
+                descriptionSideNode)) : null;
+            return h(mergedTag, Object.assign({ class: [
+                    ...sharedCls,
+                    `${mergedClsPrefix}-list-item--default`,
+                    this.mergedDescriptionFirst &&
+                        `${mergedClsPrefix}-list-item--description-first`,
+                    this.mergedColumnsEven &&
+                        `${mergedClsPrefix}-list-item--columns-even`,
+                    this.mergedLoadingSkeleton &&
+                        `${mergedClsPrefix}-list-item--loading-skeleton`
+                ] }, sharedAttrs), [
+                prefixNode,
+                h("div", { class: `${mergedClsPrefix}-list-item__main` },
+                    avatarNode,
+                    h("div", { class: `${mergedClsPrefix}-list-item__text` },
+                        leftNode,
+                        rightNode),
+                    iconNode),
+                suffixNode,
+                showDivider && h("hr", { class: `${mergedClsPrefix}-list-item__divider` })
+            ]);
+        }
     }
 });

package/es/list/src/interface.d.ts

@@ -0,0 +1,35 @@
+import { ExtractPublicPropTypes } from '../../_utils';
+import type { PropType, Ref } from 'vue';
+import { VNodeChild } from 'vue';
+export interface BooleanProp {
+    type: BooleanConstructor;
+    default: undefined;
+}
+export type RenderableType = () => VNodeChild;
+export interface RenderableProp {
+    type: PropType<RenderableType>;
+    default: undefined;
+}
+export interface ListItemPropsBoolean {
+    showIcon: BooleanProp;
+    descriptionFirst: BooleanProp;
+    columnsEven: BooleanProp;
+    hoverable: BooleanProp;
+    rounded: BooleanProp;
+    disabled: BooleanProp;
+    loading: BooleanProp;
+    loadingSkeleton: BooleanProp;
+}
+export interface ListItemPropsRenderable {
+    header: RenderableProp;
+    description: RenderableProp;
+    headerSide: RenderableProp;
+    descriptionSide: RenderableProp;
+    icon: RenderableProp;
+    avatar: RenderableProp;
+}
+export type ExtractIntoInjection<T> = {
+    [P in keyof ExtractPublicPropTypes<T>]-?: Ref<ExtractPublicPropTypes<T>[P] | undefined>;
+};
+export type ListInjectionBoolean = Record<keyof ListItemPropsBoolean, Ref<boolean | undefined>>;
+export type ListInjectionRenderable = Record<keyof ListItemPropsRenderable, Ref<RenderableType | undefined>>;

package/es/list/src/interface.js

@@ -0,0 +1 @@
+export {};

package/es/list/src/props.d.ts

@@ -0,0 +1,228 @@
+import { ArrayMouseHandler, ArrayKeyboardHandler, ArrayEmptyHandler, ArrayFocusHandler, ExtractPublicPropTypes } from '../../_utils';
+import type { PropType, Ref } from 'vue';
+import { ListItemPropsBoolean, ListItemPropsRenderable, ExtractIntoInjection, ListInjectionBoolean, ListInjectionRenderable } from './interface';
+export declare const listItemPropsBoolean: Array<keyof ListItemPropsBoolean>;
+export declare const listItemPropsRenderable: Array<keyof ListItemPropsRenderable>;
+export declare const listItemBaseProps: {
+    onClick: {
+        type: PropType<ArrayMouseHandler | undefined>;
+        default: undefined;
+    };
+    onKeypress: {
+        type: PropType<ArrayKeyboardHandler | undefined>;
+        default: undefined;
+    };
+    onPress: {
+        type: PropType<ArrayEmptyHandler | undefined>;
+        default: undefined;
+    };
+    onBlur: {
+        type: PropType<ArrayFocusHandler | undefined>;
+        default: undefined;
+    };
+    onFocus: {
+        type: PropType<ArrayFocusHandler | undefined>;
+        default: undefined;
+    };
+    showIcon: import("./interface").BooleanProp;
+    descriptionFirst: import("./interface").BooleanProp;
+    columnsEven: import("./interface").BooleanProp;
+    hoverable: import("./interface").BooleanProp;
+    rounded: import("./interface").BooleanProp;
+    disabled: import("./interface").BooleanProp;
+    loading: import("./interface").BooleanProp;
+    loadingSkeleton: import("./interface").BooleanProp;
+    header: import("./interface").RenderableProp;
+    description: import("./interface").RenderableProp;
+    headerSide: import("./interface").RenderableProp;
+    descriptionSide: import("./interface").RenderableProp;
+    icon: import("./interface").RenderableProp;
+    avatar: import("./interface").RenderableProp;
+};
+export declare const listItemProps: {
+    tag: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onClick: {
+        type: PropType<ArrayMouseHandler | undefined>;
+        default: undefined;
+    };
+    onKeypress: {
+        type: PropType<ArrayKeyboardHandler | undefined>;
+        default: undefined;
+    };
+    onPress: {
+        type: PropType<ArrayEmptyHandler | undefined>;
+        default: undefined;
+    };
+    onBlur: {
+        type: PropType<ArrayFocusHandler | undefined>;
+        default: undefined;
+    };
+    onFocus: {
+        type: PropType<ArrayFocusHandler | undefined>;
+        default: undefined;
+    };
+    showIcon: import("./interface").BooleanProp;
+    descriptionFirst: import("./interface").BooleanProp;
+    columnsEven: import("./interface").BooleanProp;
+    hoverable: import("./interface").BooleanProp;
+    rounded: import("./interface").BooleanProp;
+    disabled: import("./interface").BooleanProp;
+    loading: import("./interface").BooleanProp;
+    loadingSkeleton: import("./interface").BooleanProp;
+    header: import("./interface").RenderableProp;
+    description: import("./interface").RenderableProp;
+    headerSide: import("./interface").RenderableProp;
+    descriptionSide: import("./interface").RenderableProp;
+    icon: import("./interface").RenderableProp;
+    avatar: import("./interface").RenderableProp;
+};
+export declare const listProps: {
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    itemTag: {
+        type: StringConstructor;
+        default: string;
+    };
+    bordered: BooleanConstructor;
+    clickable: BooleanConstructor;
+    showDivider: BooleanConstructor;
+    onClick: {
+        type: PropType<ArrayMouseHandler | undefined>;
+        default: undefined;
+    };
+    onKeypress: {
+        type: PropType<ArrayKeyboardHandler | undefined>;
+        default: undefined;
+    };
+    onPress: {
+        type: PropType<ArrayEmptyHandler | undefined>;
+        default: undefined;
+    };
+    onBlur: {
+        type: PropType<ArrayFocusHandler | undefined>;
+        default: undefined;
+    };
+    onFocus: {
+        type: PropType<ArrayFocusHandler | undefined>;
+        default: undefined;
+    };
+    descriptionFirst: import("./interface").BooleanProp;
+    columnsEven: import("./interface").BooleanProp;
+    hoverable: import("./interface").BooleanProp;
+    rounded: import("./interface").BooleanProp;
+    disabled: import("./interface").BooleanProp;
+    loading: import("./interface").BooleanProp;
+    loadingSkeleton: import("./interface").BooleanProp;
+    header: import("./interface").RenderableProp;
+    description: import("./interface").RenderableProp;
+    headerSide: import("./interface").RenderableProp;
+    descriptionSide: import("./interface").RenderableProp;
+    icon: import("./interface").RenderableProp;
+    avatar: import("./interface").RenderableProp;
+    theme: PropType<import("../../_mixins").Theme<"List", {
+        padding: string;
+        iconSize: string;
+        iconSpace: string;
+        suffixSpace: string;
+        prefixSpace: string;
+        titleSize: string;
+        titleLineHeight: string;
+        subtitleSize: string;
+        subtitleLineHeight: string;
+        subtitleColor: string;
+        avatarSpace: string;
+        minHeight: string;
+        colorFocus: string;
+        pressedScale: string;
+        textColorDisabled: string;
+        textColor: string;
+        color: string;
+        colorHover: string;
+        colorModal: string;
+        colorHoverModal: string;
+        colorPopover: string;
+        colorHoverPopover: string;
+        borderColor: string;
+        borderColorModal: string;
+        borderColorPopover: string;
+        borderRadius: string;
+        fontSize: string;
+    }, any>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"List", {
+        padding: string;
+        iconSize: string;
+        iconSpace: string;
+        suffixSpace: string;
+        prefixSpace: string;
+        titleSize: string;
+        titleLineHeight: string;
+        subtitleSize: string;
+        subtitleLineHeight: string;
+        subtitleColor: string;
+        avatarSpace: string;
+        minHeight: string;
+        colorFocus: string;
+        pressedScale: string;
+        textColorDisabled: string;
+        textColor: string;
+        color: string;
+        colorHover: string;
+        colorModal: string;
+        colorHoverModal: string;
+        colorPopover: string;
+        colorHoverPopover: string;
+        borderColor: string;
+        borderColorModal: string;
+        borderColorPopover: string;
+        borderRadius: string;
+        fontSize: string;
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"List", {
+        padding: string;
+        iconSize: string;
+        iconSpace: string;
+        suffixSpace: string;
+        prefixSpace: string;
+        titleSize: string;
+        titleLineHeight: string;
+        subtitleSize: string;
+        subtitleLineHeight: string;
+        subtitleColor: string;
+        avatarSpace: string;
+        minHeight: string;
+        colorFocus: string;
+        pressedScale: string;
+        textColorDisabled: string;
+        textColor: string;
+        color: string;
+        colorHover: string;
+        colorModal: string;
+        colorHoverModal: string;
+        colorPopover: string;
+        colorHoverPopover: string;
+        borderColor: string;
+        borderColorModal: string;
+        borderColorPopover: string;
+        borderRadius: string;
+        fontSize: string;
+    }, any>>>;
+};
+export type ListInjection = ExtractIntoInjection<typeof listItemBaseProps> & ListInjectionBoolean & ListInjectionRenderable & {
+    mergedClsPrefix: Ref<string>;
+    tag: Ref<string>;
+    bordered: Ref<boolean>;
+    clickable: Ref<boolean>;
+    showDivider: Ref<boolean>;
+};
+export declare const listInjectionKey: import("vue").InjectionKey<ListInjection>;
+export type ListItemProps = ExtractPublicPropTypes<typeof listItemProps>;
+export type ListProps = ExtractPublicPropTypes<typeof listProps>;

package/es/list/src/props.js

@@ -0,0 +1,59 @@
+import { createInjectionKey } from '../../_utils';
+import { useTheme } from '../../_mixins';
+export const listItemPropsBoolean = [
+    'showIcon',
+    'descriptionFirst',
+    'columnsEven',
+    'hoverable',
+    'rounded',
+    'disabled',
+    'loading',
+    'loadingSkeleton'
+];
+export const listItemPropsRenderable = [
+    'header',
+    'description',
+    'headerSide',
+    'descriptionSide',
+    'icon',
+    'avatar'
+];
+const booleanDefault = {};
+const renderableDefault = {};
+export const listItemBaseProps = Object.assign(Object.assign(Object.assign({}, listItemPropsRenderable.reduce((acc, renderable) => (Object.assign(Object.assign({}, acc), { [renderable]: {
+        type: Function,
+        default: undefined
+    } })), renderableDefault)), listItemPropsBoolean.reduce((acc, renderable) => (Object.assign(Object.assign({}, acc), { [renderable]: {
+        type: Boolean,
+        default: undefined
+    } })), booleanDefault)), { onClick: {
+        type: [Function, Array, undefined],
+        default: undefined
+    }, onKeypress: {
+        type: [Function, Array, undefined],
+        default: undefined
+    }, onPress: {
+        type: [Function, Array, undefined],
+        default: undefined
+    }, onBlur: {
+        type: [Function, Array, undefined],
+        default: undefined
+    }, onFocus: {
+        type: [Function, Array, undefined],
+        default: undefined
+    } });
+export const listItemProps = Object.assign(Object.assign({}, listItemBaseProps), { tag: {
+        type: String,
+        default: undefined
+    } });
+export const listProps = Object.assign(Object.assign(Object.assign({}, useTheme.props), listItemBaseProps), { showIcon: {
+        type: Boolean,
+        default: true
+    }, tag: {
+        type: String,
+        default: 'ul'
+    }, itemTag: {
+        type: String,
+        default: 'li'
+    }, bordered: Boolean, clickable: Boolean, showDivider: Boolean });
+export const listInjectionKey = createInjectionKey('u-list');