@oruga-ui/theme-oruga 0.2.1 → 0.2.2

package/src/components/Input.vue

@@ -1,129 +0,0 @@
-<template>
-  <section>
-    <h2>Input Demo</h2>
-    <hr />
-  </section>
-
-  <section>
-    <h3>Base</h3>
-
-    <o-field label="Name">
-      <o-input expanded />
-    </o-field>
-
-    <o-field label="Email" variant="danger" message="This email is invalid">
-      <o-input type="email" value="john@" maxlength="30" expanded />
-    </o-field>
-
-    <o-field
-      label="Username"
-      variant="success"
-      message="This username is available">
-      <o-input value="johnsilver" maxlength="30" />
-    </o-field>
-
-    <o-field label="Password">
-      <o-input type="password" value="iwantmytreasure" password-reveal>
-      </o-input>
-    </o-field>
-
-    <o-field label="Message">
-      <o-input maxlength="200" type="textarea" />
-    </o-field>
-
-    <o-field>
-      <o-input placeholder="No label" />
-    </o-field>
-
-    <o-field label="Rounded">
-      <o-input placeholder="No label" rounded />
-    </o-field>
-
-    <o-field label="Disabled">
-      <o-input placeholder="Disabled" disabled />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Variants</h3>
-
-    <o-field label="Primary" variant="primary">
-      <o-input placeholder="Primary" />
-    </o-field>
-
-    <o-field label="Secondary" variant="secondary">
-      <o-input placeholder="Secondary" />
-    </o-field>
-
-    <o-field label="Success" variant="success">
-      <o-input placeholder="Success" />
-    </o-field>
-
-    <o-field label="Info" variant="info">
-      <o-input placeholder="Info" />
-    </o-field>
-
-    <o-field label="Warning" variant="warning">
-      <o-input placeholder="Warning" />
-    </o-field>
-
-    <o-field
-      label="Error"
-      variant="danger"
-      message="You can have a message too">
-      <o-input placeholder="Error" />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>Sizes</h3>
-
-    <o-field>
-      <o-input placeholder="small" size="small" icon="user" />
-    </o-field>
-
-    <o-field>
-      <o-input placeholder="default" icon="user" />
-    </o-field>
-
-    <o-field>
-      <o-input placeholder="medium" size="medium" icon="user" />
-    </o-field>
-
-    <o-field>
-      <o-input placeholder="Large" size="large" icon="user" />
-    </o-field>
-  </section>
-
-  <section>
-    <h3>With Icons</h3>
-
-    <o-field>
-      <o-input
-        placeholder="Search..."
-        type="search"
-        icon="search"
-        icon-clickable>
-      </o-input>
-    </o-field>
-
-    <o-field>
-      <o-input
-        placeholder="Search..."
-        type="search"
-        icon-right="search"
-        icon-right-clickable>
-      </o-input>
-    </o-field>
-
-    <o-field>
-      <o-input
-        placeholder="Email"
-        type="email"
-        icon="envelope"
-        icon-right="times-circle"
-        icon-right-clickable>
-      </o-input>
-    </o-field>
-  </section>
-</template>

package/src/components/Loading.vue

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-const isLoading = ref(false);
-const isFullPage = ref(true);
-const isCustomLoading = ref(false);
-const isCustomFullPage = ref(true);
-</script>
-
-<template>
-  <section>
-    <h2>Loading Demo</h2>
-    <hr />
-  </section>
-
-  <section>
-    <h3>Base</h3>
-
-    <o-field>
-      <o-button
-        size="medium"
-        variant="primary"
-        label="Launch loading"
-        @click="() => (isLoading = true)" />
-    </o-field>
-
-    <o-field>
-      <o-switch v-model="isFullPage" label="Display loader over full page" />
-    </o-field>
-
-    <p style="position: relative">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
-      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
-      laoreet elit
-      <o-loading
-        v-model:active="isLoading"
-        :full-page="isFullPage"
-        :cancelable="true" />
-    </p>
-  </section>
-
-  <section>
-    <h3>Base Custom Slot</h3>
-
-    <o-field>
-      <o-button
-        size="medium"
-        variant="primary"
-        label="Launch loading"
-        @click="() => (isCustomLoading = true)" />
-    </o-field>
-    <o-field>
-      <o-switch
-        v-model="isCustomFullPage"
-        label="Display loader over full page" />
-    </o-field>
-
-    <p style="position: relative">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
-      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
-      laoreet elit
-      <o-loading
-        v-model:active="isCustomLoading"
-        :full-page="isCustomFullPage"
-        :cancelable="true">
-        <o-icon pack="fas" icon="sync-alt" size="large" spin />
-      </o-loading>
-    </p>
-  </section>
-</template>

package/src/components/Menu.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <section>
-    <h2>Menu Demo</h2>
-    <hr />
-  </section>
-
-  <section>
-    <h3>Base</h3>
-
-    <o-menu label="Menu">
-      <o-menu-item icon="info-circle" label="Info" />
-      <o-menu-item icon="cog" expanded>
-        <template #label="props">
-          Administrator
-          <o-icon :icon="props.active ? 'chevron-up' : 'chevron-down'" />
-        </template>
-        <o-menu-item icon="user" label="Users" />
-        <o-menu-item icon="mobile">
-          <template #label> Devices </template>
-        </o-menu-item>
-        <o-menu-item icon="money-bill" label="Payments" disabled />
-      </o-menu-item>
-      <o-menu-item icon="user" label="My Account">
-        <o-menu-item label="Account data" />
-        <o-menu-item label="Addresses" />
-      </o-menu-item>
-    </o-menu>
-    <o-menu>
-      <o-menu-item
-        label="Documentation"
-        icon="link"
-        tag="a"
-        target="_blank"
-        href="/documentation/" />
-    </o-menu>
-    <o-menu label="Actions">
-      <o-menu-item label="Logout" />
-    </o-menu>
-  </section>
-</template>

package/src/components/Modal.vue

@@ -1,230 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-const isImageModalActive = ref(false);
-const isCardModalActive = ref(false);
-const isFullScreenModalActive = ref(false);
-
-const tags = ref([]);
-const value = ref(20);
-</script>
-
-<template>
-  <section>
-    <h2>Modal Demo</h2>
-    <hr />
-  </section>
-
-  <section>
-    <h3>Base</h3>
-
-    <div class="buttons">
-      <o-button
-        size="medium"
-        variant="primary"
-        label="Open Image Modal"
-        @click="isImageModalActive = true" />
-
-      <o-button
-        size="medium"
-        variant="primary"
-        label="Open Card Modal"
-        @click="isCardModalActive = true" />
-
-      <o-button
-        size="medium"
-        variant="primary"
-        label="Open FullScreen Modal"
-        @click="isFullScreenModalActive = true" />
-    </div>
-
-    <!-- image modal -->
-    <o-modal v-model:active="isImageModalActive">
-      <p style="text-align: center">
-        <img
-          style="background-color: white"
-          src="https://avatars2.githubusercontent.com/u/66300512?s=200&v=4" />
-      </p>
-    </o-modal>
-
-    <!-- card modal -->
-    <o-modal v-model:active="isCardModalActive" :width="720" scroll="clip">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">Log in to continue using the service</h5>
-          <o-icon
-            clickable
-            native-type="button"
-            icon="times"
-            @click="isCardModalActive = false" />
-        </div>
-        <div class="modal-body">
-          <o-field label="Email">
-            <o-input
-              icon="at"
-              :has-counter="true"
-              maxlength="10"
-              placeholder="Enter Your Email" />
-          </o-field>
-          <o-field label="Password">
-            <o-input
-              icon="lock"
-              :has-counter="true"
-              maxlength="10"
-              placeholder="Enter Your Password" />
-          </o-field>
-          <o-field label="Enter some items">
-            <o-inputitems
-              v-model="tags"
-              variant="primary"
-              field="user.first_name"
-              icon="tag"
-              placeholder="Add an item"
-              keep-first />
-          </o-field>
-          <o-field label="Dark & Medium">
-            <o-slider
-              v-model="value"
-              :rounded="true"
-              size="medium"
-              variant="dark"
-              tooltip-variant="dark" />
-          </o-field>
-          <o-field>
-            <o-checkbox variant="info"> Remember me </o-checkbox>
-          </o-field>
-        </div>
-        <div class="modal-footer">
-          <o-button
-            outlined
-            variant="danger"
-            label="Close"
-            @click="isCardModalActive = false" />
-          <o-button outlined variant="primary" label="Log in" />
-        </div>
-      </div>
-    </o-modal>
-
-    <!-- fullscreen modal -->
-    <o-modal
-      v-model:active="isFullScreenModalActive"
-      :width="720"
-      scroll="clip"
-      :can-cancel="['escape', 'button']"
-      full-screen>
-      <div class="modal-content h-100">
-        <div class="modal-header">
-          <h5 class="modal-title">Log in to continue using the service</h5>
-          <o-icon
-            clickable
-            native-type="button"
-            icon="times"
-            @click="isFullScreenModalActive = false" />
-        </div>
-        <div class="modal-body">
-          <o-field label="Email">
-            <o-input
-              icon="at"
-              :has-counter="true"
-              maxlength="10"
-              placeholder="Enter Your Email" />
-          </o-field>
-          <o-field label="Password">
-            <o-input
-              icon="lock"
-              :has-counter="true"
-              maxlength="10"
-              placeholder="Enter Your Password" />
-          </o-field>
-          <o-field label="Enter some items">
-            <o-inputitems
-              v-model="tags"
-              variant="primary"
-              field="user.first_name"
-              icon="tag"
-              placeholder="Add an item"
-              keep-first />
-          </o-field>
-          <o-field label="Dark & Medium">
-            <o-slider
-              v-model="value"
-              :rounded="true"
-              size="medium"
-              variant="dark"
-              tooltip-variant="dark" />
-          </o-field>
-          <o-field>
-            <o-checkbox variant="info"> Remember me </o-checkbox>
-          </o-field>
-        </div>
-        <div class="modal-footer">
-          <o-button
-            outlined
-            variant="danger"
-            label="Close"
-            @click="isFullScreenModalActive = false" />
-          <o-button outlined variant="primary" label="Log in" />
-        </div>
-      </div>
-    </o-modal>
-  </section>
-</template>
-
-<style lang="scss" scoped>
-.modal-content {
-  display: flex;
-  flex-direction: column;
-  max-height: calc(100vh - 160px);
-  overflow: auto;
-  width: 100%;
-
-  @media screen and (min-width: 769px) {
-    margin: 0 auto;
-    max-height: calc(100vh - 40px);
-    width: 640px;
-  }
-
-  .modal-footer,
-  .modal-header {
-    align-items: center;
-    background-color: #f5f5f5;
-    display: flex;
-    flex-shrink: 0;
-    justify-content: flex-start;
-    padding: 20px;
-    position: relative;
-  }
-  .modal-header {
-    border-bottom: 1px solid #dbdbdb;
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px;
-
-    .modal-title {
-      color: #363636;
-      flex-grow: 1;
-      flex-shrink: 0;
-      font-size: 1.5rem;
-      line-height: 1;
-      margin: 0;
-    }
-  }
-  .modal-body {
-    -webkit-overflow-scrolling: touch;
-    background-color: #fff;
-    flex-grow: 1;
-    flex-shrink: 1;
-    overflow: auto;
-    padding: 20px;
-  }
-
-  .modal-footer {
-    border-bottom-left-radius: 6px;
-    border-bottom-right-radius: 6px;
-    border-top: 1px solid #dbdbdb;
-
-    button:not(:last-child) {
-      margin-right: 0.5em;
-    }
-  }
-}
-</style>

package/src/components/Notification.vue

@@ -1,136 +0,0 @@
-<script setup lang="ts">
-import { useOruga } from "@oruga-ui/oruga-next";
-
-function simple() {
-  const oruga = useOruga();
-  oruga.notification.open("Something happened");
-}
-function success() {
-  const oruga = useOruga();
-  oruga.notification.open({
-    message: "Something happened correctly!",
-    variant: "success",
-    closable: true,
-  });
-}
-function toast() {
-  const oruga = useOruga();
-  oruga.notification.open({
-    message: "Something happened correctly!",
-    rootClass: "toast",
-    position: "top",
-  });
-}
-function danger() {
-  const oruga = useOruga();
-
-  oruga.notification.open({
-    message: `Something's not good, also I'm on <b>bottom</b>`,
-    position: "bottom-right",
-    variant: "danger",
-    closable: true,
-    indefinite: true,
-    ariaLive: "assertive",
-    ariaAtomic: true,
-    ariaCloseLabel: "Close",
-    onClose: () => {
-      const oruga = useOruga();
-      oruga.notification.open("Custom notification closed!");
-    },
-  });
-}
-</script>
-
-<template>
-  <section>
-    <h2>Notification Demo</h2>
-    <hr />
-  </section>
-
-  <section>
-    <h3>Base</h3>
-
-    <o-notification
-      closable
-      variant="primary"
-      aria-close-label="Close notification">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
-      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
-      laoreet elit
-    </o-notification>
-    <o-notification
-      closable
-      variant="secondary"
-      aria-close-label="Close notification">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
-      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
-      laoreet elit
-    </o-notification>
-    <o-notification
-      closable
-      variant="info"
-      aria-close-label="Close notification">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
-      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
-      laoreet elit
-    </o-notification>
-    <o-notification
-      closable
-      variant="success"
-      aria-close-label="Close notification">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
-      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
-      laoreet elit
-    </o-notification>
-    <o-notification
-      closable
-      variant="warning"
-      aria-close-label="Close notification"
-      role="alert">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
-      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
-      laoreet elit
-    </o-notification>
-    <o-notification
-      closable
-      variant="danger"
-      aria-close-label="Close notification"
-      role="alert">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
-      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
-      laoreet elit
-    </o-notification>
-
-    <o-notification
-      closable
-      type="info"
-      variant="info"
-      aria-close-label="Close notification">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
-      fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien
-      laoreet elit
-    </o-notification>
-  </section>
-
-  <section>
-    <h3>Programmatically opening</h3>
-
-    <div class="buttons">
-      <o-button
-        label="Launch notification (default)"
-        size="medium"
-        @click="simple" />
-      <o-button
-        label="Launch notification (custom)"
-        variant="success"
-        size="medium"
-        @click="success" />
-      <o-button label="Launch toast" size="medium" @click="toast" />
-      <o-button
-        label="Launch notification (custom)"
-        variant="danger"
-        size="medium"
-        @click="danger" />
-    </div>
-  </section>
-</template>

package/src/components/Pagination.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-const total = ref(200);
-const current = ref(10);
-const perPage = ref(10);
-const rangeBefore = ref(3);
-const rangeAfter = ref(1);
-const order = ref("");
-const size = ref("");
-const isSimple = ref(false);
-const isRounded = ref(false);
-const prevIcon = ref("chevron-left");
-const nextIcon = ref("chevron-right");
-</script>
-
-<template>
-  <section>
-    <h2>Pagination Demo</h2>
-    <hr />
-  </section>
-
-  <section>
-    <h3>Base</h3>
-
-    <o-field grouped group-multiline>
-      <o-field label="Total">
-        <o-input v-model="total" type="number" />
-      </o-field>
-      <o-field label="Items per page">
-        <o-input v-model="perPage" type="number" />
-      </o-field>
-    </o-field>
-
-    <o-field grouped group-multiline>
-      <o-field label="Show buttons before current">
-        <o-input v-model="rangeBefore" type="number" min="0" />
-      </o-field>
-      <o-field label="Show buttons after current">
-        <o-input v-model="rangeAfter" type="number" min="0" />
-      </o-field>
-    </o-field>
-
-    <o-field grouped group-multiline>
-      <o-field label="Order">
-        <o-select v-model="order">
-          <option value="">default</option>
-          <option value="left">left</option>
-          <option value="centered">centered</option>
-          <option value="right">right</option>
-        </o-select>
-      </o-field>
-      <o-field label="Size">
-        <o-select v-model="size">
-          <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 label="Previous 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>
-    <o-field grouped group-multiline>
-      <o-switch v-model="isSimple">Simple</o-switch>
-      <o-switch v-model="isRounded">Rounded</o-switch>
-    </o-field>
-    <br />
-    <o-pagination
-      v-model:current="current"
-      :total="total"
-      :range-before="rangeBefore"
-      :range-after="rangeAfter"
-      :order="order"
-      :size="size"
-      :simple="isSimple"
-      :rounded="isRounded"
-      :per-page="perPage"
-      :icon-prev="prevIcon"
-      :icon-next="nextIcon"
-      aria-next-label="Next page"
-      aria-previous-label="Previous page"
-      aria-page-label="Page"
-      aria-current-label="Current page" />
-  </section>
-</template>