docs: enable oruga types and adjsut examples (#123)

src/components/Autocomplete.vue

@@ -499,7 +499,7 @@ function getMoreAsyncData() {
         icon="search"
         clearable
         :data="filteredDataBase"
-        @select="(option: string) => (selectedBase = option)">
+        @select="(option: string | number) => (selectedBase = option)">
         <template #empty>No results found</template>
       </o-autocomplete>
     </o-field>

src/components/Collapse.vue

@@ -36,7 +36,7 @@ const collapses = ref([
         <o-button
           variant="primary"
           aria-controls="contentIdForA11y1"
-          label="Click me!" />"
+          label="Click me!" />
       </template>
       <div class="card card-body">
         <h3>Subtitle</h3>

src/components/Datepicker.vue

@@ -5,8 +5,12 @@ const today = new Date();
 const thisMonth = today.getMonth();
 const thisYear = today.getFullYear();
 const events = [
-  new Date(thisYear, thisMonth, 2),
-  new Date(thisYear, thisMonth, 6),
+  {
+    date: new Date(thisYear, thisMonth, 2),
+  },
+  {
+    date: new Date(thisYear, thisMonth, 6),
+  },
   {
     date: new Date(thisYear, thisMonth, 6),
     type: "info",
@@ -23,7 +27,9 @@ const events = [
     date: new Date(thisYear, thisMonth, 10),
     type: "link",
   },
-  new Date(thisYear, thisMonth, 12),
+  {
+    date: new Date(thisYear, thisMonth, 12),
+  },
   {
     date: new Date(thisYear, thisMonth, 12),
     type: "warning",
@@ -32,7 +38,9 @@ const events = [
     date: new Date(thisYear, thisMonth, 16),
     type: "danger",
   },
-  new Date(thisYear, thisMonth, 20),
+  {
+    date: new Date(thisYear, thisMonth, 20),
+  },
   {
     date: new Date(thisYear, thisMonth, 29),
     type: "success",
@@ -73,7 +81,7 @@ const selectedString = computed(() =>
   selected.value ? selected.value.toDateString() : "",
 );
 
-const date = ref<Date | null>(new Date());
+const date = ref<Date | undefined>(new Date());
 const multiple = ref([]);
 const range = ref([]);
 
@@ -90,8 +98,11 @@ const maxDate = new Date(
 
 const month = ref();
 
-function selectMonth(option: { name: string; value: number }) {
-  if (!option || !date.value) return;
+function selectMonth(name: string) {
+  if (!name || !date.value) return;
+
+  const option = months.find((m) => m.name === name);
+  if (!option) return;
 
   date.value.setMonth(option.value);
 }
@@ -238,7 +249,7 @@ const datepickerRef = ref();
               :data="months"
               field="name"
               expanded
-              @select="selectMonth" />
+              @select="(v) => selectMonth(v as string)" />
             <o-button disabled :label="date?.getFullYear().toString()" />
           </o-field>
         </template>
@@ -249,7 +260,7 @@ const datepickerRef = ref();
               <span>Today</span>
             </o-button>
 
-            <o-button variant="danger" @click="date = null">
+            <o-button variant="danger" @click="date = undefined">
               <o-icon icon="times" />
               <span>Clear</span>
             </o-button>

src/components/Datetimepicker.vue

@@ -6,10 +6,10 @@ const enableSeconds = ref(false);
 const hourFormat = ref(); // Browser locale
 const locale = ref(); // Browser locale
 
-const datetime = ref<Date | null>(new Date());
+const datetime = ref<Date | undefined>(new Date());
 
-const minDatetime = ref(null);
-const maxDatetime = ref(null);
+const minDatetime = ref();
+const maxDatetime = ref();
 </script>
 
 <template>
@@ -83,7 +83,7 @@ const maxDatetime = ref(null);
               <o-icon icon="calendar" />
               <span>Today</span>
             </o-button>
-            <o-button variant="danger" @click="datetime = null">
+            <o-button variant="danger" @click="datetime = undefined">
               <o-icon icon="times" />
               <span>Clear</span>
             </o-button>

src/components/Notification.vue

@@ -143,9 +143,7 @@ function danger() {
   <section>
     <h3>Add custom buttons</h3>
 
-    <o-notification
-      v-slot="{ closeNotification }"
-      aria-close-label="Close notification">
+    <o-notification v-slot="{ close }" aria-close-label="Close notification">
       <div class="d-inline-flex">
         <span>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
@@ -156,7 +154,7 @@ function danger() {
           label="Cancel"
           variant="primary"
           size="small"
-          @click="closeNotification" />
+          @click="close" />
       </div>
     </o-notification>
   </section>

src/components/Sidebar.vue

@@ -8,7 +8,7 @@ const isFullwidth = ref(false);
 const isReduced = ref(false);
 const expandOnHover = ref(false);
 const teleport = ref(false);
-const position = ref("left");
+const position = ref<"bottom" | "top" | "right" | "left" | undefined>("left");
 const inline = ref(false);
 
 const toggleSidebar = () => {

src/components/Steps.vue

@@ -17,8 +17,8 @@ const prevIcon = ref("chevron-left");
 const nextIcon = ref("chevron-right");
 const labelPosition = ref("bottom");
 const stepsPosition = ref("left");
-const position = ref(null);
-const size = ref(null);
+const position = ref();
+const size = ref();
 </script>
 
 <template>

src/components/Switch.vue

@@ -6,8 +6,8 @@ const isSwitchedCustom = ref("Yes");
 const isRounded = ref(false);
 const position = ref("right");
 const size = ref("");
-const variant = ref(null);
-const passive = ref(null);
+const variant = ref();
+const passive = ref();
 </script>
 
 <template>

src/components/Table.vue

@@ -132,7 +132,7 @@ const defaultSortDirection = ref("asc");
 const perPage = ref(3);
 
 const checkedRows = ref([]);
-const selected = ref(null);
+const selected = ref();
 </script>
 
 <template>

src/components/Taginput.vue

@@ -405,7 +405,6 @@ function getFilteredTags(text: string) {
         v-model="tags"
         variant="primary"
         :data="filteredTags"
-        autocomplete
         :allow-new="allowNew"
         :open-on-focus="openOnFocus"
         field="user.first_name"
@@ -424,7 +423,6 @@ function getFilteredTags(text: string) {
         disabled
         :model-value="['One']"
         :data="['One', 'Two', 'Three', 'Four']"
-        autocomplete
         :allow-new="allowNew"
         :open-on-focus="openOnFocus"
         icon="tag"
@@ -438,17 +436,19 @@ function getFilteredTags(text: string) {
     <h3>Limits</h3>
 
     <o-field label="Limited to 10 characters">
-      <o-taginput maxlength="10" :model-value="['Oruga', 'Vue', 'CSS']" />
+      <o-taginput :maxlength="10" :model-value="['Oruga', 'Vue', 'CSS']" />
     </o-field>
 
     <o-field label="Limited to 5 tags">
-      <o-taginput maxitems="5" :model-value="['One', 'Two', 'Three', 'Four']" />
+      <o-taginput
+        :maxitems="5"
+        :model-value="['One', 'Two', 'Three', 'Four']" />
     </o-field>
 
     <o-field label="Limited to 10 characters and 5 tags">
       <o-taginput
-        maxlength="10"
-        maxitems="5"
+        :maxlength="10"
+        :maxitems="5"
         :model-value="['Red', 'Green', 'Blue', 'White']" />
     </o-field>
   </section>

src/components/Timepicker.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-const time = ref<Date | null>(null);
+const time = ref<Date>();
 const hourFormat = ref(undefined); // Browser locale
 const enableSeconds = ref(false);
 const locale = ref(undefined); // Browser locale
@@ -103,7 +103,7 @@ const hoursGranularity = ref(2);
           variant="danger"
           icon-left="times"
           outlined
-          @click="time = null" />
+          @click="time = undefined" />
       </o-timepicker>
     </o-field>
   </section>

src/components/Upload.vue

@@ -2,7 +2,7 @@
 import { ref } from "vue";
 
 const dropFiles = ref<File[]>([]);
-const file = ref<File | null>(null);
+const file = ref<File>();
 
 function deleteDropFile(index: number) {
   dropFiles.value.splice(index, 1);

tsconfig.json

@@ -7,7 +7,12 @@
         "./src/*"
       ]
     },
-    "types": ["vite/client"]
+    "types": ["vite/client", "./node_modules/@oruga-ui/oruga-next/volar"]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": [
+    "src/**/*.ts", 
+    "src/**/*.d.ts", 
+    "src/**/*.tsx", 
+    "src/**/*.vue",
+  ]
 }