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

package/src/components/tooltip/PsDialogTooltip.vue

@@ -1,14 +1,22 @@
 <template>
-  <div @mouseenter="open" v-click-outside="close" ref="tooltip" class='psui-el-tooltip'>
-    <div ref="tooltiptrigger" class='psui-el-tooltip-trigger'>
-      <slot name="trigger"></slot>
+  <div
+    @mouseenter="open"
+    v-click-outside="close()"
+    ref="tooltip"
+    class="psui-el-tooltip"
+  >
+    <div
+      ref="tooltiptrigger"
+      class="psui-el-tooltip-trigger"
+    >
+      <slot name="trigger" />
     </div>
 
-    <div class='psui-el-tooltip-wrapper'>
+    <div class="psui-el-tooltip-wrapper">
       <div
         role="menu"
         ref="dialog"
-        class='psui-el-tooltip-dialog'
+        class="psui-el-tooltip-dialog"
         :class="cssClass"
       >
         <div
@@ -16,9 +24,11 @@
           aria-orientation="vertical"
           :class="getComponentClass"
         >
-          <h2 v-if="title">{{ title}}</h2>
+          <h2 v-if="title">
+            {{ title }}
+          </h2>
           <div class="psui-el-tooltip-content-wrapper">
-            <slot name="content"></slot>
+            <slot name="content" />
             <button
               v-if="buttonText"
               @click="onClick"
@@ -32,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,
   },
-  beforeDestroy() {
-    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,53 +1,56 @@
 <template>
-  <PsTooltip :layout="layout" :title="title" :cssClass="cssClass" :position="position" :ignoreDialog="ignoreDialog" :customPosition="customPosition">
-    <template v-slot:trigger>
-      <slot name="trigger"></slot>
+  <PsTooltip
+    :layout="layout"
+    :title="title"
+    :css-class="cssClass"
+    :position="position"
+    :ignore-dialog="ignoreDialog"
+    :custom-position="customPosition"
+  >
+    <template #trigger>
+      <slot name="trigger" />
     </template>
-    <template v-slot:content>
-      <slot name="content"></slot>
+    <template #content>
+      <slot name="content" />
     </template>
   </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', 'green'].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>

package/src/components/tooltip/PsTooltip.vue

@@ -1,21 +1,22 @@
 <template>
-  <div 
-    ref="tooltip" 
-    class='psui-el-tooltip'
-    @mouseenter="open" 
-    @mouseleave="close" 
+  <div
+    ref="PsTooltip"
+    class="psui-el-tooltip"
+    @mouseenter="open"
+    @mouseleave="close"
   >
-    <div ref="tooltiptrigger" class='psui-el-tooltip-trigger'>
-      <slot name="trigger"></slot>
+    <div
+      ref="PsTooltipTrigger"
+      class="psui-el-tooltip-trigger"
+    >
+      <slot name="trigger" />
     </div>
 
-    <div 
-      class='psui-el-tooltip-wrapper'
-    >
+    <div class="psui-el-tooltip-wrapper">
       <div
         role="menu"
-        ref="dialog"
-        class='psui-el-tooltip-dialog'
+        ref="PsTooltipDialog"
+        class="psui-el-tooltip-dialog"
         :class="cssClass"
       >
         <div
@@ -23,9 +24,14 @@
           aria-orientation="vertical"
           :class="getComponentClass"
         >
-          <h2 v-if="title">{{ title}}</h2>
-          <div v-else class="psui-el-tooltip-content-wrapper">
-            <slot name="content"></slot>
+          <h2 v-if="title">
+            {{ title }}
+          </h2>
+          <div
+            v-else
+            class="psui-el-tooltip-content-wrapper"
+          >
+            <slot name="content" />
           </div>
         </div>
       </div>
@@ -33,125 +39,123 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PsTooltip',
-  props: {
-    /**
-     * It sets the title of the tooltip if needed.
-     */
-    title: {
-      type: String,
-    },
-    /**
-     * It disables the dialog section.
-     */
-    ignoreDialog: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * It sets the layout of the tooltip if needed. Usefull when using rich or dialog tooltip.
-     */
-    layout: {
-      type: String,
-    },
-    /**
-     * It sets a additional styling if needed.
-     */
-    cssClass: {
-      type: String,
-    },
-    /**
-     * It sets the vertical position.
-     */
-    position: {
-      type: String,
-      default: 'bottom',
-      validator: (value)=> ['bottom','top', 'custom'].includes(value)
-    },
-    /**
-     * It sets the custom positions.
-     */
-    customPosition: {
-      type: String,
-      default: '',
-    }
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  /**
+   * It sets the title of the tooltip if needed.
+   */
+  title: {
+    type: String,
+    default: '',
   },
-  inheritAttrs: true,
-  emits: ['show'],
-  data() {
-    return {
-      show: false,
-      closingTimeout: null,
-    }
+  /**
+   * It disables the dialog section.
+   */
+  ignoreDialog: {
+    type: Boolean,
+    default: false,
   },
-  computed:{
-    getComponentClass(){
-      return `layout-${this.layout}`
-    },
+  /**
+   * It sets the layout of the tooltip if needed. Usefull when using rich or dialog tooltip.
+   */
+  layout: {
+    type: String,
+    default: '',
   },
-  mounted() {
-    document.addEventListener('resize', this.updatePosition)
+  /**
+   * It sets a additional styling if needed.
+   */
+  cssClass: {
+    type: String,
+    default: '',
   },
-  beforeDestroy() {
-    document.removeEventListener('resize', this.updatePosition)
+  /**
+   * It sets the vertical position.
+   */
+  position: {
+    type: String,
+    default: 'bottom',
+    validator: (value) => ['bottom', 'top', 'custom'].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
+  /**
+   * It sets the custom positions.
+   */
+  customPosition: {
+    type: String,
+    default: '',
+  },
+})
 
-      setTimeout(() => {
-        this.updatePosition()
-      }, 10)
-    },
-    close() {
-      if (this.show && this.$refs.dialog) {
-        this.$emit('close')
-        this.show = false
+const emit = defineEmits(['show', 'close'])
 
-        this.$refs.dialog.style.display = 'none'
-      }
-    },
-    updatePosition() {
-      const dialog = this.$refs.dialog
-      const trigger = this.$refs.tooltiptrigger
+const show = ref(false)
+// const closingTimeout = ref(null)
+const PsTooltip = ref(null)
+const PsTooltipTrigger = ref(null)
+const PsTooltipDialog = ref(null)
 
-      const rectDialog = dialog.getBoundingClientRect()
-      const rectTrigger = trigger.getBoundingClientRect()
-      const windowWidth = document.documentElement.clientWidth
+const getComponentClass = computed(() => {
+  return `layout-${props.layout}`
+})
 
-      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 - rectDialog.width) < 0) {
-        dialog.style.left = `${rectTrigger.x + 10}px`  
-      } else if (rectDialog.width >= rectTrigger.width && this.position != 'custom') {
-        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 - rectDialog.height - 10}px`
-      }
+const open = () => {
+  if (show.value || props.ignoreDialog) return
+  emit('show')
+  show.value = true
+  const dialog = PsTooltipDialog.value
+  dialog.style.display = 'block'
+  dialog.style.opacity = 0
+  setTimeout(() => {
+    updatePosition()
+  }, 10)
+}
 
-      if(this.position == 'custom') {
-        dialog.style = this.customPosition
-        dialog.style.display = 'block'
-        dialog.style.position = 'absolute'
-      }
+const close = () => {
+  const dialog = PsTooltipDialog.value
+  if (show.value && dialog) {
+    emit('close')
+    show.value = false
+    dialog.style.display = 'none'
+  }
+}
 
-      setTimeout(() => {
-        dialog.style.opacity = 100
-      }, 100)
-    },
-  },
+const updatePosition = () => {
+  const dialog = PsTooltipDialog.value
+  const trigger = PsTooltipTrigger.value
+  const rectDialog = dialog?.getBoundingClientRect()
+  const rectTrigger = trigger?.getBoundingClientRect()
+  const windowWidth = document.documentElement.clientWidth
+  if(dialog) dialog.style.top = `${rectTrigger.y + rectTrigger.height + 8}px`
+  if (rectTrigger && rectTrigger.x + rectDialog.width + 20 > windowWidth) {
+    dialog.style.left = `${windowWidth - rectDialog.width - 30}px`
+  } else if (rectTrigger && rectTrigger.x - rectDialog.width < 0) {
+    dialog.style.left = `${rectTrigger.x + 10}px`
+  } else if (rectTrigger && rectDialog.width >= rectTrigger.width && props.position != 'custom') {
+    dialog.style.left = `${rectTrigger.x - (rectDialog.width - rectTrigger.width) / 2}px`
+  } else if(dialog) {
+    dialog.style.left = `${rectTrigger.x + (rectTrigger.width - rectDialog.width) / 2}px`
+  }
+  if (props.position == 'top') {
+    dialog.style.top = `${rectTrigger.y - rectDialog.height - 10}px`
+  }
+  if (props.position == 'custom') {
+    const hasFixedPosition = props.customPosition.includes('position: fixed')
+    dialog.style = props.customPosition
+    dialog.style.display = 'block'
+    dialog.style.position = hasFixedPosition ? 'fixed' : 'absolute'
+  }
+  setTimeout(() => {
+    if(dialog) dialog.style.opacity = 100
+  }, 100)
 }
 </script>

package/src/components/ui/PsDotLoader.vue

@@ -1,15 +1,11 @@
 <template>
   <div class="psui-el-dotloader">
-      <div class="psui-el-dotloader-wrapper">
-        <span></span>
-        <span></span>
-        <span></span>
-      </div>
+    <div class="psui-el-dotloader-wrapper">
+      <span />
+      <span />
+      <span />
+    </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PsDotLoader',
-}
-</script>
+<script setup></script>