@invopop/popui 0.0.38 → 0.0.39

package/dist/CardCheckbox.svelte

@@ -0,0 +1,30 @@
+<script>import InputRadio from "./InputRadio.svelte";
+export let id;
+export let title = "";
+export let description = "";
+export let checked = false;
+</script>
+
+<label
+  for={id}
+  class="{checked
+    ? 'border-workspace-accent shadow-active'
+    : 'border-neutral-200'} border rounded-lg w-full text-left cursor-pointer block"
+>
+  <div class="py-2 pr-2 pl-3 flex items-start justify-between">
+    <div class="flex flex-col space-y-0.5">
+      <span class="text-base text-neutral-800 font-medium">{title}</span>
+      {#if description}
+        <span class="text-sm text-neutral-500">{description}</span>
+      {:else}
+        <span class="text-sm text-neutral-300">No description</span>
+      {/if}
+    </div>
+    <InputRadio {id} {checked} on:change />
+  </div>
+  {#if !!$$slots.footer}
+    <div class="bg-neutral-50 rounded-b-lg px-3 py-2.5 border-t border-neutral-100">
+      <slot name="footer" />
+    </div>
+  {/if}
+</label>

package/dist/CardCheckbox.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id: any;
+        title?: string | undefined;
+        description?: string | undefined;
+        checked?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        footer: {};
+    };
+};
+export type CardCheckboxProps = typeof __propDef.props;
+export type CardCheckboxEvents = typeof __propDef.events;
+export type CardCheckboxSlots = typeof __propDef.slots;
+export default class CardCheckbox extends SvelteComponent<CardCheckboxProps, CardCheckboxEvents, CardCheckboxSlots> {
+}
+export {};

package/dist/CompanySelector.svelte

@@ -24,7 +24,8 @@ $:
       label: c.name,
       selected: c.slug === selectedCompany?.slug,
       country: c.country,
-      picture: c.logo_url
+      picture: c.logo_url,
+      sandbox: c.sandbox
     }))
   ];
 $:

package/dist/DrawerContextWorkspace.svelte

@@ -1,19 +1,96 @@
 <script>import DrawerContextItem from "./DrawerContextItem.svelte";
 import { Icon } from "@steeze-ui/svelte-icon";
-import { AddCircle, Settings } from "@invopop/ui-icons";
+import { AddCircle, ChevronDown, ChevronRight, Settings, Sidebar } from "@invopop/ui-icons";
 import { createEventDispatcher } from "svelte";
+import BaseCounter from "./BaseCounter.svelte";
+import EmptyStateIcon from "./EmptyStateIcon.svelte";
 export let items = [];
 export let multiple = false;
 const dispatch = createEventDispatcher();
+let liveOpen = false;
+let sandboxOpen = false;
+$:
+  liveItems = items.filter((i) => !i.sandbox);
+$:
+  sandboxItems = items.filter((i) => i.sandbox);
+$:
+  selectedItem = items.find((i) => i.selected);
+$:
+  if (selectedItem) {
+    if (selectedItem.sandbox) {
+      sandboxOpen = true;
+    } else {
+      liveOpen = true;
+    }
+  }
 </script>
 
-<div class="w-[300px] border border-neutral-100 pt-1 rounded shadow-lg space-y-0.5 bg-white">
-  <ul class="px-1 pb-0.5 space-y-1 max-h-[60vh] overflow-y-auto">
-    {#each items as item}
-      <DrawerContextItem {item} {multiple} workspace on:click />
-    {/each}
-  </ul>
-  <ul class="px-1 space-y-1 bg-neutral-50 rounded-b border-t border-neutral-100 p-1 space-y-1">
+<div class="w-[300px] border border-neutral-200 rounded-sm shadow-lg bg-white">
+  <div class="max-h-[60vh] overflow-y-auto rounded-sm">
+    <button
+      class="flex items-center justify-between bg-neutral-50 border-b border-neutral-200 rounded-t-sm h-8 py-1.5 pl-1.5 pr-2 text-base font-medium text-neutral-800 w-full"
+      on:click={() => {
+        liveOpen = !liveOpen
+      }}
+    >
+      <div class="flex items-center space-x-1.5">
+        <Icon src={liveOpen ? ChevronDown : ChevronRight} class="h-4 w-4 text-neutral-800" />
+        <span>Live</span>
+      </div>
+      {#if liveItems.length}
+        <BaseCounter content={liveItems.length} />
+      {/if}
+    </button>
+    {#if liveOpen}
+      {#if !liveItems.length}
+        <div class="h-[182px]">
+          <EmptyStateIcon
+            icon={Sidebar}
+            title="No workspaces here"
+            description="Create a workspace to start"
+          />
+        </div>
+      {/if}
+      <ul class="p-1 pb-0.5 space-y-1">
+        {#each liveItems as item}
+          <DrawerContextItem {item} {multiple} workspace on:click />
+        {/each}
+      </ul>
+    {/if}
+    <button
+      class="flex items-center justify-between bg-neutral-50 border-b border-neutral-200 h-8 py-1.5 pl-1.5 pr-2 text-base font-medium text-neutral-800 w-full"
+      class:border-t={liveOpen}
+      on:click={() => {
+        sandboxOpen = !sandboxOpen
+      }}
+    >
+      <div class="flex items-center space-x-1.5">
+        <Icon src={sandboxOpen ? ChevronDown : ChevronRight} class="h-4 w-4 text-neutral-800" />
+        <span>Sandbox</span>
+      </div>
+      {#if sandboxItems.length}
+        <BaseCounter content={sandboxItems.length} />
+      {/if}
+    </button>
+    {#if sandboxOpen}
+      {#if !sandboxItems.length}
+        <div class="h-[182px]">
+          <EmptyStateIcon
+            icon={Sidebar}
+            title="No workspaces here"
+            description="Create a workspace to start"
+          />
+        </div>
+      {/if}
+      <ul class="p-1 pb-0.5 space-y-1">
+        {#each sandboxItems as item}
+          <DrawerContextItem {item} {multiple} workspace on:click />
+        {/each}
+      </ul>
+    {/if}
+  </div>
+
+  <ul class="px-1 space-y-1 bg-neutral-50 rounded-b border-t border-neutral-100">
     <li class="pl-1.5 py-1.5 pr-2 hover:bg-neutral-100 rounded-sm">
       <button
         class="flex items-center space-x-2 w-full"

package/dist/EmptyStateIcon.svelte

@@ -39,7 +39,7 @@ export let check = false;
     </div>
   {/if}
   <div class="space-y-0.5">
-    <h4 class="font-medium text-base text-neutral-800 text-base tracking-tight">{title}</h4>
+    <h4 class="font-medium text-base text-neutral-800 tracking-tight">{title}</h4>
     <p class="max-w-xs text-base text-neutral-500 tracking-normal">{description}</p>
     <p><slot /></p>
   </div>

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import BaseDropdown from './BaseDropdown.svelte';
 import BaseFlag from './BaseFlag.svelte';
 import BaseTable from './BaseTable.svelte';
 import ButtonFile from './ButtonFile.svelte';
+import CardCheckbox from './CardCheckbox.svelte';
 import CardRelation from './CardRelation.svelte';
 import CompanySelector from './CompanySelector.svelte';
 import CounterWorkflow from './CounterWorkflow.svelte';
@@ -48,4 +49,4 @@ import twTheme from './tw.theme.js';
 import { resolveIcon } from './helpers.js';
 import { getCountryName } from './helpers.js';
 import { getStatusType } from './helpers.js';
-export { BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, ButtonFile, CardRelation, CompanySelector, CounterWorkflow, DataListItem, DatePicker, DrawerContext, DropdownSelect, EmptyStateIcon, EmptyStateIllustration, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, ProfileAvatar, ProfileSelector, SectionLayout, SeparatorHorizontal, ShortcutWrapper, StatusLabel, Tabs, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, UuidCopy, twTheme, resolveIcon, getCountryName, getStatusType };
+export { BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, ButtonFile, CardCheckbox, CardRelation, CompanySelector, CounterWorkflow, DataListItem, DatePicker, DrawerContext, DropdownSelect, EmptyStateIcon, EmptyStateIllustration, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, ProfileAvatar, ProfileSelector, SectionLayout, SeparatorHorizontal, ShortcutWrapper, StatusLabel, Tabs, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, UuidCopy, twTheme, resolveIcon, getCountryName, getStatusType };

package/dist/index.js

@@ -5,6 +5,7 @@ import BaseDropdown from './BaseDropdown.svelte'
 import BaseFlag from './BaseFlag.svelte'
 import BaseTable from './BaseTable.svelte'
 import ButtonFile from './ButtonFile.svelte'
+import CardCheckbox from './CardCheckbox.svelte'
 import CardRelation from './CardRelation.svelte'
 import CompanySelector from './CompanySelector.svelte'
 import CounterWorkflow from './CounterWorkflow.svelte'
@@ -55,6 +56,7 @@ export {
   BaseFlag,
   BaseTable,
   ButtonFile,
+  CardCheckbox,
   CardRelation,
   CompanySelector,
   CounterWorkflow,

package/dist/types.d.ts

@@ -24,6 +24,7 @@ export type DrawerOption = SelectOption & {
     country?: string;
     color?: StatusType;
     picture?: string;
+    sandbox?: boolean;
 };
 export type Company = {
     id: string;
@@ -31,6 +32,7 @@ export type Company = {
     name: string;
     country?: string;
     logo_url?: string;
+    sandbox?: boolean;
 };
 export type FeedEvent = {
     status: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",