@dolanske/vui 0.3.4 → 0.5.0

package/src/components/Input/Dropzone.vue

@@ -1,65 +1,65 @@
-<script setup lang='ts'>
-import type { InputProps } from './Input.vue'
-import { Icon } from '@iconify/vue'
-import { useEventListener } from '@vueuse/core'
-import { onMounted, ref, useTemplateRef } from 'vue'
-import Flex from '../Flex/Flex.vue'
-import Input from './Input.vue'
-
-type Props = Omit<InputProps, 'type' | 'modelValue' | 'focus' | 'limit' | 'placeholder'>
-
-const props = defineProps<Props>()
-const emits = defineEmits<{ files: [FileList] }>()
-
-const dragging = ref(false)
-
-function onSubmitHandler(e: any, isFromField?: boolean) {
-  e.preventDefault()
-  e.stopPropagation()
-
-  const files = isFromField ? e.target.files : e.dataTransfer.files
-
-  if (files.length > 0)
-    emits('files', files)
-}
-
-const dropzoneRef = useTemplateRef<HTMLDivElement>('dropzone')
-
-onMounted(() => {
-  useEventListener(dropzoneRef, 'dragenter', onSubmitHandler, false)
-  useEventListener(dropzoneRef, 'dragleave', onSubmitHandler, false)
-  useEventListener(dropzoneRef, 'dragover', onSubmitHandler, false)
-  useEventListener(dropzoneRef, 'drop', onSubmitHandler, false)
-  useEventListener(dropzoneRef, 'input', e => onSubmitHandler(e, true), false)
-})
-</script>
-
-<template>
-  <Input
-    v-bind="props"
-    ref="dropzone"
-    type="file"
-    class="vui-dropzone"
-    :class="{ dragging }"
-    @dragenter="dragging = true"
-    @mouseleave="dragging = false"
-  >
-    <template #__internal_replace_input="{ inputId }">
-      <input :id="inputId" type="file">
-      <label :for="inputId">
-        <slot :dragging>
-          <Flex justify-center gap="s" align-baseline>
-            <template v-if="dragging">
-              <Icon icon="ph:target" />
-              Drop it
-            </template>
-            <template v-else>
-              <Icon icon="ph:file" />
-              Click or drag files over here
-            </template>
-          </Flex>
-        </slot>
-      </label>
-    </template>
-  </Input>
-</template>
+<script setup lang='ts'>
+import type { InputProps } from './Input.vue'
+import { Icon } from '@iconify/vue'
+import { useEventListener } from '@vueuse/core'
+import { onMounted, ref, useTemplateRef } from 'vue'
+import Flex from '../Flex/Flex.vue'
+import Input from './Input.vue'
+
+type Props = Omit<InputProps, 'type' | 'modelValue' | 'focus' | 'limit' | 'placeholder'>
+
+const props = defineProps<Props>()
+const emits = defineEmits<{ files: [FileList] }>()
+
+const dragging = ref(false)
+
+function onSubmitHandler(e: any, isFromField?: boolean) {
+  e.preventDefault()
+  e.stopPropagation()
+
+  const files = isFromField ? e.target.files : e.dataTransfer.files
+
+  if (files.length > 0)
+    emits('files', files)
+}
+
+const dropzoneRef = useTemplateRef<HTMLDivElement>('dropzone')
+
+onMounted(() => {
+  useEventListener(dropzoneRef, 'dragenter', onSubmitHandler, false)
+  useEventListener(dropzoneRef, 'dragleave', onSubmitHandler, false)
+  useEventListener(dropzoneRef, 'dragover', onSubmitHandler, false)
+  useEventListener(dropzoneRef, 'drop', onSubmitHandler, false)
+  useEventListener(dropzoneRef, 'input', e => onSubmitHandler(e, true), false)
+})
+</script>
+
+<template>
+  <Input
+    v-bind="props"
+    ref="dropzone"
+    type="file"
+    class="vui-dropzone"
+    :class="{ dragging }"
+    @dragenter="dragging = true"
+    @mouseleave="dragging = false"
+  >
+    <template #__internal_replace_input="{ inputId }">
+      <input :id="inputId" type="file">
+      <label :for="inputId">
+        <slot :dragging>
+          <Flex justify-center gap="s" align-baseline>
+            <template v-if="dragging">
+              <Icon icon="ph:target" />
+              Drop it
+            </template>
+            <template v-else>
+              <Icon icon="ph:file" />
+              Click or drag files over here
+            </template>
+          </Flex>
+        </slot>
+      </label>
+    </template>
+  </Input>
+</template>

package/src/components/Input/File.vue

@@ -1,15 +1,15 @@
-<script setup lang='ts'>
-import type { InputProps } from './Input.vue'
-import Input from './Input.vue'
-
-const props = defineProps<Omit<InputProps, 'type'>>()
-const emits = defineEmits<{ files: [FileList] }>()
-</script>
-
-<template>
-  <Input
-    type="file"
-    v-bind="{ ...props }"
-    @input="emits('files', $event.target.files)"
-  />
-</template>
+<script setup lang='ts'>
+import type { InputProps } from './Input.vue'
+import Input from './Input.vue'
+
+const props = defineProps<Omit<InputProps, 'type'>>()
+const emits = defineEmits<{ files: [FileList] }>()
+</script>
+
+<template>
+  <Input
+    type="file"
+    v-bind="{ ...props }"
+    @input="emits('files', $event.target.files)"
+  />
+</template>

package/src/components/Input/Input.vue

@@ -1,121 +1,121 @@
-<script setup lang="ts">
-import { computed, type InputTypeHTMLAttribute, useId, useTemplateRef, watchEffect } from 'vue'
-import { getMaybeRefLength } from '../../shared/helpers'
-import Flex from '../Flex/Flex.vue'
-import '../../style/core.scss'
-import './input.scss'
-
-// FIXME: sometimes spamming inputs when limit is set, it will _just_ let me write one more letter
-
-export interface InputProps {
-  type?: InputTypeHTMLAttribute
-  label?: string
-  hint?: string
-  limit?: number | string
-  expand?: boolean
-  placeholder?: string
-  required?: boolean
-  modelValue?: string | number
-  readonly?: boolean
-  focus?: boolean
-  errors?: string[]
-  accept?: string
-  multiple?: boolean
-  min?: number
-  max?: number
-  disabled?: boolean
-}
-
-const {
-  type = 'text',
-  limit,
-  label,
-  expand = false,
-  hint,
-  placeholder,
-  required,
-  modelValue = '',
-  readonly,
-  focus,
-  accept,
-  min,
-  max,
-  errors = [] as string[],
-  disabled,
-} = defineProps<InputProps>()
-
-const model = defineModel<string | number>({
-  default: '',
-  set(newValue) {
-    // Completely ignore inputs
-    if (readonly)
-      return modelValue
-
-    if (getMaybeRefLength(newValue) > Number(limit)) {
-      return modelValue
-    }
-    return newValue
-  },
-})
-const id = useId()
-
-const inputRef = useTemplateRef('input')
-
-watchEffect(() => {
-  if (focus)
-    inputRef.value?.focus()
-})
-
-defineExpose({
-  focus: () => {
-    inputRef.value?.focus()
-  },
-})
-
-const renderLimit = computed(() => {
-  return `${getMaybeRefLength(model.value)}/${limit}`
-})
-</script>
-
-<template>
-  <div class="vui-input-container" :class="{ expand, disabled, required, readonly, 'has-errors': errors.length > 0 }">
-    <slot name="before" />
-    <div class="vui-input">
-      <label v-if="label" for="id">{{ label }}</label>
-      <p v-if="hint" class="vui-input-hint">
-        {{ hint }}
-      </p>
-      <Flex class="vui-input-style" :gap="3" align-center>
-        <slot name="start" />
-        <slot name="__internal_replace_input" :input-id="id" />
-        <input
-          v-if="!$slots.__internal_replace_input"
-          :id
-          ref="input"
-          v-model="model"
-          :readonly
-          :type
-          name="id"
-          :placeholder
-          :required
-          :max="max ?? limit"
-          :accept
-          :multiple
-          :min
-          :disabled
-        >
-        <slot name="end" />
-      </Flex>
-    </div>
-    <p v-if="limit" class="vui-input-limit">
-      {{ renderLimit }}
-    </p>
-    <ul v-if="errors.length > 0" class="vui-input-errors">
-      <li v-for="err in errors" :key="err">
-        {{ err }}
-      </li>
-    </ul>
-
-    <slot name="after" />
-  </div>
-</template>
+<script setup lang="ts">
+import { computed, type InputTypeHTMLAttribute, useId, useTemplateRef, watchEffect } from 'vue'
+import { getMaybeRefLength } from '../../shared/helpers'
+import Flex from '../Flex/Flex.vue'
+import '../../style/core.scss'
+import './input.scss'
+
+// FIXME: sometimes spamming inputs when limit is set, it will _just_ let me write one more letter
+
+export interface InputProps {
+  type?: InputTypeHTMLAttribute
+  label?: string
+  hint?: string
+  limit?: number | string
+  expand?: boolean
+  placeholder?: string
+  required?: boolean
+  modelValue?: string | number
+  readonly?: boolean
+  focus?: boolean
+  errors?: string[]
+  accept?: string
+  multiple?: boolean
+  min?: number
+  max?: number
+  disabled?: boolean
+}
+
+const {
+  type = 'text',
+  limit,
+  label,
+  expand = false,
+  hint,
+  placeholder,
+  required,
+  modelValue = '',
+  readonly,
+  focus,
+  accept,
+  min,
+  max,
+  errors = [] as string[],
+  disabled,
+} = defineProps<InputProps>()
+
+const model = defineModel<string | number>({
+  default: '',
+  set(newValue) {
+    // Completely ignore inputs
+    if (readonly)
+      return modelValue
+
+    if (getMaybeRefLength(newValue) > Number(limit)) {
+      return modelValue
+    }
+    return newValue
+  },
+})
+const id = useId()
+
+const inputRef = useTemplateRef('input')
+
+watchEffect(() => {
+  if (focus)
+    inputRef.value?.focus()
+})
+
+defineExpose({
+  focus: () => {
+    inputRef.value?.focus()
+  },
+})
+
+const renderLimit = computed(() => {
+  return `${getMaybeRefLength(model.value)}/${limit}`
+})
+</script>
+
+<template>
+  <div class="vui-input-container" :class="{ expand, disabled, required, readonly, 'has-errors': errors.length > 0 }">
+    <slot name="before" />
+    <div class="vui-input">
+      <label v-if="label" for="id">{{ label }}</label>
+      <p v-if="hint" class="vui-input-hint">
+        {{ hint }}
+      </p>
+      <Flex class="vui-input-style" :gap="3" align-center>
+        <slot name="start" />
+        <slot name="__internal_replace_input" :input-id="id" />
+        <input
+          v-if="!$slots.__internal_replace_input"
+          :id
+          ref="input"
+          v-model="model"
+          :readonly
+          :type
+          name="id"
+          :placeholder
+          :required
+          :max="max ?? limit"
+          :accept
+          :multiple
+          :min
+          :disabled
+        >
+        <slot name="end" />
+      </Flex>
+    </div>
+    <p v-if="limit" class="vui-input-limit">
+      {{ renderLimit }}
+    </p>
+    <ul v-if="errors.length > 0" class="vui-input-errors">
+      <li v-for="err in errors" :key="err">
+        {{ err }}
+      </li>
+    </ul>
+
+    <slot name="after" />
+  </div>
+</template>

package/src/components/Input/Password.vue

@@ -1,47 +1,47 @@
-<script setup lang='ts'>
-import type { InputProps } from './Input.vue'
-import { Icon } from '@iconify/vue'
-import { ref } from 'vue'
-import Button from '../Button/Button.vue'
-import Input from './Input.vue'
-
-type Props = Omit<InputProps, 'type'> & {
-  showPassword?: boolean
-}
-
-const {
-  showPassword = false,
-  // @ts-expect-error Don't want to actually provide type as we handle that in
-  // this component manually
-  type,
-  ...inputProps
-} = defineProps<Props>()
-
-const show = ref(showPassword)
-</script>
-
-<template>
-  <Input v-bind="inputProps" :type="show ? 'text' : 'password'" autocomplete="off">
-    <template #end>
-      <Button
-        square
-        size="s"
-        :data-title-top="show ? 'Hide password' : 'Show password'"
-        @click="show = !show"
-      >
-        <Icon :width="18" :height="18" :icon="show ? 'ph:eye-slash' : 'ph:eye'" />
-      </Button>
-    </template>
-  </Input>
-</template>
-
-<style scoped lang="scss">
-:deep(.vui-input-style) {
-  padding-right: 4px !important;
-  gap: 8px !important;
-}
-
-[data-title-top]:before {
-  min-width: 104px;
-}
-</style>
+<script setup lang='ts'>
+import type { InputProps } from './Input.vue'
+import { Icon } from '@iconify/vue'
+import { ref } from 'vue'
+import Button from '../Button/Button.vue'
+import Input from './Input.vue'
+
+type Props = Omit<InputProps, 'type'> & {
+  showPassword?: boolean
+}
+
+const {
+  showPassword = false,
+  // @ts-expect-error Don't want to actually provide type as we handle that in
+  // this component manually
+  type,
+  ...inputProps
+} = defineProps<Props>()
+
+const show = ref(showPassword)
+</script>
+
+<template>
+  <Input v-bind="inputProps" :type="show ? 'text' : 'password'" autocomplete="off">
+    <template #end>
+      <Button
+        square
+        size="s"
+        :data-title-top="show ? 'Hide password' : 'Show password'"
+        @click="show = !show"
+      >
+        <Icon :width="18" :height="18" :icon="show ? 'ph:eye-slash' : 'ph:eye'" />
+      </Button>
+    </template>
+  </Input>
+</template>
+
+<style scoped lang="scss">
+:deep(.vui-input-style) {
+  padding-right: 4px !important;
+  gap: 8px !important;
+}
+
+[data-title-top]:before {
+  min-width: 104px;
+}
+</style>

package/src/components/Input/Textarea.vue

@@ -1,76 +1,76 @@
-<script setup lang="ts">
-import type { InputProps } from './Input.vue'
-import { computed, useId } from 'vue'
-import '../Input/input.scss'
-
-type Props = Omit<InputProps, 'type'> & {
-  resize?: boolean | 'vertical' | 'horizontal'
-  autoResize?: boolean
-}
-
-const {
-  limit,
-  label,
-  expand = false,
-  hint,
-  placeholder,
-  required,
-  modelValue = '',
-  readonly,
-  resize = 'vertical',
-  autoResize,
-  errors = [] as string[],
-} = defineProps<Props>()
-
-const model = defineModel<string>({
-  default: '',
-  set(newValue) {
-    if (readonly)
-      return modelValue
-
-    if (newValue.length > Number(limit)) {
-      return modelValue
-    }
-    return newValue
-  },
-})
-const id = useId()
-
-const r = computed(() => resize === true ? 'both' : (resize || 'initial'))
-const fS = computed(() => autoResize ? 'content' : 'auto')
-</script>
-
-<template>
-  <div class="vui-input-container" :class="{ expand, required, readonly, 'has-errors': errors.length > 0 }">
-    <slot name="before" />
-    <div class="vui-input">
-      <label v-if="label" for="id">{{ label }}</label>
-      <p v-if="hint" class="vui-input-hint">
-        {{ hint }}
-      </p>
-      <textarea
-        :id
-        v-model="model"
-        :readonly
-        name="id"
-        :placeholder
-        :required
-        :max="limit"
-        :style="{
-          resize: r,
-          // @ts-expect-error Early-adoption CSS attribute
-          fieldSizing: fS,
-        }"
-      />
-    </div>
-    <p v-if="limit" class="vui-input-limit">
-      {{ `${model.length}/${limit}` }}
-    </p>
-    <ul v-if="errors.length > 0" class="vui-input-errors">
-      <li v-for="err in errors" :key="err">
-        {{ err }}
-      </li>
-    </ul>
-    <slot name="after" />
-  </div>
-</template>
+<script setup lang="ts">
+import type { InputProps } from './Input.vue'
+import { computed, useId } from 'vue'
+import '../Input/input.scss'
+
+type Props = Omit<InputProps, 'type'> & {
+  resize?: boolean | 'vertical' | 'horizontal'
+  autoResize?: boolean
+}
+
+const {
+  limit,
+  label,
+  expand = false,
+  hint,
+  placeholder,
+  required,
+  modelValue = '',
+  readonly,
+  resize = 'vertical',
+  autoResize,
+  errors = [] as string[],
+} = defineProps<Props>()
+
+const model = defineModel<string>({
+  default: '',
+  set(newValue) {
+    if (readonly)
+      return modelValue
+
+    if (newValue.length > Number(limit)) {
+      return modelValue
+    }
+    return newValue
+  },
+})
+const id = useId()
+
+const r = computed(() => resize === true ? 'both' : (resize || 'initial'))
+const fS = computed(() => autoResize ? 'content' : 'auto')
+</script>
+
+<template>
+  <div class="vui-input-container" :class="{ expand, required, readonly, 'has-errors': errors.length > 0 }">
+    <slot name="before" />
+    <div class="vui-input">
+      <label v-if="label" for="id">{{ label }}</label>
+      <p v-if="hint" class="vui-input-hint">
+        {{ hint }}
+      </p>
+      <textarea
+        :id
+        v-model="model"
+        :readonly
+        name="id"
+        :placeholder
+        :required
+        :max="limit"
+        :style="{
+          resize: r,
+          // @ts-expect-error Early-adoption CSS attribute
+          fieldSizing: fS,
+        }"
+      />
+    </div>
+    <p v-if="limit" class="vui-input-limit">
+      {{ `${model.length}/${limit}` }}
+    </p>
+    <ul v-if="errors.length > 0" class="vui-input-errors">
+      <li v-for="err in errors" :key="err">
+        {{ err }}
+      </li>
+    </ul>
+    <slot name="after" />
+  </div>
+</template>