sprintify-ui 0.1.17 → 0.1.18

package/src/components/BaseTextareaAutoresize.stories.js

@@ -1,58 +1,58 @@
-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: 'bio',
-    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,
-};
-
-export const Field = createFieldStory({
-  component: BaseTextareaAutoresize,
-  componentName: 'BaseTextareaAutoresize',
-  label: 'Biography',
-});
+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: 'bio',
+    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,
+};
+
+export const Field = createFieldStory({
+  component: BaseTextareaAutoresize,
+  componentName: 'BaseTextareaAutoresize',
+  label: 'Biography',
+});

package/src/components/BaseTextareaAutoresize.vue

@@ -1,140 +1,140 @@
-<template>
-  <div
-    ref="wrapper"
-    class="wrapper grid"
-    :style="{ maxHeight: maxHeight + 'px' }"
-  >
-    <textarea
-      :value="modelValue"
-      :name="nameInternal"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :required="requiredInternal"
-      class="resize-none"
-      :class="[
-        BASE_TEXTAREA_CLASSES,
-        hasErrorInternal ? 'border-red-500' : 'border-slate-300',
-      ]"
-      :style="{ maxHeight: maxHeight + 'px', gridArea: BASE_GRID_AREA }"
-      :rows="rows"
-      @input="onInput"
-      @keyup="onKeyUp"
-      @keydown="onKeyDown"
-      @focus="onFocus"
-    />
-    <div
-      class="invisible whitespace-pre-wrap"
-      :class="[
-        BASE_TEXTAREA_CLASSES,
-        hasErrorInternal ? 'border-red-500' : 'border-slate-300',
-      ]"
-      :style="{
-        content: DIV_CONTENT,
-        maxHeight: maxHeight + 'px',
-        gridArea: BASE_GRID_AREA,
-      }"
-    >
-      {{ modelValue }} {{ ' ' }}
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useField } from '@/composables/field';
-
-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';
-
-const BASE_GRID_AREA = '1 / 1 / 2 / 2';
-
-/* Note the weird space! Needed to prevent jumpy behavior */
-const DIV_CONTENT = "attr(data-replicated-value) ' '";
-
-const props = defineProps({
-  modelValue: {
-    default: '',
-    type: String,
-  },
-  placeholder: {
-    default: '',
-    type: String,
-  },
-  name: {
-    required: true,
-    type: String,
-  },
-  required: {
-    default: false,
-    type: Boolean,
-  },
-  maxHeight: {
-    default: 100,
-    type: Number,
-  },
-  rows: {
-    default: 1,
-    type: Number,
-  },
-  /**
-   * Setting this to true will trigger the 'submit' event while pressing Enter.
-   * Users will be able to add a line break while pressing Shift + Enter.
-   */
-  submitOnEnter: {
-    default: false,
-    type: Boolean,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits(['update:modelValue', 'submit', 'focus', 'input']);
-
-const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
-  useField({
-    name: computed(() => props.name),
-    required: computed(() => props.required),
-    hasError: computed(() => props.hasError),
-    emit: emit,
-  });
-
-const wrapper = ref<null | HTMLDivElement>(null);
-
-const keys = {} as { [key: string]: boolean };
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function onInput(e: any) {
-  const value = e.target.value ?? '';
-  emit('update:modelValue', value);
-  emit('input', e);
-}
-
-function onKeyDown(event: KeyboardEvent) {
-  keys[event.key] = true;
-
-  if (keys['Enter'] && !keys['Shift'] && props.submitOnEnter) {
-    // If submit triggers alert, Enter wont be delete from keys,
-    // manually remove it here
-    delete keys['Enter'];
-
-    // Submit event to listen to
-    emit('submit');
-
-    // Prevent adding an EOL the the textarea
-    event.preventDefault();
-  }
-}
-
-function onKeyUp(event: KeyboardEvent) {
-  delete keys[event.key];
-}
-
-function onFocus(event: FocusEvent) {
-  emit('focus', event);
-}
-</script>
+<template>
+  <div
+    ref="wrapper"
+    class="wrapper grid"
+    :style="{ maxHeight: maxHeight + 'px' }"
+  >
+    <textarea
+      :value="modelValue"
+      :name="nameInternal"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :required="requiredInternal"
+      class="resize-none"
+      :class="[
+        BASE_TEXTAREA_CLASSES,
+        hasErrorInternal ? 'border-red-500' : 'border-slate-300',
+      ]"
+      :style="{ maxHeight: maxHeight + 'px', gridArea: BASE_GRID_AREA }"
+      :rows="rows"
+      @input="onInput"
+      @keyup="onKeyUp"
+      @keydown="onKeyDown"
+      @focus="onFocus"
+    />
+    <div
+      class="invisible whitespace-pre-wrap"
+      :class="[
+        BASE_TEXTAREA_CLASSES,
+        hasErrorInternal ? 'border-red-500' : 'border-slate-300',
+      ]"
+      :style="{
+        content: DIV_CONTENT,
+        maxHeight: maxHeight + 'px',
+        gridArea: BASE_GRID_AREA,
+      }"
+    >
+      {{ modelValue }} {{ ' ' }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useField } from '@/composables/field';
+
+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';
+
+const BASE_GRID_AREA = '1 / 1 / 2 / 2';
+
+/* Note the weird space! Needed to prevent jumpy behavior */
+const DIV_CONTENT = "attr(data-replicated-value) ' '";
+
+const props = defineProps({
+  modelValue: {
+    default: '',
+    type: String,
+  },
+  placeholder: {
+    default: '',
+    type: String,
+  },
+  name: {
+    required: true,
+    type: String,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  maxHeight: {
+    default: 100,
+    type: Number,
+  },
+  rows: {
+    default: 1,
+    type: Number,
+  },
+  /**
+   * Setting this to true will trigger the 'submit' event while pressing Enter.
+   * Users will be able to add a line break while pressing Shift + Enter.
+   */
+  submitOnEnter: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'submit', 'focus', 'input']);
+
+const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
+  useField({
+    name: computed(() => props.name),
+    required: computed(() => props.required),
+    hasError: computed(() => props.hasError),
+    emit: emit,
+  });
+
+const wrapper = ref<null | HTMLDivElement>(null);
+
+const keys = {} as { [key: string]: boolean };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function onInput(e: any) {
+  const value = e.target.value ?? '';
+  emit('update:modelValue', value);
+  emit('input', e);
+}
+
+function onKeyDown(event: KeyboardEvent) {
+  keys[event.key] = true;
+
+  if (keys['Enter'] && !keys['Shift'] && props.submitOnEnter) {
+    // If submit triggers alert, Enter wont be delete from keys,
+    // manually remove it here
+    delete keys['Enter'];
+
+    // Submit event to listen to
+    emit('submit');
+
+    // Prevent adding an EOL the the textarea
+    event.preventDefault();
+  }
+}
+
+function onKeyUp(event: KeyboardEvent) {
+  delete keys[event.key];
+}
+
+function onFocus(event: FocusEvent) {
+  emit('focus', event);
+}
+</script>

package/src/components/BaseTimeline.stories.js

@@ -1,53 +1,53 @@
-import BaseTimeline from './BaseTimeline.vue';
-
-export default {
-  title: 'Components/BaseTimeline',
-  component: BaseTimeline,
-};
-
-const Template = (args) => ({
-  components: { BaseTimeline },
-  setup() {
-    return { args };
-  },
-  template: `<div class="max-w-md"><BaseTimeline v-bind="args"/></div>`,
-});
-
-const items = [
-  {
-    title: 'Advanced to phone screening by Bethany Blake',
-    icon: 'heroicons:shield-check-20-solid',
-    description:
-      'Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.',
-    color: null,
-    date: '15 Jan',
-  },
-  {
-    title: 'Advanced to phone screening by Bethany Blake',
-    icon: 'heroicons:shield-check-20-solid',
-    description:
-      'Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.',
-    color: 'danger',
-    date: null,
-  },
-  {
-    title: 'Advanced to phone screening by Bethany Blake',
-    icon: 'heroicons:shield-check-20-solid',
-    description:
-      'Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.',
-    color: 'success',
-    date: '15 Jan',
-  },
-  {
-    title: 'Advanced to phone screening by Bethany Blake',
-    icon: 'heroicons:shield-check-20-solid',
-    description: '',
-    color: 'info',
-    date: '15 Jan',
-  },
-];
-
-export const Demo = Template.bind({});
-Demo.args = {
-  items: items,
-};
+import BaseTimeline from './BaseTimeline.vue';
+
+export default {
+  title: 'Components/BaseTimeline',
+  component: BaseTimeline,
+};
+
+const Template = (args) => ({
+  components: { BaseTimeline },
+  setup() {
+    return { args };
+  },
+  template: `<div class="max-w-md"><BaseTimeline v-bind="args"/></div>`,
+});
+
+const items = [
+  {
+    title: 'Advanced to phone screening by Bethany Blake',
+    icon: 'heroicons:shield-check-20-solid',
+    description:
+      'Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.',
+    color: null,
+    date: '15 Jan',
+  },
+  {
+    title: 'Advanced to phone screening by Bethany Blake',
+    icon: 'heroicons:shield-check-20-solid',
+    description:
+      'Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.',
+    color: 'danger',
+    date: null,
+  },
+  {
+    title: 'Advanced to phone screening by Bethany Blake',
+    icon: 'heroicons:shield-check-20-solid',
+    description:
+      'Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.',
+    color: 'success',
+    date: '15 Jan',
+  },
+  {
+    title: 'Advanced to phone screening by Bethany Blake',
+    icon: 'heroicons:shield-check-20-solid',
+    description: '',
+    color: 'info',
+    date: '15 Jan',
+  },
+];
+
+export const Demo = Template.bind({});
+Demo.args = {
+  items: items,
+};

package/src/components/BaseTimeline.vue

@@ -1,29 +1,29 @@
-<template>
-  <div class="flow-root">
-    <ul role="list" class="-mb-8">
-      <li v-for="(item, index) in items" :key="index">
-        <div class="relative pb-8">
-          <span
-            v-if="index != items.length - 1"
-            class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-slate-200"
-            aria-hidden="true"
-          />
-          <BaseTimelineItem :item="item" />
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { TimelineItem } from '../types/TimelineItem';
-import { PropType } from 'vue';
-import BaseTimelineItem from './BaseTimelineItem.vue';
-
-defineProps({
-  items: {
-    required: true,
-    type: Array as PropType<TimelineItem[]>,
-  },
-});
-</script>
+<template>
+  <div class="flow-root">
+    <ul role="list" class="-mb-8">
+      <li v-for="(item, index) in items" :key="index">
+        <div class="relative pb-8">
+          <span
+            v-if="index != items.length - 1"
+            class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-slate-200"
+            aria-hidden="true"
+          />
+          <BaseTimelineItem :item="item" />
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { TimelineItem } from '../types/TimelineItem';
+import { PropType } from 'vue';
+import BaseTimelineItem from './BaseTimelineItem.vue';
+
+defineProps({
+  items: {
+    required: true,
+    type: Array as PropType<TimelineItem[]>,
+  },
+});
+</script>