@indielayer/ui 1.12.0 → 1.13.0

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

@@ -13,6 +13,7 @@ date.value = [startDate, endDate]
     v-model="date"
     label="Date"
     tooltip="Use it to pick a date"
+    clearable
     text-input
     multi-calendars
     time-picker-inline

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

@@ -4,7 +4,7 @@ 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', color: 'bg-red-500' },
+  { value: 'A', label: 'Option lorem ipsum lorem ipsum lorem ipsum lorem ipsum 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' },
@@ -44,6 +44,7 @@ const optionsWithColors = options.value.map((option) => {
       :options="options"
       multiple
       truncate
+      clearable
     />
     <x-select
       v-model="selectedMultiple"
@@ -60,12 +61,13 @@ const optionsWithColors = options.value.map((option) => {
       :options="optionsWithColors"
       multiple-checkbox
       filterable
+      clearable
     >
       <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>
+        <div class="w-2 h-2 shrink-0 rounded-full" :class="item.prefix"></div>
       </template>
     </x-select>
   </div>

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

@@ -39,6 +39,7 @@ const options2 = ref(genOptions(1000))
       label="Filterable - virtual list"
       placeholder="Placeholder"
       filterable
+      clearable
       virtual-list
       :virtual-list-item-height="33"
       :options="options2"

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

@@ -8,7 +8,7 @@ const headers: TableHeader[] = [
   { text: '#', value: 'id', sortable: true, align: 'center' },
   { text: 'Title', value: 'title' },
   { text: 'Description', value: 'description', truncate: true, width: 400 },
-  { text: 'Published', value: 'published', sortable: true },
+  { text: 'Published', value: 'published', sortable: true, tooltip: 'Published date' },
   { text: 'Status', value: 'status' },
 ]
 

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/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/datepicker/Datepicker.vue.d.ts

@@ -87,9 +87,9 @@ declare const datepickerProps: {
             clearInput?: string | undefined;
             calendarIcon?: string | undefined;
             timePicker?: string | undefined;
-            monthPicker: (overlay: boolean) => string;
-            yearPicker: (overlay: boolean) => string;
-            timeOverlay: (type: import("@vuepic/vue-datepicker").TimeType) => string;
+            monthPicker?: ((overlay: boolean) => string) | undefined;
+            yearPicker?: ((overlay: boolean) => string) | undefined;
+            timeOverlay?: ((type: import("@vuepic/vue-datepicker").TimeType) => string) | undefined;
         } | undefined>>;
         default: () => {};
     };
@@ -611,9 +611,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             clearInput?: string | undefined;
             calendarIcon?: string | undefined;
             timePicker?: string | undefined;
-            monthPicker: (overlay: boolean) => string;
-            yearPicker: (overlay: boolean) => string;
-            timeOverlay: (type: import("@vuepic/vue-datepicker").TimeType) => string;
+            monthPicker?: ((overlay: boolean) => string) | undefined;
+            yearPicker?: ((overlay: boolean) => string) | undefined;
+            timeOverlay?: ((type: import("@vuepic/vue-datepicker").TimeType) => string) | undefined;
         } | undefined>>;
         default: () => {};
     };
@@ -1134,9 +1134,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
             clearInput?: string | undefined;
             calendarIcon?: string | undefined;
             timePicker?: string | undefined;
-            monthPicker: (overlay: boolean) => string;
-            yearPicker: (overlay: boolean) => string;
-            timeOverlay: (type: import("@vuepic/vue-datepicker").TimeType) => string;
+            monthPicker?: ((overlay: boolean) => string) | undefined;
+            yearPicker?: ((overlay: boolean) => string) | undefined;
+            timeOverlay?: ((type: import("@vuepic/vue-datepicker").TimeType) => string) | undefined;
         } | undefined>>;
         default: () => {};
     };
@@ -1627,9 +1627,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         clearInput?: string | undefined;
         calendarIcon?: string | undefined;
         timePicker?: string | undefined;
-        monthPicker: (overlay: boolean) => string;
-        yearPicker: (overlay: boolean) => string;
-        timeOverlay: (type: import("@vuepic/vue-datepicker").TimeType) => string;
+        monthPicker?: ((overlay: boolean) => string) | undefined;
+        yearPicker?: ((overlay: boolean) => string) | undefined;
+        timeOverlay?: ((type: import("@vuepic/vue-datepicker").TimeType) => string) | undefined;
     } | undefined>;
     timePicker: boolean;
     monthPicker: boolean;

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

@@ -3,10 +3,10 @@ import { useMutationObserver as L } from "../../node_modules/.pnpm/@vueuse_core@
 import { useCommon as R } from "../../composables/useCommon.js";
 import { useInputtable as m } from "../../composables/useInputtable.js";
 import { useInteractive as z } from "../../composables/useInteractive.js";
-import { useTheme as G } from "../../composables/useTheme.js";
-import V from "../input/Input.vue.js";
-import Y from "../../node_modules/.pnpm/@vuepic_vue-datepicker@11.0.1_vue@3.5.10_typescript@5.2.2_/node_modules/@vuepic/vue-datepicker/dist/vue-datepicker.js";
-import "../../node_modules/.pnpm/@vuepic_vue-datepicker@11.0.1_vue@3.5.10_typescript@5.2.2_/node_modules/@vuepic/vue-datepicker/dist/main.css.js";
+import { useTheme as V } from "../../composables/useTheme.js";
+import G from "../input/Input.vue.js";
+import Y from "../../node_modules/.pnpm/@vuepic_vue-datepicker@11.0.2_vue@3.5.10_typescript@5.2.2_/node_modules/@vuepic/vue-datepicker/dist/vue-datepicker.js";
+import "../../node_modules/.pnpm/@vuepic_vue-datepicker@11.0.2_vue@3.5.10_typescript@5.2.2_/node_modules/@vuepic/vue-datepicker/dist/main.css.js";
 const W = {
   multiCalendars: { type: [Boolean, Number, String, Object], default: void 0 },
   modelValue: { type: [String, Date, Array, Object, Number], default: null },
@@ -159,7 +159,7 @@ const W = {
     }, {
       attributes: !0
     }), c({ focus: v, blur: w, validate: r });
-    const { styles: B, classes: S, className: O } = G("Datepicker", {}, b);
+    const { styles: B, classes: S, className: O } = V("Datepicker", {}, b);
     return (e, H) => (N(), I("div", {
       style: P(n(B)),
       class: j([
@@ -268,7 +268,7 @@ const W = {
         "onUpdate:modelValue": k
       }, C({
         "dp-input": p(({ value: s, onEnter: l, onTab: o }) => [
-          d(V, {
+          d(G, {
             ref_key: "inputRef",
             ref: t,
             readonly: e.textInput === !1 || e.readonly,

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

@@ -9,6 +9,7 @@ declare const selectProps: {
     flat: BooleanConstructor;
     native: BooleanConstructor;
     filterable: BooleanConstructor;
+    clearable: BooleanConstructor;
     filterPlaceholder: {
         type: StringConstructor;
         default: string;
@@ -74,7 +75,7 @@ export type SelectOption = {
     onClick?: () => void | undefined;
 };
 export type SelectProps = ExtractPublicPropTypes<typeof selectProps>;
-type InternalClasses = 'wrapper' | 'box' | 'truncateCounter' | 'content' | 'search' | 'contentBody' | 'iconWrapper' | 'icon';
+type InternalClasses = 'wrapper' | 'box' | 'truncateCounter' | 'content' | 'search' | 'contentBody' | 'iconWrapper' | 'clearButton' | 'icon';
 type InternalExtraData = {
     errorInternal: Ref<boolean>;
 };
@@ -90,6 +91,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     flat: BooleanConstructor;
     native: BooleanConstructor;
     filterable: BooleanConstructor;
+    clearable: BooleanConstructor;
     filterPlaceholder: {
         type: StringConstructor;
         default: string;
@@ -819,6 +821,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     flat: BooleanConstructor;
     native: BooleanConstructor;
     filterable: BooleanConstructor;
+    clearable: BooleanConstructor;
     filterPlaceholder: {
         type: StringConstructor;
         default: string;
@@ -889,6 +892,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     hideFooter: boolean;
     rules: unknown[];
     skipFormRegistry: boolean;
+    clearable: boolean;
     multiple: boolean;
     multipleCheckbox: boolean;
     truncate: boolean;