sprintify-ui 0.1.18 → 0.2.1

package/src/components/BaseTextareaAutoresize.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="wrapper"
-    class="wrapper grid"
+    class="grid"
     :style="{ maxHeight: maxHeight + 'px' }"
   >
     <textarea
@@ -11,10 +11,7 @@
       :disabled="disabled"
       :required="requiredInternal"
       class="resize-none"
-      :class="[
-        BASE_TEXTAREA_CLASSES,
-        hasErrorInternal ? 'border-red-500' : 'border-slate-300',
-      ]"
+      :class="textareaClasses"
       :style="{ maxHeight: maxHeight + 'px', gridArea: BASE_GRID_AREA }"
       :rows="rows"
       @input="onInput"
@@ -24,10 +21,7 @@
     />
     <div
       class="invisible whitespace-pre-wrap"
-      :class="[
-        BASE_TEXTAREA_CLASSES,
-        hasErrorInternal ? 'border-red-500' : 'border-slate-300',
-      ]"
+      :class="textareaClasses"
       :style="{
         content: DIV_CONTENT,
         maxHeight: maxHeight + 'px',
@@ -41,6 +35,8 @@
 
 <script lang="ts" setup>
 import { useField } from '@/composables/field';
+import { twMerge } from 'tailwind-merge';
+import { PropType } from 'vue';
 
 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';
@@ -91,11 +87,15 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  twTextarea: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
 });
 
 const emit = defineEmits(['update:modelValue', 'submit', 'focus', 'input']);
 
-const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
+const { nameInternal, requiredInternal, hasErrorInternal } =
   useField({
     name: computed(() => props.name),
     required: computed(() => props.required),
@@ -137,4 +137,14 @@ function onKeyUp(event: KeyboardEvent) {
 function onFocus(event: FocusEvent) {
   emit('focus', event);
 }
+
+const textareaClasses = computed(() => {
+  return twMerge(
+    [
+      BASE_TEXTAREA_CLASSES,
+      hasErrorInternal.value ? 'border-red-500' : 'border-slate-300',
+    ]
+    //props.twTextarea
+  );
+});
 </script>

package/src/components/BaseTimeline.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="flow-root">
-    <ul role="list" class="-mb-8">
-      <li v-for="(item, index) in items" :key="index">
+    <ul
+      role="list"
+      class="-mb-8"
+    >
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+      >
         <div class="relative pb-8">
           <span
             v-if="index != items.length - 1"

package/src/svg/BaseEmptyState.vue

@@ -1,5 +1,9 @@
 <template>
-  <svg viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    viewBox="0 0 150 150"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       class="text-slate-100"
       d="M75 150C116.421 150 150 116.421 150 75C150 33.5786 116.421 0 75 0C33.5786 0 0 33.5786 0 75C0 116.421 33.5786 150 75 150Z"

package/src/svg/BaseSpinnerLarge.vue

@@ -14,9 +14,21 @@
       stroke="url(#gradient)"
     />
     <linearGradient id="gradient">
-      <stop offset="50%" stop-color="#2563eb" stop-opacity="1" />
-      <stop offset="65%" stop-color="#2563eb" stop-opacity=".5" />
-      <stop offset="100%" stop-color="#2563eb" stop-opacity="0" />
+      <stop
+        offset="50%"
+        stop-color="#2563eb"
+        stop-opacity="1"
+      />
+      <stop
+        offset="65%"
+        stop-color="#2563eb"
+        stop-opacity=".5"
+      />
+      <stop
+        offset="100%"
+        stop-color="#2563eb"
+        stop-opacity="0"
+      />
     </linearGradient>
   </svg>
 </template>

package/src/svg/BaseSpinnerSmall.vue

@@ -1,6 +1,12 @@
 <template>
-  <svg class="animate-spin" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
+  <svg
+    class="animate-spin"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+    />
   </svg>
 </template>