feat: va-toast docs

closes epicmaxco#426

Co-authored-by: Damir Sadykov <damir.sadykov@fastdev.se>
Co-authored-by: Dmitry Kushnerevich <kushich.dmitry@gmail.com>

packages/docs/src/components/page-configs/ui-elements/va-toast/api-options.ts

@@ -0,0 +1,25 @@
+import { ManualApiOptions } from 'vuestic-ui/src/services/api-docs/ManualApiOptions'
+
+export default {
+  props: {
+    title: { local: true },
+    offsetY: { local: true },
+    offsetX: { local: true },
+    message: { local: true },
+    icon: { local: true },
+    customClass: { local: true },
+    duration: { local: true },
+    closeable: { local: true },
+    onClose: { local: true },
+    onClick: { local: true },
+    position: { local: true },
+    render: { local: true },
+    multiLine: { local: true },
+  },
+  events: {
+  },
+  methods: {
+  },
+  slots: {
+  },
+} as ManualApiOptions

packages/docs/src/components/page-configs/ui-elements/va-toast/page-config.ts

@@ -0,0 +1,111 @@
+import VaToast from 'vuestic-ui/src/components/vuestic-components/va-toast/VaToast.vue'
+import apiOptions from './api-options'
+import { BlockType, ApiDocsBlock } from '../../../../types/configTypes'
+
+export default [
+  {
+    type: BlockType.TITLE,
+    translationString: 'toast.title',
+  },
+  {
+    type: BlockType.PARAGRAPH,
+    translationString: 'toast.summaryText',
+  },
+  {
+    type: BlockType.SUBTITLE,
+    translationString: 'all.examples',
+  },
+  {
+    type: BlockType.HEADLINE,
+    translationString: 'toast.examples.default.title',
+  },
+  {
+    type: BlockType.PARAGRAPH,
+    translationString: 'toast.examples.default.text',
+  },
+  {
+    type: BlockType.EXAMPLE,
+    component: 'va-toast/Default',
+  },
+  {
+    type: BlockType.HEADLINE,
+    translationString: 'toast.examples.color.title',
+  },
+  {
+    type: BlockType.PARAGRAPH,
+    translationString: 'toast.examples.color.text',
+  },
+  {
+    type: BlockType.EXAMPLE,
+    component: 'va-toast/Color',
+  },
+  {
+    type: BlockType.HEADLINE,
+    translationString: 'toast.examples.offset.title',
+  },
+  {
+    type: BlockType.PARAGRAPH,
+    translationString: 'toast.examples.offset.text',
+  },
+  {
+    type: BlockType.EXAMPLE,
+    component: 'va-toast/Offset',
+  },
+  {
+    type: BlockType.HEADLINE,
+    translationString: 'toast.examples.position.title',
+  },
+  {
+    type: BlockType.PARAGRAPH,
+    translationString: 'toast.examples.position.text',
+  },
+  {
+    type: BlockType.EXAMPLE,
+    component: 'va-toast/Position',
+  },
+  {
+    type: BlockType.HEADLINE,
+    translationString: 'toast.examples.close.title',
+  },
+  {
+    type: BlockType.PARAGRAPH,
+    translationString: 'toast.examples.close.text',
+  },
+  {
+    type: BlockType.EXAMPLE,
+    component: 'va-toast/Close',
+  },
+  {
+    type: BlockType.HEADLINE,
+    translationString: 'toast.examples.click.title',
+  },
+  {
+    type: BlockType.PARAGRAPH,
+    translationString: 'toast.examples.click.text',
+  },
+  {
+    type: BlockType.EXAMPLE,
+    component: 'va-toast/Click',
+  },
+  {
+    type: BlockType.SUBTITLE,
+    translationString: 'all.api',
+  },
+  {
+    type: BlockType.API,
+    componentOptions: VaToast,
+    apiOptions,
+  },
+  {
+    type: BlockType.SUBTITLE,
+    translationString: 'all.faq',
+  },
+  {
+    type: BlockType.HEADLINE,
+    translationString: 'toast.faq.questions[0].question',
+  },
+  {
+    type: BlockType.PARAGRAPH,
+    translationString: 'toast.faq.questions[0].answer',
+  },
+] as ApiDocsBlock[]

packages/docs/src/components/sidebar/navigationRoutes.ts

@@ -275,6 +275,10 @@ export const navigationRoutes: NavigationRoute[] = [
         name: 'progress-circle',
         displayName: 'menu.progressCircle',
       },
+      {
+        name: 'toast',
+        displayName: 'menu.toast',
+      },
       // GENERATOR_ADD - uiElements
     ],
   },

packages/docs/src/examples/va-toast/Click.vue

@@ -0,0 +1,16 @@
+<template>
+  <va-button  @click="$vaToast.init({
+    message: 'Notification with onClick handler',
+    onClick: clickHandler
+  })">notification with custom onClick handler</va-button>
+</template>
+
+<script>
+export default {
+  methods: {
+    clickHandler () {
+      alert('clicked')
+    },
+  },
+}
+</script>

packages/docs/src/examples/va-toast/Close.vue

@@ -0,0 +1,18 @@
+<template>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({
+    message: 'Notification with onClose handler',
+    onClose: closeHandler
+  })">notification with custom onClose handler</va-button>
+  <va-button class="mr-2 mb-2" @click="$vaToast.close('notification_4')">Close #4 toast</va-button>
+  <va-button @click="$vaToast.closeAll()">Close all toasts</va-button>
+</template>
+
+<script>
+export default {
+  methods: {
+    closeHandler () {
+      alert('Toast closed')
+    },
+  },
+}
+</script>

packages/docs/src/examples/va-toast/Color.vue

@@ -0,0 +1,7 @@
+<template>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({ message: 'primary color', color: 'primary' })">primary</va-button>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({ message: 'success color', color: 'success' })">success</va-button>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({ message: 'danger color', color: 'danger' })">danger</va-button>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({ message: 'warning color', color: 'warning' })">warning</va-button>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({ message: '#5d0cf8 color', color: '#5d0cf8' })">#5d0cf8</va-button>
+</template>

packages/docs/src/examples/va-toast/Default.vue

@@ -0,0 +1,4 @@
+<template>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init('Hello')">Basic notification</va-button>
+  <va-button @click="$vaToast.init('\<span style=\'font-weight: bold\'>Bold message</span>')">HTML code inside</va-button>
+</template>

packages/docs/src/examples/va-toast/Offset.vue

@@ -0,0 +1,3 @@
+<template>
+  <va-button @click="$vaToast.init({message: 'Custom offsets, (Y: 100, X: 100)', offsetX: 100, offsetY: 100})">Y: 100, X: 100</va-button>
+</template>

packages/docs/src/examples/va-toast/Position.vue

@@ -0,0 +1,6 @@
+<template>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({message: 'Top-right', position: 'top-right'})">top-right</va-button>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({message: 'Top-left', position: 'top-left'})">top-left</va-button>
+  <va-button class="mr-2 mb-2" @click="$vaToast.init({message: 'Bottom-right', position: 'bottom-right'})">bottom-right</va-button>
+  <va-button @click="$vaToast.init({message: 'Bottom-left', position: 'bottom-left'})">bottom-left</va-button>
+</template>

packages/docs/src/locales/en/en.json

@@ -397,6 +397,26 @@
         "default": "Insert content (for horizontal only)"
       }
     },
+    "VaToast": {
+      "props": {
+        "title": "Sets the title for the notification",
+        "offsetY": "Sets the Y offset",
+        "offsetX": "Sets the X offset",
+        "message": "Notification message",
+        "icon": "Sets the close icon",
+        "customClass": "Applies custom class to the component",
+        "duration": "Sets the duration of the notification display",
+        "closeable":"Provides the ability to close the component",
+        "onClose":"Applies a function to use when pressed a close button",
+        "onClick":"Applies a function to use when clicked",
+        "position":"Sets the position of the notification",
+        "render":"Render function to use a custom content",
+        "multiLine": "Sets more space for the Toast component"
+      },
+      "events": {},
+      "methods": {},
+      "slots": {}
+    },
     "VaCard": {
       "props": {
         "stripe": "Displays a stripe above a card title.",
@@ -1003,7 +1023,8 @@
     "colorsConfig": "Colors Config",
     "cssVariables": "CSS Variables",
     "sidebarItem": "Sidebar Item",
-    "navbar": "Navbar"
+    "navbar": "Navbar",
+    "toast": "Toast"
   },
   "all": {
     "examples": "Examples",
@@ -1385,6 +1406,44 @@
       ]
     }
   },
+  "toast": {
+    "title": "Toast",
+    "summaryText": "Component for sending a notification to the user.",
+    "examples": {
+      "default": {
+        "title": "Basic usage",
+        "text": "By default, run this component in events by using the `init` method with a setting object."
+      },
+      "color": {
+        "title": "Color",
+        "text": "Set different colors using `color` prop. You can either user theme string *HEX* color value."
+      },
+      "offset": {
+        "title": "Offset",
+        "text": "Use `offset` property to set the offset of the toast."
+      },
+      "position": {
+        "title": "Position",
+        "text": "Use `position` property to set the custom position of the toast. Available are `top-right`, `top-left`, `bottom-right`, `bottom-left`."
+      },
+      "close": {
+        "title": "Close",
+        "text": "You can use close method to close the notification and you can set custom onClose event."
+      },
+      "click": {
+        "title": "Click",
+        "text": "You can set custom onClick event to handle the click on button."
+      }
+    },
+    "faq": {
+      "questions": [
+        {
+          "question": "What is the difference between a component and a service?",
+          "answer": "The difference is in implementation. The service behaves more flexibly and it is easier to bind it to certain events than to render the whole element. \n Each prop you provide to the component you can provide to the service too by using the setting object."
+        }
+      ]
+    }
+  },
   "modal": {
     "title": "Modal",
     "description": "Classic modal overlay which represents a dialog box or other interactive component, such as a dismissible alert, sub-window, etc.",

packages/docs/src/pages/ui-elements/toast.vue

@@ -0,0 +1,20 @@
+<template>
+  <docs-content :config="configComputed" />
+</template>
+
+<script lang="ts">
+import { Vue, Options } from 'vue-class-component'
+import DocsContent from '../../components/DocsContent.vue'
+import toastConfig from '../../components/page-configs/ui-elements/va-toast/page-config'
+
+@Options({
+  components: {
+    DocsContent,
+  },
+})
+export default class Toast extends Vue {
+  get configComputed () {
+    return toastConfig
+  }
+}
+</script>

packages/ui/.eslintrc.js

@@ -19,6 +19,7 @@ module.exports = {
     curly: ['error', 'all'],
     indent: ['error', 2, { ignoreComments: true }],
     'prefer-arrow-callback': 'error',
+    'lines-between-class-members': 'off',
     'array-bracket-spacing': ['error', 'never'],
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',

packages/ui/src/components/vuestic-components/va-slider/VaSlider.vue

@@ -165,7 +165,6 @@ class SliderProps {
     type: [Number, Array],
     default: () => [],
   })
-
   trackLabel = prop<string>({ type: String, default: '' })
   color = prop<string>({ type: String, default: 'primary' })
   trackColor = prop<string>({ type: String, default: '' })

packages/ui/src/components/vuestic-components/va-toast/VaToast.demo.vue

@@ -21,12 +21,19 @@
     <VbCard title="Custom onClose">
       <button @click="$vaToast.init(customOnCloseHandler)">notification with custom onClose handler</button>
     </VbCard>
-    <VbCard title="Close">
-      <button @click="$vaToast.close('notification_4')">Close #4 toast</button>
-    </VbCard>
     <VbCard title="Close All">
       <button @click="$vaToast.closeAll()">Close all toasts</button>
     </VbCard>
+    <VbCard title="Custom message">
+      <button @click="$vaToast.init(customMessage)">Custom message</button>
+    </VbCard>
+    <VbCard title="Multi-line">
+      <button @click="$vaToast.init(multiLine)">Multi-line</button>
+    </VbCard>
+    <VbCard title="Return ID">
+      <button @click="handleToast">Open Toast</button>
+      <button @click="$vaToast.close(handleId)">Close {{handleId}}</button>
+    </VbCard>
   </VbDemo>
 </template>
 
@@ -62,7 +69,32 @@ export default {
         message: 'Custom handler (bottom-right)',
         onClose: () => console.log('Handle onClose'),
       },
+      customMessage: {
+        message: 'Simple message',
+        render: (h) => {
+          return h('div', [
+            'This is a ',
+            h('span', { style: 'font-weight: bold' }, 'custom'),
+            ' render message',
+          ])
+        },
+      },
+      multiLine: {
+        message: 'Multi-line message',
+        multiLine: true,
+      },
+      handleId: null,
     }
   },
+  methods: {
+    handleToast () {
+      this.handleId = this.$vaToast.init({
+        message: `Toast ${this.handleId} is opened`, // this example is buggy because of lack of reactivity inside the toast data
+        onClose: () => {
+          this.handleId = null
+        },
+      })
+    },
+  },
 }
 </script>