@oruga-ui/theme-oruga 0.0.1

package/src/components/Table.vue

@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const columns = ref([
+  {
+    field: "id",
+    label: "ID",
+    width: "40",
+    numeric: true,
+    sticky: "true",
+  },
+  {
+    field: "first_name",
+    label: "First Name",
+    sortable: true,
+  },
+  {
+    field: "last_name",
+    label: "Last Name",
+    sortable: true,
+  },
+  {
+    field: "date",
+    label: "Date",
+    position: "centered",
+    sortable: false,
+    display: (v: string) => new Date(v).toLocaleDateString(),
+  },
+  {
+    field: "gender",
+    label: "Gender",
+    position: "right",
+    sortable: true,
+    component: (v: string) => ({
+      is: "o-icon",
+      pack: "fas",
+      icon: v === "Male" ? "mars" : "venus",
+    }),
+  },
+]);
+
+const dataTable = ref([
+  {
+    id: 1,
+    first_name: "Jesse",
+    last_name: "Simmons",
+    date: "2016/10/15 13:43:27",
+    gender: "Male",
+  },
+  {
+    id: 2,
+    first_name: "John",
+    last_name: "Jacobs",
+    date: "2016/12/15 06:00:53",
+    gender: "Male",
+  },
+  {
+    id: 3,
+    first_name: "Tina",
+    last_name: "Gilbert",
+    date: "2016/04/26 06:26:28",
+    gender: "Female",
+  },
+  {
+    id: 4,
+    first_name: "Clarence",
+    last_name: "Flores",
+    date: "2016/04/10 10:28:46",
+    gender: "Male",
+  },
+  {
+    id: 5,
+    first_name: "Anne",
+    last_name: "Lee",
+    date: "2016/12/06 14:38:38",
+    gender: "Female",
+  },
+  {
+    id: 6,
+    first_name: "Sara",
+    last_name: "Armstrong",
+    date: "2016/09/23 18:50:04",
+    gender: "Female",
+  },
+  {
+    id: 7,
+    first_name: "Anthony",
+    last_name: "Webb",
+    date: "2016/08/30 23:49:38",
+    gender: "Male",
+  },
+  {
+    id: 8,
+    first_name: "Andrew",
+    last_name: "Greene",
+    date: "2016/11/20 14:57:47",
+    gender: "Male",
+  },
+  {
+    id: 9,
+    first_name: "Russell",
+    last_name: "White",
+    date: "2016/07/13 09:29:49",
+    gender: "Male",
+  },
+  {
+    id: 10,
+    first_name: "Lori",
+    last_name: "Hunter",
+    date: "2016/12/09 01:44:05",
+    gender: "Female",
+  },
+]);
+
+const isEmpty = ref(false);
+const isBordered = ref(false);
+const isStriped = ref(false);
+const isNarrowed = ref(false);
+const isHoverable = ref(false);
+const isFocusable = ref(false);
+const isLoading = ref(false);
+const hasMobileCards = ref(true);
+
+const currentPage = ref(1);
+const isPaginated = ref(true);
+const isPaginationSimple = ref(false);
+const paginationPosition = ref("bottom");
+const perPage = ref(3);
+
+const checkedRows = ref([]);
+const selected = ref(null);
+</script>
+
+<template>
+  <section>
+    <h2>Table Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Sandbox</h3>
+
+    <o-field grouped group-multiline>
+      <o-switch v-model="isBordered" :rounded="true">Bordered</o-switch>
+      <o-switch v-model="isStriped" :rounded="true">Striped</o-switch>
+      <o-switch v-model="isNarrowed" :rounded="true">Narrowed</o-switch>
+      <o-switch v-model="isHoverable" :rounded="true">Hoverable</o-switch>
+      <o-switch v-model="isFocusable" :rounded="true">Focusable</o-switch>
+      <o-switch v-model="isLoading" :rounded="true">Loading state</o-switch>
+      <o-switch v-model="isEmpty" :rounded="true">Empty</o-switch>
+      <o-switch v-model="hasMobileCards" :rounded="true">
+        Mobile cards <small>(collapsed rows)</small>
+      </o-switch>
+    </o-field>
+
+    <o-table
+      v-model:checked-rows="checkedRows"
+      :paginated="false"
+      :data="isEmpty ? [] : dataTable"
+      :bordered="isBordered"
+      :striped="isStriped"
+      :narrowed="isNarrowed"
+      :hoverable="isHoverable"
+      :loading="isLoading"
+      :focusable="isFocusable"
+      :mobile-cards="hasMobileCards"
+      checkable
+      detailed>
+      <o-table-column
+        v-for="(column, idx) in columns"
+        :key="idx"
+        v-slot="{ row }"
+        v-bind="column">
+        <span>
+          <component
+            :is="column.component(row[column.field]).is"
+            v-if="column.component"
+            v-bind="column.component(row[column.field])" />
+          {{
+            column.display
+              ? column.display(row[column.field])
+              : row[column.field]
+          }}
+        </span>
+      </o-table-column>
+
+      <template #detail="props">
+        <tr>
+          <td>{{ props.row.id }}</td>
+          <td>{{ props.row.first_name }}</td>
+          <td>{{ props.row.last_name }}</td>
+          <td>{{ props.row.gender }}</td>
+        </tr>
+      </template>
+
+      <template #bottom-left>
+        <b>Total checked</b>: {{ checkedRows.length }}
+      </template>
+    </o-table>
+  </section>
+
+  <section>
+    <h3>Paginated</h3>
+
+    <o-field grouped group-multiline>
+      <o-switch v-model="isPaginated" :rounded="true"> Paginated </o-switch>
+      <o-switch v-model="isPaginationSimple" :rounded="true">
+        Simple Paginated
+      </o-switch>
+      <o-select v-model="perPage" :disabled="!isPaginated">
+        <option value="3">3 per page</option>
+        <option value="5">5 per page</option>
+        <option value="10">10 per page</option>
+        <option value="15">15 per page</option>
+        <option value="20">20 per page</option>
+      </o-select>
+      <o-select v-model="paginationPosition" :disabled="!isPaginated">
+        <option value="bottom">bottom pagination</option>
+        <option value="top">top pagination</option>
+        <option value="both">both</option>
+      </o-select>
+    </o-field>
+    <p><b>Page:</b> {{ currentPage }}</p>
+
+    <o-table
+      v-model:current-page="currentPage"
+      :data="dataTable"
+      :paginated="isPaginated"
+      :per-page="perPage"
+      :pagination-simple="isPaginationSimple"
+      :pagination-position="paginationPosition">
+      <o-table-column
+        v-for="(column, idx) in columns"
+        :key="idx"
+        v-slot="{ row }"
+        v-bind="column">
+        <span>
+          <component
+            :is="column.component(row[column.field]).is"
+            v-if="column.component"
+            v-bind="column.component(row[column.field])" />
+          {{
+            column.display
+              ? column.display(row[column.field])
+              : row[column.field]
+          }}
+        </span>
+      </o-table-column>
+    </o-table>
+  </section>
+
+  <section>
+    <h3>Selection</h3>
+
+    <o-button
+      variant="danger"
+      :disabled="!selected"
+      icon-left="times"
+      @click="selected = null">
+      <span>Clear selected</span>
+    </o-button>
+
+    <p><b>Selected:</b> {{ selected }}</p>
+
+    <o-table v-model:selected="selected" :data="dataTable" focusable>
+      <o-table-column
+        v-for="(column, idx) in columns"
+        :key="idx"
+        v-slot="{ row }"
+        v-bind="column">
+        <span>
+          <component
+            :is="column.component(row[column.field]).is"
+            v-if="column.component"
+            v-bind="column.component(row[column.field])" />
+          {{
+            column.display
+              ? column.display(row[column.field])
+              : row[column.field]
+          }}
+        </span>
+      </o-table-column>
+    </o-table>
+  </section>
+</template>

package/src/components/Tabs.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const tabs = [
+  {
+    label: "Pictures",
+    icon: "image",
+    content:
+      "What light is light, if Silvia be not seen? <br />What joy is joy.",
+  },
+  {
+    label: "Music",
+    icon: "music",
+    content: "Lorem <br />ipsum <br />dolor <br />sit <br />amet.",
+  },
+  {
+    label: "Articles",
+    icon: "pen",
+    content:
+      "What light is light, if Silvia be not seen? <br />What joy is joy, if Silvia be not by— <br />Unless it be to think that she is by <br />And feed upon the shadow of perfection? <br />Except I be by Silvia in the night, <br />There is no music in the nightingale.",
+  },
+  {
+    label: "Books",
+    icon: "book",
+    content:
+      "What light is light, if Silvia be not seen? <br />What joy is joy.",
+  },
+  {
+    label: "Videos",
+    icon: "video",
+    content:
+      "Nunc nec velit nec libero vestibulum eleifend. Curabitur pulvinar congueluctus. Nullam hendrerit iaculis augue vitae ornare. Maecenas vehiculapulvinar tellus, id sodales felis lobortis eget.",
+    disabled: true,
+  },
+];
+
+const atRight = ref(false);
+const expanded = ref(false);
+const size = ref();
+const type = ref("default");
+</script>
+
+<template>
+  <section>
+    <h2>Tabs Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <o-tabs>
+      <o-tab-item
+        v-for="(tab, i) in tabs"
+        :key="i"
+        :value="i"
+        :label="tab.label"
+        :icon="tab.icon"
+        :disabled="tab.disabled"
+        v-html="tab.content" />
+    </o-tabs>
+  </section>
+
+  <section>
+    <h3>Styles</h3>
+
+    Toggle / Underline
+    <o-tabs type="toggle">
+      <o-tab-item
+        v-for="(tab, i) in tabs"
+        :key="i"
+        :value="i"
+        :label="tab.label"
+        :icon="tab.icon"
+        :disabled="tab.disabled" />
+    </o-tabs>
+
+    Boxed / Tabs
+    <o-tabs type="boxed">
+      <o-tab-item
+        v-for="(tab, i) in tabs"
+        :key="i"
+        :value="i"
+        :label="tab.label"
+        :icon="tab.icon"
+        :disabled="tab.disabled" />
+    </o-tabs>
+  </section>
+
+  <section>
+    <h3>Position</h3>
+
+    <o-tabs position="left" type="boxed">
+      <o-tab-item
+        v-for="(tab, i) in tabs"
+        :key="i"
+        :value="i"
+        :label="tab.label"
+        :icon="tab.icon"
+        :disabled="tab.disabled" />
+    </o-tabs>
+    <o-tabs position="centered" type="boxed">
+      <o-tab-item
+        v-for="(tab, i) in tabs"
+        :key="i"
+        :value="i"
+        :label="tab.label"
+        :icon="tab.icon"
+        :disabled="tab.disabled" />
+    </o-tabs>
+    <o-tabs position="right" type="boxed">
+      <o-tab-item
+        v-for="(tab, i) in tabs"
+        :key="i"
+        :value="i"
+        :label="tab.label"
+        :icon="tab.icon"
+        :disabled="tab.disabled" />
+    </o-tabs>
+  </section>
+
+  <section>
+    <h3>Expanded</h3>
+    <o-tabs type="boxed" expanded>
+      <o-tab-item
+        v-for="(tab, i) in tabs"
+        :key="i"
+        :value="i"
+        :label="tab.label"
+        :icon="tab.icon"
+        :disabled="tab.disabled" />
+    </o-tabs>
+  </section>
+
+  <section>
+    <h3>Sizes</h3>
+    <o-tabs size="small" type="boxed">
+      <o-tab-item
+        v-for="(tab, i) in tabs"
+        :key="i"
+        :value="i"
+        :label="tab.label"
+        :icon="tab.icon"
+        :disabled="tab.disabled" />
+    </o-tabs>
+    <o-tabs size="medium" type="boxed">
+      <o-tab-item
+        v-for="(tab, i) in tabs"
+        :key="i"
+        :value="i"
+        :label="tab.label"
+        :icon="tab.icon"
+        :disabled="tab.disabled" />
+    </o-tabs>
+    <o-tabs size="large" type="boxed">
+      <o-tab-item
+        v-for="(tab, i) in tabs"
+        :key="i"
+        :value="i"
+        :label="tab.label"
+        :icon="tab.icon"
+        :disabled="tab.disabled" />
+    </o-tabs>
+  </section>
+
+  <section>
+    <h3>Vertical</h3>
+    <o-field grouped group-multiline>
+      <o-field>
+        <o-switch v-model="atRight"> Right position </o-switch>
+      </o-field>
+      <o-field>
+        <o-switch v-model="expanded"> Expanded </o-switch>
+      </o-field>
+      <o-field label="Size">
+        <o-select v-model="size">
+          <option :value="null">Default</option>
+          <option value="small">Small</option>
+          <option value="medium">Medium</option>
+          <option value="large">Large</option>
+        </o-select>
+      </o-field>
+      <o-field label="Type">
+        <o-select v-model="type">
+          <option value="default">Default</option>
+          <option value="boxed">Boxed</option>
+          <option value="toggle">Toggle</option>
+          <option value="pills">Pills</option>
+        </o-select>
+      </o-field>
+    </o-field>
+    <o-tabs
+      vertical
+      :position="atRight ? 'right' : ''"
+      :size="size"
+      :type="type"
+      :expanded="expanded">
+      <o-tab-item
+        v-for="(tab, i) in tabs"
+        :key="i"
+        :value="i"
+        :label="tab.label"
+        :icon="tab.icon"
+        :disabled="tab.disabled"
+        v-html="tab.content" />
+    </o-tabs>
+  </section>
+</template>