@uzum-tech/ui 1.9.0 → 1.10.0

package/lib/tag/src/TagGroup.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tagGroupProps = void 0;
+const vue_1 = require("vue");
+const vooks_1 = require("vooks");
+const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
+const index_cssr_1 = require("./styles/index.cssr");
+const styles_1 = require("../styles");
+function mapSlot(defaultSlot, value, size, disabled, doUpdateValue) {
+    var _a;
+    const children = [];
+    for (let i = 0; i < defaultSlot.length; i++) {
+        const wrappedInstance = defaultSlot[i];
+        const name = (_a = wrappedInstance.type) === null || _a === void 0 ? void 0 : _a.name;
+        if (name !== 'Tag') {
+            children.push(wrappedInstance);
+            continue;
+        }
+        const instanceProps = wrappedInstance.props;
+        const instanceValue = instanceProps === null || instanceProps === void 0 ? void 0 : instanceProps.value;
+        if (instanceValue !== undefined) {
+            const isChecked = value === instanceValue;
+            const mergedDisabled = disabled || (instanceProps === null || instanceProps === void 0 ? void 0 : instanceProps.disabled) !== undefined || false;
+            const mergedSize = (instanceProps === null || instanceProps === void 0 ? void 0 : instanceProps.size) || size;
+            children.push((0, vue_1.cloneVNode)(wrappedInstance, {
+                size: mergedSize,
+                disabled: mergedDisabled,
+                checkable: true,
+                checked: isChecked,
+                onUpdateChecked: () => {
+                    doUpdateValue(instanceValue);
+                }
+            }));
+        }
+        else {
+            children.push(wrappedInstance);
+        }
+    }
+    return children;
+}
+exports.tagGroupProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { value: {
+        type: [String, Number, Boolean],
+        default: undefined
+    }, defaultValue: {
+        type: [String, Number, Boolean],
+        default: null
+    }, size: {
+        type: String,
+        default: 'medium'
+    }, gap: [String, Number], disabled: {
+        type: Boolean,
+        default: undefined
+    }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'TagGroup',
+    props: exports.tagGroupProps,
+    setup(props) {
+        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('Tag', '-tag-group', index_cssr_1.tagGroupStyle, styles_1.tagLight, props, mergedClsPrefixRef);
+        const mergedSizeRef = (0, vue_1.computed)(() => props.size);
+        const mergedDisabledRef = (0, vue_1.computed)(() => { var _a; return (_a = props.disabled) !== null && _a !== void 0 ? _a : false; });
+        const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
+        const controlledValueRef = (0, vue_1.toRef)(props, 'value');
+        const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
+        function doUpdateValue(value) {
+            const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props;
+            if (onUpdateValue) {
+                (0, _utils_1.call)(onUpdateValue, value);
+            }
+            if (_onUpdateValue) {
+                (0, _utils_1.call)(_onUpdateValue, value);
+            }
+            uncontrolledValueRef.value = value;
+        }
+        const rtlEnabledRef = (0, _mixins_1.useRtl)('Tag', mergedRtlRef, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { gap } = props;
+            const { common: { cubicBezierEaseInOut }, self: { [(0, _utils_1.createKey)('gap', mergedSizeRef.value)]: themeGap } } = themeRef.value;
+            const mergedGap = (0, _utils_1.resolveSize)(gap, themeGap);
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-gap': mergedGap
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('tag-group', (0, vue_1.computed)(() => mergedSizeRef.value[0]), cssVarsRef, props)
+            : undefined;
+        return {
+            rtlEnabled: rtlEnabledRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            mergedValue: mergedValueRef,
+            mergedSize: mergedSizeRef,
+            mergedDisabled: mergedDisabledRef,
+            doUpdateValue,
+            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() {
+        var _a;
+        const { mergedClsPrefix, mergedValue, mergedSize, mergedDisabled } = this;
+        const children = mapSlot((0, _utils_1.flatten)((0, _utils_1.getSlot)(this)), mergedValue, mergedSize, mergedDisabled, this.doUpdateValue);
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        return ((0, vue_1.h)("div", { class: [
+                `${mergedClsPrefix}-tag-group`,
+                this.rtlEnabled && `${mergedClsPrefix}-tag-group--rtl`,
+                this.themeClass
+            ], style: this.cssVars }, children));
+    }
+});

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

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

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.tagGroupStyle = void 0;
 const cssr_1 = require("../../../_utils/cssr");
 // vars:
 // --u-bezier
@@ -120,4 +121,11 @@ exports.default = (0, cssr_1.cB)('tag', `
  background-color: var(--u-color-checkable-outline);
  `, [(0, cssr_1.cE)('border', `
  border: var(--u-border);
- `)])]);
+ `)])]);
+// vars:
+// --u-gap
+exports.tagGroupStyle = (0, cssr_1.cB)('tag-group', `
+ display: inline-flex;
+ flex-wrap: wrap;
+ gap: var(--u-gap);
+`);

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

@@ -1,6 +1,9 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
+    gapSmall: string;
+    gapMedium: string;
+    gapLarge: string;
     closeIconSizeTiny: string;
     closeIconSizeSmall: string;
     closeIconSizeMedium: string;

package/lib/tag/styles/light.js

@@ -7,6 +7,11 @@ const self = (vars) => {
     const { opacityDisabled, borderRadiusSmall: borderRadius, fontWeightStrong, fontWeight, elementsTertiary, fontBodySmall, fontBodyMedium, textQuaternary, elementsPrimary, elementsSecondary, elementsSenary, elementsQuinary, textPrimary, elementsQuaternary, transparencySecondary, staticDarkGrey, staticWhite, elementsDarkQuinary, staticBlack } = vars;
     const borderTagWidth = 2;
     return {
+        // tag-group
+        gapSmall: '4px',
+        gapMedium: '8px',
+        gapLarge: '12px',
+        // tag
         closeIconSizeTiny: '16px',
         closeIconSizeSmall: '16px',
         closeIconSizeMedium: '16px',

package/lib/themes/dark.js

@@ -91,6 +91,8 @@ const styles_86 = require("../flex/styles");
 const styles_87 = require("../action-card/styles");
 const styles_88 = require("../styles");
 const styles_89 = require("../chat/styles");
+const styles_90 = require("../modal-fullscreen/styles");
+const styles_91 = require("../crop/styles");
 exports.darkTheme = {
     name: 'dark',
     common: common_1.commonDark,
@@ -182,5 +184,7 @@ exports.darkTheme = {
     Watermark: styles_83.watermarkDark,
     ToggleButton: styles_84.toggleButtonDark,
     Flex: styles_86.flexDark,
-    Chat: styles_89.chatDark
+    Chat: styles_89.chatDark,
+    ModalFullscreen: styles_90.modalFullscreenDark,
+    Crop: styles_91.cropDark
 };

package/lib/themes/light.js

@@ -93,6 +93,8 @@ const styles_86 = require("../flex/styles");
 const styles_87 = require("../action-card/styles");
 const styles_88 = require("../input-otp/styles");
 const styles_89 = require("../chat/styles");
+const styles_90 = require("../modal-fullscreen/styles");
+const styles_91 = require("../crop/styles");
 exports.lightTheme = {
     name: 'light',
     common: common_1.commonLight,
@@ -184,5 +186,7 @@ exports.lightTheme = {
     Watermark: styles_83.watermarkLight,
     ToggleButton: styles_84.toggleButtonLight,
     Flex: styles_86.flexLight,
-    Chat: styles_89.chatLight
+    Chat: styles_89.chatLight,
+    ModalFullscreen: styles_90.modalFullscreenLight,
+    Crop: styles_91.cropLight
 };

package/lib/time-picker/src/TimePicker.d.ts

@@ -3538,8 +3538,8 @@ declare const _default: import("vue").DefineComponent<{
     to: string | boolean | HTMLElement;
     show: boolean | undefined;
     placement: FollowerPlacement;
-    clearable: boolean;
     defaultValue: number | null;
+    clearable: boolean;
     stateful: boolean;
     use12Hours: boolean;
     format: string;

package/lib/transfer/src/Transfer.d.ts

@@ -4252,8 +4252,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly filter: Filter;
     readonly disabled: boolean | undefined;
     readonly virtualScroll: boolean;
-    readonly filterable: boolean;
     readonly defaultValue: OptionValue[] | null;
+    readonly filterable: boolean;
     readonly options: Option[];
     readonly showSelected: boolean;
     readonly sourceFilterable: boolean;

package/lib/tree-select/src/TreeSelect.d.ts

@@ -3077,9 +3077,9 @@ declare const _default: import("vue").DefineComponent<{
     readonly checkable: boolean;
     readonly placement: FollowerPlacement;
     readonly defaultShow: boolean;
+    readonly defaultValue: string | number | (string | number)[] | null;
     readonly filterable: boolean;
     readonly clearable: boolean;
-    readonly defaultValue: string | number | (string | number)[] | null;
     readonly options: TreeSelectOption[];
     readonly clearFilterAfterSelect: boolean;
     readonly consistentMenuWidth: boolean;

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.9.0";
+declare const _default: "1.10.0";
 export default _default;

package/lib/version.js

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

package/lib/virtual-list/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NVirtualList, virtualListProps } from './src/VirtualList';
+export { default as UVirtualList, virtualListProps } from './src/VirtualList';
 export type { VirtualListInst, VirtualListProps } from './src/VirtualList';

package/lib/virtual-list/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.virtualListProps = exports.NVirtualList = void 0;
+exports.virtualListProps = exports.UVirtualList = void 0;
 var VirtualList_1 = require("./src/VirtualList");
-Object.defineProperty(exports, "NVirtualList", { enumerable: true, get: function () { return __importDefault(VirtualList_1).default; } });
+Object.defineProperty(exports, "UVirtualList", { enumerable: true, get: function () { return __importDefault(VirtualList_1).default; } });
 Object.defineProperty(exports, "virtualListProps", { enumerable: true, get: function () { return VirtualList_1.virtualListProps; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uzum-tech/ui",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -159,8 +159,8 @@
     "vite": "5.0.4",
     "vite-plugin-node-polyfills": "0.18.0",
     "vue": "3.3.4",
-    "vue-router": "4.2.4",
-    "vue-tsc": "2.2.0"
+    "vue-router": "4.6.0",
+    "vue-tsc": "3.1.1"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
@@ -173,6 +173,7 @@
     "@types/lodash-es": "4.17.9",
     "@vueuse/core": "13.3.0",
     "async-validator": "4.2.5",
+    "cropperjs": "1.6.2",
     "css-render": "0.15.14",
     "csstype": "3.1.3",
     "date-fns": "2.28.0",

package/volar.d.ts

@@ -150,6 +150,10 @@ declare module 'vue' {
     UChatListItems: typeof import('@uzum-tech/ui')['UChatListItems']
     UChatMessages: typeof import('@uzum-tech/ui')['UChatMessages']
     UInfiniteScroll: typeof import('@uzum-tech/ui')['UInfiniteScroll']
+    UVirtualList: typeof import('@uzum-tech/ui')['UVirtualList']
+    UModalFullscreen: typeof import('@uzum-tech/ui')['UModalFullscreen']
+    UCrop: typeof import('@uzum-tech/ui')['UCrop']
+    UTagGroup: typeof import('@uzum-tech/ui')['UTagGroup']
   }
 }
 export {}