@dolanske/vui 0.1.0 → 0.1.1

package/src/components/Input/Dropzone.vue

@@ -0,0 +1,63 @@
+<script setup lang='ts'>
+import type { InputProps } from './Input.vue'
+import { Icon } from '@iconify/vue'
+import { useEventListener } from '@vueuse/core'
+import { 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>('dropzoneRef')
+
+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="dropzoneRef"
+    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

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

package/src/components/Input/Input.vue

@@ -0,0 +1,118 @@
+<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
+}
+
+const {
+  type = 'text',
+  limit,
+  label,
+  expand = false,
+  hint,
+  placeholder,
+  required,
+  modelValue = '',
+  readonly,
+  focus,
+  accept,
+  min,
+  max,
+  errors = [] as string[],
+} = 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('inputRef')
+
+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, 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="inputRef"
+          v-model="model"
+          :readonly
+          :type
+          name="id"
+          :placeholder
+          :required
+          :max="max ?? limit"
+          :accept
+          :multiple
+          :min
+        >
+        <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

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

package/src/components/Input/Textarea.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { InputProps } from './Input.vue'
+import { 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()
+</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': resize === true ? 'both' : (resize || 'initial'),
+          // @ts-expect-error This is only supported in chrome for now
+          'field-sizing': autoResize ? 'content' : 'auto',
+        }"
+      />
+    </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

@@ -0,0 +1,199 @@
+.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: 34px;
+  --input-padding: 8px;
+  --textarea-padding: 8px;
+
+  //
+
+  width: 224px;
+
+  &.expand {
+    width: 100%;
+  }
+
+  &.required .vui-input > label:after {
+    content: '*';
+    color: var(--input-color-text-red);
+  }
+
+  &.readonly .vui-input input {
+    pointer-events: none;
+    color: var(--input-color-text-light);
+    border-color: var(--input-color-border-weak);
+  }
+
+  &.has-errors {
+    .vui-input {
+      .vui-input-style,
+      textarea {
+        border-color: var(--color-text-red) !important;
+      }
+    }
+  }
+
+  .vui-input {
+    label {
+      display: block;
+      text-align: left;
+      margin-bottom: 8px;
+      font-size: var(--font-size-ms);
+      color: var(--input-color-text);
+    }
+
+    .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: 400;
+      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);
+      outline: none !important;
+      padding-inline: var(--input-padding);
+      font-size: var(--font-size-ms);
+      width: 100%;
+      transition: var(--transition);
+
+      &:has(input:focus-visible),
+      &:focus-visible {
+        border-color: var(--input-color-border-strong);
+      }
+    }
+
+    input,
+    textarea {
+      font-family: var(--global-font);
+    }
+
+    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);
+    }
+
+    ::-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-ms);
+      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: 4lh;
+      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-border-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-border-strong);
+        }
+
+        input {
+          display: none;
+
+          & + label {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            min-height: 96px;
+            color: var(--color-text-light);
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/Kbd/Kbd.vue

@@ -0,0 +1,48 @@
+<script setup lang='ts'>
+import { useMagicKeys, whenever } from '@vueuse/core'
+import { computed } from 'vue'
+import './kbd.scss'
+
+interface Props {
+  /**
+   * Specify the key or the combination of keys connected with "+". Make sure
+   * there are no white spaces between letters.
+   *
+   * keys="Escape" keys="Ctrl+A"
+   */
+  keys: string
+  /**
+   * Display custom label instead of the automatically formatted keys.
+   */
+  label?: string
+  /**
+   * Show active state when this combination of keys is pressed.
+   */
+  highlight?: boolean
+}
+
+const props = defineProps<Props>()
+const emits = defineEmits<{
+  trigger: []
+}>()
+const keyHandler = useMagicKeys()
+
+whenever(keyHandler[props.keys], () => {
+  emits('trigger')
+})
+
+const isActive = computed(() => {
+  if (!props.highlight)
+    return false
+
+  return props.keys.split('+').every((key) => {
+    return keyHandler.current.has(key.toLowerCase())
+  })
+})
+</script>
+
+<template>
+  <kbd class="vui-kbd" :class="{ active: isActive }">
+    {{ props.label ?? props.keys.replaceAll("+", " + ") }}
+  </kbd>
+</template>

package/src/components/Kbd/KbdGroup.vue

@@ -0,0 +1,31 @@
+<script setup lang='ts'>
+import type { VNode } from 'vue'
+import { useMagicKeys, whenever } from '@vueuse/core'
+
+/**
+ * Can be used to wrap multiple <Kbd /> elements and triggers the callback when
+ * all of them are active
+ */
+
+const emits = defineEmits<{
+  trigger: []
+}>()
+
+const slots = defineSlots<{
+  default: () => Array<VNode & {
+    props: {
+      keys: string
+    }
+  }>
+}>()
+const keys = useMagicKeys()
+
+whenever(
+  keys[slots.default().map(vnode => vnode.props.keys).join('+')],
+  () => emits('trigger'),
+)
+</script>
+
+<template>
+  <slot />
+</template>

package/src/components/Kbd/kbd.scss

@@ -0,0 +1,18 @@
+.vui-kbd {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  border-radius: var(--border-radius-xs);
+  // border: 1px solid var(--color-border-strong);
+  font-size: var(--font-size-s);
+  padding: 0 4px;
+  transition: var(--transition);
+  font-weight: 600;
+  background-color: var(--color-text);
+  color: var(--color-text-invert);
+
+  &.active {
+    background-color: var(--color-text-yellow);
+  }
+}

package/src/components/Modal/Confirm.vue

@@ -0,0 +1,56 @@
+<script setup lang='ts'>
+import type { Variants } from '../Button/Button.vue'
+import type { ModalProps } from './Modal.vue'
+import Button from '../Button/Button.vue'
+import Flex from '../Flex/Flex.vue'
+import Modal from './Modal.vue'
+
+type Props = {
+  title?: string
+  content?: string
+  confirmText?: string
+  confirmVariant?: Variants
+  cancelText?: string
+  showCancel?: boolean
+} & Partial<ModalProps>
+
+const props = withDefaults(defineProps<Props>(), {
+  cancelText: 'Cancel',
+  confirmText: 'Ok',
+  size: 's',
+  canDismiss: true,
+  showCancel: true,
+  confirmVariant: 'default',
+})
+
+const emits = defineEmits<{
+  cancel: []
+  confirm: []
+}>()
+
+const open = defineModel<boolean>()
+</script>
+
+<template>
+  <pre>{{ $props }}</pre>
+  <Modal
+    v-bind="props"
+    v-model="open"
+  >
+    <template #default>
+      <div class="typeset">
+        <slot />
+      </div>
+    </template>
+    <template #footer>
+      <Flex justify-end>
+        <Button v-if="props.showCancel" plain @click="emits('cancel'), open = false">
+          {{ props.cancelText }}
+        </Button>
+        <Button :variant="props.confirmVariant" @click="emits('confirm'), open = false">
+          {{ props.confirmText }}
+        </Button>
+      </Flex>
+    </template>
+  </Modal>
+</template>