@policystudio/policy-studio-ui-vue 1.0.1 → 1.0.5

package/src/components/buttons/PsButton.vue

@@ -0,0 +1,82 @@
+<template>
+  <button
+    class="psui-font-bold psui-align-middle psui-flex psui-rounded-md"
+    :class="classes" 
+    @click="onClick()"
+  >
+    <i
+      v-if="icon"
+      class="psui-my-auto material-icons psui-mr-2"
+      :class="{ 'psui-text-sm': size === 'small' }"
+    >
+    {{ icon }}
+    </i>
+    <div class="psui-flex-grow psui-text-left">{{ label }}</div>
+    <i
+      v-if="iconRight" class="psui-my-auto material-icons psui-ml-2" 
+      :class="{ 'psui-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 = 'psui-px-4 psui-py-2'
+      if (this.size === 'medium') sizeCss = 'psui-px-4 psui-py-1'
+      if (this.size === 'small') sizeCss = 'psui-px-2 psui-py-psui-px psui-text-sm'
+      if (this.outline) return `${sizeCss} psui-bg-white psui-border ${this.disabled ? 'psui-border-gray-40 psui-text-gray-40' : 'psui-border-blue-60 psui-text-blue-60'}`
+      if (this.ghost) return `${sizeCss} ${this.disabled ? 'psui-bg-gray-20 psui-text-gray-40' : 'psui-bg-blue-20 psui-text-blue-60 active:psui-shadow-inner'}`
+      if (this.textOnly) return `${sizeCss} ${this.disabled ? 'psui-text-gray-40' : 'psui-text-blue-60'}`
+      if (this.disabled) return `${sizeCss} psui-bg-gray-20 psui-text-gray-40`
+      return `${sizeCss} psui-bg-blue-60 hover:psui-bg-blue-50 psui-text-white active:psui-shadow-inner`
+    }  
+  },
+  methods: {
+    onClick() {
+      if (this.disabled) return false
+      this.$emit('click');
+    }
+  }
+}
+</script>

package/src/components/controls/{Checkbox.vue → PsCheckbox.vue}

@@ -8,7 +8,7 @@
 
 <script>
 export default {
-  name: 'Checkbox',
+  name: 'PsCheckbox',
   props: {
     value: {
       required: true

package/src/components/controls/{RadioButton.vue → PsRadioButton.vue}

@@ -16,7 +16,7 @@
 
 <script>
 export default {
-  name: 'RadioButton',
+  name: 'PsRadioButton',
   props: {
     label: {
       type: String,

package/src/components/notifications/{Dialog.vue → PsDialog.vue}

@@ -1,15 +1,15 @@
 <template>
   <div :class="cssClass">
-    <div class="material-icons ui-my-auto">info</div>
-    <div class="ui-w-full">{{ message }}</div>
-    <div class="ui-cursor-pointer ui-font-bold ui-my-auto ui-pr-4">OK</div>
+    <div class="material-icons psui-my-auto">info</div>
+    <div class="psui-w-full">{{ message }}</div>
+    <div class="psui-cursor-pointer psui-font-bold psui-my-auto psui-pr-4">OK</div>
   </div>
 </template>
 
 <script>
 export const typeOptions = ['informative', 'success', 'alert']
 export default {
-  name: 'Dialog',
+  name: 'PsDialog',
   props: {
     type: {
       type: String,
@@ -32,7 +32,7 @@ export default {
   },
   computed: {
     cssClass() {
-      return `ui-flex ui-space-x-4 ui-font-small ui-rounded-md ui-py-2 ui-px-4 ui-align-middle ui-flex ui-bg-${this.colors[this.type].background} ui-text-${this.colors[this.type].color}`
+      return `psui-flex psui-space-x-4 psui-font-small psui-rounded-md psui-py-2 psui-px-4 psui-align-middle psui-flex psui-bg-${this.colors[this.type].background} psui-text-${this.colors[this.type].color}`
     }
   }
 }

package/src/components/notifications/{Toast.vue → PsToast.vue}

@@ -1,8 +1,8 @@
 <template>
   <div :class="cssClass">
-    <span class="material-icons ui-mr-4">{{ icon }}</span>
-    <div class="ui-w-full">{{ message }}</div>
-    <div class="ui-flex ui-space-x-4">
+    <span class="material-icons psui-mr-4">{{ icon }}</span>
+    <div class="psui-w-full">{{ message }}</div>
+    <div class="psui-flex psui-space-x-4">
       <slot></slot>
     </div>
   </div>
@@ -12,7 +12,7 @@
 export const typeOptions = ['info', 'success', 'warning', 'error']
 export const fillOptions = ['soft', 'intense']
 export default {
-  name: 'Toast',
+  name: 'PsToast',
   props: {
     type: {
       type: String,
@@ -46,7 +46,7 @@ export default {
       const textColor = this.fill === 'intense' ? 'white': colors[this.type]
       const background = this.fill === 'soft'? `${colors[this.type].split('-', 1)}-10` : colors[this.type]
 
-      return `ui-font-bold ui-shadow-md ui-rounded-md ui-p-3 ui-h-12 ui-flex ui-bg-${background} ui-text-${textColor}`
+      return `psui-font-bold psui-shadow-md psui-rounded-md psui-p-3 psui-h-12 psui-flex psui-bg-${background} psui-text-${textColor}`
     }
   }
 }

package/src/components/tabs/{TabHeader.vue → PsTabHeader.vue}

@@ -7,9 +7,9 @@
       @click="selectTab(item)"
       :class="[
         classes, 
-        { 'ui-bg-blue-60 ui-text-white': getSelected === item[keyValue] && theme === 'standard' },
-        { 'ui-border-b-2 ui-border-blue-60 ui-text-blue-60 ui-font-bold': getSelected === item[keyValue] && theme === 'underline' },
-        { 'ui-text-blue-60 ui-font-bold ui-bg-white hover:ui-text-blue-60': getSelected === item[keyValue] && theme === 'folder' }
+        { 'psui-bg-blue-60 psui-text-white': getSelected === item[keyValue] && theme === 'standard' },
+        { 'psui-border-b-2 psui-border-blue-60 psui-text-blue-60 psui-font-bold': getSelected === item[keyValue] && theme === 'underline' },
+        { 'psui-text-blue-60 psui-font-bold psui-bg-white hover:psui-text-blue-60': getSelected === item[keyValue] && theme === 'folder' }
       ]"
     >
       {{ item[keyLabel] }}
@@ -20,25 +20,25 @@
 <script>
 export const themeOptions = ['standard', 'underline', 'folder']
 export default {
-  name: 'TabHeader',
+  name: 'PsTabHeader',
   computed: {
     wrapperClasses() {
       if (this.theme === 'underline') {
-        return 'ui-flex ui-space-x-4 ui-border-b ui-border-gray-20'
+        return 'psui-flex psui-space-x-4 psui-border-b psui-border-gray-20'
       }
       if (this.theme === 'folder') {
-        return 'ui-flex ui-space-x-1'
+        return 'psui-flex psui-space-x-1'
       }
-      return 'ui-inline-flex ui-rounded-md ui-flex ui-gap-x-px'
+      return 'psui-inline-flex psui-rounded-md psui-flex psui-gap-x-px'
     },
     classes() {
       if (this.theme === 'underline') {
-        return 'ui-text-gray-60 ui-pb-3 hover:ui-text-blue-60'
+        return 'psui-text-gray-60 psui-pb-3 hover:psui-text-blue-60'
       }
       if (this.theme === 'folder') {
-        return 'ui-bg-gray-10 ui-text-gray-50 ui-py-2 ui-px-4 ui-rounded-t-lg hover:ui-text-gray-60 active:ui-text-blue-60'
+        return 'psui-bg-gray-10 psui-text-gray-50 psui-py-2 psui-px-4 psui-rounded-t-lg hover:psui-text-gray-60 active:psui-text-blue-60'
       }
-      return 'ui-bg-gray-10 ui-px-4 ui-py-2 ui-text-gray-60 hover:ui-text-blue-60 last:ui-rounded-r-lg first:ui-rounded-l-lg active:ui-text-white active:ui-bg-blue-60'
+      return 'psui-bg-gray-10 psui-px-4 psui-py-2 psui-text-gray-60 hover:psui-text-blue-60 last:psui-rounded-r-lg first:psui-rounded-l-lg active:psui-text-white active:psui-bg-blue-60'
     },
     getIsObject() {
       return typeof this.selected === 'object'

package/src/index.js

@@ -1,14 +1,26 @@
-import Toast from './components/notifications/Toast.vue';
-import Dialog from './components/notifications/Dialog.vue';
+import PsButton from './components/buttons/PsButton.vue';
+import PsCheckbox from './components/controls/PsCheckbox.vue';
+import PsDialog from './components/notifications/PsDialog.vue';
+import PsToast from './components/notifications/PsToast.vue';
+import PsTabHeader from './components/tabs/PsTabHeader.vue';
+import PsRadioButton from './components/controls/PsRadioButton.vue';
 
 export default {
   install(Vue) {
-    Vue.component('Toast', Toast);
-    Vue.component('Dialog', Dialog);
-  },
+    Vue.component('PsButton',  PsButton);
+    Vue.component('PsCheckbox',  PsCheckbox);
+    Vue.component('PsDialog',  PsDialog);
+    Vue.component('PsToast',  PsToast);
+    Vue.component('PsTabHeader',  PsTabHeader);
+    Vue.component('PsRadioButton',  PsRadioButton);
+  }
 };
 
 export {
-	Toast,
-  Dialog
+  PsButton,
+  PsCheckbox,
+  PsDialog,
+  PsToast,
+  PsTabHeader,
+  PsRadioButton
 }

package/src/stories/Button.stories.js

@@ -1,8 +1,8 @@
-import Button, { sizes } from '../components/buttons/Button.vue';
+import PsButton, { sizes } from '../components/buttons/PsButton.vue';
 const icons = ['add_circle', 'delete', 'done', 'info', 'send']
 export default {
   title: 'Components/Button',
-  component: Button,
+  component: PsButton,
   argTypes: {
     size: { control: { type: 'select', options: sizes } },
     disabled: { control: 'boolean' },
@@ -13,9 +13,9 @@ export default {
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { Button },
+  components: { PsButton },
   template: `
-  <Button v-bind="$props" />
+  <PsButton v-bind="$props" />
   `
 });
 

package/src/stories/Checkbox.stories.js

@@ -1,8 +1,8 @@
-import Checkbox, { sizes } from '../components/controls/Checkbox.vue';
+import PsCheckbox, { sizes } from '../components/controls/PsCheckbox.vue';
 const icons = ['add_circle', 'delete', 'done', 'info', 'send']
 export default {
   title: 'Components/Checkbox',
-  component: Checkbox,
+  component: PsCheckbox,
   argTypes: {
     disabled: { control: 'boolean' },
   },
@@ -10,9 +10,9 @@ export default {
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { Checkbox },
+  components: { PsCheckbox },
   template: `
-  <Checkbox v-bind="$props" />
+  <PsCheckbox v-bind="$props" />
   `
 });
 

package/src/stories/Colors.stories.mdx

@@ -11,12 +11,12 @@ Out colors are designed to be harmonious, ensure accessible text, and distinguis
 
 ## Blue
 
-<div class="ui-grid ui-grid-flow-col">
-  <div class="ui-p-2 ui-h-20 ui-text-white ui-bg-blue-80">Blue 80</div>
-  <div class="ui-p-2 ui-h-20 ui-text-white ui-bg-blue-70">Blue 70</div>
-  <div class="ui-p-2 ui-h-20 ui-text-white ui-bg-blue-60">Blue 60</div>
-  <div class="ui-p-2 ui-h-20 ui-text-white ui-bg-blue-50">Blue 50</div>
-  <div class="ui-p-2 ui-h-20 ui-text-blue-70 ui-bg-blue-20">Blue 20</div>
-  <div class="ui-p-2 ui-h-20 ui-text-blue-70 ui-bg-blue-10">Blue 10</div>
-  <div class="ui-p-2 ui-h-20 ui-text-blue-70 ui-bg-white ">White</div>
+<div class="psui-grid psui-grid-flow-col">
+  <div class="psui-p-2 psui-h-20 psui-text-white psui-bg-blue-80">Blue 80</div>
+  <div class="psui-p-2 psui-h-20 psui-text-white psui-bg-blue-70">Blue 70</div>
+  <div class="psui-p-2 psui-h-20 psui-text-white psui-bg-blue-60">Blue 60</div>
+  <div class="psui-p-2 psui-h-20 psui-text-white psui-bg-blue-50">Blue 50</div>
+  <div class="psui-p-2 psui-h-20 psui-text-blue-70 psui-bg-blue-20">Blue 20</div>
+  <div class="psui-p-2 psui-h-20 psui-text-blue-70 psui-bg-blue-10">Blue 10</div>
+  <div class="psui-p-2 psui-h-20 psui-text-blue-70 psui-bg-white ">White</div>
 </div>

package/src/stories/Dialog.stories.js

@@ -1,8 +1,8 @@
-import Dialog from '../components/notifications/Dialog.vue';
+import PsDialog from '../components/notifications/PsDialog.vue';
 
 export default {
   title: 'Components/Dialog',
-  component: Dialog,
+  component: PsDialog,
   argTypes: {
     type: { control: { type: 'select', options: ['informative', 'success', 'alert'] } },
   },
@@ -10,8 +10,8 @@ export default {
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { Dialog },
-  template: '<Dialog v-bind="$props" />',
+  components: { PsDialog },
+  template: '<PsDialog v-bind="$props" />',
 });
 
 export const Informative = Template.bind({});

package/src/stories/ElevationSystem.stories.mdx

@@ -14,28 +14,28 @@ Elevation is evidenced by the use of shadows. It's another way to establish a vi
 
 ### 1.1. Shadow and light
 The shadows in our elements are projected by these two light sources: main light and ambient light.
-<div class="ui-grid ui-grid-cols-3 ui-gap-4">
-  <div class="ui-bg-gray-20 ui-pt-8">
-    <div class="ui-bg-white ui-w-48 ui-h-48 ui-rounded-md ui-shadow mx-auto"></div>
-    <p class="ui-text-center">Shadow cast by main light</p>
+<div class="psui-grid psui-grid-cols-3 psui-gap-4">
+  <div class="psui-bg-gray-20 psui-pt-8">
+    <div class="psui-bg-white psui-w-48 psui-h-48 psui-rounded-md psui-shadow mx-auto"></div>
+    <p class="psui-text-center">Shadow cast by main light</p>
   </div>
-  <div class="ui-bg-gray-20 ui-pt-8">
-    <div class="ui-bg-white ui-w-48 ui-h-48 ui-rounded-md ui-shadow-sm mx-auto"></div>
-    <p class="ui-text-center">Shadow cast by ambient light</p>
+  <div class="psui-bg-gray-20 psui-pt-8">
+    <div class="psui-bg-white psui-w-48 psui-h-48 psui-rounded-md psui-shadow-sm mx-auto"></div>
+    <p class="psui-text-center">Shadow cast by ambient light</p>
   </div>
-  <div class="ui-bg-gray-20 ui-pt-8">
-    <div class="ui-bg-white ui-w-48 ui-h-48 ui-rounded-md ui-shadow-md mx-auto"></div>
-    <p class="ui-text-center">Combined shadow from main and ambient lights</p>
+  <div class="psui-bg-gray-20 psui-pt-8">
+    <div class="psui-bg-white psui-w-48 psui-h-48 psui-rounded-md psui-shadow-md mx-auto"></div>
+    <p class="psui-text-center">Combined shadow from main and ambient lights</p>
   </div>
 </div>
 
 ## 2. Elevation system
 Shadows provide cues about depth, direction of movement, and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces.
-<div class="ui-grid grid-cols-2 ui-gap-6 ui-p-6 ui-bg-gray-20">
-  <div class="ui-rounded-md ui-p-8 ui-h-20 ui-shadow-inner">Elevation -5</div>
-  <div class="ui-rounded-md ui-p-8 ui-h-20 ui-bg-white ui-shadow-sm">Elevation 5</div>
-  <div class="ui-rounded-md ui-p-8 ui-h-20 ui-bg-white ui-shadow">Elevation 10</div>
-  <div class="ui-rounded-md ui-p-8 ui-h-20 ui-bg-white ui-shadow-md">Elevation 20</div>
-  <div class="ui-rounded-md ui-p-8 ui-h-20 ui-bg-white ui-shadow-lg">Elevation 30</div>
-  <div class="ui-rounded-md ui-p-8 ui-h-20 ui-bg-white ui-shadow-xl">Elevation 40</div>
+<div class="psui-grid grid-cols-2 psui-gap-6 psui-p-6 psui-bg-gray-20">
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-shadow-inner">Elevation -5</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-sm">Elevation 5</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow">Elevation 10</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-md">Elevation 20</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-lg">Elevation 30</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-xl">Elevation 40</div>
 </div>

package/src/stories/RadioButton.stories.js

@@ -1,16 +1,16 @@
-import RadioButton from '../components/controls/RadioButton.vue';
+import PsRadioButton from '../components/controls/PsRadioButton.vue';
 
 export default {
-  title: 'Components/RadioButton',
-  component: RadioButton,
+  title: 'Components/Radio Button',
+  component: PsRadioButton,
   argTypes: {},
 };
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { RadioButton },
+  components: { PsRadioButton },
   template: `
-  <RadioButton v-bind="$props" />
+  <PsRadioButton v-bind="$props" />
   `
 });
 

package/src/stories/TabHeader.stories.js

@@ -1,29 +1,29 @@
-import TabHeader from '../components/tabs/TabHeader.vue';
+import PsTabHeader from '../components/tabs/PsTabHeader.vue';
 const items = ['Existing Buildings', 'New Constructions', 'Other tab']
 const item = items[0]
 
 export default {
-  title: 'Components/Tabs',
-  component: TabHeader,
+  title: 'Components/Tab Header',
+  component: PsTabHeader,
   argTypes: {}
 };
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { TabHeader },
+  components: { PsTabHeader },
   data: () => {
     return {
     }
   },
   template: `
-  <div class="ui-bg-gray-20 ui-p-8">
-    <TabHeader :selected.sync=selected v-bind="$props"/>
-    <div v-if="$props['selected'] === 'Existing Buildings'" class="ui-bg-white ui-p-4" :class="{ 'ui-mt-4' : $props['theme'] === 'standard'}">
+  <div class="psui-bg-gray-20 psui-p-8">
+    <PsTabHeader :selected.sync=selected v-bind="$props"/>
+    <div v-if="$props['selected'] === 'Existing Buildings'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['theme'] === 'standard'}">
       <p v-for="i of 4">Tab Existing Buildings Selected</p>
     </div>
-    <div v-if="$props['selected'] === 'New Constructions'" class="ui-bg-white ui-p-4" :class="{ 'ui-mt-4' : $props['theme'] === 'standard'}">
+    <div v-if="$props['selected'] === 'New Constructions'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['theme'] === 'standard'}">
       <p v-for="i of 4">Tab New Constructions Selected</p>
     </div>
-    <div v-if="$props['selected'] === 'Other tab'" class="ui-bg-white ui-p-4" :class="{ 'ui-mt-4' : $props['theme'] === 'standard'}">
+    <div v-if="$props['selected'] === 'Other tab'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['theme'] === 'standard'}">
       <p v-for="i of 4">Other tab Selected</p>
     </div>
   </div>

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="ui-cursor-pointer" @click="teste('Callback Action 1')">ACTION1</span>
-    <span class="ui-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,5 +1,5 @@
 module.exports = {
-  prefix: 'ui-',
+  prefix: 'psui-',
   purge: ['./index.html', './src/**/*.vue,js,ts,jsx,tsx}'],
   darkMode: false, // or 'media' or 'class'
   theme: {

package/src/components/buttons/Button.vue

@@ -1,82 +0,0 @@
-<template>
-  <button
-    class="ui-font-bold ui-align-middle ui-flex ui-rounded-md"
-    :class="classes" 
-    @click="onClick()"
-  >
-    <i
-      v-if="icon"
-      class="ui-my-auto material-icons ui-mr-2"
-      :class="{ 'ui-text-sm': size === 'small' }"
-    >
-    {{ icon }}
-    </i>
-    <div class="ui-flex-grow ui-text-left">{{ label }}</div>
-    <i
-      v-if="iconRight" class="ui-my-auto material-icons ui-ml-2" 
-      :class="{ 'ui-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 = 'ui-px-4 ui-py-2'
-      if (this.size === 'medium') sizeCss = 'ui-px-4 ui-py-1'
-      if (this.size === 'small') sizeCss = 'ui-px-2 ui-py-ui-px ui-text-sm'
-      if (this.outline) return `${sizeCss} ui-bg-white ui-border ${this.disabled ? 'ui-border-gray-40 ui-text-gray-40' : 'ui-border-blue-60 ui-text-blue-60'}`
-      if (this.ghost) return `${sizeCss} ${this.disabled ? 'ui-bg-gray-20 ui-text-gray-40' : 'ui-bg-blue-20 ui-text-blue-60 active:ui-shadow-inner'}`
-      if (this.textOnly) return `${sizeCss} ${this.disabled ? 'ui-text-gray-40' : 'ui-text-blue-60'}`
-      if (this.disabled) return `${sizeCss} ui-bg-gray-20 ui-text-gray-40`
-      return `${sizeCss} ui-bg-blue-60 hover:ui-bg-blue-50 ui-text-white active:ui-shadow-inner`
-    }  
-  },
-  methods: {
-    onClick() {
-      if (this.disabled) return false
-      this.$emit('click');
-    }
-  }
-}
-</script>