sprintify-ui 0.0.11 → 0.0.12

package/src/components/BaseTextareaAutoresize.vue

@@ -1,117 +1,113 @@
 <template>
-  <div ref="wrapper" class="wrapper">
+  <div
+    ref="wrapper"
+    class="wrapper grid"
+    :style="{ maxHeight: maxHeight + 'px' }"
+  >
     <textarea
       :value="modelValue"
       :name="name"
       :placeholder="placeholder"
+      :disabled="disabled"
+      class="resize-none"
+      :class="BASE_TEXTAREA_CLASSES"
+      :style="{ maxHeight: maxHeight + 'px', gridArea: BASE_GRID_AREA }"
       rows="1"
-      class="focus:outline-none focus:ring-0"
       @input="onInput"
       @keyup="onKeyUp"
       @keydown="onKeyDown"
       @focus="onFocus"
     />
+    <div
+      class="invisible whitespace-pre-wrap"
+      :class="BASE_TEXTAREA_CLASSES"
+      :style="{
+        content: DIV_CONTENT,
+        maxHeight: maxHeight + 'px',
+        gridArea: BASE_GRID_AREA,
+      }"
+    >
+      {{ modelValue }} {{ ' ' }}
+    </div>
   </div>
 </template>
 
-<script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { defineComponent, inject } from 'vue';
+<script lang="ts" setup>
+import { Ref } from 'vue';
 
-const keys = {} as { [key: string]: boolean };
+const BASE_TEXTAREA_CLASSES =
+  'py-2 px-3 font-normal text-base disabled:cursor-not-allowed disabled:text-slate-300 font-sans rounded leading-normal tracking-normal border border-slate-300';
+
+const BASE_GRID_AREA = '1 / 1 / 2 / 2';
 
-export default defineComponent({
-  props: {
-    modelValue: {
-      default: '',
-      type: String,
-    },
-    placeholder: {
-      default: '',
-      type: String,
-    },
-    name: {
-      required: true,
-      type: String,
-    },
+/* Note the weird space! Needed to prevent jumpy behavior */
+const DIV_CONTENT = "attr(data-replicated-value) ' '";
+
+const props = defineProps({
+  modelValue: {
+    default: '',
+    type: String,
   },
-  emits: ['update:modelValue', 'submit', 'focus', 'input'],
-  setup() {
-    const mobile = inject('mobile') as boolean;
-    return {
-      mobile,
-    };
+  placeholder: {
+    default: '',
+    type: String,
   },
-  watch: {
-    modelValue(value: string) {
-      this.updateReplicatedValue(value);
-    },
+  name: {
+    required: true,
+    type: String,
   },
-  methods: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onInput(e: any) {
-      const value = e.target.value ?? '';
-      this.$emit('update:modelValue', value);
-      this.$emit('input', e);
-      this.updateReplicatedValue(value);
-    },
-    updateReplicatedValue(value: string) {
-      const wrapper = this.$refs.wrapper as HTMLElement;
-      wrapper.dataset.replicatedValue = value;
-    },
-    onKeyDown(event: any) {
-      keys[event.key as number] = true;
-
-      if (keys['Enter'] && !keys['Shift'] && !this.mobile) {
-        this.$emit('submit');
-        event.preventDefault();
-      }
-    },
-    onKeyUp(event: any) {
-      delete keys[event.key];
-    },
-    onFocus(event: any) {
-      this.$emit('focus', event);
-    },
+  maxHeight: {
+    default: 100,
+    type: Number,
+  },
+  /**
+   * Setting this to true will trigger the 'submit' event while pressing Enter.
+   * Users will be able to add a line break while pressing Shift + Enter.
+   */
+  submitOnEnter: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
   },
 });
-</script>
 
-<style lang="postcss" scoped>
-.wrapper {
-  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
-  display: grid;
-}
-.wrapper::after {
-  /* Note the weird space! Needed to prevent jumpy behavior */
-  content: attr(data-replicated-value) ' ';
+const emit = defineEmits(['update:modelValue', 'submit', 'focus', 'input']);
 
-  /* This is how textarea text behaves */
-  white-space: pre-wrap;
+const wrapper = ref(null) as Ref<null | HTMLDivElement>;
 
-  /* Hidden from view, clicks, and screen readers */
-  visibility: hidden;
+const keys = {} as { [key: string]: boolean };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function onInput(e: any) {
+  const value = e.target.value ?? '';
+  emit('update:modelValue', value);
+  emit('input', e);
 }
-.wrapper > textarea {
-  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
-  resize: none;
 
-  @apply focus:outline-none;
-  @apply focus-visible:outline-none;
+function onKeyDown(event: KeyboardEvent) {
+  keys[event.key] = true;
+
+  if (keys['Enter'] && !keys['Shift'] && props.submitOnEnter) {
+    // If submit triggers alert, Enter wont be delete from keys,
+    // manually remove it here
+    delete keys['Enter'];
+
+    // Submit event to listen to
+    emit('submit');
+
+    // Prevent adding an EOL the the textarea
+    event.preventDefault();
+  }
 }
-.wrapper > textarea,
-.wrapper::after {
-  /* Identical styling required!! */
-  padding: 0.5rem;
-  font: inherit;
 
-  @apply text-base;
-  @apply max-h-28;
-  @apply border-transparent;
-  @apply bg-slate-100;
-  @apply rounded-lg;
+function onKeyUp(event: KeyboardEvent) {
+  delete keys[event.key];
+}
 
-  /* Place on top of each other */
-  grid-area: 1 / 1 / 2 / 2;
+function onFocus(event: FocusEvent) {
+  emit('focus', event);
 }
-</style>
+</script>

package/src/components/index.ts

@@ -25,9 +25,32 @@ import BaseDialog from './BaseDialog.vue';
 import BaseFilePicker from './BaseFilePicker.vue';
 import BaseFileUploader from './BaseFileUploader.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
+import BaseInput from './BaseInput.vue';
+import BaseInputLabel from './BaseInputLabel.vue';
 import BaseLoadingCover from './BaseLoadingCover.vue';
 import BaseMenu from './BaseMenu.vue';
 import BaseMenuItem from './BaseMenuItem.vue';
+import BaseModalCenter from './BaseModalCenter.vue';
+import BaseModalSide from './BaseModalSide.vue';
+import BaseNavbar from './BaseNavbar.vue';
+import BaseNavbarItem from './BaseNavbarItem.vue';
+import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
+import BasePagination from './BasePagination.vue';
+import BasePanel from './BasePanel.vue';
+import BasePassword from './BasePassword.vue';
+import BaseProcessRing from './BaseProcessRing.vue';
+import BaseReadMore from './BaseReadMore.vue';
+import BaseSelect from './BaseSelect.vue';
+import BaseSideNavigation from './BaseSideNavigation.vue';
+import BaseSideNavigationItem from './BaseSideNavigationItem.vue';
+import BaseSkeleton from './BaseSkeleton.vue';
+import BaseSwitch from './BaseSwitch.vue';
+import BaseSystemAlert from './BaseSystemAlert.vue';
+import BaseTextarea from './BaseTextarea.vue';
+import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
+import BaseCharacterCounter from './BaseCharacterCounter.vue';
+import BaseTabs from './BaseTabs.vue';
+import BaseTabItem from './BaseTabItem.vue';
 import BaseTable from './BaseTable.vue';
 import BaseTableColumn from './BaseTableColumn.vue';
 
@@ -59,9 +82,32 @@ export {
   BaseFilePicker,
   BaseFileUploader,
   BaseIcon,
+  BaseInput,
+  BaseInputLabel,
   BaseLoadingCover,
   BaseMenu,
   BaseMenuItem,
+  BaseModalCenter,
+  BaseModalSide,
+  BaseNavbar,
+  BaseNavbarItem,
+  BaseNavbarItemContent,
+  BasePagination,
+  BasePanel,
+  BasePassword,
+  BaseProcessRing,
+  BaseReadMore,
+  BaseSelect,
+  BaseSideNavigation,
+  BaseSideNavigationItem,
+  BaseSkeleton,
+  BaseSwitch,
+  BaseSystemAlert,
+  BaseTextarea,
+  BaseTextareaAutoresize,
+  BaseCharacterCounter,
+  BaseTabs,
+  BaseTabItem,
   BaseTable,
   BaseTableColumn,
 };

package/src/lang/en.json

@@ -23,6 +23,7 @@
     "month": "Month",
     "next": "Next",
     "next_month": "Next month",
+    "none": "None",
     "nothing_found": "Nothing found",
     "or": "or",
     "pagination_detail": "{page} records of {total}",

package/src/lang/fr.json

@@ -23,6 +23,7 @@
     "month": "Mois",
     "next": "Suivant",
     "next_month": "Mois prochain",
+    "none": "Aucun",
     "nothing_found": "Rien n'a été trouvé",
     "or": "ou",
     "pagination_detail": "{page} items de {total}",

package/dist/types/src/components/BaseWordCount.vue.d.ts

@@ -1,31 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    text: {
-        required: true;
-        type: StringConstructor;
-    };
-    min: {
-        default: undefined;
-        type: NumberConstructor;
-    };
-    max: {
-        default: undefined;
-        type: NumberConstructor;
-    };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    text: {
-        required: true;
-        type: StringConstructor;
-    };
-    min: {
-        default: undefined;
-        type: NumberConstructor;
-    };
-    max: {
-        default: undefined;
-        type: NumberConstructor;
-    };
-}>>, {
-    max: number;
-    min: number;
-}>;
-export default _default;

package/src/components/BaseWordCount.vue

@@ -1,36 +0,0 @@
-<template>
-  <div
-    v-if="max && (!min || text.length >= min)"
-    class="text-sm"
-    :class="{
-      'text-slate-500': text.length <= max,
-      'text-red-600': text.length > max,
-    }"
-  >
-    {{ text.length }}/{{ max }}
-  </div>
-  <div v-if="min && text.length < min" class="text-sm text-red-600">
-    {{ $t('sui.min_x_characters', { x: min }) }} ({{ text.length }}/{{ min }})
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    text: {
-      required: true,
-      type: String,
-    },
-    min: {
-      default: undefined,
-      type: Number,
-    },
-    max: {
-      default: undefined,
-      type: Number,
-    },
-  },
-});
-</script>