@invopop/popui 0.0.92 → 0.0.94

package/dist/BaseButton.svelte

@@ -47,7 +47,7 @@ $:
     { "py-1.5": big && $$slots.default },
     { "py-1": !big && $$slots.default },
     { "text-white": ["primary", "danger", "dark", "warning"].includes(variant) },
-    { "text-neutral-800": ["default", "secondary"].includes(variant) },
+    { "text-neutral-800": ["default", "secondary", "outline"].includes(variant) },
     { "border border-white-10 hover:border-white-20 active:border-white-40": variant === "dark" },
     {
       "border border-neutral-200 hover:bg-neutral-100 active:border-neutral-300 active:bg-neutral-200": variant === "default"

package/dist/BaseTableActions.svelte

@@ -13,7 +13,7 @@ $:
     label: a.label,
     value: a,
     icon: a.icon,
-    footer: a.footer,
+    separator: a.separator,
     destructive: a.destructive
   }));
 $:

package/dist/DrawerContext.svelte

@@ -1,15 +1,12 @@
 <script>import DrawerContextItem from "./DrawerContextItem.svelte";
 import InputSearch from "./InputSearch.svelte";
 import { createEventDispatcher } from "svelte";
+import DrawerContextSeparator from "./DrawerContextSeparator.svelte";
 const dispatch = createEventDispatcher();
 export let items = [];
 export let multiple = false;
 export let searchable = false;
 export let widthClass = "w-60";
-$:
-  mainItems = items.filter((i) => !i.footer);
-$:
-  footerItems = items.filter((i) => i.footer);
 $:
   selectedItems = items.filter((i) => i.selected);
 $:
@@ -32,17 +29,13 @@ function updateItem(event) {
       <InputSearch placeholder="Search" />
     </div>
   {/if}
-  <ul class="px-1 space-y-1 max-h-80 overflow-y-auto">
-    {#each mainItems as item}
-      <DrawerContextItem {item} {multiple} on:click on:change={updateItem} />
+  <ul class="space-y-0.5 max-h-80 overflow-y-auto">
+    {#each items as item}
+      {#if item.separator}
+        <DrawerContextSeparator />
+      {:else}
+        <DrawerContextItem {item} {multiple} on:click on:change={updateItem} />
+      {/if}
     {/each}
   </ul>
-  {#if footerItems.length}
-    <hr class="!my-1 border-neutral-100" />
-    <ul class="px-1 space-y-1">
-      {#each footerItems as item}
-        <DrawerContextItem {item} {multiple} on:click />
-      {/each}
-    </ul>
-  {/if}
 </div>

package/dist/DrawerContextItem.svelte

@@ -18,11 +18,11 @@ $:
 $:
   styles = clsx(
     { "py-1 space-x-3": workspace },
-    { "py-1.5 space-x-1": !workspace },
-    { "px-1.5": hasIcon },
-    { "px-2": !hasIcon },
+    { "py-1.5 space-x-1.5": !workspace },
+    { "pl-1.5": hasIcon },
+    { "pl-2": !hasIcon },
     { "bg-workspace-accent-100": item.selected && !multiple },
-    { "hover:bg-neutral-100 rounded": !item.selected }
+    { "group-hover:bg-neutral-100": !item.selected || multiple }
   );
 $:
   labelStyles = clsx(
@@ -42,7 +42,8 @@ onMount(() => {
 
 <button
   bind:this={el}
-  class="{styles} border border-transparent rounded pr-2 flex items-center justify-start w-full"
+  class="w-full px-1 py-0.5 disabled:opacity-30 group"
+  disabled={item.disabled}
   on:click|stopPropagation={() => {
     if (multiple) {
       item.selected = !item.selected
@@ -52,39 +53,45 @@ onMount(() => {
     }
   }}
 >
-  {#if workspace}
-    <ProfileAvatar name={item.label} picture={item.picture} large />
-  {:else if item.icon}
-    <Icon
-      src={item.icon}
-      class="w-4 h-4 {item.destructive ? 'text-danger-500' : item.iconClass || 'text-neutral-500'}"
-    />
-  {/if}
-  <div class="whitespace-nowrap flex-1 text-left flex flex-col truncate" title={item.label}>
-    <span class="flex items-center space-x-1.5">
-      {#if item.color}
-        <TagStatus status={item.color} dot />
-      {/if}
-      <span class="{labelStyles} text-base font-medium truncate">{item.label}</span>
-    </span>
-
-    {#if item.country}
-      <span class="flex space-x-1 items-center">
-        <BaseFlag country={item.country} width={10} />
-        <span class="text-sm text-neutral-500 tracking-normal">{getCountryName(item.country)}</span>
+  <div class="{styles} rounded pr-1.5 flex items-center justify-start w-full">
+    {#if workspace}
+      <ProfileAvatar name={item.label} picture={item.picture} large />
+    {:else if item.icon}
+      <Icon
+        src={item.icon}
+        class="w-4 h-4 {item.destructive
+          ? 'text-danger-500'
+          : item.iconClass || 'text-neutral-500'}"
+      />
+    {/if}
+    <div class="whitespace-nowrap flex-1 text-left flex flex-col truncate" title={item.label}>
+      <span class="flex items-center space-x-1.5">
+        {#if item.color}
+          <TagStatus status={item.color} dot />
+        {/if}
+        <span class="{labelStyles} text-base font-medium truncate">{item.label}</span>
       </span>
+
+      {#if item.country}
+        <span class="flex space-x-1 items-center">
+          <BaseFlag country={item.country} width={10} />
+          <span class="text-sm text-neutral-500 tracking-normal"
+            >{getCountryName(item.country)}</span
+          >
+        </span>
+      {/if}
+    </div>
+    {#if multiple}
+      <InputCheckbox
+        bind:checked={item.selected}
+        on:change={() => {
+          dispatch('change', item)
+        }}
+      />
+    {:else if item.selected}
+      <Icon src={Tick} class="w-5 h-5 text-workspace-accent text-neutral-500" />
+    {:else if item.rightIcon}
+      <Icon src={item.rightIcon} class="w-5 h-5 text-neutral-800" />
     {/if}
   </div>
-  {#if multiple}
-    <InputCheckbox
-      bind:checked={item.selected}
-      on:change={() => {
-        dispatch('change', item)
-      }}
-    />
-  {:else if item.selected}
-    <Icon src={Tick} class="w-5 h-5 text-workspace-accent text-neutral-500" />
-  {:else if item.rightIcon}
-    <Icon src={item.rightIcon} class="w-5 h-5 text-neutral-800" />
-  {/if}
 </button>

package/dist/DrawerContextSeparator.svelte

@@ -0,0 +1 @@
+<li class="bg-neutral-100 h-px w-full" />

package/dist/DrawerContextSeparator.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  DrawerContextSeparatorProps */
+/** @typedef {typeof __propDef.events}  DrawerContextSeparatorEvents */
+/** @typedef {typeof __propDef.slots}  DrawerContextSeparatorSlots */
+export default class DrawerContextSeparator extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DrawerContextSeparatorProps = typeof __propDef.props;
+export type DrawerContextSeparatorEvents = typeof __propDef.events;
+export type DrawerContextSeparatorSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/Notification.svelte

@@ -7,9 +7,15 @@ $:
   icon = getIcon(type);
 $:
   styles = clsx(
-    { "text-positive-500 bg-positive-50": type === "success" },
-    { "text-danger-500 bg-danger-50": type === "error" },
-    { "text-yellow-500 bg-yellow-50": type === "warning" }
+    { "bg-positive-50": type === "success" },
+    { "bg-danger-50": type === "error" },
+    { "bg-yellow-50": type === "warning" }
+  );
+$:
+  textStyles = clsx(
+    { "text-positive-500": type === "success" },
+    { "text-danger-500": type === "error" },
+    { "text-yellow-500": type === "warning" }
   );
 function getIcon(type2) {
   switch (type2) {
@@ -29,6 +35,6 @@ function getIcon(type2) {
   {#if icon}
     <Icon src={icon} class="h-4 w-4" />
   {/if}
-  <span class="flex-1">{message}</span>
+  <span class="{textStyles} flex-1">{message}</span>
   <slot />
 </div>

package/dist/index.d.ts

@@ -19,6 +19,7 @@ import DataListItem from './DataListItem.svelte';
 import DatePicker from './DatePicker.svelte';
 import DrawerContext from './DrawerContext.svelte';
 import DrawerContextItem from './DrawerContextItem.svelte';
+import DrawerContextSeparator from './DrawerContextSeparator.svelte';
 import DropdownSelect from './DropdownSelect.svelte';
 import EmptyStateIcon from './EmptyStateIcon.svelte';
 import EmptyStateIllustration from './EmptyStateIllustration.svelte';
@@ -73,4 +74,4 @@ import twTheme from './tw.theme.js';
 import { resolveIcon } from './helpers.js';
 import { getCountryName } from './helpers.js';
 import { getStatusType } from './helpers.js';
-export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, BaseTableActions, BaseTableHeaderContent, Breadcrumbs, ButtonFile, ButtonUuidCopy, CardCheckbox, CardRelation, ComboBox, CompanySelector, CounterWorkflow, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DropdownSelect, EmptyStateIcon, EmptyStateIllustration, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProfileSelector, SectionLayout, SeparatorHorizontal, ShortcutWrapper, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, twTheme, resolveIcon, getCountryName, getStatusType };
+export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, BaseTableActions, BaseTableHeaderContent, Breadcrumbs, ButtonFile, ButtonUuidCopy, CardCheckbox, CardRelation, ComboBox, CompanySelector, CounterWorkflow, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, EmptyStateIcon, EmptyStateIllustration, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProfileSelector, SectionLayout, SeparatorHorizontal, ShortcutWrapper, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, twTheme, resolveIcon, getCountryName, getStatusType };

package/dist/index.js

@@ -19,6 +19,7 @@ import DataListItem from './DataListItem.svelte'
 import DatePicker from './DatePicker.svelte'
 import DrawerContext from './DrawerContext.svelte'
 import DrawerContextItem from './DrawerContextItem.svelte'
+import DrawerContextSeparator from './DrawerContextSeparator.svelte'
 import DropdownSelect from './DropdownSelect.svelte'
 import EmptyStateIcon from './EmptyStateIcon.svelte'
 import EmptyStateIllustration from './EmptyStateIllustration.svelte'
@@ -92,6 +93,7 @@ export {
   DatePicker,
   DrawerContext,
   DrawerContextItem,
+  DrawerContextSeparator,
   DropdownSelect,
   EmptyStateIcon,
   EmptyStateIllustration,

package/dist/types.d.ts

@@ -16,7 +16,7 @@ export type SelectOption = {
     value: AnyProp;
 };
 export type DrawerOption = SelectOption & {
-    footer?: boolean;
+    separator?: boolean;
     destructive?: boolean;
     selected?: boolean;
     icon?: IconSource | undefined;
@@ -26,6 +26,7 @@ export type DrawerOption = SelectOption & {
     picture?: string;
     sandbox?: boolean;
     iconClass?: string;
+    disabled?: boolean;
 };
 export type Company = {
     id: string;
@@ -84,9 +85,9 @@ export type TableDataRow = {
 };
 export type TableAction = {
     icon?: IconSource;
-    label: string;
-    slug: string;
-    footer?: boolean;
+    label?: string;
+    slug?: string;
+    separator?: boolean;
     destructive?: boolean;
     value?: AnyProp;
 };

package/package.json

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