@rocketui/vue 0.0.46 → 0.0.47

package/src/components/Textfield/RTextfield.vue

@@ -0,0 +1,372 @@
+<script setup lang="ts">
+import {
+  computed,
+  reactive,
+  ref,
+  watch,
+  type HTMLAttributes,
+  type InputHTMLAttributes,
+  type LabelHTMLAttributes,
+} from 'vue';
+import './textfield.css';
+import Icon from '../Icon/RIcon.vue';
+import Label from '../Label/RLabel.vue';
+// import { vFocus } from '../../directives';
+export interface Props {
+  /**
+   * id of the textfield
+   * @type HTMLAttributes['id']
+   * @default ''
+   * @example
+   * <Textfield id="textfield" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: HTMLAttributes['id'];
+  /**
+   * Input type
+   * @type 'text' | 'password' | 'email' | 'number' | 'tel' | 'url'
+   * @default 'text'
+   * @example
+   * <Textfield type="password" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
+   */
+  type: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+
+  /**
+   * Input value
+   * @type InputHTMLAttributes['value'];
+   * @default ''
+   * @example
+   * <Textfield modelValue="Hello" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+   */
+  modelValue?: InputHTMLAttributes['value'];
+
+  /**
+   * label of the textfield
+   * @type LabelHTMLAttributes['label']
+   * @default ''
+   * @example
+   * <Textfield label="Textfield" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
+   */
+  label?: LabelHTMLAttributes['for'];
+
+  /**
+   * Placeholder text
+   * @type InputHTMLAttributes['placeholder'];
+   * @default ''
+   * @example
+   * <Textfield placeholder="Placeholder" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
+   */
+  placeholder?: InputHTMLAttributes['placeholder'];
+
+  /**
+   * Error message
+   * @type string
+   * @default ''
+   * @example
+   * <Textfield errorMsg="This is an error" />
+   */
+  errorMsg?: string;
+
+  /**
+   * Hint text
+   * @type string
+   * @default ''
+   * @example
+   * <Textfield hint="This is a hint" />
+   */
+  hint?: string;
+
+  /**
+   * Icon to prepend
+   * @type string
+   * @default ''
+   * @example
+   * <Textfield prependIcon="mdiLock" />
+   */
+  prependIcon?: string;
+
+  /**
+   * Icon to append
+   * @type string
+   * @default ''
+   * @example
+   * <Textfield appendIcon="mdiEyeOffOutline" />
+   */
+  appendIcon?: string;
+
+  /**
+   * Input disabled state
+   * @type InputHTMLAttributes['disabled'] | boolean
+   * @default false
+   * @example
+   * <Textfield disabled="true" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Input loading state
+   * @type boolean
+   * @default false
+   * @example
+   * <Textfield loading="true" />
+   */
+  loading?: boolean;
+
+  /**
+   * Input clearable state
+   * @type boolean
+   * @default false
+   * @example
+   * <Textfield clearable="true" />
+   */
+  clearable?: boolean;
+
+  /**
+   * Input number min value
+   * @type InputHTMLAttributes['min']
+   * @default ''
+   * @example
+   * <Textfield min="0" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
+   */
+  min?: InputHTMLAttributes['min'];
+
+  /**
+   * Input number max value
+   * @type InputHTMLAttributes['max']
+   * @default ''
+   * @example
+   * <Textfield max="10" />
+   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
+   */
+  max?: InputHTMLAttributes['max'];
+}
+const inputRef = ref<HTMLInputElement>();
+const props = withDefaults(defineProps<Props>(), {
+  id: '',
+  type: 'text',
+  modelValue: '',
+  label: '',
+  placeholder: '',
+  errorMsg: '',
+  hint: '',
+  prependIcon: '',
+  appendIcon: '',
+  iconColor: '',
+  disabled: false,
+  loading: false,
+  clearable: false,
+});
+const emit = defineEmits([
+  'update:modelValue',
+  'focus',
+  'blur',
+  'input',
+  'click:icon',
+  'click:clear',
+]);
+const state = reactive({
+  value: '',
+});
+const typeOfInputRef = ref(props.type);
+const prependIconsOfType = {
+  password: 'mdiLock',
+  email: 'mdiEmailOutline',
+  tel: 'mdiPhone',
+  url: 'mdiLink',
+  number: 'mdiNumeric',
+  text: '',
+};
+const isFocused = ref(false);
+const isFilled = computed(() => !!state.value);
+const classes = computed(() => {
+  const { disabled, loading, clearable, errorMsg } = props;
+  return {
+    textfield: true,
+    'textfield--error': errorMsg?.length,
+    'textfield--loading': loading,
+    'textfield--disabled': disabled,
+    'textfield--clearable': clearable,
+    'textfield--focus': isFocused.value,
+    'textfield--filled': isFilled.value,
+  };
+});
+const prependIconClasses = computed(() => {
+  return {
+    'textfield__prepend-icon': true,
+    'textfield__prepend-icon--loading': props.loading,
+    'textfield__prepend-icon--error': hasErrorMsg.value && isFilled.value,
+  };
+});
+const appendIconClasses = computed(() => {
+  return {
+    'textfield__append-icon': true,
+    'textfield__append-icon--clear': hasClear.value,
+    'textfield__append-icon--error': hasErrorMsg.value,
+  };
+});
+const hasValue = computed(() => {
+  return state.value.length > 0;
+});
+const hasErrorMsg = computed(() => {
+  return props.errorMsg?.length;
+});
+const hasClear = computed(() => {
+  return props.clearable && hasValue.value;
+});
+const prependIconName = computed(() => {
+  const { prependIcon, type } = props;
+  if (prependIcon === 'none') return '';
+  if (prependIcon) return prependIcon;
+  return prependIconsOfType[type];
+});
+const appendIconName = computed(() => {
+  const { appendIcon, type } = props;
+  if (appendIcon === 'none') return '';
+  if (hasErrorMsg.value) return 'mdiAlertCircleOutline';
+  if (hasClear.value && ['text', 'email'].includes(type)) return 'mdiClose';
+  if (type === 'password' && typeOfInputRef.value === 'password')
+    return 'mdiEyeOutline';
+  if (type === 'password' && typeOfInputRef.value === 'text')
+    return 'mdiEyeOffOutline';
+  return appendIcon;
+});
+/**
+ * @description - focus event handler
+ * @param {FocusEvent} e - FocusEvent object
+ * @returns {void}
+ */
+const onFocus = (e: FocusEvent) => {
+  isFocused.value = true;
+  emit('focus', e);
+};
+/**
+ * @description - blur event handler
+ * @param {FocusEvent} e - FocusEvent object
+ * @returns {void}
+ */
+const onBlur = (e: FocusEvent) => {
+  isFocused.value = false;
+  emit('blur', e);
+};
+/**
+ * @description - Emit input event with value of input
+ * @param {InputEvent} e - InputEvent object
+ * @returns {void}
+ */
+const onInput = (e: InputEvent): void => {
+  state.value = (e.target as HTMLInputElement).value;
+  emit('input', e);
+};
+/**
+ * @description - Emit click event with value of append icon
+ * @returns {void}
+ */
+const clickIcon = (): void => {
+  if (hasClear.value) {
+    state.value = '';
+    inputRef.value?.focus();
+    emit('click:clear', {
+      value: typeOfInputRef.value === 'number' ? +state.value : state.value,
+    });
+    return;
+  }
+  emit('click:icon', {
+    value: typeOfInputRef.value === 'number' ? +state.value : state.value,
+  });
+  if (typeOfInputRef.value === 'password') setPassType();
+};
+/**
+ * @description - Set type of input to password or text
+ * @returns {void}
+ */
+const setPassType = (): void => {
+  typeOfInputRef.value =
+    typeOfInputRef.value === 'password' ? 'text' : 'password';
+};
+
+const focusInput = () => {
+  inputRef.value?.focus();
+};
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    state.value = value;
+  },
+  {
+    immediate: true,
+  }
+);
+watch(
+  () => state.value,
+  (value) => {
+    emit(
+      'update:modelValue',
+      typeOfInputRef.value === 'number' ? +value : value
+    );
+  }
+);
+</script>
+<template>
+  <fieldset>
+    <div
+      :class="{
+        textfield__wrapper: true,
+      }"
+    >
+      <Label
+        :id="props.id"
+        :class="{
+          textfield__label: true,
+        }"
+        :for="props.id"
+        :text="props.label"
+        @click="focusInput"
+      />
+      <div class="input-wrapper">
+        <div :class="classes">
+          <slot name="prepend" />
+          <Icon
+            v-if="prependIconName && !$slots['prepend']"
+            :class="prependIconClasses"
+            :name="prependIconName"
+            :size="20"
+          />
+          <input
+            ref="inputRef"
+            :id="props.id"
+            :disabled="props.disabled"
+            :placeholder="props.placeholder"
+            :type="typeOfInputRef"
+            :value="state.value"
+            :min="props.min"
+            :max="props.max"
+            @blur="onBlur"
+            @focus="onFocus"
+            @input="onInput"
+          />
+          <slot name="append" />
+          <Icon
+            v-if="appendIconName && !$slots['append']"
+            :class="appendIconClasses"
+            :name="`${appendIconName}`"
+            :size="20"
+            @click="clickIcon"
+          />
+        </div>
+        <div v-if="props.errorMsg" class="textfield__error">
+          {{ props.errorMsg }}
+        </div>
+        <div v-if="!props.errorMsg && props.hint" class="textfield__hint">
+          {{ props.hint }}
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</template>

package/src/components/Textfield/Textfield.mdx

@@ -0,0 +1,159 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import * as TextfieldStories from './Textfield.stories';
+
+<Meta of={TextfieldStories} />
+
+# Textfield
+
+The Textfield component is a versatile input field that can be used for various types of data entry in a web application.
+
+- [Overview](#overview)
+
+- [Playground](#playground)
+
+- [Usage with props](#usage)
+
+- [Stories](#stories)
+
+- [Tips](#tips)
+
+## Overview <a id="overview" />
+
+The Textfield component allows for the input of text, numbers, and other types of data. It includes various options for customization, such as label, placeholder, and icon. It also includes options for error handling, hinting, and disabling or loading the field.
+
+<Canvas>
+  <Story of={TextfieldStories.Overview} />
+</Canvas>
+
+### Playground <a id="playground" />
+
+> Changes you make in the controls will be reflected in the example above.
+
+<Controls
+  of={TextfieldStories.Overview}
+  exclude={/^(change|input|focus|blur|click|on.*)/}
+/>
+
+## Stories
+
+### Text
+
+<Canvas>
+  <Story of={TextfieldStories.Text} />
+</Canvas>
+
+### Mail
+
+<Canvas>
+  <Story of={TextfieldStories.Mail} />
+</Canvas>
+
+### Password
+
+<Canvas>
+  <Story of={TextfieldStories.Password} />
+</Canvas>
+
+### Url
+
+<Canvas>
+  <Story of={TextfieldStories.Url} />
+</Canvas>
+
+### Tel
+
+<Canvas>
+  <Story of={TextfieldStories.Tel} />
+</Canvas>
+
+### Number
+
+<Canvas>
+  <Story of={TextfieldStories.Number} />
+</Canvas>
+
+### Error
+
+<Canvas>
+  <Story of={TextfieldStories.Error} />
+</Canvas>
+
+## Usage with props <a id="usage" />
+
+### id (required)
+
+The **id** prop is a unique identifier for the input field.
+
+### label (optional)
+
+The **label** prop is for text to be displayed as a label for the input field.
+
+### placeholder (optional)
+
+The **placeholder** prop is for text to be displayed as a placeholder in the input field.
+
+### type (required)
+
+The **type** is the type of input field, such as `text` or `number`.
+
+### modelValue (optional)
+
+The **modelValue** prop is the current value of the input field.
+
+### errorMsg (optional)
+
+The **errorMsg** props is for the error message to be displayed if there is an error with the input.
+
+### hint (optional)
+
+The **hint** prop is the additional text to provide context or instructions for the input field.
+
+### prependIcon (optional)
+
+The **prependIcon** prop is an icon to be displayed before the input field.
+
+The **prependIcon** prop displays an icon based on the type of the input.
+If you don't want to display an icon in this case, you can pass `none` as the value.
+
+### appendIcon (optional)
+
+The **appendIcon** prop is an icon to be displayed after the input field.
+
+The **appendIcon** prop displays an icon based on the type of the input.
+If you don't want to display an icon in this case, you can pass `none` as the value.
+
+### iconColor (optional)
+
+The **iconColor** prop gives the color of the icon.
+
+### disabled (optional)
+
+The **disabled** prop indicates whether the input field is disabled or not.
+
+### loading (optional)
+
+The **loading** prop indicates whether the input field is in a loading state or not.
+
+### clearable (optional)
+
+The **clearable** prop indicates whether the input field can be cleared or not.
+
+## Tips <a id="tips" />
+
+💡 The label should clearly describe what the input field is for, and should be positioned in a way that is easy for users to understand.
+
+💡 Placeholders can be used to provide additional context or instructions for the input field, but should not be used as a substitute for a clear label.
+
+💡 The type of input field should match the type of data that will be entered. For example, use a number input field for numeric data, and a password input field for sensitive information.
+
+💡 Error messages should clearly indicate what the problem is and how to fix it.
+
+💡 Icons can be used to make the Textfield component more visually appealing and to provide additional information or context.
+
+💡 Textfield component should be accessible to users with disabilities, including keyboard navigation, and providing appropriate ARIA attributes.
+
+💡 Hints can be used to provide additional context or instructions for the input field.
+
+💡 This will help users to clear their input easily.
+
+💡 Use these states to indicate that the input field is temporarily unavailable or in the process of loading data.

package/src/components/Textfield/Textfield.stories.ts

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Textfield from './RTextfield.vue';
+
+const DefaultArgTypes = {
+  type: {
+    type: 'select',
+    options: ['text', 'password', 'email', 'number', 'tel', 'url'],
+  },
+};
+
+const DefaultArgs = {
+  id: 'textfield',
+  type: 'text',
+  label: 'Textfield',
+  placeholder: 'Placeholder',
+  modelValue: '',
+  errorMsg: '',
+  hint: 'This is a hint text to help user.',
+  prependIcon: '',
+  appendIcon: '',
+  loading: false,
+  disabled: false,
+  clearable: false,
+};
+
+const TextfieldStory = {
+  title: 'Form/Textfield',
+  component: Textfield,
+  setup(args: typeof Textfield) {
+    return {
+      args,
+    };
+  },
+  template: `<Textfield v-bind="args" />`,
+  argTypes: {
+    ...DefaultArgTypes,
+    onInput: { action: 'input' },
+    onFocus: { action: 'focus' },
+    onBlur: { action: 'blur' },
+    'onClick:icon': { action: 'click:icon' },
+    'onClick:clear': { action: 'click:clear' },
+  },
+
+  args: {},
+} as Meta<typeof Textfield>;
+
+export default TextfieldStory;
+
+type Story = StoryObj<typeof TextfieldStory>;
+
+export const Overview: Story = {
+  args: {
+    id: 'textfield-id',
+    label: 'Textfield label',
+    placeholder: 'Textfield placeholder',
+  },
+};
+
+export const Text: Story = {
+  args: {
+    type: 'text',
+    id: 'textfield-id',
+    label: 'Textfield label',
+    placeholder: 'Textfield placeholder',
+  },
+};
+
+export const Mail: Story = {
+  args: {
+    type: 'email',
+    id: 'textfield-id',
+    label: 'Textfield label',
+    placeholder: 'Textfield placeholder',
+  },
+};
+
+export const Password: Story = {
+  args: {
+    type: 'password',
+    id: 'textfield-id',
+    label: 'Textfield label',
+    placeholder: 'Textfield placeholder',
+  },
+};
+
+export const Url: Story = {
+  args: {
+    type: 'url',
+    id: 'textfield-id',
+    label: 'Textfield label',
+    placeholder: 'Textfield placeholder',
+  },
+};
+
+export const Tel: Story = {
+  args: {
+    type: 'tel',
+    id: 'textfield-id',
+    label: 'Textfield label',
+    placeholder: 'Textfield placeholder',
+  },
+};
+
+export const Number: Story = {
+  args: {
+    type: 'number',
+    id: 'textfield-id',
+    label: 'Textfield label',
+    placeholder: 'Textfield placeholder',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    type: 'text',
+    id: 'textfield-id',
+    label: 'Textfield label',
+    placeholder: 'Textfield placeholder',
+    errorMsg: 'This is an error message',
+  },
+};