[DPEDE-1545] Create Transfer List page in Vue documentation (#1167)

Co-authored-by: Jose Lopez Ruiz <jose.luis@ctl.io>

src/documentation/constants/constants.ts

@@ -341,6 +341,11 @@ export const NAVIGATION_COMPONENTS_ITEMS = [
     label: 'Tooltip',
     source: 'pug',
   },
+  {
+    to: `components/transfer-list`,
+    label: 'Transfer list',
+    source: 'vue',
+  },
 ];
 export const NAVIGATION_TEMPLATE_ITEMS = [
   {

src/documentation/pages/components/transfer-list/_accessibility.vue

@@ -0,0 +1,10 @@
+<template lang="pug">
+AccessibilityComingSoon
+</template>
+
+<script lang="ts">
+import { Vue } from 'vue-facing-decorator';
+
+@NuxtComponent({})
+export default class Accessibility extends Vue {}
+</script>

src/documentation/pages/components/transfer-list/_properties.vue

@@ -0,0 +1,83 @@
+<template lang="pug">
+h2 JavaScript
+
+h3 Props
+section.chi-table.chi-table__options.-bordered.-my--3
+  div(style='overflow-x:auto;')
+    table.-types.-text(cellpadding='0', cellspacing='0')
+      thead
+        tr
+          th
+            div Property
+          th
+            div Description
+          th
+            div Interface
+          th
+            div Default
+      tbody
+        tr
+          td
+            div <code>config</code>
+          td
+            div To customize Transfer list details
+          td.-p--0
+            pre.-mb--0.
+              {
+                searchInput?: <code>boolean</code>;
+                checkbox?: <code>boolean</code>;
+                columns: {
+                  from: {
+                    title: <code>string</code>;
+                    description: <code>string</code>;
+                  };
+                  to: {
+                    title: <code>string</code>;
+                    description: <code>string</code>;
+                  };
+                };
+              }
+          td
+            div undefined
+        tr
+          td
+            div <code>transferListData</code>
+          td
+            div To provide Transfer list with data
+          td.-p--0
+            pre.-mb--0.
+              <code>TransferListRow[]</code>
+          td
+            div undefined
+
+h3 Interfaces and types
+section.chi-table.chi-table__options.-bordered.-my--3
+    div(style='overflow-x:auto;')
+      table.-types.-text(cellpadding='0', cellspacing='0')
+        thead
+          tr
+            th
+              div Name
+            th
+              div Interface
+        tbody
+          tr
+            td
+              div <code>TransferListRow</code>
+            td.-p--0
+              pre.-mb--0.
+                interface TransferListRow {
+                  value: <code>string</code>;
+                  label: <code>string</code>;
+                  selected: <code>boolean</code>;
+                  locked: <code>boolean</code>;
+                  wildcard: <code>boolean</code>;
+                }
+</template>
+
+<script lang="ts">
+import { Vue } from 'vue-facing-decorator';
+
+@NuxtComponent({})
+export default class Properties extends Vue {}
+</script>

src/documentation/pages/components/transfer-list/examples/_base.vue

@@ -0,0 +1,176 @@
+<template lang="pug">
+ComponentExample(title="Base" id="base" :tabs="exampleTabs")
+  template(#example)
+    ChiTransferList(:transferListData='transferListData', :config='config')
+  template(#code-vue)
+    Copy(lang="html" :code="codeSnippets.vue")
+</template>
+
+<script lang="ts">
+import { Vue } from 'vue-facing-decorator';
+
+@NuxtComponent({})
+export default class Base extends Vue {
+  exampleTabs = [
+    {
+      active: false,
+      id: 'webcomponent',
+      label: 'Web Component',
+      disabled: true,
+    },
+    {
+      active: true,
+      id: 'vue',
+      label: 'Vue',
+    },
+    {
+      active: false,
+      id: 'htmlblueprint',
+      label: 'HTML Blueprint',
+      disabled: true,
+    },
+  ];
+  transferListData = [
+    {
+      value: 'first',
+      label: 'First',
+      selected: false,
+      locked: false,
+      wildcard: false,
+    },
+    {
+      value: 'second',
+      label: 'Second',
+      selected: false,
+      locked: false,
+      wildcard: false,
+    },
+    {
+      value: 'third',
+      label: 'Third',
+      selected: true,
+      locked: true,
+      wildcard: false,
+    },
+    {
+      value: 'fourth',
+      label: 'Fourth',
+      selected: true,
+      locked: true,
+      wildcard: false,
+    },
+    {
+      value: 'fifth',
+      label: 'Fifth',
+      selected: true,
+      locked: false,
+      wildcard: false,
+    },
+    {
+      value: 'sixth',
+      label: 'Sixth',
+      selected: true,
+      locked: false,
+      wildcard: true,
+    },
+    {
+      value: 'seventh',
+      label: 'Seventh',
+      selected: true,
+      locked: false,
+      wildcard: true,
+    },
+  ];
+  config = {
+    searchInput: true,
+    checkbox: false,
+    columns: {
+      from: {
+        title: 'From',
+        description: 'Description from',
+      },
+      to: {
+        title: 'To',
+        description: 'Description to',
+      },
+    },
+  };
+  codeSnippets = {
+    vue: `<!-- Vue component -->
+<ChiTransferList
+  :transferListData="list"
+  :config="config"
+/>
+
+<!-- Config and Data -->
+data: {
+  config: {
+    searchInput: true,
+    checkbox: false,
+    columns: {
+      from: {
+        title: 'From',
+        description: 'Description from',
+      },
+      to: {
+        title: 'To',
+        description: 'Description to',
+      },
+    },
+  },
+  list: [
+    {
+      value: 'first',
+      label: 'First',
+      selected: false,
+      locked: false,
+      wildcard: false,
+    },
+    {
+      value: 'second',
+      label: 'Second',
+      selected: false,
+      locked: false,
+      wildcard: false,
+    },
+    {
+      value: 'third',
+      label: 'Third',
+      selected: true,
+      locked: true,
+      wildcard: false,
+    },
+    {
+      value: 'fourth',
+      label: 'Fourth',
+      selected: true,
+      locked: true,
+      wildcard: false,
+    },
+    {
+      value: 'fifth',
+      label: 'Fifth',
+      selected: true,
+      locked: false,
+      wildcard: false,
+    },
+    {
+      value: 'sixth',
+      label: 'Sixth',
+      selected: true,
+      locked: false,
+      wildcard: true,
+    },
+    {
+      value: 'seventh',
+      label: 'Seventh',
+      selected: true,
+      locked: false,
+      wildcard: true,
+    },
+  ]
+}`,
+    webcomponent: ``,
+  };
+}
+</script>

src/documentation/pages/components/transfer-list/examples/index.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+h2 Examples
+div
+  BaseExample
+</template>
+
+<script lang="ts">
+import { Vue } from 'vue-facing-decorator';
+import Base from './_base.vue';
+
+@NuxtComponent({
+  components: {
+    BaseExample: Base
+  },
+})
+export default class Examples extends Vue {}
+</script>

src/documentation/pages/components/transfer-list/index.vue

@@ -0,0 +1,30 @@
+<template lang="pug">
+<TitleBar title="Transfer list" description="Transfer list is used to organize and select items" :tabs="pageTabs" />
+.chi-grid__container.-pt--3
+  .chi-tabs-panel.-active#examples
+    <Examples />
+  .chi-tabs-panel#properties
+    <Properties />
+  .chi-tabs-panel#accessibility
+    <Accessibility />
+</template>
+
+<script lang="ts">
+import { Vue } from 'vue-facing-decorator';
+import Examples from './examples/index.vue';
+
+import Properties from './_properties.vue';
+import Accessibility from './_accessibility.vue';
+import { standardComponentPageTabs } from '@/constants/constants';
+
+@NuxtComponent({
+  components: {
+    Accessibility,
+    Examples,
+    Properties,
+  },
+})
+export default class TransferList extends Vue {
+  pageTabs = standardComponentPageTabs;
+}
+</script>

src/documentation/plugins/chi-vue.client.ts

@@ -18,6 +18,7 @@ const components = [
   'ChiColumnCustomization',
   'ChiSaveView',
   'ChiExpansionPanel',
+  'ChiTransferList',
 ];
 
 export default defineNuxtPlugin((nuxtApp) => {

src/website/layouts/partials/sidenav.pug

@@ -125,6 +125,9 @@ ul.chi-tabs.-vertical.-lg.-animated
                   if section.title === 'Steps'
                     li
                       a(href=`${rootPath}components/table`) Table
+                  if section.title === 'Tooltip'
+                    li
+                      a(href=`${rootPath}components/transfer-list`) Transfer list
       else
         li
           .chi-collection__title
@@ -224,6 +227,9 @@ ul.chi-tabs.-vertical.-lg.-animated
                   if section.title === 'Steps'
                     li
                       a(href=`${rootPath}components/table`) Table
+                  if section.title === 'Tooltip'
+                    li
+                      a(href=`${rootPath}components/transfer-list`) Transfer list
     else
       if key === "Utilities"
         li