sprintify-ui 0.2.30 → 0.4.1

package/src/components/BaseMediaListItem.vue

@@ -1,21 +1,23 @@
 <template>
   <li
+    ref="itemRef"
     class="group flex h-10 items-center justify-between"
-    :class="[draggable ? 'pr-2' : 'px-2']"
+    :class="[xs ? 'h-9' : 'h-10']"
   >
     <div
       v-if="draggable && !disabled"
-      class="handle shrink-0 cursor-move px-1"
+      class="handle shrink-0 cursor-move pr-1"
     >
       <BaseIcon
         icon="mdi:drag"
-        class="h-5 w-5 text-slate-400"
+        class="text-slate-400 w-5 h-5"
       />
     </div>
     <div class="mr-2 shrink-0">
       <BaseIcon
         icon="heroicons-solid:paper-clip"
-        class="h-5 w-5 shrink-0 text-slate-400"
+        class="shrink-0 text-slate-400"
+        :class="[xs ? 'w-4 h-4' : 'h-5 w-5']"
       />
     </div>
     <div class="flex grow items-center gap-3 overflow-hidden">
@@ -29,14 +31,18 @@
           class="flex h-10 items-center overflow-hidden"
           @click="editName()"
         >
-          <span class="mr-2 truncate text-sm">{{ fileName }}</span>
+          <span
+            class="mr-2 truncate"
+            :class="[xs ? 'text-sm' : 'text-sm']"
+          >{{ fileName }}</span>
           <div
             v-if="!disabled"
             class="text-center opacity-0 group-hover:opacity-100"
           >
             <BaseIcon
               icon="heroicons-solid:pencil"
-              class="h-5 w-5 shrink-0 text-slate-400"
+              class="shrink-0 text-slate-400"
+              :class="[xs ? 'w-4 h-4' : 'h-5 w-5']"
             />
           </div>
         </button>
@@ -49,6 +55,7 @@
         <input
           ref="inputRef"
           class="h-8 w-full max-w-md rounded border border-slate-300 px-2 py-0 focus:ring-0"
+          :class="[xs ? 'text-sm' : 'text-sm']"
           type="text"
           :value="name"
           autofocus
@@ -60,7 +67,8 @@
         <div class="flex shrink-0 items-center">
           <button
             type="button"
-            class="h-10 shrink-0 pr-2 pl-3 text-sm text-blue-600"
+            class="h-10 shrink-0 pr-2 pl-3 text-blue-600"
+            :class="[xs ? 'text-sm' : 'text-sm']"
             @click="saveName"
           >
             {{ t('sui.save') }}
@@ -76,13 +84,18 @@
           class="shrink-0 text-sm disabled:opacity-50"
           @click="$emit('remove')"
         >
-          <span class="hidden sm:inline">
-            {{ t('sui.delete') }}
-          </span>
           <BaseIcon
+            v-if="sm || xs"
             icon="heroicons-solid:x"
-            class="h-5 w-5 shrink-0 text-slate-400 sm:hidden"
+            class="shrink-0 text-slate-400"
+            :class="[xs ? 'w-4 h-4' : 'h-5 w-5']"
           />
+          <span
+            v-else
+            class="inline"
+          >
+            {{ t('sui.delete') }}
+          </span>
         </button>
         <a
           v-if="url"
@@ -90,13 +103,19 @@
           class="shrink-0 text-sm text-blue-600"
           target="_blank"
         >
-          <span class="hidden sm:inline">
-            {{ t('sui.download') }}
-          </span>
           <BaseIcon
+            v-if="sm || xs"
             icon="heroicons-solid:download"
-            class="h-5 w-5 shrink-0 text-slate-400 sm:hidden"
+            class="shrink-0 text-slate-400"
+            :class="[xs ? 'w-4 h-4' : 'h-5 w-5']"
           />
+          <span
+            v-else
+            class="inline"
+          >
+            {{ t('sui.download') }}
+          </span>
+          
         </a>
       </div>
     </div>
@@ -110,6 +129,8 @@ import { PropType } from 'vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import { cloneDeep } from 'lodash';
 import { t } from '@/i18n';
+import { useResizeObserver } from '@vueuse/core';
+import breakpoints from '../../config/breakpoints.json';
 
 const emit = defineEmits(['remove', 'update', 'save:name']);
 
@@ -132,6 +153,21 @@ const props = defineProps({
   },
 });
 
+const width = ref(800);
+const itemRef = ref<HTMLLIElement | null>();
+
+useResizeObserver(itemRef, () => {
+  width.value = itemRef.value?.clientWidth ?? 800;
+});
+
+const xs = computed((): boolean => {
+  return width.value <= breakpoints.xs;
+});
+
+const sm = computed((): boolean => {
+  return breakpoints.sm >= width.value && width.value > breakpoints.xs;
+});
+
 const viewMode = ref<'show' | 'edit'>('show');
 
 const name = computed(() => {

package/src/stores/systemAlerts.ts

@@ -9,7 +9,7 @@ export const useSystemAlertStore = defineStore('systemAlerts', {
     };
   },
   actions: {
-    push(systemAlert: SystemAlertOptions) {
+    push(systemAlert: SystemAlertOptions): string | number {
       this.count++;
       this.systemAlerts.push({
         id: this.count,
@@ -19,12 +19,11 @@ export const useSystemAlertStore = defineStore('systemAlerts', {
         action: systemAlert.action,
         closable: systemAlert.closable ?? false,
       });
+
+      return this.count;
     },
-    remove(systemAlert: SystemAlert) {
-      this.systemAlerts.splice(
-        this.systemAlerts.findIndex((a) => a.id === systemAlert.id),
-        1
-      );
+    remove(alertId: number | string) {
+      this.systemAlerts = this.systemAlerts.filter((alert) => alert.id !== alertId);
     },
     clear() {
       this.systemAlerts = [];