@1001-digital/components 0.0.1

package/src/base/components/Dialog.vue

@@ -0,0 +1,274 @@
+<template>
+  <Teleport to="body">
+    <Transition
+      :css="false"
+      @enter="onEnter"
+      @leave="onLeave"
+      @after-leave="() => emit('closed')"
+    >
+      <component
+        v-if="open"
+        ref="dialog"
+        :is="tag"
+        :class="classes"
+        tabindex="-1"
+        @cancel.stop.prevent="closable && (open = false)"
+        @click="onDialogClick"
+      >
+        <h1 v-if="title">{{ title }}</h1>
+        <button
+          v-if="closable"
+          class="close"
+          :title="`Close ${title || 'Dialog'}`"
+          @pointerdown="open = false"
+          @click="open = false"
+        >
+          <Icon type="close" />
+        </button>
+
+        <section>
+          <slot />
+        </section>
+
+        <footer v-if="$slots.footer">
+          <slot name="footer" />
+        </footer>
+      </component>
+    </Transition>
+
+    <div
+      v-if="compat && open"
+      class="overlay"
+      @click="onClickOutside"
+    ></div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import Icon from './Icon.vue'
+
+const dialog = ref<HTMLDialogElement | null>(null)
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    class?: string | string[] | Record<string, boolean>
+    clickOutside?: boolean
+    closable?: boolean
+    compat?: boolean
+    large?: boolean
+  }>(),
+  {
+    clickOutside: true,
+    closable: true,
+  },
+)
+const emit = defineEmits<{
+  closed: []
+}>()
+const open = defineModel<boolean>('open', { required: true })
+const tag = computed(() => (props.compat ? 'article' : 'dialog'))
+const classes = computed(() => {
+  let obj: Record<string, boolean> = {
+    dialog: true,
+    compat: !!props.compat,
+    large: !!props.large,
+  }
+
+  // Apply passed classes
+  if (typeof props.class === 'string') {
+    obj[props.class] = true
+  } else if (Array.isArray(props.class)) {
+    props.class.forEach((c) => {
+      obj[c] = true
+    })
+  } else if (typeof props.class === 'object') {
+    obj = { ...obj, ...props.class }
+  }
+
+  if (props.compat) {
+    obj.open = true
+  }
+
+  return obj
+})
+
+const onEnter = (el: Element, done: () => void) => {
+  if (!props.compat) {
+    ;(el as HTMLDialogElement).showModal()
+  }
+  // Focus the dialog itself to prevent the close button from gaining focus
+  ;(el as HTMLElement).focus()
+  done()
+}
+
+const onLeave = (el: Element, done: () => void) => {
+  el.addEventListener('transitionend', (e) => {
+    if ((e as TransitionEvent).propertyName === 'opacity') done()
+  })
+  if (props.compat) {
+    el.classList.remove('open')
+  } else {
+    ;(el as HTMLDialogElement).close()
+  }
+}
+
+const onDialogClick = (e: MouseEvent) => {
+  if (props.compat || e.target !== dialog.value) return
+  onClickOutside()
+}
+
+const onClickOutside = () => {
+  if (props.clickOutside) {
+    open.value = false
+  }
+}
+</script>
+
+<style>
+@layer components {
+  .dialog {
+    max-inline-size: min(
+      var(--dialog-width, 32rem),
+      calc(100vw - var(--spacer) * 2)
+    );
+    inline-size: 100%;
+    background: var(--background);
+    color: var(--color);
+    border: var(--border);
+    border-radius: var(--border-radius);
+    padding: 0;
+    max-block-size: 80dvh;
+    container-type: inline-size;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    overflow: hidden;
+
+    /* Entry/exit animations */
+    opacity: 1;
+    scale: 1;
+    transition:
+      opacity var(--speed) ease,
+      scale var(--speed) ease,
+      overlay var(--speed) ease allow-discrete,
+      display var(--speed) ease allow-discrete;
+
+    @starting-style {
+      opacity: 0;
+      scale: 0.95;
+    }
+
+    /* Exit animation */
+    &:not([open]):not(:popover-open):not(.open) {
+      opacity: 0;
+      scale: 0.95;
+    }
+
+    &::backdrop {
+      background-color: var(--backdrop-background-color);
+      backdrop-filter: var(--blur);
+      transition:
+        background-color var(--speed) ease,
+        backdrop-filter var(--speed) ease,
+        overlay var(--speed) ease allow-discrete,
+        display var(--speed) ease allow-discrete;
+
+      @starting-style {
+        background-color: transparent;
+      }
+    }
+
+    &.compat {
+      position: fixed;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      z-index: var(--z-index-dialog);
+      transform: translate(-50%, -50%);
+
+      &.open + .overlay {
+        position: fixed;
+        inset: 0;
+        z-index: var(--z-index-overlay);
+        background-color: var(--backdrop-background-color);
+        backdrop-filter: var(--blur);
+        transition:
+          background-color var(--speed) ease,
+          backdrop-filter var(--speed) ease;
+
+        @starting-style {
+          background-color: transparent;
+        }
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    > h1:first-child,
+    > .close {
+      display: flex;
+      align-items: center;
+      block-size: calc(var(--spacer) * 2);
+      box-shadow: var(--border-shadow);
+      padding-inline-start: var(--spacer);
+      font-family: var(--font-family);
+      font-size: var(--ui-font-size);
+      text-transform: var(--ui-text-transform);
+      margin: 0;
+    }
+
+    > h1:first-child {
+      padding-right: calc(var(--spacer) * 3);
+    }
+
+    > .close {
+      position: absolute;
+      top: 0;
+      right: 0;
+      inline-size: calc(var(--spacer) * 2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      border-radius: 0;
+      border-start-end-radius: var(--border-radius);
+
+      &:is(:hover, :active, :focus, .active) {
+        outline: none;
+      }
+    }
+
+    > section {
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      padding: var(--spacer);
+      display: grid;
+      gap: var(--spacer);
+    }
+
+    > footer {
+      display: flex;
+      gap: var(--spacer);
+      justify-content: flex-end;
+      padding: var(--spacer);
+      border-block-start: var(--border);
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    &.large {
+      --dialog-width: min(90vw, 64rem);
+    }
+  }
+
+  html:has(dialog[open]),
+  body:has(dialog[open]),
+  html:has(.dialog.open),
+  body:has(.dialog.open) {
+    overflow: hidden;
+  }
+}
+</style>

package/src/base/components/Dropdown.vue

@@ -0,0 +1,167 @@
+<template>
+  <DropdownMenuRoot
+    v-model:open="open"
+    :modal="modal"
+    :dir="dir"
+  >
+    <DropdownMenuTrigger as-child>
+      <slot name="trigger" />
+    </DropdownMenuTrigger>
+
+    <DropdownMenuPortal>
+      <DropdownMenuContent
+        class="dropdown"
+        :class="props.class"
+        :side="side"
+        :align="align"
+        :side-offset="sideOffset"
+        :align-offset="alignOffset"
+        :avoid-collisions="avoidCollisions"
+        :collision-padding="collisionPadding"
+        :loop="loop"
+      >
+        <div class="dropdown-items">
+          <slot />
+        </div>
+        <DropdownMenuArrow
+          v-if="arrow"
+          class="dropdown-arrow"
+        />
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  DropdownMenuArrow,
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+} from 'reka-ui'
+
+const props = withDefaults(
+  defineProps<{
+    class?: string | string[] | Record<string, boolean>
+    side?: 'top' | 'right' | 'bottom' | 'left'
+    align?: 'start' | 'center' | 'end'
+    sideOffset?: number
+    alignOffset?: number
+    avoidCollisions?: boolean
+    collisionPadding?: number
+    arrow?: boolean
+    modal?: boolean
+    loop?: boolean
+    dir?: 'ltr' | 'rtl'
+  }>(),
+  {
+    side: 'bottom',
+    align: 'start',
+    sideOffset: 4,
+    avoidCollisions: true,
+    collisionPadding: 8,
+    loop: true,
+  },
+)
+
+const open = defineModel<boolean>('open', { required: true })
+</script>
+
+<style>
+@layer components {
+  .dropdown {
+    background: var(--dropdown-background);
+    color: var(--color);
+    border: var(--dropdown-border);
+    border-radius: var(--dropdown-border-radius);
+    padding: 0;
+    font-family: var(--font-family);
+    font-size: var(--ui-font-size);
+    z-index: var(--z-index-ui);
+    min-inline-size: var(--reka-dropdown-menu-trigger-width);
+    max-block-size: var(--reka-dropdown-menu-content-available-height);
+    transform-origin: var(--reka-dropdown-menu-content-transform-origin);
+
+    /* Entry/exit animations */
+    opacity: 1;
+    scale: 1;
+    transition:
+      opacity var(--speed) ease,
+      scale var(--speed) ease;
+
+    @starting-style {
+      opacity: 0;
+      scale: 0.95;
+    }
+
+    &[data-state='closed'] {
+      opacity: 0;
+      scale: 0.95;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    .dropdown-arrow {
+      fill: var(--dropdown-arrow-fill);
+      stroke: var(--border-color);
+    }
+  }
+
+  .dropdown-items {
+    padding: var(--dropdown-padding);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  .dropdown-item {
+    padding: var(--size-2) var(--size-3);
+    border-radius: calc(var(--dropdown-border-radius) / 2);
+    display: flex;
+    align-items: center;
+    gap: var(--size-2);
+    cursor: pointer;
+    outline: none;
+    user-select: none;
+
+    &[data-highlighted] {
+      background: var(--button-background-highlight);
+    }
+
+    &[data-disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .dropdown-label {
+    padding: var(--size-2) var(--size-3);
+    color: var(--muted);
+    font-weight: 500;
+    user-select: none;
+  }
+
+  .dropdown-separator {
+    block-size: 1px;
+    background: var(--border-color);
+    margin-block: var(--size-1);
+  }
+
+  .dropdown-item-indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .dropdown-sub-trigger {
+    justify-content: space-between;
+  }
+
+  .dropdown-sub-icon {
+    color: var(--muted);
+    margin-inline-start: auto;
+  }
+}
+</style>

package/src/base/components/DropdownCheckboxItem.vue

@@ -0,0 +1,30 @@
+<template>
+  <DropdownMenuCheckboxItem
+    class="dropdown-item"
+    v-model="model"
+    :disabled="disabled"
+    :text-value="textValue"
+    @select="(e: Event) => emit('select', e)"
+  >
+    <DropdownMenuItemIndicator class="dropdown-item-indicator">
+      <Icon type="check" />
+    </DropdownMenuItemIndicator>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>
+
+<script setup lang="ts">
+import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator } from 'reka-ui'
+import Icon from './Icon.vue'
+
+defineProps<{
+  disabled?: boolean
+  textValue?: string
+}>()
+
+const model = defineModel<boolean | 'indeterminate'>({ default: false })
+
+const emit = defineEmits<{
+  select: [event: Event]
+}>()
+</script>

package/src/base/components/DropdownGroup.vue

@@ -0,0 +1,9 @@
+<template>
+  <DropdownMenuGroup>
+    <slot />
+  </DropdownMenuGroup>
+</template>
+
+<script setup lang="ts">
+import { DropdownMenuGroup } from 'reka-ui'
+</script>

package/src/base/components/DropdownItem.vue

@@ -0,0 +1,23 @@
+<template>
+  <DropdownMenuItem
+    class="dropdown-item"
+    :disabled="disabled"
+    :text-value="textValue"
+    @select="(e: Event) => emit('select', e)"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>
+
+<script setup lang="ts">
+import { DropdownMenuItem } from 'reka-ui'
+
+defineProps<{
+  disabled?: boolean
+  textValue?: string
+}>()
+
+const emit = defineEmits<{
+  select: [event: Event]
+}>()
+</script>

package/src/base/components/DropdownLabel.vue

@@ -0,0 +1,9 @@
+<template>
+  <DropdownMenuLabel class="dropdown-label">
+    <slot />
+  </DropdownMenuLabel>
+</template>
+
+<script setup lang="ts">
+import { DropdownMenuLabel } from 'reka-ui'
+</script>

package/src/base/components/DropdownRadioGroup.vue

@@ -0,0 +1,15 @@
+<template>
+  <DropdownMenuRadioGroup
+    :model-value="model"
+    @update:model-value="(v) => (model = v)"
+  >
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>
+
+<script setup lang="ts">
+import { DropdownMenuRadioGroup } from 'reka-ui'
+import type { AcceptableValue } from 'reka-ui'
+
+const model = defineModel<AcceptableValue>()
+</script>

package/src/base/components/DropdownRadioItem.vue

@@ -0,0 +1,29 @@
+<template>
+  <DropdownMenuRadioItem
+    class="dropdown-item"
+    :value="value"
+    :disabled="disabled"
+    :text-value="textValue"
+    @select="(e: Event) => emit('select', e)"
+  >
+    <DropdownMenuItemIndicator class="dropdown-item-indicator">
+      <Icon type="check" />
+    </DropdownMenuItemIndicator>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>
+
+<script setup lang="ts">
+import { DropdownMenuItemIndicator, DropdownMenuRadioItem } from 'reka-ui'
+import Icon from './Icon.vue'
+
+defineProps<{
+  value: string
+  disabled?: boolean
+  textValue?: string
+}>()
+
+const emit = defineEmits<{
+  select: [event: Event]
+}>()
+</script>

package/src/base/components/DropdownSeparator.vue

@@ -0,0 +1,7 @@
+<template>
+  <DropdownMenuSeparator class="dropdown-separator" />
+</template>
+
+<script setup lang="ts">
+import { DropdownMenuSeparator } from 'reka-ui'
+</script>

package/src/base/components/DropdownSub.vue

@@ -0,0 +1,58 @@
+<template>
+  <DropdownMenuSub v-model:open="open">
+    <DropdownMenuSubTrigger
+      class="dropdown-item dropdown-sub-trigger"
+      :disabled="disabled"
+    >
+      <slot name="trigger" />
+      <Icon
+        class="dropdown-sub-icon"
+        type="chevron-right"
+      />
+    </DropdownMenuSubTrigger>
+
+    <DropdownMenuPortal>
+      <DropdownMenuSubContent
+        class="dropdown"
+        :class="props.class"
+        :side-offset="sideOffset"
+        :align-offset="alignOffset"
+        :avoid-collisions="avoidCollisions"
+        :collision-padding="collisionPadding"
+        :loop="loop"
+      >
+        <slot />
+      </DropdownMenuSubContent>
+    </DropdownMenuPortal>
+  </DropdownMenuSub>
+</template>
+
+<script setup lang="ts">
+import {
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from 'reka-ui'
+import Icon from './Icon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    class?: string | string[] | Record<string, boolean>
+    disabled?: boolean
+    sideOffset?: number
+    alignOffset?: number
+    avoidCollisions?: boolean
+    collisionPadding?: number
+    loop?: boolean
+  }>(),
+  {
+    sideOffset: -4,
+    avoidCollisions: true,
+    collisionPadding: 8,
+    loop: true,
+  },
+)
+
+const open = defineModel<boolean>('open', { default: false })
+</script>

package/src/base/components/Form.vue

@@ -0,0 +1,27 @@
+<template>
+  <form class="form">
+    <slot />
+  </form>
+</template>
+
+<style scoped>
+.form {
+  display: grid;
+  gap: var(--spacer);
+
+  & :deep(> header),
+  & :deep(> footer) {
+    display: grid;
+    gap: var(--spacer-sm);
+
+    h1,
+    p {
+      text-align: start;
+    }
+
+    h1 {
+      font-size: var(--font-xl);
+    }
+  }
+}
+</style>