@webitel/ui-sdk 25.10.5 → 25.10.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.10.5",
+  "version": "25.10.7",
   "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-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-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;
+    };
+};

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

@@ -6,6 +6,7 @@ declare namespace components {
     export { tooltip };
     export { chip };
     export { checkbox };
+    export { switcher as toggleswitch };
     export { breadcrumb };
     export { slider };
     export { divider };
@@ -17,6 +18,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 switcher from './switcher/switcher.js';
 import breadcrumb from './breadcrumb/breadcrumb.js';
 import slider from './slider/slider.js';
 import divider from './divider/divider.js';

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

@@ -0,0 +1,78 @@
+export default switcher;
+declare const switcher: {
+    colorScheme: {
+        light: {
+            root: {
+                shadow: string;
+                focusRing: {
+                    color: string;
+                    shadow: string;
+                };
+                borderColor: string;
+                hoverBorderColor: string;
+                checkedBorderColor: string;
+                checkedHoverBorderColor: string;
+                invalidBorderColor: string;
+                background: string;
+                disabledBackground: string;
+                hoverBackground: string;
+                checkedBackground: string;
+                checkedHoverBackground: string;
+            };
+            handle: {
+                background: string;
+                disabledBackground: string;
+                hoverBackground: string;
+                checkedBackground: string;
+                checkedHoverBackground: string;
+                color: string;
+                hoverColor: string;
+                checkedColor: string;
+                checkedHoverColor: string;
+            };
+        };
+        dark: {
+            root: {
+                shadow: string;
+                focusRing: {
+                    color: string;
+                    shadow: string;
+                };
+                borderColor: string;
+                hoverBorderColor: string;
+                checkedBorderColor: string;
+                checkedHoverBorderColor: string;
+                invalidBorderColor: string;
+                background: string;
+                disabledBackground: string;
+                hoverBackground: string;
+                checkedBackground: string;
+                checkedHoverBackground: string;
+            };
+            handle: {
+                background: string;
+                disabledBackground: string;
+                hoverBackground: string;
+                checkedBackground: string;
+                checkedHoverBackground: string;
+                color: string;
+                hoverColor: string;
+                checkedColor: string;
+                checkedHoverColor: string;
+            };
+        };
+    };
+    root: {
+        width: string;
+        height: string;
+        borderRadius: string;
+        gap: string;
+        borderWidth: string;
+        transitionDuration: string;
+        slideDuration: string;
+    };
+    handle: {
+        borderRadius: string;
+        size: string;
+    };
+};