sprintify-ui 0.6.33 → 0.6.35

package/src/components/BaseTextarea.vue

@@ -8,17 +8,23 @@
     :disabled="disabled"
     :required="requiredInternal"
     :rows="rows"
-    :class="[hasErrorInternal ? 'border-red-500' : 'border-slate-300']"
-    class="mb-0 block rounded disabled:cursor-not-allowed disabled:text-slate-300"
+    :autocomplete="autocomplete ? 'on' : 'off'"
+    :class="classes"
     @input="emitUpdate(transformInputValue($event))"
   />
 </template>
 
 <script lang="ts" setup>
 import { useField } from '@/composables/field';
+import { Size, sizes } from '@/utils/sizes';
 import { get, isString } from 'lodash';
+import { twMerge } from 'tailwind-merge';
 import { PropType } from 'vue';
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const props = defineProps({
   modelValue: {
     default: undefined,
@@ -28,6 +34,14 @@ const props = defineProps({
     type: String,
     default: 'text',
   },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
+  class: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
   autocomplete: {
     default: true,
     type: Boolean,
@@ -64,10 +78,11 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
-const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
+const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeInternal } =
   useField({
     name: computed(() => props.name),
     required: computed(() => props.required),
+    size: computed(() => props.size),
     hasError: computed(() => props.hasError),
     emit: emit,
   });
@@ -96,6 +111,22 @@ function blur() {
   textareaRef.value?.blur();
 }
 
+const classes = computed(() => {
+  const base = 'mb-0 block input-rounded transition-colors duration-200';
+  const disabled = 'disabled:cursor-not-allowed disabled:text-slate-300';
+  const focus = 'focus:input-focus';
+  const error = hasErrorInternal.value ? 'border-red-500 focus:input-focus-error' : 'border-slate-300';
+  const sizeConfig = sizes[sizeInternal.value];
+
+  const padding = {
+    xs: 'p-2',
+    sm: 'p-2.5',
+    md: 'p-3',
+  }[sizeInternal.value];
+
+  return twMerge(base, disabled, error, focus, sizeConfig.fontSize, padding, props.class);
+});
+
 defineExpose({
   focus,
   blur,

package/src/components/BaseTextareaAutoresize.stories.js

@@ -2,6 +2,8 @@ import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import { createFieldStory } from '../../.storybook/utils';
 
+const sizes = ['xs', 'sm', 'md'];
+
 export default {
   title: 'Form/BaseTextareaAutoresize',
   component: BaseTextareaAutoresize,
@@ -9,6 +11,12 @@ export default {
     name: 'name',
     placeholder: 'Describe your complete life in 4 sentences...',
   },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    },
+  },
 };
 
 const Template = (args) => ({
@@ -68,8 +76,8 @@ const TemplateTWTextarea = (args) => ({
     <BaseTextareaAutoresize 
       v-model="value" 
       v-bind="args" 
-      class="w-full shadow rounded" 
-      tw-textarea="p-5 bg-slate-100 text-slate-700 focus:ring-blue-200 focus:ring-4 text-sm"
+      class="w-full" 
+      tw-textarea="shadow-xl rounded-none p-5 duration-500 transition-all bg-slate-100 text-slate-900 ring-2 ring-purple-700 border-none ring-opacity-60 focus:ring-pink-500 focus:ring-4 focus:bg-pink-100"
       @submit="onSubmit"
     ></BaseTextareaAutoresize>
   </form>
@@ -86,6 +94,23 @@ export const Field = createFieldStory({
   label: 'Biography',
 });
 
+const TemplateSizes = (args) => ({
+  components: { BaseTextareaAutoresize },
+  setup() {
+    const value = ref(null);
+    const sizes = ['xs', 'sm', 'md'];
+    return { args, value, sizes };
+  },
+  template: `
+  <div v-for="size in sizes" :key="size" class="mb-4">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
+    <BaseTextareaAutoresize v-model="value" v-bind="args" :size="size" class="w-full"></BaseTextareaAutoresize>
+  </div>
+  `,
+});
+
+export const Sizes = TemplateSizes.bind({});
+
 const FocusTemplate = (args) => ({
   components: { BaseTextareaAutoresize },
   setup() {

package/src/components/BaseTextareaAutoresize.vue

@@ -36,12 +36,10 @@
 
 <script lang="ts" setup>
 import { useField } from '@/composables/field';
+import { sizes, Size } from '@/utils/sizes';
 import { twMerge } from 'tailwind-merge';
 import { PropType } from 'vue';
 
-const BASE_TEXTAREA_CLASSES =
-  'py-2 px-3 font-normal text-base disabled:cursor-not-allowed disabled:text-slate-300 font-sans rounded leading-normal tracking-normal border placeholder:text-slate-400 placeholder:font-light';
-
 const BASE_GRID_AREA = '1 / 1 / 2 / 2';
 
 /* Note the weird space! Needed to prevent jumpy behavior */
@@ -57,13 +55,17 @@ const props = defineProps({
     type: String,
   },
   name: {
-    required: true,
+    default: undefined,
     type: String,
   },
   required: {
     default: false,
     type: Boolean,
   },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
   maxHeight: {
     default: 100,
     type: Number,
@@ -98,10 +100,11 @@ const emit = defineEmits(['update:modelValue', 'submit', 'focus', 'input']);
 
 const textareaRef = ref<null | HTMLTextAreaElement>(null);
 
-const { nameInternal, requiredInternal, hasErrorInternal } =
+const { nameInternal, requiredInternal, hasErrorInternal, sizeInternal } =
   useField({
     name: computed(() => props.name),
     required: computed(() => props.required),
+    size: computed(() => props.size),
     hasError: computed(() => props.hasError),
     emit: emit,
   });
@@ -142,11 +145,27 @@ function onFocus(event: FocusEvent) {
 }
 
 const textareaClasses = computed(() => {
+  const base = 'input-rounded leading-normal tracking-normal border transition-colors duration-200';
+  const disabled = 'disabled:cursor-not-allowed disabled:text-slate-300';
+  const focus = 'focus:input-focus';
+  const error = hasErrorInternal.value ? 'border-red-500 focus:input-focus-error' : 'border-slate-300';
+  const placeholder = 'placeholder:text-slate-400 placeholder:font-light';
+  const sizeConfig = sizes[sizeInternal.value];
+
+  const sizeClasses = {
+    xs: 'px-2 py-[0.26rem] min-h-control-xs',
+    sm: 'px-2.5 py-[0.31rem] min-h-control-sm',
+    md: 'px-3 py-[0.43rem] min-h-control-md',
+  }[sizeInternal.value];
+
   return twMerge(
-    [
-      BASE_TEXTAREA_CLASSES,
-      hasErrorInternal.value ? 'border-red-500' : 'border-slate-300',
-    ],
+    base,
+    disabled,
+    error,
+    placeholder,
+    focus,
+    sizeConfig.fontSize,
+    sizeClasses,
     props.twTextarea
   );
 });

package/src/composables/inputSize.ts

@@ -1,5 +1,5 @@
 import { useBreakpoints } from "./breakpoints";
-import { Size } from "@/utils/sizes";
+import { Size, sizes } from "@/utils/sizes";
 import { MaybeRef } from "vue";
 
 function useInputSize(size: MaybeRef<Size | '' | undefined | null>) {
@@ -18,6 +18,10 @@ function useInputSize(size: MaybeRef<Size | '' | undefined | null>) {
             s = 'md';
         }
 
+        if (!Object.keys(sizes).includes(s)) {
+            s = 'md';
+        }
+
         return s;
     });
 

package/src/stories/InputSizes.stories.js

@@ -0,0 +1,22 @@
+import InputSizes from './PageInputSizes.vue';
+
+export default {
+    title: 'Pages/InputSize',
+    component: InputSizes,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+
+const Template = (args) => ({
+    components: {
+        InputSizes
+    },
+    template: `<InputSizes></InputSizes>`,
+    setup() {
+        return { args };
+    },
+});
+
+export const Demo = Template.bind({});

package/src/stories/PageInputSizes.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="p-5 flex flex-col gap-4 overflow-x-scroll overflow-y-visible pb-[400px]">
+    <div
+      v-for="size in sizes"
+      :key="size"
+    >
+      <div class="flex gap-1">
+        <BaseField :size="size">
+          <BaseInput
+            v-model="text"
+            placeholder="Name"
+            icon-left="heroicons:calendar"
+          />
+        </BaseField>
+        <BaseField :size="size">
+          <BaseSelect
+            v-model="valueId"
+            placeholder="Name"
+            label-key="label"
+            value-key="value"
+            :options="options"
+          />
+        </BaseField>
+        <BaseField
+          :size="size"
+          class="min-w-[200px]"
+        >
+          <BaseDatePicker v-model="date" />
+        </BaseField>
+        <BaseField
+          :size="size"
+        >
+          <BaseDateSelect v-model="date" />
+        </BaseField>
+        <BaseField :size="size">
+          <BaseAutocomplete
+            v-model="valueObject"
+            label-key="label"
+            value-key="value"
+            :options="options"
+          />
+        </BaseField>
+        <BaseField
+          v-if="false"
+          :size="size"
+        >
+          <BaseAutocompleteFetch
+            v-model="valueObjectFetch"
+            label-key="name"
+            value-key="id"
+            url="https://jsonplaceholder.typicode.com/users"
+          />
+        </BaseField>
+        <BaseField
+          v-if="false"
+          :size="size"
+        >
+          <BaseBelongsTo
+            v-model="valueId"
+            field="label"
+            primary-key="value"
+            :options="options"
+          />
+        </BaseField>
+        <BaseField
+          v-if="false"
+          :size="size"
+        >
+          <BaseBelongsToFetch
+            v-model="valueIdFetch"
+            field="name"
+            primary-key="id"
+            url="https://jsonplaceholder.typicode.com/users"
+          />
+        </BaseField>
+        <BaseField :size="size">
+          <BaseTagAutocomplete
+            v-model="valueArrayOfObjects"
+            label-key="label"
+            value-key="value"
+            :options="options"
+          />
+        </BaseField>
+        <BaseField
+          v-if="false"
+          :size="size"
+        >
+          <BaseTagAutocompleteFetch
+            v-model="valueArrayOfObjectFetch"
+            label-key="name"
+            value-key="id"
+            url="https://jsonplaceholder.typicode.com/users"
+          />
+        </BaseField>
+        <BaseField :size="size">
+          <BasePassword
+            v-model="text"
+            placeholder="Password"
+          />
+        </BaseField>
+        <BaseField :size="size">
+          <BaseInputPercent
+            v-model="number"
+            placeholder="Enter a value"
+          />
+        </BaseField>
+        <BaseField
+          :size="size"
+          class="min-w-[200px]"
+        >
+          <BaseTextareaAutoresize
+            v-model="text"
+            placeholder="Tell me a story"
+          />
+        </BaseField>
+        <BaseField :size="size">
+          <BaseButtonGroup
+            v-model="valueArrayOfObjects"
+            label-key="label"
+            value-key="value"
+            spacing="none"
+            :options="options.slice(0, 3)"
+          />
+        </BaseField>
+        <BaseField :size="size">
+          <BaseColor
+            v-model="colors"
+            class="flex-nowrap"
+          />
+        </BaseField>
+      </div>
+    </div>
+
+    <div
+      v-for="size in sizes"
+      :key="size"
+      class="flex flex-col gap-3"
+    >
+      <BaseInput
+        v-model="text"
+        :size="size"
+        placeholder="Name"
+        icon-left="heroicons:calendar"
+      />
+      <BaseDatePicker
+        v-model="date"
+        :size="size"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Size } from '@/utils/sizes';
+import BaseField from '@/components/BaseField.vue';
+import BaseSelect from '@/components/BaseSelect.vue';
+import BaseAutocomplete from '@/components/BaseAutocomplete.vue';
+import BaseInput from '@/components/BaseInput.vue';
+import BaseAutocompleteFetch from '@/components/BaseAutocompleteFetch.vue';
+import BaseBelongsTo from '@/components/BaseBelongsTo.vue';
+import BaseBelongsToFetch from '@/components/BaseBelongsToFetch.vue';
+import BaseTagAutocomplete from '@/components/BaseTagAutocomplete.vue';
+import BaseTagAutocompleteFetch from '@/components/BaseTagAutocompleteFetch.vue';
+import BaseButtonGroup from '@/components/BaseButtonGroup.vue';
+import BaseColor from '@/components/BaseColor.vue';
+import BasePassword from '@/components/BasePassword.vue';
+import BaseInputPercent from '@/components/BaseInputPercent.vue';
+import BaseTextareaAutoresize from '@/components/BaseTextareaAutoresize.vue';
+import BaseDatePicker from '@/components/BaseDatePicker.vue';
+import BaseDateSelect from '@/components/BaseDateSelect.vue';
+
+const sizes = ref<Size[]>(['xs', 'sm', 'md']);
+
+const text = ref('');
+const number = ref('');
+
+const valueObject = ref(null);
+const valueObjectFetch = ref(null);
+
+const valueId = ref(null);
+const valueIdFetch = ref(null);
+
+const valueArrayOfObjects = ref([]);
+const valueArrayOfObjectFetch = ref([]);
+
+const colors = ref([]);
+
+const date = ref(null);
+
+const options = [
+    { label: 'Dark Vader', value: 'dark_vader', type: 'sith' },
+    { label: 'Darth Maul', value: 'darth_maul', type: 'sith' },
+    { label: 'Dark Sidious', value: 'dark_sidious', type: 'sith' },
+    { label: 'Obi Wan Kenobi', value: 'obiwan', type: 'jedi' },
+    { label: 'Anakin Skywalker', value: 'anakin', type: 'jedi' },
+    { label: 'Mace Windu', value: 'windu', type: 'jedi' },
+    { label: 'Padme Amidala', value: 'padme', type: 'jedi' },
+    { label: 'Princesse Leila', value: 'leila', type: 'jedi' },
+    { label: 'Qui Gon Gin', value: 'quigon', type: 'jedi' },
+    { label: 'Chewbaca', value: 'chewbaca', type: 'jedi' },
+    { label: 'C3P0', value: 'c3p0', type: 'jedi' },
+    { label: 'R2D2', value: 'r2d2', type: 'jedi' },
+];
+
+</script>

package/src/utils/slots.ts

@@ -0,0 +1,13 @@
+import { Comment } from 'vue';
+
+export function isSlotEmpty(slot: any, props = {}) {
+    return isVNodeEmpty(slot?.(props))
+}
+
+function isVNodeEmpty(vnode: any) {
+    return !vnode || asArray(vnode).every((vnode) => vnode.type === Comment)
+}
+
+function asArray(arg: any) {
+    return Array.isArray(arg) ? arg : arg != null ? [arg] : []
+}