@policystudio/policy-studio-ui-vue 1.0.0 → 1.0.4

package/src/stories/Toast.stories.js

@@ -1,7 +1,7 @@
-import Toast, { typeOptions, fillOptions } from '../components/notifications/Toast.vue';
+import PsToast, { typeOptions, fillOptions } from '../components/notifications/PsToast.vue';
 export default {
   title: 'Components/Toast',
-  component: Toast,
+  component: PsToast,
   argTypes: {
     type: { control: { type: 'select', options: typeOptions } },
     fill: { control: { type: 'select', options: fillOptions } }
@@ -10,16 +10,16 @@ export default {
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { Toast },
+  components: { PsToast },
   methods: {
     teste(message) {
       alert(message)
     }
   },
   template: `
-  <Toast v-bind="$props">
+  <PsToast v-bind="$props">
   <template v-if="${'default' in args}" v-slot>${args.default}</template>
-  </Toast>
+  </PsToast>
   `
 });
 
@@ -52,7 +52,7 @@ Actions.args = {
   type: 'info',
   message: 'This is an info alert with actions',
   default: `
-    <span class="cursor-pointer" @click="teste('Callback Action 1')">ACTION1</span>
-    <span class="cursor-pointer" @click="teste('Callback Action 2')">ACTION2</span>
+    <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/tailwind.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  prefix: 'psui-',
   purge: ['./index.html', './src/**/*.vue,js,ts,jsx,tsx}'],
   darkMode: false, // or 'media' or 'class'
   theme: {
@@ -56,5 +57,6 @@ module.exports = {
     extend: {
     },
   },
-  plugins: [],
+  plugins: [
+  ],
 }

package/src/components/buttons/Button.vue

@@ -1,82 +0,0 @@
-<template>
-  <button
-    class="font-bold align-middle flex rounded-md"
-    :class="classes" 
-    @click="onClick()"
-  >
-    <i
-      v-if="icon"
-      class="my-auto material-icons mr-2"
-      :class="{ 'text-sm': size === 'small' }"
-    >
-    {{ icon }}
-    </i>
-    <div class="flex-grow text-left">{{ label }}</div>
-    <i
-      v-if="iconRight" class="my-auto material-icons ml-2" 
-      :class="{ 'text-sm': size === 'small' }"
-    >
-    {{ iconRight }}
-    </i>
-  </button>
-</template>
-
-<script>
-export const sizes = ['big', 'medium', 'small']
-export default {  
-  props: {
-    label: {
-      type: String,
-      required: true
-    },
-    outline: {
-      type: Boolean,
-      default: false
-    },
-    ghost: {
-      type: Boolean,
-      default: false
-    },
-    textOnly: {
-      type: Boolean,
-      default: false
-    },
-    icon: {
-      type: String,
-    },
-    iconRight: {
-      type: String,
-    },
-    size: {
-      type: String,
-      default: 'big',
-      validator: (value) => sizes.indexOf(value) !== -1
-    },
-    disabled: {
-      type: [Boolean, String]
-    }
-  },
-  data () {
-    return {
-    }
-  },
-  computed: {
-    classes() {
-      let sizeCss = 'px-4 py-2'
-      if (this.size === 'medium') sizeCss = 'px-4 py-1'
-      if (this.size === 'small') sizeCss = 'px-2 py-px text-sm'
-      if (this.outline) return `${sizeCss} bg-white border ${this.disabled ? 'border-gray-40 text-gray-40' : 'border-blue-60 text-blue-60'}`
-      if (this.ghost) return `${sizeCss} ${this.disabled ? 'bg-gray-20 text-gray-40' : 'bg-blue-20 text-blue-60 active:shadow-inner'}`
-      if (this.textOnly) return `${sizeCss} ${this.disabled ? 'text-gray-40' : 'text-blue-60'}`
-      if (this.disabled) return `${sizeCss} bg-gray-20 text-gray-40`
-      return `${sizeCss} bg-blue-60 hover:bg-blue-50 text-white active:shadow-inner`
-    }  
-  },
-  methods: {
-    onClick() {
-      if (this.disabled) return false
-      this.$emit('click');
-    }
-  }
-}
-</script>