@webitel/ui-sdk 25.8.42 → 25.8.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.8.42",
+  "version": "25.8.43",
   "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.47",
+    "@webitel/styleguide": "^24.12.49",
     "autosize": "^6.0.1",
     "axios": "^1.8.3",
     "clipboard-copy": "^4.0.1",

package/src/assets/icons/sprite/tick.svg

@@ -1,4 +1,3 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-          d="M18.1213 7.29289C18.5118 7.68342 18.5118 8.31658 18.1213 8.70711L11.1213 15.7071C10.3403 16.4882 9.07394 16.4882 8.29289 15.7071L5.29289 12.7071C4.90237 12.3166 4.90237 11.6834 5.29289 11.2929C5.68342 10.9024 6.31658 10.9024 6.70711 11.2929L9.35355 13.9393C9.54882 14.1346 9.8654 14.1346 10.0607 13.9393L16.7071 7.29289C17.0976 6.90237 17.7308 6.90237 18.1213 7.29289Z"/>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6943 2.31518C14.1019 2.73542 14.1019 3.41676 13.6943 3.837L6.38863 11.3696C5.57348 12.2101 4.25185 12.2101 3.43669 11.3696L0.305684 8.14137C-0.101895 7.72113 -0.101895 7.03978 0.305684 6.61954C0.713262 6.19931 1.37408 6.19931 1.78165 6.61954L4.54367 9.46736C4.74746 9.67748 5.07787 9.67748 5.28166 9.46736L12.2183 2.31518C12.6259 1.89494 13.2867 1.89494 13.6943 2.31518Z" style="fill-opacity:1;"/>
 </svg>

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

@@ -8,7 +8,16 @@
       :disabled="disabled"
       :value="value"
       :binary="isSingle"
-    />
+    >
+      <template #icon>
+        <span class="wt-checkbox__checkmark">
+          <wt-icon
+            :color="iconColor"
+            :icon="checkboxIcon"
+          />
+        </span>
+      </template>
+    </p-checkbox>
     <wt-label 
       v-if="label"
       :for="checkboxId"
@@ -57,6 +66,16 @@ const isChecked = computed(() => {
   }
   return model.value.includes(props.value);
 });
+
+const checkboxIcon = computed(() => {
+  return isChecked.value ? 'tick' : '';
+})
+
+const iconColor = computed(() => {
+  if (props.disabled) return 'disabled';
+  if (isChecked.value) return 'active';
+  return null;
+})
 </script>
 
 <style lang="scss">
@@ -71,6 +90,10 @@ const isChecked = computed(() => {
   user-select: none;
 }
 
+.wt-checkbox__checkmark {
+  display: inline-flex;
+}
+
 .wt-checkbox__label {
   transition: var(--transition);
   cursor: pointer;

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

@@ -3,6 +3,30 @@ import { CheckboxScheme } from "@webitel/styleguide/component-schemes";
 const checkbox = {
   ...CheckboxScheme.sizes,
   colorScheme: CheckboxScheme.colorScheme,
+
+  css: ({ dt }) => `
+        .p-checkbox-box .wt-icon__icon {
+            color: ${dt('checkbox.icon.color')};
+            width: ${dt('checkbox.icon.size')};
+            height: ${dt('checkbox.icon.size')};
+        }
+
+        .p-checkbox-box .wt-icon--color-active .wt-icon__icon {
+            color: ${dt('checkbox.icon.checkedColor')};
+        }
+
+        .p-checkbox-box .wt-icon--color-disabled .wt-icon__icon {
+            color: ${dt('checkbox.icon.disabledColor')};
+        }
+
+        .p-checkbox:hover .wt-icon--color-active .wt-icon__icon {
+            color: ${dt('checkbox.icon.checkedHoverColor')};
+        }
+
+        .wt-checkbox:has(.wt-label:hover) .wt-icon--color-active .wt-icon__icon {
+            color: ${dt('checkbox.icon.checkedHoverColor')};
+        }
+        `,
 };
 
 export default checkbox;

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

@@ -9,23 +9,27 @@ declare const model: import("vue").ModelRef<boolean | string[], string, boolean
 declare const checkboxId: string;
 declare const isSingle: import("vue").ComputedRef<boolean>;
 declare const isChecked: import("vue").ComputedRef<any>;
+declare const checkboxIcon: import("vue").ComputedRef<"" | "tick">;
+declare const iconColor: import("vue").ComputedRef<"active" | "disabled">;
 type __VLS_PublicProps = __VLS_Props & {
     'selected': boolean | string[];
 };
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_9: {
+declare var __VLS_13: {
     label: string;
     isChecked: any;
     disabled: boolean;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    label?: (props: typeof __VLS_9) => any;
+    label?: (props: typeof __VLS_13) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<__VLS_PublicProps, {
     model: typeof model;
     checkboxId: typeof checkboxId;
     isSingle: typeof isSingle;
     isChecked: typeof isChecked;
+    checkboxIcon: typeof checkboxIcon;
+    iconColor: typeof iconColor;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selected": (value: boolean | string[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{

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

@@ -60,6 +60,9 @@ declare const checkbox: {
             };
         };
     };
+    css: ({ dt }: {
+        dt: any;
+    }) => string;
     root: {
         borderRadius: string;
         width: string;