@dolanske/vui 1.4.0 → 1.4.2

package/src/components/Input/Counter.vue

@@ -1,66 +0,0 @@
-<script setup lang='ts'>
-import type { InputProps } from './Input.vue'
-import { Icon } from '@iconify/vue'
-import Button from '../Button/Button.vue'
-import ButtonGroup from '../ButtonGroup/ButtonGroup.vue'
-import Input from './Input.vue'
-
-type Props = Omit<InputProps, 'type'> & {
-  incrementBy?: number
-  incrementEnabled?: boolean
-  hideIncrement?: boolean
-  decrementBy?: number
-  decrementEnabled?: boolean
-  hideDecrement?: boolean
-}
-
-const {
-  incrementBy = 1,
-  incrementEnabled = true,
-  hideIncrement = false,
-  decrementBy = 1,
-  decrementEnabled = true,
-  hideDecrement = false,
-  ...inputProps
-} = defineProps<Props>()
-
-const count = defineModel<number>({
-  default: 0,
-})
-</script>
-
-<template>
-  <Input v-bind="inputProps" v-model.number="count" type="number">
-    <!-- <template v-if="!hideDecrement" #start>
-    </template> -->
-
-    <template #end>
-      <ButtonGroup>
-        <Button v-if="!hideDecrement" key="decrease" :disabled="!decrementEnabled" :style="{ 'border-top-left-radius': 0, 'border-bottom-left-radius': 0, 'marginRight': '-1px' }" @click="count -= decrementBy">
-          <Icon icon="ph:minus" /> {{ decrementBy > 1 ? decrementBy : '' }}
-        </Button>
-        <Button v-if="!hideIncrement" key="increase" :disabled="!incrementEnabled" @click="count += incrementBy">
-          <Icon icon="ph:plus" /> {{ incrementBy > 1 ? incrementBy : '' }}
-        </Button>
-      </ButtonGroup>
-    </template>
-  </Input>
-</template>
-
-<style scoped lang="scss">
-:deep(.vui-button) {
-  padding-inline: 2px !important;
-}
-
-:deep(input) {
-  ::-webkit-outer-spin-button,
-  ::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  /* Firefox */
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-</style>

package/src/components/Input/Dropzone.vue

@@ -1,65 +0,0 @@
-<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 x-center gap="xs" y-center>
-            <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 +0,0 @@
-<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,123 +0,0 @@
-<script setup lang="ts">
-import { computed, 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 type InputType = 'text' | 'password' | 'color' | 'date' | 'email' | 'number' | 'range' | 'search' | 'tel' | 'time' | 'url' | 'file'
-
-export interface InputProps {
-  type?: InputType
-  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({ preventScroll: true })
-})
-
-defineExpose({
-  focus: () => {
-    inputRef.value?.focus({ preventScroll: true })
-  },
-})
-
-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="5" y-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,35 +0,0 @@
-<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
-        :aria-label="show ? 'Hide' : 'Reveal'"
-        @click="show = !show"
-      >
-        <Icon :width="18" :height="18" :icon="show ? 'ph:eye-slash' : 'ph:eye'" />
-      </Button>
-    </template>
-  </Input>
-</template>

package/src/components/Input/Textarea.vue

@@ -1,78 +0,0 @@
-<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[],
-  disabled,
-} = 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, disabled }">
-    <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
-        :disabled
-        :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>

package/src/components/Input/input.scss

@@ -1,302 +0,0 @@
-.vui-input-container {
-  // Each component should have its own specification as it allows more granual
-  // modification via CSS variables if needed
-  --input-color-text-red: var(--color-text-red);
-  --input-color-text: var(--color-text);
-  --input-color-text-light: var(--color-text-light);
-  --input-color-text-lighter: var(--color-text-lighter);
-  --input-color-border: var(--color-border);
-  --input-color-border-strong: var(--color-border-strong);
-  --input-color-border-weak: var(--color-border-weak);
-
-  --input-height: var(--interactive-el-height);
-  --input-padding: 8px;
-  --textarea-padding: 8px;
-
-  //
-
-  width: 224px;
-
-  &.disabled {
-    .vui-input label {
-      color: var(--input-color-text-lighter);
-    }
-
-    input,
-    textarea {
-      cursor: not-allowed;
-      resize: none !important;
-    }
-  }
-
-  &.expand {
-    width: 100%;
-  }
-
-  &.required .vui-input > label:after {
-    content: '*';
-    padding-left: 2px;
-    color: var(--input-color-text-red);
-    font-size: var(--font-size-l);
-  }
-
-  &.readonly .vui-input {
-    input,
-    textarea,
-    .vui-input-style {
-      // pointer-events: none;
-      color: var(--input-color-text-light);
-      border-color: var(--input-color-border-weak);
-      resize: none !important;
-    }
-  }
-
-  &.has-errors {
-    .vui-input {
-      .vui-input-style,
-      textarea {
-        outline: 1px solid var(--color-text-red) !important;
-      }
-    }
-  }
-
-  &.vui-input-color {
-    .vui-input-style {
-      padding-left: 0 !important;
-      outline: none !important;
-    }
-  }
-
-  .vui-input {
-    label {
-      display: block;
-      text-align: left;
-      margin-bottom: 8px;
-      font-size: var(--font-size-m);
-      color: var(--input-color-text);
-    }
-
-    svg {
-      min-width: 16px;
-      min-height: 16px;
-      // font-size: var(--font-size-l);
-    }
-
-    .vui-input-hint {
-      margin-bottom: 8px;
-      margin-top: -4px;
-      color: var(--input-color-text-lighter);
-      font-size: var(--font-size-s);
-      display: block;
-      text-align: left;
-    }
-
-    ::placeholder {
-      font-weight: var(--font-weight);
-      color: var(--color-text-lighter);
-      font-family: var(--global-font);
-    }
-
-    .vui-input-style,
-    textarea {
-      display: block;
-      border-radius: var(--border-radius-s);
-      border: 1px solid var(--input-color-border);
-      background: transparent;
-      height: var(--input-height);
-      line-height: var(--input-height);
-      color: var(--color-text-lighter);
-      outline: none;
-      font-size: var(--font-size-m);
-      width: 100%;
-      transition: var(--transition-fast);
-      padding-inline: var(--input-padding);
-      z-index: var(--z-default);
-
-      &:has(input:focus),
-      &:focus {
-        // Override error outline
-        outline: 2px solid var(--color-text) !important;
-      }
-
-      .vui-button {
-        border: 1px solid var(--color-border);
-
-        &:first-child {
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-          margin-left: calc(calc(var(--input-padding) + 1px) * -1);
-        }
-
-        &:last-child {
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-          margin-right: calc(calc(var(--input-padding) + 1px) * -1);
-        }
-      }
-    }
-
-    input,
-    textarea {
-      color: var(--color-text);
-      font-family: var(--global-font);
-      // padding-inline: 3px;
-    }
-
-    input[type='file']::file-selector-button {
-      background-color: var(--color-bg);
-      color: var(--color-text);
-      border: none;
-    }
-
-    input[type='range'] {
-      -webkit-appearance: none; /* Override default CSS styles */
-      appearance: none;
-      height: 4px;
-      border-radius: 2px;
-      background-color: var(--color-border);
-    }
-
-    input[type='color'] {
-      width: 1px;
-      height: 1px;
-      position: absolute;
-      overflow: hidden;
-      outline: none !important;
-      opacity: 0;
-
-      &:focus + label .vui-input-color-indicator {
-        outline: 2px solid var(--color-text);
-      }
-
-      & + label {
-        position: relative;
-        margin: 0;
-        padding-left: var(--input-height);
-
-        input {
-          padding-inline: var(--space-xs);
-          border-radius: var(--border-radius-s);
-
-          &:focus {
-            outline: 2px solid var(--color-text);
-          }
-        }
-
-        .vui-input-color-indicator {
-          position: absolute;
-          inset: 4px;
-          right: unset;
-          width: calc(var(--input-height) - 8px);
-          background-color: var(--color-border);
-          border-radius: var(--border-radius-s);
-          font-size: var(--font-size-l);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          &:hover {
-            opacity: 0.8;
-          }
-        }
-      }
-    }
-
-    ::-moz-range-thumb,
-    ::-webkit-slider-thumb {
-      width: 16px;
-      height: 16px;
-      background-color: var(--color-text-light);
-      border: none;
-    }
-
-    input {
-      display: block;
-      width: 100%;
-      border: none;
-      height: calc(var(--input-height) - 1px);
-      line-height: calc(var(--input-height) - 1px);
-      background: transparent;
-      outline: none;
-      font-size: var(--font-size-m);
-      color: var(--color-text);
-
-      &:-webkit-autofill {
-        box-shadow: 0 0 0px 1000px var(--color-bg) inset;
-        -webkit-text-fill-color: var(--color-text);
-      }
-    }
-
-    textarea {
-      line-height: 1.3em;
-      height: auto;
-      min-height: 5lh;
-      field-sizing: content;
-      padding: var(--textarea-padding);
-      transition: none;
-    }
-  }
-
-  .vui-input-limit {
-    display: block;
-    margin-top: 6px;
-    text-align: left;
-    font-size: var(--font-size-xs);
-    color: var(--input-color-text-lighter);
-  }
-
-  .vui-input-errors {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    padding-top: 6px;
-
-    li {
-      display: block;
-      font-size: var(--font-size-s);
-      color: var(--color-text-red);
-    }
-  }
-
-  &.vui-dropzone {
-    &.dragging .vui-input .vui-input-style {
-      border-color: var(--color-accent);
-
-      &:hover {
-        border-color: var(--color-border);
-      }
-    }
-
-    .vui-input {
-      .vui-input-style {
-        height: unset;
-        border-width: 2px;
-        border-style: dashed;
-        border-radius: var(--border-radius-m);
-        line-height: 1.2em;
-
-        &:hover {
-          border-color: var(--color-accent);
-        }
-
-        input {
-          width: 1px;
-          height: 1px;
-          position: absolute;
-          outline: 0 !important;
-          opacity: 0 !important;
-
-          & + label {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            min-height: 96px;
-            margin: 0;
-            color: var(--color-text-light);
-          }
-        }
-      }
-    }
-  }
-}