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

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

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",

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",

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/bbui": "^0.9.105-alpha.7",
-    "@budibase/client": "^0.9.105-alpha.6",
+    "@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",

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.
  */

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: "",

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

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": {

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/bbui": "^0.9.105-alpha.7",
-    "@budibase/standard-components": "^0.9.105-alpha.6",
+    "@budibase/standard-components": "^0.9.105-alpha.7",
-    "@budibase/string-templates": "^0.9.105-alpha.6",
+    "@budibase/string-templates": "^0.9.105-alpha.7",
     "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"

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}>
+      <UserBindingsProvider>
-        <div id="app-root" class:preview={$builderStore.inBuilder}>
+        <DeviceBindingsProvider>
-          {#key $screenStore.activeLayout._id}
+          <div id="app-root" class:preview={$builderStore.inBuilder}>
-            <Component instance={$screenStore.activeLayout.props} />
+            {#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 />
+              We don't want to key these by componentID as they control their own
-        <ConfirmationDisplay />
+              re-mounting to avoid flashes.
-        <PeekScreenDisplay />
+            -->
-        <!-- Key block needs to be outside the if statement or it breaks -->
-        {#key $builderStore.selectedComponentId}
           {#if $builderStore.inBuilder}
-            <SettingsBar />
+            <SelectionIndicator />
+            <HoverIndicator />
           {/if}
-        {/key}
+        </DeviceBindingsProvider>
-        <!--
+      </UserBindingsProvider>
-            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>
     {/if}
   </div>
 {/if}

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>

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>

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/auth": "^0.9.105-alpha.7",
-    "@budibase/client": "^0.9.105-alpha.6",
+    "@budibase/client": "^0.9.105-alpha.7",
-    "@budibase/string-templates": "^0.9.105-alpha.6",
+    "@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",

packages/standard-components/manifest.json

@@ -1,7 +1,8 @@
 {
   "features": {
     "spectrumThemes": true,
-    "intelligentLoading": true
+    "intelligentLoading": true,
+    "deviceAwareness": true
   },
   "layout": {
     "name": "Layout",

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",

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",

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/auth": "^0.9.105-alpha.7",
-    "@budibase/string-templates": "^0.9.105-alpha.6",
+    "@budibase/string-templates": "^0.9.105-alpha.7",
     "@koa/router": "^8.0.0",
     "@techpass/passport-openidconnect": "^0.3.0",
     "aws-sdk": "^2.811.0",