@budibase/frontend-core 2.22.12 → 2.22.13

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.22.12",
+  "version": "2.22.13",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.22.12",
-    "@budibase/shared-core": "2.22.12",
+    "@budibase/bbui": "2.22.13",
+    "@budibase/shared-core": "2.22.13",
     "dayjs": "^1.10.8",
     "lodash": "4.17.21",
     "socket.io-client": "^4.6.1"
   },
-  "gitHead": "f8c374b0bfe6868c5aa13b086d97e80a15ee72d9"
+  "gitHead": "a8479c046fc0ccb320f5f128aafeb9421dde5db5"
 }

package/src/api/app.js

@@ -197,4 +197,13 @@ export const buildAppEndpoints = API => ({
       url: `/api/applications/${appId}/sample`,
     })
   },
+
+  setRevertableVersion: async (appId, revertableVersion) => {
+    return await API.post({
+      url: `/api/applications/${appId}/setRevertableVersion`,
+      body: {
+        revertableVersion,
+      },
+    })
+  },
 })

package/src/components/ClientAppSkeleton.svelte

@@ -0,0 +1,244 @@
+<script>
+  export let sideNav = false
+  export let hideDevTools = false
+  export let hideFooter = false
+  export let noAnimation = false
+</script>
+
+<div class:sideNav id="clientAppSkeletonLoader" class="skeleton">
+  <div class="animation" class:noAnimation />
+
+  {#if !hideDevTools}
+    <div class="devTools" />
+  {/if}
+  <div class="main">
+    <div class="nav" />
+    <div class="body">
+      <div class="bodyVerticalPadding" />
+      <div class="bodyHorizontal">
+        <div class="bodyHorizontalPadding" />
+        <svg
+          class="svg"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          width="240"
+          height="256"
+        >
+          <mask id="mask">
+            <rect x="0" y="0" width="240" height="256" fill="white" />
+            <rect x="0" y="0" width="240" height="32" rx="6" fill="black" />
+            <rect x="0" y="56" width="240" height="32" rx="6" fill="black" />
+            <rect x="0" y="112" width="240" height="32" rx="6" fill="black" />
+            <rect x="0" y="168" width="240" height="32" rx="6" fill="black" />
+            <rect x="71" y="224" width="98" height="32" rx="6" fill="black" />
+          </mask>
+
+          <rect
+            x="0"
+            y="0"
+            width="240"
+            height="256"
+            fill="black"
+            mask="url(#mask)"
+          />
+        </svg>
+        <div class="bodyHorizontalPadding" />
+      </div>
+      <div class="bodyVerticalPadding" />
+    </div>
+  </div>
+  {#if !hideFooter}
+    <div class="footer" />
+  {/if}
+</div>
+
+<style>
+  .skeleton {
+    position: relative;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: var(--spectrum-global-color-gray-200);
+  }
+
+  .animation {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      var(--spectrum-global-color-gray-300) 20%,
+      transparent 40%,
+      transparent 100%
+    );
+    animation-duration: 1.3s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: shimmer;
+    animation-timing-function: linear;
+  }
+
+  .noAnimation {
+    animation-name: none;
+    background: transparent;
+  }
+
+  .devTools {
+    display: flex;
+    box-sizing: border-box;
+    background-color: black;
+    height: 60px;
+    padding: 1px 24px 1px 20px;
+    display: flex;
+    align-items: center;
+    z-index: 1;
+    flex-shrink: 0;
+
+    color: white;
+    mix-blend-mode: multiply;
+    background: rgb(0 0 0);
+    font-size: 30px;
+    font-family: Source Sans Pro;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .main {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  @media (max-width: 720px) {
+    #clientAppSkeletonLoader .main {
+      flex-direction: column;
+      width: initial;
+    }
+  }
+
+  @container (max-width: 720px) {
+    #clientAppSkeletonLoader .main {
+      flex-direction: column;
+      width: initial;
+    }
+  }
+
+  .sideNav .main {
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .nav {
+    flex-shrink: 0;
+    width: 100%;
+    height: 141px;
+    background-color: transparent;
+  }
+
+  @media (max-width: 720px) {
+    #clientAppSkeletonLoader .nav {
+      height: 61px;
+      width: initial;
+    }
+  }
+
+  @container (max-width: 720px) {
+    #clientAppSkeletonLoader .nav {
+      height: 61px;
+      width: initial;
+    }
+  }
+
+  .sideNav .nav {
+    height: 100%;
+    width: 251px;
+  }
+
+  .body {
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: relative;
+  }
+
+  @media (max-width: 720px) {
+    #clientAppSkeletonLoader .body {
+      width: initial;
+      height: 100%;
+    }
+  }
+
+  @container (max-width: 720px) {
+    #clientAppSkeletonLoader .body {
+      width: initial;
+      height: 100%;
+    }
+  }
+
+  .sideNav .body {
+    width: 100%;
+    height: initial;
+  }
+
+  .body :global(svg > rect) {
+    fill: var(--spectrum-alias-background-color-primary);
+  }
+
+  .body :global(svg) {
+    flex-shrink: 0;
+  }
+
+  .bodyHorizontal {
+    display: flex;
+    flex-shrink: 0;
+  }
+
+  .bodyHorizontalPadding {
+    height: 100%;
+    flex-grow: 1;
+    background-color: var(--spectrum-alias-background-color-primary);
+  }
+
+  .bodyVerticalPadding {
+    width: 100%;
+    flex-grow: 1;
+    background-color: var(--spectrum-alias-background-color-primary);
+  }
+
+  .footer {
+    flex-shrink: 0;
+    box-sizing: border-box;
+    z-index: 1;
+    height: 52px;
+    width: 100%;
+  }
+
+  @media (max-width: 720px) {
+    #clientAppSkeletonLoader .footer {
+      border-top: none;
+    }
+  }
+
+  @container (max-width: 720px) {
+    #clientAppSkeletonLoader .footer {
+      border-top: none;
+    }
+  }
+
+  .sideNav .footer {
+    border-top: 3px solid var(--spectrum-alias-background-color-primary);
+  }
+
+  @keyframes shimmer {
+    0% {
+      left: -170%;
+    }
+
+    100% {
+      left: 170%;
+    }
+  }
+</style>

package/src/components/index.js

@@ -5,3 +5,4 @@ export { default as UserAvatar } from "./UserAvatar.svelte"
 export { default as UserAvatars } from "./UserAvatars.svelte"
 export { default as Updating } from "./Updating.svelte"
 export { Grid } from "./grid"
+export { default as ClientAppSkeleton } from "./ClientAppSkeleton.svelte"

package/src/constants.js

@@ -3,6 +3,7 @@
  */
 export { OperatorOptions, SqlNumberTypeRangeMap } from "@budibase/shared-core"
 export { Feature as Features } from "@budibase/types"
+import { BpmCorrelationKey } from "@budibase/shared-core"
 
 // Cookie names
 export const Cookies = {
@@ -10,6 +11,7 @@ export const Cookies = {
   CurrentApp: "budibase:currentapp",
   ReturnUrl: "budibase:returnurl",
   AccountReturnUrl: "budibase:account:returnurl",
+  OnboardingProcessCorrelationKey: BpmCorrelationKey.ONBOARDING,
 }
 
 // Table names

package/src/themes/midnight.css

@@ -18,4 +18,3 @@
     --drop-shadow: rgba(0, 0, 0, 0.25) !important;
     --spectrum-global-color-blue-100: rgba(35, 40, 50) !important;
 }
-

package/src/utils/index.js

@@ -7,3 +7,4 @@ export * as RowUtils from "./rows"
 export { memo, derivedMemo } from "./memo"
 export { createWebsocket } from "./websocket"
 export * from "./download"
+export * from "./theme"

package/src/utils/theme.js

@@ -0,0 +1,12 @@
+import { Themes } from "../constants.js"
+
+export const getBaseTheme = theme => {
+  if (!theme) {
+    return ""
+  }
+  let base = Themes.find(x => `spectrum--${x.class}` === theme)?.base || ""
+  if (base) {
+    base = `spectrum--${base}`
+  }
+  return base
+}