@1001-digital/layers.base 0.0.1

package/app/components/Dialog.client.vue

@@ -0,0 +1,217 @@
+<template>
+  <Teleport to="body">
+    <component ref="dialog" :is="tag" :class="classes" @cancel.stop.prevent="open = false">
+      <button v-if="xClose" class="close unstyled" :title="`Close ${title || 'Dialog'}`" @touchdown="open = false"
+        @click="open = false">
+        <Icon type="close" />
+      </button>
+
+      <h1 v-if="title">{{ title }}</h1>
+
+      <slot />
+    </component>
+
+    <div v-if="compat" class="overlay" @click="() => onClickOutside()"></div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+const dialog = ref<HTMLDialogElement | null>(null)
+const props = withDefaults(defineProps<{
+  title?: string
+  class?: string | string[] | Record<string, boolean>
+  xClose?: boolean
+  clickOutside?: boolean
+  compat?: boolean
+}>(), {
+  xClose: true,
+  clickOutside: true,
+})
+const emit = defineEmits<{
+  closed: []
+}>()
+const open = defineModel<boolean>('open', { required: true })
+const debouncedOpen = ref(open.value)
+const tag = computed(() => (props.compat ? 'article' : 'dialog'))
+const classes = computed(() => {
+  let obj: Record<string, boolean> = {
+    dialog: true,
+    compat: !!props.compat,
+  }
+
+  // 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 }
+  }
+
+  // Apply open state class
+  if (props.compat && debouncedOpen.value) {
+    obj.open = true
+  }
+
+  return obj
+})
+
+const show = () => {
+  if (props.compat) {
+    debouncedOpen.value = true
+  } else {
+    dialog.value?.showModal()
+  }
+}
+
+const hide = () => {
+  if (props.compat) {
+    debouncedOpen.value = false
+  } else {
+    dialog.value?.close()
+  }
+  emit('closed')
+}
+
+const onClickOutside = () => {
+  if (props.clickOutside) {
+    open.value = false
+  }
+}
+
+// Keep track of the open/hide state
+watchEffect(() => (open.value ? show() : hide()))
+</script>
+
+<style>
+.dialog {
+  padding: var(--spacer);
+  padding-block-start: calc(var(--spacer) * 3);
+  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);
+  overscroll-behavior: contain;
+  block-size: 0;
+  min-block-size: min-content;
+  max-block-size: 100dvh;
+  container-type: inline-size;
+  display: grid;
+  gap: var(--spacer);
+
+  /* Entry/exit animations */
+  opacity: 1;
+  transform: scale(1);
+  transition:
+    opacity var(--speed) ease,
+    transform var(--speed) ease,
+    overlay var(--speed) ease allow-discrete,
+    display var(--speed) ease allow-discrete;
+
+  @starting-style {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  /* Exit animation */
+  &:not([open]):not(:popover-open) {
+    opacity: 0;
+    transform: 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;
+    }
+  }
+
+  @media (--md) {
+    max-block-size: calc(100dvh - var(--spacer) * 2);
+  }
+
+  &.compat {
+    position: fixed;
+    transform: translate(-50%, -50%);
+
+    &.open {
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      z-index: var(--z-index-dialog);
+
+      +.overlay {
+        position: fixed;
+        inset: 0;
+        z-index: var(--z-index-overlay);
+        background: var(--backdrop-background-color);
+      }
+    }
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  >.close {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    block-size: calc(var(--spacer) * 2);
+    inline-size: calc(var(--spacer) * 2);
+    border-inline-start: var(--border);
+    border-block-end: var(--border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    z-index: 10;
+    background: var(--background);
+
+    &:is(:hover, :active, :focus, .active) {
+      outline: none;
+    }
+  }
+
+  >h1:first-of-type {
+    inline-size: 100%;
+    border-block-end: var(--border);
+    block-size: calc(var(--spacer) * 2);
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    padding: 0 0 0 var(--spacer);
+    display: flex;
+    align-items: center;
+    margin: 0;
+    font-family: var(--ui-font-family);
+    font-size: var(--ui-font-size);
+    text-transform: var(--ui-text-transform);
+    background: var(--background);
+  }
+
+  >.actions {
+    margin-block-start: var(--spacer);
+    display: flex;
+    gap: var(--spacer);
+    justify-content: flex-end;
+  }
+}
+
+html:has(dialog[open]),
+body:has(dialog[open]),
+html:has(.dialog.open),
+body:has(.dialog.open) {
+  overflow: hidden;
+}
+</style>

package/app/components/Form/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>

package/app/components/Form/FormCheckbox.vue

@@ -0,0 +1,88 @@
+<template>
+  <label class="form-checkbox">
+    <CheckboxRoot v-model="model" :disabled="disabled" :name="name" :value="value" class="form-checkbox-button">
+      <CheckboxIndicator class="form-checkbox-indicator">
+        <Icon type="check" />
+      </CheckboxIndicator>
+    </CheckboxRoot>
+    <span v-if="$slots.default"><slot /></span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import {
+  CheckboxIndicator,
+  CheckboxRoot,
+} from 'reka-ui'
+
+const model = defineModel<boolean | 'indeterminate'>()
+
+defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+    default: undefined,
+  },
+  value: {
+    type: String,
+    default: 'on',
+  },
+})
+</script>
+
+<style scoped>
+.form-checkbox {
+  display: flex;
+  align-items: center;
+  gap: var(--size-2);
+  cursor: pointer;
+  user-select: none;
+
+  &:hover .form-checkbox-button {
+    border-color: var(--primary);
+  }
+}
+
+.form-checkbox-button {
+  all: unset;
+  inline-size: var(--size-4);
+  block-size: var(--size-4);
+  border-radius: calc(var(--border-radius) / 2);
+  border: 2px solid var(--muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--speed);
+  flex-shrink: 0;
+
+  &[data-state='checked'],
+  &[data-state='indeterminate'] {
+    border-color: var(--primary);
+    background: var(--primary);
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
+}
+
+.form-checkbox-indicator {
+  color: var(--background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .icon {
+    font-size: var(--font-xs);
+  }
+}
+</style>

package/app/components/Form/FormGroup.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="form-group" :class="{ radio }">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  radio?: boolean
+}>()
+</script>
+
+<style scoped>
+.form-group {
+  display: grid;
+  gap: var(--spacer-sm);
+
+  &.radio {
+    display: flex;
+    gap: var(--spacer-sm);
+
+    :deep(input) {
+      inline-size: min-content;
+
+      &:not(:first-of-type) {
+        margin-inline-start: var(--spacer-sm);
+      }
+    }
+
+    :deep(label),
+    :deep(input) {
+      display: inline;
+    }
+  }
+}
+</style>

package/app/components/Form/FormInputGroup.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="input-group">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.input-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  :deep(input + .icon) {
+    position: absolute;
+    inset-inline-end: var(--ui-padding-inline);
+    inline-size: var(--size-4);
+    color: var(--muted);
+    z-index: 2;
+  }
+
+  :deep(input:has(+ .icon)) {
+    padding-inline-end: calc(var(--ui-padding-inline) + var(--spacer-sm));
+
+    &:is(:hover, :active, :focus, .active) + .icon {
+      color: var(--gray-z-6);
+    }
+  }
+
+  :deep(input),
+  :deep(button),
+  :deep(.button),
+  :deep(a) {
+    z-index: 1;
+
+    &:has(+ input),
+    &:has(+ button),
+    &:has(+ a) {
+      border-start-end-radius: 0 !important;
+      border-end-end-radius: 0 !important;
+    }
+
+    + input,
+    + button,
+    + a {
+      margin-inline-start: calc(-1 * var(--border-width));
+      border-start-start-radius: 0 !important;
+      border-end-start-radius: 0 !important;
+    }
+
+    &:is(:hover, :active, :focus, .active) {
+      z-index: 2;
+    }
+  }
+}
+</style>

package/app/components/Form/FormItem.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="form-item">
+    <span v-if="$slots.prefix" class="prefix">
+      <slot name="prefix" />
+    </span>
+    <slot />
+    <span v-if="$slots.suffix" class="suffix">
+      <slot name="suffix" />
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.form-item {
+  border: var(--border);
+  border-radius: var(--border-radius);
+  display: flex;
+  align-items: center;
+  background: var(--background);
+  inline-size: 100%;
+  max-inline-size: -webkit-fill-available;
+
+  :deep(input),
+  :deep(textarea),
+  :deep(select) {
+    border: none;
+  }
+
+  &:has(input:hover),
+  &:has(input:focus) {
+    background: var(--button-background-highlight);
+    border-color: var(--button-border-color-highlight);
+  }
+
+  .prefix,
+  .suffix {
+    padding: 0 var(--ui-padding-inline);
+    color: var(--muted);
+    block-size: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .prefix {
+    border-inline-end: var(--button-border);
+  }
+
+  .suffix {
+    border-inline-start: var(--button-border);
+  }
+}
+</style>

package/app/components/Form/FormLabel.vue

@@ -0,0 +1,39 @@
+<template>
+  <label class="form-label">
+    <span v-if="label">{{ label }}</span>
+    <slot />
+  </label>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label?: string
+}>()
+</script>
+
+<style scoped>
+.form-label {
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size);
+  font-weight: var(--ui-font-weight);
+  text-transform: var(--ui-text-transform);
+  letter-spacing: var(--ui-letter-spacing);
+  line-height: var(--ui-line-height);
+  color: var(--ui-color);
+  transition: all var(--speed);
+  display: grid;
+  gap: var(--size-2);
+
+  &:hover {
+    color: var(--color);
+  }
+
+  :deep(a) {
+    text-decoration: underline;
+  }
+
+  > span:first-child {
+    display: block;
+  }
+}
+</style>

package/app/components/Form/FormRadioGroup.vue

@@ -0,0 +1,109 @@
+<template>
+  <RadioGroupRoot v-model="model" :disabled="disabled" :name="name" :orientation="orientation" class="form-radio-group">
+    <label v-for="option in options" :key="option[valueKey]" class="form-radio-item">
+      <RadioGroupItem :value="option[valueKey]" class="form-radio-button">
+        <RadioGroupIndicator class="form-radio-indicator" />
+      </RadioGroupItem>
+      <span>{{ option[labelKey] }}</span>
+    </label>
+  </RadioGroupRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+  RadioGroupRoot,
+} from 'reka-ui'
+
+const model = defineModel<string>()
+
+defineProps({
+  options: {
+    type: Array as () => Record<string, any>[],
+    default: () => [],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  orientation: {
+    type: String as () => 'horizontal' | 'vertical',
+    default: 'horizontal',
+  },
+  valueKey: {
+    type: String,
+    default: 'value',
+  },
+  labelKey: {
+    type: String,
+    default: 'label',
+  },
+  name: {
+    type: String,
+    default: undefined,
+  },
+})
+</script>
+
+<style scoped>
+.form-radio-group {
+  display: flex;
+  gap: var(--spacer);
+
+  &[data-orientation='vertical'] {
+    flex-direction: column;
+    gap: var(--spacer-sm);
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.form-radio-item {
+  display: flex;
+  align-items: center;
+  gap: var(--size-2);
+  cursor: pointer;
+  user-select: none;
+
+  &:hover .form-radio-button {
+    border-color: var(--primary);
+  }
+}
+
+.form-radio-button {
+  all: unset;
+  inline-size: var(--size-4);
+  block-size: var(--size-4);
+  border-radius: 50%;
+  border: 2px solid var(--muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color var(--speed);
+  flex-shrink: 0;
+
+  &[data-state='checked'] {
+    border-color: var(--primary);
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
+}
+
+.form-radio-indicator {
+  inline-size: var(--size-2);
+  block-size: var(--size-2);
+  border-radius: 50%;
+  background: var(--primary);
+}
+</style>