@budibase/bbui 1.1.29-alpha.2 → 1.1.31

package/src/IconPicker/IconPicker.svelte

@@ -1,177 +0,0 @@
-<script>
-  //import { createEventDispatcher } from "svelte"
-  import "@spectrum-css/popover/dist/index-vars.css"
-  import clickOutside from "../Actions/click_outside"
-  import { fly } from "svelte/transition"
-  import Icon from "../Icon/Icon.svelte"
-  import { createEventDispatcher } from "svelte"
-
-  export let value
-  export let size = "M"
-  export let alignRight = false
-
-  let open = false
-
-  const dispatch = createEventDispatcher()
-
-  const iconList = [
-    {
-      label: "Icons",
-      icons: [
-        "Apps",
-        "Actions",
-        "ConversionFunnel",
-        "App",
-        "Briefcase",
-        "Money",
-        "ShoppingCart",
-        "Form",
-        "Help",
-        "Monitoring",
-        "Sandbox",
-        "Project",
-        "Organisations",
-        "Magnify",
-        "Launch",
-        "Car",
-        "Camera",
-        "Bug",
-        "Channel",
-        "Calculator",
-        "Calendar",
-        "GraphDonut",
-        "GraphBarHorizontal",
-        "Demographic",
-      ],
-    },
-  ]
-
-  const onChange = value => {
-    dispatch("change", value)
-    open = false
-  }
-</script>
-
-<div class="container">
-  <div class="preview size--{size || 'M'}" on:click={() => (open = true)}>
-    <div
-      class="fill"
-      style={value ? `background: ${value};` : ""}
-      class:placeholder={!value}
-    >
-      <Icon name={value || "UserGroup"} />
-    </div>
-  </div>
-  {#if open}
-    <div
-      use:clickOutside={() => (open = false)}
-      transition:fly={{ y: -20, duration: 200 }}
-      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
-      class:spectrum-Popover--align-right={alignRight}
-    >
-      {#each iconList as icon}
-        <div class="category">
-          <div class="heading">{icon.label}</div>
-          <div class="icons">
-            {#each icon.icons as icon}
-              <div
-                on:click={() => {
-                  onChange(icon)
-                }}
-              >
-                <Icon name={icon} />
-              </div>
-            {/each}
-          </div>
-        </div>
-      {/each}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .container {
-    position: relative;
-  }
-  .preview {
-    width: 32px;
-    height: 32px;
-    position: relative;
-    box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-400);
-  }
-  .preview:hover {
-    cursor: pointer;
-  }
-  .fill {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: grid;
-    place-items: center;
-  }
-  .size--S {
-    width: 20px;
-    height: 20px;
-  }
-  .size--M {
-    width: 32px;
-    height: 32px;
-  }
-  .size--L {
-    width: 48px;
-    height: 48px;
-  }
-  .spectrum-Popover {
-    width: 210px;
-    z-index: 999;
-    top: 100%;
-    padding: var(--spacing-l) var(--spacing-xl);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-xl);
-  }
-  .spectrum-Popover--align-right {
-    right: 0;
-  }
-  .icons {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-    gap: var(--spacing-m);
-  }
-  .heading {
-    font-size: var(--font-size-s);
-    font-weight: 600;
-    letter-spacing: 0.14px;
-    flex: 1 1 auto;
-    text-transform: uppercase;
-    grid-column: 1 / 5;
-    margin-bottom: var(--spacing-s);
-  }
-
-  .icon {
-    height: 16px;
-    width: 16px;
-    border-radius: 100%;
-    box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300);
-    position: relative;
-  }
-  .icon:hover {
-    cursor: pointer;
-    box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
-  }
-  .custom {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    align-items: center;
-    gap: var(--spacing-m);
-    margin-right: var(--spacing-xs);
-  }
-
-  .spectrum-wrapper {
-    background-color: transparent;
-  }
-</style>

package/src/List/List.svelte

@@ -1,28 +0,0 @@
-<script>
-  import Detail from "../Typography/Detail.svelte"
-
-  export let title = null
-</script>
-
-<div>
-  {#if title}
-    <div class="title">
-      <Detail>{title}</Detail>
-    </div>
-  {/if}
-  <div class="list-items">
-    <slot />
-  </div>
-</div>
-
-<style>
-  .title {
-    margin-bottom: 6px;
-  }
-  .list-items {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-</style>

package/src/List/ListItem.svelte

@@ -1,92 +0,0 @@
-<script>
-  import Body from "../Typography/Body.svelte"
-  import Icon from "../Icon/Icon.svelte"
-  import Label from "../Label/Label.svelte"
-  import Avatar from "../Avatar/Avatar.svelte"
-
-  export let icon = null
-  export let iconBackground = null
-  export let avatar = false
-  export let title = null
-  export let subtitle = null
-
-  $: initials = avatar ? title?.[0] : null
-</script>
-
-<div class="list-item">
-  <div class="left">
-    {#if icon}
-      <div class="icon" style="background: {iconBackground || `transparent`};">
-        <Icon name={icon} size="S" color={iconBackground ? "white" : null} />
-      </div>
-    {/if}
-    {#if avatar}
-      <Avatar {initials} />
-    {/if}
-    {#if title}
-      <Body>{title}</Body>
-    {/if}
-    {#if subtitle}
-      <Label>{subtitle}</Label>
-    {/if}
-  </div>
-  <div class="right">
-    <slot />
-  </div>
-</div>
-
-<style>
-  .list-item {
-    padding: 0 16px;
-    height: 56px;
-    background: var(--spectrum-alias-background-color-tertiary);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    border: 1px solid var(--spectrum-global-color-gray-300);
-  }
-  .list-item:not(:first-child) {
-    border-top: none;
-  }
-  .list-item:first-child {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-  }
-  .list-item:last-child {
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-  }
-  .left,
-  .right {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--spacing-xl);
-  }
-  .left {
-    width: 0;
-    flex: 1 1 auto;
-  }
-  .right {
-    flex: 0 0 auto;
-  }
-  .list-item :global(.spectrum-Icon),
-  .list-item :global(.spectrum-Avatar) {
-    flex: 0 0 auto;
-  }
-  .list-item :global(.spectrum-Body) {
-    color: var(--spectrum-global-color-gray-900);
-  }
-  .list-item :global(.spectrum-Body) {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .icon {
-    width: var(--spectrum-alias-avatar-size-400);
-    height: var(--spectrum-alias-avatar-size-400);
-    display: grid;
-    place-items: center;
-    border-radius: 50%;
-  }
-</style>