initial commit

Author: AngusFu

README.md

@@ -1,26 +1,94 @@
 # vue-container-query
 
-## Project setup
-```
-yarn install
-```
+**Totally based on [d6u/react-container-query](https://github.com/d6u/react-container-query).**
 
-### Compiles and hot-reloads for development
-```
-yarn run serve
-```
+## Notice
 
-### Compiles and minifies for production
-```
-yarn run build
-```
+The following documentation is also originated from [d6u/react-container-query](https://github.com/d6u/react-container-query).
 
-### Lints and fixes files
-```
-yarn run lint
+Your suggested to pay a visit to the repo `react-container-query`.
+
+## Installation
+
+```sh
+npm i -D vue-container-query
 ```
 
-### Run your unit tests
+## API
+
+### `<ContainerQuery :query="query" :initialSize="{ width, height }>`
+
+```html
+<template>
+  <ContainerQuery :query="query" v-model="params">
+    <pre class="app">{{ params }}</pre>
+  </ContainerQuery>
+</template>
+
+<script>
+import { ContainerQuery } from './'
+const query = {
+  'width-between-400-and-599': {
+    minWidth: 400,
+    maxWidth: 599
+  },
+  'width-larger-than-600': {
+    minWidth: 600
+  }
+}
+
+export default {
+  name: 'app',
+  components: { ContainerQuery },
+  data () {
+    return { query, params: {} }
+  }
+}
+</script>
 ```
-yarn run test:unit
+
+#### properties
+
+- `props.children`
+
+  There should only be **one, and exactly one ** child component.
+
+- `props.query`
+
+  "query" is key-value pairs where keys are the class names that will be applied to container element when all constraints are met. The values are the constraints.
+
+- `props.initialSize` (optional)
+
+  `initialSize` is an object with optional `width` or `height` property. Because the limitation on how size is computed based on underlying element, in the initial rendering pass, we don't have the size info (because element must be in the DOM have a valid size). At this time `initialSize` will be used as the size of the element.
+
+### `createContainerQueryMixin(query, initialSize)`
+
+```html
+
+<template>
+  <pre class="app">{{ containerQuery }}</pre>
+</template>
+
+<script>
+import { createContainerQueryMixin } from './'
+const query = {
+  'width-between-400-and-599': {
+    minWidth: 400,
+    maxWidth: 599
+  },
+  'width-larger-than-600': {
+    minWidth: 600
+  }
+}
+
+export default {
+  name: 'app',
+  mixins: [
+    createContainerQueryMixin(query)
+  ],
+  data () {
+    return { query, params: {} }
+  }
+}
+</script>
 ```

package.json

@@ -6,9 +6,12 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "test:unit": "vue-cli-service test:unit"
+    "test:unit": "vue-cli-service test:unit",
+    "bundle": "vue-cli-service build --target lib --name VueContainerQuery ./src/index.js"
   },
   "dependencies": {
+    "container-query-toolkit": "^0.1.3",
+    "resize-observer-lite": "^0.2.3",
     "vue": "^2.5.17"
   },
   "devDependencies": {

src/App.vue

@@ -1,28 +1,38 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+  <ContainerQuery :query="query" v-model="params">
+    <pre class="app">{{ params }}</pre>
+  </ContainerQuery>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import { ContainerQuery } from './'
+const query = {
+  'width-between-400-and-599': {
+    minWidth: 400,
+    maxWidth: 599
+  },
+  'width-larger-than-600': {
+    minWidth: 600
+  }
+}
 
 export default {
   name: 'app',
-  components: {
-    HelloWorld
+  components: { ContainerQuery },
+  data () {
+    return { query, params: {} }
   }
 }
 </script>
 
 <style>
-#app {
+.app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+  color: #ffffff;
   margin-top: 60px;
+  background: #2c3e50;
+  padding: 30px 100px;
 }
 </style>

src/AppMixin.vue

@@ -0,0 +1,26 @@
+<template>
+  <pre class="app">{{ containerQuery }}</pre>
+</template>
+
+<script>
+import { createContainerQueryMixin } from './'
+const query = {
+  'width-between-400-and-599': {
+    minWidth: 400,
+    maxWidth: 599
+  },
+  'width-larger-than-600': {
+    minWidth: 600
+  }
+}
+
+export default {
+  name: 'app2',
+  mixins: [
+    createContainerQueryMixin(query)
+  ],
+  data () {
+    return { query, params: {} }
+  }
+}
+</script>

src/assets/logo.png

@@ -0,0 +1,43 @@
+// @ts-ignore
+import matchQueries from 'container-query-toolkit/lib/matchQueries'
+import ContainerQueryCore from './ContainerQueryCore'
+
+export default {
+  methods: {
+    handleChange () {
+      throw new Error('Method `handleChange()` not implemented.')
+    },
+
+    disposeObserver () {
+      if (this.cqCore) {
+        this.cqCore.disconnect()
+      }
+      this.cqCore = null
+    },
+
+    startObserving (query) {
+      this.cqCore = new ContainerQueryCore(query, params => {
+        this.handleChange(params)
+      })
+
+      const element = (this.$el || this.$slots.default[0].elm)
+      this.cqCore.observe(element)
+    }
+  },
+
+  created () {
+    const { query, initialSize } = this
+    const params = initialSize
+      ? matchQueries(query)(initialSize)
+      : {}
+    this.handleChange(params)
+  },
+
+  mounted () {
+    this.startObserving(this.query)
+  },
+
+  destroyed () {
+    this.disposeObserver()
+  }
+}

src/components/Base.js

@@ -0,0 +1,24 @@
+import ResizeObserverLite from 'resize-observer-lite'
+import matchQueries from 'container-query-toolkit/lib/matchQueries'
+import isShallowEqual from './isShallowEqual'
+
+export default class ContainerQueryCore {
+  constructor (query, callback) {
+    this.result = {}
+    this.rol = new ResizeObserverLite((size) => {
+      const result = matchQueries(query)(size)
+      if (!isShallowEqual(this.result, result)) {
+        callback(result)
+        this.result = result
+      }
+    })
+  }
+
+  observe (element) {
+    this.rol.observe(element)
+  }
+
+  disconnect () {
+    this.rol.disconnect()
+  }
+}

src/components/ContainerQueryCore.js

@@ -0,0 +1,59 @@
+import Base from './Base'
+import isQueriesEqual from './isQueriesEqual'
+
+const kErrMsg = '<vue-Container-query> can only render' +
+  ' one, and exactly one child component'
+
+export const ContainerQuery = {
+  name: 'vue-container-query',
+  mixins: [Base],
+  model: { event: 'change' },
+  props: {
+    initialSize: {
+      type: Object
+    },
+    query: {
+      required: true,
+      type: Object
+    }
+  },
+  methods: {
+    handleChange (params) {
+      this.$emit('change', params)
+    }
+  },
+  watch: {
+    query: {
+      deep: true,
+      immediate: true,
+      handler (newVal, oldVal) {
+        if (this.cqCore && !isQueriesEqual(oldVal, newVal)) {
+          this.disposeObserver()
+          this.startObserving(newVal)
+        }
+      }
+    }
+  },
+  render () {
+    const slot = this.$slots.default
+    if (slot && slot.length === 1) {
+      return slot[0]
+    }
+
+    throw new Error(kErrMsg)
+  }
+}
+
+export function createContainerQueryMixin (query, initialSize) {
+  return {
+    mixins: [Base],
+    data () {
+      return { query, initialSize, containerQuery: {} }
+    },
+    methods: {
+      handleChange (params) {
+        this.containerQuery = params
+      }
+    }
+  }
+}