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

package/src/components/ui/PsIcon.vue

@@ -1,159 +1,174 @@
 <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>
-    <img v-else-if="getIconType === 'url'" :src="icon" :class="[iconClasses]" />
+    <img
+      v-else-if="getIconType === 'url'"
+      :src="icon"
+      :class="[iconClasses]"
+    >
     <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"
-    ></inline-svg>
+    />
   </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'
-    },
-
-    /**
-     * It sets the type of the icon.
-     */
-    type: {
-      type: String,
-    },
-
-    /**
-     * 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
-    },
+<script setup>
+import tailwindConfig from '../../../tailwind.config.js'
+import imageLoader from '../../util/imageLoader.js'
 
-    /**
-     * 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'
-      }
-    },
+import { ref, computed, watch, onMounted } from 'vue'
 
-    /**
-     * 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',
   },
-  mounted() {
-    if(this.icon?.includes('/')) this.loadImage()
+
+  /**
+   * It sets a error when the icon is not available.
+   */
+  loaderErrorIcon: {
+    type: String,
+    default: 'more_horiz',
   },
-  methods: {
-    loadImage() {
-      this.finishedImageLoad = false
-      this.imageLoadError = false
-      imageLoader({ imageUrl: this.icon, returnsBase64: false })
-        .then(() => {
-          this.finishedImageLoad = true
-        })
-        .catch(() => {
-          this.imageLoadError = true
-        })
-    }
+  disableStroke: {
+    type: Boolean,
+    default: false,
+  },
+  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

@@ -0,0 +1,159 @@
+/**
+ * General Components
+ */
+import { directives } from './util/directives'
+
+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:any) {
+    Vue.component('PsButton', PsButton)
+    Vue.component('PsCheckbox', PsCheckbox)
+    Vue.component('PsDialog', PsDialog)
+    Vue.component('PsToast', PsToast)
+    Vue.component('PsTabHeader', PsTabHeader)
+    Vue.component('PsRadioButton', PsRadioButton)
+    Vue.component('PsSlider', PsSlider)
+    Vue.component('PsSwitch', PsSwitch)
+    Vue.component('PsInput', PsInput)
+    Vue.component('PsToggle', PsToggle)
+    Vue.component('PsAccordion', PsAccordion)
+    Vue.component('PsAccordionItem', PsAccordionItem)
+    Vue.component('PsChips', PsChips)
+    Vue.component('PsDataTable', PsDataTable)
+    Vue.component('PsDataTableItem', PsDataTableItem)
+    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)
+    Vue.component('PsDotLoader', PsDotLoader)
+    Vue.component('PsTooltip', PsTooltip)
+    Vue.component('PsRichTooltip', PsRichTooltip)
+    Vue.component('PsDialogTooltip', PsDialogTooltip)
+    Vue.component('PsDraggable', PsDraggable)
+    Vue.component('PsCardInfos', PsCardInfos)
+    Vue.component('PsChartLegend', PsChartLegend)
+    Vue.component('PsInlineSelector', PsInlineSelector)
+    Vue.component('PsInputTextArea', PsInputTextArea)
+    Vue.component('PsInputSelect', PsInputSelect)
+    Vue.component('PsDropdown',PsDropdown)
+    Vue.component('PsDropdownList', PsDropdownList)
+    Vue.component('PsMiniTag', PsMiniTag)
+    Vue.component('PsCheckboxSimple', PsCheckboxSimple)
+    Vue.component('PsBadgeWithIcon', PsBadgeWithIcon)
+    Vue.component('PsProgressBar', PsProgressBar)
+    Vue.component('PsRadioButtonSimple', PsRadioButtonSimple)
+    Vue.component('PsTestimonialCard',PsTestimonialCard)
+    Vue.component('PsDateCardInfo',PsDateCardInfo)
+    Vue.component('PsTagScope',PsTagScope)
+    Vue.component('PsBarChart',PsBarChart)
+    Vue.component('PsSimpleAlert',PsSimpleAlert)
+    Vue.component('PsBreadcrumb', PsBreadcrumb)
+    Vue.component('PsCollapse', PsCollapse)
+    
+    /**
+     * Initialize directives
+     */
+    directives(Vue)
+
+  },
+}
+
+export {
+  PsButton,
+  PsCheckbox,
+  PsRadioButton,
+  PsSlider,
+  PsSwitch,
+  PsToggle,
+  PsInput,
+  PsDialog,
+  PsToast,
+  PsTabHeader,
+  PsAccordion,
+  PsAccordionItem,
+  PsChips,
+  PsDataTable,
+  PsDataTableItem,
+  PsTableResultsHead,
+  PsTableResultsBody,
+  PsTableResultsHeadFlexible,
+  PsTableResultsHeadComparison,
+  PsIcon,
+  PsDotLoader,
+  PsTooltip,
+  PsRichTooltip,
+  PsDialogTooltip,
+  PsDraggable,
+  PsCardInfos,
+  PsChartLegend,
+  PsInlineSelector,
+  PsInputTextArea,
+  PsInputSelect,
+  PsDropdown,
+  PsDropdownList,
+  PsMiniTag,
+  PsCheckboxSimple,
+  PsBadgeWithIcon,
+  PsProgressBar,
+  PsRadioButtonSimple,
+  PsTestimonialCard,
+  PsDateCardInfo,
+  PsTagScope,
+  PsBarChart,
+  PsSimpleAlert,
+  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.js

@@ -1,14 +1,13 @@
 export const randomString = (length) => {
-  var result = ''
-  var characters =
+  let result = ''
+  const characters =
     'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
-  var charactersLength = characters.length
-  for (var i = 0; i < length; i++) {
+  const charactersLength = characters.length
+  for (let i = 0; i < length; i++) {
     result += characters.charAt(Math.floor(Math.random() * charactersLength))
   }
   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.js

@@ -1,18 +1,21 @@
 export default ({ imageUrl, onProgress = null, returnsBase64 = true }) => {
   return new Promise((resolve, reject) => {
-    var xhr = new XMLHttpRequest()
-    var notifiedNotComputable = false
+    const xhr = new XMLHttpRequest()
+    let notifiedNotComputable = false
 
     xhr.open('GET', imageUrl, true)
     xhr.responseType = 'arraybuffer'
 
     xhr.onprogress = (ev) => {
       if (ev.lengthComputable) {
-        let progress = parseInt((ev.loaded / ev.total) * 100)
+        
+        const progress = parseInt((ev.loaded / ev.total) * 100)
+        
         if(onProgress) onProgress(progress)
       } else {
         if (!notifiedNotComputable) {
           notifiedNotComputable = true
+          
           if(onProgress) onProgress(-1)
         }
       }
@@ -20,21 +23,25 @@ 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 {
-          var options = {}
-          var headers = xhr.getAllResponseHeaders()
-          var mime = headers.match(/^Content-Type\\:\s*(.*?)$/mi)
+          const options = {}
+          const headers = xhr.getAllResponseHeaders()
+          const mime = headers.match(/^Content-Type\\:\s*(.*?)$/mi)
+          
           if (mime && mime[1]) options.type = mime[1]
-          var blob = new Blob([xhr.response], options)
+          const blob = new Blob([xhr.response], options)
           resolve(window.URL.createObjectURL(blob))
         }
       }

package/tailwind.config.js

@@ -1,7 +1,16 @@
-module.exports = {
+/** @type {import('tailwindcss').Config} */
+
+export default {
   prefix: 'psui-',
-  purge: ['./index.html', './src/**/*.vue,js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
+  content: [
+    './index.html',
+    './src/**/*.vue',
+    './src/**/*.js',
+    './src/**/*.ts',
+    './src/**/*.jsx',
+    './src/**/*.tsx',
+  ],
+  darkMode: 'media', // or 'media' or 'class'
   theme: {
     colors: {
       'white': '#ffffff ',

package/tsconfig.json

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