chore(release): bump version to 1.0.0-alpha.25

closes #11

Author: obillekyle

packages/lib/src/App/app-comp.vue

@@ -176,6 +176,9 @@
         ab.
       </Scroller>
 
+      <Floater offset="#xxs">
+        <IconButton icon="material-symbols:inbox-outline-rounded" />
+      </Floater>
       <Floater text="3" offset="#xxs">
         <IconButton icon="material-symbols:inbox-outline-rounded" />
       </Floater>

packages/lib/src/App/app.vue

@@ -43,7 +43,7 @@
     }"
   >
     <template #navbar>
-      <NavBar v-model="tab" labels="active">
+      <NavBar v-model="tab">
         <NavContent mt="#xl">
           <SquareImage alt="App Logo" src="/favicon.svg" :size="60" />
         </NavContent>

packages/lib/src/App/component-state.vue

@@ -5,11 +5,13 @@
   import { useSnackbar } from '@/components/Snackbar/snackbar-manager'
   import { useToast } from '@/components/Toast/toast-manager'
   import { useLocalStorage } from '@/ref/use-local-storage'
+  import { h } from 'vue'
 
   import Box from '@/components/Box/box.vue'
   import Button from '@/components/Button/button.vue'
   import Select from '@/components/Select/select.vue'
   import Mock from './mock-content.vue'
+  import IconButton from '@/components/Button/icon-button.vue'
 
   const snackbar = useSnackbar()
   const modal = useModal()
@@ -51,6 +53,10 @@
       content: Mock,
       fullScreen: true,
       closeable: true,
+      subAction: h(IconButton, {
+        icon: 'material-symbols:info-outline',
+        onClick: () => openModal()
+      }),
       actions: MODAL.PRESET_ACTION_CLOSE('OK')
     })
   }

packages/lib/src/assets/layout.scss

@@ -74,6 +74,18 @@
   }
 }
 
+@media (prefers-reduced-motion) {
+  :root,
+  .md-theme-provider {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0s !important;
+      transition-duration: 0s !important;
+    }
+  }
+}
+
 @keyframes focus {
   0% {
     outline-width: 0;

packages/lib/src/components/AppBar/top-bar.vue

@@ -73,6 +73,7 @@
       position: absolute;
       background-color: inherit;
       display: flex;
+      align-items: center;
       right: 0;
     }
   }

packages/lib/src/components/Image/block-image.vue

@@ -3,18 +3,14 @@
 
   import type { BoxProps } from '@/components/Box/util'
   import type { Component } from 'vue'
-  import type { Status } from './util'
 
-  import { customRef } from '@/ref/custom-ref'
-  import { useRect } from '@/ref/use-rect'
-  import { clean } from '@/utils/object/data'
-  import { assert } from '@/utils/object/is'
-  import { onUnmounted, ref, shallowReactive, watch } from 'vue'
-  import { getData } from './util'
+  import { useFetch } from '@/ref/use-fetch'
+  import { ref, watch } from 'vue'
+  import { getSrc } from './util'
 
+  import Box from '../Box/box.vue'
   import ViewObserver from '../Misc/view-observer.vue'
   import DefaultLoader from './default-loader.vue'
-  import Box from '../Box/box.vue'
 
   interface BlockImageProps extends /* @vue-ignore */ BoxProps {
     src?: string
@@ -29,53 +25,25 @@
     loader?: Component
   }
 
-  const [root, setRoot] = customRef<HTMLElement>()
-  const rect = useRect(root)
-
   const props = withDefaults(defineProps<BlockImageProps>(), {
     fit: 'cover',
     position: 'center',
     cover: false,
     loader: DefaultLoader
   })
 
-  const image = ref<string>('')
-  const status = shallowReactive<Status>({
-    progress: 0,
-    error: false,
-    visible: false
-  })
-
-  function resolve() {
-    assert(rect.ready, 'rect must be ready')
-
-    getData(
-      {
-        src: props.src,
-        width: props.width || rect.width,
-        height: props.height || rect.height
-      },
-      image,
-      status
-    )
-  }
+  const visible = ref(false)
+  const fetch = useFetch(() => getSrc(props), 'url-blob', { init: false })
 
   watch(
-    () => rect.ready && status.visible,
+    visible,
     (visible) => {
-      if (!visible || !props.lazy) return
-      if (status.progress || status.error || image.value) return
-      resolve()
-    }
-  )
-
-  watch(() => props.src, resolve)
-  watch(
-    () => rect.ready,
-    () => !props.lazy && resolve()
+      if (fetch.ready || fetch.loading || fetch.error) return
+      if (!props.lazy || visible) fetch.refetch()
+    },
+    { immediate: true }
   )
 
-  onUnmounted(() => clean(image.value))
   defineOptions({ name: 'MdBlockImage' })
 </script>
 
@@ -84,24 +52,23 @@
     :as="Box"
     offset="50"
     class="md-block-image md-image"
-    :ref="setRoot"
-    :loading="!image || undefined"
-    :error="status.error || undefined"
-    @viewchange="status.visible = $event"
+    :loading="fetch.loading || undefined"
+    :error="fetch.error || undefined"
+    v-model="visible"
   >
     <div class="md-loader">
       <component
         :is="loader"
-        :error="status.error"
-        :progress="status.progress"
-        :ready="!!image"
-        @retry="resolve"
+        :error="fetch.error"
+        :progress="fetch.progress"
+        :ready="fetch.ready"
+        @retry="fetch.refetch"
       />
     </div>
     <img
       class="md-image-element"
-      v-if="!status.error"
-      :src="image"
+      v-if="!fetch.error"
+      :src="fetch.data"
       :alt
       :width
       :height

packages/lib/src/components/Image/square-image.vue

@@ -4,18 +4,17 @@
   import type { Component } from 'vue'
   import type { BoxProps } from '../Box/util'
   import type { FrameVariants } from '../Frame/variants'
-  import type { Status } from './util'
 
-  import { clean } from '@/utils/object/data'
   import { createStyle } from '@/utils/create-style'
-  import { onMounted, onUnmounted, ref, shallowReactive, watch } from 'vue'
+  import { ref, watch } from 'vue'
   import { frames } from '../Frame/variants'
   import { toSvgMask } from '../Frame/util'
-  import { getData } from './util'
+  import { useFetch } from '@/ref/use-fetch'
 
   import ViewObserver from '../Misc/view-observer.vue'
   import DefaultLoader from './default-loader.vue'
   import Box from '../Box/box.vue'
+  import { getSrc } from './util'
 
   interface SquareImageProps /* @vue-ignore */ extends BoxProps {
     src?: string
@@ -31,24 +30,8 @@
     loader: DefaultLoader
   })
 
-  const image = ref('')
-  const status = shallowReactive<Status>({
-    progress: 0,
-    error: false,
-    visible: false
-  })
-
-  function resolve() {
-    if (!props.src) return
-    getData(
-      {
-        src: props.src,
-        size: props.size
-      },
-      image,
-      status
-    )
-  }
+  const visible = ref(false)
+  const fetch = useFetch(() => getSrc(props), 'url-blob', { init: false })
 
   const className = createStyle(() => ({
     r: '#xs',
@@ -61,17 +44,13 @@
   }))
 
   watch(
-    () => status.visible,
+    visible,
     (visible) => {
-      if (!visible || !props.lazy) return
-      if (status.progress || status.error || image.value) return
-      resolve()
-    }
+      if (fetch.ready || fetch.loading || fetch.error) return
+      if (!props.lazy || visible) fetch.refetch()
+    },
+    { immediate: true }
   )
-
-  watch(() => props.src, resolve)
-  onMounted(() => !props.lazy && resolve())
-  onUnmounted(() => clean(image.value))
 </script>
 
 <template>
@@ -81,22 +60,22 @@
     apply="visible"
     class="md-square-image md-image"
     :class="className"
-    :loading="!image || undefined"
-    :error="status.error || undefined"
-    @viewchange="status.visible = $event"
+    :loading="!fetch.data || undefined"
+    :error="fetch.error || undefined"
+    v-model="visible"
   >
     <component
       class="md-loader"
       :is="loader"
-      :error="status.error"
-      :progress="status.progress"
-      :ready="!!image"
-      @retry="resolve"
+      :error="fetch.error"
+      :progress="fetch.progress"
+      :ready="fetch.ready"
+      @retry="fetch.refetch"
     />
     <img
       class="md-image-element"
       v-bind="$attrs"
-      :src="image"
+      :src="fetch.data"
       :width="size"
       :height="size"
     />

packages/lib/src/components/Image/util.ts

@@ -1,69 +1,10 @@
-import type { Reactive, Ref } from 'vue'
-
-const store: Map<string, Blob> = new Map()
-
-export async function resolveImage(
-  source: string,
-  progress: (v: number) => void
-): Promise<Blob> {
-  if (store.has(source)) {
-    progress(100)
-    return store.get(source)!
-  }
-
-  progress(Infinity)
-
-  const xhr = new XMLHttpRequest()
-  xhr.responseType = 'blob'
-  xhr.open('GET', source)
-
-  xhr.addEventListener('progress', ({ total, loaded }) => {
-    progress(total ? Math.floor((loaded / total) * 100) : Infinity)
-  })
-
-  xhr.send()
-
-  const data = await new Promise<Blob | void>((resolve) => {
-    xhr.addEventListener('error', () => resolve())
-    xhr.addEventListener('load', () => resolve(xhr.response))
-  })
-
-  if (!data) {
-    throw new Error('Failed to load image')
-  }
-
-  store.set(source, data)
-  return data
-}
-
-type ImageProps = {
-  width?: number
-  height?: number
-  size?: number
+type Props = {
   src?: string
+  [key: string]: any
 }
 
-export type Status = {
-  progress: number
-  error: boolean
-  visible: boolean
-}
-
-export async function getData(
-  props: ImageProps,
-  image: Ref<string>,
-  status: Reactive<Status>
-) {
-  if (!props.src) return
-  status.error = false
-  URL.revokeObjectURL(image.value)
-  image.value = ''
-
-  const source = props.src.replaceAll(/\[(\w+)]/g, (match, prop) =>
-    String((props as any)[prop] || match)
+export function getSrc(props: Props): string {
+  return (props.src ?? '').replaceAll(/\[(\w+)]/g, (match, prop) =>
+    String(props[prop] || match)
   )
-
-  resolveImage(source, (e) => (status.progress = e))
-    .then((data) => (image.value = URL.createObjectURL(data)))
-    .catch(() => (status.error = true))
 }

packages/lib/src/components/List/list-item.vue

@@ -152,7 +152,11 @@
     :style="{ top: addPX(index * list.size), height: addPX(list.size) }"
   >
     <div class="md-list-item-wrapper" ref="wrapper" :data-index="index">
-      <component :value :is="list.component" class="md-list-item-content">
+      <component
+        v-bind="props"
+        :is="list.component"
+        class="md-list-item-content"
+      >
         {{ label }}
       </component>
       <div v-if="list.sortable" class="draggable" @pointerdown="sortEvent">
@@ -165,11 +169,11 @@
           v-if="item"
           v-show="(key === 'left') === isSwipingLeft"
           :class="key"
+          :icon="item.icon"
           :style="{
             background: item.color,
             color: Colors.isLight(item.color) ? '#000' : '#fff'
           }"
-          :icon="item.icon"
         />
       </template>
     </div>