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

package/src/stories/Button.stories.ts

@@ -1,48 +0,0 @@
-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

@@ -1,59 +0,0 @@
-<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.ts

@@ -1,15 +0,0 @@
-import PsCardInfos from '../components/badges-and-tags/PsCardInfos.vue'
-
-export default {
-  title: 'Components/CardInfos',
-  component: PsCardInfos,
-  argTypes: {},
-}
-
-const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
-  props: Object.keys(argTypes),
-  components: { PsCardInfos },
-  template: '<PsCardInfos v-bind="$props" />',
-})
-
-export const CardInfos = Template.bind({})

package/src/stories/ChartLegend.stories.ts

@@ -1,15 +0,0 @@
-import PsChartLegend from '../components/badges-and-tags/PsChartLegend.vue'
-
-export default {
-  title: 'Badges & Tags/Badges/ChartLegend',
-  component: PsChartLegend,
-  argTypes: {},
-}
-
-const Template = (args:any, { argTypes } : { argTypes:any }) => ({
-  props: Object.keys(argTypes),
-  components: { PsChartLegend },
-  template: '<PsChartLegend v-bind="$props" />',
-})
-
-export const ChartLegend = Template.bind({})

package/src/stories/Checkbox.stories.ts

@@ -1,45 +0,0 @@
-import PsCheckbox from '../components/controls/PsCheckbox.vue'
-// const icons = ['add_circle', 'delete', 'done', 'info', 'send']
-export default {
-  title: 'Controls & Selectors/Checkbox',
-  component: PsCheckbox,
-}
-
-const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
-  props: Object.keys(argTypes),
-  components: { PsCheckbox},
-  template: `
-    <div style='display:flex; gap: 20px;'>
-      <div style='display:flex; flex-direction:column; gap:5px;'>
-        <p>Resting</p>
-        <div style='display: flex; flex-direction:column; gap: 10px;'>
-          <PsCheckbox v-bind="$props" label='Label 1' />
-          <PsCheckbox v-bind="$props" label='Label 2' size='small' />
-        </div>
-      </div>
-      <div style='display:flex; flex-direction:column; gap:5px;'>
-        <p>Active</p>
-        <div style='display: flex; flex-direction:column; gap: 10px;'>
-          <PsCheckbox v-bind="$props" label='Label 3'  checked />
-          <PsCheckbox v-bind="$props" label='Label 4'  checked size='small'/>
-        </div>
-      </div>
-      <div style='display:flex; flex-direction:column; gap:5px;'>
-        <p>Mixed</p>
-        <div style='display: flex; flex-direction:column; gap: 10px;'>
-          <PsCheckbox v-bind="$props" label='Label 5' layout='mixed' checked />
-          <PsCheckbox v-bind="$props" label='Label 6' layout='mixed' size='small' checked />
-        </div>
-      </div>
-      <div style='display:flex; flex-direction:column; gap:5px;'>
-        <p>Disabled</p>
-        <div style='display: flex; flex-direction:column; gap: 10px;'>
-          <PsCheckbox v-bind="$props" label='Label 7' disabled/>
-          <PsCheckbox v-bind="$props" label='Label 8' size='small' disabled/>
-        </div>
-      </div>
-    </div>
-    `
-})
-
-export const Default = defaultTemplate.bind({}) 

package/src/stories/CheckboxSimple.stories.ts

@@ -1,49 +0,0 @@
-import PsCheckboxSimple from '../components/controls/PsCheckboxSimple.vue'
-// const icons = ['add_circle', 'delete', 'done', 'info', 'send']
-export default {
-  title: 'Text fields & Forms/Inputs V2/Checkbox',
-  component: PsCheckboxSimple,
-}
-
-const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
-  props: Object.keys(argTypes),
-  components: { PsCheckboxSimple },
-  data: () => ({
-    checkBox1 : true
-  }),
-  template: `
-    <div style='display:flex; gap: 20px;'>
-      <div style='display:flex; flex-direction:column; gap:5px;'>
-        <p>Resting</p>
-        <div style='display: flex; flex-direction:column; gap: 10px;'>
-          <PsCheckboxSimple :checked="checkBox1" @click="checkBox1 = !checkBox1" label='Label 1' />
-          <PsCheckboxSimple v-bind="$props" label='Label 2' size='small' />
-        </div>
-      </div>
-      <div style='display:flex; flex-direction:column; gap:5px;'>
-        <p>Active</p>
-        <div style='display: flex; flex-direction:column; gap: 10px;'>
-          <PsCheckboxSimple v-bind="$props" label='Label 3' checked />
-          <PsCheckboxSimple v-bind="$props" label='Label 4' checked size='small'/>
-        </div>
-      </div>
-      <div style='display:flex; flex-direction:column; gap:5px;'>
-        <p>Mixed</p>
-        <div style='display: flex; flex-direction:column; gap: 10px;'>
-          <PsCheckboxSimple v-bind="$props" label='Label 5' layout='mixed' checked />
-          <PsCheckboxSimple v-bind="$props" label='Label 6' layout='mixed' size='small' checked />
-        </div>
-      </div>
-      <div style='display:flex; flex-direction:column; gap:5px;'>
-        <p>Disabled</p>
-        <div style='display: flex; flex-direction:column; gap: 10px;'>
-          <PsCheckboxSimple v-bind="$props" label='Input via inputAttrs' :inputAttrs="{ id: 'my-input-id' }" disabled/>
-          <PsCheckboxSimple v-bind="$props" label='Input via component id' size='small' id="my-component-id" data-test="test" disabled/>
-          <PsCheckboxSimple v-bind="$props" label='Input fallback' size='small' disabled/>
-        </div>
-      </div>
-    </div>
-    `
-})
-
-export const Default = defaultTemplate.bind({}) 

package/src/stories/Chips.stories.ts

@@ -1,33 +0,0 @@
-import PsChips from '../components/chips/PsChips.vue'
-import type { Meta, StoryObj } from '@storybook/vue3'
-
-import * as HeaderStories from '../stories/Header.stories'
-
-const meta: Meta<typeof PsChips> = {
-  component: PsChips
-}
-
-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>
-              `,
-    args:{
-      label: 'Simple Chip',
-      icon:'',
-      ...HeaderStories.LoggedIn.args
-    }
-  })
-}

package/src/stories/ClimateZoneBadge.stories.ts

@@ -1,18 +0,0 @@
-import PsClimateZoneBadge from '../components/badges-and-tags/PsClimateZoneBadge.vue'
-
-export default {
-  title: 'Badges & Tags/Badges/ClimateZoneBadge',
-  component: PsClimateZoneBadge,
-}
-
-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/Colors.mdx

@@ -1,70 +0,0 @@
-import {Meta } from '@storybook/addon-docs';
-
-<Meta title="Colors" />
-
-<style>{`
-.mx-auto { margin: 0 auto; }
-`}</style>
-
-# Colors
-Out colors are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another. The support colors are used as a visual support to communicate and provide better and more meaningful feedback.
-
-## Blue
-<div class="psui-flex">
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue click-to-copy" data-to-copy="psui-bg-blue">Blue <div>#5094D3</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-80 click-to-copy" data-to-copy="psui-bg-blue-80">Blue 80 <div>#002A3A</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-70 click-to-copy" data-to-copy="psui-bg-blue-70">Blue 70 <div>#00465F</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-60 click-to-copy" data-to-copy="psui-bg-blue-60">Blue 60 <div>#318FAC</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-50 click-to-copy" data-to-copy="psui-bg-blue-50">Blue 50 <div>#64B5CE</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-20 click-to-copy" data-to-copy="psui-bg-blue-20">Blue 20 <div>#E0EFF6</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-10 click-to-copy" data-to-copy="psui-bg-blue-10">Blue 10 <div>#ECF7FB</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-white click-to-copy" data-to-copy="psui-bg-white">White <div>#FFFFFF</div></div>
-</div>
-
-## Gray
-<div class="psui-flex">
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-80 click-to-copy" data-to-copy="psui-bg-gray-80">Gray 80 <div>#28323B</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-70 click-to-copy" data-to-copy="psui-bg-gray-70">Gray 70 <div>#34404A</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-60 click-to-copy" data-to-copy="psui-bg-gray-60">Gray 60 <div>#515E6A</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-50 click-to-copy" data-to-copy="psui-bg-gray-50">Gray 50 <div>#798490</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-40 click-to-copy" data-to-copy="psui-bg-gray-40">Gray 40 <div>#A2ACB7</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-30 click-to-copy" data-to-copy="psui-bg-gray-30">Gray 30 <div>#D6DDE5</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-20 click-to-copy" data-to-copy="psui-bg-gray-20">Gray 20 <div>#E6ECF2</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-10 click-to-copy" data-to-copy="psui-bg-gray-10">Gray 10 <div>#F3F6F9</div></div>
-</div>
-
-## Yellow
-<div class="psui-flex">
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-80 click-to-copy" data-to-copy="psui-bg-yellow-80">Yellow 80 <div>#834C0D</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-70 click-to-copy" data-to-copy="psui-bg-yellow-70">Yellow 70 <div>#B87305</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-20 click-to-copy" data-to-copy="psui-bg-yellow-20">Yellow 20 <div>#EDAB3E</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-yellow-20 psui-bg-yellow-10 click-to-copy" data-to-copy="psui-bg-yellow-10">Yellow 10 <div>#FDF3E3</div></div>
-</div>
-
-## Green
-<div class="psui-flex">
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-80 click-to-copy" data-to-copy="psui-bg-green-80">Green 80 <div>#286943</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-70 click-to-copy" data-to-copy="psui-bg-green-70">Green 70 <div>#44A06A</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-20 click-to-copy" data-to-copy="psui-bg-green-20">Green 20 <div>#5DB883</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-green-20 psui-bg-green-10 click-to-copy" data-to-copy="psui-bg-green-10">Green 10 <div>#DEF8E8</div></div>
-</div>
-
-## Red
-<div class="psui-flex">
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-80 click-to-copy" data-to-copy="psui-bg-red-80">Red 80 <div>#832F2E</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-70 click-to-copy" data-to-copy="psui-bg-red-70">Red 70 <div>#AA3937</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-20 click-to-copy" data-to-copy="psui-bg-red-20">Red 20 <div>#D65C5A</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-15 click-to-copy" data-to-copy="psui-bg-red-15">Red 15 <div>#EAC5C5</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-10 click-to-copy" data-to-copy="psui-bg-red-10">Red 10 <div>#FCEBEB</div></div>
-</div>
-
-## Chart colors
-<div class="psui-flex">
-  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-sky click-to-copy" data-to-copy="psui-bg-sky">Sky <div>#518BE2</div></div>
-  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-teal click-to-copy" data-to-copy="psui-bg-teal">Teal <div>#57C0BA</div></div>
-  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-emerald click-to-copy" data-to-copy="psui-bg-emerald">Emerald <div>#8CCA82</div></div>
-  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-mustard click-to-copy" data-to-copy="psui-bg-mustard">Mustard <div>#E9CF74</div></div>
-  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-orange click-to-copy" data-to-copy="psui-bg-orange">Orange <div>#FF906D</div></div>
-  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-pink click-to-copy" data-to-copy="psui-bg-pink">Pink <div>#FF77B8</div></div>
-  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-purple click-to-copy" data-to-copy="psui-bg-purple">Purple <div>#9278C9</div></div>
-</div>

package/src/stories/CostEffectBar.stories.ts

@@ -1,24 +0,0 @@
-import PsCostEffectBar from '../components/badges-and-tags/PsCostEffectBar.vue'
-
-export default {
-  title: 'Badges & Tags/Badges/CostEffectBar',
-  component: PsCostEffectBar,
-  argTypes: {
-    value: {
-      control: { type: 'number', min: 0, max: 100 },
-    },
-    breakEven: {
-      control: { type: 'number', min: 0, max: 100 },
-    },
-  },
-}
-
-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.ts

@@ -1,53 +0,0 @@
-// @ts-ignore
-import PsDataTable, { alignment } from '../components/datatable/PsDataTable.vue'
-import PsDataTableItem from '../components/datatable/PsDataTableItem.vue'
-
-export default {
-    title: 'Data Tables/DataTable',
-    component: PsDataTable,
-    subcomponents: { PsDataTableItem },
-    argTypes: {
-        align: { control: { type: 'select', options: alignment } },
-    }
-}
-
-const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
-    props: Object.keys(argTypes),
-    components:  {PsDataTable},
-    template: `
-        <div style="width:400px;">
-            <PsDataTable v-bind="$props" />
-        </div>
-        `
-})
-
-const RichTemplate = (args:any, { argTypes }:{ argTypes:any } ) => ({
-    props: Object.keys(argTypes),
-    components: {PsDataTable, PsDataTableItem},
-    template: `
-            <div style="width:400px">    
-                <PsDataTable v-bind="$props">
-                    <PsDataTableItem v-bind="$props"/>
-               </PsDataTable>
-            </div>   
-    `
-})
-
-
-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' }],
-    footer: ['Footer 1', 'Footer 2', 'Footer 3'],
-    type: 'simple',
-}
-
-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} }],
-    footer: ['Footer 1', 'Footer 2', 'Footer 3'],
-    type: 'rich'
-}

package/src/stories/DateCardInfo.stories.ts

@@ -1,20 +0,0 @@
-import PsDateCardInfo from '../components/badges-and-tags/PsDateCardInfo.vue'
-
-export default {
-    title: 'Components/DateCardInfo',
-    component: PsDateCardInfo,
-  }
-
-  const Template = (args:any, {argTypes}:{argTypes:any}) => ({
-    props: Object.keys(argTypes),
-    components:{PsDateCardInfo},
-    template: `
-      <div style="width: 1000px; background:#DBE9F1; display:flex; gap: 7px; padding: 20px; height: 100%;">
-        <PsDateCardInfo v-bind="$props"/>
-        <PsDateCardInfo v-bind="$props"/>
-        <PsDateCardInfo v-bind="$props"/>
-      </div>
-    `
-}) 
-
-export const Default = Template.bind({})

package/src/stories/Dialog.stories.ts

@@ -1,131 +0,0 @@
-import PsDialog from '../components/notifications/PsDialog.vue'
-
-export default {
-  title: 'Notifications/Dialog',
-  component: PsDialog,
-}
-// @ts-ignore
-const TemplateExamples = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsDialog },
-  template: `
-          <div class="psui-grid psui-grid-cols-3 psui-gap-4">
-            
-            <div class="psui-col-span-3 psui-mt-8">
-              <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSDialog Horizontal</h1>
-            </div>
-
-            <div>
-              <h2>Informative</h2>
-              <PsDialog theme="informative" layout="horizontal" message="teste">                
-                <template v-slot:action>
-                  <p style='font-weight: 700;'>Action</p>
-                </template>
-              </PsDialog>
-            </div>
-            
-            <div>
-              <h2>Success</h2>
-              <PsDialog theme="success" layout="horizontal" :hasClose="false">
-                <template>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                </template>
-                <template v-slot:action>
-                  <p style='font-weight: 700;'>Action</p>
-                </template>
-              </PsDialog>
-            </div>
-            
-            <div>
-              <h2>Alert</h2>
-              <PsDialog theme="alert" layout="horizontal">
-                <template>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                </template>
-                <template v-slot:action>
-                  <p style='font-weight: 700;'>Action</p>
-                </template>
-              </PsDialog>
-            </div>
-
-            <div class="psui-col-span-3 psui-mt-8">
-              <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSDialog Vertical</h1>
-            </div>
-
-            <div>
-              <h2>Informative</h2>
-              <PsDialog theme="informative" layout="vertical">
-                <template>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                </template>
-                <template v-slot:action>
-                  <p style='font-weight: 700;'>Action</p>
-                </template>
-              </PsDialog>
-            </div>
-            
-            <div class="psui-text-red">
-              <h2>Success</h2>
-              <PsDialog theme="success" layout="vertical" :hasClose="false">
-                <template>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                </template>
-                <template v-slot:action>
-                  <p style='font-weight: 700;'>Action</p>
-                </template>
-              </PsDialog>
-            </div>
-            
-            <div>
-              <h2>Alert</h2>
-              <PsDialog theme="alert" layout="vertical">
-                <template>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                </template>
-                <template v-slot:action>
-                  <p style='font-weight: 700;'>Action</p>
-                </template>
-              </PsDialog>
-            </div>
-
-            
-            
-            <!-- PSDialog Vertical -->
-            <div class="psui-col-span-3 psui-mt-8">
-              <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSDialog Vertical Props Message</h1>
-            </div>
-
-            <div>
-              <h2>Informative</h2>
-              <PsDialog theme="informative" layout="vertical" message="This component uses only the props message!">
-                <template v-slot:action>
-                  <p style='font-weight: 700;'>Action</p>
-                </template>
-              </PsDialog>
-            </div>
-            
-            <div>
-              <h2>Success</h2>
-              <PsDialog theme="success" layout="vertical" message="This component uses only the props message!" :hasClose="false">
-                <template v-slot:action>
-                  <p style='font-weight: 700;'>Action</p>
-                </template>
-              </PsDialog>
-            </div>
-            
-            <div>
-              <h2>Alert</h2>
-              <PsDialog theme="alert" layout="vertical" message="This component uses only the props message!">
-                <template v-slot:action>
-                  <p style='font-weight: 700;'>Action</p>
-                </template>
-              </PsDialog>
-            </div>
-
-          </div>
-          `,
-})
-
-export const Examples = TemplateExamples.bind({})
-
-

package/src/stories/Draggable.stories.ts

@@ -1,23 +0,0 @@
-import PsDraggable from '../components/controls/PsDraggable.vue'
-
-export default {
-  title: 'Controls & Selectors/Draggable',
-  component: PsDraggable 
-}
-// @ts-ignore
-const Template = (args, {argTypes}) => ({
-  props: Object.keys(argTypes),
-  components: { PsDraggable },
-  template: `
-    <div style='width: 300px; font-family: "Lato", sans-serif; font-size: 12px;'>
-        <PsDraggable v-bind='$props'/>
-    </div>
-  `
-})
-
-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'
-}