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

package/src/components/tooltip/PsTooltip.vue

@@ -1,21 +1,24 @@
 <template>
   <div 
     ref="tooltip" 
-    class='psui-el-tooltip'
+    class="psui-el-tooltip"
     @mouseenter="open" 
     @mouseleave="close" 
   >
-    <div ref="tooltiptrigger" class='psui-el-tooltip-trigger'>
-      <slot name="trigger"></slot>
+    <div
+      ref="tooltiptrigger"
+      class="psui-el-tooltip-trigger"
+    >
+      <slot name="trigger" />
     </div>
 
     <div 
-      class='psui-el-tooltip-wrapper'
+      class="psui-el-tooltip-wrapper"
     >
       <div
         role="menu"
         ref="dialog"
-        class='psui-el-tooltip-dialog'
+        class="psui-el-tooltip-dialog"
         :class="cssClass"
       >
         <div
@@ -23,9 +26,14 @@
           aria-orientation="vertical"
           :class="getComponentClass"
         >
-          <h2 v-if="title">{{ title}}</h2>
-          <div v-else class="psui-el-tooltip-content-wrapper">
-            <slot name="content"></slot>
+          <h2 v-if="title">
+            {{ title }}
+          </h2>
+          <div
+            v-else
+            class="psui-el-tooltip-content-wrapper"
+          >
+            <slot name="content" />
           </div>
         </div>
       </div>
@@ -94,7 +102,7 @@ export default {
   mounted() {
     document.addEventListener('resize', this.updatePosition)
   },
-  beforeDestroy() {
+  beforeUnmount() {
     document.removeEventListener('resize', this.updatePosition)
   },
   methods: {

package/src/components/ui/PsDotLoader.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="psui-el-dotloader">
-      <div class="psui-el-dotloader-wrapper">
-        <span></span>
-        <span></span>
-        <span></span>
-      </div>
+    <div class="psui-el-dotloader-wrapper">
+      <span />
+      <span />
+      <span />
+    </div>
   </div>
 </template>
 

package/src/components/ui/PsIcon.vue

@@ -8,7 +8,11 @@
     >
       {{ 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"
@@ -16,7 +20,7 @@
       :height="size"
       :stroke="getColor"
       :fill="getColor"
-    ></inline-svg>
+    />
   </div>
 </template>
 

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

@@ -1,4 +1,3 @@
-
 /**
  * General Components
  */
@@ -51,7 +50,7 @@ import PsBreadcrumb from './components/navigations/PsBreadcrumb.vue'
 
 
 export default {
-  install(Vue) {
+  install(Vue:any) {
     Vue.component('PsButton', PsButton)
     Vue.component('PsCheckbox', PsCheckbox)
     Vue.component('PsDialog', PsDialog)
@@ -100,8 +99,8 @@ export default {
     
     
     Vue.directive('click-outside', {
-      bind: function (el, binding, vnode) {
-        el.clickOutsideEvent = function (event) {
+      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
@@ -110,7 +109,7 @@ export default {
         }
         document.body.addEventListener('click', el.clickOutsideEvent)
       },
-      unbind: function (el) {
+      unbind: function (el:any) {
         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/Button.stories.ts

@@ -0,0 +1,48 @@
+import MyButton from './Button.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+export default {
+  title: 'Example/Button',
+  component: MyButton,
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: {
+      control: 'color',
+    },
+    onClick: {},
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+}
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+}
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+}
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+}
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+}

package/src/stories/Button.vue

@@ -0,0 +1,59 @@
+<template>
+  <button
+    type="button"
+    :class="classes"
+    @click="onClick"
+    :style="style"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script>
+import './button.css'
+import { reactive, computed } from 'vue'
+
+export default {
+  name: 'MyButton',
+
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    primary: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      validator: function (value) {
+        return ['small', 'medium', 'large'].indexOf(value) !== -1
+      },
+    },
+    backgroundColor: {
+      type: String,
+    },
+  },
+
+  emits: ['click'],
+
+  setup(props, { emit }) {
+    props = reactive(props)
+    return {
+      classes: computed(() => ({
+        'storybook-button': true,
+        'storybook-button--primary': props.primary,
+        'storybook-button--secondary': !props.primary,
+        [`storybook-button--${props.size || 'medium'}`]: true,
+      })),
+      style: computed(() => ({
+        backgroundColor: props.backgroundColor,
+      })),
+      onClick() {
+        emit('click')
+      },
+    }
+  },
+}
+</script>

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.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import PsClimateZoneBadge from '../components/badges-and-tags/PsClimateZoneBadge.vue'
+
+import * as HeaderStories from '../stories/Header.stories'
+
+const meta: Meta<typeof PsClimateZoneBadge> = {
+  component: PsClimateZoneBadge
+}
+
+export default meta
+
+type Story = StoryObj<typeof PsClimateZoneBadge>
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { PsClimateZoneBadge },
+    setup(){
+      return { args }
+    },
+    template: '<PsClimateZoneBadge v-bind="$props" />',
+    args:{
+      icon: 'area_chart',
+      ...HeaderStories.LoggedIn.args
+    }
+  })
+}
+

package/src/stories/CostEffectBar.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import PsCostEffectBar from '../components/badges-and-tags/PsCostEffectBar.vue'
+
+import * as HeaderStories from '../stories/Header.stories'
+
+const meta: Meta<typeof PsCostEffectBar> = {
+  component: PsCostEffectBar
+}
+
+export default meta
+
+type Story = StoryObj<typeof PsCostEffectBar>
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { PsCostEffectBar },
+    setup(){
+      return { args }
+    },
+    template: '<PsCostEffectBar v-bind="$props" />',
+    args:{
+      ...HeaderStories.LoggedIn.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}

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

package/src/stories/Draggable.stories.ts

@@ -0,0 +1,32 @@
+import PsDraggable from '../components/controls/PsDraggable.vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import * as HeaderStories from '../stories/Header.stories'
+
+const meta: Meta<typeof PsDraggable> = {
+  component: PsDraggable
+}
+
+export default meta
+
+type Story = StoryObj<typeof PsDraggable>
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { PsDraggable },
+    setup(){
+      return { args }
+    },
+    template: `
+      <div style='width: 300px; font-family: "Lato", sans-serif; font-size: 12px;'>
+          <PsDraggable v-bind='$props'/>
+      </div>
+    `,
+    args:{
+      ...HeaderStories.LoggedIn.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}

@@ -5,7 +5,7 @@ export default {
   component: { PsDropdown, PsDropdownList },
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
   props: Object.keys(argTypes),
   components: { PsDropdown, PsDropdownList },
   template: `
@@ -87,13 +87,3 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const DropdownMenu = Template.bind({})
-DropdownMenu.args = {
-  items: [
-    'Selectable option 01',
-    'Selectable option 02',
-    'Selectable option 03',
-    'Selectable option 04',
-    'Selectable option 05',
-    'Selectable option 06',
-  ],
-}

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/{ElevationSystem.stories.mdx → ElevationSystem.mdx}

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/addon-docs';
 
 <Meta title="Elevation system" />
 

package/src/stories/Header.stories.ts

@@ -0,0 +1,42 @@
+import MyHeader from './Header.vue'
+
+export default {
+  title: 'Example/Header',
+  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: {
+      MyHeader,
+    },
+    // The story's `args` need to be mapped into the template through the `setup()` method
+    setup() {
+      // Story args can be spread into the returned object
+      return {
+        ...args,
+      }
+    },
+    // Then, the spread values can be accessed directly in the template
+    template: '<my-header :user="user" />',
+  }),
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+}
+
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+}
+
+export const LoggedOut = {
+  args: {
+    user: null,
+  },
+}