doc: minimal doc for Sortable + pub styles

src/lib.rs

@@ -29,6 +29,50 @@ pub fn Styles() -> impl IntoView {
     view! { <Style id="leptos-sp-sortable">{SORTABLE_CSS}</Style> }
 }
 
+/// Display drag-sortable sequence.
+///
+/// Drag-n-drop implementation relies on CSS classes, so make sure to include `<leptos_sp_sortable::Styles/>`
+/// somewhere in your page's markup
+///
+/// ## Examples
+///
+/// **Default drag handle and gap**
+///
+/// ```
+/// # use leptos::prelude::*;
+/// # #[component]
+/// # fn Example() -> impl IntoView {
+/// # use leptos_sp_sortable::{Sortable, Item};
+/// # let data = RwSignal::new(vec![Item::new(0)]);
+/// view!{
+///     <Sortable
+///         data
+///         item={move |i| view!{<div>{i.into_inner()}</div>}}
+///     />
+/// }
+/// # }
+/// ```
+///
+/// **Custom drag handle and gap**
+///
+/// ```
+/// # use leptos::prelude::*;
+/// # #[component]
+/// # fn Example() -> impl IntoView {
+/// # use leptos_sp_sortable::{Sortable, Item};
+/// # let data = RwSignal::new(vec![Item::new(0)]);
+/// view!{
+///     <Sortable
+///         data
+///         item={move |i| view!{<div>{i.into_inner()}</div>}}
+///         gap={move |h: Signal<f64>| {
+///             view!{<div style:height={move || format!("{}px", h.get())}/>
+///         }}}
+///         handle={move || view!{"🤟"}}
+///     />
+/// }
+/// # }
+/// ```
 #[component]
 pub fn Sortable<T, ItemFn, ItemView>(
     data: T,
@@ -106,7 +150,6 @@ where
     on_cleanup(|| set_dragging_cursor(false));
 
     view! { class=SORTABLE,
-        <Styles />
         <ul node_ref={ul_ref}>
             <ForEnumerate
                 each={move || items.get()}
@@ -252,7 +295,7 @@ where
     }
 }
 
-styly!(const sortable:scss {"
+styly!(pub const sortable:scss {"
     ul {
         display: flex;
         flex-direction: column;