@policystudio/policy-studio-ui-vue 1.1.90-beta.2 → 1.1.90-beta.21

package/src/components/controls/PsRadioButtonSimple.vue

@@ -1,97 +1,101 @@
 <template>
-  <div 
-    class="psui-el-radio" 
-    :class="[getComponentClass, {'disabled':disabled}]"
+  <div
+    class="psui-el-radio"
+    :class="[getComponentClass, { disabled: disabled }]"
     v-bind="getComponentAttrs"
   >
-    <input 
-      type="radio" 
-      :checked="checked" 
+    <input
+      type="radio"
+      :checked="checked"
       :disabled="disabled"
       :label="label"
       :name="name"
       :id="getInputId"
       v-bind="inputAttrs"
-      @change="$emit('change')"
+      @change="emit('change')"
     >
-    <label 
+    <label
       :for="getInputId"
       class="psui-el-checkmark"
     >
       <slot name="content">
         <span>{{ label }}</span>
       </slot>
-    </label>    
+    </label>
   </div>
 </template>
 
-<script>
-import { randomString } from '../../util/GeneralFunctions'
+<script setup>
+import { randomString } from '../../util/GeneralFunctions.js'
+import { computed, useAttrs } from 'vue'
 
-export default {
-  name: 'PsRadioButtonSimple',
-  props: {
-    /**
-     * It sets the label of the checkbox input.
-     */
-    label: {
-      type: String,
-    },
-    name:{
-      type: String,
-    },
-    /**
-     * It disables the checkbox input.
-     */
-    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.
-     */
+const emit = defineEmits(['change'])
+
+const props = defineProps({
+  /**
+   * It sets the label of the checkbox input.
+   */
+  label: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  /**
+   * It disables the checkbox input.
+   */
+  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: () => ({}),
   },
-  inheritAttrs: false,
-  computed:{
-    getComponentClass(){
-      return `size-${this.size}`
-    },
-    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 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.
+   */
+})
+
+const attrs = useAttrs()
+
+const getComponentClass = computed(() => {
+  return `size-${props.size}`
+})
+
+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/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>