@antify/ui 2.2.13 → 2.2.15

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 (10) hide show
  1. package/dist/components/AntTooltip.vue +3 -2
  2. package/dist/components/__stories/AntTooltip.stories.d.ts +1 -0
  3. package/dist/components/__stories/AntTooltip.stories.js +47 -4
  4. package/dist/components/__stories/AntTooltip.stories.mjs +46 -3
  5. package/dist/components/inputs/AntSelect.vue +29 -1
  6. package/dist/components/inputs/Elements/AntSelectMenu.vue +14 -6
  7. package/dist/components/inputs/__stories/AntSelect.stories.d.ts +1 -0
  8. package/dist/components/inputs/__stories/AntSelect.stories.js +156 -57
  9. package/dist/components/inputs/__stories/AntSelect.stories.mjs +157 -56
  10. package/package.json +1 -1
package/dist/components/AntTooltip.vue CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  InputState,
7
7
  } from '../enums';
8
8
  import {
9
- arrow, autoUpdate, flip, offset, useFloating,
9
+ arrow, autoUpdate, flip, offset, useFloating, shift,
10
10
  } from '@floating-ui/vue';
11
11
  import {
12
12
  hasSlotContent,
@@ -52,6 +52,7 @@ const {
52
52
  ],
53
53
  fallbackAxisSideDirection: 'none',
54
54
  }),
55
+ shift(),
55
56
  arrow({
56
57
  element: floatingArrow,
57
58
  }),
@@ -197,7 +198,7 @@ function onClick() {
197
198
  @mouseleave="() => onMouseLeaveTooltip()"
198
199
  >
199
200
  <div
200
- class="p-2 rounded-md border"
201
+ class="p-2 rounded-md border w-fit max-w-screen"
201
202
  :class="contentClasses"
202
203
  >
203
204
  <slot name="content" />
package/dist/components/__stories/AntTooltip.stories.d.ts CHANGED
@@ -4,4 +4,5 @@ declare const meta: Meta<typeof AntTooltip>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof AntTooltip>;
6
6
  export declare const Docs: Story;
7
+ export declare const largeContent: Story;
7
8
  export declare const disabled: Story;
package/dist/components/__stories/AntTooltip.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.disabled = exports.default = exports.Docs = void 0;
6
+ exports.largeContent = exports.disabled = exports.default = exports.Docs = void 0;
7
7
  var _AntTooltip = _interopRequireDefault(require("../AntTooltip.vue"));
8
8
  var _enums = require("../../enums");
9
9
  var _AntButton = _interopRequireDefault(require("../buttons/AntButton.vue"));
@@ -36,6 +36,7 @@ const Docs = exports.Docs = {
36
36
  },
37
37
  setup() {
38
38
  const scrollContainer = (0, _vue.ref)(void 0);
39
+ const tooltipContent = "Tooltip content";
39
40
  (0, _vue.onMounted)(() => {
40
41
  if (scrollContainer.value) {
41
42
  scrollContainer.value.scrollLeft = (scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth) / 2;
@@ -44,18 +45,19 @@ const Docs = exports.Docs = {
44
45
  });
45
46
  return {
46
47
  args,
47
- scrollContainer
48
+ scrollContainer,
49
+ tooltipContent
48
50
  };
49
51
  },
50
52
  template: `
51
53
  <div ref="scrollContainer" class="dashed h-[50vh] w-[50vw] overflow-scroll">
52
- <div class="flex grow justify-center items-center h-screen w-[1000px]">
54
+ <div class="flex grow justify-center items-center h-screen w-[2000px]">
53
55
  <AntTooltip v-bind="args">
54
56
  <AntButton>Hover me</AntButton>
55
57
 
56
58
  <template #content>
57
59
  <div>
58
- Tooltip content
60
+ {{tooltipContent}}
59
61
  </div>
60
62
  </template>
61
63
  </AntTooltip>
@@ -103,6 +105,47 @@ const Docs = exports.Docs = {
103
105
  },
104
106
  args: {}
105
107
  };
108
+ const largeContent = exports.largeContent = {
109
+ render: args => ({
110
+ components: {
111
+ AntTooltip: _AntTooltip.default,
112
+ AntButton: _AntButton.default
113
+ },
114
+ setup() {
115
+ const scrollContainer = (0, _vue.ref)(void 0);
116
+ const tooltipContent = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr,\n sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.";
117
+ (0, _vue.onMounted)(() => {
118
+ if (scrollContainer.value) {
119
+ scrollContainer.value.scrollLeft = (scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth) / 2;
120
+ scrollContainer.value.scrollTop = (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight) / 2;
121
+ }
122
+ });
123
+ return {
124
+ args,
125
+ scrollContainer,
126
+ tooltipContent
127
+ };
128
+ },
129
+ template: `
130
+ <div ref="scrollContainer" class="dashed h-[50vh] w-[50vw] overflow-scroll">
131
+ <div class="flex grow justify-center items-center h-screen w-[2000px]">
132
+ <AntTooltip v-bind="args">
133
+ <AntButton>Hover me</AntButton>
134
+
135
+ <template #content>
136
+ <div>
137
+ {{tooltipContent}}
138
+ </div>
139
+ </template>
140
+ </AntTooltip>
141
+ </div>
142
+ </div>
143
+ `
144
+ }),
145
+ args: {
146
+ ...Docs.args
147
+ }
148
+ };
106
149
  const disabled = exports.disabled = {
107
150
  render: Docs.render,
108
151
  args: {
package/dist/components/__stories/AntTooltip.stories.mjs CHANGED
@@ -39,6 +39,7 @@ export const Docs = {
39
39
  },
40
40
  setup() {
41
41
  const scrollContainer = ref(void 0);
42
+ const tooltipContent = "Tooltip content";
42
43
  onMounted(() => {
43
44
  if (scrollContainer.value) {
44
45
  scrollContainer.value.scrollLeft = (scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth) / 2;
@@ -47,18 +48,19 @@ export const Docs = {
47
48
  });
48
49
  return {
49
50
  args,
50
- scrollContainer
51
+ scrollContainer,
52
+ tooltipContent
51
53
  };
52
54
  },
53
55
  template: `
54
56
  <div ref="scrollContainer" class="dashed h-[50vh] w-[50vw] overflow-scroll">
55
- <div class="flex grow justify-center items-center h-screen w-[1000px]">
57
+ <div class="flex grow justify-center items-center h-screen w-[2000px]">
56
58
  <AntTooltip v-bind="args">
57
59
  <AntButton>Hover me</AntButton>
58
60
 
59
61
  <template #content>
60
62
  <div>
61
- Tooltip content
63
+ {{tooltipContent}}
62
64
  </div>
63
65
  </template>
64
66
  </AntTooltip>
@@ -106,6 +108,47 @@ export const Docs = {
106
108
  },
107
109
  args: {}
108
110
  };
111
+ export const largeContent = {
112
+ render: (args) => ({
113
+ components: {
114
+ AntTooltip,
115
+ AntButton
116
+ },
117
+ setup() {
118
+ const scrollContainer = ref(void 0);
119
+ const tooltipContent = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr,\n sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.";
120
+ onMounted(() => {
121
+ if (scrollContainer.value) {
122
+ scrollContainer.value.scrollLeft = (scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth) / 2;
123
+ scrollContainer.value.scrollTop = (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight) / 2;
124
+ }
125
+ });
126
+ return {
127
+ args,
128
+ scrollContainer,
129
+ tooltipContent
130
+ };
131
+ },
132
+ template: `
133
+ <div ref="scrollContainer" class="dashed h-[50vh] w-[50vw] overflow-scroll">
134
+ <div class="flex grow justify-center items-center h-screen w-[2000px]">
135
+ <AntTooltip v-bind="args">
136
+ <AntButton>Hover me</AntButton>
137
+
138
+ <template #content>
139
+ <div>
140
+ {{tooltipContent}}
141
+ </div>
142
+ </template>
143
+ </AntTooltip>
144
+ </div>
145
+ </div>
146
+ `
147
+ }),
148
+ args: {
149
+ ...Docs.args
150
+ }
151
+ };
109
152
  export const disabled = {
110
153
  render: Docs.render,
111
154
  args: {
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/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/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.13",
3
+ "version": "2.2.15",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "exports": {