@uzum-tech/ui 0.1.2 → 1.0.1

package/lib/list/src/ListItem.js

@@ -2,25 +2,197 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
-const List_1 = require("./List");
+const props_1 = require("./props");
+const icons_1 = require("../../_internal/icons");
+const _internal_1 = require("../../_internal");
 exports.default = (0, vue_1.defineComponent)({
     name: 'ListItem',
-    setup() {
-        const listInjection = (0, vue_1.inject)(List_1.listInjectionKey, null);
+    props: props_1.listItemProps,
+    setup(props, { slots }) {
+        const listInjection = (0, vue_1.inject)(props_1.listInjectionKey, null);
         if (!listInjection) {
             (0, _utils_1.throwError)('list-item', '`u-list-item` must be placed in `u-list`.');
         }
+        function createRef(name) {
+            if (!listInjection) {
+                return (0, vue_1.computed)(() => props[name]);
+            }
+            return (0, _utils_1.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 = (0, vue_1.computed)(() => {
+            return !mergedDisabled.value && mergedHoverable.value;
+        });
+        const isPressed = (0, vue_1.ref)(false);
+        const handleClick = (e) => {
+            if (!mergedDisabled.value) {
+                if (mergedClickHandler.value)
+                    (0, _utils_1.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)
+                    (0, _utils_1.call)(mergedKeypressHandler.value, e);
+            }
+        };
+        const handleBlur = (e) => {
+            if (hasFocus.value) {
+                if (mergedBlurHandler.value)
+                    (0, _utils_1.call)(mergedBlurHandler.value, e);
+            }
+        };
+        const handleFocus = (e) => {
+            if (hasFocus.value) {
+                if (mergedFocusHandler.value)
+                    (0, _utils_1.call)(mergedFocusHandler.value, e);
+            }
+        };
+        const handlePress = (eventName) => {
+            if (mergedDisabled.value ||
+                mergedLoading.value ||
+                mergedLoadingSkeleton.value) {
+                return;
+            }
+            if (mergedPressHandler.value)
+                (0, _utils_1.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 ((0, vue_1.h)("li", { class: `${mergedClsPrefix}-list-item` },
-            $slots.prefix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__prefix` }, $slots.prefix())) : null,
-            $slots.default ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__main` }, $slots)) : null,
-            $slots.suffix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__suffix` }, $slots.suffix())) : null,
-            this.showDivider && ((0, vue_1.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 && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__prefix` }, $slots.prefix()));
+        const suffixNode = $slots.suffix && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__suffix` }, $slots.suffix()));
+        if ($slots.default) {
+            return (0, vue_1.h)(mergedTag, Object.assign({ class: [...sharedCls] }, sharedAttrs), [
+                prefixNode,
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__main` }, $slots.default()),
+                suffixNode,
+                showDivider && (0, vue_1.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 = ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__icon` },
+                    (0, vue_1.h)(_internal_1.UBaseLoading, { clsPrefix: mergedClsPrefix, key: "loading", strokeWidth: 20 })));
+            }
+            if (this.mergedLoadingSkeleton) {
+                avatarNode = resolveAvatar && ((0, vue_1.h)(_internal_1.UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__avatar`, circle: true, height: "48px" }));
+                headerNode = resolveHeader && ((0, vue_1.h)(_internal_1.UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__title`, text: true, sharp: false, style: "border-radius: 4px;" }));
+                descriptionNode = resolveDescription && ((0, vue_1.h)(_internal_1.UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__subtitle`, text: true, sharp: false, width: "82%", style: "border-radius: 4px;" }));
+                headerSideNode = resolveHeaderSide && ((0, vue_1.h)(_internal_1.UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__title`, text: true, sharp: false, width: "60%", style: "border-radius: 4px;" }));
+                descriptionSideNode = resolveDescriptionSide && ((0, vue_1.h)(_internal_1.UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__subtitle`, text: true, sharp: false, style: "border-radius: 4px;" }));
+                iconNode = resolveIcon && ((0, vue_1.h)(_internal_1.UBaseSkeleton, { class: `${mergedClsPrefix}-list-item__icon`, circle: true, height: "24px" }));
+            }
+            else {
+                avatarNode = resolveAvatar && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__avatar` }, resolveAvatar()));
+                headerNode = resolveHeader && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__title` }, resolveHeader()));
+                descriptionNode = resolveDescription && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__subtitle` }, resolveDescription()));
+                headerSideNode = resolveHeaderSide && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__title` }, resolveHeaderSide()));
+                descriptionSideNode = resolveDescriptionSide && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__subtitle` }, resolveDescriptionSide()));
+                iconNode = this.mergedShowIcon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__icon` }, resolveIcon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__subtitle` }, resolveIcon())) : ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, () => (0, vue_1.h)(icons_1.ChevronRightIcon, null))))) : null;
+            }
+            const leftNode = headerNode || descriptionNode ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__content ${mergedClsPrefix}-list-item__content--left` },
+                headerNode,
+                descriptionNode)) : null;
+            const rightNode = headerSideNode || descriptionSideNode ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__content ${mergedClsPrefix}-list-item__content--right` },
+                headerSideNode,
+                descriptionSideNode)) : null;
+            return (0, vue_1.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,
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__main` },
+                    avatarNode,
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-list-item__text` },
+                        leftNode,
+                        rightNode),
+                    iconNode),
+                suffixNode,
+                showDivider && (0, vue_1.h)("hr", { class: `${mergedClsPrefix}-list-item__divider` })
+            ]);
+        }
     }
 });

package/lib/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/lib/list/src/interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/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/lib/list/src/props.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listInjectionKey = exports.listProps = exports.listItemProps = exports.listItemBaseProps = exports.listItemPropsRenderable = exports.listItemPropsBoolean = void 0;
+const _utils_1 = require("../../_utils");
+const _mixins_1 = require("../../_mixins");
+exports.listItemPropsBoolean = [
+    'showIcon',
+    'descriptionFirst',
+    'columnsEven',
+    'hoverable',
+    'rounded',
+    'disabled',
+    'loading',
+    'loadingSkeleton'
+];
+exports.listItemPropsRenderable = [
+    'header',
+    'description',
+    'headerSide',
+    'descriptionSide',
+    'icon',
+    'avatar'
+];
+const booleanDefault = {};
+const renderableDefault = {};
+exports.listItemBaseProps = Object.assign(Object.assign(Object.assign({}, exports.listItemPropsRenderable.reduce((acc, renderable) => (Object.assign(Object.assign({}, acc), { [renderable]: {
+        type: Function,
+        default: undefined
+    } })), renderableDefault)), exports.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
+    } });
+exports.listItemProps = Object.assign(Object.assign({}, exports.listItemBaseProps), { tag: {
+        type: String,
+        default: undefined
+    } });
+exports.listProps = Object.assign(Object.assign(Object.assign({}, _mixins_1.useTheme.props), exports.listItemBaseProps), { showIcon: {
+        type: Boolean,
+        default: true
+    }, tag: {
+        type: String,
+        default: 'ul'
+    }, itemTag: {
+        type: String,
+        default: 'li'
+    }, bordered: Boolean, clickable: Boolean, showDivider: Boolean });
+exports.listInjectionKey = (0, _utils_1.createInjectionKey)('u-list');