@policystudio/policy-studio-ui-vue 1.1.90-beta.0 → 1.1.90-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.90-beta.0",
+  "version": "1.1.90-beta.3",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",
@@ -59,7 +59,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.6.7",
-    "tailwindcss": "^1.9.6",
+    "tailwindcss": "^3.4.1",
     "vue-eslint-parser": "^9.3.2",
     "vue-loader": "^17.4.2",
     "watch": "^1.0.2"

package/postcss.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   plugins: {
-    'postcss-nested': {},
     'postcss-import': {},
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
   },

package/src/assets/scss/base.scss

@@ -67,35 +67,39 @@ html {
   -webkit-font-smoothing: antialiased;
 }
 
-.psui-card {
-  @apply .psui-w-full .psui-bg-white .psui-rounded-lg .psui-px-6 .psui-py-4 .psui-shadow-elevation-5;
 
-  &-header {
-    @apply .psui-flex .psui-items-center .psui-justify-between .psui-mb-4;
-
-    h4 {
-      @apply .psui-text-h6 .psui-font-bold .psui-text-gray-80;
+@layer components {
+  .psui-card {
+    @apply .psui-w-full .psui-bg-white .psui-rounded-lg .psui-px-6 .psui-py-4 .psui-shadow-elevation-5;
+  
+    &-header {
+      @apply .psui-flex .psui-items-center .psui-justify-between .psui-mb-4;
+  
+      h4 {
+        @apply .psui-text-h6 .psui-font-bold .psui-text-gray-80;
+      }
     }
   }
-}
 
-.psui-show-childrens-on-hover {
-  &:hover {
-    * {
-      opacity: 1 !important;
+  .psui-show-childrens-on-hover {
+    &:hover {
+      * {
+        opacity: 1 !important;
+      }
     }
-  }
-
-  &.absolute-childrens {
-    @apply psui-relative;
-
-    .helper {
-      @apply psui-absolute psui-top-0;
-      right: -18px;
+  
+    &.absolute-childrens {
+      @apply psui-relative;
+  
+      .helper {
+        @apply psui-absolute psui-top-0;
+        right: -18px;
+      }
     }
   }
+  
+  .psui-transition {
+    @apply psui-transition-all psui-ease-in-out psui-duration-150;
+  }
 }
 
-.psui-transition {
-  @apply psui-transition-all psui-ease-in-out psui-duration-150;
-}

package/src/assets/scss/components/PsAccordion.scss

@@ -8,7 +8,7 @@
       &.disabled {
         .psui-el-accordion-item-header {
           .psui-el-accordion-item-header-wrapper {
-           @apply psui-text-gray-50 pointer-events-none;
+           @apply psui-text-gray-50 psui-pointer-events-none;
 
           }
         }

package/src/assets/scss/components/PsChips.scss

@@ -1,4 +1,4 @@
-@layer components{
+@layer components {
 
   .psui-el-chips {
     @apply psui-inline-flex psui-relative;
@@ -126,7 +126,7 @@
 
             &,
             .psui-el-chips-close {
-              @apply .psui-text-gray-50;
+              @apply psui-text-gray-50;
             }
 
             .psui-el-chips-icon-prepend {
@@ -140,7 +140,7 @@
 
             &,
             .psui-el-chips-close {
-              @apply .psui-text-blue-60;
+              @apply psui-text-blue-60;
             }
 
             .psui-el-chips-icon-prepend {

package/src/assets/scss/components/PsCostEffectBar.scss

@@ -1,13 +1,13 @@
 @layer components {
   .psui-el-cost-effect-bar {
-    @apply .psui-overflow-visible;
+    @apply psui-overflow-visible;
 
     div {
-      @apply .psui-relative .psui-h-2 .psui-rounded-2xl;
+      @apply psui-relative psui-h-2 psui-rounded-2xl;
       width: 100px;
 
       span {
-        @apply .psui-absolute .psui-rounded-sm .psui-z-10; 
+        @apply psui-absolute psui-rounded-sm psui-z-10; 
         background-color: #d6dde5;
         width: 2px;
         height: 14px;
@@ -15,7 +15,7 @@
       }
 
       .psui-el-simple-progress-bar {
-        @apply .psui-overflow-hidden;
+        @apply psui-overflow-hidden;
 
         &-percentage {
           border-radius: unset;

package/src/assets/scss/components/PsProgressBar.scss

@@ -1,10 +1,10 @@
 @layer components {
   .psui-el-progress-bar {
-    @apply .psui-relative .psui-h-2 .psui-rounded-full .psui-bg-red-10;
+    @apply psui-relative psui-h-2 psui-rounded-full psui-bg-red-10;
     width: 100px;
 
     &.is-breakeven {
-      @apply .psui-bg-blue-20;
+      @apply psui-bg-blue-20;
     }
 
     &-percentage {
@@ -16,13 +16,13 @@
     }
 
     &-divider {
-      @apply .psui-absolute .psui-rounded-full .psui-z-auto .psui-bg-gray-30;
+      @apply psui-absolute psui-rounded-full psui-z-auto psui-bg-gray-30;
       width: 2px; height: 14px;
       top: -3px;
     }
 
     &-value {
-      @apply .psui-h-2 .psui-rounded-tl-full .psui-rounded-bl-full;
+      @apply psui-h-2 psui-rounded-tl-full psui-rounded-bl-full;
     }
 
     @keyframes animate-stripes {

package/src/assets/scss/components/PsTabHeader.scss

@@ -6,7 +6,7 @@
     button {
       @apply transition-default psui-text-small;
       &.status-disabled {
-        @apply cursor-not-allowed;
+        @apply psui-cursor-not-allowed;
       }
 
       &:focus {

package/src/assets/scss/components/PsTableResults.scss

@@ -1,6 +1,6 @@
 @layer components{
   .psui-el-table-results-wrapper {
-    @apply psui-w-full psui-whitespace-no-wrap psui-flex psui-overflow-auto;
+    @apply psui-w-full psui-whitespace-nowrap psui-flex psui-overflow-auto;
 
     &.table-flexible {
       @apply psui-pr-4;

package/src/assets/scss/components/PsTestimonialCard.scss

@@ -1,6 +1,6 @@
 @layer components {
   .psui-el-testimonial {
-    @apply psui-relative psui-bg-white psui-shadow-elevation-5 psui-flex psui-flex-col psui-rounded-lg w-full;
+    @apply psui-relative psui-bg-white psui-shadow-elevation-5 psui-flex psui-flex-col psui-rounded-lg psui-w-full;
     padding: 56px 42px 40px 32px;
 
     &-icon {

package/src/components/buttons/PsButton.vue

@@ -6,127 +6,105 @@
     class="psui-el-button" 
     :class="[getComponentClass, {'hover': isHover}, {'disabled': disabled || loading }]" 
   >
-    <svg
+    <svg
       v-if="loading" 
       class="psui-animate-spin psui-mr-3 psui-h-5 psui-w-5 psui-text-black"
       :class="`${iconPosition == 'left' ? 'psui-mr-3' : 'psui-ml-3 psui--mr-1'}`"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
     >
-      <circle
-        class="psui-opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        stroke-width="4"
+      <circle
+        class="psui-opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
       />
-      <path
-        class="psui-opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      <path
+        class="psui-opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
       />
     </svg>
-    <i
-      v-else-if="icon"
-      :class="iconClass"
-      class="material-icons-round"
+    <i
+      v-else-if="icon"
+      :class="iconClass"
+      class="material-icons-round"
     >{{ icon }}</i>
     <span v-if="label">{{ label }}</span>
   </button>
 </template>
 
-<script>
-export default {  
-  props: {
-    /**
-     * It set de label of the button when component is rendered.
-     */
+<script setup>
+import { computed, ref } from 'vue'
+
+  const isHover = ref(false)
+
+  const emit = defineEmits(['click'])
+
+  const props = defineProps({
     label: {
       type: String,
+      default: ''
     },
-    /**
-     * It set the layout of the button. eg: solid, outline, ghost, onlytext and caution.
-     */
-    layout: {
+    layout:{
       type: String,
       default: 'solid',
       validator: (value) => ['solid','outline','ghost','onlytext','caution'].includes(value)
     },
-    /**
-     * It sets the text key which will retrieve a icon from Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/.
-     */
     icon: {
       type: String,
+      default: ''
     },
-    /**
-     * It sets the position of the icon. eg: left or right.
-     */
-    iconPosition:{
+    iconPosition: {
       type: String,
       default: 'left',
       validator: (value) => ['left','right'].includes(value)
     },
-    /**
-     * It sets the size of the icon. eg: small, medium and big.
-     */
     size: {
-      type: String,
-      default: 'big',
-      validator: (value) => ['small','medium','big'].includes(value)
-    },
-    /**
-     * It disable the button. All mouse event are disabled.
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * It disable and add a spin icon to the button. All mouse event are disabled.
-     */
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * It set any further css style that might be needed.
-     */
-    iconClass:{
-      type: String
-    }
-  },
-  data(){
-    return {
-      isHover: false,
-    }
-  },
-  computed: {
-    getComponentClass(){
-        if(this.icon){
-          return `layout-${this.layout} size-${this.size} icon-${this.iconPosition}`
-        } else {
-          return `layout-${this.layout} size-${this.size}` 
-        }
-    },
-  },
-  methods: {
-    onClick() {
-      if (this.disabled) return
-      this.$emit('click')
-    },
-    onMouseEnter(){
-      if(!this.disabled){
-        this.isHover = true
-      }
-    },
-    onMouseLeave(){
-      if(!this.disabled){
-        this.isHover = false
-      }
+        type: String,
+        default: 'big',
+        validator: (value) => ['small','medium','big'].includes(value)
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      iconClass:{
+        type: String,
+        default: ''
+      } 
+  })
+
+ const getComponentClass = computed(()=>{
+  if(props.icon){
+    return `layout-${props.layout} size-${props.size} icon-${props.iconPosition}`
+  } else {
+    return `layout-${props.layout} size-${props.size}` 
+  }
+ })   
+
+ const onClick = () => {
+  if (props.disabled) return
+    emit('click')
+ }
+ const onMouseEnter = () => {
+  if(!this.disabled){
+    isHover.value = true
+  }
+ }
+
+ const onMouseLeave = () => {
+    if(!this.disabled){
+      isHover.value = false
     }
   }
-}
+
 </script>
 

package/tailwind.config.js

@@ -1,7 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+
 module.exports = {
   prefix: 'psui-',
-  purge: ['./index.html', './src/**/*.vue,js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
+  content: [
+    './index.html',
+    './src/**/*.vue',
+    './src/**/*.js',
+    './src/**/*.ts',
+    './src/**/*.jsx',
+    './src/**/*.tsx',
+  ],
+  darkMode: 'media', // or 'media' or 'class'
   theme: {
     colors: {
       'white': '#ffffff ',