sprintify-ui 0.2.0 → 0.2.3

package/src/components/BaseMediaLibrary.vue

@@ -42,7 +42,9 @@
                 </p>
 
                 <div class="mt-1 text-xs leading-tight text-slate-500">
-                  <p v-if="maxFileText">{{ maxFileText }}</p>
+                  <p v-if="maxFileText">
+                    {{ maxFileText }}
+                  </p>
                   <p>{{ maxFileSize }}</p>
                 </div>
               </div>
@@ -52,7 +54,10 @@
       </template>
     </BaseFileUploader>
 
-    <div v-if="normalizedModelValue.length" class="mt-5">
+    <div
+      v-if="normalizedModelValue.length"
+      class="mt-5"
+    >
       <slot
         :model-value="normalizedModelValue"
         name="list"
@@ -69,7 +74,7 @@
           :draggable="draggable"
           @update:model-value="sync"
           @remove="promptRemove($event)"
-        ></BaseMediaPictures>
+        />
 
         <BaseMediaList
           v-else-if="layout == 'list'"
@@ -79,7 +84,7 @@
           :draggable="draggable"
           @update:model-value="sync"
           @remove="promptRemove($event)"
-        ></BaseMediaList>
+        />
 
         <BaseMediaGallery
           v-else-if="layout == 'gallery'"
@@ -89,7 +94,7 @@
           :draggable="draggable"
           @update:model-value="sync"
           @remove="promptRemove($event)"
-        ></BaseMediaGallery>
+        />
       </slot>
     </div>
   </div>

package/src/components/BaseMediaList.vue

@@ -17,7 +17,7 @@
           @update="onItemUpdate(index, $event)"
           @remove="$emit('remove', index)"
           @save:name="$emit('save:name', index, $event)"
-        ></BaseMediaListItem>
+        />
       </div>
     </template>
   </BaseDraggable>

package/src/components/BaseMediaListItem.vue

@@ -3,14 +3,20 @@
     class="group flex h-10 items-center justify-between"
     :class="[draggable ? 'pr-2' : 'px-2']"
   >
-    <div v-if="draggable && !disabled" class="handle shrink-0 cursor-move px-1">
-      <BaseIcon icon="mdi:drag" class="h-5 w-5 text-slate-400"></BaseIcon>
+    <div
+      v-if="draggable && !disabled"
+      class="handle shrink-0 cursor-move px-1"
+    >
+      <BaseIcon
+        icon="mdi:drag"
+        class="h-5 w-5 text-slate-400"
+      />
     </div>
     <div class="mr-2 shrink-0">
       <BaseIcon
         icon="heroicons-solid:paper-clip"
         class="h-5 w-5 shrink-0 text-slate-400"
-      ></BaseIcon>
+      />
     </div>
     <div class="flex grow items-center gap-3 overflow-hidden">
       <div
@@ -31,12 +37,15 @@
             <BaseIcon
               icon="heroicons-solid:pencil"
               class="h-5 w-5 shrink-0 text-slate-400"
-            ></BaseIcon>
+            />
           </div>
         </button>
       </div>
 
-      <div v-else class="flex grow items-center py-1">
+      <div
+        v-else
+        class="flex grow items-center py-1"
+      >
         <input
           ref="inputRef"
           class="h-8 w-full max-w-md rounded border border-slate-300 px-2 py-0 focus:ring-0"
@@ -46,7 +55,7 @@
           @input="onNameChange"
           @keydown.enter.prevent="saveName"
           @keydown.escape.prevent="viewMode = 'show'"
-        />
+        >
 
         <div class="flex shrink-0 items-center">
           <button

package/src/components/BaseMediaPictures.vue

@@ -16,7 +16,7 @@
           :size="size"
           :disabled="disabled"
           @remove="$emit('remove', index)"
-        ></BaseMediaPicturesItem>
+        />
       </div>
     </template>
   </BaseDraggable>

package/src/components/BaseMediaPicturesItem.vue

@@ -16,7 +16,7 @@
         height: size + 'px',
       }"
       class="overflow-hidden rounded-lg object-cover"
-    />
+    >
     <div class="absolute -top-2 -right-2 flex gap-1">
       <a
         v-if="url"
@@ -24,7 +24,10 @@
         target="_blank"
         class="btn btn-white rounded-full p-1 shadow-sm ring-1 ring-black ring-opacity-10"
       >
-        <BaseIcon class="h-4 w-4" icon="mdi:download"></BaseIcon>
+        <BaseIcon
+          class="h-4 w-4"
+          icon="mdi:download"
+        />
       </a>
       <button
         v-if="showRemove"
@@ -33,7 +36,10 @@
         class="btn btn-white rounded-full p-1 shadow-sm ring-1 ring-black ring-opacity-10 disabled:bg-white disabled:opacity-70"
         @click="$emit('remove')"
       >
-        <BaseIcon class="h-4 w-4" icon="mdi:close"></BaseIcon>
+        <BaseIcon
+          class="h-4 w-4"
+          icon="mdi:close"
+        />
       </button>
     </div>
   </div>

package/src/components/BaseMediaPreview.vue

@@ -12,13 +12,13 @@
       :src="url"
       class="h-full w-full bg-black object-contain object-center"
       :alt="name"
-    />
+    >
     <img
       v-else-if="type == 'image' && 'data_url' in media && previewImage"
       :src="media.data_url"
       class="h-full w-full bg-black object-contain object-center"
       :alt="name"
-    />
+    >
     <div
       v-else
       class="flex h-full w-full items-center justify-center bg-slate-100"

package/src/components/BaseMenu.vue

@@ -7,7 +7,10 @@
   >
     <div>
       <MenuButton :class="twButton">
-        <slot name="button" :open="open" />
+        <slot
+          name="button"
+          :open="open"
+        />
       </MenuButton>
     </div>
 
@@ -24,13 +27,31 @@
         :class="twMerge('w-48', twMenu)"
         class="absolute z-menu mt-2 rounded-md bg-white p-1 shadow-lg outline-none ring-1 ring-black ring-opacity-10 focus:outline-none"
       >
-        <slot name="items" :items="items">
-          <template v-for="item in items" :key="item.label + 'link'">
-            <div v-if="item.line" class="-mx-1 my-1 flex h-px bg-slate-200" />
+        <slot
+          name="items"
+          :items="items"
+        >
+          <template
+            v-for="item in items"
+            :key="item.label + 'link'"
+          >
+            <div
+              v-if="item.line"
+              class="-mx-1 my-1 flex h-px bg-slate-200"
+            />
 
-            <MenuItem v-else-if="item.to" v-slot="{ active, close }">
-              <RouterLink :to="item.to" @mouseup="close">
-                <slot name="item" :item="item">
+            <MenuItem
+              v-else-if="item.to"
+              v-slot="{ active, close }"
+            >
+              <RouterLink
+                :to="item.to"
+                @mouseup="close"
+              >
+                <slot
+                  name="item"
+                  :item="item"
+                >
                   <BaseMenuItem
                     :label="item.label"
                     :count="item.count"
@@ -49,7 +70,10 @@
               as="a"
               :href="item.href"
             >
-              <slot name="item" :item="item">
+              <slot
+                name="item"
+                :item="item"
+              >
                 <BaseMenuItem
                   :label="item.label"
                   :count="item.count"
@@ -69,7 +93,11 @@
               class="w-full"
               @click="item.action"
             >
-              <slot name="item" :item="item" :active="active">
+              <slot
+                name="item"
+                :item="item"
+                :active="active"
+              >
                 <BaseMenuItem
                   :label="item.label"
                   :count="item.count"

package/src/components/BaseMenuItem.vue

@@ -1,11 +1,22 @@
 <template>
   <div :class="buttonClasses">
     <div class="flex items-center">
-      <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
+      <BaseIcon
+        v-if="icon"
+        :icon="icon"
+        :class="iconClasses"
+      />
       <span :class="textSize">{{ label }}</span>
     </div>
-    <div v-if="count" class="relative -top-px ml-[5px]">
-      <BaseCounter :count="count" :max-digit="2" :color="color" />
+    <div
+      v-if="count"
+      class="relative -top-px ml-[5px]"
+    >
+      <BaseCounter
+        :count="count"
+        :max-digit="2"
+        :color="color"
+      />
     </div>
   </div>
 </template>

package/src/components/BaseModalCenter.vue

@@ -78,7 +78,10 @@
             type="button"
             @click="modal.close()"
           >
-            <BaseIcon class="h-8 w-8 text-white" icon="heroicons:x-mark" />
+            <BaseIcon
+              class="h-8 w-8 text-white"
+              icon="heroicons:x-mark"
+            />
           </button>
         </div>
       </div>

package/src/components/BaseNavbarItemContent.vue

@@ -1,11 +1,22 @@
 <template>
   <div :class="classes">
     <div class="group flex grow items-center">
-      <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
+      <BaseIcon
+        v-if="icon"
+        :icon="icon"
+        :class="iconClasses"
+      />
       <span :class="[sizeClasses]">{{ label }}</span>
     </div>
-    <div v-if="count" class="relative -top-px ml-[5px]">
-      <BaseCounter :count="count" :max-digit="2" :color="'primary'" />
+    <div
+      v-if="count"
+      class="relative -top-px ml-[5px]"
+    >
+      <BaseCounter
+        :count="count"
+        :max-digit="2"
+        :color="'primary'"
+      />
     </div>
   </div>
 </template>

package/src/components/BaseNavbarSideItem.vue

@@ -24,7 +24,10 @@
       v-if="showSubActions && item.actions && item.actions.length"
       class="mt-2 mb-3"
     >
-      <div v-for="subItem in item.actions" :key="subItem.label">
+      <div
+        v-for="subItem in item.actions"
+        :key="subItem.label"
+      >
         <BaseActionItem
           :to="subItem.to"
           :href="subItem.href"

package/src/components/BaseNavbarSideItemContent.vue

@@ -1,10 +1,17 @@
 <template>
   <div :class="classes">
     <div class="group flex grow items-center">
-      <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
+      <BaseIcon
+        v-if="icon"
+        :icon="icon"
+        :class="iconClasses"
+      />
       <span>{{ label }}</span>
     </div>
-    <div v-if="count" class="relative -top-px ml-[5px]">
+    <div
+      v-if="count"
+      class="relative -top-px ml-[5px]"
+    >
       <BaseCounter
         :size="size"
         :count="count"

package/src/components/BaseNumber.vue

@@ -8,7 +8,10 @@
       leave-from-class="transform scale-100 opacity-100"
       leave-to-class="transform scale-90 opacity-0"
     >
-      <div v-if="showInvalidInput" class="absolute left-0 top-full z-[1]">
+      <div
+        v-if="showInvalidInput"
+        class="absolute left-0 top-full z-[1]"
+      >
         <div
           class="mt-1 ml-1 rounded bg-red-500 px-2 py-1 text-xs font-medium text-white"
         >
@@ -47,7 +50,7 @@
         @blur="onBlur"
         @focus="onFocus"
         @keydown="onKeydown"
-      />
+      >
       <div class="border-l border-slate-300">
         <button
           type="button"
@@ -56,7 +59,7 @@
           :disabled="disabled"
           @click="increment"
         >
-          <BaseIcon icon="mdi:chevron-up"></BaseIcon>
+          <BaseIcon icon="mdi:chevron-up" />
         </button>
         <button
           type="button"
@@ -65,7 +68,7 @@
           :disabled="disabled"
           @click="decrement"
         >
-          <BaseIcon icon="mdi:chevron-down"></BaseIcon>
+          <BaseIcon icon="mdi:chevron-down" />
         </button>
       </div>
     </div>

package/src/components/BasePWAPrompt.stories.js

@@ -0,0 +1,51 @@
+import BasePWAPrompt from './BasePWAPrompt.vue';
+
+export default {
+  title: 'Components/BasePWAPrompt',
+  component: BasePWAPrompt,
+  argTypes: {
+  },
+};
+
+const Template = (args) => ({
+  components: { BasePWAPrompt },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BasePWAPrompt v-bind="args">
+      
+    </BasePWAPrompt>
+  `,
+});
+
+const TemplateWithFooter = (args) => ({
+  components: { BasePWAPrompt },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BasePWAPrompt v-bind="args">
+      <template #footer>
+        <div class="bg-red-500 p-4 text-center text-white">
+          Custom  footer
+        </div>
+      </template>
+    </BasePWAPrompt>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  appName: 'Witify',
+  srcLogo: 'https://media.licdn.com/dms/image/D4E0BAQGYgsAV7tho4Q/company-logo_100_100/0/1685653464675?e=1694044800&v=beta&t=0cnsfS5qXUVgnDPQhB9WUgYa5UkKqWKcxzDYBbe9kb0',
+};
+
+
+
+export const WithSlotFooter = TemplateWithFooter.bind({});
+WithSlotFooter.args = {
+  appName: 'Witify',
+  srcLogo: 'https://media.licdn.com/dms/image/D4E0BAQGYgsAV7tho4Q/company-logo_100_100/0/1685653464675?e=1694044800&v=beta&t=0cnsfS5qXUVgnDPQhB9WUgYa5UkKqWKcxzDYBbe9kb0',
+};
+

package/src/components/BasePWAPrompt.vue

@@ -0,0 +1,107 @@
+<template>
+  <BaseModalCenter
+    v-model="active"
+    clipped
+  >
+      <div class="">
+        <div class="text-center py-4 px-8">
+          <div class="flex justify-center p-2">
+            <img :src="srcLogo" :alt="appName" class="h-16 w-16 rounded-lg shadow-md my-4" />
+          </div>
+          <h2 class="mb-4 text-lg">
+            <div v-if="title">
+              {{ title }}
+            </div>
+            <div v-else>
+              {{ t('sui.install') + ' ' + appName }}
+            </div>
+          </h2>
+          <p class="text-gray-600">
+            {{ description }}
+          </p>
+        </div>
+
+        <slot name="footer">
+          <div class="flex items-center justify-center bg-slate-100 p-4 text-sm text-slate-600">
+          {{ $t('sui.pwa_tap') }}
+          <BaseIcon icon="heroicons:arrow-up-on-square" class="h-6 w-6 mx-1"/>
+
+          {{ $t('sui.pwa_add_to_home_screen') }}
+        </div>
+        </slot>
+      </div>
+  </BaseModalCenter>
+</template>
+
+<script lang="ts" setup>
+import { DateTime } from 'luxon';
+import { t } from '@/i18n';
+import BaseModalCenter from './BaseModalCenter.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+const props = defineProps({
+  appName: {
+    required: true,
+    type: String,
+  },
+  srcLogo: {
+    required: true,
+    type: String,
+  },
+  title: {
+    default: '',
+    type: String,
+  },
+  description: {
+    default: t('sui.pwa_description'),
+    type: String,
+  },
+});
+
+const active = ref(false)
+
+function close() {
+  hide();
+  active.value = false;
+}
+
+watch(
+  () => active.value,
+  () => {
+    if (!active.value) {
+      hide()
+    }
+  }
+)
+
+const KEY = 'lastPwaPrompt';
+
+function hide() {
+  const now = DateTime.now().toISO() as string;
+  localStorage.setItem(KEY, now);
+}
+
+function canShow() {
+  if ((navigator as any).standalone) {
+    return false;
+  }
+
+  const today = DateTime.now();
+  let days = Number.MAX_SAFE_INTEGER;
+
+  const lastPrompt = localStorage.getItem(KEY);
+  if (lastPrompt) {
+    const lastPromptDateTime = DateTime.fromISO(lastPrompt);
+    days = lastPromptDateTime.diff(today, 'days').days;
+  }
+
+  const isApple = ['iPhone', 'iPad', 'iPod'].includes(navigator.platform);
+  return (isNaN(days) || days > 14) //&& isApple;
+}
+
+onMounted(() => {
+  if (canShow()) {
+    active.value = true;
+  }
+});
+</script>

package/src/components/BasePagination.vue

@@ -53,7 +53,7 @@
           @keydown.enter="onManualPageMobileEnter"
           @input="onManualPageMobileInput"
           @blur="setPageFromManualPageMobile"
-        />
+        >
         <span class="ml-2 text-sm font-normal text-slate-500">
           {{ t('sui.of') }} {{ lastPage }}
         </span>
@@ -88,7 +88,7 @@
         @keydown.enter="onManualPageEnter"
         @input="onManualPageInput"
         @blur="setPageFromManualPage"
-      />
+      >
     </div>
   </nav>
 </template>

package/src/components/BasePanel.vue

@@ -7,7 +7,10 @@
       <h3 class="text-base font-semibold leading-6 text-slate-900">
         {{ title }}
       </h3>
-      <p v-if="description" class="mt-1 text-sm leading-normal text-slate-600">
+      <p
+        v-if="description"
+        class="mt-1 text-sm leading-normal text-slate-600"
+      >
         {{ description }}
       </p>
     </div>

package/src/components/BasePassword.vue

@@ -16,7 +16,7 @@
       :required="requiredInternal"
       class="grow rounded-l rounded-r-none border-none focus:ring-2 focus:ring-primary-500 disabled:cursor-not-allowed"
       @input="onInput"
-    />
+    >
     <div class="flex shrink-0 pl-3">
       <button
         tabindex="-1"
@@ -30,7 +30,11 @@
           icon="heroicons:eye-slash-20-solid"
           class="h-5 w-5"
         />
-        <BaseIcon v-else icon="heroicons:eye-20-solid" class="h-5 w-5" />
+        <BaseIcon
+          v-else
+          icon="heroicons:eye-20-solid"
+          class="h-5 w-5"
+        />
       </button>
     </div>
   </div>

package/src/components/BaseProgressCircle.vue

@@ -1,5 +1,8 @@
 <template>
-  <svg :height="radius * 2" :width="radius * 2">
+  <svg
+    :height="radius * 2"
+    :width="radius * 2"
+  >
     <circle
       stroke="currentColor"
       class="text-slate-200"

package/src/components/BaseRadioGroup.vue

@@ -20,9 +20,12 @@
             :value="option.value"
             :class="twInput"
             @input="emitUpdate(option.value)"
-          />
+          >
 
-          <slot name="option" :option="option">
+          <slot
+            name="option"
+            :option="option"
+          >
             <span class="text-sm">{{ option.label }}</span>
           </slot>
         </label>

package/src/components/BaseRichText.vue

@@ -14,8 +14,7 @@
       :enable="enable"
       content-type="html"
       @update:content="emitUpdate(updateChange($event))"
-    >
-    </quill-editor>
+    />
   </div>
 </template>
 

package/src/components/BaseSelect.vue

@@ -13,7 +13,11 @@
     @change="onChange($event)"
   >
     <template v-if="requiredInternal">
-      <option disabled hidden :value="EMPTY_VALUE_INTERNAL">
+      <option
+        disabled
+        hidden
+        :value="EMPTY_VALUE_INTERNAL"
+      >
         {{ placeholder ? placeholder : t('sui.select_an_option') }}
       </option>
     </template>
@@ -101,7 +105,7 @@ const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
     emit: emit,
   });
 
-const options = ref([] as HTMLOptionElement[]);
+const options = ref<HTMLOptionElement[]>([]);
 
 function isEmptyExternal(value: string | number | null | undefined) {
   if (value === undefined || value === EMPTY_VALUE_EXTERNAL) {