@webitel/ui-sdk 25.10.4 → 25.10.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.10.4",
+  "version": "25.10.6",
   "private": false,
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",
@@ -56,7 +56,7 @@
     "@vuepic/vue-datepicker": "^4.5.1",
     "@vueuse/components": "^13.0.0",
     "@webitel/api-services": "^0.0.42",
-    "@webitel/styleguide": "^24.12.59",
+    "@webitel/styleguide": "^24.12.61",
     "autosize": "^6.0.1",
     "axios": "^1.8.3",
     "clipboard-copy": "^4.0.1",

package/src/components/on-demand/wt-type-extension-value-input/wt-type-extension-value-input.vue

@@ -19,8 +19,8 @@
   >
     <wt-switcher
       v-bind="sharedChildrenProps"
-      :value="value"
-      @change="setValue"
+      :model-value="value"
+      @update:model-value="setValue"
     />
   </slot>
   <slot

package/src/components/wt-popover/wt-popover.vue

@@ -25,9 +25,13 @@
 import { PopoverEmitsOptions, PopoverProps } from 'primevue';
 import { defineExpose, useAttrs, useTemplateRef } from 'vue';
 
+interface Props extends PopoverProps {
+  disabled?: boolean;
+}
+
 const attrs = useAttrs();
 const innerPopover = useTemplateRef('innerPopover');
-withDefaults(defineProps<PopoverProps>(), {
+const props = withDefaults(defineProps<Props>(), {
   appendTo: 'body',
   baseZIndex: 0,
   autoZIndex: true,
@@ -36,15 +40,19 @@ withDefaults(defineProps<PopoverProps>(), {
   pt: null,
   ptOptions: null,
   closeOnEscape: true,
-  unstyled: false
+  unstyled: false,
+  disabled: false
 });
 defineEmits<PopoverEmitsOptions>();
 
 const toggle = (event?: Event, target?: HTMLElement | null | undefined) => {
+  if (props.disabled) return;
+
   innerPopover.value?.toggle(event, target ?? undefined);
 };
 
 const show = (event?: Event, target?: HTMLElement | null | undefined) => {
+  if (props.disabled) return;
   // Opens the popover.
   // `target` is the element the popover will be positioned relative to.
   // If not provided, the popover will be positioned relative to the `activator` slot element by default.

package/src/components/wt-switcher/wt-switcher.vue

@@ -1,26 +1,18 @@
 <template>
-  <div
-    :class="{
-      'wt-switcher--off': !value,
-      'wt-switcher--on': value,
-      'wt-switcher--disabled': disabled,
-    }"
-    class="wt-switcher"
+  <div 
+    class="wt-switcher" 
+    :class="{ 'wt-switcher--label-left': labelLeft }"
   >
+    <p-toggle-switch
+      v-model="model"
+      :input-id="switcherId"
+      :disabled="disabled"
+    />
     <wt-label
-      :class="{ 'wt-switcher__wrapper--label-left': labelLeft }"
       :disabled="disabled"
-      class="wt-switcher__wrapper"
+      :for="switcherId"
       v-bind="labelProps"
     >
-      <input
-        :checked="value"
-        :disabled="disabled"
-        class="wt-switcher__input"
-        type="checkbox"
-        @change="inputHandler"
-      />
-      <span class="wt-switcher__checkmark" />
       <!-- @slot Custom input label -->
       <slot
         name="label"
@@ -37,42 +29,31 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'WtSwitcher',
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
-  props: {
-    value: {
-      type: Boolean,
-      default: false,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    labelLeft: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    labelProps: {
-      type: Object,
-      description: 'Object with props, passed down to wt-label as props',
-    },
-  },
-  emits: ['change'],
-  methods: {
-    inputHandler() {
-      this.$emit('change', !this.value);
-    },
-  },
-};
+<script setup lang="ts">
+import { ToggleSwitchProps } from 'primevue/toggleswitch';
+import { defineModel, defineProps, withDefaults } from 'vue';
+
+interface LabelProps {
+  [key: string]: any;
+}
+
+interface Props extends ToggleSwitchProps {
+  label?: string;
+  labelLeft?: boolean;
+  disabled?: boolean;
+  labelProps?: LabelProps;
+}
+
+withDefaults(defineProps<Props>(), {
+  label: '',
+  labelLeft: false,
+  disabled: false,
+  labelProps: () => ({}),
+});
+
+const model = defineModel<boolean>();
+
+const switcherId = `switcher-${Math.random().toString(36).slice(2, 11)}`;
 </script>
 
 <style lang="scss">
@@ -84,126 +65,24 @@ export default {
   position: relative;
   box-sizing: border-box;
   width: fit-content;
-
-  .wt-label {
-    cursor: pointer;
-  }
-}
-
-.wt-switcher__wrapper {
   display: flex;
-  position: relative;
   align-items: center;
   cursor: pointer;
-  user-select: none;
 
-  &.wt-switcher__wrapper--label-left {
+  &.wt-switcher--label-left {
     flex-direction: row-reverse;
   }
 }
 
 .wt-switcher__label {
+  cursor: pointer;
+  user-select: none;
   transition: var(--transition);
   margin-left: var(--switcher-icon-margin);
 
-  .wt-switcher__wrapper--label-left & {
+  .wt-switcher--label-left & {
     margin-right: var(--switcher-icon-margin);
     margin-left: 0;
   }
 }
-
-.wt-switcher__input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-}
-
-.wt-switcher__checkmark {
-  display: block;
-  position: relative;
-  flex: 0 0 var(--switcher-width);
-  transition: var(--transition);
-  border-radius: var(--switcher-border-radius);
-  width: var(--switcher-width);
-  height: var(--switcher-height);
-
-  &:before {
-    position: absolute;
-    bottom: var(--switcher-cicle-margin);
-    left: var(--switcher-cicle-margin);
-    transition: var(--transition);
-    border-radius: 50%;
-    width: var(--switcher-cicle-size);
-    height: var(--switcher-cicle-size);
-    content: '';
-  }
-}
-
-.wt-switcher--off {
-  .wt-switcher__checkmark {
-    background: var(--wt-switcher-background-color-off);
-
-    &:before {
-      background: var(--wt-switcher-circle-background-color-off);
-    }
-  }
-
-  &:hover {
-    .wt-switcher__checkmark {
-      background: var(--wt-switcher-background-color-off-hover);
-
-      &:before {
-        background: var(--wt-switcher-circle-background-color-off-hover);
-      }
-    }
-  }
-
-  &.wt-switcher--disabled {
-    .wt-switcher__checkmark {
-      background: var(--wt-switcher-background-color-off-disabled);
-
-      &:before {
-        background: var(--wt-switcher-circle-background-color-off-disabled);
-      }
-    }
-  }
-}
-
-.wt-switcher--on {
-  .wt-switcher__checkmark {
-    background: var(--wt-switcher-background-color-on);
-
-    /* Show the indicator (dot/circle) when checked */
-    &:before {
-      transform: translateX(var(--switcher-cicle-translateX));
-      background: var(--wt-switcher-circle-background-color-on);
-    }
-  }
-
-  &:hover {
-    .wt-switcher__checkmark {
-      background: var(--wt-switcher-background-color-on-hover);
-
-      &:before {
-        background: var(--wt-switcher-circle-background-color-on-hover);
-      }
-    }
-  }
-
-  &.wt-switcher--disabled {
-    .wt-switcher__checkmark {
-      background: var(--wt-switcher-background-color-on-disabled);
-
-      &:before {
-        background: var(--wt-switcher-circle-background-color-on-disabled);
-      }
-    }
-  }
-}
-
-.wt-switcher--disabled {
-  pointer-events: none;
-}
 </style>

package/src/modules/Appearance/components/wt-dark-mode-switcher.vue

@@ -55,8 +55,8 @@ if (cachedTheme) {
   <div class="wt-dark-mode-switcher">
     <wt-icon icon="dark-mode" />
     <wt-switcher
-      :value="mode === 'dark'"
-      @change="toggleDarkMode"
+      :model-value="mode === 'dark'"
+      @update:model-value="toggleDarkMode"
     />
   </div>
 </template>

package/src/modules/AuditForm/components/audit-form-question-write-wrapper.vue

@@ -4,8 +4,8 @@
       <wt-switcher
         :disabled="first"
         :label="t('reusable.required')"
-        :value="question.required"
-        @change="updateQuestion({ path: 'required', value: $event })"
+        :model-value="question.required"
+        @update:model-value="updateQuestion({ path: 'required', value: $event })"
       />
       <div class="audit-form-question-write-header__actions">
         <wt-icon-btn

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

@@ -9,6 +9,7 @@ import PInputText from 'primevue/inputtext';
 import PPopover from 'primevue/popover';
 import PRadio from 'primevue/radiobutton';
 import PSlider from 'primevue/slider'
+import PToggleSwitch from 'primevue/toggleswitch';
 import Tooltip from 'primevue/tooltip';
 
 import WebitelTheme from './theme/webitel-theme.js';
@@ -36,6 +37,7 @@ const initPrimevue = (app) => {
   app.component('PCheckbox', changeComponentCompatMode(PCheckbox));
   app.component('PRadio', changeComponentCompatMode(PRadio));
   app.component('PChip', changeComponentCompatMode(PChip));
+  app.component('PToggleSwitch', changeComponentCompatMode(PToggleSwitch));
   app.component('PBreadcrumb', changeComponentCompatMode(PBreadcrumb));
   app.component('PSlider', changeComponentCompatMode(PSlider));
   app.component('PDivider', changeComponentCompatMode(PDivider));

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

@@ -7,6 +7,7 @@ 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 switcher from './switcher/switcher.js';
 import tooltip from './tooltip/tooltip.js';
 
 const components = {
@@ -16,6 +17,7 @@ const components = {
   tooltip,
   chip,
   checkbox,
+  toggleswitch: switcher,
   breadcrumb,
   slider,
   divider,

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

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

package/types/components/wt-action-bar/wt-action-bar.vue.d.ts

@@ -5,14 +5,14 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 });
 declare const __VLS_component: import("vue").DefineComponent<{}, {
     $emit: (event: string, ...args: any[]) => void;
-    mode: string;
     disabled: boolean;
+    mode: string;
     include: unknown[];
     exclude: unknown[];
     size?: string;
     $props: {
-        readonly mode?: string;
         readonly disabled?: boolean;
+        readonly mode?: string;
         readonly include?: unknown[];
         readonly exclude?: unknown[];
         readonly size?: string;

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

@@ -36,8 +36,8 @@ declare const __VLS_self: import("vue").DefineComponent<WtButtonProps, {
     onClick?: (...args: any[]) => any;
 }>, {
     color: ButtonColor;
-    size: ComponentSize;
     disabled: boolean;
+    size: ComponentSize;
     wide: boolean;
     loading: boolean;
     widthByContent: boolean;
@@ -49,8 +49,8 @@ declare const __VLS_component: import("vue").DefineComponent<WtButtonProps, {},
     onClick?: (...args: any[]) => any;
 }>, {
     color: ButtonColor;
-    size: ComponentSize;
     disabled: boolean;
+    size: ComponentSize;
     wide: boolean;
     loading: boolean;
     widthByContent: boolean;

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

@@ -8,8 +8,8 @@ declare const __VLS_component: import("vue").DefineComponent<{}, {
     value: string | number;
     label: string;
     required: boolean;
-    mode: string;
     disabled: boolean;
+    mode: string;
     clearable: boolean;
     placeholder: string;
     lang: string;
@@ -20,8 +20,8 @@ declare const __VLS_component: import("vue").DefineComponent<{}, {
         readonly value?: string | number;
         readonly label?: string;
         readonly required?: boolean;
-        readonly mode?: string;
         readonly disabled?: boolean;
+        readonly mode?: string;
         readonly clearable?: boolean;
         readonly placeholder?: string;
         readonly lang?: string;

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

@@ -16,8 +16,8 @@ interface Props {
 }
 declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     color: IconColor;
-    size: ComponentSize;
     disabled: boolean;
+    size: ComponentSize;
     iconPrefix: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/types/components/wt-icon-action/wt-icon-action.vue.d.ts

@@ -1,11 +1,11 @@
 declare const _default: import("vue").DefineComponent<{}, {
     $emit: (event: "click" | "mousedown", ...args: any[]) => void;
-    size: string;
     disabled: boolean;
+    size: string;
     action: string;
     $props: {
-        readonly size?: string;
         readonly disabled?: boolean;
+        readonly size?: string;
         readonly action?: string;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/types/components/wt-item-link/wt-item-link.vue.d.ts

@@ -5,16 +5,16 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 });
 declare const __VLS_component: import("vue").DefineComponent<{}, {
     link: string | Record<string, any>;
+    disabled: boolean;
     target: string;
     id: string | number;
-    disabled: boolean;
     routeName: string;
     invisible: boolean;
     $props: {
         readonly link?: string | Record<string, any>;
+        readonly disabled?: boolean;
         readonly target?: string;
         readonly id?: string | number;
-        readonly disabled?: boolean;
         readonly routeName?: string;
         readonly invisible?: boolean;
     };

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

@@ -1,4 +1,7 @@
 import { PopoverProps } from 'primevue';
+interface Props extends PopoverProps {
+    disabled?: boolean;
+}
 declare const attrs: {
     [x: string]: unknown;
 };
@@ -19,7 +22,7 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
 } & {
     default?: (props: typeof __VLS_9) => any;
 }>;
-declare const __VLS_self: import("vue").DefineComponent<PopoverProps, {
+declare const __VLS_self: import("vue").DefineComponent<Props, {
     attrs: typeof attrs;
     toggle: typeof toggle;
     show: typeof show;
@@ -27,7 +30,7 @@ declare const __VLS_self: import("vue").DefineComponent<PopoverProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     show: () => any;
     hide: () => any;
-}, string, import("vue").PublicProps, Readonly<PopoverProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onShow?: () => any;
     onHide?: () => any;
 }>, {
@@ -40,15 +43,16 @@ declare const __VLS_self: import("vue").DefineComponent<PopoverProps, {
     autoZIndex: boolean;
     breakpoints: import("primevue").PopoverBreakpoints;
     closeOnEscape: boolean | undefined;
+    disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<PopoverProps, {
+declare const __VLS_component: import("vue").DefineComponent<Props, {
     toggle: (event?: Event, target?: HTMLElement | null | undefined) => void;
     show: (event?: Event, target?: HTMLElement | null | undefined) => void;
     hide: (event?: Event) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     show: () => any;
     hide: () => any;
-}, string, import("vue").PublicProps, Readonly<PopoverProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onShow?: () => any;
     onHide?: () => any;
 }>, {
@@ -61,6 +65,7 @@ declare const __VLS_component: import("vue").DefineComponent<PopoverProps, {
     autoZIndex: boolean;
     breakpoints: import("primevue").PopoverBreakpoints;
     closeOnEscape: boolean | undefined;
+    disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -38,9 +38,9 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
     "onPopup:opened"?: () => any;
     "onPopup:closed"?: () => any;
 }>, {
+    disabled: boolean;
     overflow: boolean;
     size: ComponentSize;
-    disabled: boolean;
     shown: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/types/components/wt-rounded-action/wt-rounded-action.vue.d.ts

@@ -2,9 +2,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     $emit: (event: "click", ...args: any[]) => void;
     color: string;
     icon: string;
+    disabled: boolean;
     size: string;
     active: boolean;
-    disabled: boolean;
     wide: boolean;
     loading: boolean;
     rounded: boolean;
@@ -12,9 +12,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     $props: {
         readonly color?: string;
         readonly icon?: string;
+        readonly disabled?: boolean;
         readonly size?: string;
         readonly active?: boolean;
-        readonly disabled?: boolean;
         readonly wide?: boolean;
         readonly loading?: boolean;
         readonly rounded?: boolean;

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

@@ -1,53 +1,55 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    value: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
-    labelLeft: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    labelProps: {
-        type: ObjectConstructor;
-        description: string;
-    };
-}>, {}, {}, {}, {
-    inputHandler(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    value: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
-    labelLeft: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    labelProps: {
-        type: ObjectConstructor;
-        description: string;
-    };
-}>> & Readonly<{
-    onChange?: (...args: any[]) => any;
+import { ToggleSwitchProps } from 'primevue/toggleswitch';
+interface LabelProps {
+    [key: string]: any;
+}
+interface Props extends ToggleSwitchProps {
+    label?: string;
+    labelLeft?: boolean;
+    disabled?: boolean;
+    labelProps?: LabelProps;
+}
+type __VLS_Props = Props;
+declare const model: import("vue").ModelRef<boolean, string, boolean, boolean>;
+declare const switcherId: string;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: boolean;
+};
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_9: {
+    label: string;
+    value: any;
+    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;
+    switcherId: typeof switcherId;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: boolean) => any;
 }>, {
-    value: boolean;
     label: string;
     disabled: boolean;
+    labelProps: LabelProps;
     labelLeft: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: boolean) => any;
+}>, {
+    label: string;
+    disabled: boolean;
+    labelProps: LabelProps;
+    labelLeft: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};