Added command component

jeannemas · May 13, 2024 · a1d6278 · a1d6278
1 parent 97b7c36
commit a1d6278
Show file tree

Hide file tree

Showing 35 changed files with 1,566 additions and 296 deletions.
diff --git a/.changeset/beige-tigers-punch.md b/.changeset/beige-tigers-punch.md
@@ -0,0 +1,5 @@
+---
+'@jeanne-mas/svelte-ui': patch
+---
+
+Added command component
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "@melt-ui/svelte": "^0.76.2",
     "bits-ui": "^0.21.7",
     "clsx": "^2.1.0",
+    "cmdk-sv": "^0.0.17",
     "formsnap": "^1.0.0",
     "lucide-svelte": "^0.368.0",
     "mode-watcher": "^0.3.0",
@@ -79,6 +80,10 @@
       "types": "./dist/components/collapsible/index.d.ts",
       "svelte": "./dist/components/collapsible/index.js"
     },
+    "./components/command": {
+      "types": "./dist/components/command/index.d.ts",
+      "svelte": "./dist/components/command/index.js"
+    },
     "./components/container": {
       "types": "./dist/components/container/index.d.ts",
       "svelte": "./dist/components/container/index.js"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/components/alert-dialog/AlertDialogContent.svelte b/src/lib/components/alert-dialog/AlertDialogContent.svelte
@@ -6,14 +6,22 @@
   import { flyAndScale } from '$lib/transition/flyAndScale.js';
   import type { ComponentInfo, Transition } from '$lib/utils/types.js';
 
-  import Overlay from './AlertDialogOverlay.svelte';
-  import Portal from './AlertDialogPortal.svelte';
+  import AlertDialogOverlay, {
+    type Attributes as AlertDialogOverlayAttributes,
+    type Props as AlertDialogOverlayProps,
+  } from './AlertDialogOverlay.svelte';
+  import AlertDialogPortal, {
+    type Attributes as AlertDialogPortalAttributes,
+    type Props as AlertDialogPortalProps,
+  } from './AlertDialogPortal.svelte';
 
   type Primitive<
-    TTransition extends Transition = Transition,
-    TTransitionIn extends Transition = Transition,
-    TTransitionOut extends Transition = Transition,
-  > = ComponentInfo<AlertDialogPrimitive.Content<TTransition, TTransitionIn, TTransitionOut>>;
+    TContentTransition extends Transition = Transition,
+    TContentTransitionIn extends Transition = Transition,
+    TContentTransitionOut extends Transition = Transition,
+  > = ComponentInfo<
+    AlertDialogPrimitive.Content<TContentTransition, TContentTransitionIn, TContentTransitionOut>
+  >;
 
   /**
    * The attributes of the content.
@@ -23,18 +31,28 @@
    * The props of the content.
    */
   export type Props<
-    TTransition extends Transition = Transition,
-    TTransitionIn extends Transition = Transition,
-    TTransitionOut extends Transition = Transition,
-  > = Omit<Primitive<TTransition, TTransitionIn, TTransitionOut>['props'], keyof Attributes>;
+    TContentTransition extends Transition = Transition,
+    TContentTransitionIn extends Transition = Transition,
+    TContentTransitionOut extends Transition = Transition,
+    TOverlayTransition extends Transition = Transition,
+    TOverlayTransitionIn extends Transition = Transition,
+    TOverlayTransitionOut extends Transition = Transition,
+  > = Omit<
+    Primitive<TContentTransition, TContentTransitionIn, TContentTransitionOut>['props'],
+    keyof Attributes
+  > & {
+    overlayAttributesAndProps?: AlertDialogOverlayAttributes &
+      AlertDialogOverlayProps<TOverlayTransition, TOverlayTransitionIn, TOverlayTransitionOut>;
+    portalAttributesAndProps?: AlertDialogPortalAttributes & AlertDialogPortalProps;
+  };
   /**
    * The slots of the content.
    */
   export type Slots<
-    TTransition extends Transition = Transition,
-    TTransitionIn extends Transition = Transition,
-    TTransitionOut extends Transition = Transition,
-  > = Primitive<TTransition, TTransitionIn, TTransitionOut>['slots'];
+    TContentTransition extends Transition = Transition,
+    TContentTransitionIn extends Transition = Transition,
+    TContentTransitionOut extends Transition = Transition,
+  > = Primitive<TContentTransition, TContentTransitionIn, TContentTransitionOut>['slots'];
 
   /**
    * The styles of the content.
@@ -48,23 +66,39 @@
 
 <script
   generics="
-    TTransition extends Transition = Transition,
-    TTransitionIn extends Transition = Transition,
-    TTransitionOut extends Transition = Transition,
+    TContentTransition extends Transition = Transition,
+    TContentTransitionIn extends Transition = Transition,
+    TContentTransitionOut extends Transition = Transition,
+    TOverlayTransition extends Transition = Transition,
+    TOverlayTransitionIn extends Transition = Transition,
+    TOverlayTransitionOut extends Transition = Transition,
   "
   lang="ts"
 >
-  type $$Events = Primitive<TTransition, TTransitionIn, TTransitionOut>['events'];
+  type $$Events = Primitive<
+    TContentTransition,
+    TContentTransitionIn,
+    TContentTransitionOut
+  >['events'];
   type $$Props = Attributes & TypedProps;
-  type $$Slots = Slots<TTransition, TTransitionIn, TTransitionOut>;
-  type TypedProps = Props<TTransition, TTransitionIn, TTransitionOut>;
+  type $$Slots = Slots<TContentTransition, TContentTransitionIn, TContentTransitionOut>;
+  type TypedProps = Props<
+    TContentTransition,
+    TContentTransitionIn,
+    TContentTransitionOut,
+    TOverlayTransition,
+    TOverlayTransitionIn,
+    TOverlayTransitionOut
+  >;
 
   export let asChild: TypedProps['asChild'] = undefined;
   export let el: TypedProps['el'] = undefined;
   export let inTransition: TypedProps['inTransition'] = undefined;
   export let inTransitionConfig: TypedProps['inTransitionConfig'] = undefined;
   export let outTransition: TypedProps['outTransition'] = undefined;
   export let outTransitionConfig: TypedProps['outTransitionConfig'] = undefined;
+  export let overlayAttributesAndProps: TypedProps['overlayAttributesAndProps'] = undefined;
+  export let portalAttributesAndProps: TypedProps['portalAttributesAndProps'] = undefined;
   export let transition: TypedProps['transition'] = flyAndScale as TypedProps['transition'];
   export let transitionConfig: TypedProps['transitionConfig'] = undefined;
 
@@ -74,8 +108,8 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Portal>
-  <Overlay />
+<AlertDialogPortal {...portalAttributesAndProps}>
+  <AlertDialogOverlay {...overlayAttributesAndProps} />
 
   <AlertDialogPrimitive.Content
     {...attributes}
@@ -101,4 +135,4 @@
   >
     <slot builder="{builder}" />
   </AlertDialogPrimitive.Content>
-</Portal>
+</AlertDialogPortal>
diff --git a/src/lib/components/alert-dialog/AlertDialogOverlay.svelte b/src/lib/components/alert-dialog/AlertDialogOverlay.svelte
@@ -7,10 +7,12 @@
   import type { ComponentInfo, Transition } from '$lib/utils/types.js';
 
   type Primitive<
-    TTransition extends Transition = Transition,
-    TTransitionIn extends Transition = Transition,
-    TTransitionOut extends Transition = Transition,
-  > = ComponentInfo<AlertDialogPrimitive.Overlay<TTransition, TTransitionIn, TTransitionOut>>;
+    TOverlayTransition extends Transition = Transition,
+    TOverlayTransitionIn extends Transition = Transition,
+    TOverlayTransitionOut extends Transition = Transition,
+  > = ComponentInfo<
+    AlertDialogPrimitive.Overlay<TOverlayTransition, TOverlayTransitionIn, TOverlayTransitionOut>
+  >;
 
   /**
    * The attributes of the overlay.
@@ -20,18 +22,21 @@
    * The props of the overlay.
    */
   export type Props<
-    TTransition extends Transition = Transition,
-    TTransitionIn extends Transition = Transition,
-    TTransitionOut extends Transition = Transition,
-  > = Omit<Primitive<TTransition, TTransitionIn, TTransitionOut>['props'], keyof Attributes>;
+    TOverlayTransition extends Transition = Transition,
+    TOverlayTransitionIn extends Transition = Transition,
+    TOverlayTransitionOut extends Transition = Transition,
+  > = Omit<
+    Primitive<TOverlayTransition, TOverlayTransitionIn, TOverlayTransitionOut>['props'],
+    keyof Attributes
+  >;
   /**
    * The slots of the overlay.
    */
   export type Slots<
-    TTransition extends Transition = Transition,
-    TTransitionIn extends Transition = Transition,
-    TTransitionOut extends Transition = Transition,
-  > = Primitive<TTransition, TTransitionIn, TTransitionOut>['slots'];
+    TOverlayTransition extends Transition = Transition,
+    TOverlayTransitionIn extends Transition = Transition,
+    TOverlayTransitionOut extends Transition = Transition,
+  > = Primitive<TOverlayTransition, TOverlayTransitionIn, TOverlayTransitionOut>['slots'];
 
   /**
    * The styles of the overlay.
@@ -43,16 +48,16 @@
 
 <script
   generics="
-    TTransition extends Transition = Transition,
-    TTransitionIn extends Transition = Transition,
-    TTransitionOut extends Transition = Transition,
+    TOverlayTransition extends Transition = Transition,
+    TOverlayTransitionIn extends Transition = Transition,
+    TOverlayTransitionOut extends Transition = Transition,
   "
   lang="ts"
 >
   type $$Events = Primitive['events'];
   type $$Props = Attributes & TypedProps;
-  type $$Slots = Slots<TTransition, TTransitionIn, TTransitionOut>;
-  type TypedProps = Props<TTransition, TTransitionIn, TTransitionOut>;
+  type $$Slots = Slots<TOverlayTransition, TOverlayTransitionIn, TOverlayTransitionOut>;
+  type TypedProps = Props<TOverlayTransition, TOverlayTransitionIn, TOverlayTransitionOut>;
 
   export let asChild: TypedProps['asChild'] = undefined;
   export let el: TypedProps['el'] = undefined;