@policystudio/policy-studio-ui-vue 1.1.89 → 1.1.90-beta.10

package/package.json

@@ -1,57 +1,73 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.89",
+  "version": "1.1.90-beta.10",
   "description": "Policy Studio UI",
-  "main": "src/index.js",
   "author": "Policy Studio Team",
-  "url": "https://github.com/Policy-Studio/policy-studio-ui-vue",
-  "license": "MIT",
-  "keywords": [
-    "vue",
-    "ui"
-  ],
   "scripts": {
+    "serve": "concurrently --kill-others \"npm run watch-storybook\" \"npm run watch-tailwind\"",
     "lint": "vue-cli-service lint",
-    "build-storybook": "STORYBOOK_ENV=production build-storybook",
+    "build-storybook": "storybook build",
+    "build-ts":"tsc",
     "build-tailwind": "postcss src/assets/scss/base.scss -o dist/css/psui_styles.css",
     "build-temp-tailwind": "postcss src/assets/scss/base.scss -o temp/css/psui_styles.css",
-    "full-publish": "npm run lint && npm run build-tailwind && build-storybook && npm publish",
-    "serve": "concurrently --kill-others \"npm run watch-storybook\" \"npm run watch-tailwind\"",
+    "full-publish": "npm run lint && npm run build-ts && npm run build-tailwind && npm run build-storybook && npm publish --tag beta",
+    "kill-port": "sh ./scripts/kill-port.sh",
     "serve-prod": "concurrently --kill-others \"npm run watch-storybook\" \"npm run watch-prod-tailwind\"",
-    "watch-storybook": "start-storybook -p 6006",
+    "storybook": "concurrently \"npm run kill-port\" \"npm run watch-prod-tailwind\" \"storybook dev -p 6006\"",
     "watch-prod-tailwind": "watch 'npm run build-tailwind' ./src/assets",
     "watch-tailwind": "watch 'npm run build-temp-tailwind' ./src/assets"
   },
+  "main": "dist/index.js",
   "dependencies": {
+    "@vue/compat": "^3.4.5",
     "core-js": "^3.6.5",
     "v-tooltip": "^2.1.3",
-    "vue": "^2.6.11"
+    "vue": "^3.4.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.7",
-    "@storybook/addon-actions": "^6.4.13",
-    "@storybook/addon-essentials": "^6.4.13",
-    "@storybook/addon-links": "^6.4.13",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/vue": "^6.4.13",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.3",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/blocks": "^7.6.7",
+    "@storybook/test": "^7.6.7",
+    "@storybook/vue3": "^7.6.7",
+    "@storybook/vue3-webpack5": "^7.6.7",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/compiler-sfc": "^3.4.5",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^9.1.0",
     "concurrently": "^7.0.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint": "^8.56.0",
+    "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-vue": "^8.7.1",
     "postcss": "^8.3.11",
     "postcss-cli": "^9.0.2",
     "postcss-import": "^14.0.2",
     "postcss-nested": "^5.0.6",
-    "prettier": "^2.2.1",
-    "tailwindcss": "^1.9.6",
-    "vue-loader": "^15.9.8",
-    "vue-template-compiler": "^2.6.11",
-    "watch": "^1.0.2"
-  }
+    "prettier": "^3.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.6.7",
+    "tailwindcss": "^3.4.1",
+    "ts-loader": "^9.5.1",
+    "typescript": "~4.5.5",
+    "vue-eslint-parser": "^9.3.2",
+    "vue-loader": "^17.4.2",
+    "watch": "^1.0.2",
+    "webpack": "^5.89.0"
+  },
+  "engines": {
+    "node": "18.19.0"
+  },
+  "keywords": [
+    "vue",
+    "ui"
+  ],
+  "license": "MIT",
+  "url": "https://github.com/Policy-Studio/policy-studio-ui-vue"
 }

package/postcss.config.js

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

package/scripts/kill-port.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+# Find the process using port 3000
+PROCESS_ID=$(lsof -t -i:6006)
+
+# Check if a process is using the port
+if [ -n "$PROCESS_ID" ]; then
+  echo "Killing process on port 6006 (PID: $PROCESS_ID)"
+  kill -9 $PROCESS_ID
+else
+  echo "Port 6006 is not in use"
+fi

package/src/App.vue

@@ -0,0 +1,30 @@
+<template>
+  <img
+    alt="Vue logo"
+    src="./assets/logo.png"
+  >
+  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import HelloWorld from './components/HelloWorld.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+})
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

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,9 +1,9 @@
 @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 psui-pb-2;
+      @apply psui-pr-4;
     }
   }
 
@@ -481,20 +481,6 @@
             }
           }
 
-          &.combined_measure_margin_aux {
-            
-            td {
-              content: '' !important;
-              background-color: white !important;
-              max-height: 10px;
-              visibility: hidden;
-              
-              &:nth-child(3) {
-                visibility: visible;
-              }
-
-            }
-          }
 
           &.is-disabled {
             td {
@@ -506,53 +492,6 @@
             }
           }
 
-          &.visible {
-            display: none
-          }
-
-          &.appended-row {
-            @apply psui-bg-blue-10 psui-border psui-rounded-md;
-            height: 36px;
-
-            td {
-                @apply psui-bg-gray-10 psui-text-gray-70;
-                transition: background-color 0.5s ease;
-
-                .title {
-                  margin-left: 6px;
-                }
-  
-                &:first-child {
-                  @apply psui-sticky;
-                  min-width: 330px;
-    
-                  &:after,&:before {
-                    content: '';
-                    @apply psui-absolute psui-top-0;
-                  }
-                  
-                  &:before {
-                    @apply psui-bg-gray-10 psui-rounded-bl-full ;
-                    box-shadow: -3px 3px 0px 0px #ffffff;
-                    z-index: 30;
-                    top: 25px;
-                    left: 0;
-                    width: 10px;
-                    height: 10px;
-                  }
-
-                  &:after {
-                    @apply psui-bg-gray-10 psui-rounded-tl-full ;
-                    box-shadow: -3px -3px 0px 0px #ffffff;
-                    z-index: 30;
-                    top: 0;
-                    left: 0;
-                    width: 10px;
-                    height: 10px;
-                  }
-                }
-              }
-          }
   
           td {
             @apply psui-text-gray-70 psui-h-10 psui-text-right psui-text-small;

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/accordion/PsAccordion.vue

@@ -1,28 +1,27 @@
 <template>
-  <div class="psui-el-accordion" :class="getComponentClass">
-    <slot></slot>
+  <div
+    class="psui-el-accordion"
+    :class="getComponentClass"
+  >
+    <slot />
   </div>
 </template>
 
-<script>
-export const layouts = ['big', 'medium']
-export default {
-  name: 'PsAccordion',
-  props: {
-    /**
-     * It defines the size of the accordion items. eg: text size and font.
-     */
-    layout: {
-      type: String,
-      default: 'medium',
-      validator: (value) => ['medium','big'].includes(value),
-    },
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  layout:{
+    type: String,
+    default: 'medium',
+    validator: (value) => ['big', 'medium'].includes(value)
   },
-  computed: {
-    getComponentClass() {
-      return `layout-${this.layout}`
-    }
-  }
-}
+})
+
+const getComponentClass = computed(() => {
+  return `layout-${props.layout}`
+})
+
 </script>
+
 <style> /* Please, use the file src/assets/scss/components/PsAccordion.scss */</style>

package/src/components/accordion/PsAccordionItem.vue

@@ -1,11 +1,30 @@
 <template>
-  <div class="psui-el-accordion-item" :class="{'status-opened':isOpen, 'disabled':disabled}">
+  <div
+    class="psui-el-accordion-item"
+    :class="{'status-opened':isOpen, 'disabled':disabled}"
+  >
     <div class="psui-el-accordion-item-header">
-      <slot name='custom-header' :toggle="toggle" :isOpen="isOpen">
-        <div @click="toggle" class="psui-el-accordion-item-header-wrapper" v-if="!hasCustomHeader">
-          <h2 v-if="title" class="psui-el-accordion-item-title">{{ title }}</h2>
-          <slot name='header-additionals'></slot>
-          <i v-if="!disabled" class="psui-el-accordion-item-icon">{{ getIcon }}</i> 
+      <slot
+        name="custom-header"
+        :toggle="toggle"
+        :is-open="isOpen"
+      >
+        <div
+          @click="toggle"
+          class="psui-el-accordion-item-header-wrapper"
+          v-if="!hasCustomHeader"
+        >
+          <h2
+            v-if="title"
+            class="psui-el-accordion-item-title"
+          >
+            {{ title }}
+          </h2>
+          <slot name="header-additionals" />
+          <i
+            v-if="!disabled"
+            class="psui-el-accordion-item-icon"
+          >{{ getIcon }}</i> 
         </div>
       </slot>
     </div>
@@ -16,8 +35,11 @@
       @before-leave="start"
       @after-leave="end"
     >
-      <div v-if="isOpen" class="psui-el-accordion-item-content">
-        <slot></slot>
+      <div
+        v-if="isOpen"
+        class="psui-el-accordion-item-content"
+      >
+        <slot />
       </div>
     </transition>
   </div>

package/src/components/badges-and-tags/PsBadgeWithIcon.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="psui-el-badge-with-icon" :class="getComponentClass">
+  <div
+    class="psui-el-badge-with-icon"
+    :class="getComponentClass"
+  >
     <i 
       v-if="icon" 
       :class="iconClass"
       class="psui-el-badge-with-icon-icon"
-    >{{icon}}</i>
-    <span class="psui-el-badge-with-icon-message">{{message}}</span>
+    >{{ icon }}</i>
+    <span class="psui-el-badge-with-icon-message">{{ message }}</span>
   </div>
 </template>
 
@@ -21,7 +24,8 @@
        * It set any further css style that might be needed.
        */
       iconClass: {
-        type: String
+        type: String,
+        default:''
       },
       message: {
         type: String,

package/src/components/badges-and-tags/PsCardInfos.vue

@@ -8,7 +8,9 @@
     </h5>
     <div class="psui-el-card-infos-content">
       <span class="psui-el-card-infos-icon material-icons-round">{{ icon }}</span>
-      <h5 class="psui-text-gray-80">{{ total }}</h5>
+      <h5 class="psui-text-gray-80">
+        {{ total }}
+      </h5>
     </div>
   </div>
 </template>

package/src/components/badges-and-tags/PsChartLegend.vue

@@ -1,14 +1,28 @@
 <template>
   <div class="psui-el-chart-legend">
     <div class="psui-flex psui-flex-shrink-0">
-      <div class="psui-el-chart-legend-dot" :style="dotColor"/>
+      <div
+        class="psui-el-chart-legend-dot"
+        :style="dotColor"
+      />
     </div>
     <div class="psui-flex-grow-1 flex psui-flex-col">
-      <div class="psui-el-chart-legend-text">{{ text }}</div>
+      <div class="psui-el-chart-legend-text">
+        {{ text }}
+      </div>
       <div class="flex psui-items-center psui-flex-shrink-0 psui-gap-1">
-        <span v-if="this.total" class="psui-el-chart-legend-total">{{ total }}</span>
-        <span class="psui-text-gray-30" v-if="total && percentage"> | </span>
-        <span class="psui-el-chart-legend-percentage" v-if="percentage">
+        <span
+          v-if="this.total"
+          class="psui-el-chart-legend-total"
+        >{{ total }}</span>
+        <span
+          class="psui-text-gray-30"
+          v-if="total && percentage"
+        > | </span>
+        <span
+          class="psui-el-chart-legend-percentage"
+          v-if="percentage"
+        >
           {{ percentage }}%
         </span>
       </div>

package/src/components/badges-and-tags/PsCostEffectBar.vue

@@ -1,14 +1,13 @@
 <template>
   <div class="psui-el-cost-effect-bar">
     <div>
-      <span :style="breakEvenPosition"> </span>
+      <span :style="breakEvenPosition" />
 
       <PsProgressBar
         :value="value"
-        :percentageColor="percentageColor"
-        :bgColor="bgColor"
-      >
-      </PsProgressBar>
+        :percentage-color="percentageColor"
+        :bg-color="bgColor"
+      />
     </div>
   </div>
 </template>

package/src/components/badges-and-tags/PsHighlightRippleDot.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="psui-el-highlight-ripple-icon">
-    <div class="psui-el-icon"></div>
+    <div class="psui-el-icon" />
   </div>
 </template>
 

package/src/components/badges-and-tags/PsProgressBar.vue

@@ -38,7 +38,7 @@ export default {
       default: 1
     },
     forceBreakEven: {
-      Boolean,
+      type: Boolean,
       default: false
     },
     value: {

package/src/components/badges-and-tags/PsTestimonialCard.vue

@@ -8,11 +8,13 @@
         display="flex"
       />
     </div>
-    <p class="psui-el-testimonial-description">{{description}}</p>
+    <p class="psui-el-testimonial-description">
+      {{ description }}
+    </p>
     <div class="psui-el-testimonial-info">
-      <span class="psui-el-testimonial-info-user" >{{user}}</span>
-      <span class="psui-el-testimonial-info-position">{{position}}</span>
-      <span class="psui-el-testimonial-info-jurisdiction">{{jurisdiction}}</span>
+      <span class="psui-el-testimonial-info-user">{{ user }}</span>
+      <span class="psui-el-testimonial-info-position">{{ position }}</span>
+      <span class="psui-el-testimonial-info-jurisdiction">{{ jurisdiction }}</span>
     </div>
   </div>
 </template>