docs: wt-pagination docs [WTEL-3947]

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

@@ -0,0 +1,20 @@
+<script setup>
+import Docs from './wt-pagination-docs.vue';
+import ExamplePagination from './examples/example-pagination.vue';
+</script>
+
+# WtPagination
+
+## Props
+::: raw
+<Docs/>
+:::
+
+## Example Pagination
+::: raw
+<ExamplePagination/>
+:::
+
+::: details Code
+<<< ./examples/example-pagination.vue
+:::

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

@@ -0,0 +1,27 @@
+<script setup>
+
+import { ref } from 'vue';
+
+const size = ref(10);
+const isNext = ref(true);
+const isPrev = ref(false);
+
+function alert(value) {
+  window.alert(value);
+}
+</script>
+
+<template>
+  <wt-pagination
+    :size="size"
+    :next="isNext"
+    :prev="isPrev"
+    @input="size = $event"
+    @next="alert('next')"
+    @prev="alert('prev')"
+  />
+</template>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -1,112 +1,89 @@
 <template>
-  <section>
-    <h2>Pagination</h2>
-    <article>
-      <div class="example-wrapper">
-        <wt-pagination
-          v-model="size"
-          :next="isNext"
-          :prev="isPrev"
-        />
-        <pre><code class="language-html">
-          &lt;wt-pagination
-            v-model="size"
-            :next="isNext"
-            :prev="isPrev"
-          &gt;
-          &lt;/wt-pagination&gt;
-        </code></pre>
-      </div>
-    </article>
-    <component-model
-      prop="size"
-      event="input"
-    />
-    <component-props
-      :properties="properties"
-    />
-    <component-events
-      :events="events"
-    />
-  </section>
+  <component-model
+    event="input"
+    prop="size"
+  />
+  <component-props
+    :properties="properties"
+  />
+  <component-events
+    :events="events"
+  />
 </template>
 
 <script>
-  import Prism from 'prismjs';
+import Prism from 'prismjs';
 
-  export default {
-    name: 'WtPaginationDocs',
-    data: () => ({
-      size: 10,
-      isNext: true,
-      isPrev: false,
-      properties: [
-        {
-          value: 'size',
-          code: '<wt-pagination :size="`10`"></wt-pagination>',
-          type: ['String', 'Number'],
-          default: '10',
-          description: 'SIZE CHANGE IS DEBOUNCED',
-        },
-        {
-          value: 'next',
-          code: '<wt-pagination :next="isNext"></wt-pagination>',
-          type: 'Boolean',
-          default: 'true',
-          description: 'Is false, disables paging arrow',
-        },
-        {
-          value: 'debounce',
-          code: '<wt-pagination ebounce></wt-pagination>',
-          type: 'Boolean',
-          default: 'false',
-          description: 'If true, @change event is delayed for debounceDelay from last change',
-        },
-        {
-          value: 'debounceDelay',
-          code: '<wt-pagination debounce-delay="2000" debounce></wt-pagination>',
-          type: 'Number',
-          default: '1000',
-        },
-      ],
-      events: [
-        {
-          value: 'input',
-          params: [
-            {
-              name: 'changed size value',
-              type: 'String',
-            },
-          ],
-        },
-        {
-          value: 'change',
-          params: [
-            {
-              name: 'changed size value',
-              type: 'String',
-              description: 'The same as input, but if "debounce" is true,event is debounced.',
-            },
-          ],
-        },
-        {
-          value: 'next',
-          params: [
-            { description: 'Event is triggered on "next" arrow click' },
-          ],
-        },
-        {
-          value: 'prev',
-          params: [
-            { description: 'Event is triggered on "prev" arrow click' },
-          ],
-        },
-      ],
-    }),
-    mounted() {
-      Prism.highlightAll();
-    },
-  };
+export default {
+  name: 'WtPaginationDocs',
+  data: () => ({
+    properties: [
+      {
+        value: 'size',
+        code: '<wt-pagination :size="`10`"></wt-pagination>',
+        type: ['String', 'Number'],
+        default: '10',
+        description: 'SIZE CHANGE IS DEBOUNCED',
+      },
+      {
+        value: 'next',
+        code: '<wt-pagination :next="isNext"></wt-pagination>',
+        type: 'Boolean',
+        default: 'true',
+        description: 'Is false, disables paging arrow',
+      },
+      {
+        value: 'debounce',
+        code: '<wt-pagination ebounce></wt-pagination>',
+        type: 'Boolean',
+        default: 'false',
+        description: 'If true, @change event is delayed for debounceDelay from last change',
+      },
+      {
+        value: 'debounceDelay',
+        code: '<wt-pagination debounce-delay="2000" debounce></wt-pagination>',
+        type: 'Number',
+        default: '1000',
+      },
+    ],
+    events: [
+      {
+        value: 'input',
+        params: [
+          {
+            name: 'changed size value',
+            type: 'String',
+          },
+        ],
+      },
+      {
+        value: 'change',
+        params: [
+          {
+            name: 'changed size value',
+            type: 'String',
+            description: 'The same as input, but if "debounce" is true,event is debounced.',
+          },
+        ],
+      },
+      {
+        value: 'next',
+        params: [
+          { description: 'Event is triggered on "next" arrow click' },
+        ],
+      },
+      {
+        value: 'prev',
+        params: [
+          { description: 'Event is triggered on "prev" arrow click' },
+        ],
+      },
+    ],
+  }),
+  mounted() {
+    Prism.highlightAll();
+  },
+};
 </script>
 
 <style lang="scss" scoped>