@uzum-tech/ui 0.1.2 → 1.0.0

package/es/color-picker/src/ColorPicker.d.ts

@@ -53,6 +53,7 @@ export declare const colorPickerProps: {
         color: string;
         textColor: string;
         borderRadius: string;
+        checkboardBorderRadius: string;
         border: string;
         heightSmall: string;
         heightMedium: string;
@@ -60,24 +61,35 @@ export declare const colorPickerProps: {
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        lineHeightSmall: string;
+        lineHeightMedium: string;
+        lineHeightLarge: string;
+        fontWeight: string;
         dividerColor: string;
     }, {
         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;
@@ -117,11 +129,7 @@ export declare const colorPickerProps: {
             iconColorHover: string;
             iconColorPressed: string;
             suffixTextColor: string;
-            paddingTiny: string;
-            paddingSmall: string;
-            paddingMedium: string;
-            paddingLarge: string;
-            clearSize: string;
+            selectionColor: string;
         }, any>;
         Button: import("../../_mixins").Theme<"Button", {
             heightTiny: string;
@@ -149,7 +157,7 @@ export declare const colorPickerProps: {
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
             colorTertiaryDisalbed: string;
-            waveColorTerniary: string;
+            waveColorTertiary: string;
             textColorTextTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
@@ -341,6 +349,7 @@ export declare const colorPickerProps: {
         color: string;
         textColor: string;
         borderRadius: string;
+        checkboardBorderRadius: string;
         border: string;
         heightSmall: string;
         heightMedium: string;
@@ -348,24 +357,35 @@ export declare const colorPickerProps: {
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        lineHeightSmall: string;
+        lineHeightMedium: string;
+        lineHeightLarge: string;
+        fontWeight: string;
         dividerColor: string;
     }, {
         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;
@@ -405,11 +425,7 @@ export declare const colorPickerProps: {
             iconColorHover: string;
             iconColorPressed: string;
             suffixTextColor: string;
-            paddingTiny: string;
-            paddingSmall: string;
-            paddingMedium: string;
-            paddingLarge: string;
-            clearSize: string;
+            selectionColor: string;
         }, any>;
         Button: import("../../_mixins").Theme<"Button", {
             heightTiny: string;
@@ -437,7 +453,7 @@ export declare const colorPickerProps: {
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
             colorTertiaryDisalbed: string;
-            waveColorTerniary: string;
+            waveColorTertiary: string;
             textColorTextTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
@@ -629,6 +645,7 @@ export declare const colorPickerProps: {
         color: string;
         textColor: string;
         borderRadius: string;
+        checkboardBorderRadius: string;
         border: string;
         heightSmall: string;
         heightMedium: string;
@@ -636,24 +653,35 @@ export declare const colorPickerProps: {
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        lineHeightSmall: string;
+        lineHeightMedium: string;
+        lineHeightLarge: string;
+        fontWeight: string;
         dividerColor: string;
     }, {
         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;
@@ -693,11 +721,7 @@ export declare const colorPickerProps: {
             iconColorHover: string;
             iconColorPressed: string;
             suffixTextColor: string;
-            paddingTiny: string;
-            paddingSmall: string;
-            paddingMedium: string;
-            paddingLarge: string;
-            clearSize: string;
+            selectionColor: string;
         }, any>;
         Button: import("../../_mixins").Theme<"Button", {
             heightTiny: string;
@@ -725,7 +749,7 @@ export declare const colorPickerProps: {
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
             colorTertiaryDisalbed: string;
-            waveColorTerniary: string;
+            waveColorTertiary: string;
             textColorTextTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
@@ -962,6 +986,7 @@ declare const _default: import("vue").DefineComponent<{
         color: string;
         textColor: string;
         borderRadius: string;
+        checkboardBorderRadius: string;
         border: string;
         heightSmall: string;
         heightMedium: string;
@@ -969,24 +994,35 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        lineHeightSmall: string;
+        lineHeightMedium: string;
+        lineHeightLarge: string;
+        fontWeight: string;
         dividerColor: string;
     }, {
         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;
@@ -1026,11 +1062,7 @@ declare const _default: import("vue").DefineComponent<{
             iconColorHover: string;
             iconColorPressed: string;
             suffixTextColor: string;
-            paddingTiny: string;
-            paddingSmall: string;
-            paddingMedium: string;
-            paddingLarge: string;
-            clearSize: string;
+            selectionColor: string;
         }, any>;
         Button: import("../../_mixins").Theme<"Button", {
             heightTiny: string;
@@ -1058,7 +1090,7 @@ declare const _default: import("vue").DefineComponent<{
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
             colorTertiaryDisalbed: string;
-            waveColorTerniary: string;
+            waveColorTertiary: string;
             textColorTextTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
@@ -1250,6 +1282,7 @@ declare const _default: import("vue").DefineComponent<{
         color: string;
         textColor: string;
         borderRadius: string;
+        checkboardBorderRadius: string;
         border: string;
         heightSmall: string;
         heightMedium: string;
@@ -1257,24 +1290,35 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        lineHeightSmall: string;
+        lineHeightMedium: string;
+        lineHeightLarge: string;
+        fontWeight: string;
         dividerColor: string;
     }, {
         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;
@@ -1314,11 +1358,7 @@ declare const _default: import("vue").DefineComponent<{
             iconColorHover: string;
             iconColorPressed: string;
             suffixTextColor: string;
-            paddingTiny: string;
-            paddingSmall: string;
-            paddingMedium: string;
-            paddingLarge: string;
-            clearSize: string;
+            selectionColor: string;
         }, any>;
         Button: import("../../_mixins").Theme<"Button", {
             heightTiny: string;
@@ -1346,7 +1386,7 @@ declare const _default: import("vue").DefineComponent<{
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
             colorTertiaryDisalbed: string;
-            waveColorTerniary: string;
+            waveColorTertiary: string;
             textColorTextTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
@@ -1538,6 +1578,7 @@ declare const _default: import("vue").DefineComponent<{
         color: string;
         textColor: string;
         borderRadius: string;
+        checkboardBorderRadius: string;
         border: string;
         heightSmall: string;
         heightMedium: string;
@@ -1545,24 +1586,35 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        lineHeightSmall: string;
+        lineHeightMedium: string;
+        lineHeightLarge: string;
+        fontWeight: string;
         dividerColor: string;
     }, {
         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;
@@ -1602,11 +1654,7 @@ declare const _default: import("vue").DefineComponent<{
             iconColorHover: string;
             iconColorPressed: string;
             suffixTextColor: string;
-            paddingTiny: string;
-            paddingSmall: string;
-            paddingMedium: string;
-            paddingLarge: string;
-            clearSize: string;
+            selectionColor: string;
         }, any>;
         Button: import("../../_mixins").Theme<"Button", {
             heightTiny: string;
@@ -1634,7 +1682,7 @@ declare const _default: import("vue").DefineComponent<{
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
             colorTertiaryDisalbed: string;
-            waveColorTerniary: string;
+            waveColorTertiary: string;
             textColorTextTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
@@ -1840,9 +1888,12 @@ declare const _default: import("vue").DefineComponent<{
         '--u-color': string;
         '--u-panel-font-size': string;
         '--u-font-size': string;
+        '--u-line-height': string;
+        '--u-font-weight': string;
         '--u-box-shadow': string;
         '--u-border': string;
         '--u-border-radius': string;
+        '--u-checkboard-border-radius': string;
         '--u-height': string;
         '--u-divider-color': string;
     }> | undefined;
@@ -1897,6 +1948,7 @@ declare const _default: import("vue").DefineComponent<{
         color: string;
         textColor: string;
         borderRadius: string;
+        checkboardBorderRadius: string;
         border: string;
         heightSmall: string;
         heightMedium: string;
@@ -1904,24 +1956,35 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        lineHeightSmall: string;
+        lineHeightMedium: string;
+        lineHeightLarge: string;
+        fontWeight: string;
         dividerColor: string;
     }, {
         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;
@@ -1961,11 +2024,7 @@ declare const _default: import("vue").DefineComponent<{
             iconColorHover: string;
             iconColorPressed: string;
             suffixTextColor: string;
-            paddingTiny: string;
-            paddingSmall: string;
-            paddingMedium: string;
-            paddingLarge: string;
-            clearSize: string;
+            selectionColor: string;
         }, any>;
         Button: import("../../_mixins").Theme<"Button", {
             heightTiny: string;
@@ -1993,7 +2052,7 @@ declare const _default: import("vue").DefineComponent<{
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
             colorTertiaryDisalbed: string;
-            waveColorTerniary: string;
+            waveColorTertiary: string;
             textColorTextTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
@@ -2185,6 +2244,7 @@ declare const _default: import("vue").DefineComponent<{
         color: string;
         textColor: string;
         borderRadius: string;
+        checkboardBorderRadius: string;
         border: string;
         heightSmall: string;
         heightMedium: string;
@@ -2192,24 +2252,35 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        lineHeightSmall: string;
+        lineHeightMedium: string;
+        lineHeightLarge: string;
+        fontWeight: string;
         dividerColor: string;
     }, {
         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;
@@ -2249,11 +2320,7 @@ declare const _default: import("vue").DefineComponent<{
             iconColorHover: string;
             iconColorPressed: string;
             suffixTextColor: string;
-            paddingTiny: string;
-            paddingSmall: string;
-            paddingMedium: string;
-            paddingLarge: string;
-            clearSize: string;
+            selectionColor: string;
         }, any>;
         Button: import("../../_mixins").Theme<"Button", {
             heightTiny: string;
@@ -2281,7 +2348,7 @@ declare const _default: import("vue").DefineComponent<{
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
             colorTertiaryDisalbed: string;
-            waveColorTerniary: string;
+            waveColorTertiary: string;
             textColorTextTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
@@ -2473,6 +2540,7 @@ declare const _default: import("vue").DefineComponent<{
         color: string;
         textColor: string;
         borderRadius: string;
+        checkboardBorderRadius: string;
         border: string;
         heightSmall: string;
         heightMedium: string;
@@ -2480,24 +2548,35 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        lineHeightSmall: string;
+        lineHeightMedium: string;
+        lineHeightLarge: string;
+        fontWeight: string;
         dividerColor: string;
     }, {
         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;
@@ -2537,11 +2616,7 @@ declare const _default: import("vue").DefineComponent<{
             iconColorHover: string;
             iconColorPressed: string;
             suffixTextColor: string;
-            paddingTiny: string;
-            paddingSmall: string;
-            paddingMedium: string;
-            paddingLarge: string;
-            clearSize: string;
+            selectionColor: string;
         }, any>;
         Button: import("../../_mixins").Theme<"Button", {
             heightTiny: string;
@@ -2569,7 +2644,7 @@ declare const _default: import("vue").DefineComponent<{
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
             colorTertiaryDisalbed: string;
-            waveColorTerniary: string;
+            waveColorTertiary: string;
             textColorTextTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;

package/es/color-picker/src/ColorPicker.js

@@ -345,16 +345,19 @@ export default defineComponent({
         });
         const cssVarsRef = computed(() => {
             const { value: mergedSize } = mergedSizeRef;
-            const { common: { cubicBezierEaseInOut }, self: { textColor, color, panelFontSize, boxShadow, border, borderRadius, dividerColor, [createKey('height', mergedSize)]: height, [createKey('fontSize', mergedSize)]: fontSize } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { textColor, color, panelFontSize, boxShadow, border, borderRadius, checkboardBorderRadius, dividerColor, fontWeight, [createKey('height', mergedSize)]: height, [createKey('fontSize', mergedSize)]: fontSize, [createKey('lineHeight', mergedSize)]: lineHeight } } = themeRef.value;
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-text-color': textColor,
                 '--u-color': color,
                 '--u-panel-font-size': panelFontSize,
                 '--u-font-size': fontSize,
+                '--u-line-height': lineHeight,
+                '--u-font-weight': fontWeight,
                 '--u-box-shadow': boxShadow,
                 '--u-border': border,
                 '--u-border-radius': borderRadius,
+                '--u-checkboard-border-radius': checkboardBorderRadius,
                 '--u-height': height,
                 '--u-divider-color': dividerColor
             };

package/es/color-picker/src/ColorPickerTrigger.js

@@ -31,12 +31,7 @@ export default defineComponent({
                 ], onClick: disabled ? undefined : onClick },
                 h("div", { class: `${clsPrefix}-color-picker-trigger__fill` },
                     h("div", { class: `${clsPrefix}-color-picker-checkboard` }),
-                    h("div", { style: {
-                            position: 'absolute',
-                            left: 0,
-                            right: 0,
-                            top: 0,
-                            bottom: 0,
+                    h("div", { class: `${clsPrefix}-color-picker-color`, style: {
                             backgroundColor: hsla ? toHslaString(hsla) : ''
                         } }),
                     value && hsla ? (h("div", { class: `${clsPrefix}-color-picker-trigger__value`, style: {

package/es/color-picker/src/styles/index.cssr.js

@@ -10,11 +10,15 @@ import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-sc
 // --u-height
 // --u-box-shadow
 // --u-divider-color
+// --u-line-height
+// --u-font-weight
 export default c([cB('color-picker', `
  display: inline-block;
  box-sizing: border-box;
  height: var(--u-height);
  font-size: var(--u-font-size);
+ line-height: var(--u-line-height);
+ font-weight: var(--u-font-weight);
  width: 100%;
  position: relative;
  `), cB('color-picker-panel', `
@@ -38,6 +42,7 @@ export default c([cB('color-picker', `
  right: 0;
  top: 0;
  bottom: 0;
+ overflow: hidden;
  `, [c('&::after', `
  background-image: linear-gradient(45deg, #DDD 25%, #0000 25%), linear-gradient(-45deg, #DDD 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #DDD 75%), linear-gradient(-45deg, #0000 75%, #DDD 75%);
  background-size: 12px 12px;
@@ -49,7 +54,14 @@ export default c([cB('color-picker', `
  right: 0;
  top: 0;
  bottom: 0;
- `)]), cB('color-picker-slider', `
+ `)]), cB('color-picker-color', `
+ border-radius: var(--u-checkboard-border-radius);
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ `), cB('color-picker-slider', `
  margin-bottom: 8px;
  position: relative;
  box-sizing: border-box;