@oruga-ui/theme-oruga 0.2.1 → 0.3.0

package/src/components/Steps.vue

@@ -1,233 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-const activeStep = ref("0");
-
-const showSocial = ref(false);
-const isAnimated = ref(true);
-const isVertical = ref(false);
-const isRounded = ref(true);
-const isStepsClickable = ref(false);
-
-const hasNavigation = ref(true);
-const customNavigation = ref(false);
-const isProfileSuccess = ref(false);
-
-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);
-</script>
-
-<template>
-  <section>
-    <h2>Steps Demo</h2>
-    <hr />
-  </section>
-
-  <section>
-    <h3>Base</h3>
-
-    <o-field grouped group-multiline>
-      <o-field>
-        <o-switch v-model="showSocial" label="Show Social step" />
-      </o-field>
-      <o-field>
-        <o-switch v-model="isAnimated" label="Animated" />
-      </o-field>
-      <o-field>
-        <o-switch v-model="isRounded" label="Rounded" />
-      </o-field>
-      <o-field>
-        <o-switch v-model="isVertical" label="Vertical" />
-      </o-field>
-      <o-field>
-        <o-switch v-model="isStepsClickable" label="Clickable Marker" />
-      </o-field>
-    </o-field>
-    <o-field grouped group-multiline>
-      <o-field>
-        <o-switch v-model="hasNavigation" label="Navigation Buttons" />
-      </o-field>
-      <o-field>
-        <o-switch v-model="customNavigation" label="Custom Navigation" />
-      </o-field>
-      <o-field>
-        <o-switch v-model="isProfileSuccess">
-          Set <code>success</code> for profile
-        </o-switch>
-      </o-field>
-    </o-field>
-    <o-field v-if="hasNavigation" grouped group-multiline>
-      <o-field label="Prev icon">
-        <o-select v-model="prevIcon">
-          <option value="chevron-left">Chevron</option>
-          <option value="arrow-left">Arrow</option>
-        </o-select>
-      </o-field>
-      <o-field label="Next icon">
-        <o-select v-model="nextIcon">
-          <option value="chevron-right">Chevron</option>
-          <option value="arrow-right">Arrow</option>
-        </o-select>
-      </o-field>
-      <o-field label="Label position">
-        <o-select v-model="labelPosition">
-          <option value="bottom">Bottom</option>
-          <option value="right">Right</option>
-          <option value="left">Left</option>
-        </o-select>
-      </o-field>
-      <o-field label="steps position">
-        <o-select v-model="stepsPosition">
-          <option value="right">Right</option>
-          <option value="left">Left</option>
-        </o-select>
-      </o-field>
-    </o-field>
-
-    <o-steps
-      v-model="activeStep"
-      :vertical="isVertical"
-      :position="stepsPosition"
-      :animated="isAnimated"
-      :rounded="isRounded"
-      :has-navigation="hasNavigation"
-      :icon-prev="prevIcon"
-      :icon-next="nextIcon"
-      :label-position="labelPosition">
-      <o-step-item step="1" label="Account" :clickable="isStepsClickable">
-        <h1 class="title text-center">Account</h1>
-        Lorem ipsum dolor sit amet.
-      </o-step-item>
-
-      <o-step-item
-        step="2"
-        label="Profile"
-        :clickable="isStepsClickable"
-        :variant="isProfileSuccess ? 'success' : ''">
-        <h1 class="title text-center">Profile</h1>
-        Lorem ipsum dolor sit amet.
-      </o-step-item>
-
-      <o-step-item
-        step="3"
-        :visible="showSocial"
-        label="Social"
-        :clickable="isStepsClickable">
-        <h1 class="title text-center">Social</h1>
-        Lorem ipsum dolor sit amet.
-      </o-step-item>
-
-      <o-step-item
-        :step="showSocial ? '4' : '3'"
-        label="Finish"
-        :clickable="isStepsClickable"
-        disabled>
-        <h1 class="title text-center">Finish</h1>
-        Lorem ipsum dolor sit amet.
-      </o-step-item>
-
-      <template v-if="customNavigation" #navigation="{ previous, next }">
-        <o-button
-          outlined
-          variant="danger"
-          icon-pack="fas"
-          icon-left="backward"
-          :disabled="previous.disabled"
-          label="Previous"
-          @click.prevent="previous.action" />
-
-        <o-button
-          outlined
-          variant="success"
-          icon-pack="fas"
-          icon-right="forward"
-          :disabled="next.disabled"
-          label="Next"
-          @click.prevent="next.action" />
-      </template>
-    </o-steps>
-  </section>
-
-  <section>
-    <h3>Variants</h3>
-
-    Warning
-    <o-steps variant="warning">
-      <o-step-item label="Account" icon="user-lock">empty</o-step-item>
-      <o-step-item label="Profile" icon="user">empty</o-step-item>
-      <o-step-item label="Social" icon="user-plus">empty</o-step-item>
-    </o-steps>
-
-    Info
-    <o-steps variant="info">
-      <o-step-item label="Account" icon="user-lock">empty</o-step-item>
-      <o-step-item label="Profile" icon="user">empty</o-step-item>
-      <o-step-item label="Social" icon="user-plus">empty</o-step-item>
-    </o-steps>
-
-    Success
-    <o-steps variant="success">
-      <o-step-item label="Account" icon="user-lock">empty</o-step-item>
-      <o-step-item label="Profile" icon="user">empty</o-step-item>
-      <o-step-item label="Social" icon="user-plus">empty</o-step-item>
-    </o-steps>
-  </section>
-
-  <section>
-    <h3>Vertical</h3>
-
-    <o-field grouped group-multiline>
-      <o-field>
-        <o-switch v-model="position" true-value="right">
-          Right position</o-switch
-        >
-      </o-field>
-      <o-field label="Size">
-        <o-select v-model="size" placeholder="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="Label position">
-        <o-select v-model="labelPosition">
-          <option value="bottom">Bottom</option>
-          <option value="right">Right</option>
-          <option value="left">Left</option>
-        </o-select>
-      </o-field>
-    </o-field>
-
-    <o-steps
-      :position="position"
-      :label-position="labelPosition"
-      :size="size"
-      vertical>
-      <o-step-item label="Account" icon="user-lock">
-        Account: Lorem ipsum dolor sit amet. <br />
-        Account: Lorem ipsum dolor sit amet. <br />
-        Account: Lorem ipsum dolor sit amet.
-      </o-step-item>
-
-      <o-step-item label="Profile" icon="user">
-        Profile: Lorem ipsum dolor sit amet. <br />
-        Profile: Lorem ipsum dolor sit amet.? <br />
-        Profile: Lorem ipsum dolor sit amet. <br />
-        Profile: Lorem ipsum dolor sit amet.
-      </o-step-item>
-
-      <o-step-item label="Social" icon="user-plus" disabled>
-        Social: Lorem ipsum dolor sit amet. <br />
-        Social: Lorem ipsum dolor sit amet. <br />
-        Social: Lorem ipsum dolor sit amet. <br />
-        Social: Lorem ipsum dolor sit amet. <br />
-        Social: Lorem ipsum dolor sit amet.
-      </o-step-item>
-    </o-steps>
-  </section>
-</template>

package/src/components/Switch.vue

@@ -1,137 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-const isSwitched = ref(false);
-const isSwitchedCustom = ref("Yes");
-const isRounded = ref(false);
-const position = ref("right");
-const size = ref("");
-const variant = ref(null);
-const passive = ref(null);
-</script>
-
-<template>
-  <section>
-    <h2>Switch Demo</h2>
-    <hr />
-  </section>
-
-  <section>
-    <h3>Base</h3>
-
-    <o-field>
-      <o-switch label="Default" />
-    </o-field>
-    <o-field>
-      <o-switch v-model="isSwitched">
-        {{ isSwitched }}
-      </o-switch>
-    </o-field>
-    <o-field>
-      <o-switch v-model="isSwitchedCustom" true-value="Yes" false-value="No">
-        {{ isSwitchedCustom }}
-      </o-switch>
-    </o-field>
-    <o-field>
-      <o-switch disabled label="Disabled" />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Variant</h3>
-
-    <o-field>
-      <o-switch :model-value="true" label="Default" />
-    </o-field>
-    <o-field>
-      <o-switch :model-value="true" variant="primary" label="Primary" />
-    </o-field>
-    <o-field>
-      <o-switch :model-value="true" variant="secondary" label="Secondary" />
-    </o-field>
-    <o-field>
-      <o-switch :model-value="true" variant="info" label="Info" />
-    </o-field>
-    <o-field>
-      <o-switch :model-value="true" variant="success" label="Success" />
-    </o-field>
-    <o-field>
-      <o-switch :model-value="true" variant="danger" label="Danger" />
-    </o-field>
-    <o-field>
-      <o-switch :model-value="true" variant="warning" label="Warning" />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Size</h3>
-
-    <o-field>
-      <o-switch size="small" label="Small" />
-    </o-field>
-    <o-field>
-      <o-switch label="Default" />
-    </o-field>
-    <o-field>
-      <o-switch size="medium" label="Medium" />
-    </o-field>
-    <o-field>
-      <o-switch size="large" label="Large" />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Style variants</h3>
-
-    <o-field grouped>
-      <o-switch v-model="isRounded" label="Rounded" />
-      <o-switch
-        v-model="position"
-        true-value="left"
-        false-value="right"
-        label="
-        Label on left
-      " />
-    </o-field>
-    <o-field grouped>
-      <o-field label="Variant">
-        <o-select v-model="variant" expanded placeholder="Variant">
-          <option value="null">Default</option>
-          <option value="primary">Primary</option>
-          <option value="secondary">Secondary</option>
-          <option value="success">Success</option>
-          <option value="info">Info</option>
-          <option value="warning">Warning</option>
-          <option value="danger">Danger</option>
-        </o-select>
-      </o-field>
-      <o-field label="Passive Variant">
-        <o-select v-model="passive" expanded placeholder="Passive Variant">
-          <option value="null">Default</option>
-          <option value="primary">Primary</option>
-          <option value="secondary">Secondary</option>
-          <option value="success">Success</option>
-          <option value="info">Info</option>
-          <option value="warning">Warning</option>
-          <option value="danger">Danger</option>
-        </o-select>
-      </o-field>
-      <o-field label="Size">
-        <o-select v-model="size" expanded>
-          <option value="">Default</option>
-          <option value="small">small</option>
-          <option value="medium">medium</option>
-          <option value="large">large</option>
-        </o-select>
-      </o-field>
-    </o-field>
-
-    <o-switch
-      :rounded="isRounded"
-      :position="position"
-      :size="size"
-      :variant="variant"
-      :passive-variant="passive"
-      label="Sample" />
-  </section>
-</template>

package/src/components/Table.vue

@@ -1,278 +0,0 @@
-<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" label="Bordered" />
-      <o-switch v-model="isStriped" :rounded="true" label="Striped" />
-      <o-switch v-model="isNarrowed" :rounded="true" label="Narrowed" />
-      <o-switch v-model="isHoverable" :rounded="true" label="Hoverable" />
-      <o-switch v-model="isFocusable" :rounded="true" label="Focusable" />
-      <o-switch v-model="isLoading" :rounded="true" label="Loading state" />
-      <o-switch v-model="isEmpty" :rounded="true" label="Empty" />
-      <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">
-        <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]
-        }}
-      </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" label="Paginated " />
-      <o-switch
-        v-model="isPaginationSimple"
-        :rounded="true"
-        label="Simple Paginated" />
-      <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">
-        <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]
-        }}
-      </o-table-column>
-    </o-table>
-  </section>
-
-  <section>
-    <h3>Selection</h3>
-
-    <o-button
-      variant="danger"
-      :disabled="!selected"
-      icon-left="times"
-      label="Clear selected"
-      @click="selected = null" />
-
-    <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>