@webitel/ui-sdk 23.12.38 → 23.12.39-vite-1

package/src/components/wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue

@@ -1,20 +1,23 @@
 <template>
-  <article class="filters-panel-wrapper" :class="{ 'filters-panel-wrapper--opened': isOpened }">
+  <article
+    class="filters-panel-wrapper"
+    :class="{ 'filters-panel-wrapper--opened': isOpened }"
+  >
     <div class="filters-wrap">
-      <slot></slot>
+      <slot />
     </div>
     <div class="actions-wrap">
       <wt-table-actions
         :icons="['filter-reset', 'settings']"
         @input="tableActionsHandler"
-      ></wt-table-actions>
+      />
     </div>
   </article>
 </template>
 
 <script>
 export default {
-  name: 'filters-panel-wrapper',
+  name: 'FiltersPanelWrapper',
   data: () => ({
     isOpened: false,
     filtersCount: 0,

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

@@ -3,12 +3,12 @@
     <slot>
       <slot name="title-wrapper">
         <h1 class="wt-headline__title">
-          <slot name="title"></slot>
+          <slot name="title" />
         </h1>
       </slot>
       <div class="wt-headline__actions-wrapper">
-        <slot name="search"></slot>
-        <slot name="actions"></slot>
+        <slot name="search" />
+        <slot name="actions" />
       </div>
     </slot>
   </header>
@@ -16,7 +16,7 @@
 
 <script>
 export default {
-  name: 'wt-headline',
+  name: 'WtHeadline',
 };
 </script>
 

package/src/components/wt-headline-nav/wt-headline-nav.vue

@@ -5,15 +5,22 @@
       :key="key"
       class="wt-headline-nav__wrapper"
     >
-      <span v-if="key !== 0" class="wt-headline-nav__indicator"></span>
+      <span
+        v-if="key !== 0"
+        class="wt-headline-nav__indicator"
+      />
       <h1 class="wt-headline-nav__title">
         <router-link
           v-if="singlePath.route"
           :to="singlePath.route"
           class="wt-headline-nav__text wt-headline-nav__text--link"
-        >{{ singlePath.name }}
+        >
+          {{ singlePath.name }}
         </router-link>
-        <span v-else class="wt-headline-nav__text">{{ singlePath.name }}</span>
+        <span
+          v-else
+          class="wt-headline-nav__text"
+        >{{ singlePath.name }}</span>
       </h1>
     </div>
   </nav>
@@ -77,7 +84,7 @@ const props = defineProps({
 }
 
 .wt-headline-nav__text {
-  color: var(--main-text-color);
+  color: var(--text-main-color);
 }
 
 .wt-headline-nav__wrapper:last-child {

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

@@ -1,18 +1,18 @@
 <template>
   <wt-tooltip class="wt-hint">
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="rounded-info"
         :color="iconColor"
-      ></wt-icon-btn>
+      />
     </template>
-    <slot></slot>
+    <slot />
   </wt-tooltip>
 </template>
 
 <script>
 export default {
-  name: 'wt-hint',
+  name: 'WtHint',
   props: {
     iconColor: {
       type: String,

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

@@ -2,13 +2,13 @@
   <i
     class="wt-icon"
     :class="[
-       `wt-icon--size-${size}`,
-       `wt-icon--color-${color}`,
-       { 'wt-icon--disabled': disabled },
-     ]"
+      `wt-icon--size-${size}`,
+      `wt-icon--color-${color}`,
+      { 'wt-icon--disabled': disabled },
+    ]"
   >
     <svg class="wt-icon__icon">
-      <use :xlink:href="iconName"></use>
+      <use :xlink:href="iconName" />
     </svg>
   </i>
 </template>

package/src/components/wt-icon-action/_internals/wt-add-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="plus"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('webitelUI.iconAction.addActionHint') }}
   </wt-tooltip>

package/src/components/wt-icon-action/_internals/wt-delete-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="bucket"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('webitelUI.iconAction.deleteActionHint') }}
   </wt-tooltip>

package/src/components/wt-icon-action/_internals/wt-download-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="download"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('webitelUI.iconAction.downloadActionHint') }}
   </wt-tooltip>

package/src/components/wt-icon-action/_internals/wt-edit-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="edit"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('webitelUI.iconAction.editActionHint') }}
   </wt-tooltip>

package/src/components/wt-icon-action/_internals/wt-history-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="history"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('webitelUI.iconAction.historyActionHint') }}
   </wt-tooltip>

package/src/components/wt-icon-action/_internals/wt-refresh-icon-action.vue

@@ -1,11 +1,11 @@
 <template>
   <wt-tooltip>
-    <template v-slot:activator>
+    <template #activator>
       <wt-icon-btn
         icon="refresh"
         :disabled="disabled"
         @click="emit('click')"
-      ></wt-icon-btn>
+      />
     </template>
     {{ $t('reusable.refresh') }}
   </wt-tooltip>

package/src/components/wt-icon-action/wt-icon-action.vue

@@ -3,7 +3,7 @@
     :is="actionComponent"
     :disabled="disabled"
     @click="emit('click')"
-  ></component>
+  />
 </template>
 
 <script setup>

package/src/components/wt-icon-btn/wt-icon-btn.vue

@@ -8,7 +8,7 @@
     <wt-icon
       v-bind="$attrs"
       :disabled="disabled"
-    ></wt-icon>
+    />
   </button>
 </template>
 

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

@@ -10,8 +10,11 @@
       :class="[
         `wt-indicator__indicator--${color}`,
       ]"
-    ></span>
-    <div v-if="isText" class="wt-indicator__text">
+    />
+    <div
+      v-if="isText"
+      class="wt-indicator__text"
+    >
       {{ text }}
     </div>
   </div>
@@ -19,7 +22,7 @@
 
 <script>
 export default {
-  name: 'wt-indicator',
+  name: 'WtIndicator',
   props: {
     color: {
       type: String,

package/src/components/wt-input/Readme.md

@@ -0,0 +1,96 @@
+```vue
+<template>
+  <div>
+    <wt-input
+      :value="this.value"
+      label="Input"
+      name="label-input"
+      @input="this.handler"
+    ></wt-input>
+
+    value: {{ this.value }}
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('');
+
+const handler = (e) => {
+  value.value = e;
+};
+</script>
+```
+
+```vue
+<template>
+  <wt-input
+    :value="this.value"
+    disabled
+    has-show-password
+    label="Disabled"
+    name="disabled-input"
+    type="password"
+    @input="this.handler"
+  ></wt-input>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('disabled value');
+
+const handler = (e) => {
+  value.value = e;
+};
+</script>
+```
+
+```vue
+<wt-input
+  v-model="value"
+  :v="vValid"
+  has-show-password
+  label="Password"
+  name="password-input"
+  type="password"
+></wt-input>
+```
+
+```vue
+<wt-input
+  v-model="value"
+  :v="vInvalid"
+  label="Invalid input"
+  name="invalid-input"
+></wt-input>
+```
+
+```vue
+
+<template>
+  <wt-input
+    :value="this.value"
+    label="After input slot usage"
+    @input="this.handler"
+  >
+    <template v-slot:after-input>
+      <wt-icon-btn icon="edit"></wt-icon-btn>
+      <wt-icon-btn icon="edit" size="sm"></wt-icon-btn>
+      <wt-icon-btn icon="edit"></wt-icon-btn>
+      <wt-icon-btn icon="edit" size="sm"></wt-icon-btn>
+    </template>
+  </wt-input>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('loooooooooooooooooooooooooooooooooooooooooong value');
+
+const handler = (e) => {
+  value.value = e;
+};
+</script>
+```