@policystudio/policy-studio-ui-vue 1.1.90-beta.0 → 1.1.90-beta.12

package/src/assets/scss/components/PsProgressBar.scss

@@ -1,10 +1,10 @@
 @layer components {
   .psui-el-progress-bar {
-    @apply .psui-relative .psui-h-2 .psui-rounded-full .psui-bg-red-10;
+    @apply psui-relative psui-h-2 psui-rounded-full psui-bg-red-10;
     width: 100px;
 
     &.is-breakeven {
-      @apply .psui-bg-blue-20;
+      @apply psui-bg-blue-20;
     }
 
     &-percentage {
@@ -16,13 +16,13 @@
     }
 
     &-divider {
-      @apply .psui-absolute .psui-rounded-full .psui-z-auto .psui-bg-gray-30;
+      @apply psui-absolute psui-rounded-full psui-z-auto psui-bg-gray-30;
       width: 2px; height: 14px;
       top: -3px;
     }
 
     &-value {
-      @apply .psui-h-2 .psui-rounded-tl-full .psui-rounded-bl-full;
+      @apply psui-h-2 psui-rounded-tl-full psui-rounded-bl-full;
     }
 
     @keyframes animate-stripes {

package/src/assets/scss/components/PsTabHeader.scss

@@ -6,7 +6,7 @@
     button {
       @apply transition-default psui-text-small;
       &.status-disabled {
-        @apply cursor-not-allowed;
+        @apply psui-cursor-not-allowed;
       }
 
       &:focus {

package/src/assets/scss/components/PsTableResults.scss

@@ -1,6 +1,6 @@
 @layer components{
   .psui-el-table-results-wrapper {
-    @apply psui-w-full psui-whitespace-no-wrap psui-flex psui-overflow-auto;
+    @apply psui-w-full psui-whitespace-nowrap psui-flex psui-overflow-auto;
 
     &.table-flexible {
       @apply psui-pr-4;

package/src/assets/scss/components/PsTestimonialCard.scss

@@ -1,6 +1,6 @@
 @layer components {
   .psui-el-testimonial {
-    @apply psui-relative psui-bg-white psui-shadow-elevation-5 psui-flex psui-flex-col psui-rounded-lg w-full;
+    @apply psui-relative psui-bg-white psui-shadow-elevation-5 psui-flex psui-flex-col psui-rounded-lg psui-w-full;
     padding: 56px 42px 40px 32px;
 
     &-icon {

package/src/components/badges-and-tags/PsBadgeWithIcon.vue

@@ -24,7 +24,8 @@
        * It set any further css style that might be needed.
        */
       iconClass: {
-        type: String
+        type: String,
+        default:''
       },
       message: {
         type: String,

package/src/components/badges-and-tags/PsProgressBar.vue

@@ -38,7 +38,7 @@ export default {
       default: 1
     },
     forceBreakEven: {
-      Boolean,
+      type: Boolean,
       default: false
     },
     value: {

package/src/components/buttons/PsButton.vue

@@ -6,127 +6,105 @@
     class="psui-el-button" 
     :class="[getComponentClass, {'hover': isHover}, {'disabled': disabled || loading }]" 
   >
-    <svg
+    <svg
       v-if="loading" 
       class="psui-animate-spin psui-mr-3 psui-h-5 psui-w-5 psui-text-black"
       :class="`${iconPosition == 'left' ? 'psui-mr-3' : 'psui-ml-3 psui--mr-1'}`"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
     >
-      <circle
-        class="psui-opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        stroke-width="4"
+      <circle
+        class="psui-opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
       />
-      <path
-        class="psui-opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      <path
+        class="psui-opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
       />
     </svg>
-    <i
-      v-else-if="icon"
-      :class="iconClass"
-      class="material-icons-round"
+    <i
+      v-else-if="icon"
+      :class="iconClass"
+      class="material-icons-round"
     >{{ icon }}</i>
     <span v-if="label">{{ label }}</span>
   </button>
 </template>
 
-<script>
-export default {  
-  props: {
-    /**
-     * It set de label of the button when component is rendered.
-     */
+<script setup lang="ts">
+import { PropType, computed, ref } from 'vue'
+
+  const isHover = ref(false)
+
+  const emit = defineEmits(['click'])
+
+  const props = defineProps({
     label: {
       type: String,
+      default: ''
     },
-    /**
-     * It set the layout of the button. eg: solid, outline, ghost, onlytext and caution.
-     */
-    layout: {
-      type: String,
+    layout:{
+      type: String as PropType<'solid' | 'outline' | 'ghost' | 'onlytext' | 'caution'>,
       default: 'solid',
-      validator: (value) => ['solid','outline','ghost','onlytext','caution'].includes(value)
+      validator: (value:string) => ['solid','outline','ghost','onlytext','caution'].includes(value)
     },
-    /**
-     * It sets the text key which will retrieve a icon from Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/.
-     */
     icon: {
       type: String,
+      default: ''
     },
-    /**
-     * It sets the position of the icon. eg: left or right.
-     */
-    iconPosition:{
+    iconPosition: {
       type: String,
       default: 'left',
-      validator: (value) => ['left','right'].includes(value)
+      validator: (value:string) => ['left','right'].includes(value)
     },
-    /**
-     * It sets the size of the icon. eg: small, medium and big.
-     */
     size: {
-      type: String,
-      default: 'big',
-      validator: (value) => ['small','medium','big'].includes(value)
-    },
-    /**
-     * It disable the button. All mouse event are disabled.
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * It disable and add a spin icon to the button. All mouse event are disabled.
-     */
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * It set any further css style that might be needed.
-     */
-    iconClass:{
-      type: String
-    }
-  },
-  data(){
-    return {
-      isHover: false,
-    }
-  },
-  computed: {
-    getComponentClass(){
-        if(this.icon){
-          return `layout-${this.layout} size-${this.size} icon-${this.iconPosition}`
-        } else {
-          return `layout-${this.layout} size-${this.size}` 
-        }
-    },
-  },
-  methods: {
-    onClick() {
-      if (this.disabled) return
-      this.$emit('click')
-    },
-    onMouseEnter(){
-      if(!this.disabled){
-        this.isHover = true
-      }
-    },
-    onMouseLeave(){
-      if(!this.disabled){
-        this.isHover = false
-      }
+        type: String,
+        default: 'big',
+        validator: (value:string) => ['small','medium','big'].includes(value)
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      iconClass:{
+        type: String,
+        default: ''
+      } 
+  })
+
+ const getComponentClass = computed(()=>{
+  if(props.icon){
+    return `layout-${props.layout} size-${props.size} icon-${props.iconPosition}`
+  } else {
+    return `layout-${props.layout} size-${props.size}` 
+  }
+ })   
+
+ const onClick = () => {
+  if (props.disabled) return
+    emit('click')
+ }
+ const onMouseEnter = () => {
+  if(!props.disabled){
+    isHover.value = true
+  }
+ }
+
+ const onMouseLeave = () => {
+    if(!props.disabled){
+      isHover.value = false
     }
   }
-}
+
 </script>
 

package/src/{index.js → index.ts}

@@ -50,6 +50,7 @@ import PsBreadcrumb from './components/navigations/PsBreadcrumb.vue'
 
 
 export default {
+  // @ts-ignore
   install(Vue) {
     Vue.component('PsButton', PsButton)
     Vue.component('PsCheckbox', PsCheckbox)
@@ -99,7 +100,9 @@ export default {
     
     
     Vue.directive('click-outside', {
+      // @ts-ignore
       bind: function (el, binding, vnode) {
+        // @ts-ignore
         el.clickOutsideEvent = function (event) {
           // here I check that click was outside the el and his children
           if (!(el == event.target || el.contains(event.target))) {
@@ -109,6 +112,7 @@ export default {
         }
         document.body.addEventListener('click', el.clickOutsideEvent)
       },
+      // @ts-ignore
       unbind: function (el) {
         document.body.removeEventListener('click', el.clickOutsideEvent)
       },

package/src/shims-vue.d.ts

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

package/src/stories/{Accordion.stories.js → Accordion.stories.ts}

@@ -8,8 +8,8 @@ export default {
 }
 
 
-export const Index = (args, { argTypes }) => ({
-  props: Object.keys(argTypes, args),
+export const Index = (args:any, { argTypes }: { argTypes:any }) => ({
+  props: Object.keys({argTypes, args}),
   components: { PsAccordion, PsAccordionItem },
   template:
     `

package/src/stories/{BadgeWithIcon.stories.js → BadgeWithIcon.stories.ts}

@@ -7,7 +7,7 @@ export default {
     },
   }
   
-  const TemplateDefault = (args, {argTypes})=>({
+  const TemplateDefault = (args:any, {argTypes}:{argTypes:any})=>({
     props: Object.keys(argTypes),
     components:{PsBadgeWithIcon},
     template: `

package/src/stories/{BarChart.stories.js → BarChart.stories.ts}

@@ -4,7 +4,7 @@ export default {
   component: PsBarChart,
 }
 
-const defaultTemplate = (args, {argTypes}) => ({
+const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
   props: Object.keys(argTypes),
   components: { PsBarChart },
   template: `

package/src/stories/{Breadcrumb.stories.js → Breadcrumb.stories.ts}

@@ -11,7 +11,7 @@ const items = [
   { title: '4th level', route: '' },
 ]
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes }:{argTypes:any}) => ({
   props: Object.keys(argTypes),
   components: { PsBreadcrumb },
   template: `
@@ -20,6 +20,3 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const Default = Template.bind({})
-Default.args = {
-  items: items,
-}

package/src/stories/{CardInfos.stories.js → CardInfos.stories.ts}

@@ -6,11 +6,10 @@ export default {
   argTypes: {},
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
   props: Object.keys(argTypes),
   components: { PsCardInfos },
   template: '<PsCardInfos v-bind="$props" />',
 })
 
 export const CardInfos = Template.bind({})
-CardInfos.args = {}

package/src/stories/{ChartLegend.stories.js → ChartLegend.stories.ts}

@@ -6,11 +6,10 @@ export default {
   argTypes: {},
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes } : { argTypes:any }) => ({
   props: Object.keys(argTypes),
   components: { PsChartLegend },
   template: '<PsChartLegend v-bind="$props" />',
 })
 
 export const ChartLegend = Template.bind({})
-ChartLegend.args = {}

package/src/stories/{Checkbox.stories.js → Checkbox.stories.ts}

@@ -5,7 +5,7 @@ export default {
   component: PsCheckbox,
 }
 
-const defaultTemplate = (args, {argTypes}) => ({
+const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
   props: Object.keys(argTypes),
   components: { PsCheckbox},
   template: `

package/src/stories/{CheckboxSimple.stories.js → CheckboxSimple.stories.ts}

@@ -5,7 +5,7 @@ export default {
   component: PsCheckboxSimple,
 }
 
-const defaultTemplate = (args, {argTypes}) => ({
+const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
   props: Object.keys(argTypes),
   components: { PsCheckboxSimple },
   data: () => ({

package/src/stories/{Chips.stories.js → Chips.stories.ts}

@@ -1,31 +1,33 @@
 import PsChips from '../components/chips/PsChips.vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
 
-export default {
-  title: 'Components/Chips',
-  component: PsChips,
+import * as HeaderStories from '../stories/Header.stories'
+
+const meta: Meta<typeof PsChips> = {
+  component: PsChips
 }
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsChips },
-  data: ()=>{
-    return{
-      isChecked: true,
-      isCheckedTwo: null,
-    }
-  },
-  template: `<div style="display:flex; gap: 10px;">
-                <PsChips v-bind='$props' type="button" @update:checked='isChecked = $event' :checked='isChecked'/>
+export default meta
+
+type Story = StoryObj<typeof PsChips>
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { PsChips },
+    setup(){
+      return { args }
+    },
+    template: `<div style="display:flex; gap: 10px;">
                 <PsChips v-bind='$props' label="Simple chips with icons" type="button" layout="with-icon" icon="home" @update:checked='isChecked = $event' :checked='isChecked'/>
                 <PsChips v-bind='$props' label="Radio chips" type="radio" @update:checked='isChecked = $event' :checked='isChecked'/>
                 <PsChips v-bind='$props' label="Checkbox chips" type="checkbox" @update:checked='isCheckedTwo = $event' :checked='isCheckedTwo'/>
                 <PsChips v-bind='$props' label="Rich chips" type="button" layout="rich" icon="text_snippet" @update:checked='isChecked = $event' :checked='isChecked'/>
               </div>
-              `
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  label: 'Simple Chip',
-  icon:'',
-}
+              `,
+    args:{
+      label: 'Simple Chip',
+      icon:'',
+      ...HeaderStories.LoggedIn.args
+    }
+  })
+}

package/src/stories/{ClimateZoneBadge.stories.js → ClimateZoneBadge.stories.ts}

@@ -5,13 +5,14 @@ export default {
   component: PsClimateZoneBadge,
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
   props: Object.keys(argTypes),
   components: { PsClimateZoneBadge },
   template: '<PsClimateZoneBadge v-bind="$props" />',
 })
 
 export const ClimateZoneBadge = Template.bind({})
+// @ts-ignore
 ClimateZoneBadge.args = {
   icon: 'area_chart',
 }

package/src/stories/{CostEffectBar.stories.js → CostEffectBar.stories.ts}

@@ -13,11 +13,12 @@ export default {
   },
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
   props: Object.keys(argTypes),
   components: { PsCostEffectBar },
   template: '<PsCostEffectBar v-bind="$props" />',
 })
 
 export const SimpleProgressBar = Template.bind({})
+// @ts-ignore
 SimpleProgressBar.args = {}

package/src/stories/{Datatable.stories.js → Datatable.stories.ts}

@@ -1,3 +1,4 @@
+// @ts-ignore
 import PsDataTable, { alignment } from '../components/datatable/PsDataTable.vue'
 import PsDataTableItem from '../components/datatable/PsDataTableItem.vue'
 
@@ -10,7 +11,7 @@ export default {
     }
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
     props: Object.keys(argTypes),
     components:  {PsDataTable},
     template: `
@@ -20,7 +21,7 @@ const Template = (args, { argTypes }) => ({
         `
 })
 
-const RichTemplate = (args, { argTypes } ) => ({
+const RichTemplate = (args:any, { argTypes }:{ argTypes:any } ) => ({
     props: Object.keys(argTypes),
     components: {PsDataTable, PsDataTableItem},
     template: `
@@ -34,6 +35,7 @@ const RichTemplate = (args, { argTypes } ) => ({
 
 
 export const Simple = Template.bind({})
+// @ts-ignore
 Simple.args = {
     header: ['year', 'month', 'sale'],
     data: [{ year: '1992', month: '12', sale: '1000.00' }, { year: '1989', month: '02', sale: '1200.00' }],
@@ -42,6 +44,7 @@ Simple.args = {
 }
 
 export const Rich = RichTemplate.bind({})
+// @ts-ignore
 Rich.args = {
     header: ['header 1', 'header 2', 'header 3'],
     data:[[ [ 20, -3],  [  20,  2], [  20,  2] ], { header4: { value: 20, delta: 2}, header5: { value: 20, delta: 2}, header6: { value: 20, delta: 2} }],

package/src/stories/{DateCardInfo.stories.js → DateCardInfo.stories.ts}

@@ -5,7 +5,7 @@ export default {
     component: PsDateCardInfo,
   }
 
-  const Template = (args,{argTypes}) => ({
+  const Template = (args:any, {argTypes}:{argTypes:any}) => ({
     props: Object.keys(argTypes),
     components:{PsDateCardInfo},
     template: `
@@ -18,7 +18,3 @@ export default {
 }) 
 
 export const Default = Template.bind({})
-
-Default.args = {
-  date: '2021/02/23'
-}

package/src/stories/{Dialog.stories.js → Dialog.stories.ts}

@@ -4,7 +4,7 @@ export default {
   title: 'Notifications/Dialog',
   component: PsDialog,
 }
-
+// @ts-ignore
 const TemplateExamples = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsDialog },

package/src/stories/{Draggable.stories.js → Draggable.stories.ts}

@@ -4,7 +4,7 @@ export default {
   title: 'Controls & Selectors/Draggable',
   component: PsDraggable 
 }
-
+// @ts-ignore
 const Template = (args, {argTypes}) => ({
   props: Object.keys(argTypes),
   components: { PsDraggable },
@@ -16,6 +16,7 @@ const Template = (args, {argTypes}) => ({
 })
 
 export const Component = Template.bind({})
+// @ts-ignore
 Component.args = {
   getColumns: {columnGroups:[{title: 'COST EFFECTIVENESS', columns: [ 'Item 1' , 'Item 2' , 'Item 3', 'Item 4']}, {title: 'PER HOME RESULTS', columns: [ 'Item 1' , 'Item 2' , 'Item 3', 'Item 4']}]},
   module: 'comparison'

package/src/stories/{Dropdown.stories.js → Dropdown.stories.ts}

@@ -4,7 +4,7 @@ export default {
   title: 'Components/Dropdown',
   component: { PsDropdown, PsDropdownList },
 }
-
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsDropdown, PsDropdownList },
@@ -87,6 +87,7 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const DropdownMenu = Template.bind({})
+// @ts-ignore
 DropdownMenu.args = {
   items: [
     'Selectable option 01',

package/src/stories/{DropdownList.stories.js → DropdownList.stories.ts}

@@ -1,3 +1,4 @@
+// @ts-ignore
 import PsDropdownList, { itemStyle } from '../components/forms/PsDropdownList.vue'
 export default {
   title: 'Components/Dropdown/Dropdown List',
@@ -17,7 +18,7 @@ export default {
     }
   }
 }
-
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsDropdownList },
@@ -205,6 +206,7 @@ const studyData = {
 }
 
 export const DropdownList = Template.bind({})
+// @ts-ignore
 DropdownList.args = {
   items: onlyTextItems,
   study_data: studyData,

package/src/stories/{Header.stories.js → Header.stories.ts}

@@ -5,6 +5,7 @@ export default {
   component: MyHeader,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
+  // @ts-ignore
   render: (args) => ({
     // Components used in your story `template` are defined in the `components` object
     components: {

package/src/stories/{HighlightRippleDot.stories.js → HighlightRippleDot.stories.ts}

@@ -4,7 +4,7 @@ export default {
   title: 'Badges & Tags/Badges/HighlightRippleDot',
   component: PsHighlightRippleDot,
 }
-
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsHighlightRippleDot },
@@ -12,4 +12,5 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const HighlightRippleDot = Template.bind({})
+// @ts-ignore
 HighlightRippleDot.args = {}