{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings #-}
{-# LANGUAGE RecordWildCards #-}
module Miso.UI.Table
(
TableProps (..)
, defaultTableProps
, table_
, tableUsage
, tableSample
, tableCodeSample
, tablePropsApi
) where
import Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
data TableProps action
= TableProps
{ forall action. TableProps action -> [MisoString]
tableClasses :: [MisoString]
, forall action. TableProps action -> [MisoString]
tableWrapperClasses :: [MisoString]
, forall action. TableProps action -> [Attribute action]
tableAttrs :: [Attribute action]
}
defaultTableProps :: TableProps action
defaultTableProps :: forall action. TableProps action
defaultTableProps
= TableProps
{ tableClasses :: [MisoString]
tableClasses = []
, tableWrapperClasses :: [MisoString]
tableWrapperClasses = []
, tableAttrs :: [Attribute action]
tableAttrs = []
}
table_
:: TableProps action
-> [View model action]
-> View model action
table_ :: forall action model.
TableProps action -> [View model action] -> View model action
table_ TableProps {[MisoString]
[Attribute action]
tableClasses :: forall action. TableProps action -> [MisoString]
tableWrapperClasses :: forall action. TableProps action -> [MisoString]
tableAttrs :: forall action. TableProps action -> [Attribute action]
tableClasses :: [MisoString]
tableWrapperClasses :: [MisoString]
tableAttrs :: [Attribute action]
..} [View model action]
kids =
[Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
[ [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_ (MisoString
"relative" MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: MisoString
"w-full" MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: MisoString
"overflow-x-auto" MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: [MisoString]
tableWrapperClasses) ]
[ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.table_
( [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_ (MisoString
"table" MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: [MisoString]
tableClasses)
Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Attribute action]
tableAttrs
) [View model action]
kids
]
tableUsage :: View model action
tableUsage :: forall model action. View model action
tableUsage =
TableProps action -> [View model action] -> View model action
forall action model.
TableProps action -> [View model action] -> View model action
table_ TableProps action
forall action. TableProps action
defaultTableProps
[ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.caption_ [] [ View model action
"A list of your recent invoices." ]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.thead_ []
[ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.tr_ []
[ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.th_ [] [ View model action
"Invoice" ]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.th_ [] [ View model action
"Status" ]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.th_ [] [ View model action
"Amount" ]
]
]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.tbody_ []
[ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.tr_ []
[ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.td_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"font-medium" ] [ View model action
"INV001" ]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.td_ [] [ View model action
"Paid" ]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.td_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"text-right" ] [ View model action
"$250.00" ]
]
]
]
tableSample :: View model action
tableSample :: forall model action. View model action
tableSample =
TableProps action -> [View model action] -> View model action
forall action model.
TableProps action -> [View model action] -> View model action
table_ TableProps action
forall action. TableProps action
defaultTableProps
[ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.caption_ [] [ View model action
"A list of your recent invoices." ]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.thead_ []
[ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.tr_ []
[ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.th_ [] [ View model action
"Invoice" ]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.th_ [] [ View model action
"Status" ]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.th_ [] [ View model action
"Method" ]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.th_ [] [ View model action
"Amount" ]
]
]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.tbody_ []
[ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.tr_ []
[ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.td_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"font-medium" ] [ MisoString -> View model action
forall model action. MisoString -> View model action
text MisoString
invoice ]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.td_ [] [ MisoString -> View model action
forall model action. MisoString -> View model action
text MisoString
status ]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.td_ [] [ MisoString -> View model action
forall model action. MisoString -> View model action
text MisoString
method ]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.td_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"text-right" ] [ MisoString -> View model action
forall model action. MisoString -> View model action
text MisoString
amount ]
]
| (MisoString
invoice, MisoString
status, MisoString
method, MisoString
amount) <- [(MisoString, MisoString, MisoString, MisoString)]
invoices
]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.tfoot_ []
[ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.tr_ []
[ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.td_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.colspan_ MisoString
"3" ] [ View model action
"Total" ]
, [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.td_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"text-right" ] [ View model action
"$2,500.00" ]
]
]
]
where
invoices :: [(MisoString, MisoString, MisoString, MisoString)]
invoices =
[ (MisoString
"INV001", MisoString
"Paid", MisoString
"Credit Card", MisoString
"$250.00")
, (MisoString
"INV002", MisoString
"Pending", MisoString
"PayPal", MisoString
"$150.00")
, (MisoString
"INV003", MisoString
"Unpaid", MisoString
"Bank Transfer", MisoString
"$350.00")
, (MisoString
"INV004", MisoString
"Paid", MisoString
"Paypal", MisoString
"$450.00")
, (MisoString
"INV005", MisoString
"Paid", MisoString
"Credit Card", MisoString
"$550.00")
, (MisoString
"INV006", MisoString
"Pending", MisoString
"Bank Transfer", MisoString
"$200.00")
, (MisoString
"INV007", MisoString
"Unpaid", MisoString
"Credit Card", MisoString
"$300.00")
]
tableCodeSample :: View model action
tableCodeSample :: forall model action. View model action
tableCodeSample =
View model action
"""
-----------------------------------------------------------------------------
module MyTable (tableUsage) where
-----------------------------------------------------------------------------
import Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
import Miso.UI.Table
-----------------------------------------------------------------------------
tableUsage :: View model action
tableUsage =
table_ defaultTableProps
[ H.caption_ [] [ "A list of your recent invoices." ]
, H.thead_ []
[ H.tr_ []
[ H.th_ [] [ "Invoice" ]
, H.th_ [] [ "Status" ]
, H.th_ [] [ "Amount" ]
]
]
, H.tbody_ []
[ H.tr_ []
[ H.td_ [ P.class_ "font-medium" ] [ "INV001" ]
, H.td_ [] [ "Paid" ]
, H.td_ [ P.class_ "text-right" ] [ "$250.00" ]
]
]
]
"""
tablePropsApi :: View model action
tablePropsApi :: forall model action. View model action
tablePropsApi =
View model action
"""
-- | Props for 'table_'
data TableProps action
= TableProps
{ tableClasses :: [MisoString]
-- ^ Extra classes appended to the @table@
, tableWrapperClasses :: [MisoString]
-- ^ Extra classes appended to the scrollable wrapper
, tableAttrs :: [Attribute action]
}
-----------------------------------------------------------------------------
-- | Smart constructor
defaultTableProps :: TableProps action
defaultTableProps
= TableProps
{ tableClasses = []
, tableWrapperClasses = []
, tableAttrs = []
}
"""