@policystudio/policy-studio-ui-vue 1.1.90-beta.5 → 1.1.90-beta.51

package/src/components/controls/PsSlider.vue

@@ -1,18 +1,18 @@
 <template>
-  <div 
+  <div
     class="psui-el-slider"
     :class="`layout-${layout}`"
   >
-    <div 
-      v-if="label" 
+    <div
+      v-if="label"
       class="psui-el-slider-label"
     >
-      <span>{{ label }}</span> 
+      <span>{{ label }}</span>
     </div>
 
-    <div 
+    <div
       class="psui-el-slider-wrapper"
-      :class="{ 'psui-flex psui-items-center' : !label && !bubble }"
+      :class="{ 'psui-flex psui-items-center': !label && !bubble }"
     >
       <div class="psui-el-slider-wrapper-input">
         <div
@@ -23,25 +23,25 @@
           {{ sliderValue }}
         </div>
 
-        <div 
-          class="slider-bar" 
+        <div
+          class="slider-bar"
           :style="{ width: progressWidth }"
         />
 
-        <div 
+        <div
           v-for="(barStyle, index) in bgBarStyles"
           :key="index"
           class="slider-bar-bg"
           :style="bgBarStyles[index]"
         />
 
-        <div 
+        <div
           v-for="(bar, index) in barStyles"
           :key="index"
           class="slider-bar-dynamic"
           :style="barStyles[index]"
         />
-        
+
         <input
           ref="slider"
           type="range"
@@ -54,11 +54,11 @@
         >
       </div>
 
-      <div 
+      <div
         v-if="dividers"
         class="psui-el-slider-grid"
       >
-        <div 
+        <div
           v-for="(grid, index) in gridData"
           :key="index"
           class="line"
@@ -69,8 +69,8 @@
         <span class="info info-max">{{ max }}</span>
       </div>
 
-      <span 
-        v-if="!label && !bubble" 
+      <span
+        v-if="!label && !bubble"
         class="psui-el-slider-bubble"
       >
         {{ sliderValue }}
@@ -79,177 +79,186 @@
   </div>
 </template>
 
-<script>
-export const sliderLayout = ['default', 'rich']
-
-export default {
-  name: 'PsSlider',
-  props: {
-    layout: {
-      type: String,
-      default: 'default',
-      validator: (value) => {
-        return sliderLayout.indexOf(value) !== -1
-      }
-    },
-    min: {
-      type: Number,
-      default: 0,
-    },    
-    max: {
-      type: Number,
-      default: 100,
-      required: true,
-    },
-    maxValue: {
-      type: Number,
-      default: 100,
-      required: true,
-    },
-    label: {
-      type: String,
-    },
-    value: {
-      type: [Number, String],
-      default: 0,
-    },
-    baseValue: {
-      type: [Number, Boolean]
-    },
-    labelPosition: {
-      type: String
-    },
-    step: {
-      type: Number,
-      default: 1
-    },
-    bubble: {
-      type: Boolean
-    },
-    dividers: {
-      type: Boolean,
-      default: false
-    },
-    modelValue: {
-      type: Number,
-      default: 50,
-    },
-    gridData: {
-      type: Array,
-      default() {
-        return [0, 30, 55, 80, 100]
-      }
-    },
-    sliderColors: {
-      type: Array,
-      default() {
-        return [
-          { start: 140, end: 170, bgColor: '#FF906D' },
-          { start: 170, end: 200, bgColor: '#D65C5A' },
-        ]
-      }
+<script setup>
+import { computed, ref, watch, onUnmounted, onMounted } from 'vue'
+
+const props = defineProps({
+  layout: {
+    type: String,
+    default: 'default',
+    validator: (value) => {
+      return ['default', 'rich'].indexOf(value) !== -1
     },
-    bgColors: {
-      type: Array,
-      default() {
-        return [
-          { start: 0, end: 170, bgColor: '#D6DDE5' },
-          { start: 170, end: 200, bgColor: '#A2ACB7' },
-        ]
-      }
-    }
   },
-  data: () => ({
-    isMounted: false,
-    sliderWidth: 0,
-    sliderValue: 0,
-    progress: 0,
-    barStyles: [],
-    bgBarStyles: []
-  }),
-  computed: {
-    positionBubble() {
-      const val = this.sliderValue
-      const width = this.sliderWidth - 24
-      const percent = (val - this.min) / (this.max - this.min)
-      const offset = -2
-      const position = width * percent + offset
-
-      return `${position}px`
-    },
-    progressWidth() {
-      if (this.sliderValue > this.maxValue) {
-        return '100%'
-      }
-      return ((this.sliderValue - this.min) / (this.max - this.min)) * 100 + '%'
-    },
+  min: {
+    type: Number,
+    default: 0,
   },
-  watch: {
-    sliderValue(newValue) {
-      this.updateProgress()
-      this.$emit('input', newValue)
-      this.updateBarStyles()
-    },
-    value(newValue) {
-      this.sliderValue = newValue
-    },
-    sliderColors: {
-      immediate: true,
-      handler() {
-        this.updateBarStyles()
-      },
-    },
+  max: {
+    type: Number,
+    default: 100,
+    required: true,
   },
-  created() {
-    window.addEventListener('resize', this.resizeHandler)
+  maxValue: {
+    type: Number,
+    default: 100,
+    required: true,
   },
-  unmounted() {
-    window.removeEventListener('resize', this.resizeHandler)
+  label: {
+    type: String,
+    default: '',
   },
-  mounted() {
-    this.isMounted = true
-    this.updateProgress()
-    this.updateBarStyles()
+  value: {
+    type: [Number, String],
+    default: 0,
   },
-  methods: {
-    updateProgress() {
-      this.progress = Math.round(
-        ((this.sliderValue - this.min) / (this.max - this.min)) * 100
-      )
-    },
-    updateSlider(event) {
-      this.sliderValue = Math.min(event.target.value, this.maxValue)
+  baseValue: {
+    type: [Number, Boolean],
+    default: false,
+  },
+  labelPosition: {
+    type: String,
+    default: '',
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+  bubble: {
+    type: Boolean,
+  },
+  dividers: {
+    type: Boolean,
+    default: false,
+  },
+  modelValue: {
+    type: Number,
+    default: 50,
+  },
+  gridData: {
+    type: Array,
+    default() {
+      return [0, 30, 55, 80, 100]
     },
-    updateBarStyles() {
-      this.barStyles = this.sliderColors.map((bar) => this.getBarStyle(bar))
-      this.bgBarStyles = this.bgColors.map((bar) => this.getBarStyle(bar, false))
+  },
+  sliderColors: {
+    type: Array,
+    default() {
+      return [
+        { start: 140, end: 170, bgColor: '#FF906D' },
+        { start: 170, end: 200, bgColor: '#D65C5A' },
+      ]
     },
-    resizeHandler() {
-      this.sliderWidth = this.$refs.slider.clientWidth
+  },
+  bgColors: {
+    type: Array,
+    default() {
+      return [
+        { start: 0, end: 170, bgColor: '#D6DDE5' },
+        { start: 170, end: 200, bgColor: '#A2ACB7' },
+      ]
     },
-    getBarStyle(bar, normalizeByProgress = true) {
-      const start = (bar.start / this.max) * 100
-      const end = (bar.end / this.max) * 100
-      const progress = parseFloat(this.progressWidth)
-      let barWidth = end - start
-      let barLeft = start
-
-      if (normalizeByProgress) {
-        if (progress < start) {
-          barWidth = 0
-        } else if (progress < end) {
-          barWidth = progress - start
-        }
-      }
-
-      return {
-        left: `${barLeft}%`,
-        backgroundColor: bar.bgColor,
-        width: `${barWidth}%`
-      }
-    }
   },
-  
+})
+
+const isMounted = ref(false)
+const sliderWidth = ref(0)
+const sliderValue = ref(0)
+const progress = ref(0)
+const barStyles = ref([])
+const bgBarStyles = ref([])
+const slider = ref(null)
+const emit = defineEmits(['input'])
+
+
+const positionBubble = computed(() => {
+  const val = sliderValue.value
+  const width = sliderWidth.value - 24
+  const percent = (val - props.min) / (props.max - props.min)
+  const offset = -2
+  const position = width * percent + offset
+  return `${position}px`
+})
+
+const progressWidth = computed(() => {
+  if (sliderValue.value > props.maxValue) {
+    return '100%'
+  }
+  return ((sliderValue.value - props.min) / (props.max - props.min)) * 100 + '%'
+})
+
+const updateProgress = () => {
+  progress.value = Math.round(((sliderValue.value - props.min) / (props.max - props.min)) * 100)
+}
+
+const updateSlider = (event) => {
+  sliderValue.value = Math.min(event.target.value, props.maxValue)
 }
+
+const updateBarStyles = () => {
+  barStyles.value = props.sliderColors.map((bar) => getBarStyle(bar))
+  bgBarStyles.value = props.bgColors.map((bar) => getBarStyle(bar, false))
+}
+
+const resizeHandler = () => {
+  sliderWidth.value = slider.value.clientWidth
+}
+
+const getBarStyle = (bar, normalizeByProgress = true) => {
+  const start = (bar.start / props.max) * 100
+  const end = (bar.end / props.max) * 100
+  const progress = parseFloat(progressWidth.value)
+  let barWidth = end - start
+  let barLeft = start
+  if (normalizeByProgress) {
+    if (progress < start) {
+      barWidth = 0
+    } else if (progress < end) {
+      barWidth = progress - start
+    }
+
+    return {
+      left: `${barLeft}%`,
+      backgroundColor: bar.bgColor,
+      width: `${barWidth}%`,
+    }
+  }
+}
+
+watch(sliderValue, (newValue) => {
+  updateProgress()
+  emit('input', newValue)
+  updateBarStyles()
+})
+
+watch(
+  () => props.value,
+  (newValue) => {
+    sliderValue.value = newValue
+  }
+)
+
+watch(
+  () => props.sliderColors,
+  () => {
+    updateBarStyles()
+  },
+  { immediate: true }
+)
+
+window.addEventListener('resize', resizeHandler)
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resizeHandler)
+})
+
+onMounted(() => {
+  isMounted.value = true
+  updateProgress()
+  updateBarStyles()
+})
 </script>
-<style> /* Please, use the file src/assets/scss/components/PsSlider.scss */ </style>
+
+<style>
+/* Please, use the file src/assets/scss/components/PsSlider.scss */
+</style>

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 { 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,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,57 @@
   </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>