Merge branch 'develop' of github.com:Budibase/budibase into joe-tweaks

2021-08-13 13:33:22 +01:00 · 2021-08-13 13:33:22 +01:00 · c9056c8ad5
parent b87a295773 3792cd8030
commit c9056c8ad5
17 changed files with 130 additions and 59 deletions
--- a/lerna.json
+++ b/lerna.json
@ -1,5 +1,5 @@
 {
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
  "npmClient": "yarn",
  "packages": [
    "packages/*"
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/auth",
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
  "description": "Authentication middlewares for budibase builder and apps",
  "main": "src/index.js",
  "author": "Budibase",
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@ -1,7 +1,7 @@
 {
  "name": "@budibase/bbui",
  "description": "A UI solution used in the different Budibase projects.",
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
  "license": "AGPL-3.0",
  "svelte": "src/index.js",
  "module": "dist/bbui.es.js",
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/builder",
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
  "license": "AGPL-3.0",
  "private": true,
  "scripts": {
@ -65,10 +65,10 @@
    }
  },
  "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.6",
-    "@budibase/client": "^0.9.105-alpha.6",
+    "@budibase/bbui": "^0.9.105-alpha.7",
+    "@budibase/client": "^0.9.105-alpha.7",
    "@budibase/colorpicker": "1.1.2",
-    "@budibase/string-templates": "^0.9.105-alpha.6",
+    "@budibase/string-templates": "^0.9.105-alpha.7",
    "@sentry/browser": "5.19.1",
    "@spectrum-css/page": "^3.0.1",
    "@spectrum-css/vars": "^3.0.1",
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@ -17,7 +17,13 @@ export const getBindableProperties = (asset, componentId) => {
  const contextBindings = getContextBindings(asset, componentId)
  const userBindings = getUserBindings()
  const urlBindings = getUrlBindings(asset)
-  return [...contextBindings, ...userBindings, ...urlBindings]
+  const deviceBindings = getDeviceBindings()
+  return [
+    ...deviceBindings,
+    ...urlBindings,
+    ...contextBindings,
+    ...userBindings,
+  ]
 }

 /**
@ -221,6 +227,27 @@ const getUserBindings = () => {
  return bindings
 }

+/**
+ * Gets all device bindings that are globally available.
+ */
+const getDeviceBindings = () => {
+  let bindings = []
+  if (get(store).clientFeatures?.deviceAwareness) {
+    const safeDevice = makePropSafe("device")
+    bindings.push({
+      type: "context",
+      runtimeBinding: `${safeDevice}.${makePropSafe("mobile")}`,
+      readableBinding: `Device.Mobile`,
+    })
+    bindings.push({
+      type: "context",
+      runtimeBinding: `${safeDevice}.${makePropSafe("tablet")}`,
+      readableBinding: `Device.Tablet`,
+    })
+  }
+  return bindings
+}
+
 /**
 * Gets all bindable properties from URL parameters.
 */
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@ -35,6 +35,7 @@ const INITIAL_FRONTEND_STATE = {
  clientFeatures: {
    spectrumThemes: false,
    intelligentLoading: false,
+    deviceAwareness: false,
  },
  currentFrontEndType: "none",
  selectedScreenId: "",
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@ -38,7 +38,7 @@
      </section>
      {#if filteredColumns?.length}
        <section>
-          <div class="heading">Columns</div>
+          <div class="heading">Bindable Values</div>
          <ul>
            {#each filteredColumns as { readableBinding }}
              <li
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/cli",
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
  "description": "Budibase CLI, for developers, self hosting and migrations.",
  "main": "src/index.js",
  "bin": {
--- a/packages/client/package.json
+++ b/packages/client/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/client",
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
  "license": "MPL-2.0",
  "module": "dist/budibase-client.js",
  "main": "dist/budibase-client.js",
@ -18,9 +18,9 @@
    "dev:builder": "rollup -cw"
  },
  "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.6",
-    "@budibase/standard-components": "^0.9.105-alpha.6",
-    "@budibase/string-templates": "^0.9.105-alpha.6",
+    "@budibase/bbui": "^0.9.105-alpha.7",
+    "@budibase/standard-components": "^0.9.105-alpha.7",
+    "@budibase/string-templates": "^0.9.105-alpha.7",
    "regexparam": "^1.3.0",
    "shortid": "^2.2.15",
    "svelte-spa-router": "^3.0.5"
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@ -5,7 +5,6 @@
  import NotificationDisplay from "./NotificationDisplay.svelte"
  import ConfirmationDisplay from "./ConfirmationDisplay.svelte"
  import PeekScreenDisplay from "./PeekScreenDisplay.svelte"
-  import Provider from "./Provider.svelte"
  import SDK from "../sdk"
  import {
    createContextStore,
@ -16,12 +15,13 @@
    builderStore,
    appStore,
  } from "../store"
-  import { TableNames, ActionTypes } from "../constants"
  import SettingsBar from "./preview/SettingsBar.svelte"
  import SelectionIndicator from "./preview/SelectionIndicator.svelte"
  import HoverIndicator from "./preview/HoverIndicator.svelte"
  import { Layout, Heading, Body } from "@budibase/bbui"
  import ErrorSVG from "../../../builder/assets/error.svg"
+  import UserBindingsProvider from "./UserBindingsProvider.svelte"
+  import DeviceBindingsProvider from "./DeviceBindingsProvider.svelte"

  // Provide contexts
  setContext("sdk", SDK)
@ -41,16 +41,6 @@
    }
  })

-  // Register this as a refreshable datasource so that user changes cause
-  // the user object to be refreshed
-  $: actions = [
-    {
-      type: ActionTypes.RefreshDatasource,
-      callback: () => authStore.actions.fetchUser(),
-      metadata: { dataSource: { type: "table", tableId: TableNames.USERS } },
-    },
-  ]
-
  // Handle no matching route - this is likely a permission error
  $: {
    if (dataLoaded && $routeStore.routerLoaded && !$routeStore.activeRoute) {
@ -93,30 +83,32 @@
        </Layout>
      </div>
    {:else if $screenStore.activeLayout}
-      <Provider key="user" data={$authStore} {actions}>
-        <div id="app-root" class:preview={$builderStore.inBuilder}>
-          {#key $screenStore.activeLayout._id}
-            <Component instance={$screenStore.activeLayout.props} />
+      <UserBindingsProvider>
+        <DeviceBindingsProvider>
+          <div id="app-root" class:preview={$builderStore.inBuilder}>
+            {#key $screenStore.activeLayout._id}
+              <Component instance={$screenStore.activeLayout.props} />
+            {/key}
+          </div>
+          <NotificationDisplay />
+          <ConfirmationDisplay />
+          <PeekScreenDisplay />
+          <!-- Key block needs to be outside the if statement or it breaks -->
+          {#key $builderStore.selectedComponentId}
+            {#if $builderStore.inBuilder}
+              <SettingsBar />
+            {/if}
          {/key}
-        </div>
-        <NotificationDisplay />
-        <ConfirmationDisplay />
-        <PeekScreenDisplay />
-        <!-- Key block needs to be outside the if statement or it breaks -->
-        {#key $builderStore.selectedComponentId}
+          <!--
+              We don't want to key these by componentID as they control their own
+              re-mounting to avoid flashes.
+            -->
          {#if $builderStore.inBuilder}
-            <SettingsBar />
+            <SelectionIndicator />
+            <HoverIndicator />
          {/if}
-        {/key}
-        <!--
-            We don't want to key these by componentID as they control their own
-            re-mounting to avoid flashes.
-          -->
-        {#if $builderStore.inBuilder}
-          <SelectionIndicator />
-          <HoverIndicator />
-        {/if}
-      </Provider>
+        </DeviceBindingsProvider>
+      </UserBindingsProvider>
    {/if}
  </div>
 {/if}
--- a/packages/client/src/components/DeviceBindingsProvider.svelte
+++ b/packages/client/src/components/DeviceBindingsProvider.svelte
@ -0,0 +1,31 @@
+<script>
+  import Provider from "./Provider.svelte"
+  import { onMount } from "svelte"
+
+  let width = window.innerWidth
+  const tabletBreakpoint = 768
+  const desktopBreakpoint = 1280
+  const resizeObserver = new ResizeObserver(entries => {
+    if (entries?.[0]) {
+      width = entries[0].contentRect?.width
+    }
+  })
+
+  $: data = {
+    mobile: width && width < tabletBreakpoint,
+    tablet: width && width >= tabletBreakpoint && width < desktopBreakpoint,
+  }
+
+  onMount(() => {
+    const doc = document.documentElement
+    resizeObserver.observe(doc)
+
+    return () => {
+      resizeObserver.unobserve(doc)
+    }
+  })
+</script>
+
+<Provider key="device" {data}>
+  <slot />
+</Provider>
--- a/packages/client/src/components/UserBindingsProvider.svelte
+++ b/packages/client/src/components/UserBindingsProvider.svelte
@ -0,0 +1,19 @@
+<script>
+  import Provider from "./Provider.svelte"
+  import { authStore } from "../store"
+  import { ActionTypes, TableNames } from "../constants"
+
+  // Register this as a refreshable datasource so that user changes cause
+  // the user object to be refreshed
+  $: actions = [
+    {
+      type: ActionTypes.RefreshDatasource,
+      callback: () => authStore.actions.fetchUser(),
+      metadata: { dataSource: { type: "table", tableId: TableNames.USERS } },
+    },
+  ]
+</script>
+
+<Provider key="user" data={$authStore} {actions}>
+  <slot />
+</Provider>
--- a/packages/server/package.json
+++ b/packages/server/package.json
@ -1,7 +1,7 @@
 {
  "name": "@budibase/server",
  "email": "hi@budibase.com",
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
  "description": "Budibase Web Server",
  "main": "src/index.js",
  "repository": {
@ -62,9 +62,9 @@
  "author": "Budibase",
  "license": "AGPL-3.0-or-later",
  "dependencies": {
-    "@budibase/auth": "^0.9.105-alpha.6",
-    "@budibase/client": "^0.9.105-alpha.6",
-    "@budibase/string-templates": "^0.9.105-alpha.6",
+    "@budibase/auth": "^0.9.105-alpha.7",
+    "@budibase/client": "^0.9.105-alpha.7",
+    "@budibase/string-templates": "^0.9.105-alpha.7",
    "@elastic/elasticsearch": "7.10.0",
    "@koa/router": "8.0.0",
    "@sendgrid/mail": "7.1.1",
@ -117,7 +117,7 @@
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
-    "@budibase/standard-components": "^0.9.105-alpha.6",
+    "@budibase/standard-components": "^0.9.105-alpha.7",
    "@jest/test-sequencer": "^24.8.0",
    "@types/bull": "^3.15.1",
    "@types/jest": "^26.0.23",
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@ -1,7 +1,8 @@
 {
  "features": {
    "spectrumThemes": true,
-    "intelligentLoading": true
+    "intelligentLoading": true,
+    "deviceAwareness": true
  },
  "layout": {
    "name": "Layout",
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@ -29,11 +29,11 @@
  "keywords": [
    "svelte"
  ],
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
  "license": "MIT",
  "gitHead": "d1836a898cab3f8ab80ee6d8f42be1a9eed7dcdc",
  "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.6",
+    "@budibase/bbui": "^0.9.105-alpha.7",
    "@spectrum-css/button": "^3.0.3",
    "@spectrum-css/card": "^3.0.3",
    "@spectrum-css/divider": "^1.0.3",
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/string-templates",
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
  "description": "Handlebars wrapper for Budibase templating.",
  "main": "src/index.cjs",
  "module": "dist/bundle.mjs",
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@ -1,7 +1,7 @@
 {
  "name": "@budibase/worker",
  "email": "hi@budibase.com",
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
  "description": "Budibase background service",
  "main": "src/index.js",
  "repository": {
@ -23,8 +23,8 @@
  "author": "Budibase",
  "license": "AGPL-3.0-or-later",
  "dependencies": {
-    "@budibase/auth": "^0.9.105-alpha.6",
-    "@budibase/string-templates": "^0.9.105-alpha.6",
+    "@budibase/auth": "^0.9.105-alpha.7",
+    "@budibase/string-templates": "^0.9.105-alpha.7",
    "@koa/router": "^8.0.0",
    "@techpass/passport-openidconnect": "^0.3.0",
    "aws-sdk": "^2.811.0",