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

package/src/components/table-results/PsTableResultsRow.vue

@@ -10,9 +10,7 @@
         </p>
       </td>
 
-      <template 
-        v-for="(columnGroup, indexColumn) of columnGroups"
-      >
+      <template v-for="(columnGroup, indexColumn) of columnGroups">
         <td
           v-for="column of columnGroup.columns"
           :key="indexColumn + '-' + columnGroup.key + '-' + column.key"
@@ -26,64 +24,65 @@
   </tbody>
 </template>
 
-<script>
-export default {
-  name: 'PsTableResultsRow',
-  props: {
-    /**
-    * It sets the values which will be use to render the body.
-    */
-    summaryData: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    /**
-    * It sets the values which will be use to render the body.
-    */
-    columnGroups: {
-      type: Array,
-      default() {
-        return []
-      }
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  /**
+   * It sets the values which will be use to render the body.
+   */
+  summaryData: {
+    type: Array,
+    default() {
+      return []
     },
-    /**
-    * It sets the values which will be use to render the body.
-    */
-    rows: {
-      type: Array,
-      default() {
-        return []
-      }
+  },
+  /**
+   * It sets the values which will be use to render the body.
+   */
+  columnGroups: {
+    type: Array,
+    default() {
+      return []
     },
   },
-  computed: {
-    getRows() {
-      const rows = []
-      for (let index = 0; index < this.summaryData.length; index++) {
-        const item = this.summaryData[index]
-        this.addRow(item, 0, `${index}`, rows)
-      }
-      return rows
-    }
+  /**
+   * It sets the values which will be use to render the body.
+   */
+  rows: {
+    type: Array,
+    default() {
+      return []
+    },
   },
-  methods: {
-    addRow(item, deep = 0, index, rows) {
-      item.deep = deep
-      item.index = index
-      rows.push(item)
-      item.last_deep = item.items ? false : true
-      if (item.items) {
-        const items_child = [...item.items]
-        for (let indexChild = 0; indexChild < items_child.length; indexChild++) {
-          const item_child = items_child[indexChild]
-          item_child.is_last = indexChild + 1 === items_child.length ? true : false
-          this.addRow(item_child, deep + 1, `${index}-${indexChild}`, rows)					
-        }
-      }
+})
+
+const addRow = (item, deep = 0, index, rows) => {
+  item.deep = deep
+  item.index = index
+  rows.push(item)
+  item.last_deep = item.items ? false : true
+  if (item.items) {
+    const items_child = [...item.items]
+    for (let indexChild = 0; indexChild < items_child.length; indexChild++) {
+      const item_child = items_child[indexChild]
+      item_child.is_last = indexChild + 1 === items_child.length ? true : false
+      addRow(item_child, deep + 1, `${index}-${indexChild}`, rows)
     }
   }
 }
+
+const getRows = computed(() => {
+  const rows = []
+  for (let index = 0; index < props.summaryData.length; index++) {
+    const item = props.summaryData[index]
+    addRow(item, 0, `${index}`, rows)
+  }
+  return rows
+})
+
 </script>
-<style> /* Please, use the file src/assets/scss/components/PsTableResults.scss */ </style>
+
+<style>
+/* Please, use the file src/assets/scss/components/PsTableResults.scss */
+</style>

package/src/components/tabs/PsTabHeader.vue

@@ -1,7 +1,7 @@
 <template>
-  <div 
-    class="psui-el-tab-header" 
-    :class="[getComponentClass, `layout-${layout}`]" 
+  <div
+    class="psui-el-tab-header"
+    :class="[getComponentClass, `layout-${layout}`]"
     role="group"
   >
     <template v-for="(item, index) in getItems">
@@ -16,9 +16,9 @@
               :key="item[keyValue] + index"
               type="button"
               @click="selectTab(item)"
-              :class="getButtonClass(item)"
+              :class="getButtonClass(item).value"
             >
-              <span>{{ item[keyLabel] }}</span>              
+              <span>{{ item[keyLabel] }}</span>
             </button>
           </template>
         </PsRichTooltip>
@@ -27,114 +27,120 @@
           :key="item[keyValue] + index"
           type="button"
           @click="selectTab(item)"
-          :class="getButtonClass(item)"
+          :class="getButtonClass(item).value"
         >
-          <span>{{ item[keyLabel] }}</span>              
+          <span>{{ item[keyLabel] }}</span>
         </button>
       </slot>
     </template>
   </div>
 </template>
 
-<script>
+<script setup>
 import PsRichTooltip from '../tooltip/PsRichTooltip.vue'
-export default {
-  name: 'PsTabHeader',
-  components: { PsRichTooltip },
-  props: {
-    /**
-     * It sets the layout of the tabheader. eg: standard, underline and folder. 
-     */
-    layout: {
-      type: String,
-      default: 'standard',
-      validator: (value) => ['standard', 'underline', 'folder'].includes(value)
-    },
-    /**
-     * It sets the tabs which will be rendered.
-     */
-    items: {
-      type: Array,
-      required: true
-    },
-    /**
-     * It sets the key label of the items if needed.
-     */
-    keyLabel: {
-      type: String,
-      default: 'label'
-    },
-    /**
-     * It sets the key value of the items if needed.
-     */
-    keyValue: {
-      type: String,
-      default: 'value'
-    },
-    /**
-     * It disabled the tab header. All mouse events are disabled.
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * It sets the tab seleced.
-     */
-    selected: {},
+import { computed, defineEmits } from 'vue'
+
+const props = defineProps({
+  /**
+   * It sets the layout of the tabheader. eg: standard, underline and folder.
+   */
+  layout: {
+    type: String,
+    default: 'standard',
+    validator: (value) => ['standard', 'underline', 'folder'].includes(value),
   },
-  computed: {
-    getComponentClass() {
-      if (this.disabled) {
-        return 'status-disabled'  
-      } else {
-        return 'status-resting'
-      }
-    },
-    getIsObject() {
-      return typeof this.selected === 'object'
-    },
-    getSelected() {
-      if (this.selected) {
-        if (typeof this.selected === 'object' && this.selected[this.keyValue] ) {
-          return this.selected[this.keyValue]        
-        } else {
-          return this.selected
-        }
-      } else {
-        return false
-      }
-    },
-    getItems() {
-      if (this.items.length > 0 && typeof this.items[0] !== 'object') {
-        return this.items.map((item) => { 
-          return {
-            [this.keyLabel]: item,
-            [this.keyValue]: item
-          }
-        })
-      } else {
-        return this.items
-      }
-    },
+  /**
+   * It sets the tabs which will be rendered.
+   */
+  items: {
+    type: Array,
+    required: true,
   },
-  methods: {
-    selectTab(item) {
-      if (item.disabled !== true) {
-        this.$emit('update:selected', this.getIsObject ? item : item[this.keyValue] )
-        this.$emit('change', this.getIsObject ? item : item[this.keyValue])        
-      }
-    },
-    getButtonClass(item) {
-      if (item.disabled) {
-        return ['status-disabled']
-      } else {
-        return { 'status-active': this.getSelected === item[this.keyValue], 'status-enabled' : true }
-      }      
+  /**
+   * It sets the key label of the items if needed.
+   */
+  keyLabel: {
+    type: String,
+    default: 'label',
+  },
+  /**
+   * It sets the key value of the items if needed.
+   */
+  keyValue: {
+    type: String,
+    default: 'value',
+  },
+  /**
+   * It disabled the tab header. All mouse events are disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * It sets the tab seleced.
+   */
+  selected: {},
+})
+
+const emit = defineEmits(['change', 'update:selected'])
+
+const getComponentClass = computed(() => {
+  if (props.disabled) {
+    return 'status-disabled'
+  } else {
+    return 'status-resting'
+  }
+})
+
+const getIsObject = computed(() => {
+  return typeof props.selected === 'object'
+})
+
+const getSelected = computed(() => {
+  if (props.selected) {
+    if (typeof props.selected === 'object' && props.selected[props.keyValue]) {
+      return props.selected[props.keyValue]
+    } else {
+      return props.selected
     }
+  } else {
+    return false
+  }
+})
+
+const getItems = computed(() => {
+  if (props.items.length > 0 && typeof props.items[0] !== 'object') {
+    return props.items.map((item) => {
+      return {
+        [props.keyLabel]: item,
+        [props.keyValue]: item,
+      }
+    })
+  } else {
+    return props.items
   }
+})
 
+const selectTab = (item) => {
+  if (item.disabled !== true) {
+    emit('update:selected', getIsObject.value ? item : item[props.keyValue])
+    emit('change', getIsObject.value ? item : item[props.keyValue])
+  }
 }
+
+const getButtonClass = (item) => {
+  return computed(() => {
+    if (item.disabled) {
+      return ['status-disabled']
+    } else {
+      return { 'status-active': getSelected.value === item[props.keyValue], 'status-enabled': true }
+    }
+  })
+}
+
 </script>
 
-<style> /* Please, use the file src/assets/scss/components/PsTabHeader.scss */</style>
+<style>
+/* Please, use the file src/assets/scss/components/PsTabHeader.scss */
+</style>

package/src/components/tooltip/PsDialogTooltip.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     @mouseenter="open"
-    v-click-outside="close"
+    v-click-outside="close()"
     ref="tooltip"
     class="psui-el-tooltip"
   >
@@ -42,118 +42,113 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
 
-export default {
-  name: 'PsDialogTooltip',
-  props: {
-    /**
-     * It sets the title of the tooltip if needed.
-     */
-    title: {
-      type: String,
-    },
-    /**
-     * It sets the label of the button within the tooltip if needed.
-     */
-    buttonText: {
-      type: String,
-    },
-    /**
-     * It sets the layout of the tooltip. eg: white, dark and color.
-     */
-    layout: {
-      type: String,
-      default: 'white',
-      validator: (value) => ['white', 'dark', 'color'].includes(value),
-    },
-    /**
-     * It sets a additional styling if needed.
-     */
-    cssClass: {
-      type: String,
-      required: false,
-    },
-    /**
-     * It sets the vertical position.
-     */
-    position:{
-      type: String,
-      default: 'bottom',
-      validator: (value)=> ['bottom','top'].includes(value)
-    }
+const props = defineProps({
+  /**
+   * It sets the title of the tooltip if needed.
+   */
+  title: {
+    type: String,
+    default: '',
   },
-  inheritAttrs: true,
-  emits: ['show', 'click'],
-  data() {
-    return {
-      show: false,
-      closingTimeout: null,
-    }
+  /**
+   * It sets the label of the button within the tooltip if needed.
+   */
+  buttonText: {
+    type: String,
+    default: '',
   },
-  computed:{
-    getComponentClass(){
-      return `layout-${this.layout}`
-    }
+  /**
+   * It sets the layout of the tooltip. eg: white, dark and color.
+   */
+  layout: {
+    type: String,
+    default: 'white',
+    validator: (value) => ['white', 'dark', 'color'].includes(value),
   },
-  mounted() {
-    document.addEventListener('resize', this.updatePosition)
+  /**
+   * It sets a additional styling if needed.
+   */
+  cssClass: {
+    type: String,
+    default: '',
+    required: false,
   },
-  beforeUnmount() {
-    document.removeEventListener('resize', this.updatePosition)
+  /**
+   * It sets the vertical position.
+   */
+  position: {
+    type: String,
+    default: 'bottom',
+    validator: (value) => ['bottom', 'top'].includes(value),
   },
-  methods: {
-    open() {
-      if (this.show || this.ignoreDialog) return
-      this.$emit('show')
-      this.show = true
+})
 
-      this.$refs.dialog.style.display = 'block'
-      this.$refs.dialog.style.opacity = 0
+const emit = defineEmits(['show', 'click', 'close'])
 
-      setTimeout(() => {
-        this.updatePosition()
-      }, 10)
-    },
-    close() {
-      if (this.show && this.$refs.dialog) {
-        this.$emit('close')
-        this.show = false
+const show = ref(false)
+// const closingTimeout = ref(null)
+const dialog = ref(null)
+const tooltiptrigger = ref(null)
 
-        this.$refs.dialog.style.display = 'none'
-      }
-    },
-    updatePosition() {
-      const dialog = this.$refs.dialog
-      const trigger = this.$refs.tooltiptrigger
+const getComponentClass = computed(() => {
+  return `layout-${props.layout}`
+})
 
-      const rectDialog = dialog.getBoundingClientRect()
-      const rectTrigger = trigger.getBoundingClientRect()
-      const windowWidth = document.documentElement.clientWidth
-      dialog.style.top = `${rectTrigger.y + rectTrigger.height + 8}px`
+onMounted(() => {
+  document.addEventListener('resize', updatePosition)
+})
 
-      if (rectTrigger.x + rectDialog.width + 20 > windowWidth) {
-        dialog.style.left = `${windowWidth - rectDialog.width - 30}px`
-      } else if (rectTrigger.x - Math.abs(rectTrigger.width-rectDialog.width) < 0) {
-        dialog.style.left = `${rectTrigger.x + 10}px`  
-      } else if (rectDialog.width >= rectTrigger.width){
-        dialog.style.left = `${rectTrigger.x - ((rectDialog.width - rectTrigger.width)/2)}px`
-      } else {
-        dialog.style.left = `${rectTrigger.x + ((rectTrigger.width - rectDialog.width)/2)}px`
-      }
+onBeforeUnmount(() => {
+  document.removeEventListener('resize', updatePosition)
+})
 
-      if(this.position == 'top') {
-        dialog.style.top = `${rectTrigger.y - rectTrigger.height - 10}px`
-      }
+const open = () => {
+  if (show.value || props.ignoreDialog) return
+  emit('show')
+  show.value = true
+  dialog.value.style.display = 'block'
+  dialog.value.style.opacity = 0
+  setTimeout(() => {
+    updatePosition()
+  }, 10)
+}
 
-      setTimeout(() => {
-        dialog.style.opacity = 100
-      }, 100)
-    },
-    onClick() {
-      this.$emit('click', this.$event)
-    },
-  },
+const close = () => {
+  if (show.value && dialog.value) {
+    emit('close')
+    show.value = false
+    dialog.value.style.display = 'none'
+  }
 }
-</script>
 
+const updatePosition = () => {
+  const dialogPosition = dialog.value
+  const trigger = tooltiptrigger.value
+  const rectDialog = dialogPosition.getBoundingClientRect()
+  const rectTrigger = trigger.getBoundingClientRect()
+  const windowWidth = document.documentElement.clientWidth
+  dialogPosition.style.top = `${rectTrigger.y + rectTrigger.height + 8}px`
+  if (rectTrigger.x + rectDialog.width + 20 > windowWidth) {
+    dialogPosition.style.left = `${windowWidth - rectDialog.width - 30}px`
+  } else if (rectTrigger.x - Math.abs(rectTrigger.width - rectDialog.width) < 0) {
+    dialogPosition.style.left = `${rectTrigger.x + 10}px`
+  } else if (rectDialog.width >= rectTrigger.width) {
+    dialogPosition.style.left = `${rectTrigger.x - (rectDialog.width - rectTrigger.width) / 2}px`
+  } else {
+    dialogPosition.style.left = `${rectTrigger.x + (rectTrigger.width - rectDialog.width) / 2}px`
+  }
+  if (props.position == 'top') {
+    dialogPosition.style.top = `${rectTrigger.y - rectTrigger.height - 10}px`
+  }
+  setTimeout(() => {
+    dialogPosition.style.opacity = 100
+  }, 100)
+}
+
+const onClick = ($event) => {
+  emit('click', $event)
+}
+</script>

package/src/components/tooltip/PsRichTooltip.vue

@@ -1,11 +1,11 @@
 <template>
-  <PsTooltip
-    :layout="layout"
-    :title="title"
-    :css-class="cssClass"
-    :position="position"
-    :ignore-dialog="ignoreDialog"
-    :custom-position="customPosition"
+  <PsTooltip
+    :layout="layout"
+    :title="title"
+    :css-class="cssClass"
+    :position="position"
+    :ignore-dialog="ignoreDialog"
+    :custom-position="customPosition"
   >
     <template #trigger>
       <slot name="trigger" />
@@ -16,45 +16,41 @@
   </PsTooltip>
 </template>
 
-<script>
+<script setup>
 import PsTooltip from '../tooltip/PsTooltip.vue'
 
-export default {
-  name: 'PsRichTooltip',
-  components: { PsTooltip },
-  props: {
-    /**
-     * It sets the title of the tooltip if needed.
-     */
-    title: {
-      type: String,
-      default: '',
-    },
-    /**
-     * It sets the layout of the tooltip. eg: gray, red and blue.
-     */
-    layout: {
-      type: String,
-      default: 'gray',
-      validator: (type) => ['gray', 'red', 'blue'].includes(type),
-    },
-    cssClass: {
-      type: String,
-      default: '',
-    },
-    position: {
-      type: String,
-      default: 'bottom',
-      validator: (value)=> ['bottom', 'top', 'custom'].includes(value)
-    },
-    ignoreDialog: {
-      type: Boolean,
-      default: false
-    },
-    customPosition: {
-      type: String,
-      default: '',
-    }
+defineProps({
+  /**
+   * It sets the title of the tooltip if needed.
+   */
+  title: {
+    type: String,
+    default: '',
   },
-}
+  /**
+   * It sets the layout of the tooltip. eg: gray, red and blue.
+   */
+  layout: {
+    type: String,
+    default: 'gray',
+    validator: (type) => ['gray', 'red', 'blue'].includes(type),
+  },
+  cssClass: {
+    type: String,
+    default: '',
+  },
+  position: {
+    type: String,
+    default: 'bottom',
+    validator: (value) => ['bottom', 'top', 'custom'].includes(value),
+  },
+  ignoreDialog: {
+    type: Boolean,
+    default: false,
+  },
+  customPosition: {
+    type: String,
+    default: '',
+  },
+})
 </script>