@retailcrm/embed-ui-v1-components 0.9.16 → 0.9.17

package/dist/host.css

@@ -1800,6 +1800,10 @@
   --gap: 16px;
   border-radius: 8px;
 }
+.ui-v1-textbox_fluid,
+.ui-v1-textbox_fluid.ui-v1-textbox_autofit {
+  width: 100%;
+}
 .ui-v1-textbox input,
 .ui-v1-textbox textarea {
   flex-grow: 1;
@@ -3898,6 +3902,84 @@
   color: #B7EBD8;
   fill: #B7EBD8;
 }
+.ui-v1-skeleton {
+  display: inline-block;
+  width: 100%;
+  height: 24px;
+  max-width: 100%;
+  background: #DEE2E6;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+  vertical-align: middle;
+}
+.ui-v1-skeleton_rectangle {
+  display: block;
+}
+.ui-v1-skeleton_rectangle.ui-v1-skeleton_sm {
+  width: 30%;
+}
+.ui-v1-skeleton_rectangle.ui-v1-skeleton_md {
+  width: 60%;
+}
+.ui-v1-skeleton_rectangle.ui-v1-skeleton_lg {
+  width: 100%;
+}
+.ui-v1-skeleton_circle {
+  border-radius: 50%;
+}
+.ui-v1-skeleton_circle.ui-v1-skeleton_sm {
+  width: 36px;
+  min-width: 36px;
+  height: 36px;
+}
+.ui-v1-skeleton_circle.ui-v1-skeleton_md,
+.ui-v1-skeleton_circle.ui-v1-skeleton_lg {
+  width: 52px;
+  min-width: 52px;
+  height: 52px;
+}
+.ui-v1-skeleton_text {
+  display: block;
+}
+.ui-v1-skeleton_text.ui-v1-skeleton_sm {
+  height: 17px;
+}
+.ui-v1-skeleton_text.ui-v1-skeleton_md {
+  height: 21px;
+}
+.ui-v1-skeleton_text.ui-v1-skeleton_lg {
+  height: 28px;
+}
+.ui-v1-skeleton_pulse {
+  animation: ui-v1-skeleton-pulse 700ms linear infinite alternate;
+  will-change: opacity;
+}
+.ui-v1-skeleton_shimmer {
+  background-size: 400% 100%;
+}
+.ui-v1-skeleton_shimmer::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 100%);
+  animation: ui-v1-skeleton-shimmer 1.6s ease infinite;
+  will-change: transform;
+}
+@keyframes ui-v1-skeleton-pulse {
+0% {
+    opacity: 1;
+}
+100% {
+    opacity: 0.5;
+}
+}
+@keyframes ui-v1-skeleton-shimmer {
+100% {
+    transform: translateX(100%);
+}
+}
 .ui-v1-slider {
   display: flex;
   width: 100%;
@@ -4010,6 +4092,9 @@
 .ui-v1-select *::after {
   box-sizing: border-box;
 }
+.ui-v1-select_fluid {
+  width: 100%;
+}
 .ui-v1-select__trigger {
   width: 100%;
   max-width: 100%;

package/dist/host.d.ts

@@ -394,6 +394,7 @@ declare const __VLS_component_2: DefineComponent_2<ExtractPropTypes<{
                 id: string | undefined;
                 max: number | `${number}`;
                 min: number | `${number}`;
+                width: WidthValue;
                 step: number | `${number}` | "any";
                 disabled: boolean;
                 outlined: boolean;
@@ -422,6 +423,7 @@ declare const __VLS_component_2: DefineComponent_2<ExtractPropTypes<{
                 readonly size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
                 readonly max: number | `${number}`;
                 readonly min: number | `${number}`;
+                readonly width: WidthValue;
                 readonly step: number | `${number}` | "any";
                 readonly disabled: boolean;
                 readonly outlined: boolean;
@@ -453,7 +455,7 @@ declare const __VLS_component_2: DefineComponent_2<ExtractPropTypes<{
                 readonly onClear?: (() => any) | undefined;
                 readonly "onUpdate:value"?: ((value: string | number) => any) | undefined;
                 readonly "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
-            } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes">;
+            } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "width" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -524,6 +526,11 @@ declare const __VLS_component_2: DefineComponent_2<ExtractPropTypes<{
                     type: PropType<SIZE_4 | `${SIZE_4}`>;
                     default: SIZE_4;
                 };
+                width: {
+                    type: PropType<WidthValue>;
+                    validator: (value: unknown) => value is WidthValue | null | undefined;
+                    default: WIDTH;
+                };
                 placeholder: {
                     type: StringConstructor;
                     default: string;
@@ -631,6 +638,7 @@ declare const __VLS_component_2: DefineComponent_2<ExtractPropTypes<{
                 id: string | undefined;
                 max: number | `${number}`;
                 min: number | `${number}`;
+                width: WidthValue;
                 step: number | `${number}` | "any";
                 disabled: boolean;
                 outlined: boolean;
@@ -688,6 +696,7 @@ declare const __VLS_component_2: DefineComponent_2<ExtractPropTypes<{
             id: string | undefined;
             max: number | `${number}`;
             min: number | `${number}`;
+            width: WidthValue;
             step: number | `${number}` | "any";
             disabled: boolean;
             outlined: boolean;
@@ -761,6 +770,11 @@ declare const __VLS_component_2: DefineComponent_2<ExtractPropTypes<{
                 type: PropType<SIZE_4 | `${SIZE_4}`>;
                 default: SIZE_4;
             };
+            width: {
+                type: PropType<WidthValue>;
+                validator: (value: unknown) => value is WidthValue | null | undefined;
+                default: WIDTH;
+            };
             placeholder: {
                 type: StringConstructor;
                 default: string;
@@ -841,7 +855,7 @@ declare const __VLS_component_2: DefineComponent_2<ExtractPropTypes<{
             onClear?: (() => any) | undefined;
             "onUpdate:value"?: ((value: string | number) => any) | undefined;
             "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
-        }>, "insert" | "blur" | "focus" | "select" | "clear" | "getSelectionStart" | "getSelectionEnd" | "setSelectionRange" | ("type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes")> & ShallowUnwrapRef<{
+        }>, "insert" | "blur" | "focus" | "select" | "clear" | "getSelectionStart" | "getSelectionEnd" | "setSelectionRange" | ("type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "width" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes")> & ShallowUnwrapRef<{
             getSelectionStart(): number | null;
             getSelectionEnd(): number | null;
             setSelectionRange(start: number, end: number): void;
@@ -1055,6 +1069,7 @@ declare function __VLS_template_2(): {
                     id: string | undefined;
                     max: number | `${number}`;
                     min: number | `${number}`;
+                    width: WidthValue;
                     step: number | `${number}` | "any";
                     disabled: boolean;
                     outlined: boolean;
@@ -1083,6 +1098,7 @@ declare function __VLS_template_2(): {
                     readonly size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
                     readonly max: number | `${number}`;
                     readonly min: number | `${number}`;
+                    readonly width: WidthValue;
                     readonly step: number | `${number}` | "any";
                     readonly disabled: boolean;
                     readonly outlined: boolean;
@@ -1114,7 +1130,7 @@ declare function __VLS_template_2(): {
                     readonly onClear?: (() => any) | undefined;
                     readonly "onUpdate:value"?: ((value: string | number) => any) | undefined;
                     readonly "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
-                } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes">;
+                } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "width" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes">;
                 $attrs: {
                     [x: string]: unknown;
                 };
@@ -1185,6 +1201,11 @@ declare function __VLS_template_2(): {
                         type: PropType<SIZE_4 | `${SIZE_4}`>;
                         default: SIZE_4;
                     };
+                    width: {
+                        type: PropType<WidthValue>;
+                        validator: (value: unknown) => value is WidthValue | null | undefined;
+                        default: WIDTH;
+                    };
                     placeholder: {
                         type: StringConstructor;
                         default: string;
@@ -1292,6 +1313,7 @@ declare function __VLS_template_2(): {
                     id: string | undefined;
                     max: number | `${number}`;
                     min: number | `${number}`;
+                    width: WidthValue;
                     step: number | `${number}` | "any";
                     disabled: boolean;
                     outlined: boolean;
@@ -1349,6 +1371,7 @@ declare function __VLS_template_2(): {
                 id: string | undefined;
                 max: number | `${number}`;
                 min: number | `${number}`;
+                width: WidthValue;
                 step: number | `${number}` | "any";
                 disabled: boolean;
                 outlined: boolean;
@@ -1422,6 +1445,11 @@ declare function __VLS_template_2(): {
                     type: PropType<SIZE_4 | `${SIZE_4}`>;
                     default: SIZE_4;
                 };
+                width: {
+                    type: PropType<WidthValue>;
+                    validator: (value: unknown) => value is WidthValue | null | undefined;
+                    default: WIDTH;
+                };
                 placeholder: {
                     type: StringConstructor;
                     default: string;
@@ -1502,7 +1530,7 @@ declare function __VLS_template_2(): {
                 onClear?: (() => any) | undefined;
                 "onUpdate:value"?: ((value: string | number) => any) | undefined;
                 "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
-            }>, "insert" | "blur" | "focus" | "select" | "clear" | "getSelectionStart" | "getSelectionEnd" | "setSelectionRange" | ("type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes")> & ShallowUnwrapRef<{
+            }>, "insert" | "blur" | "focus" | "select" | "clear" | "getSelectionStart" | "getSelectionEnd" | "setSelectionRange" | ("type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "width" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes")> & ShallowUnwrapRef<{
                 getSelectionStart(): number | null;
                 getSelectionEnd(): number | null;
                 setSelectionRange(start: number, end: number): void;
@@ -1755,6 +1783,7 @@ export declare type Group<T, GroupData> = {
     rows: readonly T[];
 };
 export declare type GroupBy<T, GroupData> = (rows: readonly T[]) => Group<T, GroupData>[];
+export declare function guessSkeletonDimensionStyleValue(value: Numeric | null): string | null;
 export declare const I18nPlugin: Plugin_2;
 export declare const ImageWorkersKey: InjectionKey<Ref<string[]>>;
 declare enum INPUTMODE {
@@ -1906,6 +1935,20 @@ declare enum SIZE_9 {
     SM = "sm",
     XS = "xs"
 }
+export declare enum SKELETON_ANIMATION {
+    PULSE = "pulse",
+    SHIMMER = "shimmer"
+}
+export declare enum SKELETON_APPEARANCE {
+    CIRCLE = "circle",
+    RECTANGLE = "rectangle",
+    TEXT = "text"
+}
+export declare enum SKELETON_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
 declare enum STATUS {
     NONE = "",
     BUSY = "busy",
@@ -2415,6 +2458,7 @@ export declare const UiPageHeaderTitle: DefineComponent_2<ExtractPropTypes<{
             id: string | undefined;
             max: number | `${number}`;
             min: number | `${number}`;
+            width: WidthValue;
             step: number | `${number}` | "any";
             disabled: boolean;
             outlined: boolean;
@@ -2443,6 +2487,7 @@ export declare const UiPageHeaderTitle: DefineComponent_2<ExtractPropTypes<{
             readonly size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
             readonly max: number | `${number}`;
             readonly min: number | `${number}`;
+            readonly width: WidthValue;
             readonly step: number | `${number}` | "any";
             readonly disabled: boolean;
             readonly outlined: boolean;
@@ -2474,7 +2519,7 @@ export declare const UiPageHeaderTitle: DefineComponent_2<ExtractPropTypes<{
             readonly onClear?: (() => any) | undefined;
             readonly "onUpdate:value"?: ((value: string | number) => any) | undefined;
             readonly "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
-        } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes">;
+        } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "width" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -2545,6 +2590,11 @@ export declare const UiPageHeaderTitle: DefineComponent_2<ExtractPropTypes<{
                 type: PropType<SIZE_4 | `${SIZE_4}`>;
                 default: SIZE_4;
             };
+            width: {
+                type: PropType<WidthValue>;
+                validator: (value: unknown) => value is WidthValue | null | undefined;
+                default: WIDTH;
+            };
             placeholder: {
                 type: StringConstructor;
                 default: string;
@@ -2652,6 +2702,7 @@ export declare const UiPageHeaderTitle: DefineComponent_2<ExtractPropTypes<{
             id: string | undefined;
             max: number | `${number}`;
             min: number | `${number}`;
+            width: WidthValue;
             step: number | `${number}` | "any";
             disabled: boolean;
             outlined: boolean;
@@ -2709,6 +2760,7 @@ export declare const UiPageHeaderTitle: DefineComponent_2<ExtractPropTypes<{
         id: string | undefined;
         max: number | `${number}`;
         min: number | `${number}`;
+        width: WidthValue;
         step: number | `${number}` | "any";
         disabled: boolean;
         outlined: boolean;
@@ -2782,6 +2834,11 @@ export declare const UiPageHeaderTitle: DefineComponent_2<ExtractPropTypes<{
             type: PropType<SIZE_4 | `${SIZE_4}`>;
             default: SIZE_4;
         };
+        width: {
+            type: PropType<WidthValue>;
+            validator: (value: unknown) => value is WidthValue | null | undefined;
+            default: WIDTH;
+        };
         placeholder: {
             type: StringConstructor;
             default: string;
@@ -2862,7 +2919,7 @@ export declare const UiPageHeaderTitle: DefineComponent_2<ExtractPropTypes<{
         onClear?: (() => any) | undefined;
         "onUpdate:value"?: ((value: string | number) => any) | undefined;
         "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
-    }>, "insert" | "blur" | "focus" | "select" | "clear" | "getSelectionStart" | "getSelectionEnd" | "setSelectionRange" | ("type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes")> & ShallowUnwrapRef<{
+    }>, "insert" | "blur" | "focus" | "select" | "clear" | "getSelectionStart" | "getSelectionEnd" | "setSelectionRange" | ("type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "width" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes")> & ShallowUnwrapRef<{
         getSelectionStart(): number | null;
         getSelectionEnd(): number | null;
         setSelectionRange(start: number, end: number): void;
@@ -3091,6 +3148,15 @@ declare type UiSelectTriggerProperties = {
     readonly?: boolean;
     disabled?: boolean;
     textboxSize?: SIZE_8 | `${SIZE_8}`;
+    width?: WidthValue;
+};
+export declare const UiSkeleton: DefineComponent<UiSkeletonProperties>;
+export declare type UiSkeletonProperties = {
+    appearance?: SKELETON_APPEARANCE | `${SKELETON_APPEARANCE}`;
+    size?: SKELETON_SIZE | `${SKELETON_SIZE}`;
+    animation?: SKELETON_ANIMATION | `${SKELETON_ANIMATION}`;
+    width?: Numeric | null;
+    height?: Numeric | null;
 };
 export declare const UiSlider: DefineComponent<UiSliderProperties>;
 declare type UiSliderProperties = {
@@ -3385,6 +3451,7 @@ declare type UiTextboxProperties = {
     /** Максимальное количество знаков после запятой (для inputmode="decimal"). '*' — без ограничений */
     decimals?: number | `${number}` | '*';
     size?: SIZE_4 | `${SIZE_4}`;
+    width?: WidthValue;
     placeholder?: string;
     prefix?: string;
     suffix?: string;
@@ -3563,6 +3630,11 @@ export declare class VueI18n {
     get locale(): Locale | undefined;
     set locale(locale: Locale | undefined);
 }
+declare enum WIDTH {
+    FIT = "fit",
+    FLUID = "fluid"
+}
+declare type WidthValue = Numeric | WIDTH | `${WIDTH}`;
 declare const YANDEX_MAP_PLUGIN: {
     readonly LOCATOR: "locator";
 };