opui-css 5.2.0 → 5.3.0

package/components/Switch/Switch.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import SwitchInput from "./SwitchInput.vue"
+import type { Slots, SwitchProps } from "./types.d.vue"
+import { useId } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<SwitchProps>()
+defineSlots<Slots>()
+const modelValue = defineModel<boolean | (string | number)[]>()
+
+const endTextId = useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-switch',
+      {
+        'ui-small': props.small,
+        'ui-stack': props.stack,
+        'ui-spread': props.spread,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <span
+      v-if="$slots['icon-unchecked']"
+      class="ui-icon-unchecked"
+      aria-hidden="true"
+    >
+      <slot name="icon-unchecked"></slot>
+    </span>
+
+    <span
+      v-if="$slots['icon-checked']"
+      class="ui-icon-checked"
+      aria-hidden="true"
+    >
+      <slot name="icon-checked"></slot>
+    </span>
+
+    <SwitchInput
+      v-bind="$attrs"
+      v-model="modelValue"
+      :aria-describedby="endTextId"
+    />
+
+    <span
+      v-if="$slots.default"
+      :class="[props.hideLabel ? 'ui-sr-only' : 'ui-label']"
+    >
+      <slot></slot>
+    </span>
+
+    <span v-if="$slots['end-text']" :id="endTextId" class="ui-end-text">
+      <slot name="end-text"></slot>
+    </span>
+  </label>
+</template>

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/Table/Body.vue

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

package/components/Table/Cell.vue

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

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.vue

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

package/components/Table/Head.vue

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

package/components/Table/HeaderCell.vue

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

package/components/Table/Row.vue

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

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/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.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.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.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/TextField/TextField.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { useId, computed } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "text",
+})
+defineSlots<Slots>()
+const modelValue = defineModel<string | number>()
+
+const fieldId = props.id || useId()
+const startTextValue = computed(() => props.description || props.startText)
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-text-field',
+      {
+        'ui-auto-fit': props.autoFit,
+        'ui-filled': props.filled,
+        'ui-spread': props.spread,
+        'ui-small': props.small,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <span v-if="props.label || $slots.label" class="ui-label">
+      <slot name="label">{{ props.label }}</slot>
+    </span>
+
+    <span v-if="startTextValue || $slots.description" class="ui-start-text">
+      <slot name="description">{{ startTextValue }}</slot>
+    </span>
+
+    <span class="ui-field">
+      <input
+        :id="fieldId"
+        :inputmode="props.type === 'numeric' ? 'numeric' : undefined"
+        :pattern="props.type === 'numeric' ? '[0-9]*' : undefined"
+        :type="props.type === 'numeric' ? 'text' : props.type"
+        v-bind="$attrs"
+        v-model="modelValue"
+      />
+      <span class="ui-prefix" v-if="$slots.prefix"
+        ><slot name="prefix"></slot
+      ></span>
+      <span class="ui-suffix" v-if="$slots.suffix"
+        ><slot name="suffix"></slot
+      ></span>
+      <span class="ui-header" v-if="$slots.header"
+        ><slot name="header"></slot
+      ></span>
+      <span class="ui-footer" v-if="$slots.footer"
+        ><slot name="footer"></slot
+      ></span>
+    </span>
+
+    <span
+      v-if="props.endText || $slots['end-text'] || $slots['supporting-text']"
+      class="ui-end-text"
+    >
+      <slot name="end-text">{{ props.endText }}</slot
+      ><slot name="supporting-text"></slot>
+    </span>
+
+    <slot></slot>
+  </label>
+</template>

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

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

package/components/Textarea/Textarea.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { useId } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<Props>()
+defineSlots<Slots>()
+const modelValue = defineModel<string>()
+
+const fieldId = props.id || useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-textarea',
+      {
+        'ui-auto-fit': props.autoFit,
+        'ui-filled': props.filled,
+        'ui-spread': props.spread,
+        'ui-small': props.small,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <span v-if="props.label || $slots.label" class="ui-label">
+      <slot name="label">{{ props.label }}</slot>
+    </span>
+
+    <span v-if="props.description || $slots.description" class="ui-start-text">
+      <slot name="description">{{ props.description }}</slot>
+    </span>
+
+    <span class="ui-field">
+      <textarea :id="fieldId" v-bind="$attrs" v-model="modelValue"></textarea>
+      <span class="ui-prefix" v-if="$slots.prefix"
+        ><slot name="prefix"></slot
+      ></span>
+      <span class="ui-suffix" v-if="$slots.suffix"
+        ><slot name="suffix"></slot
+      ></span>
+      <span class="ui-header" v-if="$slots.header"
+        ><slot name="header"></slot
+      ></span>
+      <span class="ui-footer" v-if="$slots.footer"
+        ><slot name="footer"></slot
+      ></span>
+    </span>
+
+    <span
+      v-if="props.endText || $slots['end-text'] || $slots['supporting-text']"
+      class="ui-end-text"
+    >
+      <slot name="end-text">{{ props.endText }}</slot
+      ><slot name="supporting-text"></slot>
+    </span>
+
+    <slot></slot>
+  </label>
+</template>

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

@@ -3,6 +3,7 @@ import type { Props as BaseProps } from "./types"
 
 export type Props = BaseProps & {
   class?: HTMLAttributes["class"]
+  id?: HTMLAttributes["id"]
 }
 
 export type Slots = {

package/components/Toast/Toast.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { onMounted } from "vue"
+import { initToastManager } from "../../css/js/toast.js"
+
+onMounted(() => {
+  initToastManager()
+})
+</script>
+
+<template>
+  <output
+    aria-live="polite"
+    id="toast-manager"
+    popover="manual"
+    role="status"
+  ></output>
+
+  <template id="toast-template">
+    <div class="ui-toast" role="alert">
+      <span class="ui-icon" data-toast-icon></span>
+      <div class="ui-content">
+        <div class="ui-title" data-toast-title></div>
+        <div class="ui-description" data-toast-description></div>
+      </div>
+      <button
+        aria-label="Close"
+        class="ui-close-button"
+        data-toast-close
+        type="button"
+      >
+        <svg
+          fill="none"
+          height="20"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M18 6 6 18"></path>
+          <path d="m6 6 12 12"></path>
+        </svg>
+      </button>
+    </div>
+  </template>
+</template>

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opui-css",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "A CSS UI library exploring next-gen HTML & CSS features. Astro components on top of Open Props.",
   "type": "module",
   "license": "MIT",
@@ -21,7 +21,8 @@
     "design-system",
     "html",
     "open-props",
-    "ui"
+    "ui",
+    "vue"
   ],
   "sideEffects": [
     "*.css",
@@ -35,6 +36,7 @@
     "dist",
     "env.d.ts",
     "open-props.css",
+    "vue",
     "CHANGELOG.md",
     "LICENSE",
     "MIGRATING.md",
@@ -45,6 +47,7 @@
     ".": "./dist/opui.css",
     "./open-props": "./dist/op.css",
     "./astro": "./astro/index.ts",
+    "./vue": "./vue/index.ts",
     "./components/*": "./components/*",
     "./core/*": "./core/*.css",
     "./css/*": "./css/*.css",
@@ -63,11 +66,19 @@
   },
   "peerDependencies": {
     "astro": "catalog:",
-    "open-props": "catalog:"
+    "open-props": "catalog:",
+    "svelte": "catalog:",
+    "vue": "catalog:"
   },
   "peerDependenciesMeta": {
     "astro": {
       "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
     }
   },
   "publishConfig": {