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

package/src/stories/RadioButton.stories.js

@@ -1,21 +1,37 @@
-import PsRadioButton from '../components/controls/PsRadioButton.vue';
+import PsRadioButton from '../components/controls/PsRadioButton.vue'
 
 export default {
   title: 'Components/Radio Button',
   component: PsRadioButton,
   argTypes: {},
-};
+}
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsRadioButton },
+  data: () => {
+    return {
+      selectedValue: 2,
+    }
+  },
   template: `
-  <PsRadioButton v-bind="$props" />
+  <div>
+    <div>
+      <PsRadioButton v-bind="$props" name="options" label="Label 1" value="1" v-model="selectedValue" />
+      <PsRadioButton v-bind="$props" name="options" label="Label 2" value="2" v-model="selectedValue" />
+      <PsRadioButton v-bind="$props" name="options" label="Label 3" value="3" v-model="selectedValue" />
+      <div class="result">
+        Radio button selection: {{selectedValue}}
+      </div>
+    </div>
+  </div>
   `
-});
+})
 
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Label'
-};
+export const Default = Template.bind({})
+Default.args = {}
 
+export const Small = Template.bind({})
+Small.args = {
+  small: true
+}

package/src/stories/Slider.stories.js

@@ -1,10 +1,10 @@
-import PsSlider from '../components/controls/PsSlider.vue';
+import PsSlider from '../components/controls/PsSlider.vue'
 export default {
   title: 'Components/Slider',
   component: PsSlider,
   argTypes: {
   },
-};
+}
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -14,27 +14,27 @@ const Template = (args, { argTypes }) => ({
     <PsSlider v-bind="$props" :value.sync="value" />
   </div>
   `
-});
+})
 
-export const Label = Template.bind({});
+export const Label = Template.bind({})
 Label.args = {
   min: 1,
   max: 100,
   value: 30,
   label: 'Score Label'
-};
+}
 
-export const NoLabel = Template.bind({});
+export const NoLabel = Template.bind({})
 NoLabel.args = {
   min: 1,
   max: 100,
   value: 15
-};
+}
 
-export const Bubble = Template.bind({});
+export const Bubble = Template.bind({})
 Bubble.args = {
   min: 1,
   max: 100,
   value: 23,
   bubble: true
-};
+}

package/src/stories/Swith.stories.js

@@ -1,11 +1,11 @@
-import PsSwitch, { sizes } from '../components/controls/PsSwitch.vue';
+import PsSwitch, { sizes } from '../components/controls/PsSwitch.vue'
 export default {
   title: 'Components/Switch',
   component: PsSwitch,
   argTypes: {
     size: { control: { type: 'select', options: sizes } }
   },
-};
+}
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -17,22 +17,22 @@ const Template = (args, { argTypes }) => ({
   },
   template: `
   <div>
-    <PsSwitch v-bind="$props" :active.sync="model" />
+    <PsSwitch v-bind="$props" v-model="model" />
+    <p>{{ model }}</p>
   </div>
   `
-});
+})
 
-export const Big = Template.bind({});
+export const Big = Template.bind({})
 Big.args = {
   size: 'big',
-  active: false,
   label: 'Switch Big',
-};
+}
 
-export const Small = Template.bind({});
+export const Small = Template.bind({})
 Small.args = {
   size: 'small',
-  active: false,
   label: 'Switch Small',
-};
+  small: true
+}
 

package/src/stories/TabHeader.stories.js

@@ -1,4 +1,4 @@
-import PsTabHeader from '../components/tabs/PsTabHeader.vue';
+import PsTabHeader from '../components/tabs/PsTabHeader.vue'
 const items = ['Existing Buildings', 'New Constructions', 'Other tab']
 const item = items[0]
 
@@ -6,7 +6,7 @@ export default {
   title: 'Components/Tab Header',
   component: PsTabHeader,
   argTypes: {}
-};
+}
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsTabHeader },
@@ -28,25 +28,25 @@ const Template = (args, { argTypes }) => ({
     </div>
   </div>
   `
-});
+})
 
-export const Standard = Template.bind({});
+export const Standard = Template.bind({})
 Standard.args = {
   theme: 'standard',
   items: items,
   selected: item
-};
+}
 
-export const Underline = Template.bind({});
+export const Underline = Template.bind({})
 Underline.args = {
   theme: 'underline',
   items: items,
   selected: item
-};
+}
 
-export const Folder = Template.bind({});
+export const Folder = Template.bind({})
 Folder.args = {
   theme: 'folder',
   items: items,
   selected: item
-};
+}

package/src/stories/Toast.stories.js

@@ -1,4 +1,4 @@
-import PsToast, { typeOptions, fillOptions } from '../components/notifications/PsToast.vue';
+import PsToast, { typeOptions, fillOptions } from '../components/notifications/PsToast.vue'
 export default {
   title: 'Components/Toast',
   component: PsToast,
@@ -6,7 +6,7 @@ export default {
     type: { control: { type: 'select', options: typeOptions } },
     fill: { control: { type: 'select', options: fillOptions } }
   },
-};
+}
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -21,33 +21,33 @@ const Template = (args, { argTypes }) => ({
   <template v-if="${'default' in args}" v-slot>${args.default}</template>
   </PsToast>
   `
-});
+})
 
-export const Info = Template.bind({});
+export const Info = Template.bind({})
 Info.args = {
   type: 'info',
   message: 'This is an info alert',
-};
+}
 
-export const Success = Template.bind({});
+export const Success = Template.bind({})
 Success.args = {
   type: 'success',
   message: 'This is a success alert',
-};
+}
 
-export const Warning = Template.bind({});
+export const Warning = Template.bind({})
 Warning.args = {
   type: 'warning',
   message: 'This is a warning alert',
-};
+}
 
-export const Error = Template.bind({});
+export const Error = Template.bind({})
 Error.args = {
   type: 'error',
   message: 'This is an error alert',
-};
+}
 
-export const Actions = Template.bind({});
+export const Actions = Template.bind({})
 Actions.args = {
   type: 'info',
   message: 'This is an info alert with actions',
@@ -55,4 +55,4 @@ Actions.args = {
     <span class="psui-cursor-pointer" @click="teste('Callback Action 1')">ACTION1</span>
     <span class="psui-cursor-pointer" @click="teste('Callback Action 2')">ACTION2</span>
     `
-};
+}

package/src/stories/Toggle.stories.js

@@ -1,9 +1,9 @@
-import PsToggle from '../components/controls/PsToggle.vue';
+import PsToggle from '../components/controls/PsToggle.vue'
 export default {
   title: 'Components/Toggle',
   component: PsToggle,
   argTypes: {},
-};
+}
 const items = ['Option 1', 'Option 2', 'Option 3']
 const selected = 'Option 2'
 
@@ -13,10 +13,34 @@ const Template = (args, { argTypes }) => ({
   template: `
   <PsToggle v-bind="$props" :selected.sync="selected" />
   `
-});
+})
 
-export const Default = Template.bind({});
+export const Default = Template.bind({})
 Default.args = {
   items: items,
   selected: selected
-};
+}
+
+
+/**
+ * Hey Luciano!
+ * Adicionei este script aqui pois não entendi como criar uma story com script em MDX ou algo que rode geral, saca?
+ * Mas é uma função simples para copiar o HEX das cores...
+ * Se quiser dar uma melhorada nessa parte, fique a vontade meu chegado! TMJ
+ */
+window.addEventListener('click', (ev) => {
+  if(ev.target.classList.contains('click-to-copy')) {
+    copyText(ev.target.dataset.toCopy)
+  }
+})
+
+function copyText(textToCopy) {  
+  var myTemporaryInputElement = document.createElement("input")
+  myTemporaryInputElement.type = "text"
+  myTemporaryInputElement.value = textToCopy
+  document.body.appendChild(myTemporaryInputElement)
+  myTemporaryInputElement.select()
+  document.execCommand("Copy")
+  document.body.removeChild(myTemporaryInputElement)
+  alert('Item copied to clipboard!')
+}

package/src/stories/Tooltip.stories.js

@@ -0,0 +1,113 @@
+import PsTooltip from '../components/tooltip/PsTooltip.vue'
+import PsRichTooltip from '../components/tooltip/PsRichTooltip.vue'
+import PsDialogTooltip,{ CSSCOLORS} from '../components/tooltip/PsDialogTooltip.vue'
+
+export default {
+    title: 'Components/Tooltip',
+    component: PsTooltip,
+    subcomponents: {PsRichTooltip, PsDialogTooltip}
+}
+
+const TemplateDialog = (args, {argTypes}) => ({
+    props: Object.keys(argTypes),
+    components: {PsDialogTooltip},
+    template: `
+            <div style='display: flex; justify-content: flex-end;'>
+                <PsDialogTooltip v-bind='$props'>
+                    <p>Trigger</p>
+                </PsDialogTooltip>
+            <div>
+    `,
+    argTypes:{
+        type: { control : { type: 'select', options: CSSCOLORS}}
+    }
+})
+
+const TemplateRich = (args,{argTypes})=>({
+    props: Object.keys(argTypes),
+    components: {PsRichTooltip},
+    template: `
+            <div style='display: flex; justify-content: flex-end;'>
+                <PsRichTooltip v-bind='$props'>
+                    <p>Trigger</p>
+                </PsRichTooltip>
+            </div>
+            `
+})
+
+
+const TemplateRight = (args,{argTypes})=>({
+    props: Object.keys(argTypes),
+    components: {PsTooltip},
+    template: `
+            <div style='display: flex; justify-content: flex-end;'>
+                <PsTooltip v-bind='$props'>
+                    <template v-slot:trigger>
+                        Trigger
+                    </template>
+                </PsTooltip>
+            </div>
+            `
+})
+
+const TemplateMiddle = (args, {argTypes})=> ({
+    props: Object.keys(argTypes),
+    components: {PsTooltip},
+    template: `
+            <div style='display: flex; justify-content: center;'>
+            <PsTooltip v-bind='$props'>
+                <template v-slot:trigger>
+                    Trigger
+                </template>
+            </PsTooltip>
+            </div>
+    `
+})
+
+const TemplateLeft = (args, {argTypes}) => ({
+    props: Object.keys(argTypes),
+    components: {PsTooltip},
+    template: `
+            <div style='display: flex; justify-content: flex-start;'>
+            <PsTooltip v-bind='$props'>
+                <template v-slot:trigger>
+                    Trigger
+                </template>
+            </PsTooltip>
+            </div>    
+    `
+})
+
+export const Dialog = TemplateDialog.bind({})
+Dialog.args = {
+    text: 'Air seal all ductwork to a final duct leakage value of 10% of nominal airflow.',
+    title: 'Duct Sealing',
+    buttonText: 'More info',
+    cssClass: 'psui-w-32',
+    type: 'color'
+}
+
+export const Rich = TemplateRich.bind({})
+Rich.args = {
+    type: 'red',
+    title: 'This is a test!!',
+    cssClass: 'psui-w-32'
+}
+
+export const RightSide = TemplateRight.bind({})
+RightSide.args = {
+    title: 'This is a test!!!',
+    type: 'red',
+}
+
+export const Middle = TemplateMiddle.bind({})
+Middle.args = {
+    title: 'This is a test!!!',
+    type: 'blue',
+}
+
+export const Left = TemplateLeft.bind({})
+Left.args = {
+    title: 'This is a test!!!',
+    type: 'gray',
+}

package/src/util/GeneralFunctions.js

@@ -0,0 +1,23 @@
+export const randomString = (length) => {
+  var result           = ''
+  var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  var charactersLength = characters.length
+  for ( var i = 0; i < length; i++ ) {
+     result += characters.charAt(Math.floor(Math.random() * charactersLength))
+  }
+  return result
+}
+
+export const getParentScrollableEl = (node) => {
+  
+  if (node == null) {
+    return null
+  }
+
+  if (node.scrollHeight > node.clientHeight) {
+    return node
+  } else {
+    return getParentScrollableEl(node.parentNode)
+  }
+
+}

package/src/util/imageLoader.js

@@ -0,0 +1,50 @@
+export default ({ imageUrl, onProgress = null, returnsBase64 = true }) => {
+  return new Promise((resolve, reject) => {
+    var xhr = new XMLHttpRequest()
+    var notifiedNotComputable = false
+
+    xhr.open('GET', imageUrl, true)
+    xhr.responseType = 'arraybuffer'
+
+    xhr.onprogress = (ev) => {
+      if (ev.lengthComputable) {
+        let progress = parseInt((ev.loaded / ev.total) * 100)
+        if(onProgress) onProgress(progress)
+      } else {
+        if (!notifiedNotComputable) {
+          notifiedNotComputable = true
+          if(onProgress) onProgress(-1)
+        }
+      }
+    }
+
+    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)
+          if (mime && mime[1]) options.type = mime[1]
+          var blob = new Blob([this.response], options)
+          resolve(window.URL.createObjectURL(blob))
+        }
+      }
+    }
+
+    xhr.onerror = () => {
+      console.log('asd')
+      reject()
+    }
+
+    xhr.send()
+  })
+}

package/tailwind.config.js

@@ -49,6 +49,7 @@ module.exports = {
       'sans': ['Lato'],
     },
     fontSize: {
+      big:['16px','130%'],
       small: ['14px', '130%'],
       xsmall: ['12px', '130%'],
       accent: ['14px', '130%', { letterSpacing: '0.6px' }],
@@ -75,14 +76,28 @@ module.exports = {
       xl: '0px 0px 20px rgba(0, 0, 0, 0.05), 0px 30px 60px rgba(0, 0, 0, 0.2)',
       inner: '0px 1px 0px #FFFFFF, inset 0px 1px 2px rgba(0, 0, 0, 0.1)',
       none: 'none',
-    },    
-    extend: {},
+    },
+    borderColor: theme => ({
+      ...theme('colors'),
+      DEFAULT: theme('colors.blue-70', 'currentColor'),
+    }),
+    divideColor: theme => ({
+      ...theme('colors'),
+    }),
+    extend: {
+      divideOpacity: {
+        '10': '0.1',
+        '20': '0.2',
+        '95': '0.95',
+      }
+    },
   },
   variants: {
     boxShadow: ['active'],
     borderRadius: ['last', 'first'],
-    backgroundColor: ['responsive', 'hover', 'active', 'focus', 'group-hover', 'even', 'first'],
-    textColor: ['responsive', 'hover', 'active', 'focus', 'group-hover', 'first'],
+    backgroundColor: ['responsive', 'hover', 'active', 'focus', 'group-hover', 'even', 'first', 'disabled'],
+    textColor: ['responsive', 'hover', 'active', 'focus', 'group-hover', 'first', 'disabled'],
+    borderColor: ['disabled'],
     extend: {
     },
   },