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

package/src/components/data-graphics/PsBarChart.vue

@@ -1,36 +1,34 @@
 <template>
   <div class="psui-el-bar-chart">
-    <p 
+    <p
       v-if="showNumber"
       class="psui-el-bar-chart-total"
     >
       {{ total }}
     </p>
 
-    <div 
+    <div
       class="psui-el-bar-chart-bar"
-      :style="{width: `${fillWidth}%`}"
+      :style="{ width: `${fillWidth}%` }"
     />
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PsBarChart',
-  props: {
-    showNumber: {
-      type: Boolean,
-      default: true
-    },
-    total: {
-      type: [String, Number],
-      default: '5,0',
-    },
-    fillWidth: {
-      type: Number,
-      default: 50
-    },
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+  showNumber: {
+    type: Boolean,
+    default: true,
+  },
+  total: {
+    type: [String, Number],
+    default: '5,0',
+  },
+  fillWidth: {
+    type: Number,
+    default: 50,
   },
-  computed: {}
-}
+})
 </script>

package/src/components/datatable/PsDataTable.vue

@@ -37,70 +37,66 @@
   </table>
 </template>
 
-<script>
-export const type = ['simple', 'rich']
-export const alignment = ['center', 'right', 'left']
+<script setup>
+import { defineProps, computed } from 'vue'
 
-export default {
-  name: 'PsDataTable',
-  props: {
-    /**
-     * It sets the type of the data table. eg: simple or rich.
-     */
-    type: {
-      type: String,
-      required: true,
-      validator: (value) => {
-        return ['simple', 'rich'].indexOf(value) !== -1
-      },
+const props = defineProps({
+  type: {
+    type: String,
+    required: true,
+    validator: (value) => {
+      return ['simple', 'rich'].indexOf(value) !== -1
     },
-    /**
-    * It sets the values which will be use to render the header.
-     */
-    header: {
-      type: Array,
-      required: true,
-    },
-    /**
-    * It sets the values which will be use to render the body.
-     */
-    data: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    /**
-    * It sets the values which will be use to render the footer.
-     */
-    footer: {
-      type: Array,
-    },
-    /**
-    * It sets the alignment of the whole context.
-     */
-    align: {
-      type: String,
-      default: 'left',
-      validator: (value) => {
-        return ['center', 'right', 'left'].indexOf(value) !== -1
-      }
+  },
+  /**
+   * It sets the values which will be use to render the header.
+   */
+  header: {
+    type: Array,
+    required: true,
+  },
+  /**
+   * It sets the values which will be use to render the body.
+   */
+  data: {
+    type: Array,
+    default() {
+      return []
     },
-    /**
-    * It sets additional styling if needed.
-     */
-    cssStyle: {
-      type: String,
-      default: 'psui-text-gray-60'
-    }
   },
-  computed: {
-    cssAlign() {
-      if (this.align === 'right') return `psui-text-right ${this.cssStyle}`
-      if (this.align === 'center') return `psui-text-center  ${this.cssStyle}`
-      return `psui-text-left ${this.cssStyle}`
+  /**
+   * It sets the values which will be use to render the footer.
+   */
+  footer: {
+    type: Array,
+    default: () => [],
+  },
+  /**
+   * It sets the alignment of the whole context.
+   */
+  align: {
+    type: String,
+    default: 'left',
+    validator: (value) => {
+      return ['center', 'right', 'left'].indexOf(value) !== -1
     },
   },
-}
+  /**
+   * It sets additional styling if needed.
+   */
+  cssStyle: {
+    type: String,
+    default: 'psui-text-gray-60',
+  },
+})
+
+const cssAlign = computed(() => {
+  if (props.align === 'right') return `psui-text-right ${props.cssStyle}`
+  if (props.align === 'center') return `psui-text-center  ${props.cssStyle}`
+  return `psui-text-left ${props.cssStyle}`
+})
 </script>
-<style> /* Please, use the file src/assets/scss/components/PsDataTable.scss */</style>
+
+<style>
+/* Please, use the file src/assets/scss/components/PsDataTable.scss */
+</style>

package/src/components/datatable/PsDataTableItem.vue

@@ -15,11 +15,7 @@
           </span>
           <div
             class="psui-flex psui-items-center"
-            :class="
-              el[Object.keys(el)[1]] >= 0
-                ? 'psui-text-green-70'
-                : 'psui-text-red-70'
-            "
+            :class="el[Object.keys(el)[1]] >= 0 ? 'psui-text-green-70' : 'psui-text-red-70'"
           >
             <i
               v-if="el[Object.keys(el)[1]] >= 0"
@@ -29,37 +25,27 @@
               v-else
               class="material-icons"
             >arrow_downward</i>
-            <span>
-              {{
-                (
-                  (el[Object.keys(el)[1]] / el[Object.keys(el)[0]]) *
-                  100
-                ).toFixed(2)
-              }}%
-            </span>
+            <span> {{ ((el[Object.keys(el)[1]] / el[Object.keys(el)[0]]) * 100).toFixed(2) }}% </span>
           </div>
         </div>
-        <span class="psui-text-gray-50">{{
-          el[Object.keys(el)[0]].toFixed(6)
-        }}</span>
+        <span class="psui-text-gray-50">{{ el[Object.keys(el)[0]].toFixed(6) }}</span>
       </td>
     </tr>
   </tbody>
 </template>
 
-<script>
-export default {
-  name: 'PsDataTableItem',
-  props: {
-    data: {
-      type: Array,
-      required: true,
-      default: () => {
-        return []
-      },
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+  data: {
+    type: Array,
+    required: true,
+    default: () => {
+      return []
     },
   },
-}
+})
 </script>
 
 <style scoped>
@@ -67,4 +53,4 @@ export default {
   font-size: 15px;
   margin-bottom: 2px;
 }
-</style>
+</style>

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>