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

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>

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

@@ -1,13 +1,13 @@
-<template> 
+<template>
   <div
     class="psui-el-progress-bar"
-    :style="{width: `${width}px`}"
-    :class="{ 'is-breakeven' : getIsBreakEven }"
+    :style="{ width: `${width}px` }"
+    :class="{ 'is-breakeven': getIsBreakEven }"
   >
     <div class="psui-el-progress-bar-bg" />
     <div
-      class="psui-el-progress-bar-value" 
-      :class="[getBg, {'rounded-tr-full rounded-br-full': getProgressWidth === '100%'}]"
+      class="psui-el-progress-bar-value"
+      :class="[getBg, { 'rounded-tr-full rounded-br-full': getProgressWidth === '100%' }]"
       :style="{ width: getProgressWidth }"
     />
     <div
@@ -17,69 +17,73 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PsProgressBar',
-  props: {
-    width: {
-      type: [String, Number],
-      default: 100
-    },
-    min: {
-      type: Number,
-      default: 0
-    },
-    max: {
-      type: Number,
-      default: 5
-    },
-    breakEven: {
-      type: Number,
-      default: 1
-    },
-    forceBreakEven: {
-      type: Boolean,
-      default: false
-    },
-    value: {
-      type: [String, Number],
-      default: null
-    },
-    positiveBg: {
-      type: String,
-      default: 'psui-bg-blue-60'
-    },
-    negativeBg: {
-      type: String,
-      default: 'psui-bg-red-20'
-    }
+<script setup>
+import { defineProps, computed } from 'vue'
+
+const props = defineProps({
+  width: {
+    type: [String, Number],
+    default: 100,
   },
-  computed: {
-    getVolume(){
-      return (this.max - this.min)
-    },
-    getProgress() {
-      if(this.value == 9876543210) return 100
-      const progress = (100 / this.getVolume) * this.value
-      return progress > 100 ? 100 : progress
-    },
-    getProgressWidth() {
-      return `${this.getProgress}%`
-    },
-    getIsBreakEven() {
-      if ( this.forceBreakEven ) return true
-      return this.value >= this.breakEven ? true : false
-    },
-    getBreakEvenLeft() {
-      return `${(100 / this.getVolume) * this.breakEven}%`
-    },
-    getBg() {
-      if ( this.forceBreakEven ) return this.positiveBg
-      return this.getIsBreakEven ? this.positiveBg : this.negativeBg
-    }
-  }
-}
-</script>
+  min: {
+    type: Number,
+    default: 0,
+  },
+  max: {
+    type: Number,
+    default: 5,
+  },
+  breakEven: {
+    type: Number,
+    default: 1,
+  },
+  forceBreakEven: {
+    type: Boolean,
+    default: false,
+  },
+  value: {
+    type: [String, Number],
+    default: null,
+  },
+  positiveBg: {
+    type: String,
+    default: 'psui-bg-blue-60',
+  },
+  negativeBg: {
+    type: String,
+    default: 'psui-bg-red-20',
+  },
+})
+
+const getVolume = computed(() => {
+  return props.max - props.min
+})
+
+const getProgress = computed(() => {
+  if (props.value == 9876543210) return 100
+  const progress = (100 / getVolume.value) * props.value
+  return progress > 100 ? 100 : progress
+})
+
+const getProgressWidth = computed(() => {
+  return `${getProgress.value}%`
+})
 
-<style> /* Please, use the file src/assets/scss/components/PsProgressBar.scss */ </style>
+const getIsBreakEven = computed(() => {
+  if (props.forceBreakEven) return true
+  return props.value >= props.breakEven ? true : false
+})
+
+const getBreakEvenLeft = computed(() => {
+  return `${(100 / getVolume.value) * props.breakEven}%`
+})
+
+const getBg = computed(() => {
+  if (props.forceBreakEven) return props.positiveBg
+  return getIsBreakEven.value ? props.positiveBg : props.negativeBg
+})
+</script>
 
+<style>
+/* Please, use the file src/assets/scss/components/PsProgressBar.scss */
+</style>

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

@@ -1,31 +1,26 @@
 <template>
-  <div 
-    class="psui-el-tag-scope" 
+  <div
+    class="psui-el-tag-scope"
     :class="getComponentClass"
   >
     <span class="psui-el-tag-scope-icon">{{ getComponentIcon }}</span>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PsTagScope',
-  props: {
-    included: {
-      type: Boolean,
-      default: true
-    },
-  },
-  computed: {
-    getComponentClass() {
-      return `psui-el-tag-scope-${this.included}`
-    },
-    getComponentIcon() {
-      return this.included ? 'check' : 'remove'
-    }
-  },
-}
-</script>
+<script setup>
+import { defineProps, computed } from 'vue'
+
+const props = defineProps({})
 
-<style> /* Please, use the file src/assets/scss/components/PsTagScope.scss */ </style>
+const getComponentClass = computed(() => {
+  return `psui-el-tag-scope-${props.included}`
+})
+
+const getComponentIcon = computed(() => {
+  return props.included ? 'check' : 'remove'
+})
+</script>
 
+<style>
+/* Please, use the file src/assets/scss/components/PsTagScope.scss */
+</style>

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

@@ -19,32 +19,26 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { defineProps } from 'vue'
 import PsIcon from '../ui/PsIcon.vue'
 
-export default {
-    name: 'PsTestimonialCard',
-    components:{
-      PsIcon
-    },
-    props:{
-      description:{
-        type: String,
-        default: '',
-      },
-      user:{
-        type: String,
-        default: '',
-      },
-      position:{
-        type: String,
-        default: '',
-      },
-      jurisdiction:{
-        type: String,
-        default: '',
-      },
-    }
-}
+defineProps({
+  description: {
+    type: String,
+    default: '',
+  },
+  user: {
+    type: String,
+    default: '',
+  },
+  position: {
+    type: String,
+    default: '',
+  },
+  jurisdiction: {
+    type: String,
+    default: '',
+  },
+})
 </script>
-

package/src/components/buttons/PsButton.vue

@@ -1,13 +1,13 @@
 <template>
   <button
-    @click="onClick()" 
+    @click="onClick()"
     @mouseenter="onMouseEnter"
-    @mouseleave="onMouseLeave" 
-    class="psui-el-button" 
-    :class="[getComponentClass, {'hover': isHover}, {'disabled': disabled || loading }]" 
+    @mouseleave="onMouseLeave"
+    class="psui-el-button"
+    :class="[getComponentClass, { hover: isHover }, { disabled: disabled || loading }]"
   >
     <svg
-      v-if="loading" 
+      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"
@@ -37,74 +37,73 @@
   </button>
 </template>
 
-<script setup lang="ts">
-import { PropType, computed, ref } from 'vue'
+<script setup>
+import { computed, ref, defineEmits } from 'vue'
 
-  const isHover = ref(false)
+const isHover = ref(false)
 
-  const emit = defineEmits(['click'])
+const emit = defineEmits(['click'])
 
-  const props = defineProps({
-    label: {
-      type: String,
-      default: ''
-    },
-    layout:{
-      type: String as PropType<'solid' | 'outline' | 'ghost' | 'onlytext' | 'caution'>,
-      default: 'solid',
-      validator: (value:string) => ['solid','outline','ghost','onlytext','caution'].includes(value)
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    iconPosition: {
-      type: String,
-      default: 'left',
-      validator: (value:string) => ['left','right'].includes(value)
-    },
-    size: {
-        type: String,
-        default: 'big',
-        validator: (value:string) => ['small','medium','big'].includes(value)
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      loading: {
-        type: Boolean,
-        default: false
-      },
-      iconClass:{
-        type: String,
-        default: ''
-      } 
-  })
+const props = defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  layout: {
+    type: String,
+    default: 'solid',
+    validator: (value) => ['solid', 'outline', 'ghost', 'onlytext', 'caution'].includes(value),
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  iconPosition: {
+    type: String,
+    default: 'left',
+    validator: (value) => ['left', 'right'].includes(value),
+  },
+  size: {
+    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){
+const getComponentClass = computed(() => {
+  if (props.icon) {
     return `layout-${props.layout} size-${props.size} icon-${props.iconPosition}`
   } else {
-    return `layout-${props.layout} size-${props.size}` 
+    return `layout-${props.layout} size-${props.size}`
   }
- })   
+})
 
- const onClick = () => {
+const onClick = () => {
   if (props.disabled) return
-    emit('click')
- }
- const onMouseEnter = () => {
-  if(!props.disabled){
+  emit('click')
+}
+
+const onMouseEnter = () => {
+  if (!props.disabled) {
     isHover.value = true
   }
- }
+}
 
- const onMouseLeave = () => {
-    if(!props.disabled){
-      isHover.value = false
-    }
+const onMouseLeave = () => {
+  if (!props.disabled) {
+    isHover.value = false
   }
-
+}
 </script>
-