@indielayer/ui 1.14.4 → 1.15.0

package/src/components/table/TableCell.vue

@@ -16,6 +16,9 @@ const tableCellProps = {
     default: 'middle',
     validator: (value: string) => validators.verticalAlign.includes(value as any),
   },
+  to: [String, Object],
+  href: String,
+  target: String as PropType<'_blank' | '_self' | '_parent' | '_top'>,
 }
 
 export type TableCellTextAlign = typeof validators.textAlign[number]
@@ -44,6 +47,26 @@ const { styles, classes, className } = useTheme('TableCell', {}, props)
 
 <template>
   <td
+    v-if="to || href"
+    class="relative"
+    :class="className"
+    :style="[{ width: computedWidth, minWidth: computedWidth, maxWidth: computedWidth }]"
+  >
+    <component
+      :is="to ? 'router-link' : 'a'"
+      v-bind="href ? { href } : {}"
+      :target="target"
+      :to="to"
+      :style="styles"
+      :class="classes.wrapper"
+    >
+      <div :class="[truncate ? 'truncate' : '']">
+        <slot></slot>
+      </div>
+    </component>
+  </td>
+  <td
+    v-else
     :style="[styles, { width: computedWidth, minWidth: computedWidth, maxWidth: computedWidth }]"
     :class="[
       'relative',

package/src/components/table/TableHeader.vue

@@ -52,8 +52,8 @@ const { styles, classes, className } = useTheme('TableHeader', {}, props)
         :class="[
           classes.sortIcon,
           textAlign === 'right' ? '-mr-4 -translate-x-4' : '-ml-4 translate-x-4',
-          [sort && [1, -1].includes(sort) ? '' : 'invisible group-hover/th:visible'],
-          [sort !== -1 && sort !== 1 ? 'text-secondary-400 dark:text-secondary-500' : 'text-primary-700 dark:text-primary-400']
+          [sort && [1, -1].includes(sort) ? '' : 'group-hover/th:text-secondary-500 dark:group-hover/th:text-secondary-400'],
+          [sort !== -1 && sort !== 1 ? 'text-secondary-400 dark:text-secondary-500' : 'text-primary-500 dark:text-primary-400']
         ]"
         width="24"
         height="24"

package/src/components/table/theme/TableCell.base.theme.ts

@@ -7,17 +7,26 @@ const theme: TableCellTheme = {
 
       c.push(props.dense ? 'h-9 py-0.5' : 'h-11 py-1')
 
-      if (props.textAlign === 'left') c.push('text-left')
-      else if (props.textAlign === 'center') c.push('text-center')
-      else if (props.textAlign === 'right') c.push('text-right')
-      else if (props.textAlign === 'justify') c.push('text-justify')
-
-      if (props.verticalAlign === 'baseline') c.push('align-baseline')
-      else if (props.verticalAlign === 'bottom') c.push('align-bottom')
-      else if (props.verticalAlign === 'middle') c.push('align-middle')
-      else if (props.verticalAlign === 'text-bottom') c.push('align-text-bottom')
-      else if (props.verticalAlign === 'text-top') c.push('align-text-top')
-      else if (props.verticalAlign === 'top') c.push('align-top')
+      if (props.to || props.href) {
+        c.push('flex items-center')
+
+        if (props.textAlign === 'left') c.push('justify-start')
+        else if (props.textAlign === 'center') c.push('justify-center')
+        else if (props.textAlign === 'right') c.push('justify-end')
+        else if (props.textAlign === 'justify') c.push('justify-center')
+      } else {
+        if (props.textAlign === 'left') c.push('text-left')
+        else if (props.textAlign === 'center') c.push('text-center')
+        else if (props.textAlign === 'right') c.push('text-right')
+        else if (props.textAlign === 'justify') c.push('text-justify')
+
+        if (props.verticalAlign === 'baseline') c.push('align-baseline')
+        else if (props.verticalAlign === 'bottom') c.push('align-bottom')
+        else if (props.verticalAlign === 'middle') c.push('align-middle')
+        else if (props.verticalAlign === 'text-bottom') c.push('align-text-bottom')
+        else if (props.verticalAlign === 'text-top') c.push('align-text-top')
+        else if (props.verticalAlign === 'top') c.push('align-top')
+      }
 
       if (props.truncate) c.push('truncate')
 

package/src/components/tag/Tag.vue

@@ -11,6 +11,7 @@ const tagProps = {
   outlined: Boolean,
   filled: Boolean,
   disabled: Boolean,
+  to: [String, Object],
 }
 
 export type TagProps = ExtractPublicPropTypes<typeof tagProps>
@@ -27,7 +28,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, type ExtractPublicPropTypes } from 'vue'
+import { computed, useAttrs, type ExtractPublicPropTypes } from 'vue'
 import { useColors } from '../../composables/useColors'
 import { useCommon } from '../../composables/useCommon'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
@@ -48,12 +49,16 @@ const closeIconSize = computed(() => {
   return 'sm'
 })
 
+const attrs = useAttrs()
+const htmlTag = computed(() => (attrs.href ? 'a' : props.to ? 'router-link' : props.tag))
+
 const { styles, classes, className } = useTheme('Tag', {}, props)
 </script>
 
 <template>
   <component
-    :is="tag"
+    :is="htmlTag"
+    :to="to"
     class="text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border relative"
     :style="styles"
     :class="
@@ -84,7 +89,7 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
           :icon="closeIcon"
           class="cursor-pointer transition-colors duration-150"
           :class="[disabled ? 'text-secondary-400' : 'hover:text-secondary-500']"
-          @click="(e: Event) => !disabled && $emit('remove', e)"
+          @click.prevent="(e: Event) => !disabled && $emit('remove', e)"
         />
       </div>
     </span>

package/src/components/textarea/Textarea.vue

@@ -20,11 +20,13 @@ const textareaProps = {
   preventEnter: Boolean,
   block: Boolean,
   resizable: Boolean,
+  showCounter: Boolean,
+  clearable: Boolean,
 }
 
 export type TextareaProps = ExtractPublicPropTypes<typeof textareaProps>
 
-type InternalClasses = 'wrapper' | 'input'
+type InternalClasses = 'wrapper' | 'input' | 'icon'
 type InternalExtraData = { errorInternal: Ref<boolean>; }
 
 export interface TextareaTheme extends ThemeComponent<TextareaProps, InternalClasses, InternalExtraData> {}
@@ -49,6 +51,8 @@ import { useInteractive } from '../../composables/useInteractive'
 
 import XLabel from '../label/Label.vue'
 import XInputFooter from '../inputFooter/InputFooter.vue'
+import XIcon from '../icon/Icon.vue'
+import { closeIcon } from '../../common/icons'
 
 const props = defineProps(textareaProps)
 
@@ -107,6 +111,14 @@ const {
   setError,
 } = useInputtable(props, { focus, emit })
 
+const currentLength = computed(() => {
+  const value = props.modelValue
+
+  return value ? String(value).length : 0
+})
+
+const showClearIcon = computed(() => props.clearable && props.modelValue !== '')
+
 const { styles, classes, className } = useTheme('Textarea', {}, props, { errorInternal })
 
 defineExpose({ focus, blur, reset, validate, setError })
@@ -126,34 +138,55 @@ defineExpose({ focus, blur, reset, validate, setError })
     ]"
     :tooltip="tooltip"
   >
-    <textarea
-      :id="id"
-      ref="elRef"
-      class=""
-      :style="style"
-      :class="[
-        classes.input,
-        errorInternal
-          ? 'border-error-500 dark:border-error-400 focus:outline-error-500'
-          : 'focus:outline-[color:var(--x-textarea-border)]',
-      ]"
-      :disabled="disabled"
-      :max="max"
-      :maxlength="maxlength"
-      :min="min"
-      :dir="dir"
-      :rows="rows"
-      :minlength="minlength"
-      :name="name"
-      :placeholder="placeholder"
-      :readonly="readonly"
-      :value="typeof modelValue !== 'undefined' ? String(modelValue) : ''"
-      v-bind="dataAttrs"
-      v-on="inputListeners"
-      @keydown.enter="onEnter"
-      @input="onInput"
-    ></textarea>
-
-    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
+    <div class="relative">
+      <slot name="prefix"></slot>
+      <textarea
+        :id="id"
+        ref="elRef"
+        class=""
+        :style="style"
+        :class="[
+          classes.input,
+          errorInternal
+            ? 'border-error-500 dark:border-error-400 focus:outline-error-500'
+            : 'focus:outline-[color:var(--x-textarea-border)]',
+        ]"
+        :disabled="disabled"
+        :max="max"
+        :maxlength="maxlength"
+        :min="min"
+        :dir="dir"
+        :rows="rows"
+        :minlength="minlength"
+        :name="name"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        :value="typeof modelValue !== 'undefined' ? String(modelValue) : ''"
+        v-bind="dataAttrs"
+        v-on="inputListeners"
+        @keydown.enter="onEnter"
+        @input="onInput"
+      ></textarea>
+
+      <slot name="suffix">
+        <x-icon
+          v-if="showClearIcon"
+          :size="size"
+          :icon="closeIcon"
+          class="right-2 cursor-pointer"
+          :class="classes.icon"
+          @click="reset()"
+        />
+      </slot>
+    </div>
+
+    <x-input-footer
+      v-if="!hideFooterInternal"
+      :error="errorInternal"
+      :helper="helper"
+      :character-count="currentLength"
+      :max-characters="maxlength"
+      :show-counter="showCounter"
+    />
   </x-label>
 </template>

package/src/components/textarea/theme/Textarea.base.theme.ts

@@ -22,6 +22,8 @@ const theme: TextareaTheme = {
 
       return classes
     },
+
+    icon: 'text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0',
   },
 }
 

package/src/components/textarea/theme/Textarea.carbon.theme.ts

@@ -23,6 +23,8 @@ const theme: TextareaTheme = {
 
       return classes
     },
+
+    icon: 'text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0',
   },
 }
 

package/src/components/upload/Upload.vue

@@ -52,7 +52,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, watch, type ExtractPublicPropTypes, type PropType } from 'vue'
+import { computed, onBeforeUnmount, ref, watch, type ExtractPublicPropTypes, type PropType } from 'vue'
 import { useDropZone } from '@vueuse/core'
 import { useCommon } from '../../composables/useCommon'
 import { useInteractive } from '../../composables/useInteractive'
@@ -187,10 +187,20 @@ function isImage(file: File) {
   return file.type.startsWith('image') || imageExtensions.some((ext) => file.name.endsWith(ext))
 }
 
+const blobUrls: string[] = []
+
 function getImagePreview(file: File) {
-  return URL.createObjectURL(file)
+  const url = URL.createObjectURL(file)
+
+  blobUrls.push(url)
+
+  return url
 }
 
+onBeforeUnmount(() => {
+  blobUrls.forEach((url) => URL.revokeObjectURL(url))
+})
+
 function calculateFileSize(size: number) {
   if (size < 1024) return `${size} B`
   if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`

package/src/version.ts

@@ -1 +1 @@
-export default '1.14.4'
+export default '1.15.0'