@rocketui/vue 0.0.46 → 0.0.47

package/src/components/Textfield/textfield.css

@@ -0,0 +1,81 @@
+@import '../../index.css';
+
+fieldset {
+  @apply border-none m-0 p-0;
+}
+
+.textfield__wrapper {
+  @apply flex flex-col items-start justify-start;
+}
+
+.input-wrapper {
+  @apply flex flex-col items-start justify-start w-full;
+}
+
+input {
+  @apply w-full border-none h-full bg-transparent focus:outline-none text-base m-0 p-0;
+
+  &::placeholder {
+    @apply text-[var(--neutral-500)];
+  }
+}
+
+.textfield {
+  @apply gap-2 box-border w-full flex items-center text-sm border border-solid border-[var(--neutral-200)] text-[var(--neutral-500)] bg-[var(--textfield-bg)]  rounded-lg px-4 py-3.5;
+
+  &__label {
+    @apply text-[var(--neutral-900)] text-sm p-0 mb-2;
+  }
+  &__prepend-icon {
+    &--error {
+      @apply text-red-500;
+    }
+    &--loading {
+      @apply animate-spin-reverse;
+    }
+  }
+  &__append-icon {
+    &--error {
+      @apply animate-bounce text-red-500;
+    }
+  }
+  &__error {
+    @apply text-red-500 font-light text-xs tracking-wide mt-1;
+  }
+  &__hint {
+    @apply text-[var(--neutral-500)] font-light text-xs tracking-wide mt-1;
+  }
+
+  &--focus {
+    @apply ring-inset ring-2 ring-[var(--primary-100)] border border-solid border-[var(--primary-500)] text-[var(--neutral-900)];
+  }
+  &--filled {
+    @apply bg-[var(--textfield-bg)] text-[var(--neutral-900)];
+  }
+  &--loading {
+    /* @apply animate-pulse; */
+  }
+  &--disabled {
+    @apply border-[var(--neutral-200)] text-[var(--neutral-300)] bg-[var(--textfield-bg-disabled)] cursor-not-allowed;
+
+    & > input {
+      @apply cursor-not-allowed;
+
+      &::placeholder {
+        @apply text-[var(--neutral-300)];
+      }
+    }
+  }
+  &--error {
+    @apply border-red-500 ring-red-50;
+    input {
+      @apply text-red-500;
+      &:focus {
+        @apply text-[var(--neutral-900)];
+      }
+    }
+  }
+  &--clearable > &__append-icon {
+    @apply cursor-pointer;
+  }
+}

package/src/components/Textfield/textfield.spec.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import Textfield from './RTextfield.vue';
+
+describe('Textfield', () => {
+  it('renders properly', () => {
+    const wrapper = mount(Textfield, {
+      props: {
+        id: 'textfield-id',
+        label: 'Textfield label',
+        disabled: false,
+        required: false,
+        placeholder: 'Textfield placeholder',
+        type: 'text',
+      },
+    });
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('label').exists()).toBe(true);
+    expect(wrapper.find('label').element.getAttribute('for')).toBe(
+      'textfield-id'
+    );
+    expect(wrapper.find('input').exists()).toBe(true);
+    expect(wrapper.find('input').element.getAttribute('id')).toBe(
+      'textfield-id'
+    );
+    expect(wrapper.find('input').element.getAttribute('type')).toBe('text');
+    expect(wrapper.find('input').element.getAttribute('disabled')).toBe(null);
+    expect(wrapper.find('input').element.getAttribute('required')).toBe(null);
+    expect(wrapper.find('input').element.getAttribute('placeholder')).toBe(
+      'Textfield placeholder'
+    );
+  });
+});

package/src/components/Tooltip/RTooltip.vue

@@ -0,0 +1,325 @@
+<script setup lang="ts">
+import './tooltip.css';
+import {
+  type Placements,
+  type Triggers,
+  Placement,
+  update,
+  Trigger,
+} from './common';
+import { computed, ref, watchEffect } from 'vue';
+
+export interface IProps {
+  /**
+   * Placement of the tooltip
+   * @type Placements
+   * @default Placement.Top
+   * @example
+   * <Tooltip placement="top" />
+   */
+  placement?: Placements;
+
+  /**
+   * Text of the tooltip content
+   * @type string
+   * @default ''
+   * @example
+   * <Tooltip text="Tooltip" />
+   */
+  text?: string;
+
+  /**
+   * Dark theme of the tooltip deneme 1 2 3
+   * @type boolean
+   * @default true
+   * @example
+   * <Tooltip dark />
+   */
+  dark?: boolean;
+
+  /**
+   * Light theme of the tooltip
+   * @type boolean
+   * @default false
+   * @example
+   * <Tooltip light />
+   */
+  light?: boolean;
+
+  /**
+   * Triggers of the tooltip
+   * @type Triggers
+   * @default Trigger.Hover
+   * @example
+   * <Tooltip triggers="hover" />
+   */
+  triggers?: Triggers;
+
+  /**
+   * Auto hide of the tooltip
+   * @type boolean
+   * @default true
+   * @example
+   * <Tooltip autoHide />
+   */
+  autoHide?: boolean;
+
+  /**
+   * Hide delay of the tooltip
+   * @type number
+   * @default 3000
+   * @example
+   * <Tooltip hideDelay={3000} />
+   */
+  hideDelay?: number;
+
+  /**
+   * Show delay of the tooltip
+   * @type number
+   * @default 0
+   * @example
+   * <Tooltip showDelay={0} />
+   */
+  showDelay?: number;
+
+  /**
+   * Shown state of the tooltip
+   * @type boolean
+   * @default false
+   * @example
+   * <Tooltip shown />
+   */
+  shown?: boolean;
+
+  /**
+   * Disabled state of the tooltip
+   * @type boolean
+   * @default false
+   * @example
+   * <Tooltip disabled />
+   */
+  disabled?: boolean;
+
+  /**
+   * Offset of the tooltip
+   * @type number
+   * @default 0
+   * @example
+   * <Tooltip offset={0} />
+   * @link https://floating-ui.com/docs/tutorial#offset-middleware
+   */
+  offset?: number;
+
+  /**
+   * Padding of the tooltip
+   * @type number
+   * @default 2
+   * @example
+   * <Tooltip padding={0} />
+   * @link https://floating-ui.com/docs/tutorial#shift-middleware
+   */
+  padding?: number;
+
+  /**
+   * Outside click of the tooltip
+   * @type boolean
+   * @default false
+   * @example
+   * <Tooltip outsideClick />
+   */
+  outsideClick?: boolean;
+
+  /**
+   * Trigger content of the tooltip
+   * @type string
+   * @default ''
+   * @example
+   * <Tooltip triggerContent="Trigger" />
+   */
+  triggerContent?: string;
+
+  /**
+   * Resizable of the tooltip
+   * @type boolean
+   * @default true
+   * @example
+   * <Tooltip resizable />
+   * @link https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event
+   */
+  resizable?: boolean;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  placement: Placement.Top,
+  text: '',
+  dark: true,
+  light: false,
+  triggers: Trigger.Hover,
+  autoHide: true,
+  hideDelay: 3000,
+  showDelay: 0,
+  shown: false,
+  disabled: false,
+  offset: 0,
+  padding: 2,
+  outsideClick: false,
+  triggerContent: '',
+  resizable: true,
+});
+const emit = defineEmits(['show', 'hide']);
+
+// @ts-ignore
+const trigger = ref<HTMLDivElement>(null);
+// @ts-ignore
+const tooltip = ref<HTMLDivElement>(null);
+// @ts-ignore
+const arrowElement = ref<HTMLDivElement>(null);
+
+function showTooltip() {
+  const { placement, offset, padding, disabled } = props;
+  if (disabled) return;
+  tooltip.value.style.display = 'block';
+  emit('show');
+  update(trigger, tooltip, arrowElement, placement, offset, padding);
+  handleAutoHide();
+  if (props.outsideClick) toggleOutsideClick('add');
+}
+
+function hideTooltip() {
+  tooltip.value.style.display = '';
+  emit('hide');
+  if (props.outsideClick) toggleOutsideClick('remove');
+}
+
+const handleAutoHide = () => {
+  if (props.autoHide) {
+    setTimeout(() => {
+      hideTooltip();
+    }, props.hideDelay);
+  }
+};
+
+const toggleOutsideClick = (toggle: string) => {
+  if (toggle === 'add') document.addEventListener('click', hideTooltip);
+
+  if (toggle === 'remove') document.removeEventListener('click', hideTooltip);
+};
+
+const onClick = () => {
+  if (props.disabled) return;
+  if (props.triggers == Trigger.Click) {
+    if (tooltip.value.style.display === 'block') hideTooltip();
+    else showTooltip();
+  }
+};
+
+const onMouseEnter = () => {
+  if (props.disabled) return;
+  if (props.triggers === Trigger.Hover) showTooltip();
+};
+
+const onMouseLeave = () => {
+  if (props.disabled) return;
+  if (tooltip.value.style.display === '' && props.triggers === Trigger.Hover) {
+    showTooltip();
+    return;
+  } else if (
+    tooltip.value.style.display !== '' &&
+    props.triggers === Trigger.Hover
+  ) {
+    hideTooltip();
+  }
+};
+
+const onMouseMove = () => {
+  const { placement, offset, padding, disabled } = props;
+  if (disabled) return;
+  if (props.triggers === Trigger.Hover)
+    update(trigger, tooltip, arrowElement, placement, offset, padding);
+};
+
+const classes = computed(() => {
+  return {
+    tooltip: true,
+    'tooltip--dark': props.dark,
+    'tooltip--light': props.light,
+  };
+});
+
+/**
+ * Listen the resize event of window
+ * @link https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event
+ */
+window.onresize = () => {
+  const { placement, offset, padding, disabled } = props;
+  if (disabled) return;
+  if (props.resizable)
+    update(trigger, tooltip, arrowElement, placement, offset, padding);
+};
+
+watchEffect(
+  () => {
+    if (props.disabled) return;
+    if (props.shown && props.triggers === Trigger.Manual) showTooltip();
+  },
+  { flush: 'post' } // this is important to avoid infinite loop & for fire on mounted
+);
+
+const animationDuration = computed(() => {
+  return `${props.showDelay}ms`;
+});
+</script>
+
+<template>
+  <div
+    ref="trigger"
+    :aria-disabled="props.disabled"
+    class="trigger"
+    @click.stop="onClick"
+    @mouseenter.stop="onMouseEnter"
+    @mouseleave.stop="onMouseLeave"
+    @mousemove.stop="onMouseMove"
+  >
+    <slot name="trigger" />
+
+    <div v-if="!$slots['trigger']" v-html="props.triggerContent" />
+  </div>
+  <div id="tooltip" ref="tooltip" :class="classes" role="tooltip">
+    <slot name="content" />
+    <div
+      v-if="!$slots['content']"
+      :class="{
+        tooltip__content: true,
+        'tooltip__content--dark': props.dark,
+        'tooltip__content--light': props.light,
+      }"
+    >
+      {{ props.text }}
+    </div>
+    <div
+      v-if="!$slots['content']"
+      id="arrow"
+      ref="arrowElement"
+      :class="{
+        tooltip__arrow: true,
+        'tooltip__arrow--dark': props.dark,
+        'tooltip__arrow--light': props.light,
+      }"
+    />
+  </div>
+</template>
+<style scoped>
+.tooltip {
+  animation-name: tooltip-show;
+  animation-duration: v-bind('animationDuration');
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in-out;
+}
+@keyframes tooltip-show {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>

package/src/components/Tooltip/Tooltip.mdx

@@ -0,0 +1,111 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import * as TooltipStories from './Tooltip.stories';
+
+<Meta of={TooltipStories} />
+
+# Tooltip
+
+A tooltip is a small pop-up window that appears when the user hovers over an element. It can be used to provide additional information or context about the element.
+
+- [Overview](#overview)
+
+- [Usage with props](#usage)
+
+- [Playground](#playground)
+
+- [Stories](#stories)
+
+- [Tips](#tips)
+
+## Overview <a id="overview" />
+
+The tooltip component allows developers to easily add tooltips to their applications.
+
+<Canvas>
+  <Story of={TooltipStories.Overview} />
+</Canvas>
+
+### Playground <a id="playground" />
+
+> Changes you make in the controls will be reflected in the example above.
+
+<Controls
+  of={TooltipStories.Overview}
+  exclude={/^(trigger|content|click|on.*)/}
+/>
+
+## Stories <a id="stories" />
+
+### Default
+
+<Canvas>
+  <Story of={TooltipStories.Default} />
+</Canvas>
+
+### With Click Trigger
+
+<Canvas>
+  <Story of={TooltipStories.WithClickTrigger} />
+</Canvas>
+
+### With Manual Trigger
+
+<Canvas>
+  <Story of={TooltipStories.WithManualTrigger} />
+</Canvas>
+
+### With Content Slot
+
+<Canvas>
+  <Story of={TooltipStories.WithContentSlot} />
+</Canvas>
+
+## With Directives
+
+<Canvas>
+  <Story of={TooltipStories.WithDirectives} />
+</Canvas>
+
+## Usage with props <a id="usage" />
+
+## placement (optional) and text (optional)
+
+It supports various **placement** options such as top, right, bottom, and left, as well as more specific placements like top-start, top-end, right-start, right-end, bottom-start, bottom-end, left-start, and left-end. The **text** prop allows developers to specify the text that will be displayed in the tooltip.
+
+## light (optional) and dark (optional)
+
+The **light** and **dark** props can be used to change the color scheme of the tooltip.
+
+## autoHide (optional) and hideDelay (optional)
+
+The **autoHide** prop allows the tooltip to automatically hide after a specified delay, while the **hideDelay** and showDelay props can be used to control the delay before the tooltip is hidden or shown.
+
+## shown (optional) and disabled (optional)
+
+The **shown** prop can be used to manually control the visibility of the tooltip, while the **disabled** prop can be used to disable the tooltip entirely.
+
+## offset (optional), padding (optional) and outsideClick (optional)
+
+The **offset** and **padding** props can be used to adjust the position of the tooltip, and the **outsideClick** prop allows developers to specify whether the tooltip should be hidden when the user clicks outside of it.
+
+## resizable (optional)
+
+The **resizable** prop can be used to specify whether the tooltip should be resizable.
+
+## Tips <a id="tips" />
+
+💡 Tooltips are meant to provide additional information or context, so it's important to keep the text short and to the point. Avoid using long sentences or paragraphs of text, as it can make the tooltip difficult to read and may cause the user to lose interest.
+
+💡 The placement of the tooltip can greatly affect its effectiveness. Use clear and consistent placement across your application to make it easy for the user to understand where the tooltip will appear.
+
+💡 The delay before the tooltip appears and disappears can greatly affect the user's experience. Experiment with different values for the showDelay and hideDelay props to find the right balance between making the tooltip appear quickly enough to be useful but not so quickly that it becomes distracting.
+
+💡 Use the light and dark props to match the tooltip color scheme with the overall theme of your application. This will make the tooltip feel like a natural part of the interface.
+
+💡 The offset prop allows you to adjust the position of the tooltip relative to the trigger element. Use it to fine-tune the placement of the tooltip and make it feel more natural.
+
+💡 The padding prop can be used to add space around the tooltip text, which can make it easier to read.
+
+💡 This can improve the user experience by preventing the tooltip from staying visible when the user is no longer interacting with the trigger element.
+
+💡 Always test the tooltip with real users to see how it works in practice and to gather feedback on how it can be improved.