refactor: input components (#612)

* reafactor: update input components to composition-api * reafactor: update dropdown component to composition-api * refactor: dropdown active prop * docs: update component documentations * docs: remove unused inspector classes * chore: remove unnecessary dependency * fix: #513 * fix: #570 * fix: #530 * fix: #516 * fix: #515
oruga-ui · Oct 7, 2023 · b35c339 · b35c339
1 parent e7bdb07
commit b35c339
Show file tree

Hide file tree

Showing 105 changed files with 8,837 additions and 8,364 deletions.
diff --git a/packages/docs-next/.vitepress/theme/examples/autocomplete/infinite-scroll.vue b/packages/docs-next/.vitepress/theme/examples/autocomplete/infinite-scroll.vue
@@ -39,6 +39,8 @@ async function getAsyncData(_name) {
         data.value = [...data.value, ..._data.results];
         page.value += 1;
         totalPages.value = _data.total_pages;
+    } catch (err) {
+        console.error(err);
     } finally {
         isFetching.value = false;
     }
@@ -57,11 +59,11 @@ function getMoreAsyncData() {
                 placeholder="e.g. Fight Club"
                 field="title"
                 :loading="isFetching"
-                check-infinite-scroll
-                :debounce-typing="500"
-                @typing="getAsyncData"
+                check-scroll
+                :debounce="500"
+                @input="getAsyncData"
                 @select="(option) => (selected = option)"
-                @infinite-scroll="getMoreAsyncData">
+                @scroll-end="getMoreAsyncData">
                 <template #default="props">
                     <div class="media">
                         <div class="media-left">

diff --git a/packages/docs-next/.vitepress/theme/examples/datepicker/base.vue b/packages/docs-next/.vitepress/theme/examples/datepicker/base.vue
@@ -27,7 +27,7 @@ const locale = ref(); // Browser locale
                 </o-select>
             </o-field>
             <o-field>
-                <o-switch v-model="showWeekNumber">Show week number</o-switch>
+                <o-switch v-model="showWeekNumber" label="Show week number" />
             </o-field>
         </o-field>
 

diff --git a/packages/docs-next/.vitepress/theme/examples/datepicker/events.vue b/packages/docs-next/.vitepress/theme/examples/datepicker/events.vue
@@ -54,7 +54,7 @@ const events = [
 <template>
     <section>
         <o-field>
-            <o-switch v-model="bars">Bars</o-switch>
+            <o-switch v-model="bars" label="Bars" />
         </o-field>
 
         <o-datepicker

diff --git a/packages/docs-next/.vitepress/theme/examples/datepicker/inspector.vue b/packages/docs-next/.vitepress/theme/examples/datepicker/inspector.vue
@@ -1,5 +1,15 @@
 <script setup>
-import { ref } from "vue";
+import { getCurrentInstance, ref } from "vue";
+
+const datepicker = ref();
+
+// get programmatic oruga access
+const app = getCurrentInstance();
+const oruga = app.appContext.config.globalProperties.$oruga;
+
+const triggerClass = oruga?.config
+    ? oruga.config.getOption("input.iconLeftClass", "o-input__icon-left")
+    : "o-input__icon-left";
 
 const events = ref([
     {
@@ -14,9 +24,7 @@ const events = ref([
 
 function openDatePicker() {
     setTimeout(() => {
-        this.$refs.datepicker.$el
-            .getElementsByClassName("o-input-iconspace-left")[0]
-            .click();
+        datepicker.value.$el.getElementsByClassName(triggerClass)[0].click();
     }, 500);
 }
 
@@ -366,15 +374,6 @@ const inspectData = [
             openDatePicker();
         },
     },
-    {
-        class: "monthRowClass",
-        description: "Class of the table row when type is month",
-        action: (cmp, data) => {
-            data.type = "month";
-            data.monthClass = "datepicker__,table__month";
-            openDatePicker();
-        },
-    },
     {
         class: "monthCellClass",
         description: "Class of the table cell when type is month",
@@ -384,17 +383,6 @@ const inspectData = [
             openDatePicker();
         },
     },
-    {
-        class: "monthCellInvisibleClass",
-        description:
-            "Class of the table cell when nearby month days are hidden when type is month",
-        action: (cmp, data) => {
-            data.type = "month";
-            data.monthClass = "datepicker__,table__month";
-            data.nearbyMonthDays = false;
-            openDatePicker();
-        },
-    },
     {
         class: "monthCellSelectedClass",
         description:

diff --git a/packages/docs-next/.vitepress/theme/examples/datepicker/programmatically.vue b/packages/docs-next/.vitepress/theme/examples/datepicker/programmatically.vue
@@ -1,14 +1,20 @@
+<script setup>
+import { ref } from "vue";
+
+const active = ref(false);
+</script>
+
 <template>
     <section>
-        <o-field>
+        <o-field expanded>
             <o-datepicker
-                ref="datepicker"
+                v-model:active="active"
                 expanded
                 placeholder="Select a date" />
             <o-button
                 icon-left="calendar"
                 type="primary"
-                @click="$refs.datepicker.toggle()" />
+                @click="active = !active" />
         </o-field>
     </section>
 </template>
diff --git a/packages/docs-next/.vitepress/theme/examples/datepicker/range.vue b/packages/docs-next/.vitepress/theme/examples/datepicker/range.vue
@@ -1,5 +1,7 @@
 <script setup>
-const date = new Date();
+import { ref } from "vue";
+
+const date = ref();
 </script>
 
 <template>

diff --git a/packages/docs-next/.vitepress/theme/examples/datepicker/slots.vue b/packages/docs-next/.vitepress/theme/examples/datepicker/slots.vue
@@ -51,20 +51,23 @@ onMounted(() => {
                             field="name"
                             expanded
                             @select="selectMonth" />
-                        <o-button disabled>{{ date?.getFullYear() }}</o-button>
+                        <o-button
+                            disabled
+                            :label="date?.getFullYear().toString()" />
                     </o-field>
                 </template>
                 <template #footer>
                     <div class="footer-container">
-                        <o-button variant="primary" @click="date = new Date()">
-                            <o-icon icon="calendar"></o-icon>
-                            <span>Today</span>
-                        </o-button>
-
-                        <o-button variant="danger" @click="date = null">
-                            <o-icon icon="times"></o-icon>
-                            <span>Clear</span>
-                        </o-button>
+                        <o-button
+                            variant="primary"
+                            icon-left="calendar"
+                            label="Today"
+                            @click="date = new Date()" />
+                        <o-button
+                            variant="danger"
+                            icon-left="times"
+                            label="Clear"
+                            @click="date = null" />
                     </div>
                 </template>
             </o-datepicker>

diff --git a/packages/docs-next/.vitepress/theme/examples/datetimepicker/inspector.vue b/packages/docs-next/.vitepress/theme/examples/datetimepicker/inspector.vue
@@ -1,8 +1,20 @@
 <script setup>
+import { getCurrentInstance, ref } from "vue";
+
+const datetimepicker = ref();
+
+// get programmatic oruga access
+const app = getCurrentInstance();
+const oruga = app.appContext.config.globalProperties.$oruga;
+
+const triggerClass = oruga?.config
+    ? oruga.config.getOption("dropdown.triggerClass", "o-drop__trigger")
+    : "o-drop__trigger";
+
 function openDatetimePicker() {
     setTimeout(() => {
-        this.$refs.datetimepicker.$el
-            .getElementsByClassName("o-drop__trigger")[0]
+        datetimepicker.value.$el
+            .getElementsByClassName(triggerClass)[0]
             .click();
     }, 500);
 }

diff --git a/packages/docs-next/.vitepress/theme/examples/datetimepicker/min-max.vue b/packages/docs-next/.vitepress/theme/examples/datetimepicker/min-max.vue
@@ -11,15 +11,13 @@ const maxDatetime = ref(null);
             <o-field label="Min Datetime">
                 <o-datetimepicker
                     v-model="minDatetime"
-                    rounded
                     placeholder="Click to select..."
                     icon="calendar"
                     editable />
             </o-field>
             <o-field label="Max Datetime">
                 <o-datetimepicker
                     v-model="maxDatetime"
-                    rounded
                     placeholder="Click to select..."
                     icon="calendar"
                     editable />

diff --git a/packages/docs-next/.vitepress/theme/examples/dropdown/base.vue b/packages/docs-next/.vitepress/theme/examples/dropdown/base.vue
@@ -1,64 +1,64 @@
 <template>
     <section class="odocs-spaced">
-        <o-dropdown aria-role="list">
+        <o-dropdown>
             <template #trigger="{ active }">
                 <o-button
                     variant="primary"
                     label="Click me!"
                     :icon-right="active ? 'caret-up' : 'caret-down'" />
             </template>
 
-            <o-dropdown-item aria-role="listitem" label="Action" />
-            <o-dropdown-item aria-role="listitem" label="Another action" />
-            <o-dropdown-item aria-role="listitem" label="Something else" />
+            <o-dropdown-item label="Action" />
+            <o-dropdown-item label="Another action" />
+            <o-dropdown-item label="Something else" />
         </o-dropdown>
 
-        <o-dropdown :triggers="['hover']" aria-role="list">
+        <o-dropdown :triggers="['hover']">
             <template #trigger="{ active }">
                 <o-button
                     variant="info"
                     label="Hover me!"
                     :icon-right="active ? 'caret-up' : 'caret-down'" />
             </template>
 
-            <o-dropdown-item aria-role="listitem" label="Action" />
-            <o-dropdown-item aria-role="listitem" label="Another action" />
-            <o-dropdown-item aria-role="listitem" label="Something else" />
+            <o-dropdown-item label="Action" />
+            <o-dropdown-item label="Another action" />
+            <o-dropdown-item label="Something else" />
         </o-dropdown>
 
-        <o-dropdown disabled aria-role="list">
+        <o-dropdown disabled>
             <template #trigger="{ active }">
                 <o-button
                     label="Disabled"
                     :icon-right="active ? 'caret-up' : 'caret-down'" />
             </template>
 
-            <o-dropdown-item aria-role="listitem" label="Action" />
-            <o-dropdown-item aria-role="listitem" label="Another action" />
-            <o-dropdown-item aria-role="listitem" label="Something else" />
+            <o-dropdown-item label="Action" />
+            <o-dropdown-item label="Another action" />
+            <o-dropdown-item label="Something else" />
         </o-dropdown>
 
-        <o-dropdown aria-role="list">
+        <o-dropdown>
             <template #trigger>
                 <div>
                     Custom
                     <o-icon variant="success" icon="caret-down" role="button" />
                 </div>
             </template>
 
-            <o-dropdown-item aria-role="listitem" label="Action" />
-            <o-dropdown-item aria-role="listitem" label="Another action" />
-            <o-dropdown-item aria-role="listitem" label="Something else" />
+            <o-dropdown-item label="Action" />
+            <o-dropdown-item label="Another action" />
+            <o-dropdown-item label="Something else" />
         </o-dropdown>
 
-        <o-dropdown :triggers="['contextmenu']" aria-role="list">
+        <o-dropdown :triggers="['contextmenu']">
             <template #trigger>
                 <o-button label="Right click" role="button" />
             </template>
 
-            <o-dropdown-item aria-role="listitem" label="Action" />
-            <o-dropdown-item aria-role="listitem" label="Another action" />
-            <o-dropdown-item aria-role="listitem" label="Something else" />
+            <o-dropdown-item label="Action" />
+            <o-dropdown-item label="Another action" />
+            <o-dropdown-item label="Something else" />
         </o-dropdown>
     </section>
 </template>
diff --git a/packages/docs-next/.vitepress/theme/examples/dropdown/index.vue b/packages/docs-next/.vitepress/theme/examples/dropdown/index.vue
@@ -10,6 +10,9 @@ import ScrollableCode from "./scrollable.vue?raw";
 
 import Position from "./position.vue";
 import PositionCode from "./position.vue?raw";
+
+import Programmatically from "./programmatically.vue";
+import ProgrammaticallyCode from "./programmatically.vue?raw";
 </script>
 
 <template>
@@ -24,4 +27,7 @@ import PositionCode from "./position.vue?raw";
 
     <h3 id="position">Position</h3>
     <ExampleViewer :component="Position" :code="PositionCode" />
+
+    <h3 id="programmatically">Programmatically</h3>
+    <ExampleViewer :component="Programmatically" :code="ProgrammaticallyCode" />
 </template>
diff --git a/packages/docs-next/.vitepress/theme/examples/dropdown/inspector.vue b/packages/docs-next/.vitepress/theme/examples/dropdown/inspector.vue
@@ -132,25 +132,21 @@ const inspectData = [
         v-slot="props"
         :inspect-data="inspectData"
         :subitem="subitem">
-        <o-dropdown v-model="currentMenu" v-bind="props" aria-role="list">
+        <o-dropdown v-model="currentMenu" v-bind="props">
             <template #trigger="{ active }">
                 <o-button
                     ref="dropdownbtn"
                     label="Click me!"
                     variant="primary"
                     :icon-right="active ? 'caret-up' : 'caret-down'" />
             </template>
-            <o-dropdown-item v-bind="props" value="ac1" aria-role="listitem">
+            <o-dropdown-item v-bind="props" value="ac1">
                 Action
             </o-dropdown-item>
-            <o-dropdown-item v-bind="props" value="ac2" aria-role="listitem">
+            <o-dropdown-item v-bind="props" value="ac2">
                 Another action
             </o-dropdown-item>
-            <o-dropdown-item
-                v-bind="props"
-                value="ac3"
-                disabled
-                aria-role="listitem">
+            <o-dropdown-item v-bind="props" value="ac3" disabled>
                 Something else
             </o-dropdown-item>
         </o-dropdown>

diff --git a/packages/docs-next/.vitepress/theme/examples/dropdown/multiple.vue b/packages/docs-next/.vitepress/theme/examples/dropdown/multiple.vue
@@ -17,18 +17,9 @@ const selectedOptions = ref([]);
                 </o-button>
             </template>
 
-            <o-dropdown-item
-                value="option1"
-                aria-role="listitem"
-                label="Option 1" />
-            <o-dropdown-item
-                value="option2"
-                aria-role="listitem"
-                label="Option 2" />
-            <o-dropdown-item
-                value="option3"
-                aria-role="listitem"
-                label="Option 3" />
+            <o-dropdown-item value="option1" label="Option 1" />
+            <o-dropdown-item value="option2" label="Option 2" />
+            <o-dropdown-item value="option3" label="Option 3" />
         </o-dropdown>
     </section>
 </template>