Merge pull request #5 from ajomuch92/feature/tooltip

- Fixing small bugs - Adding more slots for icons - Adding tooltip component
ajomuch92 · Feb 20, 2023 · 450f2bc · 450f2bc
2 parents 628019e + e05769c
commit 450f2bc
Show file tree

Hide file tree

Showing 25 changed files with 443 additions and 142 deletions.
diff --git a/README.md b/README.md
@@ -1,13 +1,13 @@
 # Vue Tailwind Elements
 A light library of components based on [Tailwind Elements](https://tailwind-elements.com/) and [Tailwind](https://tailwindcss.com/) for Vuejs.
-The documentation and examples are being building [here](https://vue-tailwind-elements.netlify.app/). Currently, there are more than 30 components. Best and new components and features are coming. Feel free to make a pull request.
+Currently, there are more than 40 components including custom directives and icon utility.
 
 ### New Features 💥
 * Fixing small bugs
 * Adding slot to dropdown
 * Adding social icons
 * Adding more props to some components (button, table)
-* Adding more components (Chip, ScrollToTop and Carousel)
+* Adding more components (Chip, ScrollToTop, Tooltip and Carousel)
 * Adding support to custom icons
 
 # Instalation
@@ -66,5 +66,9 @@ This library is created by [Aarón Montes](https://ajomuch92.site/ "Aarón Monte
 **Support me to improve and maintain this library**
 <a href="https://www.buymeacoffee.com/ajomuch92" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
 
+## Contribution
+
+Want to contribute? Great!. Open a [new PR here](https://github.com/ajomuch92/vue-tailwind-elements/pulls) or a [new issue here](https://github.com/ajomuch92/vue-tailwind-elements/issues)
+
 ## License
 MIT
diff --git a/dev/router/index.js b/dev/router/index.js
@@ -166,6 +166,16 @@ const router = new VueRouter({
           name: 'Carousel',
           component: () => import('../views/Carousel.vue')
         },
+        {
+          path: '/offcanvas',
+          name: 'Offcanvas',
+          component: () => import('../views/Offcanvas.vue')
+        },
+        {
+          path: '/tooltip',
+          name: 'Tooltip',
+          component: () => import('../views/Tooltip.vue')
+        },
       ]
     },
   ]

diff --git a/dev/views/BackToTop.vue b/dev/views/BackToTop.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="p-6 flex flex-col">
     <h1 class="text-3xl my-2">Scroll to Top Button</h1>
+    <te-checkbox v-model="withIcon">Custom icon</te-checkbox>
     <p v-for="(p, key) in lorem" class="my-10 text-justify text-xl px-5" :key="key">{{ p }}</p>
-    <te-scroll-to-top parent="#main" />
+    <te-scroll-to-top parent="#main">
+      <te-icon v-if="withIcon" class="text-2xl" name="chevron-double-up" slot="icon"/>
+    </te-scroll-to-top>
     <h1 class="text-lg">Example</h1>
     <p>Just put this code wherever you need it. <pre class="inline">trigger</pre> prop could be the id of any HTML element, if this is blank, is going to listen for document scroll event.</p>
     <code-view :code="code" />
@@ -16,6 +19,7 @@ export default {
   name: 'ScrollToTop',
   components: { CodeView },
   data: () => ({
+    withIcon: false,
     lorem: [
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum velit euismod in pellentesque massa placerat duis ultricies lacus. Id neque aliquam vestibulum morbi blandit cursus risus at ultrices. Pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies. Urna nec tincidunt praesent semper feugiat. Ultricies tristique nulla aliquet enim tortor at auctor urna. Auctor urna nunc id cursus metus aliquam. Facilisi cras fermentum odio eu feugiat pretium. Arcu risus quis varius quam quisque id diam. Accumsan tortor posuere ac ut consequat semper. Cursus euismod quis viverra nibh cras pulvinar.',
       'Felis eget velit aliquet sagittis id. Neque viverra justo nec ultrices dui. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Ultrices in iaculis nunc sed augue lacus. Aliquet enim tortor at auctor urna. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Vitae semper quis lectus nulla at volutpat diam. Urna condimentum mattis pellentesque id nibh tortor id aliquet. Sed enim ut sem viverra aliquet eget. Eu mi bibendum neque egestas congue quisque egestas diam. Arcu risus quis varius quam quisque id. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in. Justo nec ultrices dui sapien. Proin sagittis nisl rhoncus mattis rhoncus urna neque.',
@@ -24,7 +28,10 @@ export default {
       'Laoreet suspendisse interdum consectetur libero id. Sodales ut eu sem integer vitae. Tempus egestas sed sed risus pretium quam. Ultrices sagittis orci a scelerisque purus semper. Lorem dolor sed viverra ipsum nunc. Dui nunc mattis enim ut tellus. Sit amet mauris commodo quis imperdiet massa tincidunt nunc. Sit amet venenatis urna cursus eget. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Ac turpis egestas integer eget aliquet. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis. Senectus et netus et malesuada fames ac turpis. Diam maecenas sed enim ut sem. Enim nec dui nunc mattis enim ut. Est pellentesque elit ullamcorper dignissim cras. Pellentesque id nibh tortor id aliquet. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Diam maecenas ultricies mi eget mauris pharetra. Tortor pretium viverra suspendisse potenti nullam ac. Eu augue ut lectus arcu bibendum.',
       'Nisi vitae suscipit tellus mauris a diam maecenas. Imperdiet dui accumsan sit amet nulla facilisi. Mi proin sed libero enim. Pharetra convallis posuere morbi leo urna molestie at elementum eu. Convallis tellus id interdum velit laoreet. Ut lectus arcu bibendum at. Sodales ut etiam sit amet nisl purus in. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Interdum posuere lorem ipsum dolor sit amet. Massa tincidunt dui ut ornare lectus sit. Ac turpis egestas integer eget aliquet nibh praesent tristique. Ipsum a arcu cursus vitae congue mauris rhoncus aenean. Tempor commodo ullamcorper a lacus vestibulum sed arcu.'
     ],
-    code: '<te-scroll-to-top trigger="..." />'
+    code: `
+    <te-scroll-to-top trigger="..." >
+      <te-icon v-if="withIcon" class="text-2xl" name="..." slot="icon"/>
+    </te-scroll-to-top>`
   })
 }
 </script>

diff --git a/dev/views/Carousel.vue b/dev/views/Carousel.vue
@@ -2,7 +2,13 @@
   <div class="p-6">
     <h1 class="text-3xl my-2">Carousel</h1>
     <h1 class="text-lg">Example</h1>
-    <te-carousel :fade="fade" :loop="loop" :interval="interval">
+    <te-carousel :fade="fade" :loop="loop" :interval="interval" :show-indicators="indicators" :show-arrows="arrows">
+      <template slot="prev-icon">
+        <te-icon v-if="customIcons" name="chevron-double-left"/>
+      </template>
+      <template slot="next-icon">
+        <te-icon v-if="customIcons" name="chevron-double-right"/>
+      </template>
       <te-carousel-item v-for="(image, key) in images2" :key="key" :img-url="image" :title="`Slide ${key+1}`">
         <p class="text-base bg-red-200 p-3">
           This is Slot
@@ -12,6 +18,9 @@
     <div class="flex items-center mt-2">
       <te-checkbox v-model="fade" class="mx-2">Fade</te-checkbox>
       <te-checkbox v-model="loop" class="mx-2">Loop</te-checkbox>
+      <te-checkbox v-model="indicators" class="mx-2">Indicators</te-checkbox>
+      <te-checkbox v-model="arrows" class="mx-2">Arrows</te-checkbox>
+      <te-checkbox v-model="customIcons" class="mx-2">Custom Icons</te-checkbox>
       <label class="mr-1">Interval:</label>
       <te-input placeholder="Interval" v-model.number="interval"></te-input>
     </div>
@@ -31,14 +40,23 @@ export default {
     loop: false,
     interval: 1500,
     fade: false,
+    indicators: true,
+    arrows: true,
+    customIcons: true,
     images2: [
       'https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg',
       'https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg',
       'https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg'
     ],
     code: [
       `
-      <te-carousel :fade="fade" :loop="loop" :interval="interval">
+      <te-carousel :fade="fade" :loop="loop" :interval="interval" :show-indicators="indicators" :show-arrows="arrows">
+        <template slot="prev-icon">
+          <te-icon v-if="customIcons" name="chevron-double-left"/>
+        </template>
+        <template slot="next-icon">
+          <te-icon v-if="customIcons" name="chevron-double-right"/>
+        </template>
         <te-carousel-item v-for="(image, key) in images2" :key="key" :img-url="image" :title="...">
           <p class="text-base bg-red-200 p-3">
             This is Slot

diff --git a/dev/views/Chips.vue b/dev/views/Chips.vue
@@ -7,6 +7,10 @@
       <te-chip size="large">Hello World</te-chip>
       <te-chip size="medium" img-url="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg">Hello World</te-chip>
       <te-chip closable>Hello World</te-chip>
+      <te-chip closable>
+        Custom Icon
+        <te-icon class="text-xl" name="trash2" slot="icon" />
+      </te-chip>
     </div>
     <code-view :code="code" />
     <h1 class="text-lg my-1">Types</h1>
@@ -40,6 +44,10 @@ export default {
       <te-chip size="medium" img-url="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg">Hello World</te-chip>
       <te-chip closable>Hello World</te-chip>
       <te-chip closable type="primary" @close="...">Hello World</te-chip>
+      <te-chip closable>
+        Custom Icon
+        <te-icon class="text-xl" name="trash2" slot="icon" />
+      </te-chip>
     `,
     code2: `
       <te-chip size="small" type="normal">Hello World</te-chip>

diff --git a/dev/views/Date.vue b/dev/views/Date.vue
@@ -6,17 +6,22 @@
     <te-date-picker v-model="date1" :disabled="false" placeholder="Pick a date"/>
     <p>Value {{date1}}</p>
     <code-view :code="code[0]"/>
+    <h1 class="text-lg my-1">Custom Icon</h1>
+    <te-date-picker :disabled="false" placeholder="Pick a date">
+      <te-icon name="calendar" slot="icon" class="text-xl" />
+    </te-date-picker>
+    <code-view :code="code[1]"/>
     <h1 class="text-lg my-1">Not allowed dates</h1>
     <te-date-picker placeholder="Pick a date" :not-allowed-dates="notAllowedDates"/>
-    <code-view :code="code[1]"/>
+    <code-view :code="code[2]"/>
     <h1 class="text-lg my-1">Min and Max Date</h1>
     <te-date-picker placeholder="Pick a date" :min-date="new Date(2022, 0, 15)" :max-date="new Date(2022, 3, 16)"/>
-    <code-view :code="code[2]"/>
+    <code-view :code="code[3]"/>
     <h1 class="text-3xl my-2">Time Picker</h1>
     <p>Emit a timestamp value</p>
     <te-time-picker v-model="time1" :disabled="false"/>
     <p>Value {{time1}}</p>
-    <code-view :code="code[3]"/>
+    <code-view :code="code[4]"/>
   </div>
 </template>
 
@@ -32,6 +37,11 @@ export default {
     notAllowedDates: [new Date(2022, 0, 13), new Date(2022, 1, 1)],
     code: [
       '<te-date-picker v-model="date1" :disabled="false" placeholder="Pick a date"/>',
+      `
+      <te-date-picker :disabled="false" placeholder="Pick a date">
+        <te-icon name="calendar" slot="icon" class="text-xl" />
+      </te-date-picker>
+      `,
       '<te-date-picker placeholder="Pick a date" :not-allowed-dates="[new Date(2022, 0, 13), new Date(2022, 1, 1)]"/>',
       '<te-date-picker placeholder="Pick a date" :not-allowed-dates="[new Date(2022, 0, 13), new Date(2022, 1, 1)]"/>',
       '<te-time-picker v-model="time1" :disabled="false"/>'

diff --git a/dev/views/Dropdown.vue b/dev/views/Dropdown.vue
@@ -79,17 +79,27 @@
     </te-dropdown>
     <code-view :code="code[2]" />
     <h1 class="text-lg my-2">Custom Trigger Slot</h1>
-    <te-dropdown label="Dark" type="dark">
-      <template #trigger>
+    <te-dropdown>
+      <template #trigger="{active}">
         <span class="bg-red-50 px-2 py-1 cursor-pointer rounded-sm">
-          Custom active
+          Custom active <te-icon :name="active? 'chevron-up': 'chevron-down'" />
         </span>
       </template>
       <te-dropdown-item>Item 1</te-dropdown-item>
       <te-dropdown-item>Item 2</te-dropdown-item>
       <te-dropdown-item>Item 3</te-dropdown-item>
     </te-dropdown>
     <code-view :code="code[3]" />
+    <h1 class="text-lg my-2">Custom Icon</h1>
+    <te-dropdown label="Custom">
+      <template #icon="{active}">
+        <te-icon class="ml-3" :name="active? 'chevron-up': 'chevron-down'" />
+      </template>
+      <te-dropdown-item>Item 1</te-dropdown-item>
+      <te-dropdown-item>Item 2</te-dropdown-item>
+      <te-dropdown-item>Item 3</te-dropdown-item>
+    </te-dropdown>
+    <code-view :code="code[4]" />
   </div>
 </template>
 
@@ -178,16 +188,26 @@ export default {
       </te-dropdown>
       `,
       `
-      <te-dropdown label="Dark" type="dark">
-        <template #trigger>
+      <te-dropdown>
+        <template #trigger="{active}">
           <span class="bg-red-50 px-2 py-1 cursor-pointer rounded-sm">
-            Custom active
+            Custom active <te-icon :name="active? 'chevron-up': 'chevron-down'" />
           </span>
         </template>
         <te-dropdown-item>Item 1</te-dropdown-item>
         <te-dropdown-item>Item 2</te-dropdown-item>
         <te-dropdown-item>Item 3</te-dropdown-item>
       </te-dropdown>
+      `,
+      `
+      <te-dropdown label="Custom">
+        <template #icon="{active}">
+          <te-icon :name="active? 'chevron-up': 'chevron-down'" />
+        </template>
+        <te-dropdown-item>Item 1</te-dropdown-item>
+        <te-dropdown-item>Item 2</te-dropdown-item>
+        <te-dropdown-item>Item 3</te-dropdown-item>
+      </te-dropdown>
       `
     ]
   })

diff --git a/dev/views/Index.vue b/dev/views/Index.vue
@@ -15,7 +15,7 @@
             {{key}}
           </h2>
           <div class="flex flex-col space-y-1">
-            <a v-for="(option, i) in item" :key="i" :href="option.href">{{option.label}}</a>
+            <router-link v-for="(option, i) in item" :key="i" :to="option.href">{{option.label}}</router-link>
           </div>
         </div>
       </nav>
@@ -35,7 +35,7 @@
             {{key}}
           </h2>
           <div class="flex flex-col space-y-1">
-            <a v-for="(option, i) in item" :key="i" :href="option.href">{{option.label}}</a>
+            <router-link v-for="(option, i) in item" :key="i" :to="option.href">{{option.label}}</router-link>
           </div>
         </div>
       </nav>
@@ -128,10 +128,18 @@ export default {
           label: 'Notification',
           href: '/notification'
         },
+        {
+          label: 'Offcanvas',
+          href: '/offcanvas'
+        },
         {
           label: 'Toast',
           href: '/toast'
         },
+        {
+          label: 'Tooltip',
+          href: '/tooltip'
+        },
         {
           label: 'Icons',
           href: '/icons'

diff --git a/dev/views/Navbar.vue b/dev/views/Navbar.vue
@@ -12,7 +12,7 @@
       <te-navbar-item disabled>Disabled</te-navbar-item>
       <template slot="right">
         <a class="text-gray-500 hover:text-gray-700 focus:text-gray-700 mr-4" href="#">
-          <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="shopping-cart"
+          <svg aria-hidden="true" focusable="false" data-prefix="fas"
             class="w-4" role="img" xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 576 512">
             <path fill="currentColor"
@@ -33,7 +33,7 @@
       <te-navbar-item dark>Projects</te-navbar-item>
       <template slot="right">
         <a class="text-gray-500 hover:text-gray-700 focus:text-gray-700 mr-4" href="#">
-          <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="shopping-cart"
+          <svg aria-hidden="true" focusable="false" data-prefix="fas"
             class="w-4" role="img" xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 576 512">
             <path fill="currentColor"
@@ -55,7 +55,7 @@
       <te-navbar-item>Projects</te-navbar-item>
       <template slot="right">
         <a class="text-gray-500 hover:text-gray-700 focus:text-gray-700 mr-4" href="#">
-          <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="shopping-cart"
+          <svg aria-hidden="true" focusable="false" data-prefix="fas"
             class="w-4" role="img" xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 576 512">
             <path fill="currentColor"

diff --git a/dev/views/Offcanvas.vue b/dev/views/Offcanvas.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="p-6">
+    <h1 class="text-3xl my-2">Offcanvas</h1>
+    <h1 class="text-lg my-1">Left (by default)</h1>
+    <te-switch label="Open left" v-model="showLeft" />
+    <te-offcanvas v-model="showLeft">
+      Left Panel
+    </te-offcanvas>
+    <code-view :code="code[0]" />
+    <h1 class="text-lg my-1">Right</h1>
+    <te-switch label="Open right" v-model="showRight" />
+    <te-offcanvas v-model="showRight" position="right">
+      Right Panel
+    </te-offcanvas>
+    <code-view :code="code[1]" />
+  </div>
+</template>
+
+<script>
+import CodeView from '../components/CodeView.vue';
+
+export default {
+  components: { CodeView },
+  name: 'Offcanvas',
+  data: () => ({
+    showRight: false,
+    showLeft: false,
+    code: [
+      `
+      <te-offcanvas v-model="showLeft">
+        Left Panel
+      </te-offcanvas>
+      `,
+      `
+      <te-offcanvas v-model="showRight" position="right">
+        Right Panel
+      </te-offcanvas>
+      `,
+    ]
+  }),
+}
+</script>
+
+<style>
+
+</style>