@policystudio/policy-studio-ui-vue 1.0.24 → 1.0.28

package/src/components/tabs/PsTabHeader.vue

@@ -1,38 +1,45 @@
 <template>
-  <div :class="wrapperClasses" role="group">
-    <button
-      type="button" 
-      v-for="item in getItems" 
-      :key="item[keyValue]"
-      @click="selectTab(item)"
-      :class="[
-        'transition-default',
-        classes, 
-        { 'psui-bg-blue-60 psui-text-white': getSelected === item[keyValue] && theme === 'standard' },
-        { 'psui-border-blue-60 psui-text-blue-60': getSelected === item[keyValue] && theme === 'underline' },
-        { 'psui-text-blue-60 psui-font-bold psui-bg-white hover:psui-text-blue-60': getSelected === item[keyValue] && theme === 'folder' }
-      ]"
-    >
-      {{ item[keyLabel] }}
-    </button>
-  </div>
+  <div 
+    class="psui-el-tab-header" 
+    :class="[getComponentClass, `layout-${layout}`]" 
+    role="group"
+  >
+		
+    <template v-for="item in getItems">
+      <slot v-bind:item="item" >
+        <button
+          :key="item[keyValue]"
+          type="button"
+          @click="selectTab(item)"
+          :class="getButtonClass(item)"
+        >
+          <PsRichTooltip v-if="item.tooltip" :title="item.tooltip" type="blue">
+            <template v-slot:trigger>
+              <span>{{ item[keyLabel] }}</span>              
+            </template>
+          </PsRichTooltip>
+          <span v-else>{{ item[keyLabel] }}</span>
+        </button>
+      </slot>
+    </template>
+	</div>
 </template>
 
 <script>
-export const themeOptions = ['standard', 'underline', 'folder']
+import PsRichTooltip from '../tooltip/PsRichTooltip.vue'
 export default {
   name: 'PsTabHeader',
+  components: { PsRichTooltip },
   props: {
-    theme: {
+    layout: {
       type: String,
       default: 'standard',
-      validator: (value) => themeOptions.indexOf(value) !== -1
+      validator: (value) => ['standard', 'underline', 'folder'].includes(value)
     },
     items: {
       type: Array,
       required: true
     },
-    selected: {},
     keyLabel: {
       type: String,
       default: 'label'
@@ -40,26 +47,20 @@ export default {
     keyValue: {
       type: String,
       default: 'value'
-    }
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    selected: {},
   },
   computed: {
-    wrapperClasses() {
-      if (this.theme === 'underline') {
-        return 'psui-flex psui-space-x-4 psui-border-b psui-border-gray-20'
-      }
-      if (this.theme === 'folder') {
-        return 'psui-flex psui-space-x-1'
-      }
-      return 'psui-inline-flex psui-rounded-md psui-flex psui-gap-x-px'
-    },
-    classes() {
-      if (this.theme === 'underline') {
-        return 'psui-text-gray-60 psui-pb-3 psui-text-small psui-border-b-2 psui-border-transparent psui-font-bold hover:psui-text-blue-60'
-      }
-      if (this.theme === 'folder') {
-        return 'psui-bg-gray-10 psui-text-gray-50 psui-py-2 psui-px-4 psui-rounded-t-lg hover:psui-text-gray-60 active:psui-text-blue-60'
+    getComponentClass() {
+      if (this.disabled) {
+        return 'status-disabled'  
+      } else {
+        return 'status-resting'
       }
-      return 'psui-bg-gray-10 psui-px-4 psui-py-2 psui-text-gray-60 hover:psui-text-blue-60 last:psui-rounded-r-lg first:psui-rounded-l-lg active:psui-text-white active:psui-bg-blue-60'
     },
     getIsObject() {
       return typeof this.selected === 'object'
@@ -86,14 +87,25 @@ export default {
       } else {
         return this.items
       }
-    }
+    },
   },
   methods: {
     selectTab(item) {
-      this.$emit('update:selected', this.getIsObject ? item : item[this.keyValue] )
-      this.$emit('change', this.getIsObject ? item : item[this.keyValue])
+      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 }
+      }      
     }
   }
 
 }
 </script>
+
+<style> /* Please, use the file src/assets/scss/components/PsTabHeader.scss */</style>

package/src/components/tooltip/PsDialogTooltip.vue

@@ -1,17 +1,14 @@
 <template>
-  <PsTooltip :cssClass="getCssClass.content" :title="title">
+  <PsTooltip :layout="layout" :cssClass="cssClass" :title="title">
     <template v-slot:trigger>
-      <slot></slot>
+      <slot name="trigger"></slot>
     </template>
     <template
-      v-slot:dialog
-      class="psui-flex psui-fkex-col psui-gap-3 psui-items-start"
+      v-slot:content
     >
-      <p :class="type === 'white' ? 'psui-text-gray-50' : ''">{{ text }}</p>
+      <slot name="content"></slot> 
       <button
         v-if="buttonText"
-        class="psui-py-2 psui-px-4 psui-rounded-md"
-        :class="getCssClass.button"
         @click="onClick"
       >
         {{ buttonText }}
@@ -36,7 +33,7 @@ export default {
     buttonText: {
       type: String,
     },
-    type: {
+    layout: {
       type: String,
       default: "white",
       validator: (value) => ["white", "dark", "color"].includes(value),
@@ -47,33 +44,11 @@ export default {
     },
   },
   emits: ["click"],
-  computed: {
-    getCssClass() {
-        
-      if (this.type === "dark")
-        return {
-          content: `psui-bg-blue-70 psui-text-white ${this.cssClass}`,
-          button: `psui-bg-blue-60 psui-text-white`,
-        }
-      if (this.type === "color")
-        return {
-          content: `psui-bg-blue-50 psui-text-white ${this.cssClass}`,
-          button: `psui-bg-blue-60 psui-text-white`,
-        }
-
-        return { content: `psui-bg-white psui-text-gray-80 ${this.cssClass}`, button: `psui-bg-blue-20 psui-text-blue-60`,}
-    },
-  },
   methods: {
     onClick() {
-      this.$emit("click")
+      this.$emit("click", this.$event)
     },
   },
 }
 </script>
 
-<style scoped>
-button {
-  width: fit-content;
-}
-</style>>

package/src/components/tooltip/PsRichTooltip.vue

@@ -1,44 +1,37 @@
-<template>
-  <PsTooltip :cssClass="`${textColorClass} ${cssClass}`" :title="title">
-    <template v-slot:trigger>
-      <slot></slot>
-    </template>
-    <template v-slot:dialog>
-      <p v-if="text">{{text}}</p>
-    </template>
-  </PsTooltip>
-</template>
-
-<script>
-import PsTooltip from "../tooltip/PsTooltip.vue"
-
-export default {
-  name: "PsRichTooltip",
-  components: { PsTooltip },
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    type: {
-      type: String,
-      default: "gray",
-      validator: (type) => ["gray", "red", "blue"].includes(type),
-    },
-    text: {
-      type: String,
-    },
-    cssClass: {
-      type: String,
-      default: "",
-    },
-  },
-  computed: {
-    textColorClass() {
-      if (this.type === "red") return `psui-text-red-70 psui-bg-red-10 `
-      if (this.type === "blue") return `psui-bg-blue-70 psui-text-white`
-      return `psui-text-gray-80 psui-bg-gray-30 `
-    },
-  },
-}
-</script>
+<template>
+  <PsTooltip :layout="layout" :title="title" :cssClass="cssClass">
+    <template v-slot:trigger>
+      <slot name="trigger"></slot>
+    </template>
+    <template v-slot:content>
+      <slot name="content"></slot>
+    </template>
+  </PsTooltip>
+</template>
+
+<script>
+import PsTooltip from "../tooltip/PsTooltip.vue"
+
+export default {
+  name: "PsRichTooltip",
+  components: { PsTooltip },
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    layout: {
+      type: String,
+      default: "gray",
+      validator: (type) => ["gray", "red", "blue"].includes(type),
+    },
+    text: {
+      type: String,
+    },
+    cssClass: {
+      type: String,
+      default: "",
+    },
+  },
+}
+</script>

package/src/components/tooltip/PsTooltip.vue

@@ -1,39 +1,25 @@
 <template>
-  <div @mouseover="open" @mouseleave="close" ref="tooltip">
-    <div ref="tooltiptrigger">
+  <div @mouseover="open" @mouseleave="close" ref="tooltip" class='psui-el-tooltip'>
+    <div ref="tooltiptrigger" class='psui-el-tooltip-trigger'>
       <slot name="trigger"></slot>
     </div>
 
-    <div class="psui-relative">
+    <div class='psui-el-tooltip-wrapper'>
       <div
         role="menu"
         ref="dialog"
-        class="
-          psui-fixed
-          psui-hidden
-          psui-opacity-0
-          psui-transition-opacity
-          psui-duration-500
-          psui-ease-in-out
-        "
+        class='psui-el-tooltip-dialog'
+        :class="cssClass"
       >
         <div
-          class="
-            psui-flex
-            psui-flex-col
-            psui-rounded-md
-            psui-shadow-md
-            psui-z-20
-            psui-p-4
-          "
+          class="psui-el-tooltip-content"
           aria-orientation="vertical"
-          :class="cssClass"
+          :class="getComponentClass"
         >
-          <h2 v-if="title" class="psui-font-bold">{{ title}}</h2>
-          <slot name="dialog" class="psui-font-normal"
-            >
-          </slot
-          >
+          <h2 v-if="title">{{ title}}</h2>
+          <div class="psui-el-tooltip-content-wrapper">
+            <slot name="content"></slot>
+          </div>
         </div>
       </div>
     </div>
@@ -51,12 +37,11 @@ export default {
       type: Boolean,
       default: false,
     },
-    keepOpen: {
-      default: false,
+    layout:{
+        type: String,
     },
     cssClass:{
         type: String,
-        default: 'psui-bg-gray-50 psui-text-white'
     }
   },
   inheritAttrs: true,
@@ -67,6 +52,11 @@ export default {
       closingTimeout: null,
     }
   },
+  computed:{
+    getComponentClass(){
+      return `layout-${this.layout}`
+    }
+  },
   mounted() {
     document.addEventListener("resize", this.updatePosition)
   },

package/src/components/ui/PsIcon.vue

@@ -27,7 +27,7 @@ export default {
   props: {
     icon: {
       type: String,
-      required: true
+      default: 'more_horiz'
     },
     type: {
       type: String,
@@ -39,11 +39,11 @@ export default {
       type: [Number, String],
     },
     width: {
-      type: Number,
+      type: [Number, String],
       default: 24
     },
     height: {
-      type: Number,
+      type: [Number, String],
       default: 24
     },
     stroke: {
@@ -54,7 +54,7 @@ export default {
       type: String,
       default: null,
       validator: value => {
-        return value.includes('psui-text-') && 
+        return value?.includes('psui-text-') && 
           typeof(tailwindConfig.theme.colors[value.replace('psui-text-', '')]) != 'undefined' ||
           typeof(tailwindConfig.theme.colors[value]) != 'undefined'
       }
@@ -78,15 +78,15 @@ export default {
     getIconType() {
       if(this.imageLoadError || !this.finishedImageLoad) return 'material-icons'
       if(this.type) return this.type
-      if(!this.icon.includes('/')) return 'material-icons'
-      if(!this.icon.includes('.svg')) return 'url'
+      if(!this.icon?.includes('/')) return 'material-icons'
+      if(!this.icon?.includes('.svg')) return 'url'
       return 'svg'
     },
     getIcon() {
-      if(!this.icon.includes('/')) return this.icon
+      if(!this.icon?.includes('/')) return this.icon ? this.icon : this.loaderErrorIcon
       if(!this.finishedImageLoad && !this.imageLoadError && this.loaderIcon) return this.loaderIcon
       if(this.imageLoadError) return this.loaderErrorIcon
-      return this.icon ? this.icon : ''
+      return this.icon ? this.icon : this.loaderErrorIcon
     },
     getIconClasses() {
       if(this.iconClasses) return this.iconClasses
@@ -111,7 +111,7 @@ export default {
     }
   },
   mounted() {
-    if(this.icon.includes('/')) this.loadImage()
+    if(this.icon?.includes('/')) this.loadImage()
   },
   methods: {
     loadImage() {

package/src/index.js

@@ -18,8 +18,11 @@ import PsTooltip from './components/tooltip/PsTooltip.vue'
 import PsRichTooltip from './components/tooltip/PsRichTooltip.vue'
 import PsDialogTooltip from './components/tooltip/PsDialogTooltip.vue'
 import PsDraggable from './components/controls/PsDraggable.vue'
-// import PsCardInfos from './components/badges-and-tags/PsCardInfos.vue'
+import PsCardInfos from './components/badges-and-tags/PsCardInfos.vue'
 import PsChartLegend from './components/badges-and-tags/PsChartLegend.vue'
+import PsInlineSelector from './components/controls/PsInlineSelector.vue'
+import PsInputTextArea from './components/forms/PsInputTextArea.vue'
+import PsInputSelect from './components/forms/PsInputSelect.vue'
 
 export default {
   install(Vue) {
@@ -43,8 +46,11 @@ export default {
     Vue.component('PsRichTooltip', PsRichTooltip)
     Vue.component('PsDialogTooltip', PsDialogTooltip)
     Vue.component('PsDraggable', PsDraggable)
-    // Vue.component('PsCardInfos', PsCardInfos)
+    Vue.component('PsCardInfos', PsCardInfos)
     Vue.component('PsChartLegend', PsChartLegend)
+    Vue.component('PsInlineSelector', PsInlineSelector)
+    Vue.component('PsInputTextArea', PsInputTextArea)
+    Vue.component('PsInputSelect', PsInputSelect)
   },
 }
 
@@ -68,6 +74,9 @@ export {
   PsRichTooltip,
   PsDialogTooltip,
   PsDraggable,
-  // PsCardInfos,
+  PsCardInfos,
   PsChartLegend,
+  PsInlineSelector,
+  PsInputTextArea,
+  PsInputSelect
 }