@arclux/arc-ui-vue 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-vue",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Vue 3 wrappers for ARC UI Web Components.",
   "type": "module",
   "main": "src/index.ts",
@@ -44,7 +44,7 @@
     "vue": ">=3.3.0"
   },
   "dependencies": {
-    "@arclux/arc-ui": "1.3.0"
+    "@arclux/arc-ui": "1.5.0"
   },
   "license": "MIT",
   "keywords": [

package/src/content/Accordion.vue

@@ -5,9 +5,11 @@ import '@arclux/arc-ui';
 defineOptions({ name: 'Accordion' });
 
 withDefaults(defineProps<{
+  multiple?: boolean;
   _items?: string;
   _openItems?: string;
 }>(), {
+  multiple: false,
   _items: () => ([]),
   _openItems: 'new Set()',
 });
@@ -15,6 +17,7 @@ withDefaults(defineProps<{
 
 <template>
   <arc-accordion
+    :multiple="multiple"
     :_items="_items"
     :_openItems="_openItems"
   >

package/src/content/Avatar.vue

@@ -8,10 +8,14 @@ withDefaults(defineProps<{
   src?: string;
   name?: string;
   size?: 'sm' | 'md' | 'lg';
+  shape?: 'square' | 'rounded';
+  status?: 'online' | 'offline' | 'busy' | 'away';
 }>(), {
   src: '',
   name: '',
   size: 'md',
+  shape: 'circle',
+  status: '',
 });
 </script>
 
@@ -20,6 +24,8 @@ withDefaults(defineProps<{
     :src="src"
     :name="name"
     :size="size"
+    :shape="shape"
+    :status="status"
   >
     <slot />
   </arc-avatar>

package/src/content/Badge.vue

@@ -6,9 +6,11 @@ defineOptions({ name: 'Badge' });
 
 withDefaults(defineProps<{
   variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+  size?: 'sm' | 'lg';
   color?: string;
 }>(), {
   variant: 'default',
+  size: 'md',
   color: '',
 });
 </script>
@@ -16,6 +18,7 @@ withDefaults(defineProps<{
 <template>
   <arc-badge
     :variant="variant"
+    :size="size"
     :color="color"
   >
     <slot />

package/src/content/Callout.vue

@@ -5,15 +5,25 @@ import '@arclux/arc-ui';
 defineOptions({ name: 'Callout' });
 
 withDefaults(defineProps<{
-  variant?: 'info' | 'warning' | 'tip' | 'danger';
+  variant?: string;
+  dismissible?: boolean;
+  _dismissed?: string;
 }>(), {
   variant: 'info',
+  dismissible: false,
+  _dismissed: false,
 });
+
+defineEmits<{
+  'arc-dismiss': [event: CustomEvent];
+}>();
 </script>
 
 <template>
   <arc-callout
     :variant="variant"
+    :dismissible="dismissible"
+    :_dismissed="_dismissed"
   >
     <slot />
   </arc-callout>

package/src/content/Card.vue

@@ -6,9 +6,13 @@ defineOptions({ name: 'Card' });
 
 withDefaults(defineProps<{
   href?: string;
+  padding?: 'none' | 'sm' | 'lg';
+  interactive?: boolean;
   _hasFooter?: string;
 }>(), {
   href: '',
+  padding: 'md',
+  interactive: false,
   _hasFooter: false,
 });
 </script>
@@ -16,6 +20,8 @@ withDefaults(defineProps<{
 <template>
   <arc-card
     :href="href"
+    :padding="padding"
+    :interactive="interactive"
     :_hasFooter="_hasFooter"
   >
     <slot />

package/src/content/Divider.vue

@@ -8,9 +8,11 @@ withDefaults(defineProps<{
   variant?: 'subtle' | 'glow' | 'line-white' | 'line-primary' | 'line-gradient';
   align?: 'left' | 'right';
   vertical?: boolean;
+  label?: string;
 }>(), {
   variant: 'subtle',
   vertical: false,
+  label: '',
 });
 </script>
 
@@ -19,6 +21,7 @@ withDefaults(defineProps<{
     :variant="variant"
     :align="align"
     :vertical="vertical"
+    :label="label"
   >
     <slot />
   </arc-divider>

package/src/content/Skeleton.vue

@@ -8,10 +8,12 @@ withDefaults(defineProps<{
   variant?: 'text' | 'circle' | 'rect';
   width?: string;
   height?: string;
+  count?: number;
 }>(), {
   variant: 'text',
   width: '',
   height: '',
+  count: 1,
 });
 </script>
 
@@ -20,6 +22,7 @@ withDefaults(defineProps<{
     :variant="variant"
     :width="width"
     :height="height"
+    :count="count"
   >
     <slot />
   </arc-skeleton>

package/src/content/Stat.vue

@@ -7,9 +7,13 @@ defineOptions({ name: 'Stat' });
 withDefaults(defineProps<{
   value?: string;
   label?: string;
+  trend?: 'up' | 'down' | 'neutral';
+  change?: string;
 }>(), {
   value: '',
   label: '',
+  trend: '',
+  change: '',
 });
 </script>
 
@@ -17,6 +21,8 @@ withDefaults(defineProps<{
   <arc-stat
     :value="value"
     :label="label"
+    :trend="trend"
+    :change="change"
   >
     <slot />
   </arc-stat>

package/src/content/Tag.vue

@@ -6,11 +6,13 @@ defineOptions({ name: 'Tag' });
 
 withDefaults(defineProps<{
   variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+  size?: 'sm' | 'lg';
   removable?: boolean;
   disabled?: boolean;
   color?: string;
 }>(), {
   variant: 'default',
+  size: 'md',
   removable: false,
   disabled: false,
   color: '',
@@ -24,6 +26,7 @@ defineEmits<{
 <template>
   <arc-tag
     :variant="variant"
+    :size="size"
     :removable="removable"
     :disabled="disabled"
     :color="color"

package/src/feedback/Alert.vue

@@ -5,11 +5,13 @@ import '@arclux/arc-ui';
 defineOptions({ name: 'Alert' });
 
 withDefaults(defineProps<{
-  variant?: 'info' | 'success' | 'warning' | 'error';
+  variant?: string;
+  compact?: boolean;
   dismissible?: boolean;
   heading?: string;
 }>(), {
   variant: 'info',
+  compact: false,
   dismissible: false,
   heading: '',
 });
@@ -22,6 +24,7 @@ defineEmits<{
 <template>
   <arc-alert
     :variant="variant"
+    :compact="compact"
     :dismissible="dismissible"
     :heading="heading"
   >

package/src/feedback/Modal.vue

@@ -8,11 +8,13 @@ withDefaults(defineProps<{
   open?: boolean;
   heading?: string;
   size?: 'sm' | 'md' | 'lg';
+  fullscreen?: boolean;
   closable?: boolean;
 }>(), {
   open: false,
   heading: '',
   size: 'md',
+  fullscreen: false,
   closable: true,
 });
 
@@ -27,6 +29,7 @@ defineEmits<{
     :open="open"
     :heading="heading"
     :size="size"
+    :fullscreen="fullscreen"
     :closable="closable"
   >
     <slot />

package/src/feedback/Progress.vue

@@ -9,12 +9,14 @@ withDefaults(defineProps<{
   variant?: string;
   size?: 'sm' | 'md' | 'lg';
   indeterminate?: boolean;
+  showValue?: boolean;
   label?: string;
 }>(), {
   value: 0,
   variant: 'bar',
   size: 'md',
   indeterminate: false,
+  showValue: false,
   label: '',
 });
 </script>
@@ -25,6 +27,7 @@ withDefaults(defineProps<{
     :variant="variant"
     :size="size"
     :indeterminate="indeterminate"
+    :showValue="showValue"
     :label="label"
   >
     <slot />

package/src/input/Button.vue

@@ -9,6 +9,7 @@ withDefaults(defineProps<{
   size?: 'sm' | 'md' | 'lg';
   href?: string;
   disabled?: boolean;
+  loading?: boolean;
   type?: string;
   _hasPrefix?: string;
   _hasSuffix?: string;
@@ -17,6 +18,7 @@ withDefaults(defineProps<{
   size: 'md',
   href: '',
   disabled: false,
+  loading: false,
   type: 'button',
   _hasPrefix: false,
   _hasSuffix: false,
@@ -29,6 +31,7 @@ withDefaults(defineProps<{
     :size="size"
     :href="href"
     :disabled="disabled"
+    :loading="loading"
     :type="type"
     :_hasPrefix="_hasPrefix"
     :_hasSuffix="_hasSuffix"

package/src/input/Checkbox.vue

@@ -8,6 +8,7 @@ withDefaults(defineProps<{
   checked?: boolean;
   indeterminate?: boolean;
   disabled?: boolean;
+  size?: 'sm' | 'lg';
   label?: string;
   name?: string;
   value?: string;
@@ -15,6 +16,7 @@ withDefaults(defineProps<{
   checked: false,
   indeterminate: false,
   disabled: false,
+  size: 'md',
   label: '',
   name: '',
   value: '',
@@ -30,6 +32,7 @@ defineEmits<{
     :checked="checked"
     :indeterminate="indeterminate"
     :disabled="disabled"
+    :size="size"
     :label="label"
     :name="name"
     :value="value"

package/src/input/Input.vue

@@ -12,6 +12,8 @@ withDefaults(defineProps<{
   value?: string;
   disabled?: boolean;
   required?: boolean;
+  error?: string;
+  size?: 'sm' | 'lg';
   multiline?: boolean;
   rows?: number;
   _hasPrefix?: string;
@@ -24,6 +26,8 @@ withDefaults(defineProps<{
   value: '',
   disabled: false,
   required: false,
+  error: '',
+  size: 'md',
   multiline: false,
   rows: 5,
   _hasPrefix: false,
@@ -45,6 +49,8 @@ defineEmits<{
     :value="value"
     :disabled="disabled"
     :required="required"
+    :error="error"
+    :size="size"
     :multiline="multiline"
     :rows="rows"
     :_hasPrefix="_hasPrefix"

package/src/input/RadioGroup.vue

@@ -8,12 +8,14 @@ withDefaults(defineProps<{
   value?: string;
   name?: string;
   disabled?: boolean;
+  size?: 'sm' | 'lg';
   orientation?: 'horizontal';
   _radios?: string;
 }>(), {
   value: '',
   name: '',
   disabled: false,
+  size: 'md',
   orientation: 'vertical',
   _radios: () => ([]),
 });
@@ -28,6 +30,7 @@ defineEmits<{
     :value="value"
     :name="name"
     :disabled="disabled"
+    :size="size"
     :orientation="orientation"
     :_radios="_radios"
   >

package/src/input/Select.vue

@@ -10,6 +10,8 @@ withDefaults(defineProps<{
   label?: string;
   name?: string;
   disabled?: boolean;
+  size?: 'sm' | 'lg';
+  error?: string;
   open?: boolean;
   _options?: string;
 }>(), {
@@ -18,6 +20,8 @@ withDefaults(defineProps<{
   label: '',
   name: '',
   disabled: false,
+  size: 'md',
+  error: '',
   open: false,
   _options: () => ([]),
 });
@@ -34,6 +38,8 @@ defineEmits<{
     :label="label"
     :name="name"
     :disabled="disabled"
+    :size="size"
+    :error="error"
     :open="open"
     :_options="_options"
   >

package/src/input/Textarea.vue

@@ -13,6 +13,8 @@ withDefaults(defineProps<{
   disabled?: boolean;
   readonly?: boolean;
   resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+  size?: 'sm' | 'lg';
+  autoResize?: boolean;
   error?: string;
 }>(), {
   value: '',
@@ -23,6 +25,8 @@ withDefaults(defineProps<{
   disabled: false,
   readonly: false,
   resize: 'vertical',
+  size: 'md',
+  autoResize: false,
   error: '',
 });
 
@@ -42,6 +46,8 @@ defineEmits<{
     :disabled="disabled"
     :readonly="readonly"
     :resize="resize"
+    :size="size"
+    :autoResize="autoResize"
     :error="error"
   >
     <slot />

package/src/input/Toggle.vue

@@ -7,11 +7,13 @@ defineOptions({ name: 'Toggle' });
 withDefaults(defineProps<{
   checked?: boolean;
   disabled?: boolean;
+  size?: 'sm' | 'lg';
   label?: string;
   name?: string;
 }>(), {
   checked: false,
   disabled: false,
+  size: 'md',
   label: '',
   name: '',
 });
@@ -25,6 +27,7 @@ defineEmits<{
   <arc-toggle
     :checked="checked"
     :disabled="disabled"
+    :size="size"
     :label="label"
     :name="name"
   >

package/src/layout/Container.vue

@@ -6,14 +6,20 @@ defineOptions({ name: 'Container' });
 
 withDefaults(defineProps<{
   narrow?: boolean;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  padding?: 'none' | 'sm' | 'lg';
 }>(), {
   narrow: false,
+  size: 'md',
+  padding: 'md',
 });
 </script>
 
 <template>
   <arc-container
     :narrow="narrow"
+    :size="size"
+    :padding="padding"
   >
     <slot />
   </arc-container>

package/src/navigation/Breadcrumb.vue

@@ -5,8 +5,10 @@ import '@arclux/arc-ui';
 defineOptions({ name: 'Breadcrumb' });
 
 withDefaults(defineProps<{
+  separator?: string;
   _items?: string;
 }>(), {
+  separator: '/',
   _items: () => ([]),
 });
 
@@ -17,6 +19,7 @@ defineEmits<{
 
 <template>
   <arc-breadcrumb
+    :separator="separator"
     :_items="_items"
   >
     <slot />

package/src/navigation/Footer.vue

@@ -7,9 +7,11 @@ defineOptions({ name: 'Footer' });
 withDefaults(defineProps<{
   compact?: boolean;
   border?: boolean;
+  align?: 'center';
 }>(), {
   compact: false,
   border: true,
+  align: 'left',
 });
 </script>
 
@@ -17,6 +19,7 @@ withDefaults(defineProps<{
   <arc-footer
     :compact="compact"
     :border="border"
+    :align="align"
   >
     <slot />
   </arc-footer>

package/src/navigation/Link.vue

@@ -7,11 +7,13 @@ defineOptions({ name: 'Link' });
 withDefaults(defineProps<{
   href?: string;
   variant?: 'muted' | 'nav';
+  underline?: 'always' | 'never';
   active?: boolean;
   external?: boolean;
 }>(), {
   href: '',
   variant: 'default',
+  underline: 'hover',
   active: false,
   external: false,
 });
@@ -21,6 +23,7 @@ withDefaults(defineProps<{
   <arc-link
     :href="href"
     :variant="variant"
+    :underline="underline"
     :active="active"
     :external="external"
   >

package/src/navigation/Pagination.vue

@@ -8,10 +8,12 @@ withDefaults(defineProps<{
   total?: number;
   current?: number;
   siblings?: number;
+  compact?: boolean;
 }>(), {
   total: 1,
   current: 1,
   siblings: 1,
+  compact: false,
 });
 
 defineEmits<{
@@ -24,6 +26,7 @@ defineEmits<{
     :total="total"
     :current="current"
     :siblings="siblings"
+    :compact="compact"
   >
     <slot />
   </arc-pagination>

package/src/navigation/Sidebar.vue

@@ -7,12 +7,14 @@ defineOptions({ name: 'Sidebar' });
 withDefaults(defineProps<{
   active?: string;
   collapsed?: boolean;
+  position?: 'right';
   width?: string;
   glow?: boolean;
   _sections?: string;
 }>(), {
   active: '',
   collapsed: false,
+  position: 'left',
   width: '260px',
   glow: false,
   _sections: () => ([]),
@@ -23,6 +25,7 @@ withDefaults(defineProps<{
   <arc-sidebar
     :active="active"
     :collapsed="collapsed"
+    :position="position"
     :width="width"
     :glow="glow"
     :_sections="_sections"

package/src/navigation/Tabs.vue

@@ -7,10 +7,14 @@ defineOptions({ name: 'Tabs' });
 withDefaults(defineProps<{
   items?: unknown[];
   selected?: number;
+  align?: 'center' | 'end';
+  variant?: 'pills';
   _tabs?: string;
 }>(), {
   items: () => ([]),
   selected: 0,
+  align: 'start',
+  variant: 'underline',
   _tabs: () => ([]),
 });
 
@@ -23,6 +27,8 @@ defineEmits<{
   <arc-tabs
     :items="items"
     :selected="selected"
+    :align="align"
+    :variant="variant"
     :_tabs="_tabs"
   >
     <slot />

package/src/navigation/TopBar.vue

@@ -10,12 +10,14 @@ withDefaults(defineProps<{
   menuOpen?: boolean;
   mobileMenu?: string;
   menuPosition?: string;
+  navAlign?: string;
 }>(), {
   heading: '',
   fixed: false,
   menuOpen: false,
   mobileMenu: 'sidebar',
   menuPosition: 'left',
+  navAlign: 'center',
 });
 </script>
 
@@ -26,6 +28,7 @@ withDefaults(defineProps<{
     :menuOpen="menuOpen"
     :mobileMenu="mobileMenu"
     :menuPosition="menuPosition"
+    :navAlign="navAlign"
   >
     <slot />
   </arc-top-bar>