@policystudio/policy-studio-ui-vue 1.1.90-beta.5 → 1.1.90-beta.51

package/src/components/ui/PsIcon.vue

@@ -1,10 +1,13 @@
 <template>
-  <div :style="{display: display}">
+  <div
+    :style="{ display: display }"
+    @click="emit('click', $event)"
+  >
     <span
       v-if="getIconType === 'material-icons'"
       class="material-icons-round"
       :class="[getIconClasses]"
-      :style="{ fontSize: `${size}px`}"
+      :style="{ fontSize: `${size}px` }"
     >
       {{ getIcon }}
     </span>
@@ -16,148 +19,156 @@
     <inline-svg
       v-else
       :src="icon"
-      :width="size"
-      :height="size"
-      :stroke="getColor"
+      :width="width ? width : size"
+      :height="height ? height : size"
+      :stroke="stroke ? stroke : disableStroke ? null : getColor"
       :fill="getColor"
     />
   </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'
-    },
+<script setup>
+import tailwindConfig from '../../../tailwind.config.js'
+import imageLoader from '../../util/imageLoader.js'
 
-    /**
-     * It sets the type of the icon.
-     */
-    type: {
-      type: String,
-    },
+import { ref, computed, watch, onMounted } from 'vue'
 
-    /**
-     * 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'
-      }
-    },
-
-    /**
-     * 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',
+  },
+
+  /**
+   * It sets a error when the icon is not available.
+   */
+  loaderErrorIcon: {
+    type: String,
+    default: 'more_horiz',
   },
-  mounted() {
-    if(this.icon?.includes('/')) this.loadImage()
+  disableStroke: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    loadImage() {
-      this.finishedImageLoad = false
-      this.imageLoadError = false
-      imageLoader({ imageUrl: this.icon, returnsBase64: false })
-        .then(() => {
-          this.finishedImageLoad = true
-        })
-        .catch(() => {
-          this.imageLoadError = true
-        })
-    }
+  width: {
+    type: [Number, String],
+    default: null,
+  },
+  height: {
+    type: [Number, String],
+    default: null,
+  },
+})
+
+const finishedImageLoad = ref(false)
+const imageLoadError = ref(false)
+
+const emit = defineEmits(['click'])
+
+const getIconType = computed(() => {
+  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 ? `${props.color}` : ''
+})
+
+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 = () => {
+  if(getIconType.value != 'material-icons') {
+    finishedImageLoad.value = false
+    imageLoadError.value = false
+    imageLoader({ imageUrl: props.icon, returnsBase64: false })
+    .then(() => {
+      finishedImageLoad.value = true
+    })
+    .catch(() => {
+      imageLoadError.value = true
+    })
   }
 }
-</script>
+</script>

package/src/index.ts

@@ -1,56 +1,58 @@
 /**
  * General Components
  */
+import { directives } from './util/directives'
 
-import PsButton from './components/buttons/PsButton.vue'
-import PsCheckbox from './components/controls/PsCheckbox.vue'
-import PsRadioButton from './components/controls/PsRadioButton.vue'
-import PsSlider from './components/controls/PsSlider.vue'
-import PsSwitch from './components/controls/PsSwitch.vue'
-import PsToggle from './components/controls/PsToggle.vue'
-import PsInput from './components/forms/PsInput.vue'
-import PsDropdown from './components/forms/PsDropdown.vue'
-import PsDropdownList from './components/forms/PsDropdownList.vue'
-import PsInputTextArea from './components/forms/PsInputTextArea.vue'
-import PsInputSelect from './components/forms/PsInputSelect.vue'
-import PsDialog from './components/notifications/PsDialog.vue'
-import PsToast from './components/notifications/PsToast.vue'
-import PsTabHeader from './components/tabs/PsTabHeader.vue'
-import PsAccordion from './components/accordion/PsAccordion.vue'
-import PsAccordionItem from './components/accordion/PsAccordionItem.vue'
-import PsChips from './components/chips/PsChips.vue'
-import PsDataTable from './components/datatable/PsDataTable.vue'
-import PsDataTableItem from './components/datatable/PsDataTableItem.vue'
-import PsTableResults from './components/table-results/PsTableResults.vue'
-import PsTableResultsBody from './components/table-results/PsTableResultsBody.vue'
-import PsTableResultsHead from './components/table-results/PsTableResultsHead.vue'
-import PsTableResultsHeadComparison from './components/table-results/PsTableResultsHeadComparison.vue'
-import PsTableResultsHeadFlexible from './components/table-results/PsTableResultsHeadFlexible.vue'
-import PsIcon from './components/ui/PsIcon.vue'
-import PsDotLoader from './components/ui/PsDotLoader.vue'
-import PsTooltip from './components/tooltip/PsTooltip.vue'
-import PsRichTooltip from './components/tooltip/PsRichTooltip.vue'
-import PsDialogTooltip from './components/tooltip/PsDialogTooltip.vue'
-import PsDraggable from './components/controls/PsDraggable.vue'
-import PsCardInfos from './components/badges-and-tags/PsCardInfos.vue'
-import PsChartLegend from './components/badges-and-tags/PsChartLegend.vue'
-import PsInlineSelector from './components/controls/PsInlineSelector.vue'
-import PsScrollBar from './components/playground/PsScrollBar.vue'
-import PsMiniTag from './components/badges-and-tags/PsMiniTag.vue'
-import PsCheckboxSimple from './components/controls/PsCheckboxSimple.vue'
-import PsBadgeWithIcon from './components/badges-and-tags/PsBadgeWithIcon.vue'
-import PsProgressBar from './components/badges-and-tags/PsProgressBar.vue'
-import PsRadioButtonSimple from './components/controls/PsRadioButtonSimple.vue'
-import PsTestimonialCard from './components/badges-and-tags/PsTestimonialCard.vue'
-import PsDateCardInfo from './components/badges-and-tags/PsDateCardInfo.vue'
-import PsTagScope from './components/badges-and-tags/PsTagScope.vue'
-import PsBarChart from './components/data-graphics/PsBarChart.vue'
-import PsSimpleAlert from './components/notifications/PsSimpleAlert.vue'
-import PsBreadcrumb from './components/navigations/PsBreadcrumb.vue'
+import PsButton from '../src/components/buttons/PsButton.vue'
+import PsCheckbox from '../src/components/controls/PsCheckbox.vue'
+import PsRadioButton from '../src/components/controls/PsRadioButton.vue'
+import PsSlider from '../src/components/controls/PsSlider.vue'
+import PsSwitch from '../src/components/controls/PsSwitch.vue'
+import PsToggle from '../src/components/controls/PsToggle.vue'
+import PsInput from '../src/components/forms/PsInput.vue'
+import PsDropdown from '../src/components/forms/PsDropdown.vue'
+import PsDropdownList from '../src/components/forms/PsDropdownList.vue'
+import PsInputTextArea from '../src/components/forms/PsInputTextArea.vue'
+import PsInputSelect from '../src/components/forms/PsInputSelect.vue'
+import PsDialog from '../src/components/notifications/PsDialog.vue'
+import PsToast from '../src/components/notifications/PsToast.vue'
+import PsTabHeader from '../src/components/tabs/PsTabHeader.vue'
+import PsAccordion from '../src/components/accordion/PsAccordion.vue'
+import PsAccordionItem from '../src/components/accordion/PsAccordionItem.vue'
+import PsChips from '../src/components/chips/PsChips.vue'
+import PsDataTable from '../src/components/datatable/PsDataTable.vue'
+import PsDataTableItem from '../src/components/datatable/PsDataTableItem.vue'
+import PsTableResults from '../src/components/table-results/PsTableResults.vue'
+import PsTableResultsBody from '../src/components/table-results/PsTableResultsBody.vue'
+import PsTableResultsHead from '../src/components/table-results/PsTableResultsHead.vue'
+import PsTableResultsHeadComparison from '../src/components/table-results/PsTableResultsHeadComparison.vue'
+import PsTableResultsHeadFlexible from '../src/components/table-results/PsTableResultsHeadFlexible.vue'
+import PsTableResultsRow from '../src/components/table-results/PsTableResultsRow.vue'
+import PsIcon from '../src/components/ui/PsIcon.vue'
+import PsDotLoader from '../src/components/ui/PsDotLoader.vue'
+import PsTooltip from '../src/components/tooltip/PsTooltip.vue'
+import PsRichTooltip from '../src/components/tooltip/PsRichTooltip.vue'
+import PsDialogTooltip from '../src/components/tooltip/PsDialogTooltip.vue'
+import PsDraggable from '../src/components/controls/PsDraggable.vue'
+import PsCardInfos from '../src/components/badges-and-tags/PsCardInfos.vue'
+import PsChartLegend from '../src/components/badges-and-tags/PsChartLegend.vue'
+import PsInlineSelector from '../src/components/controls/PsInlineSelector.vue'
+import PsMiniTag from '../src/components/badges-and-tags/PsMiniTag.vue'
+import PsCheckboxSimple from '../src/components/controls/PsCheckboxSimple.vue'
+import PsBadgeWithIcon from '../src/components/badges-and-tags/PsBadgeWithIcon.vue'
+import PsProgressBar from '../src/components/badges-and-tags/PsProgressBar.vue'
+import PsRadioButtonSimple from '../src/components/controls/PsRadioButtonSimple.vue'
+import PsTestimonialCard from '../src/components/badges-and-tags/PsTestimonialCard.vue'
+import PsDateCardInfo from '../src/components/badges-and-tags/PsDateCardInfo.vue'
+import PsTagScope from '../src/components/badges-and-tags/PsTagScope.vue'
+import PsBarChart from '../src/components/data-graphics/PsBarChart.vue'
+import PsSimpleAlert from '../src/components/notifications/PsSimpleAlert.vue'
+import PsBreadcrumb from '../src/components/navigations/PsBreadcrumb.vue'
+import PsCollapse from '../src/components/collapse/PsCollapse.vue'
 
 
 export default {
-  install(Vue) {
+  install(Vue:any) {
     Vue.component('PsButton', PsButton)
     Vue.component('PsCheckbox', PsCheckbox)
     Vue.component('PsDialog', PsDialog)
@@ -66,9 +68,10 @@ export default {
     Vue.component('PsChips', PsChips)
     Vue.component('PsDataTable', PsDataTable)
     Vue.component('PsDataTableItem', PsDataTableItem)
-    Vue.component('PsTableResults', PsTableResults)
     Vue.component('PsTableResultsHead', PsTableResultsHead)
     Vue.component('PsTableResultsHeadComparison', PsTableResultsHeadComparison)
+    Vue.component('PsTableResults', PsTableResults)
+    Vue.component('PsTableResultsRow', PsTableResultsRow)
     Vue.component('PsTableResultsBody', PsTableResultsBody)
     Vue.component('PsTableResultsHeadFlexible',PsTableResultsHeadFlexible)
     Vue.component('PsIcon', PsIcon)
@@ -84,7 +87,6 @@ export default {
     Vue.component('PsInputSelect', PsInputSelect)
     Vue.component('PsDropdown',PsDropdown)
     Vue.component('PsDropdownList', PsDropdownList)
-    Vue.component('PsScrollBar', PsScrollBar)
     Vue.component('PsMiniTag', PsMiniTag)
     Vue.component('PsCheckboxSimple', PsCheckboxSimple)
     Vue.component('PsBadgeWithIcon', PsBadgeWithIcon)
@@ -96,23 +98,13 @@ export default {
     Vue.component('PsBarChart',PsBarChart)
     Vue.component('PsSimpleAlert',PsSimpleAlert)
     Vue.component('PsBreadcrumb', PsBreadcrumb)
+    Vue.component('PsCollapse', PsCollapse)
     
-    
-    Vue.directive('click-outside', {
-      bind: function (el, binding, vnode) {
-        el.clickOutsideEvent = function (event) {
-          // here I check that click was outside the el and his children
-          if (!(el == event.target || el.contains(event.target))) {
-            // and if it did, call method provided in attribute value
-            vnode.context[binding.expression](event)
-          }
-        }
-        document.body.addEventListener('click', el.clickOutsideEvent)
-      },
-      unbind: function (el) {
-        document.body.removeEventListener('click', el.clickOutsideEvent)
-      },
-    })
+    /**
+     * Initialize directives
+     */
+    directives(Vue)
+
   },
 }
 
@@ -132,7 +124,6 @@ export {
   PsChips,
   PsDataTable,
   PsDataTableItem,
-  PsTableResults,
   PsTableResultsHead,
   PsTableResultsBody,
   PsTableResultsHeadFlexible,
@@ -150,7 +141,6 @@ export {
   PsInputSelect,
   PsDropdown,
   PsDropdownList,
-  PsScrollBar,
   PsMiniTag,
   PsCheckboxSimple,
   PsBadgeWithIcon,
@@ -161,6 +151,9 @@ export {
   PsTagScope,
   PsBarChart,
   PsSimpleAlert,
-  PsBreadcrumb
+  PsBreadcrumb,
+  PsTableResults,
+  PsTableResultsRow,
+  PsCollapse
 }
 

package/src/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "rootDir": "../",
+    "strict": true,
+    "outDir": "../dist",
+    "resolveJsonModule": true,
+    "allowJs": true
+  },
+  "references": [
+    {"path": "../"}
+  ]
+}

package/src/types/index.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/util/{GeneralFunctions.ts → GeneralFunctions.js}

@@ -8,7 +8,6 @@ export const randomString = (length) => {
   }
   return result
 }
-
 export const getParentScrollableEl = (node) => {
   if (node == null) {
     return null
@@ -22,9 +21,19 @@ export const getParentScrollableEl = (node) => {
 }
 
 export const getParentVueComponentByName = (comp, name) => {
-  if (comp.$options.name === name) {
+  if (!comp) return null
+
+  if (comp?.appContext?.components[name]) {
+    return comp.appContext.components[name]
+  }
+
+  if (comp.$options && comp.$options.name === name) {
     return comp
-  } else {
+  }
+
+  if (comp.$parent) {
     return getParentVueComponentByName(comp.$parent, name)
   }
+
+  return null
 }

package/src/util/directives.ts

@@ -0,0 +1,24 @@
+
+export const directives = (Vue: any) => {
+  Vue.directive('click-outside', {
+    bind(el: any, binding: any, vnode: any) {
+      // Define a function to handle click events outside the element
+      const handler = (event: any) => {
+        if (binding?.value && !(el === event.target || el.contains(event.target))) {
+          // Call the method provided in the directive value
+          binding.value(event)
+        }
+      }
+  
+      // Store the handler function on the element
+      el.__clickOutsideHandler__ = handler
+  
+      // Add a click event listener to the body
+      document.body.addEventListener('click', handler)
+    },
+    unbind(el: any) {
+      // Remove the click event listener when the element is unbound
+      document.body.removeEventListener('click', el.__clickOutsideHandler__)
+    },
+  })
+}

package/src/util/{imageLoader.ts → imageLoader.js}

@@ -8,11 +8,14 @@ export default ({ imageUrl, onProgress = null, returnsBase64 = true }) => {
 
     xhr.onprogress = (ev) => {
       if (ev.lengthComputable) {
+        
         const progress = parseInt((ev.loaded / ev.total) * 100)
+        
         if(onProgress) onProgress(progress)
       } else {
         if (!notifiedNotComputable) {
           notifiedNotComputable = true
+          
           if(onProgress) onProgress(-1)
         }
       }
@@ -20,19 +23,23 @@ export default ({ imageUrl, onProgress = null, returnsBase64 = true }) => {
 
     xhr.onloadend = () => {
       const contentType = xhr.getResponseHeader('Content-Type')
+      
       if (!contentType.includes('image')) {
         reject(xhr)
       } else {
         if (!notifiedNotComputable) {
+          
           if(onProgress) onProgress(100)
         }
 
         if(!returnsBase64) {
+          
           resolve()
         } else {
           const options = {}
           const headers = xhr.getAllResponseHeaders()
           const mime = headers.match(/^Content-Type\\:\s*(.*?)$/mi)
+          
           if (mime && mime[1]) options.type = mime[1]
           const blob = new Blob([xhr.response], options)
           resolve(window.URL.createObjectURL(blob))

package/tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 
-module.exports = {
+export default {
   prefix: 'psui-',
   content: [
     './index.html',

package/tsconfig.json

@@ -3,40 +3,45 @@
     "target": "esnext",
     "module": "esnext",
     "strict": true,
+    "strictNullChecks": true,
     "jsx": "preserve",
+    "declaration": true,
     "moduleResolution": "node",
-    "allowJs": true,
+    "composite": true,
+    "noEmitOnError": false,
+    "outDir": "dist",
+    "rootDir": "src",
     "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "useDefineForClassFields": true,
     "sourceMap": true,
-    "baseUrl": ".",
+    "allowJs": true,
+    "baseUrl": "",
+    
     "types": [
-      "webpack-env"
+      "webpack-env",
     ],
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
     "lib": [
       "esnext",
-      "dom",
+      "dom", 
       "dom.iterable",
       "scripthost"
     ]
   },
   "include": [
     "src/**/*.ts",
-    "src/**/*.tsx",
+    "src/**/*.d.ts",
     "src/**/*.vue",
     "tests/**/*.ts",
-    "tests/**/*.tsx",
-    ".storybook/*.ts"
+    "tests/**/*.tsx",  
+    "src/util/GeneralFunctions.js", 
+    "src/util/imageLoader.js", 
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "doc"
   ]
 }