sprintify-ui 0.1.18 → 0.2.1

package/src/components/BaseNumber.vue

@@ -8,7 +8,10 @@
       leave-from-class="transform scale-100 opacity-100"
       leave-to-class="transform scale-90 opacity-0"
     >
-      <div v-if="showInvalidInput" class="absolute left-0 top-full z-[1]">
+      <div
+        v-if="showInvalidInput"
+        class="absolute left-0 top-full z-[1]"
+      >
         <div
           class="mt-1 ml-1 rounded bg-red-500 px-2 py-1 text-xs font-medium text-white"
         >
@@ -47,7 +50,7 @@
         @blur="onBlur"
         @focus="onFocus"
         @keydown="onKeydown"
-      />
+      >
       <div class="border-l border-slate-300">
         <button
           type="button"
@@ -56,7 +59,7 @@
           :disabled="disabled"
           @click="increment"
         >
-          <BaseIcon icon="mdi:chevron-up"></BaseIcon>
+          <BaseIcon icon="mdi:chevron-up" />
         </button>
         <button
           type="button"
@@ -65,7 +68,7 @@
           :disabled="disabled"
           @click="decrement"
         >
-          <BaseIcon icon="mdi:chevron-down"></BaseIcon>
+          <BaseIcon icon="mdi:chevron-down" />
         </button>
       </div>
     </div>

package/src/components/BasePagination.vue

@@ -53,7 +53,7 @@
           @keydown.enter="onManualPageMobileEnter"
           @input="onManualPageMobileInput"
           @blur="setPageFromManualPageMobile"
-        />
+        >
         <span class="ml-2 text-sm font-normal text-slate-500">
           {{ t('sui.of') }} {{ lastPage }}
         </span>
@@ -88,7 +88,7 @@
         @keydown.enter="onManualPageEnter"
         @input="onManualPageInput"
         @blur="setPageFromManualPage"
-      />
+      >
     </div>
   </nav>
 </template>

package/src/components/BasePanel.vue

@@ -7,7 +7,10 @@
       <h3 class="text-base font-semibold leading-6 text-slate-900">
         {{ title }}
       </h3>
-      <p v-if="description" class="mt-1 text-sm leading-normal text-slate-600">
+      <p
+        v-if="description"
+        class="mt-1 text-sm leading-normal text-slate-600"
+      >
         {{ description }}
       </p>
     </div>

package/src/components/BasePassword.vue

@@ -16,7 +16,7 @@
       :required="requiredInternal"
       class="grow rounded-l rounded-r-none border-none focus:ring-2 focus:ring-primary-500 disabled:cursor-not-allowed"
       @input="onInput"
-    />
+    >
     <div class="flex shrink-0 pl-3">
       <button
         tabindex="-1"
@@ -30,7 +30,11 @@
           icon="heroicons:eye-slash-20-solid"
           class="h-5 w-5"
         />
-        <BaseIcon v-else icon="heroicons:eye-20-solid" class="h-5 w-5" />
+        <BaseIcon
+          v-else
+          icon="heroicons:eye-20-solid"
+          class="h-5 w-5"
+        />
       </button>
     </div>
   </div>

package/src/components/BaseProgressCircle.vue

@@ -1,5 +1,8 @@
 <template>
-  <svg :height="radius * 2" :width="radius * 2">
+  <svg
+    :height="radius * 2"
+    :width="radius * 2"
+  >
     <circle
       stroke="currentColor"
       class="text-slate-200"

package/src/components/BaseRadioGroup.vue

@@ -18,11 +18,14 @@
             :required="requiredInternal"
             :disabled="disabled"
             :value="option.value"
-            :class="inputClass"
+            :class="twInput"
             @input="emitUpdate(option.value)"
-          />
+          >
 
-          <slot name="option" :option="option">
+          <slot
+            name="option"
+            :option="option"
+          >
             <span class="text-sm">{{ option.label }}</span>
           </slot>
         </label>
@@ -72,7 +75,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/BaseRichText.vue

@@ -14,8 +14,7 @@
       :enable="enable"
       content-type="html"
       @update:content="emitUpdate(updateChange($event))"
-    >
-    </quill-editor>
+    />
   </div>
 </template>
 

package/src/components/BaseSelect.vue

@@ -13,7 +13,11 @@
     @change="onChange($event)"
   >
     <template v-if="requiredInternal">
-      <option disabled hidden :value="EMPTY_VALUE_INTERNAL">
+      <option
+        disabled
+        hidden
+        :value="EMPTY_VALUE_INTERNAL"
+      >
         {{ placeholder ? placeholder : t('sui.select_an_option') }}
       </option>
     </template>
@@ -101,7 +105,7 @@ const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
     emit: emit,
   });
 
-const options = ref([] as HTMLOptionElement[]);
+const options = ref<HTMLOptionElement[]>([]);
 
 function isEmptyExternal(value: string | number | null | undefined) {
   if (value === undefined || value === EMPTY_VALUE_EXTERNAL) {

package/src/components/BaseShortcut.vue

@@ -1,6 +1,11 @@
 <template>
   <BaseCard class="flex duration-200 hover:bg-slate-50">
-    <BaseActionItem :to="to" :href="href" :action="action" class="block w-full">
+    <BaseActionItem
+      :to="to"
+      :href="href"
+      :action="action"
+      class="block w-full"
+    >
       <section class="whitespace-pre-line p-4">
         <!-- Icon -->
         <div
@@ -11,7 +16,7 @@
             v-if="icon"
             :icon="icon"
             :class="iconSizeClasses"
-          ></BaseIcon>
+          />
         </div>
         <!-- Title -->
         <div class="text-md font-semibold">
@@ -29,12 +34,14 @@
           v-if="linkText"
           class="flex items-center justify-start text-sm font-medium"
         >
-          <div class="mr-1 leading-none">{{ linkText }}</div>
+          <div class="mr-1 leading-none">
+            {{ linkText }}
+          </div>
           <div>
             <BaseIcon
               icon="heroicons:arrow-right-20-solid"
               class="mt-px h-4 w-4"
-            ></BaseIcon>
+            />
           </div>
         </div>
       </section>

package/src/components/BaseSideNavigation.vue

@@ -1,5 +1,8 @@
 <template>
-  <nav aria-label="Sidebar" class="relative">
+  <nav
+    aria-label="Sidebar"
+    class="relative"
+  >
     <div class="absolute bottom-0 left-0 h-full w-px bg-slate-300" />
     <div
       class="relative overflow-x-auto overflow-y-hidden"

package/src/components/BaseSideNavigationItem.vue

@@ -17,7 +17,10 @@
       ]"
       @click.prevent="onClick(navigate)"
     >
-      <div class="relative flex items-center" :class="[sizeClassInner]">
+      <div
+        class="relative flex items-center"
+        :class="[sizeClassInner]"
+      >
         <div
           class="absolute left-0 top-0 h-full"
           :class="[
@@ -25,7 +28,7 @@
               ? 'w-[2px] bg-primary-600'
               : 'group-hover:w-px group-hover:bg-slate-700',
           ]"
-        ></div>
+        />
         <slot :active="isActiveInternal(isActive, isExactActive)" />
       </div>
     </a>

package/src/components/BaseSkeleton.vue

@@ -1,24 +1,40 @@
 <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="{
         animationDelay: delay,
       }"
-    ></div>
-    <slot></slot>
+    />
+    <slot />
   </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/BaseStatistic.vue

@@ -1,12 +1,18 @@
 <template>
-  <div class="inline-flex rounded-xl p-4" :class="[centerClass]">
+  <div
+    class="inline-flex rounded-xl p-4"
+    :class="[centerClass]"
+  >
     <section>
       <!-- Label -->
       <header class="mb-0.5 text-base font-medium">
         {{ label }}
       </header>
       <!-- Content -->
-      <div class="flex" :class="[centerClass]">
+      <div
+        class="flex"
+        :class="[centerClass]"
+      >
         <div class="text-3xl font-bold leading-tight">
           {{ primaryValue }}
         </div>
@@ -18,9 +24,14 @@
         >
           <!-- Icon trend -->
           <div v-if="trend">
-            <BaseIcon :icon="icon" :class="iconClass" />
+            <BaseIcon
+              :icon="icon"
+              :class="iconClass"
+            />
+          </div>
+          <div class="text-lg">
+            {{ secondaryValue }}
           </div>
-          <div class="text-lg">{{ secondaryValue }}</div>
         </div>
       </div>
       <!-- Caption -->

package/src/components/BaseStepper.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="lg:border-t lg:border-b lg:border-gray-200">
-    <nav class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8" aria-label="Progress">
+    <nav
+      class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8"
+      aria-label="Progress"
+    >
       <ol
         role="list"
         class="overflow-hidden rounded-md lg:flex lg:rounded-none lg:border-l lg:border-r lg:border-gray-200"

package/src/components/BaseSwitch.stories.js

@@ -1,7 +1,6 @@
 import BaseSwitch from './BaseSwitch.vue';
 import BaseContainer from './BaseContainer.vue';
 import { createFieldStory } from '../../.storybook/utils';
-import { Icon } from '@iconify/vue';
 
 export default {
   title: 'Form/BaseSwitch',

package/src/components/BaseSwitch.vue

@@ -24,10 +24,16 @@
           }"
           class="flex items-center justify-center transition duration-200 ease-in-out bg-white rounded-full shadow pointer-events-none text-slate-500 ring-0"
         >
-          <BaseIcon v-if="icon" :icon="icon" />
+          <BaseIcon
+            v-if="icon"
+            :icon="icon"
+          />
         </span>
       </Switch>
-      <SwitchLabel v-if="$slots.default" class="cursor-pointer">
+      <SwitchLabel
+        v-if="$slots.default"
+        class="cursor-pointer"
+      >
         <slot />
       </SwitchLabel>
     </div>

package/src/components/BaseSystemAlert.vue

@@ -17,7 +17,10 @@
         </div>
       </div>
     </component>
-    <div v-if="closable" class="absolute top-0 right-0 p-3">
+    <div
+      v-if="closable"
+      class="absolute top-0 right-0 p-3"
+    >
       <button
         type="button"
         class="rounded-full bg-black bg-opacity-50 p-1 text-white"

package/src/components/BaseTabItem.vue

@@ -18,7 +18,10 @@
         ]"
         @click.prevent="onClick(navigate)"
       >
-        <div class="relative flex" :class="sizeClassInner">
+        <div
+          class="relative flex"
+          :class="sizeClassInner"
+        >
           <div
             class="absolute left-0 bottom-0 w-full"
             :class="[
@@ -26,7 +29,7 @@
                 ? 'h-[2px] bg-primary-600'
                 : 'group-hover:h-px group-hover:bg-slate-700',
             ]"
-          ></div>
+          />
           <div class="whitespace-nowrap">
             <slot :active="isActiveInternal(isActive, isExactActive)" />
           </div>

package/src/components/BaseTable.vue

@@ -3,7 +3,10 @@
     class="relative w-full overflow-hidden"
     :class="maxHeight ? 'base-table--has-max-height' : ''"
   >
-    <div ref="slot" style="display: none">
+    <div
+      ref="slot"
+      style="display: none"
+    >
       <slot />
     </div>
 
@@ -17,7 +20,10 @@
         <div class="inline-block min-w-full align-middle">
           <div class="relative min-h-[300px]">
             <table class="min-w-full border-separate border-spacing-0">
-              <thead v-if="newColumns.length" ref="thead">
+              <thead
+                v-if="newColumns.length"
+                ref="thead"
+              >
                 <tr>
                   <th
                     v-if="showDetailRowIcon"
@@ -38,7 +44,7 @@
                         :checked="isAllChecked"
                         :disabled="isAllUncheckable"
                         :class="checkboxStyle"
-                      />
+                      >
                     </div>
                   </th>
                   <th
@@ -84,14 +90,14 @@
                               :opacity="!isAsc ? '0.5' : '1'"
                               fill="currentColor"
                               d="M8.71 12.29L11.3 9.7a.996.996 0 0 1 1.41 0l2.59 2.59c.63.63.18 1.71-.71 1.71H9.41c-.89 0-1.33-1.08-.7-1.71z"
-                            ></path>
+                            />
                           </g>
                           <g transform="translate(0 3)">
                             <path
                               :opacity="isAsc ? '0.5' : '1'"
                               fill="currentColor"
                               d="m8.71 11.71l2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71z"
-                            ></path>
+                            />
                           </g>
                         </svg>
                       </div>
@@ -109,7 +115,7 @@
                       :checked="isAllChecked"
                       :disabled="isAllUncheckable"
                       :class="checkboxStyle"
-                    />
+                    >
                   </th>
                 </tr>
               </thead>
@@ -156,7 +162,7 @@
                           :disabled="!isRowCheckable(row)"
                           :checked="isRowChecked(row)"
                           :class="checkboxStyle"
-                        />
+                        >
                       </div>
                     </td>
 
@@ -197,7 +203,7 @@
                         :disabled="!isRowCheckable(row)"
                         :checked="isRowChecked(row)"
                         :class="checkboxStyle"
-                      />
+                      >
                     </td>
                   </tr>
 
@@ -211,7 +217,11 @@
                         class="td"
                         :class="borderBottomDetailClasses(index)"
                       >
-                        <slot name="detail" :row="row" :index="index" />
+                        <slot
+                          name="detail"
+                          :row="row"
+                          :index="index"
+                        />
                       </td>
                     </tr>
                   </transition>

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"
@@ -55,7 +55,7 @@
             @click="open"
             @input="onTextInput"
             @keydown="onTextKeydown"
-          />
+          >
         </div>
       </div>
     </div>
@@ -76,19 +76,28 @@
           :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')"
         >
           <template #empty="emptyProps">
-            <slot name="empty" v-bind="{ ...emptyProps, ...slotProps }" />
+            <slot
+              name="empty"
+              v-bind="{ ...emptyProps, ...slotProps }"
+            />
           </template>
           <template #option="optionProps">
-            <slot name="option" v-bind="{ ...optionProps, ...slotProps }" />
+            <slot
+              name="option"
+              v-bind="{ ...optionProps, ...slotProps }"
+            />
           </template>
           <template #footer="footerProps">
-            <slot name="footer" v-bind="{ ...footerProps, ...slotProps }" />
+            <slot
+              name="footer"
+              v-bind="{ ...footerProps, ...slotProps }"
+            />
           </template>
         </BaseAutocompleteDrawer>
       </div>
@@ -105,6 +114,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 +185,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/BaseTagAutocompleteFetch.vue

@@ -18,19 +18,33 @@
     @update:model-value="$emit('update:modelValue', $event)"
   >
     <template #items="itemProps">
-      <slot name="items" v-bind="itemProps" />
+      <slot
+        name="items"
+        v-bind="itemProps"
+      />
     </template>
 
     <template #option="optionProps">
-      <slot name="option" v-bind="optionProps" />
+      <slot
+        name="option"
+        v-bind="optionProps"
+      />
     </template>
 
     <template #footer="footerProps">
-      <slot name="footer" v-bind="footerProps" :keywords="keywords"> </slot>
+      <slot
+        name="footer"
+        v-bind="footerProps"
+        :keywords="keywords"
+      />
     </template>
 
     <template #empty="emptyProps">
-      <slot name="empty" v-bind="emptyProps" :first-search="firstSearch">
+      <slot
+        name="empty"
+        v-bind="emptyProps"
+        :first-search="firstSearch"
+      >
         <div
           v-if="firstSearch"
           class="flex h-[80px] items-center justify-center px-3 text-center text-base leading-tight text-slate-600"

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',