@webitel/ui-sdk 25.8.54 → 25.8.56

package/src/plugins/primevue/primevue.plugin.js

@@ -1,10 +1,14 @@
 import PAutoComplete from 'primevue/autocomplete';
+import PBreadcrumb from 'primevue/breadcrumb';
 import PButton from 'primevue/button';
 import PCheckbox from 'primevue/checkbox';
 import PChip from 'primevue/chip';
 import PrimeVue from 'primevue/config';
+import PDivider from 'primevue/divider';
 import PInputText from 'primevue/inputtext';
 import PPopover from 'primevue/popover';
+import PRadio from 'primevue/radiobutton';
+import PSlider from 'primevue/slider'
 import Tooltip from 'primevue/tooltip';
 
 import WebitelTheme from './theme/webitel-theme.js';
@@ -30,7 +34,11 @@ const initPrimevue = (app) => {
   app.component('PInputText', changeComponentCompatMode(PInputText));
   app.component('PPopover', changeComponentCompatMode(PPopover));
   app.component('PCheckbox', changeComponentCompatMode(PCheckbox));
+  app.component('PRadio', changeComponentCompatMode(PRadio));
   app.component('PChip', changeComponentCompatMode(PChip));
+  app.component('PBreadcrumb', changeComponentCompatMode(PBreadcrumb));
+  app.component('PSlider', changeComponentCompatMode(PSlider));
+  app.component('PDivider', changeComponentCompatMode(PDivider));
 
   app.directive('tooltip', Tooltip);
 };

package/src/plugins/primevue/primevue.scss

@@ -1,2 +1,3 @@
 @use 'theme/components/tooltip/tooltip.scss' as *;
 @use 'theme/components/chip/chip.scss' as *;
+@use 'theme/components/breadcrumb/breadcrumb.scss' as *;

package/src/plugins/primevue/theme/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,28 @@
+import { BreadcrumbScheme } from '@webitel/styleguide/component-schemes';
+
+const breadcrumb = {
+  ...BreadcrumbScheme.sizes,
+  colorScheme: BreadcrumbScheme.colorScheme,
+
+
+  css: ({ dt }) => `
+    .p-breadcrumb .p-breadcrumb-list .p-breadcrumb-item .wt-breadcrumb__text {
+        color: ${dt(`breadcrumb.item.color`)};
+    }
+
+    .p-breadcrumb .p-breadcrumb-list .p-breadcrumb-separator .wt-icon {
+        width: ${dt(`breadcrumb.separator.size`)};
+        height: ${dt(`breadcrumb.separator.size`)};
+    }
+
+    .p-breadcrumb .p-breadcrumb-list .p-breadcrumb-separator .wt-icon {
+        fill: ${dt(`breadcrumb.separator.color`)};
+    }
+
+    .p-breadcrumb .p-breadcrumb-list .p-breadcrumb-separator:has(+ .p-breadcrumb-item:last-child) .wt-icon {
+        fill: ${dt(`breadcrumb.separator.lastItemColor`)};
+    }
+  `,
+};
+
+export default breadcrumb;

package/src/plugins/primevue/theme/components/breadcrumb/breadcrumb.scss

@@ -0,0 +1,9 @@
+@use '@webitel/styleguide/typography' as *;
+
+.wt-breadcrumb__text {
+  @extend %typo-body-1;
+}
+
+.wt-breadcrumb__text--last {
+  font-weight: 600;
+}

package/src/plugins/primevue/theme/components/components.js

@@ -1,8 +1,12 @@
 import autocomplete from './autocomplete/autocomplete.js';
+import breadcrumb from './breadcrumb/breadcrumb.js';
 import button from './button/button.js';
 import checkbox from './checkbox/checkbox.js';
 import chip from './chip/chip.js';
+import divider from './divider/divider.js';
 import popover from './popover/popover.js';
+import radio from './radio/radio.js';
+import slider from './slider/slider.js'
 import tooltip from './tooltip/tooltip.js';
 
 const components = {
@@ -12,6 +16,10 @@ const components = {
   tooltip,
   chip,
   checkbox,
+  breadcrumb,
+  slider,
+  divider,
+  radiobutton: radio,
 };
 
 export default components;

package/src/plugins/primevue/theme/components/divider/divider.js

@@ -0,0 +1,8 @@
+import { DividerScheme } from '@webitel/styleguide/component-schemes';
+
+const divider = {
+  ...DividerScheme.sizes,
+  colorScheme: DividerScheme.colorScheme,
+};
+
+export default divider;

package/src/plugins/primevue/theme/components/radio/radio.js

@@ -0,0 +1,17 @@
+import { RadioScheme } from '@webitel/styleguide/component-schemes';
+
+const radio = {
+  ...RadioScheme.sizes,
+  colorScheme: RadioScheme.colorScheme,
+
+  css: ({dt}) => `
+    .p-radiobutton {
+      width: ${dt('radiobutton.root.wrapperWidth')};
+      height: ${dt('radiobutton.root.wrapperHeight')};
+      align-items: center;
+      justify-content: center;
+    }
+  `
+};
+
+export default radio;

package/src/plugins/primevue/theme/components/slider/slider.js

@@ -0,0 +1,8 @@
+import { SliderScheme } from '@webitel/styleguide/component-schemes';
+
+const slider = {
+  ...SliderScheme.sizes,
+  colorScheme: SliderScheme.colorScheme,
+};
+
+export default slider;

package/types/components/index.d.ts

@@ -4,6 +4,7 @@ import WtAppHeader from './wt-app-header/wt-app-header.vue';
 import WtAppNavigator from './wt-app-header/wt-app-navigator.vue';
 import WtAvatar from './wt-avatar/wt-avatar.vue';
 import WtBadge from './wt-badge/wt-badge.vue';
+import WtBreadcrumb from './wt-breadcrumb/wt-breadcrumb.vue';
 import WtButton from './wt-button/wt-button.vue';
 import WtButtonSelect from './wt-button-select/wt-button-select.vue';
 import WtCheckbox from './wt-checkbox/wt-checkbox.vue';
@@ -22,7 +23,6 @@ import WtExpansionPanel from './wt-expansion-panel/wt-expansion-panel.vue';
 import WtFiltersPanelWrapper from './wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue';
 import WtHeaderActions from './wt-app-header/wt-header-actions.vue';
 import WtHeadline from './wt-headline/wt-headline.vue';
-import WtHeadlineNav from './wt-headline-nav/wt-headline-nav.vue';
 import WtHint from './wt-hint/wt-hint.vue';
 import WtIcon from './wt-icon/wt-icon.vue';
 import WtIconAction from './wt-icon-action/wt-icon-action.vue';
@@ -111,7 +111,7 @@ declare namespace Components {
     export { WtTextarea };
     export { WtAppHeader };
     export { WtHeadline };
-    export { WtHeadlineNav };
+    export { WtBreadcrumb };
     export { WtNavigationBar };
     export { WtAppNavigator };
     export { WtFiltersPanelWrapper };
@@ -144,4 +144,4 @@ declare namespace Components {
     export { WtSelectionPopup };
     export { WtDisplayChipItems };
 }
-export { WtActionBar, WtAppHeader, WtAppNavigator, WtAvatar, WtBadge, WtButton, WtButtonSelect, WtCheckbox, WtChip, WtConfirmDialog, WtContextMenu, WtCopyAction, WtDatepicker, WtDisplayChipItems, WtDivider, WtDualPanel, WtDummy, WtEmpty, WtErrorPage, WtExpansionPanel, WtFiltersPanelWrapper, WtHeaderActions, WtHeadline, WtHeadlineNav, WtHint, WtIcon, WtIconAction, WtIconBtn, WtImage, WtIndicator, WtInput, WtInputInfo, WtIntersectionObserver, WtItemLink, WtLabel, WtLoadBar, WtLoader, WtLogo, WtNavigationBar, WtNavigationMenu, WtNotification, WtNotificationsBar, WtPageHeader, WtPageWrapper, WtPagination, WtPlayer, WtPopover, WtPopup, WtProgressBar, WtRadio, WtReplaceTransition, WtRoundedAction, WtSearchBar, WtSelect, WtSelectionPopup, WtSlider, WtStartPage, WtStatusSelect, WtStepper, WtSwitcher, WtTable, WtTableActions, WtTableColumnSelect, WtTabs, WtTagsInput, WtTextarea, WtTimeInput, WtTimepicker, WtTooltip, WtTree, WtTreeTable, WtTypeExtensionValueInput };
+export { WtActionBar, WtAppHeader, WtAppNavigator, WtAvatar, WtBadge, WtBreadcrumb, WtButton, WtButtonSelect, WtCheckbox, WtChip, WtConfirmDialog, WtContextMenu, WtCopyAction, WtDatepicker, WtDisplayChipItems, WtDivider, WtDualPanel, WtDummy, WtEmpty, WtErrorPage, WtExpansionPanel, WtFiltersPanelWrapper, WtHeaderActions, WtHeadline, WtHint, WtIcon, WtIconAction, WtIconBtn, WtImage, WtIndicator, WtInput, WtInputInfo, WtIntersectionObserver, WtItemLink, WtLabel, WtLoadBar, WtLoader, WtLogo, WtNavigationBar, WtNavigationMenu, WtNotification, WtNotificationsBar, WtPageHeader, WtPageWrapper, WtPagination, WtPlayer, WtPopover, WtPopup, WtProgressBar, WtRadio, WtReplaceTransition, WtRoundedAction, WtSearchBar, WtSelect, WtSelectionPopup, WtSlider, WtStartPage, WtStatusSelect, WtStepper, WtSwitcher, WtTable, WtTableActions, WtTableColumnSelect, WtTabs, WtTagsInput, WtTextarea, WtTimeInput, WtTimepicker, WtTooltip, WtTree, WtTreeTable, WtTypeExtensionValueInput };

package/types/components/wt-breadcrumb/wt-breadcrumb.vue.d.ts

@@ -0,0 +1,9 @@
+import type { BreadcrumbProps } from 'primevue';
+interface Props extends BreadcrumbProps {
+    path?: Array<{
+        name: string;
+        route?: string | object;
+    }>;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/types/components/wt-divider/wt-divider.vue.d.ts

@@ -1,14 +1,8 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    variant: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    variant: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    variant: string;
+import type { DividerProps } from 'primevue';
+interface Props extends DividerProps {
+    variant?: 'horizontal' | 'vertical';
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    variant: "horizontal" | "vertical";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/types/components/wt-radio/wt-radio.vue.d.ts

@@ -1,66 +1,55 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    value: {
-        type: (BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-    selected: {
-        type: (BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    outline: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {
-    isChecked(): boolean;
-    radioIcon(): "radio" | "radio--checked";
-}, {
-    inputHandler(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "input"[], "input", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    value: {
-        type: (BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-    selected: {
-        type: (BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    outline: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
-    onInput?: (...args: any[]) => any;
+import type { RadioButtonProps } from 'primevue/radiobutton';
+interface Props extends RadioButtonProps {
+    value: string | number | boolean | object;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    outline?: boolean;
+}
+type __VLS_Props = Props;
+declare const model: import("vue").ModelRef<string | number | boolean | object, string, string | number | boolean | object, string | number | boolean | object>;
+declare const radioId: string;
+declare const isChecked: import("vue").ComputedRef<boolean>;
+type __VLS_PublicProps = __VLS_Props & {
+    'selected': string | number | boolean | object;
+};
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_9: {
+    label: string;
+    isChecked: boolean;
+    disabled: boolean;
+};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    label?: (props: typeof __VLS_9) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_PublicProps, {
+    model: typeof model;
+    radioId: typeof radioId;
+    isChecked: typeof isChecked;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: string | number | boolean | object) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: (value: string | number | boolean | object) => any;
+}>, {
+    label: string;
+    required: boolean;
+    disabled: boolean;
+    outline: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: string | number | boolean | object) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: (value: string | number | boolean | object) => any;
 }>, {
-    value: string | number | boolean | Record<string, any>;
     label: string;
     required: boolean;
-    selected: string | number | boolean | Record<string, any>;
     disabled: boolean;
     outline: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/components/wt-slider/wt-slider.vue.d.ts

@@ -1,73 +1,26 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    value: {
-        type: NumberConstructor;
-        default: number;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    vertical: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    min: {
-        type: NumberConstructor;
-        default: number;
-    };
-    max: {
-        type: NumberConstructor;
-        default: number;
-    };
-    step: {
-        type: NumberConstructor;
-        default: number;
-    };
-    height: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>, {}, {}, {
-    progressStyle(): string;
-    verticalHeight(): string;
-}, {
-    inputHandler(event: any): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "input"[], "input", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    value: {
-        type: NumberConstructor;
-        default: number;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    vertical: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    min: {
-        type: NumberConstructor;
-        default: number;
-    };
-    max: {
-        type: NumberConstructor;
-        default: number;
-    };
-    step: {
-        type: NumberConstructor;
-        default: number;
-    };
-    height: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>> & Readonly<{
-    onInput?: (...args: any[]) => any;
+import type { SliderProps } from 'primevue/slider';
+interface Props extends SliderProps {
+    disabled?: boolean;
+    vertical?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    height?: number;
+    width?: number;
+}
+type __VLS_Props = Props;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: number) => any;
 }>, {
-    value: number;
     disabled: boolean;
     step: number;
     vertical: boolean;
+    width: number;
     min: number;
     max: number;
     height: number;

package/types/plugins/primevue/theme/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,67 @@
+export default breadcrumb;
+declare const breadcrumb: {
+    colorScheme: {
+        light: {
+            root: {
+                background: string;
+            };
+            item: {
+                color: string;
+                hoverColor: string;
+                icon: {
+                    color: string;
+                    hoverColor: string;
+                };
+                focusRing: {
+                    color: string;
+                    shadow: string;
+                };
+            };
+            separator: {
+                color: string;
+                lastItemColor: string;
+            };
+        };
+        dark: {
+            root: {
+                background: string;
+            };
+            item: {
+                color: string;
+                hoverColor: string;
+                icon: {
+                    color: string;
+                    hoverColor: string;
+                };
+                focusRing: {
+                    color: string;
+                    shadow: string;
+                };
+            };
+            separator: {
+                color: string;
+                lastItemColor: string;
+            };
+        };
+    };
+    css: ({ dt }: {
+        dt: any;
+    }) => string;
+    root: {
+        padding: string;
+        gap: string;
+        transitionDuration: string;
+    };
+    item: {
+        borderRadius: string;
+        gap: string;
+        focusRing: {
+            width: string;
+            style: string;
+            offset: string;
+        };
+    };
+    separator: {
+        size: string;
+    };
+};

package/types/plugins/primevue/theme/components/components.d.ts

@@ -6,6 +6,10 @@ declare namespace components {
     export { tooltip };
     export { chip };
     export { checkbox };
+    export { breadcrumb };
+    export { slider };
+    export { divider };
+    export { radio as radiobutton };
 }
 import button from './button/button.js';
 import autocomplete from './autocomplete/autocomplete.js';
@@ -13,3 +17,7 @@ import popover from './popover/popover.js';
 import tooltip from './tooltip/tooltip.js';
 import chip from './chip/chip.js';
 import checkbox from './checkbox/checkbox.js';
+import breadcrumb from './breadcrumb/breadcrumb.js';
+import slider from './slider/slider.js';
+import divider from './divider/divider.js';
+import radio from './radio/radio.js';

package/types/plugins/primevue/theme/components/divider/divider.d.ts

@@ -0,0 +1,37 @@
+export default divider;
+declare const divider: {
+    colorScheme: {
+        light: {
+            root: {
+                borderColor: string;
+            };
+            content: {
+                background: string;
+                color: string;
+            };
+        };
+        dark: {
+            root: {
+                borderColor: string;
+            };
+            content: {
+                background: string;
+                color: string;
+            };
+        };
+    };
+    horizontal: {
+        margin: string;
+        padding: string;
+        content: {
+            padding: string;
+        };
+    };
+    vertical: {
+        margin: string;
+        padding: string;
+        content: {
+            padding: string;
+        };
+    };
+};

package/types/plugins/primevue/theme/components/radio/radio.d.ts

@@ -0,0 +1,91 @@
+export default radio;
+declare const radio: {
+    colorScheme: {
+        light: {
+            root: {
+                background: string;
+                checkedBackground: string;
+                checkedHoverBackground: string;
+                disabledBackground: string;
+                filledBackground: string;
+                borderColor: string;
+                hoverBorderColor: string;
+                focusBorderColor: string;
+                checkedBorderColor: string;
+                checkedHoverBorderColor: string;
+                checkedFocusBorderColor: string;
+                checkedDisabledBorderColor: string;
+                invalidBorderColor: string;
+                shadow: string;
+                focusRing: {
+                    color: string;
+                    shadow: string;
+                };
+            };
+            icon: {
+                checkedColor: string;
+                checkedHoverColor: string;
+                disabledColor: string;
+            };
+        };
+        dark: {
+            root: {
+                background: string;
+                checkedBackground: string;
+                checkedHoverBackground: string;
+                disabledBackground: string;
+                filledBackground: string;
+                borderColor: string;
+                hoverBorderColor: string;
+                focusBorderColor: string;
+                checkedBorderColor: string;
+                checkedHoverBorderColor: string;
+                checkedFocusBorderColor: string;
+                checkedDisabledBorderColor: string;
+                invalidBorderColor: string;
+                shadow: string;
+                focusRing: {
+                    color: string;
+                    shadow: string;
+                };
+            };
+            icon: {
+                checkedColor: string;
+                checkedHoverColor: string;
+                disabledColor: string;
+            };
+        };
+    };
+    css: ({ dt }: {
+        dt: any;
+    }) => string;
+    root: {
+        width: string;
+        height: string;
+        focusRing: {
+            width: string;
+            style: string;
+            offset: string;
+        };
+        transitionDuration: string;
+        sm: {
+            width: string;
+            height: string;
+        };
+        lg: {
+            width: string;
+            height: string;
+        };
+        wrapperWidth: string;
+        wrapperHeight: string;
+    };
+    icon: {
+        size: string;
+        sm: {
+            size: string;
+        };
+        lg: {
+            size: string;
+        };
+    };
+};