@rocketui/vue 0.0.47 → 0.0.48

package/src/components/Dropdown/Dropdown.mdx

@@ -1,135 +0,0 @@
-import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
-
-import * as DropdownStories from './Dropdown.stories';
-
-<Meta of={DropdownStories} />
-
-# Dropdown
-
-A Dropdown component is a UI element that allows users to select from a list of options in a compact, space-efficient manner. It is typically implemented as a button or a toggle that, when clicked, displays a list of options for the user to choose from.
-
-- [Overview](#overview)
-
-- [Playground](#playground)
-
-- [Usage with props](#usage)
-
-- [Slots](#slots)
-
-- [Stories](#stories)
-
-- [Tips](#tips)
-
-## Overview <a id="overview" />
-
-A Dropdown component is a UI element that allows users to select one or more options from a list in a compact and efficient manner. This particular Dropdown component has several customizable props that can be used to enhance its functionality and user experience.
-It offers a wide range of customization options that allow for greater flexibility and a better user experience. It can be used in a variety of contexts and can be tailored to suit the specific needs of the application.
-
-<Canvas>
-  <Story of={DropdownStories.Overview} />
-</Canvas>
-
-## Playground <a id="playground" />
-
-> Changes you make in the controls will be reflected in the example above.
-
-<Controls
-  of={DropdownStories.Overview}
-  exclude={/^(click|prepend-icon|append-icon|option-prepend|update.*|on.*)$/}
-/>
-
-## Usage with props <a id="usage" />
-
-### appendIcon and prependIcon (optional)
-
-The **appendIcon** and "prependIcon" props allow for the inclusion of icons or other visual elements at the end or beginning of the dropdown button, providing a clear indication of its purpose and functionality.
-
-### options (required)
-
-The **options** prop allows you to define the list of choices that the user can select from, which can be represented as text or other visual elements.
-
-#### options: label (required)
-
-The **label** prop allows you to define the text that will be displayed in the dropdown button.
-
-#### options: value (required)
-
-The **value** prop allows you to define the value of the selected option.
-
-#### options: prependIcon (optional)
-
-The **prependIcon** prop allows for the inclusion of icons or other visual elements at the beginning of the option, providing a clear indication of its purpose and functionality.
-
-#### options: disabled (optional)
-
-The **disabled** prop disables the option and prevent the user from interacting with it
-
-### placeholder (optional)
-
-The **placeholder** prop allows you to define the default text displayed in the dropdown button before a user makes a selection.
-
-### taggable (optional)
-
-The **taggable** prop allows users to create new options on-the-fly, rather than just selecting from pre-defined options.
-
-### multiple (optional)
-
-The **multiple** prop allows users to select more than one option at a time.
-
-### disabled (optional)
-
-The **disabled** prop disables the component and prevent the user from interacting with it
-
-### loading (optional)
-
-The **loading** prop allows you to indicate that the component is in a loading state and the user should wait for the options to appear.
-
-### modelValue (optional)
-
-The **modelValue** prop allows you to define the value of the selected option.
-
-## Slots <a id="slots" />
-
-### option-prepend (optional)
-
-The **option-prepend** slot allows you to define the content that will be displayed before the option label.
-
-### option-append (optional)
-
-The **option-append** slot allows you to define the content that will be displayed after the option label.
-
-### prependIcon (optional)
-
-The **prependIcon** slot allows you to define the content that will be displayed before the dropdown button label.
-
-## Stories <a id="stories" />
-
-### Multiple
-
-<Canvas>
-  <Story of={DropdownStories.Multiple} />
-</Canvas>
-
-### Taggable
-
-<Canvas>
-  <Story of={DropdownStories.Taggable} />
-</Canvas>
-
-### Tips <a id="tips" />
-
-💡 A long list of options can be overwhelming for users and make it difficult for them to find what they're looking for. Consider using a search or filtering feature to help users narrow down the options.
-
-💡 The options in the list should have clear, concise labels that are easy for users to understand. Avoid using technical jargon or abbreviations that may be unfamiliar to some users.
-
-💡 The Dropdown component should provide clear visual cues to indicate when it has focus, when an option is selected, and when the options list is open. This helps users understand the current state of the component and makes it easier for them to use.
-
-💡 The Dropdown component should be operable by keyboard and screen reader users. This means providing clear labels and role attributes, as well as allowing users to navigate through the options using the arrow keys.
-
-💡 Think about the specific context in which the Dropdown component will be used, and design it accordingly. For example, if it will be used for selecting a date, it may be helpful to include a calendar view or date picker.
-
-💡 When an option is selected, the selected option should be clearly indicated, for example by changing the color of the selected option, and the selected option should be clearly visible.
-
-💡 If the options are loaded asynchronously, it's a good practice to provide a clear indication of loading state, for example by showing a spinner, so the user knows that the options are not yet available and they have to wait.
-
-💡 Make sure the component is accessible to all users, including those with disabilities. This means providing clear, accessible labels, and ensuring that the component can be easily operated by keyboard and screen reader users.

package/src/components/Dropdown/Dropdown.stories.ts

@@ -1,84 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { action } from '@storybook/addon-actions';
-
-import Dropdown from './RDropdown.vue';
-
-const DefaultArgs = {
-  options: [
-    { value: '1', label: 'Option 1' },
-    { value: '2', label: '2' },
-    { value: '3', label: '3' },
-    { value: '4', label: 'Option 4' },
-    { value: '5', label: 'Option 5' },
-    { value: '6', label: 'Option 6' },
-    { value: '7', label: '7' },
-    { value: '8', label: 'Option 8' },
-    { value: '9', label: 'Option 9' },
-    { value: '10', label: 'Option 10' },
-  ],
-  placeholder: 'Select an option',
-  taggable: false,
-  multiple: false,
-  disabled: false,
-  loading: false,
-  prependIcon: 'mdiFaceMan',
-  appendIcon: 'mdiChevronDown',
-  modelValue: '',
-  searchable: false,
-};
-const DropdownStory = {
-  title: 'Components/Dropdown',
-  component: Dropdown,
-  setup: (args: typeof Dropdown) => ({
-    args,
-    update: action('update:modelValue'),
-  }),
-  template: `
-    <Dropdown v-bind="args" @update="update" />
-  `,
-  args: DefaultArgs,
-  argTypes: {
-    'onUpdate:modelValue': { action: 'update:modelValue' },
-  },
-} as Meta<typeof Dropdown>;
-
-export default DropdownStory;
-
-type Story = StoryObj<typeof DropdownStory>;
-
-export const Overview: Story = {
-  args: {
-    appendIcon: 'mdiChevronDown',
-  },
-};
-
-export const Multiple: Story = {
-  args: {
-    multiple: true,
-    placeholder: 'Select multiple options',
-    appendIcon: 'mdiChevronDown',
-  },
-};
-
-export const Taggable: Story = {
-  args: {
-    taggable: true,
-    placeholder: 'Search or create a tag',
-    appendIcon: 'mdiChevronDown',
-  },
-};
-
-export const Search: Story = {
-  args: {
-    options: [
-      { value: '1', label: 'Option 1' },
-      { value: '2', label: 'Option 2' },
-      { value: '3', label: 'Option 3' },
-      { value: '4', label: 'Option 4' },
-    ],
-    placeholder: 'Search',
-    prependIcon: 'mdiMagnify',
-    appendIcon: 'mdiChevronDown',
-    searchable: true,
-  },
-};

package/src/components/Dropdown/RDropdown.vue

@@ -1,392 +0,0 @@
-<script setup lang="ts">
-import { computed, reactive, ref, defineEmits, watch, onMounted } from 'vue';
-import { onClickOutside } from '@vueuse/core';
-import Chip from '../Chips/RChip.vue';
-import Icon from '../Icon/RIcon.vue';
-import './dropdown.css';
-export interface Option {
-  value: string | number;
-  label: string;
-  prependIcon?: string;
-  disabled?: boolean;
-}
-export interface SelectProps {
-  /**
-   * Options of the Dropdown
-   * @type Option[]
-   * @default []
-   * @example
-   * <Dropdown
-   *  :options="[
-   *   {
-   *    value: '1',
-   *    label: 'Option 1',
-   *   },
-   *   {
-   *    value: '2',
-   *    label: '2',
-   *   },
-   *  ]"
-   * />
-   */
-  options: Option[];
-
-  /**
-   * Value of the Dropdown
-   * @type string | number | Option | Option[]
-   * @default ''
-   * @example
-   * <Dropdown v-model="model" />
-   */
-  modelValue: string | number | Option | Option[];
-
-  /**
-   * Placeholder Dropdown
-   * @type InputHTMLAttributes['placeholder'];
-   * @default ''
-   * @example
-   * <Dropdown placeholder="Placeholder" />
-   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
-   */
-  placeholder?: string;
-
-  /**
-   * Allow to create new options
-   * @type boolean
-   * @default false
-   * @example
-   * <Dropdown taggable />
-   */
-  taggable?: boolean;
-
-  /**
-   * Allow to select multiple options
-   * @type boolean
-   * @default false
-   * @example
-   * <Dropdown multiple />
-   */
-  multiple?: boolean;
-
-  /**
-   * Disable the Dropdown
-   * @type boolean
-   * @default false
-   * @example
-   * <Dropdown disabled />
-   */
-  disabled?: boolean;
-
-  /**
-   * Loading state of the Dropdown
-   * @type boolean
-   * @default false
-   * @example
-   * <Dropdown loading />
-   */
-  loading?: boolean;
-
-  /**
-   * Icon to prepend
-   * @type string
-   * @default ''
-   * @example
-   * <Dropdown prependIcon="search" />
-   */
-  prependIcon?: string;
-
-  /**
-   * Icon to append
-   * @type string
-   * @default 'expand_less'
-   * @example
-   * <Dropdown appendIcon="expand_more" />
-   */
-  appendIcon?: string;
-
-  /**
-   * Allow to search for options
-   * @type boolean
-   * @default false
-   * @example
-   * <Dropdown searchable />
-   */
-  searchable?: boolean;
-  parentElement?: string;
-  id?: string;
-}
-const props = withDefaults(defineProps<SelectProps>(), {
-  options: () => [],
-  modelValue: '',
-  placeholder: '',
-  taggable: false,
-  multiple: false,
-  disabled: false,
-  loading: false,
-  prependIcon: '',
-  appendIcon: 'mdiChevronDown',
-  searchable: false,
-  id: 'test',
-});
-
-const selected = ref<string | number>('');
-const selectedMultiple = reactive<Option[]>([]);
-const active = ref(false);
-const inputModel = ref('');
-const emit = defineEmits(['update:modelValue']);
-
-/**
- * @description - HTML elements references
- */
-const dropdown = ref<HTMLElement | null>(null);
-const input = ref<HTMLInputElement | null>(null);
-const wrapper = ref<HTMLElement | null>(null);
-/**
- * @description - Handles the appearance of the select list
- * @param e MouseEvent
- * @returns void
- */
-const setActive = (e: MouseEvent) => {
-  if (props.disabled) return;
-  e.stopPropagation();
-  active.value = !active.value;
-  if (active.value) {
-    dropdown.value?.classList.add('dropdown--active');
-    dropdown.value?.focus();
-    if (props.searchable) input.value?.focus();
-
-    return;
-  }
-  removeActive();
-};
-
-/**
- * @description - Removes the active state
- * @returns void
- */
-const removeActive = () => {
-  active.value = false;
-  dropdown.value?.classList.remove('dropdown--active');
-  dropdown.value?.blur();
-  input.value?.blur();
-};
-
-/**
- * @description - Selects an option
- * @param e Click event
- * @param option Selected option
- * @returns void
- */
-const selectOption = (e: MouseEvent, option: Option) => {
-  if (props.multiple || props.taggable) {
-    e.stopPropagation();
-    if (!selectedMultiple.find((opt) => opt.value === option.value)) {
-      selectedMultiple.push(option);
-    } else {
-      selectedMultiple.splice(selectedMultiple.indexOf(option), 1);
-    }
-    inputModel.value = '';
-    if (props.searchable) input.value?.focus();
-    return;
-  }
-
-  selectOneOption(e, option);
-};
-/**
- * @description - Selects one option
- * @param option Selected option
- * @returns void
- */
-const selectOneOption = (e: MouseEvent, option: Option) => {
-  if (selected.value === option.value) {
-    selected.value = '';
-    inputModel.value = '';
-    return;
-  }
-  inputModel.value = option.label;
-  selected.value = option.value;
-  setActive(e);
-  emit('update:modelValue', option);
-};
-/**
- * @description - Removes an option from the selected options
- * @param option Option to remove
- * @returns void
- */
-const removeOption = (e: MouseEvent | KeyboardEvent, option: Option) => {
-  if (e instanceof KeyboardEvent && e.key !== 'Backspace') return;
-  if (inputModel.value !== '') return;
-  e.stopPropagation();
-  const index = selectedMultiple.findIndex((opt) => opt.value === option.value);
-  selectedMultiple.splice(index, 1);
-};
-/**
- * @description - Handles the not existing options
- * @returns void
- */
-const createTag = (e: KeyboardEvent) => {
-  if (!props.taggable) return;
-  e.stopPropagation();
-  const value = inputModel.value;
-  if (value === '') return;
-  const option = props.options.find((opt) => opt.label === value);
-  if (!option) {
-    selectedMultiple.push({ value, label: value });
-    inputModel.value = '';
-    input.value?.focus();
-  }
-};
-const isSelected = (option: Option) => {
-  if (props.multiple) {
-    return selectedMultiple.find((opt) => opt.value === option.value);
-  }
-  return selected.value === option.value;
-};
-/**
- * @description - Search for options
- * @returns {Option[]} - Returns an array of options
- */
-const searchedOptions = computed(() => {
-  if (!props.searchable) return props.options;
-  const result = props.options.filter((option) => {
-    return option.label.toLowerCase().includes(inputModel.value.toLowerCase());
-  });
-  return result;
-});
-
-onMounted(() => {
-  if (props.modelValue) {
-    if (props.multiple) {
-      selectedMultiple.push(props.modelValue as Option);
-    } else {
-      selected.value = (props.modelValue as Option).value;
-      inputModel.value = (props.modelValue as Option).label;
-    }
-  }
-});
-/**
- * @description - Watch the selected multiple options
- * @returns void
- */
-watch(selectedMultiple, (value) => {
-  emit('update:modelValue', value);
-});
-
-/**
- * @description - Watch the outside click
- * @returns void
- */
-onClickOutside(wrapper, removeActive);
-</script>
-<template>
-  <div class="dropdown-wrapper" ref="wrapper">
-    <div
-      ref="dropdown"
-      :class="{
-        dropdown: true,
-        'dropdown--disabled': props.disabled,
-        'dropdown--loading': props.loading,
-      }"
-      @click="setActive"
-    >
-      <div
-        v-if="props.prependIcon || $slots['prepend']"
-        :class="{
-          'dropdown__prepend-icon': true,
-          'dropdown__prepend-icon--active': active,
-        }"
-      >
-        <slot name="prepend">
-          <Icon v-if="props.prependIcon" :name="props.prependIcon" />
-        </slot>
-      </div>
-      <div v-if="props.taggable" class="dropdown__tags">
-        <Chip
-          v-for="(option, index) in selectedMultiple"
-          :key="index"
-          :label="option.label"
-          appendIcon="close"
-          class="dropdown__tags__chip"
-          variant="primary"
-          @click:close="removeOption($event, option)"
-        />
-      </div>
-      <div v-if="props.multiple" class="dropdown__multiple">
-        <p v-for="(option, index) in selectedMultiple" :key="index">
-          {{ option.label + ',' }}
-        </p>
-      </div>
-      <input
-        :id="props.id"
-        ref="input"
-        type="text"
-        v-model="inputModel"
-        :class="{
-          dropdown__input: true,
-          'dropdown__input--loading': props.loading,
-        }"
-        :disabled="props.disabled"
-        :placeholder="props.placeholder"
-        :readonly="!props.searchable"
-        @keydown.backspace="
-          removeOption($event, selectedMultiple[selectedMultiple.length - 1])
-        "
-        @keydown.enter="createTag($event)"
-      />
-      <div
-        v-if="props.appendIcon || $slots['append']"
-        :class="{
-          'dropdown__append-icon': true,
-          'dropdown__append-icon--active': active,
-        }"
-      >
-        <slot name="append">
-          <Icon v-if="props.appendIcon" :name="props.appendIcon" />
-        </slot>
-      </div>
-    </div>
-    <ul
-      :class="{ 'dropdown-options': true, 'dropdown-options--active': active }"
-    >
-      <li
-        v-for="option in searchedOptions"
-        :key="option.value"
-        :class="{
-          'dropdown-options__option': true,
-          'dropdown-options__option--active': isSelected(option),
-        }"
-        :aria-disabled="option.disabled"
-        @click="selectOption($event, option)"
-      >
-        <div style="display: flex; align-items: center">
-          <slot v-if="!option.prependIcon" name="option-prepend" />
-          <Icon
-            v-else
-            :class="{
-              'dropdown-options__option__prepend-icon': true,
-              'dropdown-options__option__prepend-icon--active':
-                isSelected(option),
-            }"
-            :name="option.prependIcon"
-          />
-          <p
-            :class="{
-              'dropdown-options__option__label': true,
-              'dropdown-options__option__label--active': isSelected(option),
-            }"
-          >
-            {{ option.label }}
-          </p>
-        </div>
-        <Icon
-          v-if="isSelected(option)"
-          :class="{
-            'dropdown-options__option__append-icon': true,
-            'dropdown-options__option__append-icon--active': isSelected(option),
-          }"
-          name="mdiCheck"
-        />
-      </li>
-    </ul>
-  </div>
-</template>