sprintify-ui 0.1.18 → 0.2.1

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

@@ -1,3 +1,4 @@
+import { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         default: string;
@@ -39,6 +40,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    twTextarea: {
+        default: string;
+        type: PropType<string | string[]>;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "submit" | "update:modelValue" | "focus")[], "input" | "submit" | "update:modelValue" | "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: string;
@@ -80,19 +85,24 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    twTextarea: {
+        default: string;
+        type: PropType<string | string[]>;
+    };
 }>> & {
     onFocus?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
     onSubmit?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    required: boolean;
-    modelValue: string;
     placeholder: string;
     disabled: boolean;
+    required: boolean;
+    modelValue: string;
     hasError: boolean;
     maxHeight: number;
     rows: number;
     submitOnEnter: boolean;
-}>;
+    twTextarea: string | string[];
+}, {}>;
 export default _default;

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

@@ -10,5 +10,5 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
         type: PropType<TimelineItem[]>;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

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

@@ -10,5 +10,5 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
         type: PropType<TimelineItem>;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/dist/types/src/components/SlotComponent.d.ts

@@ -39,5 +39,5 @@ declare const _default: DefineComponent<{
 }>>, {
     name: string;
     tag: string;
-}>;
+}, {}>;
 export default _default;

package/dist/types/src/svg/BaseEmptyState.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/dist/types/src/svg/BaseSpinnerLarge.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/dist/types/src/svg/BaseSpinnerSmall.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.1.18",
+  "version": "0.2.1",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -8,6 +8,7 @@
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",
     "storybook": "start-storybook -p 6006",
+    "eslint:fix": "eslint --ext .js,.vue,.ts src --fix",
     "build-storybook": "build-storybook",
     "prepack": "npm run build",
     "prepare": "husky install && relative-deps",
@@ -17,7 +18,6 @@
   "peerDependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
     "@vueup/vue-quill": "^1.0.0",
     "@vueuse/core": "^10.0.0",
@@ -33,13 +33,14 @@
     "pinia": "^2.0.0",
     "qs": "^6.0.0",
     "sortablejs": "^1.15.0",
-    "tailwindcss": "^3.0.0",
+    "tailwindcss": "^3.3.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0"
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.12",
-    "color2k": "^2.0.2"
+    "color2k": "^2.0.2",
+    "tailwind-merge": "^1.12.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -55,7 +56,6 @@
     "@storybook/vue3": "^6.5.16",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.9",
     "@types/croppie": "^2.6.1",
     "@types/google.maps": "^3.51.1",
@@ -77,7 +77,6 @@
     "croppie": "^2.6.5",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.33.0",
-    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-storybook": "^0.6.10",
     "eslint-plugin-vue": "^9.9.0",
@@ -94,8 +93,6 @@
     "pinia": "^2.0.30",
     "postcss": "^8.4.21",
     "postcss-import": "^15.1.0",
-    "prettier": "^2.8.4",
-    "prettier-plugin-tailwindcss": "^0.2.2",
     "qs": "^6.11.0",
     "relative-deps": "^1.0.7",
     "rimraf": "^3.0.2",

package/src/assets/main.css

@@ -1,7 +1,7 @@
-@import 'microtip/microtip.css';
-@import './form.css';
+@import "microtip/microtip.css";
+@import "./form.css";
 
-[aria-label][role~='tooltip']::after {
+[aria-label][role~="tooltip"]::after {
   white-space: pre-line;
 }
 

package/src/components/BaseActionItem.vue

@@ -12,7 +12,7 @@
       :aria-current="isActive ? 'page' : undefined"
       @click.prevent="onClick(navigate)"
     >
-      <slot :active="isActive"> </slot>
+      <slot :active="isActive" />
     </a>
   </RouterLink>
   <button
@@ -22,10 +22,15 @@
     :class="props.class"
     @click="onClick(action)"
   >
-    <slot :active="false"> </slot>
+    <slot :active="false" />
   </button>
-  <a v-else-if="href" :href="href" :class="props.class" @click="onClick()">
-    <slot :active="false"> </slot>
+  <a
+    v-else-if="href"
+    :href="href"
+    :class="props.class"
+    @click="onClick()"
+  >
+    <slot :active="false" />
   </a>
 </template>
 

package/src/components/BaseActionItemButton.vue

@@ -11,7 +11,7 @@
       :icon="action.icon"
       :class="iconClasses"
       class="mr-2"
-    ></BaseIcon>
+    />
     <span :class="[action.icon ? 'pr-1' : '']">{{ action.label }}</span>
   </BaseActionItem>
 </template>

package/src/components/BaseAddressForm.vue

@@ -18,7 +18,10 @@
     />
   </BaseField>
 
-  <BaseField :name="`${namePrefix}address_2`" class="mb-4">
+  <BaseField
+    :name="`${namePrefix}address_2`"
+    class="mb-4"
+  >
     <BaseInput
       :model-value="normalizedModelValue.address_2 ?? ''"
       :placeholder="t('sui.address_2_description')"
@@ -69,8 +72,7 @@
         :disabled="props.restrictCountry"
         value-key="id"
         @update:model-value="update('country', $event)"
-      >
-      </BaseSelect>
+      />
     </BaseField>
     <BaseField
       v-if="!props.hideRegion"
@@ -87,8 +89,7 @@
         label-key="name"
         value-key="id"
         @update:model-value="update('region', $event)"
-      >
-      </BaseSelect>
+      />
     </BaseField>
   </div>
 </template>

package/src/components/BaseAlert.vue

@@ -3,7 +3,10 @@
     class="flex w-full items-start rounded-md p-4"
     :class="[backgroundClass, borderClass]"
   >
-    <div v-if="showIcon" class="mr-3">
+    <div
+      v-if="showIcon"
+      class="mr-3"
+    >
       <BaseIcon
         v-if="color == 'warning'"
         icon="heroicons-solid:exclamation"
@@ -35,7 +38,10 @@
         {{ title }}
       </h3>
 
-      <div v-if="$slots.default" :class="[textClass, 'text-sm leading-tight']">
+      <div
+        v-if="$slots.default"
+        :class="[textClass, 'text-sm leading-tight']"
+      >
         <slot />
       </div>
     </div>

package/src/components/BaseAppNotifications.vue

@@ -12,7 +12,10 @@
           leave-from-class="sm:translate-x-0 translate-y-0 opacity-100"
           leave-to-class="sm:translate-y-0 sm:translate-x-4 translate-y-2 opacity-0"
         >
-          <div v-for="notification in notifications" :key="notification.id">
+          <div
+            v-for="notification in notifications"
+            :key="notification.id"
+          >
             <div
               class="mx-auto mt-4 flex w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-xl"
             >

package/src/components/BaseAutocomplete.vue

@@ -36,11 +36,11 @@
               inputSizeClass,
               !visibleFocus
                 ? [
-                    'focus:ring-0',
-                    hasErrorInternal
-                      ? 'focus:border-red-600'
-                      : 'focus:border-slate-300',
-                  ]
+                  'focus:ring-0',
+                  hasErrorInternal
+                    ? 'focus:border-red-600'
+                    : 'focus:border-slate-300',
+                ]
                 : '',
             ]"
             autocomplete="off"
@@ -48,9 +48,9 @@
             @click="open"
             @input="onTextInput"
             @keydown="onTextKeydown"
-          />
+          >
           <div
-            class="pointer-events-none absolute top-0 left-0 flex h-full items-center justify-center"
+            class="pointer-events-none absolute left-0 top-0 flex h-full items-center justify-center"
             :class="[iconWrapClass]"
           >
             <BaseIcon
@@ -64,7 +64,7 @@
 
       <div
         v-if="normalizedModelValue && !disabled && showModelValue"
-        class="absolute top-0 right-0 flex h-full items-center p-1"
+        class="absolute right-0 top-0 flex h-full items-center p-1"
       >
         <button
           type="button"
@@ -97,19 +97,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>

package/src/components/BaseAutocompleteDrawer.vue

@@ -6,7 +6,10 @@
       class="max-h-[214px] w-full overflow-y-auto"
     >
       <!-- Slot empty -->
-      <slot v-if="options.length == 0" name="empty">
+      <slot
+        v-if="options.length == 0"
+        name="empty"
+      >
         <div
           class="flex items-center justify-center px-5 py-10 text-center text-slate-600"
         >
@@ -15,7 +18,10 @@
       </slot>
 
       <!-- Option list -->
-      <ul v-else :class="drawerClass">
+      <ul
+        v-else
+        :class="twDrawer"
+      >
         <li
           v-for="(option, index) in options"
           :key="option.value ? option.value : 'null'"
@@ -48,7 +54,7 @@
                     v-if="isSelected(option)"
                     icon="heroicons:check-20-solid"
                     :class="optionIconClass"
-                  ></BaseIcon>
+                  />
                 </div>
               </div>
             </slot>
@@ -65,16 +71,22 @@
       >
         <div
           class="absolute inset-0 h-full w-full bg-gradient-to-b from-transparent to-white"
-        ></div>
+        />
         <BaseSpinnerSmall
           class="mx-auto h-7 w-7 text-slate-300"
-        ></BaseSpinnerSmall>
+        />
       </div>
     </div>
 
     <div ref="footer">
-      <div v-if="$slots.footer" class="bg-white">
-        <slot :options="options" name="footer" />
+      <div
+        v-if="$slots.footer"
+        class="bg-white"
+      >
+        <slot
+          :options="options"
+          name="footer"
+        />
       </div>
     </div>
 
@@ -83,12 +95,18 @@
       class="absolute inset-0 h-full w-full space-y-1 bg-white p-2"
     >
       <div class="space-y-1">
-        <BaseSkeleton class="h-7 w-full" delay="0ms"></BaseSkeleton>
-        <BaseSkeleton class="h-7 w-full opacity-70" delay="50ms"></BaseSkeleton>
+        <BaseSkeleton
+          class="h-7 w-full"
+          delay="0ms"
+        />
+        <BaseSkeleton
+          class="h-7 w-full opacity-70"
+          delay="50ms"
+        />
         <BaseSkeleton
           class="h-7 w-full opacity-30"
           delay="100ms"
-        ></BaseSkeleton>
+        />
       </div>
     </div>
   </div>
@@ -133,7 +151,7 @@ const props = defineProps({
     type: String as PropType<'xs' | 'sm' | 'base'>,
     default: 'base',
   },
-  drawerClass: {
+  twDrawer: {
     type: String,
     default: '',
   },

package/src/components/BaseAutocompleteFetch.vue

@@ -28,15 +28,26 @@
     @update:model-value="$emit('update:modelValue', $event)"
   >
     <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
+        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/BaseAvatar.vue

@@ -8,7 +8,7 @@
       :src="user.avatar_url"
       :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"
       class="shrink-0 overflow-hidden rounded-full object-cover object-center"
-    />
+    >
     <div
       v-if="showDetails"
       class="max-w-[120px] grow leading-tight"

package/src/components/BaseBadge.vue

@@ -9,8 +9,7 @@
       :icon="icon"
       class="shrink-0"
       :class="iconSizeClasses"
-    >
-    </BaseIcon>
+    />
     <slot />
   </span>
 </template>

package/src/components/BaseBelongsTo.vue

@@ -21,13 +21,22 @@
     @update:model-value="onUpdate"
   >
     <template #option="optionProps">
-      <slot name="option" v-bind="optionProps"></slot>
+      <slot
+        name="option"
+        v-bind="optionProps"
+      />
     </template>
     <template #empty="emptyProps">
-      <slot name="empty" v-bind="emptyProps"></slot>
+      <slot
+        name="empty"
+        v-bind="emptyProps"
+      />
     </template>
     <template #footer="footerProps">
-      <slot name="footer" v-bind="footerProps"></slot>
+      <slot
+        name="footer"
+        v-bind="footerProps"
+      />
     </template>
   </BaseAutocompleteFetch>
 </template>

package/src/components/BaseBreadcrumbs.vue

@@ -5,8 +5,14 @@
       class="hidden sm:flex"
       aria-label="Breadcrumb"
     >
-      <ol role="list" class="flex items-center space-x-3">
-        <li v-for="(breadcrumb, index) in breadcrumbs" :key="index">
+      <ol
+        role="list"
+        class="flex items-center space-x-3"
+      >
+        <li
+          v-for="(breadcrumb, index) in breadcrumbs"
+          :key="index"
+        >
           <div class="flex items-center">
             <svg
               v-if="index > 0"

package/src/components/BaseButton.vue

@@ -1,5 +1,9 @@
 <template>
-  <component :is="as" ref="button" class="btn">
+  <component
+    :is="as"
+    ref="button"
+    class="btn"
+  >
     <div
       class="flex items-center justify-center"
       :class="{ 'opacity-0': loading }"
@@ -11,7 +15,10 @@
       v-if="loading"
       class="absolute inset-0 flex h-full w-full items-center justify-center"
     >
-      <svg class="h-4 w-4 animate-spin" viewBox="0 0 24 24">
+      <svg
+        class="h-4 w-4 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"

package/src/components/BaseButtonGroup.stories.js

@@ -65,12 +65,13 @@ export const SlotOption = (args) => ({
     v-bind="args"
     v-model="value"
     :options="options"
-    button-class="btn btn-xs"
-    button-selected-class="btn-black"
+    tw-button="btn btn-xl"
+    tw-button-selected="btn-black"
+    tw-button-unselected="btn-secondary-outline"
   >
     <template #option="{ option }">
-      <div class="flex items-center space-x-1 font-semibold">
-        <div class="w-3 h-3 rounded" :style="{ backgroundColor: option.value }"></div>
+      <div class="flex items-center space-x-2 font-semibold">
+        <div class="w-3 h-3 rounded border border-white" :style="{ backgroundColor: option.value }"></div>
         <div>{{ option.label }}</div>
       </div>
     </template>

package/src/components/BaseButtonGroup.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="flex flex-wrap" :style="{ margin: '-' + spacing }">
+  <div
+    class="flex flex-wrap"
+    :style="{ margin: '-' + spacing }"
+  >
     <div
       v-for="option in normalizedOptions"
       :key="option.value ? option.value : 'null'"
@@ -9,8 +12,8 @@
         :type="buttonType"
         :disabled="disabled"
         :class="[
-          buttonClass,
-          isSelected(option) ? buttonSelectedClass : buttonUnselectedClass,
+          twButton,
+          isSelected(option) ? twButtonSelected : twButtonUnselected,
         ]"
         @click="onSelect(option)"
       >
@@ -53,15 +56,15 @@ const props = defineProps({
     default: 'button',
     type: String as PropType<'button' | 'submit'>,
   },
-  buttonClass: {
+  twButton: {
     default: 'btn btn-sm',
     type: String,
   },
-  buttonSelectedClass: {
+  twButtonSelected: {
     default: 'btn-primary',
     type: String,
   },
-  buttonUnselectedClass: {
+  twButtonUnselected: {
     default: '',
     type: String,
   },

package/src/components/BaseCharacterCounter.vue

@@ -8,7 +8,10 @@
     >
       {{ length }}/{{ max }}
     </div>
-    <div v-else-if="min && length < min" class="text-red-600">
+    <div
+      v-else-if="min && length < min"
+      class="text-red-600"
+    >
       {{ t('sui.min_x_characters', { x: min }) }} ({{ length }}/{{ min }})
     </div>
   </div>

package/src/components/BaseClickOutside.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="root">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 

package/src/components/BaseClipboard.vue

@@ -6,7 +6,7 @@
     @mouseenter="showTooltip()"
     @mouseleave="hideTooltip()"
   >
-    <slot></slot>
+    <slot />
     <transition
       enter-active-class="transition duration-200 ease-out"
       enter-from-class="transform scale-90 opacity-0"
@@ -22,7 +22,10 @@
         <div
           class="ml-2 whitespace-nowrap rounded bg-slate-900 bg-opacity-80 px-3 py-2 text-xs leading-tight text-white backdrop-blur"
         >
-          <div v-if="showCopied" class="flex items-center">
+          <div
+            v-if="showCopied"
+            class="flex items-center"
+          >
             <BaseIcon
               class="mr-1 text-green-500"
               icon="heroicons:check-circle-solid"