opui-css 5.2.0 → 5.4.0

package/components/Drawer/Drawer.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useId } from "vue"
+import type { DrawerSlots, Props } from "./types.d.vue"
+
+const {
+  backdrop = "blurred",
+  closedby = "any",
+  id,
+  scrollLock = true,
+  side = "inline-start",
+} = defineProps<Props>()
+const slots = defineSlots<DrawerSlots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const drawerId = id || useId()
+</script>
+
+<template>
+  <dialog
+    :id="drawerId"
+    :class="[
+      'ui-drawer',
+      side && `ui-${side}`,
+      {
+        'ui-backdrop-transparent': backdrop === 'transparent',
+        'ui-scroll-lock': scrollLock,
+      },
+      $props.class,
+    ]"
+    :closedby="closedby"
+    v-bind="$attrs"
+  >
+    <slot v-if="slots.header" name="header"></slot>
+
+    <div v-if="slots.content" class="ui-content">
+      <slot name="content"></slot>
+    </div>
+
+    <slot></slot>
+
+    <slot v-if="slots.footer" name="footer"></slot>
+  </dialog>
+</template>

package/components/Drawer/DrawerFooter.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { DrawerFooterProps, DrawerFooterSlots } from "./types.d.vue"
+
+defineProps<DrawerFooterProps>()
+defineSlots<DrawerFooterSlots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+</script>
+
+<template>
+  <div :class="['ui-footer', $props.class]" v-bind="$attrs">
+    <slot></slot>
+  </div>
+</template>

package/components/Drawer/DrawerHeader.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import IconButton from "../IconButton/IconButton.vue"
+import type { DrawerHeaderProps, DrawerHeaderSlots } from "./types.d.vue"
+
+const { heading } = defineProps<DrawerHeaderProps>()
+defineSlots<DrawerHeaderSlots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const closeDrawer = (event: MouseEvent) => {
+  const target = event.currentTarget as HTMLElement | null
+  target?.closest("dialog")?.close()
+}
+</script>
+
+<template>
+  <div :class="['ui-header', $props.class]" v-bind="$attrs">
+    <span v-if="heading">{{ heading }}</span>
+    <slot></slot>
+    <IconButton title="Close" @click="closeDrawer">
+      <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>
+</template>

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

@@ -18,7 +18,9 @@ export type DrawerFooterProps = BaseDrawerFooterProps & {
   class?: HTMLAttributes["class"]
 }
 
-export type DrawerSlots = BaseSlots<Slot>
+export type DrawerSlots = BaseSlots<Slot> & {
+  default?: Slot
+}
 
 export type DrawerHeaderSlots = {
   default?: Slot

package/components/Drawer/types.ts

@@ -13,6 +13,7 @@ export type DrawerHeaderProps = {
 export type DrawerFooterProps = {}
 
 export type Slots<S> = {
+  children?: S
   content?: S
   footer?: S
   header?: S

package/components/FieldDescription/FieldDescription.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const props = defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <p :class="['ui-field-description', props.class]" v-bind="$attrs">
+    <slot></slot>
+  </p>
+</template>

package/components/FieldGroup/FieldGroup.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { provide } from "vue"
+import { CurrentFieldNameKey, type Props, type Slots } from "./types.d.vue"
+
+const props = defineProps<Props>()
+defineSlots<Slots>()
+
+if (props.name) {
+  provide(CurrentFieldNameKey, props.name)
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'ui-field-group',
+      props.direction && `ui-${props.direction}`,
+      props.class,
+    ]"
+    v-bind="$attrs"
+    role="group"
+  >
+    <slot></slot>
+  </div>
+</template>

package/components/FieldLegend/FieldLegend.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "legend",
+})
+defineSlots<Slots>()
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    :class="[{ 'ui-legend': props.as !== 'legend' }, props.class]"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </component>
+</template>

package/components/FieldSet/FieldSet.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "fieldset",
+})
+defineSlots<Slots>()
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    :class="['ui-fieldset', props.class]"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </component>
+</template>

package/components/Form/Form.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "form",
+})
+defineSlots<Slots>()
+</script>
+
+<template>
+  <component :is="props.as" :class="['ui-form', props.class]" v-bind="$attrs">
+    <slot></slot>
+  </component>
+</template>

package/components/IconButton/IconButton.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const { as, color, href, size, variant } = defineProps<Props>()
+defineSlots<Slots>()
+
+const Tag = as || (href ? "a" : "button")
+</script>
+
+<template>
+  <component
+    :is="Tag"
+    :class="[
+      'ui-icon-button',
+      size && `ui-${size}`,
+      variant && `ui-${variant}`,
+      color && `ui-${color}`,
+      $props.class,
+    ]"
+    :href="href"
+  >
+    <slot></slot>
+  </component>
+</template>

package/components/List/List.vue

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

package/components/ListItem/ListItem.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed, useAttrs } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+const props = defineProps<Props>()
+const slots = defineSlots<Slots>()
+const attrs = useAttrs()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const hasLabel = computed(
+  () =>
+    props.type &&
+    (props.type === "checkbox" ||
+      props.type === "radio" ||
+      props.type === "switch"),
+)
+const labelClass = computed(() => props.type || "")
+const Tag = computed(() => props.as)
+
+const liAttrs = computed(() => (Tag.value ? {} : attrs))
+const innerAttrs = computed(() => (Tag.value ? attrs : {}))
+</script>
+
+<template>
+  <li
+    :class="[
+      {
+        'ui-border-top': props.borderTop,
+        'ui-inset': props.inset,
+      },
+      props.class,
+    ]"
+    v-bind="liAttrs"
+  >
+    <label
+      v-if="hasLabel"
+      :class="labelClass && `ui-${labelClass}`"
+      :for="props.for"
+    >
+      <div v-if="slots.start" class="ui-start">
+        <slot name="start"></slot>
+      </div>
+      <div
+        v-if="slots.text || props.headline || props.description"
+        class="ui-text"
+      >
+        <p v-if="props.headline">{{ props.headline }}</p>
+        <p v-if="props.description">{{ props.description }}</p>
+        <slot name="text"></slot>
+      </div>
+      <div v-if="slots.end" class="ui-end">
+        <slot name="end"></slot>
+      </div>
+      <slot></slot>
+    </label>
+
+    <component :is="Tag" v-else-if="Tag" v-bind="innerAttrs">
+      <div v-if="slots.start" class="ui-start">
+        <slot name="start"></slot>
+      </div>
+      <div
+        v-if="props.headline || props.description || slots.text"
+        class="ui-text"
+      >
+        <p v-if="props.headline">{{ props.headline }}</p>
+        <p v-if="props.description">{{ props.description }}</p>
+        <slot name="text"></slot>
+        <slot></slot>
+      </div>
+      <slot v-else></slot>
+      <div v-if="slots.end" class="ui-end">
+        <slot name="end"></slot>
+      </div>
+    </component>
+
+    <template v-else>
+      <div v-if="slots.start" class="ui-start">
+        <slot name="start"></slot>
+      </div>
+      <div
+        v-if="props.headline || props.description || slots.text"
+        class="ui-text"
+      >
+        <p v-if="props.headline">{{ props.headline }}</p>
+        <p v-if="props.description">{{ props.description }}</p>
+        <slot name="text"></slot>
+        <slot></slot>
+      </div>
+      <slot v-else></slot>
+      <div v-if="slots.end" class="ui-end">
+        <slot name="end"></slot>
+      </div>
+    </template>
+  </li>
+</template>

package/components/Progress/Progress.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineSlots<Slots>()
+const {
+  "aria-busy": ariaBusy,
+  "aria-describedby": ariaDescribedby,
+  "aria-label": ariaLabel,
+  id,
+  max,
+  value,
+  variant,
+} = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['ui-progress', variant && `ui-${variant}`, $props.class]">
+    <progress
+      v-bind="$attrs"
+      :aria-busy="ariaBusy"
+      :aria-describedby="ariaDescribedby"
+      :aria-label="ariaLabel"
+      :id="id"
+      :max="max"
+      :value="value"
+    >
+      <slot></slot>
+    </progress>
+  </div>
+</template>

package/components/Radio/Radio.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import RadioInput from "./RadioInput.vue"
+import type { RadioProps, Slots } from "./types.d.vue"
+import { useId } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<RadioProps>()
+defineSlots<Slots>()
+const modelValue = defineModel<string | number | boolean>()
+
+const endTextId = useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-radio',
+      props.size && `ui-${props.size}`,
+      {
+        'ui-stack': props.stack,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <RadioInput
+      v-bind="$attrs"
+      v-model="modelValue"
+      :aria-describedby="endTextId"
+    />
+    <span :class="[props.hideLabel ? 'ui-sr-only' : 'ui-label']"
+      ><slot></slot
+    ></span>
+    <span :id="endTextId" class="ui-end-text" v-if="$slots['end-text']">
+      <slot name="end-text"></slot>
+    </span>
+  </label>
+</template>

package/components/Radio/RadioInput.vue

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

package/components/Radio/types.ts

@@ -1,5 +1,4 @@
 export type RadioProps = {
-  disabled?: boolean
   error?: boolean
   hideLabel?: boolean
   size?: "small" | "large"

package/components/Range/Range.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { RangeProps, Slots } from "./types.d.vue"
+import { useId } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<RangeProps>()
+defineSlots<Slots>()
+const modelValue = defineModel<number | string>()
+
+const inputId = props.id || useId()
+const labelId = useId()
+const startTextId = useId()
+const endTextId = useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-range',
+      props.variant && `ui-${props.variant}`,
+      { 'ui-spread': props.spread },
+      props.class,
+    ]"
+  >
+    <span v-if="props.label || $slots.default" class="ui-label" :id="labelId">
+      <slot>{{ props.label }}</slot>
+    </span>
+    <output
+      v-if="props.valueSuffix !== undefined || $slots.value"
+      class="ui-value"
+      :for="inputId"
+      :data-suffix="props.valueSuffix"
+    >
+      <slot name="value">{{ modelValue ?? props.value }}</slot>
+    </output>
+    <span
+      v-if="props.startText || $slots['start-text']"
+      class="ui-start-text"
+      :id="startTextId"
+    >
+      <slot name="start-text">{{ props.startText }}</slot>
+    </span>
+
+    <input
+      :aria-describedby="
+        [
+          props.startText || $slots['start-text'] ? startTextId : undefined,
+          props.endText || $slots['end-text'] ? endTextId : undefined,
+        ]
+          .filter(Boolean)
+          .join(' ') || undefined
+      "
+      :aria-labelledby="labelId"
+      :id="inputId"
+      :list="props.list"
+      type="range"
+      v-bind="$attrs"
+      v-model="modelValue"
+    />
+
+    <datalist v-if="props.options || $slots.datalist" :id="props.list">
+      <template
+        v-for="option in props.options"
+        :key="typeof option === 'object' ? option.value : option"
+      >
+        <option
+          :value="typeof option === 'object' ? option.value : option"
+          :label="typeof option === 'object' ? option.label : undefined"
+        />
+      </template>
+      <slot name="datalist"></slot>
+    </datalist>
+
+    <span
+      v-if="props.endText || $slots['end-text']"
+      class="ui-end-text"
+      :id="endTextId"
+    >
+      <slot name="end-text">{{ props.endText }}</slot>
+    </span>
+  </label>
+</template>

package/components/Range/types.ts

@@ -1,15 +1,10 @@
 export type RangeProps = {
   [key: string]: any
-  disabled?: boolean
   endText?: string
   id?: string
   label?: string
-  max?: number | string
-  min?: number | string
-  name?: string
   spread?: boolean
   startText?: string
-  step?: number | string
   value?: number | string
   valueSuffix?: string
   variant?: "filled" | "default" | "tonal"

package/components/Select/Select.astro

@@ -6,7 +6,6 @@ export const title = "Select"
 const {
   class: className,
   description,
-  disabled,
   error,
   dense,
   id,
@@ -16,8 +15,6 @@ const {
   spread,
   size,
   endText,
-  required,
-  value,
   variant = "outlined",
   ...rest
 } = Astro.props
@@ -59,11 +56,8 @@ const labelId = $id("select-label")
   <span class="ui-field">
     <select
       aria-labelledby={label ? labelId : undefined}
-      disabled={disabled}
       id={selectId}
       name={fieldName}
-      required={required}
-      value={value}
       {...rest}
     >
       <button>

package/components/Select/Select.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useId } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  variant: "outlined",
+})
+defineSlots<Slots>()
+const modelValue = defineModel<string | number | (string | number)[]>()
+
+const selectId = props.id || useId()
+const labelId = useId()
+const endTextId = useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-select',
+      props.size && `ui-${props.size}`,
+      {
+        'ui-filled': props.variant === 'filled',
+        'ui-spread': props.spread,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <span v-if="props.label || $slots.label" class="ui-label" :id="labelId">
+      <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">
+      <select
+        :aria-labelledby="props.label ? labelId : undefined"
+        :id="selectId"
+        v-bind="$attrs"
+        v-model="modelValue"
+      >
+        <button v-pre>
+          <selectedcontent></selectedcontent>
+        </button>
+        <div :class="['ui-list', { 'ui-dense': props.dense }]">
+          <option
+            v-for="item in props.items"
+            :key="item.value"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+          <slot></slot>
+        </div>
+      </select>
+      <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']"
+      :id="endTextId"
+      class="ui-end-text"
+    >
+      <slot name="end-text">{{ props.endText }}</slot>
+    </span>
+  </label>
+</template>