orio-ui 0.1.0

package/dist/runtime/components/DateRangePicker.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import type { ResumeDate } from './view/Dates.vue';
+
+export interface DateRangePickerProps {
+  month?: boolean;
+}
+
+defineProps<DateRangePickerProps>();
+
+const dates = defineModel<ResumeDate>('dates', { required: true });
+
+const present = ref(dates.value.endDate !== '' && !dates.value.endDate);
+
+watch(present, (value) => {
+  if (value) {
+    dates.value.endDate = null; // Set end date to null when present is checked
+  } else {
+    dates.value.endDate = ''; // Reset end date when present is unchecked
+  }
+});
+
+const dateIsCorrect = computed(() => {
+  // Ensure that the start date is before the end date
+  if (dates.value.startDate && dates.value.endDate) {
+    return new Date(dates.value.startDate) <= new Date(dates.value.endDate);
+  }
+  return true; // If one of the dates is empty, consider it correct
+});
+
+defineExpose({ dateIsCorrect });
+</script>
+
+<template>
+  <div>
+    <orio-control-element>
+      <div class="date-range-picker">
+        <orio-date-picker v-model:date="dates.startDate" :month />
+        <orio-date-picker v-model:date="dates.endDate" :month />
+        <orio-check-box v-model="present"> Present </orio-check-box>
+      </div>
+    </orio-control-element>
+    <div v-if="!dateIsCorrect" class="error-message">
+      <p>Start date must be before end date.</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.date-range-picker {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.date-range-picker > * {
+  min-width: 0;
+}
+.date-range-picker .date-picker {
+  margin-inline: 0;
+}
+.date-range-picker .date-picker:first-child {
+  margin-inline-end: 0.5rem;
+}
+.date-range-picker .checkbox {
+  margin-inline-start: 0.25rem;
+}
+
+.error-message {
+  color: red;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+}
+</style>

package/dist/runtime/components/EmptyState.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+interface Props {
+  icon?: string;
+  title: string;
+  description?: string;
+  size?: 'small' | 'medium' | 'large';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium',
+});
+</script>
+
+<template>
+  <div class="empty-state" :class="size">
+    <orio-icon v-if="icon" :name="icon" class="empty-state-icon" />
+    <orio-view-text
+      type="title"
+      :size="size === 'large' ? 'medium' : 'small'"
+      class="empty-state-title"
+    >
+      {{ title }}
+    </orio-view-text>
+    <orio-view-text
+      v-if="description"
+      type="subtitle"
+      class="empty-state-description"
+    >
+      {{ description }}
+    </orio-view-text>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 0.5rem;
+  padding: 2rem;
+  color: var(--color-text-secondary);
+}
+.empty-state.small {
+  padding: 1rem;
+  gap: 0.25rem;
+}
+.empty-state.small .empty-state-icon {
+  font-size: 2rem;
+}
+.empty-state.medium {
+  padding: 2rem;
+  gap: 0.5rem;
+}
+.empty-state.medium .empty-state-icon {
+  font-size: 3rem;
+}
+.empty-state.large {
+  padding: 3rem;
+  gap: 1rem;
+}
+.empty-state.large .empty-state-icon {
+  font-size: 4rem;
+}
+
+.empty-state-icon {
+  color: var(--color-text-tertiary);
+  opacity: 0.5;
+}
+
+.empty-state-title {
+  color: var(--color-text-secondary);
+}
+
+.empty-state-description {
+  color: var(--color-text-tertiary);
+  max-width: 30ch;
+}
+</style>

package/dist/runtime/components/Icon.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { iconRegistry, type IconName } from '../utils/icon-registry'
+
+export interface IconProps {
+  name: IconName | string
+  size?: string | number
+  color?: string
+}
+
+const props = withDefaults(defineProps<IconProps>(), {
+  size: '1em',
+  color: 'currentColor'
+})
+
+const iconSvg = computed(() => iconRegistry[props.name] || '')
+const sizeValue = computed(() =>
+  typeof props.size === 'number' ? `${props.size}px` : props.size
+)
+</script>
+
+<template>
+  <span
+    class="orio-icon"
+    :style="{
+      width: sizeValue,
+      height: sizeValue,
+      color: color,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0
+    }"
+    v-html="iconSvg"
+  />
+</template>
+
+<style scoped>
+.orio-icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.orio-icon :deep(svg){fill:currentColor;height:100%;width:100%}
+</style>

package/dist/runtime/components/Input.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+defineEmits<{
+  (e: 'input', value: string): void;
+}>();
+
+const text = defineModel<string>({ default: '' });
+</script>
+
+<template>
+  <orio-control-element v-bind="$attrs">
+    <input
+      v-bind="$attrs"
+      v-model="text"
+      type="text"
+      class="text-input"
+    >
+  </orio-control-element>
+</template>
+
+<style scoped>
+.text-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  font-size: 1rem;
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  box-sizing: border-box;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.text-input::placeholder {
+  color: var(--color-muted);
+}
+.text-input:hover {
+  border-color: var(--color-accent);
+}
+.text-input:focus {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px var(--color-accent-soft);
+  outline: none;
+}
+.text-input:disabled {
+  background-color: var(--color-surface);
+  color: var(--color-muted);
+  cursor: not-allowed;
+}
+</style>

package/dist/runtime/components/LoadingSpinner.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+// Loading spinner using the bundled loading-loop icon
+</script>
+<template>
+  <orio-icon name="loading-loop" />
+</template>

package/dist/runtime/components/Modal.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref, nextTick, watch } from 'vue';
+import { useWindowSize, useTimeoutFn } from '@vueuse/core';
+
+export interface OriginRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+const props = defineProps<{
+  origin: OriginRect | null;
+}>();
+
+const show = defineModel<Boolean>('show');
+
+const wrapper = ref<HTMLDivElement | null>(null);
+
+const { width: windowWidth, height: windowHeight } = useWindowSize();
+
+function animateToCenter(el: HTMLDivElement) {
+  useTimeoutFn(() => {
+    requestAnimationFrame(() => {
+      el.style.transform = 'translate(0, 0) scale(1)';
+      el.style.opacity = '1';
+    });
+  }, 100);
+}
+
+async function animateOpen() {
+  await nextTick();
+
+  const el = wrapper.value;
+  if (!el) return;
+  if (!props.origin) {
+    animateToCenter(el);
+    return;
+  }
+
+  const { x, y, width, height } = props.origin;
+
+  el.style.transform = `
+        translate(${x - windowWidth.value / 2}px, ${y - windowHeight.value / 2}px)
+        scale(${width / el.offsetWidth}, ${height / el.offsetHeight})
+      `;
+  el.style.opacity = '0.5';
+
+  animateToCenter(el);
+}
+
+watch(show, (open) => {
+  if (open) animateOpen();
+});
+</script>
+
+<template>
+  <transition name="overlay-fade">
+    <div v-if="show" class="overlay" @click.self="show = false">
+      <div ref="wrapper" class="modal">
+        <slot />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style scoped>
+.overlay{align-items:center;backdrop-filter:blur(6px);background:rgba(0,0,0,.45);display:flex;inset:0;justify-content:center;position:fixed;transition:opacity .25s ease}.modal{background:#fff;border-radius:1rem;box-shadow:0 25px 60px rgba(0,0,0,.25);color:var(--color-muted);max-height:90vh;max-width:90vw;padding:24px;position:absolute;transform-origin:top left;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s ease;width:380px}.modal,.overlay-fade-enter-from,.overlay-fade-leave-to{opacity:0}.overlay-fade-enter-active,.overlay-fade-leave-active{transition:opacity .25s ease}
+</style>

package/dist/runtime/components/Popover.vue

@@ -0,0 +1,249 @@
+<template>
+  <div>
+    <div ref="trigger" @click="togglePopover()">
+      <slot :toggle="togglePopover" />
+    </div>
+
+    <Teleport to="body">
+      <Transition name="animate-fade-slide" appear>
+        <div
+          v-if="showPopover"
+          ref="popover"
+          class="popover"
+          :style="popoverStyle"
+        >
+          <slot name="content" :toggle="togglePopover" />
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick, onMounted, onBeforeUnmount, watch } from 'vue';
+import { useElementBounding } from '@vueuse/core';
+
+const props = defineProps({
+  /**
+   * Defines where the popover is placed relative to the trigger.
+   * Acceptable single values: 'top', 'bottom', 'left', 'right'
+   * Acceptable combos: 'top-left', 'top-right', 'bottom-left', 'bottom-right',
+   *                    'left-top', 'left-bottom', 'right-top', 'right-bottom'
+   * If you only provide 'top', 'bottom', 'left', or 'right',
+   * it aligns center by default.
+   */
+  position: {
+    type: String,
+    default: 'bottom-left',
+  },
+  /**
+   * Distance (in px) between the popover and the trigger element.
+   */
+  offset: {
+    type: Number,
+    default: 10,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const trigger = ref(null);
+const popover = ref(null);
+
+const { width: popoverWidth, height: popoverHeight } =
+  useElementBounding(popover);
+
+const showPopover = ref(false);
+const triggerRect = ref(null);
+const popoverRect = ref(null);
+
+/**
+ * Calculates the inline style for the popover based on position & offset.
+ */
+const popoverStyle = computed(() => {
+  if (!showPopover.value || !triggerRect.value || !popoverRect.value) {
+    return;
+  }
+
+  const [main, sub = 'center'] = currentPosition.value.split('-');
+  const offset = props.offset;
+
+  const tRect = triggerRect.value;
+  const pRect = popoverRect.value;
+
+  let topValue = 0;
+  let leftValue = 0;
+
+  // Calculate vertical position (top)
+  if (main === 'top') {
+    topValue = tRect.top - offset - pRect.height;
+  } else if (main === 'bottom') {
+    topValue = tRect.bottom + offset;
+  } else {
+    // For 'left' or 'right' main, center vertically
+    topValue = tRect.top + tRect.height / 2 - pRect.height / 2;
+  }
+
+  // Calculate horizontal position (left)
+  if (sub === 'left') {
+    leftValue = tRect.right - pRect.width;
+  } else if (sub === 'right') {
+    leftValue = tRect.left;
+  } else {
+    // 'center' is default horizontally
+    leftValue = tRect.left + tRect.width / 2 - pRect.width / 2;
+  }
+
+  // If the main position is 'left' or 'right', override horizontal positioning
+  if (main === 'left') {
+    leftValue = tRect.left - offset - pRect.width;
+  } else if (main === 'right') {
+    leftValue = tRect.right + offset;
+  }
+
+  return {
+    top: `${topValue}px`,
+    left: `${leftValue}px`,
+  };
+});
+
+const currentPosition = ref(props.position);
+
+const getFallbackPositions = (pos: string) => {
+  const [main, sub = 'center'] = pos.split('-');
+
+  const opposites: Record<string, string> = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
+  };
+
+  const allPositions = [
+    `${main}-${sub}`,
+    `${opposites[main]}-${sub}`,
+    `${main}-center`,
+    `${opposites[main]}-center`,
+    `${sub}-${main}`, // e.g. left-top
+    `${sub}-${opposites[main]}`,
+  ];
+
+  return [...new Set(allPositions)];
+};
+
+function checkIfFits(position: string, tRect: any, pRect: any, offset: number) {
+  const [main, sub = 'center'] = position.split('-');
+
+  const space = {
+    top: tRect.top,
+    bottom: window.innerHeight - tRect.bottom,
+    left: tRect.left,
+    right: window.innerWidth - tRect.right,
+  };
+
+  if (main === 'top' && space.top < pRect.height + offset) return false;
+  if (main === 'bottom' && space.bottom < pRect.height + offset) return false;
+  if (main === 'left' && space.left < pRect.width + offset) return false;
+  if (main === 'right' && space.right < pRect.width + offset) return false;
+
+  return true;
+}
+
+/**
+ * Calculates bounding client rects for trigger & popover,
+ * updating reactive refs.
+ */
+async function updateRects() {
+  await nextTick();
+  const triggerEl = trigger.value;
+  const popoverEl = popover.value?.firstElementChild || popover.value;
+
+  if (!triggerEl || !popoverEl) return;
+
+  const tRect = triggerEl.getBoundingClientRect();
+  triggerRect.value = tRect;
+
+  const fallbacks = getFallbackPositions(props.position);
+
+  for (const pos of fallbacks) {
+    // temporarily apply style to measure it
+    popoverEl.style.visibility = 'hidden';
+    popoverEl.style.display = 'block';
+
+    const pRect = popoverEl.getBoundingClientRect();
+    const fits = checkIfFits(pos, tRect, pRect, props.offset);
+
+    if (fits) {
+      popoverRect.value = pRect;
+      currentPosition.value = pos;
+      popoverEl.style.visibility = '';
+      return;
+    }
+  }
+
+  // fallback to original
+  popoverRect.value = popoverEl.getBoundingClientRect();
+  currentPosition.value = props.position;
+}
+
+/**
+ * Toggles popover visibility.
+ * @param {boolean|null} force - If `true`/`false`, force that state; if `null`, toggle.
+ */
+async function togglePopover(force: boolean | null = null) {
+  if (props.disabled) return;
+  showPopover.value = force !== null ? force : !showPopover.value;
+  if (!showPopover.value) return;
+
+  await nextTick();
+  updateRects();
+}
+
+/**
+ * Closes the popover if the click is outside trigger/popover.
+ */
+function handleDocumentClick(e: MouseEvent) {
+  if (!showPopover.value) return;
+
+  const clickedInsideTrigger =
+    trigger.value && trigger.value.contains(e.target as Node);
+  const clickedInsidePopover =
+    popover.value && popover.value.contains(e.target as Node);
+
+  if (!clickedInsideTrigger && !clickedInsidePopover) {
+    showPopover.value = false;
+  }
+}
+
+/**
+ * Updates position of popover on scroll/resize if popover is open.
+ */
+function redrawPopover() {
+  if (!showPopover.value) return;
+  updateRects();
+}
+
+watch([popoverWidth, popoverHeight], redrawPopover);
+
+onMounted(() => {
+  document.addEventListener('click', handleDocumentClick);
+  window.addEventListener('scroll', redrawPopover, true);
+  window.addEventListener('resize', redrawPopover, true);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleDocumentClick);
+  window.removeEventListener('scroll', redrawPopover, true);
+  window.removeEventListener('resize', redrawPopover, true);
+});
+</script>
+<style scoped>
+.popover {
+  border: 0;
+  background-color: transparent;
+  position: fixed;
+  z-index: 1;
+}
+</style>