orio-ui 0.1.0 → 0.1.1

package/dist/runtime/components/Input.vue

@@ -1,48 +0,0 @@
-<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

@@ -1,6 +0,0 @@
-<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

@@ -1,69 +0,0 @@
-<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

@@ -1,249 +0,0 @@
-<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>

package/dist/runtime/components/Selector.vue

@@ -1,208 +0,0 @@
-<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 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;
-}
-.selector-trigger:hover {
-  border-color: var(--color-accent);
-  background-color: var(--color-surface); /* subtle lift */
-}
-.selector-trigger:focus-within {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px var(--color-surface);
-}
-.selector-trigger .icon {
-  color: var(--color-muted);
-  transition: color 0.2s ease;
-}
-.selector-trigger: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);
-}
-.selector-content ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.selector-content ul li {
-  padding: 0.5rem 0.75rem;
-  cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-  color: var(--color-text);
-}
-.selector-content ul li:hover {
-  background-color: var(--color-surface); /* neutral lift */
-}
-.selector-content ul li.selected {
-  background-color: var(--color-accent);
-  color: var(--color-accent-soft);
-  font-weight: 500;
-}
-
-.trigger-content {
-  width: 100%;
-}
-
-:deep(.popover) {
-  width: 100%;
-}
-</style>

package/dist/runtime/components/Tag.vue

@@ -1,21 +0,0 @@
-<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{border:1px solid transparent;border-radius:1rem;display:inline-block;font-size:.8rem;font-weight:500;line-height:1;max-height:1rem;padding:.25rem .6rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.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)}.tag--accent{background-color:var(--color-accent-soft);border-color:var(--color-accent-border);color:var(--color-accent)}
-</style>

package/dist/runtime/components/Textarea.vue

@@ -1,53 +0,0 @@
-<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 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;
-}
-.textarea::placeholder {
-  color: var(--color-muted);
-}
-.textarea:hover {
-  border-color: var(--color-accent);
-}
-.textarea:focus {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px var(--color-accent-soft);
-  outline: none;
-}
-.textarea:disabled {
-  background-color: var(--color-surface);
-  color: var(--color-muted);
-  cursor: not-allowed;
-}
-</style>