@rocketui/vue 0.0.47 → 0.0.48

package/src/components/Checkbox/checkbox.css

@@ -1,67 +0,0 @@
-@import '../../index.css';
-
-.checkbox-wrapper {
-  @apply flex items-start;
-}
-
-.checkbox-container {
-  @apply flex;
-
-  &__input {
-    @apply absolute opacity-0 z-20 cursor-pointer h-5 w-5;
-  }
-}
-
-.checkbox {
-  @apply transition-all duration-200 ease-in-out flex items-center justify-center text-[var(--neutral-200)] cursor-pointer h-5 w-5 border-[var(--neutral-200)] rounded border-2;
-
-  &:hover {
-    @apply border-[var(--primary-500)];
-  }
-
-  &--checked {
-    @apply text-white border-[var(--primary-500)] bg-[var(--primary-500)];
-    &:hover {
-      @apply text-white border-[var(--primary-700)] bg-[var(--primary-700)];
-    }
-  }
-  &--indeterminate {
-    @apply border-[var(--primary-500)] text-[var(--primary-500)];
-    &:hover {
-      @apply text-white border-[var(--primary-700)] bg-[var(--primary-700)];
-    }
-  }
-  &--error {
-    @apply border-[var(--error-500)] bg-[var(--error-100)] text-white;
-    &:hover {
-      @apply border-[var(--error-700)];
-    }
-  }
-  &--error&--checked {
-    @apply bg-[var(--error-500)];
-    &:hover {
-      @apply bg-[var(--error-700)];
-    }
-  }
-  &[data-disabled='true'] {
-    @apply bg-[var(--neutral-100)] border-[var(--neutral-200)] text-[var(--neutral-200)] cursor-not-allowed;
-  }
-}
-
-.checkbox-texts {
-  @apply flex flex-col ml-3.5;
-
-  &__label {
-    @apply text-[var(--neutral-900)] cursor-auto text-sm;
-
-    &[data-disabled='true'] {
-      @apply cursor-not-allowed;
-    }
-  }
-  &__hint {
-    @apply text-[var(--neutral-500)] text-xs;
-  }
-  &__error {
-    @apply text-[var(--error-500)] text-xs;
-  }
-}

package/src/components/Checkbox/checkbox.spec.ts

@@ -1,60 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-import Checkbox from './RCheckbox.vue';
-
-describe('Checkbox', () => {
-  it('renders properly', () => {
-    const wrapper = mount(Checkbox, {
-      props: {
-        id: 'checkbox-id',
-        label: 'Checkbox label',
-        disabled: false,
-      },
-    });
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('label').exists()).toBe(true);
-    expect(wrapper.find('label').element.getAttribute('for')).toBe(
-      'checkbox-id'
-    );
-    expect(wrapper.find('input').exists()).toBe(true);
-    expect(wrapper.find('input').element.getAttribute('id')).toBe(
-      'checkbox-id'
-    );
-    expect(wrapper.find('input').element.getAttribute('type')).toBe('checkbox');
-    expect(wrapper.find('input').element.getAttribute('disabled')).toBe(null);
-    expect(
-      wrapper
-        .find('.checkbox')
-        .trigger('click')
-        .then(() => {
-          expect(wrapper.find('.checkbox').classes()).toContain(
-            'checkbox--checked'
-          );
-        })
-    );
-  });
-  it('indeterminate', () => {
-    const wrapper = mount(Checkbox, {
-      props: {
-        id: 'checkbox-id',
-        label: 'Checkbox label',
-        disabled: false,
-        indeterminate: true,
-      },
-    });
-    expect(wrapper.find('.checkbox').classes()).toContain(
-      'checkbox--indeterminate'
-    );
-    expect(
-      wrapper
-        .find('.checkbox')
-        .trigger('click')
-        .then(() => {
-          expect(wrapper.find('.checkbox').classes()).toContain(
-            'checkbox--checked'
-          );
-        })
-    );
-  });
-});

package/src/components/Chips/Chip.mdx

@@ -1,113 +0,0 @@
-import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
-import * as ChipStories from './Chip.stories';
-
-<Meta of={ChipStories} />
-
-# Chip
-
-A Chip component is a small, compact element that is used to represent a complex piece of information, an attribute, or a status in a small space. Chips are often used in lists, grids, and other data-heavy layouts to help users easily identify and understand important information.
-
-- [Overview](#overview)
-
-- [Playground](#playground)
-
-- [Usage with props](#usage)
-
-- [Stories](#stories)
-
-- [Tips](#tips)
-
-### Overview <a id="overview" />
-
-Chips are typically displayed as small, rectangular elements with a small amount of text or an icon inside. They may have a border, a background color, and/or a drop shadow to visually distinguish them from the rest of the layout.
-They can be interactable, meaning that users can click or tap on them to trigger an action. For example, a Chip might open a detailed view of the information it represents, delete itself from a list, or mark itself as selected. Chips can come in various types, depending on the information or status they represent.
-
-<Canvas>
-  <Story of={ChipStories.Overview} />
-</Canvas>
-
-### Playground <a id="playground" />
-
-> Changes you make in the controls will be reflected in the example above.
-
-<Controls of={ChipStories.Overview} exclude={/^(click.*|on.*)$/} />
-
-## Usage with props <a id="usage" />
-
-## prependIcon (optional)
-
-The **prependIcon** prop allows you to specify an icon to be displayed at the beginning (or "prepend") of the Chip. This can help to visually distinguish the Chip or to add additional context or meaning.
-
-## variant (required)
-
-The **variant** prop allows you to specify the appearance of the Chip. Possible values for this prop might include "primary", "secondary", "success", "error", "warning" or "info". The variant determines the visual styles of the Chip.
-
-## size (optional)
-
-The **size** prop allows you to specify the size of the Chip. Possible values for this prop might include "small", "medium", or "large". The size determines the height and width of the Chip.
-
-## label (optional)
-
-The **label** prop allows you to specify the text label of the Chip. This is the main content of the Chip and should be concise and informative.
-
-## disabled (optional)
-
-The **disabled** prop allows you to specify whether the Chip is disabled or not. A disabled Chip cannot be interacted with and may have a different appearance to indicate this.
-
-## appendIcon (optional)
-
-The **appendIcon** prop allows you to specify an icon to be displayed at the end (or "append") of the Chip. This can be used for actions such as deleting the Chip or opening a detailed view.
-
-## ghost (optional)
-
-The **ghost** prop allows you to specify whether the Chip should have a transparent background. A ghost Chip appears "hollow" and may be used for overlaid or partially transparent layouts.
-
-## Stories <a id="stories" />
-
-### Primary
-
-<Canvas>
-  <Story of={ChipStories.Primary} />
-</Canvas>
-
-### Secondary
-
-<Canvas>
-  <Story of={ChipStories.Secondary} />
-</Canvas>
-
-### Success
-
-<Canvas>
-  <Story of={ChipStories.Success} />
-</Canvas>
-
-### Error
-
-<Canvas>
-  <Story of={ChipStories.Error} />
-</Canvas>
-
-### Warning
-
-<Canvas>
-  <Story of={ChipStories.Warning} />
-</Canvas>
-
-### Info
-
-<Canvas>
-  <Story of={ChipStories.Info} />
-</Canvas>
-
-### Tips <a id="tips" />
-
-💡 Chips are best used to represent specific, atomic pieces of information or actions, such as labels, categories, metadata, or buttons. Avoid using chips for long or complex pieces of text, as they are designed to be compact and concise.
-
-💡 Make sure that the labels on your chips are clear and descriptive, as they are the main content of the chips and the primary means of communicating information to users. Avoid using abbreviations or jargon unless they are widely understood by your target audience.
-
-💡 Choose the appropriate type and variant of chip for the information or action it represents.
-
-💡 Choose the appropriate size of chip for the context in which it will be used. Small chips are best for dense layouts with many chips, while medium or large chips are better for more spacious layouts or for emphasis.
-
-💡 Make sure that your chips are accessible to all users, including those using assistive technologies. This means that chips should have clear, descriptive text labels, and that the actions they trigger should be clearly announced to screen reader users. Chips should also be keyboard-navigable, meaning that users should be able to focus on them and trigger their actions using the keyboard.

package/src/components/Chips/Chip.stories.ts

@@ -1,122 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import Chip from './RChip.vue';
-import Icon from '../Icon/RIcon.vue';
-
-const DefaultArgTypes = {
-  variant: {
-    type: 'select',
-    options: ['primary', 'secondary', 'success', 'error', 'warning', 'info'],
-  },
-  'onClick:chip': {
-    action: 'click:chip',
-  },
-  'onClick:close': {
-    action: 'click:close',
-  },
-};
-
-const DefaultArgs = {
-  label: 'Chip',
-  prependIcon: '',
-  appendIcon: 'mdiClose',
-  ghost: false,
-  variant: 'primary',
-  disabled: false,
-  closable: true,
-};
-
-const ChipStory = {
-  title: 'Components/Chip',
-  component: Chip,
-  setup: (args: typeof Chip) => {
-    return {
-      args,
-    };
-  },
-  template: `
-    <Chip v-bind="args"/>
-  `,
-  args: DefaultArgs,
-  argTypes: DefaultArgTypes,
-} as Meta<typeof Chip>;
-
-export default ChipStory;
-
-type Story = StoryObj<typeof ChipStory>;
-
-export const Overview: Story = {
-  args: {
-    prependIcon: 'mdiFaceMan',
-  },
-};
-
-export const Primary: Story = {};
-
-export const Secondary: Story = {
-  args: {
-    variant: 'secondary',
-  },
-};
-
-export const Success: Story = {
-  args: {
-    variant: 'success',
-  },
-};
-
-export const Error: Story = {
-  args: {
-    variant: 'error',
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    variant: 'warning',
-  },
-};
-
-export const Info: Story = {
-  args: {
-    variant: 'info',
-  },
-};
-
-export const Ghost: Story = {
-  args: {
-    ghost: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
-
-export const Closable: Story = {
-  args: {
-    closable: true,
-  },
-};
-
-export const Slots = {
-  render: (args: any) => ({
-    components: { Chip, Icon },
-    setup() {
-      return { args };
-    },
-    template: `
-    <Chip v-bind="args">
-      <template v-slot:prepend>
-        <Icon name="mdiCircle" size="16" />
-      </template>
-      <template v-slot:append>
-        <Icon name="mdiClose" size="20" />
-      </template>
-    </Chip>
-    `,
-  }),
-  args: {},
-};

package/src/components/Chips/RChip.vue

@@ -1,125 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import Icon from '../Icon/RIcon.vue';
-import './chip.css';
-
-export interface Props {
-  /**
-   * Variant of the Chip
-   * @type 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'
-   * @default 'primary'
-   * @example
-   * <Chip variant="primary" />
-   */
-  variant: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
-
-  /**
-   * Label of the Chip
-   * @type string | number
-   * @default 'label'
-   * @example
-   * <Chip label="Label" />
-   */
-  label?: string | number;
-
-  /**
-   * Disabled state of the Chip
-   * @type boolean
-   * @default false
-   * @example
-   * <Chip disabled />
-   */
-  disabled?: boolean;
-
-  /**
-   * Prepend icon of the Chip
-   * @type string
-   * @default ''
-   * @example
-   * <Chip prependIcon="icon" />
-   */
-  prependIcon?: string;
-
-  /**
-   * Append icon of the Chip
-   * @type string
-   * @default ''
-   * @example
-   * <Chip appendIcon="icon" />
-   */
-  appendIcon?: string;
-
-  /**
-   * Ghost state of the Chip
-   * @type boolean
-   * @default false
-   * @example
-   * <Chip ghost />
-   */
-  ghost?: boolean;
-
-  /**
-   * Closable state of the Chip
-   * @type boolean
-   * @default false
-   * @example
-   * <Chip closable />
-   */
-  closable?: boolean;
-}
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'primary',
-  label: 'label',
-  disabled: false,
-  prependIcon: '',
-  appendIcon: '',
-  ghost: false,
-  closable: false,
-});
-const emit = defineEmits(['click:chip', 'click:close']);
-const classes = computed<object>(() => {
-  return {
-    chip: true,
-    'chip--disabled': props.disabled,
-    [`chip__${props.variant}`]: props.variant,
-    [`chip__${props.variant}--ghost`]: props.ghost,
-  };
-});
-
-const clickChip = (e: MouseEvent) => {
-  if (props.closable) e.stopPropagation();
-  if (props.disabled) return;
-  emit('click:chip', e);
-};
-const clickClose = (e: MouseEvent) => {
-  if (props.disabled || !props.closable) return;
-  e.stopPropagation();
-  emit('click:close', e);
-};
-</script>
-<template>
-  <div :class="classes">
-    <div class="chip__content" @click="clickChip($event)">
-      <slot name="prepend">
-        <Icon
-          v-if="props.prependIcon"
-          class="chip__content__prepend-icon"
-          :aria-disabled="props.disabled"
-          :name="props.prependIcon"
-          :size="12"
-        />
-      </slot>
-      <span class="chip__content__label">{{ props.label }}</span>
-    </div>
-    <slot name="append">
-      <Icon
-        v-if="props.appendIcon"
-        class="chip__content__append-icon"
-        :aria-disabled="props.disabled"
-        :name="props.appendIcon"
-        :size="12"
-        @click="clickClose($event)"
-      />
-    </slot>
-  </div>
-</template>

package/src/components/Chips/chip.css

@@ -1,62 +0,0 @@
-@import '../../index.css';
-
-.chip {
-  @apply cursor-pointer text-white inline-flex items-center px-2 py-1 text-xs font-medium leading-4 rounded-full;
-
-  &__primary {
-    @apply bg-[var(--primary-500)];
-
-    &--ghost {
-      @apply bg-[var(--primary-100)] text-[var(--primary-500)];
-    }
-  }
-  &__secondary {
-    @apply bg-[var(--secondary-500)];
-
-    &--ghost {
-      @apply bg-[var(--secondary-100)] text-[var(--secondary-500)];
-    }
-  }
-  &__success {
-    @apply bg-[var(--success-500)];
-
-    &--ghost {
-      @apply bg-[var(--success-100)] text-[var(--success-500)];
-    }
-  }
-  &__error {
-    @apply bg-[var(--error-500)];
-
-    &--ghost {
-      @apply bg-[var(--error-100)] text-[var(--error-500)];
-    }
-  }
-  &__warning {
-    @apply bg-[var(--warning-500)];
-
-    &--ghost {
-      @apply bg-[var(--warning-100)] text-[var(--warning-500)];
-    }
-  }
-  &__info {
-    @apply bg-[var(--info-500)];
-
-    &--ghost {
-      @apply bg-[var(--info-100)] text-[var(--info-500)];
-    }
-  }
-  &--reverse {
-    @apply flex-row-reverse;
-  }
-  &--disabled {
-    @apply opacity-50 cursor-not-allowed;
-  }
-
-  &__content {
-    @apply whitespace-nowrap flex items-center;
-
-    &__label {
-      @apply mx-1;
-    }
-  }
-}

package/src/components/Chips/chip.spec.ts

@@ -1,40 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-
-import Chip from './RChip.vue';
-
-describe('Chip', () => {
-  it('renders properly', () => {
-    const wrapper = mount(Chip, {
-      props: {
-        variant: 'primary',
-        label: 'Hello',
-        size: 'small',
-        appendIcon: 'close',
-      },
-    });
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.classes()).toContain('chip');
-    expect(wrapper.classes()).toContain('chip__primary');
-    expect(wrapper.classes()).toContain('chip--small');
-    // expect(wrapper.find('.chip__text').text()).toBe('Hello');
-    // expect(
-    //   wrapper
-    //     .find('.chip__text')
-    //     .trigger('click')
-    //     .then(() => {
-    //       expect(wrapper.emitted('clickChip')).toBeTruthy();
-    //     })
-    // );
-    expect(wrapper.find('.chip__append-icon').exists()).toBe(true);
-    expect(
-      wrapper
-        .find('.chip__append-icon')
-        .trigger('click')
-        .then(() => {
-          expect(wrapper.emitted('clickIcon')).toBeTruthy();
-        })
-    );
-  });
-});