@policystudio/policy-studio-ui-vue 1.1.90-beta.3 → 1.1.90-beta.30

package/src/index.ts

@@ -0,0 +1,156 @@
+/**
+ * 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'
+
+
+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)
+    
+    /**
+     * 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
+}
+

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

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": false,
+    "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"
+  ]
+}

package/.storybook/PolicyStudio.js

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

package/.storybook/eventBus.js

@@ -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.js

@@ -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.js

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

package/.storybook/preview.js

@@ -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$/,
-    },
-  },
-}

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 }