@mcwv/chips - npm Package Compare versions

Comparing version 0.12.0 to 0.13.0-alpha.0

chip-set.js

@@ -8,2 +8,3 @@ import MDCChipSetFoundation from '@material/chips/chip-set/foundation';
   REMOVAL_EVENT,
+  NAVIGATION_EVENT,
 } = MDCChipFoundation.strings;
@@ -31,18 +32,49 @@
   },
+  methods: {
+    instantiateChips() {
+      const chips = this.$slots.default
+        .filter(
+          ({ componentInstance }) =>
+            !!componentInstance &&
+            componentInstance.shouldRemoveOnTrailingIconClick,
+        )
+        .map(({ componentInstance }) => componentInstance);
+
+      return chips;
+    },
+  },
   mounted() {
+    this.chips_ = this.instantiateChips();
     this.foundation = new MDCChipSetFoundation({
       hasClass: className => this.$el.classList.contains(className),
-      removeChip: chipId => {
-        const index = findChipIndex(this.$slots.default, chipId);
-
-        if (index >= 0) {
-          this.$nextTick(() => {
-            this.$slots.default.splice(index, 1);
-          });
+      removeChipAtIndex: index => {
+        if (index >= 0 && index < this.chips_.length) {
+          this.chips_[index].remove();
+          this.chips_.splice(index, 1);
         }
       },
-      setSelected: (chipId, selected) => {
-        const index = findChipIndex(this.$slots.default, chipId);
-        if (index >= 0) {
-          this.$slots.default[index].componentInstance.selected = selected;
+
+      focusChipPrimaryActionAtIndex: index => {
+        this.chips_[index].focusPrimaryAction();
+      },
+      focusChipTrailingActionAtIndex: index => {
+        this.chips_[index].focusTrailingAction();
+      },
+      getChipListCount: () => this.chips_.length,
+      getIndexOfChipById: chipId => {
+        return findChipIndex(this.chips_, chipId);
+      },
+      isRTL: () =>
+        window.getComputedStyle(this.$el).getPropertyValue('direction') ===
+        'rtl',
+
+      removeFocusFromChipAtIndex: index => {
+        this.chips_[index].removeFocus();
+      },
+      selectChipAtIndex: (index, selected, shouldNotifyClients) => {
+        if (index >= 0 && index < this.chips_.length) {
+          this.chips_[index].setSelectedFromChipSet(
+            selected,
+            shouldNotifyClients,
+          );
         }
@@ -72,2 +104,4 @@ },
             this.foundation.handleChipRemoval(chipId),
+          [NAVIGATION_EVENT]: ({ detail: { chipId, key, source } }) =>
+            this.foundation.handleChipNavigation(chipId, key, source),
         },
@@ -84,11 +118,6 @@ },
 
-function findChipIndex(slot, chipId) {
-  const vindex = slot.findIndex(({ componentInstance }) => {
-    return (
-      componentInstance &&
-      (componentInstance.id == chipId || componentInstance._uid == chipId)
-    );
-  });
+function findChipIndex(chips, chipId) {
+  const index = chips.findIndex(({ _uid }) => _uid == chipId);
 
-  return vindex;
+  return index;
 }

chip.js

@@ -60,4 +60,10 @@ import { MDCChipFoundation } from '@material/chips/chip/foundation';
       TRAILING_ICON_INTERACTION_EVENT,
+      PRIMARY_ACTION_SELECTOR,
+      TRAILING_ACTION_SELECTOR,
+      NAVIGATION_EVENT,
     } = MDCChipFoundation.strings;
 
+    this.primaryAction_ = this.$el.querySelector(PRIMARY_ACTION_SELECTOR);
+    this.trailingAction_ = this.$el.querySelector(TRAILING_ACTION_SELECTOR);
+
     this.foundation = new MDCChipFoundation({
@@ -83,2 +89,13 @@ addClass: className => this.$set(this.classes, className, true),
         target.classList.contains(className),
+
+      focusPrimaryAction: () => {
+        if (this.primaryAction_) {
+          this.primaryAction_.focus();
+        }
+      },
+      focusTrailingAction: () => {
+        if (this.trailingAction_) {
+          this.trailingAction_.focus();
+        }
+      },
       notifyInteraction: () => {
@@ -94,2 +111,13 @@ emitCustomEvent(
       },
+      notifyNavigation: (key, source) =>
+        emitCustomEvent(
+          this.$el,
+          NAVIGATION_EVENT,
+          {
+            chipId: this.myId,
+            key,
+            source,
+          },
+          true,
+        ),
 
@@ -128,2 +156,6 @@ notifySelection: selected =>
       hasLeadingIcon: () => !!this.haveleadingIcon,
+      hasTrailingIcon: () => !!this.havetrailingIcon,
+      isRTL: () =>
+        window.getComputedStyle(this.$el).getPropertyValue('direction') ===
+        'rtl',
       getRootBoundingClientRect: () => this.$el.getBoundingClientRect(),
@@ -133,2 +165,12 @@ getCheckmarkBoundingClientRect: () => {
       },
+      setPrimaryActionAttr: (attr, value) => {
+        if (this.primaryAction_) {
+          this.primaryAction_.setAttribute(attr, value);
+        }
+      },
+      setTrailingActionAttr: (attr, value) => {
+        if (this.trailingAction_) {
+          this.trailingAction_.setAttribute(attr, value);
+        }
+      },
     });
@@ -157,2 +199,16 @@
   methods: {
+    setSelectedFromChipSet(selected, shouldNotifyClients) {
+      this.foundation.setSelectedFromChipSet(selected, shouldNotifyClients);
+    },
+
+    focusPrimaryAction() {
+      this.foundation.focusPrimaryAction();
+    },
+
+    focusTrailingAction() {
+      this.foundation.focusTrailingAction();
+    },
+    removeFocus() {
+      this.foundation.removeFocus();
+    },
     toggleSelected() {
@@ -165,2 +221,9 @@ this.foundation.toggleSelected();
 
+    remove() {
+      const parent = this.$el.parentNode;
+      if (parent != null) {
+        parent.removeChild(this.$el);
+      }
+    },
+
     renderLeadingIcon(createElement) {
@@ -248,2 +311,3 @@ const {
       [
+        createElement('div', { class: { 'mdc-chip__ripple': 1 } }),
         this.haveleadingIcon && this.renderLeadingIcon(createElement),
@@ -250,0 +314,0 @@ this.isFilter &&

package.json

 {
   "name": "@mcwv/chips",
   "description": "The Vue Material Adapter for the web chips component",
-  "version": "0.12.0",
+  "version": "0.13.0-alpha.0",
   "license": "MIT",
@@ -19,7 +19,7 @@ "main": "dist/mcwv.chips.min.js",
   "dependencies": {
-    "@material/chips": "^3.2.0",
+    "@material/chips": "^4.0.0",
     "@mcwv/base": "^0.12.0",
-    "@mcwv/ripple": "^0.12.0"
+    "@mcwv/ripple": "^0.13.0-alpha.0"
   },
-  "gitHead": "5f946c11ece0f71d75fc7f77c08fa0b024eb2636"
+  "gitHead": "c3d659d8f26cd12576cfcf98f3c2b1d4845ae37a"
 }

No alert changes

Improved metrics

Total package byte prevSize

195712

increased by1.44%

Lines of code

710

increased by13.78%

Dependency changes

• + Added@material/animation@4.0.0(transitive)

• + Added@material/base@4.0.0(transitive)

• + Added@material/checkbox@4.0.0(transitive)

• + Added@material/chips@4.0.0(transitive)

• + Added@material/density@4.0.0(transitive)

• + Added@material/dom@4.0.0(transitive)

• + Added@material/elevation@4.0.0(transitive)

• + Added@material/feature-targeting@4.0.0(transitive)

• + Added@material/ripple@4.0.0(transitive)

• + Added@material/shape@4.0.0(transitive)

• + Added@material/theme@4.0.0(transitive)

• + Added@material/touch-target@4.0.0(transitive)

• + Added@material/typography@4.0.0(transitive)

• + Added@mcwv/base@0.13.0(transitive)

• + Added@mcwv/ripple@0.13.0(transitive)

• - Removed@material/animation@3.1.0(transitive)

• - Removed@material/base@3.1.0(transitive)

• - Removed@material/checkbox@3.2.0(transitive)

• - Removed@material/chips@3.2.0(transitive)

• - Removed@material/dom@3.1.0(transitive)

• - Removed@material/elevation@3.1.0(transitive)

• - Removed@material/feature-targeting@3.1.0(transitive)

• - Removed@material/ripple@3.2.0(transitive)

• - Removed@material/rtl@3.2.0(transitive)

• - Removed@material/shape@3.1.0(transitive)

• - Removed@material/theme@3.1.0(transitive)

• - Removed@material/typography@3.1.0(transitive)

• - Removed@mcwv/ripple@0.12.0(transitive)

• Updated@material/chips@^4.0.0

• Updated@mcwv/ripple@^0.13.0-alpha.0