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

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),
@@ -19,13 +19,68 @@ const TemplateDefault = (args, { argTypes }) => ({
       }
     }
   },
-  template: `
-    <div class="psui-p-8 psui-bg-gray-10">
-      <PsInput v-bind="$props" />
-      <PsInput v-bind="$props" class="psui-mt-8" :validator="validator"  />
-    </div>
+  template: `    
+    <div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-3 psui-gap-6">          
+
+      <div class="psui-col-span-3 psui-mt-8">
+        <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSInput Layout Default</h1>
+      </div>
+      
+      <PsInput v-bind="{...$props, label: 'Resting with hint', placeholder: '', value: '' }" />      
+      <PsInput label="Resting without hint" />      
+      <PsInput label="Resting with Placeholder" placeholder="This is a placeholder" />      
+ 
+      <PsInput v-bind="{...$props, label: 'Focus'}" />
+      <PsInput label="Typing" placeholder="Type to see the effect..." />
+      <PsInput v-bind="{...$props, label: 'Active', active: true }" />
+      
+      <PsInput v-bind="{...$props, label: 'Error', hasError: true }" />
+      <PsInput v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />    
+      <PsInput v-bind="{...$props, label: 'Prepend / Append ' }" >
+        <template v-slot:append>
+          Append
+        </template>
+        <template v-slot:prepend>
+          Prepend
+        </template>
+      </PsInput>
+
+      <PsInput label="Disabled" :disabled="true" value="100,000" />      
+      <PsInput v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }" />
+      <PsInput v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" />      
+
+      
+
+      <div class="psui-col-span-3 psui-mt-8">
+        <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSInput Layout Mini</h1>
+      </div>
+
+      <PsInput layout="mini" label="Resting with hint" hint="This is a hint" value="1,653" />      
+      <PsInput layout="mini" label="Resting without hint" />      
+      <PsInput layout="mini" label="Resting with Placeholder" placeholder="This is a placeholder" />      
+ 
+      <PsInput layout="mini" v-bind="{...$props, label: 'Focus'}" />
+      <PsInput layout="mini" label="Typing" placeholder="Type to see the effect..." />
+      <PsInput layout="mini" v-bind="{...$props, label: 'Active', active: true }" />
+      
+      <PsInput layout="mini" v-bind="{...$props, label: 'Error', hasError: true }" />
+      <PsInput layout="mini" v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />
+      <PsInput layout="mini" v-bind="{...$props, label: 'Prepend / Append ' }" >
+        <template v-slot:append>
+          Append
+        </template>
+        <template v-slot:prepend>
+          Prepend
+        </template>
+      </PsInput>
+
+      <PsInput layout="mini" label="Disabled" :disabled="true" value="100,000" />      
+      <PsInput layout="mini" v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }" />
+      <PsInput layout="mini" v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" />      
+
+    </div> 
   `
-});
+})
 
 const TemplateSlots = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -52,35 +107,32 @@ const TemplateSlots = (args, { argTypes }) => ({
       </PsInput>
     </div>
   `
-});
+})
 
-export const InputText = TemplateDefault.bind({});
+export const InputText = TemplateDefault.bind({})
 InputText.args = {
-  label: 'Label',
+  label: 'Input Text',
   placeholder: 'Placeholder',
   hint: 'Optional Assistive text',
   disabled: false,
   required: false,
-  mini: false,
   value: 10,
-};
+}
 
-export const InputPassword = TemplateDefault.bind({});
+export const InputPassword = TemplateDefault.bind({})
 InputPassword.args = {
   type: 'password',
   label: 'Password',
   hint: 'Optional Assistive text',
   disabled: false,
   required: false,
-  mini: false,
-};
+}
 
-export const InputSlots = TemplateSlots.bind({});
+export const InputSlots = TemplateSlots.bind({})
 InputSlots.args = {
   label: 'Label',
   placeholder: 'Placeholder',
   hint: 'Optional Assistive text',
   disabled: false,
   required: false,
-  mini: false,
-};
+}

package/src/stories/MiniTag.stories.js

@@ -0,0 +1,46 @@
+import PsMiniTag, {
+  typeOptions,
+} from '../components/badges-and-tags/PsMiniTag.vue'
+
+export default {
+  title: 'Components/MiniTag',
+  component: PsMiniTag,
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        options: typeOptions,
+      },
+    },
+  },
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsMiniTag },
+  template: '<PsMiniTag v-bind="$props" />',
+})
+
+export const Informative = Template.bind({})
+Informative.args = {
+  type: 'informative',
+  message: 'This is an info alert',
+}
+
+export const Success = Template.bind({})
+Success.args = {
+  type: 'success',
+  message: 'This is a success alert',
+}
+
+export const Warning = Template.bind({})
+Warning.args = {
+  type: 'warning',
+  message: 'This is a warning alert',
+}
+
+export const Error = Template.bind({})
+Error.args = {
+  type: 'error',
+  message: 'This is an error alert',
+}

package/src/stories/ProgressBar.stories.js

@@ -0,0 +1,23 @@
+import PsProgressBar from '../components/badges-and-tags/PsProgressBar.vue'
+
+export default {
+  title: 'Components/ProgressBar',
+  component: PsProgressBar,
+  argTypes: {
+    value: {
+      control: { type: 'number', min: 0, max: 100 },
+    },
+    breakEven: {
+      control: { type: 'number', min: 0, max: 100 },
+    },
+  },
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsProgressBar },
+  template: '<PsProgressBar v-bind="$props" />',
+})
+
+export const ProgressBar = Template.bind({})
+ProgressBar.args = {}

package/src/stories/RadioButton.stories.js

@@ -1,37 +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: '',
-    }
-  },
-  methods: {
-    changeValue(newValue) {
-      this.selectedValue = newValue
+      selectedValue: 2,
     }
   },
   template: `
   <div>
     <div>
-      <PsRadioButton v-bind="$props" name="options" label="Label 1" value="1" @change="changeValue" />
-      <PsRadioButton v-bind="$props" name="options" label="Label 2" value="2" @change="changeValue" />
-      <PsRadioButton v-bind="$props" name="options" label="Label 3" value="3" @change="changeValue" />
+      <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 = {}
 
-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: true,
   label: 'Switch Big',
-};
+}
 
-export const Small = Template.bind({});
+export const Small = Template.bind({})
 Small.args = {
   size: 'small',
-  active: true,
   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'
 
@@ -12,15 +12,14 @@ const Template = (args, { argTypes }) => ({
   components: { PsToggle },
   template: `
   <PsToggle v-bind="$props" :selected.sync="selected" />
-  `
-});
+  `,
+})
 
-export const Default = Template.bind({});
+export const Default = Template.bind({})
 Default.args = {
   items: items,
-  selected: selected
-};
-
+  selected: selected,
+}
 
 /**
  * Hey Luciano!
@@ -29,18 +28,18 @@ Default.args = {
  * 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')) {
+  if (ev.target.classList.contains('click-to-copy')) {
     copyText(ev.target.dataset.toCopy)
   }
 })
 
-function copyText(textToCopy) {  
-  var myTemporaryInputElement = document.createElement("input")
-  myTemporaryInputElement.type = "text"
+function copyText(textToCopy) {
+  var myTemporaryInputElement = document.createElement('input')
+  myTemporaryInputElement.type = 'text'
   myTemporaryInputElement.value = textToCopy
   document.body.appendChild(myTemporaryInputElement)
   myTemporaryInputElement.select()
-  document.execCommand("Copy")
+  document.execCommand('Copy')
   document.body.removeChild(myTemporaryInputElement)
   alert('Item copied to clipboard!')
 }

package/src/stories/Tooltip.stories.js

@@ -0,0 +1,114 @@
+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: 'blue',
+    title: 'This is a test!!',
+    text: 'Here goes your text',
+    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

@@ -1,23 +1,22 @@
 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));
+  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;
+  return result
 }
 
 export const getParentScrollableEl = (node) => {
-  
   if (node == null) {
-    return null;
+    return null
   }
 
   if (node.scrollHeight > node.clientHeight) {
-    return node;
+    return node
   } else {
-    return getParentScrollableEl(node.parentNode);
+    return getParentScrollableEl(node.parentNode)
   }
-
-}
+}