@uzum-tech/ui 0.1.2 → 1.0.1

package/lib/status/src/Status.d.ts

@@ -0,0 +1,139 @@
+import { type PropType } from 'vue';
+import type { ExtractPublicPropTypes } from '../../_utils';
+export declare const statusProps: {
+    color: StringConstructor;
+    type: {
+        type: PropType<"default" | "error" | "success" | "warning">;
+        default: string;
+    };
+    theme: PropType<import("../../_mixins").Theme<"Status", {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        iconSize: string;
+        iconSpacing: string;
+        textColor: string;
+        successColor: string;
+        warningColor: string;
+        dangerColor: string;
+    }, any>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Status", {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        iconSize: string;
+        iconSpacing: string;
+        textColor: string;
+        successColor: string;
+        warningColor: string;
+        dangerColor: string;
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Status", {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        iconSize: string;
+        iconSpacing: string;
+        textColor: string;
+        successColor: string;
+        warningColor: string;
+        dangerColor: string;
+    }, any>>>;
+};
+export type StatusProps = ExtractPublicPropTypes<typeof statusProps>;
+declare const _default: import("vue").DefineComponent<{
+    color: StringConstructor;
+    type: {
+        type: PropType<"default" | "error" | "success" | "warning">;
+        default: string;
+    };
+    theme: PropType<import("../../_mixins").Theme<"Status", {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        iconSize: string;
+        iconSpacing: string;
+        textColor: string;
+        successColor: string;
+        warningColor: string;
+        dangerColor: string;
+    }, any>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Status", {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        iconSize: string;
+        iconSpacing: string;
+        textColor: string;
+        successColor: string;
+        warningColor: string;
+        dangerColor: string;
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Status", {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        iconSize: string;
+        iconSpacing: string;
+        textColor: string;
+        successColor: string;
+        warningColor: string;
+        dangerColor: string;
+    }, any>>>;
+}, {
+    mergedClsPrefix: import("vue").Ref<string>;
+    mergedRenderIcon: import("vue").ComputedRef<import("vue").Slot<any> | (() => JSX.Element)>;
+    cssVars: import("vue").ComputedRef<{
+        '--u-bezier': string;
+        '--u-text-color': string;
+        '--u-font-size': string;
+        '--u-font-weight': string;
+        '--u-line-height': string;
+        '--u-icon-size': string;
+        '--u-icon-spacing': string;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    color: StringConstructor;
+    type: {
+        type: PropType<"default" | "error" | "success" | "warning">;
+        default: string;
+    };
+    theme: PropType<import("../../_mixins").Theme<"Status", {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        iconSize: string;
+        iconSpacing: string;
+        textColor: string;
+        successColor: string;
+        warningColor: string;
+        dangerColor: string;
+    }, any>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Status", {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        iconSize: string;
+        iconSpacing: string;
+        textColor: string;
+        successColor: string;
+        warningColor: string;
+        dangerColor: string;
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Status", {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        iconSize: string;
+        iconSpacing: string;
+        textColor: string;
+        successColor: string;
+        warningColor: string;
+        dangerColor: string;
+    }, any>>>;
+}>>, {
+    type: "default" | "error" | "success" | "warning";
+}, {}>;
+export default _default;

package/lib/status/src/Status.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.statusProps = void 0;
+const vue_1 = require("vue");
+const icon_1 = require("../../_internal/icon");
+const icons_1 = require("../../_internal/icons");
+const _mixins_1 = require("../../_mixins");
+const styles_1 = require("../styles");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+exports.statusProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { color: String, type: {
+        type: String,
+        default: 'default'
+    } });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'Status',
+    props: exports.statusProps,
+    setup(props, { slots }) {
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('Status', '-status', index_cssr_1.default, styles_1.statusLight, props, mergedClsPrefixRef);
+        const mergedRenderIconRef = (0, vue_1.computed)(() => {
+            if (slots.icon) {
+                return slots.icon;
+            }
+            switch (props.type) {
+                case 'success':
+                    return () => (0, vue_1.h)(icons_1.SuccessIcon, null);
+                case 'warning':
+                    return () => (0, vue_1.h)(icons_1.WarningIcon, null);
+                case 'error':
+                    return () => (0, vue_1.h)(icons_1.ErrorIcon, null);
+                case 'default':
+                    return () => (0, vue_1.h)(icons_1.InactiveIcon, null);
+            }
+        });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { textColor, warningColor, dangerColor, successColor, iconSize, fontSize, lineHeight, fontWeight, iconSpacing } } = themeRef.value;
+            let color = textColor;
+            switch (props.type) {
+                case 'success':
+                    color = successColor;
+                    break;
+                case 'warning':
+                    color = warningColor;
+                    break;
+                case 'error':
+                    color = dangerColor;
+                    break;
+            }
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-text-color': props.color || color,
+                '--u-font-size': fontSize,
+                '--u-font-weight': fontWeight,
+                '--u-line-height': lineHeight,
+                '--u-icon-size': iconSize,
+                '--u-icon-spacing': iconSpacing
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('status', (0, vue_1.computed)(() => {
+                return props.type[0];
+            }), cssVarsRef, props)
+            : undefined;
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            mergedRenderIcon: mergedRenderIconRef,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        const { $slots, mergedClsPrefix, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return ((0, vue_1.h)("div", { class: [
+                `${mergedClsPrefix}-status`,
+                `${mergedClsPrefix}-status--${this.type}`,
+                this.themeClass
+            ], style: this.cssVars },
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-status__icon` },
+                (0, vue_1.h)(icon_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: this.mergedRenderIcon })),
+            $slots.default && ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-status__description` }, $slots.default()))));
+    }
+});

package/lib/status/src/styles/index.cssr.d.ts

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

package/lib/status/src/styles/index.cssr.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+// vars:
+// --u-font-size
+// --u-icon-size
+// --u-icon-color
+// --u-bezier
+// --u-text-color
+// --u-extra-text-color
+exports.default = (0, cssr_1.cB)('status', `
+ display: flex;
+ font-size: var(--u-font-size);
+ line-height: var(--u-line-height);
+ font-weight: var(--u-font-weight);
+ color: var(--u-text-color);
+`, [(0, cssr_1.cE)('icon', `
+ display: flex;
+ align-items: center;
+ height: var(--u-line-height);
+ font-size: var(--u-icon-size);
+ margin-right: var(--u-icon-spacing);
+ flex-shrink: 0;
+ `, [(0, cssr_1.c)('&:last-child', `
+ margin-right: 0;
+ `)])]);

package/lib/status/styles/dark.d.ts

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

package/lib/status/styles/dark.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const common_1 = require("../../_styles/common");
+const light_1 = require("./light");
+const emptyDark = {
+    name: 'Status',
+    common: common_1.commonDark,
+    self: light_1.self
+};
+exports.default = emptyDark;

package/lib/status/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as statusDark } from './dark';
+export { default as statusLight } from './light';
+export type { StatusThemeVars, StatusTheme } from './light';

package/lib/status/styles/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.statusLight = exports.statusDark = void 0;
+var dark_1 = require("./dark");
+Object.defineProperty(exports, "statusDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
+var light_1 = require("./light");
+Object.defineProperty(exports, "statusLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });

package/lib/status/styles/light.d.ts

@@ -0,0 +1,17 @@
+import type { ThemeCommonVars } from '../../_styles/common';
+import type { Theme } from '../../_mixins';
+export declare const self: (vars: ThemeCommonVars) => {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: string;
+    iconSize: string;
+    iconSpacing: string;
+    textColor: string;
+    successColor: string;
+    warningColor: string;
+    dangerColor: string;
+};
+export type StatusThemeVars = ReturnType<typeof self>;
+declare const statusLight: Theme<'Status', StatusThemeVars>;
+export default statusLight;
+export type StatusTheme = typeof statusLight;

package/lib/status/styles/light.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.self = void 0;
+const common_1 = require("../../_styles/common");
+const self = (vars) => {
+    const { fontBodyMedium, lineHeightBodyMedium, fontWeightStrong, iconSmall, textSecondary, staticGreen, staticOrange, staticRed } = vars;
+    return {
+        fontSize: fontBodyMedium,
+        lineHeight: lineHeightBodyMedium,
+        fontWeight: fontWeightStrong,
+        iconSize: iconSmall,
+        iconSpacing: '8px',
+        textColor: textSecondary,
+        successColor: staticGreen,
+        warningColor: staticOrange,
+        dangerColor: staticRed
+    };
+};
+exports.self = self;
+const statusLight = {
+    name: 'Status',
+    common: common_1.commonLight,
+    self: exports.self
+};
+exports.default = statusLight;

package/lib/steps/src/Step.d.ts

@@ -1,10 +1,11 @@
-import { type PropType } from 'vue';
+import { type PropType, VNodeChild } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 export declare const stepProps: {
     readonly status: PropType<"wait" | "error" | "finish" | "process">;
     readonly title: StringConstructor;
     readonly description: StringConstructor;
     readonly disabled: BooleanConstructor;
+    readonly noIcon: BooleanConstructor;
     readonly internalIndex: {
         readonly type: NumberConstructor;
         readonly default: 0;
@@ -16,16 +17,19 @@ declare const _default: import("vue").DefineComponent<{
     readonly title: StringConstructor;
     readonly description: StringConstructor;
     readonly disabled: BooleanConstructor;
+    readonly noIcon: BooleanConstructor;
     readonly internalIndex: {
         readonly type: NumberConstructor;
         readonly default: 0;
     };
 }, {
+    renderIcon: () => VNodeChild;
     stepsSlots: Readonly<{
         [name: string]: import("vue").Slot<any> | undefined;
     }>;
     mergedClsPrefix: import("vue").Ref<string>;
     vertical: import("vue").ComputedRef<boolean>;
+    noIcon: import("vue").ComputedRef<boolean>;
     mergedStatus: import("vue").ComputedRef<"wait" | "error" | "finish" | "process">;
     handleStepClick: import("vue").ComputedRef<(() => void) | undefined>;
     cssVars: import("vue").ComputedRef<{
@@ -49,6 +53,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly title: StringConstructor;
     readonly description: StringConstructor;
     readonly disabled: BooleanConstructor;
+    readonly noIcon: BooleanConstructor;
     readonly internalIndex: {
         readonly type: NumberConstructor;
         readonly default: 0;
@@ -56,5 +61,6 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     readonly disabled: boolean;
     readonly internalIndex: number;
+    readonly noIcon: boolean;
 }, {}>;
 export default _default;

package/lib/steps/src/Step.js

@@ -12,6 +12,7 @@ exports.stepProps = {
     title: String,
     description: String,
     disabled: Boolean,
+    noIcon: Boolean,
     // index will be filled by parent steps, not user
     internalIndex: {
         type: Number,
@@ -21,7 +22,7 @@ exports.stepProps = {
 exports.default = (0, vue_1.defineComponent)({
     name: 'Step',
     props: exports.stepProps,
-    setup(props) {
+    setup(props, { slots }) {
         const USteps = (0, vue_1.inject)(Steps_1.stepsInjectionKey, null);
         if (!USteps)
             (0, _utils_1.throwError)('step', '`u-step` must be placed inside `u-steps`.');
@@ -30,6 +31,9 @@ exports.default = (0, vue_1.defineComponent)({
         const verticalRef = (0, vue_1.computed)(() => {
             return stepsProps.vertical;
         });
+        const noIconRef = (0, vue_1.computed)(() => {
+            return props.noIcon;
+        });
         const mergedStatusRef = (0, vue_1.computed)(() => {
             const { status } = props;
             if (status) {
@@ -93,10 +97,29 @@ exports.default = (0, vue_1.defineComponent)({
                 }
                 : undefined;
         });
+        const renderInternalIndex = () => ((0, vue_1.h)("div", { key: props.internalIndex, class: `${mergedClsPrefixRef.value}-step-indicator-slot__index` }, props.internalIndex));
+        const renderFinishIcon = () => ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "finish" }, {
+            default: () => (0, _utils_1.resolveSlot)(stepsSlots['finish-icon'], () => [(0, vue_1.h)(icons_1.CheckmarkIcon, null)])
+        }));
+        const renderErrorIcon = () => ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefixRef.value, key: "error" }, {
+            default: () => (0, _utils_1.resolveSlot)(stepsSlots['error-icon'], () => [(0, vue_1.h)(icons_1.CloseIcon, null)])
+        }));
+        const renderIcon = () => {
+            return (0, _utils_1.resolveWrappedSlot)(slots.icon, (icon) => {
+                const mergedStatus = mergedStatusRef.value;
+                if (mergedStatus === 'finish')
+                    return renderFinishIcon();
+                if (mergedStatus === 'error')
+                    return renderErrorIcon();
+                return icon || renderInternalIndex();
+            });
+        };
         return {
+            renderIcon,
             stepsSlots,
             mergedClsPrefix: mergedClsPrefixRef,
             vertical: verticalRef,
+            noIcon: noIconRef,
             mergedStatus: mergedStatusRef,
             handleStepClick,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
@@ -105,7 +128,7 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { mergedClsPrefix, onRender, handleStepClick, disabled } = this;
+        const { mergedClsPrefix, onRender, handleStepClick, disabled, renderIcon } = this;
         const descriptionNode = (0, _utils_1.resolveWrappedSlot)(this.$slots.default, (children) => {
             const mergedDescription = children || this.description;
             if (mergedDescription) {
@@ -122,29 +145,15 @@ exports.default = (0, vue_1.defineComponent)({
                 descriptionNode && `${mergedClsPrefix}-step--show-description`,
                 `${mergedClsPrefix}-step--${this.mergedStatus}-status`
             ], style: this.cssVars, onClick: handleStepClick },
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-indicator` },
+            this.vertical || !this.noIcon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-indicator` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-indicator-slot` },
-                    (0, vue_1.h)(_internal_1.UIconSwitchTransition, null, {
-                        default: () => {
-                            return (0, _utils_1.resolveWrappedSlot)(this.$slots.icon, (icon) => {
-                                const { mergedStatus, stepsSlots } = this;
-                                return !(mergedStatus === 'finish' || mergedStatus === 'error') ? (icon || ((0, vue_1.h)("div", { key: this.internalIndex, class: `${mergedClsPrefix}-step-indicator-slot__index` }, this.internalIndex))) : mergedStatus === 'finish' ? ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix, key: "finish" }, {
-                                    default: () => (0, _utils_1.resolveSlot)(stepsSlots['finish-icon'], () => [
-                                        (0, vue_1.h)(icons_1.CheckmarkIcon, null)
-                                    ])
-                                })) : mergedStatus === 'error' ? ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix, key: "error" }, {
-                                    default: () => (0, _utils_1.resolveSlot)(stepsSlots['error-icon'], () => [
-                                        (0, vue_1.h)(icons_1.CloseIcon, null)
-                                    ])
-                                })) : null;
-                            });
-                        }
-                    })),
-                this.vertical ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-splitor` })) : null),
+                    (0, vue_1.h)(_internal_1.UIconSwitchTransition, null, { default: renderIcon })),
+                this.vertical ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-splitor` })) : null)) : null,
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-content` },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-content-header` },
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-content-header ${mergedClsPrefix}-step-content-header${this.noIcon ? '--column' : ''}` },
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-content-header__title` }, (0, _utils_1.resolveSlot)(this.$slots.title, () => [this.title])),
-                    !this.vertical ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-splitor` })) : null),
+                    this.noIcon && !this.vertical ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-splitor-no-icon` })) : null,
+                    !this.vertical && !this.noIcon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-splitor` })) : null),
                 descriptionNode)));
     }
 });