@indielayer/ui 1.9.2 → 1.10.0

package/docs/components/menu/DocsMenu.vue

@@ -24,6 +24,7 @@ const components = [
       { to: '/component/slider', label: 'Slider' },
       { to: '/component/textarea', label: 'Textarea' },
       { to: '/component/toggle', label: 'Toggle' },
+      { to: '/component/upload', label: 'Upload' },
     ],
   },
   {

package/docs/pages/component/form/usage.vue

@@ -39,7 +39,9 @@ function onSubmit(isValid: string) {
       :rules="[rules.isRequired, rules.isEmail]"
       name="email"
       label="Email"
+      required
       placeholder="Enter your email"
+      tooltip="We will never share your email with anyone"
     />
     <x-input
       v-model="password"

package/docs/pages/component/menu/usage.vue

@@ -24,6 +24,8 @@ const menu2: MenuArrayItem[] = [{
   target: '_blank',
   icon: 'smile',
   href: 'https://indielayer.com',
+  prefix: '👉',
+  suffix: '👈',
 }, {
   to: 'menu',
   label: 'Menu item 2',

package/docs/pages/component/select/index.vue

@@ -2,6 +2,8 @@
 import { XSelect } from '@indielayer/ui'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
+import MultipleDemoCode from './multiple.vue?raw'
+import MultipleDemo from './multiple.vue'
 import SizeDemoCode from './size.vue?raw'
 import SizeDemo from './size.vue'
 import StatesDemoCode from './states.vue?raw'
@@ -15,6 +17,11 @@ const demos = [{
   description: '',
   code: UsageDemoCode,
   component: UsageDemo,
+}, {
+  name: 'Multiple',
+  description: '',
+  code: MultipleDemoCode,
+  component: MultipleDemo,
 }, {
   name: 'Size',
   description: '',

package/docs/pages/component/select/multiple.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selectedMultiple = ref<string[]>(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M'])
+
+const options = ref([
+  { value: 'A', label: 'Option lorem ipsum' },
+  { value: 'B', label: 'Option B ipsum' },
+  { value: 'C', label: 'Option C lorem ipsum' },
+  { value: 'D', label: 'D' },
+  { value: 'E', label: 'E ipsum' },
+  { value: 'F', label: 'Option F' },
+  { value: 'G', label: 'Option lorem ipsum qoiwjdoqiwjdoqiwjdoqiwjdoi' },
+  { value: 'H', label: 'Option H' },
+  { value: 'I', label: 'lorem ipsum dolo' },
+  { value: 'J', label: 'Option J' },
+  { value: 'K', label: 'Option K' },
+  { value: 'L', label: 'consectetur adipi' },
+  { value: 'M', label: 'Option M' },
+])
+</script>
+
+<template>
+  <div class="grid md:grid-cols-2 gap-4">
+    <x-select
+      v-model="selectedMultiple"
+      label="Multi select"
+      placeholder="Multiple"
+      :options="options"
+      filterable
+      multiple
+    />
+    <x-select
+      v-model="selectedMultiple"
+      label="Multi select - truncate"
+      placeholder="Multiple"
+      :options="options"
+      multiple
+      truncate
+    />
+  </div>
+</template>

package/docs/pages/component/select/usage.vue

@@ -3,10 +3,10 @@ import { ref } from 'vue'
 
 const selected = ref<undefined | string>()
 const selected2 = ref<undefined | string>()
-const selectedMultiple = ref<string[]>(['A', 'B'])
 const options = ref([
-  { value: 'A', label: 'Option A', disabled: true },
+  { value: 'A', label: 'Option A' },
   { value: 'B', label: 'Option B' },
+  { value: 'C', label: 'Option C' },
 ])
 
 // function to generate
@@ -14,7 +14,7 @@ function genOptions(x: number) {
   const options = []
 
   for (let i = 0; i < x; i++) {
-    options.push({ value: i.toString(), label: 'Option ' + i })
+    options.push({ value: i.toString(), label: 'Option ' + i, suffix: i })
   }
 
   return options
@@ -42,14 +42,10 @@ const options2 = ref(genOptions(1000))
       virtual-list
       :virtual-list-item-height="33"
       :options="options2"
-    />
-    <x-select
-      v-model="selectedMultiple"
-      label="Multi select"
-      placeholder="Multiple"
-      :options="options"
-      filterable
-      multiple
-    />
+    >
+      <template #suffix="{ item }">
+        <span class="text-secondary-400 text-xs font-mono w-2">#{{ item.suffix }}</span>
+      </template>
+    </x-select>
   </div>
 </template>

package/docs/pages/component/table/virtual.vue

@@ -3,11 +3,12 @@ import { type TableHeader } from '@indielayer/ui'
 import { computed, ref } from 'vue'
 
 const headers: TableHeader[] = [
-  { text: '#', value: 'id', sortable: true, align: 'center' },
-  { text: 'Title', value: 'title' },
-  { text: 'Description', value: 'description' },
-  { text: 'Published', value: 'published' },
+  { text: '#', value: 'id', sortable: true, align: 'center', width: 50 },
+  { text: 'Title', value: 'title', width: 120, truncate: true },
+  { text: 'Description', value: 'description', width: 240, truncate: true },
+  { text: 'Published', value: 'published', width: 140, truncate: true },
   { text: 'Status', value: 'status' },
+  { value: 'action', align: 'right' },
 ]
 
 const sort = ref([])
@@ -43,11 +44,23 @@ const items = ref(generateItems(1000))
   <x-card>
     <x-table
       v-model:sort="sort"
-      class="!h-80"
       :headers="headers"
       :items="itemsSorted"
+      class="!h-80"
+      fixed
       virtual-list
       :virtual-list-item-height="54"
-    />
+    >
+      <template #item-action="{ item }">
+        <x-button
+          icon="x"
+          light
+          outlined
+          color="error"
+          size="xs"
+          @click="items = items.filter((i) => i.id !== item.id)"
+        />
+      </template>
+    </x-table>
   </x-card>
 </template>

package/docs/pages/component/toggle/index.vue

@@ -27,7 +27,7 @@ const demos = [{
   component: StatesDemo,
 }]
 const back = 'textarea'
-const next = 'accordion'
+const next = 'upload'
 </script>
 
 <template>

package/docs/pages/component/tooltip/index.vue

@@ -13,7 +13,7 @@ const demos = [{
   component: UsageDemo,
 }]
 const back = 'tag'
-const next = ''
+const next = 'upload'
 </script>
 
 <template>

package/docs/pages/component/upload/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XUpload } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Upload'
+const description = 'The upload component is used to upload files.'
+const components = [XUpload]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'toggle'
+const next = 'accordion'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/upload"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/upload/usage.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useNotifications, type UploadFile } from '@indielayer/ui'
+
+const notifications = useNotifications()
+
+const imageFiles = ref<UploadFile[]>([])
+const jsonFile = ref<UploadFile[]>([])
+
+const rules = {
+  isRequired: (v: string) => {
+    if (Array.isArray(v)) return !!v.length || 'Field is required'
+
+    return !!v  || 'Field is required'
+  },
+  isValidUpload: (v: UploadFile[]) => {
+    if (!v || !v.length) return 'Field is required'
+    if (v.some((file) => file.error)) return 'File upload has errors.'
+
+    return v.every((file) => file.completed) || 'File upload is not completed.'
+  },
+}
+
+const previewImg = ref<string>()
+
+function onChangeImage(event: Event) {
+  const target = event.target as HTMLInputElement
+  const files = target.files as FileList
+
+  if (!files || files.length === 0) return
+
+  const file = files[0]
+
+  // set preview image
+  const reader = new FileReader()
+
+  reader.onload = (e) => {
+    previewImg.value = reader.result as string
+  }
+
+  reader.readAsDataURL(file)
+}
+
+function onUploadComplete(response: any) {
+  console.log('onUploadComplete', response)
+}
+
+const jsonFileOutput = ref<string>()
+
+function onChangeJSON(event: Event) {
+  const target = event.target as HTMLInputElement
+  const files = target.files as FileList
+
+  if (!files || files.length === 0) return
+
+  const fileReader = new FileReader()
+
+  fileReader.onloadend = (e) => {
+    try {
+      jsonFileOutput.value = fileReader.result?.toString() || ''
+    } catch (error) {
+      notifications?.error('Invalid file!')
+    }
+  }
+
+  fileReader.readAsText(files[0])
+}
+
+function onSubmit(isValid: boolean) {
+  if (!isValid) return
+
+  notifications?.success('Valid! Submitted.')
+}
+
+const action = 'https://run.mocky.io/v3/6904ae0b-3cfa-4ae1-bbf2-243a4dd32a3c'
+</script>
+
+<template>
+  <div >
+    <x-form @submit="onSubmit">
+      <div class="grid md:grid-cols-2 gap-2">
+        <x-upload
+          v-model="imageFiles"
+
+          :action="action"
+          method="POST"
+          :with-credentials="false"
+          :rules="[rules.isValidUpload]"
+
+          placeholder="Upload game title cover image"
+          max-file-size="2000000"
+          label="Cover Image"
+          tooltip="Title cover image should be 16:9 aspect ratio and max 2MB"
+          helper="Title cover image should be 16:9 aspect ratio and max 2MB"
+          @upload="onUploadComplete"
+          @change="onChangeImage"
+        />
+        <x-upload
+          v-model="jsonFile"
+          placeholder="Upload your json file"
+          label="JSON File"
+          accept=".json"
+          :rules="[rules.isRequired]"
+          helper="JSON file"
+          @change="onChangeJSON"
+        />
+      </div>
+      <x-button type="submit">Submit</x-button>
+    </x-form>
+    <div v-if="previewImg">
+      <h2>Preview Image</h2>
+      <img :src="previewImg" alt="preview" class="max-w-lg max-h-96" />
+    </div>
+  </div>
+</template>

package/docs/search/components.json

@@ -1 +1 @@
-[{"name":"Accordion","description":"Accordion","url":"/component/accordion"},{"name":"Alert","description":"Alerts are used to communicate a state that affects a system, feature or page.","url":"/component/alert"},{"name":"Avatar","description":"Avatars are used to represent a user.","url":"/component/avatar"},{"name":"Badge","description":"Badges are used to display a small amount of information.","url":"/component/badge"},{"name":"Breadcrumbs","description":"Breadcrumbs are used to indicate the current page\\","url":"/component/breadcrumbs"},{"name":"Button","description":"Used to trigger an action, such as submitting a form, opening a menu, or performing a command.","url":"/component/button"},{"name":"Card","description":"Cards are used to display content in an organized manner.","url":"/component/card"},{"name":"Carousel","description":"A carousel is a rotating set of images.","url":"/component/carousel"},{"name":"Checkbox","description":"Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.","url":"/component/checkbox"},{"name":"Container","description":"Containers are used to wrap content in an organized manner.","url":"/component/container"},{"name":"Datepicker","description":"The datepicker component is used to select a date or time.","url":"/component/datepicker"},{"name":"Divider","description":"Dividers are used to separate content.","url":"/component/divider"},{"name":"Drawer","description":"Drawers are used to display content in a side panel.","url":"/component/drawer"},{"name":"Form","description":"Forms are used to collect user input.","url":"/component/form"},{"name":"FormGroup","description":"A form group is a wrapper for form elements.","url":"/component/formGroup"},{"name":"Icon","description":"Icons are used to represent an action or an object.","url":"/component/icon"},{"name":"Image","description":"Image is used to load an image file with a skeleton as placeholder and on load display the image.","url":"/component/image"},{"name":"Input","description":"This is a text input component that allows users to enter and edit text.","url":"/component/input"},{"name":"Link","description":"Links are used to navigate to a different page.","url":"/component/link"},{"name":"Loader","description":"Loader component is used to show a loading state.","url":"/component/loader"},{"name":"Menu","description":"Menus are used to display a list of options.","url":"/component/menu"},{"name":"Modal","description":"Modals are used to display content on top of the current page.","url":"/component/modal"},{"name":"Notifications","description":"Notifications are used to display a message to the user.","url":"/component/notifications"},{"name":"Pagination","description":"Pagination is used to navigate through a list of items.","url":"/component/pagination"},{"name":"Popover","description":"Popover is used to display content in a small overlay.","url":"/component/popover"},{"name":"Progress","description":"Progress is used to show the progress of an operation.","url":"/component/progress"},{"name":"QR Code","description":"The QR Code component is used to generate a QR code.","url":"/component/qrCode"},{"name":"Radio","description":"Radios allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.","url":"/component/radio"},{"name":"Scroll","description":"Scroll is used to scroll through a list of items with added features like inner shadows to indicate there is more to scroll.","url":"/component/scroll"},{"name":"Select","description":"Selects allow the user to select one or more options from a set.","url":"/component/select"},{"name":"Skeleton","description":"Skeletons are used to display a loading state.","url":"/component/skeleton"},{"name":"Slider","description":"Sliders are used to select a value from a range.","url":"/component/slider"},{"name":"Spacer","description":"Spacer is used to add space between elements inside a display flex wrapper.","url":"/component/spacer"},{"name":"Spinner","description":"Spinners are used to indicate that an operation is in progress.","url":"/component/spinner"},{"name":"Stepper","description":"Stepper is a navigation component that guides users through the steps of a task.","url":"/component/stepper"},{"name":"Table","description":"Tables are used to display data in a tabular format.","url":"/component/table"},{"name":"Tabs","description":"Tabs are used to navigate through a set of views.","url":"/component/tabs"},{"name":"Tag","description":"Tags are used to display a label.","url":"/component/tag"},{"name":"Textarea","description":"Textareas allow the user to enter text.","url":"/component/textarea"},{"name":"Toggle","description":"Toggles are used to switch between two states.","url":"/component/toggle"},{"name":"Tooltip","description":"Tooltips are used to display a message when hovering over an element.","url":"/component/tooltip"}]
+[{"name":"Accordion","description":"Accordion","url":"/component/accordion"},{"name":"Alert","description":"Alerts are used to communicate a state that affects a system, feature or page.","url":"/component/alert"},{"name":"Avatar","description":"Avatars are used to represent a user.","url":"/component/avatar"},{"name":"Badge","description":"Badges are used to display a small amount of information.","url":"/component/badge"},{"name":"Breadcrumbs","description":"Breadcrumbs are used to indicate the current page\\","url":"/component/breadcrumbs"},{"name":"Button","description":"Used to trigger an action, such as submitting a form, opening a menu, or performing a command.","url":"/component/button"},{"name":"Card","description":"Cards are used to display content in an organized manner.","url":"/component/card"},{"name":"Carousel","description":"A carousel is a rotating set of images.","url":"/component/carousel"},{"name":"Checkbox","description":"Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.","url":"/component/checkbox"},{"name":"Container","description":"Containers are used to wrap content in an organized manner.","url":"/component/container"},{"name":"Datepicker","description":"The datepicker component is used to select a date or time.","url":"/component/datepicker"},{"name":"Divider","description":"Dividers are used to separate content.","url":"/component/divider"},{"name":"Drawer","description":"Drawers are used to display content in a side panel.","url":"/component/drawer"},{"name":"Form","description":"Forms are used to collect user input.","url":"/component/form"},{"name":"FormGroup","description":"A form group is a wrapper for form elements.","url":"/component/formGroup"},{"name":"Icon","description":"Icons are used to represent an action or an object.","url":"/component/icon"},{"name":"Image","description":"Image is used to load an image file with a skeleton as placeholder and on load display the image.","url":"/component/image"},{"name":"Input","description":"This is a text input component that allows users to enter and edit text.","url":"/component/input"},{"name":"Link","description":"Links are used to navigate to a different page.","url":"/component/link"},{"name":"Loader","description":"Loader component is used to show a loading state.","url":"/component/loader"},{"name":"Menu","description":"Menus are used to display a list of options.","url":"/component/menu"},{"name":"Modal","description":"Modals are used to display content on top of the current page.","url":"/component/modal"},{"name":"Notifications","description":"Notifications are used to display a message to the user.","url":"/component/notifications"},{"name":"Pagination","description":"Pagination is used to navigate through a list of items.","url":"/component/pagination"},{"name":"Popover","description":"Popover is used to display content in a small overlay.","url":"/component/popover"},{"name":"Progress","description":"Progress is used to show the progress of an operation.","url":"/component/progress"},{"name":"QR Code","description":"The QR Code component is used to generate a QR code.","url":"/component/qrCode"},{"name":"Radio","description":"Radios allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.","url":"/component/radio"},{"name":"Scroll","description":"Scroll is used to scroll through a list of items with added features like inner shadows to indicate there is more to scroll.","url":"/component/scroll"},{"name":"Select","description":"Selects allow the user to select one or more options from a set.","url":"/component/select"},{"name":"Skeleton","description":"Skeletons are used to display a loading state.","url":"/component/skeleton"},{"name":"Slider","description":"Sliders are used to select a value from a range.","url":"/component/slider"},{"name":"Spacer","description":"Spacer is used to add space between elements inside a display flex wrapper.","url":"/component/spacer"},{"name":"Spinner","description":"Spinners are used to indicate that an operation is in progress.","url":"/component/spinner"},{"name":"Stepper","description":"Stepper is a navigation component that guides users through the steps of a task.","url":"/component/stepper"},{"name":"Table","description":"Tables are used to display data in a tabular format.","url":"/component/table"},{"name":"Tabs","description":"Tabs are used to navigate through a set of views.","url":"/component/tabs"},{"name":"Tag","description":"Tags are used to display a label.","url":"/component/tag"},{"name":"Textarea","description":"Textareas allow the user to enter text.","url":"/component/textarea"},{"name":"Toggle","description":"Toggles are used to switch between two states.","url":"/component/toggle"},{"name":"Tooltip","description":"Tooltips are used to display a message when hovering over an element.","url":"/component/tooltip"},{"name":"Upload","description":"The upload component is used to upload files.","url":"/component/upload"}]

package/lib/common/icons.d.ts

@@ -16,3 +16,5 @@ export declare const externalIcon = "<line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"
 export declare const stepperPristineIcon = "<path d=\"M7.5 4.21v.01M4.21 7.5v.01M3 12v.01m1.21 4.49v.01m3.29 3.28v.01M12 21v.01m4.5-1.22v.01m3.29-3.3v.01M21 12v.01M19.79 7.5v.01m-3.29-3.3v.01M12 3v.01\"/>";
 export declare const stepperIncompleteIcon = "<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" fill=\"currentColor\" viewBox=\"0 0 32 32\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M23.7642 6.8593l1.2851-1.5315A13.976 13.976 0 0020.8672 2.887l-.6836 1.8776A11.9729 11.9729 0 0123.7642 6.8593zM27.81 14l1.9677-.4128A13.8888 13.8888 0 0028.14 9.0457L26.4087 10A12.52 12.52 0 0127.81 14zM20.1836 27.2354l.6836 1.8776a13.976 13.976 0 004.1821-2.4408l-1.2851-1.5315A11.9729 11.9729 0 0120.1836 27.2354zM26.4087 22L28.14 23a14.14 14.14 0 001.6382-4.5872L27.81 18.0659A12.1519 12.1519 0 0126.4087 22zM16 30V2a14 14 0 000 28z\"></path></svg>";
 export declare const chevronDownIcon = "<path d=\"M19 9l-7 7-7-7\" />";
+export declare const uploadIcon = "<path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path><polyline points=\"17 8 12 3 7 8\"></polyline><line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"></line>";
+export declare const fileIcon = "<path d=\"M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z\"></path><polyline points=\"13 2 13 9 20 9\"></polyline>";

package/lib/common/icons.js

@@ -1,20 +1,22 @@
-const t = '<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />', c = '<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />', o = '<path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />', n = '<path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />', a = '<path d="M6 18L18 6M6 6l12 12" />', M = '<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />', e = '<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />', s = '<path d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />', h = '<path d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />', l = '<path d="M15 19l-7-7 7-7" />', p = '<path d="M9 5l7 7-7 7" />', v = '<path d="M5 13l4 4L19 7" />', d = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />', m = '<line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" />', r = '<path d="M7.5 4.21v.01M4.21 7.5v.01M3 12v.01m1.21 4.49v.01m3.29 3.28v.01M12 21v.01m4.5-1.22v.01m3.29-3.3v.01M21 12v.01M19.79 7.5v.01m-3.29-3.3v.01M12 3v.01"/>', I = '<svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M23.7642 6.8593l1.2851-1.5315A13.976 13.976 0 0020.8672 2.887l-.6836 1.8776A11.9729 11.9729 0 0123.7642 6.8593zM27.81 14l1.9677-.4128A13.8888 13.8888 0 0028.14 9.0457L26.4087 10A12.52 12.52 0 0127.81 14zM20.1836 27.2354l.6836 1.8776a13.976 13.976 0 004.1821-2.4408l-1.2851-1.5315A11.9729 11.9729 0 0120.1836 27.2354zM26.4087 22L28.14 23a14.14 14.14 0 001.6382-4.5872L27.81 18.0659A12.1519 12.1519 0 0126.4087 22zM16 30V2a14 14 0 000 28z"></path></svg>', i = '<path d="M19 9l-7 7-7-7" />';
+const n = '<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />', o = '<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />', t = '<path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />', c = '<path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />', a = '<path d="M6 18L18 6M6 6l12 12" />', e = '<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />', l = '<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />', p = '<path d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />', M = '<path d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />', s = '<path d="M15 19l-7-7 7-7" />', h = '<path d="M9 5l7 7-7 7" />', v = '<path d="M5 13l4 4L19 7" />', d = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />', i = '<line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" />', m = '<path d="M7.5 4.21v.01M4.21 7.5v.01M3 12v.01m1.21 4.49v.01m3.29 3.28v.01M12 21v.01m4.5-1.22v.01m3.29-3.3v.01M21 12v.01M19.79 7.5v.01m-3.29-3.3v.01M12 3v.01"/>', r = '<svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M23.7642 6.8593l1.2851-1.5315A13.976 13.976 0 0020.8672 2.887l-.6836 1.8776A11.9729 11.9729 0 0123.7642 6.8593zM27.81 14l1.9677-.4128A13.8888 13.8888 0 0028.14 9.0457L26.4087 10A12.52 12.52 0 0127.81 14zM20.1836 27.2354l.6836 1.8776a13.976 13.976 0 004.1821-2.4408l-1.2851-1.5315A11.9729 11.9729 0 0120.1836 27.2354zM26.4087 22L28.14 23a14.14 14.14 0 001.6382-4.5872L27.81 18.0659A12.1519 12.1519 0 0126.4087 22zM16 30V2a14 14 0 000 28z"></path></svg>', I = '<path d="M19 9l-7 7-7-7" />', z = '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line>', y = '<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>';
 export {
-  M as avatarIcon,
+  e as avatarIcon,
   v as checkIcon,
-  i as chevronDownIcon,
+  I as chevronDownIcon,
   a as closeIcon,
-  h as dotsIcon,
-  o as errorIcon,
-  m as externalIcon,
-  e as eyeIcon,
-  s as eyeVisibleIcon,
-  t as infoIcon,
-  p as nextIcon,
-  l as prevIcon,
+  M as dotsIcon,
+  t as errorIcon,
+  i as externalIcon,
+  l as eyeIcon,
+  p as eyeVisibleIcon,
+  y as fileIcon,
+  n as infoIcon,
+  h as nextIcon,
+  s as prevIcon,
   d as selectIcon,
-  I as stepperIncompleteIcon,
-  r as stepperPristineIcon,
-  c as successIcon,
-  n as warningIcon
+  r as stepperIncompleteIcon,
+  m as stepperPristineIcon,
+  o as successIcon,
+  z as uploadIcon,
+  c as warningIcon
 };

package/lib/components/checkbox/Checkbox.vue2.js

@@ -1,18 +1,18 @@
 import { defineComponent as R, ref as w, watch as m, unref as o, openBlock as i, createElementBlock as p, normalizeStyle as T, normalizeClass as u, createElementVNode as d, withKeys as H, withModifiers as O, withDirectives as U, mergeProps as X, toHandlers as j, vModelCheckbox as J, createBlock as V, renderSlot as C, toDisplayString as Q, createCommentVNode as W } from "vue";
-import { useTheme as Y } from "../../composables/useTheme.js";
+import { useColors as Y } from "../../composables/useColors.js";
 import { useCommon as I } from "../../composables/useCommon.js";
-import { useColors as Z } from "../../composables/useColors.js";
-import { useInteractive as z } from "../../composables/useInteractive.js";
 import { useInputtable as f } from "../../composables/useInputtable.js";
-import x from "../spinner/Spinner.vue.js";
-import _ from "../inputFooter/InputFooter.vue.js";
+import { useInteractive as z } from "../../composables/useInteractive.js";
+import { useTheme as Z } from "../../composables/useTheme.js";
+import x from "../inputFooter/InputFooter.vue.js";
+import _ from "../spinner/Spinner.vue.js";
 const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled", "disabled", "required"], le = {
   key: 1,
   name: "check-icon",
   class: "w-2/3 h-[2px] bg-white dark:bg-secondary-900"
 }, ae = ["textContent"], oe = {
   ...I.props(),
-  ...Z.props("primary"),
+  ...Y.props("primary"),
   ...z.props(),
   ...f.props(),
   value: [String, Number],
@@ -73,7 +73,7 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
           l.validateOnInput && !q.value && k(l.modelValue);
         }, 0);
       }
-    }, { styles: M, classes: t, className: D } = Y("Checkbox", {}, l, { checked: a, isInsideForm: S, isInsideFormGroup: c });
+    }, { styles: M, classes: t, className: D } = Z("Checkbox", {}, l, { checked: a, isInsideForm: S, isInsideFormGroup: c });
     return B({ focus: h, blur: F, toggle: y, reset: E, validate: k, setError: K }), (e, s) => (i(), p("label", {
       style: T(o(M)),
       class: u([
@@ -107,7 +107,7 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
             [e.glow && !e.disabled && !e.loading ? e.$style["checkbox--glow"] : ""]
           ])
         }, [
-          e.loading ? (i(), V(x, {
+          e.loading ? (i(), V(_, {
             key: 0,
             size: e.size,
             class: "absolute"
@@ -129,7 +129,7 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
           }, null, 8, ae)) : C(e.$slots, "default", { key: 1 })
         ], 2)
       ], 42, ee),
-      o(N) ? W("", !0) : (i(), V(_, {
+      o(N) ? W("", !0) : (i(), V(x, {
         key: 0,
         error: o(G),
         helper: e.helper

package/lib/components/datepicker/Datepicker.vue.d.ts

@@ -294,7 +294,7 @@ declare const datepickerProps: {
         default: string;
     };
     weekStart: {
-        type: PropType<0 | 1 | 2 | "0" | "1" | 3 | 4 | 5 | 6 | "2" | "3" | "4" | "5" | "6" | undefined>;
+        type: PropType<0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | "2" | "3" | "4" | "5" | "6" | undefined>;
         default: number;
     };
     weekNumbers: {
@@ -861,7 +861,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         default: string;
     };
     weekStart: {
-        type: PropType<0 | 1 | 2 | "0" | "1" | 3 | 4 | 5 | 6 | "2" | "3" | "4" | "5" | "6" | undefined>;
+        type: PropType<0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | "2" | "3" | "4" | "5" | "6" | undefined>;
         default: number;
     };
     weekNumbers: {
@@ -1427,7 +1427,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         default: string;
     };
     weekStart: {
-        type: PropType<0 | 1 | 2 | "0" | "1" | 3 | 4 | 5 | 6 | "2" | "3" | "4" | "5" | "6" | undefined>;
+        type: PropType<0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | "2" | "3" | "4" | "5" | "6" | undefined>;
         default: number;
     };
     weekNumbers: {
@@ -1794,7 +1794,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         quarter: number;
         year: number;
     }) => boolean) | Partial<import("@vuepic/vue-datepicker").Highlight> | undefined;
-    weekStart: 0 | 1 | 2 | "0" | "1" | 3 | 4 | 5 | 6 | "2" | "3" | "4" | "5" | "6" | undefined;
+    weekStart: 0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | "2" | "3" | "4" | "5" | "6" | undefined;
     weekNumbers: import("@vuepic/vue-datepicker").WeekNumberType | {
         type: import("@vuepic/vue-datepicker").WeekNumberType;
         hideOnOffsetDates?: boolean | undefined;

package/lib/components/datepicker/Datepicker.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent as O, ref as d, openBlock as D, createElementBlock as C, normalizeStyle as I, unref as n, normalizeClass as P, createVNode as u, createSlots as T, withCtx as m, withKeys as p, withModifiers as R, renderList as j, renderSlot as F, normalizeProps as A, guardReactiveProps as z } from "vue";
-import { useMutationObserver as L } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { useMutationObserver as L } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
 import { useCommon as q } from "../../composables/useCommon.js";
 import { useInputtable as f } from "../../composables/useInputtable.js";
 import { useInteractive as M } from "../../composables/useInteractive.js";

package/lib/components/drawer/Drawer.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent as X, ref as a, watchEffect as j, watch as K, computed as v, onMounted as M, openBlock as y, createBlock as O, Teleport as q, createVNode as w, Transition as F, withCtx as g, withDirectives as G, createElementVNode as k, normalizeClass as $, unref as n, createElementBlock as H, createCommentVNode as x, normalizeStyle as I, renderSlot as f, vShow as J } from "vue";
-import { useBreakpoints as Q, breakpointsTailwind as U, useEventListener as S, useSwipe as W } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { useBreakpoints as Q, breakpointsTailwind as U, useEventListener as S, useSwipe as W } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
 import { useTheme as Y } from "../../composables/useTheme.js";
 import Z from "../scroll/Scroll.vue.js";
 const ee = {
@@ -50,22 +50,6 @@ const ee = {
       e.key === "Escape" && s.value && l();
     }
     W(d, {
-      // passive: false,
-      // onSwipe(e: TouchEvent) {
-      //   if (lengthX.value < 0) {
-      //     const length = Math.abs(lengthX.value)
-      //     left.value = `${length}px`
-      //   } else {
-      //     left.value = '0'
-      //   }
-      // },
-      // onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
-      //   if (lengthX.value < 0 && props.width && (Math.abs(lengthX.value) / props.width) >= 0.5) {
-      //     left.value = '100%'
-      //   } else {
-      //     left.value = '0'
-      //   }
-      // },
       onSwipeEnd(e, o) {
         i.value && (t.position === "left" && o === "left" || t.position === "right" && o === "right" || t.position === "top" && o === "up" || t.position === "bottom" && o === "down") && l();
       }

package/lib/components/form/Form.vue.d.ts

@@ -11,7 +11,7 @@ declare const formProps: {
     };
     disabled: BooleanConstructor;
     errors: {
-        type: PropType<[FormError[], FormError]>;
+        type: PropType<FormError | FormError[]>;
         default: () => never[];
     };
     title: StringConstructor;
@@ -51,7 +51,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     };
     disabled: BooleanConstructor;
     errors: {
-        type: PropType<[FormError[], FormError]>;
+        type: PropType<FormError | FormError[]>;
         default: () => never[];
     };
     title: StringConstructor;
@@ -71,7 +71,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     };
     disabled: BooleanConstructor;
     errors: {
-        type: PropType<[FormError[], FormError]>;
+        type: PropType<FormError | FormError[]>;
         default: () => never[];
     };
     title: StringConstructor;
@@ -86,7 +86,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     autoValidate: boolean;
     autoFocus: boolean;
     disabled: boolean;
-    errors: [FormError[], FormError];
+    errors: FormError | FormError[];
     hasFooter: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     header?(_: {}): any;