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

package/src/components/forms/PsDropdown.vue

@@ -1,218 +1,134 @@
 <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="hasDropdownTrigger"
+        name="dropdownTrigger"
+        :show="show"
       />
-      <slot
+      <button
         v-else
-        name="buttonLabel"
-      />
-    </button>
-    <div
-      ref="PSDropdownDialog"
-      role="menu"
-      class="psui-el-dropdown-menu-dialog-wrapper psui-duration-300"
-      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"
+          :class="contentCss"
+          aria-orientation="vertical"
+          :style="floatingStyles"
+          v-click-outside="close"
+        >
+          <slot name="items" />
+        </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, useSlots, computed } 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,
+  disabled: {type: Boolean, default: false},
+  placement: { type: String, default: 'bottom-start' },
+  offsetVal: { type: Number, default: 4 },
+  width: {
+    type: [Number, String],
+    default: null
   },
-  /**
-   * Disable the toogle on click. default: false.
-   */
-  disabled: {
-    type: Boolean,
-    default: false,
+  height: {
+    type: [Number, String],
+    default: 'auto'
   },
-  /**
-   * It sets the vertical and horizontal position.
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment, vue/require-default-prop
-  position: {
+  contentCss: {
     type: String,
-    validator: (value) => ['custom'].includes(value),
-  },
+    default: 'psui-rounded psui-bg-white psui-shadow-elevation-20'
+  }
 })
 
 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
-// })
+const slots = useSlots()
 
-onBeforeUnmount(() => {
-  unwatchParentScrolling()
+const hasDropdownTrigger = computed(() => {
+  return !!slots.dropdownTrigger
 })
 
-const toggle = (event) => {
-  if (props.disabled) return
-  if (!show.value) {
-    open()
-  } else {
-    close()
-  }
-  event.stopPropagation()
-}
+const show = ref(false)
 
-const handleEsc = (evt) => {
-  if (show.value && evt.keyCode === 27) close()
-}
+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.width ?? rects.reference.width
+          Object.assign(elements.floating.style, {
+            width: `${customWidth}px`,
+            ...(typeof height == 'string' ? {maxHeight: props.height} : {maxHeight : `${props.height}px`})
+          })
+      },
+    }) 
+  ],
+})
 
 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)
+  emit('open')
 }
 
-const watchParentScrolling = () => {
-  scrollableParentEl.value = getParentScrollableEl(PSDropdown.value)
-  if (scrollableParentEl.value) {
-    scrollableParentEl.value.addEventListener('scroll', updatePosition)
-  }
-}
+const close = (event) => {
+  if(event?.target && PSDropdownTrigger.value.contains(event?.target)) return
 
-const unwatchParentScrolling = () => {
-  if (scrollableParentEl.value) {
-    scrollableParentEl.value.removeEventListener('scroll', updatePosition())
-  }
+  show.value = false
+  emit('close')
 }
 
-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 = !show.value
+  
 }
 
-const clickOutside = (event) => {
-  if (!show.value) return
-  if (!PSDropdown.value == event.target || !PSDropdown.value?.contains(event.target)) {
-    close()
-  }
-}
+defineExpose({ open, close })
 </script>

package/src/components/forms/PsInput.vue

@@ -3,7 +3,10 @@
     class="psui-el-input"
     :class="[getComponentClass, `layout-${layout}`]"
   >
-    <label v-if="label"> {{ label }} </label>
+    <label
+      v-if="label"
+      :for="uniqueId"
+    > {{ label }} </label>
 
     <div
       class="psui-el-input-wrapper"
@@ -23,6 +26,7 @@
       >
         <template #trigger>
           <input
+            :id="uniqueId"
             :title="title"
             :type="type"
             :placeholder="placeholder"
@@ -71,7 +75,7 @@
 
 <script setup>
 import PsRichTooltip from '../tooltip/PsRichTooltip.vue'
-import { ref, computed, useAttrs } from 'vue'
+import { ref, computed, useAttrs, getCurrentInstance } from 'vue'
 
 const props = defineProps({
   /**
@@ -165,13 +169,17 @@ const props = defineProps({
 
 const emit = defineEmits(['focus', 'blur', 'mouseenter', 'mouseleave', 'input', 'keydown', 'change'])
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const isFocus = ref(false)
 const attrs = useAttrs()
 
 const getAttrs = computed(() => {
   const defaultAttrs = {
     autocapitalize: 'sentences',
-    autocomplete: 'chrome-off',
+    autocomplete: 'off',
     autocorrect: 'off',
     spellcheck: 'spellcheck',
   }
@@ -190,6 +198,10 @@ const getComponentClass = computed(() => {
   }
 })
 
+const instance = getCurrentInstance()
+const uid = instance?.uid || Math.random().toString(36).slice(2)
+const uniqueId = computed(() => `psui-input-${uid}`)
+
 const onInputFocus = ($event) => {
   isFocus.value = true
   emit('focus', $event)

package/src/components/notifications/PsDialog.vue

@@ -3,7 +3,10 @@
     class="psui-el-dialog"
     :class="getComponentClass"
   >
-    <div class="psui-el-dialog-icon">
+    <div
+      v-if="hasIcon"
+      class="psui-el-dialog-icon"
+    >
       <i class="material-icons-round">{{ icon }}</i>
     </div>
     <div class="psui-el-dialog-wrapper">
@@ -71,6 +74,13 @@ const props = defineProps({
     type: String,
     default: 'info',
   },
+  /**
+   * It sets whether the icon should be displayed or not.
+   */
+  hasIcon: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const emit = defineEmits(['close'])

package/src/components/notifications/PsToast.vue

@@ -2,6 +2,7 @@
   <div
     class="psui-el-toast"
     :class="getComponentClass"
+    tabindex="0"
   >
     <i class="material-icons-round psui-el-toast-icon">{{ icon }}</i>
     <p class="psui-el-toast-message">