@dolanske/vui 0.3.4 → 0.4.0

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>

package/src/components/Input/input.scss

@@ -1,208 +1,208 @@
-.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;
-
-  &.disabled input,
-  &.disabled textarea {
-    cursor: not-allowed;
-  }
-
-  &.expand {
-    width: 100%;
-  }
-
-  &.required .vui-input > label:after {
-    content: '*';
-    color: var(--input-color-text-red);
-  }
-
-  &.readonly .vui-input {
-    input,
-    textarea,
-    .vui-input-style {
-      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);
-          }
-        }
-      }
-    }
-  }
-}
+.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;
+
+  &.disabled input,
+  &.disabled textarea {
+    cursor: not-allowed;
+  }
+
+  &.expand {
+    width: 100%;
+  }
+
+  &.required .vui-input > label:after {
+    content: '*';
+    color: var(--input-color-text-red);
+  }
+
+  &.readonly .vui-input {
+    input,
+    textarea,
+    .vui-input-style {
+      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

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