@uzum-tech/ui 1.1.1 → 1.1.4

package/lib/flex/src/Flex.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flexProps = void 0;
+const vue_1 = require("vue");
+const seemly_1 = require("seemly");
+const use_rtl_1 = require("../../_mixins/use-rtl");
+const _utils_1 = require("../../_utils");
+const _mixins_1 = require("../../_mixins");
+const styles_1 = require("../styles");
+exports.flexProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { align: String, justify: {
+        type: String,
+        default: 'start'
+    }, inline: Boolean, vertical: Boolean, reverse: Boolean, size: {
+        type: [String, Number, Array],
+        default: 'medium'
+    }, wrap: {
+        type: Boolean,
+        default: true
+    } });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'Flex',
+    props: exports.flexProps,
+    setup(props) {
+        const { mergedClsPrefixRef, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('Flex', '-flex', undefined, styles_1.flexLight, props, mergedClsPrefixRef);
+        const rtlEnabledRef = (0, use_rtl_1.useRtl)('Flex', mergedRtlRef, mergedClsPrefixRef);
+        return {
+            rtlEnabled: rtlEnabledRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            margin: (0, vue_1.computed)(() => {
+                const { size } = props;
+                if (Array.isArray(size)) {
+                    return {
+                        horizontal: size[0],
+                        vertical: size[1]
+                    };
+                }
+                if (typeof size === 'number') {
+                    return {
+                        horizontal: size,
+                        vertical: size
+                    };
+                }
+                const { self: { [(0, _utils_1.createKey)('gap', size)]: gap } } = themeRef.value;
+                const { row, col } = (0, seemly_1.getGap)(gap);
+                return {
+                    horizontal: (0, seemly_1.depx)(col),
+                    vertical: (0, seemly_1.depx)(row)
+                };
+            })
+        };
+    },
+    render() {
+        const { vertical, reverse, align, inline, justify, margin, wrap, mergedClsPrefix, rtlEnabled } = this;
+        const children = (0, _utils_1.flatten)((0, _utils_1.getSlot)(this), false);
+        if (!children.length) {
+            return null;
+        }
+        return ((0, vue_1.h)("div", { role: "none", class: [
+                `${mergedClsPrefix}-flex`,
+                rtlEnabled && `${mergedClsPrefix}-flex--rtl`
+            ], style: {
+                display: inline ? 'inline-flex' : 'flex',
+                flexDirection: (() => {
+                    if (vertical && !reverse) {
+                        return 'column';
+                    }
+                    if (vertical && reverse) {
+                        return 'column-reverse';
+                    }
+                    if (!vertical && reverse) {
+                        return 'row-reverse';
+                    }
+                    else
+                        return 'row';
+                })(),
+                justifyContent: justify,
+                flexWrap: !wrap || vertical ? 'nowrap' : 'wrap',
+                alignItems: align,
+                gap: `${margin.vertical}px ${margin.horizontal}px`
+            } }, children));
+    }
+});

package/lib/flex/src/styles/rtl.cssr.d.ts

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

package/lib/flex/src/styles/rtl.cssr.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+exports.default = (0, cssr_1.cB)('space', [(0, cssr_1.cM)('rtl', `
+ direction: rtl;
+ `)]);

package/lib/flex/src/type.d.ts

@@ -0,0 +1,3 @@
+import type { Property } from 'csstype';
+export type FlexAlign = Property.AlignItems;
+export type FlexJustify = Property.JustifyContent;

package/lib/flex/src/type.js

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

package/lib/flex/styles/_common.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    gapSmall: string;
+    gapMedium: string;
+    gapLarge: string;
+};
+export default _default;

package/lib/flex/styles/_common.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    gapSmall: '4px 8px',
+    gapMedium: '8px 12px',
+    gapLarge: '12px 16px'
+};

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

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

package/lib/flex/styles/dark.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const _common_1 = __importDefault(require("./_common"));
+const flexDark = {
+    name: 'Flex',
+    self() {
+        return _common_1.default;
+    }
+};
+exports.default = flexDark;

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

@@ -0,0 +1,4 @@
+export { default as flexDark } from './dark';
+export { default as flexLight } from './light';
+export { flexRtl } from './rtl';
+export type { FlexTheme, FlexThemeVars } from './light';

package/lib/flex/styles/index.js

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

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

@@ -0,0 +1,10 @@
+import type { Theme } from '../../_mixins';
+declare function self(): {
+    gapSmall: string;
+    gapMedium: string;
+    gapLarge: string;
+};
+export type FlexThemeVars = ReturnType<typeof self>;
+declare const flexLight: Theme<'Flex', FlexThemeVars>;
+export default flexLight;
+export type FlexTheme = typeof flexLight;

package/lib/flex/styles/light.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const _common_1 = __importDefault(require("./_common"));
+function self() {
+    return _common_1.default;
+}
+const flexLight = {
+    name: 'Flex',
+    self
+};
+exports.default = flexLight;

package/lib/flex/styles/rtl.d.ts

@@ -0,0 +1,2 @@
+import type { RtlItem } from '../../config-provider/src/internal-interface';
+export declare const flexRtl: RtlItem;

package/lib/flex/styles/rtl.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flexRtl = void 0;
+const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
+exports.flexRtl = {
+    name: 'Flex',
+    style: rtl_cssr_1.default
+};

package/lib/themes/dark.js

@@ -86,6 +86,7 @@ const styles_81 = require("../upload/styles");
 const styles_82 = require("../watermark/styles");
 const styles_83 = require("../toggle-button/styles");
 const styles_84 = require("../_internal/account-option/styles");
+const styles_85 = require("../flex/styles");
 exports.darkTheme = {
     name: 'dark',
     common: common_1.commonDark,
@@ -172,5 +173,6 @@ exports.darkTheme = {
     Typography: styles_79.typographyDark,
     Upload: styles_81.uploadDark,
     Watermark: styles_82.watermarkDark,
-    ToggleButton: styles_83.toggleButtonDark
+    ToggleButton: styles_83.toggleButtonDark,
+    Flex: styles_85.flexDark
 };

package/lib/themes/light.js

@@ -88,6 +88,7 @@ const styles_81 = require("../upload/styles");
 const styles_82 = require("../watermark/styles");
 const styles_83 = require("../toggle-button/styles");
 const styles_84 = require("../_internal/account-option/styles");
+const styles_85 = require("../flex/styles");
 exports.lightTheme = {
     name: 'light',
     common: common_1.commonLight,
@@ -174,5 +175,6 @@ exports.lightTheme = {
     Typography: styles_78.typographyLight,
     Upload: styles_81.uploadLight,
     Watermark: styles_82.watermarkLight,
-    ToggleButton: styles_83.toggleButtonLight
+    ToggleButton: styles_83.toggleButtonLight,
+    Flex: styles_85.flexLight
 };

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.1.1";
+declare const _default: "1.1.4";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.1.1';
+exports.default = '1.1.4';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uzum-tech/ui",
-  "version": "1.1.1",
+  "version": "1.1.4",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -11,7 +11,7 @@
     "start": "pnpm run dev",
     "dev": "pnpm run clean && pnpm run gen-version && pnpm run gen-volar-dts && cross-env NODE_ENV=development vite",
     "build:package": "pnpm run gen-version && pnpm run clean && pnpm run gen-volar-dts && tsc -b --force tsconfig.esm.json && node scripts/pre-build/pre-cjs-build.js && tsc -b --force tsconfig.cjs.json && rollup -c && pnpm run test:umd && node scripts/post-build && rimraf {es,lib}/*.tsbuildinfo",
-    "build:site": "./scripts/pre-build-site/pre-build-site.sh && cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && ./scripts/post-build-site/post-build-site.sh",
+    "build:site": "pnpm run gen-version && ./scripts/pre-build-site/pre-build-site.sh && cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && ./scripts/post-build-site/post-build-site.sh",
     "clean": "rimraf site lib es dist node_modules/@uzum-tech/ui themes/tusimple/es themes/tusimple/lib",
     "release:package": "pnpm run test && pnpm run build:package && npm publish --no-git-checks",
     "release:changelog": "node scripts/release-changelog.mjs",
@@ -207,5 +207,9 @@
         "webpack"
       ]
     }
+  },
+  "exports": {
+    ".": "./lib/index.js",
+    "./auto-import-resolver": "./lib/_resolvers/auto-import/auto-import-resolver.js"
   }
 }

package/volar.d.ts

@@ -142,6 +142,7 @@ declare module 'vue' {
     UUploadFileList: typeof import('@uzum-tech/ui')['UUploadFileList']
     UUploadTrigger: typeof import('@uzum-tech/ui')['UUploadTrigger']
     UWatermark: typeof import('@uzum-tech/ui')['UWatermark']
+    UFlex: typeof import('@uzum-tech/ui')['UFlex']
   }
 }
 export {}

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@uzum-tech/ui",
-  "version": "1.1.1",
+  "version": "1.1.4",
   "js-types-syntax": "typescript",
   "contributions": {
     "html": {
@@ -16497,6 +16497,95 @@
               }
             ]
           }
+        },
+        {
+          "name": "UFlex",
+          "description": "Available since `2.37.0`.\n\nFrankly saying, it functions similarly to `u-space`. However use `u-flex` if possible.\n\n`u-flex` utilizes the flex layout, and note that the gap property might have compatibility issues with some older browsers.\n\nOn the other hand, `u-space` involves operations at the `VNode` level, which could lead to rendering issues in certain specific use cases.",
+          "doc-url": "https://www.naiveui.com/en-US/os-theme/components/flex",
+          "source": {
+            "symbol": "UFlex"
+          },
+          "slots": [
+            {
+              "name": "default",
+              "doc-url": "https://www.naiveui.com/en-US/os-theme/components/flex",
+              "description": "Spacing content.",
+              "description-sections": {
+                "since": "2.37.0"
+              }
+            }
+          ],
+          "attributes": [],
+          "props": [
+            {
+              "name": "align",
+              "doc-url": "https://www.naiveui.com/en-US/os-theme/components/flex",
+              "type": "string",
+              "description": "Way to align items, see [aligu-items](https://developer.mozilla.org/zh-CN/docs/Web/CSS/aligu-items).",
+              "default": "undefined",
+              "description-sections": {
+                "since": "2.37.0"
+              }
+            },
+            {
+              "name": "justify",
+              "doc-url": "https://www.naiveui.com/en-US/os-theme/components/flex",
+              "type": "string",
+              "description": "Way to justify content, see [justify-content](https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content).",
+              "default": "'start'",
+              "description-sections": {
+                "since": "2.37.0"
+              }
+            },
+            {
+              "name": "inline",
+              "doc-url": "https://www.naiveui.com/en-US/os-theme/components/flex",
+              "type": "boolean",
+              "description": "Whether it's display is `inline-flex`.",
+              "default": "false",
+              "description-sections": {
+                "since": "2.37.0"
+              }
+            },
+            {
+              "name": "vertical",
+              "doc-url": "https://www.naiveui.com/en-US/os-theme/components/flex",
+              "type": "boolean",
+              "description": "Whether to layout content vertically.",
+              "default": "false",
+              "description-sections": {
+                "since": "2.37.0"
+              }
+            },
+            {
+              "name": "reverse",
+              "doc-url": "https://www.naiveui.com/en-US/os-theme/components/flex",
+              "type": "boolean"
+            },
+            {
+              "name": "size",
+              "doc-url": "https://www.naiveui.com/en-US/os-theme/components/flex",
+              "type": "'small' | 'medium' | 'large' | number | [number, number]",
+              "description": "When it's a number, it will be used as vertical and horizontal gap, or it is `[horizontalGap, verticalGap]`.",
+              "default": "'medium'",
+              "description-sections": {
+                "since": "2.37.0"
+              }
+            },
+            {
+              "name": "wrap",
+              "doc-url": "https://www.naiveui.com/en-US/os-theme/components/flex",
+              "type": "boolean",
+              "description": "Whether to wrap content if `u-flex`'s width is exceeded.",
+              "default": "true",
+              "description-sections": {
+                "since": "2.37.0"
+              }
+            }
+          ],
+          "js": {
+            "events": []
+          }
         }
       ]
     }