windly-ui 1.0.1 → 1.0.2

package/ui-library/components/Radio.vue

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

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

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