@policystudio/policy-studio-ui-vue 1.1.88 → 1.1.90-access.0

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 { 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

@@ -8,41 +8,36 @@
         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>
 
-<script>
+<script setup>
 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,113 +1,105 @@
 <template>
   <button
-      @click="onClick()" 
-      @mouseenter="onMouseEnter"
-      @mouseleave="onMouseLeave" 
-      class='psui-el-button' 
-      :class="[getComponentClass, {'hover': isHover}, {'disabled': disabled || loading }]" 
-   >
-    <svg v-if="loading" 
+    @click="onClick($event)"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+    class="psui-el-button"
+    :class="[getComponentClass, { hover: isHover && !disabled}, { disabled: disabled || loading }]"
+  >
+    <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">
-      <circle class="psui-opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-      <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>
+      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"
+      />
+      <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'>{{icon}}</i>
+    <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.
-     */
-    label: {
-      type: String,
-    },
-    /**
-     * It set the layout of the button. eg: solid, outline, ghost, onlytext and caution.
-     */
-    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,
-    },
-    /**
-     * It sets the position of the icon. eg: left or right.
-     */
-    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
-    }
+<script setup>
+import { computed, ref, } from 'vue'
+
+const isHover = ref(false)
+
+const emit = defineEmits(['click'])
+
+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,
   },
-  data(){
-    return {
-      isHover: false,
-    }
+  loading: {
+    type: Boolean,
+    default: false,
   },
-  computed: {
-    getComponentClass(){
-        if(this.icon){
-          return `layout-${this.layout} size-${this.size} icon-${this.iconPosition}`
-        } else {
-          return `layout-${this.layout} size-${this.size}` 
-        }
-    },
+  iconClass: {
+    type: String,
+    default: '',
   },
-  methods: {
-    onClick() {
-      if (this.disabled) return
-      this.$emit('click')
-    },
-    onMouseEnter(){
-      if(!this.disabled){
-        this.isHover = true
-      }
-    },
-    onMouseLeave(){
-      if(!this.disabled){
-        this.isHover = false
-      }
-    }
+})
+
+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 = (event) => {
+  if (props.disabled) return
+  emit('click', event)
 }
-</script>
 
+const onMouseEnter = () => {
+  isHover.value = true
+}
+
+const onMouseLeave = () => {
+    isHover.value = false
+}
+</script>

package/src/components/chips/PsChips.vue

@@ -1,7 +1,16 @@
 <template>
-  <div 
-    class="psui-el-chips" 
+  <div
+    class="psui-el-chips"
     :class="[getComponentClass, `layout-${layout}`, `type-${type}`]"
+    v-tooltip="{
+      content: disabledText,
+      trigger: 'hover',
+      placement: 'bottom',      
+      show: layout === 'disabled' && disabledText !== '' && isHovering
+    }"
+    @mouseover="isHovering = true"
+    @mouseleave="isHovering = false"
+    @click="emit('click')"
   >
     <input
       @change="onChange"
@@ -10,17 +19,20 @@
       :type="type"
       :id="getInputId"
       :checked="checked"
-    />
+    >
     <label
       :disabled="disabled"
       :for="getInputId"
-      :class="{'checked':checked && type === 'button'}"
+      :class="{'checked': checked && type === 'button', 'layout-disabled': layout === 'disabled'}"
     >
-      <i v-if="icon" class="psui-el-chips-icon psui-el-chips-icon-prepend">{{ icon }}</i>
+      <i
+        v-if="icon"
+        class="psui-el-chips-icon psui-el-chips-icon-prepend"
+      >{{ icon }}</i>
       {{ label }}
-      <button 
-        @click="onClose" 
-        v-if="layout === 'rich'" 
+      <button
+        @click="onClose"
+        v-if="layout === 'rich'"
         class="psui-el-chips-close"
       >
         <span class="psui-el-chips-icon">close</span>
@@ -29,105 +41,108 @@
   </div>
 </template>
 
-<script>
-export const type = ['radio', 'checkbox', 'button']
-import { randomString } from '../../util/GeneralFunctions'
+<script setup>
+import { computed, useAttrs, ref } from 'vue'
+
+import { randomString } from '../../util/GeneralFunctions.js'
+
+const emit = defineEmits(['click', 'change', 'update:checked', 'close'])
+
+const attrs = useAttrs()
 
-export default {
-  name: 'PsChips',
-  props: {
-    /**
-     * It sets the label of the chips button.
-     */
-    label: {
-      type: String,
-      default: '',
-    },
-    /**
-     * It sets the type of the chips button. eg: radio, checkbox, button.
-     */
-    type: {
-      type: String,
-      required: true,
-      default: 'button',
-      validator: (type) => ['radio', 'checkbox', 'button'].includes(type)
-    },
-    /**
-     * It sets the layout of the chipsbutton. eg: simple, with-icon, rich.
-     */
-    layout: {
-      type: String,
-      default: 'simple',
-      validator: (value) => ['simple', 'with-icon', 'rich'].includes(value)
-    },
-    /**
-    * It sets the text key which will retrieve a icon from Google Fonts. Make sure to get the right description of your icon on https://fonts.google.com/.
-    */
-    icon: {
-      type: String,
-      default: '',
-    },
-    /**
-     * It sets if the button was checked or not checked.
-     */
-    checked: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * It disables the chips button.
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * It sets if the button is active or not.
-     */
-    active: {
-      type: Boolean,
-      default: false
-    },
-    /** 
-     * Add html attributes to the element input
-    */
-    inputAttrs: {
-      type: Object,
-      default: () => ({})
-    },
+const props = defineProps({
+  /**
+   * It sets the label of the chips button.
+   */
+  label: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    required: true,
+    default: 'button',
+    validator: (type) => ['radio', 'checkbox', 'button'].includes(type),
+  },
+  /**
+   * It sets the layout of the chipsbutton. eg: simple, with-icon, rich.
+   */
+  layout: {
+    type: String,
+    default: 'simple',
+    validator: (value) => ['simple', 'with-icon', 'rich', 'disabled'].includes(value),
+  },
+  /**
+   * It sets the text key which will retrieve a icon from Google Fonts. Make sure to get the right description of your icon on https://fonts.google.com/.
+   */
+  icon: {
+    type: String,
+    default: '',
+  },
+  /**
+   * It sets if the button was checked or not checked.
+   */
+  checked: {
+    type: Boolean,
+    default: false,
   },
-  emits: ['click', 'change'],
-  computed: {
-    getComponentClass() {
-      if (this.disabled) {
-        return 'status-disabled'  
-      } else {
-        return 'status-resting'
-      }
-    },
-    getInputId() {
-      if (this?.inputAttrs?.id) {
-        return this.inputAttrs.id
-      } else if (this?.$attrs?.id) {
-        return this.$attrs.id
-      } else {
-        return randomString(16)
-      }
-    },
+  /**
+   * It disables the chips button.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    onClick() {
-      this.$emit('click')
-    },
-    onChange(event) {
-      this.$emit('update:checked', event.target.checked)
-      this.$emit('change', event)
-    },
-    onClose() {
-      this.$emit('close')
-    },
+  /**
+   * It sets if the button is active or not.
+   */
+  active: {
+    type: Boolean,
+    default: false,
   },
+  /**
+   * Add html attributes to the element input
+   */
+  inputAttrs: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabledText: {
+    type: String,
+    default: '',
+  }
+})
+
+const isHovering = ref(false)
+
+const getComponentClass = computed(() => {
+  if (props.disabled) {
+    return 'status-disabled'
+  } else {
+    return 'status-resting'
+  }
+})
+
+const getInputId = computed(() => {
+  if (props?.inputAttrs?.id) {
+    return props.inputAttrs.id
+  } else if (attrs?.id) {
+    return attrs.id
+  } else {
+    return randomString(16)
+  }
+})
+
+const onChange = (event) => {
+  emit('update:checked', event.target.checked)
+  emit('change', event)
+}
+
+const onClose = () => {
+  emit('close')
 }
 </script>
 
-<style> /* Please, use the file src/assets/scss/components/PsChips.scss */</style>
+<style>
+/* Please, use the file src/assets/scss/components/PsChips.scss */
+</style>