@milaboratories/uikit 1.2.3

package/src/components/PlTextArea/PlTextArea.vue

@@ -0,0 +1,152 @@
+<script lang="ts">
+/** Component for multi-line string data manipulation */
+export default {
+  name: 'PlTextArea',
+};
+</script>
+
+<script lang="ts" setup>
+import './pl-textarea.scss';
+import { computed, onMounted, ref, useSlots } from 'vue';
+import { PlTooltip } from '@/components/PlTooltip';
+import DoubleContour from '@/utils/DoubleContour.vue';
+import { useLabelNotch } from '@/utils/useLabelNotch';
+import { useValidation } from '@/utils/useValidation';
+
+const slots = useSlots();
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the model value is updated.
+   */
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const props = defineProps<{
+  /**
+   * The current value of the texarea.
+   */
+  modelValue?: string;
+  /**
+   * The label to display above the texarea.
+   */
+  label?: string;
+  /**
+   * If `true`, the textarea is marked as required.
+   */
+  required?: boolean;
+  /**
+   * An error message to display below the textarea.
+   */
+  error?: string;
+  /**
+   * A helper text to display below the textarea when there are no errors.
+   */
+  helper?: string;
+  /**
+   * A placeholder text to display inside the textarea when it is empty.
+   */
+  placeholder?: string;
+  /**
+   * If `true`, the textarea is disabled and cannot be interacted with.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the textarea is in a read-only state and cannot be edited, but it can still be focused and text can be selected.
+   */
+  readonly?: boolean;
+  /**
+   * If `true`, applies a dashed border style to the textarea, likely used for stylistic purposes or to indicate a certain state.
+   */
+  dashed?: boolean;
+  /**
+   * The number of visible text lines for the textarea, which controls the height of the textarea.
+   */
+  rows?: number;
+  /**
+   * If `true`, the textarea automatically adjusts its height to fit the content as the user types.
+   */
+  autogrow?: boolean;
+  /**
+   * An array of validation rules that are applied to the textarea input. Each rule is a function that receives the input value and returns `true` for valid input or an error message string for invalid input.
+   */
+  rules?: ((v: string) => boolean | string)[];
+}>();
+
+const root = ref<HTMLInputElement>();
+const input = ref<HTMLTextAreaElement>();
+
+const value = computed({
+  get() {
+    return props.modelValue ?? '';
+  },
+  set(v) {
+    emit('update:modelValue', v);
+  },
+});
+
+const nonEmpty = computed(() => !!props.modelValue);
+const validationData = useValidation(value, props.rules || []);
+
+useLabelNotch(root);
+
+const displayErrors = computed(() => {
+  const errors: string[] = [];
+  if (props.error) {
+    errors.push(props.error);
+  }
+  errors.push(...validationData.value.errors);
+  return errors;
+});
+
+const hasErrors = computed(() => displayErrors.value.length > 0);
+
+const adjustHeight = () => {
+  if (!props.autogrow) {
+    return;
+  }
+  const el = input.value;
+  if (el) {
+    el.style.height = 'auto'; // it works, do not delete it
+    el.style.height = `${el.scrollHeight}px`; // Set height based on scrollHeight
+  }
+};
+
+onMounted(() => {
+  adjustHeight();
+});
+</script>
+
+<template>
+  <div class="ui-text-area__envelope">
+    <div ref="root" class="ui-text-area" :class="{ error: hasErrors, disabled, dashed, nonEmpty }">
+      <label v-if="label" ref="label">
+        <i v-if="required" class="required-icon" />
+        <span>{{ label }}</span>
+        <PlTooltip v-if="slots.tooltip" class="info" position="top">
+          <template #tooltip>
+            <slot name="tooltip" />
+          </template>
+        </PlTooltip>
+      </label>
+      <textarea
+        ref="input"
+        v-model="value"
+        :readonly="readonly"
+        :rows="rows"
+        :disabled="disabled"
+        :placeholder="placeholder ?? '...'"
+        spellcheck="false"
+        @input="adjustHeight"
+      />
+      <div class="ui-text-area__append">
+        <slot name="append" />
+      </div>
+      <DoubleContour class="ui-text-area__contour" />
+    </div>
+    <div v-if="hasErrors" class="ui-text-area__error">
+      {{ displayErrors.join(' ') }}
+    </div>
+    <div v-else-if="helper" class="ui-text-area__helper">{{ helper }}</div>
+  </div>
+</template>

package/src/components/PlTextArea/__tests__/PlTextArea.spec.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import PlTextArea from '../PlTextArea.vue';
+
+describe('TextArea', () => {
+  it('renders properly', () => {
+    const wrapper = mount(PlTextArea, {
+      props: {
+        label: 'Label',
+      },
+    });
+    expect(wrapper.text()).toContain('Label');
+  });
+
+  it('modelValue', async () => {
+    const wrapper = mount(PlTextArea, {
+      props: {
+        modelValue: 'initialText',
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+      },
+    });
+
+    await wrapper.find('textarea').setValue('test');
+    expect(wrapper.props('modelValue')).toBe('test');
+  });
+});

package/src/components/PlTextArea/index.ts

@@ -0,0 +1 @@
+export { default as PlTextArea } from './PlTextArea.vue';

package/src/components/PlTextArea/pl-textarea.scss

@@ -0,0 +1,128 @@
+@import '@/assets/mixins';
+
+.ui-text-area {
+  $root: &;
+
+  --contour-color: var(--txt-01);
+  --label-color: var(--txt-01);
+  --contour-border-width: 1px;
+  --contour-box-shadow: none;
+  --label-offset-left-x: 8px;
+  --label-offset-right-x: 8px;
+  --prefix-color: var(--color-placeholder);
+
+  width: 100%;
+  min-height: var(--control-height);
+  position: relative;
+  border-radius: var(--border-radius-control);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  outline: none;
+
+  &__envelope {
+    font-family: var(--font-family-base);
+  }
+
+  textarea {
+    min-height: calc(var(--control-height) - 2px);
+    width: 100%;
+    padding: 10px 12px;
+    border: none;
+    font-size: inherit;
+    background-color: transparent;
+    color: var(--txt-01);
+    caret-color: var(--border-color-focus);
+    cursor: inherit;
+    resize: none;
+    @include scrollbar;
+
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--color-placeholder);
+    }
+  }
+
+  label {
+    @include outlined-control-label();
+  }
+
+  &__contour {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: var(--border-radius-control);
+    border-width: var(--contour-border-width);
+    border-color: var(--contour-color);
+    border-style: solid;
+    box-shadow: var(--contour-box-shadow);
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  &__append {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    .icon {
+      cursor: pointer;
+    }
+    .mask {
+      background-color: var(--control-mask-fill);
+      cursor: pointer;
+    }
+  }
+
+  &__helper {
+    @include field-helper();
+  }
+
+  &__error {
+    @include field-error();
+  }
+
+  &:hover {
+    --contour-color: var(--control-hover-color);
+  }
+
+  &:focus-within:not(.error) {
+    --label-color: var(--txt-focus);
+    --contour-color: var(--border-color-focus);
+    --contour-border-width: 2px;
+    --contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow);
+  }
+
+  &:focus-within.error {
+    --contour-border-width: 2px;
+    --contour-box-shadow: 0 0 0 4px var(--color-error-shadow);
+  }
+
+  &.dashed {
+    #{$root}__contour {
+      border-style: dashed;
+    }
+  }
+
+  &.nonEmpty {
+    --prefix-color: var(--txt-01);
+  }
+
+  &.error {
+    --contour-color: var(--txt-error);
+  }
+
+  &.disabled {
+    --contour-color: var(--color-dis-01);
+    cursor: not-allowed;
+    pointer-events: none;
+    * {
+      color: var(--contour-color);
+    }
+  }
+}

package/src/components/PlTextField/PlTextField.vue

@@ -0,0 +1,158 @@
+<script lang="ts">
+/** Component for one-line string data manipulation */
+export default {
+  name: 'PlTextField',
+};
+</script>
+
+<script lang="ts" setup generic="M extends string | null | undefined = string, E extends M = M">
+import './pl-text-field.scss';
+import { computed, ref, useSlots } from 'vue';
+import { PlTooltip } from '@/components/PlTooltip';
+import DoubleContour from '@/utils/DoubleContour.vue';
+import { useLabelNotch } from '@/utils/useLabelNotch';
+import { useValidation } from '@/utils/useValidation';
+
+const slots = useSlots();
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the model value is updated.
+   *
+   * @param value - The new value of the input, which can be a string or undefined if cleared.
+   */
+  (e: 'update:modelValue', value: string | E): void;
+}>();
+
+const props = defineProps<{
+  /**
+   * The current value of the input field.
+   */
+  modelValue: M;
+  /**
+   * The label to display above the input field.
+   */
+  label?: string;
+  /**
+   * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).
+   * Or you can pass a callback that returns a custom "empty" value (null | undefined | string)
+   */
+  clearable?: boolean | (() => E);
+  /**
+   * If `true`, the input field is marked as required.
+   */
+  required?: boolean;
+  /**
+   * An error message to display below the input field.
+   */
+  error?: string;
+  /**
+   * A helper text to display below the input field when there are no errors.
+   */
+  helper?: string;
+  /**
+   * A placeholder text to display inside the input field when it is empty.
+   */
+  placeholder?: string;
+  /**
+   * If `true`, the input field is disabled and cannot be interacted with.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the input field has a dashed border.
+   */
+  dashed?: boolean;
+  /**
+   * A prefix text to display inside the input field before the value.
+   */
+  prefix?: string;
+  /**
+   * An array of validation rules to apply to the input field. Each rule is a function that takes the current value and returns `true` if valid or an error message if invalid.
+   */
+  rules?: ((v: string) => boolean | string)[];
+}>();
+
+const rootRef = ref<HTMLInputElement | undefined>(undefined);
+
+const inputRef = ref<HTMLInputElement | undefined>();
+
+const valueRef = computed<string>({
+  get() {
+    return props.modelValue ?? '';
+  },
+  set(v) {
+    emit('update:modelValue', v);
+  },
+});
+
+const clear = () => {
+  if (props.clearable) {
+    emit('update:modelValue', props.clearable === true ? '' : props.clearable());
+  }
+};
+
+const validationData = useValidation(valueRef, props.rules || []);
+
+const isEmpty = computed(() => {
+  if (props.clearable) {
+    return props.clearable === true ? props.modelValue === '' : props.modelValue === props.clearable();
+  }
+
+  return props.modelValue === '';
+});
+
+const nonEmpty = computed(() => !isEmpty.value);
+
+const displayErrors = computed(() => {
+  const errors: string[] = [];
+  if (props.error) {
+    errors.push(props.error);
+  }
+  if (!validationData.value.isValid) {
+    errors.push(...validationData.value.errors);
+  }
+  return errors;
+});
+
+const hasErrors = computed(() => displayErrors.value.length > 0);
+
+useLabelNotch(rootRef);
+</script>
+
+<template>
+  <div class="ui-text-field__envelope">
+    <div
+      ref="rootRef"
+      class="ui-text-field"
+      :class="{
+        error: hasErrors,
+        disabled,
+        dashed,
+        nonEmpty,
+      }"
+    >
+      <label v-if="label" ref="label">
+        <i v-if="required" class="required-icon" />
+        <span>{{ label }}</span>
+        <PlTooltip v-if="slots.tooltip" class="info" position="top">
+          <template #tooltip>
+            <slot name="tooltip" />
+          </template>
+        </PlTooltip>
+      </label>
+      <div v-if="prefix" class="ui-text-field__prefix">
+        {{ prefix }}
+      </div>
+      <input ref="inputRef" v-model="valueRef" :disabled="disabled" :placeholder="placeholder || '...'" type="text" spellcheck="false" />
+      <div class="ui-text-field__append">
+        <div v-if="clearable && nonEmpty" class="icon icon--clear" @click="clear" />
+        <slot name="append" />
+      </div>
+      <DoubleContour class="ui-text-field__contour" />
+    </div>
+    <div v-if="hasErrors" class="ui-text-field__error">
+      {{ displayErrors.join(' ') }}
+    </div>
+    <div v-else-if="helper" class="ui-text-field__helper">{{ helper }}</div>
+  </div>
+</template>

package/src/components/PlTextField/PlTextField.vue.d.ts

@@ -0,0 +1,3 @@
+/**
+ * PlTextField component
+ */

package/src/components/PlTextField/__tests__/TextField.spec.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import PlTextField from '../PlTextField.vue';
+
+describe('TextField', () => {
+  it('renders properly', () => {
+    const wrapper = mount(PlTextField, {
+      props: {
+        label: 'TextField Label',
+        modelValue: '',
+      },
+    });
+    expect(wrapper.text()).toContain('TextField Label');
+  });
+
+  it('modelValue', async () => {
+    const wrapper = mount(PlTextField, {
+      props: {
+        modelValue: 'initialText',
+        'onUpdate:modelValue': (e: string) => wrapper.setProps({ modelValue: e }),
+      },
+    });
+
+    await wrapper.find('input').setValue('test');
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error @TODO generic component issue
+    expect(wrapper.props('modelValue')).toBe('test');
+  });
+});

package/src/components/PlTextField/index.ts

@@ -0,0 +1,4 @@
+/**
+ * My component
+ */
+export { default as PlTextField } from './PlTextField.vue';

package/src/components/PlTextField/pl-text-field.scss

@@ -0,0 +1,132 @@
+@import "@/assets/mixins";
+
+.ui-text-field {
+  $root: &;
+
+  --contour-color: var(--txt-01);
+  --label-color: var(--txt-01);
+  --contour-border-width: 1px;
+  --contour-box-shadow: none;
+  --label-offset-left-x: 8px;
+  --label-offset-right-x: 8px;
+  --prefix-color: var(--color-placeholder);
+
+  width: 100%;
+  min-height: var(--control-height);
+  position: relative;
+  border-radius: var(--border-radius-control);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  outline: none;
+
+  &__envelope {
+    font-family: var(--font-family-base);
+  }
+
+  input {
+    min-height: calc(var(--control-height) - 2px);
+    line-height: calc(var(--control-height) - 2px);
+    width: 100%;
+    padding: 0 12px;
+    border: none;
+    font-size: inherit;
+    background-color: transparent;
+    color: var(--txt-01);
+    caret-color: var(--border-color-focus);
+    cursor: inherit;
+
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--color-placeholder);
+    }
+  }
+
+  label {
+    @include outlined-control-label();
+  }
+
+  &__contour {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: var(--border-radius-control);
+    border-width: var(--contour-border-width);
+    border-color: var(--contour-color);
+    border-style: solid;
+    box-shadow: var(--contour-box-shadow);
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  &__prefix {
+    padding-left: 12px;
+    white-space: nowrap;
+    margin-right: -12px;
+    color: var(--prefix-color);
+  }
+
+  &__append {
+    padding-right: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    .icon {
+      cursor: pointer;
+    }
+    .mask {
+      background-color: var(--control-mask-fill);
+      cursor: pointer;
+    }
+  }
+
+  &__helper {
+    @include field-helper();
+  }
+
+  &__error {
+    @include field-error();
+  }
+
+  &:hover {
+    --contour-color: var(--control-hover-color);
+  }
+
+  &:focus-within:not(.error) {
+    --label-color: var(--txt-focus);
+    --contour-color: var(--border-color-focus);
+    --contour-border-width: 2px;
+    --contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow);
+  }
+
+  &:focus-within.error {
+    --contour-border-width: 2px;
+    --contour-box-shadow: 0 0 0 4px var(--color-error-shadow);
+  }
+
+  &.dashed {
+    #{$root}__contour {
+      border-style: dashed;
+    }
+  }
+
+  &.nonEmpty {
+    --prefix-color: var(--txt-01);
+  }
+
+  &.error {
+    --contour-color: var(--txt-error);
+    --label-color: var(--txt-error);
+  }
+
+  &.disabled {
+    --contour-color: var(--color-dis-01);
+    cursor: not-allowed;
+  }
+}

package/src/components/PlToggleSwitch/PlToggleSwitch.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+/**
+ * Component for manipulating a boolean value
+ */
+export default {
+  name: 'PlToggleSwitch',
+};
+</script>
+
+<script lang="ts" setup>
+import './pl-toggle-switch.scss';
+
+defineEmits<{
+  /**
+   * Emitted when the model value is updated
+   *
+   * @param value - The new boolean value of the model
+   */
+  (e: 'update:modelValue', value: boolean): void;
+}>();
+
+defineProps<{
+  /**
+   * The label text for the component (optional)
+   */
+  label?: string;
+  /**
+   * The current boolean value of the component (represents 'on' | 'off' states generally).
+   */
+  modelValue?: boolean;
+}>();
+</script>
+
+<template>
+  <div
+    tabindex="0"
+    class="ui-toggle-switch"
+    :class="{ active: modelValue }"
+    @click="$emit('update:modelValue', !modelValue)"
+    @keydown.enter="$emit('update:modelValue', !modelValue)"
+  >
+    <div class="ui-toggle-switch__body">
+      <div class="ui-toggle-switch__handle" />
+    </div>
+    <span v-if="label" class="label">{{ label }}</span>
+  </div>
+</template>

package/src/components/PlToggleSwitch/index.ts

@@ -0,0 +1 @@
+export { default as PlToggleSwitch } from './PlToggleSwitch.vue';