sprintify-ui 0.1.18 → 0.2.0

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.0",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -17,7 +17,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 +32,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 +55,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",

package/src/components/BaseAutocomplete.vue

@@ -50,7 +50,7 @@
             @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,7 +97,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')"

package/src/components/BaseAutocompleteDrawer.vue

@@ -15,7 +15,7 @@
       </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'"
@@ -133,7 +133,7 @@ const props = defineProps({
     type: String as PropType<'xs' | 'sm' | 'base'>,
     default: 'base',
   },
-  drawerClass: {
+  twDrawer: {
     type: String,
     default: '',
   },

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

@@ -9,8 +9,8 @@
         :type="buttonType"
         :disabled="disabled"
         :class="[
-          buttonClass,
-          isSelected(option) ? buttonSelectedClass : buttonUnselectedClass,
+          twButton,
+          isSelected(option) ? twButtonSelected : twButtonUnselected,
         ]"
         @click="onSelect(option)"
       >
@@ -53,15 +53,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/BaseColor.vue

@@ -9,9 +9,9 @@
       :options="colorOptions"
       :multiple="multiple"
       :button-type="buttonType"
-      :button-class="''"
-      :button-selected-class="''"
-      :button-unselected-class="''"
+      tw-button=""
+      tw-button-selected=""
+      tw-button-unselected=""
       @update:model-value="(value) => transformModelValue(value)"
     >
       <template #option="option">

package/src/components/BaseDataIterator.vue

@@ -68,7 +68,7 @@
           <!-- Menu -->
           <BaseMenu
             v-if="actions && actions.length"
-            menu-class="w-52"
+            tw-menu="w-52"
             :items="actions"
           >
             <template #button="{ open }">

package/src/components/BaseDataTable.stories.js

@@ -52,7 +52,7 @@ const template = `
       <div class="font-medium text-slate-900 leading-tight truncate">
         {{ row.title }}
       </div>
-      <p v-if="false" class="text-xs leading-tight mt-1 text-slate-500 line-clamp-2">
+      <p class="text-xs leading-tight mt-1 text-slate-500 line-clamp-2">
         {{ row.subtitle }}
       </p>
     </div>

package/src/components/BaseDataTable.vue

@@ -47,7 +47,7 @@
             </div>
             <BaseMenu
               v-if="checkableActions?.length"
-              menu-class="w-52"
+              tw-menu="w-52"
               :items="checkableActions"
             >
               <template #button="{ open }">

package/src/components/BaseDropdownAutocomplete.vue

@@ -31,7 +31,7 @@
           <template #option="optionProps">
             <div
               :class="[optionProps.active ? 'bg-slate-100' : 'bg-white']"
-              class="mb-px flex items-center rounded py-1 px-1"
+              class="mb-px flex items-center rounded px-1 py-1"
             >
               <div class="flex grow items-center">
                 <slot
@@ -126,7 +126,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:model-value', 'close']);
 
-const componentName = computed(() => {
+const componentName = computed<any>(() => {
   if (props.multiple) {
     if (props.url) {
       return BaseTagAutocompleteFetch;
@@ -141,10 +141,12 @@ const componentName = computed(() => {
   if (props.url) {
     return BaseAutocompleteFetch;
   }
+
   if (props.options) {
     return BaseAutocomplete;
   }
-  console.error('BaseDropdownAutocomplete: options or url is required');
+
+  throw new Error('BaseDropdownAutocomplete: options or url is required');
 });
 
 const autocomplete = ref<any>(null);

package/src/components/BaseFilePicker.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    :class="buttonClass"
+    :class="twButton"
     :disabled="disabled"
     @drop.prevent="
       dragging = false;
@@ -32,14 +32,14 @@ import { maxSize, validExtension } from '@/utils/fileValidations';
 const props = withDefaults(
   defineProps<{
     disabled?: boolean;
-    buttonClass?: string;
+    twButton?: string;
     maxSize?: number;
     accept?: string;
     acceptedExtensions?: string[];
   }>(),
   {
     disabled: false,
-    buttonClass: '',
+    twButton: '',
     maxSize: 1024 * 1024 * 20, // 20 MB,
     accept: undefined,
     acceptedExtensions: undefined,

package/src/components/BaseFilePickerCrop.stories.js

@@ -11,7 +11,7 @@ export default {
   title: 'Form/BaseFilePickerCrop',
   component: BaseFilePickerCrop,
   args: {
-    buttonClass: 'w-full',
+    twButton: 'w-full',
     acceptedExtensions: ['jpg', 'jpeg', 'png'],
   },
 };
@@ -68,8 +68,8 @@ const Template = (args) => ({
         <BaseLoadingCover
           :model-value="args.loading || uploading || selecting"
           :delay="0"
-          icon-class="text-primary-600 w-6 h-6"
-          backdrop-class="bg-white opacity-60"
+          tw-icon="text-primary-600 w-6 h-6"
+          tw-backdrop="bg-white opacity-60"
         />
       </template>
     </BaseFilePickerCrop>

package/src/components/BaseFilePickerCrop.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseFilePicker
-    :button-class="buttonClass"
+    :tw-button="twButton"
     :disabled="disabled"
     accept="image/*"
     :max-size="maxSize"
@@ -31,14 +31,14 @@ import { isObject, reject } from 'lodash';
 const props = withDefaults(
   defineProps<{
     disabled?: boolean;
-    buttonClass?: string;
+    twButton?: string;
     maxSize?: number;
     acceptedExtensions?: string[];
     cropper: BaseCropperConfig | null;
   }>(),
   {
     disabled: false,
-    buttonClass: '',
+    twButton: '',
     maxSize: 1024 * 1024 * 20, // 20 MB
     acceptedExtensions: undefined,
   }

package/src/components/BaseFileUploader.stories.js

@@ -7,7 +7,7 @@ export default {
   title: 'Form/BaseFileUploader',
   component: BaseFileUploader,
   args: {
-    buttonClass: 'w-full',
+    twButton: 'w-full',
     acceptedExtensions: ['jpg', 'png'],
     maxSize: 1024 * 200, // 200kb
     url: 'https://dummyjson.com/posts/add',
@@ -53,8 +53,8 @@ const Template = (args) => ({
         <BaseLoadingCover
           :model-value="args.loading || uploading || selecting"
           :delay="0"
-          icon-class="text-red-600 w-6 h-6"
-          backdrop-class="bg-white opacity-60"
+          tw-icon="text-red-600 w-6 h-6"
+          tw-backdrop="bg-white opacity-60"
         />
       </template>
     </BaseFileUploader>

package/src/components/BaseFileUploader.vue

@@ -20,7 +20,7 @@
         >
           <BaseLoadingCover
             :delay="0"
-            icon-class="w-6 h-6 text-primary-600"
+            tw-icon="w-6 h-6 text-primary-600"
             :model-value="loading || uploading || slotProps.selecting"
           />
         </slot>
@@ -49,7 +49,7 @@ const props = withDefaults(
     disabled?: boolean;
     loading?: boolean;
     beforeUpload?: () => boolean;
-    buttonClass?: string;
+    twButton?: string;
     maxSize?: number;
     accept?: string;
     acceptedExtensions?: string[];
@@ -63,7 +63,7 @@ const props = withDefaults(
     beforeUpload: (): boolean => {
       return true;
     },
-    buttonClass: '',
+    twButton: '',
     maxSize: undefined,
     accept: undefined,
     acceptedExtensions: undefined,
@@ -88,7 +88,7 @@ const componentInternal = computed(() => {
 const pickerProps = computed(() => {
   const pickerProps = {
     disabled: props.disabled || props.loading || uploading.value,
-    buttonClass: props.buttonClass,
+    twButton: props.twButton,
     maxSize: props.maxSize,
     accept: props.component == 'BaseFilePickerCrop' ? undefined : props.accept,
     acceptedExtensions: props.acceptedExtensions,

package/src/components/BaseForm.vue

@@ -20,8 +20,8 @@
           class="absolute inset-0 flex h-full w-full items-center justify-center"
         >
           <div
-            class="absolute inset-0 h-full w-full opacity-80"
-            :class="loadingMaskClass"
+            class="absolute inset-0 h-full w-full"
+            :class="twMerge('bg-white opacity-80', twLoadingMask)"
           />
           <svg
             class="relative h-6 w-6 animate-spin text-blue-600"
@@ -46,6 +46,7 @@ import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
 import { config, useNotificationsStore } from '@/index';
 import { get, isArray } from 'lodash';
 import { t } from '@/i18n';
+import { twMerge } from 'tailwind-merge';
 
 const notifications = useNotificationsStore();
 
@@ -94,8 +95,8 @@ const props = defineProps({
     },
     type: Function as PropType<(error: AxiosError) => void>,
   },
-  loadingMaskClass: {
-    default: 'bg-white',
+  twLoadingMask: {
+    default: '',
     type: String,
   },
   showNotificationOnError: {

package/src/components/BaseLayoutNotificationDropdown.vue

@@ -2,7 +2,7 @@
   <BaseMenu
     class="inline-block"
     :position="mobile ? 'custom' : 'bottom-left'"
-    :menu-class="['sm:w-[320px] w-[280px]', mobile ? 'right-4' : '']"
+    :tw-menu="['sm:w-[320px] w-[280px]', mobile ? 'right-4' : '']"
   >
     <template #button="{ open }">
       <div

package/src/components/BaseLayoutStackedConfigurable.vue

@@ -34,7 +34,7 @@
           ></BaseLayoutNotificationDropdown>
 
           <!-- Profile dropdown -->
-          <BaseMenu menu-class="w-52" class="hidden md:block" :items="userMenu">
+          <BaseMenu tw-menu="w-52" class="hidden md:block" :items="userMenu">
             <template #button="{ open }">
               <div class="flex rounded-full" :class="[open ? '' : '']">
                 <BaseAvatar :class="dark ? 'text-white' : ''" :user="user" />

package/src/components/BaseLoadingCover.stories.js

@@ -46,10 +46,10 @@ LargeSpinner.args = {
 
 export const SpinnerCustomClass = Template.bind({});
 SpinnerCustomClass.args = {
-  iconClass: 'text-red-500 w-10 h-10',
+  twIcon: 'text-red-500 w-10 h-10',
 };
 
 export const BackdropCustomClass = Template.bind({});
 BackdropCustomClass.args = {
-  backdropClass: 'bg-slate-100 opacity-50',
+  twBackdrop: 'bg-slate-100 opacity-50',
 };

package/src/components/BaseLoadingCover.vue

@@ -11,16 +11,23 @@
       v-if="showSpinner"
       class="absolute inset-0 flex h-full w-full items-center justify-center"
     >
-      <div class="absolute h-full w-full" :class="backdropClass" />
+      <div :class="twMerge('absolute h-full w-full bg-white', twBackdrop)" />
 
-      <BaseSpinnerSmall v-if="size == 'sm'" :class="iconClass" />
-      <BaseSpinnerLarge v-else-if="size == 'lg'" :class="iconClass" />
+      <BaseSpinnerSmall
+        v-if="size == 'sm'"
+        :class="twMerge('h-10 w-10 text-blue-500', twIcon)"
+      />
+      <BaseSpinnerLarge
+        v-else-if="size == 'lg'"
+        :class="twMerge('h-10 w-10 text-blue-500', twIcon)"
+      />
     </div>
   </Transition>
 </template>
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
+import { twMerge } from 'tailwind-merge';
 import BaseSpinnerSmall from '../svg/BaseSpinnerSmall.vue';
 import BaseSpinnerLarge from '../svg/BaseSpinnerLarge.vue';
 
@@ -35,15 +42,15 @@ const props = defineProps({
   /**
    * Classes added to the backdrop
    */
-  backdropClass: {
-    default: 'bg-white',
+  twBackdrop: {
+    default: '',
     type: String,
   },
   /**
    * Classes added to the spinner icon
    */
-  iconClass: {
-    default: 'text-blue-500 w-10 h-10',
+  twIcon: {
+    default: '',
     type: String,
   },
   /**

package/src/components/BaseMediaLibrary.vue

@@ -5,7 +5,7 @@
       :max-size="maxSize"
       :disabled="disabled"
       class="w-full"
-      button-class="w-full"
+      tw-button="w-full"
       :accept="accept"
       :accepted-extensions="acceptedExtensions"
       :url="uploadUrl"

package/src/components/BaseMenu.vue

@@ -6,7 +6,7 @@
     :class="[position == 'custom' ? 'static' : 'relative']"
   >
     <div>
-      <MenuButton :class="buttonClass">
+      <MenuButton :class="twButton">
         <slot name="button" :open="open" />
       </MenuButton>
     </div>
@@ -20,12 +20,13 @@
       leave-to-class="transform scale-95 opacity-0"
     >
       <MenuItems
-        :class="[menuClass, menuPositionClass]"
+        :style="menuPositionStyles"
+        :class="twMerge('w-48', twMenu)"
         class="absolute z-menu mt-2 rounded-md bg-white p-1 shadow-lg outline-none ring-1 ring-black ring-opacity-10 focus:outline-none"
       >
         <slot name="items" :items="items">
           <template v-for="item in items" :key="item.label + 'link'">
-            <div v-if="item.line" class="my-1 -mx-1 flex h-px bg-slate-200" />
+            <div v-if="item.line" class="-mx-1 my-1 flex h-px bg-slate-200" />
 
             <MenuItem v-else-if="item.to" v-slot="{ active, close }">
               <RouterLink :to="item.to" @mouseup="close">
@@ -91,16 +92,13 @@ import { PropType } from 'vue';
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
 import { MenuItemInterface } from '@/types';
 import BaseMenuItem from './BaseMenuItem.vue';
+import { twMerge } from 'tailwind-merge';
 
 const props = defineProps({
   items: {
     default: undefined,
     type: Array as PropType<MenuItemInterface[]>,
   },
-  menuClass: {
-    default: 'w-48',
-    type: [String, Array, Object],
-  },
   position: {
     default: 'bottom-left',
     type: String as PropType<'bottom-left' | 'bottom-right' | 'custom'>,
@@ -109,21 +107,31 @@ const props = defineProps({
     default: 'sm',
     type: String as PropType<'xs' | 'sm' | 'md'>,
   },
-  buttonClass: {
+  twMenu: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  twButton: {
     default: 'flex',
     type: [String, Array, Object],
   },
 });
 
-const menuPositionClass = computed(() => {
+const menuPositionStyles = computed(() => {
   if (props.position == 'custom') {
-    return '';
+    return {};
   }
   if (props.position == 'bottom-left') {
-    return 'origin-top-right right-0';
+    return {
+      origin: 'top-right',
+      right: '0',
+    };
   }
   if (props.position == 'bottom-right') {
-    return 'origin-top-left left-0';
+    return {
+      origin: 'top-left',
+      left: '0',
+    };
   }
 });
 </script>