windly-ui 1.0.0

package/ui-library/components/Radio.vue

@@ -0,0 +1,356 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'UIRadio',
+})
+
+import { computed } from 'vue'
+
+type LabelPosition =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+
+type RadioSize =
+  | 'sm'
+  | 'md'
+  | 'lg'
+
+type Rounded =
+  | 'none'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'full'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?:
+      | string
+      | number
+      | boolean
+    value:
+      | string
+      | number
+      | boolean
+    label: string
+    id?: string
+    name?: string
+    hint?: string
+    icon?: string
+    disable?: boolean
+    color?: string
+    size?: RadioSize
+    rounded?: Rounded
+    flat?: boolean
+    bordered?: boolean
+    borderColor?: string
+    labelPosition?: LabelPosition
+  }>(),
+  {
+    modelValue: '',
+    id: undefined,
+    name: '',
+    hint: '',
+    icon: '',
+    disable: false,
+    color: 'blue-500',
+    size: 'md',
+    rounded: 'full',
+    flat: false,
+    bordered: true,
+    borderColor: 'gray-300',
+    labelPosition: 'right',
+  },
+)
+
+const emit = defineEmits<{
+  (
+    e: 'update:modelValue',
+    value:
+      | string
+      | number
+      | boolean,
+  ): void
+}>()
+
+const isHex = (
+  val: string,
+): boolean => {
+  return (
+    val.startsWith('#') ||
+    val.startsWith('rgb') ||
+    val.startsWith('hsl')
+  )
+}
+
+const isChecked = computed(
+  () =>
+    props.modelValue ===
+    props.value,
+)
+
+const sizeClasses = computed(
+  () => {
+    switch (props.size) {
+      case 'sm':
+        return {
+          radio:
+            'w-4 h-4',
+
+          icon:
+            'text-sm',
+        }
+      case 'lg':
+        return {
+          radio:
+            'w-6 h-6',
+
+          icon:
+            'text-lg',
+        }
+      case 'md':
+      default:
+        return {
+          radio:
+            'w-5 h-5',
+
+          icon:
+            'text-base',
+        }
+    }
+  },
+)
+
+const roundedClass = computed(
+  () => {
+    const map: Record<
+      Rounded,
+      string
+    > = {
+      none: 'rounded-none',
+      sm: 'rounded-sm',
+      md: 'rounded-md',
+      lg: 'rounded-lg',
+      full: 'rounded-full',
+    }
+
+    return map[props.rounded]
+  },
+)
+
+const labelPositionClass =
+  computed(() => {
+    const map: Record<
+      LabelPosition,
+      string
+    > = {
+      top: 'flex-col-reverse',
+      bottom: 'flex-col',
+      left: 'flex-row-reverse',
+      right: 'flex-row',
+    }
+
+    return map[
+      props.labelPosition
+    ]
+  })
+
+const radioClasses = computed(
+  () => [
+    'inline-flex items-center justify-center border-2 transition-all duration-200 bg-white dark:bg-gray-900',
+    sizeClasses.value.radio,
+    roundedClass.value,
+    props.flat
+      ? 'shadow-none'
+      : 'shadow-sm',
+    props.disable
+      ? 'opacity-50'
+      : '',
+    props.bordered &&
+    !isHex(
+      props.borderColor,
+    )
+      ? `border-${props.borderColor}`
+      : '',
+    isChecked.value &&
+    !isHex(props.color)
+      ? `border-${props.color} text-${props.color}`
+      : '',
+    !isChecked.value
+      ? 'border-gray-300'
+      : '',
+  ])
+
+const radioStyle = computed(
+  () => {
+    const style: Record<
+      string,
+      string
+    > = {}
+
+    if (
+      props.bordered &&
+      isHex(
+        props.borderColor,
+      )
+    ) {
+      style.borderColor =
+        props.borderColor
+    }
+
+    if (
+      isChecked.value &&
+      isHex(props.color)
+    ) {
+      style.borderColor =
+        props.color
+
+      style.color =
+        props.color
+    }
+
+    return style
+  },
+)
+
+const iconClasses = computed(
+  () => [
+    'material-icons transition-opacity duration-200',
+    sizeClasses.value.icon,
+    isChecked.value
+      ? 'opacity-100'
+      : 'opacity-0',
+    !isHex(props.color)
+      ? `text-${props.color}`
+      : '',
+  ])
+
+const iconStyle = computed(
+  () => {
+    const style: Record<
+      string,
+      string
+    > = {}
+
+    if (
+      isHex(props.color)
+    ) {
+      style.color =
+        props.color
+    }
+    return style
+  },
+)
+
+const toggle = (): void => {
+  if (props.disable)
+    return
+
+  emit(
+    'update:modelValue',
+    props.value,
+  )
+}
+</script>
+<template>
+  <div
+    class="radio-container flex items-center"
+  >
+    <input
+      :id="id"
+      type="radio"
+      :name="name"
+      :value="value"
+      :checked="
+        isChecked
+      "
+      :disabled="
+        disable
+      "
+      class="sr-only"
+      @change="toggle"
+    >
+
+    <label
+      :for="id"
+      tabindex="0"
+      role="radio"
+      :aria-checked="
+        isChecked
+      "
+      :aria-disabled="
+        disable
+      "
+      :class="[
+        'flex items-center cursor-pointer select-none',
+        labelPositionClass,
+        {
+          'opacity-50 pointer-events-none':
+            disable,
+        },
+      ]"
+      @click.prevent="
+        toggle
+      "
+      @keydown.enter.prevent="
+        toggle
+      "
+      @keydown.space.prevent="
+        toggle
+      "
+    >
+      <!-- Radio -->
+      <span
+        :class="
+          radioClasses
+        "
+        :style="
+          radioStyle
+        "
+      >
+        <i
+          v-if="
+            icon &&
+            isChecked
+          "
+          :class="
+            iconClasses
+          "
+          :style="
+            iconStyle
+          "
+        >
+          {{ icon }}
+        </i>
+        <span
+          v-else
+          class="block m-auto rounded-full"
+          :class="[!isHex(props.color) && isChecked
+            ?`bg-${props.color}`:'',
+            size === 'sm'
+              ? 'w-2 h-2'
+              : size === 'lg'
+                ? 'w-3 h-3'
+                : 'w-2.5 h-2.5',]
+          "
+          :style="isHex(props.color)
+            ? { backgroundColor: props.color }
+            : {}"
+        />
+      </span>
+
+      <!-- Label -->
+      <span
+        class="mx-2 font-medium text-gray-700 dark:text-gray-300"
+      >
+        {{ label }}
+      </span>
+    </label>
+  </div>
+</template>
+<style scoped>
+.radio-container {
+  user-select: none;
+}
+</style>

package/ui-library/components/ScrollArea.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
+import { computed } from 'vue'
+
+const props = defineProps({
+  width: { type: String, default: '100%' },
+  height: { type: String, default: '300px' },
+
+  maxWidth: { type: String, default: '' },
+  maxHeight: { type: String, default: '' },
+
+  horizontal: { type: Boolean, default: false },
+  vertical: { type: Boolean, default: true },
+
+  hideScrollbar: { type: Boolean, default: false },
+})
+
+const scrollStyle = computed(() => ({
+  width: props.width,
+  height: props.height,
+  maxWidth: props.maxWidth || undefined,
+  maxHeight: props.maxHeight || undefined,
+}))
+
+const scrollClass = computed(() => [
+  props.vertical ? 'overflow-y-auto' : 'overflow-y-hidden',
+  props.horizontal ? 'overflow-x-auto' : 'overflow-x-hidden',
+  props.hideScrollbar ? 'scrollbar-hide' : '',
+])
+</script>
+
+<template>
+  <div
+    :class="scrollClass"
+    :style="scrollStyle"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/ui-library/components/Select.vue

@@ -0,0 +1,309 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'UISelect',
+})
+
+import {
+  computed,
+  ref,
+  watch,
+} from 'vue'
+
+interface SelectOption {
+  text: string
+  value:
+  | string
+  | number
+  | boolean
+}
+
+type Rounded =
+  | 'none'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | 'full'
+
+const props = withDefaults(
+  defineProps<{
+    filter?: boolean
+    modelValue?:
+    | string
+    | number
+    | boolean
+    label: string
+    id?: string
+    options: SelectOption[]
+    placeholder?: string
+    disabled?: boolean
+    required?: boolean
+    hint?: string
+    flat?: boolean
+    bordered?: boolean
+    rounded?: Rounded
+    borderColor?: string
+    bgColor?: string
+    textColor?: string
+  }>(),
+  {
+    filter: false,
+    modelValue: '',
+    id: undefined,
+    placeholder:
+      'Search or select...',
+    disabled: false,
+    required: false,
+    hint: '',
+    flat: false,
+    bordered: true,
+    rounded: 'md',
+    borderColor:
+      'gray-300',
+    bgColor: 'white',
+    textColor: 'black',
+  },
+)
+
+const emit = defineEmits<{
+  (
+    e: 'update:modelValue',
+    value:
+      | string
+      | number
+      | boolean,
+  ): void
+}>()
+
+const searchQuery = ref('')
+const showDropdown =
+  ref(false)
+
+const isHex = (
+  val: string,
+): boolean => {
+  return (
+    val.startsWith('#') ||
+    val.startsWith('rgb') ||
+    val.startsWith('hsl')
+  )
+}
+
+const roundedClass =
+  computed(() => {
+    const map: Record<
+      Rounded,
+      string
+    > = {
+      none: 'rounded-none',
+      sm: 'rounded-sm',
+      md: 'rounded-md',
+      lg: 'rounded-lg',
+      xl: 'rounded-xl',
+      full: 'rounded-full',
+    }
+
+    return map[props.rounded]
+  })
+
+const selectClasses =
+  computed(() => [
+    'block w-full px-3 py-2 transition-all focus:outline-none',
+    roundedClass.value,
+    props.flat
+      ? 'shadow-none'
+      : 'shadow-sm',
+    props.bordered
+      ? !isHex(
+        props.borderColor,
+      )
+        ? `border border-${props.borderColor}`
+        : 'border'
+      : 'border-0',
+    !isHex(props.bgColor)
+      ? `bg-${props.bgColor}`
+      : '',
+    !isHex(
+      props.textColor,
+    )
+      ? `text-${props.textColor}`
+      : '',
+    props.disabled
+      ? 'opacity-50 cursor-not-allowed'
+      : '',
+  ])
+
+const selectStyles =
+  computed(() => {
+    const style: Record<
+      string,
+      string
+    > = {}
+
+    if (
+      isHex(props.bgColor)
+    ) {
+      style.backgroundColor =
+        props.bgColor
+    }
+
+    if (
+      isHex(
+        props.borderColor,
+      )
+    ) {
+      style.borderColor =
+        props.borderColor
+    }
+
+    if (
+      isHex(
+        props.textColor,
+      )
+    ) {
+      style.color =
+        props.textColor
+    }
+
+    return style
+  })
+
+const filteredOptions =
+  computed(() => {
+    const query =
+      searchQuery.value.toLowerCase()
+
+    return props.options.filter(
+      (option) =>
+        option.text
+          .toLowerCase()
+          .includes(query),
+    )
+  })
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    const selected =
+      props.options.find(
+        (opt) =>
+          opt.value === val,
+      )
+
+    if (selected) {
+      searchQuery.value =
+        selected.text
+    }
+  },
+  {
+    immediate: true,
+  },
+)
+
+const selectOption = (
+  option: SelectOption,
+): void => {
+  searchQuery.value =
+    option.text
+
+  emit(
+    'update:modelValue',
+    option.value,
+  )
+
+  showDropdown.value =
+    false
+}
+
+const handleChange = (
+  event: Event,
+): void => {
+  const target =
+    event.target as HTMLSelectElement
+
+  emit(
+    'update:modelValue',
+    target.value,
+  )
+}
+
+const handleBlur = (): void => {
+  setTimeout(() => {
+    showDropdown.value =
+      false
+  }, 100)
+}
+</script>
+
+<template>
+  <div class="relative my-5">
+    <!-- Label -->
+    <label v-if="label" :for="id" class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-300">
+      {{ label }}
+    </label>
+
+    <!-- Filterable Select -->
+    <div v-if="filter" class="relative">
+      <input v-model="searchQuery
+        " :placeholder="placeholder
+          " :disabled="disabled
+            " :required="required
+            " :class="selectClasses
+            " :style="selectStyles
+            " @focus="
+            showDropdown = true
+            " @blur="
+            handleBlur
+          " @input="
+          showDropdown = true
+          ">
+
+      <!-- Dropdown -->
+      <ul v-if="
+        showDropdown
+      "
+        class="absolute z-10 mt-1 w-full max-h-48 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg">
+        <li v-for="option in filteredOptions" :key="option.value.toString()
+          " class="px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" @mousedown.prevent="
+            selectOption(
+              option,
+            )
+            ">
+          {{ option.text }}
+        </li>
+
+        <li v-if="
+          filteredOptions.length ===
+          0
+        " class="px-4 py-2 text-gray-500">
+          No results found
+        </li>
+      </ul>
+    </div>
+
+    <!-- Native Select -->
+    <select v-else :id="id" :value="modelValue
+      " :disabled="disabled
+        " :required="required
+          " :class="selectClasses
+          " :style="selectStyles
+          " @change="
+          handleChange
+        ">
+      <option disabled value="">
+        {{ placeholder }}
+      </option>
+
+      <option v-for="option in options" :key="option.value.toString()
+        " :value="option.value
+          ">
+        {{ option.text }}
+      </option>
+    </select>
+
+    <!-- Hint -->
+    <p v-if="hint" class="mt-1 text-sm text-gray-500">
+      {{ hint }}
+    </p>
+  </div>
+</template>