@uzum-tech/ui 0.1.1 → 1.0.0

package/lib/modal/src/BodyWrapper.d.ts

@@ -24,6 +24,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     onAfterEnter: PropType<() => void>;
     onEsc: PropType<(e: KeyboardEvent) => void>;
+    presetDisabled: BooleanConstructor;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
     icon: PropType<() => VNodeChild>;
     type: {
         readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
@@ -40,37 +45,18 @@ declare const _default: import("vue").DefineComponent<{
     negativeButtonProps: PropType<import("../..").ButtonProps>;
     content: PropType<string | (() => VNodeChild)>;
     action: PropType<() => VNodeChild>;
+    body: PropType<() => VNodeChild>;
     showIcon: {
         readonly type: BooleanConstructor;
-        readonly default: true;
+        readonly default: false;
     };
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
-    contentStyle: PropType<string | import("vue").CSSProperties>;
-    headerStyle: PropType<string | import("vue").CSSProperties>;
-    headerExtraStyle: PropType<string | import("vue").CSSProperties>;
-    footerStyle: PropType<string | import("vue").CSSProperties>;
-    embedded: BooleanConstructor;
-    segmented: {
-        readonly type: PropType<boolean | import("../../card").CardSegmented>;
-        readonly default: false;
-    };
-    size: {
-        readonly type: PropType<"small" | "medium" | "large" | "huge">;
-        readonly default: "medium";
-    };
-    hoverable: BooleanConstructor;
-    role: StringConstructor;
-    tag: {
-        readonly type: PropType<keyof HTMLElementTagNameMap>;
-        readonly default: "div";
-    };
     show: {
         type: BooleanConstructor;
         required: true;
     };
-    preset: PropType<"dialog" | "confirm" | "card">;
     displayDirective: {
         type: PropType<"show" | "if">;
         required: true;
@@ -87,130 +73,122 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedTheme: import("vue").Ref<{
         common: {
-            baseColor: string;
-            primaryColor: string;
-            primaryColorHover: string;
-            primaryColorPressed: string;
-            primaryColorSuppl: string;
-            infoColor: string;
-            infoColorHover: string;
-            infoColorPressed: string;
-            infoColorSuppl: string;
-            successColor: string;
-            successColorHover: string;
-            successColorPressed: string;
-            successColorSuppl: string;
-            warningColor: string;
-            warningColorHover: string;
-            warningColorPressed: string;
-            warningColorSuppl: string;
-            errorColor: string;
-            errorColorHover: string;
-            errorColorPressed: string;
-            errorColorSuppl: string;
-            tertiaryColor: string;
-            tertiaryColorHover: string;
-            tertiaryColorActive: string;
-            tertiaryColorSuppl: string;
-            tertiaryElements: string;
-            textColorBase: string;
-            textColor1: string;
-            textColor2: string;
-            textColor3: string;
-            textTertiary: string;
-            boxShadowHover: string;
-            boxShadowFocus: string;
-            boxShadowHoverChecked: string;
-            boxShadowFocusChecked: string;
-            textColorDisabled: string;
-            placeholderColor: string;
-            placeholderColorDisabled: string;
-            iconColor: string;
-            iconColorHover: string;
-            iconColorPressed: string;
-            iconColorDisabled: string;
-            opacity1: string;
-            opacity2: string;
-            opacity3: string;
-            opacity4: string;
-            opacity5: string;
-            dividerColor: string;
-            borderColor: string;
-            borderTagColor: string;
-            closeIconColor: string;
-            closeIconColorHover: string;
-            closeIconColorPressed: string;
-            closeColorHover: string;
-            closeColorPressed: string;
-            clearColor: string;
-            clearColorHover: string;
-            clearColorPressed: string;
             scrollbarColor: string;
             scrollbarColorHover: string;
             scrollbarWidth: string;
             scrollbarHeight: string;
             scrollbarBorderRadius: string;
-            progressRailColor: string;
-            railColor: string;
-            popoverColor: string;
-            tableColor: string;
-            cardColor: string;
-            modalColor: string;
-            bodyColor: string;
-            tagColor: string;
-            avatarColor: string;
-            avatarTextColor: string;
-            avatarIconColor: string;
-            invertedColor: string;
-            tooltipColor: string;
-            inputColor: string;
-            codeColor: string;
-            tabColor: string;
-            actionColor: string;
-            tableHeaderColor: string;
-            hoverColor: string;
-            tableColorHover: string;
-            tableColorStriped: string;
-            pressedColor: string;
             opacityDisabled: string;
-            inputColorDisabled: string;
-            buttonColor2: string;
-            buttonColor2Hover: string;
-            buttonColor2Pressed: string;
-            boxShadow1: string;
-            boxShadow2: string;
-            boxShadow3: string;
+            brandPrimary50: string;
+            brandPrimary100: string;
+            brandPrimary200: string;
+            brandPrimary300: string;
+            brandPrimary400: string;
+            brandPrimary500: string;
+            brandPrimary550: string;
+            brandPrimary600: string;
+            brandSecondary500: string;
+            brandSecondary300: string;
+            brandSecondary600: string;
+            brandTertiary500: string;
+            brandTertiary300: string;
+            brandTertiary600: string;
+            brandQuaternary500: string;
+            brandQuaternary300: string;
+            brandQuaternary600: string;
+            brandQuinary500: string;
+            brandQuinary300: string;
+            brandQuinary600: string;
+            brandQuinary100: string;
+            surfacePrimary: string;
+            surfaceSecondary: string;
+            containerPrimary: string;
+            containerSecondary: string;
+            textPrimary: string;
+            textSecondary: string;
+            textTertiary: string;
+            textQuaternary: string;
+            textBrand: string;
+            elementsPrimary: string;
+            elementsSecondary: string;
+            elementsTertiary: string;
+            elementsQuaternary: string;
+            elementsQuinary: string;
+            elementsDarkQuinary: string;
+            elementsSenary: string;
+            elementsOnContainer: string;
+            transparencyPrimary: string;
+            transparencySecondary: string;
+            transparencyTertiary: string;
+            transparencyQuinary: string;
+            transparencyModal: string;
+            staticBlack: string;
+            staticDarkGrey: string;
+            staticWhite: string;
+            staticRed: string;
+            staticOrange: string;
+            staticGreen: string;
+            staticErrorAccent: string;
+            shadowDepth2: string;
             fontFamily: string;
             fontFamilyMono: string;
-            fontWeight: string;
-            fontWeightStrong: string;
             cubicBezierEaseInOut: string;
             cubicBezierEaseOut: string;
             cubicBezierEaseIn: string;
-            borderWidth: number;
-            borderTagWidth: number;
+            borderRadiusLarge: string;
             borderRadius: string;
+            borderRadiusMedium: string;
             borderRadiusSmall: string;
-            fontSize: string;
-            fontSizeMini: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
-            fontSizeHuge: string;
-            lineHeight: string;
+            borderRadiusTiny: string;
             heightMini: string;
             heightTiny: string;
             heightSmall: string;
             heightMedium: string;
             heightLarge: string;
             heightHuge: string;
+            fontDisplayLarge: string;
+            fontDisplaySmall: string;
+            fontHeadingLarge: string;
+            fontHeadingMedium: string;
+            fontHeadingSmall: string;
+            fontTitleLarge: string;
+            fontTitleMedium: string;
+            fontTitleSmall: string;
+            fontBodyLarge: string;
+            fontBodyMedium: string;
+            fontBodySmall: string;
+            lineHeightDisplayLarge: string;
+            lineHeightDisplaySmall: string;
+            lineHeightHeadingLarge: string;
+            lineHeightHeadingMedium: string;
+            lineHeightHeadingSmall: string;
+            lineHeightTitleLarge: string;
+            lineHeightTitleMedium: string;
+            lineHeightTitleSmall: string;
+            lineHeightBodyLarge: string;
+            lineHeightBodyMedium: string;
+            lineHeightBodySmall: string;
+            fontWeight: string;
+            fontWeightStrong: string;
+            fontWeightBold: string;
+            iconSmall: string;
+            iconMedium: string;
+            iconLarge: string;
+            iconHuge: string;
+            closeSmall: string;
+            closeMedium: string;
+            closeLarge: string;
+            closeHuge: string;
+            closeBorderRadius: string;
             name: "common";
         };
         self: {
+            modalMask: string;
             color: string;
             textColor: string;
-            boxShadow: string;
+            sizeSmall: string;
+            sizeMedium: string;
+            sizeLarge: string;
         };
         peers: {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
@@ -218,8 +196,6 @@ declare const _default: import("vue").DefineComponent<{
                 colorHover: string;
             }, any>;
             Dialog: import("../../_mixins").Theme<"Dialog", {
-                fontSize: string;
-                lineHeight: string;
                 border: string;
                 titleTextColor: string;
                 textColor: string;
@@ -229,25 +205,29 @@ declare const _default: import("vue").DefineComponent<{
                 closeIconColor: string;
                 closeIconColorHover: string;
                 closeIconColorPressed: string;
-                closeBorderRadius: string;
                 iconColor: string;
                 iconColorInfo: string;
                 iconColorSuccess: string;
                 iconColorWarning: string;
                 iconColorError: string;
                 borderRadius: string;
-                titleFontWeight: string;
                 titleFontSize: string;
-                padding: string;
+                titleLineHeight: string;
+                titleFontWeight: string;
+                subtitleFontSize: string;
+                subtitleFontWeight: string;
+                subtitleLineHeight: string;
+                closeIconSize: string;
+                closeSize: string;
                 iconSize: string;
+                padding: string;
                 actionSpace: string;
                 contentMargin: string;
                 iconMargin: string;
                 iconMarginIconTop: string;
-                closeSize: string;
-                closeIconSize: string;
                 closeMargin: string;
                 closeMarginIconTop: string;
+                closeBorderRadius: string;
             }, {
                 Button: import("../../_mixins").Theme<"Button", {
                     heightTiny: string;
@@ -275,7 +255,7 @@ declare const _default: import("vue").DefineComponent<{
                     colorTertiaryHover: string;
                     colorTertiaryPressed: string;
                     colorTertiaryDisalbed: string;
-                    waveColorTerniary: string;
+                    waveColorTertiary: string;
                     textColorTextTertiary: string;
                     colorQuaternary: string;
                     colorQuaternaryHover: string;
@@ -462,41 +442,45 @@ declare const _default: import("vue").DefineComponent<{
                 }, any>;
             }>;
             Card: import("../../_mixins").Theme<"Card", {
-                lineHeight: string;
+                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;
-                colorModal: string;
-                colorPopover: string;
                 colorTarget: string;
                 colorEmbedded: string;
-                colorEmbeddedModal: string;
-                colorEmbeddedPopover: string;
                 textColor: string;
                 titleTextColor: string;
                 borderColor: string;
                 actionColor: string;
-                titleFontWeight: string;
                 closeColorHover: string;
                 closeColorPressed: string;
-                closeBorderRadius: string;
                 closeIconColor: string;
                 closeIconColorHover: string;
                 closeIconColorPressed: string;
-                fontSizeSmall: string;
-                fontSizeMedium: string;
-                fontSizeLarge: string;
-                fontSizeHuge: string;
+                closeBorderRadius: string;
                 boxShadow: string;
                 borderRadius: string;
                 paddingSmall: string;
                 paddingMedium: string;
                 paddingLarge: string;
                 paddingHuge: string;
-                titleFontSizeSmall: string;
-                titleFontSizeMedium: string;
-                titleFontSizeLarge: string;
-                titleFontSizeHuge: string;
-                closeIconSize: string;
-                closeSize: string;
             }, any>;
         };
         peerOverrides: {
@@ -533,7 +517,7 @@ declare const _default: import("vue").DefineComponent<{
                         colorTertiaryHover: string;
                         colorTertiaryPressed: string;
                         colorTertiaryDisalbed: string;
-                        waveColorTerniary: string;
+                        waveColorTertiary: string;
                         textColorTextTertiary: string;
                         colorQuaternary: string;
                         colorQuaternaryHover: string;
@@ -778,6 +762,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     onAfterEnter: PropType<() => void>;
     onEsc: PropType<(e: KeyboardEvent) => void>;
+    presetDisabled: BooleanConstructor;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
     icon: PropType<() => VNodeChild>;
     type: {
         readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
@@ -794,37 +783,18 @@ declare const _default: import("vue").DefineComponent<{
     negativeButtonProps: PropType<import("../..").ButtonProps>;
     content: PropType<string | (() => VNodeChild)>;
     action: PropType<() => VNodeChild>;
+    body: PropType<() => VNodeChild>;
     showIcon: {
         readonly type: BooleanConstructor;
-        readonly default: true;
+        readonly default: false;
     };
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
-    contentStyle: PropType<string | import("vue").CSSProperties>;
-    headerStyle: PropType<string | import("vue").CSSProperties>;
-    headerExtraStyle: PropType<string | import("vue").CSSProperties>;
-    footerStyle: PropType<string | import("vue").CSSProperties>;
-    embedded: BooleanConstructor;
-    segmented: {
-        readonly type: PropType<boolean | import("../../card").CardSegmented>;
-        readonly default: false;
-    };
-    size: {
-        readonly type: PropType<"small" | "medium" | "large" | "huge">;
-        readonly default: "medium";
-    };
-    hoverable: BooleanConstructor;
-    role: StringConstructor;
-    tag: {
-        readonly type: PropType<keyof HTMLElementTagNameMap>;
-        readonly default: "div";
-    };
     show: {
         type: BooleanConstructor;
         required: true;
     };
-    preset: PropType<"dialog" | "confirm" | "card">;
     displayDirective: {
         type: PropType<"show" | "if">;
         required: true;
@@ -840,16 +810,13 @@ declare const _default: import("vue").DefineComponent<{
     blockScroll: BooleanConstructor;
 }>>, {
     type: "default" | "error" | "info" | "success" | "warning";
-    tag: keyof HTMLElementTagNameMap;
-    size: "small" | "medium" | "large" | "huge";
+    size: "small" | "medium" | "large";
     autoFocus: boolean;
     loading: boolean;
     bordered: boolean;
     showIcon: boolean;
     closable: boolean;
-    hoverable: boolean;
-    embedded: boolean;
-    segmented: boolean | import("../../card").CardSegmented;
+    presetDisabled: boolean;
     trapFocus: boolean;
     blockScroll: boolean;
 }, {}>;

package/lib/modal/src/BodyWrapper.js

@@ -5,11 +5,9 @@ const vdirs_1 = require("vdirs");
 const vueuc_1 = require("vueuc");
 const dialogProps_1 = require("../../dialog/src/dialogProps");
 const Dialog_1 = require("../../dialog/src/Dialog");
-const Card_1 = require("../../card/src/Card");
 const interface_1 = require("../../drawer/src/interface");
 const interface_2 = require("../../popover/src/interface");
 const _internal_1 = require("../../_internal");
-const card_1 = require("../../card");
 const _utils_1 = require("../../_utils");
 const interface_3 = require("./interface");
 const presetProps_1 = require("./presetProps");
@@ -19,7 +17,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: Object.assign(Object.assign({ show: {
             type: Boolean,
             required: true
-        }, preset: String, displayDirective: {
+        }, displayDirective: {
             type: String,
             required: true
         }, trapFocus: {
@@ -153,9 +151,9 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { $slots, $attrs, handleEnter, handleAfterLeave, handleBeforeLeave, preset, mergedClsPrefix } = this;
+        const { $slots, $attrs, handleEnter, handleAfterLeave, handleBeforeLeave, mergedClsPrefix } = this;
         let childNode = null;
-        if (!preset) {
+        if (this.presetDisabled) {
             childNode = (0, _utils_1.getFirstSlotVNode)($slots);
             if (!childNode) {
                 (0, _utils_1.warn)('modal', 'default slot is empty');
@@ -166,6 +164,9 @@ exports.default = (0, vue_1.defineComponent)({
                 class: `${mergedClsPrefix}-modal`
             }, $attrs, childNode.props || {});
         }
+        else {
+            childNode = ((0, vue_1.h)(Dialog_1.UDialog, Object.assign({}, this.$attrs, { class: [`${mergedClsPrefix}-modal`, this.$attrs.class], ref: "bodyRef", theme: this.mergedTheme.peers.Dialog, themeOverrides: this.mergedTheme.peerOverrides.Dialog }, (0, _utils_1.keep)(this.$props, dialogProps_1.dialogPropKeys), { "aria-modal": "true" }), $slots));
+        }
         return this.displayDirective === 'show' || this.displayed || this.show
             ? (0, vue_1.withDirectives)((0, vue_1.h)("div", { role: "none", class: `${mergedClsPrefix}-modal-body-wrapper` },
                 (0, vue_1.h)(_internal_1.UScrollbar, { ref: "scrollbarRef", theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar, contentClass: `${mergedClsPrefix}-modal-scroll-content` }, {
@@ -190,14 +191,7 @@ exports.default = (0, vue_1.defineComponent)({
                                                     { capture: true }
                                                 ]);
                                             }
-                                            return (0, vue_1.withDirectives)((this.preset === 'confirm' ||
-                                                this.preset === 'dialog' ? ((0, vue_1.h)(Dialog_1.UDialog, Object.assign({}, this.$attrs, { class: [
-                                                    `${mergedClsPrefix}-modal`,
-                                                    this.$attrs.class
-                                                ], ref: "bodyRef", theme: this.mergedTheme.peers.Dialog, themeOverrides: this.mergedTheme.peerOverrides.Dialog }, (0, _utils_1.keep)(this.$props, dialogProps_1.dialogPropKeys), { "aria-modal": "true" }), $slots)) : this.preset === 'card' ? ((0, vue_1.h)(card_1.UCard, Object.assign({}, this.$attrs, { ref: "bodyRef", class: [
-                                                    `${mergedClsPrefix}-modal`,
-                                                    this.$attrs.class
-                                                ], theme: this.mergedTheme.peers.Card, themeOverrides: this.mergedTheme.peerOverrides.Card }, (0, _utils_1.keep)(this.$props, Card_1.cardBasePropKeys), { "aria-modal": "true", role: "dialog" }), $slots)) : ((this.childNodeRef = childNode))), dirs);
+                                            return (0, vue_1.withDirectives)((this.childNodeRef = childNode), dirs);
                                         }
                                     }));
                                 }