@policystudio/policy-studio-ui-vue 1.1.90-beta.12 → 1.1.90-beta.18

package/src/components/tooltip/PsTooltip.vue

@@ -1,23 +1,21 @@
 <template>
-  <div 
-    ref="tooltip" 
+  <div
+    ref="PsTooltip"
     class="psui-el-tooltip"
-    @mouseenter="open" 
-    @mouseleave="close" 
+    @mouseenter="open"
+    @mouseleave="close"
   >
     <div
-      ref="tooltiptrigger"
+      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"
+        ref="PsTooltipDialog"
         class="psui-el-tooltip-dialog"
         :class="cssClass"
       >
@@ -41,125 +39,122 @@
   </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 { defineProps, defineEmits, 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: '',
   },
-  beforeUnmount() {
-    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
+  dialog.style.top = `${rectTrigger.y + rectTrigger.height + 8}px`
+  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 && props.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`
+  }
+  if (props.position == 'top') {
+    dialog.style.top = `${rectTrigger.y - rectDialog.height - 10}px`
+  }
+  if (props.position == 'custom') {
+    dialog.style = props.customPosition
+    dialog.style.display = 'block'
+    dialog.style.position = 'absolute'
+  }
+  setTimeout(() => {
+    dialog.style.opacity = 100
+  }, 100)
 }
 </script>

package/src/components/ui/PsDotLoader.vue

@@ -8,8 +8,4 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PsDotLoader',
-}
-</script>
+<script setup></script>

package/src/components/ui/PsIcon.vue

@@ -1,10 +1,10 @@
 <template>
-  <div :style="{display: display}">
+  <div :style="{ display: display }">
     <span
       v-if="getIconType === 'material-icons'"
       class="material-icons-round"
       :class="[getIconClasses]"
-      :style="{ fontSize: `${size}px`}"
+      :style="{ fontSize: `${size}px` }"
     >
       {{ getIcon }}
     </span>
@@ -24,140 +24,137 @@
   </div>
 </template>
 
-<script>
-import tailwindConfig from '../../../tailwind.config'
-import imageLoader from '../../util/imageLoader'
-export default {
-  name: 'AppIcon',
-  props: {
-    /**
-     * 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: 'more_horiz'
-    },
-
-    /**
-     * It sets the type of the icon.
-     */
-    type: {
-      type: String,
-    },
-
-    /**
-     * It sets the style of the icon.
-     */
-    iconClasses: {
-      type: String,
-      default: null
-    },
-
-    /**
-     * It sets the size of the icon.
-     */
-    size: {
-      type: [Number, String],
-      default: 24
-    },
+<script setup>
+import tailwindConfig from '../../../tailwind.config.js'
+import imageLoader from '../../util/imageLoader.js'
 
-    /**
-     * It sets fill property of the icon.
-     */
-    stroke: {
-      type: String,
-      default: null
-    },
+import { defineProps, ref, computed, watch, onMounted } from 'vue'
 
-    /**
-     * It sets fill property display of the icon.
-     */
-    display: {
-      type: String,
-      default: 'contents'
-    },
-
-    /**
-     * It sets the color of the icon.
-     */
-    color: {
-      type: String,
-      default: null,
-      validator: value => {
-        return value?.includes('psui-text-') && 
-          typeof(tailwindConfig.theme.colors[value.replace('psui-text-', '')]) != 'undefined' ||
-          typeof(tailwindConfig.theme.colors[value]) != 'undefined'
-      }
-    },
-
-    /**
-     * It set a animation icon if needed.
-     */
-    loaderIcon: {
-      type: String,
-      default: 'hourglass_top'
-    },
-    
-    /**
-     * It sets a error when the icon is not available.
-     */
-    loaderErrorIcon: {
-      type: String,
-      default: 'more_horiz'
-    }
+const props = defineProps({
+  /**
+   * 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: 'more_horiz',
   },
-  data() {
-    return {
-      finishedImageLoad: false,
-      imageLoadError: false
-    }
+  /**
+   * It sets the type of the icon.
+   */
+  type: {
+    type: String,
+    default: '',
   },
-  computed: {
-    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'
-      return 'svg'
-    },
-    getIcon() {
-      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 : this.loaderErrorIcon
-    },
-    getIconClasses() {
-      if(this.iconClasses) return this.iconClasses
-      return `${this.color}`
-    },
-    getHeight() {
-      return this.height
+  /**
+   * It sets the style of the icon.
+   */
+  iconClasses: {
+    type: String,
+    default: null,
+  },
+  /**
+   * It sets the size of the icon.
+   */
+  size: {
+    type: [Number, String],
+    default: 24,
+  },
+  /**
+   * It sets fill property of the icon.
+   */
+  stroke: {
+    type: String,
+    default: null,
+  },
+  /**
+   * It sets fill property display of the icon.
+   */
+  display: {
+    type: String,
+    default: 'contents',
+  },
+  /**
+   * It sets the color of the icon.
+   */
+  color: {
+    type: String,
+    default: null,
+    validator: (value) => {
+      return (
+        (value?.includes('psui-text-') && typeof tailwindConfig.theme.colors[value.replace('psui-text-', '')] != 'undefined') ||
+        typeof tailwindConfig.theme.colors[value] != 'undefined'
+      )
     },
-    getColor() {
-      if(this.getIconType === 'material-icons') return this.color
-      return tailwindConfig.theme.colors[this.color.replace('psui-text-', '')] || tailwindConfig.theme.colors[this.color]
-    }
   },
-  watch: {
-    'icon': function() {
-      this.loadImage()
-    }
+  /**
+   * It set a animation icon if needed.
+   */
+  loaderIcon: {
+    type: String,
+    default: 'hourglass_top',
   },
-  mounted() {
-    if(this.icon?.includes('/')) this.loadImage()
+
+  /**
+   * It sets a error when the icon is not available.
+   */
+  loaderErrorIcon: {
+    type: String,
+    default: 'more_horiz',
   },
-  methods: {
-    loadImage() {
-      this.finishedImageLoad = false
-      this.imageLoadError = false
-      imageLoader({ imageUrl: this.icon, returnsBase64: false })
-        .then(() => {
-          this.finishedImageLoad = true
-        })
-        .catch(() => {
-          this.imageLoadError = true
-        })
-    }
+})
+
+const finishedImageLoad = ref(false)
+const imageLoadError = ref(false)
+
+const getIconType = computed(() => {
+  if (imageLoadError.value || !finishedImageLoad.value) return 'material-icons'
+  if (props.type) return props.type
+  if (!props.icon?.includes('/')) return 'material-icons'
+  if (!props.icon?.includes('.svg')) return 'url'
+  return 'svg'
+})
+
+const getIcon = computed(() => {
+  if (!props.icon?.includes('/')) return props.icon ? props.icon : props.loaderErrorIcon
+  if (!finishedImageLoad.value && !imageLoadError.value && props.loaderIcon) return props.loaderIcon
+  if (imageLoadError.value) return props.loaderErrorIcon
+  return props.icon ? props.icon : props.loaderErrorIcon
+})
+
+const getIconClasses = computed(() => {
+  if (props.iconClasses) return props.iconClasses
+  return `${props.color}`
+})
+
+// const getHeight = computed(() => {
+//   return props.height
+// })
+
+const getColor = computed(() => {
+  if (getIconType.value === 'material-icons') return props.color
+  return tailwindConfig.theme.colors[props.color.replace('psui-text-', '')] || tailwindConfig.theme.colors[props.color]
+})
+
+watch(
+  () => props.icon,
+  () => {
+    loadImage()
   }
+)
+
+onMounted(() => {
+  if (props.icon?.includes('/')) loadImage()
+})
+
+const loadImage = () => {
+  finishedImageLoad.value = false
+  imageLoadError.value = false
+  imageLoader({ imageUrl: props.icon, returnsBase64: false })
+    .then(() => {
+      finishedImageLoad.value = true
+    })
+    .catch(() => {
+      imageLoadError.value = true
+    })
 }
-</script>
+</script>