docs: wt-status-select, wt-slider docs [WTEL-3955, WTEL-3956]

docs/pages/webitel-ui/components/wt-slider/Readme.md

@@ -0,0 +1,41 @@
+<script setup>
+import Docs from './wt-slider-docs.vue';
+import ExampleSlider from './examples/example-slider.vue';
+import ExampleDisabledSlider from './examples/example-disabled-slider.vue';
+import ExampleVerticalSlider from './examples/example-vertical-slider.vue';
+</script>
+
+# WtSlider
+
+## Props
+::: raw
+<Docs/>
+:::
+
+## Example Slider
+::: raw
+<ExampleSlider/>
+:::
+
+::: details Code
+<<< ./examples/example-slider.vue
+:::
+
+## Example Disabled Slider
+::: raw
+<ExampleDisabledSlider/>
+:::
+
+::: details Code
+<<< ./examples/example-disabled-slider.vue
+:::
+
+## Example Vertical Slider
+::: raw
+<ExampleVerticalSlider/>
+:::
+
+::: details Code
+<<< ./examples/example-vertical-slider.vue
+:::
+

docs/pages/webitel-ui/components/wt-slider/examples/example-disabled-slider.vue

@@ -0,0 +1,17 @@
+<script setup>
+
+</script>
+
+<template>
+  <wt-slider
+    :value="70"
+    :min="0"
+    :max="100"
+    :step="1"
+    disabled
+  />
+</template>
+
+<style scoped lang="scss">
+
+</style>

docs/pages/webitel-ui/components/wt-slider/examples/example-slider.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { ref } from 'vue';
+
+const number = ref(70);
+</script>
+
+<template>
+  <wt-slider
+    :value="number"
+    :min="0"
+    :max="100"
+    :step="1"
+    @input="number = $event"
+  />
+</template>
+
+<style scoped lang="scss">
+
+</style>

docs/pages/webitel-ui/components/wt-slider/examples/example-vertical-slider.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { ref } from 'vue';
+
+const number = ref(70);
+</script>
+
+<template>
+  <wt-slider
+    :value="number"
+    :min="0"
+    :max="100"
+    :step="1"
+    :height="150"
+    vertical
+    @input="number = $event"
+  />
+</template>
+
+<style scoped lang="scss">
+
+</style>

docs/pages/webitel-ui/components/wt-slider/wt-slider-docs.vue

@@ -1,41 +1,11 @@
 <template>
-  <section>
-    <h2>Slider</h2>
-    <article>
-      <div class="example-wrapper">
-        <wt-slider
-          :value="number"
-          :min="0"
-          :max="100"
-          :step="1"
-          @input="setNumber"
-        />
-        <pre><code class="language-html">&lt;wt-slider :value="70" :min="0" :max="100" :step="1" @input="setNumber"&gt;&lt;/wt-slider&gt;</code></pre>
-      </div>
-      <div class="example-wrapper">
-        <wt-label>Disabled</wt-label>
-        <wt-slider
-          disabled
-          :value="disabledValue"
-        />
-      </div>
-      <div class="example-wrapper">
-        <wt-label>Vertical</wt-label>
-        <wt-slider
-          v-model="verticalValue"
-          vertical
-          :height="100"
-        />
-      </div>
-    </article>
-    <component-model />
-    <component-props
-      :properties="properties"
-    />
-    <component-events
-      :events="events"
-    />
-  </section>
+  <component-model />
+  <component-props
+    :properties="properties"
+  />
+  <component-events
+    :events="events"
+  />
 </template>
 
 <script>
@@ -64,7 +34,7 @@ export default {
       },
       {
         value: 'max',
-        code: '<wt-slider :max=100></wt-slider>',
+        code: '<wt-slider :max="100"></wt-slider>',
         type: 'Number',
         default: 100,
         description: 'The biggest slider value',
@@ -110,11 +80,6 @@ export default {
   mounted() {
     Prism.highlightAll();
   },
-  methods: {
-    setNumber(value) {
-      this.number = value;
-    },
-  },
 };
 </script>
 

docs/pages/webitel-ui/components/wt-status-select/Readme.md

@@ -0,0 +1,20 @@
+<script setup>
+import Docs from './wt-status-select-docs.vue';
+import ExampleStatusSelect from './examples/example-status-select.vue';
+</script>
+
+# WtStatusSelect
+
+## Props
+::: raw
+<Docs/>
+:::
+
+## Example Status Select
+::: raw
+<ExampleStatusSelect/>
+:::
+
+::: details Code
+<<< ./examples/example-status-select.vue
+:::

docs/pages/webitel-ui/components/wt-status-select/examples/example-status-select.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { ref } from 'vue';
+// IMPORT ME FROM:
+// import AgentStatus from '@webitel/ui-sdk/src/enums/AgentStatus/AgentStatus.enum';
+import AgentStatus from '../../../../../../src/enums/AgentStatus/AgentStatus.enum';
+
+const status = ref(AgentStatus.ONLINE);
+</script>
+
+<template>
+<wt-status-select
+  :status="status"
+  @change="status = $event"
+></wt-status-select>
+</template>
+
+<style scoped lang="scss">
+
+</style>

docs/pages/webitel-ui/components/wt-status-select/wt-status-select-docs.vue

@@ -1,47 +1,34 @@
 <template>
-  <section>
-    <h2>Status select</h2>
-    <article>
-      <div class="example-wrapper">
-        <wt-status-select
-          v-model="status"
-        />
-        <pre><code class="language-html">
-          &lt;wt-status-select v-model="status"&gt;&lt;/wt-status-select&gt;
-        </code></pre>
-      </div>
-    </article>
-    <article>
-      <h3>Agent Status enum</h3>
-      <pre><code class="language-javascript">
+  <article>
+    <h3>Agent Status enum</h3>
+    <pre><code class="language-javascript">
           import AgentStatus from '@webitel/ui-sdk/src/enums/AgentStatus/AgentStatus.enum';
         </code></pre>
-      <p>
-        Enumerate with ONLINE ('online'), PAUSE ('pause'), OFFLINE ('offline'), BREAK_OUT ('break_out') values. Used
-        for agent status identifying and <b>recommended</b> for use in app logic
-      </p>
-    </article>
-    <article>
-      <h3>Status Options lookup</h3>
-      <pre><code class="language-javascript">
+    <p>
+      Enumerate with ONLINE ('online'), PAUSE ('pause'), OFFLINE ('offline'), BREAK_OUT ('break_out') values. Used
+      for agent status identifying and <b>recommended</b> for use in app logic
+    </p>
+  </article>
+  <article>
+    <h3>Status Options lookup</h3>
+    <pre><code class="language-javascript">
           import StatusOptions from '@webitel/ui-sdk/src/components/organisms/wt-status-select/_internals/StatusOptions.lookup';
         </code></pre>
-      <p>
-        Default wt-status-select options. Each option object contains "color",
-        "locale" (for this.$t(locale) usage) and AgentStatus enum value
-      </p>
-    </article>
-    <component-model
-      prop="status"
-      event="change"
-    />
-    <component-props
-      :properties="properties"
-    />
-    <component-events
-      :events="events"
-    />
-  </section>
+    <p>
+      Default wt-status-select options. Each option object contains "color",
+      "locale" (for this.$t(locale) usage) and AgentStatus enum value
+    </p>
+  </article>
+  <component-model
+    prop="status"
+    event="change"
+  />
+  <component-props
+    :properties="properties"
+  />
+  <component-events
+    :events="events"
+  />
 </template>
 
 <script>

src/components/wt-slider/_variables.scss

@@ -6,6 +6,10 @@
   --wt-slider-width: 100%;
   --wt-slider-input-height: 8px;
   --wt-slider-border: 1px solid var(--secondary-color);
+  --wt-slider-background-color: var(--secondary-color);
+  --wt-slider-background-completed-color: var(--primary-color);
+
+  --wt-slider-pointer-background-color: var(--white);
 
   --wt-slider-pointer-radius: 50%;
 

src/components/wt-slider/wt-slider.vue

@@ -24,7 +24,7 @@ and swapping height/width of this component in order to have the correct output.
     class="wt-slider"
   >
     <div
-      :style="{ width: !vertical && verticalHeight }"
+      :style="{ width: vertical && verticalHeight }"
       class="wt-slider__wrapper"
     >
       <!-- The row above is needed in order to set correct component width when slider is vertical -->
@@ -77,10 +77,11 @@ export default {
       default: 100,
     },
   },
+  emits: ['input'],
   computed: {
     progressStyle() { // To achieve the correct color styling:
       const progressPercent = ((this.value - this.min) / (this.max - this.min)) * 100;
-      return `linear-gradient(to right, var(--primary-color) ${progressPercent}%, var(--secondary-color) 0%)`;
+      return `linear-gradient(to right, var(--wt-slider-background-completed-color) ${progressPercent}%, var(--wt-slider-background-color) 0%)`;
     },
     verticalHeight() { // in order to have correct parent height after slider rotation
       return this.vertical ? `${this.height}px` : '100%';
@@ -123,7 +124,7 @@ export default {
     height: var(--wt-slider-pointer-size);
     border: var(--wt-slider-border);
     border-radius: var(--wt-slider-pointer-radius);
-    background: var(--main-color);
+    background: var(--wt-slider-pointer-background-color);
     -webkit-appearance: none;
   }
 
@@ -136,7 +137,7 @@ export default {
     height: var(--wt-slider-pointer-size);
     border: var(--wt-slider-border);
     border-radius: var(--wt-slider-pointer-radius);
-    background: var(--main-color);
+    background: var(--wt-slider-pointer-background-color);
     -moz-appearance: none;
   }
 

src/components/wt-status-select/_variables.scss

@@ -1,6 +1,8 @@
 
 :root {
-  --status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0 0; // reset wt-select padding, but preserve arrow icon padding
-  --status-select-option-color: var(--form-input-color);
-  --status-select-bg--hover-color: var(--secondary-color);
-}
+  --wt-status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0 0; // reset wt-select padding, but preserve arrow icon padding
+
+  --wt-status-select-option-text-color: var(--form-input-color);
+  --wt-status-select-option-background-hover-color: var(--secondary-color);
+  --wt-status-select-option-background-selected-color: var(--secondary-color);
+}

src/components/wt-status-select/wt-status-select.vue

@@ -52,6 +52,7 @@ export default {
     //   options: ['sm', 'md'],
     // },
   },
+  emits: ['change'],
   computed: {
     selectedOption() {
       return this.statusOptions.find((option) => option.value === this.status);
@@ -107,7 +108,7 @@ export default {
 
     .multiselect__tags {
       min-height: 0;
-      padding: var(--status-select-padding);
+      padding: var(--wt-status-select-padding);
       border: none;
     }
 
@@ -122,11 +123,15 @@ export default {
       .multiselect__option {
         min-height: 0;
         padding: 0;
-        color: var(--status-select-option-color);
+        color: var(--wt-status-select-option-text-color);
       }
 
       .multiselect__option--highlight {
-        background: var(--status-select-bg--hover-color);
+        background: var(--wt-status-select-option-background-hover-color);
+      }
+
+      .multiselect__option--selected {
+        background: var(--wt-status-select-option-background-selected-color);
       }
     }
   }