@policystudio/policy-studio-ui-vue 1.1.90-beta.75 → 1.1.90-beta.76

package/dist/css/psui_styles_output.css

@@ -4013,21 +4013,9 @@ video {
   min-height: 27px;
   font-size: 0.875rem;
 }
-.psui-el-dropdown-menu-dialog-wrapper {
-  position: fixed;
-}
 .psui-el-dropdown-menu-dialog-wrapper {
   z-index: 50;
 }
-.psui-el-dropdown-menu-dialog-wrapper {
-  display: none;
-}
-.psui-el-dropdown-menu-dialog-wrapper {
-  width: auto;
-}
-.psui-el-dropdown-menu-dialog-wrapper {
-  transform-origin: top right;
-}
 .psui-el-dropdown-menu-dialog-wrapper {
   overflow: auto;
 }
@@ -4038,28 +4026,11 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
 }
-.psui-el-dropdown-menu-dialog-wrapper {
-  opacity: 0;
-}
 .psui-el-dropdown-menu-dialog-wrapper {
   --tw-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
   --tw-shadow-colored: 0px 0px 8px var(--tw-shadow-color), 0px 5px 6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
 }
-.psui-el-dropdown-menu-dialog-wrapper {
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.psui-el-dropdown-menu-dialog-wrapper {
-  transition-duration: 100ms;
-}
-.psui-el-dropdown-menu-dialog-wrapper {
-  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-}
-.psui-el-dropdown-menu-dialog-wrapper-dialog {
-  width: 100%;
-}
 
 .psui-el-dropdown-menu-list {
   margin-top: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.90-beta.75",
+  "version": "1.1.90-beta.76",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {
@@ -15,10 +15,12 @@
   "main": "dist/index.js",
   "types": "src/types/index.d.ts",
   "dependencies": {
+    "@floating-ui/vue": "^1.1.9",
     "@vue/compat": "^3.4.5",
     "core-js": "^3.6.5",
     "v-tooltip": "^2.1.3",
-    "vue": "^3.4.5"
+    "vue": "^3.4.5",
+    "vue2-teleport": "^1.1.4"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.4.0",

package/src/assets/scss/components/PsDropdown.scss

@@ -13,11 +13,7 @@
     }
 
     &-dialog-wrapper {
-      @apply psui-hidden psui-origin-top-right psui-bg-white psui-fixed psui-w-auto psui-rounded-md psui-z-50 psui-opacity-0 psui-shadow-elevation-20 psui-overflow-auto psui-transition-opacity psui-duration-100 psui-ease-in;
-      
-      &-dialog {
-        @apply psui-w-full;
-      }
+      @apply psui-bg-white psui-rounded-md psui-z-50 psui-shadow-elevation-20 psui-overflow-auto;
     }
   }
 }

package/src/components/forms/PsDropdown.vue

@@ -1,212 +1,120 @@
 <template>
   <div
-    ref="PSDropdown"
     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($event)"
-    >
-      <slot name="dropdownTrigger" />
-    </div>
-
-    <button
-      v-else
-      @click="show && !toggleWhenActive ? '' : toggle($event)"
-      type="button"
-      :id="id.value"
-      aria-haspopup="true"
-      aria-expanded="true"
-      ref="PSDropdownTrigger"
+      @click="toggle"
     >
       <slot
-        v-if="show.value && $slots.buttonLabelOnShow"
-        name="buttonLabelOnShow"
+        v-if="$slots.dropdownTrigger"
+        name="dropdownTrigger"
       />
-      <slot
+      <button
         v-else
-        name="buttonLabel"
-      />
-    </button>
-    <div
-      ref="PSDropdownDialog"
-      role="menu"
-      class="psui-el-dropdown-menu-dialog-wrapper"
-      aria-orientation="vertical"
-      :aria-labelledby="id.value"
-      :style="{ minWidth: minWidthDropDown }"
-    >
-      <div class="psui-el-dropdown-menu-dialog">
-        <slot name="items" />
-      </div>
+        type="button"
+        :aria-expanded="show"
+      >
+        <slot
+          v-if="show && $slots.buttonLabelOnShow"
+          name="buttonLabelOnShow"
+        />
+        <slot
+          v-else
+          name="buttonLabel"
+        />
+      </button>
     </div>
+
+    
+    <Teleport to="body">
+      <Transition name="fade">
+        <div
+          v-if="show"
+          ref="PSDropdownFloating"
+          role="menu"
+          class="psui-el-dropdown-menu-dialog-wrapper"
+          aria-orientation="vertical"
+          :style="floatingStyles"
+          v-click-outside="close"
+        >
+          <div class="psui-el-dropdown-menu-dialog">
+            <slot name="items" />
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
   </div>
 </template>
 
 <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.js'
-
-import { ref, onBeforeUnmount } from 'vue'
-
-defineExpose({
-  close:() => close(),
-  open:() => open(),
-})
+import { 
+  useFloating, 
+  autoUpdate, 
+  offset, 
+  flip, 
+  shift,
+  size 
+} from '@floating-ui/vue'
+
+import { ref, defineProps } from 'vue'
+import Teleport from 'vue2-teleport'
 
 const props = defineProps({
-  /**
-   * 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.
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment, vue/require-default-prop
-  position: {
-    type: String,
-    validator: (value) => ['custom'].includes(value),
-  },
+  disabled: {type: Boolean, default: false},
+  placement: { type: String, default: 'bottom-start' },
+  offsetVal: { type: Number, default: 4 },
+  dropdownWidth: {
+    type: Number,
+    default: null
+  }
 })
 
 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 PSDropdownTrigger = ref(null)
+const PSDropdownFloating = ref(null)
+
+const { floatingStyles } = useFloating(PSDropdownTrigger, PSDropdownFloating, {
+  placement: props.placement,
+  whileElementsMounted: autoUpdate,
+  middleware: [
+    offset(props.offsetVal),
+    flip(), 
+    shift(),
+    size({
+      apply({rects, elements}) {
+          const customWidth = props.dropdownWidth ?? rects.reference.width
+          Object.assign(elements.floating.style, {
+            width: `${customWidth}px`,
+            minWidth: 'fit-content'
+          })
+      },
+    }) 
+  ],
 })
 
-const toggle = (event) => {
-  if (props.disabled) return
-  if (!show.value) {
-    open()
-  } else {
-    close()
-  }
-  event.stopPropagation()
-}
-
-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)
+  emit('open')
 }
 
 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)
+  show.value = false
+  emit('close')
 }
 
-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 - 30}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`      
-  }
+const toggle = (event) => {
+  if (props.disabled) return
 
-  if (rectTrigger.top < 10) {
-    close()
-    console.warn('The dropdown are too close from the top of the page')
-    return
-  }
+  if (event) event.stopPropagation()
 
-  setTimeout(() => {
-    if(PSDropdownDialog.value){
-      PSDropdownDialog.value.style.opacity = 1
-    }
-  }, 10)
+  show.value ? close() : open()
+  
 }
 
+defineExpose({ open, close })
 </script>