@policystudio/policy-studio-ui-vue 1.1.90-beta.10 → 1.1.90-beta.17

package/src/components/controls/PsSwitch.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="psui-el-switch"
-    :class="[getComponentClass, {'disabled':disabled}]"
+    :class="[getComponentClass, { disabled: disabled }]"
     @click="change()"
   >
     <input
@@ -15,59 +15,58 @@
   </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 { defineProps, defineEmits } 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 = () => {
+  if (props.disabled) return 'toggle-false'
+  return props.value ? `toggle-true ${props.backgroundColor}` : 'toggle-false psui-bg-gray-40'
+}
 
+const getComponentClass = () => {
+  return `size-${props.size}`
+}
+
+const change = () => {
+  emit('update:value', !props.value)
+  emit('change', !props.value)
+}
+</script>

package/src/components/controls/PsToggle.vue

@@ -1,9 +1,9 @@
 <template>
-  <div
-    class="psui-el-toggle"
-    role="group"
+  <div
+    class="psui-el-toggle"
+    role="group"
   >
-    <button 
+    <button
       type="button"
       v-for="(item, index) in items"
       :key="getKeyValue(item) + index"
@@ -15,55 +15,58 @@
   </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 { defineProps, defineEmits } from 'vue'
 
-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,36 +1,34 @@
 <template>
   <div class="psui-el-bar-chart">
-    <p 
+    <p
       v-if="showNumber"
       class="psui-el-bar-chart-total"
     >
       {{ total }}
     </p>
 
-    <div 
+    <div
       class="psui-el-bar-chart-bar"
-      :style="{width: `${fillWidth}%`}"
+      :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>
+import { defineProps } from 'vue'
+
+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

@@ -37,70 +37,66 @@
   </table>
 </template>
 
-<script>
-export const type = ['simple', 'rich']
-export const alignment = ['center', 'right', 'left']
+<script setup>
+import { defineProps, 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
-      },
+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 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 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

@@ -15,11 +15,7 @@
           </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"
@@ -29,37 +25,27 @@
               v-else
               class="material-icons"
             >arrow_downward</i>
-            <span>
-              {{
-                (
-                  (el[Object.keys(el)[1]] / el[Object.keys(el)[0]]) *
-                  100
-                ).toFixed(2)
-              }}%
-            </span>
+            <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>
+import { defineProps } from 'vue'
+
+defineProps({
+  data: {
+    type: Array,
+    required: true,
+    default: () => {
+      return []
     },
   },
-}
+})
 </script>
 
 <style scoped>
@@ -67,4 +53,4 @@ export default {
   font-size: 15px;
   margin-bottom: 2px;
 }
-</style>
+</style>