primevue 3.15.0 → 3.16.2

package/checkbox/checkbox.js

@@ -4,14 +4,15 @@ this.primevue.checkbox = (function (utils, vue) {
 
     var script = {
         name: 'Checkbox',
-        inheritAttrs: false,
-        emits: ['click', 'update:modelValue', 'change', 'input'],
+        emits: ['click', 'update:modelValue', 'change', 'input', 'focus', 'blur'],
         props: {
             value: null,
             modelValue: null,
             binary: Boolean,
-            class: null,
-            style: null,
+            name: {
+                type: String,
+                default: null
+            },
             trueValue: {
                 type: null,
                 default: true
@@ -19,16 +20,44 @@ this.primevue.checkbox = (function (utils, vue) {
             falseValue: {
                 type: null,
                 default: false
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            readonly: {
+                type: Boolean,
+                default: false
+            },
+            required: {
+                type: Boolean,
+                default: false
+            },
+            tabindex: {
+                type: Number,
+                default: null
+            },
+            inputId: null,
+            inputClass: null,
+            inputStyle: null,
+            inputProps: null,
+            'aria-labelledby': {
+                type: String,
+    			default: null
+            },
+            'aria-label': {
+                type: String,
+                default: null
             }
         },
         data() {
             return {
                 focused: false
-            };
+            }
         },
         methods: {
             onClick(event) {
-                if (!this.$attrs.disabled) {
+                if (!this.disabled) {
                     let newModelValue;
 
                     if (this.binary) {
@@ -48,11 +77,13 @@ this.primevue.checkbox = (function (utils, vue) {
                     this.$refs.input.focus();
                 }
             },
-            onFocus() {
+            onFocus(event) {
                 this.focused = true;
+                this.$emit('focus', event);
             },
-            onBlur() {
+            onBlur(event) {
                 this.focused = false;
+                this.$emit('blur', event);
             }
         },
         computed: {
@@ -60,43 +91,53 @@ this.primevue.checkbox = (function (utils, vue) {
                 return this.binary ? this.modelValue === this.trueValue : utils.ObjectUtils.contains(this.value, this.modelValue);
             },
             containerClass() {
-                return ['p-checkbox p-component', this.class, {'p-checkbox-checked': this.checked, 'p-checkbox-disabled': this.$attrs.disabled, 'p-checkbox-focused': this.focused}];
+                return [
+                    'p-checkbox p-component', {
+                        'p-checkbox-checked': this.checked,
+                        'p-checkbox-disabled': this.disabled,
+                        'p-checkbox-focused': this.focused
+                    }];
             }
         }
     };
 
     const _hoisted_1 = { class: "p-hidden-accessible" };
-    const _hoisted_2 = ["checked", "value"];
-    const _hoisted_3 = ["aria-checked"];
+    const _hoisted_2 = ["id", "value", "name", "checked", "tabindex", "disabled", "readonly", "required", "aria-labelledby", "aria-label"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       return (vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass($options.containerClass),
-        onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event))),
-        style: vue.normalizeStyle($props.style)
+        onClick: _cache[2] || (_cache[2] = $event => ($options.onClick($event)))
       }, [
         vue.createElementVNode("div", _hoisted_1, [
           vue.createElementVNode("input", vue.mergeProps({
+            id: $props.inputId,
             ref: "input",
             type: "checkbox",
+            value: $props.value,
+            class: $props.inputClass,
+            style: $props.inputStyle,
+            name: $props.name,
             checked: $options.checked,
-            value: $props.value
-          }, _ctx.$attrs, {
-            onFocus: _cache[0] || (_cache[0] = (...args) => ($options.onFocus && $options.onFocus(...args))),
-            onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onBlur && $options.onBlur(...args)))
-          }), null, 16, _hoisted_2)
+            tabindex: $props.tabindex,
+            disabled: $props.disabled,
+            readonly: $props.readonly,
+            required: $props.required,
+            "aria-labelledby": _ctx.ariaLabelledby,
+            "aria-label": _ctx.ariaLabel,
+            onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
+            onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event)))
+          }, $props.inputProps), null, 16, _hoisted_2)
         ]),
         vue.createElementVNode("div", {
           ref: "box",
-          class: vue.normalizeClass(['p-checkbox-box', {'p-highlight': $options.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}]),
-          role: "checkbox",
-          "aria-checked": $options.checked
+          class: vue.normalizeClass(['p-checkbox-box', {'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused}])
         }, [
           vue.createElementVNode("span", {
             class: vue.normalizeClass(['p-checkbox-icon', {'pi pi-check': $options.checked}])
           }, null, 2)
-        ], 10, _hoisted_3)
-      ], 6))
+        ], 2)
+      ], 2))
     }
 
     script.render = render;

package/checkbox/checkbox.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.checkbox=function(e,t){"use strict";var l={name:"Checkbox",inheritAttrs:!1,emits:["click","update:modelValue","change","input"],props:{value:null,modelValue:null,binary:Boolean,class:null,style:null,trueValue:{type:null,default:!0},falseValue:{type:null,default:!1}},data:()=>({focused:!1}),methods:{onClick(t){if(!this.$attrs.disabled){let l;l=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((t=>!e.ObjectUtils.equals(t,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",t),this.$emit("update:modelValue",l),this.$emit("change",t),this.$emit("input",l),this.$refs.input.focus()}},onFocus(){this.focused=!0},onBlur(){this.focused=!1}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:e.ObjectUtils.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",this.class,{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.$attrs.disabled,"p-checkbox-focused":this.focused}]}}};const s={class:"p-hidden-accessible"},c=["checked","value"],i=["aria-checked"];return l.render=function(e,l,a,u,o,h){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(h.containerClass),onClick:l[2]||(l[2]=e=>h.onClick(e)),style:t.normalizeStyle(a.style)},[t.createElementVNode("div",s,[t.createElementVNode("input",t.mergeProps({ref:"input",type:"checkbox",checked:h.checked,value:a.value},e.$attrs,{onFocus:l[0]||(l[0]=(...e)=>h.onFocus&&h.onFocus(...e)),onBlur:l[1]||(l[1]=(...e)=>h.onBlur&&h.onBlur(...e))}),null,16,c)]),t.createElementVNode("div",{ref:"box",class:t.normalizeClass(["p-checkbox-box",{"p-highlight":h.checked,"p-disabled":e.$attrs.disabled,"p-focus":o.focused}]),role:"checkbox","aria-checked":h.checked},[t.createElementVNode("span",{class:t.normalizeClass(["p-checkbox-icon",{"pi pi-check":h.checked}])},null,2)],10,i)],6)},l}(primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.checkbox=function(e,l){"use strict";var t={name:"Checkbox",emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:null,inputClass:null,inputStyle:null,inputProps:null,"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(l){if(!this.disabled){let t;t=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((l=>!e.ObjectUtils.equals(l,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",l),this.$emit("update:modelValue",t),this.$emit("change",l),this.$emit("input",t),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:e.ObjectUtils.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}}};const a={class:"p-hidden-accessible"},i=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];return t.render=function(e,t,u,s,n,c){return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(c.containerClass),onClick:t[2]||(t[2]=e=>c.onClick(e))},[l.createElementVNode("div",a,[l.createElementVNode("input",l.mergeProps({id:u.inputId,ref:"input",type:"checkbox",value:u.value,class:u.inputClass,style:u.inputStyle,name:u.name,checked:c.checked,tabindex:u.tabindex,disabled:u.disabled,readonly:u.readonly,required:u.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=e=>c.onFocus(e)),onBlur:t[1]||(t[1]=e=>c.onBlur(e))},u.inputProps),null,16,i)]),l.createElementVNode("div",{ref:"box",class:l.normalizeClass(["p-checkbox-box",{"p-highlight":c.checked,"p-disabled":u.disabled,"p-focus":n.focused}])},[l.createElementVNode("span",{class:l.normalizeClass(["p-checkbox-icon",{"pi pi-check":c.checked}])},null,2)],2)],2)},t}(primevue.utils,Vue);

package/chips/Chips.d.ts

@@ -40,13 +40,37 @@ export interface ChipsProps {
      */
     separator?: string | undefined;
     /**
-     * Style class of the component input field.
+     * 	Identifier of the focus input to match a label defined for the chips.
      */
-    class?: any;
+    inputId?: string | undefined;
     /**
-     * Inline style of the component.
+     * Style class of the input field.
      */
-    style?: any;
+    inputClass?: any | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: any | undefined;
+    /**
+     * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
+     */
+    inputProps?: HTMLInputElement | undefined;
+    /**
+     * When present, it specifies that the element should be disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Placeholder text for the input.
+     */
+    placeholder?: string | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    'aria-labelledby'?: string | undefined;
+    /**
+     * Establishes a string value that labels the component.
+     */
+    'aria-label'?: string | undefined;
 }
 
 export interface ChipsSlots {
@@ -68,15 +92,15 @@ export declare type ChipsEmits = {
      * @param {*} value - New value.
      */
     'update:modelValue': (value: any[]) => void;
-     /**
-      * Callback to invoke when a chip is added.
-      * @param {ChipsAddEvent} event - Custom add event.
-      */
+    /**
+     * Callback to invoke when a chip is added.
+     * @param {ChipsAddEvent} event - Custom add event.
+     */
     'add': (event: ChipsAddEvent) => void;
-     /**
-      * Callback to invoke when a chip is removed.
-      * @param {ChipsRemoveEvent} event - Custom remove event.
-      */
+    /**
+     * Callback to invoke when a chip is removed.
+     * @param {ChipsRemoveEvent} event - Custom remove event.
+     */
     'remove': (event: ChipsRemoveEvent) => void;
 }
 

package/chips/Chips.vue

@@ -1,25 +1,28 @@
 <template>
-    <div :class="containerClass" :style="style">
-        <ul :class="['p-inputtext p-chips-multiple-container', {'p-disabled': $attrs.disabled, 'p-focus': focused}]" @click="onWrapperClick()">
-            <li v-for="(val,i) of modelValue" :key="`${i}_${val}`" class="p-chips-token">
+    <div :class="containerClass">
+        <ul ref="container" class="p-inputtext p-chips-multiple-container" tabindex="-1" role="listbox" aria-orientation="horizontal" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" :aria-activedescendant="focused ? focusedOptionId : undefined"
+            @click="onWrapperClick()" @focus="onContainerFocus" @blur="onContainerBlur" @keydown="onContainerKeyDown">
+            <li v-for="(val,i) of modelValue" :key="`${i}_${val}`" :id="id + '_chips_item_' + i" role="option" :class="['p-chips-token', {'p-focus': focusedIndex === i}]"
+                :aria-label="val" :aria-selected="true" :aria-setsize="modelValue.length" :aria-posinset="i + 1">
                 <slot name="chip" :value="val">
                     <span class="p-chips-token-label">{{val}}</span>
                 </slot>
-                <span class="p-chips-token-icon pi pi-times-circle" @click="removeItem($event, i)"></span>
+                <span class="p-chips-token-icon pi pi-times-circle" @click="removeItem($event, i)" aria-hidden="true"></span>
             </li>
-            <li class="p-chips-input-token">
-                <input ref="input" type="text" v-bind="$attrs" @focus="onFocus" @blur="onBlur($event)" @input="onInput" @keydown="onKeyDown($event)" @paste="onPaste($event)"
-                     :disabled="$attrs.disabled || maxedOut">
+            <li class="p-chips-input-token" role="option">
+                <input ref="input" type="text" :id="inputId" :class="inputClass" :style="inputStyle" :disabled="disabled || maxedOut" :placeholder="placeholder"
+                    @focus="onFocus($event)" @blur="onBlur($event)" @input="onInput" @keydown="onKeyDown($event)" @paste="onPaste($event)" v-bind="inputProps">
             </li>
         </ul>
     </div>
 </template>
 
 <script>
+import {UniqueComponentId} from 'primevue/utils';
+
 export default {
     name: 'Chips',
-    inheritAttrs: false,
-    emits: ['update:modelValue', 'add', 'remove'],
+    emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
     props: {
         modelValue: {
             type: Array,
@@ -41,13 +44,33 @@ export default {
             type: Boolean,
             default: true
         },
-        class: null,
-        style: null
+        placeholder: {
+            type: String,
+            default: null
+        },
+        inputId: null,
+        inputClass: null,
+        inputStyle: null,
+        inputProps: null,
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        'aria-labelledby': {
+            type: String,
+			default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
     },
     data() {
         return {
+            id: UniqueComponentId(),
             inputValue: null,
-            focused: false
+            focused: false,
+            focusedIndex: null
         };
     },
     methods: {
@@ -56,37 +79,53 @@ export default {
         },
         onInput(event) {
             this.inputValue = event.target.value;
+            this.focusedIndex = null;
         },
-        onFocus() {
+        onFocus(event) {
             this.focused = true;
+            this.focusedIndex = null;
+            this.$emit('focus', event);
         },
         onBlur(event) {
             this.focused = false;
+            this.focusedIndex = null;
             if (this.addOnBlur) {
                 this.addItem(event, event.target.value, false);
             }
+            this.$emit('blur', event);
         },
         onKeyDown(event) {
             const inputValue = event.target.value;
 
-            switch(event.which) {
-                //backspace
-                case 8:
+            switch(event.code) {
+                case 'Backspace':
                     if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
-                        this.removeItem(event, this.modelValue.length - 1);
+                        if (this.focusedIndex !== null) {
+                            this.removeItem(event, this.focusedIndex);
+                        }
+                        else this.removeItem(event, this.modelValue.length - 1);
                     }
                 break;
 
-                //enter
-                case 13:
+                case 'Enter':
                     if (inputValue && inputValue.trim().length && !this.maxedOut) {
                         this.addItem(event, inputValue, true);
                     }
                 break;
 
+                case 'ArrowLeft':
+                    if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
+                        this.$refs.container.focus();
+                    }
+                break;
+
+                case 'ArrowRight':
+                    event.stopPropagation();
+                break;
+
                 default:
                     if (this.separator) {
-                        if (this.separator === ',' && (event.which === 188 || event.which === 110)) {
+                        if (this.separator === ',' && event.key === ',') {
                             this.addItem(event, inputValue, true);
                         }
                     }
@@ -105,6 +144,54 @@ export default {
                 }
             }
         },
+        onContainerFocus() {
+            this.focused = true;
+        },
+        onContainerBlur() {
+            this.focusedIndex = -1;
+            this.focused = false;
+        },
+        onContainerKeyDown(event) {
+            switch (event.code) {
+                case 'ArrowLeft':
+                    this.onArrowLeftKeyOn(event);
+                    break;
+
+                case 'ArrowRight':
+                    this.onArrowRightKeyOn(event);
+                    break;
+
+                case 'Backspace':
+                    this.onBackspaceKeyOn(event);
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onArrowLeftKeyOn() {
+            if (this.inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
+                this.focusedIndex = this.focusedIndex === null ? this.modelValue.length - 1 : this.focusedIndex - 1;
+                if (this.focusedIndex < 0) this.focusedIndex = 0;
+            }
+        },
+        onArrowRightKeyOn() {
+            if (this.inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
+
+                if (this.focusedIndex === this.modelValue.length - 1) {
+                    this.focusedIndex = null;
+                    this.$refs.input.focus();
+                }
+                else {
+                    this.focusedIndex++;
+                }
+            }
+        },
+        onBackspaceKeyOn(event) {
+            if (this.focusedIndex !== null) {
+                this.removeItem(event, this.focusedIndex);
+            }
+        },
         updateModel(event, value, preventDefault) {
             this.$emit('update:modelValue', value);
             this.$emit('add', {
@@ -128,12 +215,14 @@ export default {
             }
         },
         removeItem(event, index) {
-            if (this.$attrs.disabled) {
+            if (this.disabled) {
                 return;
             }
 
             let values = [...this.modelValue];
             const removedItem = values.splice(index, 1);
+            this.focusedIndex = null;
+            this.$refs.input.focus();
             this.$emit('update:modelValue', values);
             this.$emit('remove', {
                 originalEvent: event,
@@ -146,10 +235,15 @@ export default {
             return this.max && this.modelValue && this.max === this.modelValue.length;
         },
         containerClass() {
-            return ['p-chips p-component p-inputwrapper', this.class, {
+            return ['p-chips p-component p-inputwrapper', {
+                'p-disabled': this.disabled,
+                'p-focus': this.focused,
                 'p-inputwrapper-filled': ((this.modelValue && this.modelValue.length) || (this.inputValue && this.inputValue.length)),
                 'p-inputwrapper-focus': this.focused
             }];
+        },
+        focusedOptionId() {
+            return this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
         }
     }
 }