sprintify-ui 0.6.34 → 0.6.36

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

@@ -1,3 +1,4 @@
+import { Size } from '@/utils/sizes';
 declare const _default: import("vue").DefineComponent<{
     required: {
         type: import("vue").PropType<boolean>;
@@ -7,6 +8,10 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: undefined;
     };
+    size: {
+        type: import("vue").PropType<"xs" | "sm" | "md">;
+        default: undefined;
+    };
     mode: {
         type: import("vue").PropType<"time" | "multiple" | "single" | "range">;
         default: string;
@@ -62,6 +67,10 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: undefined;
     };
+    size: {
+        type: import("vue").PropType<"xs" | "sm" | "md">;
+        default: undefined;
+    };
     mode: {
         type: import("vue").PropType<"time" | "multiple" | "single" | "range">;
         default: string;
@@ -111,6 +120,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     required: boolean;
     name: string;
+    size: Size;
     mode: 'single' | 'multiple' | 'range' | 'time';
     inline: boolean;
     modelValue: string | null | string[];

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

@@ -8,6 +8,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    size: {
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
+    };
     disabled: {
         default: boolean;
         type: BooleanConstructor;
@@ -43,6 +47,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    size: {
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
+    };
     disabled: {
         default: boolean;
         type: BooleanConstructor;
@@ -72,6 +80,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     required: boolean;
     name: string;
+    size: "xs" | "sm" | "md";
     disabled: boolean;
     hasError: boolean;
     minYear: number;

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

@@ -9,6 +9,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"" | "snow" | "bubble">;
         default: string;
     };
+    size: {
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
+    };
     toolbar: {
         type: PropType<string | Record<string, any> | unknown[] | undefined>;
         default(): string[];
@@ -48,6 +52,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"" | "snow" | "bubble">;
         default: string;
     };
+    size: {
+        default: undefined;
+        type: PropType<"xs" | "sm" | "md">;
+    };
     toolbar: {
         type: PropType<string | Record<string, any> | unknown[] | undefined>;
         default(): string[];
@@ -81,6 +89,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     required: boolean;
     name: string;
+    size: "xs" | "sm" | "md";
     modelValue: string | Delta | null | undefined;
     placeholder: string;
     disabled: boolean;

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

@@ -75,7 +75,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: NumberConstructor;
     };
     size: {
-        type: PropType<"sm" | "md">;
+        type: PropType<"xs" | "sm" | "md">;
         default: string;
     };
 }, {
@@ -185,7 +185,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: NumberConstructor;
     };
     size: {
-        type: PropType<"sm" | "md">;
+        type: PropType<"xs" | "sm" | "md">;
         default: string;
     };
 }>> & {
@@ -199,7 +199,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "onCell-click"?: ((...args: any[]) => any) | undefined;
 }, {
     data: Row[];
-    size: "sm" | "md";
+    size: "xs" | "sm" | "md";
     loading: boolean;
     sortField: string;
     sortDirection: string;

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

@@ -63,7 +63,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
     };
     size: {
-        default: string;
+        default: undefined;
         type: PropType<"xs" | "sm" | "md">;
     };
     dropdownShow: {
@@ -78,6 +78,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: PropType<string | string[]>;
     };
+    visibleFocus: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }, {
     focus: typeof focus;
     blur: typeof blur;
@@ -148,7 +152,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
     };
     size: {
-        default: string;
+        default: undefined;
         type: PropType<"xs" | "sm" | "md">;
     };
     dropdownShow: {
@@ -163,6 +167,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: PropType<string | string[]>;
     };
+    visibleFocus: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onScrollBottom?: ((...args: any[]) => any) | undefined;
@@ -179,6 +187,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     disabled: boolean;
     hasError: boolean;
     max: number;
+    visibleFocus: boolean;
     loading: boolean;
     loadingBottom: boolean;
     dropdownShow: "always" | "focus";

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

@@ -11,7 +11,7 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
     };
     name: {
-        required: true;
+        default: undefined;
         type: StringConstructor;
     };
     required: {
@@ -68,7 +68,7 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
     };
     name: {
-        required: true;
+        default: undefined;
         type: StringConstructor;
     };
     required: {
@@ -114,6 +114,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
+    name: string;
     size: "xs" | "sm" | "md";
     modelValue: string | null;
     placeholder: string;

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

@@ -1,4 +1,4 @@
-import { TimelineItem } from '../types/TimelineItem';
+import { TimelineItem } from '../types';
 import { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     items: {

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

@@ -1,4 +1,4 @@
-import { TimelineItem } from '../types/TimelineItem';
+import { TimelineItem } from '../types';
 import { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     item: {

package/dist/types/src/stories/PageInputSizes.vue.d.ts

@@ -0,0 +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<{}>>, {}, {}>;
+export default _default;

package/dist/types/src/types/TimelineItem.d.ts

@@ -1,9 +0,0 @@
-export interface TimelineItem {
-    title: string;
-    icon: string;
-    description?: null | string;
-    date?: string | null;
-    color?: string | null;
-    onEdit?: () => void | Promise<void>;
-    onDelete?: () => void | Promise<void>;
-}

package/dist/types/src/types/index.d.ts

@@ -209,3 +209,12 @@ export interface BaseCropperConfig {
     presetOptions?: Record<string, any>;
     saveOptions?: ResultOptions;
 }
+export interface TimelineItem {
+    title: string;
+    icon: string;
+    description?: null | string;
+    date?: string | null;
+    color?: string | null;
+    onEdit?: () => void | Promise<void>;
+    onDelete?: () => void | Promise<void>;
+}

package/dist/types/src/utils/slots.d.ts

@@ -0,0 +1 @@
+export declare function isSlotEmpty(slot: any, props?: {}): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.6.34",
+  "version": "0.6.36",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/assets/base-rich-text.css

@@ -1,4 +1,5 @@
-.base-rich-text {
+body {
+  .base-rich-text {
     .ql-toolbar.ql-snow {
       @apply rounded-t border-slate-300 font-sans;
     }
@@ -28,71 +29,192 @@
     }
   
     .ql-editor.ql-blank::before {
-      @apply text-base text-slate-400 font-light not-italic;
+      @apply text-slate-400 font-light not-italic;
     }
   
     /** Style Prose */
     .ql-editor {
+  
+      @apply p-3.5;
+  
+      &.ql-blank::before {
+        @apply text-base left-3.5;
+      }
+  
+      h1, h2, h3, h4, h5, h6 {
+        @apply font-bold leading-snug tracking-normal;
+        margin-top: 0;
+        margin-bottom: 0.375em;
+      }
+  
       h1 {
-        @apply mt-0 mb-8 text-4xl font-bold leading-snug tracking-normal;
+        @apply text-4xl;
       }
   
       h2 {
-        @apply mt-6 mb-4 text-3xl font-bold leading-snug tracking-normal;
+        @apply text-3xl;
       }
   
       h3 {
-        @apply mt-5 mb-3 text-2xl font-bold leading-snug tracking-normal;
+        @apply text-2xl;
       }
   
       h4 {
-        @apply mt-4 mb-2 text-xl font-bold leading-snug tracking-normal;
+        @apply text-xl;
+      }
+  
+      h5 {
+        @apply text-lg;
+      }
+  
+      h6 {
+        @apply text-base;
       }
   
       p {
-        @apply my-5 text-base leading-relaxed;
+        @apply text-base leading-relaxed;
+        margin: 1em 0;
+      }
   
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p {
         &:first-child {
-          @apply mt-0;
+          margin-top: 0;
         }
       }
   
       ol,
       ul {
-        padding-left: 2rem;
+        @apply text-base leading-relaxed;
+        padding-left: 0.5em;
+        margin-bottom: 1.5em;
   
         li {
-          @apply my-2 text-base leading-relaxed;
-          padding-left: 0.5rem;
+          margin: 0.6em 0;
   
           &::before {
             @apply text-slate-500;
             width: 2em;
+            left: 3em;
             text-align: left;
             position: absolute;
-            left: 3rem;
           }
         }
       }
   
       blockquote {
-        @apply my-5 text-base;
+        @apply text-base bg-slate-100;
+        margin: 1em 0;
+        padding: 1em;
       }
   
-      pre {
-        @apply my-5 p-4 text-sm;
+      pre, .ql-syntax {
+        @apply text-sm bg-slate-900;
+        margin: 1em 0;
+        padding: 1.5em;
       }
     }
-  
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    p {
-      &:first-child {
-        margin-top: 0;
+  }
+
+  /* Size: xs */
+  .base-rich-text-xs {
+    .ql-editor {
+
+      @apply p-2.5;
+
+      &.ql-blank::before {
+        @apply text-xs left-2.5;
+      }
+
+      h1 {
+        @apply text-2xl;
+      }
+
+      h2 {
+        @apply text-xl;
+      }
+
+      h3 {
+        @apply text-lg;
+      }
+
+      h4 {
+        @apply text-base;
+      }
+
+      p {
+        @apply text-xs;
+      }
+
+      ol,
+      ul {
+        li {
+          @apply text-xs;
+        }
+      }
+
+      blockquote {
+        @apply text-xs;
+      }
+
+      pre, .ql-syntax {
+        @apply text-xs;
+      }
+    }
+
+    
+  }
+
+  /* Size: sm */
+  .base-rich-text-sm {
+    .ql-editor {
+
+      @apply p-3;
+
+      &.ql-blank::before {
+        @apply text-sm left-3;
+      }
+
+
+      h1 {
+        @apply text-3xl;
+      }
+
+      h2 {
+        @apply text-2xl;
+      }
+
+      h3 {
+        @apply text-xl;
+      }
+
+      h4 {
+        @apply text-lg;
+      }
+
+      p {
+        @apply text-sm;
+      }
+
+      ol,
+      ul {
+        li {
+          @apply text-sm;
+        }
+      }
+
+      blockquote {
+        @apply text-sm;
+      }
+
+      pre, .ql-syntax {
+        @apply text-sm;
       }
     }
-  }
+  }
+}

package/src/components/BaseButton.vue

@@ -48,6 +48,7 @@ import { ClassNameValue, twMerge } from 'tailwind-merge';
 import { RouteLocationRaw } from 'vue-router';
 import { BaseIcon } from '.';
 import { getColorConfig } from '@/utils/colors';
+import { isSlotEmpty } from '@/utils/slots';
 
 defineOptions({
   inheritAttrs: false,
@@ -111,7 +112,7 @@ const props = withDefaults(defineProps<{
 defineEmits(['click']);
 
 const iconOnly = computed(() => {
-  return props.icon && !slots.default;
+  return props.icon && isSlotEmpty(slots.default);
 });
 
 const classes = computed(() => {
@@ -179,7 +180,7 @@ const containerClass = computed(() => {
 });
 
 const iconClass = computed(() => {
-  const classes = [''];
+  const classes = ['shrink-0'];
 
   if (!iconOnly.value) {
     if (props.iconPosition === 'start') {

package/src/components/BaseButtonGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center flex-wrap"
+    class=""
     :class="wrapperClasses"
   >
     <BaseButton
@@ -9,7 +9,7 @@
       :type="buttonType"
       :disabled="disabled"
       :size="sizeInternal"
-      :class="twButton"
+      :class="buttonClasses"
       :color="buttonColor(option, isSelected(option))"
       @click="onSelect(option)"
     >
@@ -33,6 +33,11 @@ import { useHasOptions } from '@/composables/hasOptions';
 import { useField } from '@/composables/field';
 import BaseButton from '@/components/BaseButton.vue';
 import { Size } from '@/utils/sizes';
+import { twMerge } from 'tailwind-merge';
+
+defineOptions({
+  inheritAttrs: false,
+});
 
 const props = defineProps({
   modelValue: {
@@ -41,6 +46,10 @@ const props = defineProps({
       Option[] | Option | null | undefined
     >,
   },
+  class: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
   required: {
     default: false,
     type: Boolean,
@@ -150,14 +159,33 @@ function onSelect(option: NormalizedOption) {
 
 const wrapperClasses = computed(() => {
 
-  if (props.spacing == 'none') {
-    return 'btn-group';
+  const base = 'flex items-center';
+
+  let spacing = 'btn-group';
+
+  if (props.spacing != 'none') {
+    spacing = 'flex-wrap';
+    spacing += ' ';
+    spacing += {
+      "xs": "gap-0.5",
+      "sm": "gap-1",
+      "md": "gap-1.5",
+    }[sizeInternal.value]
   }
 
-  return {
-    "xs": "gap-0.5",
-    "sm": "gap-1",
-    "md": "gap-1.5",
-  }[sizeInternal.value];
+  return twMerge(
+    base,
+    spacing,
+    props.class,
+  );
+});
+
+const buttonClasses = computed(() => {
+  const base = props.spacing ? 'whitespace-nowrap' : '';
+
+  return twMerge([
+    base,
+    props.twButton,
+  ]);
 });
 </script>

package/src/components/BaseColor.vue

@@ -1,35 +1,33 @@
 <template>
-  <div>
-    <BaseButtonGroup
-      :model-value="normalizeModelValue"
-      :disabled="disabled"
-      value-key="value"
-      label-key="label"
-      :size="size"
-      :required="required"
-      :options="colorOptions"
-      :multiple="multiple"
-      :button-type="buttonType"
-      :button-color="buttonColor"
-      tw-button="p-0 aspect-1 justify-center items-center"
-      @update:model-value="(value) => transformModelValue(value)"
-    >
-      <template #option="option">
-        <div
-          v-if="option.selected.value"
-          class="overflow-hidden flex h-full"
-        >
-          <BaseIcon
-            icon="heroicons-solid:check-circle"
-            class="block leading-none"
-            width="18"
-            height="18"
-          />
-        </div>
-        <div v-else />
-      </template>
-    </BaseButtonGroup>
-  </div>
+  <BaseButtonGroup
+    :model-value="normalizeModelValue"
+    :disabled="disabled"
+    value-key="value"
+    label-key="label"
+    :size="size"
+    :required="required"
+    :options="colorOptions"
+    :multiple="multiple"
+    :button-type="buttonType"
+    :button-color="buttonColor"
+    tw-button="p-0 aspect-1 justify-center items-center"
+    @update:model-value="(value) => transformModelValue(value)"
+  >
+    <template #option="option">
+      <div
+        v-if="option.selected.value"
+        class="overflow-hidden flex h-full"
+      >
+        <BaseIcon
+          icon="heroicons-solid:check-circle"
+          class="block leading-none"
+          width="18"
+          height="18"
+        />
+      </div>
+      <div v-else />
+    </template>
+  </BaseButtonGroup>
 </template>
 
 <script lang="ts" setup>

package/src/components/BaseDataIterator.stories.js

@@ -4,10 +4,17 @@ import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
 import BaseLoadingCover from './BaseLoadingCover.vue';
 
+const sizes = ['xs', 'sm', 'md'];
+
 export default {
   title: 'Data/BaseDataIterator',
   component: BaseDataIterator,
-  argTypes: {},
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    }
+  },
   args: {
     url: 'https://effettandem.com/api/content/articles',
     urlQuery: {