sprintify-ui 0.2.18 → 0.2.21

package/src/components/BaseTextareaAutoresize.vue

@@ -1,166 +1,166 @@
-<template>
-  <div
-    ref="wrapper"
-    class="grid"
-    :style="{ maxHeight: maxHeight + 'px' }"
-  >
-    <textarea
-      ref="textareaRef"
-      :value="modelValue ?? ''"
-      :name="nameInternal"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :required="requiredInternal"
-      class="resize-none"
-      :class="textareaClasses"
-      :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="textareaClasses"
-      :style="{
-        content: DIV_CONTENT,
-        maxHeight: maxHeight + 'px',
-        gridArea: BASE_GRID_AREA,
-      }"
-    >
-      {{ modelValue }} {{ ' ' }}
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useField } from '@/composables/field';
-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';
-
-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, null] as PropType<string | null>,
-  },
-  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,
-  },
-  twTextarea: {
-    default: '',
-    type: [String, Array] as PropType<string | string[]>,
-  },
-});
-
-const emit = defineEmits(['update:modelValue', 'submit', 'focus', 'input']);
-
-const textareaRef = ref<null | HTMLTextAreaElement>(null);
-
-const { nameInternal, requiredInternal, hasErrorInternal } =
-  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);
-}
-
-const textareaClasses = computed(() => {
-  return twMerge(
-    [
-      BASE_TEXTAREA_CLASSES,
-      hasErrorInternal.value ? 'border-red-500' : 'border-slate-300',
-    ],
-    props.twTextarea
-  );
-});
-
-function focus() {
-  textareaRef.value?.focus();
-}
-
-function blur() {
-  textareaRef.value?.blur();
-}
-
-defineExpose({
-  focus,
-  blur,
-});
-</script>
+<template>
+  <div
+    ref="wrapper"
+    class="grid"
+    :style="{ maxHeight: maxHeight + 'px' }"
+  >
+    <textarea
+      ref="textareaRef"
+      :value="modelValue ?? ''"
+      :name="nameInternal"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :required="requiredInternal"
+      class="resize-none"
+      :class="textareaClasses"
+      :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="textareaClasses"
+      :style="{
+        content: DIV_CONTENT,
+        maxHeight: maxHeight + 'px',
+        gridArea: BASE_GRID_AREA,
+      }"
+    >
+      {{ modelValue }} {{ ' ' }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useField } from '@/composables/field';
+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';
+
+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, null] as PropType<string | null>,
+  },
+  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,
+  },
+  twTextarea: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'submit', 'focus', 'input']);
+
+const textareaRef = ref<null | HTMLTextAreaElement>(null);
+
+const { nameInternal, requiredInternal, hasErrorInternal } =
+  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);
+}
+
+const textareaClasses = computed(() => {
+  return twMerge(
+    [
+      BASE_TEXTAREA_CLASSES,
+      hasErrorInternal.value ? 'border-red-500' : 'border-slate-300',
+    ],
+    props.twTextarea
+  );
+});
+
+function focus() {
+  textareaRef.value?.focus();
+}
+
+function blur() {
+  textareaRef.value?.blur();
+}
+
+defineExpose({
+  focus,
+  blur,
+});
+</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: 'Data/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,35 +1,35 @@
-<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>

package/src/components/BaseTimelineItem.stories.js

@@ -1,78 +1,78 @@
-import BaseTimelineItem from './BaseTimelineItem.vue';
-
-const colors = [
-  'primary',
-  'success',
-  'danger',
-  'warning',
-  'info',
-  'grey',
-  'black',
-];
-
-export default {
-  title: 'Components/BaseTimelineItem',
-  component: BaseTimelineItem,
-};
-
-const Template = (args) => ({
-  components: { BaseTimelineItem },
-  setup() {
-    return { args };
-  },
-  template: `<div class="max-w-md"><BaseTimelineItem v-bind="args"/></div>`,
-});
-
-const ColorsTemplate = (args) => ({
-  components: { BaseTimelineItem },
-  setup() {
-    const items = colors.map((color) => {
-      return {
-        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: color,
-        date: '15 Jan',
-      };
-    });
-    return { args, items };
-  },
-  template: `
-  <div class="max-w-md">
-  <ul role="list" class="-mb-8">
-  <li v-for="(item, index) in items" :key="index">
-  <p class="text-xs text-slate-600 leading-tight mb-4">{{ item.color }}</p>
-        <div class="relative pb-8">
-          <BaseTimelineItem :item="item" />
-        </div>
-      </li>
-      </ul>
-      </div>
-  `,
-});
-
-export const Simple = Template.bind({});
-Simple.args = {
-  item: {
-    title: 'Advanced to phone screening by Bethany Blake',
-    icon: 'heroicons:shield-check-20-solid',
-    description: '',
-    color: 'warning',
-    date: '15 Jan',
-  },
-};
-
-export const WithDescription = Template.bind({});
-WithDescription.args = {
-  item: {
-    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: 'primary',
-    date: '15 Jan',
-  },
-};
-
-export const Colors = ColorsTemplate.bind({});
+import BaseTimelineItem from './BaseTimelineItem.vue';
+
+const colors = [
+  'primary',
+  'success',
+  'danger',
+  'warning',
+  'info',
+  'grey',
+  'black',
+];
+
+export default {
+  title: 'Data/BaseTimelineItem',
+  component: BaseTimelineItem,
+};
+
+const Template = (args) => ({
+  components: { BaseTimelineItem },
+  setup() {
+    return { args };
+  },
+  template: `<div class="max-w-md"><BaseTimelineItem v-bind="args"/></div>`,
+});
+
+const ColorsTemplate = (args) => ({
+  components: { BaseTimelineItem },
+  setup() {
+    const items = colors.map((color) => {
+      return {
+        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: color,
+        date: '15 Jan',
+      };
+    });
+    return { args, items };
+  },
+  template: `
+  <div class="max-w-md">
+  <ul role="list" class="-mb-8">
+  <li v-for="(item, index) in items" :key="index">
+  <p class="text-xs text-slate-600 leading-tight mb-4">{{ item.color }}</p>
+        <div class="relative pb-8">
+          <BaseTimelineItem :item="item" />
+        </div>
+      </li>
+      </ul>
+      </div>
+  `,
+});
+
+export const Simple = Template.bind({});
+Simple.args = {
+  item: {
+    title: 'Advanced to phone screening by Bethany Blake',
+    icon: 'heroicons:shield-check-20-solid',
+    description: '',
+    color: 'warning',
+    date: '15 Jan',
+  },
+};
+
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+  item: {
+    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: 'primary',
+    date: '15 Jan',
+  },
+};
+
+export const Colors = ColorsTemplate.bind({});