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

package/src/components/forms/PsDropdown.vue

@@ -1,29 +1,29 @@
 <template>
-  <div 
+  <div
     ref="PSDropdown"
-    class="psui-el-dropdown-menu" 
-    :class="{ 'is-open' : show }"
+    class="psui-el-dropdown-menu"
+    :class="{ 'is-open': show.value }"
     v-click-outside="close"
   >
     <div
       ref="PSDropdownTrigger"
       v-if="$slots.dropdownTrigger"
-      @click="show && !toggleWhenActive ? '' : toggle()"
+      @click="show.value && !toggleWhenActive ? '' : toggle()"
     >
       <slot name="dropdownTrigger" />
     </div>
 
     <button
       v-else
-      @click="show && !toggleWhenActive ? '' : toggle()"
+      @click="show.value && !toggleWhenActive ? '' : toggle()"
       type="button"
-      :id="id"
+      :id="id.value"
       aria-haspopup="true"
       aria-expanded="true"
       ref="PSDropdownTrigger"
     >
       <slot
-        v-if="show && $slots.buttonLabelOnShow"
+        v-if="show.value && $slots.buttonLabelOnShow"
         name="buttonLabelOnShow"
       />
       <slot
@@ -36,7 +36,7 @@
       role="menu"
       class="psui-el-dropdown-menu-dialog-wrapper psui-duration-300"
       aria-orientation="vertical"
-      :aria-labelledby="id"
+      :aria-labelledby="id.value"
       :style="{ minWidth: minWidthDropDown }"
     >
       <div class="psui-el-dropdown-menu-dialog">
@@ -46,169 +46,171 @@
   </div>
 </template>
 
-<script>
+<script setup>
 // Figma - 2.3 Dropdown with category divider https://www.figma.com/file/Tto8hrNlSfuPcwd1pfqogF/%E2%9A%A1%EF%B8%8F-Design-System?node-id=1768%3A64886
 
-import {
-  randomString,
-  getParentScrollableEl,
-} from '../../util/GeneralFunctions'
+import { randomString, getParentScrollableEl } from '../../util/GeneralFunctions.js'
 
-export default {
-  name: 'PsDropdown',
-  props: {
+import { defineProps, ref, onBeforeUnmount, defineEmits, defineExpose } from 'vue'
+
+defineExpose({
+  close:() => close()
+})
+
+const props = defineProps({
   /**
-    * It sets a minimun width for the dropdown menu.
+   * It sets a minimun width for the dropdown menu.
    */
-    minWidthDropDown: {
-      type: String,
-      default: '240px',
-    },
-    /**
-    * It's a boolean responsible for showing a slot within the html tag button.
-     */
-    buttonLabelOnShow: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-    * It's a property responsible for toggling the dropdown menu. default: true.
-     */
-    toggleWhenActive: {
-      type: Boolean,
-      default: true,
-    },
-    /**
-    * Disable the toogle on click. default: false.
-    */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * It sets the vertical and horizontal position.
-     */
-    position: {
-      type: String,
-      validator: (value)=> ['custom'].includes(value)
-    },
+  minWidthDropDown: {
+    type: String,
+    default: '240px',
   },
-  data() {
-    return {
-      show: false,
-      id: randomString(8),
-      marginLeft: '-0px',
-      scrollableParentEl: null,
-    }
+  /**
+   * It's a boolean responsible for showing a slot within the html tag button.
+   */
+  buttonLabelOnShow: {
+    type: Boolean,
+    default: false,
   },
-  computed: {
-    getMaxWidth() {
-      let bounds = this.$refs.PSDropdown.getBoundingClientRect()
-      return document.documentElement.clientWidth - bounds['left'] - 30
-    },
+  /**
+   * It's a property responsible for toggling the dropdown menu. default: true.
+   */
+  toggleWhenActive: {
+    type: Boolean,
+    default: true,
   },
-  beforeUnmount() {
-    this.unwatchParentScrolling()
+  /**
+   * Disable the toogle on click. default: false.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    toggle() {
-      if (this.disabled) return 
-
-      if (!this.show) {
-        this.open()
-      } else {
-        this.close()
-      }
-    },
-    watchParentScrolling() {
-      this.scrollableParentEl = getParentScrollableEl(this.$refs.PSDropdown)
-      if (this.scrollableParentEl) {
-        this.scrollableParentEl.addEventListener('scroll', this.updatePosition)
-      }
-    },
-    unwatchParentScrolling() {
-      if (this.scrollableParentEl) {
-        this.scrollableParentEl.removeEventListener(
-          'scroll',
-          this.updatePosition
-        )
-      }
-    },
-    updatePosition() {
-      const PSDropdownDialog = this.$refs.PSDropdownDialog
-      const PSDropdownTrigger = this.$refs.PSDropdownTrigger
-      if (!PSDropdownDialog || !PSDropdownTrigger) return
-
-      const rectTrigger = PSDropdownTrigger.getBoundingClientRect()
-      const rectDialog = PSDropdownDialog.getBoundingClientRect()
-      const windowWidth = document.documentElement.clientWidth
-
-      PSDropdownDialog.style.position = 'fixed'
-      PSDropdownDialog.style.top = `${rectTrigger.y + rectTrigger.height}px`
-
-      PSDropdownDialog.style.minWidth = `${rectTrigger.width}px`
-
-      if (rectTrigger.x + rectDialog.width + 20 > windowWidth) {
-        PSDropdownDialog.style.left = `${
-          windowWidth - rectDialog.width - 30
-        }px`
-      } else {
-        PSDropdownDialog.style.left = `${rectTrigger.x}px`
-      }
-
-      if(this.position == 'custom') {
-        PSDropdownDialog.style.top = `${rectTrigger.y}px`
-        PSDropdownDialog.style.left = `${rectTrigger.x + 100}px`
-      }
-
-      if (rectTrigger.top < 10) {
-        this.close()
-        console.warn('The dropdown are too close from the top of the page')
-        return
-      }
-
-      setTimeout(() => {
-        PSDropdownDialog.style.opacity = 1
-      }, 10)
-    },
-    open() {
-      this.$emit('open')
-      this.show = true
-      if(this.$refs.PSDropdownDialog){
-        this.$refs.PSDropdownDialog.style.opacity = 0
-        this.$refs.PSDropdownDialog.style.display = 'block'
-      }
-      setTimeout(() => {
-        this.updatePosition()
-        this.watchParentScrolling()
-        document.addEventListener('keyup', this.handleEsc)
-        window.addEventListener('resize', this.updatePosition)
-        window.addEventListener('click', this.clickOutside)
-      }, 10)
-    },
-    close() {
-      if (this.show) {
-        this.$emit('close')
-        if(this.$refs.PSDropdownDialog){
-          this.$refs.PSDropdownDialog.style.display = 'none'
-          this.$refs.PSDropdownDialog.style.opacity = 0
-        }
-        this.show = false
-        this.unwatchParentScrolling()
-      }
-      document.removeEventListener('keyup', this.handleEsc)
-      document.removeEventListener('resize', this.updatePosition)
-      document.removeEventListener('click', this.clickOutside)
-    },
-    handleEsc(evt) {
-      if (this.show && evt.keyCode === 27) this.close()
-    },
-    clickOutside(event) {
-      if (!this.show) return
-      if (!this.$refs.PSDropdown == event.target || !this.$refs.PSDropdown?.contains(event.target)) {
-        this.close()
-      }
-    },
+  /**
+   * It sets the vertical and horizontal position.
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment, vue/require-default-prop
+  position: {
+    type: String,
+    validator: (value) => ['custom'].includes(value),
   },
+})
+
+const emit = defineEmits(['open', 'close'])
+
+const show = ref(false)
+const id = ref(randomString(8))
+// const marginLeft = ref('-0px')
+const scrollableParentEl = ref(null)
+const PSDropdown = ref(null)
+const PSDropdownDialog = ref(null)
+const PSDropdownTrigger = ref(null)
+
+// const getMaxWidth = computed(() => {
+//   let bounds = PSDropdown.getBoundingClientRect()
+//   return document.documentElement.clientWidth - bounds['left'] - 30
+// })
+
+onBeforeUnmount(() => {
+  unwatchParentScrolling()
+})
+
+const toggle = () => {
+  if (props.disabled) return
+  if (!show.value) {
+    open()
+  } else {
+    close()
+  }
+}
+
+const handleEsc = (evt) => {
+  if (show.value && evt.keyCode === 27) close()
+}
+
+const open = () => {
+  emit('open')
+  show.value = true
+  if (PSDropdownDialog.value) {
+    PSDropdownDialog.value.style.opacity = 0
+    PSDropdownDialog.value.style.display = 'block'
+  }
+  setTimeout(() => {
+    updatePosition()
+    watchParentScrolling()
+    document.addEventListener('keyup', handleEsc)
+    window.addEventListener('resize', updatePosition)
+    // window.addEventListener('click', clickOutside)
+  }, 10)
+}
+
+const close = () => {
+  if (show.value == true) {
+    emit('close')
+    if (PSDropdownDialog.value !== null) {
+      PSDropdownDialog.value.style.display = 'none'
+      PSDropdownDialog.value.style.opacity = 0
+    }
+    show.value = false
+    unwatchParentScrolling()
+  }
+  document.removeEventListener('keyup', handleEsc)
+  document.removeEventListener('resize', updatePosition)
+  // document.removeEventListener('click', clickOutside)
+}
+
+const watchParentScrolling = () => {
+  scrollableParentEl.value = getParentScrollableEl(PSDropdown.value)
+  if (scrollableParentEl.value) {
+    scrollableParentEl.value.addEventListener('scroll', updatePosition)
+  }
+}
+
+const unwatchParentScrolling = () => {
+  if (scrollableParentEl.value) {
+    scrollableParentEl.value.removeEventListener('scroll', updatePosition())
+  }
+}
+
+const updatePosition = () => {
+  if (PSDropdownDialog.value === null || PSDropdownTrigger.value === null) return
+
+  const rectTrigger = PSDropdownTrigger.value.getBoundingClientRect()
+  const rectDialog = PSDropdownDialog.value.getBoundingClientRect()
+  const windowWidth = document.documentElement.clientWidth
+
+  PSDropdownDialog.value.style.position = 'fixed'
+  PSDropdownDialog.value.style.top = `${rectTrigger.y + rectTrigger.height}px`
+  PSDropdownDialog.value.style.minWidth = `${rectTrigger.width}px`
+
+  if (rectTrigger.x + rectDialog.width + 20 > windowWidth) {
+    PSDropdownDialog.value.style.left = `${windowWidth - rectDialog.width + 15}px`
+  } else {
+    PSDropdownDialog.value.style.left = `${rectTrigger.x}px`
+  }
+
+  if (props.position == 'custom') {
+    PSDropdownDialog.value.style.top = `${rectTrigger.y}px`
+    PSDropdownDialog.value.style.left = `${rectTrigger.x + 100}px`      
+  }
+
+  if (rectTrigger.top < 10) {
+    close()
+    console.warn('The dropdown are too close from the top of the page')
+    return
+  }
+
+  setTimeout(() => {
+    if(PSDropdownDialog.value){
+      PSDropdownDialog.value.style.opacity = 1
+    }
+  }, 10)
+}
+
+const clickOutside = (event) => {
+  if (!show.value) return
+  if (!PSDropdown.value == event.target || !PSDropdown.value?.contains(event.target)) {
+    close()
+  }
 }
 </script>

package/src/components/forms/PsDropdownList.vue

@@ -1,25 +1,25 @@
 <template>
-  <ul 
+  <ul
     class="psui-el-dropdown-menu-list"
     :class="`layout-${layout}`"
   >
-    <li 
-      v-for="(item, index) in getItems" 
+    <li
+      v-for="(item, index) in getItems"
       :key="`${index}-${getKeyValue(item)}`"
       :id="`${index}-${getKeyValue(item)}`"
-      :class="{ 'is-selected psui-bg-blue-10 psui-text-blue-60 hover:psui-bg-blue-10 hover:psui-text-blue-60' : getSelected === getKeyValue(item) }"
+      :class="{ 'is-selected psui-bg-blue-10 psui-text-blue-60 hover:psui-bg-blue-10 hover:psui-text-blue-60': getSelected === getKeyValue(item) }"
       class="psui-el-dropdown-menu-list-item"
-      @mouseover="isHovering = index" 
+      @mouseover="isHovering = index"
       @mouseout="isHovering = false"
       @click="selectItem(item)"
     >
       <div class="psui-el-dropdown-menu-list-item-left-label">
         {{ getLeftLabel(item) }}
-        
+
         <div
           v-if="item.description"
           class="psui-font-normal psui-text-gray-50 psui-ml-1"
-          :class="{ 'psui-text-blue-60' : item.key == getItems.key }"
+          :class="{ 'psui-text-blue-60': item.key == getItems.key }"
         >
           {{ item.description }}
         </div>
@@ -35,13 +35,13 @@
 
       <template v-if="layout == 'rich'">
         <div class="psui-el-dropdown-menu-list-item-line" />
-        <div 
+        <div
           v-if="rightLabelFormatter"
           class="psui-el-dropdown-menu-list-item-rigth-label"
         >
           {{ rightLabelFormatter(item.key, getStudyDataLevel[item.key], getStudyDataLevel) }}
         </div>
-        <div 
+        <div
           v-else
           class="psui-el-dropdown-menu-list-item-rigth-label"
         >
@@ -49,132 +49,135 @@
         </div>
       </template>
     </li>
-  </ul>  
+  </ul>
 </template>
 
-<script>
+<script setup>
 import PsIcon from '../ui/PsIcon.vue'
-export const itemStyle = ['onlytext', 'radio', 'icon', 'checkbox', 'switch', 'rich']
+import { defineProps, ref, computed, defineEmits } from 'vue'
 
-export default {
-  name: 'PsDropdownList',
-  components: { PsIcon },
-  props: {
-    /**
-     * It sets the style of items
-     */
-    layout: {
-      type: String,
-      default: 'onlytext',
-      validator: (value) => {
-        return itemStyle.indexOf(value) !== -1
-      }
-    },
-    /**
-    * It sets the text key which will retrieve a icon from Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/.
-    */
-    icon: {
-      type: String,
-    },
-    /**
-    * It sets the items which will be displayed on the dropdown menu.
-     */
-    items: {
-      type: [Array, Object],
-      required: true
-    },
-    /**
-    * It sets the left key label of your items if needed. 
-     */
-    leftLabel: {
-      type: [String, Function],
-      default: 'left_label'
-    },
-    /**
-    * It sets the right key label of your items if needed. 
-     */
-    rightLabel: {
-      type: [String, Function],
-      default: 'right_label'
-    },
-    /**
-    * It sets the key label of your items if needed. 
-     */
-    label: {
-      type: [String, Function],
-      default: 'label'
-    },
-    /**
-    * It sets the key value of your items if needed.
-     */
-    keyValue: {
-      type: [String, Function],
-      default: 'value'
-    },
-    /**
-    * It sets the format function to display values.
-    */
-    rightLabelFormatter: {
-      type: Function
+const props = defineProps({
+  /**
+   * It sets the style of items
+   */
+  layout: {
+    type: String,
+    default: 'onlytext',
+    validator: (value) => {
+      return ['onlytext', 'radio', 'icon', 'checkbox', 'switch', 'rich'].indexOf(value) !== -1
     },
-    /**
-    * It sets the format function to display values.
-    */
-    studyData: {
-      type: [String, Object]
-    },
-    /**
-    * It sets the item selected on the dropdown menu.
-     */
-    selected: {},
   },
-  data: () => ({
-    isHovering: false
-  }),
-  computed: {
-    getSelected() {
-      if (this.selected !== undefined) {
-        if (typeof this.selected === 'object' && this.selected[this.keyValue] ) {
-          return this.selected[this.keyValue]        
-        } else {
-          return this.selected
-        }
-      } else {
-        return false
-      }
-    },
-    getItems() {
-      return this.items
-    },
-    getStudyDataLevel() {
-      return this.studyData?.data || this.studyData
-    },
+  /**
+   * It sets the text key which will retrieve a icon from Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/.
+   */
+  icon: {
+    type: String,
+    default: '',
   },
-  methods: {
-    selectItem(item) {
-      this.$emit('update:selected', this.getKeyValue(item) )
-      this.$emit('change', item )
-    },
-    getLeftLabel(item) {
-      if(typeof this.leftLabel == 'function') return this.leftLabel(item)
-      if(typeof item === 'string') return item
-      return item[this.leftLabel]
-    },
-    getRightLabel(item) {
-      if(typeof this.rightLabel == 'function') return this.rightLabel(item)
-      if(typeof item === 'string') return item
-      return item[this.rightLabel]
-    },
-    getLabel(item) {
-      if(typeof this.label == 'function') return this.label(item)
-      if(typeof item === 'string') return item
-      return item[this.label]
-    },
-    getKeyValue(item) {
-      if(typeof this.keyValue == 'function') return this.keyValue(item)
-      if(typeof item === 'string') return item
-      return item[this.keyValue]
-    },
+  /**
+   * It sets the items which will be displayed on the dropdown menu.
+   */
+  items: {
+    type: [Array, Object],
+    required: true,
+  },
+  /**
+   * It sets the left key label of your items if needed.
+   */
+  leftLabel: {
+    type: [String, Function],
+    default: 'left_label',
+  },
+  /**
+   * It sets the right key label of your items if needed.
+   */
+  rightLabel: {
+    type: [String, Function],
+    default: 'right_label',
+  },
+  /**
+   * It sets the key label of your items if needed.
+   */
+  label: {
+    type: [String, Function],
+    default: 'label',
+  },
+  /**
+   * It sets the key value of your items if needed.
+   */
+  keyValue: {
+    type: [String, Function],
+    default: 'value',
+  },
+  /**
+   * It sets the format function to display values.
+   */
+  rightLabelFormatter: {
+    type: Function,
+    default: () => '',
+  },
+  /**
+   * It sets the format function to display values.
+   */
+  studyData: {
+    type: [String, Object],
+    default: '',
+  },
+  /**
+   * It sets the item selected on the dropdown menu.
+   */
+  selected: {},
+})
+const emit = defineEmits(['update:selected', 'change'])
+
+const isHovering = ref(false)
+
+const getSelected = computed(() => {
+  if (props.selected !== undefined) {
+    if (typeof props.selected === 'object' && props.selected[props.keyValue]) {
+      return props.selected[props.keyValue]
+    } else {
+      return props.selected
+    }
+  } else {
+    return false
   }
+})
+
+const getItems = computed(() => {
+  return props.items
+})
+
+const getStudyDataLevel = computed(() => {
+  return props.studyData?.data || props.studyData
+})
+
+const selectItem = (item) => {
+  emit('update:selected', getKeyValue(item))
+  emit('change', item)
+}
+
+const getLeftLabel = (item) => {
+  if (typeof props.leftLabel == 'function') return props.leftLabel(item)
+  if (typeof item === 'string') return item
+  return item[props.leftLabel]
+}
+
+const getRightLabel = (item) => {
+  if (typeof props.rightLabel == 'function') return props.rightLabel(item)
+  if (typeof item === 'string') return item
+  return item[props.rightLabel]
+}
+
+// const getLabel = (item) => {
+//   if(typeof props.label == 'function') return props.label(item)
+//   if(typeof item === 'string') return item
+//   return item[props.label]
+// }
+
+const getKeyValue = (item) => {
+  if (typeof props.keyValue == 'function') return props.keyValue(item)
+  if (typeof item === 'string') return item
+  return item[props.keyValue]
 }
-</script>
+</script>