@uzum-tech/ui 0.1.0 → 0.1.1

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

@@ -0,0 +1,80 @@
+import { type ThemeCommonVars } from '../../config-provider';
+export declare function self(vars: ThemeCommonVars): {
+    menuBoxShadow: string;
+};
+declare const popselectLight: import("../../_mixins").Theme<"Popselect", {
+    menuBoxShadow: string;
+}, {
+    Popover: import("../../_mixins").Theme<"Popover", {
+        fontSize: string;
+        borderRadius: string;
+        color: string;
+        dividerColor: string;
+        textColor: string;
+        boxShadow: string;
+        space: string;
+        spaceArrow: string;
+        arrowOffset: string;
+        arrowOffsetVertical: string;
+        arrowHeight: string;
+        padding: string;
+    }, any>;
+    InternalSelectMenu: import("../../_mixins").Theme<"InternalSelectMenu", {
+        optionFontSizeSmall: string;
+        optionFontSizeMedium: string;
+        optionFontSizeLarge: string;
+        optionFontSizeHuge: string;
+        optionHeightSmall: string;
+        optionHeightMedium: string;
+        optionHeightLarge: string;
+        optionHeightHuge: string;
+        borderRadius: string;
+        color: string;
+        groupHeaderTextColor: string;
+        actionDividerColor: string;
+        optionTextColor: string;
+        optionTextColorPressed: string;
+        optionTextColorDisabled: string;
+        optionTextColorActive: string;
+        optionOpacityDisabled: string;
+        optionCheckColor: string;
+        optionColorPending: string;
+        optionColorActive: string;
+        optionGroupHeaderBorderColor: string;
+        optionColorActivePending: string;
+        actionTextColor: string;
+        loadingColor: string;
+        height: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+        optionPaddingSmall: string;
+        optionPaddingMedium: string;
+        optionPaddingLarge: string;
+        optionPaddingHuge: string;
+        loadingSize: string;
+    }, {
+        Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            color: string;
+            colorHover: string;
+        }, any>;
+        Empty: import("../../_mixins").Theme<"Empty", {
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            fontSizeHuge: string;
+            textColor: string;
+            iconColor: string;
+            extraTextColor: string;
+            iconSizeSmall: string;
+            iconSizeMedium: string;
+            iconSizeLarge: string;
+            iconSizeHuge: string;
+        }, any>;
+    }>;
+}>;
+export interface PopselectThemeVars {
+}
+export default popselectLight;
+export type PopselectTheme = typeof popselectLight;

package/lib/popselect/styles/light.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.self = void 0;
+const styles_1 = require("../../_internal/select-menu/styles");
+const common_1 = require("../../_styles/common");
+const styles_2 = require("../../popover/styles");
+const _mixins_1 = require("../../_mixins");
+function self(vars) {
+    const { boxShadow2 } = vars;
+    return {
+        menuBoxShadow: boxShadow2
+    };
+}
+exports.self = self;
+const popselectLight = (0, _mixins_1.createTheme)({
+    name: 'Popselect',
+    common: common_1.commonLight,
+    peers: {
+        Popover: styles_2.popoverLight,
+        InternalSelectMenu: styles_1.internalSelectMenuLight
+    },
+    self
+});
+exports.default = popselectLight;

package/lib/preset.d.ts

@@ -0,0 +1,3 @@
+declare const naive: import("./create").UUiInstance;
+export default naive;
+export declare const install: (app: import("vue").App<any>) => void;

package/lib/preset.js

@@ -0,0 +1,36 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.install = void 0;
+const components = __importStar(require("./components"));
+const create_1 = __importDefault(require("./create"));
+const naive = (0, create_1.default)({
+    components: Object.keys(components).map((key) => components[key])
+});
+exports.default = naive;
+exports.install = naive.install;

package/lib/progress/index.d.ts

@@ -0,0 +1,2 @@
+export { default as UProgress, progressProps } from './src/Progress';
+export type { ProgressProps } from './src/Progress';

package/lib/progress/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.progressProps = exports.UProgress = void 0;
+var Progress_1 = require("./src/Progress");
+Object.defineProperty(exports, "UProgress", { enumerable: true, get: function () { return __importDefault(Progress_1).default; } });
+Object.defineProperty(exports, "progressProps", { enumerable: true, get: function () { return Progress_1.progressProps; } });

package/lib/progress/src/Circle.d.ts

@@ -0,0 +1,92 @@
+import { type PropType, type CSSProperties } from 'vue';
+import { type Status } from './interface';
+declare const _default: import("vue").DefineComponent<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    status: {
+        type: PropType<Status>;
+        required: true;
+    };
+    strokeWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    fillColor: StringConstructor;
+    railColor: StringConstructor;
+    railStyle: PropType<string | CSSProperties>;
+    percentage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    offsetDegree: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showIndicator: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    indicatorTextColor: StringConstructor;
+    unit: StringConstructor;
+    viewBoxWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    gapDegree: {
+        type: PropType<number>;
+        required: true;
+    };
+    gapOffsetDegree: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    status: {
+        type: PropType<Status>;
+        required: true;
+    };
+    strokeWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    fillColor: StringConstructor;
+    railColor: StringConstructor;
+    railStyle: PropType<string | CSSProperties>;
+    percentage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    offsetDegree: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showIndicator: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    indicatorTextColor: StringConstructor;
+    unit: StringConstructor;
+    viewBoxWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    gapDegree: {
+        type: PropType<number>;
+        required: true;
+    };
+    gapOffsetDegree: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    percentage: number;
+    offsetDegree: number;
+    gapOffsetDegree: number;
+}, {}>;
+export default _default;

package/lib/progress/src/Circle.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const _internal_1 = require("../../_internal");
+const icons_1 = require("../../_internal/icons");
+const iconMap = {
+    success: (0, vue_1.h)(icons_1.SuccessIcon, null),
+    error: (0, vue_1.h)(icons_1.ErrorIcon, null),
+    warning: (0, vue_1.h)(icons_1.WarningIcon, null),
+    info: (0, vue_1.h)(icons_1.InfoIcon, null)
+};
+exports.default = (0, vue_1.defineComponent)({
+    name: 'ProgressCircle',
+    props: {
+        clsPrefix: {
+            type: String,
+            required: true
+        },
+        status: {
+            type: String,
+            required: true
+        },
+        strokeWidth: {
+            type: Number,
+            required: true
+        },
+        fillColor: String,
+        railColor: String,
+        railStyle: [String, Object],
+        percentage: {
+            type: Number,
+            default: 0
+        },
+        offsetDegree: {
+            type: Number,
+            default: 0
+        },
+        showIndicator: {
+            type: Boolean,
+            required: true
+        },
+        indicatorTextColor: String,
+        unit: String,
+        viewBoxWidth: {
+            type: Number,
+            required: true
+        },
+        gapDegree: {
+            type: Number,
+            required: true
+        },
+        gapOffsetDegree: {
+            type: Number,
+            default: 0
+        }
+    },
+    setup(props, { slots }) {
+        function getPathStyles(percent, offsetDegree, strokeColor) {
+            const { gapDegree, viewBoxWidth, strokeWidth } = props;
+            const radius = 50;
+            const beginPositionX = 0;
+            const beginPositionY = radius;
+            const endPositionX = 0;
+            const endPositionY = 2 * radius;
+            const centerX = 50 + strokeWidth / 2;
+            const pathString = `M ${centerX},${centerX} m ${beginPositionX},${beginPositionY}
+      a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY}
+      a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
+            const len = Math.PI * 2 * radius;
+            const pathStyle = {
+                stroke: strokeColor,
+                strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${viewBoxWidth * 8}px`,
+                strokeDashoffset: `-${gapDegree / 2}px`,
+                transformOrigin: offsetDegree ? 'center' : undefined,
+                transform: offsetDegree ? `rotate(${offsetDegree}deg)` : undefined
+            };
+            return {
+                pathString,
+                pathStyle
+            };
+        }
+        return () => {
+            const { fillColor, railColor, strokeWidth, offsetDegree, status, percentage, showIndicator, indicatorTextColor, unit, gapOffsetDegree, clsPrefix } = props;
+            const { pathString: railPathString, pathStyle: railPathStyle } = getPathStyles(100, 0, railColor);
+            const { pathString: fillPathString, pathStyle: fillPathStyle } = getPathStyles(percentage, offsetDegree, fillColor);
+            const viewBoxSize = 100 + strokeWidth;
+            return ((0, vue_1.h)("div", { class: `${clsPrefix}-progress-content`, role: "none" },
+                (0, vue_1.h)("div", { class: `${clsPrefix}-progress-graph`, "aria-hidden": true },
+                    (0, vue_1.h)("div", { class: `${clsPrefix}-progress-graph-circle`, style: {
+                            transform: gapOffsetDegree
+                                ? `rotate(${gapOffsetDegree}deg)`
+                                : undefined
+                        } },
+                        (0, vue_1.h)("svg", { viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}` },
+                            (0, vue_1.h)("g", null,
+                                (0, vue_1.h)("path", { class: `${clsPrefix}-progress-graph-circle-rail`, d: railPathString, "stroke-width": strokeWidth, "stroke-linecap": "round", fill: "none", style: railPathStyle })),
+                            (0, vue_1.h)("g", null,
+                                (0, vue_1.h)("path", { class: [
+                                        `${clsPrefix}-progress-graph-circle-fill`,
+                                        percentage === 0 &&
+                                            `${clsPrefix}-progress-graph-circle-fill--empty`
+                                    ], d: fillPathString, "stroke-width": strokeWidth, "stroke-linecap": "round", fill: "none", style: fillPathStyle }))))),
+                showIndicator ? ((0, vue_1.h)("div", null, slots.default ? ((0, vue_1.h)("div", { class: `${clsPrefix}-progress-custom-content`, role: "none" }, slots.default())) : status !== 'default' ? ((0, vue_1.h)("div", { class: `${clsPrefix}-progress-icon`, "aria-hidden": true },
+                    (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix }, {
+                        default: () => iconMap[status]
+                    }))) : ((0, vue_1.h)("div", { class: `${clsPrefix}-progress-text`, style: {
+                        color: indicatorTextColor
+                    }, role: "none" },
+                    (0, vue_1.h)("span", { class: `${clsPrefix}-progress-text__percentage` }, percentage),
+                    (0, vue_1.h)("span", { class: `${clsPrefix}-progress-text__unit` }, unit))))) : null));
+        };
+    }
+});

package/lib/progress/src/Line.d.ts

@@ -0,0 +1,79 @@
+import { type PropType, type CSSProperties } from 'vue';
+import { type Status } from './interface';
+declare const _default: import("vue").DefineComponent<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    percentage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    railColor: StringConstructor;
+    railStyle: PropType<string | CSSProperties>;
+    fillColor: StringConstructor;
+    status: {
+        type: PropType<Status>;
+        required: true;
+    };
+    indicatorPlacement: {
+        type: PropType<"inside" | "outside">;
+        required: true;
+    };
+    indicatorTextColor: StringConstructor;
+    unit: {
+        type: StringConstructor;
+        default: string;
+    };
+    processing: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    showIndicator: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    height: (StringConstructor | NumberConstructor)[];
+    railBorderRadius: (StringConstructor | NumberConstructor)[];
+    fillBorderRadius: (StringConstructor | NumberConstructor)[];
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    percentage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    railColor: StringConstructor;
+    railStyle: PropType<string | CSSProperties>;
+    fillColor: StringConstructor;
+    status: {
+        type: PropType<Status>;
+        required: true;
+    };
+    indicatorPlacement: {
+        type: PropType<"inside" | "outside">;
+        required: true;
+    };
+    indicatorTextColor: StringConstructor;
+    unit: {
+        type: StringConstructor;
+        default: string;
+    };
+    processing: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    showIndicator: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    height: (StringConstructor | NumberConstructor)[];
+    railBorderRadius: (StringConstructor | NumberConstructor)[];
+    fillBorderRadius: (StringConstructor | NumberConstructor)[];
+}>>, {
+    unit: string;
+    percentage: number;
+}, {}>;
+export default _default;

package/lib/progress/src/Line.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const _utils_1 = require("../../_utils");
+const _internal_1 = require("../../_internal");
+const icons_1 = require("../../_internal/icons");
+const iconMap = {
+    success: (0, vue_1.h)(icons_1.SuccessIcon, null),
+    error: (0, vue_1.h)(icons_1.ErrorIcon, null),
+    warning: (0, vue_1.h)(icons_1.WarningIcon, null),
+    info: (0, vue_1.h)(icons_1.InfoIcon, null)
+};
+exports.default = (0, vue_1.defineComponent)({
+    name: 'ProgressLine',
+    props: {
+        clsPrefix: {
+            type: String,
+            required: true
+        },
+        percentage: {
+            type: Number,
+            default: 0
+        },
+        railColor: String,
+        railStyle: [String, Object],
+        fillColor: String,
+        status: {
+            type: String,
+            required: true
+        },
+        indicatorPlacement: {
+            type: String,
+            required: true
+        },
+        indicatorTextColor: String,
+        unit: {
+            type: String,
+            default: '%'
+        },
+        processing: {
+            type: Boolean,
+            required: true
+        },
+        showIndicator: {
+            type: Boolean,
+            required: true
+        },
+        height: [String, Number],
+        railBorderRadius: [String, Number],
+        fillBorderRadius: [String, Number]
+    },
+    setup(props, { slots }) {
+        const styleHeightRef = (0, vue_1.computed)(() => {
+            return (0, _utils_1.formatLength)(props.height);
+        });
+        const styleRailBorderRadiusRef = (0, vue_1.computed)(() => {
+            if (props.railBorderRadius !== undefined) {
+                return (0, _utils_1.formatLength)(props.railBorderRadius);
+            }
+            if (props.height !== undefined) {
+                return (0, _utils_1.formatLength)(props.height, { c: 0.5 });
+            }
+            return '';
+        });
+        const styleFillBorderRadiusRef = (0, vue_1.computed)(() => {
+            if (props.fillBorderRadius !== undefined) {
+                return (0, _utils_1.formatLength)(props.fillBorderRadius);
+            }
+            if (props.railBorderRadius !== undefined) {
+                return (0, _utils_1.formatLength)(props.railBorderRadius);
+            }
+            if (props.height !== undefined) {
+                return (0, _utils_1.formatLength)(props.height, { c: 0.5 });
+            }
+            return '';
+        });
+        return () => {
+            const { indicatorPlacement, railColor, railStyle, percentage, unit, indicatorTextColor, status, showIndicator, fillColor, processing, clsPrefix } = props;
+            return ((0, vue_1.h)("div", { class: `${clsPrefix}-progress-content`, role: "none" },
+                (0, vue_1.h)("div", { class: `${clsPrefix}-progress-graph`, "aria-hidden": true },
+                    (0, vue_1.h)("div", { class: [
+                            `${clsPrefix}-progress-graph-line`,
+                            {
+                                [`${clsPrefix}-progress-graph-line--indicator-${indicatorPlacement}`]: true
+                            }
+                        ] },
+                        (0, vue_1.h)("div", { class: `${clsPrefix}-progress-graph-line-rail`, style: [
+                                {
+                                    backgroundColor: railColor,
+                                    height: styleHeightRef.value,
+                                    borderRadius: styleRailBorderRadiusRef.value
+                                },
+                                railStyle
+                            ] },
+                            (0, vue_1.h)("div", { class: [
+                                    `${clsPrefix}-progress-graph-line-fill`,
+                                    processing &&
+                                        `${clsPrefix}-progress-graph-line-fill--processing`
+                                ], style: {
+                                    maxWidth: `${props.percentage}%`,
+                                    backgroundColor: fillColor,
+                                    height: styleHeightRef.value,
+                                    lineHeight: styleHeightRef.value,
+                                    borderRadius: styleFillBorderRadiusRef.value
+                                } }, indicatorPlacement === 'inside' ? ((0, vue_1.h)("div", { class: `${clsPrefix}-progress-graph-line-indicator`, style: {
+                                    color: indicatorTextColor
+                                } }, slots.default ? slots.default() : `${percentage}${unit}`)) : null)))),
+                showIndicator && indicatorPlacement === 'outside' ? ((0, vue_1.h)("div", null, slots.default ? ((0, vue_1.h)("div", { class: `${clsPrefix}-progress-custom-content`, style: {
+                        color: indicatorTextColor
+                    }, role: "none" }, slots.default())) : status === 'default' ? ((0, vue_1.h)("div", { role: "none", class: `${clsPrefix}-progress-icon ${clsPrefix}-progress-icon--as-text`, style: {
+                        color: indicatorTextColor
+                    } },
+                    percentage,
+                    unit)) : ((0, vue_1.h)("div", { class: `${clsPrefix}-progress-icon`, "aria-hidden": true },
+                    (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix }, { default: () => iconMap[status] }))))) : null));
+        };
+    }
+});

package/lib/progress/src/MultipleCircle.d.ts

@@ -0,0 +1,82 @@
+import { type PropType, type CSSProperties } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    viewBoxWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    percentage: {
+        type: PropType<number[]>;
+        default: number[];
+    };
+    strokeWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    circleGap: {
+        type: NumberConstructor;
+        required: true;
+    };
+    showIndicator: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    fillColor: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    railColor: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    railStyle: {
+        type: PropType<(string | CSSProperties)[]>;
+        default: () => never[];
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    viewBoxWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    percentage: {
+        type: PropType<number[]>;
+        default: number[];
+    };
+    strokeWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    circleGap: {
+        type: NumberConstructor;
+        required: true;
+    };
+    showIndicator: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    fillColor: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    railColor: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    railStyle: {
+        type: PropType<(string | CSSProperties)[]>;
+        default: () => never[];
+    };
+}>>, {
+    railColor: string[];
+    fillColor: string[];
+    percentage: number[];
+    railStyle: (string | CSSProperties)[];
+}, {}>;
+export default _default;