@policystudio/policy-studio-ui-vue 1.1.90-beta.2 → 1.1.90-beta.20

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 { defineProps, 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,51 @@
     </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>
+import { defineProps, defineEmits } from 'vue'
+
+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,65 @@
 <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>
+import { defineProps } from 'vue'
+
+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>

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

@@ -7,26 +7,21 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PsClimateZoneBadge',
-  props: {
-    /**
-     * 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: 'area_chart',
-    },
-    /**
-     * It sets the content that will show up when the component is rendered.
-     */
-    content: {
-      type: Number,
-      default: 10,
-    },
+<script setup>
+import { defineProps } from 'vue'
+defineProps({
+  icon: {
+    type: String,
+    default: 'area_chart',
   },
-}
+  /**
+   * It sets the content that will show up when the component is rendered.
+   */
+  content: {
+    type: Number,
+    default: 10,
+  },
+})
 </script>
 
 <style>

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

@@ -2,7 +2,6 @@
   <div class="psui-el-cost-effect-bar">
     <div>
       <span :style="breakEvenPosition" />
-
       <PsProgressBar
         :value="value"
         :percentage-color="percentageColor"
@@ -12,68 +11,37 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import PsProgressBar from './PsProgressBar.vue'
-export default {
-  name: 'PsCostEffectBar',
-  components: {
-    PsProgressBar,
-  },
+import { defineProps, computed } from 'vue'
 
-  props: {
-    /**
-     * It sets the value of the progress bar within costeffectbar.
-     */
-    value: {
-      type: Number,
-      required: true,
-      default: 0,
-    },
-    /**
-     * It sets the threshold of being effective or not effective within costeffectbar.
-     */
-    breakEven: {
-      type: Number,
-      required: true,
-      default: 0,
-    },
+const props = defineProps({
+  value: {
+    type: Number,
+    required: true,
+    default: 0,
   },
-  data() {
-    return {
-      errors: [],
-    }
+  /**
+   * It sets the threshold of being effective or not effective within costeffectbar.
+   */
+  breakEven: {
+    type: Number,
+    required: true,
+    default: 0,
   },
+})
 
-  computed: {
-    valueBar() {
-      if (this.value > 100) return 100
-      else if (this.value < 0) return 0
-      else return this.value
-    },
-
-    breakEvenPosition() {
-      return `left: ${this.breakEven >= 98 ? 98 : this.breakEven}px`
-    },
+const breakEvenPosition = computed(() => {
+  return `left: ${props.breakEven >= 98 ? 98 : props.breakEven}px`
+})
 
-    getIsBreakEven() {
-      if (this.breakEven < 0) return 0
-      else if (this.breakEven > 100) return 100
-      else return this.breakEven
-    },
+const percentageColor = computed(() => {
+  return props.value >= props.breakEven ? 'psui-bg-blue-60' : 'psui-bg-red-20'
+})
 
-    percentageColor() {
-      return this.value >= this.breakEven
-        ? 'psui-bg-blue-60'
-        : 'psui-bg-red-20'
-    },
-
-    bgColor() {
-      return this.value >= this.breakEven
-        ? 'psui-bg-blue-20'
-        : 'psui-bg-red-10'
-    },
-  },
-}
+const bgColor = computed(() => {
+  return props.value >= props.breakEven ? 'psui-bg-blue-20' : 'psui-bg-red-10'
+})
 </script>
 
 <style>

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

@@ -9,23 +9,22 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PsDateCardInfo',
-  props: {
-    date: {
-      type: [Date, String],
-      default: new Date(),
-    }
+<script setup>
+import { defineProps, computed } from 'vue'
+
+const props = defineProps({
+  date: {
+    type: [Date, String],
+    default: new Date(),
   },
-  computed: {
-    getMonthAndDayFromDate() {
-      const options = { month: 'short', day: '2-digit' }
-      return (new Date(this.date))?.toLocaleString('default', options).replace('.', '') 
-    },
-    getYearFromDate() {
-      return (new Date(this.date))?.toLocaleString('default', { year: 'numeric' }) 
-    }
-  }
-}
+})
+
+const getMonthAndDayFromDate = computed(() => {
+  const options = { month: 'short', day: '2-digit' }
+  return new Date(props.date)?.toLocaleString('default', options).replace('.', '')
+})
+
+const getYearFromDate = computed(() => {
+  return new Date(props.date)?.toLocaleString('default', { year: 'numeric' })
+})
 </script>

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

@@ -10,5 +10,6 @@ export default {
 }
 </script>
 
-<style> /* Please, use the file src/assets/scss/components/PsHighlightRippleDot.scss */</style>
-
+<style>
+/* Please, use the file src/assets/scss/components/PsHighlightRippleDot.scss */
+</style>

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

@@ -1,51 +1,49 @@
 <template>
-  <div 
-    class="psui-el-mini-tag" 
-    :class="getComponentClass" 
-    @click="$emit('click', $event.target)"
+  <div
+    class="psui-el-mini-tag"
+    :class="getComponentClass"
+    @click="emit('click', $event.target)"
   >
     <span>{{ message }}</span>
   </div>
 </template>
 
-<script>
-export const typeOptions = [
-  'info',
-  'success',
-  'warning',
-  'error',
-  'default',
-  'solid-info',
-  'solid-success',
-  'solid-warning',
-  'solid-error',
-  'solid-default'
-]
-export default {
-  name: 'PsMiniTag',
-  props: {
-    /**
-     * It sets the layout of the the minitag. eg: info, success, warning, error and default.
-     */
-    layout: {
-      type: String,
-      default: 'info',
-      validator: (value) => typeOptions.indexOf(value) !== -1,
-    },
-    /**
-     * It sets the message that will show up within the minitag when component is rendered.
-     */
-    message: {
-      type: String,
-    },
+<script setup>
+import { defineProps, computed, defineEmits } from 'vue'
+
+const emit = defineEmits(['click'])
+
+const props = defineProps({
+  layout: {
+    type: String,
+    default: 'info',
+    validator: (value) => [
+    'info',
+    'success',
+    'warning',
+    'error',
+    'default',
+    'solid-info',
+    'solid-success',
+    'solid-warning',
+    'solid-error',
+    'solid-default'
+    ].indexOf(value) !== -1,  
   },
-  computed: {
-    getComponentClass() {
-      return `psui-el-mini-tag-layout-${this.layout}`
-    },
+  /**
+   * It sets the message that will show up within the minitag when component is rendered.
+   */
+  message: {
+    type: String,
+    default: '',
   },
-}
-</script>
+})
 
-<style> /* Please, use the file src/assets/scss/components/PsMiniTag.scss */ </style>
+const getComponentClass = computed(() => {
+  return `psui-el-mini-tag-layout-${props.layout}`
+})
+</script>
 
+<style>
+/* Please, use the file src/assets/scss/components/PsMiniTag.scss */
+</style>