sprintify-ui 0.6.31 → 0.6.33

package/src/composables/field.ts

@@ -1,21 +1,26 @@
+import { Size } from '@/utils/sizes';
 import { uniqueId } from 'lodash';
 import { Ref } from 'vue';
+import { useInputSize } from './inputSize';
 
 interface Config {
   name: Ref<string | null | undefined>;
   required: Ref<boolean>;
   hasError: Ref<boolean | undefined>;
   emit: any;
+  size?: Ref<Size | undefined>;
   errorType?: string;
   labelClass?: string;
 }
 
 export function useField(config: Config) {
+
   const uuid = uniqueId();
   const name = config.name;
   const required = config.required;
   const hasError = config.hasError;
   const emit = config.emit;
+  const size = config.size;
   const errorType = config.errorType ?? null;
   const labelClass = config.labelClass ?? null;
 
@@ -23,6 +28,7 @@ export function useField(config: Config) {
 
   const fieldRequired = inject('field:required', ref(false)) as Ref<boolean>;
   const fieldName = inject('field:name', ref('')) as Ref<string>;
+  const fieldSize = inject('field:size', ref('md')) as Ref<Size>;
 
   const fieldOnUpdate = inject('field:onUpdate', () => {
     return;
@@ -88,6 +94,19 @@ export function useField(config: Config) {
     return fieldName.value;
   });
 
+  const sizeInternal = computed((): Size => {
+
+    let s = size?.value ?? null;
+
+    if (!s) {
+      s = fieldSize.value;
+    }
+
+    const inputSize = useInputSize(s);
+
+    return inputSize.size.value;
+  });
+
   const errorMessageInternal = computed((): string | null | undefined => {
     return getErrorMessageByName(nameInternal.value);
   });
@@ -110,6 +129,7 @@ export function useField(config: Config) {
     nameInternal,
     hasErrorInternal,
     errorMessageInternal,
+    sizeInternal,
     emitUpdate,
     enableForm: () => enableForm(uuid),
     disableForm: () => disableForm(uuid),

package/src/composables/inputSize.ts

@@ -0,0 +1,29 @@
+import { useBreakpoints } from "./breakpoints";
+import { Size } from "@/utils/sizes";
+import { MaybeRef } from "vue";
+
+function useInputSize(size: MaybeRef<Size | '' | undefined | null>) {
+
+    const bp = useBreakpoints();
+
+    const sizeInternal = computed(() => {
+
+        if (bp.smaller('sm').value) {
+            return 'md';
+        }
+
+        let s = unref(size);
+
+        if (!s) {
+            s = 'md';
+        }
+
+        return s;
+    });
+
+    return {
+        size: sizeInternal,
+    };
+}
+
+export { useInputSize };

package/src/utils/sizes.ts

@@ -0,0 +1,21 @@
+const sizes = {
+    xs: {
+        fontSize: 'text-xs',
+        height: 'h-control-xs',
+        iconSize: 'h-[0.9rem] w-[0.9rem]'
+    },
+    sm: {
+        fontSize: 'text-sm',
+        height: 'h-control-sm',
+        iconSize: 'h-[1.125rem] w-[1.125rem]'
+    },
+    md: {
+        fontSize: 'text-base',
+        height: 'h-control-md',
+        iconSize: 'h-5 w-5'
+    },
+};
+
+type Size = keyof typeof sizes;
+
+export { sizes, Size }