@policystudio/policy-studio-ui-vue 1.1.89 → 1.1.90-access.1

package/src/components/controls/PsSwitch.vue

@@ -1,63 +1,73 @@
 <template>
-  <div class='psui-el-switch' :class="[getComponentClass, {'disabled':disabled}]" @click="change()">
-      <input type="checkbox" :checked="value" />
-      <label class='psui-el-switch-button' :class="[getToggleClass]" />
+  <div
+    class="psui-el-switch"
+    :class="[getComponentClass, { disabled: disabled }]"
+    @click="change()"
+    tabindex="0"
+  >
+    <input
+      type="checkbox"
+      :checked="value"
+    >
+    <label
+      class="psui-el-switch-button"
+      :class="[getToggleClass]"
+    />
   </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 { computed } from 'vue'
 
-export default {
-  name: 'PsSwitch',
-  props: {
-    /**
-    * It sets the label of the switch button.
-     */
-    label:{
-      type: String,
-    },
-    /**
-    * It sets the value of the switch button. 
-     */
-    value:{
-      type: Boolean,
-    },
-    backgroundColor: {
-      type: String,
-      default:'psui-bg-green-20'
-    },
-    /**
-     * It sets disabling mode.
-     */
-    disabled:{
-      type: Boolean,
-      default: false
-    },
-    /**
-    * It sets the size of the switch button. eg: small and big.
-     */
-    size:{
-      type: String,
-      default: 'big',
-      validator: (value)=> ['small', 'big'].includes(value)
-    }
+const emit = defineEmits('change', 'update:value')
+
+const props = defineProps({
+  /**
+   * It sets the label of the switch button.
+   */
+  label: {
+    type: String,
+    default: '',
   },
-  computed:{
-    getToggleClass(){
-      if(this.disabled) return 'toggle-false'
-      return this.value ? `toggle-true ${this.backgroundColor}` : 'toggle-false psui-bg-gray-40'
-    },
-    getComponentClass(){
-      return `size-${this.size}`
-    }
+  /**
+   * It sets the value of the switch button.
+   */
+  value: {
+    type: Boolean,
   },
-  methods: {
-    change() {
-      this.$emit('update:value', !this.value)
-      this.$emit('change', !this.value)
-    }
-  }
-} 
-</script>
+  backgroundColor: {
+    type: String,
+    default: 'psui-bg-green-20',
+  },
+  /**
+   * It sets disabling mode.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * It sets the size of the switch button. eg: small and big.
+   */
+  size: {
+    type: String,
+    default: 'big',
+    validator: (value) => ['small', 'big'].includes(value),
+  },
+})
+
+const getToggleClass = computed(() => {
+  if (props.disabled) return 'toggle-false'
+  return props.value ? `toggle-true ${props.backgroundColor}` : 'toggle-false psui-bg-gray-40'
+})
 
+const getComponentClass = computed(() => {
+  return `size-${props.size}`
+})
+
+const change = () => {
+  emit('update:value', !props.value)
+  emit('change', !props.value)
+}
+</script>

package/src/components/controls/PsToggle.vue

@@ -1,66 +1,71 @@
 <template>
-    <div class="psui-el-toggle" role="group">
-      <button 
-        type="button"
-        v-for="(item, index) in items"
-        :key="getKeyValue(item) + index"
-        @click="selectOption(item)"
-        :class="{ 'status-active': selected == item }"
-      >
-        {{ getKeyLabel(item) }}
-      </button>
-    </div>
+  <div
+    class="psui-el-toggle"
+    role="group"
+  >
+    <button
+      type="button"
+      v-for="(item, index) in items"
+      :key="getKeyValue(item) + index"
+      @click="selectOption(item)"
+      :class="{ 'status-active': selected == item }"
+    >
+      {{ getKeyLabel(item) }}
+    </button>
+  </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: 'PsToggle',
-  props: {
-    /**
-    * It sets the items which will be used to create the toggle tab. See Figma - Controls & Selector for more information.
-     */
-    items: {
-      type: Array,
-      required: true
-    },
-    /**
-    * It sets the value selected.
-     */
-    selected: {},
-    /**
-    * It sets the key label of your items if needed.
-     */
-    keyLabel: {
-      type: [String, Function],
-      default: 'label'
-    },
-    /**
-    * It sets the key value of your items if needed.
-     */
-    keyValue: {
-      type: [String, Function],
-      default: 'value'
-    }
+const emit = defineEmits(['change', 'update:selected'])
+
+const props = defineProps({
+  /**
+   * It sets the items which will be used to create the toggle tab. See Figma - Controls & Selector for more information.
+   */
+  items: {
+    type: Array,
+    required: true,
+  },
+  /**
+   * It sets the value selected.
+   */
+  selected: {},
+  /**
+   * It sets the key label of your items if needed.
+   */
+  keyLabel: {
+    type: [String, Function],
+    default: 'label',
   },
-  methods: {
-    selectOption(item) {
-      this.$emit('update:selected', item)
-      this.$emit('change', item)
-    },
-    getKeyLabel(item) {
-      if(typeof this.keyLabel == 'function') return this.keyLabel(item)
-      if(typeof item === 'object') return item[this.keyLabel]
-      return item
-    },
-    getKeyValue(item) {
-      if(typeof this.keyValue == 'function') return this.keyValue(item)
-      if(typeof item === 'object') return item[this.keyLabel]
-      return item
-    },
-  }
+  /**
+   * It sets the key value of your items if needed.
+   */
+  keyValue: {
+    type: [String, Function],
+    default: 'value',
+  },
+})
+
+const selectOption = (item) => {
+  emit('update:selected', item)
+  emit('change', item)
+}
+
+const getKeyLabel = (item) => {
+  if (typeof props.keyLabel == 'function') return props.keyLabel(item)
+  if (typeof item === 'object') return item[props.keyLabel]
+  return item
+}
+
+const getKeyValue = (item) => {
+  if (typeof props.keyValue == 'function') return props.keyValue(item)
+  if (typeof item === 'object') return item[props.keyLabel]
+  return item
 }
 </script>
 
-<style> /* Please, use the file src/assets/scss/components/PsToggle.scss */</style>
+<style>
+/* Please, use the file src/assets/scss/components/PsToggle.scss */
+</style>

package/src/components/data-graphics/PsBarChart.vue

@@ -1,34 +1,33 @@
 <template>
   <div class="psui-el-bar-chart">
-    <p 
+    <p
       v-if="showNumber"
       class="psui-el-bar-chart-total"
-    >{{ total }}</p>
+    >
+      {{ total }}
+    </p>
 
-    <div 
+    <div
       class="psui-el-bar-chart-bar"
-      :style="{width: `${fillWidth}%`}"
-    ></div>
+      :style="{ width: `${fillWidth}%` }"
+    />
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PsBarChart',
-  props: {
-    showNumber: {
-      type: Boolean,
-      default: true
-    },
-    total: {
-      type: [String, Number],
-      default: '5,0',
-    },
-    fillWidth: {
-      type: Number,
-      default: 50
-    },
+<script setup>
+
+defineProps({
+  showNumber: {
+    type: Boolean,
+    default: true,
+  },
+  total: {
+    type: [String, Number],
+    default: '5,0',
+  },
+  fillWidth: {
+    type: Number,
+    default: 50,
   },
-  computed: {}
-}
+})
 </script>

package/src/components/datatable/PsDataTable.vue

@@ -1,5 +1,8 @@
 <template>
-  <table :class='cssAlign' class="psui-el-table psui-table">
+  <table
+    :class="cssAlign"
+    class="psui-el-table psui-table"
+  >
     <thead v-if="header">
       <th
         v-for="head in header"
@@ -9,18 +12,24 @@
       </th>
     </thead>
     <tbody v-if="type === 'simple'">
-      <tr v-for="(dt, index) in data" :key="index">
-        <td v-for="(head, cellRow) in header" :key="cellRow">
+      <tr
+        v-for="(dt, index) in data"
+        :key="index"
+      >
+        <td
+          v-for="(head, cellRow) in header"
+          :key="cellRow"
+        >
           {{ data[index][head] }}
         </td>
       </tr>
     </tbody>
-    <slot v-else></slot>
+    <slot v-else />
     <tfoot v-if="footer">
       <th
         v-for="ft in footer"
         :key="ft"
-        class='psui-bg-gray-10 psui-text-gray-80 psui-font-normal'
+        class="psui-bg-gray-10 psui-text-gray-80 psui-font-normal"
       >
         {{ ft }}
       </th>
@@ -28,70 +37,66 @@
   </table>
 </template>
 
-<script>
-export const type = ['simple', 'rich']
-export const alignment = ['center', 'right', 'left']
+<script setup>
+import { computed } from 'vue'
 
-export default {
-  name: 'PsDataTable',
-  props: {
-    /**
-     * It sets the type of the data table. eg: simple or rich.
-     */
-    type: {
-      type: String,
-      required: true,
-      validator: (value) => {
-        return ['simple', 'rich'].indexOf(value) !== -1
-      },
-    },
-    /**
-    * It sets the values which will be use to render the header.
-     */
-    header: {
-      type: Array,
-      required: true,
-    },
-    /**
-    * It sets the values which will be use to render the body.
-     */
-    data: {
-      type: Array,
-      default() {
-        return []
-      }
+const props = defineProps({
+  type: {
+    type: String,
+    required: true,
+    validator: (value) => {
+      return ['simple', 'rich'].indexOf(value) !== -1
     },
-    /**
-    * It sets the values which will be use to render the footer.
-     */
-    footer: {
-      type: Array,
-    },
-    /**
-    * It sets the alignment of the whole context.
-     */
-    align: {
-      type: String,
-      default: 'left',
-      validator: (value) => {
-        return ['center', 'right', 'left'].indexOf(value) !== -1
-      }
+  },
+  /**
+   * It sets the values which will be use to render the header.
+   */
+  header: {
+    type: Array,
+    required: true,
+  },
+  /**
+   * It sets the values which will be use to render the body.
+   */
+  data: {
+    type: Array,
+    default() {
+      return []
     },
-    /**
-    * It sets additional styling if needed.
-     */
-    cssStyle: {
-      type: String,
-      default: 'psui-text-gray-60'
-    }
   },
-  computed: {
-    cssAlign() {
-      if (this.align === 'right') return `psui-text-right ${this.cssStyle}`
-      if (this.align === 'center') return `psui-text-center  ${this.cssStyle}`
-      return `psui-text-left ${this.cssStyle}`
+  /**
+   * It sets the values which will be use to render the footer.
+   */
+  footer: {
+    type: Array,
+    default: () => [],
+  },
+  /**
+   * It sets the alignment of the whole context.
+   */
+  align: {
+    type: String,
+    default: 'left',
+    validator: (value) => {
+      return ['center', 'right', 'left'].indexOf(value) !== -1
     },
   },
-}
+  /**
+   * It sets additional styling if needed.
+   */
+  cssStyle: {
+    type: String,
+    default: 'psui-text-gray-60',
+  },
+})
+
+const cssAlign = computed(() => {
+  if (props.align === 'right') return `psui-text-right ${props.cssStyle}`
+  if (props.align === 'center') return `psui-text-center  ${props.cssStyle}`
+  return `psui-text-left ${props.cssStyle}`
+})
 </script>
-<style> /* Please, use the file src/assets/scss/components/PsDataTable.scss */</style>
+
+<style>
+/* Please, use the file src/assets/scss/components/PsDataTable.scss */
+</style>

package/src/components/datatable/PsDataTableItem.vue

@@ -1,52 +1,50 @@
 <template>
   <tbody v-if="data">
-    <tr v-for="(dt, index) in data" :key="index" >
-      <td v-for="(el, elIndex) in dt" :key="elIndex" class="psui-px-4 psui-py-2">
+    <tr
+      v-for="(dt, index) in data"
+      :key="index"
+    >
+      <td
+        v-for="(el, elIndex) in dt"
+        :key="elIndex"
+        class="psui-px-4 psui-py-2"
+      >
         <div class="psui-flex psui-gap-1 psui-items-center">
           <span class="psui-text-gray-80">
             {{ el[Object.keys(el)[1]].toFixed(3) }}
           </span>
           <div
             class="psui-flex psui-items-center"
-            :class="
-              el[Object.keys(el)[1]] >= 0
-                ? 'psui-text-green-70'
-                : 'psui-text-red-70'
-            "
+            :class="el[Object.keys(el)[1]] >= 0 ? 'psui-text-green-70' : 'psui-text-red-70'"
           >
-            <i v-if="el[Object.keys(el)[1]] >= 0" class="material-icons">arrow_upward</i>
-            <i v-else class="material-icons">arrow_downward</i>
-            <span>
-              {{
-                (
-                  (el[Object.keys(el)[1]] / el[Object.keys(el)[0]]) *
-                  100
-                ).toFixed(2)
-              }}%
-            </span>
+            <i
+              v-if="el[Object.keys(el)[1]] >= 0"
+              class="material-icons"
+            >arrow_upward</i>
+            <i
+              v-else
+              class="material-icons"
+            >arrow_downward</i>
+            <span> {{ ((el[Object.keys(el)[1]] / el[Object.keys(el)[0]]) * 100).toFixed(2) }}% </span>
           </div>
         </div>
-        <span class="psui-text-gray-50">{{
-          el[Object.keys(el)[0]].toFixed(6)
-        }}</span>
+        <span class="psui-text-gray-50">{{ el[Object.keys(el)[0]].toFixed(6) }}</span>
       </td>
     </tr>
   </tbody>
 </template>
 
-<script>
-export default {
-  name: 'PsDataTableItem',
-  props: {
-    data: {
-      type: Array,
-      required: true,
-      default: () => {
-        return []
-      },
+<script setup>
+
+defineProps({
+  data: {
+    type: Array,
+    required: true,
+    default: () => {
+      return []
     },
   },
-}
+})
 </script>
 
 <style scoped>
@@ -54,4 +52,4 @@ export default {
   font-size: 15px;
   margin-bottom: 2px;
 }
-</style>
+</style>