@indielayer/ui 1.4.0 → 1.5.0

package/docs/pages/colors.vue

@@ -18,51 +18,49 @@ function copyPalette(val: any) {
   document.execCommand('copy')
   document.body.removeChild(el)
 
-  notifications.success('Copied to clipboard!')
+  notifications?.success('Copied to clipboard!')
 }
 </script>
 
 <template>
-  <div>
-    <section class="p-4 lg:p-8 max-w-4xl xl:max-w-7xl mx-auto">
-      <h1 class="text-4xl font-semibold">Colors</h1>
-      <h2 class="text-lg my-2 text-gray-500 dark:text-gray-400">Generate your own palettes, use Tailwind's or use color prop to generate at runtime</h2>
-      <x-divider class="mt-4 mb-8"/>
-
-      <h2 class="text-2xl mb-2">Generate your own palettes</h2>
-      <p class="mb-8 text-gray-500 dark:text-gray-400">Generate your own color palette like Tailwind. With the same properties as Tailwind color palettes.</p>
-      <p class="font-medium"></p>
-      <div class="mt-4">
-        <x-input v-model="color500" label="Change here the middle value (500) to generate a new palette"/>
-      </div>
-      <div class="grid grid-cols-11 my-4 text-sm">
-        <div v-for="shade in Object.keys(palette)" :key="shade" class="h-32 flex items-center justify-center" :style="`background-color: ${palette[shade]}`">{{ shade }}</div>
-      </div>
+  <h1 class="text-4xl font-semibold">Colors</h1>
+  <h2 class="text-lg my-2 text-gray-500 dark:text-gray-400">Generate your own palettes, use Tailwind's or use color prop to generate at runtime</h2>
+  <x-divider class="mt-4 mb-8"/>
+
+  <h2 class="text-2xl mb-2">Generate your own palettes</h2>
+  <p class="mb-8 text-gray-500 dark:text-gray-400">Generate your own color palette like Tailwind. With the same properties as Tailwind color palettes.</p>
+  <p class="font-medium"></p>
+  <div class="mt-4">
+    <x-input v-model="color500" label="Change here the middle value (500) to generate a new palette"/>
+  </div>
+  <div class="grid grid-cols-11 my-4 text-sm">
+    <div v-for="shade in Object.keys(palette)" :key="shade" class="h-32 flex items-center justify-center" :style="`background-color: ${palette[shade]}`">{{ shade }}</div>
+  </div>
 
-      <x-button icon-left="copy" :color="color500" block @click="copyPalette(palette)">Copy Palette</x-button>
+  <x-button icon-left="copy" :color="color500" block @click="copyPalette(palette)">Copy Palette</x-button>
 
-      <p class="text-gray-500 dark:text-gray-400 mt-4">This is the generated palette when you use the color directly on the color prop like &#x3C;x-button <b>color="#10B981"</b>&#x3E;Hello&#x3C;/x-button&#x3E;</p>
+  <p class="text-gray-500 dark:text-gray-400 mt-4">This is the generated palette when you use the color directly on the color prop like &#x3C;x-button <b>color="#10B981"</b>&#x3E;Hello&#x3C;/x-button&#x3E;</p>
 
-      <x-divider class="mt-4 mb-8"/>
+  <x-divider class="mt-4 mb-8"/>
 
-      <h2 class="text-2xl mb-2">Theme colors</h2>
-      <p class="mb-8 text-gray-500 dark:text-gray-400">Default theme color names and how to customize them.</p>
+  <h2 class="text-2xl mb-2">Theme colors</h2>
+  <p class="mb-8 text-gray-500 dark:text-gray-400">Default theme color names and how to customize them.</p>
 
-      <p>The default theme color names are
-        <b class="text-sky-500">primary</b>,
-        <b class="text-secondary-500">secondary</b>,
-        <b class="text-success-500">success</b>,
-        <b class="text-warning-500">warning</b> and
-        <b class="text-error-500">error</b>.
-        You can customize them or even add your own.
-      </p>
+  <p>The default theme color names are
+    <b class="text-primary-500">primary</b>,
+    <b class="text-secondary-500">secondary</b>,
+    <b class="text-success-500">success</b>,
+    <b class="text-warning-500">warning</b> and
+    <b class="text-error-500">error</b>.
+    You can customize them or even add your own.
+  </p>
 
-      <p class="my-4"></p>
+  <p class="my-4"></p>
 
-      <p class="my-2">Customize the color prop, e.g. <b>color="primary"</b> on the UI initialization.</p>
-      <code-snippet
-        lang="js"
-        :code="`import { createApp } from 'vue'
+  <p class="my-2">Customize the color prop, e.g. <b>color="primary"</b> on the UI initialization.</p>
+  <code-snippet
+    lang="js"
+    :code="`import { createApp } from 'vue'
 import UI, { colors } from '@indielayer/ui'
 
 const app = createApp(App)
@@ -78,14 +76,14 @@ app.use(UI, {
     },
   }
 })`"
-      />
+  />
 
-      <p class="my-4">Allow you to use the Tailwind classes like <b>text-primary-500</b>, <b>bg-primary-500</b>, etc:</p>
+  <p class="my-4">Allow you to use the Tailwind classes like <b>text-primary-500</b>, <b>bg-primary-500</b>, etc:</p>
 
-      <div>
-        <code-snippet
-          lang="js"
-          :code="`// tailwind.config.js
+  <div>
+    <code-snippet
+      lang="js"
+      :code="`// tailwind.config.js
 //...
 const colors = require('tailwindcss/colors')
 
@@ -103,23 +101,20 @@ module.exports = {
     },
   },
 }`"
-        />
-      </div>
+    />
+  </div>
 
-      <x-divider class="mt-4 mb-8"/>
+  <x-divider class="mt-4 mb-8"/>
 
-      <h2 class="text-2xl mb-2">Tailwind Colors</h2>
-      <p class="mb-8 text-gray-500 dark:text-gray-400">Default tailwind color palettes.</p>
+  <h2 class="text-2xl mb-2">Tailwind Colors</h2>
+  <p class="mb-8 text-gray-500 dark:text-gray-400">Default tailwind color palettes.</p>
 
-      <div class="grid gap-6 grid-cols-1 md:grid-cols-2 text-xs">
-        <div v-for="(pal, key) in TailwindColors" :key="key">
-          <div class="text-overline mb-2">{{ key }}</div>
-          <div class="grid grid-cols-11">
-            <div v-for="(color, palKey) in pal" :key="palKey" class="h-32 flex items-center justify-center" :style="`background-color: ${color}`">{{ palKey }}</div>
-          </div>
-        </div>
+  <div class="grid gap-6 grid-cols-1 md:grid-cols-2 text-xs">
+    <div v-for="(pal, key) in TailwindColors" :key="key">
+      <div class="text-overline mb-2">{{ key }}</div>
+      <div class="grid grid-cols-11">
+        <div v-for="(color, palKey) in pal" :key="palKey" class="h-32 flex items-center justify-center" :style="`background-color: ${color}`">{{ palKey }}</div>
       </div>
-    </section>
+    </div>
   </div>
-
 </template>

package/docs/pages/component/button/button-group.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="space-x-4">
     <x-button-group>
-      <x-button color="gray">Cancel</x-button>
+      <x-button >Cancel</x-button>
       <x-button color="primary">Save</x-button>
     </x-button-group>
     <x-button-group color="primary" light outlined>
@@ -9,10 +9,14 @@
       <x-button>middle</x-button>
       <x-button>right</x-button>
     </x-button-group>
+    <x-button-group color="primary" light outlined>
+      <x-button icon="edit"/>
+      <x-button icon="code"/>
+      <x-button icon="smile"/>
+    </x-button-group>
     <x-button-group color="indigo" outlined disabled>
       <x-button>left</x-button>
       <x-button>middle</x-button>
-      <x-button>right</x-button>
     </x-button-group>
   </div>
 </template>

package/docs/pages/component/button/size.vue

@@ -4,6 +4,6 @@
     <x-button size="sm">sm</x-button>
     <x-button>md</x-button>
     <x-button size="lg">lg</x-button>
-    <x-button size="xl" icon-right="plus" color="primary">Add new</x-button>
+    <x-button size="xl">xl</x-button>
   </div>
 </template>

package/docs/pages/component/carousel/usage.vue

@@ -1,10 +1,10 @@
 <template>
   <x-carousel class="!h-80 rounded-md" class-dots="!justify-start pl-10">
     <x-carousel-slide>
-      <img src="@/assets/images/photo2.jpeg" alt="" />
+      <img src="../../../assets/images/photo2.jpeg" alt="" />
     </x-carousel-slide>
     <x-carousel-slide>
-      <img src="@/assets/images/photo1.jpeg" alt="" />
+      <img src="../../../assets/images/photo1.jpeg" alt="" />
     </x-carousel-slide>
   </x-carousel>
 </template>

package/docs/pages/component/form/usage.vue

@@ -59,12 +59,12 @@ function onSubmit(isValid: string) {
       placeholder="Description"
     />
 
-    <x-form-group v-model="selected" label="Group of checkboxes" helper="Helper text" :rules="[rules.isRequired]">
+    <x-form-group v-model="selected" label="Group of checkboxes" :rules="[rules.isRequired]">
       <x-checkbox value="a" label="Lorem ipsum dolor" />
       <x-checkbox value="b" label="Second option" />
     </x-form-group>
 
-    <x-form-group v-model="checked" label="Group of radio buttons" helper="Helper text" :rules="[rules.isRequired]">
+    <x-form-group v-model="checked" label="Group of radio buttons" :rules="[rules.isRequired]">
       <x-radio name="inputName" value="a" label="Option A" />
       <x-radio name="inputName" value="b" label="Option B" />
     </x-form-group>
@@ -87,7 +87,7 @@ function onSubmit(isValid: string) {
     />
 
     <template #secondary-action>
-      <x-button color="gray">Cancel</x-button>
+      <x-button ghost>Cancel</x-button>
     </template>
     <template #primary-action>
       <x-button color="primary" type="submit">Submit</x-button>

package/docs/pages/component/formGroup/usage.vue

@@ -27,6 +27,7 @@ function onSubmit(isValid: string) {
       v-model="selected"
       label="Group of checkboxes"
       helper="Helper text"
+      tooltip="Tooltip text"
       :rules="[rules.isRequired]"
       vertical
     >

package/docs/pages/component/input/usage.vue

@@ -1,15 +1,14 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 const name = ref('')
 </script>
 
 <template>
-  <div class="flex">
-    <x-input
-      v-model="name"
-      label="Label here"
-      placeholder="Placeholder"
-      helper="Helper text here"
-    />
-  </div>
+  <x-input
+    v-model="name"
+    label="Label here"
+    placeholder="Placeholder"
+    helper="Helper text here"
+    tooltip="Tooltip here"
+  />
 </template>

package/docs/pages/component/modal/composed.vue

@@ -53,16 +53,17 @@ function onSubmit(isValid: boolean) {
       name="description"
       label="Description"
       placeholder="Description"
+      hide-footer
     />
 
     <!-- <template #tertiary-action>
       <x-button color="gray" size="lg">Tertiary</x-button>
     </template> -->
     <template #secondary-action>
-      <x-button color="gray" size="lg" tabindex="-1" @click="show = false">Cancel</x-button>
+      <x-button ghost tabindex="-1" @click="show = false">Cancel</x-button>
     </template>
     <template #primary-action>
-      <x-button color="primary" size="lg" type="submit">Confirm</x-button>
+      <x-button color="primary" type="submit">Confirm</x-button>
     </template>
   </x-modal>
 

package/docs/pages/component/modal/usage.vue

@@ -27,7 +27,14 @@ const show3 = ref(false)
     </template>
   </x-modal>
 
-  <x-modal v-model="show1" backdrop>
+  <x-modal
+    v-model="show1"
+    backdrop
+    :has-actions="false"
+    :has-header="false"
+    show-close
+    :dissmissable="false"
+  >
     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure praesentium non id dolores vitae. Nam ratione veritatis ab cumque voluptas porro illum, voluptate perferendis ducimus dolorem optio magni assumenda dolore! Doloremque facere aliquid facilis distinctio accusamus, dolorum eligendi consequuntur molestias sapiente non rem vero sed eos minus itaque sunt officiis iste ea repellendus possimus earum maiores? Quo laudantium fuga odit tenetur sint fugit deleniti dolores placeat, accusamus magni consectetur unde totam sunt labore dolor rem consequatur quaerat! Iure temporibus voluptatem cumque, dolore maiores rerum neque vero, iusto veritatis repellat eligendi amet! Molestiae cumque officiis eius harum iste, fuga corporis molestias.
   </x-modal>
 
@@ -39,14 +46,12 @@ const show3 = ref(false)
     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure praesentium non id dolores vitae. Nam ratione veritatis ab cumque voluptas porro illum, voluptate perferendis ducimus dolorem optio magni assumenda dolore! Doloremque facere aliquid facilis distinctio accusamus, dolorum eligendi consequuntur molestias sapiente non rem vero sed eos minus itaque sunt officiis iste ea repellendus possimus earum maiores? Quo laudantium fuga odit tenetur sint fugit deleniti dolores placeat, accusamus magni consectetur unde totam sunt labore dolor rem consequatur quaerat! Iure temporibus voluptatem cumque, dolore maiores rerum neque vero, iusto veritatis repellat eligendi amet! Molestiae cumque officiis eius harum iste, fuga corporis molestias.
 
     <template #actions>
-      <div class="text-right space-x-4">
-        <x-button>Cancel</x-button>
-        <x-button color="success">Confirm</x-button>
-      </div>
+      <x-button>Cancel</x-button>
+      <x-button color="success">Confirm</x-button>
     </template>
   </x-modal>
 
-  <x-modal v-model="show3" show-close>
+  <x-modal v-model="show3" show-close :has-actions="false">
     <template #header>
       Modal Title
     </template>

package/docs/pages/component/popover/usage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="space-x-2">
+  <div class="grid gap-4">
     <x-popover placement="top-start">
       <x-button>Click me to open popover</x-button>
       <template #content>
@@ -9,8 +9,8 @@
       </template>
     </x-popover>
 
-    <x-popover align="top" position="left">
-      <x-avatar class="cursor-pointer shadow" name="John Smith" />
+    <x-popover>
+      <x-avatar class="cursor-pointer shadow relative" name="John Smith" />
       <template #content>
         <x-popover-container class="p-2">
           another one

package/docs/pages/component/select/usage.vue

@@ -6,6 +6,7 @@
       placeholder="Placeholder"
       :options="options"
       helper="Helper text"
+      tooltip="Tooltip here"
       native
     />
     <x-select

package/docs/pages/component/tabs/usage.vue

@@ -62,7 +62,12 @@ const linkTab = ref(null)
       content e
     </x-tab>
   </x-tab-group>
-  <x-tab-group v-model="tab" class="pb-10" variant="block" grow>
+  <x-tab-group
+    v-model="tab"
+    class="pb-10"
+    variant="block"
+    grow
+  >
     <x-tab value="a" label="Tab A">
       content a
     </x-tab>

package/docs/pages/component/textarea/usage.vue

@@ -1,22 +1,19 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const multiline = ref('')
+</script>
+
 <template>
-  <div class="grid grid-cols-4 gap-4">
+  <div class="grid grid-cols-2 gap-4">
     <x-textarea
-      v-model="name"
+      v-model="multiline"
       label="Normal textarea"
       helper="Helper text"
+      resizable
       placeholder="Placeholder"
+      tooltip="Tooltip here"
     />
     <x-textarea v-model="multiline" label="Multiline adjust" adjust-to-text />
   </div>
 </template>
-
-<script>
-export default {
-  data() {
-    return {
-      name: '',
-      multiline: 'auto\nadjusted\nheight',
-    }
-  },
-}
-</script>

package/docs/pages/component/toggle/usage.vue

@@ -1,14 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const checked = ref(true)
+</script>
+
 <template>
-  <div class="grid grid-cols-4 gap-4">
-    <x-toggle v-model="checked" color="primary" label="Primary" />
-    <x-toggle v-model="checked" color="secondary" label="Secondary" />
-    <x-toggle v-model="checked" color="success" label="Success" />
-    <x-toggle v-model="checked" color="warning" label="Warning" />
+  <div class="grid grid-cols-2 gap-4">
+    <x-toggle v-model="checked" label="Primary" />
+    <x-toggle v-model="checked" color="sky" label="Sky" />
   </div>
 </template>
-
-<script>
-export default {
-  data() { return { checked: true } },
-}
-</script>

package/docs/pages/component/tooltip/index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { XTooltip } from '@indielayer/ui'
+import { XTooltip, XToggleTip } from '@indielayer/ui'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Tooltip'
 const description = 'Tooltips are used to display a message when hovering over an element.'
-const components = [XTooltip]
+const components = [XTooltip, XToggleTip]
 const demos = [{
   name: 'Usage',
   description: '',

package/docs/pages/component/tooltip/usage.vue

@@ -1,16 +1,12 @@
 <template>
   <x-tooltip>
-    <x-button>Hover me to see tooltip</x-button>
-    <template #tooltip>
-      Cool <span class="text-gray-300">Tooltip</span>
-    </template>
-  </x-tooltip>
-
-  <x-tooltip>
-    <x-button>Hover me to see tooltip</x-button>
+    <x-button>Hover me to see the tooltip</x-button>
     <template #tooltip>
       <div class="font-bold">Tooltip title</div>
       <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus corrupti maiores aut minima iusto nulla inventore ea illo commodi et.</div>
     </template>
   </x-tooltip>
+
+  <!-- tooltip with the info icon -->
+  <x-toggle-tip content="Lets go"/>
 </template>

package/docs/pages/icons.vue

@@ -1,68 +1,64 @@
 <template>
-  <div>
-    <section class="p-4 lg:p-8 max-w-4xl xl:max-w-7xl mx-auto">
-      <h2 class="text-4xl font-semibold">Icons</h2>
-      <h1 class="text-lg my-2 text-gray-500 dark:text-gray-400">Building your own SVG icon library from multiple open source libraries</h1>
-      <x-divider class="mt-4 mb-8"/>
+  <h2 class="text-4xl font-semibold">Icons</h2>
+  <h1 class="text-lg my-2 text-gray-500 dark:text-gray-400">Building your own SVG icon library from multiple open source libraries</h1>
+  <x-divider class="mt-4 mb-8"/>
 
-      <p class="text-xl mt-8 my-4">SVG Icon Libraries</p>
-      <div class="font-bold text-lg">
-        <ul>
-          <li><x-link
-            external
-            color="sky"
-            underline
-            href="https://icones.js.org/"
-            target="_blank"
-          >Icônes - All the libraries</x-link></li>
-          <li><x-link
-            external
-            color="sky"
-            underline
-            href="https://heroicons.com/"
-            target="_blank"
-          >Hero Icons (MIT)</x-link></li>
-          <li><x-link
-            external
-            color="sky"
-            underline
-            href="https://tabler-icons.io/"
-            target="_blank"
-          >Tabler Icons (MIT)</x-link></li>
-          <li><x-link
-            external
-            color="sky"
-            underline
-            href="https://feathericons.com/"
-            target="_blank"
-          >Feather Icons (MIT)</x-link></li>
-        </ul>
-      </div>
+  <p class="text-xl mt-8 my-4">SVG Icon Libraries</p>
+  <div class="font-bold text-lg">
+    <ul>
+      <li><x-link
+        external
+        color="sky"
+        underline
+        href="https://icones.js.org/"
+        target="_blank"
+      >Icônes - All the libraries</x-link></li>
+      <li><x-link
+        external
+        color="sky"
+        underline
+        href="https://heroicons.com/"
+        target="_blank"
+      >Hero Icons (MIT)</x-link></li>
+      <li><x-link
+        external
+        color="sky"
+        underline
+        href="https://tabler-icons.io/"
+        target="_blank"
+      >Tabler Icons (MIT)</x-link></li>
+      <li><x-link
+        external
+        color="sky"
+        underline
+        href="https://feathericons.com/"
+        target="_blank"
+      >Feather Icons (MIT)</x-link></li>
+    </ul>
+  </div>
 
-      <h3 class="text-2xl mt-8 mb-4">1. Create the icons file -> <strong>icons.js</strong></h3>
-      <code-snippet
-        lang="js"
-        :code="iconExample"
-      />
+  <h3 class="text-2xl mt-8 mb-4">1. Create the icons file -> <strong>icons.js</strong></h3>
+  <code-snippet
+    lang="js"
+    :code="iconExample"
+  />
 
-      <h3 class="text-2xl mt-8 mb-4">2. Add icons on UI install options -> <strong>main.js</strong></h3>
-      <code-snippet
-        lang="js"
-        :code="installExample"
-      />
+  <h3 class="text-2xl mt-8 mb-4">2. Add icons on UI install options -> <strong>main.js</strong></h3>
+  <code-snippet
+    lang="js"
+    :code="installExample"
+  />
 
-      <h3 class="text-2xl mt-8 mb-4">3. Add icons from open source libraries</h3>
-      <p class="mb-2 text-xl">Start adding the icons you need.</p>
-      <p class="mb-2">SVG wrapper optional, copy only the content part of the SVG:</p>
-      <p class="mb-4 border dark:border-gray-600 rounded-md p-4">&#x3C;svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; width=&#x22;24&#x22; height=&#x22;24&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22; stroke=&#x22;currentColor&#x22; stroke-width=&#x22;2&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; class=&#x22;feather feather-check&#x22;&#x3E;<strong>&#x3C;polyline points=&#x22;20 6 9 17 4 12&#x22;&#x3E;&#x3C;/polyline&#x3E;</strong>&#x3C;/svg&#x3E;</p>
-      <code-snippet lang="js" :code="iconExample1"/>
+  <h3 class="text-2xl mt-8 mb-4">3. Add icons from open source libraries</h3>
+  <p class="mb-2 text-xl">Start adding the icons you need.</p>
+  <p class="mb-2">SVG wrapper optional, copy only the content part of the SVG:</p>
+  <p class="mb-4 border dark:border-gray-600 rounded-md p-4">&#x3C;svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; width=&#x22;24&#x22; height=&#x22;24&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22; stroke=&#x22;currentColor&#x22; stroke-width=&#x22;2&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; class=&#x22;feather feather-check&#x22;&#x3E;<strong>&#x3C;polyline points=&#x22;20 6 9 17 4 12&#x22;&#x3E;&#x3C;/polyline&#x3E;</strong>&#x3C;/svg&#x3E;</p>
+  <code-snippet lang="js" :code="iconExample1"/>
 
-      <div class="my-4">
-        Icon "check" <x-icon icon="check"/>
-      </div>
-      <code-snippet lang="js" :code="iconExample2"/>
-    </section>
+  <div class="my-4">
+    Icon "check" <x-icon icon="check"/>
   </div>
+  <code-snippet lang="js" :code="iconExample2"/>
 </template>
 
 <script>