opui-css 3.3.5 → 4.0.0

package/components/Checkbox/CheckboxInput.astro

@@ -0,0 +1,32 @@
+---
+type Props = {
+  [key: string]: any
+  checked?: boolean
+  disabled?: boolean
+  id?: string
+  indeterminate?: boolean
+  name?: string
+  required?: boolean
+  value?: string
+}
+
+const { checked, disabled, id, indeterminate, name, required, value, ...rest } =
+  Astro.props
+---
+
+<input
+  type="checkbox"
+  data-indeterminate={indeterminate || undefined}
+  {checked}
+  {disabled}
+  {id}
+  {name}
+  {required}
+  {value}
+  {...rest}
+/>
+
+<script>
+  import { initCheckbox } from "../../css/js/checkbox.js"
+  initCheckbox()
+</script>

package/components/Chip/Chip.astro

@@ -0,0 +1,37 @@
+---
+type Props = {
+  [key: string]: any
+  as?: "a" | "button" | "div" | string
+  class?: string
+  label?: string
+  multiline?: boolean
+  size?: "small"
+  variant?: "tonal" | "outlined"
+}
+
+export const title = "Chip"
+
+const {
+  as: Tag = Astro.props.href ? "a" : "div",
+  class: className,
+  label,
+  multiline,
+  size,
+  variant = "tonal",
+  ...rest
+} = Astro.props
+---
+
+<!-- prettier-ignore -->
+<Tag
+  class:list={[
+    "chip",
+    {
+      multiline,
+    },
+    size,
+    variant,
+    className,
+  ]}
+  {...rest}
+><slot name="start" /><slot />{label && <span class="text">{label}</span>}<slot name="end" /></Tag>

package/components/ClassicSelect/ClassicSelect.astro

@@ -0,0 +1,83 @@
+---
+type Item = {
+  text: string
+  value: any
+}
+
+type Props = {
+  [key: string]: any
+  class?: string
+  disabled?: boolean
+  critical?: boolean
+  id?: string
+  items?: Item[]
+  label?: string
+  name?: string
+  required?: boolean
+  size?: "small"
+  endText?: string
+  value?: any
+  variant?: "outlined" | "filled"
+}
+
+export const title = "Classic Select"
+
+const {
+  class: className,
+  disabled,
+  critical,
+  id,
+  items = [],
+  label,
+  name,
+  required,
+  size,
+  endText,
+  value,
+  variant = "outlined",
+  ...rest
+} = Astro.props
+
+const { $id } = Astro.locals
+const selectId = id || $id("select")
+const labelId = $id("select-label")
+---
+
+<label
+  class:list={[
+    "select",
+    size,
+    {
+      filled: variant === "filled",
+    },
+    className,
+  ]}
+  data-invalid={critical || undefined}
+>
+  {
+    label && (
+      <!-- prettier-ignore -->
+      <span class="label" id={labelId}>{label}</span>
+    )
+  }
+  <span class="field">
+    <select
+      aria-labelledby={label ? labelId : undefined}
+      disabled={disabled}
+      id={selectId}
+      name={name}
+      required={required}
+      value={value}
+      {...rest}
+    >
+      {items.map((item) => <option value={item.value}>{item.text}</option>)}
+      <slot />
+    </select>
+  </span>
+  {
+    endText && (
+      <!-- prettier-ignore -->
+      <span class="end-text">{endText}</span>
+    )
+  }
+</label>

package/components/DescriptionList/Description.astro

@@ -0,0 +1,12 @@
+---
+type Props = {
+  [key: string]: any
+  class?: string
+}
+
+const { class: className, ...rest } = Astro.props
+---
+
+<dd class:list={["description", className]} {...rest}>
+  <slot />
+</dd>

package/components/DescriptionList/DescriptionList.astro

@@ -0,0 +1,22 @@
+---
+type Props = {
+  [key: string]: any
+  bordered?: boolean | "dotted"
+  class?: string
+}
+
+export const title = "Description List"
+
+const { bordered, class: className, ...rest } = Astro.props
+---
+
+<dl
+  class:list={[
+    "description-list",
+    { bordered: bordered, dotted: bordered === "dotted" },
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</dl>

package/components/DescriptionList/Item.astro

@@ -0,0 +1,12 @@
+---
+type Props = {
+  [key: string]: any
+  class?: string
+}
+
+const { class: className, ...rest } = Astro.props
+---
+
+<div class:list={["item", className]} {...rest}>
+  <slot />
+</div>

package/components/DescriptionList/Term.astro

@@ -0,0 +1,12 @@
+---
+type Props = {
+  [key: string]: any
+  class?: string
+}
+
+const { class: className, ...rest } = Astro.props
+---
+
+<dt class:list={["term", className]} {...rest}>
+  <slot />
+</dt>

package/components/DescriptionList/index.ts

@@ -0,0 +1,12 @@
+import DescriptionList from "./DescriptionList.astro"
+import Item from "./Item.astro"
+import Term from "./Term.astro"
+import Description from "./Description.astro"
+
+export { Item, Term, Description }
+
+export default Object.assign(DescriptionList, {
+  Item,
+  Term,
+  Description,
+})

package/components/Dialog/Dialog.astro

@@ -0,0 +1,43 @@
+---
+type Props = {
+  [key: string]: any
+  actions?: {
+    align?: "end"
+  }
+  class?: string
+  closedby?: "any" | "closerequest" | "none"
+}
+
+export const title = "Dialog"
+
+const { actions, class: className, closedby, ...rest } = Astro.props
+---
+
+<dialog
+  class:list={["dialog card elevated", className]}
+  closedby={closedby}
+  {...rest}
+>
+  {
+    Astro.slots.has("header") && (
+      <hgroup>
+        <slot name="header" />
+      </hgroup>
+    )
+  }
+  {
+    Astro.slots.has("content") && (
+      <div class="content">
+        <slot name="content" />
+      </div>
+    )
+  }
+  <slot />
+  {
+    Astro.slots.has("actions") && (
+      <div class:list={["actions", actions?.align && `align-${actions.align}`]}>
+        <slot name="actions" />
+      </div>
+    )
+  }
+</dialog>

package/components/Divider/Divider.astro

@@ -0,0 +1,14 @@
+---
+type Props = {
+  [key: string]: any
+  class?: string
+  variant?: "tonal" | "filled" | "primary"
+}
+
+export const title = "Divider"
+
+const { class: className, variant, ...rest } = Astro.props
+const variantClass = variant ? `border-${variant}` : ""
+---
+
+<hr class:list={["divider", className, variantClass]} {...rest} />

package/components/Drawer/Drawer.astro

@@ -0,0 +1,49 @@
+---
+type Props = {
+  [key: string]: any
+  backdrop?: "transparent" | "blurred"
+  class?: string
+  closedby?: "any" | "closerequest" | "none"
+  id?: string
+  scrollLock?: boolean
+  side?: "inline-start" | "inline-end" | "block-start" | "block-end"
+}
+
+export const title = "Drawer"
+
+const {
+  backdrop = "blurred",
+  class: className,
+  closedby = "any",
+  id,
+  scrollLock = true,
+  side = "inline-start",
+  ...rest
+} = Astro.props
+
+const { $id } = Astro.locals
+const drawerId = id || $id("drawer")
+---
+
+<dialog
+  closedby={closedby}
+  class:list={[
+    "drawer",
+    side,
+    {
+      "backdrop-transparent": backdrop === "transparent",
+      "scroll-lock": scrollLock,
+    },
+    className,
+  ]}
+  id={drawerId}
+  {...rest}
+>
+  {Astro.slots.has("header") && <slot name="header" />}
+
+  <div class="content">
+    <slot name="content" />
+  </div>
+
+  {Astro.slots.has("footer") && <slot name="footer" />}
+</dialog>

package/components/Drawer/DrawerFooter.astro

@@ -0,0 +1,14 @@
+---
+type Props = {
+  [key: string]: any
+  class?: string
+}
+
+export const title = "Drawer Footer"
+
+const { class: className, ...rest } = Astro.props
+---
+
+<div class:list={["footer", className]} {...rest}>
+  <slot />
+</div>

package/components/Drawer/DrawerHeader.astro

@@ -0,0 +1,31 @@
+---
+import IconButton from "../IconButton/IconButton.astro"
+
+type Props = {
+  [key: string]: any
+  class?: string
+  heading?: string
+}
+
+export const title = "Drawer Header"
+
+const { class: className, heading, ...rest } = Astro.props
+---
+
+<div class:list={["header", className]} {...rest}>
+  {heading && <span>{heading}</span>}
+  <slot />
+  <IconButton onclick="this.closest('dialog').close()" title="Close">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+    >
+      <path
+        fill="currentColor"
+        d="M26.29 4.293a1 1 0 1 1 1.414 1.414L17.413 16l10.291 10.29a1 1 0 1 1-1.414 1.414L16 17.413L5.707 27.704a1 1 0 0 1-1.414-1.414L14.585 16L4.293 5.707a1 1 0 0 1 1.414-1.414L16 14.584z"
+      ></path>
+    </svg>
+  </IconButton>
+</div>

package/components/FieldDescription/FieldDescription.astro

@@ -0,0 +1,13 @@
+---
+type Props = {
+  [key: string]: any
+  class?: string
+}
+
+export const title = "Field Description"
+
+const { class: className, ...rest } = Astro.props
+---
+
+<!-- prettier-ignore -->
+<p class:list={["field-description", className]} {...rest}><slot /></p>

package/components/FieldGroup/FieldGroup.astro

@@ -0,0 +1,31 @@
+---
+type Props = {
+  [key: string]: any
+  class?: string
+  direction?: "row" | "column"
+  name?: string
+}
+
+export const title = "Field Group"
+
+const { class: className, direction, name, ...rest } = Astro.props
+
+const originalName = Astro.locals.currentFieldName
+if (name) {
+  Astro.locals.currentFieldName = name
+}
+
+let html = ""
+try {
+  html = await Astro.slots.render("default")
+} finally {
+  Astro.locals.currentFieldName = originalName
+}
+---
+
+<div
+  class:list={["field-group", direction, className]}
+  {...rest}
+  role="group"
+  set:html={html}
+/>

package/components/FieldLegend/FieldLegend.astro

@@ -0,0 +1,15 @@
+---
+type Props = {
+  [key: string]: any
+  as?: "legend" | "p" | string
+  class?: string
+}
+
+export const title = "Field Legend"
+
+const { as: Tag = "legend", class: className, ...rest } = Astro.props
+const isLegend = Tag === "legend"
+---
+
+<!-- prettier-ignore -->
+<Tag class:list={[{ legend: !isLegend }, className]} {...rest}><slot /></Tag>

package/components/FieldSet/FieldSet.astro

@@ -0,0 +1,15 @@
+---
+type Props = {
+  [key: string]: any
+  as?: "fieldset" | "div" | string
+  class?: string
+}
+
+export const title = "Field Set"
+
+const { as: Tag = "fieldset", class: className, ...rest } = Astro.props
+---
+
+<Tag class:list={["fieldset", className]} {...rest}>
+  <slot />
+</Tag>

package/components/Form/Form.astro

@@ -0,0 +1,15 @@
+---
+type Props = {
+  [key: string]: any
+  as?: "form" | "div" | string
+  class?: string
+}
+
+export const title = "Form"
+
+const { as: Tag = "form", class: className, ...rest } = Astro.props
+---
+
+<Tag class:list={["form", className]} {...rest}>
+  <slot />
+</Tag>

package/components/IconButton/IconButton.astro

@@ -0,0 +1,26 @@
+---
+type Props = {
+  [key: string]: any
+  as?: "a" | "button" | string
+  class?: string
+  color?: "critical" | "primary"
+  href?: string
+  size?: "small"
+  variant?: "outlined" | "tonal" | "filled"
+}
+
+export const title = "Icon Button"
+
+const {
+  as: Tag = Astro.props.href ? "a" : "button",
+  class: className,
+  color,
+  href,
+  size,
+  variant,
+  ...rest
+} = Astro.props
+---
+
+<!-- prettier-ignore -->
+<Tag class:list={["icon-button", size, variant, color, className]} href={href} {...rest}><slot /></Tag>

package/components/List/List.astro

@@ -0,0 +1,36 @@
+---
+type Props = {
+  bordered?: boolean
+  dense?: boolean
+  gutterless?: boolean
+  variant?: "default" | "tonal" | "transparent"
+  [key: string]: any
+}
+
+export const title = "List"
+
+const {
+  bordered,
+  class: className,
+  dense,
+  gutterless,
+  variant,
+  ...rest
+} = Astro.props
+---
+
+<ul
+  class:list={[
+    "list",
+    {
+      bordered,
+      dense,
+      gutterless,
+    },
+    variant,
+    className,
+  ]}
+  {...rest}
+>
+  <slot />
+</ul>

package/components/ListItem/ListItem.astro

@@ -0,0 +1,118 @@
+---
+type Props = {
+  as?: "a" | "button" | "div"
+  borderTop?: boolean
+  class?: string
+  description?: string
+  for?: string
+  headline?: string
+  inset?: boolean
+  type?: "checkbox" | "radio" | "switch"
+  [key: string]: any
+}
+
+export const title = "List Item"
+
+const {
+  as: Tag,
+  borderTop,
+  class: className,
+  description,
+  for: htmlFor,
+  headline,
+  inset,
+  type,
+  ...rest
+} = Astro.props
+
+const hasLabel =
+  type && (type === "checkbox" || type === "radio" || type === "switch")
+const labelClass = type || ""
+const liProps = Tag ? {} : rest
+const innerProps = Tag ? rest : {}
+---
+
+<li
+  class:list={[
+    {
+      "border-top": borderTop,
+      inset,
+    },
+    className,
+  ]}
+  {...liProps}
+>
+  {
+    // Label + checkbox/radio/switch
+    hasLabel ? (
+      <label class={labelClass} for={htmlFor}>
+        {Astro.slots.start && (
+          <div class="start">
+            <slot name="start" />
+          </div>
+        )}
+        {Astro.slots.text || headline || description ? (
+          <div class="text">
+            {headline && <p>{headline}</p>}
+            {description && <p>{description}</p>}
+            <slot name="text" />
+          </div>
+        ) : null}
+        {Astro.slots.end && (
+          <div class="end">
+            <slot name="end" />
+          </div>
+        )}
+        <slot />
+      </label>
+    ) : // With custom tag
+    Tag ? (
+      <Tag {...innerProps}>
+        {Astro.slots.start && (
+          <div class="start">
+            <slot name="start" />
+          </div>
+        )}
+        {headline || description || Astro.slots.text ? (
+          <div class="text">
+            {headline && <p>{headline}</p>}
+            {description && <p>{description}</p>}
+            <slot name="text" />
+            <slot />
+          </div>
+        ) : (
+          <slot />
+        )}
+        {Astro.slots.end && (
+          <div class="end">
+            <slot name="end" />
+          </div>
+        )}
+      </Tag>
+    ) : (
+      // Without custom tag
+      <>
+        {Astro.slots.start && (
+          <div class="start">
+            <slot name="start" />
+          </div>
+        )}
+        {headline || description || Astro.slots.text ? (
+          <div class="text">
+            {headline && <p>{headline}</p>}
+            {description && <p>{description}</p>}
+            <slot name="text" />
+            <slot />
+          </div>
+        ) : (
+          <slot />
+        )}
+        {Astro.slots.end && (
+          <div class="end">
+            <slot name="end" />
+          </div>
+        )}
+      </>
+    )
+  }
+</li>