diff --git a/package.json b/package.json
index e7886e70..37915968 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "@aotearoan/neon",
"description": "Neon is a lightweight design library of VueJS components with minimal dependencies. It supports light and dark modes and can be extended to support multiple themes",
- "version": "1.1.0",
+ "version": "1.1.1",
"main": "dist/@aotearoan/neon.umd.js",
"types": "dist/@aotearoan/components.d.ts",
"files": [
diff --git a/src/app/views/user-input/chip/Chip.ts b/src/app/views/user-input/chip/Chip.ts
index a4fb187f..b8159f1c 100644
--- a/src/app/views/user-input/chip/Chip.ts
+++ b/src/app/views/user-input/chip/Chip.ts
@@ -16,6 +16,11 @@ export default class Chip extends Vue {
private headline = 'Removable chips for tagging and inputs';
+ private data = {
+ click: () => console.log('clicked!'),
+ remove: () => console.log('removed!'),
+ };
+
private chipSizes = `
@@ -34,8 +39,8 @@ export default class Chip extends Vue {
`;
private chipActions = `
-
-
+
+
`;
@@ -55,6 +60,7 @@ export default class Chip extends Vue {
{
title: 'Chip actions',
template: this.chipActions,
+ data: this.data,
},
{
title: 'Chip with icon',
diff --git a/src/components/user-input/chip/NeonChip.ts b/src/components/user-input/chip/NeonChip.ts
index c536e58b..2961a27d 100644
--- a/src/components/user-input/chip/NeonChip.ts
+++ b/src/components/user-input/chip/NeonChip.ts
@@ -28,6 +28,7 @@ export default class NeonChip extends Vue {
};
private open = true;
+ private active = false;
/**
* The chip label
*/
@@ -88,12 +89,25 @@ export default class NeonChip extends Vue {
}
}
- private keyDown(event: KeyboardEvent) {
- if (!this.disabled && document.activeElement === this.$refs.chip) {
- if (event.code === 'Escape') {
- this.$refs.chip.blur();
+ private get role() {
+ if (!this.disabled) {
+ switch (this.action) {
+ case NeonChipAction.Remove:
+ return 'button';
+ case NeonChipAction.Click:
+ return 'link';
}
+ }
+ }
+
+ private keyUp() {
+ if (!this.disabled && document.activeElement === this.$refs.chip) {
+ this.active = false;
+ }
+ }
+ private keyDown(event: KeyboardEvent) {
+ if (!this.disabled && document.activeElement === this.$refs.chip) {
switch (this.action) {
case NeonChipAction.Remove:
switch (event.code) {
@@ -101,9 +115,9 @@ export default class NeonChip extends Vue {
case 'Enter':
case 'Backspace':
case 'Delete':
- event.stopPropagation();
event.preventDefault();
this.clicked();
+ event.stopPropagation();
return false;
}
return true;
@@ -111,9 +125,10 @@ export default class NeonChip extends Vue {
switch (event.code) {
case 'Space':
case 'Enter':
- event.stopPropagation();
+ this.active = true;
event.preventDefault();
this.clicked();
+ event.stopPropagation();
return false;
}
return true;
diff --git a/src/components/user-input/chip/NeonChip.vue b/src/components/user-input/chip/NeonChip.vue
index c6ce0ba7..86661dfc 100644
--- a/src/components/user-input/chip/NeonChip.vue
+++ b/src/components/user-input/chip/NeonChip.vue
@@ -7,11 +7,13 @@
`neon-chip--${size}`,
`neon-chip--${color}`,
`neon-chip--${action}`,
- { 'neon-chip--disabled': disabled },
+ { 'neon-chip--disabled': disabled, 'neon-chip--active': active },
]"
+ :role="role"
@click="clicked()"
@keydown="keyDown"
- :tabindex="!disabled && action !== 'none' ? 0 : undefined"
+ @keyup="keyUp"
+ :tabindex="!disabled ? 0 : undefined"
ref="chip"
>
diff --git a/src/sass/_chip.scss b/src/sass/_chip.scss
index bb4a0262..7b66bf9b 100644
--- a/src/sass/_chip.scss
+++ b/src/sass/_chip.scss
@@ -56,7 +56,8 @@
&:not(.neon-chip--disabled) {
cursor: pointer;
- &:active {
+ &:active,
+ &.neon-chip--active {
transform: scale(0.95);
}
}