@rocketui/vue 0.0.47 → 0.0.48

package/src/components/TabItem/RTabItem.vue

@@ -1,175 +0,0 @@
-<script setup lang="ts">
-import Icon from '../Icon/RIcon.vue';
-import { computed } from 'vue';
-import './tab-item.css';
-import { TabItemVariants, type TabItemVariant } from './common';
-export interface IProps {
-  /**
-   * Id of the tab item
-   * @type string | number
-   * @default ''
-   * @example
-   * <TabItem id="1" />
-   */
-  id: string | number;
-
-  /**
-   * Variant of the tab item
-   * @type TabItemVariant
-   * @default TabItemVariants.DEFAULT
-   * @example
-   * <TabItem variant="default" />
-   */
-  variant?: TabItemVariant;
-
-  /**
-   * Label of the tab item
-   * @type string
-   * @default ''
-   * @example
-   * <TabItem label="Label" />
-   */
-  label?: string;
-
-  /**
-   * prependIcon of the tab item
-   * @type string
-   * @default ''
-   * @example
-   * <TabItem prependIcon="prependIcon" />
-   */
-  prependIcon?: string;
-
-  /**
-   * appendIcon of the tab item
-   * @type string
-   * @default ''
-   * @example
-   * <TabItem appendIcon="appendIcon" />
-   */
-  appendIcon?: string;
-
-  /**
-   * Disabled state of the tab item
-   * @type ButtonHTMLAttributes['disabled']
-   * @default false
-   * @example
-   * <TabItem disabled />
-   */
-  disabled?: boolean;
-
-  /**
-   * Model value of the tab item
-   * @type string | number
-   * @default ''
-   * @example
-   * <TabItem v-model="model" />
-   */
-  modelValue?: string | number;
-
-  /**
-   * Tile state of the tab item
-   * @type boolean
-   * @default false
-   * @example
-   * <TabItem tile />
-   */
-  tile?: boolean;
-
-  /**
-   * Block state of the tab item
-   * @type boolean
-   * @default false
-   * @example
-   * <TabItem block />
-   */
-  block?: boolean;
-
-  /**
-   * Color of the tab item
-   * @type string
-   * @default ''
-   * @example
-   * <TabItem color="" />
-   */
-  color?: string;
-}
-const props = withDefaults(defineProps<IProps>(), {
-  label: '',
-  variant: TabItemVariants.DEFAULT,
-  prependIcon: '',
-  appendIcon: '',
-  disabled: false,
-  modelValue: '',
-  tile: false,
-  block: false,
-  color: '',
-});
-
-const emit = defineEmits(['update:modelValue', 'click:icon']);
-
-const classes = computed(() => {
-  return {
-    'tab-item': true,
-    [`tab-item--${props.variant}`]: true,
-    'tab-item--tile': props.tile,
-    'tab-item--block': props.block,
-  };
-});
-
-const style = computed(() => {
-  return {
-    color: props.color,
-  };
-});
-
-/**
- * @description Fires when the tab is clicked
- * @param {id} id - The id of the tab
- * @returns {void}
- */
-function handleTab(id: number | string): void {
-  emit('update:modelValue', id);
-}
-
-/**
- * @description Fires when the icon is clicked
- * @returns {void}
- */
-function handleIconClick(): void {
-  emit('click:icon');
-}
-</script>
-<template>
-  <button
-    :aria-disabled="props.disabled"
-    :aria-selected="props.modelValue === props.id"
-    :class="classes"
-    :style="style"
-    :disabled="props.disabled"
-    @click.stop="handleTab(props.id)"
-  >
-    <slot name="prepend">
-      <Icon
-        v-if="props.variant !== TabItemVariants.TEXT && props.prependIcon"
-        class="tab-item__prepend-icon"
-        :name="props.prependIcon"
-        :size="16"
-      />
-    </slot>
-
-    <span v-if="props.variant !== TabItemVariants.ICON" class="tab-item__label">
-      {{ props.label }}
-    </span>
-
-    <slot name="append">
-      <Icon
-        v-if="props.variant !== TabItemVariants.TEXT && props.appendIcon"
-        class="tab-item__append-icon"
-        :name="props.appendIcon"
-        :size="16"
-        @click.stop="handleIconClick"
-      />
-    </slot>
-  </button>
-</template>

package/src/components/TabItem/TabItem.mdx

@@ -1,95 +0,0 @@
-import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
-import * as TabItemStories from './TabItem.stories';
-
-<Meta of={TabItemStories} />
-
-# TabItem
-
-The TabItem component is a child component of the Tabs component. It is used to create a single tab within a set of tabs.
-
-- [Overview](#overview)
-
-- [Playground](#playground)
-
-- [Usage with props](#usage)
-
-- [Stories](#stories)
-
-- [Tips](#tips)
-
-## Overview <a id="overview" />
-
-The TabItem component is responsible for displaying the content associated with a specific tab. It accepts a variety of props, including variant, id, label, disabled, and active, which can be used to customize the appearance and behavior of the tab.
-
-💡 To use the TabItem component, it is first necessary to wrap it within a Tabs component. The TabItem component should then be passed a unique id prop, which is used to identify the tab and its associated content.
-
-<Canvas>
-  <Story of={TabItemStories.Overview} />
-</Canvas>
-
-### Playground
-
-> Changes you make in the controls will be reflected in the example above.
-
-<Controls
-  of={TabItemStories.Overview}
-  exclude={/^(select|custom-icon|update.*)$/}
-/>
-
-## Usage with props <a id="usage" />
-
-### variant (optional)
-
-The **variant** props allows to change the style of the tab item.
-
-### id (required)
-
-The **id** props is a unique identifier for the tab.
-
-### label (optional)
-
-The **label** props is the text to be displayed on the tab.
-
-### disabled (optional)
-
-The **disabled** props indicates whether the tab should be disabled or not.
-
-### active (optional)
-
-The **active** props indicated whether the tab should be set as active or not.
-
-## Stories <a id="stories" />
-
-### Default
-
-<Canvas>
-  <Story of={TabItemStories.Default} />
-</Canvas>
-
-### Icon Only
-
-<Canvas>
-  <Story of={TabItemStories.Icon} />
-</Canvas>
-
-### Text Only
-
-<Canvas>
-  <Story of={TabItemStories.Text} />
-</Canvas>
-
-### Tips <a id="tips" />
-
-💡 Make sure to provide a unique id prop for each TabItem, as this is used to identify the tab and its associated content.
-
-💡 Use the label prop to clearly label each tab, making it easy for users to understand the purpose of each tab.
-
-💡 Use the active prop to set the default active tab when the component is first rendered.
-
-💡 Use the disabled prop to disable tabs that are not currently in use or that the user should not have access to.
-
-💡 The variant prop can be used to change the visual style of the tab.
-
-💡 Use the onClick event to handle when the user clicks on a tab, if you want to perform some action in this event.
-
-💡 Using the TabItem component within Tabs component will give you a better accessibility, by providing the necessary ARIA roles and attributes.

package/src/components/TabItem/TabItem.spec.ts

@@ -1,29 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-
-import TabItem from './RTabItem.vue';
-
-describe('TabItem', () => {
-  it('renders properly', () => {
-    const wrapper = mount(TabItem, {
-      props: {
-        id: 'tab-1',
-        label: 'Tab 1',
-        icon: 'face',
-        active: true,
-      },
-    });
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('button').exists()).toBe(true);
-    expect(wrapper.find('button').html().includes('Tab 1'));
-    expect(
-      wrapper
-        .find('button')
-        .trigger('click')
-        .then(() => {
-          expect(wrapper.emitted('select')).toBeTruthy();
-        })
-    );
-  });
-});

package/src/components/TabItem/TabItem.stories.ts

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import TabItem from './RTabItem.vue';
-
-const DefaultArgTypes = {
-  variant: {
-    type: 'select',
-    options: ['default', 'icon', 'text'],
-  },
-};
-
-const DefaultArgs = {
-  id: 'tab-1',
-  label: 'Tab 1',
-  prependIcon: 'mdiHome',
-  appendIcon: '',
-  disabled: false,
-  variant: 'default',
-  tile: false,
-  block: false,
-  modelValue: '',
-};
-
-const TabItemStory = {
-  title: 'Components/TabItem',
-  component: TabItem,
-  setup(args: typeof TabItem) {
-    return { args };
-  },
-  template: `
-    <TabItem v-bind="args"/>
-  `,
-  args: DefaultArgs,
-  argTypes: {
-    ...DefaultArgTypes,
-    'onUpdate:modelValue': { action: 'update:modelValue' },
-    'onClick:icon': { action: 'onClick:icon' },
-  },
-} as Meta<typeof TabItem>;
-
-export default TabItemStory;
-
-type Story = StoryObj<typeof TabItemStory>;
-
-export const Overview: Story = {
-  args: {
-    variant: 'default',
-  },
-};
-
-export const Default: Story = {
-  args: {
-    variant: 'default',
-  },
-};
-
-export const Icon: Story = {
-  args: {
-    variant: 'icon',
-  },
-};
-
-export const Text: Story = {
-  args: {
-    variant: 'text',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
-
-export const Tile: Story = {
-  args: {
-    tile: true,
-  },
-};
-
-export const Block: Story = {
-  args: {
-    block: true,
-  },
-};
-
-export const Active: Story = {
-  args: {
-    modelValue: 'tab-1',
-  },
-};
-
-export const TwoIcons: Story = {
-  args: {
-    prependIcon: 'mdiHome',
-    appendIcon: 'mdiPlusCircle',
-  },
-};

package/src/components/TabItem/common.ts

@@ -1,6 +0,0 @@
-export type TabItemVariant = 'default' | 'text' | 'icon';
-export enum TabItemVariants {
-  DEFAULT = 'default',
-  TEXT = 'text',
-  ICON = 'icon',
-}

package/src/components/TabItem/tab-item.css

@@ -1,29 +0,0 @@
-@import '../../index.css';
-
-.tab-item {
-  @apply transition-all gap-2 min-w-fit py-3 px-6 bg-transparent flex justify-center items-center text-[var(--neutral-500)] text-sm font-medium cursor-pointer;
-
-  &:disabled {
-    @apply cursor-not-allowed bg-inherit opacity-50;
-  }
-
-  &[aria-selected='true'] {
-    @apply text-[var(--primary-500)] border-b-2 border-[var(--primary-500)];
-  }
-
-  &--text-only {
-    @apply block;
-  }
-
-  &--tile {
-    @apply border-none py-2.5 px-7  text-[var(--neutral-900)];
-
-    &[aria-selected='true'] {
-      @apply bg-white rounded-md shadow-sm text-[var(--neutral-900)];
-    }
-  }
-
-  &--block {
-    @apply w-full;
-  }
-}

package/src/components/Tabs/RTabs.vue

@@ -1,94 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import './tabs.css';
-import type { Tab } from './types';
-import TabItem from '../TabItem/RTabItem.vue';
-import { emit } from 'process';
-
-export interface IProps {
-  /**
-   * Tabs of the tabs
-   * @type Tab[]
-   * @default []
-   * @example
-   * <Tabs :tabs="[]" />
-   */
-  tabs?: Tab[];
-
-  /**
-   * Block state of the tabs
-   * @type boolean
-   * @default false
-   * @example
-   * <Tabs block />
-   */
-  block?: boolean;
-
-  /**
-   * Active tab of the tabs
-   * @type number | string
-   * @default tabs[0].id
-   * @example
-   * <Tabs v-model="activeTab" />
-   */
-  modelValue?: number | string;
-
-  /**
-   * Tile state of the tabs
-   * @type boolean
-   * @default false
-   * @example
-   * <Tabs tile />
-   */
-  tile?: boolean;
-}
-
-const props = withDefaults(defineProps<IProps>(), {
-  tabs: () => [],
-  block: false,
-  modelValue: '',
-  tile: false,
-});
-const emits = defineEmits(['update:modelValue', 'click:icon']);
-const activeTab = ref(props.modelValue || props.tabs[0].id);
-
-const tabsClasses = computed(() => {
-  return {
-    tabs: true,
-    'tabs--block': props.block,
-    'tabs--tile': props.tile,
-  };
-});
-
-watch(
-  () => activeTab.value,
-  () => {
-    emits('update:modelValue', activeTab.value);
-  }
-);
-
-const handleIconClick = () => {
-  emits('click:icon');
-};
-</script>
-<template>
-  <div :class="tabsClasses">
-    <slot>
-      <TabItem
-        v-for="(tab, index) in props.tabs"
-        :id="tab.id"
-        :key="index"
-        v-model="activeTab"
-        :active="index === activeTab"
-        :disabled="tab.disabled"
-        :prependIcon="tab.prependIcon"
-        :appendIcon="tab.appendIcon"
-        :label="tab.label"
-        :variant="tab.variant"
-        :tile="tile"
-        :block="block"
-        @click:icon="handleIconClick"
-      />
-    </slot>
-  </div>
-</template>

package/src/components/Tabs/Tabs.mdx

@@ -1,78 +0,0 @@
-import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
-import * as TabsStories from './Tabs.stories';
-
-<Meta of={TabsStories} />
-
-# Tabs
-
-Tabs are a user interface component that allows users to navigate through different sections of content. They are commonly used to organize and structure content in a clear and intuitive way.
-
-- [Overview](#overview)
-
-- [Playground](#playground)
-
-- [Usage](#usage)
-
-- [Stories](#stories)
-
-- [Tips](#tips)
-
-## Overview <a id="overview" />
-
-Tabs are typically composed of a series of tab buttons, each of which corresponds to a different section of content. When a user clicks on one of the tab buttons, the corresponding content is displayed. Tabs can be designed in a variety of styles and configurations, but they all serve the same basic purpose: to help users navigate through different sections of content.
-
-<Canvas>
-  <Story of={TabsStories.Overview} />
-</Canvas>
-
-### Playground <a id="playground" />
-
-> Changes you make in the controls will be reflected in the example above.
-
-<Controls of={TabsStories.Overview} exclude={/^(click|on.*)/} />
-
-## Usage <a id="usage" />
-
-To implement a Tabs component, you will need to define the tab buttons and their corresponding content sections. You can choose to include a scrollable prop which allows the user to scroll through the tabs if there are too many to fit on the screen. Additionally, you can choose to display the tabs with icon and text as a default, with icon only or text only.
-
-## Stories <a id="stories" />
-
-### Default
-
-<Canvas>
-  <Story of={TabsStories.Default} />
-</Canvas>
-
-### Icon Only
-
-<Canvas>
-  <Story of={TabsStories.Icon} />
-</Canvas>
-
-### Text Only
-
-<Canvas>
-  <Story of={TabsStories.Text} />
-</Canvas>
-
-### Tile
-
-<Canvas>
-  <Story of={TabsStories.Tile} />
-</Canvas>
-
-### Tips <a id="tips" />
-
-💡 Too many tabs can make the interface confusing and overwhelming for users. Try to keep the number of tabs to a maximum of 5-7, and use sub-navigation or dropdown menus to organize additional content.
-
-💡 The labels on the tab buttons should be short, descriptive, and easy to understand. Avoid using technical jargon or complex language.
-
-💡 Icons can be a great way to add visual interest and make it easier for users to quickly identify different tabs. However, make sure that the icons are meaningful and add context to the tab's label.
-
-💡 All tabs should have a consistent design to make it clear that they are related to each other. This includes the color, shape, size, and font of the tabs.
-
-💡 Use horizontal tabs for primary navigation and vertical tabs for secondary navigation or when space is limited. Use bottom tabs for mobile navigation.
-
-💡 Make it clear which tab is currently selected by using a different color, bold text, or an underline.
-
-💡 Make sure that tabs are accessible to keyboard users and screen readers. This means providing clear labels, proper focus management, and ARIA attributes.

package/src/components/Tabs/Tabs.spec.ts

@@ -1,28 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-
-import Tabs from './RTabs.vue';
-
-describe('Tabs', () => {
-  it('renders properly', () => {
-    const wrapper = mount(Tabs, {
-      props: {
-        tabs: [{ id: 0, label: 'Tab 1', icon: 'face' }],
-        scrollable: true,
-      },
-    });
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('.tabs-wrapper').exists()).toBe(true);
-    expect(wrapper.find('.tab-item').element.innerHTML.includes('Tab 1'));
-    expect(wrapper.find('.tab-item').element.innerHTML.includes('face'));
-    expect(
-      wrapper
-        .find('.tab-item')
-        .trigger('click')
-        .then(() => {
-          expect(wrapper.emitted('select')).toBeTruthy();
-        })
-    );
-  });
-});