@oruga-ui/theme-oruga 0.0.1 → 0.2.0

package/src/components/Loading.vue

@@ -20,15 +20,14 @@ const isCustomFullPage = ref(true);
       <o-button
         size="medium"
         variant="primary"
-        @click="() => (isLoading = true)">
-        Launch loading
-      </o-button>
+        label="Launch loading"
+        @click="() => (isLoading = true)" />
     </o-field>
+
     <o-field>
-      <o-switch v-model="isFullPage" disabled>
-        Display loader over full page
-      </o-switch>
+      <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
@@ -36,7 +35,7 @@ const isCustomFullPage = ref(true);
       <o-loading
         v-model:active="isLoading"
         :full-page="isFullPage"
-        :can-cancel="true" />
+        :cancelable="true" />
     </p>
   </section>
 
@@ -47,15 +46,15 @@ const isCustomFullPage = ref(true);
       <o-button
         size="medium"
         variant="primary"
-        @click="() => (isCustomLoading = true)">
-        Launch loading
-      </o-button>
+        label="Launch loading"
+        @click="() => (isCustomLoading = true)" />
     </o-field>
     <o-field>
-      <o-switch v-model="isCustomFullPage">
-        Display loader over full page
-      </o-switch>
+      <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
@@ -63,7 +62,7 @@ const isCustomFullPage = ref(true);
       <o-loading
         v-model:active="isCustomLoading"
         :full-page="isCustomFullPage"
-        :can-cancel="true">
+        :cancelable="true">
         <o-icon pack="fas" icon="sync-alt" size="large" spin />
       </o-loading>
     </p>

package/src/components/Menu.vue

@@ -0,0 +1,42 @@
+<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

@@ -169,3 +169,62 @@ const value = ref(20);
     </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,12 +1,12 @@
 <script setup lang="ts">
-import { useProgrammatic } from "@oruga-ui/oruga-next";
+import { useOruga } from "@oruga-ui/oruga-next";
 
 function simple() {
-  const { oruga } = useProgrammatic();
+  const oruga = useOruga();
   oruga.notification.open("Something happened");
 }
 function success() {
-  const { oruga } = useProgrammatic();
+  const oruga = useOruga();
   oruga.notification.open({
     message: "Something happened correctly!",
     variant: "success",
@@ -14,7 +14,7 @@ function success() {
   });
 }
 function toast() {
-  const { oruga } = useProgrammatic();
+  const oruga = useOruga();
   oruga.notification.open({
     message: "Something happened correctly!",
     rootClass: "toast",
@@ -22,7 +22,7 @@ function toast() {
   });
 }
 function danger() {
-  const { oruga } = useProgrammatic();
+  const oruga = useOruga();
 
   oruga.notification.open({
     message: `Something's not good, also I'm on <b>bottom</b>`,
@@ -34,7 +34,7 @@ function danger() {
     ariaAtomic: true,
     ariaCloseLabel: "Close",
     onClose: () => {
-      const { oruga } = useProgrammatic();
+      const oruga = useOruga();
       oruga.notification.open("Custom notification closed!");
     },
   });

package/src/components/Pagination.vue

@@ -25,19 +25,19 @@ const nextIcon = ref("chevron-right");
 
     <o-field grouped group-multiline>
       <o-field label="Total">
-        <o-input v-model="total" type="number"></o-input>
+        <o-input v-model="total" type="number" />
       </o-field>
       <o-field label="Items per page">
-        <o-input v-model="perPage" type="number"></o-input>
+        <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-input>
+        <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-input>
+        <o-input v-model="rangeAfter" type="number" min="0" />
       </o-field>
     </o-field>
 
@@ -91,7 +91,6 @@ const nextIcon = ref("chevron-right");
       aria-next-label="Next page"
       aria-previous-label="Previous page"
       aria-page-label="Page"
-      aria-current-label="Current page">
-    </o-pagination>
+      aria-current-label="Current page" />
   </section>
 </template>

package/src/components/Radio.vue

@@ -16,17 +16,21 @@ const size = ref("small");
     <h3>Base</h3>
 
     <o-field>
-      <o-radio v-model="radio" name="name" native-value="Flint">
-        Flint
-      </o-radio>
-      <o-radio v-model="radio" name="name" native-value="Silver">
-        Silver
-      </o-radio>
-      <o-radio v-model="radio" name="name" native-value="Jack"> Jack </o-radio>
-      <o-radio v-model="radio" name="name" native-value="Vane" disabled>
-        Vane
-      </o-radio>
+      <o-radio v-model="radio" name="name" native-value="Flint" label="Flint" />
+      <o-radio
+        v-model="radio"
+        name="name"
+        native-value="Silver"
+        label="Silver" />
+      <o-radio v-model="radio" name="name" native-value="Jack" label="Jack" />
+      <o-radio
+        v-model="radio"
+        name="name"
+        native-value="Vane"
+        disabled
+        label="Vane" />
     </o-field>
+
     <p><b>Selection:</b> {{ radio }}</p>
   </section>
 
@@ -34,38 +38,51 @@ const size = ref("small");
     <h3>Variant</h3>
 
     <o-field>
-      <o-radio v-model="variant" native-value="default"> Default </o-radio>
+      <o-radio v-model="variant" native-value="default" label="Default" />
     </o-field>
     <o-field>
-      <o-radio v-model="variant" native-value="primary" variant="primary">
-        Primary
-      </o-radio>
+      <o-radio
+        v-model="variant"
+        native-value="primary"
+        variant="primary"
+        label="Primary" />
     </o-field>
     <o-field>
-      <o-radio v-model="variant" native-value="secondary" variant="secondary">
-        Secondary
-      </o-radio>
+      <o-radio
+        v-model="variant"
+        native-value="secondary"
+        variant="secondary"
+        label="Secondary" />
     </o-field>
     <o-field>
-      <o-radio v-model="variant" native-value="info" variant="info">
-        Info
-      </o-radio>
+      <o-radio
+        v-model="variant"
+        native-value="info"
+        variant="info"
+        label="Info" />
     </o-field>
     <o-field>
-      <o-radio v-model="variant" native-value="success" variant="success">
-        Success
-      </o-radio>
+      <o-radio
+        v-model="variant"
+        native-value="success"
+        variant="success"
+        label="Success" />
     </o-field>
     <o-field>
-      <o-radio v-model="variant" native-value="warning" variant="warning">
-        Warning
-      </o-radio>
+      <o-radio
+        v-model="variant"
+        native-value="warning"
+        variant="warning"
+        label="Warning" />
     </o-field>
     <o-field>
-      <o-radio v-model="variant" native-value="danger" variant="danger">
-        Danger
-      </o-radio>
+      <o-radio
+        v-model="variant"
+        native-value="danger"
+        variant="danger"
+        label="Danger" />
     </o-field>
+
     <p><b>Selection:</b> {{ variant }}</p>
   </section>
 
@@ -73,23 +90,22 @@ const size = ref("small");
     <h3>Size</h3>
 
     <o-field>
-      <o-radio v-model="size" native-value="small" size="small">
-        Small
-      </o-radio>
+      <o-radio v-model="size" native-value="small" size="small" label="Small" />
     </o-field>
     <o-field>
-      <o-radio v-model="size" native-value="default"> Default </o-radio>
+      <o-radio v-model="size" native-value="default" label="Default" />
     </o-field>
     <o-field>
-      <o-radio v-model="size" native-value="medium" size="medium">
-        Medium
-      </o-radio>
+      <o-radio
+        v-model="size"
+        native-value="medium"
+        size="medium"
+        label="Medium" />
     </o-field>
     <o-field>
-      <o-radio v-model="size" native-value="large" size="large">
-        Large
-      </o-radio>
+      <o-radio v-model="size" native-value="large" size="large" label="Large" />
     </o-field>
+
     <p><b>Selection:</b> {{ size }}</p>
   </section>
 </template>

package/src/components/Sidebar.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-const isOpen = ref(false);
+const isActive = ref(false);
 const isOverlay = ref(true);
 const isFullheight = ref(true);
 const isFullwidth = ref(false);
 const isReduced = ref(false);
-const right = ref(false);
 const expandOnHover = ref(false);
+const teleport = ref(false);
+const position = ref("left");
+const inline = ref(false);
 
 const toggleSidebar = () => {
-  isOpen.value = !isOpen.value;
+  isActive.value = !isActive.value;
 };
 </script>
 
@@ -23,34 +25,49 @@ const toggleSidebar = () => {
   <section>
     <h3>Base</h3>
 
+    <o-field grouped>
+      <o-switch v-model="isOverlay" label="Overlay" />
+      <o-switch v-model="isFullheight" label="Fullheight" />
+      <o-switch v-model="isFullwidth" label="Fullwidth" />
+      <o-switch v-model="isReduced" label="Reduce" />
+      <o-switch v-model="expandOnHover" label="Expand on hover" />
+      <o-switch v-model="teleport" label="On body" />
+      <o-switch v-model="inline" label="Inline" />
+    </o-field>
+
+    <o-field label="Position">
+      <o-select v-model="position">
+        <option value="top">Top</option>
+        <option value="bottom">Bottom</option>
+        <option value="right">Right</option>
+        <option value="left">Left</option>
+      </o-select>
+    </o-field>
+    <o-button @click="toggleSidebar()">Show</o-button>
+
     <o-sidebar
-      v-model:open="isOpen"
+      v-model:active="isActive"
       variant="primary"
       :fullheight="isFullheight"
       :fullwidth="isFullwidth"
       :overlay="isOverlay"
-      :right="right"
+      :position="position"
       :reduce="isReduced"
       :expand-on-hover="expandOnHover"
+      :teleport="teleport"
+      :inline="inline"
       mobile="fullwidth"
       @close="toggleSidebar()">
-      <a class="btn-close" aria-label="Close" @click="toggleSidebar()" />
+      <o-button
+        class="btn-close"
+        icon-left="times"
+        label="Close"
+        @click="toggleSidebar()" />
       <img
         width="80"
         src="https://avatars2.githubusercontent.com/u/66300512?s=200&v=4"
         alt="Lightweight UI components for Vue.js" />
       <h3>Example</h3>
     </o-sidebar>
-
-    <o-field grouped>
-      <o-switch v-model="isOverlay">Overlay</o-switch>
-      <o-switch v-model="isFullheight">Fullheight</o-switch>
-      <o-switch v-model="isFullwidth">Fullwidth</o-switch>
-      <o-switch v-model="isReduced">Reduce</o-switch>
-      <o-switch v-model="expandOnHover">Expand on hover</o-switch>
-      <o-switch v-model="right">right</o-switch>
-    </o-field>
-
-    <o-button @click="toggleSidebar()">Show</o-button>
   </section>
 </template>

package/src/components/Skeleton.vue

@@ -13,17 +13,25 @@ const animated = ref(true);
   <section>
     <h3>Base</h3>
 
-    <o-field grouped group-multiline>
-      <o-switch v-model="animated">Animated</o-switch>
-    </o-field>
-    20%
-    <o-skeleton width="20%" :animated="animated" />
-    40%
-    <o-skeleton width="40%" :animated="animated" />
-    80%
-    <o-skeleton width="80%" :animated="animated" />
-    Count 2
-    <o-skeleton :animated="animated" :count="2" />
+    <o-field grouped>
+      <o-switch v-model="animated" label="Animated" />
+    </o-field>
+
+    <o-field label="20%">
+      <o-skeleton width="20%" :animated="animated" />
+    </o-field>
+    <o-field label="40%">
+      <o-skeleton width="40%" :animated="animated" />
+    </o-field>
+    <o-field label="80%">
+      <o-skeleton width="80%" :animated="animated" />
+    </o-field>
+    <o-field label="100%">
+      <o-skeleton :animated="animated" />
+    </o-field>
+    <o-field label=" Count 2">
+      <o-skeleton :animated="animated" :count="2" />
+    </o-field>
   </section>
 
   <section>
@@ -34,24 +42,34 @@ const animated = ref(true);
 
   <section>
     <h3>Sizes</h3>
-    Small
-    <o-skeleton :animated="animated" size="small" />
-    Default
-    <o-skeleton :animated="animated" />
-    Medium
-    <o-skeleton :animated="animated" size="medium" />
-    Large
-    <o-skeleton :animated="animated" size="large" />
+
+    <o-field label="Small" grouped>
+      <o-skeleton size="small" />
+    </o-field>
+    <o-field label="Default" grouped>
+      <o-skeleton />
+    </o-field>
+    <o-field label="Medium" grouped>
+      <o-skeleton size="medium" />
+    </o-field>
+    <o-field label="Large" grouped>
+      <o-skeleton size="large" />
+    </o-field>
   </section>
 
   <section>
     <h3>Position</h3>
 
-    Left
-    <o-skeleton width="30%" position="left" :animated="animated" />
-    Center
-    <o-skeleton width="30%" position="centered" :animated="animated" />
-    Right
-    <o-skeleton width="30%" position="right" :animated="animated" />
+    <o-field label="Left" grouped>
+      <o-skeleton width="30%" position="left" />
+    </o-field>
+
+    <o-field label="Center" grouped>
+      <o-skeleton width="30%" position="centered" />
+    </o-field>
+
+    <o-field label="Right" grouped>
+      <o-skeleton width="30%" position="right" />
+    </o-field>
   </section>
 </template>

package/src/components/Slider.vue

@@ -131,10 +131,10 @@ const sliderType = computed(() => {
     <h3>Customize</h3>
     <o-field>
       <o-field>
-        <o-switch v-model="settings.rounded">Rounded</o-switch>
+        <o-switch v-model="settings.rounded" label="Rounded" />
       </o-field>
       <o-field>
-        <o-switch v-model="settings.tooltip">With Tooltip</o-switch>
+        <o-switch v-model="settings.tooltip" label="With Tooltip" />
       </o-field>
       <o-field label="Size">
         <o-select v-model="settings.size">

package/src/components/Steps.vue

@@ -32,27 +32,27 @@ const size = ref(null);
 
     <o-field grouped group-multiline>
       <o-field>
-        <o-switch v-model="showSocial"> Show Social step </o-switch>
+        <o-switch v-model="showSocial" label="Show Social step" />
       </o-field>
       <o-field>
-        <o-switch v-model="isAnimated"> Animated </o-switch>
+        <o-switch v-model="isAnimated" label="Animated" />
       </o-field>
       <o-field>
-        <o-switch v-model="isRounded"> Rounded </o-switch>
+        <o-switch v-model="isRounded" label="Rounded" />
       </o-field>
       <o-field>
-        <o-switch v-model="isVertical"> Vertical </o-switch>
+        <o-switch v-model="isVertical" label="Vertical" />
       </o-field>
       <o-field>
-        <o-switch v-model="isStepsClickable"> Clickable Marker </o-switch>
+        <o-switch v-model="isStepsClickable" label="Clickable Marker" />
       </o-field>
     </o-field>
     <o-field grouped group-multiline>
       <o-field>
-        <o-switch v-model="hasNavigation"> Navigation Buttons </o-switch>
+        <o-switch v-model="hasNavigation" label="Navigation Buttons" />
       </o-field>
       <o-field>
-        <o-switch v-model="customNavigation"> Custom Navigation </o-switch>
+        <o-switch v-model="customNavigation" label="Custom Navigation" />
       </o-field>
       <o-field>
         <o-switch v-model="isProfileSuccess">
@@ -137,18 +137,17 @@ const size = ref(null);
           icon-pack="fas"
           icon-left="backward"
           :disabled="previous.disabled"
-          @click.prevent="previous.action">
-          Previous
-        </o-button>
+          label="Previous"
+          @click.prevent="previous.action" />
+
         <o-button
           outlined
           variant="success"
           icon-pack="fas"
           icon-right="forward"
           :disabled="next.disabled"
-          @click.prevent="next.action">
-          Next
-        </o-button>
+          label="Next"
+          @click.prevent="next.action" />
       </template>
     </o-steps>
   </section>
@@ -195,7 +194,7 @@ const size = ref(null);
           <option value="large">Large</option>
         </o-select>
       </o-field>
-      <o-field label="Label position" label-position="on-border">
+      <o-field label="Label position">
         <o-select v-model="labelPosition">
           <option value="bottom">Bottom</option>
           <option value="right">Right</option>