@indielayer/ui 1.11.0 → 1.12.1

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

@@ -4,20 +4,27 @@ 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' },
+  { value: 'A', label: 'Option lorem ipsum', color: 'bg-red-500' },
+  { value: 'B', label: 'Option B ipsum', color: 'bg-orange-500' },
+  { value: 'C', label: 'Option C lorem ipsum', color: 'bg-amber-500' },
+  { value: 'D', label: 'D', color: 'bg-yellow-500' },
+  { value: 'E', label: 'E ipsum', color: 'bg-lime-500' },
+  { value: 'F', label: 'Option F', color: 'bg-green-500' },
+  { value: 'G', label: 'Option lorem ipsum qoiwjdoqiwjdoqiwjdoqiwjdoi', color: 'bg-emerald-500' },
+  { value: 'H', label: 'Option H', color: 'bg-teal-500' },
+  { value: 'I', label: 'lorem ipsum dolo', color: 'bg-cyan-500' },
+  { value: 'J', label: 'Option J', color: 'bg-sky-500' },
+  { value: 'K', label: 'Option K', color: 'bg-blue-500' },
+  { value: 'L', label: 'consectetur adipi', color: 'bg-indigo-500' },
+  { value: 'M', label: 'Option M', color: 'bg-violet-500' },
 ])
+
+const optionsWithColors = options.value.map((option) => {
+  return {
+    ...option,
+    prefix: option.color,
+  }
+})
 </script>
 
 <template>
@@ -46,5 +53,20 @@ const options = ref([
       multiple-checkbox
       filterable
     />
+    <x-select
+      v-model="selectedMultiple"
+      label="Multi select - checkbox - prefix items"
+      placeholder="Multiple"
+      :options="optionsWithColors"
+      multiple-checkbox
+      filterable
+    >
+      <template #prefix="{ item }">
+        <div class="w-2 h-2 rounded-full" :class="item.prefix"></div>
+      </template>
+      <template #tag-prefix="{ item }">
+        <div class="w-2 h-2 rounded-full" :class="item.prefix"></div>
+      </template>
+    </x-select>
   </div>
 </template>

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

@@ -111,6 +111,7 @@ const linkTab = ref(null)
     v-model="tab"
     class="pb-10"
     variant="block"
+    :full-width="false"
     ghost
   >
     <x-tab value="a" label="Tab A">

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

@@ -25,5 +25,31 @@ const notifications = useNotifications()
     <x-tag removable disabled @remove="notifications?.log('remove me')">I'm a md tag</x-tag>
     <x-tag removable size="lg" @remove="notifications?.log('remove me')">I'm a lg tag</x-tag>
     <x-tag removable size="xl" @remove="notifications?.log('remove me')">I'm a xl tag</x-tag>
+
+    <div class="flex flex-col max-w-xs gap-y-1">
+      <div>
+        <x-tag outlined>
+          I'm a veeeeeeeeeeeeeeeeeeeeeeeery long tag
+        </x-tag>
+      </div>
+
+      <div>
+        <x-tag outlined>
+          <template #prefix>
+            <div class="w-2 h-2 rounded-full bg-green-500"></div>
+          </template>
+          I'm a veeeeeeeeeeeeeeeeeeeeery long tag
+        </x-tag>
+      </div>
+
+      <div>
+        <x-tag removable outlined>
+          <template #prefix>
+            <div class="w-2 h-2 rounded-full bg-green-500"></div>
+          </template>
+          I'm a veeeeeeeeeeeeeeeeeeery long tag
+        </x-tag>
+      </div>
+    </div>
   </div>
 </template>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useNotifications, type UploadFile } from '@indielayer/ui'
+import { useNotifications, XUpload, type UploadFile } from '@indielayer/ui'
 
 const notifications = useNotifications()
 
@@ -72,29 +72,38 @@ function onSubmit(isValid: boolean) {
   notifications?.success('Valid! Submitted.')
 }
 
+const uploadRef = ref<InstanceType<typeof XUpload>>()
+
+function reset() {
+  uploadRef.value?.reset()
+  previewImg.value = undefined
+}
+
 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"
-        />
+      <div class="grid md:grid-cols-2 gap-2 mb-4">
+        <div>
+          <x-upload
+            ref="uploadRef"
+            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-button size="sm" outlined ghost @click="reset">Reset input</x-button>
+        </div>
         <x-upload
           v-model="jsonFile"
           placeholder="Upload your json file"
@@ -105,6 +114,7 @@ const action = 'https://run.mocky.io/v3/6904ae0b-3cfa-4ae1-bbf2-243a4dd32a3c'
           @change="onChangeJSON"
         />
       </div>
+      <x-divider class="my-4"/>
       <x-button type="submit">Submit</x-button>
     </x-form>
     <div v-if="previewImg">

package/lib/components/modal/Modal.vue.js

@@ -78,10 +78,7 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
         u.value = e, c.value = e, A(), document.body.style.paddingRight = "", document.body.style.overflow = "auto";
     }
     typeof window < "u" && G(document, "keydown", W);
-    const R = (e) => [".v-popper__popper", ".x-datepicker"].some((n) => {
-      if (typeof n == "string")
-        return Array.from(window.document.querySelectorAll(n)).some((f) => f === e.target || e.composedPath().includes(f));
-    });
+    const R = (e) => [".v-popper__popper", ".x-datepicker"].some((n) => typeof n == "string" ? Array.from(window.document.querySelectorAll(n)).some((f) => f === e.target || e.composedPath().includes(f)) : !1);
     function W(e) {
       e.key === "Escape" && !R(e) && c.value && !d.persistent && p();
     }

package/lib/components/select/Select.vue.d.ts

@@ -13,7 +13,6 @@ declare const selectProps: {
         type: StringConstructor;
         default: string;
     };
-    filterInputProps: ObjectConstructor;
     virtualList: BooleanConstructor;
     virtualListOffsetTop: NumberConstructor;
     virtualListOffsetBottom: NumberConstructor;
@@ -95,7 +94,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: StringConstructor;
         default: string;
     };
-    filterInputProps: ObjectConstructor;
     virtualList: BooleanConstructor;
     virtualListOffsetTop: NumberConstructor;
     virtualListOffsetBottom: NumberConstructor;
@@ -825,7 +823,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: StringConstructor;
         default: string;
     };
-    filterInputProps: ObjectConstructor;
     virtualList: BooleanConstructor;
     virtualListOffsetTop: NumberConstructor;
     virtualListOffsetBottom: NumberConstructor;
@@ -1234,6 +1231,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         disabled: boolean;
         label: string;
     }): any;
+    "tag-prefix"?(_: {
+        item: SelectOption | undefined;
+    }): any;
     "content-header"?(_: {}): any;
     prefix?(_: {
         item: {