Refactor tabs & examples

dolanske · Jan 19, 2025 · a162092 · a162092
1 parent db80711
commit a162092
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 19 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -8,8 +8,10 @@ import ExampleBreadcrumbs from './examples/ExampleBreadcrumbs.vue'
 import ExampleButtons from './examples/ExampleButtons.vue'
 import ExampleCards from './examples/ExampleCards.vue'
 import ExampleCheckboxes from './examples/ExampleCheckboxes.vue'
+import ExampleCopyClipboard from './examples/ExampleCopyClipboard.vue'
 import ExampleSkeletons from './examples/ExampleSkeletons.vue'
 import ExampleSpinners from './examples/ExampleSpinners.vue'
+import ExampleTabs from './examples/ExampleTabs.vue'
 </script>
 
 <template>
@@ -38,5 +40,9 @@ import ExampleSpinners from './examples/ExampleSpinners.vue'
     <ExampleCards />
     <Divider :size="64" />
     <ExampleCheckboxes />
+    <Divider :size="64" />
+    <ExampleCopyClipboard />
+    <Divider :size="64" />
+    <ExampleTabs />
   </div>
 </template>
diff --git a/src/components/CopyClipboard/CopyClipboard.vue b/src/components/CopyClipboard/CopyClipboard.vue
@@ -2,7 +2,8 @@
 import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
 import { Icon } from '@iconify/vue'
 import { useClipboard } from '@vueuse/core'
-import { onMounted, useSlots, useTemplateRef } from 'vue'
+import { computed, onMounted, useSlots, useTemplateRef } from 'vue'
+import { isNil } from '../../shared/helpers'
 import Flex from '../Flex/Flex.vue'
 import './copy-clipboard.scss'
 
@@ -36,12 +37,20 @@ const {
 })
 const slots = useSlots()
 
+const parsedConfirm = computed(() => {
+  if (isNil(confirm))
+    return false
+  if (confirm === '')
+    return true
+  else return confirm
+})
+
 onMounted(() => {
   if (!isSupported.value) {
     console.error('Clipboard API is not supported. This component will not work')
   }
 
-  if (confirm && slots.confirm) {
+  if (typeof parsedConfirm.value === 'string' && slots.confirm) {
     console.warn('You are using the \'confirm\' prop and slot. The slot will take precedence.')
   }
 })
@@ -67,10 +76,10 @@ const { floatingStyles } = useFloating(anchorRef, tooltipRef, {
   </div>
 
   <Transition name="fade-up" mode="in-out">
-    <div v-if="copied && (confirm || $slots.confirm)" ref="tooltip" class="vui-clipboard-tooltip" :style="floatingStyles">
+    <div v-if="copied && (!!parsedConfirm || $slots.confirm)" ref="tooltip" class="vui-clipboard-tooltip" :style="floatingStyles">
       <slot name="confirm">
-        <template v-if="confirm">
-          {{ confirm }}
+        <template v-if="typeof parsedConfirm === 'string'">
+          {{ parsedConfirm }}
         </template>
         <Flex v-else align-center justify-center>
           <Icon width="16" height="16" icon="ph:check-bold" />

diff --git a/src/components/CopyClipboard/copy-clipboard.scss b/src/components/CopyClipboard/copy-clipboard.scss
@@ -6,9 +6,9 @@
 .vui-clipboard-tooltip {
   padding: 6px 8px;
   border-radius: var(--border-radius-s);
-  background-color: var(--color-bg-raised);
+  background-color: var(--color-border);
   font-size: var(--font-size-s);
-  color: var(--color-text-light);
+  color: var(--color-text);
   box-shadow: var(--box-shadow);
 
   svg path {

diff --git a/src/components/Tabs/Tab.vue b/src/components/Tabs/Tab.vue
@@ -1,27 +1,25 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { computed } from 'vue'
 
 export interface TabProps {
   disabled?: boolean
-  id?: string
-  label: string
+  label?: string
   icon?: string
 }
-
 const props = defineProps<TabProps>()
-const id = computed(() => props.id ?? props.label)
 </script>
 
 <template>
   <button
     class="vui-tab"
-    :data-tab-id="id"
+    :data-tab-id="label"
     :class="{ disabled: props.disabled }"
     role="tab"
-    :name="id"
+    :name="label"
   >
-    <Icon v-if="props.icon" :icon="props.icon" />
-    {{ props.label }}
+    <slot>
+      <Icon v-if="props.icon" :icon="props.icon" />
+      {{ props.label }}
+    </slot>
   </button>
 </template>
diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue
@@ -74,8 +74,8 @@ onMounted(() => {
       :is="vnode"
       v-for="vnode of slots.default()"
       :key="vnode.props.id"
-      :class="{ active: vnode.props.id === active }"
-      @click="active = vnode.props.id"
+      :class="{ active: vnode.props.label === active }"
+      @click="active = vnode.props.label"
     />
     <template v-if="slots.end">
       <div v-if="!!!expand" class="flex-1" />

diff --git a/src/examples/ExampleAccordions.vue b/src/examples/ExampleAccordions.vue
@@ -41,7 +41,7 @@ import Grid from '../components/Grid/Grid.vue'
         <div class="mb-xl" />
 
         <strong class="block mb-s">Card group</strong>
-        <AccordionGroup single class="mb-xl">
+        <AccordionGroup single>
           <Accordion card label="First" class="mb-xs">
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum aliquam ad dicta nesciunt exercitationem? Quas vitae suscipit aliquam numquam incidunt corporis ullam, nihil dolores perferendis ipsa velit tempora accusantium cupiditate.
           </Accordion>

diff --git a/src/examples/ExampleCopyClipboard.vue b/src/examples/ExampleCopyClipboard.vue
@@ -0,0 +1,47 @@
+<script setup lang='ts'>
+import Button from '../components/Button/Button.vue'
+import CopyClipboard from '../components/CopyClipboard/CopyClipboard.vue'
+import Flex from '../components/Flex/Flex.vue'
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Clipboard copy
+    </h3>
+    <table>
+      <tbody>
+        <tr>
+          <th>Base</th>
+          <td>
+            <CopyClipboard text="Copy me!">
+              <p>Copy me!</p>
+            </CopyClipboard>
+          </td>
+        </tr>
+        <tr>
+          <th>Custom slot & confirmation</th>
+          <td>
+            <CopyClipboard text="Copy me!" confirm>
+              <Button>Copy me!</Button>
+            </CopyClipboard>
+          </td>
+        </tr>
+        <tr>
+          <th>Custom confirm popup</th>
+          <td>
+            <CopyClipboard text="Copy me!" confirm>
+              <Button>Copy me!</Button>
+              <template #confirm>
+                <Flex column gap="s" align-center>
+                  <strong>The dawg</strong>
+                  <img style="width:128px;border-radius:8px" src="https://i.imgur.com/jMxIs6p.png" alt="">
+                </Flex>
+              </template>
+            </CopyClipboard>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
diff --git a/src/examples/ExampleTabs.vue b/src/examples/ExampleTabs.vue
@@ -0,0 +1,119 @@
+<script setup lang='ts'>
+import { Icon } from '@iconify/vue'
+import { ref } from 'vue'
+import Button from '../components/Button/Button.vue'
+import Tab from '../components/Tabs/Tab.vue'
+import Tabs from '../components/Tabs/Tabs.vue'
+
+const activeTab = ref('Home')
+</script>
+
+<template>
+  <div class="mb-xxl">
+    <h3 class="mb-l">
+      Tabs
+    </h3>
+    <table>
+      <tbody>
+        <tr>
+          <th>Base</th>
+          <td>
+            <Tabs v-model="activeTab">
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+          </td>
+        </tr>
+        <tr>
+          <th>Filled</th>
+          <td>
+            <Tabs v-model="activeTab" variant="filled">
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+          </td>
+        </tr>
+        <tr class="w-100">
+          <th>Expanded</th>
+          <td class="w-100">
+            <Tabs v-model="activeTab" expand>
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+
+            <div class="mb-xl" />
+
+            <Tabs v-model="activeTab" expand variant="filled">
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+          </td>
+        </tr>
+        <tr>
+          <th>With slots</th>
+          <td class="w-100">
+            <Tabs v-model="activeTab">
+              <template #start>
+                <Button>
+                  <template #start>
+                    <Icon icon="ph:sidebar" />
+                  </template>
+                  Sidebar
+                </Button>
+              </template>
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+
+            <div class="mb-xl" />
+
+            <Tabs v-model="activeTab" variant="filled">
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+
+              <template #end>
+                <Button icon="ph:x" plain />
+              </template>
+            </Tabs>
+          </td>
+        </tr>
+        <tr>
+          <th>With slots expanded</th>
+          <td class="w-100">
+            <Tabs v-model="activeTab" expand>
+              <template #start>
+                <Button>
+                  <template #start>
+                    <Icon icon="ph:sidebar" />
+                  </template>
+                  Sidebar
+                </Button>
+              </template>
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+            </Tabs>
+
+            <div class="mb-xl" />
+
+            <Tabs v-model="activeTab" expand variant="filled">
+              <Tab label="Home" />
+              <Tab label="About" />
+              <Tab label="You" />
+
+              <template #end>
+                <Button icon="ph:x" plain />
+              </template>
+            </Tabs>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>