@webitel/ui-sdk 25.8.37 → 25.8.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.8.37",
+  "version": "25.8.39",
   "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.33",
-    "@webitel/styleguide": "^24.12.44",
+    "@webitel/styleguide": "^24.12.47",
     "autosize": "^6.0.1",
     "axios": "^1.8.3",
     "clipboard-copy": "^4.0.1",

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

@@ -1,37 +1,25 @@
 <template>
-  <div
-    :class="{
-      'wt-checkbox--active': isChecked,
-      'wt-checkbox--disabled': disabled,
-    }"
+  <div 
     class="wt-checkbox"
   >
-    <wt-label
+    <p-checkbox
+      v-model="model"
+      :input-id="checkboxId"
+      :disabled="disabled"
+      :value="value"
+      :binary="isSingle"
+    />
+    <wt-label 
+      v-if="label"
+      :for="checkboxId"
       :disabled="disabled"
-      class="wt-checkbox__wrapper"
-      v-bind="labelProps"
     >
-      <input
-        :checked="isChecked"
-        :disabled="disabled"
-        :value="value"
-        class="wt-checkbox__input"
-        type="checkbox"
-        @change="inputHandler"
-      />
-      <span class="wt-checkbox__checkmark">
-        <wt-icon
-          :color="iconColor"
-          :icon="checkboxIcon"
-        />
-      </span>
       <!-- @slot Custom label markup -->
       <slot
         name="label"
         v-bind="{ label, isChecked, disabled }"
       >
         <div
-          v-if="label"
           class="wt-checkbox__label"
         >
           {{ label }}
@@ -41,68 +29,34 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'WtCheckbox',
-  model: {
-    prop: 'selected',
-    event: 'change',
-  },
-  props: {
-    value: {
-      type: [String, Boolean],
-      default: '',
-    },
-    selected: {
-      type: [Array, Boolean],
-      default: () => [],
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    labelProps: {
-      type: Object,
-      description: 'Object with props, passed down to wt-label as props',
-    },
-  },
-  emits: ['change'],
-  computed: {
-    isChecked() {
-      if (typeof this.selected === 'boolean') {
-        return this.selected;
-      }
-      return this.selected.includes(this.value);
-    },
-    checkboxIcon() {
-      return this.isChecked ? 'checkbox--checked' : 'checkbox';
-    },
-    iconColor() {
-      if (this.disabled) return 'disabled';
-      if (this.isChecked) return 'active';
-      return null;
-    },
-  },
-  methods: {
-    inputHandler() {
-      if (typeof this.selected === 'boolean') {
-        this.$emit('change', !this.selected);
-      } else {
-        let selected = [...this.selected];
-        if (selected.includes(this.value)) {
-          selected = selected.filter((value) => value !== this.value);
-        } else {
-          selected.push(this.value);
-        }
-        this.$emit('change', selected);
-      }
-    },
-  },
-};
+<script setup lang="ts">
+import type { CheckboxProps } from 'primevue/checkbox';
+import { computed, defineModel, defineProps } from 'vue';
+
+interface WtCheckboxProps extends CheckboxProps {
+  value?: string | boolean;
+  label?: string;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<WtCheckboxProps>(), {
+  value: '',
+  label: '',
+  disabled: false,
+});
+
+const model = defineModel<boolean | string[]>('selected', {required: true});
+
+const checkboxId = `checkbox-${Math.random().toString(36).slice(2, 11)}`;
+
+const isSingle = computed(() => typeof model.value === 'boolean');
+
+const isChecked = computed(() => {
+  if (isSingle.value) {
+    return model.value;
+  }
+  return model.value.includes(props.value);
+});
 </script>
 
 <style lang="scss">
@@ -111,23 +65,10 @@ export default {
 
 <style lang="scss" scoped>
 .wt-checkbox {
-  box-sizing: border-box;
-  width: fit-content;
-
-  .wt-label {
-    cursor: pointer;
-  }
-}
-
-.wt-checkbox__wrapper {
   display: flex;
   position: relative;
   align-items: center;
   user-select: none;
-
-  .wt-checkbox__checkmark {
-    line-height: 0; // prevent icon height >> content
-  }
 }
 
 .wt-checkbox__label {
@@ -135,23 +76,4 @@ export default {
   cursor: pointer;
   margin-left: var(--checkbox-icon-margin);
 }
-
-/* Hide the browser's default checkbox */
-.wt-checkbox__input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-}
-
-.wt-checkbox:hover {
-  :deep(.wt-icon__icon) {
-    fill: var(--icon-active-color);
-  }
-}
-
-.wt-checkbox--disabled {
-  pointer-events: none;
-}
 </style>

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

@@ -18,7 +18,7 @@
           >
             <wt-checkbox
               :selected="isAllSelected"
-              @change="selectAll"
+              @update:selected="selectAll"
             />
           </th>
           <th
@@ -71,7 +71,7 @@
           >
             <wt-checkbox
               :selected="_selected.includes(row)"
-              @change="handleSelection(row, $event)"
+              @update:selected="handleSelection(row, $event)"
             />
           </td>
 

package/src/components/wt-table-column-select/wt-table-column-select.vue

@@ -34,7 +34,7 @@
               <wt-checkbox
                 :label="shownColLabel(column)"
                 :selected="column.show"
-                @change="column.show = $event"
+                @update:selected="column.show = $event"
               />
             </li>
           </ul>

package/src/components/wt-tree-table/wt-tree-table.vue

@@ -23,7 +23,7 @@
               >
                 <wt-checkbox
                   :selected="isAllSelected"
-                  @change="selectAll"
+                  @update:selected="selectAll"
                 />
               </div>
               <div class="wt-tree-table-th__text">

package/src/components/wt-tree-table-row/wt-tree-table-row.vue

@@ -21,7 +21,7 @@
           <wt-checkbox
             v-if="selectable"
             :selected="isSelectedRow"
-            @change="
+            @update:selected="
               $emit('update:selected', {
                 data,
                 select: $event,

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

@@ -1,5 +1,6 @@
 import PAutoComplete from 'primevue/autocomplete';
 import PButton from 'primevue/button';
+import PCheckbox from 'primevue/checkbox';
 import PrimeVue from 'primevue/config';
 import PInputText from 'primevue/inputtext';
 import PPopover from 'primevue/popover';
@@ -27,6 +28,7 @@ const initPrimevue = (app) => {
   app.component('PAutoComplete', changeComponentCompatMode(PAutoComplete));
   app.component('PInputText', changeComponentCompatMode(PInputText));
   app.component('PPopover', changeComponentCompatMode(PPopover));
+  app.component('PCheckbox', changeComponentCompatMode(PCheckbox));
 
   app.directive('tooltip', Tooltip);
 };

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

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

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

@@ -1,5 +1,6 @@
 import autocomplete from './autocomplete/autocomplete.js';
 import button from './button/button.js';
+import checkbox from './checkbox/checkbox.js';
 import popover from './popover/popover.js';
 import tooltip from './tooltip/tooltip.js';
 
@@ -8,6 +9,7 @@ const components = {
   autocomplete,
   popover,
   tooltip,
+  checkbox,
 };
 
 export default components;

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

@@ -1,57 +1,53 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    value: {
-        type: (StringConstructor | BooleanConstructor)[];
-        default: string;
-    };
-    selected: {
-        type: (BooleanConstructor | ArrayConstructor)[];
-        default: () => any[];
-    };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    labelProps: {
-        type: ObjectConstructor;
-        description: string;
-    };
-}>, {}, {}, {
-    isChecked(): boolean;
-    checkboxIcon(): "checkbox" | "checkbox--checked";
-    iconColor(): "active" | "disabled";
-}, {
-    inputHandler(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    value: {
-        type: (StringConstructor | BooleanConstructor)[];
-        default: string;
-    };
-    selected: {
-        type: (BooleanConstructor | ArrayConstructor)[];
-        default: () => any[];
-    };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    labelProps: {
-        type: ObjectConstructor;
-        description: string;
-    };
-}>> & Readonly<{
-    onChange?: (...args: any[]) => any;
+import type { CheckboxProps } from 'primevue/checkbox';
+interface WtCheckboxProps extends CheckboxProps {
+    value?: string | boolean;
+    label?: string;
+    disabled?: boolean;
+}
+type __VLS_Props = WtCheckboxProps;
+declare const model: import("vue").ModelRef<boolean | string[], string, boolean | string[], boolean | string[]>;
+declare const checkboxId: string;
+declare const isSingle: import("vue").ComputedRef<boolean>;
+declare const isChecked: import("vue").ComputedRef<any>;
+type __VLS_PublicProps = __VLS_Props & {
+    'selected': boolean | string[];
+};
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_9: {
+    label: string;
+    isChecked: 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;
+    checkboxId: typeof checkboxId;
+    isSingle: typeof isSingle;
+    isChecked: typeof isChecked;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: boolean | string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: (value: boolean | string[]) => any;
+}>, {
+    value: string | boolean;
+    label: string;
+    disabled: 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: boolean | string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: (value: boolean | string[]) => any;
 }>, {
     value: string | boolean;
     label: string;
-    selected: boolean | unknown[];
     disabled: 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-table/wt-table.vue.d.ts

@@ -118,8 +118,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
 }>> & Readonly<{
-    onSort?: (...args: any[]) => any;
     "onUpdate:selected"?: (...args: any[]) => any;
+    onSort?: (...args: any[]) => any;
 }>, {
     headers: unknown[];
     data: unknown[];

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

@@ -0,0 +1,90 @@
+export default checkbox;
+declare const checkbox: {
+    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;
+                };
+                transitionDuration: string;
+            };
+            icon: {
+                color: string;
+                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;
+                };
+                transitionDuration: string;
+            };
+            icon: {
+                color: string;
+                checkedColor: string;
+                checkedHoverColor: string;
+                disabledColor: string;
+            };
+        };
+    };
+    root: {
+        borderRadius: string;
+        width: string;
+        height: string;
+        sm: {
+            width: string;
+            height: string;
+        };
+        lg: {
+            width: string;
+            height: string;
+        };
+        focusRing: {
+            width: string;
+            style: string;
+            offset: string;
+        };
+    };
+    icon: {
+        size: string;
+        sm: {
+            size: string;
+        };
+        lg: {
+            size: string;
+        };
+    };
+};

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

@@ -4,8 +4,10 @@ declare namespace components {
     export { autocomplete };
     export { popover };
     export { tooltip };
+    export { checkbox };
 }
 import button from './button/button.js';
 import autocomplete from './autocomplete/autocomplete.js';
 import popover from './popover/popover.js';
 import tooltip from './tooltip/tooltip.js';
+import checkbox from './checkbox/checkbox.js';