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

package/src/stories/Datatable.stories.js

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

package/src/stories/Dropdown.stories.js

@@ -0,0 +1,34 @@
+import PsDropdown from '../components/forms/PsDropdown.vue';
+export default {
+  title: 'Components/Dropdown',
+  component: PsDropdown,
+  argTypes: {
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsDropdown },
+  template: `
+  <div>
+    <PsDropdown
+      buttonClasses="psui-p-3 "
+    >
+      <template v-slot:dropdownTrigger>
+        <div>Custom Trigger</div>
+      </template>
+      <template v-slot:items>
+        <ul>
+          <li>Small list of the drop down</li>
+        </ul>
+      </template>
+    </PsDropdown>
+  </div>
+  `
+});
+
+export const CustomTrigger = Template.bind({});
+CustomTrigger.args = {
+  title: 'Custom trigger'
+};
+ 

package/src/stories/Input.stories.js

@@ -62,6 +62,7 @@ InputText.args = {
   disabled: false,
   required: false,
   mini: false,
+  value: 10,
 };
 
 export const InputPassword = TemplateDefault.bind({});

package/src/stories/RadioButton.stories.js

@@ -9,13 +9,29 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsRadioButton },
+  data: () => {
+    return {
+      selectedValue: '',
+    }
+  },
+  methods: {
+    changeValue(newValue) {
+      this.selectedValue = newValue
+    }
+  },
   template: `
-  <PsRadioButton v-bind="$props" />
+  <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" />
+      <div class="result">
+        Radio button selection: {{selectedValue}}
+      </div>
+    </div>
+  </div>
   `
 });
 
 export const Default = Template.bind({});
-Default.args = {
-  label: 'Label'
-};
-
+Default.args = {};

package/src/stories/Swith.stories.js

@@ -25,14 +25,14 @@ const Template = (args, { argTypes }) => ({
 export const Big = Template.bind({});
 Big.args = {
   size: 'big',
-  active: false,
+  active: true,
   label: 'Switch Big',
 };
 
 export const Small = Template.bind({});
 Small.args = {
   size: 'small',
-  active: false,
+  active: true,
   label: 'Switch Small',
 };
 

package/src/stories/Toggle.stories.js

@@ -20,3 +20,27 @@ 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/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/tailwind.config.js

@@ -75,14 +75,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: {
     },
   },