opui-css 5.1.2 → 5.3.0

package/components/Switch/SwitchInput.astro

@@ -1,25 +1,7 @@
 ---
-type Props = {
-  [key: string]: any
-  checked?: boolean
-  disabled?: boolean
-  id?: string
-  name?: string
-  required?: boolean
-  value?: string
-}
+import type { SwitchInputProps as Props } from "./types.astro"
 
-const { checked, disabled, id, name, required, value, ...rest } = Astro.props
+const { ...rest } = Astro.props
 ---
 
-<input
-  type="checkbox"
-  role="switch"
-  {checked}
-  {disabled}
-  {id}
-  {name}
-  {required}
-  {value}
-  {...rest}
-/>
+<input type="checkbox" role="switch" {...rest} />

package/components/Switch/SwitchInput.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { SwitchInputProps } from "./types"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<SwitchInputProps>()
+const modelValue = defineModel<boolean | (string | number)[]>()
+</script>
+
+<template>
+  <input type="checkbox" role="switch" v-bind="$attrs" v-model="modelValue" />
+</template>

package/components/Switch/types.astro.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type SwitchProps = Base.SwitchProps & HTMLAttributes<"input">
+export type SwitchInputProps = Base.SwitchInputProps & HTMLAttributes<"input">

package/components/Switch/types.d.vue.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { SwitchProps as BaseSwitchProps } from "./types"
+
+export type SwitchProps = BaseSwitchProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+  "end-text"?: Slot
+  "icon-checked"?: Slot
+  "icon-unchecked"?: Slot
+}

package/components/Switch/types.solid.ts

@@ -0,0 +1,9 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type SwitchProps = Base.SwitchProps &
+  JSX.InputHTMLAttributes<HTMLInputElement> &
+  Base.SwitchSlots<JSX.Element>
+
+export type SwitchInputProps = Base.SwitchInputProps &
+  JSX.InputHTMLAttributes<HTMLInputElement>

package/components/Switch/types.svelte.ts

@@ -0,0 +1,9 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+export type SwitchProps = Base.SwitchProps &
+  Base.SwitchSlots<Snippet> &
+  SvelteHTMLElements["input"]
+export type SwitchInputProps = Base.SwitchInputProps &
+  SvelteHTMLElements["input"]

package/components/Switch/types.ts

@@ -0,0 +1,16 @@
+export type SwitchProps = {
+  error?: boolean
+  hideLabel?: boolean
+  small?: boolean
+  spread?: boolean
+  stack?: boolean
+}
+
+export type SwitchSlots<S> = {
+  children?: S
+  endText?: string | S
+  iconUnchecked?: S
+  iconChecked?: S
+}
+
+export type SwitchInputProps = {}

package/components/Table/Body.astro

@@ -1,7 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-}
+import type { SectionProps as Props } from "./types.astro"
 
 export const title = "Table Body"
 

package/components/Table/Body.vue

@@ -0,0 +1,5 @@
+<template>
+  <tbody>
+    <slot></slot>
+  </tbody>
+</template>

package/components/Table/Cell.astro

@@ -1,7 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-}
+import type { SectionProps as Props } from "./types.astro"
 
 export const title = "Table Cell"
 

package/components/Table/Cell.vue

@@ -0,0 +1,5 @@
+<template>
+  <td>
+    <slot></slot>
+  </td>
+</template>

package/components/Table/Column.astro

@@ -1,8 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  width?: string
-}
+import type { ColumnProps as Props } from "./types.astro"
 
 export const title = "Table Column"
 

package/components/Table/Column.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ColumnProps } from "./types"
+
+const { width } = defineProps<ColumnProps>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const colStyle = width
+  ? width.includes(":")
+    ? width
+    : `width: ${width}`
+  : undefined
+</script>
+
+<template>
+  <col :style="colStyle" v-bind="$attrs" />
+</template>

package/components/Table/ColumnGroup.astro

@@ -1,7 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-}
+import type { SectionProps as Props } from "./types.astro"
 
 export const title = "Table Column Group"
 

package/components/Table/ColumnGroup.vue

@@ -0,0 +1,5 @@
+<template>
+  <colgroup>
+    <slot></slot>
+  </colgroup>
+</template>

package/components/Table/Head.astro

@@ -1,7 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-}
+import type { SectionProps as Props } from "./types.astro"
 
 export const title = "Table Head"
 

package/components/Table/Head.vue

@@ -0,0 +1,5 @@
+<template>
+  <thead>
+    <slot></slot>
+  </thead>
+</template>

package/components/Table/HeaderCell.astro

@@ -1,7 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-}
+import type { SectionProps as Props } from "./types.astro"
 
 export const title = "Table Header Cell"
 

package/components/Table/HeaderCell.vue

@@ -0,0 +1,5 @@
+<template>
+  <th>
+    <slot></slot>
+  </th>
+</template>

package/components/Table/Row.astro

@@ -1,7 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-}
+import type { SectionProps as Props } from "./types.astro"
 
 export const title = "Table Row"
 

package/components/Table/Row.vue

@@ -0,0 +1,5 @@
+<template>
+  <tr>
+    <slot></slot>
+  </tr>
+</template>

package/components/Table/Table.astro

@@ -1,9 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  variant?: "dense" | "spacious"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Table"
 

package/components/Table/Table.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const { variant } = defineProps<Props>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+</script>
+
+<template>
+  <table
+    :class="['ui-table', variant && `ui-${variant}`, $props.class]"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </table>
+</template>

package/components/Table/types.astro.ts

@@ -0,0 +1,16 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"table">
+
+export type SectionProps = Base.SectionProps &
+  (
+    | HTMLAttributes<"tr">
+    | HTMLAttributes<"tbody">
+    | HTMLAttributes<"thead">
+    | HTMLAttributes<"th">
+    | HTMLAttributes<"td">
+    | HTMLAttributes<"colgroup">
+  )
+
+export type ColumnProps = Base.ColumnProps & HTMLAttributes<"col">

package/components/Table/types.d.vue.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}

package/components/Table/types.solid.ts

@@ -0,0 +1,8 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props & JSX.HTMLAttributes<HTMLTableElement>
+export type SectionProps = Base.SectionProps &
+  JSX.HTMLAttributes<HTMLTableSectionElement>
+export type ColumnProps = Base.ColumnProps &
+  JSX.HTMLAttributes<HTMLTableColElement>

package/components/Table/types.svelte.ts

@@ -0,0 +1,11 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type ColumnProps = Base.ColumnProps & SvelteHTMLElements["col"]
+export type Props = Base.Props & SvelteHTMLElements["table"]
+export type SectionProps = Base.SectionProps &
+  (
+    | SvelteHTMLElements["tbody"]
+    | SvelteHTMLElements["tfoot"]
+    | SvelteHTMLElements["thead"]
+  )

package/components/Table/types.ts

@@ -0,0 +1,9 @@
+export type Props = {
+  variant?: "dense" | "spacious"
+}
+
+export type SectionProps = {}
+
+export type ColumnProps = {
+  width?: string
+}

package/components/Tabs/Tabs.astro

@@ -1,9 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  name?: string
-}
+import type { Props } from "./types.astro"
 
 export const title = "Tabs"
 

package/components/Tabs/Tabs.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { provide, useId } from "vue"
+import { TabsGroupNameKey, type Props, type Slots } from "./types.d.vue"
+
+const { name } = defineProps<Props>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const groupName = name || useId()
+provide(TabsGroupNameKey, groupName)
+</script>
+
+<template>
+  <div :class="['ui-tabs', $props.class]" role="tablist" v-bind="$attrs">
+    <slot></slot>
+  </div>
+</template>

package/components/Tabs/TabsItem.astro

@@ -1,12 +1,5 @@
 ---
-type Props = {
-  class?: string
-  name?: string
-  open?: boolean
-  tabId?: string
-  panelId?: string
-  [key: string]: any
-}
+import type { TabsItemProps as Props } from "./types.astro"
 
 const { $id } = Astro.locals
 const {

package/components/Tabs/TabsItem.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { inject, provide, useId } from "vue"
+import {
+  CurrentPanelIdKey,
+  CurrentTabIdKey,
+  TabsGroupNameKey,
+  type Slots,
+  type TabsItemProps,
+} from "./types.d.vue"
+
+const { name, open, panelId, tabId } = defineProps<TabsItemProps>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const tabsGroupName = name || inject(TabsGroupNameKey, undefined) || useId()
+provide(TabsGroupNameKey, tabsGroupName)
+
+const computedTabId = tabId || useId()
+const computedPanelId = panelId || useId()
+
+provide(CurrentTabIdKey, computedTabId)
+provide(CurrentPanelIdKey, computedPanelId)
+</script>
+
+<template>
+  <input
+    :aria-controls="computedPanelId"
+    :checked="open"
+    :class="['ui-tab-input', $props.class]"
+    :id="computedTabId"
+    :name="tabsGroupName"
+    type="radio"
+    v-bind="$attrs"
+  />
+  <slot></slot>
+</template>

package/components/Tabs/TabsPanel.astro

@@ -1,10 +1,5 @@
 ---
-type Props = {
-  class?: string
-  panelId?: string
-  tabId?: string
-  [key: string]: any
-}
+import type { TabsPanelProps as Props } from "./types.astro"
 
 const { class: className, panelId, tabId, ...rest } = Astro.props
 const { currentPanelId, currentTabId } = Astro.locals

package/components/Tabs/TabsPanel.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { inject } from "vue"
+import {
+  CurrentPanelIdKey,
+  CurrentTabIdKey,
+  type Slots,
+  type TabsPanelProps,
+} from "./types.d.vue"
+
+const { panelId, tabId } = defineProps<TabsPanelProps>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const currentPanelId = inject(CurrentPanelIdKey, undefined)
+const currentTabId = inject(CurrentTabIdKey, undefined)
+</script>
+
+<template>
+  <div
+    :id="panelId || currentPanelId"
+    :class="['ui-tab-panel', $props.class]"
+    role="tabpanel"
+    :aria-labelledby="tabId || currentTabId"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>

package/components/Tabs/TabsTab.astro

@@ -1,9 +1,5 @@
 ---
-type Props = {
-  class?: string
-  tabId?: string
-  [key: string]: any
-}
+import type { TabsTabProps as Props } from "./types.astro"
 
 const { class: className, tabId, ...rest } = Astro.props
 const { currentTabId } = Astro.locals

package/components/Tabs/TabsTab.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { inject } from "vue"
+import { CurrentTabIdKey, type Slots, type TabsTabProps } from "./types.d.vue"
+
+const { tabId } = defineProps<TabsTabProps>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const currentTabId = inject(CurrentTabIdKey, undefined)
+</script>
+
+<template>
+  <label
+    :for="tabId || currentTabId"
+    :class="['ui-tab-label', $props.class]"
+    role="tab"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </label>
+</template>

package/components/Tabs/types.astro.ts

@@ -0,0 +1,11 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"div">
+
+export type TabsItemProps = Base.TabsItemProps &
+  Omit<HTMLAttributes<"input">, "type">
+
+export type TabsTabProps = Base.TabsTabProps & HTMLAttributes<"label">
+
+export type TabsPanelProps = Base.TabsPanelProps & HTMLAttributes<"div">

package/components/Tabs/types.d.vue.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, InjectionKey, Slot } from "vue"
+import type {
+  Props as BaseProps,
+  TabsItemProps as BaseTabsItemProps,
+  TabsPanelProps as BaseTabsPanelProps,
+  TabsTabProps as BaseTabsTabProps,
+} from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type TabsItemProps = BaseTabsItemProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type TabsPanelProps = BaseTabsPanelProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type TabsTabProps = BaseTabsTabProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}
+
+export const TabsGroupNameKey = Symbol() as InjectionKey<string>
+export const CurrentTabIdKey = Symbol() as InjectionKey<string>
+export const CurrentPanelIdKey = Symbol() as InjectionKey<string>

package/components/Tabs/types.solid.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props & JSX.HTMLAttributes<HTMLDivElement>
+export type TabsItemProps = Base.TabsItemProps &
+  JSX.InputHTMLAttributes<HTMLInputElement>
+export type TabsTabProps = Base.TabsTabProps &
+  Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, "for"> & {
+    for?: string
+  }
+export type TabsPanelProps = Base.TabsPanelProps &
+  JSX.HTMLAttributes<HTMLDivElement>

package/components/Tabs/types.svelte.ts

@@ -0,0 +1,10 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props & SvelteHTMLElements["div"]
+export type TabsItemProps = Base.TabsItemProps & SvelteHTMLElements["input"]
+export type TabsPanelProps = Base.TabsPanelProps & SvelteHTMLElements["div"]
+export type TabsTabProps = Base.TabsTabProps &
+  Omit<SvelteHTMLElements["label"], "for"> & {
+    for?: string
+  }

package/components/Tabs/types.ts

@@ -0,0 +1,19 @@
+export type Props = {
+  name?: string
+}
+
+export type TabsItemProps = {
+  name?: string
+  open?: boolean
+  panelId?: string
+  tabId?: string
+}
+
+export type TabsTabProps = {
+  tabId?: string
+}
+
+export type TabsPanelProps = {
+  panelId?: string
+  tabId?: string
+}