@rocketui/vue 0.0.47 → 0.0.48

package/src/components/Tooltip/Tooltip.stories.ts

@@ -1,203 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import Tooltip from './RTooltip.vue';
-import Button from '../Button/RButton.vue';
-import Icon from '../Icon/RIcon.vue';
-import { vTooltip } from '../../directives';
-
-const DefaultArgTypes = {
-  placement: {
-    type: 'select',
-    options: [
-      'top',
-      'right',
-      'bottom',
-      'left',
-      'top-start',
-      'top-end',
-      'right-start',
-      'right-end',
-      'bottom-start',
-      'bottom-end',
-      'left-start',
-      'left-end',
-    ],
-  },
-  triggers: {
-    type: 'select',
-    options: ['hover', 'click', 'manual'],
-  },
-
-  offset: {
-    control: {
-      type: 'range',
-    },
-  },
-  padding: {
-    control: {
-      type: 'range',
-    },
-    defaultValue: 0,
-  },
-};
-
-const DefaultArgs = {
-  placement: 'top',
-  text: 'Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand the meaning, function or alt-text of an element.',
-  dark: true,
-  light: false,
-  triggers: 'hover',
-  autoHide: false,
-  hideDelay: 3000,
-  showDelay: 0,
-  shown: false,
-  disabled: false,
-  offset: 12,
-  padding: 0,
-  outsideClick: false,
-  resizable: false,
-};
-
-const TooltipStory = {
-  title: 'Components/Tooltip',
-  render: (args: any) => ({
-    components: { Tooltip, Button },
-    setup: () => {
-      return {
-        args,
-      };
-    },
-    template: `
-    <Tooltip
-      v-bind="args"
-      @show="show"
-      @hide="hide"
-    >
-      <template #trigger>
-        <Button variant="primary">Tooltip</Button>
-      </template>
-    </Tooltip>
-    `,
-  }),
-  argTypes: DefaultArgTypes,
-  args: DefaultArgs,
-} as Meta<typeof Tooltip>;
-
-export default TooltipStory;
-
-type Story = StoryObj<typeof TooltipStory>;
-
-const WithContentSlotStory = {
-  render: (args: any) => ({
-    components: { Tooltip, Icon },
-    setup() {
-      return {
-        args,
-      };
-    },
-    template: `
-    <Tooltip
-      v-bind="args"
-      @show="show"
-      @hide="hide"
-    >
-      <template #trigger>
-        <Icon name="mdiInformation" />
-      </template>
-      <template #content>
-        <span style="background: red; color: #fff; padding: 8px;">This is a tooltip</span>
-      </template>
-    </Tooltip>
-    `,
-  }),
-};
-
-const ToggleTemplate = {
-  render: (args: any) => ({
-    components: { Tooltip },
-    setup() {
-      return {
-        args,
-      };
-    },
-    template: `
-    <Tooltip
-      v-bind="args"
-      @show="show"
-      @hide="hide"
-    >
-      <template #trigger>
-        <span>Toggle tooltip</span>
-      </template>
-    </Tooltip>
-    `,
-  }),
-};
-
-const WithDirectivesStory = {
-  render: (args: any) => ({
-    components: { Button },
-    directives: { tooltip: vTooltip },
-    setup: () => ({
-      args,
-    }),
-    template: `
-    <div 
-      v-tooltip="{
-        triggerContent: '<div>Hello World!</div>',
-        text: 'Directive tooltip',
-        autoHide: false,
-        placement: 'right',
-        offset: 30,
-        }" 
-      
-      />
-    `,
-  }),
-  args: {},
-};
-
-export const Overview: Story = {
-  args: {},
-};
-
-export const Default: Story = {
-  args: {},
-};
-
-export const WithClickTrigger: Story = {
-  render: ToggleTemplate.render,
-
-  args: {
-    triggers: 'click',
-    text: 'Clicked!',
-    outsideClick: true,
-  },
-};
-
-export const WithManualTrigger: Story = {
-  args: {
-    triggers: 'manual',
-    dark: false,
-    light: true,
-    text: 'Manual!',
-  },
-};
-
-export const WithContentSlot: Story = {
-  render: WithContentSlotStory.render,
-
-  args: {
-    text: '',
-    triggers: 'hover',
-  },
-};
-
-export const WithDirectives: Story = {
-  render: WithDirectivesStory.render,
-
-  parameters: {
-    controls: {
-      disable: true,
-    },
-  },
-};

package/src/components/Tooltip/common.ts

@@ -1,91 +0,0 @@
-import {
-  computePosition,
-  flip,
-  shift,
-  offset,
-  arrow,
-  hide,
-} from '@floating-ui/dom';
-import type { Ref } from 'vue';
-
-export function update(
-  { value: trigger }: Ref<HTMLDivElement>,
-  { value: tooltip }: Ref<HTMLDivElement>,
-  { value: arrowElement }: Ref<HTMLDivElement>,
-  placement: Placements,
-  offsetParam: number,
-  padding: number
-) {
-  if (!trigger || !tooltip) return;
-  computePosition(trigger, tooltip, {
-    placement,
-    middleware: [
-      offset(offsetParam),
-      shift({ padding }),
-      arrow({ element: arrowElement }),
-      flip(),
-      hide(),
-    ],
-  }).then(({ x, y, placement, middlewareData }) => {
-    Object.assign(tooltip.style, {
-      left: `${x}px`,
-      top: `${y}px`,
-    });
-
-    if (arrowElement && middlewareData.arrow) {
-      const { x: arrowX, y: arrowY } = middlewareData.arrow;
-
-      const staticSide = {
-        top: Placement.Bottom,
-        right: Placement.Left,
-        bottom: Placement.Top,
-        left: Placement.Right,
-      }[placement.split('-')[0]];
-
-      Object.assign(arrowElement.style, {
-        left: x != null ? `${arrowX}px` : '',
-        top: y != null ? `${arrowY}px` : '',
-        right: '',
-        bottom: '',
-        [`${staticSide}`]: '-4px',
-      });
-    }
-  });
-}
-
-export type Placements =
-  | 'top'
-  | 'bottom'
-  | 'left'
-  | 'right'
-  | 'top-start'
-  | 'top-end'
-  | 'right-start'
-  | 'right-end'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'left-start'
-  | 'left-end';
-
-export enum Placement {
-  Top = 'top',
-  Bottom = 'bottom',
-  Left = 'left',
-  Right = 'right',
-  TopStart = 'top-start',
-  TopEnd = 'top-end',
-  RightStart = 'right-start',
-  RightEnd = 'right-end',
-  BottomStart = 'bottom-start',
-  BottomEnd = 'bottom-end',
-  LeftStart = 'left-start',
-  LeftEnd = 'left-end',
-}
-
-export type Triggers = 'click' | 'hover' | 'manual';
-
-export enum Trigger {
-  Click = 'click',
-  Hover = 'hover',
-  Manual = 'manual',
-}

package/src/components/Tooltip/tooltip.css

@@ -1,34 +0,0 @@
-@import '../../index.css';
-
-.trigger {
-  @apply relative inline-block cursor-pointer bg-transparent rounded-full;
-}
-.tooltip {
-  @apply z-50 bg-transparent m-0 p-0 top-0 left-0 absolute w-max hidden;
-
-  &__content {
-    @apply font-normal p-4 rounded-lg text-xs max-w-xs;
-
-    &--dark {
-      @apply text-white bg-[var(--neutral-900)];
-    }
-    &--light {
-      @apply text-[var(--neutral-900)] bg-white;
-    }
-  }
-
-  &__arrow {
-    @apply absolute w-4 h-4 rotate-45 -z-10;
-
-    &--dark {
-      @apply bg-[var(--neutral-900)];
-    }
-    &--light {
-      @apply bg-white;
-    }
-  }
-
-  &--light {
-    @apply shadow-2xl rounded-lg;
-  }
-}

package/src/components/Tooltip/tooltip.spec.ts

@@ -1,81 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { mount } from '@vue/test-utils';
-
-import Tooltip from './RTooltip.vue';
-import { Trigger } from './common';
-
-describe('Tooltip', () => {
-  it('click trigger', () => {
-    const wrapper = mount(Tooltip, {
-      props: {
-        triggers: Trigger.Click,
-        outsideClick: true,
-      },
-    });
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('.trigger').exists()).toBe(true);
-    expect(wrapper.find('.tooltip').exists()).toBe(true);
-    expect(
-      wrapper
-        .find('.trigger')
-        .trigger('click')
-        .then(() => {
-          expect(wrapper.find('.tooltip').attributes('style')).toBe(
-            'display: block;'
-          );
-        })
-        .then(() => {
-          wrapper.find('.trigger').trigger('click');
-          expect(wrapper.find('.tooltip').attributes('style')).toBe(
-            'display: "";'
-          );
-        })
-    );
-  });
-  it('hover trigger', () => {
-    const wrapper = mount(Tooltip, {
-      props: {
-        triggers: Trigger.Hover,
-      },
-    });
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('.trigger').exists()).toBe(true);
-    expect(wrapper.find('.tooltip').exists()).toBe(true);
-    expect(
-      wrapper
-        .find('.trigger')
-        .trigger('mouseenter')
-        .then(() => {
-          expect(wrapper.find('.tooltip').attributes('style')).toBe(
-            'display: block;'
-          );
-        })
-        .then(() => {
-          wrapper.find('.trigger').trigger('mouseleave');
-          expect(wrapper.find('.tooltip').attributes('style')).toBe(
-            'display: "";'
-          );
-        })
-    );
-  });
-  it('manual trigger', () => {
-    const wrapper = mount(Tooltip, {
-      props: {
-        triggers: Trigger.Manual,
-        shown: true,
-        autoHide: true,
-        hideDelay: 1000,
-      },
-    });
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('.trigger').exists()).toBe(true);
-    expect(wrapper.find('.tooltip').exists()).toBe(true);
-    expect(wrapper.find('.tooltip').attributes('style')).toBe(
-      'display: block;'
-    );
-    setTimeout(() => {
-      expect(wrapper.find('.tooltip').attributes('style')).toBe('""');
-    }, 1000);
-  });
-});

package/src/components/Typography/Typography.mdx

@@ -1,109 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import './typography.css';
-
-<Meta
-  title="Design Tokens/Typography"
-  parameters={{
-    viewMode: 'docs',
-    previewTabs: {
-      canvas: { hidden: true },
-    },
-  }}
-/>
-
-export const Thing = ({
-  fontSize,
-  lineHeight,
-  fontWeight = '400',
-  as = 'p',
-  text,
-}) => {
-  return (
-    <div>
-      <component is={as} style={{ fontSize, lineHeight, fontWeight }}>
-        {text}
-      </component>
-      <p
-        style={{ fontSize: '12px' }}
-      >{`Font size: ${fontSize} | Line height: ${lineHeight} | Font Weight: ${fontWeight}`}</p>
-    </div>
-  );
-};
-
-# Typography
-
-## Heading
-
-<Thing as={'h1'} text={'Heading 1'} fontSize={'72px'} lineHeight={'91.2px'} />
-
-```html
-.text-h1
-```
-
-<Thing as={'h2'} text={'Heading 2'} fontSize={'48px'} lineHeight={'60.8px'} />
-
-```html
-.text-h2;
-```
-
-<Thing as={'h3'} text={'Heading 3'} fontSize={'36px'} lineHeight={'45.6px'} />
-
-```html
-.text-h3
-```
-
-<Thing as={'h4'} text={'Heading 4'} fontSize={'24px'} lineHeight={'30.4px'} />
-
-```html
-.text-h4
-```
-
-<Thing as={'h5'} text={'Heading 5'} fontSize={'18px'} lineHeight={'22.4px'} />
-
-```html
-.text-h5
-```
-
-## Paragraph
-
-<Thing text={'Title'} fontSize={'24px'} lineHeight={'32px'} />
-
-```html
-.text-title
-```
-
-<Thing text={'Subtitle Large'} fontSize={'20px'} lineHeight={'28px'} />
-
-```html
-.text-sub-title-1
-```
-
-<Thing text={'Subtitle Small'} fontSize={'18px'} lineHeight={'26px'} />
-
-```html
-.text-sub-title-2
-```
-
-<Thing text={'Body Large'} fontSize={'16px'} lineHeight={'24px'} />
-
-```html
-.text-body
-```
-
-<Thing text={'Body Medium'} fontSize={'14px'} lineHeight={'20px'} />
-
-```html
-.text-body-1
-```
-
-<Thing text={'Body Small'} fontSize={'12px'} lineHeight={'16px'} />
-
-```html
-.text-body-2
-```
-
-<Thing text={'Caption'} fontSize={'10px'} lineHeight={'14px'} />
-
-```html
-.text-caption
-```

package/src/components/Typography/typography.css

@@ -1,128 +0,0 @@
-@import '../../index.css';
-
-.text-h1 {
-  font-size: 4.5rem;
-  font-weight: 400;
-  line-height: 5.7rem;
-
-  @media (max-width: 767px) {
-    font-size: 3rem;
-    line-height: 3.5rem;
-  }
-}
-
-.text-h2 {
-  font-size: 3.75rem;
-  font-weight: 400;
-  line-height: 4.75rem;
-
-  @media (max-width: 767px) {
-    font-size: 2.5rem;
-    line-height: 3rem;
-  }
-}
-
-.text-h3 {
-  font-size: 3rem;
-  font-weight: 400;
-  line-height: 3.875rem;
-
-  @media (max-width: 767px) {
-    font-size: 2rem;
-    line-height: 2.5rem;
-  }
-}
-
-.text-h4 {
-  font-size: 2.5rem;
-  font-weight: 400;
-  line-height: 3.25rem;
-
-  @media (max-width: 767px) {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-}
-
-.text-h5 {
-  font-size: 2rem;
-  font-weight: 400;
-  line-height: 2.625rem;
-
-  @media (max-width: 767px) {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
-}
-
-.text-title {
-  font-size: 1.5rem;
-  font-weight: 400;
-  line-height: 2rem;
-
-  @media (max-width: 767px) {
-    font-size: 1.125rem;
-    line-height: 1.5rem;
-  }
-}
-
-.text-sub-title-1 {
-  font-size: 1.25rem;
-  font-weight: 400;
-  line-height: 1.75rem;
-
-  @media (max-width: 767px) {
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
-}
-
-.text-sub-title-2 {
-  font-size: 1.125rem;
-  font-weight: 400;
-  line-height: 1.625rem;
-
-  @media (max-width: 767px) {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-}
-
-.text-body {
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-
-  @media (max-width: 767px) {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-}
-
-.text-body-1 {
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.25rem;
-
-  @media (max-width: 767px) {
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-}
-
-.text-body-2 {
-  font-size: 0.75rem;
-  font-weight: 400;
-  line-height: 1rem;
-
-  @media (max-width: 767px) {
-    font-size: 0.625rem;
-    line-height: 0.875rem;
-  }
-}
-
-.text-caption {
-  font-size: 0.625rem;
-  font-weight: 400;
-  line-height: 0.875rem;
-}

package/src/directives/index.ts

@@ -1,19 +0,0 @@
-import { type App, createApp, h, ref, type DirectiveBinding } from 'vue';
-import Tooltip from '../components/Tooltip/RTooltip.vue';
-
-export const vTooltip = {
-  mounted(el: HTMLElement, binding: DirectiveBinding) {
-    console.log('vTooltip');
-    const app: App = createApp({
-      setup() {
-        const props = ref(binding.value);
-
-        return () =>
-          h(Tooltip, {
-            ...props.value,
-          });
-      },
-    });
-    app.mount(el);
-  },
-};