@rocketui/vue 0.0.47 → 0.0.49

package/src/components/Tabs/Tabs.stories.ts

@@ -1,191 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import Tabs from './RTabs.vue';
-
-const DefaultArgs = {
-  tabs: [
-    { id: 0, label: 'Tab 1', prependIcon: 'mdiHome' },
-    { id: 1, label: 'Tab 2', prependIcon: 'mdiPlusCircle', disabled: true },
-    { id: 2, label: 'Tab 3', prependIcon: 'mdiHeart' },
-    { id: 3, label: 'Tab 4', prependIcon: 'mdiFaceMan' },
-    { id: 4, label: 'Tab 5', prependIcon: 'mdiCog', appendIcon: 'mdiClose' },
-  ],
-  block: false,
-  activeTab: 0,
-  tile: false,
-};
-
-const TabsStory = {
-  title: 'Components/Tabs',
-  component: Tabs,
-  setup(args: typeof Tabs) {
-    return { args };
-  },
-  template: `
-    <Tabs v-bind="args" >
-      <template #tab={activeTab}>
-        <h1>Tab {{activeTab + 1}}</h1>
-        <p>Active tab {{activeTab}}</p>
-      </template>
-    </Tabs>
-  `,
-  args: { ...DefaultArgs },
-  argTypes: {
-    'onUpdate:modelValue': { action: 'onUpdate:modelValue' },
-  },
-} as Meta<typeof Tabs>;
-
-export default TabsStory;
-
-type Story = StoryObj<typeof TabsStory>;
-
-export const Overview: Story = {};
-
-export const Default: Story = {};
-
-export const Icon: Story = {
-  args: {
-    tabs: [
-      {
-        id: 0,
-        label: 'Tab 1',
-        prependIcon: 'mdiHome',
-        variant: 'icon',
-      },
-      {
-        id: 1,
-        label: 'Tab 2',
-        prependIcon: 'mdiPlusCircle',
-        disabled: true,
-        variant: 'icon',
-      },
-      {
-        id: 2,
-        label: 'Tab 3',
-        prependIcon: 'mdiHeart',
-        variant: 'icon',
-      },
-      {
-        id: 3,
-        label: 'Tab 4',
-        prependIcon: 'mdiFaceMan',
-        variant: 'icon',
-      },
-      {
-        id: 4,
-        label: 'Tab 5',
-        prependIcon: 'mdiCog',
-        variant: 'icon',
-      },
-      {
-        id: 5,
-        label: 'Tab 6',
-        prependIcon: 'mdiMagnify',
-        variant: 'icon',
-      },
-      {
-        id: 6,
-        label: 'Tab 7',
-        prependIcon: 'mdiAccount',
-        variant: 'icon',
-      },
-      {
-        id: 7,
-        label: 'Tab 8',
-        prependIcon: 'mdiAccountGroup',
-        variant: 'icon',
-      },
-      {
-        id: 8,
-        label: 'Tab 9',
-        prependIcon: 'mdiAccountMultiple',
-        variant: 'icon',
-      },
-      {
-        id: 9,
-        label: 'Tab 10',
-        prependIcon: 'mdiAccountMultiplePlus',
-        variant: 'icon',
-      },
-    ],
-  },
-};
-
-export const Text: Story = {
-  args: {
-    tabs: [
-      {
-        id: 0,
-        label: 'Tab 1',
-        prependIcon: 'mdiHome',
-        variant: 'text',
-      },
-      {
-        id: 1,
-        label: 'Tab 2',
-        prependIcon: 'mdiPlusCircle',
-        disabled: true,
-        variant: 'text',
-      },
-      {
-        id: 2,
-        label: 'Tab 3',
-        prependIcon: 'mdiHeart',
-        variant: 'text',
-      },
-      {
-        id: 3,
-        label: 'Tab 4',
-        prependIcon: 'mdiFaceMan',
-        variant: 'text',
-      },
-      {
-        id: 4,
-        label: 'Tab 5',
-        prependIcon: 'mdiCog',
-        variant: 'text',
-      },
-      {
-        id: 5,
-        label: 'Tab 6',
-        prependIcon: 'mdiMagnify',
-        variant: 'text',
-      },
-      {
-        id: 6,
-        label: 'Tab 7',
-        prependIcon: 'mdiAccount',
-        variant: 'text',
-      },
-      {
-        id: 7,
-        label: 'Tab 8',
-        prependIcon: 'mdiAccountGroup',
-        variant: 'text',
-      },
-      {
-        id: 8,
-        label: 'Tab 9',
-        prependIcon: 'mdiAccountMultiple',
-        variant: 'text',
-      },
-      {
-        id: 9,
-        label: 'Tab 10',
-        prependIcon: 'mdiAccountMultiplePlus',
-        variant: 'text',
-      },
-    ],
-  },
-};
-
-export const Tile: Story = {
-  args: {
-    tile: true,
-    tabs: [
-      { id: 1, label: 'Section', prependIcon: 'mdiHeart' },
-      { id: 2, label: 'Section', prependIcon: 'mdiFaceMan' },
-      { id: 3, label: 'Section', prependIcon: 'mdiCog' },
-    ],
-    modelValue: 2,
-  },
-};

package/src/components/Tabs/tabs.css

@@ -1,13 +0,0 @@
-@tailwind components;
-
-.tabs {
-  @apply w-fit flex transition-all;
-
-  &--tile {
-    @apply bg-slate-100 rounded-md p-1;
-  }
-
-  &--block {
-    @apply w-full;
-  }
-}

package/src/components/Tabs/types.ts

@@ -1,11 +0,0 @@
-import type { TabItemVariant } from '../TabItem/common';
-
-export type Tab = {
-  id: string | number;
-  variant?: TabItemVariant;
-  label?: string;
-  prependIcon?: string;
-  appendIcon?: string;
-  disabled?: boolean;
-  active?: boolean;
-};

package/src/components/TextArea/RTextArea.vue

@@ -1,142 +0,0 @@
-<script setup lang="ts">
-import Label from '../Label/RLabel.vue';
-import './textarea.css';
-import {
-  defineProps,
-  defineEmits,
-  reactive,
-  watch,
-  type HTMLAttributes,
-  type InputHTMLAttributes,
-  type LabelHTMLAttributes,
-} from 'vue';
-export interface IProps {
-  /**
-   * id of the textarea
-   * @type HTMLAttributes['id']
-   * @default ''
-   * @example
-   * <TextArea id="textarea" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
-   */
-  id: HTMLAttributes['id'];
-
-  /**
-   * Input value
-   * @type InputHTMLAttributes['value'];
-   * @default ''
-   * @example
-   * <TextArea modelValue="Hello" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
-   */
-  modelValue?: InputHTMLAttributes['value'];
-
-  /**
-   * label of the textarea
-   * @type LabelHTMLAttributes['label']
-   * @default ''
-   * @example
-   * <TextArea label="TextArea" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
-   */
-  label?: LabelHTMLAttributes['for'];
-
-  /**
-   * Placeholder text
-   * @type InputHTMLAttributes['placeholder'];
-   * @default ''
-   * @example
-   * <TextArea placeholder="Placeholder" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
-   */
-  placeholder?: InputHTMLAttributes['placeholder'];
-
-  /**
-   * Disabled state
-   * @type InputHTMLAttributes['disabled'];
-   * @default false
-   * @example
-   * <TextArea disabled />
-   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled
-   */
-  disabled?: InputHTMLAttributes['disabled'];
-
-  /**
-   * Hint text
-   * @type string
-   * @default 'This is a hint'
-   * @example
-   * <TextArea hint="This is a hint" />
-   */
-  hint?: string;
-
-  /**
-   * Error message
-   * @type string
-   * @default ''
-   * @example
-   * <TextArea errorMsg="This is an error" />
-   */
-  errorMsg?: string;
-}
-
-const props = withDefaults(defineProps<IProps>(), {
-  id: '',
-  errorMsg: '',
-  disabled: false,
-  placeholder: '',
-  modelValue: '',
-  label: '',
-  hint: 'This is a hint',
-});
-
-const state = reactive({
-  value: '',
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-function onInput(e: Event) {
-  emit('update:modelValue', (e.target as HTMLInputElement).value);
-}
-
-watch(
-  () => props.modelValue,
-  (value) => {
-    state.value = value;
-  },
-  {
-    immediate: true,
-  }
-);
-</script>
-
-<template>
-  <div class="container">
-    <Label
-      v-if="props.label"
-      id="textarea"
-      class="textarea__label"
-      for="textarea"
-      :text="props.label"
-    />
-    <textarea
-      :id="props.id"
-      class="textarea"
-      :class="{
-        'textarea--error': props.errorMsg,
-        'textarea--disabled': props.disabled,
-      }"
-      :disabled="props.disabled"
-      :placeholder="props.placeholder"
-      :value="state.value"
-      @input="onInput"
-    />
-    <p v-if="props.errorMsg" class="textarea__error">
-      {{ props.errorMsg }}
-    </p>
-    <p v-else class="textarea__hint">
-      {{ props.hint }}
-    </p>
-  </div>
-</template>

package/src/components/TextArea/TextArea.mdx

@@ -1,108 +0,0 @@
-import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
-import * as TextAreaStories from './TextArea.stories';
-
-<Meta of={TextAreaStories} />
-
-# TextArea
-
-The TextArea component is a UI element that allows users to input and edit multiple lines of text.
-
-- [Overview](#overview)
-
-- [Playground](#playground)
-
-- [Usage with props](#usage)
-
-- [Stories](#stories)
-
-- [Tips](#tips)
-
-## Overview <a id="overview" />
-
-This component provides a text area for user input and includes several optional props for customization such as error message, disabled state, placeholder text, default value, label, and hint.
-
-<Canvas>
-  <Story of={TextAreaStories.Overview} />
-</Canvas>
-
-### Playground <a id="playground" />
-
-> Changes you make in the controls will be reflected in the example above.
-
-<Controls of={TextAreaStories.Overview} exclude={/^(click|tab|on.*)/} />
-
-## Usage <a id="usage" />
-
-### id (required)
-
-The **id** prop is a unique identifier for the TextArea component.
-
-### errorMsg (optional)
-
-The **errorMsg** prop is the error message to display when input is invalid.
-
-### disabled (optional)
-
-The **disabled** props is a boolean value that sets the component to a disabled state.
-
-### placeholder (optional)
-
-The **placeholder** prop is the placeholder text to display when the text area is empty.
-
-### modelValue (optional)
-
-The **modelValue** props is the default value for the text area.
-
-### label (optional)
-
-The **label** prop is the text to display as a label for the text area.
-
-### hint (optional)
-
-The **hint** prop is for additional information or context for the text area.
-
-## Stories <a id="stories" />
-
-### Default
-
-<Canvas>
-  <Story of={TextAreaStories.Default} />
-</Canvas>
-
-### Disabled
-
-<Canvas>
-  <Story of={TextAreaStories.Disabled} />
-</Canvas>
-
-### Hint
-
-<Canvas>
-  <Story of={TextAreaStories.Hint} />
-</Canvas>
-
-### Error
-
-<Canvas>
-  <Story of={TextAreaStories.Error} />
-</Canvas>
-
-### Tips <a id="tips" />
-
-💡 Always include the 'id' prop: The 'id' prop is required for the TextArea component to function properly. Make sure to always include it and ensure that it is unique for each instance of the component.
-
-💡 The 'label' prop is used to provide a text description of the TextArea component for accessibility purposes. This is especially important for users who rely on screen readers to navigate your application.
-
-💡 The 'placeholder' prop allows you to provide users with an example or a hint of the kind of input you expect. This can be especially helpful for users who may not be sure what to type in the TextArea.
-
-💡 The 'modelValue' prop allows you to set a default value for the TextArea component. This can be useful if you want to pre-populate the TextArea with a value or if you want to show the last input a user made.
-
-💡 The 'errorMsg' prop allows you to display an error message when the input is invalid. This can be useful for providing feedback to the user when they make a mistake.
-
-💡 The 'disabled' prop allows you to disable the textarea. This can be useful when you want to prevent users from making changes or inputting text.
-
-💡 The 'hint' prop allows you to provide additional context or information about the TextArea component. This can be useful for providing more detailed instructions or information to the user.
-
-💡 Limit the number of characters that can be entered, to avoid overflowing the layout or taking too much space in the database.
-
-💡 Make sure the text area is adaptable to different screen sizes, to improve the user experience on different devices

package/src/components/TextArea/TextArea.stories.ts

@@ -1,55 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import TextArea from './RTextArea.vue';
-
-const DefaultArgs = {
-  errorMsg: '',
-  label: 'Text Area',
-  placeholder: 'RocketUI',
-  modelValue: '',
-  disabled: false,
-  hint: 'A form control for editing multi-line text.',
-};
-
-const TextAreaStory = {
-  title: 'Form/TextArea',
-  component: TextArea,
-  setup(args: typeof TextArea) {
-    return { args };
-  },
-  template: `<TextArea v-bind="args"/>`,
-  args: DefaultArgs,
-  argTypes: {
-    onInput: { action: 'input' },
-  },
-} as Meta<typeof TextArea>;
-
-export default TextAreaStory;
-
-type Story = StoryObj<typeof TextAreaStory>;
-
-export const Overview: Story = {};
-
-export const Default: Story = {
-  args: {
-    hint: '',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    hint: 'Cannot edit this field.',
-  },
-};
-
-export const Error: Story = {
-  args: {
-    errorMsg: 'This field is required.',
-  },
-};
-
-export const Hint: Story = {
-  args: {
-    hint: 'This is a hint.',
-  },
-};

package/src/components/TextArea/textarea.css

@@ -1,51 +0,0 @@
-@import '../../index.css';
-
-.container {
-  @apply flex flex-col items-start justify-center;
-}
-
-.textarea {
-  @apply outline-none px-3 py-2 rounded-lg border border-[var(--neutral-200)] text-[var(--neutral-900)] min-h-[80px] min-w-[320px];
-
-  &:hover {
-    @apply border-[var(--primary-500)];
-  }
-
-  &:focus-visible {
-    @apply border-[var(--primary-500)] ring-[4px] ring-[var(--primary-100)];
-  }
-
-  &::placeholder {
-    @apply text-[var(--neutral-500)];
-  }
-
-  &:disabled {
-    @apply bg-[var(--neutral-100)] cursor-not-allowed text-[var(--neutral-300)];
-  }
-
-  &:disabled:hover {
-    @apply border-[var(--neutral-200)];
-  }
-
-  &--error {
-    @apply border-[var(--error-500)] text-[var(--error-500)];
-    &:hover {
-      @apply border-[var(--error-500)];
-    }
-    &:focus-visible {
-      @apply text-[var(--neutral-900)] border-[var(--error-500)] ring-[4px] ring-[var(--error-100)];
-    }
-  }
-
-  &__label {
-    @apply text-[var(--neutral-900)] mb-2 text-sm;
-  }
-
-  &__hint {
-    @apply text-[var(--neutral-500)] text-sm mt-2;
-  }
-
-  &__error {
-    @apply text-[var(--error-500)] text-sm mt-2;
-  }
-}

package/src/components/TextArea/textarea.spec.ts

@@ -1,36 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-
-import TextArea from './RTextArea.vue';
-
-describe('TextArea', () => {
-  it('renders properly', () => {
-    const wrapper = mount(TextArea, {
-      props: {
-        id: 'textarea-id',
-        placeholder: 'textarea placeholder',
-        modelValue: 'textarea value',
-        label: 'textarea label',
-        hint: 'textarea hint',
-      },
-    });
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('textarea').attributes('id')).toBe('textarea-id');
-    expect(wrapper.find('textarea').attributes('placeholder')).toBe(
-      'textarea placeholder'
-    );
-    expect(wrapper.find('textarea').element.value).toBe('textarea value');
-    expect(wrapper.find('label').text()).toBe('textarea label');
-    expect(wrapper.find('.textarea__hint').text()).toBe('textarea hint');
-  });
-  it('error situation', () => {
-    const wrapper = mount(TextArea, {
-      props: {
-        id: 'textarea-id',
-        errorMsg: 'textarea error',
-      },
-    });
-    expect(wrapper.find('.textarea__error').text()).toBe('textarea error');
-  });
-});