Refactor #3965 - For Chips
Tuğçe Küçükoğlu
parent
7dc9a486db
commit
fb0c4cfc97
|
|
@ -0,0 +1,145 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.p-chips {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-chips-multiple-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
cursor: text;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-chips-token {
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-chips-input-token {
|
||||
flex: 1 1 auto;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-chips-token-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-chips-input-token input {
|
||||
border: 0 none;
|
||||
outline: 0 none;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-chips {
|
||||
display: flex;
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ instance, props }) => [
|
||||
'p-chips p-component p-inputwrapper',
|
||||
{
|
||||
'p-disabled': props.disabled,
|
||||
'p-focus': instance.focused,
|
||||
'p-inputwrapper-filled': (props.modelValue && props.modelValue.length) || (instance.inputValue && instance.inputValue.length),
|
||||
'p-inputwrapper-focus': instance.focused
|
||||
}
|
||||
],
|
||||
container: 'p-inputtext p-chips-multiple-container',
|
||||
token: ({ state, index }) => ['p-chips-token', { 'p-focus': state.focusedIndex === index }],
|
||||
label: 'p-chips-token-label',
|
||||
removeTokenIcon: 'p-chips-token-icon',
|
||||
inputToken: 'p-chips-input-token'
|
||||
};
|
||||
|
||||
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_chips_style', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseChips',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
separator: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
addOnBlur: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
allowDuplicate: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
inputId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
inputClass: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
inputStyle: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
inputProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
removeTokenIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
'aria-labelledby': {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
'aria-label': {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes
|
||||
},
|
||||
watch: {
|
||||
isUnstyled: {
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
!newValue && loadStyle();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -176,6 +176,11 @@ export interface ChipsProps {
|
|||
* @type {ChipsPassThroughOptions}
|
||||
*/
|
||||
pt?: ChipsPassThroughOptions;
|
||||
/**
|
||||
* When enabled, it removes component related styles in the core.
|
||||
* @defaultValue false
|
||||
*/
|
||||
unstyled?: boolean;
|
||||
}
|
||||
/**
|
||||
* Defines valid slots in Chips slots.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div :class="containerClass" v-bind="ptm('root')">
|
||||
<div :class="cx('root')" v-bind="ptm('root')">
|
||||
<ul
|
||||
ref="container"
|
||||
class="p-inputtext p-chips-multiple-container"
|
||||
:class="cx('container')"
|
||||
tabindex="-1"
|
||||
role="listbox"
|
||||
aria-orientation="horizontal"
|
||||
|
|
@ -20,21 +20,22 @@
|
|||
:key="`${i}_${val}`"
|
||||
:id="id + '_chips_item_' + i"
|
||||
role="option"
|
||||
:class="['p-chips-token', { 'p-focus': focusedIndex === i }]"
|
||||
:class="cx('token', { index: i })"
|
||||
:aria-label="val"
|
||||
:aria-selected="true"
|
||||
:aria-setsize="modelValue.length"
|
||||
:aria-posinset="i + 1"
|
||||
v-bind="ptm('token')"
|
||||
:data-p-focused="focusedIndex === i"
|
||||
>
|
||||
<slot name="chip" :value="val">
|
||||
<span class="p-chips-token-label" v-bind="ptm('label')">{{ val }}</span>
|
||||
<slot name="chip" :class="cx('label')" :value="val">
|
||||
<span :class="cx('label')" v-bind="ptm('label')">{{ val }}</span>
|
||||
</slot>
|
||||
<slot name="removetokenicon" :onClick="(event) => removeItem(event, i)">
|
||||
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-chips-token-icon', removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
|
||||
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :onClick="(event) => removeItem(event, i)">
|
||||
<component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
|
||||
</slot>
|
||||
</li>
|
||||
<li class="p-chips-input-token" role="option" v-bind="ptm('inputToken')">
|
||||
<li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')">
|
||||
<input
|
||||
ref="input"
|
||||
:id="inputId"
|
||||
|
|
@ -56,72 +57,14 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import TimesCircleIcon from 'primevue/icons/timescircle';
|
||||
import { UniqueComponentId } from 'primevue/utils';
|
||||
import BaseChips from './BaseChips.vue';
|
||||
|
||||
export default {
|
||||
name: 'Chips',
|
||||
extends: BaseComponent,
|
||||
extends: BaseChips,
|
||||
emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
separator: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
addOnBlur: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
allowDuplicate: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
inputId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
inputClass: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
inputStyle: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
inputProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
removeTokenIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
'aria-labelledby': {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
'aria-label': {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: UniqueComponentId(),
|
||||
|
|
@ -302,17 +245,6 @@ export default {
|
|||
maxedOut() {
|
||||
return this.max && this.modelValue && this.max === this.modelValue.length;
|
||||
},
|
||||
containerClass() {
|
||||
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;
|
||||
}
|
||||
|
|
@ -322,51 +254,3 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-chips {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-chips-multiple-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
cursor: text;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-chips-token {
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-chips-input-token {
|
||||
flex: 1 1 auto;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-chips-token-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-chips-input-token input {
|
||||
border: 0 none;
|
||||
outline: 0 none;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-chips {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ export const defaultOptions = {
|
|||
tooltip: 1100
|
||||
},
|
||||
pt: undefined,
|
||||
unstyled: false
|
||||
unstyled: true
|
||||
};
|
||||
|
||||
const PrimeVueSymbol = Symbol();
|
||||
|
|
|
|||
Loading…
Reference in New Issue