orio-ui 0.1.1 → 1.0.1

package/nuxt.config.ts

@@ -11,28 +11,28 @@ export default defineNuxtConfig({
       {
         path: './src/runtime/components',
         prefix: 'Orio',
-        pathPrefix: false
-      }
-    ]
+        pathPrefix: false,
+      },
+    ],
   },
 
   // Auto-import composables
   imports: {
-    dirs: ['./src/runtime/composables']
+    dirs: ['./src/runtime/composables'],
   },
 
   typescript: {
     strict: true,
-    typeCheck: true
+    typeCheck: true,
   },
 
   vite: {
     css: {
       preprocessorOptions: {
-        scss: {}
-      }
-    }
+        scss: {},
+      },
+    },
   },
 
-  compatibilityDate: '2025-01-15'
-})
+  compatibilityDate: '2025-01-15',
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orio-ui",
-  "version": "0.1.1",
+  "version": "1.0.1",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
   "main": "./src/runtime/index.ts",
@@ -32,7 +32,7 @@
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
     "lint": "eslint .",
-    "typecheck": "nuxt typecheck"
+    "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
     "@nuxt/kit": "^3.15.3",

package/src/module.ts

@@ -1,16 +1,16 @@
-import { defineNuxtModule } from '@nuxt/kit'
+import { defineNuxtModule } from '@nuxt/kit';
 
 export default defineNuxtModule({
   meta: {
     name: 'orio-ui',
     configKey: 'orioUi',
     compatibility: {
-      nuxt: '^3.0.0 || ^4.0.0'
-    }
+      nuxt: '^3.0.0 || ^4.0.0',
+    },
   },
   defaults: {},
   setup() {
     // Module setup is handled by the layer (nuxt.config.ts)
     // This module entry is required for the build process
-  }
-})
+  },
+});

package/src/runtime/components/ControlElement.vue

@@ -3,11 +3,11 @@ export interface ControlProps {
   /**
    * Minimal will reset margin and remove border and box shadow from every element inside the slot
    */
-  appearance?: "normal" | "minimal";
+  appearance?: 'normal' | 'minimal';
 }
 
 withDefaults(defineProps<ControlProps>(), {
-  appearance: "normal",
+  appearance: 'normal',
 });
 </script>
 

package/src/runtime/components/DashedContainer.vue

@@ -24,12 +24,7 @@ const iconSize = computed(() => {
 </script>
 <template>
   <div class="dashed-container gradient-hover" @click="$emit('click')">
-    <orio-icon
-      v-if="icon"
-      :name="icon"
-      class="icon-class"
-      :size="iconSize"
-    />
+    <orio-icon v-if="icon" :name="icon" class="icon-class" :size="iconSize" />
     <span v-if="text" class="text-class" :size>{{ text }}</span>
   </div>
 </template>

package/src/runtime/components/Icon.vue

@@ -1,22 +1,22 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { iconRegistry, type IconName } from '../utils/icon-registry'
+import { computed } from 'vue';
+import { iconRegistry, type IconName } from '../utils/icon-registry';
 
 export interface IconProps {
-  name: IconName | string
-  size?: string | number
-  color?: string
+  name: IconName | string;
+  size?: string | number;
+  color?: string;
 }
 
 const props = withDefaults(defineProps<IconProps>(), {
   size: '1em',
-  color: 'currentColor'
-})
+  color: 'currentColor',
+});
 
-const iconSvg = computed(() => iconRegistry[props.name] || '')
+const iconSvg = computed(() => iconRegistry[props.name] || '');
 const sizeValue = computed(() =>
-  typeof props.size === 'number' ? `${props.size}px` : props.size
-)
+  typeof props.size === 'number' ? `${props.size}px` : props.size,
+);
 </script>
 
 <template>
@@ -29,7 +29,7 @@ const sizeValue = computed(() =>
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
-      flexShrink: 0
+      flexShrink: 0,
     }"
     v-html="iconSvg"
   />

package/src/runtime/components/Input.vue

@@ -8,12 +8,7 @@ const text = defineModel<string>({ default: '' });
 
 <template>
   <orio-control-element v-bind="$attrs">
-    <input
-      v-bind="$attrs"
-      v-model="text"
-      type="text"
-      class="text-input"
-    >
+    <input v-bind="$attrs" v-model="text" type="text" class="text-input" />
   </orio-control-element>
 </template>
 

package/src/runtime/components/Modal.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
   origin: OriginRect | null;
 }>();
 
-const show = defineModel<Boolean>('show');
+const show = defineModel<boolean>('show');
 
 const wrapper = ref<HTMLDivElement | null>(null);
 

package/src/runtime/components/Popover.vue

@@ -20,7 +20,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick, onMounted, onBeforeUnmount, watch } from 'vue';
+import {
+  ref,
+  computed,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+} from 'vue';
 import { useElementBounding } from '@vueuse/core';
 
 const props = defineProps({

package/src/runtime/components/Selector.vue

@@ -18,7 +18,9 @@ const props = withDefaults(defineProps<SelectProps>(), {
 
 const { field, optionName, placeholder } = toRefs(props);
 
-const modelValue = defineModel<SelectableOption | SelectableOption[] | null | undefined>({
+const modelValue = defineModel<
+  SelectableOption | SelectableOption[] | null | undefined
+>({
   required: true,
 });
 
@@ -33,7 +35,7 @@ const flatModalValue = computed(() => {
       ? modelValue.value
       : (modelValue.value as T)[key.value];
   return modelValue.value.map((option) =>
-    typeof option === 'string' ? option : (option as T)[key.value]
+    typeof option === 'string' ? option : (option as T)[key.value],
   );
 });
 
@@ -41,7 +43,9 @@ 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]
+        typeof option === 'string'
+          ? option === opt
+          : opt[key.value] === (option as T)[key.value],
       );
       if (index > -1) {
         modelValue.value.splice(index, 1);
@@ -63,7 +67,9 @@ function isOptionSelected(option: SelectableOption): boolean {
   return !!(
     flatModalValue.value &&
     (flatModalValue.value === (option as T)[key.value] ||
-      (flatModalValue.value as string[]).includes((option as T)[key.value] as string))
+      (flatModalValue.value as string[]).includes(
+        (option as T)[key.value] as string,
+      ))
   );
 }
 
@@ -88,9 +94,19 @@ const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
       <template #default="{ toggle }">
         <slot name="trigger" :toggle>
           <div class="selector-trigger">
-            <slot name="trigger-content" :toggle v-bind="selectorAttrs" :attrs="$attrs">
+            <slot
+              name="trigger-content"
+              :toggle
+              v-bind="selectorAttrs"
+              :attrs="$attrs"
+            >
               <div class="trigger-content">
-                <slot name="trigger-label" :toggle v-bind="selectorAttrs" :attrs="$attrs">
+                <slot
+                  name="trigger-label"
+                  :toggle
+                  v-bind="selectorAttrs"
+                  :attrs="$attrs"
+                >
                   <template v-if="!props.multiple">
                     {{ getOptionLabel(modelValue as T) }}
                   </template>

package/src/runtime/components/Tag.vue

@@ -32,7 +32,11 @@ withDefaults(defineProps<Props>(), {
 /* Neutral (gray chip) */
 .tag--neutral {
   background-color: var(--color-surface);
-  border-color: color-mix(in srgb, var(--color-border) 80%, var(--color-accent) 20%);
+  border-color: color-mix(
+    in srgb,
+    var(--color-border) 80%,
+    var(--color-accent) 20%
+  );
   color: var(--color-muted);
 }
 

package/src/runtime/components/Textarea.vue

@@ -11,12 +11,7 @@ const modelValue = defineModel<string>({ default: '' });
 
 <template>
   <orio-control-element v-bind="attrs">
-    <textarea
-      v-bind="attrs"
-      v-model="modelValue"
-      rows="4"
-      class="textarea"
-    />
+    <textarea v-bind="attrs" v-model="modelValue" rows="4" class="textarea" />
   </orio-control-element>
 </template>
 

package/src/runtime/composables/index.ts

@@ -1,4 +1,9 @@
-export { useApi, type ApiOptions, type RequestBody, type RequestMethod } from './useApi';
+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

@@ -14,9 +14,15 @@ export interface ApiOptions {
 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>;
 
-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,

package/src/runtime/composables/useFuzzySearch.ts

@@ -9,19 +9,19 @@ import { useFuse, type FuseOptions } from '@vueuse/integrations/useFuse';
  */
 export function useFuzzySearch(
   dataSource: MaybeRef<string[]>,
-  search: MaybeRef<string>
+  search: MaybeRef<string>,
 ): ReturnType<typeof useFuse>;
 
 export function useFuzzySearch<T extends object>(
   dataSource: MaybeRef<T[]>,
   search: MaybeRef<string>,
-  options: FuseOptions<T>
+  options: FuseOptions<T>,
 ): ReturnType<typeof useFuse>;
 
 export function useFuzzySearch<T extends object>(
   dataSource: MaybeRef<string[] | T[]>,
   search: MaybeRef<string>,
-  options?: FuseOptions<T>
+  options?: FuseOptions<T>,
 ) {
   // If options are provided, treat as object array; otherwise string array
   const isObjectArray = !!options;

package/src/runtime/composables/useModal.ts

@@ -8,7 +8,7 @@ export interface OriginRect {
 }
 
 export interface ModalProps {
-  show: Boolean;
+  show: boolean;
   origin: OriginRect | null;
   'onUpdate:show': (state: boolean) => void;
 }
@@ -17,10 +17,10 @@ export function useModal() {
   const modalProps = ref<ModalProps>({
     show: false,
     origin: null,
-    'onUpdate:show': (state: Boolean) => updateShow(state),
+    'onUpdate:show': (state: boolean) => updateShow(state),
   });
 
-  function updateShow(state: Boolean) {
+  function updateShow(state: boolean) {
     modalProps.value.show = state;
   }
 

package/src/runtime/index.ts

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

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

@@ -11,31 +11,31 @@ export const iconRegistry: Record<string, string> = {
   '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>`,
+  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>`,
+  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>`,
+  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>`,
+  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>`,
+  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>`,
+  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>`,
+  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>`,
+  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>`,
-}
+  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
+export type IconName = keyof typeof iconRegistry;