Feature Summary

I intend to implement a modal component with the following specifications:

• Expose some events such as toggle
• Expose options and props for further modification
• Work as modal and popup

How might the modal component look like?

<script>
  import { Modal } from "svelte-admin";

 const open = false
 const title = ''
 const toggle = () =>  open= !open

  const props = {
   /* properties */ 
  }
</script>

  <Modal {...props} {toggle} {open} {title}>
   <!-- content -->
  </Modal>

This implementation is almost experimental and is subject to change for the final look!

Feature Summary

I intend to implement a dropdown component with the following specifications:

• Expose selected value
• Pass options as props

How might the modal component look like?

<script>
  import { Dropdown } from "svelte-admin";

  const options = []
  const setSelected = () => { /* set data */ }
</script>

  <Dropdown on:select={setSelected} {options} />

Feature Summary

I intend to implement a table component with the following feature:

• Pass theme options as props

How might the table component look like?

<script>
  import { Table } from "svelte-admin";

  const props = {
   bordered: true,
   dark: false,
   responsive: true,
  // ...
}
</script>

  <Table {...props}>
      <thead>
          <tr>
             <!-- content -->
          </tr>
      </thead>
      <tbody>
         <tr>
           <!-- content -->
         </tr>
     </tbody>
  <Table>

Feature Summary

I would like to create a text-field component that has the following features:

• Specify input type(e.g. text, number, password)

• Bind events(e.g. onInput,onChange, etc)

• Set icon to input

• Specify common input props (e.g. disabled, label , placeholder, class)

• Ability to change to textarea control

• set validation state

And it will be used as follows:

<script>
  import { TextField } from "svelte-admin";

  const props = {
   placeholder: "enter first name",
   label: "first name",
   disabled: true,
   valid: true
   /* more */ 
  }
let inputValue = ""
let focused = false
let changeValue = ""
let inputValue = ""
</script>

  <Textfield
    {...props}
    textarea
    bind:value={inputValue}
    on:blur={() => focused = false}
    on:focus={() => focused = true}
    on:change={e => (changeValue = e.target.value)}
    on:input={e => (inputValue = e.target.value)}>
           /* icon element */ 
   </Textfield>

Feature Summary

I intend to implement a button component with the following specifications:

• Colored or outlined button according to disparate states (e.g. disabled, primary, etc.)
• Block or inline button
• Specify button size
• Bind event
• Prepend icon

How does the final Button component look like?

<script>
  import { Button } from "svelte-admin";

  function click() {
    /* code */
  }
  const props = {
   size: "md",
   color: "primary",
   disabled: true,
   /* more */ 
  }
</script>

  <Button {...props} on:click={click)>
    {text}
  </Button>