@policystudio/policy-studio-ui-vue 1.1.90-beta.12 → 1.1.90-beta.18

package/src/components/forms/PsInputSelect.vue

@@ -1,16 +1,16 @@
 <template>
   <div
     class="psui-el-input-select"
-    :class="[getComponentClass, {'selected':selectedClass}, {'disabled':disabled}]"
+    :class="[getComponentClass, { selected: selectedClass }, { disabled: disabled }]"
   >
     <label
       :for="label"
       v-if="label"
     >{{ label }}</label>
     <div class="psui-el-input-select-wrapper">
-      <select 
+      <select
         :name="label"
-        :id="label"  
+        :id="label"
         v-model="childValue"
       >
         <option
@@ -37,97 +37,96 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { defineProps, ref, computed, defineEmits } from 'vue'
 
-export default {
-  name: 'PsInputSelect',
-  props: {
-    /**
-     * It sets the items which will be rendered within the select input.
-     */
-    items: {
-      required: true
-    },
-    value: {
-      default: '',
-      required: true
-    },
-    /**
-     * It sets the value label of the select input if needed.
-     */
-    label: {
-      default: ''
-    },
-    /**
-     * It sets a o optional label below the select input.
-     */
-    optionalLabel:{
-      default:''
-    },
-    /**
-     * It sets the key label of your items if needed.
-     */
-    keyLabel: {
-      default: 'label'
-    },
-    /**
-     * It sets the key value of yout items if needed.
-     */
-    keyValue: {
-      default: 'value'
-    },
-    /**
-     * It disables the select input. All mouse events are disabled.
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * It sets the layout of the select input. eg: default and mini.
-     */
-    layout:{
-      type: String,
-      default: 'default',
-      validator: (value) => ['default','mini'].includes(value)
-    }
+const props = defineProps({
+  /**
+   * It sets the items which will be rendered within the select input.
+   */
+  items: {
+    required: true,
   },
-  data(){
-    return {
-      selectedClass: false,
-    }
+  value: {
+    default: '',
+    required: true,
   },
-  computed: {
-    getComponentClass(){
-      return `layout-${this.layout}`
-    },
-    childValue: {
-      get() {
-        return this.value
-      },
-      set(value) {
-        if(this.isString) return this.$emit('input', value)
-        const finded = find(this.items, { [this.keyValue]: value })
-        this.$emit('input', value)
-        this.$emit('change', finded)
-        this.selectedClass = true
-      }
-    },
-    isString() {
-      return  this.items.length > 0 && typeof this.items[0] === 'string'
-    },
-    getItems() {
-      if (this.items.length > 0 && typeof this.items[0] === 'string') {
-        return this.items.map((item) => { 
-          return {
-            [this.keyLabel]: item,
-            [this.keyValue]: item,
-          }
-        })
-      } else {
-        return this.items
-      }
-    },
+  /**
+   * It sets the value label of the select input if needed.
+   */
+  label: {
+    default: '',
+  },
+  /**
+   * It sets a o optional label below the select input.
+   */
+  optionalLabel: {
+    default: '',
+  },
+  /**
+   * It sets the key label of your items if needed.
+   */
+  keyLabel: {
+    default: 'label',
+  },
+  /**
+   * It sets the key value of yout items if needed.
+   */
+  keyValue: {
+    default: 'value',
+  },
+  /**
+   * It disables the select input. All mouse events are disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * It sets the layout of the select input. eg: default and mini.
+   */
+  layout: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['default', 'mini'].includes(value),
+  },
+})
+
+const emit = defineEmits('input', 'change')
+
+const selectedClass = ref(false)
+
+const getComponentClass = computed(() => {
+  return `layout-${props.layout}`
+})
+
+const childValue = computed({
+  get() {
+    return props.value
   },
-}
+  set(value) {
+    if (isString.value) return emit('input', value)
+    const finded = find(props.items, { [props.keyValue]: value })
+    emit('input', value)
+    emit('change', finded)
+    selectedClass.value = true
+  },
+})
+
+const isString = computed(() => {
+  return props.items.length > 0 && typeof props.items[0] === 'string'
+})
+
+const getItems = computed(() => {
+  if (props.items.length > 0 && typeof props.items[0] === 'string') {
+    return props.items.map((item) => {
+      return {
+        [props.keyLabel]: item,
+        [props.keyValue]: item,
+      }
+    })
+  } else {
+    return props.items
+  }
+})
 </script>

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>