@rocketui/vue 0.0.47 → 0.0.49

package/src/components/Label/Label.mdx

@@ -1,50 +0,0 @@
-import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
-import * as LabelStories from './Label.stories';
-
-<Meta of={LabelStories} />
-
-# Label
-
-- [Overview](#overview)
-
-- [Playground](#playground)
-
-- [Usage with props](#usage)
-
-- [Tips](#tips)
-
-### Overview <a id="overview" />
-
-The Label component is a UI element that is used to display a label for a form element or other component. It is typically used in conjunction with form elements such as input fields, checkboxes, and radio buttons, as well as other components like sliders and switches. The Label component can be used to provide a clear and concise description of the associated form element or component, helping users understand its purpose and how to use it.
-
-<Canvas>
-  <Story of={LabelStories.Overview} />
-</Canvas>
-
-### Playground <a id="playground" />
-
-<Controls of={LabelStories.Overview} />
-
-## Usage with props <a id="usage" />
-
-### id (required)
-
-The id prop is a unique identifier for the label element. It should be set to the same value as the id prop of the form element or component that the label is associated with.
-
-### for (required)
-
-The for prop is used to associate the label with a form element or component. It should be set to the same value as the id prop of the form element or component that the label is associated with.
-
-### text (required)
-
-The text prop is the text that will be displayed within the label element. It can be a string or a number.
-
-### Tips <a id="tips" />
-
-💡 Use clear and concise text for the text prop: Make sure that the text within the label accurately and clearly describes the associated form element or component. Avoid using jargon or technical terms that may be unfamiliar to some users.
-
-💡 Use the for and id props correctly: The for prop should be set to the id of the form element or component that the label is associated with, and the id prop should be a unique identifier for the label element. This ensures that the label is properly associated with the correct form element or component, and helps screen readers and other assistive technologies correctly interpret the label.
-
-💡 Consider using aria-label or aria-labelledby: If the label text is not visually displayed (e.g. because it is hidden using CSS), you may need to use the aria-label or aria-labelledby attributes to provide an accessible label for screen readers and other assistive technologies.
-
-💡 Use label elements for all form elements: It is important to use label elements for all form elements, even if the form element is already described by surrounding text. This ensures that the form element is properly labeled and easier to use for all users, including those using assistive technologies.

package/src/components/Label/Label.stories.ts

@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import Label from './RLabel.vue';
-
-const LabelStory = {
-  title: 'Form/Label',
-  render: (args: any) => ({
-    components: { Label },
-    setup() {
-      return {
-        args,
-      };
-    },
-    template: `
-    <div style="display: flex; flex-direction: column;">
-      <Label v-bind="args" />
-      <input id="name" placeholder="John Doe" style="border: gray 1px solid; padding: 4px" />
-    </div>
-    `,
-  }),
-  args: {
-    id: '',
-    for: '',
-    text: '',
-  },
-} as Meta<typeof Label>;
-
-export default LabelStory;
-
-type Story = StoryObj<typeof LabelStory>;
-
-export const Overview: Story = {
-  args: {
-    id: 'label',
-    for: 'name',
-    text: 'Name:',
-  },
-};

package/src/components/Label/RLabel.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes, LabelHTMLAttributes } from 'vue';
-import './label.css';
-export interface LabelProps {
-  /**
-   * id of the label
-   * @type HTMLAttributes['id']
-   * @default ''
-   * @example
-   * <Label id="label" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
-   */
-  id: HTMLAttributes['id'];
-
-  /**
-   * for of the label
-   * @type LabelHTMLAttributes['for']
-   * @default ''
-   * @example
-   * <Label for="label" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
-   */
-  for: LabelHTMLAttributes['for'];
-
-  /**
-   * text of the label
-   * @type string | number
-   * @default ''
-   * @example
-   * <Label text="Label" />
-   */
-  text: string | number;
-}
-const props = withDefaults(defineProps<LabelProps>(), {
-  id: '',
-  for: '',
-  text: '',
-});
-</script>
-<template>
-  <label :id="props.id" :for="props.for">{{ props.text }}</label>
-</template>

package/src/components/Modal/Modal.mdx

@@ -1,91 +0,0 @@
-import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
-
-import * as ModalStories from './Modal.stories';
-
-<Meta of={ModalStories} />
-
-# Modal
-
-Modal is a component that renders a modal dialog. It is used to display content in a layer above the app.
-
-- [Overview](#overview)
-
-- [Playground](#playground)
-
-- [Usage with props](#usage)
-
-- [Slots](#slots)
-
-- [Stories](#stories)
-
-- [Tips](#tips)
-
-## Overview <a id="overview" />
-
-<Canvas source="SourceProps['code']">
-  <Story of={ModalStories.Overview} />
-</Canvas>
-
-## Playground <a id="playground" />
-
-> Changes you make in the controls will be reflected in the example above.
-
-<Controls of={ModalStories.Overview} exclude={/^(on.*)$/} />
-
-## Usage with props <a id="usage" />
-
-### modelValue (required)
-
-The `modelValue` prop is used to control the visibility of the modal. It is a boolean value that defaults to `false`.
-
-### block (optional)
-
-The `block` prop is used to control the block behavior of the modal. It is a boolean value that defaults to `true`.
-
-### title (optional)
-
-The `title` prop is used to set the title of the modal. It is a string value that defaults to `null`.
-
-### description (optional)
-
-The `description` prop is used to set the description of the modal. It is a string value that defaults to `null`.
-
-### icon (optional)
-
-The `icon` prop is used to set the icon of the modal. It is a string value that defaults to `null`.
-
-## Slots <a id="slots" />
-
-### header (optional)
-
-The `header` slot is used to render the header of the modal.
-
-### default (optional)
-
-The `default` slot is used to render the body of the modal.
-
-### actions (optional)
-
-The `actions` slot is used to render the actions of the modal.
-
-## Stories <a id="stories" />
-
-<Canvas source="SourceProps['code']">
-  <Story of={ModalStories.WithActionsSlot} />
-</Canvas>
-
-<Canvas source="SourceProps['code']">
-  <Story of={ModalStories.WithForm} />
-</Canvas>
-
-## Tips <a id="tips" />
-
-- Use the `modelValue` prop to control the visibility of the modal.
-
-- Use the `block` prop to control the block behavior of the modal.
-
-- Use the `title` prop to set the title of the modal.
-
-- Use the `description` prop to set the description of the modal.
-
-- Use the `icon` prop to set the icon of the modal.

package/src/components/Modal/Modal.stories.ts

@@ -1,125 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import Modal from './RModal.vue';
-import Button from '../Button/RButton.vue';
-import Textfield from '../Textfield/RTextfield.vue';
-import Dropdown from '../Dropdown/RDropdown.vue';
-
-const ModalStory = {
-  title: 'Components/Modal',
-  component: Modal,
-  setup: (args: typeof Modal) => ({
-    args,
-  }),
-  template: `
-      <div>
-        <Modal v-bind="args" />
-      </div>
-    `,
-  args: {
-    title: 'Create Account',
-    description:
-      'On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment',
-  },
-  argTypes: {},
-} as Meta<typeof Modal>;
-
-export default ModalStory;
-
-type Story = StoryObj<typeof ModalStory>;
-
-export const Overview: Story = {};
-
-export const WithActionsSlot: Story = {
-  render: (args) => ({
-    components: { Modal, Button },
-    setup: () => ({
-      args,
-      submit: () => {
-        alert('Submitted!');
-      },
-    }),
-    template: `
-      <div >
-        <Modal v-bind="args" >
-          <template v-slot:default>
-            <div>
-              <!-- type a text about pets -->
-              Pets are companion animals kept primarily for a person's company or entertainment rather than as a working animal, livestock, or a laboratory animal. Popular pets are often considered to have attractive appearances, intelligence and relatable personalities, but some pets may be taken in on an altruistic basis (such as a stray animal) and accepted by the owner regardless of these characteristics.
-            </div>
-          </template>
-          <template v-slot:actions>
-            <div class="flex gap-2">
-              <Button variant="secondary" @click="args.modelValue = false">
-                <template #custom-icon>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-paw-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-                    <path d="M11.168 11.154c-.71 .31 -1.184 1.107 -2 2.593c-.942 1.703 -2.846 1.845 -3.321 3.291c-.097 .265 -.145 .677 -.143 .962c0 1.176 .787 2 1.8 2c1.259 0 3 -1 4.5 -1s3.241 1 4.5 1c.927 0 1.664 -.689 1.783 -1.708" />
-                    <path d="M20.188 8.082a1.039 1.039 0 0 0 -.406 -.082h-.015c-.735 .012 -1.56 .75 -1.993 1.866c-.519 1.335 -.28 2.7 .538 3.052c.129 .055 .267 .082 .406 .082c.739 0 1.575 -.742 2.011 -1.866c.516 -1.335 .273 -2.7 -.54 -3.052h0z" />
-                    <path d="M11 6.992a3.608 3.608 0 0 0 -.04 -.725c-.203 -1.297 -1.047 -2.267 -1.932 -2.267a1.237 1.237 0 0 0 -.758 .265" />
-                    <path d="M16.456 6.733c.214 -1.376 -.375 -2.594 -1.32 -2.722a1.164 1.164 0 0 0 -.162 -.011c-.885 0 -1.728 .97 -1.93 2.267c-.214 1.376 .375 2.594 1.32 2.722c.054 .007 .108 .011 .162 .011c.885 0 1.73 -.974 1.93 -2.267z" />
-                    <path d="M5.69 12.918c.816 -.352 1.054 -1.719 .536 -3.052c-.436 -1.124 -1.271 -1.866 -2.009 -1.866c-.14 0 -.277 .027 -.407 .082c-.816 .352 -1.054 1.719 -.536 3.052c.436 1.124 1.271 1.866 2.009 1.866c.14 0 .277 -.027 .407 -.082z" />
-                    <path d="M3 3l18 18" />
-                  </svg>
-                </template>
-              </Button>
-              <Button @click="submit">
-                <template #custom-icon>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-paw-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffbf00" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-                    <path d="M12 10c-1.32 0 -1.983 .421 -2.931 1.924l-.244 .398l-.395 .688a50.89 50.89 0 0 0 -.141 .254c-.24 .434 -.571 .753 -1.139 1.142l-.55 .365c-.94 .627 -1.432 1.118 -1.707 1.955c-.124 .338 -.196 .853 -.193 1.28c0 1.687 1.198 2.994 2.8 2.994l.242 -.006c.119 -.006 .234 -.017 .354 -.034l.248 -.043l.132 -.028l.291 -.073l.162 -.045l.57 -.17l.763 -.243l.455 -.136c.53 -.15 .94 -.222 1.283 -.222c.344 0 .753 .073 1.283 .222l.455 .136l.764 .242l.569 .171l.312 .084c.097 .024 .187 .045 .273 .062l.248 .043c.12 .017 .235 .028 .354 .034l.242 .006c1.602 0 2.8 -1.307 2.8 -3c0 -.427 -.073 -.939 -.207 -1.306c-.236 -.724 -.677 -1.223 -1.48 -1.83l-.257 -.19l-.528 -.38c-.642 -.47 -1.003 -.826 -1.253 -1.278l-.27 -.485l-.252 -.432c-1.011 -1.696 -1.618 -2.099 -3.053 -2.099z" stroke-width="0" fill="currentColor" />
-                    <path d="M19.78 7h-.03c-1.219 .02 -2.35 1.066 -2.908 2.504c-.69 1.775 -.348 3.72 1.075 4.333c.256 .109 .527 .163 .801 .163c1.231 0 2.38 -1.053 2.943 -2.504c.686 -1.774 .34 -3.72 -1.076 -4.332a2.05 2.05 0 0 0 -.804 -.164z" stroke-width="0" fill="currentColor" />
-                    <path d="M9.025 3c-.112 0 -.185 .002 -.27 .015l-.093 .016c-1.532 .206 -2.397 1.989 -2.108 3.855c.272 1.725 1.462 3.114 2.92 3.114l.187 -.005a1.26 1.26 0 0 0 .084 -.01l.092 -.016c1.533 -.206 2.397 -1.989 2.108 -3.855c-.27 -1.727 -1.46 -3.114 -2.92 -3.114z" stroke-width="0" fill="currentColor" />
-                    <path d="M14.972 3c-1.459 0 -2.647 1.388 -2.916 3.113c-.29 1.867 .574 3.65 2.174 3.867c.103 .013 .2 .02 .296 .02c1.39 0 2.543 -1.265 2.877 -2.883l.041 -.23c.29 -1.867 -.574 -3.65 -2.174 -3.867a2.154 2.154 0 0 0 -.298 -.02z" stroke-width="0" fill="currentColor" />
-                    <path d="M4.217 7c-.274 0 -.544 .054 -.797 .161c-1.426 .615 -1.767 2.562 -1.078 4.335c.563 1.451 1.71 2.504 2.941 2.504c.274 0 .544 -.054 .797 -.161c1.426 -.615 1.767 -2.562 1.078 -4.335c-.563 -1.451 -1.71 -2.504 -2.941 -2.504z" stroke-width="0" fill="currentColor" />
-                  </svg>
-                </template>
-              </Button>
-            </div>
-          </template>
-        </Modal>
-      </div>
-    `,
-  }),
-  args: {
-    modelValue: true,
-    icon: 'pets',
-    description: '',
-    title: 'Pets ',
-  },
-};
-
-export const WithForm: Story = {
-  render: (args) => ({
-    components: { Modal, Textfield, Button, Dropdown },
-    setup: () => ({
-      args,
-      submit: () => {
-        alert(`Submitted!`);
-      },
-    }),
-    template: `
-      <div >
-        <Modal v-bind="args" >
-          <template v-slot:default>
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-1">Account Type</label>
-              <Dropdown placeholder="Select a option" :options="[{label: 'Option 1', value:'Option 1'}, {label: 'Option 2', value: 'Option 2'}]" />
-              <Textfield label="Name" placeholder="type a name" />
-              <Textfield label="Email"placeholder="type a email" />
-              <Textfield label="Password" placeholder="type a password" />
-            </div>
-          </template>
-          <template v-slot:actions>
-            <Button variant="secondary" @click="args.modelValue = false" block>
-              Cancel
-            </Button>
-            <Button @click="submit" block>
-              Submit
-            </Button>
-          </template>
-        </Modal>
-      </div>
-    `,
-  }),
-};

package/src/components/Modal/RModal.vue

@@ -1,130 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import './modal.css';
-import Icon from '../Icon/RIcon.vue';
-
-export interface ModalProps {
-  /**
-   * modelValue the modal
-   * @type boolean
-   * @default false
-   * @example
-   * <Modal :modelValue="true" />
-   */
-  modelValue: boolean;
-  /**
-   * Modal width is 100%
-   * @type boolean
-   * @default false
-   * @example
-   * <Modal block />
-   */
-  block?: boolean;
-  /**
-   * Title of the Modal
-   * @type string
-   * @default ''
-   * @example
-   * <Modal title="Modal Title" />
-   */
-  title?: string;
-  /**
-   * Description of the Modal
-   * @type string
-   * @default ''
-   * @example
-   * <Modal description="Modal Description" />
-   */
-  description?: string;
-  /**
-   * Icon of the Modal
-   * @type string
-   * @default ''
-   * @example
-   * <Modal icon="mdiMail" />
-   */
-  icon?: string;
-
-  /**
-   * Width of the Modal
-   * @type string
-   * @default ''
-   * @example
-   * <Modal width="500px" />
-   */
-  width?: string;
-
-  /**
-   * Height of the Modal
-   * @type string
-   * @default ''
-   * @example
-   * <Modal height="500px" />
-   */
-  height?: string;
-
-  /**
-   * Close the modal when clicking outside
-   * @type boolean
-   * @default false
-   * @example
-   * <Modal :modelValue="true" :outsideClick="true" />
-   */
-  outsideClick?: boolean;
-}
-const props = withDefaults(defineProps<ModalProps>(), {
-  modelValue: false,
-  block: false,
-  title: '',
-  description: '',
-});
-const emits = defineEmits(['update:modelValue']);
-const classes = computed(() => {
-  return {
-    dialog: true,
-    'dialog--block': props.block,
-  };
-});
-const styles = computed(() => {
-  return {
-    width: props.width,
-    height: props.height,
-  };
-});
-const handleOutside = (event: Event) => {
-  if (!props.outsideClick) return;
-  if (event.target === event.currentTarget) {
-    emits('update:modelValue', false);
-  }
-};
-</script>
-<template>
-  <div class="modal" v-show="modelValue" @click.stop="handleOutside">
-    <div
-      :style="styles"
-      role="dialog"
-      aria-modal="true"
-      :class="classes"
-      :open="props.modelValue"
-    >
-      <div class="dialog__header">
-        <slot name="header" />
-        <div class="icon" v-if="props.icon">
-          <Icon :name="props.icon" />
-        </div>
-        <div class="title" v-if="props.title">
-          {{ props.title }}
-        </div>
-        <div class="description" v-if="props.description">
-          {{ props.description }}
-        </div>
-      </div>
-      <div class="dialog__body">
-        <slot />
-      </div>
-      <div class="dialog__actions">
-        <slot name="actions" />
-      </div>
-    </div>
-  </div>
-</template>

package/src/components/Modal/modal.css

@@ -1,41 +0,0 @@
-@import '../../index.css';
-
-.modal {
-  @apply fixed inset-0 z-50 flex items-center justify-center 
-  bg-black bg-opacity-30 transition-opacity duration-300 ease-in-out;
-}
-
-.dialog {
-  @apply w-[var(--modal-width)] rounded-[var(--modal-border-radius)] 
-        shadow-[var(--modal-shadow)] p-[var(--modal-padding)]
-        flex flex-col gap-6 bg-white animate-[var(--modal-animation)] transition-[width] duration-300 ease-in;
-
-  &__header {
-    @apply flex flex-col items-start justify-between gap-4;
-
-    .icon {
-      @apply max-h-[var(--modal-icon-size)] max-w-[var(--modal-icon-size)] p-[var(--modal-icon-padding)] 
-      grid items-center bg-[var(--modal-icon-bg)] rounded-full text-[var(--modal-icon-color)];
-    }
-
-    .title {
-      @apply text-2xl font-semibold;
-    }
-
-    .description {
-      @apply text-sm text-[var(--neutral-500)] font-normal;
-    }
-  }
-
-  &__body {
-    @apply flex-1 overflow-y-auto;
-  }
-
-  &__actions {
-    @apply flex items-center justify-end gap-[var(--space-4)];
-  }
-
-  &--block {
-    @apply w-full;
-  }
-}

package/src/components/Modal/modal.spec.ts

@@ -1,25 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-import Modal from './RModal.vue';
-import exp from 'constants';
-
-describe('Modal', () => {
-  it('should render correctly', () => {
-    const wrapper = mount(Modal, {
-      props: {
-        title: 'Test',
-        modelValue: true,
-      },
-    });
-    expect(wrapper.find('.modal').exists()).toBe(true);
-    expect(
-      wrapper.find('.modal').element.getElementsByClassName('title')[0]
-        .innerHTML
-    ).toBe('Test');
-    expect(wrapper.find('.dialog').exists()).toBe(true);
-    expect(wrapper.find('.dialog').attributes('aria-modal')).toBe('true');
-    expect(wrapper.find('.dialog').attributes('role')).toBe('dialog');
-    expect(wrapper.find('.dialog').attributes('open')).toBe('true');
-  });
-});

package/src/components/Pagination/Pagination.stories.ts

@@ -1,24 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-// @ts-ignore
-import Pagination from './RPagination.vue';
-
-const PaginationStory = {
-  title: 'Components/Pagination',
-  component: Pagination,
-  setup: (args: typeof Pagination) => ({
-    args,
-  }),
-  template: `<Pagination v-bind="args" />`,
-  args: {},
-  argTypes: {
-    'onUpdate:page': { action: 'update:page' },
-  },
-  tags: ['autodocs'],
-} as Meta<typeof Pagination>;
-
-export default PaginationStory;
-
-type Story = StoryObj<typeof PaginationStory>;
-
-export const Overview: Story = {};

package/src/components/Pagination/RPagination.vue

@@ -1,103 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import './pagination.css';
-
-export interface PaginationProps {
-  page: number;
-  perPage: number;
-  totalItems: number;
-  pageText?: string;
-  ofText?: string;
-  slash?: boolean;
-}
-
-const props = withDefaults(defineProps<PaginationProps>(), {
-  page: 1,
-  perPage: 10,
-  totalItems: 100,
-  pageText: 'Page',
-  ofText: 'of',
-  slash: false,
-});
-
-const emits = defineEmits(['update:page']);
-
-const totalPages = computed(() => Math.ceil(props.totalItems / props.perPage));
-
-const changePage = (page: number) => {
-  if (page < 1 || page > totalPages.value) return;
-  emits('update:page', page);
-};
-</script>
-
-<template>
-  <div class="r-pagination">
-    <div class="r-pagination__page-info">
-      <span v-if="!slash">{{ props.pageText }}</span>
-      <span class="r-pagination__page-info__current-page">
-        {{ props.page }}
-      </span>
-      {{ slash ? '/' : props.ofText }}
-      <span class="r-pagination__page-info__total-pages">
-        {{ totalPages }}
-      </span>
-    </div>
-    <div class="r-pagination__paginator">
-      <button
-        class="r-pagination__paginator__prev"
-        :disabled="props.page === 1"
-        @click="changePage(+props.page - 1)"
-      >
-        <slot name="prev">
-          <svg
-            :class="{ 'stroke-gray-400': props.page === 1 }"
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="#323232"
-            fill="none"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-            <path d="M15 6l-6 6l6 6" />
-          </svg>
-        </slot>
-      </button>
-      <input
-        class="r-pagination__paginator__input"
-        type="number"
-        min="1"
-        :max="totalPages"
-        :value="props.page"
-        @blur="changePage(+$event?.target?.value)"
-      />
-      <button
-        class="r-pagination__paginator__next"
-        :disabled="props.page === totalPages"
-        @click="changePage(+props.page + 1)"
-      >
-        <slot name="next">
-          <svg
-            :class="{ 'stroke-gray-400': props.page === totalPages }"
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="#323232"
-            fill="none"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-            <path d="M9 6l6 6l-6 6" />
-          </svg>
-        </slot>
-      </button>
-      <div class="r-pagination__paginator__total">/ {{ totalPages }}</div>
-    </div>
-  </div>
-</template>