@indielayer/ui 1.6.1 → 1.6.2

package/docs/components/toolbar/Toolbar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { inject, ref, unref, watch } from 'vue'
 import { version, type UITheme } from '@indielayer/ui'
+import ToolbarSearch from './ToolbarSearch.vue'
 
 const selectTheme = inject('selectTheme', {
   theme: {} as UITheme,
@@ -40,9 +41,10 @@ const isDev = import.meta.env.DEV
       <x-spacer/>
 
       <div class="flex items-center font-semibold text-sm">
-
+        <toolbar-search />
+        <x-divider vertical class="!h-2 px-2"/>
         <div class="tracking-wide text-xs">v{{ version }}</div>
-        <x-divider vertical style="height: 10px;" class="px-2 hidden sm:block"/>
+        <x-divider vertical class="!h-2 px-2 hidden sm:flex"/>
         <x-link
           href="https://github.com/indielayer/ui"
           target="_blank"

package/docs/components/toolbar/ToolbarSearch.vue

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import { useEventListener, useMouse } from '@vueuse/core'
+import { computed, ref, watch, nextTick, onMounted } from 'vue'
+import Fuse from 'fuse.js'
+import ComponentsSearchIndex from '../../search/components.json'
+import type { XInput } from 'src'
+
+const fuse = new Fuse(ComponentsSearchIndex, {
+  keys: [{
+    name: 'name',
+    weight: 2,
+  }, {
+    name: 'description',
+    weight: 1,
+  }],
+  includeScore: true,
+})
+
+type FuseResult = {
+  item: {
+    name: string;
+    description: string;
+    url: string;
+  };
+  refIndex: number;
+  score: number;
+}
+
+const isModalOpen = ref(false)
+const searchInput = ref('')
+const ui = ref<FuseResult[]>([])
+const searchList = ref<HTMLDivElement>()
+const results = ref<HTMLLIElement[]>([])
+const selectedIndex = ref<number>(-1)
+
+const inputEl = ref<InstanceType<typeof XInput> | null>(null)
+
+watch(isModalOpen, (newValue, oldValue) => {
+  setTimeout(() => {
+    if (newValue) inputEl.value?.focus()
+  }, 100)
+})
+
+const searchSections = computed(() => [
+  { key:'ui', label: 'UI', items: ui.value },
+])
+
+function clearSearch() {
+  selectedIndex.value = -1
+  ui.value = []
+}
+
+function openSearch() {
+  clearSearch()
+
+  searchInput.value = ''
+  isModalOpen.value = true
+}
+
+function selectItem(item: HTMLLIElement, index?: number) {
+  if (!item) {
+    return
+  }
+
+  results.value?.[selectedIndex.value]?.setAttribute('aria-selected', 'false')
+
+  item.setAttribute('aria-selected', 'true')
+  item.scrollIntoView({ 'block':'nearest' })
+
+  if (!index) {
+    index = results.value.findIndex(({ id }) => id === item.id)
+  }
+
+  selectedIndex.value = index
+}
+
+function selectItemByIndex(index: number) {
+  selectItem(results.value?.[index], index)
+}
+
+function selectFirstItem() {
+  selectItemByIndex(0)
+}
+
+function selectLastItem() {
+  selectItemByIndex(results.value.length - 1)
+}
+
+function selectNextItem() {
+  const totalResults = results.value.length
+
+  if (totalResults <= 0) {
+    return
+  }
+
+  const nextIndex = selectedIndex.value + 1
+
+  if (nextIndex >= totalResults) {
+    selectFirstItem()
+  } else {
+    selectItemByIndex(nextIndex)
+  }
+}
+
+function selectPreviousItem() {
+  const totalResults = results.value.length
+
+  if (totalResults <= 0) {
+    return
+  }
+
+  const previousIndex = selectedIndex.value - 1
+
+  if (previousIndex >= 0) {
+    selectItemByIndex(previousIndex)
+  } else {
+    selectLastItem()
+  }
+}
+
+function keydownInput(e: KeyboardEvent) {
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    selectNextItem()
+  }
+
+  if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    selectPreviousItem()
+  }
+
+  if (e.key === 'Enter') {
+    const item = results.value?.[selectedIndex.value]
+
+    if (item) {
+      (item.firstElementChild as HTMLLinkElement)?.click()
+    }
+  }
+}
+
+const { x: mouseX, y: mouseY } = useMouse({ type: 'page' })
+
+function hoverResult(e: MouseEvent) {
+  if (mouseX.value !== e.x || mouseY.value !== e.y) {
+    selectItem(e.target as HTMLLIElement)
+  }
+}
+
+function searchIndexes() {
+  ui.value = fuse.search(searchInput.value, {
+    limit: 10,
+  }) as FuseResult[]
+}
+
+watch(searchSections, async () => {
+  results.value = []
+
+  await nextTick()
+
+  const items = searchList.value?.querySelectorAll('[data-name="list-item"]')
+
+  items?.forEach((el) => {
+    el.setAttribute('aria-selected', 'false')
+    results.value.push(el as HTMLLIElement)
+  })
+
+  setTimeout(() => selectFirstItem())
+})
+
+const metaKey = ref('')
+
+onMounted(() => {
+  metaKey.value = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
+    ? '⌘'
+    : 'Ctrl'
+})
+
+if (document) {
+  useEventListener(document, 'keydown', (e: KeyboardEvent) => {
+    if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault()
+      openSearch()
+    }
+  })
+}
+</script>
+
+<template>
+  <x-button
+    icon="search"
+    outlined
+    size="xs"
+    @click="openSearch"
+  >
+    Search
+    <span class="text-secondary-400 ml-2">
+      {{ metaKey }}K
+    </span>
+  </x-button>
+
+  <x-modal v-model="isModalOpen" size="md" position="top">
+    <template #header>
+      <div class="py-4 px-6 border-b">
+        <x-input
+          ref="inputEl"
+          v-model="searchInput"
+          type="search"
+          aria-controls="search-list"
+          placeholder="Search components"
+          hide-footer
+          icon-left="search"
+          @input="searchIndexes"
+          @keydown="keydownInput"
+        />
+      </div>
+    </template>
+    <div id="search-list" ref="searchList">
+      <template v-for="section in searchSections" :key="section.key">
+        <section v-if="section.items.length > 0">
+          <!-- <x-divider :id="`${section.key}-label`" class="my-2" :label="section.label" /> -->
+          <ul role="listbox" :aria-labelledby="`${section.key}-label`">
+            <li
+              v-for="(result) in section.items"
+              :id="result.item.url"
+              :key="result.item.url"
+              data-name="list-item"
+              role="option"
+              class="aria-selected:bg-secondary-100 dark:aria-selected:bg-secondary-800 rounded p-2 mb-2"
+              @mouseenter="hoverResult"
+            >
+              <x-link
+                :to="result.item.url"
+                class="w-full flex flex-wrap"
+                @click="isModalOpen = false"
+              >
+                <p class="text-base w-full mb-1 mt-0 font-bold">{{ result.item.name }}</p>
+                <p class="text-sm m-0">{{ result.item.description }}</p>
+              </x-link>
+            </li>
+          </ul>
+        </section>
+      </template>
+    </div>
+
+    <template #actions>
+      <footer class="w-full flex gap-2 items-center justify-center">
+        <span class="bg-context-7 px-1 inline-flex items-center rounded-sm">&#8626;</span>
+        <span class="text-xs">to select</span>
+        <span class="bg-context-7 px-1 inline-flex items-center rounded-sm">&#11139;</span>
+        <span class="text-xs">to navigate</span>
+        <span class="bg-context-7 px-1 inline-flex items-center rounded-sm">&#9243;</span>
+        <span class="text-xs">to close</span>
+      </footer>
+    </template>
+  </x-modal>
+</template>

package/docs/pages/component/button/usage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid gap-4 grid-cols-4">
+  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
     <x-button>Default</x-button>
     <x-button color="primary" icon-right="star">Submit</x-button>
     <x-button color="primary" light>Light</x-button>

package/docs/pages/component/checkbox/states.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-4 gap-4">
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
     <x-checkbox disabled label="Disabled" />
     <x-checkbox helper="Helper text">Helper</x-checkbox>
     <x-checkbox loading>Loading</x-checkbox>

package/docs/pages/component/checkbox/usage.vue

@@ -4,12 +4,5 @@ const checked = ref(true)
 </script>
 
 <template>
-  <div class="grid grid-cols-5">
-
-    <x-checkbox v-model="checked" label="Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, unde." color="primary" />
-    <x-checkbox color="secondary" label="Secondary" />
-    <x-checkbox color="success" label="Success" />
-    <x-checkbox color="warning" label="Warning" />
-    <x-checkbox color="error" label="Error" />
-  </div>
+  <x-checkbox v-model="checked" label="Checkbox label" color="primary" />
 </template>

package/docs/pages/component/input/size.vue

@@ -1,10 +1,11 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 const other = ref('Sample text')
 </script>
 
 <template>
-  <div class="grid grid-cols-4 gap-2">
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
+    <x-input v-model="other" size="xs"/>
     <x-input v-model="other" size="sm"/>
     <x-input v-model="other" size="md"/>
     <x-input v-model="other" size="lg"/>

package/docs/pages/component/input/states.vue

@@ -1,11 +1,11 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 const name = ref('not a valid input')
 </script>
 
 <template>
-  <div class="grid grid-cols-4 gap-4">
-    <x-input value="disabled" disabled label="Disabled"/>
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+    <x-input disabled label="Disabled"/>
     <x-input value="readonly" readonly label="Read only"/>
     <x-input v-model="name" label="Error" error="Invalid input" />
   </div>

package/docs/pages/component/input/usage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-const name = ref('')
+const name = ref(0)
 </script>
 
 <template>

package/docs/pages/component/input/variants.vue

@@ -1,11 +1,11 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 const password = ref('secret')
 const other = ref('I have an icon')
 </script>
 
 <template>
-  <div class="grid grid-cols-3 gap-4">
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
     <x-input
       v-model="password"
       label="Password input"

package/docs/pages/component/radio/usage.vue

@@ -1,14 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const selected = ref('a')
+</script>
+
 <template>
-  <div class="grid grid-cols-4 gap-4">
+  <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
     <x-radio v-model="selected" name="inputName" value="a" label="Option A" />
     <x-radio v-model="selected" name="inputName" value="b" label="Option B" />
     <x-radio v-model="selected" name="inputName" value="c" label="Option C" />
     <x-radio v-model="selected" name="inputName" value="d" label="Option D" />
   </div>
 </template>
-
-<script>
-export default {
-  data() { return { selected: 'a' } },
-}
-</script>

package/docs/pages/component/table/usage.vue

@@ -63,45 +63,40 @@ const itemsSorted = computed<Book[]>(() => {
 </script>
 
 <template>
-  <x-table
-    v-model:sort="sort"
-    expandable
-    :headers="headers"
-    :items="itemsSorted"
-  >
-    <template #expanded-row="{ item }">
-      {{ item }}
-      {{ item }}
-      {{ item }}
-      {{ item }}
-      {{ item }}
-      {{ item }}
-      {{ item }}
-      {{ item }}
-      {{ item }}
-    </template>
+  <div class="grid gap-4">
+    <x-card>
+      <x-table
+        v-model:sort="sort"
+        expandable
+        :headers="headers"
+        :items="itemsSorted"
+      >
+        <template #expanded-row="{ item }">
+          {{ item }}
+        </template>
 
-    <template #item-published="{ item }">
-      {{ formatDate(item.published) }}
-    </template>
-    <template #item-status="{ item }">
-      <x-tag size="sm" color="primary" rounded>{{ item.status }}</x-tag>
-    </template>
-  </x-table>
-  <x-table
-    v-model:sort="sort"
-    class="my-10"
-    dense
-    striped
-    :headers="headers"
-    :items="itemsSorted"
-    @click-row="notifications?.log('open')"
-  >
-    <template #item-published="{ item }">
-      {{ formatDate(item.published) }}
-    </template>
-    <template #item-status="{ item }">
-      <x-tag size="sm" color="pink" rounded>{{ item.status }}</x-tag>
-    </template>
-  </x-table>
+        <template #item-published="{ item }">
+          {{ formatDate(item.published) }}
+        </template>
+        <template #item-status="{ item }">
+          <x-tag size="xs" color="primary" rounded>{{ item.status }}</x-tag>
+        </template>
+      </x-table>
+    </x-card>
+
+    <x-card>
+      <x-table
+        v-model:sort="sort"
+        dense
+        striped
+        :headers="headers"
+        :items="itemsSorted"
+        @click-row="notifications?.log('open')"
+      >
+        <template #item-published="{ item }">
+          {{ formatDate(item.published) }}
+        </template>
+      </x-table>
+    </x-card>
+  </div>
 </template>

package/docs/pages/component/textarea/states.vue

@@ -1,13 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const name = ref('invalid input')
+</script>
+
 <template>
-  <div class="grid grid-cols-4 gap-4">
-    <x-textarea v-model="name" disabled label="Disabled"/>
-    <x-textarea v-model="name" readonly label="Read only"/>
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+    <x-textarea disabled label="Disabled"/>
+    <x-textarea readonly label="Read only"/>
     <x-textarea v-model="name" label="Error" error="Invalid input" />
   </div>
 </template>
-
-<script>
-export default {
-  data() { return { name: 'disabled' } },
-}
-</script>

package/docs/pages/component/textarea/variants.vue

@@ -1,15 +1,14 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const sizes = ref('Text size')
+</script>
+
 <template>
-  <div class="grid grid-cols-3 gap-4">
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
     <x-textarea v-model="sizes" label="xs" size="xs" />
-    <x-textarea v-model="sizes" label="xs" size="sm" />
+    <x-textarea v-model="sizes" label="sm" size="sm" />
     <x-textarea v-model="sizes" label="md" />
     <x-textarea v-model="sizes" label="lg" size="lg" />
     <x-textarea v-model="sizes" label="xl" size="xl" />
   </div>
 </template>
-
-<script>
-export default {
-  data() { return { sizes: 'Text size' } },
-}
-</script>

package/docs/search/components.json

@@ -0,0 +1 @@
+[{"name":"Accordion","description":"Accordion","url":"/component/accordion"},{"name":"Alert","description":"Alerts are used to communicate a state that affects a system, feature or page.","url":"/component/alert"},{"name":"Avatar","description":"Avatars are used to represent a user.","url":"/component/avatar"},{"name":"Badge","description":"Badges are used to display a small amount of information.","url":"/component/badge"},{"name":"Breadcrumbs","description":"Breadcrumbs are used to indicate the current page\\","url":"/component/breadcrumbs"},{"name":"Button","description":"Used to trigger an action, such as submitting a form, opening a menu, or performing a command.","url":"/component/button"},{"name":"Card","description":"Cards are used to display content in an organized manner.","url":"/component/card"},{"name":"Carousel","description":"A carousel is a rotating set of images.","url":"/component/carousel"},{"name":"Checkbox","description":"Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.","url":"/component/checkbox"},{"name":"Container","description":"Containers are used to wrap content in an organized manner.","url":"/component/container"},{"name":"Datepicker","description":"The datepicker component is used to select a date or time.","url":"/component/datepicker"},{"name":"Divider","description":"Dividers are used to separate content.","url":"/component/divider"},{"name":"Drawer","description":"Drawers are used to display content in a side panel.","url":"/component/drawer"},{"name":"Form","description":"Forms are used to collect user input.","url":"/component/form"},{"name":"FormGroup","description":"A form group is a wrapper for form elements.","url":"/component/formGroup"},{"name":"Icon","description":"Icons are used to represent an action or an object.","url":"/component/icon"},{"name":"Image","description":"Image is used to load an image file with a skeleton as placeholder and on load display the image.","url":"/component/image"},{"name":"Input","description":"This is a text input component that allows users to enter and edit text.","url":"/component/input"},{"name":"Link","description":"Links are used to navigate to a different page.","url":"/component/link"},{"name":"Loader","description":"Loader component is used to show a loading state.","url":"/component/loader"},{"name":"Menu","description":"Menus are used to display a list of options.","url":"/component/menu"},{"name":"Modal","description":"Modals are used to display content on top of the current page.","url":"/component/modal"},{"name":"Notifications","description":"Notifications are used to display a message to the user.","url":"/component/notifications"},{"name":"Pagination","description":"Pagination is used to navigate through a list of items.","url":"/component/pagination"},{"name":"Popover","description":"Popover is used to display content in a small overlay.","url":"/component/popover"},{"name":"Progress","description":"Progress is used to show the progress of an operation.","url":"/component/progress"},{"name":"QR Code","description":"The QR Code component is used to generate a QR code.","url":"/component/qrCode"},{"name":"Radio","description":"Radios allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.","url":"/component/radio"},{"name":"Scroll","description":"Scroll is used to scroll through a list of items with added features like inner shadows to indicate there is more to scroll.","url":"/component/scroll"},{"name":"Select","description":"Selects allow the user to select one or more options from a set.","url":"/component/select"},{"name":"Skeleton","description":"Skeletons are used to display a loading state.","url":"/component/skeleton"},{"name":"Slider","description":"Sliders are used to select a value from a range.","url":"/component/slider"},{"name":"Spacer","description":"Spacer is used to add space between elements inside a display flex wrapper.","url":"/component/spacer"},{"name":"Spinner","description":"Spinners are used to indicate that an operation is in progress.","url":"/component/spinner"},{"name":"Stepper","description":"Stepper is a navigation component that guides users through the steps of a task.","url":"/component/stepper"},{"name":"Table","description":"Tables are used to display data in a tabular format.","url":"/component/table"},{"name":"Tabs","description":"Tabs are used to navigate through a set of views.","url":"/component/tabs"},{"name":"Tag","description":"Tags are used to display a label.","url":"/component/tag"},{"name":"Textarea","description":"Textareas allow the user to enter text.","url":"/component/textarea"},{"name":"Toggle","description":"Toggles are used to switch between two states.","url":"/component/toggle"},{"name":"Tooltip","description":"Tooltips are used to display a message when hovering over an element.","url":"/component/tooltip"}]

package/lib/components/button/theme/Button.base.theme.js

@@ -2,7 +2,7 @@ const r = {
   classes: {
     wrapper({ props: e, slots: n, data: i }) {
       const d = ["relative transition duration-150 focus:outline-none inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border appearance-none"];
-      return i.isButtonGroup || d.push(e.rounded ? "rounded-full" : "rounded-md"), !e.flat && !e.light && !e.ghost && !e.disabled && !e.loading && d.push("shadow-sm"), e.size === "xs" ? d.push(n.default ? `py-1 text-xs ${e.icon ? "px-2" : "px-3"}` : "leading-none p-1") : e.size === "sm" ? d.push(n.default ? `py-2 text-sm ${e.icon ? "px-3" : "px-4"}` : "leading-none p-2") : e.size === "lg" ? d.push(n.default ? `py-3 text-lg ${e.icon ? "px-4" : "px-6"}` : "leading-none p-3") : e.size === "xl" ? d.push(n.default ? `py-4 text-xl ${e.icon, "px-6"}` : "leading-none p-4") : d.push(n.default ? `py-2 ${e.icon ? "px-4" : "px-5"}` : "leading-none p-2"), e.disabled ? d.push("cursor-not-allowed") : e.loading ? d.push("cursor-default") : d.push("cursor-pointer"), d;
+      return i.isButtonGroup || d.push(e.rounded ? "rounded-full" : "rounded-md"), !e.flat && !e.light && !e.ghost && !e.disabled && !e.loading && d.push("shadow-sm"), e.size === "xs" ? d.push(n.default ? `py-1 text-xs ${e.icon, "px-2"}` : "leading-none p-1") : e.size === "sm" ? d.push(n.default ? `py-1.5 text-sm ${e.icon, "px-3"}` : "leading-none p-1.5") : e.size === "lg" ? d.push(n.default ? `py-3 text-lg ${e.icon ? "px-4" : "px-6"}` : "leading-none p-3") : e.size === "xl" ? d.push(n.default ? `py-4 text-xl ${e.icon, "px-6"}` : "leading-none p-4") : d.push(n.default ? `py-2 ${e.icon ? "px-4" : "px-5"}` : "leading-none p-2"), e.disabled ? d.push("cursor-not-allowed") : e.loading ? d.push("cursor-default") : d.push("cursor-pointer"), d;
     },
     iconLeft: ({ slots: e }) => e.default ? "mr-2" : "m-0.5",
     iconRight: ({ slots: e }) => e.default ? "ml-2" : "m-0.5"

package/lib/components/card/theme/Card.base.theme.js

@@ -1,8 +1,8 @@
 const a = {
   classes: {
-    wrapper: ({ props: e }) => `bg-slate-50 dark:bg-slate-800 rounded-md ${e.flat ? "" : "shadow"}`
+    wrapper: ({ props: e }) => `bg-white dark:bg-secondary-800 overflow-hidden rounded-md ${e.flat ? "" : "shadow"}`
   }
-}, s = a;
+}, d = a;
 export {
-  s as default
+  d as default
 };

package/lib/components/checkbox/Checkbox.vue.d.ts

@@ -4,7 +4,10 @@ declare const checkboxProps: {
     value: (StringConstructor | NumberConstructor)[];
     indeterminate: BooleanConstructor;
     glow: BooleanConstructor;
-    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -52,7 +55,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     value: (StringConstructor | NumberConstructor)[];
     indeterminate: BooleanConstructor;
     glow: BooleanConstructor;
-    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -97,7 +103,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     value: (StringConstructor | NumberConstructor)[];
     indeterminate: BooleanConstructor;
     glow: BooleanConstructor;
-    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -141,6 +150,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
     indeterminate: boolean;
+    modelValue: string | number | boolean | object | any[] | undefined;
     readonly: boolean;
     required: boolean;
     validateOnInput: boolean;

package/lib/components/formGroup/FormGroup.vue.d.ts

@@ -5,7 +5,10 @@ declare const formGroupProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -51,7 +54,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -87,7 +93,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -118,6 +127,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     disabled: boolean;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
+    modelValue: string | number | boolean | object | any[] | undefined;
     readonly: boolean;
     required: boolean;
     validateOnInput: boolean;