@bobbykim/mcl-forms 0.2.0

package/lib/mcl-select/MclSelect.vue

@@ -0,0 +1,287 @@
+<script setup lang="ts">
+import type { ColorPalette } from '@bobbykim/manguito-theme'
+import generateClass, { vClickOutside } from '@bobbykim/manguito-theme'
+import { useResizeObserver } from '@vueuse/core'
+import { Transition, computed, ref } from 'vue'
+import type { SelectOptionType, SelectOptions } from './index.types'
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    displayBorder?: boolean
+    borderColor?: ColorPalette
+    rounded?: boolean
+    displayHighlight?: boolean
+    highlightColor?: ColorPalette
+    textcolor?: ColorPalette
+    bgColor?: ColorPalette
+    iconColor?: ColorPalette
+    placeholder?: string
+    displayShadow?: boolean
+    required?: boolean
+    options: SelectOptions
+    selectColor?: ColorPalette
+    invalidFeedback?: string
+    modelValue?: string
+  }>(),
+  {
+    displayBorder: false,
+    borderColor: 'light-4',
+    rounded: false,
+    displayHighlight: true,
+    highlightColor: 'primary',
+    textcolor: 'black',
+    bgColor: 'light-1',
+    iconColor: 'dark-4',
+    selectColor: 'primary',
+    placeholder: '',
+    displayShadow: true,
+    required: false,
+    invalidFeedback: 'No match.',
+  }
+)
+
+const emit = defineEmits(['update:modelValue'])
+const componentRef = ref<HTMLElement>()
+const inputBox = ref<HTMLInputElement>()
+const optionsWidth = ref<number>()
+const inputFocus = ref<boolean>(false)
+const selectedValue = ref<string | SelectOptionType>('')
+
+const setInputFocus = () => {
+  inputFocus.value = true
+}
+
+const handleEscapeKeyUp = () => {
+  selectedValue.value = ''
+  inputFocus.value = false
+  inputBox.value?.blur()
+  emit('update:modelValue', '')
+}
+
+const handleClickOutside = () => {
+  inputFocus.value = false
+}
+
+const handleToggle = () => {
+  inputFocus.value = !inputFocus.value
+  if (inputFocus.value === true) {
+    inputBox.value?.focus()
+  }
+}
+
+const clearInput = (e: Event) => {
+  e.preventDefault()
+  if (selectedValue.value !== '') {
+    selectedValue.value = ''
+  }
+  emit('update:modelValue', '')
+}
+
+const handleOptionClick = (e: Event, option: string | SelectOptionType) => {
+  e.preventDefault()
+  selectedValue.value = typeof option === 'string' ? option : option.text
+  const outputVal = typeof option === 'string' ? option : option.value
+  emit('update:modelValue', outputVal)
+  inputFocus.value = false
+}
+
+const containerClass = computed(() => {
+  const {
+    bgColor,
+    displayBorder,
+    borderColor,
+    displayHighlight,
+    displayShadow,
+    rounded,
+    textcolor,
+  } = props
+  const classArray: string[] = [
+    generateClass('BGCOLOR', bgColor),
+    generateClass('TEXTCOLOR', textcolor),
+  ]
+  if (displayBorder) {
+    classArray.push('border-2')
+    classArray.push(generateClass('BORDER', borderColor))
+  }
+  if (!displayHighlight) {
+    classArray.push('ring-offset-2 transition-all duration-300 ease-linear')
+  }
+  if (displayShadow) {
+    classArray.push('shadow-md')
+  }
+  if (rounded) {
+    classArray.push('rounded-md')
+  }
+  return classArray.join(' ')
+})
+
+const getHighlightClass = (color: ColorPalette, rounded: boolean): string => {
+  /**
+   * @color - highlightColor
+   * @rounded - rounded
+   */
+  const classArray: string[] = [generateClass('BEFOREBG', color)]
+  if (rounded) {
+    classArray.push('rounded-b-md')
+  }
+  return classArray.join(' ')
+}
+
+const optionsBlockClass = computed(() => {
+  const { displayHighlight, bgColor, borderColor, rounded } = props
+  const classArray: string[] = [
+    generateClass('BGCOLOR', bgColor),
+    generateClass('BORDER', borderColor),
+  ]
+  if (!displayHighlight) {
+    classArray.push('mt-2xs')
+  }
+  if (rounded) {
+    classArray.push('rounded-md')
+  }
+  return classArray.join(' ')
+})
+
+const filteredOptions = computed(() => {
+  if (selectedValue.value === '') {
+    return props.options
+  } else {
+    const filteredData = props.options.filter((data) => {
+      const textVal = new RegExp(`${selectedValue.value}`, 'gi')
+      return typeof data === 'string'
+        ? data.match(textVal)
+        : data.text.match(textVal)
+    })
+    return filteredData
+  }
+})
+
+const handleOptionsWidth = computed(() => {
+  return { width: `${optionsWidth.value}px` }
+})
+
+useResizeObserver(componentRef, () => {
+  if (componentRef.value) {
+    optionsWidth.value = componentRef.value.clientWidth
+  }
+})
+</script>
+
+<template>
+  <div
+    @keyup.esc="handleEscapeKeyUp"
+    v-click-outside="handleClickOutside"
+    ref="componentRef"
+  >
+    <div
+      class="p-2xs flex relative gap-3xs"
+      :class="[
+        !displayHighlight &&
+          inputFocus &&
+          generateClass('RINGCOLOR', borderColor) + ' ring-4',
+        containerClass,
+      ]"
+    >
+      <input
+        :id="id"
+        type="text"
+        class="w-full bg-transparent outline-none"
+        v-model="selectedValue"
+        ref="inputBox"
+        role="combobox"
+        :placeholder="placeholder"
+        aria-autocomplete="list"
+        :aria-expanded="inputFocus"
+        @focus="setInputFocus"
+      />
+      <div
+        class="flex items-center px-3xs"
+        :class="[
+          selectedValue === '' ? 'hidden cursor-text' : 'block cursor-pointer',
+        ]"
+        @click="clearInput"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 384 512"
+          class="h-xs opacity-70"
+          :class="[generateClass('SVGFILL', iconColor)]"
+        >
+          <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+          <path
+            d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+          />
+        </svg>
+      </div>
+      <div class="flex items-center px-3xs" @click="handleToggle">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 320 512"
+          class="h-xs"
+          :class="[
+            !inputFocus ? 'rotate-0' : 'rotate-180',
+            'transition-transform duration-300 ease-in',
+            generateClass('SVGFILL', iconColor),
+          ]"
+        >
+          <!-- Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+          <path
+            d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"
+          />
+        </svg>
+      </div>
+    </div>
+    <div
+      v-if="displayHighlight"
+      class="relative h-3xs overflow-hidden before:absolute before:bottom-0 before:left-0 before:h-full before:w-0 before:transition-[width] before:duration-300 before:ease-linear -top-1"
+      :class="[
+        inputFocus ? 'before:w-full' : 'before:w-0',
+        getHighlightClass(highlightColor, rounded),
+      ]"
+    ></div>
+    <transition name="options">
+      <div class="absolute" v-if="inputFocus">
+        <ul
+          :class="[optionsBlockClass]"
+          class="max-h-[200px] overflow-y-auto border-2"
+          :style="handleOptionsWidth"
+          role="listbox"
+        >
+          <li
+            v-for="(option, idx) in filteredOptions"
+            :key="idx"
+            class="p-2xs cursor-pointer"
+            role="option"
+            :class="[generateClass('HVBGCOLOR', highlightColor)]"
+            @click="handleOptionClick($event, option)"
+          >
+            {{ typeof option === 'string' ? option : option.text }}
+          </li>
+          <li
+            v-if="selectedValue !== '' && filteredOptions.length === 0"
+            class="p-2xs cursor-pointer"
+            :class="[generateClass('HVBGCOLOR', selectColor)]"
+          >
+            <slot name="no-match">
+              <span>{{ invalidFeedback }}</span>
+            </slot>
+          </li>
+        </ul>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.options-enter-active,
+.options-leave-active {
+  opacity: 1;
+  transition: all 0.3s;
+}
+.options-enter-from,
+.options-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>

package/lib/mcl-select/MclSelect.vue.d.ts

@@ -0,0 +1,108 @@
+import type { ColorPalette } from '@bobbykim/manguito-theme';
+import type { SelectOptions } from './index.types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    id: string;
+    displayBorder?: boolean | undefined;
+    borderColor?: ColorPalette | undefined;
+    rounded?: boolean | undefined;
+    displayHighlight?: boolean | undefined;
+    highlightColor?: ColorPalette | undefined;
+    textcolor?: ColorPalette | undefined;
+    bgColor?: ColorPalette | undefined;
+    iconColor?: ColorPalette | undefined;
+    placeholder?: string | undefined;
+    displayShadow?: boolean | undefined;
+    required?: boolean | undefined;
+    options: SelectOptions;
+    selectColor?: ColorPalette | undefined;
+    invalidFeedback?: string | undefined;
+    modelValue?: string | undefined;
+}>, {
+    displayBorder: boolean;
+    borderColor: string;
+    rounded: boolean;
+    displayHighlight: boolean;
+    highlightColor: string;
+    textcolor: string;
+    bgColor: string;
+    iconColor: string;
+    selectColor: string;
+    placeholder: string;
+    displayShadow: boolean;
+    required: boolean;
+    invalidFeedback: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    id: string;
+    displayBorder?: boolean | undefined;
+    borderColor?: ColorPalette | undefined;
+    rounded?: boolean | undefined;
+    displayHighlight?: boolean | undefined;
+    highlightColor?: ColorPalette | undefined;
+    textcolor?: ColorPalette | undefined;
+    bgColor?: ColorPalette | undefined;
+    iconColor?: ColorPalette | undefined;
+    placeholder?: string | undefined;
+    displayShadow?: boolean | undefined;
+    required?: boolean | undefined;
+    options: SelectOptions;
+    selectColor?: ColorPalette | undefined;
+    invalidFeedback?: string | undefined;
+    modelValue?: string | undefined;
+}>, {
+    displayBorder: boolean;
+    borderColor: string;
+    rounded: boolean;
+    displayHighlight: boolean;
+    highlightColor: string;
+    textcolor: string;
+    bgColor: string;
+    iconColor: string;
+    selectColor: string;
+    placeholder: string;
+    displayShadow: boolean;
+    required: boolean;
+    invalidFeedback: string;
+}>>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    required: boolean;
+    placeholder: string;
+    rounded: boolean;
+    displayBorder: boolean;
+    borderColor: ColorPalette;
+    bgColor: ColorPalette;
+    displayShadow: boolean;
+    displayHighlight: boolean;
+    highlightColor: ColorPalette;
+    textcolor: ColorPalette;
+    invalidFeedback: string;
+    iconColor: ColorPalette;
+    selectColor: ColorPalette;
+}, {}>, {
+    "no-match"?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/mcl-select/index.types.d.ts

@@ -0,0 +1,5 @@
+export interface SelectOptionType {
+    text: string;
+    value: string | number;
+}
+export type SelectOptions = SelectOptionType[] | string[];

package/lib/mcl-select/index.types.js

@@ -0,0 +1 @@
+export {};

package/lib/mcl-select/index.types.ts

@@ -0,0 +1,6 @@
+export interface SelectOptionType {
+  text: string
+  value: string | number
+}
+
+export type SelectOptions = SelectOptionType[] | string[]

package/lib/mcl-text-area/MclTextArea.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ColorPalette } from '@bobbykim/manguito-theme'
+import generateClass from '@bobbykim/manguito-theme'
+import InputHighlight from '../common/InputHighlight.vue'
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    displayBorder?: boolean
+    borderColor?: ColorPalette
+    rounded?: boolean
+    displayHighlight?: boolean
+    highlightColor?: ColorPalette
+    bgColor?: ColorPalette
+    textcolor?: ColorPalette
+    placeholder?: string
+    displayShadow?: boolean
+    required?: boolean
+    rows?: number
+    modelValue?: string
+  }>(),
+  {
+    displayBorder: false,
+    borderColor: 'light-4',
+    rounded: false,
+    displayHighlight: true,
+    highlightColor: 'primary',
+    bgColor: 'light-1',
+    textcolor: 'black',
+    placeholder: '',
+    displayShadow: true,
+    required: false,
+    rows: 5,
+  }
+)
+
+const emit = defineEmits(['update:modelValue'])
+const inputValue = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  },
+})
+
+const inputClass = computed(() => {
+  const {
+    bgColor,
+    displayBorder,
+    borderColor,
+    displayHighlight,
+    displayShadow,
+    rounded,
+    textcolor,
+  } = props
+  const classArray: string[] = [
+    generateClass('BGCOLOR', bgColor),
+    generateClass('TEXTCOLOR', textcolor),
+  ]
+  if (displayBorder) {
+    classArray.push('border-2')
+    classArray.push(generateClass('BORDER', borderColor))
+  }
+  if (!displayHighlight) {
+    classArray.push(
+      'focus:ring-4 ring-offset-2 transition-all duration-300 ease-linear'
+    )
+    classArray.push(generateClass('FOCUSRING', borderColor))
+  }
+  if (displayShadow) {
+    classArray.push('shadow-md')
+  }
+  if (rounded) {
+    classArray.push('rounded-md')
+  }
+  return classArray.join(' ')
+})
+</script>
+
+<template>
+  <div>
+    <textarea
+      :id="id"
+      class="w-full p-2xs outline-none input__text peer"
+      :class="inputClass"
+      v-model="inputValue"
+      :placeholder="placeholder"
+      :required="required"
+      :rows="rows"
+    />
+    <input-highlight
+      v-if="displayHighlight"
+      :color="highlightColor"
+      :rounded="rounded"
+      :offset="2.5"
+    ></input-highlight>
+  </div>
+</template>

package/lib/mcl-text-area/MclTextArea.vue.d.ts

@@ -0,0 +1,88 @@
+import type { ColorPalette } from '@bobbykim/manguito-theme';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    id: string;
+    displayBorder?: boolean | undefined;
+    borderColor?: ColorPalette | undefined;
+    rounded?: boolean | undefined;
+    displayHighlight?: boolean | undefined;
+    highlightColor?: ColorPalette | undefined;
+    bgColor?: ColorPalette | undefined;
+    textcolor?: ColorPalette | undefined;
+    placeholder?: string | undefined;
+    displayShadow?: boolean | undefined;
+    required?: boolean | undefined;
+    rows?: number | undefined;
+    modelValue?: string | undefined;
+}>, {
+    displayBorder: boolean;
+    borderColor: string;
+    rounded: boolean;
+    displayHighlight: boolean;
+    highlightColor: string;
+    bgColor: string;
+    textcolor: string;
+    placeholder: string;
+    displayShadow: boolean;
+    required: boolean;
+    rows: number;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    id: string;
+    displayBorder?: boolean | undefined;
+    borderColor?: ColorPalette | undefined;
+    rounded?: boolean | undefined;
+    displayHighlight?: boolean | undefined;
+    highlightColor?: ColorPalette | undefined;
+    bgColor?: ColorPalette | undefined;
+    textcolor?: ColorPalette | undefined;
+    placeholder?: string | undefined;
+    displayShadow?: boolean | undefined;
+    required?: boolean | undefined;
+    rows?: number | undefined;
+    modelValue?: string | undefined;
+}>, {
+    displayBorder: boolean;
+    borderColor: string;
+    rounded: boolean;
+    displayHighlight: boolean;
+    highlightColor: string;
+    bgColor: string;
+    textcolor: string;
+    placeholder: string;
+    displayShadow: boolean;
+    required: boolean;
+    rows: number;
+}>>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    required: boolean;
+    placeholder: string;
+    rounded: boolean;
+    displayBorder: boolean;
+    borderColor: ColorPalette;
+    bgColor: ColorPalette;
+    displayShadow: boolean;
+    displayHighlight: boolean;
+    highlightColor: ColorPalette;
+    textcolor: ColorPalette;
+    rows: number;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/package.json

@@ -0,0 +1 @@
+{"name":"@bobbykim/mcl-forms","version":"0.2.0","description":"","type":"module","main":"index.ts","scripts":{"build":"vue-tsc --project tsconfig.vue.json && tsc"},"author":{"name":"Bobby Kim","url":"https://www.devbobbykim.com/"},"homepage":"https://manguito-component-library.vercel.app/","repository":{"type":"git","url":"https://github.com/bobbykim89/manguito-component-library.git"},"publishConfig":{"access":"public"},"license":"MIT","dependencies":{"@bobbykim/manguito-theme":"^0.14.0"},"gitHead":"4d94a8d34988d926c8d465891fd7aa535cffdf33"}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+"extends": "../../../tsconfig.json",
+"include": ["./**/*.ts"],
+"exclude": ["node_modules", "./**/*.vue.d.ts", "./**/*.vue"],
+"compilerOptions": {
+"skipLibCheck": true,
+"declaration": true
+}
+}

package/tsconfig.vue.json

@@ -0,0 +1,9 @@
+{
+"extends": "../../../tsconfig.json",
+"include": ["./**/*.vue"],
+"exclude": ["node_modules"],
+"compilerOptions": {
+"declaration": true,
+"emitDeclarationOnly": true
+}
+}