sprintify-ui 0.10.64 → 0.10.66

package/dist/types/components/BaseModalSide.vue.d.ts

@@ -6,6 +6,8 @@ declare const modal: {
     refuseAnimation: () => void;
     animationClasses: import("vue").Ref<string, string>;
 };
+declare const classAlign: import("vue").ComputedRef<"mr-0 ml-auto" | "mr-auto ml-0">;
+declare const classButtonAlign: import("vue").ComputedRef<"|| sm:-left-[3rem] sm:top-2" | "|| sm:-right-[3rem] sm:top-2">;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_21: {
     close: () => void;
@@ -34,10 +36,16 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
         type: PropType<string | string[]>;
     };
+    align: {
+        default: string;
+        type: PropType<"right" | "left">;
+    };
 }>, {
     twMerge: typeof twMerge;
     realMaxWidth: typeof realMaxWidth;
     modal: typeof modal;
+    classAlign: typeof classAlign;
+    classButtonAlign: typeof classButtonAlign;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -61,10 +69,15 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
         type: PropType<string | string[]>;
     };
+    align: {
+        default: string;
+        type: PropType<"right" | "left">;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     modelValue: boolean;
+    align: "left" | "right";
     closeOnOutsideClick: boolean;
     clipped: boolean;
     maxWidth: string;
@@ -91,6 +104,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: string;
         type: PropType<string | string[]>;
     };
+    align: {
+        default: string;
+        type: PropType<"right" | "left">;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -114,10 +131,15 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: string;
         type: PropType<string | string[]>;
     };
+    align: {
+        default: string;
+        type: PropType<"right" | "left">;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     modelValue: boolean;
+    align: "left" | "right";
     closeOnOutsideClick: boolean;
     clipped: boolean;
     maxWidth: string;

package/dist/types/components/BaseSwitch.vue.d.ts

@@ -1,3 +1,4 @@
+import { Size } from '@/utils/sizes';
 import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue';
 import { PropType } from 'vue';
 declare const normalizedModelValue: import("vue").ComputedRef<boolean>;
@@ -29,7 +30,7 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     };
     size: {
         default: string;
-        type: PropType<"xs" | "sm" | "base" | "lg" | "xl">;
+        type: PropType<Size | undefined>;
     };
     hasError: {
         default: boolean;
@@ -81,7 +82,7 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     };
     size: {
         default: string;
-        type: PropType<"xs" | "sm" | "base" | "lg" | "xl">;
+        type: PropType<Size | undefined>;
     };
     hasError: {
         default: boolean;
@@ -106,7 +107,7 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    size: "xs" | "sm" | "lg" | "xl" | "base";
+    size: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     required: boolean;
     color: "dark" | "light" | "danger" | "success" | "warning" | "primary" | "info";
     disabled: boolean;
@@ -131,7 +132,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     };
     size: {
         default: string;
-        type: PropType<"xs" | "sm" | "base" | "lg" | "xl">;
+        type: PropType<Size | undefined>;
     };
     hasError: {
         default: boolean;
@@ -170,7 +171,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     };
     size: {
         default: string;
-        type: PropType<"xs" | "sm" | "base" | "lg" | "xl">;
+        type: PropType<Size | undefined>;
     };
     hasError: {
         default: boolean;
@@ -195,7 +196,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    size: "xs" | "sm" | "lg" | "xl" | "base";
+    size: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     required: boolean;
     color: "dark" | "light" | "danger" | "success" | "warning" | "primary" | "info";
     disabled: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.10.64",
+  "version": "0.10.66",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseDataTableTemplate.vue

@@ -33,11 +33,6 @@
           >
             <div class="flex gap-4">
               <template v-if="index == 0">
-                <div
-                  v-if="showDetailRowIcon"
-                  class="flex h-5 w-5 shrink-0 grow-0"
-                />
-
                 <div
                   v-if="checkable"
                   class="flex items-center cursor-pointer"
@@ -133,22 +128,6 @@
             >
               <div :class="[columnIndex == 0 ? 'flex items-center gap-4' : '']">
                 <template v-if="columnIndex == 0">
-                  <button
-                    v-if="showDetailRowIcon"
-                    type="button"
-                    class="relative z-[1] || flex h-5 w-5 shrink-0 grow-0 appearance-none items-center justify-center rounded-full border border-slate-300 bg-white text-slate-400 shadow duration-100 hover:text-slate-600 hover:shadow-md"
-                    @click.stop="toggleDetails(row)"
-                  >
-                    <BaseIcon
-                      v-if="hasDetailedVisible(row)"
-                      icon="mdi:chevron-down"
-                      class="h-5 w-5 duration-300"
-                      :class="{
-                        'rotate-180': isVisibleDetailRow(row)
-                      }"
-                    />
-                  </button>
-
                   <div
                     v-if="checkable"
                     class="relative z-[1] || flex items-center group cursor-pointer bg-white"
@@ -162,6 +141,20 @@
                       :class="checkboxStyle"
                     >
                   </div>
+                  <button
+                    v-if="showDetailRowIcon && hasDetailedVisible(row)"
+                    type="button"
+                    class="relative z-[1] || flex h-5 w-5 shrink-0 grow-0 appearance-none items-center justify-center rounded-full border border-slate-300 bg-white text-slate-400 shadow duration-100 hover:text-slate-600 hover:shadow-md"
+                    @click.stop="toggleDetails(row)"
+                  >
+                    <BaseIcon
+                      icon="mdi:chevron-down"
+                      class="h-5 w-5 duration-300"
+                      :class="{
+                        'rotate-180': isVisibleDetailRow(row)
+                      }"
+                    />
+                  </button>
                 </template>
 
                 <SlotComponent

package/src/components/BaseModalSide.stories.js

@@ -53,3 +53,9 @@ export const PreventLeave = Template.bind({});
 PreventLeave.args = {
   closeOnOutsideClick: false,
 };
+
+
+export const AlignLeft = Template.bind({});
+AlignLeft.args = {
+  align: "left",
+};

package/src/components/BaseModalSide.vue

@@ -45,14 +45,16 @@
                   :style="{
                     maxWidth: realMaxWidth,
                   }"
-                  class="pb-safe py-safe relative z-[1] ml-auto mr-0 flex h-full w-full flex-col rounded-t-lg bg-white text-left shadow-2xl ring-1 ring-black ring-opacity-10 || sm:rounded-t-none"
+                  class="pb-safe py-safe relative z-[1] flex h-full w-full flex-col rounded-t-lg bg-white text-left shadow-2xl ring-1 ring-black ring-opacity-10 || sm:rounded-t-none"
                   :class="[
                     modal.animationClasses.value,
+                    classAlign,
                     clipped ? 'overflow-hidden' : '',
                   ]"
                 >
                   <button
-                    class="absolute -top-[4.5rem] right-2 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow hover:shadow-lg ring-1 ring-black ring-opacity-5 duration-300 transition-shadow || sm:-left-[3rem] sm:top-2"
+                    class="absolute -top-[4.5rem] right-2 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow hover:shadow-lg ring-1 ring-black ring-opacity-5 duration-300 transition-shadow"
+                    :class="classButtonAlign"
                     type="button"
                     @click="modal.close()"
                   >
@@ -99,6 +101,10 @@ const props = defineProps({
     default: '',
     type: [String, Array] as PropType<string | string[]>,
   },
+  align: {
+    default: 'right',
+    type: String as PropType<'right' | 'left'>,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -113,4 +119,12 @@ const modal = useModal(
   computed(() => props.modelValue),
   emit
 );
+
+const classAlign = computed(() => {
+  return props.align === 'right' ? 'mr-0 ml-auto' : 'mr-auto ml-0';
+});
+
+const classButtonAlign = computed(() => {
+  return props.align === 'right' ? '|| sm:-left-[3rem] sm:top-2' : '|| sm:-right-[3rem] sm:top-2';
+});
 </script>

package/src/components/BaseSwitch.vue

@@ -45,6 +45,7 @@
 
 <script lang="ts" setup>
 import { useField } from '@/composables/field';
+import { Size } from '@/utils/sizes';
 import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue';
 import { isNumber, isString } from 'lodash';
 import { PropType } from 'vue';
@@ -67,8 +68,8 @@ const props = defineProps({
     >,
   },
   size: {
-    default: 'base',
-    type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl'>,
+    default: 'md',
+    type: [String, undefined] as PropType<Size | undefined>,
   },
   hasError: {
     default: false,
@@ -94,11 +95,12 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
-const { emitUpdate } = useField({
+const { emitUpdate, sizeInternal } = useField({
   name: computed(() => props.name),
   required: computed(() => props.required),
   hasError: computed(() => props.hasError),
   emit: emit,
+  size: computed(() => props.size ?? 'md'),
 });
 
 const normalizedModelValue = computed((): boolean => {
@@ -154,40 +156,40 @@ const focus = computed(() => {
   return 'focus:ring-slate-900';
 });
 const sizePx = computed(() => {
-  if (props.size == 'xs') {
+  if (sizeInternal.value == 'xs') {
     return 12;
   }
-  if (props.size == 'sm') {
+  if (sizeInternal.value == 'sm') {
     return 16;
   }
-  if (props.size == 'base') {
+  if (sizeInternal.value == 'md') {
     return 20;
   }
-  if (props.size == 'lg') {
+  if (sizeInternal.value == 'lg') {
     return 24;
   }
-  if (props.size == 'xl') {
+  if (sizeInternal.value == 'xl') {
     return 32;
   }
-  return 16;
+  return 20;
 });
 const padding = computed(() => {
-  if (props.size == 'xs') {
+  if (sizeInternal.value == 'xs') {
     return 2;
   }
-  if (props.size == 'sm') {
+  if (sizeInternal.value == 'sm') {
     return 2.5;
   }
-  if (props.size == 'base') {
+  if (sizeInternal.value == 'md') {
     return 3;
   }
-  if (props.size == 'lg') {
+  if (sizeInternal.value == 'lg') {
     return 3;
   }
-  if (props.size == 'xl') {
+  if (sizeInternal.value == 'xl') {
     return 4;
   }
-  return 2;
+  return 3;
 });
 const height = computed(() => {
   return sizePx.value + 2 * padding.value;