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

package/src/components/controls/PsDraggable.vue

@@ -1,125 +1,126 @@
 <template>
   <div class="psui-el-draggable">
-    <div class="psui-el-draggable-wrapper"
+    <div
+      class="psui-el-draggable-wrapper"
       v-for="(columnGroup, indexColumnGroup) in getColumns.columnGroups"
       :key="indexColumnGroup"
       :ref="indexColumnGroup"
       :id="`edit-group-${indexColumnGroup}`"
     >
-    <PsTooltip
-      position="top"
-      :ignoreDialog="!columnGroup.disabled"
-      class="w-full"
-    >
-      <template v-slot:trigger>
-      <div 
-        class="psui-el-draggable-wrapper-title"
-        :class="{'psui-opacity-50 psui-pointer-events-none':columnGroup.disabled}"
-        draggable="true"
-        @dragstart="$emit('drag-start-group', indexColumnGroup)"
-        @dragend="$emit('drag-end-group', indexColumnGroup)"
-        @dragover="$emit('drag-over-group', indexColumnGroup)"
-      >
-        <span class="flex psui-items-center">
-          <p>{{ columnGroup.title }}</p>
-          <PsIcon
-            class="psui-el-draggable-wrapper-title-icon"
-            v-if="columnGroup.hasHelper && columnGroup.hasHelper.showOnEditHideColumns"
-            icon="info"
-            size="16"
-            :icon-classes="columnGroup.disabled ? 'psui-ml-2 psui-text-gray-50':'psui-ml-2 psui-text-blue-50 psui-cursor-pointer'"
-            @click.native="$emit('column-group-helper', columnGroup.hasHelper)"
-          />
-        </span>
-        <i class="material-icons-round">drag_indicator</i>
-      </div>
-
-      <div 
-        class="psui-el-draggable-wrapper-list" 
-        :class="{'psui-opacity-50 psui-pointer-events-none':columnGroup.disabled}"
+      <PsTooltip
+        position="top"
+        :ignore-dialog="!columnGroup.disabled"
+        class="w-full"
       >
-        <div
-          v-for="(column, indexColumn) in columnGroup.columns"
-          :key="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
-          :id="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
-          class="psui-el-draggable-item"
-          draggable="true"
-          @dragstart="$emit('drag-start-item', { indexColumnGroup, indexColumn }, $event)"
-          @dragover="$emit('drag-over-item', { indexColumnGroup, indexColumn }, $event)"
-          @dragend="$emit('drag-end-item', $event)"
-          v-tooltip="column.tooltip || undefined"
-        >
+        <template #trigger>
           <div
-            class="psui-w-full psui-flex psui-items-center"
+            class="psui-el-draggable-wrapper-title"
+            :class="{ 'psui-opacity-50 psui-pointer-events-none': columnGroup.disabled }"
+            draggable="true"
+            @dragstart="emit('drag-start-group', indexColumnGroup)"
+            @dragend="emit('drag-end-group', indexColumnGroup)"
+            @dragover="emit('drag-over-group', indexColumnGroup)"
           >
-            <span class="psui-el-draggable-item-title psui-flex psui-flex-row psui-items-center">
-              <PsCheckboxSimple
-                size="small"
-                :label="column.title"
-                :class="{'active' : column.isActive}"
-                :checked="column.isActive"
-                :disabled="column.isDisabled"
-                class="psui-el-draggable-item-checkbox"
-                @change="$emit('on-select-item', { studyKey: getColumns.key, indexColumnGroup, indexColumn, columnGroupKey: columnGroup.key })"
-              />
+            <span class="flex psui-items-center">
+              <p>{{ columnGroup.title }}</p>
               <PsIcon
-                class="psui-el-draggable-item-title-icon"
-                v-if="column.hasHelper && column.hasHelper.showOnEditHideColumns"
+                class="psui-el-draggable-wrapper-title-icon"
+                v-if="columnGroup.hasHelper && columnGroup.hasHelper.showOnEditHideColumns"
                 icon="info"
                 size="16"
-                :icon-classes="columnGroup.disabled ? 'psui-ml-2 psui-text-gray-50':'psui-ml-2 psui-text-blue-50 psui-cursor-pointer'"
-                @click.native="$emit('column-helper', column.hasHelper)"
+                :icon-classes="columnGroup.disabled ? 'psui-ml-2 psui-text-gray-50' : 'psui-ml-2 psui-text-blue-50 psui-cursor-pointer'"
+                @click="emit('column-group-helper', columnGroup.hasHelper)"
               />
             </span>
-            <span class="psui-el-draggable-item-append">
-              <i class="psui-icon">drag_indicator</i>
-            </span>
+            <i class="material-icons-round">drag_indicator</i>
           </div>
-        </div>
-      </div>
-      </template>
-      <template v-slot:content class="!psui-opacity-0">
-        {{columnGroup.disabledTitle}}
-      </template>
+
+          <div
+            class="psui-el-draggable-wrapper-list"
+            :class="{ 'psui-opacity-50 psui-pointer-events-none': columnGroup.disabled }"
+          >
+            <div
+              v-for="(column, indexColumn) in columnGroup.columns"
+              :key="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
+              :id="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
+              class="psui-el-draggable-item"
+              draggable="true"
+              @dragstart="emit('drag-start-item', { indexColumnGroup, indexColumn }, $event)"
+              @dragover="emit('drag-over-item', { indexColumnGroup, indexColumn }, $event)"
+              @dragend="emit('drag-end-item', $event)"
+              v-tooltip="column.tooltip || undefined"
+            >
+              <div class="psui-w-full psui-flex psui-items-center">
+                <span class="psui-el-draggable-item-title psui-flex psui-flex-row psui-items-center">
+                  <PsCheckboxSimple
+                    size="small"
+                    :label="column.title"
+                    :class="{ active: column.isActive }"
+                    :checked="column.isActive"
+                    :disabled="column.isDisabled"
+                    class="psui-el-draggable-item-checkbox"
+                    @change="emit('on-select-item', { studyKey: getColumns.key, indexColumnGroup, indexColumn, columnGroupKey: columnGroup.key })"
+                  />
+                  <PsIcon
+                    class="psui-el-draggable-item-title-icon"
+                    v-if="column.hasHelper && column.hasHelper.showOnEditHideColumns"
+                    icon="info"
+                    size="16"
+                    :icon-classes="columnGroup.disabled ? 'psui-ml-2 psui-text-gray-50' : 'psui-ml-2 psui-text-blue-50 psui-cursor-pointer'"
+                    @click="emit('column-helper', column.hasHelper)"
+                  />
+                </span>
+                <span class="psui-el-draggable-item-append">
+                  <i class="psui-icon">drag_indicator</i>
+                </span>
+              </div>
+            </div>
+          </div>
+        </template>
+        <template #content>
+          {{ columnGroup.disabledTitle }}
+        </template>
       </PsTooltip>
     </div>
   </div>
 </template>
 
-<script>
+<script setup>
 
-export default {
-  name: 'PsDraggable',
-  props: {
-    /**
-     * It sets the data that will be used.
-     */
-    getColumns: {
-      type: Object,
-    },
-    /**
-     * It sets the module which will be used to set getters and actions.
-     */
-    module:{
-      type: String
-    },
+const emit = defineEmits([
+  'drag-start-group',
+  'drag-end-group',
+  'drag-over-group',
+  'drag-start-item',
+  'drag-over-item',
+  'drag-end-item',
+  'column-helper',
+  'on-select-item',
+  'column-group-helper',
+])
 
-    /**
-     * It disables the input. All mouse events are disabled.
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
+defineProps({
+  /**
+   * It sets the data that will be used.
+   */
+  getColumns: {
+    type: Object,
+    default: () => ({})
   },
-  computed: {
-    getStatus() {
-      if (this.column.key == 'compliance_margin') {
-        return true 
-      } else {
-        return false
-      }
-    },
+  /**
+   * It sets the module which will be used to set getters and actions.
+   */
+  module: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * It disables the input. All mouse events are disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-}
+})
 </script>

package/src/components/controls/PsInlineSelector.vue

@@ -1,44 +1,43 @@
 <template>
-  <div 
+  <div
     class="psui-el-inline-selector"
-    @keydown.up="$emit('keydown-up', $event)"
-    @keydown.down="$emit('keydown-down', $event)"
-    @keydown.enter="$emit('keydown-enter', $event)"
-    @keydown.tab="$emit('keydown-tab',$event)"
-    @keydown.esc="$emit('keydown-esc',$event)"
-    @mouseleave="$emit('mouse-leave',$event)"
+    @keydown.up="emit('keydown-up', $event)"
+    @keydown.down="emit('keydown-down', $event)"
+    @keydown.enter="emit('keydown-enter', $event)"
+    @keydown.tab="emit('keydown-tab', $event)"
+    @keydown.esc="emit('keydown-esc', $event)"
+    @mouseleave="emit('mouse-leave', $event)"
   >
-
-    <div class='psui-el-inline-selector-input-wrapper'>
+    <div class="psui-el-inline-selector-input-wrapper">
       <span> {{ search ? search : placeholder }} </span>
       <input
         ref="input"
         :label="label"
         :placeholder="placeholder"
-        @input="$emit('input', $event)"
-        @focus="$emit('focus', $event)"
-        @blur="$emit('blur', $event)"
+        @input="emit('input', $event)"
+        @focus="emit('focus', $event)"
+        @blur="emit('blur', $event)"
         autocomplete="chrome-off"
         autocorrect="off"
         autocapitalize="off"
         spellcheck="false"
-      />
+      >
     </div>
     <transition
-        enter-active-class="transition ease-out duration-100 transform"
-        enter-class="opacity-0 scale-95"
-        enter-to-class="opacity-100 scale-100"
-        leave-active-class="transition ease-in duration-100 transform"
-        leave-class="opacity-100 scale-100"
-        leave-to-class="opacity-0 scale-95"
-      >
-      <div 
+      enter-active-class="transition ease-out duration-100 transform"
+      enter-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-100 transform"
+      leave-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <div
         v-if="search"
-        role="menu" 
+        role="menu"
         aria-orientation="vertical"
         class="psui-el-inline-selector-dropdown-wrapper"
       >
-      <slot name='loader'></slot>
+        <slot name="loader" />
         <div class="psui-el-inline-selector-dropdown">
           <div v-if="requestFetched && !jurisdictions.length">
             <h3>Hmmmm</h3>
@@ -50,12 +49,12 @@
               v-for="(jurisdiction, index) in jurisdictions"
               :key="`dropdown-jurisdiction-${jurisdiction.id}`"
               :id="`jurisdiction-list-item-${index}`"
-              @click="$emit('click', $event)"
-              @mouseover="('mouse-over', $event)"
+              @click="emit('click', $event)"
+              @mouseover="'mouse-over', $event"
             >
-              <span >
-                <h3>{{jurisdiction.title}}</h3>
-                <h3 >{{jurisdiction.type}}</h3>
+              <span>
+                <h3>{{ jurisdiction.title }}</h3>
+                <h3>{{ jurisdiction.type }}</h3>
               </span>
             </li>
           </ul>
@@ -65,89 +64,88 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PsInlineSelector',
-  props: {
-    /**
-     * It sets the default width of the inline selector.
-     */
-    width: {
-      default: 244
-    },
-    /**
-     * It sets if it should receive focus or not when componented is mounted.
-     */
-    focusOnMount: {
-      default: false
-    },
-    /**
-     * It sets if the component should be scrollable.
-     */
-    shouldScroll: {
-      default: false
-    },
-    /**
-     * It sets the label of the component.
-     */
-    label: {
-      type: String,
-      default: 'Type a City or County'
-    },
-    selectOnlyFirstClimateZone: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * It sets the jurisdiction selected.
-     */
-    jurisdictionSelected: {
-      type: [ Object, Boolean ]
-    },
-    /**
-     * It gets and set the data that was written.
-     */
-    search: {
-      type: String,
-      default: '',
-      required: true
-    },
-    /**
-     * It provides all the jurisdictions. 
-     */
-    jurisdictions: {
-      type: Array,
-      default: () => [],
-      required: true
-    },
-    /**
-     * It is a helper for checking if fetching data was successful.
-     */
-    requestFetched: {
-      type: Boolean,
-    },
-    showDropDown:{
-      type: Boolean,
-      default: true,
-    },
-    currentSelected:{
-      type: Number,
-      default: 0,
-    },
-    /**
-     * It sets if the component is focused or not.
-     */
-    isFocused:{
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * It sets the placeholder of the component.
-     */
-    placeholder:{
-      type: String,
-    }
-  }
-}
-</script>
+<script setup>
+
+const emit = defineEmits(['keydown-up', 'keydown-down', 'keydown-enter', 'keydown-tab', 'keydown-esc', 'mouse-leave', 'input', 'focus', 'blur', 'click'])
 
+defineProps({
+  /**
+   * It sets the default width of the inline selector.
+   */
+  width: {
+    default: 244,
+  },
+  /**
+   * It sets if it should receive focus or not when componented is mounted.
+   */
+  focusOnMount: {
+    default: false,
+  },
+  /**
+   * It sets if the component should be scrollable.
+   */
+  shouldScroll: {
+    default: false,
+  },
+  /**
+   * It sets the label of the component.
+   */
+  label: {
+    type: String,
+    default: 'Type a City or County',
+  },
+  selectOnlyFirstClimateZone: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * It sets the jurisdiction selected.
+   */
+  jurisdictionSelected: {
+    type: [Object, Boolean],
+  },
+  /**
+   * It gets and set the data that was written.
+   */
+  search: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  /**
+   * It provides all the jurisdictions.
+   */
+  jurisdictions: {
+    type: Array,
+    default: () => [],
+    required: true,
+  },
+  /**
+   * It is a helper for checking if fetching data was successful.
+   */
+  requestFetched: {
+    type: Boolean,
+  },
+  showDropDown: {
+    type: Boolean,
+    default: true,
+  },
+  currentSelected: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * It sets if the component is focused or not.
+   */
+  isFocused: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * It sets the placeholder of the component.
+   */
+  placeholder: {
+    type: String,
+  },
+})
+</script>

package/src/components/controls/PsRadioButton.vue

@@ -1,71 +1,83 @@
 <template>
-  <div class='psui-el-radio' :class="[getComponentClass, {'disabled':disabled}]" >
+  <div
+    class="psui-el-radio"
+    :class="[getComponentClass, { disabled: disabled }]"
+  >
     <input
       :id="inputId"
       type="radio"
+      :name="inputId"
       :value="inputValue"
       v-model="model"
-      :disabled='disabled'      
-    />
-    <label :for="inputId" class="psui-el-checkmark"><span>{{ label }}</span></label>    
+      :disabled="disabled"
+      :checked="isChecked"
+    >
+    <label
+      :for="inputId"
+      class="psui-el-checkmark"
+    ><span>{{ label }}</span></label>
   </div>
- 
 </template>
- 
-<script>
+
+<script setup>
 //FIGMA CONTROLS & SELECTORS https://www.figma.com/file/Tto8hrNlSfuPcwd1pfqogF/%E2%9A%A1%EF%B8%8F-Design-System?node-id=1768%3A64852
- 
-export default {
-  name: 'PsRadioButton',
-  props: {
-    inputId: {
-      type: String,
-      default: ''
-    },
-    /**
-    * It sets the label of the radio button.
-     */
-    label: {
-      type: String,
-      default: '',
-    },
-    /**
-    * It's the value of the checkbox
-     */
-    inputValue:{
-      type: [String, Object],
-    },
-    value:{
-      type: [String, Object]
-    },
-    /**
-    * It disables the radio button. All mouse events are disabled.
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-    * It sets the size of the radio button. eg: big and small.
-     */
-    size: {
-      type: String,
-      default: 'big',
-      validator: (value) => ['big', 'small'].includes(value)
-    },
+import { computed } from 'vue'
+
+const props = defineProps({
+  inputId: {
+    type: String,
+    default: '',
   },
-  computed: {
-    getComponentClass(){
-      return `size-${this.size}`
-    },
-    model: {
-    get(){
-      return this.value
-    },
-    set(value){
-      this.$emit('input', value)
-    }
-  }  
+  /**
+   * It sets the label of the radio button.
+   */
+  label: {
+    type: String,
+    default: '',
   },
-}
-</script>
+  /**
+   * It's the value of the checkbox
+   */
+  inputValue: {
+    type: [String, Object],
+    default: '',
+  },
+  value: {
+    type: [String, Object],
+    default: '',
+  },
+  /**
+   * It disables the radio button. All mouse events are disabled.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * It sets the size of the radio button. eg: big and small.
+   */
+  size: {
+    type: String,
+    default: 'big',
+    validator: (value) => ['big', 'small'].includes(value),
+  },
+})
+
+const emit = defineEmits(['input'])
+const getComponentClass = computed(() => {
+  return `size-${props.size}`
+})
+
+const model = computed({
+  get: () => {
+    return props.value
+  },
+  set: (value) => {
+    emit('input', value)
+  },
+})
+
+const isChecked = computed(() => {
+  return props.inputValue === props.value
+})
+</script>