@uzum-tech/ui 0.1.2 → 1.0.0

package/es/pagination/src/Pagination.js

@@ -146,8 +146,7 @@ export default defineComponent({
         });
         const selectSizeRef = computed(() => {
             var _a, _b;
-            return (((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.selectSize) ||
-                smallerSize(props.size));
+            return (((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.selectSize) || props.size);
         });
         const startIndexRef = computed(() => {
             return (mergedPageRef.value - 1) * mergedPageSizeRef.value;

package/es/pagination/src/styles/index.cssr.js

@@ -65,16 +65,13 @@ export default cB('pagination', `
  `), cB('select', `
  min-width: var(--u-select-width);
  margin: var(--u-select-margin);
- `, [cB('base-selection', [cB('base-selection-label', `
- background: var(--u-item-color-pressed) !important;
- `)])]), c('&.transition-disabled', [cB('pagination-item', 'transition: none!important;')]), cB('pagination-pages', `
+ `), c('&.transition-disabled', [cB('pagination-item', 'transition: none !important;')]), cB('pagination-pages', `
  white-space: nowrap;
  display: flex;
  transition: color .3s var(--u-bezier);
  align-items: center;
  `), cB('pagination-size-picker', `
  white-space: nowrap;
- display: flex;
  transition: color .3s var(--u-bezier);
  align-items: center;
  `, [cB('label', `
@@ -91,6 +88,7 @@ export default cB('pagination', `
  `, [cB('input', `
  margin: var(--u-input-margin);
  width: var(--u-input-width);
+ text-align: center;
  `)]), cB('pagination-item', `
  position: relative;
  cursor: pointer;

package/es/pagination/styles/dark.js

@@ -1,4 +1,3 @@
-import { changeColor } from 'seemly';
 import { popselectDark } from '../../popselect/styles';
 import { selectDark } from '../../select/styles';
 import { inputDark } from '../../input/styles';
@@ -12,15 +11,6 @@ const paginationDark = {
         Input: inputDark,
         Popselect: popselectDark
     },
-    self(vars) {
-        const { primaryColor, opacity3 } = vars;
-        const borderColorActive = changeColor(primaryColor, {
-            alpha: Number(opacity3)
-        });
-        const commonSelf = self(vars);
-        commonSelf.itemBorderActive = `1px solid ${borderColorActive}`;
-        commonSelf.itemBorderDisabled = '1px solid #0000';
-        return commonSelf;
-    }
+    self
 };
 export default paginationDark;

package/es/pagination/styles/light.d.ts

@@ -1,5 +1,38 @@
 import { type ThemeCommonVars } from '../../_styles/common';
 export declare const self: (vars: ThemeCommonVars) => {
+    itemPaddingSmall: string;
+    itemMarginSmall: string;
+    itemMarginSmallRtl: string;
+    itemPaddingMedium: string;
+    itemMarginMedium: string;
+    itemMarginMediumRtl: string;
+    itemPaddingLarge: string;
+    itemMarginLarge: string;
+    itemMarginLargeRtl: string;
+    buttonIconSizeSmall: string;
+    buttonIconSizeMedium: string;
+    buttonIconSizeLarge: string;
+    inputWidthSmall: string;
+    selectWidthSmall: string;
+    inputMarginSmall: string;
+    inputMarginSmallRtl: string;
+    selectMarginSmall: string;
+    prefixMarginSmall: string;
+    suffixMarginSmall: string;
+    inputWidthMedium: string;
+    selectWidthMedium: string;
+    inputMarginMedium: string;
+    inputMarginMediumRtl: string;
+    selectMarginMedium: string;
+    prefixMarginMedium: string;
+    suffixMarginMedium: string;
+    inputWidthLarge: string;
+    selectWidthLarge: string;
+    inputMarginLarge: string;
+    inputMarginLargeRtl: string;
+    selectMarginLarge: string;
+    prefixMarginLarge: string;
+    suffixMarginLarge: string;
     buttonColor: string;
     buttonColorHover: string;
     buttonColorPressed: string;
@@ -37,6 +70,9 @@ export declare const self: (vars: ThemeCommonVars) => {
     jumperFontSizeLarge: string;
     jumperTextColor: string;
     jumperTextColorDisabled: string;
+};
+export type PaginationThemeVars = ReturnType<typeof self>;
+declare const paginationLight: import("../../_mixins").Theme<"Pagination", {
     itemPaddingSmall: string;
     itemMarginSmall: string;
     itemMarginSmallRtl: string;
@@ -70,9 +106,6 @@ export declare const self: (vars: ThemeCommonVars) => {
     selectMarginLarge: string;
     prefixMarginLarge: string;
     suffixMarginLarge: string;
-};
-export type PaginationThemeVars = ReturnType<typeof self>;
-declare const paginationLight: import("../../_mixins").Theme<"Pagination", {
     buttonColor: string;
     buttonColorHover: string;
     buttonColorPressed: string;
@@ -110,53 +143,46 @@ declare const paginationLight: import("../../_mixins").Theme<"Pagination", {
     jumperFontSizeLarge: string;
     jumperTextColor: string;
     jumperTextColorDisabled: string;
-    itemPaddingSmall: string;
-    itemMarginSmall: string;
-    itemMarginSmallRtl: string;
-    itemPaddingMedium: string;
-    itemMarginMedium: string;
-    itemMarginMediumRtl: string;
-    itemPaddingLarge: string;
-    itemMarginLarge: string;
-    itemMarginLargeRtl: string;
-    buttonIconSizeSmall: string;
-    buttonIconSizeMedium: string;
-    buttonIconSizeLarge: string;
-    inputWidthSmall: string;
-    selectWidthSmall: string;
-    inputMarginSmall: string;
-    inputMarginSmallRtl: string;
-    selectMarginSmall: string;
-    prefixMarginSmall: string;
-    suffixMarginSmall: string;
-    inputWidthMedium: string;
-    selectWidthMedium: string;
-    inputMarginMedium: string;
-    inputMarginMediumRtl: string;
-    selectMarginMedium: string;
-    prefixMarginMedium: string;
-    suffixMarginMedium: string;
-    inputWidthLarge: string;
-    selectWidthLarge: string;
-    inputMarginLarge: string;
-    inputMarginLargeRtl: string;
-    selectMarginLarge: string;
-    prefixMarginLarge: string;
-    suffixMarginLarge: string;
 }, {
     Select: import("../../_mixins").Theme<"Select", {
         menuBoxShadow: string;
     }, {
         InternalSelection: import("../../_mixins").Theme<"InternalSelection", {
+            paddingTiny: string;
+            paddingSmall: string;
+            paddingMedium: string;
+            paddingLarge: string;
+            paddingHuge: string;
+            clearSizeTiny: string;
+            clearSizeSmall: string;
+            clearSizeMedium: string;
+            clearSizeLarge: string;
+            clearSizeHuge: string;
+            arrowSizeTiny: string;
+            arrowSizeSmall: string;
+            arrowSizeMedium: string;
+            arrowSizeLarge: string;
+            arrowSizeHuge: string;
             fontSizeTiny: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
+            fontSizeHuge: string;
+            lineHeightTiny: string;
+            lineHeightSmall: string;
+            lineHeightMedium: string;
+            lineHeightLarge: string;
+            lineHeightHuge: string;
             heightTiny: string;
             heightSmall: string;
             heightMedium: string;
             heightLarge: string;
-            borderRadius: string;
+            heightHuge: string;
+            borderRadiusTiny: string;
+            borderRadiusSmall: string;
+            borderRadiusMedium: string;
+            borderRadiusLarge: string;
+            borderRadiusHuge: string;
             textColor: string;
             textColorDisabled: string;
             placeholderColor: string;
@@ -198,35 +224,68 @@ declare const paginationLight: import("../../_mixins").Theme<"Pagination", {
             clearColor: string;
             clearColorHover: string;
             clearColorPressed: string;
-            paddingSingle: string;
-            paddingMultiple: string;
-            clearSize: string;
-            arrowSize: string;
+            caretColorSecondary: string;
+            filterCounterTextColor: string;
+            filterCounterSeparatorColor: string;
+            filterCounterTextColorDisabled: string;
+            filterCounterSeparatorColorDisabled: string;
+            arrowColorSecondary: string;
+            clearColorSecondary: string;
+            colorSecondary: string;
+            textColorSecondary: string;
+            borderSecondary: string;
+            arrowColorDisabledSecondary: string;
+            clearColorDisabledSecondary: string;
+            colorDisabledSecondary: string;
+            textColorDisabledSecondary: string;
+            borderDisabledSecondary: string;
+            arrowColorHoverSecondary: string;
+            clearColorHoverSecondary: string;
+            colorHoverSecondary: string;
+            textColorHoverSecondary: string;
+            borderHoverSecondary: string;
+            arrowColorFocusSecondary: string;
+            clearColorFocusSecondary: string;
+            colorFocusSecondary: string;
+            textColorFocusSecondary: string;
+            borderFocusSecondary: string;
+            arrowColorActiveSecondary: string;
+            clearColorActiveSecondary: string;
+            colorActiveSecondary: string;
+            textColorActiveSecondary: string;
+            borderActiveSecondary: 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;
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
             }, any>;
         }>;
         InternalSelectMenu: import("../../_mixins").Theme<"InternalSelectMenu", {
+            height: string;
+            paddingSmall: string;
+            paddingMedium: string;
+            paddingLarge: string;
+            optionPaddingSmall: string;
+            optionPaddingMedium: string;
+            optionPaddingLarge: string;
+            loadingSize: string;
             optionFontSizeSmall: string;
             optionFontSizeMedium: string;
             optionFontSizeLarge: string;
-            optionFontSizeHuge: string;
             optionHeightSmall: string;
             optionHeightMedium: string;
             optionHeightLarge: string;
-            optionHeightHuge: string;
+            optionBorderRadius: string;
             borderRadius: string;
             color: string;
             groupHeaderTextColor: string;
@@ -243,22 +302,16 @@ declare const paginationLight: import("../../_mixins").Theme<"Pagination", {
             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", {
+                iconSizeSmall: string;
+                iconSizeMedium: string;
+                iconSizeLarge: string;
+                iconSizeHuge: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -266,29 +319,32 @@ declare const paginationLight: import("../../_mixins").Theme<"Pagination", {
                 textColor: string;
                 iconColor: string;
                 extraTextColor: string;
-                iconSizeSmall: string;
-                iconSizeMedium: string;
-                iconSizeLarge: string;
-                iconSizeHuge: string;
             }, any>;
         }>;
     }>;
     Input: import("../../_mixins").Theme<"Input", {
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+        clearSize: string;
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -328,38 +384,41 @@ declare const paginationLight: import("../../_mixins").Theme<"Pagination", {
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
-        paddingTiny: string;
-        paddingSmall: string;
-        paddingMedium: string;
-        paddingLarge: string;
-        clearSize: string;
+        selectionColor: string;
     }, any>;
     Popselect: 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;
+            fontSize: string;
+            borderRadius: string;
+            color: string;
+            dividerColor: string;
+            textColor: string;
+            boxShadow: string;
         }, any>;
         InternalSelectMenu: import("../../_mixins").Theme<"InternalSelectMenu", {
+            height: string;
+            paddingSmall: string;
+            paddingMedium: string;
+            paddingLarge: string;
+            optionPaddingSmall: string;
+            optionPaddingMedium: string;
+            optionPaddingLarge: string;
+            loadingSize: string;
             optionFontSizeSmall: string;
             optionFontSizeMedium: string;
             optionFontSizeLarge: string;
-            optionFontSizeHuge: string;
             optionHeightSmall: string;
             optionHeightMedium: string;
             optionHeightLarge: string;
-            optionHeightHuge: string;
+            optionBorderRadius: string;
             borderRadius: string;
             color: string;
             groupHeaderTextColor: string;
@@ -376,22 +435,16 @@ declare const paginationLight: import("../../_mixins").Theme<"Pagination", {
             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", {
+                iconSizeSmall: string;
+                iconSizeMedium: string;
+                iconSizeLarge: string;
+                iconSizeHuge: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -399,10 +452,6 @@ declare const paginationLight: import("../../_mixins").Theme<"Pagination", {
                 textColor: string;
                 iconColor: string;
                 extraTextColor: string;
-                iconSizeSmall: string;
-                iconSizeMedium: string;
-                iconSizeLarge: string;
-                iconSizeHuge: string;
             }, any>;
         }>;
     }>;

package/es/pagination/styles/light.js

@@ -2,15 +2,81 @@ import { popselectLight } from '../../popselect/styles';
 import { selectLight } from '../../select/styles';
 import { inputLight } from '../../input/styles';
 import { commonLight } from '../../_styles/common';
-import commonVariables from './_common';
 import { createTheme } from '../../_mixins';
 export const self = (vars) => {
-    const { textColor2, primaryColor, primaryColorHover, primaryColorPressed, textColorDisabled, borderColor, borderRadius, 
-    // item font size
-    fontSizeSmall, fontSizeLarge, 
-    // item size
-    heightTiny, heightSmall, heightMedium } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { buttonColor: '#0000', buttonColorHover: '#0000', buttonColorPressed: '#0000', buttonBorder: `0px solid ${borderColor}`, buttonBorderHover: `0px solid ${borderColor}`, buttonBorderPressed: `0px solid ${borderColor}`, buttonIconColor: textColor2, buttonIconColorHover: textColor2, buttonIconColorPressed: textColor2, itemTextColor: textColor2, itemTextColorHover: primaryColorHover, itemTextColorPressed: primaryColorPressed, itemTextColorActive: primaryColor, itemTextColorDisabled: textColorDisabled, itemColor: '#0000', itemColorHover: '#F3F4F6', itemColorPressed: '#F3F4F6', itemColorActive: '#0000', itemColorActiveHover: '#0000', itemColorDisabled: '#ffffff00', itemBorder: '0px solid #0000', itemBorderHover: '0px solid #0000', itemBorderPressed: '0px solid #0000', itemBorderActive: `0px solid ${primaryColor}`, itemBorderDisabled: `0px solid ${borderColor}`, itemBorderRadius: borderRadius, itemSizeSmall: heightTiny, itemSizeMedium: heightSmall, itemSizeLarge: heightMedium, itemFontSizeSmall: fontSizeSmall, itemFontSizeMedium: fontSizeLarge, itemFontSizeLarge: fontSizeLarge, jumperFontSizeSmall: fontSizeSmall, jumperFontSizeMedium: fontSizeLarge, jumperFontSizeLarge: fontSizeLarge, jumperTextColor: textColor2, jumperTextColorDisabled: textColorDisabled });
+    const { transparencySecondary, elementsPrimary, brandPrimary500, textSecondary, borderRadiusLarge, fontBodyMedium, fontBodyLarge, textPrimary, textTertiary } = vars;
+    return {
+        itemPaddingSmall: '0 4px',
+        itemMarginSmall: '0 0 0 2px',
+        itemMarginSmallRtl: '0 2px 0 0',
+        itemPaddingMedium: '0 4px',
+        itemMarginMedium: '0 0 0 2px',
+        itemMarginMediumRtl: '0 2px 0 0',
+        itemPaddingLarge: '0 4px',
+        itemMarginLarge: '0 0 0 2px',
+        itemMarginLargeRtl: '0 2px 0 0',
+        buttonIconSizeSmall: '14px',
+        buttonIconSizeMedium: '16px',
+        buttonIconSizeLarge: '18px',
+        inputWidthSmall: '72px',
+        selectWidthSmall: '60px',
+        inputMarginSmall: '0 0 0 8px',
+        inputMarginSmallRtl: '0 8px 0 0',
+        selectMarginSmall: '0',
+        prefixMarginSmall: '0 8px 0 0',
+        suffixMarginSmall: '0 0 0 8px',
+        inputWidthMedium: '72px',
+        selectWidthMedium: '60px',
+        inputMarginMedium: '0 0 0 8px',
+        inputMarginMediumRtl: '0 8px 0 0',
+        selectMarginMedium: '0',
+        prefixMarginMedium: '0 8px 0 0',
+        suffixMarginMedium: '0 0 0 8px',
+        inputWidthLarge: '72px',
+        selectWidthLarge: '60px',
+        inputMarginLarge: '0 0 0 8px',
+        inputMarginLargeRtl: '0 8px 0 0',
+        selectMarginLarge: '0',
+        prefixMarginLarge: '0 8px 0 0',
+        suffixMarginLarge: '0 0 0 8px',
+        buttonColor: '#0000',
+        buttonColorHover: transparencySecondary,
+        buttonColorPressed: transparencySecondary,
+        buttonBorder: '0px',
+        buttonBorderHover: '0px',
+        buttonBorderPressed: '0px',
+        buttonIconColor: elementsPrimary,
+        buttonIconColorHover: elementsPrimary,
+        buttonIconColorPressed: elementsPrimary,
+        itemTextColor: textPrimary,
+        itemTextColorHover: textPrimary,
+        itemTextColorPressed: brandPrimary500,
+        itemTextColorActive: brandPrimary500,
+        itemTextColorDisabled: textSecondary,
+        itemColor: '#0000',
+        itemColorHover: transparencySecondary,
+        itemColorPressed: transparencySecondary,
+        itemColorActive: '#0000',
+        itemColorActiveHover: transparencySecondary,
+        itemColorDisabled: '#0000',
+        itemBorder: '0px',
+        itemBorderHover: '0px',
+        itemBorderPressed: '0px',
+        itemBorderActive: '0px',
+        itemBorderDisabled: '0px',
+        itemBorderRadius: borderRadiusLarge,
+        itemSizeSmall: '24px',
+        itemSizeMedium: '32px',
+        itemSizeLarge: '40px',
+        itemFontSizeSmall: fontBodyMedium,
+        itemFontSizeMedium: fontBodyMedium,
+        itemFontSizeLarge: fontBodyLarge,
+        jumperFontSizeSmall: fontBodyMedium,
+        jumperFontSizeMedium: fontBodyMedium,
+        jumperFontSizeLarge: fontBodyLarge,
+        jumperTextColor: textPrimary,
+        jumperTextColorDisabled: textTertiary
+    };
 };
 const paginationLight = createTheme({
     name: 'Pagination',