@onereach/ui-components 4.7.3 → 4.7.4-beta.2863.0

package/src/components/or-tag-input-v3/OrTagInput.vue

@@ -0,0 +1,297 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+  >
+    <template v-if="label">
+      <OrLabel
+        :control-id="controlAttributes.id"
+        :variant="'input'"
+        :required="required"
+        :disabled="disabled"
+      >
+        {{ label }}
+
+        <template v-slot:addon>
+          <slot name="addon" />
+        </template>
+      </OrLabel>
+    </template>
+
+    <OrInputBox
+      :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
+      :size="size"
+      :invalid="!!error"
+      :readonly="readonly"
+      :disabled="disabled"
+    >
+      <OrTags
+        :items="proxyModelValue"
+        :tag-props="{
+          variant: 'reset',
+          disabled: disabled
+        }"
+        @reset="remove($event)"
+      />
+      <!-- <OrTag
+        v-for="token in proxyModelValue"
+        :key="token"
+        :class="itemStyles"
+        :variant="'reset'"
+        :disabled="disabled"
+      >
+        {{ token }}
+      </OrTag> -->
+
+      <input
+        ref="control"
+        v-model="draftModelValue"
+        v-bind="controlAttributes"
+        :class="controlStyles"
+        :type="'text'"
+        :placeholder="!proxyModelValue.length ? placeholder : undefined"
+        :readonly="readonly"
+        :disabled="disabled"
+        @keydown.enter="add()"
+        @keydown="$emit('keydown', $event)"
+        @keyup="$emit('keyup', $event)"
+        @focus="$emit('focus', $event)"
+        @blur="$emit('blur', $event)"
+      >
+
+      <template v-slot:addon>
+        <template v-if="draftModelValue">
+          <OrIconButton
+            :icon="'close'"
+            :color="'inherit'"
+            :disabled="readonly || disabled"
+            @click.stop="reset()"
+          />
+        </template>
+      </template>
+    </OrInputBox>
+
+    <div
+      v-show="!error"
+      :class="['contents']"
+    >
+      <template v-if="hint || maxLength">
+        <OrHint :disabled="disabled">
+          {{ hint }}
+
+          <template
+            v-if="maxLength"
+            v-slot:addon
+          >
+            {{ currentLength }} / {{ maxLength }}
+          </template>
+        </OrHint>
+      </template>
+    </div>
+
+    <div
+      v-show="typeof error === 'string'"
+      :class="['contents']"
+    >
+      <OrError :disabled="disabled">
+        {{ error }}
+
+        <template
+          v-if="maxLength"
+          v-slot:addon
+        >
+          {{ currentLength }} / {{ maxLength }}
+        </template>
+      </OrError>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, computed, defineComponent, reactive, ref } from 'vue-demi';
+import { useControlAttributes, useIdAttribute, useValidationAttributes } from '../../hooks';
+import { OrErrorV3 as OrError } from '../or-error-v3';
+import { OrHintV3 as OrHint } from '../or-hint-v3';
+import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
+import { OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
+import { OrLabelV3 as OrLabel } from '../or-label-v3';
+import { OrTagsV3 as OrTags } from '../or-tags-v3';
+import { TagInputSize } from './props';
+import { TagInput, TagInputControl, TagInputItem } from './styles';
+
+export default defineComponent({
+  name: 'OrTagInput',
+
+  components: {
+    OrError,
+    OrHint,
+    OrIconButton,
+    OrInputBox,
+    OrLabel,
+    OrTags,
+  },
+
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
+  props: {
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+
+    size: {
+      type: String as PropType<`${TagInputSize}`>,
+      default: TagInputSize.M,
+    },
+
+    label: {
+      type: String,
+      default: undefined,
+    },
+
+    placeholder: {
+      type: String,
+      default: undefined,
+    },
+
+    hint: {
+      type: String,
+      default: undefined,
+    },
+
+    error: {
+      type: [String, Boolean],
+      default: undefined,
+    },
+
+    required: {
+      type: Boolean,
+      default: false,
+    },
+
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    disableDefaultStyles: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: [
+    'update:modelValue',
+
+    'keydown',
+    'keyup',
+    'focus',
+    'blur',
+  ],
+
+  expose: [
+    'root',
+
+    'focus',
+    'blur',
+  ],
+
+  setup(props, context) {
+    // Refs
+    const root = ref<HTMLElement>();
+    const control = ref<HTMLInputElement>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-tag-input-v3',
+      ...TagInput,
+    ]);
+
+    const controlStyles = computed(() => [
+      ...TagInputControl,
+    ]);
+
+    const itemStyles = computed(() => [
+      ...TagInputItem,
+    ]);
+
+    // State
+    const controlAttributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+      ...useValidationAttributes(),
+    });
+
+    const proxyModelValue = computed({
+      get: () => props.modelValue,
+
+      set: (value) => {
+        context.emit('update:modelValue', value);
+      },
+    });
+
+    const draftModelValue = ref<string>();
+
+    const currentLength = computed(() => proxyModelValue.value?.length ?? 0);
+    const maxLength = computed(() => controlAttributes.maxlength);
+
+    // Methods
+    function focus(): void {
+      control.value?.focus();
+    }
+
+    function blur(): void {
+      control.value?.blur();
+    }
+
+    function add(): void {
+      if (draftModelValue.value) {
+        proxyModelValue.value = [...proxyModelValue.value, draftModelValue.value];
+        draftModelValue.value = undefined;
+      }
+    }
+
+    function remove(value: string): void {
+      proxyModelValue.value = proxyModelValue.value.filter((item) => item !== value);
+    }
+
+    function reset(): void {
+      draftModelValue.value = undefined;
+    }
+
+    return {
+      root,
+      control,
+      rootStyles,
+      controlStyles,
+      itemStyles,
+      controlAttributes,
+      proxyModelValue,
+      draftModelValue,
+      currentLength,
+      maxLength,
+      focus,
+      blur,
+      add,
+      remove,
+      reset,
+    };
+  },
+});
+</script>
+
+<style scoped>
+input {
+  min-width: 0;
+  background: none;
+  outline: none;
+}
+</style>

package/src/components/or-tag-input-v3/index.ts

@@ -0,0 +1,2 @@
+export { default as OrTagInputV3 } from './OrTagInput.vue';
+export * from './props';

package/src/components/or-tag-input-v3/props.ts

@@ -0,0 +1 @@
+export { InputBoxSize as TagInputSize } from '../or-input-box-v3';

package/src/components/or-tag-input-v3/styles.ts

@@ -0,0 +1,24 @@
+export const TagInput: string[] = [
+  // Layout
+  'layout-column',
+
+  // Spacing
+  'gap-xs',
+];
+
+export const TagInputControl: string[] = [
+  // Layout
+  'flex-auto',
+
+  // Typography
+  'typography-inherit',
+
+  // Theme (placeholder)
+  'placeholder:theme-foreground-outline',
+  'dark:placeholder:theme-foreground-outline-dark',
+];
+
+export const TagInputItem: string[] = [
+  // Box
+  '!min-h-0',
+];

package/src/components/or-tags-v3/OrTags.vue

@@ -11,6 +11,7 @@
         v-for="item in items"
         v-bind="tagProps"
         :key="item"
+        @reset="$emit('reset', item)"
       >
         {{ item }}
       </OrTag>
@@ -75,6 +76,18 @@ export default defineComponent({
     },
   },
 
+  emits: [
+    'click',
+    'focus',
+    'blur',
+
+    'reset',
+  ],
+
+  expose: [
+    'root',
+  ],
+
   setup(props) {
     // Refs
     const root = ref<HTMLElement>();

package/src/components/or-tags-v3/styles.ts

@@ -2,6 +2,9 @@ export const Tags: string[] = [
   // Layout
   'layout-row',
 
+  // Overflow
+  'overflow-hidden',
+
   // Spacing
   'gap-sm',
 

package/src/components/or-textarea-v3/styles.ts

@@ -19,7 +19,7 @@ export const TextareaControl: string[] = [
   // Typography
   'typography-inherit',
 
-  // Theme
+  // Theme (placeholder)
   'placeholder:theme-foreground-outline',
   'dark:placeholder:theme-foreground-outline-dark',
 ];