@policystudio/policy-studio-ui-vue 1.1.89 → 1.1.90-access.1

package/src/assets/scss/components/PsTooltip.scss

@@ -1,150 +1,154 @@
 @layer components {
-    .psui-el-tooltip {
-
-        .psui-el-tooltip-wrapper{
-            @apply psui-relative;
-
-            .psui-el-tooltip-dialog {
-                @apply psui-fixed psui-opacity-0 psui-transition-opacity psui-duration-300 psui-ease-in-out psui-z-10 psui-hidden;
-                transition-delay: 0.4s;
-
-                .psui-el-tooltip-content {
-                    @apply psui-flex psui-flex-col psui-bg-gray-50 psui-text-white;
-                    padding: 5px 8px 4px 8px;
-                    border-radius: 4px;
-
-                    h2 {
-                        @apply psui-font-bold;
-                    }
-
-                    .psui-el-tooltip-content-wrapper{
-                        @apply psui-text-xsmall psui-font-bold;
-                    }
-
-                    &.layout {
-                        &-gray {
-                            @apply psui-bg-gray-30 psui-text-gray-80 psui-shadow-none;
-                            font-size: 12px;
-                            line-height: 120%;
-                            padding: 10px 16px 12px 16px;
-                            
-                            .psui-el-tooltip-content-wrapper {
-                                @apply psui-font-normal psui-mt-1 
-                            }
-                        }
-
-                        &-blue {
-                            @apply psui-bg-blue-70 psui-text-white psui-shadow-none;
-                            font-size: 12px;
-                            line-height: 120%;
-                            padding: 10px 16px 12px 16px;
-                            
-                            .psui-el-tooltip-content-wrapper {
-                                @apply psui-font-normal psui-mt-1
-                            }
-                        }
-
-                        &-red {
-                            @apply psui-bg-red-10 psui-text-red-70 psui-shadow-none;
-                            font-size: 12px;
-                            line-height: 120%;
-                            padding: 10px 16px 12px 16px;
-
-                            .psui-el-tooltip-content-wrapper {
-                                @apply psui-font-normal psui-mt-1
-                            }
-                        }
-
-                        &-white {
-                            @apply psui-bg-white psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
-                            gap: 8.8px;
-                             
-                            h2 {
-                                @apply psui-text-gray-80 psui-font-bold;
-                                font-size: 17px;
-                                line-height: 120%;
-                            }
-
-                            .psui-el-tooltip-content-wrapper {
-                                @apply psui-text-gray-50 psui-font-normal psui-flex psui-flex-col;
-                                gap: 13.6px;
-                                font-size: 14px;
-                                line-height: 120%;
-
-                                button {
-                                    @apply  psui-rounded-md psui-bg-blue-20 psui-text-blue-60 psui-font-bold;
-                                    padding: 7px 16px;
-                                    width: fit-content;
-                                    
-                                    &:focus {
-                                        outline: none;
-                                    }
-                                }       
-                            }
-                        }
-
-                        &-dark {
-                            @apply psui-bg-blue-70 psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
-                            gap: 8.8px;
-                            
-                            h2 {
-                                @apply psui-text-white psui-font-bold;
-                                font-size: 17px;
-                                line-height: 120%;
-                            }
-
-                            .psui-el-tooltip-content-wrapper {
-                                @apply psui-text-white psui-font-normal  psui-flex psui-flex-col;
-                                gap: 13.6px;
-                                font-size: 14px;
-                                line-height: 120%;
-
-                                button {
-                                    @apply  psui-rounded-md psui-bg-blue-60 psui-text-white psui-font-bold;
-                                    padding: 7px 16px;
-                                    width: fit-content;
-
-                                    &:focus {
-                                        outline: none;
-                                    }
-
-                                }       
-                            }
-                        }
-
-                        &-color {
-                            @apply psui-bg-blue-50 psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
-                            gap: 8.8px; 
-
-
-                            h2 {
-                                @apply psui-text-white psui-font-bold;
-                                font-size: 17px;
-                                line-height: 120%;
-                            }
-
-                            .psui-el-tooltip-content-wrapper {
-                                @apply psui-text-white psui-font-normal psui-flex psui-flex-col;
-                                gap: 13.6px;
-                                font-size: 14px;
-                                line-height: 120%;
-
-                                button {
-                                    @apply  psui-rounded-md psui-bg-blue-60 psui-text-white psui-font-bold;
-                                    padding: 7px 16px;
-                                    width: fit-content;
-
-                                    &:focus {
-                                        outline: none;
-                                    }
-
-                                }       
-                            }
-                        }
-
-                    }
+  .psui-el-tooltip {
+    .psui-el-tooltip-wrapper {
+      @apply psui-relative;
+
+      .psui-el-tooltip-dialog {
+        @apply psui-fixed psui-opacity-0 psui-transition-opacity psui-duration-300 psui-ease-in-out psui-hidden;
+        transition-delay: 0.4s;
+        z-index: 999;
+
+        .psui-el-tooltip-content {
+          @apply psui-flex psui-flex-col psui-bg-gray-50 psui-text-white;
+          padding: 10px 16px 12px 16px;
+          border-radius: 4px;
+          font-family: Lato, sans-serif;
+          font-style: normal;
+
+          h2 {
+            font-size: 12px;
+            line-height: 120%;
+            font-weight: 700;
+          }
+
+          .psui-el-tooltip-content-wrapper {
+            font-size: 12px;
+            line-height: 120%;
+            font-weight: 400;
+
+            h2,
+            p {
+              font-size: 12px;
+              line-height: 120%;
+            }
+
+            h2 {
+              font-weight: 700;
+            }
+
+            p {
+              font-weight: 400;
+            }
+          }
+
+          &.layout-gray,
+          &.layout-blue,
+          &.layout-red,
+          &.layout-green {
+            @apply psui-shadow-none;
+            font-size: 12px;
+            line-height: 120%;
+            padding: 10px 16px 12px 16px;
+          }
+
+          &.layout-gray {
+            @apply psui-bg-gray-30 psui-text-gray-80;
+          }
+
+          &.layout-blue {
+            @apply psui-bg-blue-70 psui-text-white;
+          }
+
+          &.layout-red {
+            @apply psui-bg-red-10 psui-text-red-70;
+          }
+
+          &.layout-green {
+            @apply psui-items-center;
+            gap: 4px;
+            border-radius: 6px;
+            background: linear-gradient(270deg, #5db883 0%, #28b08e 100%);
+
+            h2,
+            .psui-el-tooltip-content-wrapper {
+              @apply psui-text-white;
+            }
+          }
+
+          &.layout-white,
+          &.layout-dark,
+          &.layout-color {
+            @apply psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
+            gap: 8.8px;
+
+            h2 {
+              font-size: 17px;
+              line-height: 120%;
+              font-weight: 700;
+            }
+
+            .psui-el-tooltip-content-wrapper {
+              @apply psui-flex psui-flex-col;
+              gap: 13.6px;
+              font-size: 14px;
+              line-height: 120%;
+              font-weight: 400;
+
+              button {
+                @apply psui-rounded-md psui-font-bold;
+                padding: 7px 16px;
+                width: fit-content;
+
+                &:focus {
+                  outline: none;
                 }
+              }
+            }
+          }
+
+          &.layout-white {
+            @apply psui-bg-white;
+
+            h2 {
+              @apply psui-text-gray-80;
+            }
+
+            .psui-el-tooltip-content-wrapper {
+              @apply psui-text-gray-50;
+
+              button {
+                @apply psui-bg-blue-20 psui-text-blue-60;
+              }
+            }
+          }
+
+          &.layout-dark {
+            @apply psui-bg-blue-70;
+
+            h2,
+            .psui-el-tooltip-content-wrapper {
+              @apply psui-text-white;
+            }
+
+            .psui-el-tooltip-content-wrapper button {
+              @apply psui-bg-blue-60 psui-text-white;
+            }
+          }
+
+          &.layout-color {
+            @apply psui-bg-blue-50;
+
+            h2,
+            .psui-el-tooltip-content-wrapper {
+              @apply psui-text-white;
+            }
+
+            .psui-el-tooltip-content-wrapper button {
+              @apply psui-bg-blue-60 psui-text-white;
             }
+          }
         }
+      }
     }
-}
+  }
+}

package/src/components/accordion/PsAccordion.vue

@@ -1,28 +1,27 @@
 <template>
-  <div class="psui-el-accordion" :class="getComponentClass">
-    <slot></slot>
+  <div
+    class="psui-el-accordion"
+    :class="getComponentClass"
+  >
+    <slot />
   </div>
 </template>
 
-<script>
-export const layouts = ['big', 'medium']
-export default {
-  name: 'PsAccordion',
-  props: {
-    /**
-     * It defines the size of the accordion items. eg: text size and font.
-     */
-    layout: {
-      type: String,
-      default: 'medium',
-      validator: (value) => ['medium','big'].includes(value),
-    },
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  layout:{
+    type: String,
+    default: 'medium',
+    validator: (value) => ['big', 'medium'].includes(value)
   },
-  computed: {
-    getComponentClass() {
-      return `layout-${this.layout}`
-    }
-  }
-}
+})
+
+const getComponentClass = computed(() => {
+  return `layout-${props.layout}`
+})
+
 </script>
+
 <style> /* Please, use the file src/assets/scss/components/PsAccordion.scss */</style>

package/src/components/accordion/PsAccordionItem.vue

@@ -1,11 +1,31 @@
 <template>
-  <div class="psui-el-accordion-item" :class="{'status-opened':isOpen, 'disabled':disabled}">
+  <div
+    class="psui-el-accordion-item"
+    :class="{ 'status-opened': isOpen, disabled: disabled }"
+    tabindex="0"
+  >
     <div class="psui-el-accordion-item-header">
-      <slot name='custom-header' :toggle="toggle" :isOpen="isOpen">
-        <div @click="toggle" class="psui-el-accordion-item-header-wrapper" v-if="!hasCustomHeader">
-          <h2 v-if="title" class="psui-el-accordion-item-title">{{ title }}</h2>
-          <slot name='header-additionals'></slot>
-          <i v-if="!disabled" class="psui-el-accordion-item-icon">{{ getIcon }}</i> 
+      <slot
+        name="custom-header"
+        :toggle="toggle"
+        :is-open="isOpen"
+      >
+        <div
+          @click="toggle"
+          class="psui-el-accordion-item-header-wrapper"
+          v-if="!hasCustomHeader"
+        >
+          <h2
+            v-if="title"
+            class="psui-el-accordion-item-title"
+          >
+            {{ title }}
+          </h2>
+          <slot name="header-additionals" />
+          <i
+            v-if="!disabled"
+            class="psui-el-accordion-item-icon"
+          >{{ getIcon }}</i>
         </div>
       </slot>
     </div>
@@ -16,91 +36,112 @@
       @before-leave="start"
       @after-leave="end"
     >
-      <div v-if="isOpen" class="psui-el-accordion-item-content">
-        <slot></slot>
+      <div
+        v-if="isOpen"
+        class="psui-el-accordion-item-content"
+      >
+        <slot />
       </div>
     </transition>
   </div>
 </template>
 
-<script>
-import { getParentVueComponentByName } from '../../util/GeneralFunctions'
-
-export default {
-  name: 'PsAccordionItem',
-  props: {
-    /**
-     * It sets the title of the accordion item.
-     */
-    title: {
-      type: String,
-    },
-    /**
-    * It sets the status of the accordion item when mounted. 
-    */
-    opened: {
-      type: [Boolean],
-      default: false
-    },
-    /**
-     * 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
-    },
-    /**
-     * It sets if it has a custom header.
-     */
-    hasCustomHeader: {
-      type: Boolean,
-      default: false
-    },
-    /**  
-    * It sets the disabled status.
-    */
-    disabled: {
-      type: Boolean,
-      default: false
-    }
+<script setup>
+import { getParentVueComponentByName } from '../../util/GeneralFunctions.js'
+import { ref, computed, getCurrentInstance  } from 'vue'
+
+defineExpose({
+  toggle: () => toggle()  
+})
+
+const localOpened = ref(null)
+
+const props = defineProps({
+  /**
+   * It sets the title of the accordion item.
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * It sets the status of the accordion item when mounted.
+   */
+  opened: {
+    type: [Boolean],
+    default: false,
+  },
+  /**
+   * 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: '',
   },
-  data() {
-    return {
-      localOpened: null,
-    }
+  /**
+   * It sets if it has a custom header.
+   */
+  hasCustomHeader: {
+    type: Boolean,
+    default: false,
   },
-  computed: {
-    isOpen() {
-      return this.localOpened !== null ? this.localOpened : this.opened
-    },
-    getParent() {
-      return getParentVueComponentByName(this,'PsAccordion')
-    },
-    getIcon(){
-      if(this.getParent._props.layout === 'medium') return 'expand_more'
-      if(this.getParent._props.layout === 'big' && this.isOpen === false) return 'add'
-      if(this.getParent._props.layout === 'big' && this.isOpen === true) return 'remove'
-      return `${this.icon}`
-    }
+  /**
+   * It sets the disabled status.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    toggle() {
-      if (this.localOpened === null) {
-        this.localOpened = !this.opened
-      } else {
-        this.localOpened = !this.localOpened
-      }
-    },
-    start(el) {
-      el.style.height = el.scrollHeight + 'px'
-      el.style.padding = el.srcollPaddingBottom + 'px'
-    },
-    end(el) {
-      el.style.height = ''
-      el.style.padding = ''
-    }
+})
+
+const isOpen = computed(() => {
+  return localOpened.value !== null ? localOpened.value : props.opened
+})
+
+const getParent = computed(() => {
+  const instance = getCurrentInstance()
+
+  if (instance?.parent) {
+    return getParentVueComponentByName(instance.parent, 'PsAccordion')
+  }
+
+  if (instance.proxy && instance.proxy.$parent) {
+    return getParentVueComponentByName(instance.proxy.$parent, 'PsAccordion')
+  }
+
+  return null
+})
+
+const getIcon = computed(() => {
+  if (!getParent.value) return
+
+  const layout = getParent.value._props ? getParent.value._props.layout : getParent?.value?.props.layout.default
+  if (layout === 'medium') return 'expand_more'
+  if (layout === 'big' && isOpen.value === false) return 'add'
+  if (layout === 'big' && isOpen.value === true) return 'remove'
+  return `${props.icon}`
+})
+
+const toggle = () => {
+  if (localOpened.value === null) {
+    localOpened.value = !props.opened
+  } else {
+    localOpened.value = !localOpened.value
   }
 }
+const start = (el) => {
+  el.style.height = el.scrollHeight + 'px'
+  el.style.padding = el.srcollPaddingBottom + 'px'
+}
+const end = (el) => {
+  el.style.height = ''
+  el.style.padding = ''
+}
 </script>
 
-<style> /* Please, use the file src/assets/scss/components/PsAccordion.scss */</style>
+<style>
+/* Please, use the file src/assets/scss/components/PsAccordion.scss */
+</style>
+
+
 

package/src/components/badges-and-tags/PsBadgeWithIcon.vue

@@ -1,43 +1,44 @@
 <template>
-  <div class="psui-el-badge-with-icon" :class="getComponentClass">
-    <i 
-      v-if="icon" 
+  <div
+    class="psui-el-badge-with-icon"
+    :class="getComponentClass"
+  >
+    <i
+      v-if="icon"
       :class="iconClass"
       class="psui-el-badge-with-icon-icon"
-    >{{icon}}</i>
-    <span class="psui-el-badge-with-icon-message">{{message}}</span>
+    >{{ icon }}</i>
+    <span class="psui-el-badge-with-icon-message">{{ message }}</span>
   </div>
 </template>
 
-<script>
-  export default {
-    name: 'PsBadgeWithIcon',
-    props: {
-      icon: {
-        type: String,
-        default:'info'
-      },
-      /**
-       * It set any further css style that might be needed.
-       */
-      iconClass: {
-        type: String
-      },
-      message: {
-        type: String,
-        default: 'Lorem ipsum'
-      },
-      layout: {
-        type: String,
-        default: 'grey',
-        validator: (value) => ['grey', 'blue', 'green','yellow'].includes(value)
-      }
-    },
-    computed:{
-      getComponentClass(){
-        return `layout-${this.layout}`
-      }
-    }
-  }
-</script>
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: 'info',
+  },
+  /**
+   * It set any further css style that might be needed.
+   */
+  iconClass: {
+    type: String,
+    default: '',
+  },
+  message: {
+    type: String,
+    default: 'Lorem ipsum',
+  },
+  layout: {
+    type: String,
+    default: 'grey',
+    validator: (value) => ['grey', 'blue', 'green', 'yellow'].includes(value),
+  },
+})
 
+const getComponentClass = computed(() => {
+  return `layout-${props.layout}`
+})
+</script>