sprintify-ui 0.0.9 → 0.0.11

package/src/components/BaseDataTable.stories.js

@@ -1,6 +1,10 @@
 import BaseDataTable from './BaseDataTable.vue';
 import BaseTableColumn from './BaseTableColumn.vue';
 import BaseBoolean from './BaseBoolean.vue';
+import BaseSelect from './BaseSelect.vue';
+import BaseBadge from './BaseBadge.vue';
+import BaseAppNotifications from './BaseAppNotifications.vue';
+import BaseAppDialogs from './BaseAppDialogs.vue';
 
 export default {
   title: 'Data/BaseDataTable',
@@ -23,6 +27,7 @@ const template = `
     label="Titre"
     sortable
     field="title->en"
+    :toggle="false"
   >
     <div class="max-w-sm">
       <div class="font-medium text-slate-900">
@@ -53,11 +58,84 @@ const template = `
       {{ Math.round(row.votes_avg_score) }} / 5
     </div>
   </BaseTableColumn>
+
+  <BaseTableColumn
+    v-slot="{ row }"
+    label="Access level"
+    field="access_level"
+    sortable
+    optional
+  >
+    <BaseBadge>
+      {{ row.access_level }}
+    </BaseBadge>
+  </BaseTableColumn>
+
+  <template #detail="{ row }">
+    <div class="p-4 text-sm">
+      <p>ID : {{ row.id }}</p>
+      <p>Created at : {{ row.created_at }}</p>
+    </div>
+  </template>
+
+  <template #filters="{ query, updateQueryValue }">
+    <div class="space-y-3">
+      <div>
+        <p class="mb-1 text-sm">
+          Type
+        </p>
+        <BaseSelect
+          :model-value="query.type ?? null"
+          class="w-full rounded border-slate-300"
+          @update:model-value="updateQueryValue('type', $event)"
+        >
+          <option value="">-</option>
+          <option value="video">
+            Video
+          </option>
+          <option value="article">
+            Article
+          </option>
+        </BaseSelect>
+      </div>
+      <div>
+        <p class="mb-1 text-sm">
+          Access Level
+        </p>
+        <BaseSelect
+          :model-value="query.access_level ?? null"
+          class="w-full rounded border-slate-300"
+          @update:model-value="updateQueryValue('access_level', $event)"
+        >
+          <option value="">-</option>
+          <option value="public">
+            Public
+          </option>
+          <option value="member">
+            Member
+          </option>
+          <option value="vip">
+            VIP
+          </option>
+        </BaseSelect>
+      </div>
+    </div>
+  </template>
 </BaseDataTable>
+<BaseAppNotifications></BaseAppNotifications>
+<BaseAppDialogs></BaseAppDialogs>
 `;
 
 const Template = (args) => ({
-  components: { BaseDataTable, BaseTableColumn, BaseBoolean },
+  components: {
+    BaseDataTable,
+    BaseTableColumn,
+    BaseBoolean,
+    BaseSelect,
+    BaseBadge,
+    BaseAppNotifications,
+    BaseAppDialogs,
+  },
   setup() {
     return { args };
   },
@@ -86,10 +164,79 @@ Demo.args = {
       color: 'danger',
     },
   ],
+  checkable: true,
+  checkableActions: [
+    {
+      label: 'Delete all',
+      action: () => {
+        alert('delete!');
+      },
+    },
+  ],
+  detailed: true,
+  maxHeight: 400,
+  editUrl() {
+    return '/';
+  },
+  deleteUrl() {
+    return '/';
+  },
 };
 
-export const Simple = Template.bind({});
+const SimpleTemplate = (args) => ({
+  components: {
+    BaseDataTable,
+    BaseTableColumn,
+    BaseBoolean,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BaseDataTable v-bind="args">
+    <BaseTableColumn
+      v-slot="{ row }"
+      label="Titre"
+      sortable
+      field="title->en"
+      :toggle="false"
+    >
+      <div class="max-w-sm">
+        <div class="font-medium text-slate-900">
+          {{ row.title }}
+        </div>
+        <p class="text-xs leading-tight text-slate-500">
+          {{ row.subtitle }}
+        </p>
+      </div>
+    </BaseTableColumn>
+  
+    <BaseTableColumn
+      v-slot="{ row }"
+      label="VIP"
+      field="access_level"
+      sortable
+    >
+      <BaseBoolean :model-value="row.access_level == 'vip'" />
+    </BaseTableColumn>
+  
+    <BaseTableColumn
+      v-slot="{ row }"
+      label="Vote"
+      field="votes_avg_score"
+      sortable
+    >
+      <div class="">
+        {{ Math.round(row.votes_avg_score) }} / 5
+      </div>
+    </BaseTableColumn>
+  </BaseDataTable>
+  `,
+});
+
+export const Simple = SimpleTemplate.bind({});
 Simple.args = {
   searchable: false,
+  toggleable: false,
   actions: [],
 };

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 = '';