orio-ui 0.1.0

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

@@ -0,0 +1,83 @@
+<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 lang="scss" scoped>
+div {
+  white-space: pre-wrap;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  &.clamp {
+    display: -webkit-box;
+    overflow: hidden;
+    line-clamp: v-bind(clampLines);
+    -webkit-line-clamp: v-bind(clampLines);
+    -webkit-box-orient: vertical;
+  }
+
+  &.uppercase {
+    text-transform: uppercase;
+  }
+
+  &.text {
+    color: var(--color-text);
+  }
+  &.title {
+    font-weight: bold;
+    color: var(--color-text);
+  }
+  &.subtitle {
+    font-weight: semi-bold;
+    color: var(--color-muted);
+  }
+  &.italics {
+    font-style: italic;
+    color: var(--color-muted);
+  }
+
+  &.small {
+    font-size: 0.75rem;
+  }
+  &.medium {
+    font-size: 0.875rem;
+  }
+  &.large {
+    font-size: 1.25rem;
+  }
+  &.extra-large {
+    font-size: 1.75rem;
+  }
+}
+</style>

package/src/runtime/composables/index.ts

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

package/src/runtime/composables/useApi.ts

@@ -0,0 +1,26 @@
+import { $fetch } from 'ofetch';
+
+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>;
+}
+
+// Overload 1: Just URL (GET request)
+export async function useApi<T = unknown>(url: string): Promise<T>;
+
+// Overload 2: URL + options
+export async function useApi<T = unknown>(url: string, options: ApiOptions): Promise<T>;
+
+export async function useApi<T = unknown>(url: string, options?: ApiOptions): Promise<T> {
+  return (await $fetch(url, {
+    method: options?.method || 'GET',
+    body: options?.body,
+    signal: options?.signal,
+    query: options?.query,
+  })) as T;
+}

package/src/runtime/composables/useFuzzySearch.ts

@@ -0,0 +1,51 @@
+import { computed, unref, 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 function useFuzzySearch(
+  dataSource: MaybeRef<string[]>,
+  search: MaybeRef<string>
+): ReturnType<typeof useFuse>;
+
+export function useFuzzySearch<T extends object>(
+  dataSource: MaybeRef<T[]>,
+  search: MaybeRef<string>,
+  options: FuseOptions<T>
+): ReturnType<typeof useFuse>;
+
+export function useFuzzySearch<T extends object>(
+  dataSource: MaybeRef<string[] | T[]>,
+  search: MaybeRef<string>,
+  options?: FuseOptions<T>
+) {
+  // If options are provided, treat as object array; otherwise string array
+  const isObjectArray = !!options;
+
+  if (!isObjectArray) {
+    // String array handling
+    const wrappedData = computed(() => {
+      const data = unref(dataSource) as string[];
+      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 {
+    // Object array handling
+    const { results } = useFuse(search, dataSource as MaybeRef<T[]>, {
+      fuseOptions: options,
+      matchAllWhenSearchEmpty: true,
+    });
+
+    return computed(() => results.value.map(({ item }) => item));
+  }
+}

package/src/runtime/composables/useModal.ts

@@ -0,0 +1,47 @@
+import { ref } from 'vue';
+
+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 function useModal() {
+  const modalProps = ref<ModalProps>({
+    show: false,
+    origin: null,
+    'onUpdate:show': (state: Boolean) => updateShow(state),
+  });
+
+  function updateShow(state: Boolean) {
+    modalProps.value.show = state;
+  }
+
+  function openModal(event?: MouseEvent) {
+    modalProps.value.origin = null;
+    if (!event) {
+      modalProps.value.show = true;
+      return;
+    }
+    const target = event.target as HTMLElement;
+    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/src/runtime/composables/useTheme.ts

@@ -0,0 +1,31 @@
+import { onMounted } from 'vue';
+import { useLocalStorage } from '@vueuse/core';
+
+export function useTheme() {
+  // Namespace storage keys to avoid conflicts with consumer apps
+  const theme = useLocalStorage<string>('orio-theme', 'navy');
+  const mode = useLocalStorage<string>('orio-mode', 'dark');
+
+  function setTheme(name: string) {
+    theme.value = name;
+    // Only set DOM attributes on client side
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('data-theme', name);
+    }
+  }
+
+  function setMode(name: string) {
+    mode.value = name;
+    // Only set DOM attributes on client side
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('data-mode', name);
+    }
+  }
+
+  onMounted(() => {
+    setTheme(theme.value);
+    setMode(mode.value);
+  });
+
+  return { theme, setTheme, mode, setMode };
+}

package/src/runtime/index.ts

@@ -0,0 +1,25 @@
+// Export all components
+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 all composables
+export * from './composables'
+
+// Export utils
+export { iconRegistry, type IconName } from './utils/icon-registry'

package/src/runtime/utils/icon-registry.ts

@@ -0,0 +1,41 @@
+// Icon registry with bundled SVG icons
+
+export const iconRegistry: Record<string, string> = {
+  // Loading spinner (line-md:loading-loop)
+  'loading-loop': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="2" r="0"><animate attributeName="r" begin="0" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(45 12 12)"><animate attributeName="r" begin="0.125s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(90 12 12)"><animate attributeName="r" begin="0.25s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(135 12 12)"><animate attributeName="r" begin="0.375s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(180 12 12)"><animate attributeName="r" begin="0.5s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(225 12 12)"><animate attributeName="r" begin="0.625s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(270 12 12)"><animate attributeName="r" begin="0.75s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(315 12 12)"><animate attributeName="r" begin="0.875s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle></svg>`,
+
+  // Chevron down (mdi-light:chevron-down)
+  'chevron-down': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6z"/></svg>`,
+
+  // Chevron up
+  'chevron-up': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/></svg>`,
+
+  // Edit (material-symbols:edit-sharp)
+  'edit': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 21v-4.25L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.438.65T21 6.4q0 .4-.137.763t-.438.662L7.25 21zM17.6 7.8L19 6.4L17.6 5l-1.4 1.4z"/></svg>`,
+
+  // Check / Checkmark
+  'check': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z"/></svg>`,
+
+  // Plus / Add
+  'plus': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>`,
+
+  // Calendar
+  'calendar': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 16H5V10h14zm0-12H5V6h14zM7 12h5v5H7z"/></svg>`,
+
+  // Close / X
+  'close': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></svg>`,
+
+  // Search / Magnifying glass
+  'search': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14"/></svg>`,
+
+  // Upload
+  'upload': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16h6v-6h4l-7-7l-7 7h4zm-4 2h14v2H5z"/></svg>`,
+
+  // Download
+  'download': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7zM5 18v2h14v-2z"/></svg>`,
+
+  // Delete / Trash
+  'delete': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12l1.41 1.41L13.41 14l2.12 2.12l-1.41 1.41L12 15.41l-2.12 2.12l-1.41-1.41L10.59 14zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"/></svg>`,
+}
+
+export type IconName = keyof typeof iconRegistry