@policystudio/policy-studio-ui-vue 1.1.88 → 1.1.90-access.0

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

@@ -4,17 +4,18 @@
       <th
         v-for="columnGroup of header"
         :key="columnGroup.key"
-        :colspan="columnGroup.columns.reduce( (prev, cur) => cur.isActive ? prev + 1 : prev, 0 )"
+        :colspan="columnGroup.columns.reduce((prev, cur) => (cur.isActive ? prev + 1 : prev), 0)"
       >
         <div class="psui-flex psui-space-x-1 psui-items-center psui-show-childrens-on-hover">
-          <p class="title">{{ columnGroup.title }}</p>
+          <p class="title">
+            {{ columnGroup.title }}
+          </p>
           <PsIcon
-            icon="info"
-            size="18"
-            class="psui-cursor-pointer"
-            icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
+            icon="info_outline"
+            size="16"
+            class="psui-cursor-pointer psui-text-blue-40 hover:psui-text-blue-60 psui-opacity-0 psui-leading-none psui-transition"
             :style="{ display: 'flex' }"
-            @click.native="$emit('click-column-group-helper', columnGroup, $event)"
+            @click="emit('click-column-group-helper', columnGroup, $event)"
           />
         </div>
       </th>
@@ -22,40 +23,72 @@
 
     <tr>
       <template v-for="(columnGroup, columnGroupIndex) of header">
-        <th 
-          v-for="column of columnGroup.columns" 
+        <th
+          v-for="(column, index) of columnGroup.columns"
           :key="`${columnGroup.key}-${column.key}`"
           :data-test-id="column.key"
+          class="pr-0"
+          :class="{'pl-2':index == 0 && columnGroupIndex > 0}"
         >
-          <div 
-            class="psui-flex psui-flex-col psui-justify-center"
+          <div
+            class="psui-flex psui-flex-col psui-justify-center py-[7px]"
             :class="columnGroupIndex == 0 ? 'psui-items-center' : 'psui-items-end'"
             :data-index="columnGroupIndex"
+            @mouseleave="emit('column-alert-hide', column, $event, false)"
           >
-            <div class="psui-show-childrens-on-hover absolute-childrens psui-mb-px">
-              <p class="title" v-if="column.title">{{ column.title }}</p>
+            <div class="psui-show-childrens-on-hover absolute-childrens">
+              <p
+                v-tooltip="{
+                  content: column.description,
+                  placement: 'bottom',
+                  classes: 'custom-tooltip'
+                }"
+                class="title"
+                :class="{'is-warning-column': !!column.warning}"
+                v-if="column.title"
+              >
+                {{ column.title }}
+              </p>
+              <span
+                v-if="column.warning"
+                class="warning-svg-position"
+                @mouseover="emit('column-alert-show', column, $event, true)"
+              >
+                <span class="cursor-pointer">
+                  <svg
+                    width="10"
+                    height="10"
+                    viewBox="0 0 10 10"
+                    fill="none"
+                  >
+                    <circle
+                      cx="5"
+                      cy="5"
+                      r="4.5"
+                      fill="#EDAB3E"
+                    />
+                  </svg>
+                </span>
+              </span>
 
               <PsIcon
-                icon="info"
+                icon="info_outline"
                 size="16"
-                class="psui-cursor-pointer helper"
-                icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
-                :style="{ display: 'flex' }"
-                @click.native="$emit('click-column-helper', column, $event)"
+                class="helper psui-cursor-pointer psui-text-gray-40 hover:psui-text-blue-60 psui-opacity-0 psui-leading-none psui-transition"
+                :style="{ display: 'flex', marginTop: '1px' }"
+                @click="emit('click-column-helper', column, $event)"
               />
-              
+
               <PsIcon
                 v-if="showOrder"
                 :icon="orderDirection == 'asc' ? 'arrow_downward' : 'arrow_upward'"
                 :type="orderDirection == 'asc' ? 'arrow_upward' : 'arrow_upward'"
                 size="16"
-                class="psui-cursor-pointer helper"
-                icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
-                :style="{ display: 'flex' }"
-                @click.native="$emit('click-order-column', column)" 
+                class="helper psui-cursor-pointer psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
+                :style="{ display: 'flex', marginTop: '1px' }"
+                @click="emit('click-order-column', column)"
               />
             </div>
-            <p class="description" v-if="column.description">{{ column.description }}</p>
           </div>
         </th>
       </template>
@@ -63,55 +96,62 @@
   </thead>
 </template>
 
-<script>
+<script setup>
 import PsIcon from '../ui/PsIcon.vue'
-export default {
-  name: 'PsTableResultsHeadFlexible',
-  components: { PsIcon },
-  props: {
-    /**
-    * It sets the title for the first column.
-    */
-    firstColumnTitle: {
-      type: String,
-      default: ''
-    },
-    /**
-    * It sets the description for the first column.
-    */
-    firstColumnDescription: {
-      type: String,
-      default: ''
-    },
-    /**
-    * It sets the values which will be use to render the header.
-    */
-    header: {
-      type: Array,
-      required: true,
-      default: () => {
-        return []
-      },
-    },
-    /**
-    * this sets whether sorting will be displayed.
-    */
-    showOrder: {
-      type: Boolean,
-      default: false
-    }
+
+import { computed, getCurrentInstance } from 'vue'
+
+defineProps({
+  /**
+   * It sets the title for the first column.
+   */
+  firstColumnTitle: {
+    type: String,
+    default: '',
   },
-  computed: {
-    columnsSelectedForStudy() {
-      return this.$parent.columnsSelectedForStudy
-    },
-    orderColumn() {
-      return this.$parent.orderColumn
-    },
-    orderDirection() {
-      return this.$parent.orderDirection
+  /**
+   * It sets the description for the first column.
+   */
+  firstColumnDescription: {
+    type: String,
+    default: '',
+  },
+  /**
+   * It sets the values which will be use to render the header.
+   */
+  header: {
+    type: Array,
+    required: true,
+    default: () => {
+      return []
     },
-  }
-}
+  },
+  /**
+   * this sets whether sorting will be displayed.
+   */
+  showOrder: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['click-column-group-helper', 'click-column-helper', 'click-order-column', 'column-alert-show', 'column-alert-hide'])
+
+const parent = getCurrentInstance().proxy.$parent
+
+const columnsSelectedForStudy = computed(() => {
+  return parent.columnsSelectedForStudy
+})
+
+const orderColumn = computed(() => {
+  return parent.orderColumn
+})
+
+const orderDirection = computed(() => {
+  return parent.orderDirection
+})
 </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/table-results/PsTableResultsRow.vue

@@ -5,81 +5,84 @@
       :key="index"
     >
       <td>
-        <p class="title">{{ row.title }}</p>
+        <p class="title">
+          {{ row.title }}
+        </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"
         >
-          <p class="ps-table-cell-value">{{ row.data[column.key] }}</p>
+          <p class="ps-table-cell-value">
+            {{ row.data[column.key] }}
+          </p>
         </td>
       </template>
     </tr>
   </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,137 +1,159 @@
 <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">
-      <slot v-bind:item="item" >
-      <PsRichTooltip v-if="item.tooltip" :title="item.tooltip" layout="blue">
-        <template v-slot:trigger>
-          <button
-            :key="item[keyValue] + index"
-            type="button"
-            @click="selectTab(item)"
-            :class="getButtonClass(item)"
-          >
-                <span>{{ item[keyLabel] }}</span>              
-          </button>
-        </template>
-      </PsRichTooltip>
-        <button
-          v-else
-          :key="item[keyValue] + index"
+      <slot :item="item">
+        <PsRichTooltip
+          v-if="item.tooltip"
+          :title="item.tooltip"
+          layout="blue"
+        >
+          <template #trigger>
+            <button
+              :key="item[keyValue] + index"
+              type="button"
+              @click="selectTab(item)"
+              :class="getButtonClass(item).value"
+            >
+              <PsIcon
+                v-if="item.icon"
+                :icon="item.icon"
+                display="flex"
+                size="16"
+              />
+              <span>{{ item[keyLabel] }}</span>
+            </button>
+          </template>
+        </PsRichTooltip>
+        <button  
+          v-else       
           type="button"
+          :key="item[keyValue] + index"
           @click="selectTab(item)"
-          :class="getButtonClass(item)"
+          :class="getButtonClass(item).value"
         >
-              <span>{{ item[keyLabel] }}</span>              
+          <PsIcon
+            v-if="item.icon"
+            :icon="item.icon"
+            display="flex"
+            size="16"
+          />
+          <span>{{ item[keyLabel] }}</span>
         </button>
       </slot>
     </template>
-	</div>
+  </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 } from 'vue'
+import PsIcon from '../ui/PsIcon.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', 'policy-design'].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'
+  } 
+
+  return ''
+})
+
+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>