@indielayer/ui 1.0.2 → 1.0.4

package/src/components/image/Image.vue

@@ -16,16 +16,18 @@ const props = defineProps({
 
 const source = ref<string | undefined>(fallback)
 
-watch(() => props.src, (src) => {
-  if (!src) return
-  const img = new Image()
-
-  img.onload = () => { source.value = props.src }
-  img.onerror = () => { }
-  img.src = src
-}, {
-  immediate: true,
-})
+if (typeof window !== 'undefined' && Image) {
+  watch(() => props.src, (src) => {
+    if (!src) return
+    const img = new Image()
+
+    img.onload = () => { source.value = props.src }
+    img.onerror = () => { }
+    img.src = src
+  }, {
+    immediate: true,
+  })
+}
 
 const { styles, classes, className } = useTheme('image', theme, props)
 </script>

package/src/components/modal/Modal.vue

@@ -60,7 +60,7 @@ watch(() => props.modelValue, (val) => {
   }
 })
 
-if (document) useEventListener(document, 'keydown', onKeyDown)
+if (typeof window !== 'undefined') useEventListener(document, 'keydown', onKeyDown)
 
 function onKeyDown(event: KeyboardEvent) {
   if (event.key === 'Escape' && value.value) close()

package/src/components/notifications/Notifications.theme.ts

@@ -6,6 +6,6 @@ export default {
 
     list: 'flex flex-col items-end w-full sm:w-[520px] px-4',
 
-    item: 'w-full flex items-center rounded-md px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900',
+    item: 'w-full flex items-center rounded-md px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900 border border-gray-700 dark:border-gray-100',
   },
 }

package/src/components/select/Select.vue

@@ -273,7 +273,7 @@ defineExpose({ focus, blur, reset, validate, setError })
               size="sm"
               class="mr-1"
               removable
-              @remove="(e) => { handleRemove(e, value) }"
+              @remove="(e: Event) => { handleRemove(e, value) }"
             >{{ getLabel(value) }}</x-tag>
           </template>
           <template v-else-if="!multiple && !isEmpty(selected)">

package/src/components/slider/Slider.vue

@@ -119,7 +119,7 @@ function endDrag(e: PointerEvent) {
   e.stopPropagation()
 }
 
-if (window) {
+if (typeof window !== 'undefined') {
   useEventListener(progressRef, 'pointerdown', startProgressDrag, false)
   useEventListener(dragRef, 'pointerdown', startDrag, false)
   useEventListener(window, 'pointermove', moveDrag, true)

package/src/components/tag/Tag.vue

@@ -61,7 +61,7 @@ const { styles, classes, className } = useTheme('tag', theme, props)
         :size="closeIconSize"
         :icon="closeIcon"
         class="ml-1 cursor-pointer hover:text-gray-700 transition-colors duration-150"
-        @click="(e) => $emit('remove', e)"
+        @click="(e: Event) => $emit('remove', e)"
       />
     </span>
 

package/src/components/textarea/Textarea.vue

@@ -3,8 +3,8 @@ export default { name: 'XTextarea' }
 </script>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
-import { useResizeObserver } from '@vueuse/core'
+import { ref, watch } from 'vue'
+import { useResizeObserver, useEventListener } from '@vueuse/core'
 import { useCSS } from '../../composables/css'
 import { useTheme } from '../../composables/theme'
 import { useCommon } from '../../composables/common'
@@ -45,14 +45,7 @@ const emit = defineEmits(useInputtable.emits())
 const elRef = ref<HTMLTextAreaElement | null>(null)
 
 useResizeObserver(elRef, resize)
-
-onMounted(() => {
-  window.addEventListener('resize', resize)
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', resize)
-})
+if (typeof window !== 'undefined') useEventListener(window, 'resize', resize)
 
 watch([() => props.modelValue, () => props.size], () => {
   setTimeout(resize)

package/src/composables/colors-utils.ts

@@ -3,7 +3,7 @@ import type { Tone, ColorLibrary, ColorPalette } from './colors'
 const isHex = (hex: string) => /^#(?:[A-Fa-f0-9]{3}){1,2}$/.test(hex)
 const isRGB = (rgb: string) => /^rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}[)]$/.test(rgb)
 const isRGBA = (rgba: string) => /^^rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}\s*0*(?:\.\d+|1(?:\.0*)?)\s*[)]$/.test(rgba)
-const parseRGB = (rgb: string) => rgb.match(/(?<=\().+?(?=\))/g)?.[0].split(',')
+const parseRGB = (rgb: string) => rgb.match(/\((.*?)\)/)?.[1].split(',')
 const hexToRGB = (hex: string) => hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b)
   .substring(1).match(/.{2}/g)
   ?.map((x) => parseInt(x, 16))

package/src/version.ts

@@ -1 +1 @@
-export default '1.0.2'
+export default '1.0.4'