@rocketui/vue 0.0.47 → 0.0.48

package/src/components/Pagination/pagination.css

@@ -1,47 +0,0 @@
-@import '../../index.css';
-
-.r-pagination {
-  @apply flex items-center justify-between;
-
-  &__page-info {
-    @apply flex items-center gap-2;
-  }
-
-  &__paginator {
-    @apply flex items-center gap-2 whitespace-nowrap;
-
-    &__prev,
-    &__next {
-      @apply flex items-center justify-center bg-[var(--pagination-bg-color)]
-      cursor-pointer p-[var(--pagination-btn-padding)] rounded-[var(--pagination-border-radius)];
-      border: var(--pagination-border-width) var(--pagination-border-style)
-        var(--pagination-border-color);
-
-      &:hover {
-        @apply text-gray-300;
-      }
-
-      &:disabled {
-        @apply cursor-not-allowed;
-      }
-    }
-
-    &__input {
-      @apply text-center rounded-[var(--pagination-border-radius)] p-[var(--pagination-input-padding)] bg-[var(--pagination-bg-color)];
-      border: var(--pagination-border-width) var(--pagination-border-style)
-        var(--pagination-border-color);
-
-      &:focus {
-        @apply outline-none ring-2 ring-[var(--primary-500)] ring-inset;
-      }
-
-      &::-webkit-inner-spin-button,
-      &::-webkit-outer-spin-button {
-        opacity: 0;
-        pointer-events: none;
-        background: transparent;
-        display: none;
-      }
-    }
-  }
-}

package/src/components/Pagination/pagination.spec.ts

@@ -1,17 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-import Pagination from './RPagination.vue';
-
-describe('Pagination', () => {
-  it('should render correctly', () => {
-    const wrapper = mount(Pagination, {
-      props: {
-        page: 1,
-        totalPages: 10,
-      },
-    });
-
-    expect(wrapper.find('.r-pagination').exists()).toBe(true);
-  });
-});

package/src/components/ProgressBar/ProgressBar.stories.ts

@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-// @ts-ignore
-import Progressbar from './RProgressbar.vue';
-
-const ProgressbarStory = {
-  title: 'Components/Progressbar',
-  component: Progressbar,
-  setup: (args: typeof Progressbar) => ({
-    args,
-  }),
-  template: `<Progressbar v-bind="args" />`,
-  tags: ['autodocs'],
-  args: {
-    value: 50,
-    height: 8,
-  },
-  argTypes: {
-    value: {
-      control: {
-        type: 'range',
-        min: 0,
-        max: 100,
-        step: 1,
-      },
-    },
-  },
-} as Meta<typeof Progressbar>;
-
-export default ProgressbarStory;
-
-type Story = StoryObj<typeof ProgressbarStory>;
-
-export const Overview: Story = {};

package/src/components/ProgressBar/RProgressBar.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import './progressbar.css';
-export interface ProgressBarProps {
-  value: number;
-  height?: number;
-}
-const props = withDefaults(defineProps<ProgressBarProps>(), {
-  value: 0,
-  height: 8,
-});
-</script>
-<template>
-  <progress
-    class="r-progressbar"
-    role="progressbar"
-    :aria-valuemax="100"
-    :max="100"
-    :value="props.value"
-    :style="{ height: props.height + 'px' }"
-  />
-</template>

package/src/components/ProgressBar/progressbar.css

@@ -1,24 +0,0 @@
-@import '../../index.css';
-
-.r-progressbar {
-  @apply appearance-none border-none rounded-full overflow-hidden w-full;
-
-  &[value]::-webkit-progress-value {
-    background-color: var(--primary-500);
-    transition: inline-size 0.25s ease-out;
-  }
-
-  &[value]::-moz-progress-bar {
-    background-color: var(--primary-500);
-    transition: inline-size 0.25s ease-out;
-  }
-
-  &[value]::-ms-fill {
-    background-color: var(--primary-500);
-    transition: inline-size 0.25s ease-out;
-  }
-
-  &[value]::-webkit-progress-bar {
-    background-color: var(--primary-200);
-  }
-}

package/src/components/ProgressBar/progressbar.spec.ts

@@ -1,17 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-import RProgressbar from './RProgressbar.vue';
-
-describe('progressbar', () => {
-  it('should render correctly', () => {
-    const wrapper = mount(RProgressbar, {
-      props: {
-        value: 50,
-      },
-    });
-
-    expect(wrapper.find('.r-progressbar').exists()).toBe(true);
-    expect(wrapper.attributes('value')).toBe('50');
-  });
-});

package/src/components/Shared/Enums.ts

@@ -1 +0,0 @@
-export {};

package/src/components/Sidebar/RSidebar.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import './sidebar.css';
-
-export interface RSidebarProps {
-  modelValue: boolean;
-}
-
-const props = withDefaults(defineProps<RSidebarProps>(), {
-  modelValue: false,
-});
-
-const classes = computed(() => ({
-  sidebar: true,
-  'sidebar--open': props.modelValue,
-}));
-</script>
-<template>
-  <aside :class="classes">
-    <nav class="nav">
-      <slot />
-    </nav>
-    <div class="actions">
-      <slot name="actions" />
-    </div>
-  </aside>
-</template>

package/src/components/Sidebar/Sidebar.mdx

@@ -1,31 +0,0 @@
-import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
-
-import * as SidebarStories from './Sidebar.stories';
-
-<Meta of={SidebarStories} />
-
-# Sidebar
-
-- [Overview](#overview)
-
-- [Playground](#playground)
-
-- [Usage with props](#usage)
-
-- [Slots](#slots)
-
-- [Stories](#stories)
-
-- [Tips](#tips)
-
-## Overview <a id="overview" />
-
-<Canvas>
-  <Story of={SidebarStories.Collapsed} />
-</Canvas>
-
-## Playground <a id="playground" />
-
-> Changes you make in the controls will be reflected in the example above.
-
-<Controls of={SidebarStories.Collapsed} />

package/src/components/Sidebar/Sidebar.stories.ts

@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
-
-import Sidebar from './RSidebar.vue';
-
-const SidebarStory = {
-  title: 'Components/Sidebar',
-  component: Sidebar,
-  setup: (args: typeof Sidebar) => ({
-    args,
-  }),
-  template: `
-    <Sidebar v-bind="args">
-      <template v-slot:default>
-        test
-      </template>
-      <template v-slot:actions>
-        test
-      </template>
-    </Sidebar>
-  `,
-} as Meta<typeof Sidebar>;
-
-export default SidebarStory;
-
-type Story = StoryObj<typeof SidebarStory>;
-
-export const Collapsed: Story = {};
-
-export const Expanded: Story = {
-  args: {
-    modelValue: true,
-  },
-};

package/src/components/Sidebar/sidebar.css

@@ -1,18 +0,0 @@
-@import '../../index.css';
-
-.sidebar {
-  @apply flex flex-col items-center w-[var(--sidebar-collapsed-width)] h-screen p-[var(--sidebar-padding)] overflow-y-auto bg-[var(--sidebar-background)] border-r
-  transition-all ease-in duration-300;
-
-  &--open {
-    @apply w-[var(--sidebar-width)] items-start;
-  }
-
-  .nav {
-    @apply flex flex-col flex-1 space-y-6 w-full;
-  }
-
-  .actions {
-    @apply flex flex-col space-y-6 w-full;
-  }
-}

package/src/components/Sidebar/sidebar.spec.ts

@@ -1,33 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-
-import Sidebar from './RSidebar.vue';
-
-describe('Sidebar', () => {
-  it('renders correctly', () => {
-    const wrapper = mount(Sidebar, {
-      slots: {
-        default: '<span class="default">test default</span>',
-        actions: '<span class="actions">test actions</span>',
-      },
-    });
-    expect(wrapper.find('.default').text()).toBe('test default');
-    expect(wrapper.find('.actions').text()).toBe('test actions');
-  });
-
-  it('renders correctly when open', () => {
-    const wrapper = mount(Sidebar, {
-      props: {
-        modelValue: true,
-      },
-      slots: {
-        default: '<span class="default">test default</span>',
-        actions: '<span class="actions">test actions</span>',
-      },
-    });
-    expect(wrapper.find('.default').text()).toBe('test default');
-    expect(wrapper.find('.actions').text()).toBe('test actions');
-    expect(wrapper.find('.sidebar').classes()).toContain('sidebar--open');
-  });
-});

package/src/components/Snackbar/RSnackbar.vue

@@ -1,136 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch, type Ref } from 'vue';
-import Button from '../Button/RButton.vue';
-import Icon from '../Icon/RIcon.vue';
-import './snackbar.css';
-
-export interface IProps {
-  /**
-   * Show of the snackbar
-   * @type boolean
-   * @default false
-   * @example
-   * <Snackbar show />
-   */
-  modelValue: boolean;
-  /**
-   * Text of the snackbar
-   * @type string
-   * @default ''
-   * @example
-   * <Snackbar text="Snackbar" />
-   */
-  text: string;
-
-  /**
-   * Show close of the snackbar
-   * @type boolean
-   * @default false
-   * @example
-   * <Snackbar closable />
-   */
-  closable?: boolean;
-
-  /**
-   * Set the snackbar slide from left otherwise slide from right
-   * @type boolean
-   * @default false
-   * @example
-   * <Snackbar left />
-   */
-  left?: boolean;
-
-  /**
-   * Timeout of the snackbar. <br />
-   * If timeout is 0, the snackbar will not close automatically
-   * @type number
-   * @default 0
-   * @example
-   * <Snackbar timeout="1000" />
-   */
-  timeout?: number;
-
-  /**
-   * Variant of the snackbar
-   * @type 'success' | 'error' | 'warning' | 'info'
-   * @default 'info'
-   * @example
-   * <Snackbar variant="success" />
-   */
-  variant?: 'success' | 'error' | 'warning' | 'info';
-
-  /**
-   * Set the snackbar slide on top otherwise slide on bottom
-   * @type boolean
-   * @default false
-   * @example
-   * <Snackbar top />
-   */
-  top?: boolean;
-}
-const props = withDefaults(defineProps<IProps>(), {
-  text: '',
-  closable: false,
-  left: false,
-  modelValue: false,
-  timeout: 0,
-});
-
-const emit = defineEmits(['action', 'update:modelValue']);
-
-watch(
-  () => props.modelValue,
-  () => {
-    if (props.timeout > 0 && props.modelValue) {
-      setTimeout(() => {
-        emit('update:modelValue', false);
-      }, props.timeout);
-    }
-  },
-  {
-    immediate: true,
-  }
-);
-
-const classes = computed(() => {
-  return {
-    'r-snackbar': true,
-    [`r-snackbar--${props.variant}`]: true,
-    [props.left ? 'r-snackbar__left' : 'r-snackbar__right']: true,
-    [props.modelValue ? 'r-snackbar--shown' : 'r-snackbar--hidden']: true,
-    [props.top ? 'r-snackbar__top' : 'r-snackbar__bottom']: true,
-  };
-});
-
-const variantIcons = {
-  success: 'mdiCheckCircle',
-  error: 'mdiAlertCircle',
-  warning: 'mdiAlert',
-  info: 'mdiInformation',
-}[props.variant || 'info'];
-</script>
-<template>
-  <div :class="classes">
-    <slot>
-      <Icon
-        v-if="props.variant"
-        :name="variantIcons"
-        class="r-snackbar__icon"
-      />
-    </slot>
-
-    <div class="r-snackbar__text">{{ props.text }}</div>
-
-    <slot name="action"> </slot>
-
-    <div v-if="props.closable" class="r-snackbar__close">
-      <slot name="close">
-        <Icon
-          name="mdiClose"
-          :size="16"
-          @click.stop="$emit('update:modelValue', false)"
-        />
-      </slot>
-    </div>
-  </div>
-</template>

package/src/components/Snackbar/Snackbar.mdx

@@ -1,126 +0,0 @@
-import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
-
-import * as SnackbarStories from './Snackbar.stories';
-
-<Meta of={SnackbarStories} />
-
-# Snackbar
-
-A Snackbar is a brief message that appears at the bottom of the screen to provide feedback to the user.
-
-- [Overview](#overview)
-
-- [Playground](#playground)
-
-- [Usage with props](#usage)
-
-- [Stories](#stories)
-
-- [Tips](#tips)
-
-# Overview <a id="overview" />
-
-The Snackbar component is a short, temporary notification that appears at the bottom of the screen. It is typically used to provide feedback to the user after an action has been performed, such as a successful submission of a form or completion of a task
-
-It is important to use the Snackbar component sparingly, as it can be disruptive if used excessively. It is generally recommended to use it only for important or time-sensitive notifications.
-
-<Canvas>
-  <Story of={SnackbarStories.Overview} />
-</Canvas>
-
-### Playground <a id="playground" />
-
-> Changes you make in the controls will be reflected in the example above.
-
-<Controls
-  of={SnackbarStories.Overview}
-  exclude={/^(click.*|action|content|close|on.*)$/}
-/>
-
-## Usage <a id="usage" />
-
-### text (required)
-
-The text to be displayed in the Snackbar. This prop is required and should be a string.
-
-### showAction (optional)
-
-Whether to display an action button in the Snackbar. If set to true, an action button will be displayed in the Snackbar. If set to false, the action button will not be displayed.
-
-### showClose (optional)
-
-Whether to display a close button in the Snackbar. If set to true, a close button will be displayed in the Snackbar that allows the user to manually close it. If set to false, the close button will not be displayed.
-
-### left (optional)
-
-Whether to align the Snackbar to the left or right side of the screen. If set to true, the Snackbar will be aligned to the left side of the screen. If set to false, the Snackbar will be aligned to the right side.
-
-### show (optional)
-
-Whether to show or hide the Snackbar. If set to true, the Snackbar will be displayed. If set to false, the Snackbar will be hidden.
-
-### timeout (optional)
-
-The amount of time in milliseconds that the Snackbar will be displayed before it is automatically hidden. This prop should be a number representing the number of milliseconds that the Snackbar will be displayed before it is automatically hidden.
-
-## Stories <a id="stories" />
-
-### OnlyText
-
-<Canvas>
-  <Story of={SnackbarStories.OnlyText} />
-</Canvas>
-
-### With Action
-
-<Canvas>
-  <Story of={SnackbarStories.WithAction} />
-</Canvas>
-
-### With Action and Close Button
-
-<Canvas>
-  <Story of={SnackbarStories.WithActionAndCloseButton} />
-</Canvas>
-
-### With Close Button
-
-<Canvas>
-  <Story of={SnackbarStories.WithCloseButton} />
-</Canvas>
-
-### Long Text
-
-<Canvas>
-  <Story of={SnackbarStories.LongText} />
-</Canvas>
-
-### Long Text with Action
-
-<Canvas>
-  <Story of={SnackbarStories.LongTextWithAction} />
-</Canvas>
-
-### Long Text with Action and Close Button
-
-<Canvas>
-  <Story of={SnackbarStories.LongTextWithActionAndCloseButton} />
-</Canvas>
-
-### With Timeout
-
-<Canvas>
-  <Story of={SnackbarStories.WithTimeout} />
-</Canvas>
-
-### Tips <a id="tips" />
-
-💡 The Snackbar is a brief, temporary notification that should not be used excessively. Overusing the Snackbar can be disruptive and may cause users to ignore it.
-
-💡 The Snackbar is best used for notifications that are important or time-sensitive. For example, if a form submission is successful or a task has been completed, the Snackbar can be used to provide feedback to the user.
-
-💡 The Snackbar component has several props that can be used to customize its appearance and behavior. For example, you can use the left prop to align the Snackbar to the left or right side of the screen, and the timeout prop to control the amount of time it is displayed.
-
-💡 The Snackbar should be tested on different screen sizes to ensure that it is displayed correctly and does not overlap with other content.
-
-💡 The Snackbar is not the best choice for displaying critical errors or warnings. For these types of notifications, it is generally better to use a modal or an alert.

package/src/components/Snackbar/Snackbar.stories.ts

@@ -1,93 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import Snackbar from './RSnackbar.vue';
-
-const DefaultArgs = {
-  text: 'Single-line snackbar',
-  actionText: '',
-  showAction: false,
-  showClose: false,
-  left: false,
-  show: true,
-  timeout: 0,
-};
-
-const SnackbarStory = {
-  component: Snackbar,
-  setup: (args: typeof Snackbar) => ({
-    args,
-  }),
-  template: `
-    <div style="position:relative; min-height: 30vh; width: 100%;">
-      <Snackbar 
-        v-bind="args" 
-      />
-    </div>
-  `,
-  args: DefaultArgs,
-  argTypes: {
-    onAction: { action: 'action' },
-    onClose: { action: 'close' },
-  },
-} as Meta<typeof Snackbar>;
-
-export default SnackbarStory;
-
-type Story = StoryObj<typeof SnackbarStory>;
-
-export const Overview: Story = {};
-
-export const OnlyText: Story = {};
-
-export const WithAction: Story = {
-  args: {
-    actionText: 'Action',
-    showAction: true,
-    text: 'Single-line snackbar with action',
-  },
-};
-
-export const WithActionAndCloseButton: Story = {
-  args: {
-    actionText: 'Action',
-    showAction: true,
-    showClose: true,
-    text: 'Snackbar with action and close',
-  },
-};
-
-export const WithCloseButton: Story = {
-  args: {
-    showClose: true,
-    text: 'Single-line snackbar with close',
-  },
-};
-
-export const LongText: Story = {
-  args: {
-    text: 'This is a very long snackbar message that will not fit on one line. It will wrap to multiple lines and the snackbar will grow in height.',
-  },
-};
-
-export const LongTextWithAction: Story = {
-  args: {
-    actionText: 'Action',
-    showAction: true,
-    text: 'This is a very long snackbar message that will not fit on one line. It will wrap to multiple lines and the snackbar will grow in height.',
-  },
-};
-
-export const LongTextWithActionAndCloseButton: Story = {
-  args: {
-    actionText: 'Action',
-    showAction: true,
-    showClose: true,
-    text: 'This is a very long snackbar message that will not fit on one line. It will wrap to multiple lines and the snackbar will grow in height.',
-  },
-};
-
-export const WithTimeout: Story = {
-  args: {
-    timeout: 5000,
-    text: 'Snackbar with timeout',
-  },
-};