@policystudio/policy-studio-ui-vue 1.1.90-beta.4 → 1.1.90-beta.41

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"
   ]
 }

package/.storybook/eventBus.ts

@@ -1,26 +0,0 @@
-// this was a vue2 syntax
-// import Vue from 'vue';
-// export const eventBus = new Vue();
-
-// import { createApp } from 'vue';
-
-// export const app = createApp({});
-// const emitter = app.config.globalProperties.$emitter = {};
-
-// export const eventBus = {
-//   on(event, callback) {
-//     if (!emitter[event]) {
-//       emitter[event] = [];
-//     }
-//     emitter[event].push(callback);
-//   },
-//   emit(event, ...args) {
-//     if (emitter[event]) {
-//       emitter[event].forEach(callback => {
-//         callback(...args);
-//       });
-//     }
-//   },
-// };
-
-// app.mount('#app');

package/babel.config.js

@@ -1,17 +0,0 @@
-const presets = [
-  [
-    '@babel/preset-env',
-    {
-      targets: {
-        edge: '17',
-        firefox: '60',
-        chrome: '67',
-        safari: '11.1',
-      },
-      useBuiltIns: 'usage',
-      corejs: '3.6.4',
-    },
-  ],
-]
-
-module.exports = { presets }