sprintify-ui 0.0.9 → 0.0.11

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,11 @@ const emit = defineEmits([
 
 const uploading = ref(false);
 
-async function onPictureUpload(file: File) {
+async function onFileSelect(file: File) {
+  uploading.value = true;
+
   if (!(await props.beforeUpload())) {
+    uploading.value = false;
     return;
   }
 
@@ -102,6 +108,8 @@ async function onPictureUpload(file: File) {
           x: fileSizeFormat(props.maxSize),
         }),
       });
+
+      uploading.value = false;
       return;
     }
 
@@ -124,6 +132,8 @@ async function onPictureUpload(file: File) {
             toHumanList(props.acceptedExtensions, i18n.t('sui.or')) +
             '.',
         });
+
+        uploading.value = false;
         return;
       }
     }
@@ -132,7 +142,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/BaseLoadingCover.vue

@@ -12,25 +12,17 @@
       class="absolute inset-0 flex h-full w-full items-center justify-center"
     >
       <div class="absolute h-full w-full" :class="backdropClass" />
-      <svg
-        v-if="icon == 'line'"
-        class="animate-spin"
-        :class="iconClass"
-        viewBox="0 0 24 24"
-      >
-        <path
-          fill="currentColor"
-          d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
-        />
-      </svg>
-      <BaseSpinner v-else-if="icon == 'spinner'" :class="iconClass" />
+
+      <BaseSpinnerSmall v-if="size == 'sm'" :class="iconClass" />
+      <BaseSpinnerLarge v-else-if="size == 'lg'" :class="iconClass" />
     </div>
   </Transition>
 </template>
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
-import BaseSpinner from './BaseSpinner.vue';
+import BaseSpinnerSmall from '../svg/BaseSpinnerSmall.vue';
+import BaseSpinnerLarge from '../svg/BaseSpinnerLarge.vue';
 
 const props = defineProps({
   modelValue: {
@@ -45,9 +37,9 @@ const props = defineProps({
     default: 'text-blue-500 w-10 h-10',
     type: String,
   },
-  icon: {
-    default: 'line',
-    type: String as PropType<'line' | 'spinner'>,
+  size: {
+    default: 'sm',
+    type: String as PropType<'sm' | 'lg'>,
   },
   duration: {
     default: 'duration-300',

package/src/components/BaseTable.vue

@@ -6,7 +6,7 @@
 
     <div class="flex flex-col">
       <div
-        class="isolate overflow-x-auto overflow-y-auto"
+        class="overflow-x-auto overflow-y-auto"
         :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"
       >
         <div class="inline-block min-w-full align-middle">
@@ -17,17 +17,19 @@
                   <th v-if="showDetailRowIcon" class="th" />
                   <th
                     v-if="checkable && checkboxPosition === 'left'"
-                    class="th pl-3"
+                    class="th py-0 pl-3"
                     align="left"
                   >
-                    <input
-                      type="checkbox"
-                      autocomplete="off"
-                      :checked="isAllChecked"
-                      :disabled="isAllUncheckable"
-                      :class="checkboxStyle"
-                      @change="checkAll"
-                    />
+                    <div class="flex items-center">
+                      <input
+                        type="checkbox"
+                        autocomplete="off"
+                        :checked="isAllChecked"
+                        :disabled="isAllUncheckable"
+                        :class="checkboxStyle"
+                        @change="checkAll"
+                      />
+                    </div>
                   </th>
                   <th
                     v-for="(column, index) in visibleColumns"
@@ -166,14 +168,16 @@
                       class="pl-3"
                       :class="borderBottomClasses(index, row)"
                     >
-                      <input
-                        type="checkbox"
-                        autocomplete="off"
-                        :disabled="!isRowCheckable(row)"
-                        :checked="isRowChecked(row)"
-                        :class="checkboxStyle"
-                        @click="checkRow(row, index, $event as MouseEvent)"
-                      />
+                      <div class="flex items-center">
+                        <input
+                          type="checkbox"
+                          autocomplete="off"
+                          :disabled="!isRowCheckable(row)"
+                          :checked="isRowChecked(row)"
+                          :class="checkboxStyle"
+                          @click="checkRow(row, index, $event as MouseEvent)"
+                        />
+                      </div>
                     </td>
 
                     <SlotComponent
@@ -239,12 +243,25 @@
             </table>
 
             <slot name="loading">
-              <BaseLoadingCover
-                :delay="0"
-                :model-value="loading"
-                backdrop-class="bg-white bg-opacity-50"
-              />
-              <div v-if="loading" class="h-[300px]" />
+              <Transition
+                enter-active-class="transition ease-out duration-200"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="transition ease-in duration-200"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+              >
+                <div
+                  v-if="loading"
+                  class="absolute inset-0 flex h-full w-full items-start justify-center"
+                >
+                  <div class="absolute h-full w-full bg-white bg-opacity-60" />
+
+                  <div class="pt-20">
+                    <BaseSpinnerLarge class="h-10 w-10 text-blue-500" />
+                  </div>
+                </div>
+              </Transition>
             </slot>
           </div>
         </div>
@@ -266,8 +283,8 @@ import { BaseTableColumn, MenuItemInterface, Row } from '@/types/types';
 import SlotComponent from './SlotComponent';
 import { useResizeObserver } from '@vueuse/core';
 import { debounce, isArray } from 'lodash';
-import BaseLoadingCover from './BaseLoadingCover.vue';
 import BaseMenu from './BaseMenu.vue';
+import BaseSpinnerLarge from '../svg/BaseSpinnerLarge.vue';
 
 const checkboxStyle =
   'disabled:bg-slate-100 disabled:border-slate-300 disabled:cursor-not-allowed border-slate-400 rounded';
@@ -406,10 +423,6 @@ const visibleColumns = computed(() => {
       return false;
     }
 
-    if (column.alwaysVisible) {
-      return true;
-    }
-
     if (!isArray(props.visibleColumns)) {
       return true;
     }

package/src/components/BaseTableColumn.vue

@@ -44,9 +44,9 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-    alwaysVisible: {
+    toggle: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     optional: {
       type: Boolean,

package/src/svg/BaseEmptyState.vue

@@ -0,0 +1,34 @@
+<template>
+  <svg viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      class="text-slate-100"
+      d="M75 150C116.421 150 150 116.421 150 75C150 33.5786 116.421 0 75 0C33.5786 0 0 33.5786 0 75C0 116.421 33.5786 150 75 150Z"
+      fill="currentColor"
+    />
+    <path
+      class="text-white"
+      d="M120 150H30V53C34.242 52.9952 38.3089 51.308 41.3084 48.3085C44.308 45.3089 45.9952 41.242 46 37H104C103.996 39.1014 104.408 41.1828 105.213 43.1238C106.018 45.0648 107.2 46.8268 108.691 48.308C110.172 49.7991 111.934 50.9816 113.875 51.787C115.817 52.5924 117.898 53.0047 120 53V150Z"
+      fill="currentColor"
+    />
+    <path
+      class="text-slate-300"
+      d="M75 102C88.2548 102 99 91.2548 99 78C99 64.7452 88.2548 54 75 54C61.7452 54 51 64.7452 51 78C51 91.2548 61.7452 102 75 102Z"
+      fill="currentColor"
+    />
+    <path
+      class="text-white"
+      d="M83.4853 89.3138L75 80.8286L66.5147 89.3138L63.6863 86.4854L72.1716 78.0001L63.6863 69.5148L66.5147 66.6864L75 75.1717L83.4853 66.6864L86.3137 69.5148L77.8284 78.0001L86.3137 86.4854L83.4853 89.3138Z"
+      fill="currentColor"
+    />
+    <path
+      class="text-slate-200"
+      d="M88 108H62C60.3431 108 59 109.343 59 111C59 112.657 60.3431 114 62 114H88C89.6569 114 91 112.657 91 111C91 109.343 89.6569 108 88 108Z"
+      fill="currentColor"
+    />
+    <path
+      class="text-slate-200"
+      d="M97 120H53C51.3431 120 50 121.343 50 123C50 124.657 51.3431 126 53 126H97C98.6569 126 100 124.657 100 123C100 121.343 98.6569 120 97 120Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/svg/BaseSpinnerSmall.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg class="animate-spin" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
+  </svg>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped></style>

package/src/types/types.ts

@@ -99,7 +99,7 @@ export interface BaseTableColumn {
   searchable: boolean;
   sortable: boolean;
   visible: boolean;
-  alwaysVisible: boolean;
+  toggle: boolean;
   optional: boolean;
   width: number;
   style: {

package/src/assets/button.css

@@ -1,80 +0,0 @@
-.btn {
-	@apply text-center relative inline-block cursor-pointer select-none rounded-md border px-4 py-2.5 text-sm transition-colors duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
-	@apply btn-default;
-}
-
-.btn.btn-xs {
-	@apply px-2 py-1 text-xs leading-4;
-}
-
-.btn.btn-sm {
-	@apply px-3 py-2 text-sm leading-4;
-}
-
-.btn.btn-md {
-	@apply px-4 py-2.5 text-sm;
-}
-
-.btn.btn-lg {
-	@apply px-5 py-3 text-base;
-}
-
-.btn.btn-xl {
-	@apply px-6 py-4 text-base;
-}
-
-.btn-default {
-	@apply border-slate-300 bg-white text-slate-600 hover:bg-slate-100 focus-visible:ring-primary-500 disabled:hover:bg-white;
-}
-
-.btn.btn-primary {
-	@apply border-transparent bg-primary-500 text-white hover:bg-primary-700 focus-visible:ring-primary-500 disabled:hover:bg-primary-500;
-}
-
-.btn.btn-secondary {
-	@apply border-transparent bg-primary-200 text-primary-700 hover:bg-primary-100 focus-visible:ring-primary-500 disabled:hover:bg-primary-100;
-}
-
-.btn.btn-secondary-outline {
-	@apply border-primary-400 bg-primary-200 text-primary-700 hover:bg-primary-100 focus-visible:ring-primary-500 disabled:hover:bg-primary-100;
-}
-
-.btn.btn-slate-100 {
-	@apply border-transparent bg-slate-100 text-slate-700 hover:bg-slate-200 focus-visible:ring-slate-300 disabled:hover:bg-slate-50;
-}
-
-.btn.btn-slate-100-outline {
-	@apply border-slate-200 bg-slate-100 text-slate-700 hover:bg-slate-50 focus-visible:ring-slate-300 disabled:hover:bg-slate-50;
-}
-
-.btn.btn-slate-200 {
-	@apply border-transparent bg-slate-200 text-slate-800 hover:bg-slate-300 focus-visible:ring-slate-300 disabled:hover:bg-slate-50;
-}
-
-.btn.btn-slate-200-outline {
-	@apply border-slate-300 bg-slate-200 text-slate-800 hover:bg-slate-300 focus-visible:ring-slate-300 disabled:hover:bg-slate-50;
-}
-
-.btn.btn-white {
-	@apply border-transparent bg-white text-slate-600 hover:bg-slate-100 focus-visible:ring-primary-500 disabled:hover:bg-white;
-}
-
-.btn.btn-white-outline {
-	@apply btn-default;
-}
-
-.btn.btn-white-outline-primary {
-	@apply border-primary-400 bg-white text-primary-600 hover:bg-primary-100 focus-visible:ring-primary-500 disabled:hover:bg-white;
-}
-
-.btn.btn-black {
-	@apply border-transparent bg-slate-900 text-white hover:bg-slate-800 focus-visible:ring-slate-900 disabled:hover:bg-slate-900;
-}
-
-.btn.btn-danger {
-	@apply border-transparent bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-300 disabled:hover:bg-red-600;
-}
-
-.btn.btn-warning {
-	@apply border-transparent bg-yellow-400 text-yellow-900 hover:bg-yellow-200 focus-visible:ring-yellow-300 disabled:hover:bg-yellow-300;
-}