sprintify-ui 0.1.18 → 0.2.0

package/src/components/BaseModalCenter.vue

@@ -32,8 +32,12 @@
               >
                 <div
                   v-if="modelValue"
-                  :class="backdropClass"
-                  class="fixed inset-0 transition-opacity"
+                  :class="
+                    twMerge(
+                      'fixed inset-0 bg-slate-900 bg-opacity-70 transition-opacity',
+                      twBackdrop
+                    )
+                  "
                   @click="
                     closeOnOutsideClick
                       ? modal.close()
@@ -70,7 +74,7 @@
 
           <button
             v-if="showCloseButton"
-            class="right fixed top-2 right-2 flex h-16 w-16 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20"
+            class="right fixed right-2 top-2 flex h-16 w-16 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20"
             type="button"
             @click="modal.close()"
           >
@@ -84,6 +88,8 @@
 
 <script lang="ts" setup>
 import { useModal } from '@/composables/modal';
+import { PropType } from 'vue';
+import { twMerge } from 'tailwind-merge';
 
 const props = defineProps({
   modelValue: {
@@ -94,10 +100,6 @@ const props = defineProps({
     default: 'center',
     type: String,
   },
-  backdropClass: {
-    default: 'bg-opacity-70 bg-slate-900',
-    type: String,
-  },
   closeOnOutsideClick: {
     default: true,
     type: Boolean,
@@ -114,6 +116,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  twBackdrop: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);

package/src/components/BaseModalSide.vue

@@ -23,8 +23,12 @@
               >
                 <div
                   v-show="modelValue"
-                  :class="backdropClass"
-                  class="fixed inset-0 transition-opacity"
+                  :class="
+                    twMerge(
+                      'fixed inset-0 bg-slate-900 bg-opacity-70 transition-opacity',
+                      twBackdrop
+                    )
+                  "
                   @click="
                     closeOnOutsideClick
                       ? modal.close()
@@ -75,6 +79,8 @@
 </template>
 
 <script lang="ts" setup>
+import { PropType } from 'vue';
+import { twMerge } from 'tailwind-merge';
 import { useModal } from '@/composables/modal';
 import { useBreakpoints } from '@/composables/breakpoints';
 
@@ -87,10 +93,6 @@ const props = defineProps({
     default: '32rem',
     type: String,
   },
-  backdropClass: {
-    default: 'bg-opacity-70 bg-slate-900',
-    type: String,
-  },
   closeOnOutsideClick: {
     default: true,
     type: Boolean,
@@ -99,6 +101,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  twBackdrop: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);

package/src/components/BaseNavbar.stories.js

@@ -99,7 +99,7 @@ const Template = (args) => ({
 
             <div class="hidden md:ml-6 md:flex md:items-center">
               <!-- Profile dropdown -->
-              <BaseMenu menu-class="w-52" :items="userMenu">
+              <BaseMenu tw-menu="w-52" :items="userMenu">
                 <template #button="{ open }">
                   <div
                     class="flex rounded-full"

package/src/components/BaseRadioGroup.vue

@@ -18,7 +18,7 @@
             :required="requiredInternal"
             :disabled="disabled"
             :value="option.value"
-            :class="inputClass"
+            :class="twInput"
             @input="emitUpdate(option.value)"
           />
 
@@ -72,7 +72,7 @@ const props = defineProps({
     default: 'flex space-x-2',
     type: String,
   },
-  inputClass: {
+  twInput: {
     default: 'mt-0.5 border-slate-300',
     type: String,
   },

package/src/components/BaseSkeleton.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="relative isolate overflow-hidden rounded" :class="[background]">
+  <div
+    :class="
+      twMerge(
+        'relative isolate overflow-hidden rounded bg-slate-200',
+        props.class
+      )
+    "
+  >
     <div
       class="absolute inset-0 -translate-x-full animate-shimmer border-t border-white/80 bg-gradient-to-r from-transparent via-white/80 to-transparent"
       :style="{
@@ -10,15 +17,24 @@
   </div>
 </template>
 
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
 <script lang="ts" setup>
-defineProps({
+import { PropType } from 'vue';
+import { twMerge } from 'tailwind-merge';
+
+const props = defineProps({
   delay: {
     default: '0s',
     type: String,
   },
-  background: {
-    default: 'bg-slate-200',
-    type: String,
+  class: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
   },
 });
 </script>

package/src/components/BaseTagAutocomplete.stories.js

@@ -174,7 +174,7 @@ export const SlotBlockItem = (args) => {
     <BaseTagAutocomplete
       v-model="value"
       v-bind="args"
-      container-class="block"
+      tw-container="block"
     >
       <template #items="{items, removeOption}">
         <div

package/src/components/BaseTagAutocomplete.vue

@@ -7,7 +7,7 @@
         wrapperClass,
       ]"
     >
-      <div :class="containerClass">
+      <div :class="twMerge('-m-0.5 flex flex-wrap', twContainer)">
         <slot
           name="items"
           :items="normalizedModelValue"
@@ -76,7 +76,7 @@
           :size="size"
           :loading="loading"
           :loading-bottom="loadingBottom"
-          :drawer-class="inline ? 'pt-1' : 'p-1'"
+          :tw-drawer="inline ? 'pt-1' : 'p-1'"
           :keywords="keywords"
           @select="onSelect"
           @scroll-bottom="emit('scrollBottom')"
@@ -105,6 +105,7 @@ import { useField } from '@/composables/field';
 import { useClickOutside } from '@/composables/clickOutside';
 import { useNotificationsStore } from '@/stores/notifications';
 import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
+import { twMerge } from 'tailwind-merge';
 import { t } from '@/i18n';
 
 const notifications = useNotificationsStore();
@@ -175,9 +176,9 @@ const props = defineProps({
     default: 'focus',
     type: String as PropType<'focus' | 'always'>,
   },
-  containerClass: {
-    default: '-m-0.5 flex flex-wrap',
-    type: String,
+  twContainer: {
+    default: '',
+    type: [String, Array] as PropType<string|string[]>,
   },
 });
 

package/src/components/BaseTextarea.vue

@@ -8,14 +8,14 @@
     :required="requiredInternal"
     :rows="rows"
     :class="[hasErrorInternal ? 'border-red-500' : 'border-slate-300']"
-    class="block mb-0 rounded disabled:cursor-not-allowed disabled:text-slate-300"
+    class="mb-0 block rounded disabled:cursor-not-allowed disabled:text-slate-300"
     @input="emitUpdate(transformInputValue($event))"
   />
 </template>
 
 <script lang="ts" setup>
 import { useField } from '@/composables/field';
-import { get, isString, trim } from 'lodash';
+import { get, isString } from 'lodash';
 import { PropType } from 'vue';
 
 const props = defineProps({

package/src/components/BaseTextareaAutoresize.stories.js

@@ -6,7 +6,7 @@ export default {
   title: 'Form/BaseTextareaAutoresize',
   component: BaseTextareaAutoresize,
   args: {
-    name: 'bio',
+    name: 'name',
     placeholder: 'Describe your complete life in 4 sentences...',
   },
 };
@@ -51,6 +51,35 @@ Disabled.args = {
   disabled: true,
 };
 
+const TemplateTWTextarea = (args) => ({
+  components: {
+    BaseTextareaAutoresize,
+    ShowValue,
+  },
+  setup() {
+    function onSubmit() {
+      alert('submit');
+    }
+    const value = ref(null);
+    return { args, value, onSubmit };
+  },
+  template: `
+  <form @submit.prevent="onSubmit" class="border-none">
+    <BaseTextareaAutoresize 
+      v-model="value" 
+      v-bind="args" 
+      class="w-full shadow rounded" 
+      tw-textarea="p-5 bg-slate-100 text-slate-700 focus:ring-blue-200 focus:ring-4 text-sm"
+      @submit="onSubmit"
+    ></BaseTextareaAutoresize>
+  </form>
+
+  <ShowValue :value="value" />
+  `,
+});
+
+export const TWTextarea = TemplateTWTextarea.bind({});
+
 export const Field = createFieldStory({
   component: BaseTextareaAutoresize,
   componentName: 'BaseTextareaAutoresize',

package/src/components/BaseTextareaAutoresize.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    ref="wrapper"
-    class="wrapper grid"
-    :style="{ maxHeight: maxHeight + 'px' }"
-  >
+  <div ref="wrapper" class="grid" :style="{ maxHeight: maxHeight + 'px' }">
     <textarea
       :value="modelValue"
       :name="nameInternal"
@@ -11,10 +7,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 +17,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 +31,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,6 +83,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  twTextarea: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
 });
 
 const emit = defineEmits(['update:modelValue', 'submit', 'focus', 'input']);
@@ -137,4 +133,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>