windly-ui 1.0.1 → 1.0.2

package/ui-library/components/Textarea.vue

@@ -1,233 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-    inheritAttrs: false,
-})
-
-import { computed, ref, watch, nextTick } from 'vue'
-import { useUiClasses } from './useUiClasses'
-import { uiProps } from './uiProps'
-
-const props = defineProps({
-    modelValue: {
-        type: String,
-        default: '',
-    },
-
-    label: {
-        type: String,
-        default: '',
-    },
-
-    placeholder: {
-        type: String,
-        default: '',
-    },
-
-    rows: {
-        type: Number,
-        default: 3,
-    },
-
-    maxRows: {
-        type: Number,
-        default: 10,
-    },
-
-    autoGrow: {
-        type: Boolean,
-        default: false,
-    },
-
-    readonly: {
-        type: Boolean,
-        default: false,
-    },
-
-    error: {
-        type: Boolean,
-        default: false,
-    },
-
-    errorMessage: {
-        type: String,
-        default: '',
-    },
-
-    hint: {
-        type: String,
-        default: '',
-    },
-
-    showWordCount: {
-        type: Boolean,
-        default: false,
-    },
-
-    showCharCount: {
-        type: Boolean,
-        default: false,
-    },
-
-    maxlength: {
-        type: Number,
-        default: undefined,
-    },
-
-    ...uiProps,
-})
-
-const emit = defineEmits([
-    'update:modelValue',
-])
-
-const textareaRef = ref<HTMLTextAreaElement>()
-
-const {
-    contentClass,
-    contentStyle,
-
-    color,
-    textColor,
-
-    rounded,
-    size,
-
-    disable,
-
-    roundedClass,
-    sizeClass,
-
-    computedContentClass,
-
-    isHex,
-} = useUiClasses(props)
-
-const paddingClass = {
-    sm: 'px-3 py-2',
-    md: 'px-4 py-3',
-    lg: 'px-5 py-4',
-}
-
-const textareaStyle = computed(() => {
-    const style: Record<string, any> = {
-        ...(typeof contentStyle.value === 'object' && contentStyle.value !== null ? contentStyle.value : {}),
-    }
-
-    if (isHex(color.value)) {
-        style.borderColor = color.value
-    }
-
-    if (isHex(textColor.value)) {
-        style.color = textColor.value
-    }
-
-    return style
-})
-
-const textareaClass = computed(() => {
-    // cast keys to the exact key types for the maps so TS can validate indexing
-    const rKey = rounded.value as keyof typeof roundedClass
-    const sKey = size.value as keyof typeof sizeClass
-    const pKey = size.value as keyof typeof paddingClass
-
-    const rClass = roundedClass[rKey] ?? ''
-    const sClass = sizeClass[sKey] ?? ''
-    const pClass = paddingClass[pKey] ?? ''
-
-    let cls = `
-    w-full
-    border
-    transition-all
-    duration-300
-    focus:outline-none
-    focus:ring-2
-    ${rClass}
-    ${sClass}
-    ${pClass}
-  `
-
-    if (disable.value) {
-        cls += ' opacity-50 cursor-not-allowed'
-    }
-
-    if (props.error) {
-        cls += ' border-red-500'
-    } else if (!isHex(color.value)) {
-        cls += ` border-${color.value}`
-    }
-
-    if (textColor.value && !isHex(textColor.value)) {
-        cls += ` text-${textColor.value}`
-    }
-
-    cls += ` ${computedContentClass.value}`
-    cls += ` ${contentClass.value || ''}`
-
-    return cls
-})
-
-const wordCount = computed(() => {
-    return props.modelValue
-        .trim()
-        .split(/\s+/)
-        .filter(Boolean)
-        .length
-})
-
-const charCount = computed(() => {
-    return props.modelValue.length
-})
-
-function updateValue(event: Event) {
-    emit(
-        'update:modelValue',
-        (event.target as HTMLTextAreaElement).value
-    )
-}
-
-function resizeTextarea() {
-    if (!props.autoGrow) return
-    if (!textareaRef.value) return
-
-    textareaRef.value.style.height = 'auto'
-    textareaRef.value.style.height =
-    textareaRef.value.scrollHeight + 'px'
-}
-
-watch(
-    () => props.modelValue,
-    async () => {
-        await nextTick()
-        resizeTextarea()
-    },
-    { immediate: true }
-)
-</script>
-<template>
-    <div class="flex flex-col gap-1">
-        <label v-if="label" class="font-medium">
-            {{ label }}
-        </label>
-
-        <textarea ref="textareaRef" :value="modelValue" :rows="rows" :placeholder="placeholder" :disabled="disable"
-            :readonly="readonly" :maxlength="maxlength" :class="textareaClass" :style="textareaStyle"
-            @input="updateValue" v-bind="$attrs" />
-        <div class="flex justify-between text-xs text-gray-500">
-            <span>
-                {{ error ? errorMessage : hint }}
-            </span>
-            <span class="flex gap-3">
-                <span v-if="showWordCount">
-                    {{ wordCount }} words
-                </span>
-
-                <span v-if="showCharCount">
-                    {{ charCount }}
-                    <template v-if="maxlength">
-                        / {{ maxlength }}
-                    </template>
-                </span>
-            </span>
-        </div>
-    </div>
-</template>

package/ui-library/components/Toggle.vue

@@ -1,319 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-defineOptions({
-  name: 'UIToggle',
-})
-
-type LabelPosition =
-  | 'top'
-  | 'bottom'
-  | 'left'
-  | 'right'
-
-type ToggleSize =
-  | 'small'
-  | 'medium'
-  | 'large'
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: boolean | string | number
-
-    label?: string
-
-    labelPosition?: LabelPosition
-
-    customClasses?: string
-
-    trueColor?: string
-
-    falseColor?: string
-
-    size?: ToggleSize
-
-    activeValue?: string | number | boolean
-
-    inactiveValue?: string | number | boolean
-
-    activeIcon?: string
-
-    inactiveIcon?: string
-
-    disable?: boolean
-  }>(),
-  {
-    modelValue: false,
-
-    label: '',
-
-    labelPosition: 'right',
-
-    customClasses: '',
-
-    trueColor: 'blue-500',
-
-    falseColor: 'gray-300',
-
-    size: 'medium',
-
-    activeValue: true,
-
-    inactiveValue: false,
-
-    activeIcon: '',
-
-    inactiveIcon: '',
-
-    disable: false,
-  },
-)
-
-const emit = defineEmits<{
-  (
-    e: 'update:modelValue',
-    value:
-      | boolean
-      | string
-      | number,
-  ): void
-}>()
-
-const isHex = (val: string) => {
-  return (
-    val.startsWith('#') ||
-    val.startsWith('rgb') ||
-    val.startsWith('hsl')
-  )
-}
-
-const isActive = computed(
-  () =>
-    props.modelValue ===
-    props.activeValue,
-)
-
-const toggleSize = computed(() => {
-  switch (props.size) {
-    case 'small':
-      return {
-        bg: 'w-10 h-5',
-
-        dot: 'w-4 h-4 top-0.5 left-0.5',
-
-        translate:
-          'translate-x-5',
-      }
-
-    case 'large':
-      return {
-        bg: 'w-16 h-9',
-
-        dot: 'w-7 h-7 top-1 left-1',
-
-        translate:
-          'translate-x-7',
-      }
-
-    case 'medium':
-    default:
-      return {
-        bg: 'w-14 h-8',
-
-        dot: 'w-6 h-6 top-1 left-1',
-
-        translate:
-          'translate-x-6',
-      }
-  }
-})
-
-const toggleBgClasses = computed(
-  () => [
-    !isHex(props.trueColor) &&
-    isActive.value
-      ? `bg-${props.trueColor}`
-      : '',
-
-    !isHex(props.falseColor) &&
-    !isActive.value
-      ? `bg-${props.falseColor}`
-      : '',
-  ],
-)
-
-const toggleBgStyle = computed(
-  () => {
-    const style: Record<
-      string,
-      string
-    > = {}
-
-    if (
-      isActive.value &&
-      isHex(props.trueColor)
-    ) {
-      style.backgroundColor =
-        props.trueColor
-    }
-
-    if (
-      !isActive.value &&
-      isHex(props.falseColor)
-    ) {
-      style.backgroundColor =
-        props.falseColor
-    }
-
-    return style
-  },
-)
-
-const toggle = () => {
-  if (props.disable)
-    return
-
-  const newValue =
-    isActive.value
-      ? props.inactiveValue
-      : props.activeValue
-
-  emit(
-    'update:modelValue',
-    newValue,
-  )
-}
-</script>
-
-<template>
-  <div
-    :class="[
-      'toggle-container flex items-center',
-      customClasses,
-    ]"
-    :style="{
-      flexDirection:
-        labelPosition ===
-          'top' ||
-        labelPosition ===
-          'bottom'
-          ? 'column'
-          : 'row',
-    }"
-  >
-    <!-- Top Label -->
-    <span
-      v-if="
-        label &&
-        labelPosition ===
-          'top'
-      "
-      class="mb-2 font-medium text-gray-700 dark:text-gray-300"
-    >
-      {{ label }}
-    </span>
-
-    <!-- Left Label -->
-    <span
-      v-if="
-        label &&
-        labelPosition ===
-          'left'
-      "
-      class="mr-3 font-medium text-gray-700 dark:text-gray-300"
-    >
-      {{ label }}
-    </span>
-
-    <!-- Toggle -->
-    <div
-      :class="[
-        'relative inline-flex items-center cursor-pointer',
-        {
-          'opacity-50 pointer-events-none':
-            disable,
-        },
-      ]"
-      @click="toggle"
-    >
-      <!-- Background -->
-      <span
-        :class="[
-          'block rounded-full transition-colors duration-300 ease-in-out',
-          toggleSize.bg,
-          toggleBgClasses,
-        ]"
-        :style="toggleBgStyle"
-      />
-
-      <!-- Dot -->
-      <span
-        :class="[
-          'toggle-dot absolute rounded-full bg-white transition-transform duration-300 ease-in-out shadow-md hover:glow-effect flex items-center justify-center',
-
-          toggleSize.dot,
-
-          {
-            [toggleSize.translate]:
-              isActive,
-          },
-        ]"
-      >
-        <span
-          class="material-icons text-sm"
-        >
-          {{
-            isActive
-              ? activeIcon
-              : inactiveIcon
-          }}
-        </span>
-      </span>
-    </div>
-
-    <!-- Bottom Label -->
-    <span
-      v-if="
-        label &&
-        labelPosition ===
-          'bottom'
-      "
-      class="mt-2 font-medium text-gray-700 dark:text-gray-300"
-    >
-      {{ label }}
-    </span>
-
-    <!-- Right Label -->
-    <span
-      v-if="
-        label &&
-        labelPosition ===
-          'right'
-      "
-      class="ml-3 font-medium text-gray-700 dark:text-gray-300"
-    >
-      {{ label }}
-    </span>
-  </div>
-</template>
-
-<style scoped>
-.toggle-container {
-  user-select: none;
-}
-
-.glow-effect {
-  transition:
-    box-shadow 0.3s ease-in-out;
-  box-shadow:
-    0 0 10px
-      rgba(0, 0, 0, 0.15),
-    0 0 10px
-      rgba(0, 0, 255, 0.3);
-}
-
-.material-icons {
-  font-size: 1rem;
-  color: currentColor;
-}
-</style>