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

package/src/components/forms/PsInput.vue

@@ -1,22 +1,27 @@
 <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">
-        <slot name="prepend"></slot>
+      <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"
       >
-        <template v-slot:trigger>
+        <template #trigger>
           <input
             :title="title"
             :type="type"
@@ -28,162 +33,174 @@
             :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 v-slot:content>
+        <template #content>
           <div class="text-left">
             {{ tooltipText }}
           </div>
         </template>
       </PsRichTooltip>
-      <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">error</span>
-        <slot v-else name="append"></slot>
+      <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"
+        >error</span>
+        <slot
+          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>
-
-	</div>
+  </div>
 </template>
 
-<script>
+<script setup>
 import PsRichTooltip from '../tooltip/PsRichTooltip.vue'
+import { ref, computed, useAttrs } 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: '',
+  },
+  /**
+   * 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,
+    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,
   },
-  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'
-      }
-    },
+  minValue: {
+    type: null,
   },
-  methods: {
-    onInputFocus($event) {
-      this.isFocus = true
-      this.$emit('focus', $event)
-    },
-    onInputBlur($event) {
-      this.isFocus = false
-      this.$emit('blur', $event)
-    },
+  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>

package/src/components/forms/PsInputSelect.vue

@@ -1,111 +1,132 @@
 <template>
-  <div class="psui-el-input-select" :class="[getComponentClass, {'selected':selectedClass}, {'disabled':disabled}]">
-    <label :for='label' v-if="label" >{{ label }}</label>
+  <div
+    class="psui-el-input-select"
+    :class="[getComponentClass, { selected: selectedClass }, { disabled: disabled }]"
+  >
+    <label
+      :for="label"
+      v-if="label"
+    >{{ label }}</label>
     <div class="psui-el-input-select-wrapper">
-    <select 
-      :name="label"
-      :id="label"  
-      v-model="childValue"
-    >
-      <option value='' disabled>Select</option>
-      <option v-for="item in getItems" :value="item[keyValue]" :key="item[keyValue]">{{ item[keyLabel] }}</option>
-    </select>
+      <select
+        :name="label"
+        :id="label"
+        v-model="childValue"
+      >
+        <option
+          value=""
+          disabled
+        >
+          Select
+        </option>
+        <option
+          v-for="item in getItems"
+          :value="item[keyValue]"
+          :key="item[keyValue]"
+        >
+          {{ item[keyLabel] }}
+        </option>
+      </select>
     </div>
-    <p v-if="optionalLabel && !disabled && layout !== 'mini'" class="psui-el-input-helper">{{ optionalLabel }}</p>
+    <p
+      v-if="optionalLabel && !disabled && layout !== 'mini'"
+      class="psui-el-input-helper"
+    >
+      {{ optionalLabel }}
+    </p>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed } from 'vue'
 
-export default {
-  name: 'PsInputSelect',
-  props: {
-    /**
-     * It sets the items which will be rendered within the select input.
-     */
-    items: {
-      required: true
-    },
-    value: {
-      default: '',
-      required: true
-    },
-    /**
-     * It sets the value label of the select input if needed.
-     */
-    label: {
-      default: ''
-    },
-    /**
-     * It sets a o optional label below the select input.
-     */
-    optionalLabel:{
-      default:''
-    },
-    /**
-     * It sets the key label of your items if needed.
-     */
-    keyLabel: {
-      default: 'label'
-    },
-    /**
-     * It sets the key value of yout items if needed.
-     */
-    keyValue: {
-      default: 'value'
-    },
-    /**
-     * It disables the select input. All mouse events are disabled.
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * It sets the layout of the select input. eg: default and mini.
-     */
-    layout:{
-      type: String,
-      default: 'default',
-      validator: (value) => ['default','mini'].includes(value)
-    }
+const props = defineProps({
+  /**
+   * It sets the items which will be rendered within the select input.
+   */
+  items: {
+    required: true,
   },
-  data(){
-    return {
-      selectedClass: false,
-    }
+  value: {
+    default: '',
+    required: true,
   },
-  computed: {
-    getComponentClass(){
-      return `layout-${this.layout}`
-    },
-    childValue: {
-      get() {
-        return this.value
-      },
-      set(value) {
-        if(this.isString) return this.$emit('input', value)
-        const finded = find(this.items, { [this.keyValue]: value })
-        this.$emit('input', value)
-        this.$emit('change', finded)
-        this.selectedClass = true
-      }
-    },
-    isString() {
-      return  this.items.length > 0 && typeof this.items[0] === 'string'
-    },
-    getItems() {
-      if (this.items.length > 0 && typeof this.items[0] === 'string') {
-        return this.items.map((item) => { 
-          return {
-            [this.keyLabel]: item,
-            [this.keyValue]: item,
-          }
-        })
-      } else {
-        return this.items
-      }
-    },
+  /**
+   * It sets the value label of the select input if needed.
+   */
+  label: {
+    default: '',
+  },
+  /**
+   * It sets a o optional label below the select input.
+   */
+  optionalLabel: {
+    default: '',
+  },
+  /**
+   * It sets the key label of your items if needed.
+   */
+  keyLabel: {
+    default: 'label',
+  },
+  /**
+   * It sets the key value of yout items if needed.
+   */
+  keyValue: {
+    default: 'value',
+  },
+  /**
+   * It disables the select input. All mouse events are disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * It sets the layout of the select input. eg: default and mini.
+   */
+  layout: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['default', 'mini'].includes(value),
   },
-}
+})
+
+const emit = defineEmits('input', 'change')
+
+const selectedClass = ref(false)
+
+const getComponentClass = computed(() => {
+  return `layout-${props.layout}`
+})
+
+const childValue = computed({
+  get() {
+    return props.value
+  },
+  set(value) {
+    if (isString.value) return emit('input', value)
+    const finded = find(props.items, { [props.keyValue]: value })
+    emit('input', value)
+    emit('change', finded)
+    selectedClass.value = true
+  },
+})
+
+const isString = computed(() => {
+  return props.items.length > 0 && typeof props.items[0] === 'string'
+})
+
+const getItems = computed(() => {
+  if (props.items.length > 0 && typeof props.items[0] === 'string') {
+    return props.items.map((item) => {
+      return {
+        [props.keyLabel]: item,
+        [props.keyValue]: item,
+      }
+    })
+  } else {
+    return props.items
+  }
+})
 </script>