feat: add bordered props to tabs, update tab slider stories

shuriken-ui · Dec 9, 2023 · 7911dc8 · 7911dc8
1 parent 7969142
commit 7911dc8
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 3 deletions.
diff --git a/src/plugins/components/tab-slider/tab-slider.doc.mdx b/src/plugins/components/tab-slider/tab-slider.doc.mdx
@@ -102,8 +102,13 @@ Tab sliders can have different alignment. Below is an example of the end alignme
 
 Tab sliders can have different sizes. Below is an example of the small size.
 
-<div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
-  <Story of={TabSliderStories.SizeSm} />
+<div className="space-y-4">
+  <div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
+    <Story of={TabSliderStories.SizeSm} />
+  </div>
+  <div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
+    <Story of={TabSliderStories.SizeSmFull} />
+  </div>
 </div>
 
 <br />

diff --git a/src/plugins/components/tab-slider/tab-slider.stories.ts b/src/plugins/components/tab-slider/tab-slider.stories.ts
@@ -230,6 +230,26 @@ export const SizeSm: Story = {
     style: 'max-width: 480px;',
   },
 }
+
+export const SizeSmFull: Story = {
+  name: 'Size: sm',
+  args: {
+    tabs: data,
+    size: 'sm',
+    rounded: 'full',
+    justify: 'start',
+    children: html`
+      <div>
+        <p class="font-sans text-muted-500 dark:text-muted-400">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant
+          sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum
+          abducam, times.
+        </p>
+      </div>
+    `,
+    style: 'max-width: 480px;',
+  },
+}
 // #endregion
 
 // #region Slots

diff --git a/src/plugins/components/tabs/index.ts b/src/plugins/components/tabs/index.ts
@@ -23,6 +23,14 @@ export default plugin.withOptions(
             [`@apply font-${config.inner.font.family} mb-${config.inner.margin.bottom} flex`]:
               {},
           },
+
+          //Tabs:bordered
+          [`&.${prefix}tabs-bordered`]: {
+            //Tabs:inner
+            [`.${prefix}tabs-inner`]: {
+              [`@apply border-b border-muted-200 dark:border-muted-800`]: {},
+            },
+          },
           //Tabs:item
           [`.${prefix}tab-item`]: {
             //Base

diff --git a/src/plugins/components/tabs/tabs.component.ts b/src/plugins/components/tabs/tabs.component.ts
@@ -12,6 +12,7 @@ export const Tabs = ({
   type = 'tabs',
   justify = 'start',
   hideLabel,
+  bordered = true,
   classes,
   children,
   ...attrs
@@ -21,6 +22,7 @@ export const Tabs = ({
       class=${[
         'nui-tabs',
         justify && variants.justify[justify],
+        type === 'tabs' && bordered && 'nui-tabs-bordered',
         classes?.wrapper,
       ]
         .filter(Boolean)
@@ -41,7 +43,6 @@ export const Tabs = ({
                 .join(' ')}
               tabindex="0"
             >
-              <!--Icon v-if="tab.icon" :name="tab.icon" class="me-1 block h-5 w-5" /-->
               <span
                 class=${[
                   'nui-tabs',

diff --git a/src/plugins/components/tabs/tabs.stories.ts b/src/plugins/components/tabs/tabs.stories.ts
@@ -20,6 +20,11 @@ const meta = {
       options: ['start', 'center', 'end'],
       defaultValue: 'start',
     },
+    bordered: {
+      name: 'Bordered',
+      control: { type: 'boolean' },
+      defaultValue: true,
+    },
   },
 } satisfies Meta<TabsAttrs>
 

diff --git a/src/plugins/components/tabs/tabs.types.ts b/src/plugins/components/tabs/tabs.types.ts
@@ -9,6 +9,7 @@ export interface TabsProps extends Record<string, unknown> {
   type?: 'tabs' | 'box'
   justify?: 'start' | 'center' | 'end'
   hideLabel?: boolean
+  bordered?: boolean
   classes?: {
     wrapper?: string | string[]
     inner?: string | string[]