sprintify-ui 0.2.18 → 0.2.21

package/src/components/BaseTextarea.vue

@@ -1,103 +1,103 @@
-<template>
-  <textarea
-    ref="textareaRef"
-    :value="modelValue ?? undefined"
-    :type="type"
-    :name="nameInternal"
-    :placeholder="placeholder"
-    :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"
-    @input="emitUpdate(transformInputValue($event))"
-  />
-</template>
-
-<script lang="ts" setup>
-import { useField } from '@/composables/field';
-import { get, isString } from 'lodash';
-import { PropType } from 'vue';
-
-const props = defineProps({
-  modelValue: {
-    default: undefined,
-    type: [String, null, undefined] as PropType<string | null | undefined>,
-  },
-  type: {
-    type: String,
-    default: 'text',
-  },
-  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: false,
-    type: Boolean,
-  },
-  rows: {
-    default: undefined,
-    type: Number,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
-  useField({
-    name: computed(() => props.name),
-    required: computed(() => props.required),
-    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();
-}
-
-defineExpose({
-  focus,
-  blur,
-});
-</script>
+<template>
+  <textarea
+    ref="textareaRef"
+    :value="modelValue ?? undefined"
+    :type="type"
+    :name="nameInternal"
+    :placeholder="placeholder"
+    :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"
+    @input="emitUpdate(transformInputValue($event))"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useField } from '@/composables/field';
+import { get, isString } from 'lodash';
+import { PropType } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [String, null, undefined] as PropType<string | null | undefined>,
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  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: false,
+    type: Boolean,
+  },
+  rows: {
+    default: undefined,
+    type: Number,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
+  useField({
+    name: computed(() => props.name),
+    required: computed(() => props.required),
+    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();
+}
+
+defineExpose({
+  focus,
+  blur,
+});
+</script>

package/src/components/BaseTextareaAutoresize.stories.js

@@ -1,103 +1,103 @@
-import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
-import ShowValue from '@/../.storybook/components/ShowValue.vue';
-import { createFieldStory } from '../../.storybook/utils';
-
-export default {
-  title: 'Form/BaseTextareaAutoresize',
-  component: BaseTextareaAutoresize,
-  args: {
-    name: 'name',
-    placeholder: 'Describe your complete life in 4 sentences...',
-  },
-};
-
-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 shadow rounded" 
-      tw-textarea="p-5 bg-slate-100 text-slate-700 focus:ring-blue-200 focus:ring-4 text-sm"
-      @submit="onSubmit"
-    ></BaseTextareaAutoresize>
-  </form>
-
-  <ShowValue :value="value" />
-  `,
-});
-
-export const TWTextarea = TemplateTWTextarea.bind({});
-
-export const Field = createFieldStory({
-  component: BaseTextareaAutoresize,
-  componentName: 'BaseTextareaAutoresize',
-  label: 'Biography',
-});
-
-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>
-  `,
-});
-
+import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+import { createFieldStory } from '../../.storybook/utils';
+
+export default {
+  title: 'Form/BaseTextareaAutoresize',
+  component: BaseTextareaAutoresize,
+  args: {
+    name: 'name',
+    placeholder: 'Describe your complete life in 4 sentences...',
+  },
+};
+
+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 shadow rounded" 
+      tw-textarea="p-5 bg-slate-100 text-slate-700 focus:ring-blue-200 focus:ring-4 text-sm"
+      @submit="onSubmit"
+    ></BaseTextareaAutoresize>
+  </form>
+
+  <ShowValue :value="value" />
+  `,
+});
+
+export const TWTextarea = TemplateTWTextarea.bind({});
+
+export const Field = createFieldStory({
+  component: BaseTextareaAutoresize,
+  componentName: 'BaseTextareaAutoresize',
+  label: 'Biography',
+});
+
+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({});