@rocketui/vue 0.0.47 → 0.0.49

package/src/components/Dropdown/dropdown.css

@@ -1,113 +0,0 @@
-@import '../../index.css';
-
-.dropdown-wrapper {
-  @apply relative;
-}
-
-.dropdown {
-  @apply flex items-center bg-white border border-[var(--neutral-200)] rounded-md shadow-sm py-3 px-4 text-left cursor-pointer sm:text-sm;
-
-  &--active {
-    @apply border border-[var(--primary-500)] ring-inset ring-2;
-  }
-
-  &--disabled {
-    @apply bg-[var(--neutral-100)] text-[var(--neutral-300)] border-[var(--neutral-200)] cursor-not-allowed;
-  }
-
-  &--loading {
-    @apply bg-[var(--neutral-100)] text-[var(--neutral-300)] border-[var(--neutral-200)] cursor-not-allowed animate-pulse;
-  }
-
-  &__prepend-icon {
-    @apply inset-y-0 right-0 flex items-center pointer-events-none pr-2;
-
-    &--active {
-      /* @apply text-[var(--primary-500)]; */
-    }
-  }
-
-  &__tags {
-    @apply flex flex-wrap items-center gap-1;
-
-    &__chip {
-      @apply flex items-center gap-2 rounded-3xl text-xs text-[var(--neutral-900)] bg-[var(--neutral-100)];
-
-      & > .chip__text {
-        @apply whitespace-nowrap;
-      }
-    }
-  }
-
-  &__multiple {
-    @apply flex items-center gap-2;
-    & > * {
-      @apply flex-1 whitespace-nowrap;
-    }
-  }
-
-  &__input {
-    @apply text-[var(--neutral-900)] caret-[var(--primary-500)] block w-full placeholder-[var(--neutral-500)] focus:outline-none focus:ring-0 focus:border-transparent sm:text-sm disabled:bg-[var(--neutral-100)] disabled:text-[var(--neutral-300)] disabled:placeholder:text-[var(--neutral-300)];
-
-    &--loading {
-      @apply bg-[var(--neutral-100)] text-[var(--neutral-300)] border-[var(--neutral-200)] cursor-not-allowed animate-pulse;
-    }
-
-    &[readonly] {
-      @apply cursor-pointer;
-    }
-  }
-
-  &__append-icon {
-    @apply inset-y-0 right-0 flex items-center pointer-events-none;
-
-    &--active {
-      @apply transform rotate-180 transition-all duration-200 ease-in-out text-[var(--primary-500)];
-    }
-  }
-}
-
-.dropdown-options {
-  @apply hidden py-3 px-2 left-0 absolute z-10 w-full mt-1 bg-white border border-[var(--neutral-200)] rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm;
-
-  &--active {
-    @apply block;
-  }
-
-  &__option {
-    @apply text-[var(--neutral-900)] transition-all duration-200 ease-in 
-    flex justify-between items-center w-full border border-transparent 
-    rounded-md py-3 px-4 text-left cursor-pointer sm:text-sm min-h-[50px];
-
-    &:hover {
-      @apply bg-[var(--neutral-100)];
-    }
-    &--active {
-      @apply bg-[var(--primary-100)] text-[var(--primary-500)];
-    }
-
-    &__label {
-      @apply ml-2;
-
-      &--active {
-        /* @apply text-[var(--primary-500)]; */
-      }
-    }
-
-    &__prepend-icon {
-      @apply text-[var(--neutral-900)] inset-y-0 right-0 flex items-center pointer-events-none;
-
-      &--active {
-        /* @apply text-[var(--primary-500)]; */
-      }
-    }
-
-    &__append-icon {
-      @apply transition-colors duration-100 ease-in-out;
-
-      &--active {
-        /* @apply text-[var(--primary-500)]; */
-      }
-    }
-  }
-}

package/src/components/Dropdown/dropdown.spec.ts

@@ -1,98 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-import Dropdown from './RDropdown.vue';
-
-describe('Dropdown', () => {
-  it('renders properly', () => {
-    const wrapper = mount(Dropdown, {
-      props: {
-        options: [{ value: 1, label: '1' }],
-        placeholder: 'Select...',
-      },
-    });
-
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('input').exists()).toBe(true);
-    expect(wrapper.find('input').attributes('type')).toBe('text');
-    expect(wrapper.find('input').attributes('placeholder')).toBe('Select...');
-    expect(wrapper.classes()).toContain('dropdown');
-    expect(wrapper.find('ul').exists()).toBe(true);
-    expect(wrapper.find('.select').exists()).toBe(true);
-    expect(
-      wrapper
-        .find('.select')
-        .trigger('click')
-        .then(() => {
-          expect(wrapper.find('ul').classes()).toContain(
-            'select-options--active'
-          );
-        })
-    );
-  });
-
-  it('multiple', () => {
-    const wrapper = mount(Dropdown, {
-      props: {
-        options: [
-          { value: 1, label: '1' },
-          { value: 2, label: '2' },
-        ],
-        multiple: true,
-      },
-    });
-    expect(
-      wrapper
-        .find('.select')
-        .trigger('click')
-        .then(() => {
-          expect(wrapper.find('ul').classes()).toContain(
-            'select-options--active'
-          );
-        })
-        .then(() => {
-          document.addEventListener('click', () => {
-            expect(wrapper.find('ul').classes()).not.toContain(
-              'select-options--active'
-            );
-          });
-        })
-    );
-
-    expect(wrapper.find('.select__multiple').exists()).toBe(true);
-    expect(wrapper.find('.select-options__option__label').text()).toBe('1');
-    expect(
-      wrapper
-        .find('.select-options__option')
-        .trigger('click')
-        .then(() => {
-          expect(wrapper.find('.select__multiple').text()).toBe('1,');
-        })
-    );
-  });
-  it('taggable', () => {
-    const wrapper = mount(Dropdown, {
-      props: {
-        options: [
-          { value: 1, label: '1' },
-          { value: 2, label: '2' },
-        ],
-        taggable: true,
-      },
-    });
-
-    expect(wrapper.find('.select__tags').exists()).toBe(true);
-    expect(wrapper.find('input').exists()).toBe(true);
-    expect(
-      wrapper
-        .find('.select-options__option')
-        .trigger('click')
-        .then(() => {
-          wrapper
-            .find('.select__tags')
-            .element.children[0].classList.contains('chip');
-          wrapper.find('.select__tags').element.children[0].textContent === '1';
-        })
-    );
-  });
-});

package/src/components/Flex/Flex.mdx

@@ -1,20 +0,0 @@
-import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
-import * as FlexStories from './Flex.stories';
-
-<Meta of={FlexStories} />
-
-# Flex
-
-Flex is Box with display set to flex and comes with helpful style shorthand. It renders a `div` element.
-
-### Overview
-
-<Canvas>
-  <Story of={FlexStories.Overview} />
-</Canvas>
-
-### Playground
-
-> Changes you make in the controls will be reflected in the example above.
-
-<Controls of={FlexStories.Overview} exclude={/^(click|default|on.*)$/} />

package/src/components/Flex/Flex.stories.js

@@ -1,127 +0,0 @@
-import Flex from './RFlex.vue';
-import Box from '../Box/RBox.vue';
-
-const Default = (args) => ({
-  components: { Flex, Box },
-  setup() {
-    return { args };
-  },
-  template: `
-    <Flex v-bind="args">
-      <Box>Box 1</Box>
-      <Box>Box 2</Box>
-    </Flex>`,
-});
-
-const defaultArgs = {
-  align: {
-    control: {
-      type: 'select',
-      options: [
-        'normal',
-        'stretch',
-        'center',
-        'start',
-        'end',
-        'flex-start',
-        'flex-end',
-        'baseline',
-        'first baseline',
-        'last baseline',
-        'safe center',
-        'unsafe center',
-      ],
-    },
-    defaultValue: 'start',
-  },
-  justify: {
-    control: {
-      type: 'select',
-      options: [
-        'start',
-        'center',
-        'end',
-        'flex-start',
-        'flex-end',
-        'left',
-        'right',
-        'normal',
-        'space-between',
-        'space-around',
-        'space-evenly',
-        'stretch',
-        'safe center',
-        'unsafe center',
-      ],
-    },
-    defaultValue: 'start',
-  },
-  wrap: {
-    control: {
-      type: 'select',
-      options: ['nowrap', 'wrap', 'wrap-reverse'],
-    },
-    defaultValue: 'nowrap',
-  },
-  direction: {
-    control: {
-      type: 'select',
-      options: ['row', 'row-reverse', 'column', 'column-reverse'],
-    },
-    defaultValue: 'row',
-  },
-  basis: {
-    control: {
-      type: 'select',
-      options: [
-        'auto',
-        'max-content',
-        'min-content',
-        'fit-content',
-        'content',
-        'inherit',
-        'initial',
-        'unset',
-      ],
-    },
-    defaultValue: 'auto',
-  },
-  grow: {
-    control: {
-      type: 'select',
-      options: ['0', '1', '2', '3', '4', '5'],
-    },
-    defaultValue: '0',
-  },
-  shrink: {
-    control: {
-      type: 'select',
-      options: ['0', '1', '2', '3', '4', '5'],
-    },
-    defaultValue: '1',
-  },
-};
-
-export default {
-  title: 'Layout/Flex',
-  component: Flex,
-
-  argTypes: {
-    ...defaultArgs,
-  },
-
-  parameters: {
-    viewMode: 'docs',
-  },
-};
-
-export const Overview = {
-  render: Default.bind({}),
-  name: 'Overview',
-
-  argTypes: {
-    ...Default.argTypes,
-  },
-
-  args: {},
-};

package/src/components/Flex/RFlex.vue

@@ -1,91 +0,0 @@
-<script setup lang="ts">
-import { computed, type CSSProperties } from 'vue';
-import '../../index.css';
-
-export interface IProps {
-  /**
-   * Shorthand for `alignItems` style prop
-   * @type CSSProperties["alignItems"]
-   * @example
-   * <Flex align="center" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
-   */
-  align?: CSSProperties['alignItems'];
-
-  /**
-   * Shorthand for `justifyContent` style prop
-   * @type CSSProperties["justifyContent"]
-   * @example
-   * <Flex justify="center" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
-   */
-  justify?: CSSProperties['justifyContent'];
-
-  /**
-   * Shorthand for `flexWrap` style prop
-   * @type CSSProperties["flexWrap"]
-   * @example
-   * <Flex wrap="wrap" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
-   */
-  wrap?: CSSProperties['flexWrap'];
-
-  /**
-   * Shorthand for `flexDirection` style prop
-   * @type CSSProperties["flexDirection"]
-   * @example
-   * <Flex direction="column" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
-   */
-  direction?: CSSProperties['flexDirection'];
-
-  /**
-   * Shorthand for `flexBasis` style prop
-   * @type CSSProperties["flexBasis"]
-   * @example
-   * <Flex basis="50%" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
-   */
-  basis?: CSSProperties['flexBasis'];
-
-  /**
-   * Shorthand for `flexGrow` style prop
-   * @type CSSProperties["flexGrow"]
-   * @example
-   * <Flex grow="1" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
-   */
-  grow?: CSSProperties['flexGrow'];
-
-  /**
-   * Shorthand for `flexShrink` style prop
-   * @type CSSProperties["flexShrink"]
-   * @example
-   * <Flex shrink="1" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
-   */
-  shrink?: CSSProperties['flexShrink'];
-}
-
-const props = defineProps<IProps>();
-const styles = computed(() => ({
-  alignItems: props.align,
-  justifyContent: props.justify,
-  flexWrap: props.wrap,
-  flexDirection: props.direction,
-  flexBasis: props.basis,
-  flexGrow: props.grow,
-  flexShrink: props.shrink,
-}));
-</script>
-
-<template>
-  <div class="flex" :style="styles">
-    <slot />
-  </div>
-</template>
-<style scoped>
-.flex {
-  display: flex;
-}
-</style>

package/src/components/Grid/Grid.mdx

@@ -1,20 +0,0 @@
-import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
-import * as GridStories from './Grid.stories';
-
-<Meta of={GridStories} />
-
-# Grid
-
-Grid is a simple box component that can be used to create layouts.
-
-> A simple box Components
-
-<Canvas>
-  <Story of={GridStories.Overview} />
-</Canvas>
-
-### Playground <a id="playground" />
-
-> Changes you make in the controls will be reflected in the example above.
-
-<Controls of={GridStories.Overview} exclude={/^(click|default|on.*)$/} />

package/src/components/Grid/Grid.stories.js

@@ -1,107 +0,0 @@
-import Grid from './RGrid.vue';
-
-const Default = (args) => ({
-  components: { Grid },
-  setup() {
-    return { args };
-  },
-  template: `<Grid v-bind="args">
-  hello world
-  </Grid>`,
-});
-
-const defaultArgs = {
-  templateColumns: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: 'repeat(3, 1fr)',
-  },
-  gap: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: '20px',
-  },
-  rowGap: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: '20px',
-  },
-  columnGap: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: '20px',
-  },
-  autoFlow: {
-    control: {
-      type: 'select',
-      options: ['row', 'column', 'dense', 'row dense', 'column dense'],
-    },
-    defaultValue: 'row',
-  },
-  autoRows: {
-    control: {
-      type: 'select',
-      options: ['auto', 'min-content', 'max-content', '1rem'],
-    },
-    defaultValue: 'auto',
-  },
-  autoColumns: {
-    control: {
-      type: 'select',
-      options: ['auto', 'min-content', 'max-content', '1rem'],
-    },
-    defaultValue: 'auto',
-  },
-  templateRows: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: 'repeat(3, 1fr)',
-  },
-  templateAreas: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: 'none',
-  },
-  column: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: '1 / 2',
-  },
-  row: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: '1 / 2',
-  },
-};
-
-export default {
-  title: 'Layout/Grid',
-  component: Grid,
-
-  argTypes: {
-    ...defaultArgs,
-  },
-
-  parameters: {
-    viewMode: 'docs',
-  },
-};
-
-export const Overview = {
-  render: Default.bind({}),
-  name: 'Overview',
-
-  argTypes: {
-    ...Default.argTypes,
-  },
-
-  args: {},
-};