@antify/ui 2.2.14 → 2.2.16

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.
Files changed (11) hide show
  1. package/dist/components/inputs/AntDateInput.vue +4 -0
  2. package/dist/components/inputs/AntSelect.vue +29 -1
  3. package/dist/components/inputs/Elements/AntBaseInput.vue +4 -0
  4. package/dist/components/inputs/Elements/AntSelectMenu.vue +14 -6
  5. package/dist/components/inputs/__stories/AntDateInput.stories.d.ts +1 -0
  6. package/dist/components/inputs/__stories/AntDateInput.stories.js +41 -1
  7. package/dist/components/inputs/__stories/AntDateInput.stories.mjs +40 -0
  8. package/dist/components/inputs/__stories/AntSelect.stories.d.ts +1 -0
  9. package/dist/components/inputs/__stories/AntSelect.stories.js +156 -57
  10. package/dist/components/inputs/__stories/AntSelect.stories.mjs +157 -56
  11. package/package.json +1 -1
package/dist/components/inputs/AntDateInput.vue CHANGED
@@ -45,6 +45,8 @@ const props = withDefaults(defineProps<{
45
45
  readonly?: boolean;
46
46
  skeleton?: boolean;
47
47
  messages?: string[];
48
+ min?: string;
49
+ max?: string;
48
50
  }>(), {
49
51
  state: InputState.base,
50
52
  type: AntDateInputTypes.date,
@@ -110,6 +112,8 @@ function onClickCalendar() {
110
112
  :disabled="disabled"
111
113
  :readonly="readonly"
112
114
  :show-icon="false"
115
+ :min="min"
116
+ :max="max"
113
117
  v-bind="$attrs"
114
118
  @validate="val => $emit('validate', val)"
115
119
  >
package/dist/components/inputs/AntSelect.vue CHANGED
@@ -91,6 +91,7 @@ const _modelValue = computed({
91
91
  });
92
92
  const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
93
93
  const valueLabel = computed(() => props.options.find(option => option.value === _modelValue.value)?.label || null);
94
+ const selectedOption = computed(() => props.options.find(option => option.value === _modelValue.value) || null);
94
95
  const inputClasses = computed(() => {
95
96
  const variants: Record<InputState, string> = {
96
97
  [InputState.base]: 'outline-base-300 bg-white focus:ring-primary-200',
@@ -284,6 +285,18 @@ function onClickRemoveButton() {
284
285
  :close-on-enter="true"
285
286
  @select-element="(e) => _modelValue = e"
286
287
  >
288
+ <template #contentLeft="props">
289
+ <slot
290
+ name="contentLeft"
291
+ v-bind="{...props}"
292
+ />
293
+ </template>
294
+ <template #contentRight="props">
295
+ <slot
296
+ name="contentRight"
297
+ v-bind="{...props}"
298
+ />
299
+ </template>
287
300
  <!-- Input -->
288
301
  <div
289
302
  ref="inputRef"
@@ -310,9 +323,24 @@ function onClickRemoveButton() {
310
323
 
311
324
  <div
312
325
  v-else
313
- class="select-none text-ellipsis overflow-hidden whitespace-nowrap w-full text-black"
326
+ class="flex items-center select-none text-ellipsis overflow-hidden whitespace-nowrap w-full text-black"
327
+ :class="{
328
+ 'gap-1': size === Size.xs2,
329
+ 'gap1.5': size === Size.xs,
330
+ 'gap-1.5': size === Size.sm,
331
+ 'gap-2': size === Size.md,
332
+ 'gap-2.5': size === Size.lg,
333
+ }"
314
334
  >
335
+ <slot
336
+ name="contentLeft"
337
+ v-bind="selectedOption"
338
+ />
315
339
  {{ valueLabel }}
340
+ <slot
341
+ name="contentRight"
342
+ v-bind="selectedOption"
343
+ />
316
344
  </div>
317
345
 
318
346
  <AntIcon
package/dist/components/inputs/Elements/AntBaseInput.vue CHANGED
@@ -59,6 +59,8 @@ const props = withDefaults(defineProps<{
59
59
  iconLeft?: IconDefinition;
60
60
  nullable?: boolean;
61
61
  inputRef?: null | HTMLInputElement;
62
+ min?: string;
63
+ max?: string;
62
64
  }>(), {
63
65
  state: InputState.base,
64
66
  disabled: false,
@@ -257,6 +259,8 @@ function onClickClearIcon() {
257
259
  :disabled="disabled || skeleton"
258
260
  :readonly="readonly"
259
261
  :tabindex="hasInputState ? -1 : 0"
262
+ :min="min"
263
+ :max="max"
260
264
  title=""
261
265
  v-bind="$attrs"
262
266
  @blur="onBlur"
package/dist/components/inputs/Elements/AntSelectMenu.vue CHANGED
@@ -104,14 +104,14 @@ const dropDownItemClasses = computed(() => {
104
104
  };
105
105
 
106
106
  return {
107
- 'select-none text-ellipsis overflow-hidden whitespace-nowrap min-h-fit': true,
107
+ 'flex items-center select-none text-ellipsis overflow-hidden whitespace-nowrap min-h-fit': true,
108
108
  [variants[props.state]]: true,
109
109
  // Size
110
- 'p-1 text-xs': props.size === Size.xs2,
111
- 'p-1.5 text-xs': props.size === Size.xs,
112
- 'p-1.5 text-sm': props.size === Size.sm,
113
- 'p-2 text-sm': props.size === Size.md,
114
- 'p-2.5 text-sm': props.size === Size.lg,
110
+ 'p-1 text-xs gap-1': props.size === Size.xs2,
111
+ 'p-1.5 text-xs gap1.5': props.size === Size.xs,
112
+ 'p-1.5 text-sm gap-1.5': props.size === Size.sm,
113
+ 'p-2 text-sm gap-2': props.size === Size.md,
114
+ 'p-2.5 text-sm gap-2.5': props.size === Size.lg,
115
115
  };
116
116
  });
117
117
 
@@ -240,7 +240,15 @@ watch(_modelValue, (val) => {
240
240
  @mousedown="(e) => onClickDropDownItem(e, option.value)"
241
241
  @mouseover="() => focusedDropDownItem = option.value"
242
242
  >
243
+ <slot
244
+ name="contentLeft"
245
+ v-bind="option"
246
+ />
243
247
  {{ option.label }}
248
+ <slot
249
+ name="contentRight"
250
+ v-bind="option"
251
+ />
244
252
  </div>
245
253
 
246
254
  <div
package/dist/components/inputs/__stories/AntDateInput.stories.d.ts CHANGED
@@ -4,4 +4,5 @@ declare const meta: Meta<typeof AntDateInput>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof AntDateInput>;
6
6
  export declare const Docs: Story;
7
+ export declare const WithDateLimits: Story;
7
8
  export declare const Summary: Story;
package/dist/components/inputs/__stories/AntDateInput.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- module.exports = exports.Summary = exports.Docs = void 0;
6
+ module.exports = exports.WithDateLimits = exports.Summary = exports.Docs = void 0;
7
7
  var _Size = require("../../../enums/Size.enum");
8
8
  var _Direction = require("../../../enums/Direction.enum");
9
9
  var _AntDateInput = _interopRequireDefault(require("../AntDateInput.vue"));
@@ -72,6 +72,46 @@ const Docs = exports.Docs = {
72
72
  description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
73
73
  }
74
74
  };
75
+ const WithDateLimits = exports.WithDateLimits = {
76
+ render: args => ({
77
+ components: {
78
+ AntDateInput: _AntDateInput.default
79
+ },
80
+ setup() {
81
+ const today = /* @__PURE__ */new Date();
82
+ const year = today.getFullYear();
83
+ const month = String(today.getMonth() + 1).padStart(2, "0");
84
+ const day = String(today.getDate()).padStart(2, "0");
85
+ const min = "2024-01-01";
86
+ const max = `${year}-${month}-${day}`;
87
+ return {
88
+ args,
89
+ min,
90
+ max
91
+ };
92
+ },
93
+ template: `
94
+ <div class="flex flex-col gap-4">
95
+ <ul class="text-sm text-base-500">
96
+ <li>Min-Date: <span class="font-bold">{{ min }}</span></li>
97
+ <li>Max-Date: <span class="font-bold">{{ max }}</span></li>
98
+ </ul>
99
+
100
+ <AntDateInput
101
+ v-bind="args"
102
+ v-model="args.modelValue"
103
+ :min="min"
104
+ :max="max"
105
+ />
106
+ </div>
107
+ `
108
+ }),
109
+ args: {
110
+ modelValue: null,
111
+ label: "Label",
112
+ description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
113
+ }
114
+ };
75
115
  const Summary = exports.Summary = {
76
116
  parameters: {
77
117
  chromatic: {
package/dist/components/inputs/__stories/AntDateInput.stories.mjs CHANGED
@@ -73,6 +73,46 @@ export const Docs = {
73
73
  description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
74
74
  }
75
75
  };
76
+ export const WithDateLimits = {
77
+ render: (args) => ({
78
+ components: {
79
+ AntDateInput
80
+ },
81
+ setup() {
82
+ const today = /* @__PURE__ */ new Date();
83
+ const year = today.getFullYear();
84
+ const month = String(today.getMonth() + 1).padStart(2, "0");
85
+ const day = String(today.getDate()).padStart(2, "0");
86
+ const min = "2024-01-01";
87
+ const max = `${year}-${month}-${day}`;
88
+ return {
89
+ args,
90
+ min,
91
+ max
92
+ };
93
+ },
94
+ template: `
95
+ <div class="flex flex-col gap-4">
96
+ <ul class="text-sm text-base-500">
97
+ <li>Min-Date: <span class="font-bold">{{ min }}</span></li>
98
+ <li>Max-Date: <span class="font-bold">{{ max }}</span></li>
99
+ </ul>
100
+
101
+ <AntDateInput
102
+ v-bind="args"
103
+ v-model="args.modelValue"
104
+ :min="min"
105
+ :max="max"
106
+ />
107
+ </div>
108
+ `
109
+ }),
110
+ args: {
111
+ modelValue: null,
112
+ label: "Label",
113
+ description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
114
+ }
115
+ };
76
116
  export const Summary = {
77
117
  parameters: {
78
118
  chromatic: {
package/dist/components/inputs/__stories/AntSelect.stories.d.ts CHANGED
@@ -4,6 +4,7 @@ declare const meta: Meta<typeof AntSelect>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof AntSelect>;
6
6
  export declare const Docs: Story;
7
+ export declare const WithSlots: Story;
7
8
  export declare const manyOptions: Story;
8
9
  export declare const nullable: Story;
9
10
  export declare const skeleton: Story;
package/dist/components/inputs/__stories/AntSelect.stories.js CHANGED
@@ -3,10 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.withPlaceholder = exports.summary = exports.skeleton = exports.nullable = exports.manyOptions = exports.ellipsisText = exports.disabled = exports.default = exports.Docs = void 0;
6
+ exports.withPlaceholder = exports.summary = exports.skeleton = exports.nullable = exports.manyOptions = exports.ellipsisText = exports.disabled = exports.default = exports.WithSlots = exports.Docs = void 0;
7
7
  var _Size = require("../../../enums/Size.enum");
8
8
  var _AntSelect = _interopRequireDefault(require("../AntSelect.vue"));
9
+ var _AntIcon = _interopRequireDefault(require("../../AntIcon.vue"));
9
10
  var _AntSelectMenu = _interopRequireDefault(require("../Elements/AntSelectMenu.vue"));
11
+ var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
10
12
  var _vue = require("vue");
11
13
  var _enums = require("../../../enums");
12
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -119,6 +121,107 @@ const Docs = exports.Docs = {
119
121
  description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
120
122
  }
121
123
  };
124
+ const WithSlots = exports.WithSlots = {
125
+ render: args => ({
126
+ components: {
127
+ AntSelect: _AntSelect.default,
128
+ AntDropdown: _AntSelectMenu.default,
129
+ AntIcon: _AntIcon.default
130
+ },
131
+ setup() {
132
+ const modelValue = (0, _vue.computed)({
133
+ // @ts-ignore
134
+ get: () => args.modelValue,
135
+ // @ts-ignore
136
+ set: val => args.modelValue = val
137
+ });
138
+ const scrollContainer = (0, _vue.ref)(void 0);
139
+ (0, _vue.onMounted)(() => {
140
+ if (scrollContainer.value) {
141
+ scrollContainer.value.scrollTop = (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight) / 2;
142
+ }
143
+ });
144
+ return {
145
+ args,
146
+ modelValue,
147
+ scrollContainer,
148
+ faCake: _freeSolidSvgIcons.faCake
149
+ };
150
+ },
151
+ template: `
152
+ <div ref="scrollContainer" class="overflow-y-auto h-[100vh] p-2.5 dashed">
153
+ <div class="flex items-center h-[200vh]">
154
+ <AntSelect v-bind="args" v-model="modelValue">
155
+ <template #contentLeft="option">
156
+ <div v-if="option.value === '1'">
157
+ <AntIcon
158
+ :icon="faCake"
159
+ color="text-primary-500"
160
+ />
161
+ </div>
162
+
163
+ <div v-if="option.value === '2'">
164
+ <AntIcon
165
+ :icon="faCake"
166
+ color="text-secondary-500"
167
+ />
168
+ </div>
169
+
170
+ <div v-if="option.value === '3'">
171
+ <AntIcon
172
+ :icon="faCake"
173
+ color="text-success-500"
174
+ />
175
+ </div>
176
+
177
+ <div v-if="option.value === '4'">
178
+ <AntIcon
179
+ :icon="faCake"
180
+ color="text-warning-500"
181
+ />
182
+ </div>
183
+ </template>
184
+ <template #contentRight="option">
185
+ <div v-if="option.value === '1'">
186
+ <AntIcon
187
+ :icon="faCake"
188
+ color="text-primary-500"
189
+ />
190
+ </div>
191
+
192
+ <div v-if="option.value === '2'">
193
+ <AntIcon
194
+ :icon="faCake"
195
+ color="text-secondary-500"
196
+ />
197
+ </div>
198
+
199
+ <div v-if="option.value === '3'">
200
+ <AntIcon
201
+ :icon="faCake"
202
+ color="text-success-500"
203
+ />
204
+ </div>
205
+
206
+ <div v-if="option.value === '4'">
207
+ <AntIcon
208
+ :icon="faCake"
209
+ color="text-warning-500"
210
+ />
211
+ </div>
212
+ </template>
213
+ </AntSelect>
214
+ </div>
215
+ </div>
216
+ `
217
+ }),
218
+ args: {
219
+ modelValue: null,
220
+ label: "Label",
221
+ options,
222
+ description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
223
+ }
224
+ };
122
225
  const manyOptions = exports.manyOptions = {
123
226
  render: Docs.render,
124
227
  args: {
@@ -204,84 +307,80 @@ const summary = exports.summary = {
204
307
  disableSnapshot: false
205
308
  }
206
309
  },
207
- render: args => ({
208
- components: {
209
- AntSelect: _AntSelect.default
210
- },
211
- setup() {
212
- return {
213
- args,
214
- manySelectOptions
215
- };
216
- },
310
+ render: (args, ctx) => ({
311
+ // @ts-ignore
312
+ components: Docs.render(args, ctx).components,
313
+ // @ts-ignore
314
+ setup: Docs.render(args, ctx).setup,
217
315
  template: `
218
316
  <div class="p-4 flex flex-col gap-2.5">
219
317
  <div class="flex w-2/5 gap-2.5">
220
- <AntSelect v-bind="args" :value="null"
318
+ <AntSelect v-bind="args"
319
+ v-model="modelValue"
221
320
  placeholder="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"/>
222
- <AntSelect v-bind="args" value="5"/>
321
+ <AntSelect v-bind="args" v-model="modelValue"/>
223
322
  </div>
224
323
  <div class="flex gap-2.5">
225
- <AntSelect v-bind="args" :value="null" size="md" state="base"/>
226
- <AntSelect v-bind="args" :value="null" size="md" state="info"/>
227
- <AntSelect v-bind="args" :value="null" size="md" state="success"/>
228
- <AntSelect v-bind="args" :value="null" size="md" state="warning"/>
229
- <AntSelect v-bind="args" :value="null" size="md" state="danger"/>
324
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="base"/>
325
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="info"/>
326
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="success"/>
327
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="warning"/>
328
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="danger"/>
230
329
  </div>
231
330
  <div class="flex gap-2.5">
232
- <AntSelect v-bind="args" :value="null" size="sm" state="base"/>
233
- <AntSelect v-bind="args" :value="null" size="sm" state="info"/>
234
- <AntSelect v-bind="args" :value="null" size="sm" state="success"/>
235
- <AntSelect v-bind="args" :value="null" size="sm" state="warning"/>
236
- <AntSelect v-bind="args" :value="null" size="sm" state="danger"/>
331
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="base"/>
332
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="info"/>
333
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="success"/>
334
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="warning"/>
335
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="danger"/>
237
336
  </div>
238
337
  <div class="flex gap-2.5">
239
- <AntSelect v-bind="args" value="1" size="md" state="base"/>
240
- <AntSelect v-bind="args" value="1" size="md" state="info"/>
241
- <AntSelect v-bind="args" value="1" size="md" state="success"/>
242
- <AntSelect v-bind="args" value="1" size="md" state="warning"/>
243
- <AntSelect v-bind="args" value="1" size="md" state="danger"/>
338
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="base"/>
339
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="info"/>
340
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="success"/>
341
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="warning"/>
342
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="danger"/>
244
343
  </div>
245
344
  <div class="flex gap-2.5">
246
- <AntSelect v-bind="args" value="1" size="sm" state="base"/>
247
- <AntSelect v-bind="args" value="1" size="sm" state="info"/>
248
- <AntSelect v-bind="args" value="1" size="sm" state="success"/>
249
- <AntSelect v-bind="args" value="1" size="sm" state="warning"/>
250
- <AntSelect v-bind="args" value="1" size="sm" state="danger"/>
345
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="base"/>
346
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="info"/>
347
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="success"/>
348
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="warning"/>
349
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="danger"/>
251
350
  </div>
252
351
  <div class="flex gap-2.5">
253
- <AntSelect v-bind="args" value="1" size="sm" state="base" disabled/>
254
- <AntSelect v-bind="args" value="1" size="sm" state="info" disabled/>
255
- <AntSelect v-bind="args" value="1" size="sm" state="success" disabled/>
256
- <AntSelect v-bind="args" value="1" size="sm" state="warning" disabled/>
257
- <AntSelect v-bind="args" value="1" size="sm" state="danger" disabled/>
352
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="base" disabled/>
353
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="info" disabled/>
354
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="success" disabled/>
355
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="warning" disabled/>
356
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="danger" disabled/>
258
357
  </div>
259
358
  <div class="flex gap-2.5">
260
- <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="base" disabled nullable/>
261
- <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="info" disabled nullable/>
262
- <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="success" disabled nullable/>
263
- <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="warning" disabled nullable/>
264
- <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="danger" disabled nullable/>
359
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="base" disabled nullable/>
360
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="info" disabled nullable/>
361
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="success" disabled nullable/>
362
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="warning" disabled nullable/>
363
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="danger" disabled nullable/>
265
364
  </div>
266
365
  <div class="flex gap-2.5">
267
- <AntSelect v-bind="args" :value="null" grouped="none"/>
268
- <AntSelect v-bind="args" :value="null" grouped="right"/>
269
- <AntSelect v-bind="args" :value="null" grouped="center"/>
270
- <AntSelect v-bind="args" :value="null" grouped="left"/>
366
+ <AntSelect v-bind="args" v-model="modelValue" grouped="none"/>
367
+ <AntSelect v-bind="args" v-model="modelValue" grouped="right"/>
368
+ <AntSelect v-bind="args" v-model="modelValue" grouped="center"/>
369
+ <AntSelect v-bind="args" v-model="modelValue" grouped="left"/>
271
370
  </div>
272
371
  <div class="flex gap-2.5">
273
- <AntSelect v-bind="args" value="1" size="md" nullable state="base"/>
274
- <AntSelect v-bind="args" value="1" size="md" nullable state="info"/>
275
- <AntSelect v-bind="args" value="1" size="md" nullable state="success"/>
276
- <AntSelect v-bind="args" value="1" size="md" nullable state="warning"/>
277
- <AntSelect v-bind="args" value="1" size="md" nullable state="danger"/>
372
+ <AntSelect v-bind="args" v-model="modelValue" size="md" nullable state="base"/>
373
+ <AntSelect v-bind="args" v-model="modelValue" size="md" nullable state="info"/>
374
+ <AntSelect v-bind="args" v-model="modelValue" size="md" nullable state="success"/>
375
+ <AntSelect v-bind="args" v-model="modelValue" size="md" nullable state="warning"/>
376
+ <AntSelect v-bind="args" v-model="modelValue" size="md" nullable state="danger"/>
278
377
  </div>
279
378
  <div class="flex gap-2.5">
280
- <AntSelect v-bind="args" value="1" size="sm" nullable state="base"/>
281
- <AntSelect v-bind="args" value="1" size="sm" nullable state="info"/>
282
- <AntSelect v-bind="args" value="1" size="sm" nullable state="success"/>
283
- <AntSelect v-bind="args" value="1" size="sm" nullable state="warning"/>
284
- <AntSelect v-bind="args" value="1" size="sm" nullable state="danger"/>
379
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" nullable state="base"/>
380
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" nullable state="info"/>
381
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" nullable state="success"/>
382
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" nullable state="warning"/>
383
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" nullable state="danger"/>
285
384
  </div>
286
385
  </div>
287
386
  `
package/dist/components/inputs/__stories/AntSelect.stories.mjs CHANGED
@@ -2,7 +2,11 @@ import {
2
2
  Size
3
3
  } from "../../../enums/Size.enum.mjs";
4
4
  import AntSelect from "../AntSelect.vue";
5
+ import AntIcon from "../../AntIcon.vue";
5
6
  import AntDropdown from "../Elements/AntSelectMenu.vue";
7
+ import {
8
+ faCake
9
+ } from "@fortawesome/free-solid-svg-icons";
6
10
  import {
7
11
  computed,
8
12
  onMounted,
@@ -127,6 +131,107 @@ export const Docs = {
127
131
  description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
128
132
  }
129
133
  };
134
+ export const WithSlots = {
135
+ render: (args) => ({
136
+ components: {
137
+ AntSelect,
138
+ AntDropdown,
139
+ AntIcon
140
+ },
141
+ setup() {
142
+ const modelValue = computed({
143
+ // @ts-ignore
144
+ get: () => args.modelValue,
145
+ // @ts-ignore
146
+ set: (val) => args.modelValue = val
147
+ });
148
+ const scrollContainer = ref(void 0);
149
+ onMounted(() => {
150
+ if (scrollContainer.value) {
151
+ scrollContainer.value.scrollTop = (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight) / 2;
152
+ }
153
+ });
154
+ return {
155
+ args,
156
+ modelValue,
157
+ scrollContainer,
158
+ faCake
159
+ };
160
+ },
161
+ template: `
162
+ <div ref="scrollContainer" class="overflow-y-auto h-[100vh] p-2.5 dashed">
163
+ <div class="flex items-center h-[200vh]">
164
+ <AntSelect v-bind="args" v-model="modelValue">
165
+ <template #contentLeft="option">
166
+ <div v-if="option.value === '1'">
167
+ <AntIcon
168
+ :icon="faCake"
169
+ color="text-primary-500"
170
+ />
171
+ </div>
172
+
173
+ <div v-if="option.value === '2'">
174
+ <AntIcon
175
+ :icon="faCake"
176
+ color="text-secondary-500"
177
+ />
178
+ </div>
179
+
180
+ <div v-if="option.value === '3'">
181
+ <AntIcon
182
+ :icon="faCake"
183
+ color="text-success-500"
184
+ />
185
+ </div>
186
+
187
+ <div v-if="option.value === '4'">
188
+ <AntIcon
189
+ :icon="faCake"
190
+ color="text-warning-500"
191
+ />
192
+ </div>
193
+ </template>
194
+ <template #contentRight="option">
195
+ <div v-if="option.value === '1'">
196
+ <AntIcon
197
+ :icon="faCake"
198
+ color="text-primary-500"
199
+ />
200
+ </div>
201
+
202
+ <div v-if="option.value === '2'">
203
+ <AntIcon
204
+ :icon="faCake"
205
+ color="text-secondary-500"
206
+ />
207
+ </div>
208
+
209
+ <div v-if="option.value === '3'">
210
+ <AntIcon
211
+ :icon="faCake"
212
+ color="text-success-500"
213
+ />
214
+ </div>
215
+
216
+ <div v-if="option.value === '4'">
217
+ <AntIcon
218
+ :icon="faCake"
219
+ color="text-warning-500"
220
+ />
221
+ </div>
222
+ </template>
223
+ </AntSelect>
224
+ </div>
225
+ </div>
226
+ `
227
+ }),
228
+ args: {
229
+ modelValue: null,
230
+ label: "Label",
231
+ options,
232
+ description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
233
+ }
234
+ };
130
235
  export const manyOptions = {
131
236
  render: Docs.render,
132
237
  args: {
@@ -212,84 +317,80 @@ export const summary = {
212
317
  disableSnapshot: false
213
318
  }
214
319
  },
215
- render: (args) => ({
216
- components: {
217
- AntSelect
218
- },
219
- setup() {
220
- return {
221
- args,
222
- manySelectOptions
223
- };
224
- },
320
+ render: (args, ctx) => ({
321
+ // @ts-ignore
322
+ components: Docs.render(args, ctx).components,
323
+ // @ts-ignore
324
+ setup: Docs.render(args, ctx).setup,
225
325
  template: `
226
326
  <div class="p-4 flex flex-col gap-2.5">
227
327
  <div class="flex w-2/5 gap-2.5">
228
- <AntSelect v-bind="args" :value="null"
328
+ <AntSelect v-bind="args"
329
+ v-model="modelValue"
229
330
  placeholder="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"/>
230
- <AntSelect v-bind="args" value="5"/>
331
+ <AntSelect v-bind="args" v-model="modelValue"/>
231
332
  </div>
232
333
  <div class="flex gap-2.5">
233
- <AntSelect v-bind="args" :value="null" size="md" state="base"/>
234
- <AntSelect v-bind="args" :value="null" size="md" state="info"/>
235
- <AntSelect v-bind="args" :value="null" size="md" state="success"/>
236
- <AntSelect v-bind="args" :value="null" size="md" state="warning"/>
237
- <AntSelect v-bind="args" :value="null" size="md" state="danger"/>
334
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="base"/>
335
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="info"/>
336
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="success"/>
337
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="warning"/>
338
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="danger"/>
238
339
  </div>
239
340
  <div class="flex gap-2.5">
240
- <AntSelect v-bind="args" :value="null" size="sm" state="base"/>
241
- <AntSelect v-bind="args" :value="null" size="sm" state="info"/>
242
- <AntSelect v-bind="args" :value="null" size="sm" state="success"/>
243
- <AntSelect v-bind="args" :value="null" size="sm" state="warning"/>
244
- <AntSelect v-bind="args" :value="null" size="sm" state="danger"/>
341
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="base"/>
342
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="info"/>
343
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="success"/>
344
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="warning"/>
345
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="danger"/>
245
346
  </div>
246
347
  <div class="flex gap-2.5">
247
- <AntSelect v-bind="args" value="1" size="md" state="base"/>
248
- <AntSelect v-bind="args" value="1" size="md" state="info"/>
249
- <AntSelect v-bind="args" value="1" size="md" state="success"/>
250
- <AntSelect v-bind="args" value="1" size="md" state="warning"/>
251
- <AntSelect v-bind="args" value="1" size="md" state="danger"/>
348
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="base"/>
349
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="info"/>
350
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="success"/>
351
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="warning"/>
352
+ <AntSelect v-bind="args" v-model="modelValue" size="md" state="danger"/>
252
353
  </div>
253
354
  <div class="flex gap-2.5">
254
- <AntSelect v-bind="args" value="1" size="sm" state="base"/>
255
- <AntSelect v-bind="args" value="1" size="sm" state="info"/>
256
- <AntSelect v-bind="args" value="1" size="sm" state="success"/>
257
- <AntSelect v-bind="args" value="1" size="sm" state="warning"/>
258
- <AntSelect v-bind="args" value="1" size="sm" state="danger"/>
355
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="base"/>
356
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="info"/>
357
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="success"/>
358
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="warning"/>
359
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="danger"/>
259
360
  </div>
260
361
  <div class="flex gap-2.5">
261
- <AntSelect v-bind="args" value="1" size="sm" state="base" disabled/>
262
- <AntSelect v-bind="args" value="1" size="sm" state="info" disabled/>
263
- <AntSelect v-bind="args" value="1" size="sm" state="success" disabled/>
264
- <AntSelect v-bind="args" value="1" size="sm" state="warning" disabled/>
265
- <AntSelect v-bind="args" value="1" size="sm" state="danger" disabled/>
362
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="base" disabled/>
363
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="info" disabled/>
364
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="success" disabled/>
365
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="warning" disabled/>
366
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="danger" disabled/>
266
367
  </div>
267
368
  <div class="flex gap-2.5">
268
- <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="base" disabled nullable/>
269
- <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="info" disabled nullable/>
270
- <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="success" disabled nullable/>
271
- <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="warning" disabled nullable/>
272
- <AntSelect v-bind="args" :value="1" v-model="modelValue" size="sm" state="danger" disabled nullable/>
369
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="base" disabled nullable/>
370
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="info" disabled nullable/>
371
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="success" disabled nullable/>
372
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="warning" disabled nullable/>
373
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" state="danger" disabled nullable/>
273
374
  </div>
274
375
  <div class="flex gap-2.5">
275
- <AntSelect v-bind="args" :value="null" grouped="none"/>
276
- <AntSelect v-bind="args" :value="null" grouped="right"/>
277
- <AntSelect v-bind="args" :value="null" grouped="center"/>
278
- <AntSelect v-bind="args" :value="null" grouped="left"/>
376
+ <AntSelect v-bind="args" v-model="modelValue" grouped="none"/>
377
+ <AntSelect v-bind="args" v-model="modelValue" grouped="right"/>
378
+ <AntSelect v-bind="args" v-model="modelValue" grouped="center"/>
379
+ <AntSelect v-bind="args" v-model="modelValue" grouped="left"/>
279
380
  </div>
280
381
  <div class="flex gap-2.5">
281
- <AntSelect v-bind="args" value="1" size="md" nullable state="base"/>
282
- <AntSelect v-bind="args" value="1" size="md" nullable state="info"/>
283
- <AntSelect v-bind="args" value="1" size="md" nullable state="success"/>
284
- <AntSelect v-bind="args" value="1" size="md" nullable state="warning"/>
285
- <AntSelect v-bind="args" value="1" size="md" nullable state="danger"/>
382
+ <AntSelect v-bind="args" v-model="modelValue" size="md" nullable state="base"/>
383
+ <AntSelect v-bind="args" v-model="modelValue" size="md" nullable state="info"/>
384
+ <AntSelect v-bind="args" v-model="modelValue" size="md" nullable state="success"/>
385
+ <AntSelect v-bind="args" v-model="modelValue" size="md" nullable state="warning"/>
386
+ <AntSelect v-bind="args" v-model="modelValue" size="md" nullable state="danger"/>
286
387
  </div>
287
388
  <div class="flex gap-2.5">
288
- <AntSelect v-bind="args" value="1" size="sm" nullable state="base"/>
289
- <AntSelect v-bind="args" value="1" size="sm" nullable state="info"/>
290
- <AntSelect v-bind="args" value="1" size="sm" nullable state="success"/>
291
- <AntSelect v-bind="args" value="1" size="sm" nullable state="warning"/>
292
- <AntSelect v-bind="args" value="1" size="sm" nullable state="danger"/>
389
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" nullable state="base"/>
390
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" nullable state="info"/>
391
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" nullable state="success"/>
392
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" nullable state="warning"/>
393
+ <AntSelect v-bind="args" v-model="modelValue" size="sm" nullable state="danger"/>
293
394
  </div>
294
395
  </div>
295
396
  `
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antify/ui",
3
- "version": "2.2.14",
3
+ "version": "2.2.16",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "exports": {