orio-ui 0.1.0

package/dist/runtime/components/Selector.vue

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

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

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

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

@@ -0,0 +1,59 @@
+<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/dist/runtime/components/view/Separator.vue

@@ -0,0 +1,26 @@
+<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{border-block-end:v-bind(sizePx) v-bind(style) var(--color-border);margin-block:v-bind(margin);width:100%}
+</style>

package/dist/runtime/components/view/Text.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+
+export type TextTypes = 'text' | 'title' | 'subtitle' | 'italics';
+
+export interface TextProps {
+  type?: TextTypes;
+  size?: 'small' | 'medium' | 'large' | 'extra-large';
+  uppercase?: boolean;
+  icon?: string | null;
+  lineClamp?: number | string;
+}
+const props = withDefaults(defineProps<TextProps>(), {
+  type: 'text',
+  size: 'medium',
+  uppercase: false,
+  icon: null,
+  lineClamp: undefined,
+});
+const attrs = useAttrs();
+const modelValue = defineModel<string>();
+
+const clampLines = computed(() => Number(props.lineClamp ?? 1));
+</script>
+
+<template>
+  <div :class="[type, size, { uppercase, clamp: !!lineClamp }]" v-bind="attrs">
+    <orio-icon v-if="icon" :name="icon" />
+    <slot>
+      {{ modelValue }}
+    </slot>
+  </div>
+</template>
+
+<style scoped>
+div {
+  white-space: pre-wrap;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+div.clamp {
+  display: -webkit-box;
+  overflow: hidden;
+  line-clamp: v-bind(clampLines);
+  -webkit-line-clamp: v-bind(clampLines);
+  -webkit-box-orient: vertical;
+}
+div.uppercase {
+  text-transform: uppercase;
+}
+div.text {
+  color: var(--color-text);
+}
+div.title {
+  font-weight: bold;
+  color: var(--color-text);
+}
+div.subtitle {
+  font-weight: semi-bold;
+  color: var(--color-muted);
+}
+div.italics {
+  font-style: italic;
+  color: var(--color-muted);
+}
+div.small {
+  font-size: 0.75rem;
+}
+div.medium {
+  font-size: 0.875rem;
+}
+div.large {
+  font-size: 1.25rem;
+}
+div.extra-large {
+  font-size: 1.75rem;
+}
+</style>

package/dist/runtime/composables/index.d.ts

@@ -0,0 +1,4 @@
+export { useApi, type ApiOptions, type RequestBody, type RequestMethod } from './useApi.js';
+export { useFuzzySearch } from './useFuzzySearch.js';
+export { useModal, type ModalProps, type OriginRect } from './useModal.js';
+export { useTheme } from './useTheme.js';

package/dist/runtime/composables/index.js

@@ -0,0 +1,4 @@
+export { useApi } from "./useApi.js";
+export { useFuzzySearch } from "./useFuzzySearch.js";
+export { useModal } from "./useModal.js";
+export { useTheme } from "./useTheme.js";

package/dist/runtime/composables/useApi.d.ts

@@ -0,0 +1,10 @@
+export type RequestBody = Record<string, unknown>;
+export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+export interface ApiOptions {
+    method?: RequestMethod;
+    body?: RequestBody;
+    signal?: AbortSignal;
+    query?: Record<string, unknown>;
+}
+export declare function useApi<T = unknown>(url: string): Promise<T>;
+export declare function useApi<T = unknown>(url: string, options: ApiOptions): Promise<T>;

package/dist/runtime/composables/useApi.js

@@ -0,0 +1,9 @@
+import { $fetch } from "ofetch";
+export async function useApi(url, options) {
+  return await $fetch(url, {
+    method: options?.method || "GET",
+    body: options?.body,
+    signal: options?.signal,
+    query: options?.query
+  });
+}

package/dist/runtime/composables/useFuzzySearch.d.ts

@@ -0,0 +1,10 @@
+import { type MaybeRef } from 'vue';
+import { useFuse, type FuseOptions } from '@vueuse/integrations/useFuse';
+/**
+ * Search using Fuse.js fuzzy search
+ * @param dataSource - Array of strings or objects to search
+ * @param search - Search query string
+ * @param options - Fuse.js options (e.g., { keys: ['name'] })
+ */
+export declare function useFuzzySearch(dataSource: MaybeRef<string[]>, search: MaybeRef<string>): ReturnType<typeof useFuse>;
+export declare function useFuzzySearch<T extends object>(dataSource: MaybeRef<T[]>, search: MaybeRef<string>, options: FuseOptions<T>): ReturnType<typeof useFuse>;

package/dist/runtime/composables/useFuzzySearch.js

@@ -0,0 +1,22 @@
+import { computed, unref } from "vue";
+import { useFuse } from "@vueuse/integrations/useFuse";
+export function useFuzzySearch(dataSource, search, options) {
+  const isObjectArray = !!options;
+  if (!isObjectArray) {
+    const wrappedData = computed(() => {
+      const data = unref(dataSource);
+      return data.map((str) => ({ value: str }));
+    });
+    const { results } = useFuse(search, wrappedData, {
+      fuseOptions: { keys: ["value"] },
+      matchAllWhenSearchEmpty: true
+    });
+    return computed(() => results.value.map(({ item }) => item.value));
+  } else {
+    const { results } = useFuse(search, dataSource, {
+      fuseOptions: options,
+      matchAllWhenSearchEmpty: true
+    });
+    return computed(() => results.value.map(({ item }) => item));
+  }
+}

package/dist/runtime/composables/useModal.d.ts

@@ -0,0 +1,15 @@
+export interface OriginRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface ModalProps {
+    show: Boolean;
+    origin: OriginRect | null;
+    'onUpdate:show': (state: boolean) => void;
+}
+export declare function useModal(): {
+    modalProps: import("vue").Ref<any, any>;
+    openModal: (event?: MouseEvent) => void;
+};

package/dist/runtime/composables/useModal.js

@@ -0,0 +1,28 @@
+import { ref } from "vue";
+export function useModal() {
+  const modalProps = ref({
+    show: false,
+    origin: null,
+    "onUpdate:show": (state) => updateShow(state)
+  });
+  function updateShow(state) {
+    modalProps.value.show = state;
+  }
+  function openModal(event) {
+    modalProps.value.origin = null;
+    if (!event) {
+      modalProps.value.show = true;
+      return;
+    }
+    const target = event.target;
+    const rect = target.getBoundingClientRect();
+    modalProps.value.origin = {
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height
+    };
+    modalProps.value.show = true;
+  }
+  return { modalProps, openModal };
+}

package/dist/runtime/composables/useTheme.d.ts

@@ -0,0 +1,6 @@
+export declare function useTheme(): {
+    theme: import("@vueuse/shared").RemovableRef<string>;
+    setTheme: (name: string) => void;
+    mode: import("@vueuse/shared").RemovableRef<string>;
+    setMode: (name: string) => void;
+};

package/dist/runtime/composables/useTheme.js

@@ -0,0 +1,23 @@
+import { onMounted } from "vue";
+import { useLocalStorage } from "@vueuse/core";
+export function useTheme() {
+  const theme = useLocalStorage("orio-theme", "navy");
+  const mode = useLocalStorage("orio-mode", "dark");
+  function setTheme(name) {
+    theme.value = name;
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute("data-theme", name);
+    }
+  }
+  function setMode(name) {
+    mode.value = name;
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute("data-mode", name);
+    }
+  }
+  onMounted(() => {
+    setTheme(theme.value);
+    setMode(mode.value);
+  });
+  return { theme, setTheme, mode, setMode };
+}

package/dist/runtime/index.d.ts

@@ -0,0 +1,20 @@
+export { default as Button } from './components/Button.vue.js';
+export { default as Input } from './components/Input.vue.js';
+export { default as Textarea } from './components/Textarea.vue.js';
+export { default as CheckBox } from './components/CheckBox.vue.js';
+export { default as DatePicker } from './components/DatePicker.vue.js';
+export { default as DateRangePicker } from './components/DateRangePicker.vue.js';
+export { default as Selector } from './components/Selector.vue.js';
+export { default as Tag } from './components/Tag.vue.js';
+export { default as Icon } from './components/Icon.vue.js';
+export { default as LoadingSpinner } from './components/LoadingSpinner.vue.js';
+export { default as Modal } from './components/Modal.vue.js';
+export { default as Popover } from './components/Popover.vue.js';
+export { default as EmptyState } from './components/EmptyState.vue.js';
+export { default as DashedContainer } from './components/DashedContainer.vue.js';
+export { default as ControlElement } from './components/ControlElement.vue.js';
+export { default as ViewText } from './components/view/Text.vue.js';
+export { default as ViewDates } from './components/view/Dates.vue.js';
+export { default as ViewSeparator } from './components/view/Separator.vue.js';
+export * from './composables/index.js';
+export { iconRegistry, type IconName } from './utils/icon-registry.js';

package/dist/runtime/index.js

@@ -0,0 +1,20 @@
+export { default as Button } from "./components/Button.vue";
+export { default as Input } from "./components/Input.vue";
+export { default as Textarea } from "./components/Textarea.vue";
+export { default as CheckBox } from "./components/CheckBox.vue";
+export { default as DatePicker } from "./components/DatePicker.vue";
+export { default as DateRangePicker } from "./components/DateRangePicker.vue";
+export { default as Selector } from "./components/Selector.vue";
+export { default as Tag } from "./components/Tag.vue";
+export { default as Icon } from "./components/Icon.vue";
+export { default as LoadingSpinner } from "./components/LoadingSpinner.vue";
+export { default as Modal } from "./components/Modal.vue";
+export { default as Popover } from "./components/Popover.vue";
+export { default as EmptyState } from "./components/EmptyState.vue";
+export { default as DashedContainer } from "./components/DashedContainer.vue";
+export { default as ControlElement } from "./components/ControlElement.vue";
+export { default as ViewText } from "./components/view/Text.vue";
+export { default as ViewDates } from "./components/view/Dates.vue";
+export { default as ViewSeparator } from "./components/view/Separator.vue";
+export * from "./composables/index.js";
+export { iconRegistry } from "./utils/icon-registry.js";

package/dist/runtime/utils/icon-registry.d.ts

@@ -0,0 +1,2 @@
+export declare const iconRegistry: Record<string, string>;
+export type IconName = keyof typeof iconRegistry;