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

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

@@ -35,6 +35,9 @@
 @import './components/PsBarChart.scss';
 @import './components/PsSimpleAlert.scss';
 @import './components/PsBreadcrumb.scss';
+@import './components/PsCollapse.css';
+
+
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
@@ -68,38 +71,4 @@ html {
 }
 
 
-@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;
-      }
-    }
-  
-    &.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;
-  }
-}
 

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

@@ -101,7 +101,7 @@
       overflow: hidden;
     }
 
-    .accordion-fade-enter,
+    .accordion-fade-enter-from,
     .accordion-fade-leave-to {
       height: 0 !important;
       margin-bottom: 0 !important;

package/src/assets/scss/components/PsCollapse.css

@@ -0,0 +1,74 @@
+@layer components {
+
+  .psui-el-collapse {
+    
+    .psui-el-collapse-item-content {
+      @apply psui-relative psui-pl-4;
+
+      &::before {
+        @apply psui-bg-gray-30 psui-ml-2;
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1px;
+        height: 100%;
+        transform: translateX(-50%);
+      }
+    }
+
+    
+    &.disabled {
+      .psui-el-collapse-item-header {
+        .psui-el-collapse-item-header-wrapper {
+          @apply psui-text-gray-50 hover:psui-text-gray-50;
+        }
+      } 
+    }
+
+    .psui-el-collapse-item-header {
+      @apply psui-flex psui-items-center psui-cursor-pointer;
+
+      .psui-el-collapse-item-icon {
+        @apply psui-text-gray-50 psui-transition-all;
+        transition-duration: 0.4s;
+        font-size: 16px;
+      }
+
+      .psui-el-collapse-item-header-wrapper {
+        @apply psui-flex psui-items-center psui-py-2 psui-text-small psui-w-full psui-text-gray-70 hover:psui-text-blue-60;
+  
+        .psui-el-collapse-item-title {
+          @apply psui-ml-1;
+  
+        }
+
+        .psui-el-collapse-item-header-action {
+          @apply psui-invisible psui-ml-auto;
+        }
+      }
+
+      &:hover {
+        .psui-el-collapse-item-header-wrapper {
+          .psui-el-collapse-item-header-action {
+            @apply psui-visible;
+          }
+        }
+      }
+    }
+
+
+    .collapse-fade-enter-active,
+    .collapse-fade-leave-active {
+      will-change: height, margin-bottom;
+      transition: height 0.4s ease-in-out, margin-bottom 0.4s ease-in-out;
+      overflow: hidden;
+    }
+
+    .collapse-fade-enter-from,
+    .collapse-fade-leave-to {
+      height: 0 !important;
+      margin-bottom: 0 !important;
+    }
+  }
+}

package/src/assets/scss/components/PsDataTable.scss

@@ -58,7 +58,7 @@
         td,
         tr {
           padding: 7px 16px;
-          @apply .psui-text-gray-80;
+          @apply psui-text-gray-80;
         }
       }
     }

package/src/assets/scss/components/PsDropdownList.scss

@@ -3,7 +3,7 @@
     @apply psui-w-full psui-flex psui-flex-col psui-font-medium psui-my-4;
 
     .psui-el-dropdown-menu-list-item {
-      @apply psui-flex psui-items-end psui-justify-between psui-mx-0 psui-text-small psui-text-gray-60 psui-cursor-pointer psui-transition-all psui-show-childrens-on-hover;
+      @apply psui-flex psui-items-end psui-justify-between psui-mx-0 psui-text-small psui-text-gray-60 psui-cursor-pointer psui-transition-all;
       padding: 7px 20px;
 
       &-left-label {

package/src/components/accordion/PsAccordionItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="psui-el-accordion-item"
-    :class="{'status-opened':isOpen, 'disabled':disabled}"
+    :class="{ 'status-opened': isOpen, disabled: disabled }"
   >
     <div class="psui-el-accordion-item-header">
       <slot
@@ -24,7 +24,7 @@
           <i
             v-if="!disabled"
             class="psui-el-accordion-item-icon"
-          >{{ getIcon }}</i> 
+          >{{ getIcon }}</i>
         </div>
       </slot>
     </div>
@@ -45,84 +45,98 @@
   </div>
 </template>
 
-<script>
-import { getParentVueComponentByName } from '../../util/GeneralFunctions'
+<script setup>
+import { getParentVueComponentByName } from '../../util/GeneralFunctions.js'
+import { ref, computed, getCurrentInstance  } from 'vue'
 
-export default {
-  name: 'PsAccordionItem',
-  props: {
-    /**
-     * It sets the title of the accordion item.
-     */
-    title: {
-      type: String,
-    },
-    /**
-    * It sets the status of the accordion item when mounted. 
-    */
-    opened: {
-      type: [Boolean],
-      default: false
-    },
-    /**
-     * It sets the text key to get the svg icon in Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/.
-     */
-    icon: {
-      type: String
-    },
-    /**
-     * It sets if it has a custom header.
-     */
-    hasCustomHeader: {
-      type: Boolean,
-      default: false
-    },
-    /**  
-    * It sets the disabled status.
-    */
-    disabled: {
-      type: Boolean,
-      default: false
-    }
+const localOpened = ref(null)
+
+const props = defineProps({
+  /**
+   * It sets the title of the accordion item.
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * It sets the status of the accordion item when mounted.
+   */
+  opened: {
+    type: [Boolean],
+    default: false,
+  },
+  /**
+   * It sets the text key to get the svg icon in Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/.
+   */
+  icon: {
+    type: String,
+    default: '',
   },
-  data() {
-    return {
-      localOpened: null,
-    }
+  /**
+   * It sets if it has a custom header.
+   */
+  hasCustomHeader: {
+    type: Boolean,
+    default: false,
   },
-  computed: {
-    isOpen() {
-      return this.localOpened !== null ? this.localOpened : this.opened
-    },
-    getParent() {
-      return getParentVueComponentByName(this,'PsAccordion')
-    },
-    getIcon(){
-      if(this.getParent._props.layout === 'medium') return 'expand_more'
-      if(this.getParent._props.layout === 'big' && this.isOpen === false) return 'add'
-      if(this.getParent._props.layout === 'big' && this.isOpen === true) return 'remove'
-      return `${this.icon}`
-    }
+  /**
+   * It sets the disabled status.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    toggle() {
-      if (this.localOpened === null) {
-        this.localOpened = !this.opened
-      } else {
-        this.localOpened = !this.localOpened
-      }
-    },
-    start(el) {
-      el.style.height = el.scrollHeight + 'px'
-      el.style.padding = el.srcollPaddingBottom + 'px'
-    },
-    end(el) {
-      el.style.height = ''
-      el.style.padding = ''
-    }
+})
+
+const isOpen = computed(() => {
+  return localOpened.value !== null ? localOpened.value : props.opened
+})
+
+const getParent = computed(() => {
+  const instance = getCurrentInstance()
+
+  if (instance?.parent) {
+    return getParentVueComponentByName(instance.parent, 'PsAccordion')
+  }
+
+  if (instance.proxy && instance.proxy.$parent) {
+    return getParentVueComponentByName(instance.proxy.$parent, 'PsAccordion')
+  }
+
+  return null
+})
+
+const getIcon = computed(() => {
+  if (!getParent.value) return
+
+  const layout = getParent.value._props ? getParent.value._props.layout : getParent?.value?.props.layout.default
+  if (layout === 'medium') return 'expand_more'
+  if (layout === 'big' && isOpen.value === false) return 'add'
+  if (layout === 'big' && isOpen.value === true) return 'remove'
+  return `${props.icon}`
+})
+
+const toggle = () => {
+  if (localOpened.value === null) {
+    localOpened.value = !props.opened
+  } else {
+    localOpened.value = !localOpened.value
   }
 }
+const start = (el) => {
+  el.style.height = el.scrollHeight + 'px'
+  el.style.padding = el.srcollPaddingBottom + 'px'
+}
+const end = (el) => {
+  el.style.height = ''
+  el.style.padding = ''
+}
 </script>
 
-<style> /* Please, use the file src/assets/scss/components/PsAccordion.scss */</style>
+<style>
+/* Please, use the file src/assets/scss/components/PsAccordion.scss */
+</style>
+
+
 

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

@@ -3,8 +3,8 @@
     class="psui-el-badge-with-icon"
     :class="getComponentClass"
   >
-    <i 
-      v-if="icon" 
+    <i
+      v-if="icon"
       :class="iconClass"
       class="psui-el-badge-with-icon-icon"
     >{{ icon }}</i>
@@ -12,35 +12,33 @@
   </div>
 </template>
 
-<script>
-  export default {
-    name: 'PsBadgeWithIcon',
-    props: {
-      icon: {
-        type: String,
-        default:'info'
-      },
-      /**
-       * It set any further css style that might be needed.
-       */
-      iconClass: {
-        type: String
-      },
-      message: {
-        type: String,
-        default: 'Lorem ipsum'
-      },
-      layout: {
-        type: String,
-        default: 'grey',
-        validator: (value) => ['grey', 'blue', 'green','yellow'].includes(value)
-      }
-    },
-    computed:{
-      getComponentClass(){
-        return `layout-${this.layout}`
-      }
-    }
-  }
-</script>
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: 'info',
+  },
+  /**
+   * It set any further css style that might be needed.
+   */
+  iconClass: {
+    type: String,
+    default: '',
+  },
+  message: {
+    type: String,
+    default: 'Lorem ipsum',
+  },
+  layout: {
+    type: String,
+    default: 'grey',
+    validator: (value) => ['grey', 'blue', 'green', 'yellow'].includes(value),
+  },
+})
 
+const getComponentClass = computed(() => {
+  return `layout-${props.layout}`
+})
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div 
+  <div
     class="psui-el-card-infos"
     @click="onClick()"
   >
@@ -8,52 +8,50 @@
     </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 class="psui-text-gray-80">
+        {{ total }}
       </h5>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PsCardInfos',
-  props: {
-    /**
-     * It sets the title of your card.
-     */
-    title: {
-      type: String,
-      default: 'Total',
-    },
-    /**
-     * It sets the subtitle of your card if needed.
-     */
-    subtitle: {
-      type: String,
-      default: '',
-    },
-    /**
-     * It sets the text key to get the svg icon in Google Fonts. Make sure to get the right description of your icon on https://fonts.google.com/.
-     */
-    icon: {
-      type: String,
-      default: 'edit',
-    },
-    /**
-     * It sets the data that will show up when component is mounted.
-     */
-    total: {
-      type: String,
-      default: '',
-    },
+<script setup>
+
+const emit = defineEmits(['click'])
+
+defineProps({
+  title: {
+    type: String,
+    default: 'Total',
+  },
+  /**
+   * It sets the subtitle of your card if needed.
+   */
+  subtitle: {
+    type: String,
+    default: '',
   },
-  methods: {
-    onClick() {
-      this.$emit('click')
-    }
-  }
+  /**
+   * It sets the text key to get the svg icon in Google Fonts. Make sure to get the right description of your icon on https://fonts.google.com/.
+   */
+  icon: {
+    type: String,
+    default: 'edit',
+  },
+  /**
+   * It sets the data that will show up when component is mounted.
+   */
+  total: {
+    type: String,
+    default: '',
+  },
+})
+
+const onClick = () => {
+  emit('click')
 }
 </script>
 
-<style> /* Please, use the file src/assets/scss/components/PsCardInfos.scss */</style>
+<style>
+/* Please, use the file src/assets/scss/components/PsCardInfos.scss */
+</style>

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

@@ -1,69 +1,64 @@
 <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 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"
+        <span
+          v-if="total"
+          class="psui-el-chart-legend-total"
         >{{ total }}</span>
-        <span
-          class="psui-text-gray-30"
-          v-if="total && percentage"
+        <span
+          class="psui-text-gray-30"
+          v-if="total && percentage"
         > | </span>
-        <span
-          class="psui-el-chart-legend-percentage"
-          v-if="percentage"
-        >
-          {{ percentage }}%
-        </span>
+        <span
+          class="psui-el-chart-legend-percentage"
+          v-if="percentage"
+        > {{ percentage }}% </span>
       </div>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PsChartLegend',
-  props: {
-    /**
-     * It sets the text of the chart legend.
-     */
-    text: {
-      type: [String, Number],
-      default: 'Climate Zone 10',
-    },
-    /**
-     * It sets the data that will show up when component is mounted.
-     */
-    total: {
-      type: String,
-      default: null,
-    },
-    /**
-     * It sets the data that wull show up when component is mounted.
-     */
-    percentage: {
-      type: String,
-      default: null,
-    },
-    /**
-     * It sets the color of the dot component.
-     */
-    dotColor: {
-      type: Object,
-      default: null
-    },
+<script setup>
+
+defineProps({
+  text: {
+    type: [String, Number],
+    default: 'Climate Zone 10',
+  },
+  /**
+   * It sets the data that will show up when component is mounted.
+   */
+  total: {
+    type: String,
+    default: null,
+  },
+  /**
+   * It sets the data that wull show up when component is mounted.
+   */
+  percentage: {
+    type: String,
+    default: null,
+  },
+  /**
+   * It sets the color of the dot component.
+   */
+  dotColor: {
+    type: Object,
+    default: null,
   },
-}
+})
 </script>
 
-<style> /* Please, use the file src/assets/scss/components/PsChartLegend.scss */</style>
+<style>
+/* Please, use the file src/assets/scss/components/PsChartLegend.scss */
+</style>