@rocketui/vue 0.0.46 → 0.0.47

package/src/components/Grid/RGrid.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue';
+import '../../index.css';
+export interface IProps extends CSSProperties {
+  /**
+   * Shorthand prop for `gridTemplateColumns`
+   * @type CSSProperties["gridTemplateColumns"]
+   * @default 'none'
+   * @example
+   * <Grid templateColumns="repeat(12, 1fr)" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
+   */
+  templateColumns?: CSSProperties['gridTemplateColumns'];
+
+  /**
+   * Shorthand prop for `gridGap`
+   * @type CSSProperties["gridGap"]
+   * @default '0'
+   * @example
+   * <Grid gap="0" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/gap
+   */
+  gap?: CSSProperties['gap'];
+
+  /**
+   * Shorthand prop for `rowGap`
+   * @type CSSProperties["rowGap"]
+   * @default '1rem'
+   * @example
+   * <Grid rowGap="1rem" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
+   */
+  rowGap?: CSSProperties['rowGap'];
+
+  /**
+   * Shorthand prop for `columnGap`
+   * @type CSSProperties["columnGap"]
+   * @default '1rem'
+   * @example
+   * <Grid columnGap="1rem" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
+   */
+  columnGap?: CSSProperties['columnGap'];
+
+  /**
+   * Shorthand prop for `gridAutoFlow`
+   * @type CSSProperties["gridAutoFlow"]
+   * @default 'row'
+   * @example
+   * <Grid autoFlow="row" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
+   */
+  autoFlow?: CSSProperties['gridAutoFlow'];
+
+  /**
+   * Shorthand prop for `gridAutoRows`
+   * @type CSSProperties["gridAutoRows"]
+   * @default 'auto'
+   * @example
+   * <Grid autoRows="auto" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows
+   */
+  autoRows?: CSSProperties['gridAutoRows'];
+
+  /**
+   * Shorthand prop for `gridAutoColumns`
+   * @type CSSProperties["gridAutoColumns"]
+   * @default 'auto'
+   * @example
+   * <Grid autoColumns="auto" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
+   */
+  autoColumns?: CSSProperties['gridAutoColumns'];
+
+  /**
+   * Shorthand prop for `gridTemplateRows`
+   * @type CSSProperties["gridTemplateRows"]
+   * @default 'repeat(12, 1fr)'
+   * @example
+   * <Grid templateRows="repeat(12, 1fr)" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
+   */
+  templateRows?: CSSProperties['gridTemplateRows'];
+
+  /**
+   * Shorthand prop for `gridTemplateAreas`
+   * @type CSSProperties["gridTemplateAreas"]
+   * @default 'repeat(12, 1fr)'
+   * @example
+   * <Grid templateAreas="repeat(12, 1fr)" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
+   */
+  templateAreas?: CSSProperties['gridTemplateAreas'];
+
+  /**
+   * Shorthand prop for `gridColumn`
+   * @type CSSProperties["gridColumn"]
+   * @example
+   * <Grid column="1 / 3" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
+   */
+  column?: CSSProperties['gridColumn'];
+
+  /**
+   * Shorthand prop for `gridRow`
+   * @type CSSProperties["gridRow"]
+   * @example
+   * <Grid row="1 / 3" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
+   */
+  row?: CSSProperties['gridRow'];
+}
+const props = defineProps<IProps>();
+
+const gridStyle = computed(() => ({
+  gridTemplateColumns: props.templateColumns,
+  gridGap: props.gap,
+  rowGap: props.rowGap,
+  columnGap: props.columnGap,
+  gridAutoFlow: props.autoFlow,
+  gridAutoRows: props.autoRows,
+  gridAutoColumns: props.autoColumns,
+  gridTemplateRows: props.templateRows,
+  gridTemplateAreas: props.templateAreas,
+  gridColumn: props.column,
+  gridRow: props.row,
+}));
+</script>
+<template>
+  <div class="grid" :style="gridStyle">
+    <slot />
+  </div>
+</template>
+<style scoped>
+.grid {
+  display: grid;
+}
+</style>

package/src/components/Icon/Icon.mdx

@@ -0,0 +1,68 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import * as IconStories from './Icon.stories';
+
+<Meta of={IconStories} />
+
+# Icon
+
+The Icon component is used to display a graphical icon in your application.
+
+- [Overview](#overview)
+
+- [Playground](#playground)
+
+- [Usage with props](#usage)
+
+- [Tips](#tips)
+
+## Overview <a id="overview" />
+
+The Icon component is a graphical element that is used to visually represent an idea, concept, or action. It is typically used in conjunction with text or other graphical elements to provide a clear and concise way of conveying information to the user. It is highly customizable, allowing the developer to control the size, color, and style of the icon to match the design of the application.
+
+The Icon component is a versatile and useful tool for adding visual emphasis and clarity to an application's user interface. It is important to use icons consistently and thoughtfully in order to create a cohesive and intuitive user experience.
+
+To access a comprehensive list of icons available in our design system, please refer to the icon list page by clicking [the following link](https://pictogrammers.com/library/mdi/).
+
+<Canvas>
+  <Story of={IconStories.Overview} />
+</Canvas>
+
+### Playground <a id="playground" />
+
+> Changes you make in the controls will be reflected in the example above.
+
+<Controls of={IconStories.Overview} />
+
+## Usage with props <a id="usage" />
+
+### name (required)
+
+The **name** prop is a string that specifies the name of the icon you want to display. The list of available icons and their names can be found in the design system's icon library.
+
+### size (optional)
+
+The **size** prop is a number that specifies the size of the icon.
+
+### viewBox (optional)
+
+The **viewBox** prop is a string that specifies the viewBox of the icon.
+
+### flip (optional)
+
+The **flip** prop is a string that specifies the flip of the icon.
+
+### rotate (optional)
+
+The **rotate** prop is a number that specifies the rotation of the icon.
+
+### Tips <a id="tips" />
+
+💡 Choose a set of icons that are visually consistent and easy to understand. This will help create a cohesive look and feel for your application.
+
+💡 Icons should be used to supplement text, not replace it. Text is still the most effective way to convey information, so make sure to use icons in conjunction with clear, concise text labels.
+
+💡 Make sure to choose an icon that accurately represents the action or concept it is being used to represent. Using the wrong icon can lead to confusion for the user.
+
+💡 Choose colors and sizes for your icons that are consistent with the overall design of your application. Large, bright icons may be attention-grabbing, but they can also be overwhelming if used too frequently.
+
+💡 Make sure to consider accessibility when using icons. Use appropriate alt text for your icons, and consider providing additional information for users who may be unable to see the icons.

package/src/components/Icon/Icon.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
+import Icon from './RIcon.vue';
+
+const DefaultArgs = {};
+
+const DefaultArgTypes = {};
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+const IconStory = {
+  title: 'Components/Icon',
+  component: Icon,
+  setup: (args: typeof Icon) => ({
+    args,
+    onClick: action('click'),
+  }),
+  template: `<Icon v-bind="args" @click="onClick"/>`,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
+  tags: [],
+  args: DefaultArgs,
+  argTypes: DefaultArgTypes,
+} as Meta<typeof Icon>;
+
+export default IconStory;
+
+type Story = StoryObj<typeof IconStory>;
+
+export const Overview: Story = {
+  args: {
+    name: 'mdiFaceMan',
+  },
+};

package/src/components/Icon/RIcon.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { SVGAttributes } from 'vue';
+// @ts-ignore
+import icons from '@/assets/icons/mdi.js';
+
+export interface IProps {
+  /**
+   * Name of the icon
+   * @type SVGAttributes['name']
+   * @default ''
+   * @example
+   * <Icon name="icon" />
+   */
+  name: SVGAttributes['name'];
+
+  /**
+   * Size of the icon
+   * @type SVGAttributes['width'] | SVGAttributes['height']
+   * @default 24
+   * @example
+   * <Icon size="24" />
+   */
+  size?: SVGAttributes['width'] | SVGAttributes['height'];
+
+  /**
+   * Viewbox of the icon
+   * @type SVGAttributes['viewBox']
+   * @default '0 0 24 24'
+   * @example
+   * <Icon viewBox="0 0 24 24" />
+   */
+  viewBox?: SVGAttributes['viewBox'];
+}
+const props = withDefaults(defineProps<IProps>(), {
+  name: '',
+  size: 24,
+  viewBox: '0 0 24 24',
+});
+</script>
+<template>
+  <svg
+    class="r-icon"
+    :width="props.size"
+    :height="props.size"
+    :viewBox="props.viewBox"
+  >
+    <path :d="icons[props.name]" />
+  </svg>
+</template>
+<style>
+.r-icon {
+  path {
+    fill: currentColor;
+  }
+}
+</style>

package/src/components/Icon/icon.spec.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import Icon from './RIcon.vue';
+
+describe('Icon', () => {
+  it('renders properly', () => {
+    const wrapper = mount(Icon, {
+      props: {
+        name: 'face',
+        size: '24',
+        color: 'rgb(255, 255, 255)',
+        kind: 'outlined',
+        fontWeight: 'bold',
+      },
+    });
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('span').exists()).toBe(true);
+    expect(wrapper.find('span').classes().includes('material-icons-outlined'));
+    expect(wrapper.find('span').text()).toBe('face');
+    expect(wrapper.find('span').attributes('style')).toContain(
+      'font-size: 24px; font-weight: bold; color: rgb(255, 255, 255);'
+    );
+  });
+});

package/src/components/ItemGroup/ItemGroup.stories.ts

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import ItemGroup from './RItemGroup.vue';
+import Item from './RItem.vue';
+
+const ItemGroupStory = {
+  title: 'Selections/ItemGroup',
+  component: ItemGroup,
+  setup(args: typeof ItemGroup) {
+    return { args };
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    default: {
+      description: 'Slot for the items',
+      table: {
+        type: {
+          summary: JSON.stringify({
+            select: '(id: number, value: boolean) => void',
+            isSelected: '(id: number) => boolean',
+            selected: 'number[]',
+          }),
+        },
+      },
+    },
+    itemProps: {
+      table: {
+        category: 'component',
+        type: {
+          summary: JSON.stringify({
+            value: 'number',
+            disabled: 'boolean',
+            selectedClass: 'string',
+          }),
+        },
+      },
+    },
+    itemSlot: {
+      table: {
+        category: 'component',
+        type: {
+          summary: JSON.stringify({
+            isSelected: '(id: number) => boolean',
+            value: 'number',
+            selectedClass: 'string',
+            disabled: 'boolean',
+            select: '(id: number, value: boolean) => void',
+            toggle: '(id: number) => void',
+          }),
+        },
+      },
+    },
+  },
+} as Meta<typeof ItemGroup>;
+
+export default ItemGroupStory;
+
+type Story = StoryObj<typeof ItemGroupStory>;
+
+export const Overview: Story = {
+  render: (args: any) => ({
+    components: { ItemGroup, Item },
+    setup() {
+      return { args, selected: [] };
+    },
+    template: `
+      <ItemGroup v-model="selected" selectedClass="bg-blue-500 text-white">
+        <div class="flex gap-2">
+          <Item
+          v-for="i in 5"
+          :key="i"
+          :value="i"
+          :disabled="i === 3"
+          v-slot="{ isSelected, toggle, disabled, selectedClass }"
+        >
+          <div
+            :class="[
+              'p-2 border border-gray-300 rounded cursor-pointer',
+              isSelected ? selectedClass : 'bg-white',
+              disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100',
+            ]"
+            @click="toggle"
+          >
+            <div>{{ isSelected ? 'Selected' : 'Click Me!' }}</div>
+          </div>
+        </Item>
+      </div>
+      </ItemGroup>
+    `,
+  }),
+};

package/src/components/ItemGroup/RItem.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, inject, withDefaults } from 'vue';
+
+export interface ItemProps {
+  /**
+   * The value of the item
+   * @default null
+   * @type any
+   * @example
+   * <RItem :value="1" />
+   */
+  value: any;
+
+  /**
+   * Whether the item is disabled
+   * @default false
+   * @type boolean
+   * @example
+   * <RItem :disabled="true" />
+   */
+  disabled?: boolean;
+
+  /**
+   * The class to apply to the selected item
+   * @default ''
+   * @type string
+   * @example
+   * <RItem selectedClass="bg-blue-500 text-white" />
+   */
+  selectedClass?: string;
+}
+
+const RItemGroupSymbol = 'rocket-ui:r-item-group';
+
+const props = withDefaults(defineProps<ItemProps>(), {
+  disabled: false,
+  selectedClass: '',
+  value: null,
+});
+
+const isSelected = inject(`${RItemGroupSymbol}:isSelected`) as (
+  id: number
+) => boolean;
+
+const classes = inject(`${RItemGroupSymbol}:selectedClass`, '') as string;
+const selectedClass = computed(() => {
+  return isSelected(props.value) && [classes, props.selectedClass];
+});
+
+const select = inject(`${RItemGroupSymbol}:select`) as (
+  id: number,
+  value: boolean
+) => void;
+
+const handleToggle = () => {
+  if (props.disabled) return;
+  select(props.value as number, !isSelected(props.value as number));
+};
+
+const handleSelect = () => {
+  if (props.disabled) return;
+  select(props.value as number, true);
+};
+</script>
+<template>
+  <slot
+    :isSelected="isSelected(props.value as number)"
+    :value="props.value"
+    :selectedClass="selectedClass"
+    :disabled="props.disabled"
+    :select="handleSelect"
+    :toggle="handleToggle"
+  />
+</template>

package/src/components/ItemGroup/RItemGroup.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { ref, computed, provide, withDefaults } from 'vue';
+
+export interface ItemGroupProps {
+  /**
+   * The value of the selected items
+   * @default []
+   * @model
+   * @type number[]
+   * @example
+   * <RItemGroup v-model="selectedItems" />
+   */
+  modelValue: number[];
+
+  /**
+   * The class to apply to the selected items
+   * @default ''
+   * @type string
+   * @example
+   * <RItemGroup selectedClass="bg-blue-500 text-white" />
+   */
+  selectedClass?: string;
+
+  /**
+   * Whether the item group is disabled
+   * @default false
+   * @type boolean
+   * @example
+   * <RItemGroup :disabled="true" />
+   */
+  disabled?: boolean;
+
+  /**
+   * Whether the item group is mandatory
+   * @default false
+   * @type boolean
+   * @example
+   * ```js
+   * const selected = ref<number[]>([1]);
+   * ```
+   * ```html
+   * <RItemGroup :mandatory="true" v-model="selected" />
+   * ```
+   */
+  mandatory?: boolean;
+
+  /**
+   * The maximum number of items that can be selected
+   * @default 0
+   * @type number
+   * @example
+   * <RItemGroup :max="5" />
+   */
+  max?: number;
+
+  /**
+   * The tag to use for the item group
+   * @default div
+   * @type string
+   * @example
+   * <RItemGroup as="ul" />
+   */
+  as?: string;
+
+  /**
+   * Whether the item group allows multiple selections
+   * @default false
+   * @type boolean
+   * @example
+   * <RItemGroup :multiple="true" />
+   */
+  multiple?: boolean;
+}
+
+const RItemGroupSymbol = 'rocket-ui:r-item-group';
+
+const props = withDefaults(defineProps<ItemGroupProps>(), {
+  disabled: false,
+  mandatory: false,
+  max: 0,
+  as: 'div',
+  selectedClass: '',
+  modelValue: () => [] as number[],
+});
+
+const emits = defineEmits(['update:modelValue']);
+
+const tag = ref<string>(props.as ?? 'div');
+
+const selectedItems = ref<number[]>(props.modelValue ?? []);
+
+const selectedClass = computed(() => props.selectedClass);
+provide(`${RItemGroupSymbol}:selectedClass`, selectedClass.value);
+
+const isSelected = (id: number) => {
+  return selectedItems.value.includes(id);
+};
+provide(`${RItemGroupSymbol}:isSelected`, isSelected);
+
+const select = (id: number, value: boolean) => {
+  if (props.disabled) return;
+  if (props.mandatory && selectedItems.value.length === 1 && value) return;
+  if (props.max && selectedItems.value.length === props.max && value) return;
+  if (props.multiple) {
+    if (value) {
+      selectedItems.value.push(id);
+    } else {
+      selectedItems.value = selectedItems.value.filter((item) => item !== id);
+    }
+  } else {
+    selectedItems.value = value ? [id] : [];
+  }
+
+  emits('update:modelValue', selectedItems.value);
+};
+provide(`${RItemGroupSymbol}:select`, select);
+</script>
+<template>
+  <component :is="tag">
+    <slot :select="select" :isSelected="isSelected" :selected="selectedItems" />
+  </component>
+</template>

package/src/components/ItemGroup/__snapshots__/itemgroup.spec.ts.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ItemGroup > should render correctly 1`] = `
+"<div>
+  <div>Item</div>
+</div>"
+`;
+
+exports[`RItemGroup > should render correctly 1`] = `
+"<div>
+  <div>Item</div>
+</div>"
+`;

package/src/components/ItemGroup/itemgroup.spec.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+
+import { h } from 'vue';
+
+import RItemGroup from './RItemGroup.vue';
+import RItem from './RItem.vue';
+
+const defaultSlot = () => [
+  h(
+    RItem,
+    { value: 'foo' },
+    {
+      default: ({ toggle }: any) =>
+        h('div', { id: 'item', onClick: toggle }, ['foo']),
+    }
+  ),
+  h(
+    RItem,
+    { value: 'bar' },
+    {
+      default: ({ toggle }: any) =>
+        h('div', { id: 'item', onClick: toggle }, ['bar']),
+    }
+  ),
+];
+
+describe('RItemGroup', () => {
+  it('should render correctly', async () => {
+    const wrapper = mount(RItemGroup, {
+      slots: {
+        default: defaultSlot,
+      },
+    });
+
+    const items = wrapper.findAll('#item');
+
+    await items[0].trigger('click');
+    await items[1].trigger('click');
+
+    const events = wrapper.emitted('update:modelValue');
+
+    expect(events).toHaveLength(2);
+    expect(events).toEqual([[['foo']], [['bar']]]);
+  });
+
+  it('should not deselect value when using mandatory prop', async () => {
+    const wrapper = mount(RItemGroup, {
+      props: {
+        mandatory: true,
+        modelValue: 'foo',
+      },
+      slots: {
+        default: defaultSlot,
+      },
+    });
+
+    const items = wrapper.findAll('#item');
+
+    await items[0].trigger('click');
+
+    const events = wrapper.emitted('update:modelValue');
+
+    expect(events).toHaveLength(1);
+  });
+});