@policystudio/policy-studio-ui-vue 1.1.90-beta.12 → 1.1.90-beta.18

package/src/components/forms/PsDropdownList.vue

@@ -1,25 +1,25 @@
 <template>
-  <ul 
+  <ul
     class="psui-el-dropdown-menu-list"
     :class="`layout-${layout}`"
   >
-    <li 
-      v-for="(item, index) in getItems" 
+    <li
+      v-for="(item, index) in getItems"
       :key="`${index}-${getKeyValue(item)}`"
       :id="`${index}-${getKeyValue(item)}`"
-      :class="{ 'is-selected psui-bg-blue-10 psui-text-blue-60 hover:psui-bg-blue-10 hover:psui-text-blue-60' : getSelected === getKeyValue(item) }"
+      :class="{ 'is-selected psui-bg-blue-10 psui-text-blue-60 hover:psui-bg-blue-10 hover:psui-text-blue-60': getSelected === getKeyValue(item) }"
       class="psui-el-dropdown-menu-list-item"
-      @mouseover="isHovering = index" 
+      @mouseover="isHovering = index"
       @mouseout="isHovering = false"
       @click="selectItem(item)"
     >
       <div class="psui-el-dropdown-menu-list-item-left-label">
         {{ getLeftLabel(item) }}
-        
+
         <div
           v-if="item.description"
           class="psui-font-normal psui-text-gray-50 psui-ml-1"
-          :class="{ 'psui-text-blue-60' : item.key == getItems.key }"
+          :class="{ 'psui-text-blue-60': item.key == getItems.key }"
         >
           {{ item.description }}
         </div>
@@ -35,13 +35,13 @@
 
       <template v-if="layout == 'rich'">
         <div class="psui-el-dropdown-menu-list-item-line" />
-        <div 
+        <div
           v-if="rightLabelFormatter"
           class="psui-el-dropdown-menu-list-item-rigth-label"
         >
           {{ rightLabelFormatter(item.key, getStudyDataLevel[item.key], getStudyDataLevel) }}
         </div>
-        <div 
+        <div
           v-else
           class="psui-el-dropdown-menu-list-item-rigth-label"
         >
@@ -49,132 +49,135 @@
         </div>
       </template>
     </li>
-  </ul>  
+  </ul>
 </template>
 
-<script>
+<script setup>
 import PsIcon from '../ui/PsIcon.vue'
-export const itemStyle = ['onlytext', 'radio', 'icon', 'checkbox', 'switch', 'rich']
+import { defineProps, ref, computed, defineEmits } from 'vue'
 
-export default {
-  name: 'PsDropdownList',
-  components: { PsIcon },
-  props: {
-    /**
-     * It sets the style of items
-     */
-    layout: {
-      type: String,
-      default: 'onlytext',
-      validator: (value) => {
-        return itemStyle.indexOf(value) !== -1
-      }
-    },
-    /**
-    * 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 items which will be displayed on the dropdown menu.
-     */
-    items: {
-      type: [Array, Object],
-      required: true
-    },
-    /**
-    * It sets the left key label of your items if needed. 
-     */
-    leftLabel: {
-      type: [String, Function],
-      default: 'left_label'
-    },
-    /**
-    * It sets the right key label of your items if needed. 
-     */
-    rightLabel: {
-      type: [String, Function],
-      default: 'right_label'
-    },
-    /**
-    * It sets the key label of your items if needed. 
-     */
-    label: {
-      type: [String, Function],
-      default: 'label'
-    },
-    /**
-    * It sets the key value of your items if needed.
-     */
-    keyValue: {
-      type: [String, Function],
-      default: 'value'
-    },
-    /**
-    * It sets the format function to display values.
-    */
-    rightLabelFormatter: {
-      type: Function
+const props = defineProps({
+  /**
+   * It sets the style of items
+   */
+  layout: {
+    type: String,
+    default: 'onlytext',
+    validator: (value) => {
+      return ['onlytext', 'radio', 'icon', 'checkbox', 'switch', 'rich'].indexOf(value) !== -1
     },
-    /**
-    * It sets the format function to display values.
-    */
-    studyData: {
-      type: [String, Object]
-    },
-    /**
-    * It sets the item selected on the dropdown menu.
-     */
-    selected: {},
   },
-  data: () => ({
-    isHovering: false
-  }),
-  computed: {
-    getSelected() {
-      if (this.selected !== undefined) {
-        if (typeof this.selected === 'object' && this.selected[this.keyValue] ) {
-          return this.selected[this.keyValue]        
-        } else {
-          return this.selected
-        }
-      } else {
-        return false
-      }
-    },
-    getItems() {
-      return this.items
-    },
-    getStudyDataLevel() {
-      return this.studyData?.data || this.studyData
-    },
+  /**
+   * 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,
+    default: '',
   },
-  methods: {
-    selectItem(item) {
-      this.$emit('update:selected', this.getKeyValue(item) )
-      this.$emit('change', item )
-    },
-    getLeftLabel(item) {
-      if(typeof this.leftLabel == 'function') return this.leftLabel(item)
-      if(typeof item === 'string') return item
-      return item[this.leftLabel]
-    },
-    getRightLabel(item) {
-      if(typeof this.rightLabel == 'function') return this.rightLabel(item)
-      if(typeof item === 'string') return item
-      return item[this.rightLabel]
-    },
-    getLabel(item) {
-      if(typeof this.label == 'function') return this.label(item)
-      if(typeof item === 'string') return item
-      return item[this.label]
-    },
-    getKeyValue(item) {
-      if(typeof this.keyValue == 'function') return this.keyValue(item)
-      if(typeof item === 'string') return item
-      return item[this.keyValue]
-    },
+  /**
+   * It sets the items which will be displayed on the dropdown menu.
+   */
+  items: {
+    type: [Array, Object],
+    required: true,
+  },
+  /**
+   * It sets the left key label of your items if needed.
+   */
+  leftLabel: {
+    type: [String, Function],
+    default: 'left_label',
+  },
+  /**
+   * It sets the right key label of your items if needed.
+   */
+  rightLabel: {
+    type: [String, Function],
+    default: 'right_label',
+  },
+  /**
+   * It sets the key label of your items if needed.
+   */
+  label: {
+    type: [String, Function],
+    default: 'label',
+  },
+  /**
+   * It sets the key value of your items if needed.
+   */
+  keyValue: {
+    type: [String, Function],
+    default: 'value',
+  },
+  /**
+   * It sets the format function to display values.
+   */
+  rightLabelFormatter: {
+    type: Function,
+    default: () => '',
+  },
+  /**
+   * It sets the format function to display values.
+   */
+  studyData: {
+    type: [String, Object],
+    default: '',
+  },
+  /**
+   * It sets the item selected on the dropdown menu.
+   */
+  selected: {},
+})
+const emit = defineEmits(['update:selected', 'change'])
+
+const isHovering = ref(false)
+
+const getSelected = computed(() => {
+  if (props.selected !== undefined) {
+    if (typeof props.selected === 'object' && props.selected[props.keyValue]) {
+      return props.selected[props.keyValue]
+    } else {
+      return props.selected
+    }
+  } else {
+    return false
   }
+})
+
+const getItems = computed(() => {
+  return props.items
+})
+
+const getStudyDataLevel = computed(() => {
+  return props.studyData?.data || props.studyData
+})
+
+const selectItem = (item) => {
+  emit('update:selected', getKeyValue(item))
+  emit('change', item)
+}
+
+const getLeftLabel = (item) => {
+  if (typeof props.leftLabel == 'function') return props.leftLabel(item)
+  if (typeof item === 'string') return item
+  return item[props.leftLabel]
+}
+
+const getRightLabel = (item) => {
+  if (typeof props.rightLabel == 'function') return props.rightLabel(item)
+  if (typeof item === 'string') return item
+  return item[props.rightLabel]
+}
+
+// const getLabel = (item) => {
+//   if(typeof props.label == 'function') return props.label(item)
+//   if(typeof item === 'string') return item
+//   return item[props.label]
+// }
+
+const getKeyValue = (item) => {
+  if (typeof props.keyValue == 'function') return props.keyValue(item)
+  if (typeof item === 'string') return item
+  return item[props.keyValue]
 }
-</script>
+</script>

package/src/components/forms/PsInput.vue

@@ -1,22 +1,22 @@
 <template>
-  <div
-    class="psui-el-input"
-    :class="[getComponentClass, `layout-${layout}`]"
-  >
+  <div
+    class="psui-el-input"
+    :class="[getComponentClass, `layout-${layout}`]"
+  >
     <label v-if="label"> {{ label }} </label>
 
-    <div 
+    <div
       class="psui-el-input-wrapper"
-      @mouseenter="$emit('mouseenter',$event)" 
-      @mouseleave="$emit('mouseleave',$event)" 
+      @mouseenter="emit('mouseenter', $event)"
+      @mouseleave="emit('mouseleave', $event)"
     >
-      <div
-        v-if="$slots.prepend"
-        class="psui-el-input-prepend"
+      <div
+        v-if="$slots.prepend"
+        class="psui-el-input-prepend"
       >
         <slot name="prepend" />
       </div>
-      <PsRichTooltip 
+      <PsRichTooltip
         class="psui-w-full"
         css-class="psui-w-48"
         :ignore-dialog="!showTooltip"
@@ -33,11 +33,11 @@
             :max="maxValue"
             @focus="onInputFocus"
             @blur="onInputBlur"
-            @input="$emit('input', $event)"
-            @keydown="$emit('keydown', $event)"
-            @change="$emit('change', $event)"
+            @input="emit('input', $event)"
+            @keydown="emit('keydown', $event)"
+            @change="emit('change', $event)"
             v-bind="getAttrs"
-            :class="{ 'focus': isFocus }"
+            :class="{ focus: isFocus }"
           >
         </template>
         <template #content>
@@ -46,160 +46,162 @@
           </div>
         </template>
       </PsRichTooltip>
-      <div
-        v-if="$slots.append || hasError"
-        class="psui-el-input-append"
+      <div
+        v-if="$slots.append || hasError"
+        class="psui-el-input-append"
       >
-        <span
-          v-if="hasError"
-          class="material-icons psui-text-red-20 material-icons-sharp"
+        <span
+          v-if="hasError"
+          class="material-icons psui-text-red-20 material-icons-sharp"
         >error</span>
-        <slot
-          v-else
-          name="append"
+        <slot
+          v-else
+          name="append"
         />
       </div>
     </div>
 
-    <p
-      v-if="hint || (hasError && typeof hasError === 'string')"
-      class="psui-el-input-hint"
+    <p
+      v-if="hint || (hasError && typeof hasError === 'string')"
+      class="psui-el-input-hint"
     >
       {{ typeof hasError === 'string' ? hasError : hint }}
-    </p>
+    </p>
   </div>
 </template>
 
-<script>
+<script setup>
 import PsRichTooltip from '../tooltip/PsRichTooltip.vue'
+import { defineProps, ref, computed, useAttrs, defineEmits } from 'vue'
 
-export default {
-	name: 'PsInput',  
-  components: {
-    PsRichTooltip,
+const props = defineProps({
+  /**
+   * It set the title and also its tooltip default behavior
+   */
+  title: {
+    type: String,
+    default: '',
   },
-  props: {
-    /**
-     * It set the title and also its tooltip default behavior
-     */
-    title: {
-      type: String,
-      default: ''
-    },
-    /**
-    * It sets the type of your button. default: text.
-     */
-    type: {
-      type: String,
-      default: 'text'
-    },
-    /**
-     * It sets a placeholder for your button if needed.
-     */
-		placeholder: {
-			type: String
-		},
-    /**
-     * It sets the label of the input if needed.
-     */
-		label: {
-			type: String
-		},
-    /**
-     * It sets a text below the input. See Figma Text fileds & Forms.
-     */
-		hint: {
-			type: String
-		},
-    /**
-     * It sets the layout of your button. eg: mini and default. 
-     */    
-    layout: {
-      type: String,
-      default: 'default',
-      validator: (value) => ['default', 'mini'].includes(value)
-    },
-    /**
-     * It sets the value of the button.
-     */
-    value: {
-      required: true,
-    },
-    /**
-     * It disables the input. All mouse events are disabled.
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * It sets if the input found any error.
-     */
-    hasError: {
-      type: [String, Boolean],
-      default: false
-    },
-    /**
-     * It sets a active css class based on a boolean property.
-     */
-    active: {
-      type: Boolean,
-      default: false
-    },
-    minValue: {
-      type: null
-    },
-    maxValue: {
-      type: null
-    },
-    step:{
-      type: null
-    },
-    showTooltip: {
-      type: Boolean,
-      default: false,
-    },
-    tooltipText: {
-      type: String,
-      default: '',
-    },
-	},
-  data: () => ({
-    isFocus: false,
-  }),
-  computed: {
-    getAttrs() {
-      const defaultAttrs = {
-        autocapitalize: 'sentences',
-        autocomplete: 'chrome-off',
-        autocorrect: 'off',
-        spellcheck: 'spellcheck'
-      }
-      return { ...defaultAttrs, ...this.$attrs }
-    },
-    getComponentClass() {
-      if (this.disabled) {
-        return 'status-disabled'  
-      } else if (this.hasError) {
-        return 'status-error'
-      } else if (this.isFocus || this.isTyping || this.active ) {
-        return 'status-active'
-      } else {
-        return 'status-resting'
-      }
-    },
+  /**
+   * It sets the type of your button. default: text.
+   */
+  type: {
+    type: String,
+    default: 'text',
   },
-  methods: {
-    onInputFocus($event) {
-      this.isFocus = true
-      this.$emit('focus', $event)
-    },
-    onInputBlur($event) {
-      this.isFocus = false
-      this.$emit('blur', $event)
-    },
+  /**
+   * It sets a placeholder for your button if needed.
+   */
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  /**
+   * It sets the label of the input if needed.
+   */
+  label: {
+    type: String,
+    default: '',
+  },
+  /**
+   * It sets a text below the input. See Figma Text fileds & Forms.
+   */
+  hint: {
+    type: String,
+    default: '',
+  },
+  /**
+   * It sets the layout of your button. eg: mini and default.
+   */
+  layout: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['default', 'mini'].includes(value),
+  },
+  /**
+   * It sets the value of the button.
+   */
+  value: {
+    required: true,
+  },
+  /**
+   * It disables the input. All mouse events are disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * It sets if the input found any error.
+   */
+  hasError: {
+    type: [String, Boolean],
+    default: false,
+  },
+  /**
+   * It sets a active css class based on a boolean property.
+   */
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  minValue: {
+    type: null,
+  },
+  maxValue: {
+    type: null,
+  },
+  step: {
+    type: null,
+  },
+  showTooltip: {
+    type: Boolean,
+    default: false,
+  },
+  tooltipText: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits(['focus', 'blur', 'mouseenter', 'mouseleave', 'input', 'keydown', 'change'])
+
+const isFocus = ref(false)
+const attrs = useAttrs()
+
+const getAttrs = computed(() => {
+  const defaultAttrs = {
+    autocapitalize: 'sentences',
+    autocomplete: 'chrome-off',
+    autocorrect: 'off',
+    spellcheck: 'spellcheck',
   }
+  return { ...defaultAttrs, ...attrs }
+})
+
+const getComponentClass = computed(() => {
+  if (props.disabled) {
+    return 'status-disabled'
+  } else if (props.hasError) {
+    return 'status-error'
+  } else if (isFocus.value || props.active) {
+    return 'status-active'
+  } else {
+    return 'status-resting'
+  }
+})
+
+const onInputFocus = ($event) => {
+  isFocus.value = true
+  emit('focus', $event)
+}
+
+const onInputBlur = ($event) => {
+  isFocus.value = false
+  emit('blur', $event)
 }
 </script>
 
-<style> /* Please, use the file src/assets/scss/components/PsInput.scss */</style>
+<style>
+/* Please, use the file src/assets/scss/components/PsInput.scss */
+</style>