@pequity/squirrel 1.0.20-beta.2 → 1.0.20-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/chunks/_plugin-vue_export-helper.js +9 -1
- package/dist/cjs/chunks/p-action-bar.js +60 -1
- package/dist/cjs/chunks/p-card.js +28 -1
- package/dist/cjs/chunks/p-checkbox.js +24 -1
- package/dist/cjs/chunks/p-dropdown-select.js +414 -1
- package/dist/cjs/chunks/p-input-percent.js +53 -1
- package/dist/cjs/chunks/p-pagination-info.js +66 -1
- package/dist/cjs/chunks/p-pagination.js +122 -1
- package/dist/cjs/chunks/p-ring-loader.js +81 -1
- package/dist/cjs/chunks/p-select-btn.js +97 -1
- package/dist/cjs/chunks/p-select.js +123 -1
- package/dist/cjs/chunks/p-table-loader.js +70 -1
- package/dist/cjs/chunks/p-tabs.js +52 -1
- package/dist/cjs/config.js +105 -1
- package/dist/cjs/currency.js +9 -1
- package/dist/cjs/dom.js +27 -1
- package/dist/cjs/index.js +976 -1
- package/dist/cjs/inputClassesMixin.js +50 -1
- package/dist/cjs/inputClassesShared.js +76 -1
- package/dist/cjs/listKeyboardNavigation.js +110 -1
- package/dist/cjs/number.js +9 -1
- package/dist/cjs/object.js +4 -1
- package/dist/cjs/p-action-bar.js +3 -1
- package/dist/cjs/p-alert.js +65 -1
- package/dist/cjs/p-avatar.js +71 -1
- package/dist/cjs/p-btn.js +358 -2
- package/dist/cjs/p-card.js +3 -1
- package/dist/cjs/p-checkbox.js +3 -1
- package/dist/cjs/p-chips.js +110 -1
- package/dist/cjs/p-close-btn.js +36 -1
- package/dist/cjs/p-date-picker.js +139 -1
- package/dist/cjs/p-drawer.js +253 -1
- package/dist/cjs/p-dropdown-select.js +3 -1
- package/dist/cjs/p-dropdown.js +138 -1
- package/dist/cjs/p-file-upload.js +21 -1
- package/dist/cjs/p-info-icon.js +35 -1
- package/dist/cjs/p-inline-date-picker.js +142 -1
- package/dist/cjs/p-input-number.js +146 -1
- package/dist/cjs/p-input-percent.js +3 -1
- package/dist/cjs/p-input-search.js +110 -1
- package/dist/cjs/p-input.js +89 -1
- package/dist/cjs/p-loading.js +38 -1
- package/dist/cjs/p-modal.js +369 -1
- package/dist/cjs/p-pagination-info.js +3 -1
- package/dist/cjs/p-pagination.js +3 -1
- package/dist/cjs/p-progress-bar.js +41 -1
- package/dist/cjs/p-ring-loader.js +3 -1
- package/dist/cjs/p-select-btn.js +3 -1
- package/dist/cjs/p-select-list.js +4 -1
- package/dist/cjs/p-select-pill.js +111 -1
- package/dist/cjs/p-select.js +3 -1
- package/dist/cjs/p-skeleton-loader.js +73 -1
- package/dist/cjs/p-table-filter-icon.js +20 -1
- package/dist/cjs/p-table-header-cell.js +75 -1
- package/dist/cjs/p-table-loader.js +3 -1
- package/dist/cjs/p-table-sort.js +8 -1
- package/dist/cjs/p-table-td.js +88 -1
- package/dist/cjs/p-table.js +12 -1
- package/dist/cjs/p-tabs.js +3 -1
- package/dist/cjs/p-textarea.js +73 -1
- package/dist/cjs/p-toggle.js +114 -1
- package/dist/cjs/pagination.js +29 -1
- package/dist/cjs/string.js +12 -1
- package/dist/cjs/tailwind.js +4353 -1
- package/dist/cjs/text.js +16 -1
- package/dist/cjs/useInputClasses.js +44 -1
- package/dist/cjs/usePLoading.js +35 -1
- package/dist/cjs/usePModal.js +21 -1
- package/dist/cjs/usePTableColResize.js +81 -1
- package/dist/cjs/usePTableRowVirtualizer.js +31 -1
- package/dist/cjs/useSelectList.js +256 -1
- package/dist/es/chunks/_plugin-vue_export-helper.js +7 -6
- package/dist/es/chunks/p-action-bar.js +45 -36
- package/dist/es/chunks/p-card.js +18 -14
- package/dist/es/chunks/p-checkbox.js +14 -11
- package/dist/es/chunks/p-dropdown-select.js +232 -183
- package/dist/es/chunks/p-input-percent.js +34 -25
- package/dist/es/chunks/p-pagination-info.js +30 -24
- package/dist/es/chunks/p-pagination.js +78 -48
- package/dist/es/chunks/p-ring-loader.js +63 -40
- package/dist/es/chunks/p-select-btn.js +80 -59
- package/dist/es/chunks/p-select.js +81 -54
- package/dist/es/chunks/p-table-loader.js +46 -32
- package/dist/es/chunks/p-tabs.js +35 -29
- package/dist/es/config.js +2 -2
- package/dist/es/currency.js +3 -3
- package/dist/es/dom.js +24 -12
- package/dist/es/index.js +703 -561
- package/dist/es/inputClassesMixin.js +20 -14
- package/dist/es/inputClassesShared.js +60 -45
- package/dist/es/listKeyboardNavigation.js +86 -36
- package/dist/es/number.js +7 -2
- package/dist/es/object.js +2 -2
- package/dist/es/p-action-bar.js +2 -2
- package/dist/es/p-alert.js +35 -30
- package/dist/es/p-avatar.js +30 -27
- package/dist/es/p-btn.js +209 -164
- package/dist/es/p-card.js +2 -2
- package/dist/es/p-checkbox.js +2 -2
- package/dist/es/p-chips.js +60 -40
- package/dist/es/p-close-btn.js +20 -16
- package/dist/es/p-date-picker.js +66 -58
- package/dist/es/p-drawer.js +108 -89
- package/dist/es/p-dropdown-select.js +2 -2
- package/dist/es/p-dropdown.js +52 -33
- package/dist/es/p-file-upload.js +17 -9
- package/dist/es/p-info-icon.js +21 -16
- package/dist/es/p-inline-date-picker.js +64 -53
- package/dist/es/p-input-number.js +84 -66
- package/dist/es/p-input-percent.js +2 -2
- package/dist/es/p-input-search.js +43 -41
- package/dist/es/p-input.js +51 -45
- package/dist/es/p-loading.js +31 -22
- package/dist/es/p-modal.js +261 -174
- package/dist/es/p-pagination-info.js +2 -2
- package/dist/es/p-pagination.js +2 -2
- package/dist/es/p-progress-bar.js +26 -23
- package/dist/es/p-ring-loader.js +2 -2
- package/dist/es/p-select-btn.js +2 -2
- package/dist/es/p-select-list.js +2 -2
- package/dist/es/p-select-pill.js +58 -41
- package/dist/es/p-select.js +2 -2
- package/dist/es/p-skeleton-loader.js +34 -29
- package/dist/es/p-table-filter-icon.js +11 -11
- package/dist/es/p-table-header-cell.js +38 -33
- package/dist/es/p-table-loader.js +2 -2
- package/dist/es/p-table-sort.js +2 -2
- package/dist/es/p-table-td.js +76 -29
- package/dist/es/p-table.js +10 -6
- package/dist/es/p-tabs.js +2 -2
- package/dist/es/p-textarea.js +36 -34
- package/dist/es/p-toggle.js +53 -48
- package/dist/es/pagination.js +25 -8
- package/dist/es/string.js +10 -2
- package/dist/es/tailwind.js +1660 -1101
- package/dist/es/text.js +13 -8
- package/dist/es/useInputClasses.js +38 -22
- package/dist/es/usePLoading.js +31 -15
- package/dist/es/usePModal.js +15 -12
- package/dist/es/usePTableColResize.js +71 -39
- package/dist/es/usePTableRowVirtualizer.js +24 -15
- package/dist/es/useSelectList.js +234 -121
- package/dist/style.css +2124 -1
- package/package.json +1 -1
|
@@ -1,20 +1,22 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { DatePicker
|
|
4
|
-
import { defineComponent
|
|
5
|
-
import { _ as
|
|
6
|
-
const
|
|
1
|
+
import dayjs from "dayjs";
|
|
2
|
+
import inputClassesMixin from "./inputClassesMixin.js";
|
|
3
|
+
import { DatePicker } from "v-calendar";
|
|
4
|
+
import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, toDisplayString, createCommentVNode, createVNode, mergeProps, withDirectives, createElementVNode, vShow } from "vue";
|
|
5
|
+
import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
|
|
6
|
+
const selectAttribute = { highlight: { class: "bg-primary", contentClass: "text-white" } };
|
|
7
|
+
const DEFAULT_MASKS = {
|
|
7
8
|
// The mask for the input
|
|
8
9
|
input: "DD-MMM-YYYY",
|
|
9
10
|
// The mask for the model value
|
|
10
11
|
data: "YYYY-MM-DD"
|
|
11
|
-
}
|
|
12
|
+
};
|
|
13
|
+
const _sfc_main = defineComponent({
|
|
12
14
|
name: "PInlineDatePicker",
|
|
13
15
|
components: {
|
|
14
|
-
DatePicker
|
|
16
|
+
DatePicker
|
|
15
17
|
},
|
|
16
|
-
mixins: [
|
|
17
|
-
inheritAttrs:
|
|
18
|
+
mixins: [inputClassesMixin],
|
|
19
|
+
inheritAttrs: false,
|
|
18
20
|
props: {
|
|
19
21
|
modelValue: {
|
|
20
22
|
type: String,
|
|
@@ -30,7 +32,7 @@ const M = { highlight: { class: "bg-primary", contentClass: "text-white" } }, v
|
|
|
30
32
|
},
|
|
31
33
|
required: {
|
|
32
34
|
type: Boolean,
|
|
33
|
-
default:
|
|
35
|
+
default: false
|
|
34
36
|
},
|
|
35
37
|
minDate: {
|
|
36
38
|
type: Date,
|
|
@@ -50,19 +52,25 @@ const M = { highlight: { class: "bg-primary", contentClass: "text-white" } }, v
|
|
|
50
52
|
return {
|
|
51
53
|
// innerValue is a Date object
|
|
52
54
|
innerValue: null,
|
|
53
|
-
selectAttribute
|
|
55
|
+
selectAttribute
|
|
54
56
|
};
|
|
55
57
|
},
|
|
56
58
|
computed: {
|
|
57
59
|
masks() {
|
|
58
|
-
return Object.assign(
|
|
60
|
+
return Object.assign(DEFAULT_MASKS, this.$attrs.masks);
|
|
59
61
|
},
|
|
60
62
|
attrs() {
|
|
61
|
-
const { class:
|
|
62
|
-
return
|
|
63
|
+
const { class: classes, style, ...rest } = this.$attrs;
|
|
64
|
+
return rest;
|
|
63
65
|
},
|
|
64
66
|
listeners() {
|
|
65
|
-
return Object.keys(this.$attrs).reduce((
|
|
67
|
+
return Object.keys(this.$attrs).reduce((acc, curr) => {
|
|
68
|
+
if (curr.startsWith("on")) {
|
|
69
|
+
return { ...acc, [curr]: this.$attrs[curr] };
|
|
70
|
+
} else {
|
|
71
|
+
return acc;
|
|
72
|
+
}
|
|
73
|
+
}, {});
|
|
66
74
|
},
|
|
67
75
|
style() {
|
|
68
76
|
return this.$attrs.style;
|
|
@@ -73,17 +81,19 @@ const M = { highlight: { class: "bg-primary", contentClass: "text-white" } }, v
|
|
|
73
81
|
},
|
|
74
82
|
watch: {
|
|
75
83
|
modelValue: {
|
|
76
|
-
handler(
|
|
77
|
-
const
|
|
78
|
-
if (
|
|
84
|
+
handler(nV) {
|
|
85
|
+
const date = dayjs(nV, this.masks.data).toDate();
|
|
86
|
+
if (nV && date.toString() === "Invalid Date") {
|
|
79
87
|
this.$emit("update:modelValue", null);
|
|
80
88
|
return;
|
|
81
89
|
}
|
|
82
|
-
this.innerValue =
|
|
83
|
-
const
|
|
84
|
-
|
|
90
|
+
this.innerValue = nV ? dayjs(nV, this.masks.data).toDate() : null;
|
|
91
|
+
const datepicker = this.$refs.datepicker;
|
|
92
|
+
if (datepicker && this.innerValue) {
|
|
93
|
+
datepicker.move(this.innerValue);
|
|
94
|
+
}
|
|
85
95
|
},
|
|
86
|
-
immediate:
|
|
96
|
+
immediate: true
|
|
87
97
|
}
|
|
88
98
|
},
|
|
89
99
|
methods: {
|
|
@@ -91,42 +101,43 @@ const M = { highlight: { class: "bg-primary", contentClass: "text-white" } }, v
|
|
|
91
101
|
this.$emit("update:modelValue", e.id);
|
|
92
102
|
}
|
|
93
103
|
}
|
|
94
|
-
})
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
104
|
+
});
|
|
105
|
+
const _hoisted_1 = ["data-has-error"];
|
|
106
|
+
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
107
|
+
const _component_DatePicker = resolveComponent("DatePicker");
|
|
108
|
+
return openBlock(), createElementBlock("div", {
|
|
109
|
+
class: normalizeClass([{ hidden: _ctx.$attrs.hidden }, _ctx.$attrs.class]),
|
|
110
|
+
"data-has-error": !!_ctx.errorMsg,
|
|
111
|
+
style: normalizeStyle(_ctx.style)
|
|
101
112
|
}, [
|
|
102
|
-
|
|
103
|
-
label:
|
|
104
|
-
labelClasses:
|
|
113
|
+
renderSlot(_ctx.$slots, "label", {
|
|
114
|
+
label: _ctx.label,
|
|
115
|
+
labelClasses: _ctx.labelClasses
|
|
105
116
|
}, () => [
|
|
106
|
-
|
|
117
|
+
_ctx.label ? (openBlock(), createElementBlock("label", {
|
|
107
118
|
key: 0,
|
|
108
|
-
class:
|
|
109
|
-
},
|
|
119
|
+
class: normalizeClass(_ctx.labelClasses)
|
|
120
|
+
}, toDisplayString(_ctx.label), 3)) : createCommentVNode("", true)
|
|
110
121
|
]),
|
|
111
|
-
|
|
122
|
+
createVNode(_component_DatePicker, mergeProps({
|
|
112
123
|
ref: "datepicker",
|
|
113
|
-
class: { "pointer-events-none opacity-70":
|
|
114
|
-
"model-value":
|
|
115
|
-
"select-attribute":
|
|
116
|
-
"min-date":
|
|
117
|
-
"max-date":
|
|
118
|
-
masks:
|
|
119
|
-
style:
|
|
120
|
-
timezone:
|
|
121
|
-
},
|
|
122
|
-
|
|
123
|
-
class:
|
|
124
|
-
},
|
|
125
|
-
[
|
|
124
|
+
class: { "pointer-events-none opacity-70": _ctx.$attrs.disabled },
|
|
125
|
+
"model-value": _ctx.innerValue,
|
|
126
|
+
"select-attribute": _ctx.selectAttribute,
|
|
127
|
+
"min-date": _ctx.minDate || null,
|
|
128
|
+
"max-date": _ctx.maxDate || null,
|
|
129
|
+
masks: _ctx.masks,
|
|
130
|
+
style: _ctx.styleDatepicker,
|
|
131
|
+
timezone: _ctx.timezone
|
|
132
|
+
}, _ctx.listeners, { onDayclick: _ctx.dayclick }), null, 16, ["class", "model-value", "select-attribute", "min-date", "max-date", "masks", "style", "timezone", "onDayclick"]),
|
|
133
|
+
withDirectives(createElementVNode("div", {
|
|
134
|
+
class: normalizeClass(_ctx.errorMsgClasses)
|
|
135
|
+
}, toDisplayString(_ctx.errorMsg), 3), [
|
|
136
|
+
[vShow, _ctx.errorMsg]
|
|
126
137
|
])
|
|
127
|
-
], 14,
|
|
138
|
+
], 14, _hoisted_1);
|
|
128
139
|
}
|
|
129
|
-
const
|
|
140
|
+
const pInlineDatePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
130
141
|
export {
|
|
131
|
-
|
|
142
|
+
pInlineDatePicker as default
|
|
132
143
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { useCurrencyInput
|
|
4
|
-
import { defineComponent
|
|
5
|
-
import { kebabCase
|
|
6
|
-
import { toNumberOrNull
|
|
7
|
-
import { _ as
|
|
8
|
-
const
|
|
1
|
+
import PInfoIcon from "./p-info-icon.js";
|
|
2
|
+
import inputClassesMixin from "./inputClassesMixin.js";
|
|
3
|
+
import { useCurrencyInput } from "vue-currency-input";
|
|
4
|
+
import { defineComponent, computed, watch, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, toDisplayString, createCommentVNode, createBlock, mergeProps, withDirectives, vShow } from "vue";
|
|
5
|
+
import { kebabCase } from "lodash-es";
|
|
6
|
+
import { toNumberOrNull } from "./number.js";
|
|
7
|
+
import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
|
|
8
|
+
const ALL_OPTIONS = [
|
|
9
9
|
"locale",
|
|
10
10
|
"currency",
|
|
11
11
|
"currencyDisplay",
|
|
@@ -17,13 +17,14 @@ const L = [
|
|
|
17
17
|
"valueRange",
|
|
18
18
|
"useGrouping",
|
|
19
19
|
"valueScaling"
|
|
20
|
-
]
|
|
20
|
+
];
|
|
21
|
+
const _sfc_main = defineComponent({
|
|
21
22
|
name: "PInputNumber",
|
|
22
23
|
components: {
|
|
23
|
-
PInfoIcon
|
|
24
|
+
PInfoIcon
|
|
24
25
|
},
|
|
25
|
-
mixins: [
|
|
26
|
-
inheritAttrs:
|
|
26
|
+
mixins: [inputClassesMixin],
|
|
27
|
+
inheritAttrs: false,
|
|
27
28
|
props: {
|
|
28
29
|
modelValue: {
|
|
29
30
|
type: [Number, String],
|
|
@@ -39,11 +40,11 @@ const L = [
|
|
|
39
40
|
},
|
|
40
41
|
required: {
|
|
41
42
|
type: Boolean,
|
|
42
|
-
default:
|
|
43
|
+
default: false
|
|
43
44
|
},
|
|
44
45
|
selectOnClick: {
|
|
45
46
|
type: Boolean,
|
|
46
|
-
default:
|
|
47
|
+
default: true
|
|
47
48
|
},
|
|
48
49
|
tooltipText: {
|
|
49
50
|
type: String,
|
|
@@ -51,79 +52,96 @@ const L = [
|
|
|
51
52
|
}
|
|
52
53
|
},
|
|
53
54
|
emits: ["update:modelValue", "change"],
|
|
54
|
-
setup(
|
|
55
|
-
const
|
|
55
|
+
setup(props, { attrs, emit, expose }) {
|
|
56
|
+
const DEFAULTS = {
|
|
56
57
|
locale: "en-US",
|
|
57
58
|
currency: "USD",
|
|
58
59
|
precision: 0,
|
|
59
60
|
currencyDisplay: "hidden"
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
61
|
+
};
|
|
62
|
+
const inputCurrencyOptions = computed(() => {
|
|
63
|
+
ALL_OPTIONS.forEach((key) => {
|
|
64
|
+
const attr = attrs[kebabCase(key)];
|
|
65
|
+
if (attr && typeof attr !== "undefined") {
|
|
66
|
+
DEFAULTS[key] = attr;
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
return DEFAULTS;
|
|
70
|
+
});
|
|
71
|
+
const { inputRef, numberValue, setValue } = useCurrencyInput(
|
|
72
|
+
inputCurrencyOptions.value,
|
|
73
|
+
false
|
|
66
74
|
);
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
})
|
|
70
|
-
|
|
71
|
-
(
|
|
72
|
-
|
|
75
|
+
watch(numberValue, (value) => {
|
|
76
|
+
emit("update:modelValue", toNumberOrNull(value));
|
|
77
|
+
});
|
|
78
|
+
watch(
|
|
79
|
+
() => props.modelValue,
|
|
80
|
+
(value) => {
|
|
81
|
+
setValue(toNumberOrNull(value));
|
|
73
82
|
}
|
|
74
83
|
);
|
|
75
|
-
const
|
|
76
|
-
const { class:
|
|
77
|
-
return
|
|
78
|
-
})
|
|
79
|
-
|
|
84
|
+
const computedAttrs = computed(() => {
|
|
85
|
+
const { class: classes, style: style2, ...rest } = attrs;
|
|
86
|
+
return rest;
|
|
87
|
+
});
|
|
88
|
+
const style = computed(() => {
|
|
89
|
+
return attrs.style;
|
|
90
|
+
});
|
|
91
|
+
const focus = () => {
|
|
92
|
+
props.selectOnClick && inputRef.value.select();
|
|
80
93
|
};
|
|
81
|
-
|
|
94
|
+
expose({ setValue });
|
|
95
|
+
return { inputRef, computedAttrs, style, focus };
|
|
82
96
|
}
|
|
83
|
-
})
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
97
|
+
});
|
|
98
|
+
const _hoisted_1 = ["data-has-error"];
|
|
99
|
+
const _hoisted_2 = { class: "flex flex-row items-center" };
|
|
100
|
+
const _hoisted_3 = { class: "relative w-full" };
|
|
101
|
+
const _hoisted_4 = { key: 0 };
|
|
102
|
+
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
103
|
+
const _component_PInfoIcon = resolveComponent("PInfoIcon");
|
|
104
|
+
return openBlock(), createElementBlock("div", {
|
|
105
|
+
class: normalizeClass([{ hidden: _ctx.$attrs.hidden }, _ctx.$attrs.class]),
|
|
106
|
+
"data-has-error": !!_ctx.errorMsg,
|
|
107
|
+
style: normalizeStyle(_ctx.style)
|
|
90
108
|
}, [
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
label:
|
|
94
|
-
labelClasses:
|
|
109
|
+
createElementVNode("div", _hoisted_2, [
|
|
110
|
+
renderSlot(_ctx.$slots, "label", {
|
|
111
|
+
label: _ctx.label,
|
|
112
|
+
labelClasses: _ctx.labelClasses
|
|
95
113
|
}, () => [
|
|
96
|
-
|
|
114
|
+
_ctx.label ? (openBlock(), createElementBlock("label", {
|
|
97
115
|
key: 0,
|
|
98
|
-
class:
|
|
99
|
-
},
|
|
116
|
+
class: normalizeClass(_ctx.labelClasses)
|
|
117
|
+
}, toDisplayString(_ctx.label), 3)) : createCommentVNode("", true)
|
|
100
118
|
]),
|
|
101
|
-
|
|
119
|
+
_ctx.tooltipText ? (openBlock(), createBlock(_component_PInfoIcon, {
|
|
102
120
|
key: 0,
|
|
103
|
-
text:
|
|
121
|
+
text: _ctx.tooltipText,
|
|
104
122
|
class: "ml-1"
|
|
105
|
-
}, null, 8, ["text"])) :
|
|
123
|
+
}, null, 8, ["text"])) : createCommentVNode("", true)
|
|
106
124
|
]),
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
])) :
|
|
111
|
-
|
|
125
|
+
createElementVNode("div", _hoisted_3, [
|
|
126
|
+
!!_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_4, [
|
|
127
|
+
renderSlot(_ctx.$slots, "prefix")
|
|
128
|
+
])) : createCommentVNode("", true),
|
|
129
|
+
createElementVNode("input", mergeProps({
|
|
112
130
|
ref: "inputRef",
|
|
113
131
|
type: "text"
|
|
114
|
-
},
|
|
115
|
-
class:
|
|
116
|
-
onFocus:
|
|
132
|
+
}, _ctx.computedAttrs, {
|
|
133
|
+
class: _ctx.inputClasses,
|
|
134
|
+
onFocus: _cache[0] || (_cache[0] = (...args) => _ctx.focus && _ctx.focus(...args))
|
|
117
135
|
}), null, 16)
|
|
118
136
|
]),
|
|
119
|
-
|
|
120
|
-
class:
|
|
121
|
-
},
|
|
122
|
-
[
|
|
137
|
+
withDirectives(createElementVNode("div", {
|
|
138
|
+
class: normalizeClass(_ctx.errorMsgClasses)
|
|
139
|
+
}, toDisplayString(_ctx.errorMsg), 3), [
|
|
140
|
+
[vShow, _ctx.errorMsg]
|
|
123
141
|
])
|
|
124
|
-
], 14,
|
|
142
|
+
], 14, _hoisted_1);
|
|
125
143
|
}
|
|
126
|
-
const
|
|
144
|
+
const PInputNumber = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
127
145
|
export {
|
|
128
|
-
|
|
146
|
+
PInputNumber as default
|
|
129
147
|
};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { INPUT_SIZES
|
|
3
|
-
import { defineComponent
|
|
4
|
-
import { _ as
|
|
5
|
-
const
|
|
1
|
+
import PInput from "./p-input.js";
|
|
2
|
+
import { INPUT_SIZES } from "./inputClassesShared.js";
|
|
3
|
+
import { defineComponent, resolveComponent, resolveDirective, openBlock, createBlock, mergeProps, withKeys, withCtx, createElementVNode, normalizeClass, withDirectives, createElementBlock, createCommentVNode } from "vue";
|
|
4
|
+
import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
|
|
5
|
+
const _sfc_main = defineComponent({
|
|
6
6
|
name: "PInputSearch",
|
|
7
7
|
components: {
|
|
8
|
-
PInput
|
|
8
|
+
PInput
|
|
9
9
|
},
|
|
10
|
-
inheritAttrs:
|
|
10
|
+
inheritAttrs: false,
|
|
11
11
|
props: {
|
|
12
12
|
modelValue: {
|
|
13
13
|
type: String,
|
|
@@ -16,20 +16,20 @@ const b = d({
|
|
|
16
16
|
size: {
|
|
17
17
|
type: String,
|
|
18
18
|
default: "md",
|
|
19
|
-
validator(
|
|
20
|
-
return Object.keys(
|
|
19
|
+
validator(value) {
|
|
20
|
+
return Object.keys(INPUT_SIZES).includes(value);
|
|
21
21
|
}
|
|
22
22
|
},
|
|
23
23
|
showEnterIcon: {
|
|
24
24
|
type: Boolean,
|
|
25
|
-
default:
|
|
25
|
+
default: false
|
|
26
26
|
}
|
|
27
27
|
},
|
|
28
28
|
emits: ["update:modelValue", "enter"],
|
|
29
29
|
data() {
|
|
30
30
|
return {
|
|
31
31
|
query: this.modelValue,
|
|
32
|
-
showEnterIconOnFocus:
|
|
32
|
+
showEnterIconOnFocus: false
|
|
33
33
|
};
|
|
34
34
|
},
|
|
35
35
|
computed: {
|
|
@@ -44,16 +44,17 @@ const b = d({
|
|
|
44
44
|
}
|
|
45
45
|
},
|
|
46
46
|
watch: {
|
|
47
|
-
modelValue(
|
|
48
|
-
this.query =
|
|
47
|
+
modelValue(value) {
|
|
48
|
+
this.query = value;
|
|
49
49
|
},
|
|
50
|
-
query(
|
|
51
|
-
this.$emit("update:modelValue",
|
|
50
|
+
query(value) {
|
|
51
|
+
this.$emit("update:modelValue", value);
|
|
52
52
|
}
|
|
53
53
|
},
|
|
54
54
|
methods: {
|
|
55
55
|
clearSearch() {
|
|
56
|
-
this.query = ""
|
|
56
|
+
this.query = "";
|
|
57
|
+
requestAnimationFrame(() => {
|
|
57
58
|
this.$refs.searchInput.$el.querySelector("input").focus();
|
|
58
59
|
});
|
|
59
60
|
},
|
|
@@ -62,48 +63,49 @@ const b = d({
|
|
|
62
63
|
}
|
|
63
64
|
}
|
|
64
65
|
});
|
|
65
|
-
function
|
|
66
|
-
const
|
|
67
|
-
|
|
66
|
+
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
67
|
+
const _component_PInput = resolveComponent("PInput");
|
|
68
|
+
const _directive_tooltip = resolveDirective("tooltip");
|
|
69
|
+
return openBlock(), createBlock(_component_PInput, mergeProps({
|
|
68
70
|
ref: "searchInput",
|
|
69
|
-
modelValue:
|
|
70
|
-
"onUpdate:modelValue":
|
|
71
|
-
size:
|
|
72
|
-
},
|
|
71
|
+
modelValue: _ctx.query,
|
|
72
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.query = $event),
|
|
73
|
+
size: _ctx.size
|
|
74
|
+
}, _ctx.$attrs, {
|
|
73
75
|
role: "searchbox",
|
|
74
|
-
onFocus:
|
|
75
|
-
onFocusout:
|
|
76
|
-
onKeydown:
|
|
76
|
+
onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.showEnterIconOnFocus = true),
|
|
77
|
+
onFocusout: _cache[3] || (_cache[3] = ($event) => _ctx.showEnterIconOnFocus = false),
|
|
78
|
+
onKeydown: withKeys(_ctx.keydownEnter, ["enter"])
|
|
77
79
|
}), {
|
|
78
|
-
prefix:
|
|
79
|
-
|
|
80
|
-
class:
|
|
80
|
+
prefix: withCtx(() => [
|
|
81
|
+
createElementVNode("i", {
|
|
82
|
+
class: normalizeClass(["icon absolute bg-no-repeat outline-none", _ctx.searchIconClasses])
|
|
81
83
|
}, null, 2)
|
|
82
84
|
]),
|
|
83
|
-
suffix:
|
|
84
|
-
|
|
85
|
+
suffix: withCtx(() => [
|
|
86
|
+
_ctx.query && _ctx.showEnterIcon && _ctx.showEnterIconOnFocus ? withDirectives((openBlock(), createElementBlock("i", {
|
|
85
87
|
key: 0,
|
|
86
|
-
class:
|
|
88
|
+
class: normalizeClass(["icon absolute bg-no-repeat outline-none", _ctx.enterIconClasses])
|
|
87
89
|
}, null, 2)), [
|
|
88
90
|
[
|
|
89
|
-
|
|
91
|
+
_directive_tooltip,
|
|
90
92
|
{ content: "Press enter to search", delay: { show: 100, hide: 0 } },
|
|
91
93
|
void 0,
|
|
92
|
-
{ bottom:
|
|
94
|
+
{ bottom: true }
|
|
93
95
|
]
|
|
94
|
-
]) :
|
|
95
|
-
|
|
96
|
+
]) : createCommentVNode("", true),
|
|
97
|
+
_ctx.query ? (openBlock(), createElementBlock("button", {
|
|
96
98
|
key: 1,
|
|
97
99
|
role: "button",
|
|
98
100
|
"aria-label": "Clear search input",
|
|
99
|
-
class:
|
|
100
|
-
onClick:
|
|
101
|
-
}, null, 2)) :
|
|
101
|
+
class: normalizeClass(["icon absolute cursor-pointer bg-no-repeat", _ctx.clearIconClasses]),
|
|
102
|
+
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clearSearch && _ctx.clearSearch(...args))
|
|
103
|
+
}, null, 2)) : createCommentVNode("", true)
|
|
102
104
|
]),
|
|
103
105
|
_: 1
|
|
104
106
|
}, 16, ["modelValue", "size", "onKeydown"]);
|
|
105
107
|
}
|
|
106
|
-
const
|
|
108
|
+
const PInputSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3de99c69"]]);
|
|
107
109
|
export {
|
|
108
|
-
|
|
110
|
+
PInputSearch as default
|
|
109
111
|
};
|