windly-ui 1.0.0

package/ui-library/components/Textarea.vue

@@ -0,0 +1,233 @@
+<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

@@ -0,0 +1,319 @@
+<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>