@policystudio/policy-studio-ui-vue 1.1.90-beta.2 → 1.1.90-beta.20

package/src/components/forms/PsInputTextArea.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="psui-el-input-textarea"
-    :class="[{'disabled':disabled}]"
+    :class="[{ disabled: disabled }]"
   >
     <div class="psui-el-input-textarea-wrapper">
       <label
@@ -15,8 +15,8 @@
         :value="value"
         @focus="onInputFocus"
         @blur="onInputBlur"
-        @input="$emit('input', $event)"
-        @change="$emit('change', $event)"
+        @input="emit('input', $event)"
+        @change="emit('change', $event)"
         :rows="rows"
         :placeholder="placeholder"
         :readonly="disabled"
@@ -31,74 +31,74 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PsInputTextArea',
-  props: {
-    /**
-     * It sets the placeholder of the textarea input. 
-     */
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    /**
-     * It sets the value selected of the textarea input.
-     */
-    value: {
-      required: true,
-    },
-    /**
-     * It sets the label of the textarea input.
-     */
-    label: {
-      type: String,
-    },
-    /**
-     * It sets a optional label if needed.
-     */
-    optionalLabel:{
-      type: String,
-    },
-    /**
-     * It sets aria-required property. eg: true or false.
-     */
-    required:{
-      type: Boolean,
-      default:true
-    },
-    /**
-     * It sets the type of autocapitalize. See mdn web-doc for full information. default: sentences.
-     */
-    autocapitalize: {
-      type: String,
-      default: 'sentences'
-    },
-    /**
-     * It sets the size of the textarea input.
-     */
-    rows: {
-      type: Number,
-      default: 5
-    },
-    /**
-     * It disabled the textarea input. All mouse events are disabled.
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    }
+<script setup>
+import { defineProps, defineEmits } from 'vue'
+
+defineProps({
+  /**
+   * It sets the placeholder of the textarea input.
+   */
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  /**
+   * It sets the value selected of the textarea input.
+   */
+  value: {
+    required: true,
+  },
+  /**
+   * It sets the label of the textarea input.
+   */
+  label: {
+    type: String,
+    default: '',
+  },
+  /**
+   * It sets a optional label if needed.
+   */
+  optionalLabel: {
+    type: String,
+    default: '',
+  },
+  /**
+   * It sets aria-required property. eg: true or false.
+   */
+  required: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * It sets the type of autocapitalize. See mdn web-doc for full information. default: sentences.
+   */
+  autocapitalize: {
+    type: String,
+    default: 'sentences',
+  },
+  /**
+   * It sets the size of the textarea input.
+   */
+  rows: {
+    type: Number,
+    default: 5,
   },
-  methods: {
-    onInputFocus($event) {
-      this.isFocus = true
-      this.$emit('focus', $event)
-    },
-    onInputBlur($event) {
-      this.isFocus = false
-      this.$emit('blur', $event)
-    }
-  }
+  /**
+   * It disabled the textarea input. All mouse events are disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['focus', 'blur', 'input', 'change'])
+
+const onInputFocus = ($event) => {
+  emit('focus', $event)
 }
-</script>
 
+const onInputBlur = ($event) => {
+  emit('blur', $event)
+}
+</script>

package/src/components/navigations/PsBreadcrumb.vue

@@ -1,4 +1,4 @@
-<template>  
+<template>
   <nav
     v-if="items.length > 0"
     aria-label="breadcrumb"
@@ -13,7 +13,6 @@
         <router-link
           v-if="item.route && !item.isReset"
           :to="item.route"
-          @click="onNavigate(item)"
         >
           {{ item.title }}
         </router-link>
@@ -21,7 +20,7 @@
         <span
           v-else-if="item.isReset"
           class="psui-flex psui-items-center psui-cursor-pointer psui-text-blue-60 psui-font-bold"
-          @click="$emit('reset-state', item)"
+          @click="emit('reset-state', item)"
         >
           <PsIcon
             size="18"
@@ -32,8 +31,8 @@
           {{ item.title }}
         </span>
 
-        <span 
-          v-else 
+        <span
+          v-else
           :title="item.title"
         >
           {{ item.title }}
@@ -43,36 +42,29 @@
   </nav>
 </template>
 
-<script>
+<script setup>
 import PsIcon from '../ui/PsIcon.vue'
-export default {
-  name: 'PsBreadcrumb',
-  components: { PsIcon },
-  props: {
-    /**
-     * It sets the items which will be rendered.
-    */
-    items: {
-      type: [Array, Boolean],
-    },
-    /**
-     * It sets the li style.
-    */
-    liClass: {
-      type: String,
-      default: 'psui-text-small psui-text-gray-60'
-    }
+import { defineProps, defineEmits } from 'vue'
+
+defineProps({
+  /**
+   * It sets the items which will be rendered.
+   */
+  items: {
+    type: [Array, Boolean],
+    default: () => [],
   },
-  methods: {
-    onNavigate(item) {       
-      if (item.route === this.$route.path) {
-        this.$parent.closeDrawer()
-      }
-    },
-  }
-}
-</script>
+  /**
+   * It sets the li style.
+   */
+  liClass: {
+    type: String,
+    default: 'psui-text-small psui-text-gray-60',
+  },
+})
+
+const emit = defineEmits(['reset-state'])
 
-<style>
+</script>
 
-</style>
+<style></style>

package/src/components/notifications/PsDialog.vue

@@ -2,11 +2,11 @@
   <div
     class="psui-el-dialog"
     :class="getComponentClass"
-  >   
+  >
     <div class="psui-el-dialog-icon">
       <i class="material-icons-round">{{ icon }}</i>
     </div>
-    <div class="psui-el-dialog-wrapper">      
+    <div class="psui-el-dialog-wrapper">
       <div class="psui-el-dialog-default">
         <slot>
           <p class="psui-el-dialog-message">
@@ -19,8 +19,8 @@
       </div>
     </div>
     <button
-      class="psui-el-dialog-close" 
-      v-if="hasClose" 
+      class="psui-el-dialog-close"
+      v-if="hasClose"
       @click="onClose"
     >
       <i class="material-icons-round">close</i>
@@ -28,61 +28,62 @@
   </div>
 </template>
 
-<script>
+<script setup>
 // Figma - 3. Inline Dialog https://www.figma.com/file/Tto8hrNlSfuPcwd1pfqogF/%E2%9A%A1%EF%B8%8F-Design-System?node-id=3694%3A55841
-export default {
-  name: 'PsDialog',
-  props: {
-    /**
-     * It sets the theme of the dialog. eg: informative, success and alert.
-     */
-    theme: {
-      type: String,
-      default: 'informative',
-      validator: (value) => ['informative', 'success', 'alert'].includes(value)
-    },
-    /**
-     * It set the which will be displayed when component is rendered.
-     */
-    message: {
-      type: String,
-    },
-    /**
-     * It sets the direction of the items within the dialog. See Figma Notifications for full information.
-     */
-    layout:{
-      type: String,
-      default: 'horizontal',
-      validator: (value) => ['horizontal', 'vertical'].includes(value)
-    },
-    /**
-     * It sets a close button if needed.
-     */
-    hasClose: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * 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: 'info'
-    }
+
+import { defineProps, defineEmits, computed } from 'vue'
+
+const props = defineProps({
+  /**
+   * It sets the theme of the dialog. eg: informative, success and alert.
+   */
+  theme: {
+    type: String,
+    default: 'informative',
+    validator: (value) => ['informative', 'success', 'alert'].includes(value),
+  },
+  /**
+   * It set the which will be displayed when component is rendered.
+   */
+  message: {
+    type: String,
+    default: '',
+  },
+  /**
+   * It sets the direction of the items within the dialog. See Figma Notifications for full information.
+   */
+  layout: {
+    type: String,
+    default: 'horizontal',
+    validator: (value) => ['horizontal', 'vertical'].includes(value),
+  },
+  /**
+   * It sets a close button if needed.
+   */
+  hasClose: {
+    type: Boolean,
+    default: true,
   },
-  emits:['close'],
-  computed: {
-    getComponentClass() {
-      return [`layout-${this.layout}`, `theme-${this.theme}`, `close-${this.hasClose ? 'on' : 'off'}` ]
-    }
+  /**
+   * 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: 'info',
   },
-  methods:{
-    onClose(){
-      this.$emit('close')
-    }
-  }
+})
+
+const emit = defineEmits(['close'])
+
+const getComponentClass = computed(() => {
+  return [`layout-${props.layout}`, `theme-${props.theme}`, `close-${props.hasClose ? 'on' : 'off'}`]
+})
+
+const onClose = () => {
+  emit('close')
 }
 </script>
 
-<style> /* Please, use the file src/assets/scss/components/PsDialog.scss */</style>
-
+<style>
+/* Please, use the file src/assets/scss/components/PsDialog.scss */
+</style>

package/src/components/notifications/PsSimpleAlert.vue

@@ -2,7 +2,7 @@
   <div
     class="psui-el-simple-alert"
     v-bind="$attrs"
-    @click.stop="$emit('click')"
+    @click.stop="emit('click')"
   >
     <PsIcon
       :icon="icon"
@@ -15,41 +15,40 @@
     <button
       class="psui-el-simple-alert-button"
       :class="buttonClass"
-      @click.stop="$emit('close')"
+      @click.stop="emit('close')"
     >
       close
     </button>
   </div>
 </template>
 
-<script>
+<script setup>
 import PsIcon from '../ui/PsIcon.vue'
+import { defineProps, defineEmits } from 'vue'
 
+defineProps({
+  message: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: 'info',
+  },
+  iconClass: {
+    type: String,
+    default: '',
+  },
+  buttonClass: {
+    type: String,
+    default: '',
+  },
+  iconSize: {
+    type: [Number, String],
+    default: 24,
+  },
+})
+
+const emit = defineEmits(['click', 'close'])
 
-export default {
-    name: 'PsSimpleAlert',
-    components: { PsIcon },
-    props: {
-        message: {
-            type: String,
-            default: ''
-        },
-        icon: {
-            type: String,
-            default: 'info'
-        },
-        iconClass:{
-            type:String,
-            default: ''
-        },
-        buttonClass:{
-            type:String,
-            default: ''
-        },
-        iconSize:{
-            type: [Number, String],
-             default: 24
-        }
-    },
-}
 </script>

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 { defineProps, 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>