@policystudio/policy-studio-ui-vue 1.1.90-beta.3 → 1.1.90-beta.31

package/src/components/notifications/PsToast.vue

@@ -13,46 +13,47 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PsToast',
-  props: {
-    /**
-     * It sets the layout of the toast. eg: info, success, warning and error.
-     */
-    layout: {
-      type: String,
-      default: 'info',
-      validator: (value) => ['info', 'success', 'warning', 'error'].includes(value)
-    },
-    /**
-     * It sets a supportive layout. eg: soft and intese. See Figma - Notification for full information.
-     */
-    fill: {
-      type: String,
-      default: 'intense',
-      validator: (value) => ['soft', 'intense'].includes(value)
-    },
-    /**
-     * It sets the message which will be displayed when component is rendered.
-     */
-    message: {
-      type: String,
-    },
-    /**
-     * It sets the text key to get the svg icon in Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/.
-     */
-    icon:{
-      type: String,
-    }
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  /**
+   * It sets the layout of the toast. eg: info, success, warning and error.
+   */
+  layout: {
+    type: String,
+    default: 'info',
+    validator: (value) => ['info', 'success', 'warning', 'error'].includes(value),
   },
-  computed: {
-    getComponentClass(){
-      return `layout-${this.layout} fill-${this.fill}`
-    }
+  /**
+   * It sets a supportive layout. eg: soft and intese. See Figma - Notification for full information.
+   */
+  fill: {
+    type: String,
+    default: 'intense',
+    validator: (value) => ['soft', 'intense'].includes(value),
   },
-}
-</script>
+  /**
+   * It sets the message which will be displayed when component is rendered.
+   */
+  message: {
+    type: String,
+    default: '',
+  },
+  /**
+   * It sets the text key to get the svg icon in Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/.
+   */
+  icon: {
+    type: String,
+    default: '',
+  },
+})
 
-<style> /* Please, use the file src/assets/scss/components/PsToast.scss */ </style>
+const getComponentClass = computed(() => {
+  return `layout-${props.layout} fill-${props.fill}`
+})
+</script>
 
+<style>
+/* Please, use the file src/assets/scss/components/PsToast.scss */
+</style>