orio-ui 0.1.0

package/src/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 lang="scss" scoped>
+.popover {
+  border: 0;
+  background-color: transparent;
+  position: fixed;
+  z-index: 1;
+}
+</style>

package/src/runtime/components/Selector.vue

@@ -0,0 +1,224 @@
+<script setup lang="ts" generic="T extends object">
+import { computed, toRefs } from 'vue';
+
+export type SelectableOption<T extends object = object> = string | T;
+
+export interface SelectProps<T extends object = object> {
+  options: SelectableOption[];
+  multiple?: boolean;
+  field?: string;
+  optionName?: string;
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<SelectProps>(), {
+  placeholder: 'Select an option',
+  field: 'id',
+});
+
+const { field, optionName, placeholder } = toRefs(props);
+
+const modelValue = defineModel<SelectableOption | SelectableOption[] | null | undefined>({
+  required: true,
+});
+
+// Key to the object when option is not 'string'
+const key = computed(() => field.value as Extract<keyof T, string>);
+const label = computed(() => optionName.value as Extract<keyof T, string>);
+
+const flatModalValue = computed(() => {
+  if (!modelValue.value) return null;
+  if (!props.multiple || !Array.isArray(modelValue.value))
+    return typeof modelValue.value === 'string'
+      ? modelValue.value
+      : (modelValue.value as T)[key.value];
+  return modelValue.value.map((option) =>
+    typeof option === 'string' ? option : (option as T)[key.value]
+  );
+});
+
+function toggleOption(option: SelectableOption, toggle: () => void) {
+  if (props.multiple) {
+    if (Array.isArray(modelValue.value)) {
+      const index = modelValue.value.findIndex((opt) =>
+        typeof option === 'string' ? option === opt : opt[key.value] === (option as T)[key.value]
+      );
+      if (index > -1) {
+        modelValue.value.splice(index, 1);
+      } else {
+        modelValue.value.push(option);
+      }
+    } else {
+      modelValue.value = [option];
+    }
+  } else {
+    modelValue.value = option;
+    // should later be turned off with some additional interaction modes
+    toggle();
+  }
+}
+
+function isOptionSelected(option: SelectableOption): boolean {
+  if (typeof option === 'string') return modelValue.value === option;
+  return !!(
+    flatModalValue.value &&
+    (flatModalValue.value === (option as T)[key.value] ||
+      (flatModalValue.value as string[]).includes((option as T)[key.value] as string))
+  );
+}
+
+function getOptionLabel(option: SelectableOption | undefined): string {
+  if (!option) return placeholder.value;
+  if (typeof option === 'string') return option;
+  if (optionName.value) return String((option as T)[label.value]);
+  return JSON.stringify(option);
+}
+
+function getOptionKey(option: SelectableOption): string | number {
+  if (typeof option === 'string') return option;
+  return String((option as T)[key.value]);
+}
+
+const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
+</script>
+
+<template>
+  <orio-control-element>
+    <orio-popover position="bottom-right" :offset="5">
+      <template #default="{ toggle }">
+        <slot name="trigger" :toggle>
+          <div class="selector-trigger">
+            <slot name="trigger-content" :toggle v-bind="selectorAttrs" :attrs="$attrs">
+              <div class="trigger-content">
+                <slot name="trigger-label" :toggle v-bind="selectorAttrs" :attrs="$attrs">
+                  <template v-if="!props.multiple">
+                    {{ getOptionLabel(modelValue as T) }}
+                  </template>
+                  <template v-else-if="Array.isArray(modelValue)">
+                    <span> {{ modelValue!.length }} selected </span>
+                  </template>
+                </slot>
+              </div>
+              <orio-icon name="chevron-down" />
+            </slot>
+          </div>
+        </slot>
+      </template>
+
+      <template #content="{ toggle }">
+        <div class="selector-content">
+          <ul v-if="options.length">
+            <li
+              v-for="option in options"
+              :key="getOptionKey(option)"
+              :class="{ selected: isOptionSelected(option) }"
+              @click="toggleOption(option, toggle)"
+            >
+              <slot
+                name="option"
+                :option
+                :toggle
+                :selected="isOptionSelected(option)"
+                v-bind="selectorAttrs"
+              >
+                {{ getOptionLabel(option) }}
+              </slot>
+            </li>
+          </ul>
+          <slot v-else name="no-options">
+            <orio-empty-state title="No options found" size="small" />
+          </slot>
+          <slot name="options-addon" />
+        </div>
+      </template>
+    </orio-popover>
+  </orio-control-element>
+</template>
+
+<style lang="scss" scoped>
+.selector-trigger {
+  z-index: 1;
+  min-height: 1.5rem;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.95rem;
+  color: var(--color-text);
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    background-color 0.2s ease;
+
+  &:hover {
+    border-color: var(--color-accent);
+    background-color: var(--color-surface); /* subtle lift */
+  }
+
+  &:focus-within {
+    border-color: var(--color-accent);
+    box-shadow: 0 0 0 2px var(--color-surface);
+  }
+
+  .icon {
+    color: var(--color-muted);
+    transition: color 0.2s ease;
+  }
+
+  &:hover .icon {
+    color: var(--color-accent);
+  }
+}
+
+.selector-content {
+  min-width: 15rem;
+  max-height: 20rem;
+  overflow: auto;
+
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  margin-top: 0.25rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      padding: 0.5rem 0.75rem;
+      cursor: pointer;
+      transition:
+        background-color 0.15s ease,
+        color 0.15s ease;
+
+      color: var(--color-text);
+
+      &:hover {
+        background-color: var(--color-surface); /* neutral lift */
+      }
+
+      &.selected {
+        background-color: var(--color-accent);
+        color: var(--color-accent-soft);
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+.trigger-content {
+  width: 100%;
+}
+
+:deep(.popover) {
+  width: 100%;
+}
+</style>

package/src/runtime/components/Tag.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+export type TagStyle = 'neutral' | 'accent';
+
+interface Props {
+  text: string;
+  variant?: TagStyle;
+}
+withDefaults(defineProps<Props>(), {
+  variant: 'neutral',
+});
+</script>
+
+<template>
+  <span class="tag" :class="`tag--${variant}`">
+    {{ text }}
+  </span>
+</template>
+
+<style scoped>
+.tag {
+  max-height: 1rem;
+  display: inline-block;
+  padding: 0.25rem 0.6rem;
+  border-radius: 1rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  line-height: 1;
+  border: 1px solid transparent;
+  user-select: none;
+}
+
+/* Neutral (gray chip) */
+.tag--neutral {
+  background-color: var(--color-surface);
+  border-color: color-mix(in srgb, var(--color-border) 80%, var(--color-accent) 20%);
+  color: var(--color-muted);
+}
+
+/* Accent (themed chip) */
+.tag--accent {
+  background-color: var(--color-accent-soft);
+  border-color: var(--color-accent-border);
+  color: var(--color-accent);
+}
+</style>

package/src/runtime/components/Textarea.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useAttrs } from 'vue';
+
+const attrs = useAttrs();
+defineEmits<{
+  (e: 'input', value: string): void;
+}>();
+
+const modelValue = defineModel<string>({ default: '' });
+</script>
+
+<template>
+  <orio-control-element v-bind="attrs">
+    <textarea
+      v-bind="attrs"
+      v-model="modelValue"
+      rows="4"
+      class="textarea"
+    />
+  </orio-control-element>
+</template>
+
+<style lang="scss" scoped>
+.textarea {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  font-size: 1rem;
+  line-height: 1.4;
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  box-sizing: border-box;
+  resize: vertical; /* Let user resize vertically only */
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &::placeholder {
+    color: var(--color-muted);
+  }
+
+  &:hover {
+    border-color: var(--color-accent);
+  }
+
+  &:focus {
+    border-color: var(--color-accent);
+    box-shadow: 0 0 0 2px var(--color-accent-soft);
+    outline: none;
+  }
+
+  &:disabled {
+    background-color: var(--color-surface);
+    color: var(--color-muted);
+    cursor: not-allowed;
+  }
+}
+</style>

package/src/runtime/components/view/Dates.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed, toRefs } from 'vue';
+
+export interface ResumeDate {
+  startDate: string;
+  endDate?: string | null; // undefined - mean single date, null - means "Present"
+}
+
+interface Props {
+  dates: ResumeDate;
+  month?: boolean; // Optional prop to indicate if the date should be displayed as month/year
+  size?: 'small' | 'medium' | 'large';
+  type?: 'text' | 'title' | 'subtitle' | 'italics';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'small',
+  type: 'italics',
+});
+
+const { dates } = toRefs(props);
+
+function formatMonthYear(value: string) {
+  if (!value) return '';
+  if (!props.month)
+    return new Intl.DateTimeFormat('en-US', {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+    }).format(new Date(value));
+  return new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    year: 'numeric',
+  }).format(new Date(value));
+}
+
+const startDate = computed(() => formatMonthYear(dates.value.startDate));
+
+const endDate = computed(() => {
+  if (dates.value.endDate === undefined) return null;
+  return dates.value.endDate !== null
+    ? formatMonthYear(dates.value.endDate)
+    : 'Present';
+});
+</script>
+
+<template>
+  <div class="view-date">
+    <orio-view-text :model-value="startDate" :type :size />
+    <template v-if="endDate">
+      <span v-if="startDate"> - </span>
+      <orio-view-text :model-value="endDate" :type :size />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.view-date * {
+  display: inline;
+}
+</style>

package/src/runtime/components/view/Separator.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  style?: 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge';
+  size?: number | string;
+  margin?: number | string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  style: 'solid',
+  size: 1,
+  margin: 1,
+});
+
+const sizePx = computed(() => `${props.size}px`);
+const margin = computed(() => `${props.margin}rem`);
+</script>
+
+<template>
+  <div />
+</template>
+
+<style scoped>
+div {
+  width: 100%;
+  border-block-end: v-bind(sizePx) v-bind(style) var(--color-border);
+  margin-block: v-bind(margin);
+}
+</style>