orio-ui 0.1.1 → 1.0.2

package/src/runtime/components/Input.vue

@@ -1,54 +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 lang="scss" 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;
-
-  &::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/Tag.vue

@@ -1,45 +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 {
-  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/composables/index.ts

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

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

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

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

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

@@ -1,25 +0,0 @@
-// 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'