@policystudio/policy-studio-ui-vue 1.1.90-beta.10 → 1.1.90-beta.17

package/src/index.ts

@@ -1,52 +1,53 @@
 /**
  * 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'
 
 
 export default {
@@ -66,9 +67,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 +86,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)
@@ -97,22 +98,11 @@ export default {
     Vue.component('PsSimpleAlert',PsSimpleAlert)
     Vue.component('PsBreadcrumb', PsBreadcrumb)
     
-    
-    Vue.directive('click-outside', {
-      bind: function (el:any, binding:any, vnode:any) {
-        el.clickOutsideEvent = function (event:any) {
-          // 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:any) {
-        document.body.removeEventListener('click', el.clickOutsideEvent)
-      },
-    })
+    /**
+     * Initialize directives
+     */
+    directives(Vue)
+
   },
 }
 
@@ -132,7 +122,6 @@ export {
   PsChips,
   PsDataTable,
   PsDataTableItem,
-  PsTableResults,
   PsTableResultsHead,
   PsTableResultsBody,
   PsTableResultsHeadFlexible,
@@ -150,7 +139,6 @@ export {
   PsInputSelect,
   PsDropdown,
   PsDropdownList,
-  PsScrollBar,
   PsMiniTag,
   PsCheckboxSimple,
   PsBadgeWithIcon,
@@ -161,6 +149,8 @@ export {
   PsTagScope,
   PsBarChart,
   PsSimpleAlert,
-  PsBreadcrumb
+  PsBreadcrumb,
+  PsTableResults,
+  PsTableResultsRow
 }
 

package/src/tsconfig.json

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

package/src/{shims-vue.d.ts → types/index.d.ts}

@@ -4,8 +4,3 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
-
-declare module '*.svg' {
-  const content: string;
-  export default content;
-}

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

@@ -1,4 +1,4 @@
-export const randomString = (length:any) => {
+export const randomString = (length) => {
   let result = ''
   const characters =
     'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
@@ -8,8 +8,7 @@ export const randomString = (length:any) => {
   }
   return result
 }
-
-export const getParentScrollableEl = (node:any):any => {
+export const getParentScrollableEl = (node) => {
   if (node == null) {
     return null
   }
@@ -20,8 +19,7 @@ export const getParentScrollableEl = (node:any):any => {
     return getParentScrollableEl(node.parentNode)
   }
 }
-
-export const getParentVueComponentByName = (comp:any, name:any):any => {
+export const getParentVueComponentByName = (comp, name) => {
   if (comp.$options.name === name) {
     return comp
   } else {

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/eventBus.js

@@ -0,0 +1,10 @@
+import emitter from 'tiny-emitter/instance'
+
+export default {
+  $on: (...args) => emitter.on(...args),
+  $once: (...args) => emitter.once(...args),
+  $off: (...args) => emitter.off(...args),
+  $emit: (...args) => emitter.emit(...args)
+}
+
+

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

@@ -1,6 +1,4 @@
-// @ts-ignore
-
-export default ({ imageUrl, onProgress = null, returnsBase64 = true }:{imageUrl:any, onProgress:any, returnsBase64:any}) => {
+export default ({ imageUrl, onProgress = null, returnsBase64 = true }) => {
   return new Promise((resolve, reject) => {
     const xhr = new XMLHttpRequest()
     let notifiedNotComputable = false
@@ -8,14 +6,16 @@ export default ({ imageUrl, onProgress = null, returnsBase64 = true }:{imageUrl:
     xhr.open('GET', imageUrl, true)
     xhr.responseType = 'arraybuffer'
 
-    xhr.onprogress = (ev:any) => {
+    xhr.onprogress = (ev) => {
       if (ev.lengthComputable) {
-        // @ts-ignore
+        
         const progress = parseInt((ev.loaded / ev.total) * 100)
+        
         if(onProgress) onProgress(progress)
       } else {
         if (!notifiedNotComputable) {
           notifiedNotComputable = true
+          
           if(onProgress) onProgress(-1)
         }
       }
@@ -23,22 +23,23 @@ export default ({ imageUrl, onProgress = null, returnsBase64 = true }:{imageUrl:
 
     xhr.onloadend = () => {
       const contentType = xhr.getResponseHeader('Content-Type')
-      // @ts-ignore
+      
       if (!contentType.includes('image')) {
         reject(xhr)
       } else {
         if (!notifiedNotComputable) {
+          
           if(onProgress) onProgress(100)
         }
 
         if(!returnsBase64) {
-          // @ts-ignore
+          
           resolve()
         } else {
           const options = {}
           const headers = xhr.getAllResponseHeaders()
           const mime = headers.match(/^Content-Type\\:\s*(.*?)$/mi)
-          // @ts-ignore
+          
           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,45 +3,43 @@
     "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, //this make ts ignore error
-    "skipDefaultLibCheck": true, //this make ts ignore error
-    "noEmit": true, //this make ts ignore error
+    "outDir": "dist",
+    "rootDir": "src",
+    "skipLibCheck": false,
+    "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",
-    "src/**/*.stories.ts",
     "tests/**/*.ts",
-    "tests/**/*.tsx",
+    "tests/**/*.tsx", "src/util/eventBus.js", "src/util/GeneralFunctions.js", "src/util/imageLoader.js", 
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "doc"
   ]
 }

package/.storybook/PolicyStudio.ts

@@ -1,11 +0,0 @@
-import { create } from '@storybook/theming'
-import PolicyStudioUiLogo from '../src/assets/images/policy-studio.svg'
-
-
-export default create({
-  base: 'light',
-  brandTitle: 'Policy Studio UI Vue',
-  brandUrl: 'https://policystudio.co/',
-  brandImage: PolicyStudioUiLogo,
-  brandTarget: '_blank',
-});

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/.storybook/main.ts

@@ -1,21 +0,0 @@
-/** @type { import('@storybook/vue3-webpack5').StorybookConfig } */
-const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
-  framework: {
-    name: "@storybook/vue3-webpack5",
-    options: {
-      builder: {
-        useSWC: true,
-      },
-    },
-  },
-  docs: {
-    autodocs: "tag",
-  },
-};
-export default config;

package/.storybook/manager.ts

@@ -1,7 +0,0 @@
-import { addons } from '@storybook/manager-api'
-
-import PolicyStudio from './PolicyStudio'
-
-addons.setConfig({
-  theme: PolicyStudio,
-});

package/.storybook/preview.ts

@@ -1,17 +0,0 @@
-
-/**
- * Import tailwind css file (bundle) based on environment
- */
-const cssEnvFolder = (process.env.STORYBOOK_ENV === 'production') ? 'dist' : 'temp'
-require( `../${cssEnvFolder}/css/psui_styles.css`)
-console.warn(`Using tailwind css file(bundle) from: ../${cssEnvFolder}/css/psui_styles.css`)
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}