sprintify-ui 0.6.47 → 0.6.50

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

@@ -70,9 +70,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {
     size: "xs" | "sm" | "md";
     options: NormalizedOption[];
+    loading: boolean;
     selected: NormalizedOption | NormalizedOption[] | null | undefined;
     keywords: string;
-    loading: boolean;
     loadingBottom: boolean;
     twDrawer: string;
 }, {}>, {

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

@@ -1,5 +1,6 @@
 import { ClassNameValue } from 'tailwind-merge';
 import { RouteLocationRaw } from 'vue-router';
+declare function focus(): void;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     class: {
         type: import("vue").PropType<string | false | 0 | ClassNameValue[] | null>;
@@ -29,19 +30,21 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
-    loading: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
     as: {
         type: import("vue").PropType<string>;
         default: string;
     };
+    loading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     iconPosition: {
         type: import("vue").PropType<"start" | "end">;
         default: string;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {
+    focus: typeof focus;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     class: {
@@ -72,14 +75,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
-    loading: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
     as: {
         type: import("vue").PropType<string>;
         default: string;
     };
+    loading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     iconPosition: {
         type: import("vue").PropType<"start" | "end">;
         default: string;
@@ -94,8 +97,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     icon: string;
     size: "xs" | "sm" | "md" | "lg" | "xl";
     disabled: boolean;
-    loading: boolean;
     as: string;
+    loading: boolean;
     iconPosition: "start" | "end";
 }, {}>, {
     default?(_: {}): any;

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

@@ -33,8 +33,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
     };
 }>>, {
-    tooltip: boolean;
     as: string;
+    tooltip: boolean;
     timeZone: string;
 }, {}>, {
     default?(_: {

package/package.json

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

package/src/components/BaseBadge.vue

@@ -75,7 +75,8 @@ const classes = computed(() => {
     md: 'px-1.5 py-0.5 text-xs',
     lg: 'px-1.5 py-0.5 text-sm',
   }[sizeInternal.value];
-  const wrap = props.wrap ? 'whitespace-nowrap' : '';
+
+  const wrap = props.wrap ? '' : 'whitespace-nowrap';
 
   return twMerge(base, wrap, size, props.class);
 })

package/src/components/BaseButton.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="as"
-    ref="button"
+    ref="buttonRef"
     :class="classes"
     :style="styles"
     :to="to"
@@ -205,4 +205,16 @@ const iconClass = computed(() => {
   return classes;
 });
 
+const buttonRef = ref<HTMLElement | undefined>(undefined);
+
+function focus() {
+  if (buttonRef.value) {
+    buttonRef.value.focus();
+  }
+}
+
+defineExpose({
+  focus,
+});
+
 </script>

package/src/components/BaseCounter.stories.js

@@ -27,7 +27,7 @@ const Template = (args) => ({
 
 export const Demo = Template.bind({});
 Demo.args = {
-  count: 355,
+  count: 0.01,
   maxDigit: 2,
 };
 

package/src/components/BaseCounter.vue

@@ -34,12 +34,13 @@ const props = defineProps({
 const countLabel = computed((): string => {
   const realMaxDigit = Math.max(1, props.maxDigit);
 
-  const countString = props.count + '';
+  // Should work with 0.01
+  const countString = Math.round(props.count) + '';
   const numberOfDigit = countString.length;
   if (numberOfDigit > realMaxDigit) {
     return padStart('+', realMaxDigit + 1, '9');
   }
-  return countString;
+  return props.count + '';
 });
 
 const sizeClass = computed((): string => {

package/src/components/BaseDialog.stories.js

@@ -1,5 +1,7 @@
 import BaseDialog from './BaseDialog.vue';
 
+const colors = ['info', 'success', 'warning', 'danger'];
+
 export default {
   title: 'Components/BaseDialog',
   component: BaseDialog,
@@ -10,6 +12,7 @@ export default {
     },
   },
   args: {
+    color: 'info',
     message:
       'Nisi Lorem sunt amet aliqua dolor ullamco deserunt enim irure non ad. Excepteur culpa consectetur dolore culpa sunt aliquip proident quis.',
   },
@@ -29,23 +32,23 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {
   title: 'Be careful',
-  color: 'warning',
-};
-
-export const Success = Template.bind({});
-Success.args = {
-  title: 'Success',
-  color: 'success',
 };
 
-export const Danger = Template.bind({});
-Danger.args = {
-  title: 'Error',
-  color: 'danger',
-};
+const ColorsTemplate = (args) => ({
+  components: { BaseDialog },
+  setup() {
+    return { args, colors };
+  },
+  template: `
+  <div v-for="color in colors" :key="color" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ color }}</p>
+    <BaseDialog v-bind="args" :color="color">
+    </BaseDialog>
+  </div>
+  `,
+});
 
-export const Info = Template.bind({});
-Info.args = {
-  title: 'Information',
-  color: 'info',
+export const Colors = ColorsTemplate.bind({});
+Colors.args = {
+  title: 'Be careful',
 };

package/src/components/BaseDialog.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    class="relative transform overflow-hidden rounded-lg bg-white ring-1 ring-black ring-opacity-10 p-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
+    class="relative transform overflow-hidden rounded-lg bg-white ring-1 ring-black ring-opacity-10 p-4 text-left shadow-xl transition-all || sm:my-8 sm:w-full sm:max-w-lg"
   >
-    <div class="sm:flex sm:items-start">
+    <div class="sm:flex sm:items-start || sm:gap-4">
       <div
         class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10"
         :class="{
@@ -33,7 +33,7 @@
           icon="heroicons:information-circle-20-solid"
         />
       </div>
-      <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+      <div class="mt-3 text-center || sm:mt-0 sm:text-left">
         <slot>
           <h3
             id="modal-title"
@@ -49,28 +49,25 @@
         </slot>
       </div>
     </div>
-    <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-      <button
+    <div class="mt-5 || sm:mt-4 sm:flex sm:flex-row-reverse">
+      <BaseButton
         ref="confirm"
         type="button"
-        class="btn btn-sm mb-2 w-full sm:mb-0 sm:w-auto"
-        :class="{
-          'btn-primary': color == 'info',
-          'btn-danger': color == 'danger',
-          'btn-warning': color == 'warning',
-          'btn-success': color == 'success',
-        }"
+        size="sm"
+        class="mb-2 w-full sm:mb-0 sm:w-auto"
+        :color="color"
         @click="$emit('confirm')"
       >
         {{ confirmText ?? t('sui.confirm') }}
-      </button>
-      <button
+      </BaseButton>
+      <BaseButton
         type="button"
-        class="btn btn-sm w-full sm:mr-2 sm:w-auto"
+        size="sm"
+        class="w-full sm:mr-2 sm:w-auto"
         @click="$emit('cancel')"
       >
         {{ cancelText ?? t('sui.cancel') }}
-      </button>
+      </BaseButton>
     </div>
   </div>
 </template>
@@ -79,6 +76,7 @@
 import { PropType } from 'vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import { t } from '@/i18n';
+import BaseButton from './BaseButton.vue';
 
 defineProps({
   color: {