@invopop/popui 0.0.93 → 0.0.95

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/CardCheckbox.svelte

@@ -1,24 +1,26 @@
 <script>import clsx from "clsx";
 import { Icon } from "@steeze-ui/svelte-icon";
 import InputRadio from "./InputRadio.svelte";
-export let id;
+export let id = Math.random().toString(36).slice(2, 7);
+export let name = "";
 export let title = "";
 export let description = "";
 export let accentText = "";
 export let checked = false;
+export let icon = void 0;
+export let hideRadio = false;
 $:
   styles = clsx(
     { "border-workspace-accent shadow-active": checked },
     { "border-neutral-200 hover:border-neutral-300": !checked }
   );
-export let icon = void 0;
 </script>
 
 <label for={id} class="{styles} 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 space-x-2">
       {#if icon}
-        <Icon src={icon} class="h-5 w-5 mt-0.5 text-neutral-800 flex-shrink-0" />
+        <Icon src={icon} class="h-5 w-5 mt-0.5 text-neutral-500 flex-shrink-0" />
       {/if}
       <div class="flex flex-col space-y-0.5">
         <span class="text-base text-neutral-800 font-medium">{title}</span>
@@ -31,13 +33,13 @@ export let icon = void 0;
               {description}
             </p>
           </span>
-        {:else}
-          <span class="text-sm text-neutral-300">No description</span>
         {/if}
       </div>
     </div>
 
-    <InputRadio {id} {checked} on:change />
+    <div class:hidden={hideRadio}>
+      <InputRadio {id} {name} {checked} on:change />
+    </div>
   </div>
   {#if !!$$slots.footer}
     <div class="bg-neutral-50 rounded-b-lg px-3 py-2.5 border-t border-neutral-100">

package/dist/CardCheckbox.svelte.d.ts

@@ -2,12 +2,14 @@ import { SvelteComponent } from "svelte";
 import { type IconSource } from '@steeze-ui/svelte-icon';
 declare const __propDef: {
     props: {
-        id: any;
+        id?: string | undefined;
+        name?: string | undefined;
         title?: string | undefined;
         description?: string | undefined;
         accentText?: string | undefined;
         checked?: boolean | undefined;
         icon?: IconSource | undefined;
+        hideRadio?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

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/InputRadio.svelte

@@ -1,7 +1,8 @@
 <script>import { createEventDispatcher } from "svelte";
 import { dispatchWcEvent } from "./wcdispatch.js";
 export let checked = false;
-export let id = "";
+export let id = Math.random().toString(36).slice(2, 7);
+export let name = "";
 let el;
 const dispatch = createEventDispatcher();
 $:
@@ -21,6 +22,7 @@ function updateInput(event) {
   bind:this={el}
   type="radio"
   {id}
+  {name}
   {checked}
   class="form-radio h-5 w-5 border-neutral-200 text-workspace-accent focus:ring-0 focus:ring-offset-0 cursor-pointer"
   {...$$restProps}

package/dist/InputRadio.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         checked?: boolean | undefined;
         id?: string | undefined;
+        name?: string | undefined;
     };
     events: {
         change: CustomEvent<any>;

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.93",
+  "version": "0.0.95",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",