@policystudio/policy-studio-ui-vue 1.0.19 → 1.0.20

package/src/components/ui/PsIcon.vue

@@ -1,25 +1,29 @@
 <template>
   <div style="display: contents">
-    <i
-      v-if="type === 'material-icons'"
+    <span
+      v-if="getIconType === 'material-icons'"
+      class="material-icons-round"
       :class="[getIconClasses]"
     >
-    {{ icon }}
-    </i>
-    <img v-else-if="type == 'url'" src="" :class="[getIconClasses]" />
+      {{ getIcon }}
+    </span>
+    <img v-else-if="getIconType === 'url'" :src="icon" :class="[iconClasses]" />
     <inline-svg
       v-else
-      :src="`/icons/type-prototypes-slug/${type_prototype.slug}.svg`"
-      width="32"
-      height="32"
-      stroke="#A9AEB0"
+      :src="icon"
+      :width="getWidth"
+      :height="getHeight"
+      :stroke="getColor"
+      :fill="getColor"
     ></inline-svg>
   </div>
 </template>
 
 <script>
+import tailwindConfig from '../../../tailwind.config'
+import imageLoader from '../../util/imageLoader'
 export default {
-  name: 'PSIcon',
+  name: 'AppIcon',
   props: {
     icon: {
       type: String,
@@ -27,39 +31,98 @@ export default {
     },
     type: {
       type: String,
-      default: 'material-icons'
     },
     iconClasses: {
       type: String
     },
     size: {
-      type: [Number, String]
+      type: [Number, String],
     },
     width: {
-      type: Number
+      type: Number,
+      default: 24
     },
     height: {
-      type: Number
+      type: Number,
+      default: 24
     },
     stroke: {
       type: String,
+      default: null
     },
     color: {
-      type: String
+      type: String,
+      default: null,
+      validator: value => {
+        return value.includes('psui-text-') && 
+          typeof(tailwindConfig.theme.colors[value.replace('psui-text-', '')]) != 'undefined' ||
+          typeof(tailwindConfig.theme.colors[value]) != 'undefined'
+      }
+    },
+    loaderIcon: {
+      type: String,
+      default: 'hourglass_top'
+    },
+    loaderErrorIcon: {
+      type: String,
+      default: 'more_horiz'
+    }
+  },
+  data() {
+    return {
+      finishedImageLoad: false,
+      imageLoadError: false
     }
-
   },
   computed: {
+    getIconType() {
+      if(this.imageLoadError || !this.finishedImageLoad) return 'material-icons'
+      if(this.type) return this.type
+      if(!this.icon.includes('/')) return 'material-icons'
+      if(!this.icon.includes('.svg')) return 'url'
+      return 'svg'
+    },
+    getIcon() {
+      if(!this.icon.includes('/')) return this.icon
+      if(!this.finishedImageLoad && !this.imageLoadError && this.loaderIcon) return this.loaderIcon
+      if(this.imageLoadError) return this.loaderErrorIcon
+      return this.icon ? this.icon : ''
+    },
     getIconClasses() {
       if(this.iconClasses) return this.iconClasses
-      const size = this.sizes === 'small' ? 'psui-text-sm' : ''
-      const color = this.iconColor.length > 0 ? `psui-text-${this.iconColor}` : ''
-      return `psui-mr-2 psui-my-auto material-icons ${size} ${color}`
+      return `${this.size} ${this.color}`
     },
+    getWidth() {
+      if(this.size) return this.size
+      return this.width
+    },
+    getHeight() {
+      if(this.size) return this.size
+      return this.height
+    },
+    getColor() {
+      if(this.getIconType === 'material-icons') return this.color
+      return tailwindConfig.theme.colors[this.color.replace('psui-text-', '')] || tailwindConfig.theme.colors[this.color]
+    }
+  },
+  watch: {
+    'icon': function() {
+      this.loadImage()
+    }
+  },
+  mounted() {
+    if(this.icon.includes('/')) this.loadImage()
+  },
+  methods: {
+    loadImage() {
+      imageLoader({ imageUrl: this.icon, returnsBase64: false })
+        .then(() => {
+          this.finishedImageLoad = true
+        })
+        .catch(() => {
+          this.imageLoadError = true
+        })
+    }
   }
 }
-</script>
-
-<style>
-
-</style>
+</script>

package/src/index.js

@@ -13,6 +13,11 @@ 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 PsIcon from './components/ui/PsIcon.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'
 
 export default {
   install(Vue) {
@@ -31,6 +36,11 @@ export default {
     Vue.component('PsChips', PsChips)
     Vue.component('PsDataTable', PsDataTable)
     Vue.component('PsDataTableItem', PsDataTableItem)
+    Vue.component('PsIcon', PsIcon)
+    Vue.component('PsTooltip', PsTooltip)
+    Vue.component('PsRichTooltip', PsRichTooltip)
+    Vue.component('PsDialogTooltip', PsDialogTooltip)
+    Vue.component('PsDraggable', PsDraggable)
   }
 }
 
@@ -49,5 +59,9 @@ export {
   PsAccordionItem,
   PsChips,
   PsDataTable,
-  PsDataTableItem
+  PsDataTableItem,
+  PsTooltip,
+  PsRichTooltip,
+  PsDialogTooltip,
+  PsDraggable
 }

package/src/stories/Accordion.stories.js

@@ -1,5 +1,5 @@
-import PsAccordionItem, {iconTypes, fontCss} from "../components/accordion/PsAccordionItem.vue";
-import PsAccordion, {sizes} from "../components/accordion/PsAccordion.vue";
+import PsAccordionItem, {iconTypes, fontCss} from "../components/accordion/PsAccordionItem.vue"
+import PsAccordion, {sizes} from "../components/accordion/PsAccordion.vue"
 
 export default {
     title: 'Components/Accordion',

package/src/stories/Button.stories.js

@@ -1,4 +1,4 @@
-import PsButton, { sizes } from '../components/buttons/PsButton.vue';
+import PsButton, { sizes } from '../components/buttons/PsButton.vue'
 const icons = ['add_circle', 'delete', 'done', 'info', 'send']
 export default {
   title: 'Components/Button',
@@ -9,7 +9,7 @@ export default {
     icon: { control: { type: 'select',  options: icons} },
     iconRight: { control: { type: 'select',  options: icons} }
   },
-};
+}
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -17,38 +17,38 @@ const Template = (args, { argTypes }) => ({
   template: `
   <PsButton v-bind="$props" />
   `
-});
+})
 
-export const Solid = Template.bind({});
+export const Solid = Template.bind({})
 Solid.args = {
   label: 'Solid button',
   size: 'big',
   disabled: false,
   iconRight: 'add_circle'
-};
+}
 
-export const Outline = Template.bind({});
+export const Outline = Template.bind({})
 Outline.args = {
   label: 'Outline button',
   size: 'big',
   disabled: false,
   icon: 'add_circle',
   outline: true
-};
+}
 
-export const Ghost = Template.bind({});
+export const Ghost = Template.bind({})
 Ghost.args = {
   label: 'Ghost button',
   size: 'big',
   disabled: false,
   ghost: true
-};
+}
 
-export const TextOnly = Template.bind({});
+export const TextOnly = Template.bind({})
 TextOnly.args = {
   label: 'TextOnly button',
   disabled: false,
   icon: 'add_circle',
   size: 'big',
   textOnly: true,
-};
+}

package/src/stories/Checkbox.stories.js

@@ -1,12 +1,12 @@
-import PsCheckbox, { sizes } from '../components/controls/PsCheckbox.vue';
-const icons = ['add_circle', 'delete', 'done', 'info', 'send']
+import PsCheckbox from '../components/controls/PsCheckbox.vue'
+// const icons = ['add_circle', 'delete', 'done', 'info', 'send']
 export default {
   title: 'Components/Checkbox',
   component: PsCheckbox,
   argTypes: {
     disabled: { control: 'boolean' },
   },
-};
+}
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -36,13 +36,13 @@ const Template = (args, { argTypes }) => ({
     <p>Checked: {{ selected }}</p>
   </div>
   `
-});
+})
 
-export const Default = Template.bind({});
+export const Default = Template.bind({})
 Default.args = {
   size: 18,
   disabled: false,
   label: 'Label',
   labelClasses: '',
-};
+}
  

package/src/stories/Chips.stories.js

@@ -1,4 +1,4 @@
-import PsChips, { type } from "../components/chips/PsChips.vue";
+import PsChips from "../components/chips/PsChips.vue"
 
 export default {
     title: 'Components/Chips',
@@ -14,36 +14,36 @@ const Template = (args, { argTypes }) => ({
                `
 })
 
-export const Simple = Template.bind({});
+export const Simple = Template.bind({})
 Simple.args = {
     title: 'Simple Chip',
     icon:"",
     type: 'text'
 }
 
-export const SimpleWithIcon = Template.bind({});
+export const SimpleWithIcon = Template.bind({})
 SimpleWithIcon.args = {
     title: 'Simple With Icon',
     icon: 'home',
     type: 'text'
 }
 
-export const Radio = Template.bind({});
+export const Radio = Template.bind({})
 Radio.args = {
     title: 'Radio Chip',
     type:'radio'
 }
 
-export const Checkbox = Template.bind({});
+export const Checkbox = Template.bind({})
 Checkbox.args = {
     title: 'Checkbox Chip',
     type: 'checkbox'
 }
 
-export const Rich = Template.bind({});
+export const Rich = Template.bind({})
 Rich.args = {
     title: 'Rich chips',
     type: 'text',
     icon: 'description',
-    rich: 'true'
+    rich: true
 }

package/src/stories/Colors.stories.mdx

@@ -11,59 +11,59 @@ Out colors are designed to be harmonious, ensure accessible text, and distinguis
 
 ## Blue
 <div class="psui-flex">
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue click-to-copy" data-to-copy="#5094D3">Blue #5094D3</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-80 click-to-copy" data-to-copy="#002A3A">Blue 80 #002A3A</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-70 click-to-copy" data-to-copy="#00465F">Blue 70 #00465F</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-60 click-to-copy" data-to-copy="#318FAC">Blue 60 #318FAC</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-50 click-to-copy" data-to-copy="#64B5CE">Blue 50 #64B5CE</div>
-  <div class="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="#E0EFF6">Blue 20 #E0EFF6</div>
-  <div class="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="#ECF7FB">Blue 10 #ECF7FB</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-white click-to-copy" data-to-copy="#ffffff">White #ffffff</div>
+  <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 #5094D3</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="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-80 click-to-copy" data-to-copy="#28323B">Gray 80 #28323B</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-70 click-to-copy" data-to-copy="#34404A">Gray 70 #34404A</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-60 click-to-copy" data-to-copy="#515E6A">Gray 60 #515E6A</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-50 click-to-copy" data-to-copy="#798490">Gray 50 #798490</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-40 click-to-copy" data-to-copy="#A2ACB7">Gray 40 #A2ACB7</div>
-  <div class="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="#D6DDE5">Gray 30 #D6DDE5</div>
-  <div class="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="#E6ECF2">Gray 20 #E6ECF2</div>
-  <div class="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="#F3F6F9">Gray 10 #F3F6F9</div>
+  <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="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-80 click-to-copy" data-to-copy="#834C0D">Yellow 80 #834C0D</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-70 click-to-copy" data-to-copy="#B87305">Yellow 70 #B87305</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-20 click-to-copy" data-to-copy="#EDAB3E">Yellow 20 #EDAB3E</div>
-  <div class="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="#FDF3E3">Yellow 10 #FDF3E3</div>
+  <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="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-80 click-to-copy" data-to-copy="#286943">Green 80 #286943</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-70 click-to-copy" data-to-copy="#44A06A">Green 70 #44A06A</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-20 click-to-copy" data-to-copy="#5DB883">Green 20 #5DB883</div>
-  <div class="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="#DEF8E8">Green 10 #DEF8E8</div>
+  <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="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-80 click-to-copy" data-to-copy="#832F2E">Red 80 #832F2E</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-70 click-to-copy" data-to-copy="#AA3937">Red 70 #AA3937</div>
-  <div class="cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-20 click-to-copy" data-to-copy="#D65C5A">Red 20 #D65C5A</div>
-  <div class="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="#FCEBEB">Red 10 #FCEBEB</div>
+  <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-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 cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-sky click-to-copy" data-to-copy="#518BE2">Sky #518BE2</div>
-  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-teal click-to-copy" data-to-copy="#57C0BA">Teal #57C0BA</div>
-  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-emerald click-to-copy" data-to-copy="#8CCA82">Emerald #8CCA82</div>
-  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-mustard click-to-copy" data-to-copy="#E9CF74">Mustard #E9CF74</div>
-  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-orange click-to-copy" data-to-copy="#FF906D">Orange #FF906D</div>
-  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-pink click-to-copy" data-to-copy="#FF77B8">Pink #FF77B8</div>
-  <div class="psui-float-left cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-purple click-to-copy" data-to-copy="#9278C9">Purple #9278C9</div>
+  <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/Datatable.stories.js

@@ -1,5 +1,5 @@
-import PsDataTable, { alignment } from '../components/datatable/PsDataTable.vue';
-import PsDataTableItem from '../components/datatable/PsDataTableItem.vue';
+import PsDataTable, { alignment } from '../components/datatable/PsDataTable.vue'
+import PsDataTableItem from '../components/datatable/PsDataTableItem.vue'
 
 export default {
     title: 'Components/DataTable',
@@ -12,29 +12,36 @@ export default {
 
 const Template = (args, { argTypes }) => ({
     props: Object.keys(argTypes),
-    components:  {PsDataTable}  ,
-    template: `<PsDataTable v-bind="$props" />`
+    components:  {PsDataTable},
+    template: `
+        <div style="width:400px;">
+            <PsDataTable v-bind="$props" />
+        </div>
+        `
 })
 
 const RichTemplate = (args, { argTypes } ) => ({
     props: Object.keys(argTypes),
     components: {PsDataTable, PsDataTableItem},
-    template: `<PsDataTable v-bind="$props">
+    template: `
+            <div style="width:400px">    
+                <PsDataTable v-bind="$props">
                     <PsDataTableItem v-bind="$props"/>
                </PsDataTable>
+            </div>   
     `
 })
 
 
-export const Simple = Template.bind({});
+export const Simple = Template.bind({})
 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'
+    type: 'simple',
 }
 
-export const Rich = RichTemplate.bind({});
+export const Rich = RichTemplate.bind({})
 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/Dialog.stories.js

@@ -1,4 +1,4 @@
-import PsDialog from '../components/notifications/PsDialog.vue';
+import PsDialog from '../components/notifications/PsDialog.vue'
 
 export default {
   title: 'Components/Dialog',
@@ -6,29 +6,29 @@ export default {
   argTypes: {
     type: { control: { type: 'select', options: ['informative', 'success', 'alert'] } },
   },
-};
+}
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsDialog },
   template: '<PsDialog v-bind="$props" />',
-});
+})
 
-export const Informative = Template.bind({});
+export const Informative = Template.bind({})
 Informative.args = {
   type: 'informative',
   message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-};
+}
 
-export const Success = Template.bind({});
+export const Success = Template.bind({})
 Success.args = {
   type: 'success',
   message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-};
+}
 
-export const Warning = Template.bind({});
+export const Warning = Template.bind({})
 Warning.args = {
   type: 'alert',
   message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-};
+}
 

package/src/stories/Draggable.stories.js

@@ -0,0 +1,24 @@
+import PsDraggable from '../components/controls/PsDraggable.vue'
+
+export default {
+    title: 'Components/Draggable',
+    component: PsDraggable 
+}
+
+const Template = (args, {argTypes}) => ({
+    props: Object.keys(argTypes),
+    components: { PsDraggable },
+    template: `
+        <div style='width: 200px'>
+            <PsDraggable v-bind='$props'>
+                <button>Teste 1</button>
+                <button>Teste 2</button>
+            </PSDraggable> 
+        </div>
+            `
+})
+
+export const Component = Template.bind({})
+Component.args = {
+    data: [{title: 'Teste 1', columns: [ 1 , 2 , 3, 4]}]
+}

package/src/stories/Dropdown.stories.js

@@ -1,10 +1,10 @@
-import PsDropdown from '../components/forms/PsDropdown.vue';
+import PsDropdown from '../components/forms/PsDropdown.vue'
 export default {
   title: 'Components/Dropdown',
   component: PsDropdown,
   argTypes: {
   },
-};
+}
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -25,10 +25,10 @@ const Template = (args, { argTypes }) => ({
     </PsDropdown>
   </div>
   `
-});
+})
 
-export const CustomTrigger = Template.bind({});
+export const CustomTrigger = Template.bind({})
 CustomTrigger.args = {
   title: 'Custom trigger'
-};
+}
  

package/src/stories/Input.stories.js

@@ -1,4 +1,4 @@
-import PsInput from '../components/forms/PsInput.vue';
+import PsInput from '../components/forms/PsInput.vue'
 export default {
   title: 'Components/Input',
   component: PsInput,
@@ -6,7 +6,7 @@ export default {
     disabled: { control: 'boolean' },
     required: { control: 'boolean' },
   },
-};
+}
 
 const TemplateDefault = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -25,7 +25,7 @@ const TemplateDefault = (args, { argTypes }) => ({
       <PsInput v-bind="$props" class="psui-mt-8" :validator="validator"  />
     </div>
   `
-});
+})
 
 const TemplateSlots = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -52,9 +52,9 @@ const TemplateSlots = (args, { argTypes }) => ({
       </PsInput>
     </div>
   `
-});
+})
 
-export const InputText = TemplateDefault.bind({});
+export const InputText = TemplateDefault.bind({})
 InputText.args = {
   label: 'Label',
   placeholder: 'Placeholder',
@@ -63,9 +63,9 @@ InputText.args = {
   required: false,
   mini: false,
   value: 10,
-};
+}
 
-export const InputPassword = TemplateDefault.bind({});
+export const InputPassword = TemplateDefault.bind({})
 InputPassword.args = {
   type: 'password',
   label: 'Password',
@@ -73,9 +73,9 @@ InputPassword.args = {
   disabled: false,
   required: false,
   mini: false,
-};
+}
 
-export const InputSlots = TemplateSlots.bind({});
+export const InputSlots = TemplateSlots.bind({})
 InputSlots.args = {
   label: 'Label',
   placeholder: 'Placeholder',
@@ -83,4 +83,4 @@ InputSlots.args = {
   disabled: false,
   required: false,
   mini: false,
-};
+}