sprintify-ui 0.0.10 → 0.0.12

package/src/components/BaseDataTable.vue

@@ -20,7 +20,7 @@
         firstLoad,
       }"
     >
-      <BaseCard clipped class="isolate w-full overflow-hidden">
+      <BaseCard clipped class="w-full overflow-hidden">
         <BaseTable
           ref="table"
           :data="items"
@@ -48,7 +48,7 @@
             <BaseTableColumn
               v-slot="{ row }"
               :visible="editButton || deleteButton || $slots.rowActions != null"
-              :always-visible="true"
+              :toggle="false"
             >
               <div class="flex justify-end text-right">
                 <slot name="rowActions" :row="row" />
@@ -58,7 +58,7 @@
                   :to="editUrl(row)"
                   :disabled="!canUpdate(row)"
                 >
-                  <button class="btn btn-white p-2">
+                  <button class="btn btn-white bg-transparent p-2">
                     <BaseIcon
                       icon="heroicons:cog-6-tooth-solid"
                       class="text-slate-500"
@@ -69,7 +69,7 @@
                 <button
                   v-if="deleteButton && deleteUrl"
                   type="button"
-                  class="btn btn-white p-2"
+                  class="btn btn-white bg-transparent p-2"
                   :disabled="!canDelete(row)"
                   @click="onDeleteClick(row)"
                 >
@@ -107,11 +107,8 @@
               class="flex items-center justify-center py-16"
             >
               <div class="flex flex-col items-center">
-                <img
-                  :src="'/img/empty-states/data.svg'"
-                  alt="No data"
-                  width="100"
-                />
+                <BaseEmptyState class="w-32"></BaseEmptyState>
+
                 <p class="mt-3 text-center text-sm text-slate-600">
                   {{ $t('sui.nothing_found') }}
                 </p>
@@ -138,7 +135,7 @@
       <slot name="sidebarTop" v-bind="sidebarProps"></slot>
     </template>
 
-    <template #sidebarBottom>
+    <template v-if="toggleable" #sidebarBottom>
       <div class="mb-3">
         <h3
           class="mb-1 text-xs font-semibold uppercase tracking-wider text-slate-500"
@@ -177,6 +174,7 @@ import BaseTable from './BaseTable.vue';
 import BaseTableColumn from './BaseTableColumn.vue';
 import BaseDataTableToggleColumns from './BaseDataTableToggleColumns.vue';
 import { config } from '@/index';
+import BaseEmptyState from '../svg/BaseEmptyState.vue';
 
 const i18n = useI18n();
 
@@ -196,22 +194,6 @@ const props = defineProps({
     type: String,
   },
 
-  /**
-   * Show/Hide edit button
-   */
-  editButton: {
-    default: true,
-    type: Boolean,
-  },
-
-  /**
-   * Show/Hide delete button
-   */
-  deleteButton: {
-    default: true,
-    type: Boolean,
-  },
-
   /**
    * Route key name for Laravel route model binding
    */
@@ -237,6 +219,14 @@ const props = defineProps({
     type: Object as PropType<DataTableQuery>,
   },
 
+  /**
+   * Show/Hide edit button
+   */
+  editButton: {
+    default: true,
+    type: Boolean,
+  },
+
   /**
    * Edit url for router link
    */
@@ -245,6 +235,14 @@ const props = defineProps({
     type: Function as PropType<(row: CollectionItem) => string>,
   },
 
+  /**
+   * Show/Hide delete button
+   */
+  deleteButton: {
+    default: true,
+    type: Boolean,
+  },
+
   /**
    * Delete endpoint to delete an item
    */
@@ -262,7 +260,7 @@ const props = defineProps({
   },
 
   /**
-   * Has detailed visible
+   * Check is a given row has details
    */
   hasDetailedVisible: {
     default() {
@@ -315,6 +313,14 @@ const props = defineProps({
     type: Boolean,
   },
 
+  /**
+   * Shows the column toggle utility
+   */
+  toggleable: {
+    default: true,
+    type: Boolean,
+  },
+
   /**
    * Actions
    */
@@ -388,7 +394,7 @@ function onDeleteClick(row: CollectionItem) {
     title: i18n.t('sui.delete_record') + '?',
     message: i18n.t('sui.delete_record_description'),
     color: 'danger',
-    closeOnOutsideClick: false,
+    closeOnOutsideClick: true,
     confirmText: i18n.t('sui.yes_delete'),
     onConfirm: () => onDelete(row),
   });

package/src/components/BaseDataTableToggleColumns.vue

@@ -46,7 +46,7 @@ const toggleableColumns = computed(() => {
     return [];
   }
 
-  return tableVue.newColumns.filter((c) => !c.alwaysVisible);
+  return tableVue.newColumns.filter((c) => c.toggle);
 });
 
 function onVisibleColumnChange(event: any, newKey: number) {

package/src/components/BaseDateSelect.vue

@@ -54,13 +54,13 @@
       <div class="w-auto p-0.5">
         <select
           v-model="date.day"
-          :disabled="disabled"
+          :disabled="dayDisabled"
           :required="required"
           data-cy="day"
           class="w-full rounded capitalize"
           :class="[
             {
-              'cursor-not-allowed bg-slate-100 text-slate-500': disabled,
+              'cursor-not-allowed bg-slate-100 text-slate-500': dayDisabled,
             },
             inputClass,
           ]"
@@ -189,4 +189,8 @@ function getDateTime(): DateTime | null {
       padStart(date.value.day + '', 2, '0')
   );
 }
+
+const dayDisabled = computed(() => {
+  return days.value.length == 0 || props.disabled;
+});
 </script>

package/src/components/BaseDescriptionListItem.vue

@@ -1,12 +1,48 @@
 <template>
-  <div class="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
-    <dt class="text-sm font-medium text-slate-500">
+  <div
+    ref="item"
+    :class="{
+      'px-4 py-4': mobile,
+      'grid grid-cols-3 gap-4 py-5 px-6': !mobile,
+    }"
+  >
+    <dt class="text-sm font-medium leading-tight text-slate-500">
       <slot name="left" />
     </dt>
-    <dd class="mt-1 text-sm text-slate-900 sm:col-span-2 sm:mt-0">
+    <dd
+      class="text-sm leading-tight text-slate-900"
+      :class="{
+        'mt-1.5': mobile,
+        'col-span-2': !mobile,
+      }"
+    >
       <slot name="right" />
     </dd>
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useResizeObserver } from '@vueuse/core';
+import { debounce } from 'lodash';
+import { Ref } from 'vue';
+import breakpoints from '../../config/breakpoints.json';
+
+const DEFAULT_WIDTH = 800;
+
+const item = ref(null) as Ref<HTMLElement | null>;
+const width = ref(DEFAULT_WIDTH);
+
+const mobile = computed(() => {
+  return width.value < breakpoints.sm;
+});
+
+function setWidth() {
+  width.value = item.value?.clientWidth ?? DEFAULT_WIDTH;
+}
+
+onMounted(() => {
+  setWidth();
+});
+
+useResizeObserver(item, debounce(setWidth, 50));
+</script>

package/src/components/BaseDialog.stories.js

@@ -0,0 +1,51 @@
+import BaseDialog from './BaseDialog.vue';
+
+export default {
+  title: 'Components/BaseDialog',
+  component: BaseDialog,
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['success', 'info', 'warning', 'danger'],
+    },
+  },
+  args: {
+    message:
+      'Nisi Lorem sunt amet aliqua dolor ullamco deserunt enim irure non ad. Excepteur culpa consectetur dolore culpa sunt aliquip proident quis.',
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseDialog },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseDialog v-bind="args">
+    </BaseDialog>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  title: 'Be careful',
+  color: 'warning',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  title: 'Success',
+  color: 'success',
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  title: 'Error',
+  color: 'danger',
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  title: 'Information',
+  color: 'info',
+};

package/src/components/BaseDialog.vue

@@ -15,22 +15,22 @@
         <BaseIcon
           v-if="color == 'danger'"
           class="h-6 w-6 text-red-600"
-          icon="heroicons:exclaimation-triangle"
+          icon="heroicons:exclamation-triangle-20-solid"
         />
         <BaseIcon
           v-else-if="color == 'warning'"
           class="h-6 w-6 text-yellow-600"
-          icon="heroicons:exclaimation-circle"
+          icon="heroicons:exclamation-triangle-20-solid"
         />
         <BaseIcon
           v-else-if="color == 'success'"
           class="h-6 w-6 text-green-600"
-          icon="heroicons:check-circle"
+          icon="heroicons:check-circle-20-solid"
         />
         <BaseIcon
           v-else
           class="h-6 w-6 text-primary-600"
-          icon="heroicons:information-circle"
+          icon="heroicons:information-circle-20-solid"
         />
       </div>
       <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
@@ -42,7 +42,7 @@
             {{ title }}
           </h3>
           <div class="mt-2">
-            <p class="text-sm text-slate-500">
+            <p class="text-base font-light text-slate-600">
               {{ message }}
             </p>
           </div>
@@ -92,11 +92,17 @@ defineProps({
     type: String,
   },
   confirmText: {
-    default: '',
+    default() {
+      const i18n = useI18n();
+      return i18n.t('sui.confirm');
+    },
     type: String,
   },
   cancelText: {
-    default: '',
+    default() {
+      const i18n = useI18n();
+      return i18n.t('sui.cancel');
+    },
     type: String,
   },
 });

package/src/components/BaseFilePicker.stories.js

@@ -0,0 +1,51 @@
+import BaseFilePicker from './BaseFilePicker.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+export default {
+  title: 'Form/BaseFilePicker',
+  component: BaseFilePicker,
+};
+
+const Template = (args) => ({
+  components: { BaseFilePicker, BaseIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseFilePicker v-bind="args">
+      <template #default="{ dragging, disabled }">
+        <div
+          class="flex w-full items-center space-x-4 rounded-lg border-2 border-dashed border-slate-200 p-5 duration-100"
+          :class="[
+            dragging ? 'bg-slate-100' : 'bg-white',
+            disabled ? 'bg-slate-100 cursor-not-allowed' : 'hover:bg-slate-50',
+          ]"
+        >
+          <div class="rounded-full bg-slate-200 p-2">
+            <BaseIcon
+              icon="heroicons:arrow-up-on-square"
+              class="h-6 w-6"
+              :class="[disabled ? 'text-slate-400' : 'text-slate-500']"
+            />
+          </div>
+          <div class="text-left">
+            <p 
+              class="mb-0 text-sm font-medium leading-tight" 
+              :class="[disabled ? 'text-slate-400' : 'text-slate-900']"
+            >
+              {{ $t("sui.drop_or_click_to_upload") }}
+            </p>
+          </div>
+        </div>
+      </template>
+    </BaseFilePicker>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};

package/src/components/BaseFilePicker.vue

@@ -12,7 +12,7 @@
     @dragenter.prevent="dragging = true"
     @click="pickFile"
   >
-    <slot :selecting="selecting" :dragging="dragging" />
+    <slot :selecting="selecting" :dragging="dragging" :disabled="disabled" />
   </button>
   <input
     ref="input"
@@ -41,7 +41,7 @@ export default defineComponent({
       type: String,
     },
   },
-  emits: ['upload'],
+  emits: ['select'],
   data() {
     return {
       selecting: false,
@@ -63,7 +63,7 @@ export default defineComponent({
     },
     onInputChange() {
       const files = (this.inputElement?.files ?? []) as File[];
-      this.upload(files);
+      this.select(files);
     },
     handleDrop(e: any) {
       if (this.disabled) {
@@ -72,9 +72,9 @@ export default defineComponent({
 
       const files = e?.dataTransfer?.files ?? [];
 
-      this.upload(files);
+      this.select(files);
     },
-    async upload(files: File[]) {
+    async select(files: File[]) {
       if (this.disabled) {
         return;
       }
@@ -88,7 +88,7 @@ export default defineComponent({
       try {
         const file = files[0];
 
-        this.$emit('upload', file);
+        this.$emit('select', file);
       } finally {
         if (this.inputElement) {
           this.inputElement.value = '';

package/src/components/BaseFileUploader.stories.js

@@ -0,0 +1,80 @@
+import BaseFileUploader from './BaseFileUploader.vue';
+import BaseLoadingCover from './BaseLoadingCover.vue';
+import BaseAppNotifications from './BaseAppNotifications.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+export default {
+  title: 'Form/BaseFileUploader',
+  component: BaseFileUploader,
+  args: {
+    buttonClass: 'w-full',
+    acceptedExtensions: ['jpg', 'png'],
+    maxSize: 1024 * 200, // 200kb
+    url: 'https://dummyjson.com/posts/add',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseFileUploader,
+    BaseIcon,
+    BaseLoadingCover,
+    BaseAppNotifications,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseFileUploader v-bind="args">
+      <template #default="{ dragging, disabled, uploading, selecting }">
+        <div
+          class="flex w-full items-center space-x-4 rounded-lg border-2 border-dashed border-slate-200 p-5 duration-100"
+          :class="[
+            dragging ? 'bg-slate-100' : 'bg-white',
+            disabled ? 'bg-slate-100 cursor-not-allowed' : 'hover:bg-slate-50',
+          ]"
+        >
+          <div class="rounded-full bg-slate-200 p-2">
+            <BaseIcon
+              icon="heroicons:arrow-up-on-square"
+              class="h-6 w-6"
+              :class="[disabled ? 'text-slate-400' : 'text-slate-500']"
+            />
+          </div>
+          <div class="text-left">
+            <p 
+              class="mb-0 text-sm font-medium leading-tight" 
+              :class="[disabled ? 'text-slate-400' : 'text-slate-900']"
+            >
+              {{ $t("sui.drop_or_click_to_upload") }}
+            </p>
+            <p class="text-sm text-slate-500 mt-1">Max 200kb</p>
+            <p class="text-sm text-slate-500">.jpg, .png</p>
+          </div>
+        </div>
+      </template>
+      <template #loading="{ dragging, disabled, uploading, selecting }">
+        <BaseLoadingCover
+          :model-value="args.loading || uploading || selecting"
+          :delay="0"
+          icon-class="text-primary-600 w-6 h-6"
+          backdrop-class="bg-white opacity-60"
+        />
+      </template>
+    </BaseFileUploader>
+    <BaseAppNotifications></BaseAppNotifications>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  loading: true,
+};

package/src/components/BaseFileUploader.vue

@@ -4,7 +4,7 @@
       :button-class="buttonClass"
       :disabled="uploading || disabled"
       :accept="accept"
-      @upload="onPictureUpload"
+      @select="onFileSelect"
     >
       <template #default="slotProps">
         <slot
@@ -22,6 +22,7 @@
           :disabled="slotProps.disabled"
         >
           <BaseLoadingCover
+            :delay="0"
             icon-class="text-primary-600 w-6 h-6"
             :model-value="loading || uploading || slotProps.selecting"
           />
@@ -37,6 +38,8 @@ import { PropType } from 'vue';
 import { UploadedFile } from '@/types/UploadedFile';
 import { toHumanList, fileSizeFormat } from '../utils';
 import { useNotificationsStore } from '../stores/notifications';
+import BaseLoadingCover from './BaseLoadingCover.vue';
+import BaseFilePicker from './BaseFilePicker.vue';
 
 const http = config.http;
 const i18n = useI18n();
@@ -88,8 +91,15 @@ const emit = defineEmits([
 
 const uploading = ref(false);
 
-async function onPictureUpload(file: File) {
+async function onFileSelect(file: File) {
+  if (uploading.value) {
+    return;
+  }
+
+  uploading.value = true;
+
   if (!(await props.beforeUpload())) {
+    uploading.value = false;
     return;
   }
 
@@ -102,6 +112,8 @@ async function onPictureUpload(file: File) {
           x: fileSizeFormat(props.maxSize),
         }),
       });
+
+      uploading.value = false;
       return;
     }
 
@@ -124,6 +136,8 @@ async function onPictureUpload(file: File) {
             toHumanList(props.acceptedExtensions, i18n.t('sui.or')) +
             '.',
         });
+
+        uploading.value = false;
         return;
       }
     }
@@ -132,7 +146,6 @@ async function onPictureUpload(file: File) {
 
     formData.append('file', file);
 
-    uploading.value = true;
     emit('upload:start');
 
     const response = await http.post(props.url ?? config.upload_url, formData);

package/src/components/BaseInput.stories.js

@@ -0,0 +1,46 @@
+import BaseInput from './BaseInput.vue';
+
+export default {
+  title: 'Form/BaseInput',
+  component: BaseInput,
+  args: {
+    required: true,
+    type: 'text',
+    name: 'name',
+    class: 'w-full',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseInput,
+  },
+  setup() {
+    const value = ref('');
+    return { args, value };
+  },
+  template: `
+  <form @submit.prevent="" class="border-none">
+    <BaseInput v-model="value" v-bind="args"></BaseInput>
+  </form>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  placeholder: 'Enter your name',
+};
+
+export const Number = Template.bind({});
+Number.args = {
+  type: 'number',
+  step: 0.1,
+  placeholder: 'Enter a number',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: 'Disabled input!',
+  disabled: true,
+  placeholder: 'Enter your name',
+};

package/src/components/BaseInput.vue

@@ -4,10 +4,11 @@
     :value="modelValue"
     :type="type"
     :name="name"
+    :step="step"
     :disabled="disabled"
     :placeholder="placeholder"
     :required="required"
-    class="rounded"
+    class="rounded border-slate-300 disabled:cursor-not-allowed disabled:text-slate-300"
     :autocomplete="autocomplete ? 'on' : 'off'"
     @keydown.enter="onEnter"
     @input="$emit('update:modelValue', transformInputValue($event))"
@@ -20,17 +21,24 @@ import { PropType } from 'vue';
 
 const props = defineProps({
   modelValue: {
-    required: true,
+    default: '',
     type: [String, Number, null] as PropType<string | number | null>,
   },
   type: {
     type: String,
     default: 'text',
   },
+  step: {
+    default: undefined,
+    type: Number,
+  },
   autocomplete: {
     default: true,
     type: Boolean,
   },
+  /**
+   * Prevents submit when pressing 'Enter' while the input is focused.
+   */
   preventSubmit: {
     default: false,
     type: Boolean,