@bobbykim/mcl-forms 0.6.0 → 0.7.0

package/lib/mcl-input-radio/MclInputRadio.vue

@@ -1,91 +0,0 @@
-<script setup lang="ts">
-import type { ColorPalette } from '@bobbykim/manguito-theme'
-import generateClass from '@bobbykim/manguito-theme'
-import { computed, ref } from 'vue'
-import type { RadioSizeType } from './index.types'
-
-const props = withDefaults(
-  defineProps<{
-    id: string
-    radioSize?: RadioSizeType
-    bgColor?: ColorPalette
-    checkedColor?: ColorPalette
-    displayShadow?: boolean
-    value?: string | number
-    checked?: boolean
-  }>(),
-  {
-    radioSize: 'md',
-    bgColor: 'success',
-    checkedColor: 'light-1',
-    displayShadow: false,
-    value: '',
-    checked: false,
-  }
-)
-
-const radioRef = ref<HTMLInputElement>()
-const emit = defineEmits<{
-  (e: 'change', event: Event, value: string | number): void
-}>()
-
-const radioClick = () => {
-  radioRef.value?.click()
-}
-
-const getRadioSize = computed(() => {
-  const { radioSize } = props
-  if (radioSize === 'sm') {
-    return 'h-xs w-xs'
-  }
-  if (radioSize === 'lg') {
-    return 'h-md w-md'
-  }
-  return 'h-sm w-sm'
-})
-const checkedRadioSize = computed<string>(() => {
-  const { radioSize } = props
-  if (radioSize === 'sm') {
-    return 'peer-checked:before:h-2xs peer-checked:before:w-2xs'
-  }
-  if (radioSize === 'lg') {
-    return 'peer-checked:before:h-xs peer-checked:before:w-xs'
-  }
-  return 'peer-checked:before:h-[12px] peer-checked:before:w-[12px]'
-})
-const getColorClass = computed(() => {
-  const { bgColor, checkedColor, displayShadow } = props
-  const classArray: string[] = [
-    generateClass('BGCOLOR', bgColor),
-    generateClass('BEFOREBG', checkedColor),
-  ]
-  if (displayShadow) {
-    classArray.push('drop-shadow-md')
-  }
-  return classArray.join(' ')
-})
-
-const handleChange = (e: Event) => {
-  const value = (e.target as HTMLInputElement).value
-  emit('change', e, value)
-}
-</script>
-
-<template>
-  <div class="flex items-center">
-    <input
-      :id="id"
-      type="radio"
-      class="appearance-none peer"
-      ref="radioRef"
-      :value="value"
-      :checked="checked"
-      @change="handleChange"
-    />
-    <span
-      class="rounded-full inline-block relative before:absolute before:rounded-full before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2"
-      :class="[getRadioSize, checkedRadioSize, getColorClass]"
-      @click="radioClick"
-    ></span>
-  </div>
-</template>

package/lib/mcl-input-radio/MclInputRadio.vue.d.ts

@@ -1,62 +0,0 @@
-import type { ColorPalette } from '@bobbykim/manguito-theme';
-import type { RadioSizeType } from './index.types';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id: string;
-    radioSize?: RadioSizeType | undefined;
-    bgColor?: ColorPalette | undefined;
-    checkedColor?: ColorPalette | undefined;
-    displayShadow?: boolean | undefined;
-    value?: string | number | undefined;
-    checked?: boolean | undefined;
-}>, {
-    radioSize: string;
-    bgColor: string;
-    checkedColor: string;
-    displayShadow: boolean;
-    value: string;
-    checked: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (event: Event, value: string | number) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id: string;
-    radioSize?: RadioSizeType | undefined;
-    bgColor?: ColorPalette | undefined;
-    checkedColor?: ColorPalette | undefined;
-    displayShadow?: boolean | undefined;
-    value?: string | number | undefined;
-    checked?: boolean | undefined;
-}>, {
-    radioSize: string;
-    bgColor: string;
-    checkedColor: string;
-    displayShadow: boolean;
-    value: string;
-    checked: boolean;
-}>>> & {
-    onChange?: ((event: Event, value: string | number) => any) | undefined;
-}, {
-    checked: boolean;
-    value: string | number;
-    bgColor: ColorPalette;
-    displayShadow: boolean;
-    radioSize: RadioSizeType;
-    checkedColor: ColorPalette;
-}, {}>;
-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/lib/mcl-input-radio/index.types.d.ts

@@ -1 +0,0 @@
-export type RadioSizeType = 'sm' | 'md' | 'lg';

package/lib/mcl-input-radio/index.types.js

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

package/lib/mcl-input-radio/index.types.ts

@@ -1 +0,0 @@
-export type RadioSizeType = 'sm' | 'md' | 'lg'

package/lib/mcl-input-switch/MclInputSwitch.vue

@@ -1,147 +0,0 @@
-<script setup lang="ts">
-import type { ColorPalette } from '@bobbykim/manguito-theme'
-import generateClass from '@bobbykim/manguito-theme'
-import { computed, ref } from 'vue'
-import type { ColorMap } from '../common/index.types'
-import type { SwitchSizeType } from './index.types'
-
-const props = withDefaults(
-  defineProps<{
-    id: string
-    sliderColor?: ColorPalette
-    onColor?: ColorPalette
-    offColor?: ColorPalette
-    switchSize?: SwitchSizeType
-    rounded?: boolean
-    modelValue?: boolean
-  }>(),
-  {
-    sliderColor: 'light-1',
-    onColor: 'success',
-    offColor: 'dark-1',
-    switchSize: 'md',
-    rounded: true,
-  }
-)
-
-const emit = defineEmits(['update:modelValue'])
-const inputRef = ref<HTMLInputElement>()
-
-const peerBgColor: ColorMap = {
-  primary: 'peer-checked/input:bg-primary',
-  secondary: 'peer-checked/input:bg-secondary',
-  success: 'peer-checked/input:bg-success',
-  info: 'peer-checked/input:bg-info',
-  warning: 'peer-checked/input:bg-warning',
-  danger: 'peer-checked/input:bg-danger',
-  'light-1': 'peer-checked/input:bg-light-1',
-  'light-2': 'peer-checked/input:bg-light-2',
-  'light-3': 'peer-checked/input:bg-light-3',
-  'light-4': 'peer-checked/input:bg-light-4',
-  'dark-1': 'peer-checked/input:bg-dark-1',
-  'dark-2': 'peer-checked/input:bg-dark-2',
-  'dark-3': 'peer-checked/input:bg-dark-3',
-  'dark-4': 'peer-checked/input:bg-dark-1',
-  transparent: 'peer-checked/input:bg-transparent',
-  black: 'peer-checked/input:bg-black',
-  white: 'peer-checked/input:bg-white',
-}
-
-const onSwitchClick = (): void => {
-  inputRef.value?.click()
-}
-const inputValue = computed({
-  get() {
-    return props.modelValue
-  },
-  set(value) {
-    emit('update:modelValue', value)
-  },
-})
-
-const switchSize = computed(() => {
-  /**
-   * @summary - handle value of variables determining the size of the switch
-   * @param {SwitchSizeType} switchSize - size of switch sm|md|lg
-   */
-  if (props.switchSize === 'sm') {
-    return {
-      '--switch-width': '30px',
-      '--switch-height': '17px',
-      '--slider-size': '13px',
-      '--gutter-size': '2px',
-    }
-  }
-  if (props.switchSize === 'lg') {
-    return {
-      '--switch-width': '60px',
-      '--switch-height': '34px',
-      '--slider-size': '26px',
-      '--gutter-size': '4px',
-    }
-  }
-  return {
-    '--switch-width': '45px',
-    '--switch-height': '25.5px',
-    '--slider-size': '19.5px',
-    '--gutter-size': '3px',
-  }
-})
-const switchClass = computed<string>(() => {
-  /**
-   * @summary - handle style classes based on input prop values
-   * @param {ColorPalette} sliderColor - color of slider button
-   * @param {ColorPalette} onColor - color of switch when model value returns true
-   * @param {ColorPalette} offColor - color of switch when model value returns false
-   * @param {Boolean} rounded - whether this component will have round corners or not
-   */
-  const { sliderColor, onColor, offColor, rounded } = props
-  const classArray: string[] = [
-    generateClass('BGCOLOR', offColor),
-    generateClass('BEFOREBG', sliderColor),
-    peerBgColor[onColor],
-  ]
-  if (rounded) {
-    classArray.push('rounded-full before:rounded-full')
-  }
-  return classArray.join(' ')
-})
-</script>
-
-<template>
-  <div class="switch relative" :style="switchSize" @click="onSwitchClick">
-    <input
-      :id="id"
-      class="hidden peer/input"
-      v-model="inputValue"
-      ref="inputRef"
-      type="checkbox"
-    />
-    <span
-      class="slider absolute inset-0 cursor-pointer transition-all duration-300 before:absolute before:transition-all before:duration-300"
-      :class="switchClass"
-    ></span>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/* The switch - the box around the slider */
-.switch {
-  width: var(--switch-width);
-  height: var(--switch-height);
-}
-
-.slider:before {
-  content: '';
-  height: var(--slider-size);
-  width: var(--slider-size);
-  left: var(--gutter-size);
-  bottom: var(--gutter-size);
-}
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(var(--slider-size));
-  -ms-transform: translateX(var(--slider-size));
-  transform: translateX(var(--slider-size));
-}
-</style>

package/lib/mcl-input-switch/MclInputSwitch.vue.d.ts

@@ -1,59 +0,0 @@
-import type { ColorPalette } from '@bobbykim/manguito-theme';
-import type { SwitchSizeType } from './index.types';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id: string;
-    sliderColor?: ColorPalette | undefined;
-    onColor?: ColorPalette | undefined;
-    offColor?: ColorPalette | undefined;
-    switchSize?: SwitchSizeType | undefined;
-    rounded?: boolean | undefined;
-    modelValue?: boolean | undefined;
-}>, {
-    sliderColor: string;
-    onColor: string;
-    offColor: string;
-    switchSize: string;
-    rounded: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id: string;
-    sliderColor?: ColorPalette | undefined;
-    onColor?: ColorPalette | undefined;
-    offColor?: ColorPalette | undefined;
-    switchSize?: SwitchSizeType | undefined;
-    rounded?: boolean | undefined;
-    modelValue?: boolean | undefined;
-}>, {
-    sliderColor: string;
-    onColor: string;
-    offColor: string;
-    switchSize: string;
-    rounded: boolean;
-}>>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
-    rounded: boolean;
-    sliderColor: ColorPalette;
-    onColor: ColorPalette;
-    offColor: ColorPalette;
-    switchSize: SwitchSizeType;
-}, {}>;
-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/lib/mcl-input-switch/index.types.d.ts

@@ -1 +0,0 @@
-export type SwitchSizeType = 'sm' | 'md' | 'lg';

package/lib/mcl-input-switch/index.types.js

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

package/lib/mcl-input-switch/index.types.ts

@@ -1 +0,0 @@
-export type SwitchSizeType = 'sm' | 'md' | 'lg'

package/lib/mcl-input-text/MclInputText.vue

@@ -1,113 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { ColorPalette, InputType } 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
-    textcolor?: ColorPalette
-    bgColor?: ColorPalette
-    placeholder?: string
-    type?: InputType
-    displayShadow?: boolean
-    required?: boolean
-    modelValue?: string
-    invalidFeedback?: string
-    minLength?: number
-    maxLength?: number
-    pattern?: string
-  }>(),
-  {
-    displayBorder: false,
-    borderColor: 'light-4',
-    rounded: false,
-    displayHighlight: true,
-    highlightColor: 'primary',
-    textcolor: 'black',
-    bgColor: 'light-1',
-    placeholder: '',
-    type: 'text',
-    displayShadow: true,
-    required: false,
-  }
-)
-
-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>
-    <input
-      :id="id"
-      :type="type"
-      class="w-full p-2xs outline-none peer peer/validation"
-      :class="inputClass"
-      v-model="inputValue"
-      :placeholder="placeholder"
-      :required="required"
-      :minlength="minLength"
-      :maxlength="maxLength"
-      :pattern="pattern"
-    />
-    <input-highlight
-      v-if="displayHighlight"
-      :color="highlightColor"
-      :rounded="rounded"
-    ></input-highlight>
-    <div
-      class="peer-valid/validation:hidden peer-inavlid/validation:block ml-3xs"
-    >
-      <slot name="invalid-feedback">
-        <span class="text-xs text-danger">{{ invalidFeedback }}</span>
-      </slot>
-    </div>
-  </div>
-</template>

package/lib/mcl-input-text/MclInputText.vue.d.ts

@@ -1,103 +0,0 @@
-import type { ColorPalette, InputType } from '@bobbykim/manguito-theme';
-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;
-    placeholder?: string | undefined;
-    type?: InputType | undefined;
-    displayShadow?: boolean | undefined;
-    required?: boolean | undefined;
-    modelValue?: string | undefined;
-    invalidFeedback?: string | undefined;
-    minLength?: number | undefined;
-    maxLength?: number | undefined;
-    pattern?: string | undefined;
-}>, {
-    displayBorder: boolean;
-    borderColor: string;
-    rounded: boolean;
-    displayHighlight: boolean;
-    highlightColor: string;
-    textcolor: string;
-    bgColor: string;
-    placeholder: string;
-    type: string;
-    displayShadow: boolean;
-    required: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, 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;
-    placeholder?: string | undefined;
-    type?: InputType | undefined;
-    displayShadow?: boolean | undefined;
-    required?: boolean | undefined;
-    modelValue?: string | undefined;
-    invalidFeedback?: string | undefined;
-    minLength?: number | undefined;
-    maxLength?: number | undefined;
-    pattern?: string | undefined;
-}>, {
-    displayBorder: boolean;
-    borderColor: string;
-    rounded: boolean;
-    displayHighlight: boolean;
-    highlightColor: string;
-    textcolor: string;
-    bgColor: string;
-    placeholder: string;
-    type: string;
-    displayShadow: boolean;
-    required: boolean;
-}>>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
-    rounded: boolean;
-    type: InputType;
-    required: boolean;
-    placeholder: string;
-    displayBorder: boolean;
-    bgColor: ColorPalette;
-    borderColor: ColorPalette;
-    displayShadow: boolean;
-    displayHighlight: boolean;
-    highlightColor: ColorPalette;
-    textcolor: ColorPalette;
-}, {}>, {
-    "invalid-feedback"?(_: {}): 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;
-    };
-};