@policystudio/policy-studio-ui-vue 1.1.90-beta.3 → 1.1.90-beta.30

package/src/components/controls/PsCheckbox.vue

@@ -1,100 +1,100 @@
 <template>
-  <div
-    class="psui-el-checkbox"
-    :class="[getComponentClass, {'disabled':disabled}]"
+  <div
+    class="psui-el-checkbox"
+    :class="[getComponentClass, { disabled: disabled }]"
   >
-    <input 
-      :id="getInputId" 
-      type="checkbox" 
+    <input
+      :id="getInputId"
+      type="checkbox"
       :value="inputValue"
       v-model="model"
-      :disabled="disabled"      
+      :disabled="disabled"
     >
-    <label 
-      :for="getInputId" 
+    <label
+      :for="getInputId"
       class="psui-el-checkmark"
       :class="[labelClasses, 'psui-el-checkmark']"
     >
       <span>{{ label }}</span>
-    </label>    
+    </label>
   </div>
 </template>
 
-<script>
-//FIGMA CONTROLS & SELECTORS https://www.figma.com/file/Tto8hrNlSfuPcwd1pfqogF/%E2%9A%A1%EF%B8%8F-Design-System?node-id=1768%3A64852
-import { randomString } from '../../util/GeneralFunctions'
+<script setup>
+import { computed } from 'vue'
+import { randomString } from '../../util/GeneralFunctions.js'
 
-export default {
-  name: 'PsCheckbox',
-  props: {
-    /**
-     * It sets the label of the checkbox input.
-     */
-    label: {
-      type: String,
-      default: '',
-    },
-    /**
-     * It sets the label classes.
-     */
-    labelClasses: {
-      type: String,
-      default: ''
-    },
-    /**
-     * It sets the value which should be monitored.
-    */
-    inputValue: {
-      type: [String, Boolean],
-    },
-    value:{
-      type: [Array, Boolean]
-    },
-    /**
-     * It disables the checkbox input.
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * It set the of the checkbox input. eg: big and small.
-     */
-    size: {
-      type: String,
-      default: 'big',
-      validator: (value)=> ['big', 'small'].includes(value)
-    },
-    /**
-     * It set the layout of the checkbox input. eg: default and mixed.
-     */
-    layout:{
-      type: String,
-      default: 'default',
-      validator: (value)=> ['default','mixed'].includes(value)
-    }
+const props = defineProps({
+  /**
+   * It sets the label of the checkbox input.
+   */
+  label: {
+    type: String,
+    default: '',
   },
-  computed:{
-    getComponentClass(){
-      return `size-${this.size} layout-${this.layout}`
-    },
-    getInputId() {
-      if (this?.inputAttrs?.id) {
-        return this.inputAttrs.id
-      } else if (this?.$attrs?.id) {
-        return this.$attrs.id
-      } else {
-        return randomString(16)
-      }
-    },
-    model: {
-      get(){
-        return this.value
-      },
-      set(value){
-        this.$emit('input', value)
-      }
-    }  
+  /**
+   * It sets the label classes.
+   */
+  labelClasses: {
+    type: String,
+    default: '',
   },
-}
+  /**
+   * It sets the value which should be monitored.
+   */
+  inputValue: {
+    type: [String, Boolean],
+    default: '',
+  },
+  value: {
+    type: [Array, Boolean],
+    default: false,
+  },
+  /**
+   * It disables the checkbox input.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * It set the of the checkbox input. eg: big and small.
+   */
+  size: {
+    type: String,
+    default: 'big',
+    validator: (value) => ['big', 'small'].includes(value),
+  },
+  /**
+   * It set the layout of the checkbox input. eg: default and mixed.
+   */
+  layout: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['default', 'mixed'].includes(value),
+  },
+})
+
+const emit = defineEmits(['input'])
+
+const getInputId = computed(() => {
+  if (props.inputAttrs?.id) {
+    return props.inputAttrs.id
+  } else if (props.$attrs?.id) {
+    return props.$attrs.id
+  } else {
+    return randomString(16)
+  }
+})
+
+const getComponentClass = computed(() => `size-${props.size} layout-${props.layout}`)
+
+const model = computed({
+  get() {
+    return props.value
+  },
+  set(newValue) {
+    emit('input', newValue)
+  },
+})
 </script>

package/src/components/controls/PsCheckboxSimple.vue

@@ -1,45 +1,45 @@
 <template>
-  <div 
+  <div
     v-if="withPrevent"
-    class="psui-el-checkbox" 
-    :class="[getComponentClass, {'disabled':disabled}]"
+    class="psui-el-checkbox"
+    :class="[getComponentClass, { disabled: disabled }]"
     v-bind="getComponentAttrs"
-    @click.prevent="$emit('click', $event)"
+    @click.prevent="emit('click', $event)"
   >
-    <input 
-      type="checkbox" 
-      :checked="checked" 
+    <input
+      type="checkbox"
+      :checked="checked"
       :disabled="disabled"
       :name="label"
       :id="getInputId"
       v-bind="inputAttrs"
-      @change="$emit('change', $event)"
+      @change="emit('change', $event)"
     >
-    <label 
+    <label
       :for="getInputId"
       class="psui-el-checkmark"
     >
       <slot name="content">
         <span>{{ label }}</span>
       </slot>
-    </label>    
+    </label>
   </div>
-  <div 
+  <div
     v-else
-    class="psui-el-checkbox" 
-    :class="[getComponentClass, {'disabled':disabled}]"
+    class="psui-el-checkbox"
+    :class="[getComponentClass, { disabled: disabled }]"
     v-bind="getComponentAttrs"
   >
-    <input 
-      type="checkbox" 
-      :checked="checked" 
+    <input
+      type="checkbox"
+      :checked="checked"
       :disabled="disabled"
       :name="label"
       :id="getInputId"
       v-bind="inputAttrs"
-      @change="$emit('change', $event)"
+      @change="emit('change', $event)"
     >
-    <label 
+    <label
       :for="getInputId"
       class="psui-el-checkmark"
       :title="showLabelTitle ? label : ''"
@@ -47,89 +47,89 @@
       <slot name="content">
         <span>{{ label }}</span>
       </slot>
-    </label>    
+    </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
-import { randomString } from '../../util/GeneralFunctions'
+import { randomString } from '../../util/GeneralFunctions.js'
+import { computed, useAttrs } from 'vue'
 
-export default {
-  name: 'PsCheckboxSimple',
-  props: {
-    /**
-     * It sets the label of the checkbox input.
-     */
-    label: {
-      type: String,
-    },
-    /**
-     * It disables the checkbox input.
-     */
-    withPrevent: {
-      type: Boolean,
-      default: false,
-    },
+const emit = defineEmits(['change', 'click'])
 
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Sets the input as checked
-     */
-    checked: {
-      type: Boolean,
-      default: false
-    },
-    /** 
-     * Add html attributes to the element input
-    */
-    inputAttrs: {
-      type: Object,
-      default: () => ({})
-    },
-    /**
-     * It set the of the checkbox input. eg: big and small.
-     */
-    size: {
-      type: String,
-      default: 'big',
-      validator: (value)=> ['big', 'small'].includes(value)
-    },
-    /**
-     * It set the layout of the checkbox input. eg: default and mixed.
-     */
-    layout:{
-      type: String,
-      default: 'default',
-      validator: (value)=> ['default','mixed'].includes(value)
-    },
-    showLabelTitle: {
-      type: Boolean,
-      default: true
-    }
+const props = defineProps({
+  label: {
+    type: String,
+    default: '',
   },
-  inheritAttrs: false,
-  computed:{
-    getComponentClass(){
-      return `size-${this.size} layout-${this.layout}`
-    },
-    getInputId() {
-      if (this?.inputAttrs?.id) {
-        return this.inputAttrs.id
-      } else if (this?.$attrs?.id) {
-        return this.$attrs.id
-      } else {
-        return randomString(16)
-      }
-    },
-    getComponentAttrs() {
-      let componentAttrs = { ... this.$attrs }
-      delete componentAttrs.id
-      return componentAttrs
-    }
+  /**
+   * It disables the checkbox input.
+   */
+  withPrevent: {
+    type: Boolean,
+    default: false,
   },
-}
+  
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Sets the input as checked
+   */
+  checked: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Add html attributes to the element input
+   */
+  inputAttrs: {
+    type: Object,
+    default: () => ({}),
+  },
+  /**
+   * It set the of the checkbox input. eg: big and small.
+   */
+  size: {
+    type: String,
+    default: 'big',
+    validator: (value) => ['big', 'small'].includes(value),
+  },
+  /**
+   * It set the layout of the checkbox input. eg: default and mixed.
+   */
+  layout: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['default', 'mixed'].includes(value),
+  },
+  showLabelTitle: {
+    type: Boolean,
+    default: true,
+  },
+})
+const attrs = useAttrs()
+
+const getComponentClass = computed(() => {
+  return `size-${props.size} layout-${props.layout}`
+})
+
+
+const getInputId = computed(() => {
+  if (props?.inputAttrs?.id) {
+    return props.inputAttrs.id
+  } else if (attrs?.id) {
+    return attrs.id
+  } else {
+    return randomString(16)
+  }
+})
+
+const getComponentAttrs = computed(() => {
+  let componentAttrs = { ...attrs }
+  delete componentAttrs.id
+  return componentAttrs
+})
 </script>

package/src/components/controls/PsDraggable.vue

@@ -13,13 +13,13 @@
         class="w-full"
       >
         <template #trigger>
-          <div 
+          <div
             class="psui-el-draggable-wrapper-title"
-            :class="{'psui-opacity-50 psui-pointer-events-none':columnGroup.disabled}"
+            :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)"
+            @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>
@@ -28,16 +28,16 @@
                 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="$emit('column-group-helper', columnGroup.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>
             <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}"
+          <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"
@@ -45,31 +45,29 @@
               :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)"
+              @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"
-              >
+              <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}"
+                    :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 })"
+                    @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)"
+                    :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">
@@ -79,9 +77,7 @@
             </div>
           </div>
         </template>
-        <template
-          #content
-        >
+        <template #content>
           {{ columnGroup.disabledTitle }}
         </template>
       </PsTooltip>
@@ -89,40 +85,42 @@
   </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>