sprintify-ui 0.10.65 → 0.10.66

package/src/components/BaseTextarea.vue

@@ -1,138 +1,138 @@
-<template>
-  <textarea
-    ref="textareaRef"
-    :value="modelValue ?? undefined"
-    :type="type"
-    :name="nameInternal"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    :required="requiredInternal"
-    :rows="rows"
-    :autocomplete="autocomplete ? 'on' : 'off'"
-    :class="classes"
-    @input="emitUpdate(transformInputValue($event))"
-    @blur="$emit('blur')"
-    @focus="$emit('focus')"
-  />
-</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,
-    type: [String, null, undefined] as PropType<string | null | undefined>,
-  },
-  type: {
-    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,
-  },
-  preventSubmit: {
-    default: false,
-    type: Boolean,
-  },
-  name: {
-    default: undefined,
-    type: String,
-  },
-  placeholder: {
-    default: '',
-    type: String,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  required: {
-    default: undefined,
-    type: Boolean,
-  },
-  rows: {
-    default: undefined,
-    type: Number,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits(['update:modelValue', 'blur', 'focus']);
-
-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,
-  });
-
-function transformInputValue(event: Event | null): string | null {
-  if (event === null) {
-    return null;
-  }
-
-  const value = get(event, 'target.value', null);
-
-  if (isString(value)) {
-    return value;
-  }
-
-  return '';
-}
-
-const textareaRef = ref<HTMLTextAreaElement | null>(null);
-
-function focus() {
-  textareaRef.value?.focus();
-}
-
-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',
-    lg: 'p-3',
-    xl: 'p-4',
-  }[sizeInternal.value];
-
-  return twMerge(base, disabled, error, focus, sizeConfig.fontSize, padding, props.class);
-});
-
-defineExpose({
-  focus,
-  blur,
-});
-</script>
+<template>
+  <textarea
+    ref="textareaRef"
+    :value="modelValue ?? undefined"
+    :type="type"
+    :name="nameInternal"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :required="requiredInternal"
+    :rows="rows"
+    :autocomplete="autocomplete ? 'on' : 'off'"
+    :class="classes"
+    @input="emitUpdate(transformInputValue($event))"
+    @blur="$emit('blur')"
+    @focus="$emit('focus')"
+  />
+</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,
+    type: [String, null, undefined] as PropType<string | null | undefined>,
+  },
+  type: {
+    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,
+  },
+  preventSubmit: {
+    default: false,
+    type: Boolean,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  placeholder: {
+    default: '',
+    type: String,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  required: {
+    default: undefined,
+    type: Boolean,
+  },
+  rows: {
+    default: undefined,
+    type: Number,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'blur', 'focus']);
+
+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,
+  });
+
+function transformInputValue(event: Event | null): string | null {
+  if (event === null) {
+    return null;
+  }
+
+  const value = get(event, 'target.value', null);
+
+  if (isString(value)) {
+    return value;
+  }
+
+  return '';
+}
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
+
+function focus() {
+  textareaRef.value?.focus();
+}
+
+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',
+    lg: 'p-3',
+    xl: 'p-4',
+  }[sizeInternal.value];
+
+  return twMerge(base, disabled, error, focus, sizeConfig.fontSize, padding, props.class);
+});
+
+defineExpose({
+  focus,
+  blur,
+});
+</script>

package/src/components/BaseTextareaAutoresize.stories.js

@@ -1,125 +1,125 @@
-import BaseTextareaAutoresize from "./BaseTextareaAutoresize.vue";
-import ShowValue from "@/../.storybook/components/ShowValue.vue";
-import { createFieldStory, sizes } from "../../.storybook/utils";
-
-export default {
-  title: "Form/BaseTextareaAutoresize",
-  component: BaseTextareaAutoresize,
-  args: {
-    name: "name",
-    placeholder: "Describe your complete life in 4 sentences...",
-  },
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: sizes,
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseTextareaAutoresize,
-    ShowValue,
-  },
-  setup() {
-    function onSubmit() {
-      alert("submit");
-    }
-    const value = ref(null);
-    return { args, value, onSubmit };
-  },
-  template: `
-  <form @submit.prevent="onSubmit" class="border-none">
-    <BaseTextareaAutoresize 
-      v-model="value" 
-      v-bind="args" 
-      class="w-full" 
-      @submit="onSubmit"
-    ></BaseTextareaAutoresize>
-  </form>
-
-  <ShowValue :value="value" />
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const SubmitOnEnter = Template.bind({});
-SubmitOnEnter.args = {
-  submitOnEnter: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  modelValue: "Lorem ipsum...",
-  disabled: true,
-};
-
-const TemplateTWTextarea = (args) => ({
-  components: {
-    BaseTextareaAutoresize,
-    ShowValue,
-  },
-  setup() {
-    function onSubmit() {
-      alert("submit");
-    }
-    const value = ref(null);
-    return { args, value, onSubmit };
-  },
-  template: `
-  <form @submit.prevent="onSubmit" class="border-none">
-    <BaseTextareaAutoresize 
-      v-model="value" 
-      v-bind="args" 
-      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>
-
-  <ShowValue :value="value" />
-  `,
-});
-
-export const TWTextarea = TemplateTWTextarea.bind({});
-
-export const Field = createFieldStory({
-  component: BaseTextareaAutoresize,
-  componentName: "BaseTextareaAutoresize",
-  label: "Biography",
-});
-
-const TemplateSizes = (args) => ({
-  components: { BaseTextareaAutoresize },
-  setup() {
-    const value = ref(null);
-    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() {
-    const value = ref(null);
-    const input = ref(null);
-    return { args, value, input };
-  },
-  template: `
-    <BaseTextareaAutoresize ref="input" v-model="value" v-bind="args" class="w-full"></BaseTextareaAutoresize>
-
-    <button @click="input.focus()" class="mt-4 underline">Focus</button>
-  `,
-});
-
-export const Focus = FocusTemplate.bind({});
+import BaseTextareaAutoresize from "./BaseTextareaAutoresize.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+import { createFieldStory, sizes } from "../../.storybook/utils";
+
+export default {
+  title: "Form/BaseTextareaAutoresize",
+  component: BaseTextareaAutoresize,
+  args: {
+    name: "name",
+    placeholder: "Describe your complete life in 4 sentences...",
+  },
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: sizes,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseTextareaAutoresize,
+    ShowValue,
+  },
+  setup() {
+    function onSubmit() {
+      alert("submit");
+    }
+    const value = ref(null);
+    return { args, value, onSubmit };
+  },
+  template: `
+  <form @submit.prevent="onSubmit" class="border-none">
+    <BaseTextareaAutoresize 
+      v-model="value" 
+      v-bind="args" 
+      class="w-full" 
+      @submit="onSubmit"
+    ></BaseTextareaAutoresize>
+  </form>
+
+  <ShowValue :value="value" />
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const SubmitOnEnter = Template.bind({});
+SubmitOnEnter.args = {
+  submitOnEnter: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: "Lorem ipsum...",
+  disabled: true,
+};
+
+const TemplateTWTextarea = (args) => ({
+  components: {
+    BaseTextareaAutoresize,
+    ShowValue,
+  },
+  setup() {
+    function onSubmit() {
+      alert("submit");
+    }
+    const value = ref(null);
+    return { args, value, onSubmit };
+  },
+  template: `
+  <form @submit.prevent="onSubmit" class="border-none">
+    <BaseTextareaAutoresize 
+      v-model="value" 
+      v-bind="args" 
+      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>
+
+  <ShowValue :value="value" />
+  `,
+});
+
+export const TWTextarea = TemplateTWTextarea.bind({});
+
+export const Field = createFieldStory({
+  component: BaseTextareaAutoresize,
+  componentName: "BaseTextareaAutoresize",
+  label: "Biography",
+});
+
+const TemplateSizes = (args) => ({
+  components: { BaseTextareaAutoresize },
+  setup() {
+    const value = ref(null);
+    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() {
+    const value = ref(null);
+    const input = ref(null);
+    return { args, value, input };
+  },
+  template: `
+    <BaseTextareaAutoresize ref="input" v-model="value" v-bind="args" class="w-full"></BaseTextareaAutoresize>
+
+    <button @click="input.focus()" class="mt-4 underline">Focus</button>
+  `,
+});
+
+export const Focus = FocusTemplate.bind({});