@uzum-tech/ui 1.9.0 → 1.10.0

package/es/modal-fullscreen/src/ModalFull.js

@@ -0,0 +1,250 @@
+import { zindexable } from 'vdirs';
+import { h, ref, vShow, toRef, watch, computed, nextTick, Transition, withDirectives, defineComponent } from 'vue';
+import { VFocusTrap, VLazyTeleport } from 'vueuc';
+import { useClicked, useClickPosition, useIsMounted } from 'vooks';
+import { call, eventEffectNotPerformed, resolveWrappedSlot, useIsComposing } from '../../_utils';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { modalFullscreenLight } from '../styles';
+import style from './styles/index.cssr';
+import { UBaseClose, UScrollbar } from '../../_internal';
+import { UFlex } from '../../flex';
+import { UText } from '../../typography';
+export const modalFullscreenProps = Object.assign(Object.assign({}, useTheme.props), { to: [String, Object], show: Boolean, zIndex: Number, title: String, subtitle: String, backgroundImage: String, fixed: {
+        type: Boolean,
+        default: false
+    }, displayDirective: {
+        type: String,
+        default: 'if'
+    }, transformOrigin: {
+        type: String,
+        default: 'mouse'
+    }, autoFocus: {
+        type: Boolean,
+        default: true
+    }, trapFocus: {
+        type: Boolean,
+        default: true
+    }, closeOnEsc: {
+        type: Boolean,
+        default: true
+    }, blockScroll: {
+        type: Boolean,
+        default: true
+    }, 
+    // events
+    onEsc: Function, onClose: Function, onAfterEnter: Function, onBeforeLeave: Function, onAfterLeave: Function, onUpdateShow: [Function, Array], 'onUpdate:show': [Function, Array] });
+export default defineComponent({
+    name: 'ModalFullscreen',
+    inheritAttrs: false,
+    props: modalFullscreenProps,
+    setup(props) {
+        const isDisplayed = ref(props.show);
+        const containerRef = ref(null);
+        const scrollbarRef = ref(null);
+        const isClicked = useClicked(64);
+        const clickPosition = useClickPosition();
+        const isComposing = useIsComposing();
+        const isMounted = useIsMounted();
+        const transformOriginXRef = ref(null);
+        const transformOriginYRef = ref(null);
+        const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = useConfig(props);
+        const themeRef = useTheme('ModalFullscreen', '-modal-fullscreen', style, modalFullscreenLight, props, mergedClsPrefixRef);
+        const updateShow = (show) => {
+            const { onUpdateShow, 'onUpdate:show': _onUpdateShow } = props;
+            if (onUpdateShow)
+                call(onUpdateShow, show);
+            if (_onUpdateShow)
+                call(_onUpdateShow, show);
+        };
+        const handleCloseClick = () => {
+            const { onClose } = props;
+            if (onClose) {
+                void Promise.resolve(onClose()).then((value) => {
+                    if (value === false)
+                        return;
+                    updateShow(false);
+                });
+            }
+            else {
+                updateShow(false);
+            }
+        };
+        const handleBeforeLeave = (element) => {
+            element.style.transformOrigin = styleTransformOrigin();
+            const { onBeforeLeave } = props;
+            if (onBeforeLeave)
+                call(onBeforeLeave);
+        };
+        const handleAfterLeave = () => {
+            isDisplayed.value = false;
+            transformOriginXRef.value = null;
+            transformOriginYRef.value = null;
+            const { onAfterLeave } = props;
+            if (onAfterLeave)
+                call(onAfterLeave);
+        };
+        const handleEsc = (event) => {
+            var _a;
+            (_a = props.onEsc) === null || _a === void 0 ? void 0 : _a.call(props);
+            if (props.show && props.closeOnEsc && eventEffectNotPerformed(event)) {
+                !isComposing.value && updateShow(false);
+            }
+        };
+        const getMousePosition = () => {
+            if (isClicked.value) {
+                return clickPosition.value;
+            }
+            return null;
+        };
+        const styleTransformOrigin = () => {
+            if (props.transformOrigin === 'center') {
+                return '';
+            }
+            const { value: transformOriginX } = transformOriginXRef;
+            const { value: transformOriginY } = transformOriginYRef;
+            if (transformOriginX === null || transformOriginY === null) {
+                return '';
+            }
+            else if (scrollbarRef.value) {
+                const scrollTop = scrollbarRef.value.containerScrollTop;
+                return `${transformOriginX}px ${transformOriginY + scrollTop}px`;
+            }
+            return '';
+        };
+        const syncTransformOrigin = (element) => {
+            if (props.transformOrigin === 'center') {
+                return;
+            }
+            const mousePosition = getMousePosition();
+            if (!mousePosition) {
+                return;
+            }
+            if (!scrollbarRef.value)
+                return;
+            const scrollTop = scrollbarRef.value.containerScrollTop;
+            const { offsetLeft, offsetTop } = element;
+            if (mousePosition) {
+                const top = mousePosition.y;
+                const left = mousePosition.x;
+                transformOriginXRef.value = -(offsetLeft - left);
+                transformOriginYRef.value = -(offsetTop - top - scrollTop);
+            }
+            element.style.transformOrigin = styleTransformOrigin();
+        };
+        const handleEnter = (element) => {
+            void nextTick(() => {
+                syncTransformOrigin(element);
+            });
+        };
+        const cssVarsRef = computed(() => {
+            const { common: { cubicBezierEaseOut }, self: { modalBg, headerBg, bodyBg, footerBg, textColor, closeMargin, closeSize, closeIconSize, closeBorderRadius, closeColorHover, closeColorPressed, closeIconColor, closeIconColorHover, closeIconColorPressed, subtitleColor, headerPadding, bodyPadding, footerPadding } } = themeRef.value;
+            return {
+                '--u-bezier-ease-out': cubicBezierEaseOut,
+                '--u-text-color': textColor,
+                '--u-close-margin': closeMargin,
+                '--u-close-size': closeSize,
+                '--u-close-icon-size': closeIconSize,
+                '--u-close-border-radius': closeBorderRadius,
+                '--u-close-color-hover': closeColorHover,
+                '--u-close-color-pressed': closeColorPressed,
+                '--u-close-icon-color': closeIconColor,
+                '--u-close-icon-color-hover': closeIconColorHover,
+                '--u-close-icon-color-pressed': closeIconColorPressed,
+                '--u-header-padding': headerPadding,
+                '--u-subtitle-color': subtitleColor,
+                '--u-body-padding': bodyPadding,
+                '--u-footer-padding': footerPadding,
+                '--u-modal-bg': props.backgroundImage
+                    ? `url(${props.backgroundImage})`
+                    : modalBg,
+                '--u-header-bg': headerBg,
+                '--u-body-bg': bodyBg,
+                '--u-footer-bg': footerBg
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('theme-class', undefined, cssVarsRef, props)
+            : undefined;
+        watch(toRef(props, 'show'), (value) => {
+            if (value)
+                isDisplayed.value = true;
+        });
+        return {
+            containerRef,
+            scrollbarRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            namespace: namespaceRef,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            themeRef,
+            isMounted,
+            isDisplayed,
+            handleEnter,
+            handleBeforeLeave,
+            handleAfterLeave,
+            handleEsc,
+            handleCloseClick,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        const { mergedClsPrefix, isDisplayed, handleEnter, handleBeforeLeave, handleAfterLeave, handleEsc, handleCloseClick } = this;
+        const headerLeftSlot = resolveWrappedSlot(this.$slots.headerLeft, (children) => children);
+        const bodySlot = resolveWrappedSlot(this.$slots.body || this.$slots.default, (children) => children);
+        const footerSlot = resolveWrappedSlot(this.$slots.footer, (children) => children);
+        return (h(VLazyTeleport, { to: this.to, show: this.show }, {
+            default: () => {
+                var _a;
+                (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                return withDirectives(h("div", { role: "none", ref: "containerRef", class: [
+                        `${mergedClsPrefix}-modal-container`,
+                        this.themeClass,
+                        this.namespace
+                    ], style: this.cssVars }, this.displayDirective === 'show' || isDisplayed || this.show
+                    ? withDirectives(h("div", { role: "none", class: `${mergedClsPrefix}-modal-body-wrapper` },
+                        h(UScrollbar, { ref: "scrollbarRef", theme: this.themeRef.peers.Scrollbar, themeOverrides: this.themeRef.peerOverrides.Scrollbar, contentClass: `${mergedClsPrefix}-modal-scroll-content` }, {
+                            default: () => (h(VFocusTrap, { disabled: !this.trapFocus, active: this.show, onEsc: handleEsc, autoFocus: this.autoFocus }, {
+                                default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onEnter: handleEnter, onAfterEnter: this.onAfterEnter, onAfterLeave: handleAfterLeave, onBeforeLeave: handleBeforeLeave }, {
+                                    default: () => {
+                                        const dirs = [
+                                            [vShow, this.show]
+                                        ];
+                                        return withDirectives(h("div", { class: `${mergedClsPrefix}-modal` },
+                                            h(UFlex, { vertical: true, size: [0, 0], class: [
+                                                    `${mergedClsPrefix}-modal-content`,
+                                                    this.fixed &&
+                                                        `${mergedClsPrefix}-modal-content--fixed`
+                                                ] },
+                                                h(UFlex, { align: "center", size: [0, 0], wrap: false, class: `${mergedClsPrefix}-modal-header` },
+                                                    h("div", { class: `${mergedClsPrefix}-modal-header__left` }, headerLeftSlot),
+                                                    h("div", { class: `${mergedClsPrefix}-modal-header__center` },
+                                                        this.title ? (h(UText, { variant: "body-l-semi-bold", class: `${mergedClsPrefix}-modal-header__title` }, this.title)) : null,
+                                                        this.subtitle ? (h(UText, { variant: "body-m-medium", class: `${mergedClsPrefix}-modal-header__subtitle` }, this.subtitle)) : null),
+                                                    h("div", { class: `${mergedClsPrefix}-modal-header__right` },
+                                                        h(UBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-modal__close`, onClick: handleCloseClick }))),
+                                                h("div", { class: `${mergedClsPrefix}-modal-body` }, bodySlot),
+                                                h("div", { class: `${mergedClsPrefix}-modal-footer` }, footerSlot))), dirs);
+                                    }
+                                }))
+                            }))
+                        })), [
+                        [
+                            vShow,
+                            this.displayDirective === 'if' ||
+                                isDisplayed ||
+                                this.show
+                        ]
+                    ])
+                    : null), [
+                    [
+                        zindexable,
+                        {
+                            zIndex: this.zIndex,
+                            enabled: this.show
+                        }
+                    ]
+                ]);
+            }
+        }));
+    }
+});

package/es/modal-fullscreen/src/interface.js

@@ -0,0 +1 @@
+"use strict";

package/es/modal-fullscreen/src/styles/index.cssr.d.ts

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

package/es/modal-fullscreen/src/styles/index.cssr.js

@@ -0,0 +1,85 @@
+import { cB, c, cE, cM } from '../../../_utils/cssr';
+import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr';
+// vars:
+// --u-bezier-ease-out
+// --u-text-color
+// --u-close-border-radius
+// --u-close-margin
+// --u-close-size
+// --u-close-color-hover
+// --u-close-color-pressed
+// --u-close-icon-color
+// --u-close-icon-color-hover
+// --u-close-icon-color-pressed
+// --u-header-padding
+// --u-subtitle-color
+// --u-body-padding
+// --u-footer-padding
+// --u-modal-bg
+// --u-header-bg
+// --u-body-bg
+// --u-footer-bg
+export default c([cB('modal-container', `
+ position: fixed;
+ left: 0;
+ top: 0;
+ height: 0;
+ width: 0;
+ display: flex;
+ `), cB('modal-body-wrapper', `
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ overflow: visible;
+ `, [cB('modal-scroll-content', `
+ min-height: 100%;
+ position: relative;
+ `)]), cB('modal', `
+ position: relative;
+ color: var(--u-text-color);
+ margin: auto;
+ width: 100vw;
+ height: 100vh;
+ background: var(--u-modal-bg);
+ background-repeat: no-repeat;
+ background-size: cover;
+ `, [fadeInScaleUpTransition({
+  duration: '.25s',
+  enterScale: '.5'
+}), cE('close', `
+ margin: var(--u-close-margin);
+ transition:
+ background-color .3s var(--u-bezier),
+ color .3s var(--u-bezier);
+ z-index: 1;
+ `)]), cB('modal-content', `
+ height: 100%;
+ `, [cM('fixed', '', [cB('modal-header', `
+ flex: 0 0 auto;
+ `), cB('modal-body', `
+ flex: 1 1 100%;
+ `), cB('modal-footer', `
+ flex: 0 0 auto;
+ `)])]), cB('modal-body', `
+ padding: var(--u-body-padding);
+ background: var(--u-body-bg);
+ overflow-y: auto;
+ `), cB('modal-footer', `
+ padding: var(--u-footer-padding);
+ background: var(--u-footer-bg);
+ `), cB('modal-header', `
+ padding: var(--u-header-padding);
+ background: var(--u-header-bg);
+ `, [cE('left', `
+ flex: 0 1 50%;
+ `), cE('center', `
+ flex: 0 0 auto;
+ text-align: center;
+ `), cE('right', `
+ flex: 0 1 50%;
+ `), cE('title', `
+ `), cE('subtitle', `
+ color: var(--u-subtitle-color)
+ `)])]);

package/es/modal-fullscreen/styles/_common.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    headerPadding: string;
+    bodyPadding: string;
+    footerPadding: string;
+    headerBg: string;
+    bodyBg: string;
+    footerBg: string;
+    closeMargin: string;
+    closeMarginIconTop: string;
+    closeBorderRadius: string;
+};
+export default _default;

package/es/modal-fullscreen/styles/_common.js

@@ -0,0 +1,11 @@
+export default {
+    headerPadding: '12px 32px',
+    bodyPadding: '24px 40px',
+    footerPadding: '12px 40px',
+    headerBg: 'transparent',
+    bodyBg: 'transparent',
+    footerBg: 'transparent',
+    closeMargin: '0 0 0 auto',
+    closeMarginIconTop: '16px 16px 0',
+    closeBorderRadius: '100px'
+};

package/es/modal-fullscreen/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import type { ModalFullscreenTheme } from './light';
+declare const modalFullscreenDark: ModalFullscreenTheme;
+export default modalFullscreenDark;

package/es/modal-fullscreen/styles/dark.js

@@ -0,0 +1,14 @@
+import { scrollbarDark } from '../../_internal/scrollbar/styles';
+import { cardDark } from '../../card/styles';
+import { commonDark } from '../../_styles/common';
+import { self } from './light';
+const modalFullscreenDark = {
+    name: 'ModalFullscreen',
+    common: commonDark,
+    peers: {
+        Scrollbar: scrollbarDark,
+        Card: cardDark
+    },
+    self
+};
+export default modalFullscreenDark;

package/es/modal-fullscreen/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as modalFullscreenDark } from './dark';
+export { default as modalFullscreenLight } from './light';
+export type { ModalFullscreenTheme, ModalFullscreenThemeVars } from './light';

package/es/modal-fullscreen/styles/index.js

@@ -0,0 +1,2 @@
+export { default as modalFullscreenDark } from './dark';
+export { default as modalFullscreenLight } from './light';

package/es/modal-fullscreen/styles/light.d.ts

@@ -0,0 +1,100 @@
+import type { ThemeCommonVars } from '../../_styles/common';
+export declare const self: (vars: ThemeCommonVars) => {
+    modalBg: string;
+    textColor: string;
+    closeColorHover: string;
+    closeColorPressed: string;
+    closeIconColor: string;
+    closeIconColorHover: string;
+    closeIconColorPressed: string;
+    closeIconSize: string;
+    closeSize: string;
+    subtitleColor: string;
+    headerPadding: string;
+    bodyPadding: string;
+    footerPadding: string;
+    headerBg: string;
+    bodyBg: string;
+    footerBg: string;
+    closeMargin: string;
+    closeMarginIconTop: string;
+    closeBorderRadius: string;
+};
+export type ModalFullscreenThemeVars = ReturnType<typeof self>;
+declare const modalFullscreenLight: import("../../_mixins").Theme<"ModalFullscreen", {
+    modalBg: string;
+    textColor: string;
+    closeColorHover: string;
+    closeColorPressed: string;
+    closeIconColor: string;
+    closeIconColorHover: string;
+    closeIconColorPressed: string;
+    closeIconSize: string;
+    closeSize: string;
+    subtitleColor: string;
+    headerPadding: string;
+    bodyPadding: string;
+    footerPadding: string;
+    headerBg: string;
+    bodyBg: string;
+    footerBg: string;
+    closeMargin: string;
+    closeMarginIconTop: string;
+    closeBorderRadius: string;
+}, {
+    Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
+        color: string;
+        colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
+    }, any>;
+    Card: import("../../_mixins").Theme<"Card", {
+        titleFontSizeSmall: string;
+        titleFontSizeMedium: string;
+        titleFontSizeLarge: string;
+        titleFontSizeHuge: string;
+        titleLineHeightSmall: string;
+        titleLineHeightMedium: string;
+        titleLineHeightLarge: string;
+        titleLineHeightHuge: string;
+        titleFontWeight: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        fontSizeHuge: string;
+        lineHeightSmall: string;
+        lineHeightMedium: string;
+        lineHeightLarge: string;
+        lineHeightHuge: string;
+        fontWeight: string;
+        closeIconSize: string;
+        closeSize: string;
+        color: string;
+        colorTarget: string;
+        colorEmbedded: string;
+        textColor: string;
+        titleTextColor: string;
+        borderColor: string;
+        actionColor: string;
+        closeColorHover: string;
+        closeColorPressed: string;
+        closeIconColor: string;
+        closeIconColorHover: string;
+        closeIconColorPressed: string;
+        closeBorderRadius: string;
+        boxShadow: string;
+        borderRadius: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+    }, any>;
+}>;
+export default modalFullscreenLight;
+export type ModalFullscreenTheme = typeof modalFullscreenLight;

package/es/modal-fullscreen/styles/light.js

@@ -0,0 +1,19 @@
+import { scrollbarLight } from '../../_internal/scrollbar/styles';
+import { cardLight } from '../../card/styles';
+import { commonLight } from '../../_styles/common';
+import { createTheme } from '../../_mixins';
+import commonVars from './_common';
+export const self = (vars) => {
+    const { containerPrimary, textPrimary, transparencySecondary, elementsQuinary, elementsDarkQuinary, elementsSenary, iconMedium, closeMedium, textSecondary } = vars;
+    return Object.assign(Object.assign({}, commonVars), { modalBg: containerPrimary, textColor: textPrimary, closeColorHover: transparencySecondary, closeColorPressed: transparencySecondary, closeIconColor: elementsQuinary, closeIconColorHover: elementsDarkQuinary, closeIconColorPressed: elementsSenary, closeIconSize: iconMedium, closeSize: closeMedium, subtitleColor: textSecondary });
+};
+const modalFullscreenLight = createTheme({
+    name: 'ModalFullscreen',
+    common: commonLight,
+    peers: {
+        Scrollbar: scrollbarLight,
+        Card: cardLight
+    },
+    self
+});
+export default modalFullscreenLight;

package/es/rate/src/Rate.d.ts

@@ -147,8 +147,8 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }>>, {
     readonly size: number | "small" | "medium" | "large";
-    readonly clearable: boolean;
     readonly defaultValue: number | null;
+    readonly clearable: boolean;
     readonly readonly: boolean;
     readonly count: number;
     readonly allowHalf: boolean;

package/es/select/src/Select.d.ts

@@ -2448,6 +2448,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly showArrow: boolean;
     readonly displayDirective: "show" | "if";
     readonly placement: FollowerPlacement;
+    readonly defaultValue: Value | null;
     readonly secondary: boolean;
     readonly filterable: boolean;
     readonly clearable: boolean;
@@ -2455,7 +2456,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly ignoreComposition: boolean;
     readonly counter: boolean;
     readonly keyboard: boolean;
-    readonly defaultValue: Value | null;
     readonly options: SelectMixedOption[];
     readonly clearFilterAfterSelect: boolean;
     readonly remote: boolean;

package/es/slider/src/Slider.d.ts

@@ -501,9 +501,9 @@ declare const _default: import("vue").DefineComponent<{
     readonly to: string | boolean | HTMLElement;
     readonly range: boolean;
     readonly tooltip: boolean;
+    readonly defaultValue: number | number[];
     readonly max: number;
     readonly keyboard: boolean;
-    readonly defaultValue: number | number[];
     readonly min: number;
     readonly showTooltip: boolean | undefined;
 }, {}>;

package/es/switch/src/Switch.d.ts

@@ -519,9 +519,9 @@ declare const _default: import("vue").DefineComponent<{
     readonly loading: boolean;
     readonly size: "small" | "medium" | "large";
     readonly round: boolean;
+    readonly defaultValue: string | number | boolean;
     readonly checkedValue: string | number | boolean;
     readonly uncheckedValue: string | number | boolean;
-    readonly defaultValue: string | number | boolean;
     readonly rubberBand: boolean;
 }, {}>;
 export default _default;

package/es/tag/index.d.ts

@@ -1,2 +1,4 @@
 export { default as UTag, tagProps } from './src/Tag';
 export type { TagProps } from './src/Tag';
+export { default as UTagGroup } from './src/TagGroup';
+export type { TagGroupProps } from './src/TagGroup';

package/es/tag/index.js

@@ -1 +1,2 @@
 export { default as UTag, tagProps } from './src/Tag';
+export { default as UTagGroup } from './src/TagGroup';