opui-css 5.1.2 → 5.3.0

package/components/ToggleButton/ToggleButton.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { inject, useId } from "vue"
+import { ToggleGroupKey } from "../ToggleGroup/types.d.vue"
+import type { Props, Slots } from "./types.d.vue"
+
+const { disabled, id, label, name, pressed, size, type, value } =
+  defineProps<Props>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const group = inject(ToggleGroupKey, undefined)
+const finalName = name || group?.name
+const finalType = type || group?.type || "checkbox"
+const inputId = id || useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-toggle-button',
+      { 'ui-disabled': disabled },
+      size && `ui-${size}`,
+      $props.class,
+    ]"
+  >
+    <input
+      :aria-pressed="finalType === 'checkbox' ? pressed : undefined"
+      :checked="pressed"
+      :disabled="disabled"
+      :id="inputId"
+      :name="finalName"
+      :type="finalType"
+      :value="value || label"
+      v-bind="$attrs"
+    />
+    <slot></slot>
+  </label>
+</template>

package/components/ToggleButton/types.astro.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & Omit<HTMLAttributes<"input">, "size" | "type">

package/components/ToggleButton/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/ToggleButton/types.solid.ts

@@ -0,0 +1,7 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+    type?: "checkbox" | "radio"
+  }

package/components/ToggleButton/types.svelte.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte"
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props &
+  Base.Slots<Snippet> &
+  Omit<SvelteHTMLElements["input"], "size" | "type">

package/components/ToggleButton/types.ts

@@ -0,0 +1,10 @@
+export type Props = {
+  label?: string
+  pressed?: boolean
+  size?: "small" | "x-small"
+  type?: "checkbox" | "radio"
+}
+
+export type Slots<S> = {
+  children?: S
+}

package/components/ToggleGroup/ToggleGroup.astro

@@ -1,12 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  name?: string
-  orientation?: "vertical"
-  selection?: "single" | "multiple"
-  size?: "default" | "small" | "x-small"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Toggle Group"
 

package/components/ToggleGroup/ToggleGroup.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { provide, useId } from "vue"
+import { ToggleGroupKey, type Props, type Slots } from "./types.d.vue"
+
+const {
+  name,
+  orientation,
+  selection = "multiple",
+  size = "default",
+} = defineProps<Props>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const groupName = name || useId()
+const inputType = selection === "single" ? "radio" : "checkbox"
+
+provide(ToggleGroupKey, { name: groupName, type: inputType })
+</script>
+
+<template>
+  <div
+    :class="[
+      'ui-toggle-group',
+      size !== 'default' && size && `ui-${size}`,
+      orientation && `ui-${orientation}`,
+      $props.class,
+    ]"
+    :role="selection === 'single' ? 'radiogroup' : 'group'"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </div>
+</template>

package/components/ToggleGroup/types.astro.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & Omit<HTMLAttributes<"div">, "size">

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

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, InjectionKey, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}
+
+export const ToggleGroupKey = Symbol() as InjectionKey<{
+  name: string
+  type: "radio" | "checkbox"
+}>

package/components/ToggleGroup/types.solid.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props & JSX.HTMLAttributes<HTMLDivElement>

package/components/ToggleGroup/types.svelte.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte"
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props &
+  Base.Slots<Snippet> &
+  Omit<SvelteHTMLElements["div"], "size">
+
+export type { ToggleContext } from "./types"

package/components/ToggleGroup/types.ts

@@ -0,0 +1,15 @@
+export type Props = {
+  name?: string
+  orientation?: "vertical"
+  selection?: "single" | "multiple"
+  size?: "default" | "small" | "x-small"
+}
+
+export type Slots<S> = {
+  children: S
+}
+
+export type ToggleContext = {
+  groupName: string
+  inputType: "radio" | "checkbox"
+}

package/components/Tooltip/Tooltip.astro

@@ -1,14 +1,7 @@
 ---
-import Anchor from "../Anchor/Anchor.astro"
+import type { Props } from "./types.astro"
 
-type Props = {
-  [key: string]: any
-  alignment?: string
-  arrow?: boolean
-  class?: string
-  id?: string
-  label?: string
-}
+import Anchor from "../Anchor/Anchor.astro"
 
 export const title = "Tooltip"
 

package/components/Tooltip/Tooltip.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import Anchor from "../Anchor/Anchor.vue"
+import type { Props, Slots } from "./types.d.vue"
+
+const { alignment, arrow, id, label } = defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <Anchor
+    :alignment="alignment"
+    :class="['ui-tooltip', { 'ui-with-arrow': arrow }, $props.class]"
+    :id="id"
+    trigger="hover"
+  >
+    <slot></slot>
+    <template #anchored>
+      {{ label }}
+      <slot name="content"></slot>
+    </template>
+  </Anchor>
+</template>

package/components/Tooltip/types.astro.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"span">

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

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

package/components/Tooltip/types.solid.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  Partial<Base.Slots<JSX.Element>> &
+  JSX.HTMLAttributes<HTMLSpanElement>

package/components/Tooltip/types.svelte.ts

@@ -0,0 +1,7 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+type Snippets = Base.Slots<Snippet>
+
+export type Props = Base.Props & Snippets & SvelteHTMLElements["span"]

package/components/Tooltip/types.ts

@@ -0,0 +1,11 @@
+export type Props = {
+  [key: string]: any
+  alignment?: string
+  arrow?: boolean
+  id?: string
+  label?: string
+}
+
+export type Slots<S> = {
+  content?: S
+}

package/css/theme.css

@@ -1,5 +1,4 @@
 @layer theme {
-
   /* 1. Color scheme */
   .ui-light {
     --color-scheme: light;

package/dist/opui.css

@@ -1291,7 +1291,6 @@
 }
 
 @layer theme {
-
   /* 1. Color scheme */
   .ui-light {
     --color-scheme: light;