@asd20/ui-next 2.1.0 → 2.2.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [2.2.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.2.0...ui-next-v2.2.1) (2026-04-07)
+
+
+### Bug Fixes
+
+* fix file header text being dropped ([cb07594](https://github.com/academydistrict20/asd20-ui-next/commit/cb075946768dd58fb39ceed08ae406a1c36a532f))
+
+# [2.2.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.1.0...ui-next-v2.2.0) (2026-04-07)
+
+
+### Bug Fixes
+
+* fix plublishing contract regressions ([9ce287b](https://github.com/academydistrict20/asd20-ui-next/commit/9ce287b8f5719db6fdf1467fe4423fc60bbbc19c))
+
+
+### Features
+
+* add pagination to file list template ([cf9829c](https://github.com/academydistrict20/asd20-ui-next/commit/cf9829cd4776e2fd0c24cee52092397cdc6a16e8))
+
 # [2.1.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.29...ui-next-v2.1.0) (2026-04-06)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/molecules/Asd20ListItem/index.vue

@@ -118,6 +118,27 @@ import {
   shouldShowExternalIcon,
 } from '../../../helpers/linkPolicy'
 
+function resolveRouter(vm) {
+  const internal = vm && vm.$
+  const context = internal && internal.ctx
+  if (context && context.$router) {
+    return context.$router
+  }
+
+  const parentContext = internal && internal.parent && internal.parent.ctx
+  if (parentContext && parentContext.$router) {
+    return parentContext.$router
+  }
+
+  return (
+    internal &&
+    internal.appContext &&
+    internal.appContext.config &&
+    internal.appContext.config.globalProperties &&
+    internal.appContext.config.globalProperties.$router
+  )
+}
+
 export default {
   name: 'Asd20ListItem',
 
@@ -183,7 +204,8 @@ export default {
       return this.link || this.to
     },
     usesRouterNavigation() {
-      if (!this.$router || !this.to) return false
+      const router = resolveRouter(this)
+      if (!router || !this.to) return false
       if (typeof this.to === 'string') return this.to.startsWith('/')
       return typeof this.to === 'object'
     },
@@ -206,9 +228,11 @@ export default {
 
   methods: {
     onClick(e) {
-      if (this.usesRouterNavigation) {
+      const router = resolveRouter(this)
+
+      if (this.usesRouterNavigation && router && typeof router.push === 'function') {
         e.preventDefault()
-        this.$router.push(this.to)
+        router.push(this.to)
       }
       this.$emit('click', e)
     },

package/src/components/molecules/Asd20SearchField/index.vue

@@ -28,10 +28,10 @@
       @input="input"
     />
     <div
-      v-if="extra || !!$slots.default"
+      v-if="extra"
       class="asd20-search-field__extra"
     >
-      {{ extra }}<slot />
+      {{ extra }}
     </div>
   </div>
 </template>
@@ -141,35 +141,14 @@ export default {
       opacity: 1;
       color: var(--color__primary-t50);
     }
-    &:focus + .asd20-search-field__extra {
-      background: var(--website-page__alternate-background-t40);
-    }
   }
 
-  .asd20-search-field__extra {
-    transition: background asd20-speed(1) ease;
-    align-self: stretch;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.875rem;
+  &__extra {
+    flex-shrink: 0;
+    padding: 0 space(0.5);
+    color: var(--color__primary);
+    font-size: space(0.5);
     white-space: nowrap;
-    color: var(--color__primary-t50);
-    box-shadow: -1px 0 0 0 var(--color__tertiary);
-  }
-  &--large {
-    & > .asd20-icon {
-      width: space(1.5);
-      height: space(1.5);
-      margin: 0;
-    }
-    input {
-      margin-left: space(0);
-      font-size: 2rem;
-      line-height: 1.5;
-      padding: 0 space(0.25) 0 space(0.5);
-      height: space(3);
-    }
   }
 }
 </style>

package/src/components/organisms/Asd20FileList/index.vue

@@ -3,10 +3,10 @@
     v-bind="$attrs"
     ref="listComponent"
     role="region"
-    :aria-label="title"
+    :aria-label="resolvedTitle"
     class="asd20-file-list"
     :max-height="maxHeight"
-    :headline="title"
+    :headline="resolvedTitle"
     :icon="icon"
     :column-width="640"
   >
@@ -19,11 +19,53 @@
           v-model="searchQuery"
           class="asd20-file-list__search"
           :placeholder="searchPlaceholder"
-          :extra="resultSummary"
           :id-tag="searchIdTag"
         />
       </div>
     </template>
+    <template #after-header>
+      <div
+        v-if="showTopPagination"
+        class="asd20-file-list__pagination"
+      >
+        <p class="asd20-file-list__pagination-summary">
+          {{ paginationSummary }}
+        </p>
+        <div
+          v-if="paginate && totalPages > 1"
+          class="asd20-file-list__pagination-actions"
+        >
+          <asd20-button
+            class="asd20-file-list__pagination-button"
+            icon="chevron"
+            label="Prev"
+            :icon-angle="-90"
+            size="md"
+            horizontal
+            transparent
+            centered
+            opposite
+            :disabled="currentPage === 1"
+            @click="prevPage"
+          />
+          <p class="asd20-file-list__pagination-page">
+            Page {{ currentPage }} of {{ totalPages }}
+          </p>
+          <asd20-button
+            class="asd20-file-list__pagination-button"
+            icon="chevron"
+            label="Next"
+            :icon-angle="90"
+            size="md"
+            horizontal
+            transparent
+            centered
+            :disabled="currentPage === totalPages"
+            @click="nextPage"
+          />
+        </div>
+      </div>
+    </template>
     <div
       v-for="category in categorizedFileItems"
       :key="category.name"
@@ -74,6 +116,7 @@ import Asd20List from '../../../components/organisms/Asd20WidgetList'
 import mapFilesToListItems from '../../../helpers/mapFilesToListItems'
 import Asd20ListItem from '../../../components/molecules/Asd20ListItem'
 import Asd20ListCategory from '../../../components/molecules/Asd20ListCategory'
+import Asd20Button from '../../../components/atoms/Asd20Button'
 import Asd20SearchField from '../../../components/molecules/Asd20SearchField'
 
 function normalizeSearchText(value = '') {
@@ -88,6 +131,7 @@ export default {
   name: 'Asd20FileList',
 
   components: {
+    Asd20Button,
     Asd20List,
     Asd20ListItem,
     Asd20ListCategory,
@@ -97,6 +141,7 @@ export default {
   props: {
     files: { type: Array, default: () => [] },
     title: { type: String, default: '' },
+    headline: { type: String, default: '' },
     icon: { type: String, default: '' },
     url: { type: String, default: '' },
     groupByOwner: { type: Boolean, default: false },
@@ -107,6 +152,8 @@ export default {
     maxHeight: { type: String, default: '320px' },
     searchable: { type: Boolean, default: false },
     searchPlaceholder: { type: String, default: 'Search files' },
+    paginate: { type: Boolean, default: false },
+    pageSize: { type: Number, default: 50 },
     initialVisibleCount: { type: Number, default: 0 },
     visibleCountStep: { type: Number, default: 50 },
   },
@@ -114,10 +161,15 @@ export default {
   data: () => ({
     loadedFiles: [],
     searchQuery: '',
+    currentPage: 1,
     visibleCount: 0,
   }),
 
   computed: {
+    resolvedTitle() {
+      return this.title || this.headline
+    },
+
     computedFiles() {
       return (this.files || []).concat(this.loadedFiles)
     },
@@ -146,6 +198,25 @@ export default {
       return this.filteredFiles.length
     },
 
+    resolvedPageSize() {
+      return this.pageSize > 0 ? this.pageSize : 50
+    },
+
+    totalPages() {
+      if (!this.paginate || !this.filteredFilesCount) return 1
+      return Math.max(1, Math.ceil(this.filteredFilesCount / this.resolvedPageSize))
+    },
+
+    paginationStart() {
+      if (!this.filteredFilesCount) return 0
+      return (this.currentPage - 1) * this.resolvedPageSize + 1
+    },
+
+    paginationEnd() {
+      if (!this.filteredFilesCount) return 0
+      return Math.min(this.currentPage * this.resolvedPageSize, this.filteredFilesCount)
+    },
+
     hasActiveSearch() {
       return this.searchTerms.length > 0
     },
@@ -187,16 +258,6 @@ export default {
         : this.initialVisibleCount || 50
     },
 
-    resultSummary() {
-      if (!this.searchable) return ''
-      if (!this.totalFilesCount) return '0 files'
-      if (this.hasActiveSearch) {
-        return `${this.filteredFilesCount} of ${this.totalFilesCount}`
-      }
-
-      return `${this.totalFilesCount} files`
-    },
-
     footerSummary() {
       if (!this.totalFilesCount) return ''
 
@@ -220,6 +281,7 @@ export default {
 
     shouldShowFooter() {
       return (
+        !this.paginate &&
         this.totalFilesCount > 0 &&
         (this.canShowMore || this.hasActiveSearch || this.hasLargeResultSet)
       )
@@ -231,7 +293,7 @@ export default {
     },
 
     searchIdTag() {
-      return normalizeSearchText(this.title).replace(/\s+/g, '-')
+      return normalizeSearchText(this.resolvedTitle).replace(/\s+/g, '-')
     },
 
     emptyStateMessage() {
@@ -241,7 +303,35 @@ export default {
       return 'No files available.'
     },
 
-    categorizedFileItems() {
+    showTopPagination() {
+      return this.paginate || this.hasActiveSearch || !!this.initialVisibleCount
+    },
+
+    paginationSummary() {
+      if (!this.filteredFilesCount) {
+        return this.hasActiveSearch ? 'Showing 0 matching files.' : 'Showing 0 files.'
+      }
+
+      if (this.paginate) {
+        if (this.hasActiveSearch) {
+          return `Showing ${this.paginationStart}-${this.paginationEnd} of ${this.filteredFilesCount} matching files.`
+        }
+
+        return `Showing ${this.paginationStart}-${this.paginationEnd} of ${this.filteredFilesCount} files.`
+      }
+
+      if (this.canShowMore) {
+        return `Showing ${this.visibleFiles.length} of ${this.filteredFilesCount} files.`
+      }
+
+      if (this.hasActiveSearch) {
+        return `Showing ${this.filteredFilesCount} matching files.`
+      }
+
+      return `Showing ${this.filteredFilesCount} files.`
+    },
+
+    groupedFileItems() {
       if (this.groupByDate) {
         return this.fileItemsGroupedByDate
       } else if (this.groupByOwner) {
@@ -254,6 +344,39 @@ export default {
       return this.fileItemsGroupedByCategory
     },
 
+    paginatedGroupEntries() {
+      const entries = this.groupedFileItems.flatMap(group =>
+        group.items.map(item => ({
+          name: group.name,
+          item,
+        }))
+      )
+
+      if (!this.paginate) return entries
+
+      const startIndex = (this.currentPage - 1) * this.resolvedPageSize
+      return entries.slice(startIndex, startIndex + this.resolvedPageSize)
+    },
+
+    categorizedFileItems() {
+      if (!this.paginate) return this.groupedFileItems
+
+      return this.paginatedGroupEntries.reduce((groups, entry) => {
+        const existingGroup = groups.find(group => group.name === entry.name)
+
+        if (existingGroup) {
+          existingGroup.items.push(entry.item)
+          return groups
+        }
+
+        groups.push({
+          name: entry.name,
+          items: [entry.item],
+        })
+        return groups
+      }, [])
+    },
+
     fileItemsGroupedByCategory() {
       return this.visibleFiles
         .reduce((a, c) => {
@@ -270,21 +393,19 @@ export default {
         .map(c => {
           return {
             name: c,
-            items: mapFilesToListItems(
-              this.visibleFiles
-                .map(f => ({
-                  ...f,
-                  categories:
-                    f.categories && f.categories.length > 0
-                      ? f.categories
-                      : ['Uncategorized'],
-                }))
-                .filter(f => f.categories.indexOf(c) > -1)
-            )
-              .sort((a, b) =>
-                a.label > b.label ? 1 : b.label > a.label ? -1 : 0
+            items: this.sortMappedFileItems(
+              mapFilesToListItems(
+                this.visibleFiles
+                  .map(f => ({
+                    ...f,
+                    categories:
+                      f.categories && f.categories.length > 0
+                        ? f.categories
+                        : ['Uncategorized'],
+                  }))
+                  .filter(f => f.categories.indexOf(c) > -1)
               )
-              .map(t => ({
+            ).map(t => ({
                 ...t,
                 bordered: false,
                 alignTop: false,
@@ -311,21 +432,19 @@ export default {
         .map(c => {
           return {
             name: c,
-            items: mapFilesToListItems(
-              this.visibleFiles
-                .map(f => ({
-                  ...f,
-                  categories:
-                    f.categories && f.categories.length > 0
-                      ? f.categories
-                      : ['Uncategorized'],
-                }))
-                .filter(f => f.categories.indexOf(c) > -1)
-            )
-              .sort((a, b) =>
-                a.label > b.label ? 1 : b.label > a.label ? -1 : 0
+            items: this.sortMappedFileItems(
+              mapFilesToListItems(
+                this.visibleFiles
+                  .map(f => ({
+                    ...f,
+                    categories:
+                      f.categories && f.categories.length > 0
+                        ? f.categories
+                        : ['Uncategorized'],
+                  }))
+                  .filter(f => f.categories.indexOf(c) > -1)
               )
-              .map(t => ({
+            ).map(t => ({
                 ...t,
                 bordered: false,
                 alignTop: false,
@@ -349,18 +468,16 @@ export default {
         .map(t => {
           return {
             name: t,
-            items: mapFilesToListItems(
-              this.visibleFiles
-                .map(f => ({
-                  ...f,
-                  tags: f.tags && f.tags.length > 0 ? f.tags : ['Untagged'],
-                }))
-                .filter(f => f.tags.indexOf(t) > -1)
-            )
-              .sort((a, b) =>
-                a.label > b.label ? 1 : b.label > a.label ? -1 : 0
+            items: this.sortMappedFileItems(
+              mapFilesToListItems(
+                this.visibleFiles
+                  .map(f => ({
+                    ...f,
+                    tags: f.tags && f.tags.length > 0 ? f.tags : ['Untagged'],
+                  }))
+                  .filter(f => f.tags.indexOf(t) > -1)
               )
-              .map(t => ({
+            ).map(t => ({
                 ...t,
                 bordered: false,
                 alignTop: false,
@@ -382,15 +499,13 @@ export default {
           return {
             name: d,
             unix: new Date(d).valueOf(),
-            items: mapFilesToListItems(
-              this.visibleFiles.filter(
-                f => new Date(f.lastModifiedDateTime).toLocaleDateString() === d
-              )
-            )
-              .sort((a, b) =>
-                a.label > b.label ? 1 : b.label > a.label ? -1 : 0
+            items: this.sortMappedFileItems(
+              mapFilesToListItems(
+                this.visibleFiles.filter(
+                  f => new Date(f.lastModifiedDateTime).toLocaleDateString() === d
+                )
               )
-              .map(t => ({
+            ).map(t => ({
                 ...t,
                 bordered: false,
                 alignTop: false,
@@ -405,7 +520,9 @@ export default {
     fileItemsGroupedByOwner() {
       return [
         {
-          items: mapFilesToListItems(this.visibleFiles).map(t => ({
+          items: this.sortMappedFileItems(
+            mapFilesToListItems(this.visibleFiles)
+          ).map(t => ({
             ...t,
             bordered: false,
             alignTop: false,
@@ -420,6 +537,7 @@ export default {
   watch: {
     files: {
       handler() {
+        this.currentPage = 1
         this.resetVisibleCount()
         this.$nextTick(() => {
           // console.log('Change in Files detected:', this.files)
@@ -431,16 +549,24 @@ export default {
       immediate: true,
     },
     searchQuery() {
+      this.currentPage = 1
       this.resetVisibleCount()
     },
   },
 
   mounted() {
+    this.currentPage = 1
     this.resetVisibleCount()
     if (this.url) this.loadFiles()
   },
 
   methods: {
+    nextPage() {
+      this.currentPage = Math.min(this.currentPage + 1, this.totalPages)
+    },
+    prevPage() {
+      this.currentPage = Math.max(this.currentPage - 1, 1)
+    },
     resetVisibleCount() {
       this.visibleCount = this.initialVisibleCount > 0
         ? this.initialVisibleCount
@@ -472,6 +598,13 @@ export default {
       const haystack = this.getFileSearchTokens(file)
       return this.searchTerms.every(term => haystack.includes(term))
     },
+    sortMappedFileItems(items = []) {
+      return [...items].sort((a, b) => {
+        const left = String(a.label || '').toLowerCase()
+        const right = String(b.label || '').toLowerCase()
+        return left.localeCompare(right)
+      })
+    },
     // Expose the checkForOverflow method from the asd20viewport component
     // Expose the handleResize method from the asd20list component
     checkForOverflow() {
@@ -503,7 +636,7 @@ export default {
 .asd20-file-list__toolbar {
   display: flex;
   align-items: center;
-  gap: space(0.25);
+  justify-content: flex-end;
 }
 
 .asd20-file-list__search {
@@ -521,10 +654,6 @@ export default {
     font-size: 1rem;
     min-height: 40px;
   }
-
-  :deep(.asd20-search-field__extra) {
-    padding: 0 space(0.5) 0 space(0.75);
-  }
 }
 
 .asd20-file-list__category-group {
@@ -537,6 +666,29 @@ export default {
   }
 }
 
+.asd20-file-list__pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0;
+}
+
+.asd20-file-list__pagination-summary {
+  margin: 0;
+}
+
+.asd20-file-list__pagination-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: space(0.5);
+}
+
+.asd20-file-list__pagination-page {
+  margin: 0;
+}
+
 .asd20-file-list__empty {
   width: 100%;
   padding: space(0.75) 0;
@@ -547,7 +699,7 @@ export default {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   gap: space(0.5);
   padding-top: space(0.75);
 }
@@ -563,12 +715,15 @@ export default {
   gap: space(0.5);
 }
 
+
 @media (max-width: 767px) {
   .asd20-file-list__toolbar {
     display: block;
-    flex-wrap: wrap;
     width: 100%;
   }
+  .asd20-file-list__pagination {
+    justify-content: center;
+  }
 
   .asd20-file-list__search {
     min-width: 100%;
@@ -577,12 +732,15 @@ export default {
 }
 
 @media (min-width: 1024px) {
-  .asd20-file-list__search {
-    margin: space(0.5) space(0.5);
-
-    :deep(.asd20-icon) {
-      margin-left: 0;
-    }
+  // .asd20-file-list__search {
+  //   margin: space(0.5) space(0.5);
+
+  //   :deep(.asd20-icon) {
+  //     margin-left: 0;
+  //   }
+  // }
+  .asd20-file-list__pagination {
+    justify-content: space-between;
   }
 }
 </style>

package/src/components/organisms/Asd20List/index.vue

@@ -17,14 +17,60 @@
           :name="icon"
           :size="iconSize"
         />
-        <component
-          :is="headlineTag"
+        <h1
+          v-if="headlineTag === 'h1'"
           class="asd20-list__headline"
           v-html="headline"
-        ></component>
+        ></h1>
+        <h2
+          v-else-if="headlineTag === 'h2'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h2>
+        <h3
+          v-else-if="headlineTag === 'h3'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h3>
+        <h4
+          v-else-if="headlineTag === 'h4'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h4>
+        <h5
+          v-else-if="headlineTag === 'h5'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h5>
+        <h6
+          v-else-if="headlineTag === 'h6'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h6>
+        <p
+          v-else-if="headlineTag === 'p'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></p>
+        <span
+          v-else-if="headlineTag === 'span'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></span>
+        <div
+          v-else
+          class="asd20-list__headline"
+          v-html="headline"
+        ></div>
       </div>
       <slot name="header" />
     </div>
+    <div
+      v-if="$slots['after-header']"
+      class="asd20-list__after-header"
+    >
+      <slot name="after-header" />
+    </div>
     <asd20-viewport
       scrollable
       :max-height="maxHeight"
@@ -151,6 +197,10 @@ export default {
   color: var(--color__primary);
 }
 
+.asd20-list__after-header {
+  margin-bottom: space(0.5);
+}
+
 .asd20-list--multi-column {
   .asd20-list__items {
     list-style: none;

package/src/components/organisms/Asd20WidgetList/index.vue

@@ -17,14 +17,60 @@
           :name="icon"
           :size="iconSize"
         />
-        <component
-          :is="headlineTag"
+        <h1
+          v-if="headlineTag === 'h1'"
           class="asd20-list__headline"
           v-html="headline"
-        ></component>
+        ></h1>
+        <h2
+          v-else-if="headlineTag === 'h2'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h2>
+        <h3
+          v-else-if="headlineTag === 'h3'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h3>
+        <h4
+          v-else-if="headlineTag === 'h4'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h4>
+        <h5
+          v-else-if="headlineTag === 'h5'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h5>
+        <h6
+          v-else-if="headlineTag === 'h6'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></h6>
+        <p
+          v-else-if="headlineTag === 'p'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></p>
+        <span
+          v-else-if="headlineTag === 'span'"
+          class="asd20-list__headline"
+          v-html="headline"
+        ></span>
+        <div
+          v-else
+          class="asd20-list__headline"
+          v-html="headline"
+        ></div>
       </div>
       <slot name="header" />
     </div>
+    <div
+      v-if="$slots['after-header']"
+      class="asd20-list__after-header"
+    >
+      <slot name="after-header" />
+    </div>
     <asd20-viewport
       ref="viewport"
       scrollable
@@ -156,6 +202,10 @@ export default {
   color: var(--color__primary);
 }
 
+.asd20-list__after-header {
+  margin-bottom: space(0.5);
+}
+
 .asd20-list--multi-column {
   .asd20-list__items {
     list-style: none;

package/src/components/templates/Asd20FileListPageTemplate/index.vue

@@ -80,8 +80,8 @@
       v-bind="filesFeedProps"
       :multi-column="true"
       searchable
-      :initial-visible-count="50"
-      :visible-count-step="50"
+      paginate
+      :page-size="50"
       search-placeholder="Search files"
       max-height="auto"
       @files-in-view="$emit('files-in-view')"

package/src/mixins/globalPropMixinFactory.js

@@ -22,6 +22,33 @@ function hasIncomingProp(vm, propName) {
   )
 }
 
+function resolveStore(vm) {
+  if (!vm) return null
+
+  const internal = vm.$
+  const context = internal && internal.ctx
+  if (context && context.$store) {
+    return context.$store
+  }
+
+  if (vm.$options && vm.$options.store) {
+    return vm.$options.store
+  }
+
+  const parentContext = internal && internal.parent && internal.parent.ctx
+  if (parentContext && parentContext.$store) {
+    return parentContext.$store
+  }
+
+  return (
+    internal &&
+    internal.appContext &&
+    internal.appContext.config &&
+    internal.appContext.config.globalProperties &&
+    internal.appContext.config.globalProperties.$store
+  )
+}
+
 export default function(variableName, propOptions, storeModuleName) {
   const pascalCaseName = variableName[0].toUpperCase() + variableName.slice(1)
   const resolvedName = `resolved${pascalCaseName}`
@@ -41,14 +68,15 @@ export default function(variableName, propOptions, storeModuleName) {
         return this[variableName]
       }
 
-      try {
-        const storeValue = storeModuleName
-          ? this.$store['state'][storeModuleName][variableName]
-          : this.$store.state[variableName]
-        return storeValue !== undefined ? storeValue : this[localStateName]
-      } catch {
-        return this[localStateName]
-      }
+      const store = resolveStore(this)
+      const state = store && store.state
+      const storeState = storeModuleName && state ? state[storeModuleName] : state
+      const storeValue =
+        storeState && Object.prototype.hasOwnProperty.call(storeState, variableName)
+          ? storeState[variableName]
+          : undefined
+
+      return storeValue !== undefined ? storeValue : this[localStateName]
     },
     // emit an update event and value and call method to set value in store.
     set(value) {
@@ -68,9 +96,10 @@ export default function(variableName, propOptions, storeModuleName) {
     },
   }
   mixin.methods[`set${pascalCaseName}`] = function(value) {
-    if (!this.$store || typeof this.$store.dispatch !== 'function') return false
+    const store = resolveStore(this)
+    if (!store || typeof store.dispatch !== 'function') return false
 
-    this.$store.dispatch(
+    store.dispatch(
       `${storeModuleName ? storeModuleName + '/' : ''}set${pascalCaseName}`,
       value
     )