feat: Added AdapSwiper and AdapExpansion

Author: ftgibran

package-lock.json

@@ -63,17 +63,23 @@
   },
   "dependencies": {
     "lodash.debounce": "^4.0.8",
+    "css-element-queries": "^1.2.3",
     "vue": "^2.6.10",
     "vue-class-component": "^7.1.0",
     "vue-property-decorator": "^7.2.0"
   },
   "peerDependencies": {
     "@simpli/resource-collection": "1.0.8",
+    "@simpli/vue-await": "^1.0.5",
     "class-transformer": "0.2.3",
-    "simple-line-icons": "^2.4.1"
+    "simple-line-icons": "^2.4.1",
+    "swiper": "^6.1.1",
+    "vue-awesome-swiper": "^4.1.1",
+    "vue-transition-expand": "^0.1.0"
   },
   "devDependencies": {
     "@simpli/resource-collection": "1.0.8",
+    "@simpli/vue-await": "^1.0.5",
     "@types/jest": "24.0.11",
     "@types/node": "10.11.7",
     "awesome-typescript-loader": "5.2.1",
@@ -97,6 +103,7 @@
     "simple-line-icons": "^2.4.1",
     "standard-version": "5.0.2",
     "strip-json-comments-cli": "1.0.1",
+    "swiper": "^6.1.1",
     "ts-jest": "24.0.2",
     "ts-loader": "5.2.1",
     "tslint": "5.11.0",
@@ -105,9 +112,11 @@
     "tslint-react": "3.6.0",
     "typescript": "3.4.4",
     "validate-commit-msg": "2.14.0",
+    "vue-awesome-swiper": "^4.1.1",
     "vue-jest": "2.6.0",
     "vue-loader": "15.4.2",
     "vue-template-compiler": "^2.6.10",
+    "vue-transition-expand": "^0.1.0",
     "webpack": "4.41.5",
     "webpack-cli": "3.1.2"
   },

package.json

@@ -0,0 +1,6 @@
+.expansible {
+  .expansible__content {
+    @apply relative w-full;
+    transition: height 1000ms ease-in-out;
+  }
+}

scss/adapExpansion.scss

@@ -0,0 +1,12 @@
+.adap-swiper {
+  .adap-swiper__content {
+    position: relative;
+    user-select: none;
+  }
+}
+
+.swiper-container {
+  .swiper-wrapper {
+    box-sizing: border-box;
+  }
+}

scss/adapSwiper.scss

@@ -0,0 +1,92 @@
+const template = `
+  <div class="expansible">
+    <slot name="header" />
+
+    <div ref="content" class="expansible__content">
+      <div>
+        <template v-if="collection.items && !collection.isEmpty()">
+          <slot name="notEmpty" />
+        </template>
+      </div>
+
+      <await
+        spinner="none"
+        :name="spinner"
+        class="await__spinner--screen-light"
+      />
+    </div>
+
+    <div ref="bottom">
+      <await :name="spinner" spinnerPadding="22.5px">
+        <transition name="fade" mode="out-in">
+          <div v-if="collection.items && collection.isEmpty()" :key="1">
+            <slot name="empty" />
+          </div>
+
+          <div v-else-if="!collection.isLastPage" :key="2">
+            <slot name="expand" :expandEvent="expand" />
+          </div>
+        </transition>
+      </await>
+    </div>
+  </div>
+`
+
+import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
+import { ResizeSensor } from 'css-element-queries'
+import { IResource } from '@simpli/resource-collection'
+import { ExpansibleCollection } from './ExpansibleCollection'
+
+@Component({ template })
+export class AdapExpansion extends Vue {
+  @Prop({ type: Object, required: true })
+  collection!: ExpansibleCollection<IResource>
+  @Prop({ type: String, default: 'list' })
+  spinner!: string
+  @Prop({ type: Boolean, default: true })
+  autoScroll!: boolean
+
+  sensor: ResizeSensor | null = null
+
+  mounted() {
+    const el = this.$refs.content as HTMLElement
+    const elChild = el.childNodes[0] as HTMLElement
+    this.sensor = new ResizeSensor(elChild, ({ height }: Record<string, number>) => this.refreshHeight(height))
+  }
+
+  beforeDestroy() {
+    if (this.sensor) {
+      this.sensor.detach()
+      this.sensor = null
+    }
+  }
+
+  async expand() {
+    // @ts-ignore
+    if (this.$await) {
+      // @ts-ignore
+      await this.$await.run(this.spinner, () => this.collection.expand())
+    } else {
+      await this.collection.expand()
+    }
+
+    this.$emit('expand')
+
+    if (this.autoScroll) {
+      const el = this.$refs.bottom as HTMLElement
+      // @ts-ignore
+      if (this.$scrollTo) {
+        // @ts-ignore
+        this.$scrollTo(el)
+      }
+    }
+  }
+
+  async refreshHeight(height: number) {
+    const el = this.$refs.content as HTMLElement
+    el.style.height = `${height}px`
+    el.style.overflow = 'hidden'
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    el.style.overflow = 'unset'
+  }
+}