@indielayer/ui 1.12.1 → 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/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/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;