@antify/ui 2.3.1 → 2.4.0

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 (4) hide show
  1. package/dist/components/inputs/AntImageInput.vue +11 -12
  2. package/dist/components/inputs/__stories/AntImageInput.stories.js +22 -8
  3. package/dist/components/inputs/__stories/AntImageInput.stories.mjs +24 -8
  4. package/package.json +1 -1
package/dist/components/inputs/AntImageInput.vue CHANGED
@@ -34,7 +34,7 @@ defineOptions({
34
34
  });
35
35
 
36
36
  const props = withDefaults(defineProps<{
37
- modelValue: string | null;
37
+ src: string | null;
38
38
  loading?: boolean;
39
39
  label?: string;
40
40
  placeholder?: string;
@@ -56,10 +56,10 @@ const props = withDefaults(defineProps<{
56
56
  loading: false,
57
57
  });
58
58
  const emit = defineEmits([
59
- 'update:modelValue',
60
59
  'validate',
60
+ 'upload',
61
+ 'remove',
61
62
  ]);
62
- const _modelValue = useVModel(props, 'modelValue', emit);
63
63
  const descriptionFontSize = computed(() => {
64
64
  if (props.size === Size.xs2 || props.size === Size.xs) {
65
65
  return Size.xs;
@@ -76,12 +76,9 @@ const openFileDialog = () => {
76
76
  const handleFileChange = (event: Event) => {
77
77
  const target = event.target as HTMLInputElement;
78
78
  const file = target.files?.[0];
79
+
79
80
  if (file) {
80
- const reader = new FileReader();
81
- reader.onload = () => {
82
- emit('update:modelValue', reader.result as string);
83
- };
84
- reader.readAsDataURL(file);
81
+ emit('upload', file as File);
85
82
  }
86
83
  };
87
84
 
@@ -107,8 +104,8 @@ onMounted(() => {
107
104
  <div>
108
105
  <div class="h-[70px] w-[70px] bg-gray-100 rounded-full overflow-hidden flex items-center justify-center relative">
109
106
  <img
110
- v-if="_modelValue && !skeleton"
111
- :src="_modelValue"
107
+ v-if="src && !skeleton"
108
+ :src="src"
112
109
  alt="Image"
113
110
  class="h-full w-full object-cover"
114
111
  >
@@ -159,12 +156,14 @@ onMounted(() => {
159
156
  </span>
160
157
 
161
158
  <AntButton
162
- v-if="_modelValue"
159
+ v-if="src"
163
160
  :size="Size.lg"
164
161
  :icon-left="faMultiply"
165
162
  :skeleton="skeleton"
166
163
  :disabled="disabled"
167
- @click.prevent="() => _modelValue = null"
164
+ @click.prevent="() => {
165
+ emit('remove');
166
+ }"
168
167
  >
169
168
  <template #tooltip-content>
170
169
  Remove image
package/dist/components/inputs/__stories/AntImageInput.stories.js CHANGED
@@ -10,6 +10,7 @@ var _enums = require("../../../enums");
10
10
  var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
11
11
  var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
12
12
  var _vue = require("vue");
13
+ var _addonActions = require("@storybook/addon-actions");
13
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
15
  const meta = {
15
16
  title: "Inputs/Image Input",
@@ -20,7 +21,7 @@ const meta = {
20
21
  }
21
22
  },
22
23
  argTypes: {
23
- modelValue: {
24
+ src: {
24
25
  table: {
25
26
  type: {
26
27
  summary: "string|null"
@@ -55,18 +56,31 @@ const Docs = exports.Docs = {
55
56
  AntImageInput: _AntImageInput.default
56
57
  },
57
58
  setup() {
59
+ function upload(value) {
60
+ console.info("Action upload:", value);
61
+ (0, _addonActions.action)("upload")(value);
62
+ args.loading = true;
63
+ setTimeout(() => args.loading = false, 2e3);
64
+ }
65
+ function remove() {
66
+ (0, _addonActions.action)("remove")();
67
+ }
58
68
  return {
59
- args
69
+ args,
70
+ upload,
71
+ remove
60
72
  };
61
73
  },
62
74
  template: `
63
75
  <AntImageInput
64
76
  v-bind="args"
65
- v-model="args.modelValue"
77
+ :src="args.src"
78
+ @upload="upload"
79
+ @remove="remove"
66
80
  />`
67
81
  }),
68
82
  args: {
69
- modelValue: "/avatar.jpg",
83
+ src: "/avatar.jpg",
70
84
  label: "Label",
71
85
  description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
72
86
  }
@@ -75,7 +89,7 @@ const Empty = exports.Empty = {
75
89
  render: Docs.render,
76
90
  args: {
77
91
  ...Docs.args,
78
- modelValue: null
92
+ src: null
79
93
  }
80
94
  };
81
95
  const Skeleton = exports.Skeleton = {
@@ -117,19 +131,19 @@ const Summary = exports.Summary = {
117
131
  <AntFormGroup>
118
132
  <AntFormGroupLabel>Default</AntFormGroupLabel>
119
133
  <AntImageInput
120
- v-model="valuedModelValue"
134
+ :src="valuedModelValue"
121
135
  label="Label"
122
136
  description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
123
137
  />
124
138
  <AntFormGroupLabel>Empty</AntFormGroupLabel>
125
139
  <AntImageInput
126
- v-model="emptyModelValue"
140
+ :src="emptyModelValue"
127
141
  label="Label"
128
142
  description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
129
143
  />
130
144
  <AntFormGroupLabel>Disabled</AntFormGroupLabel>
131
145
  <AntImageInput
132
- v-model="valuedModelValue"
146
+ :src="valuedModelValue"
133
147
  label="Label"
134
148
  description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
135
149
  />
package/dist/components/inputs/__stories/AntImageInput.stories.mjs CHANGED
@@ -10,6 +10,9 @@ import AntFormGroup from "../../forms/AntFormGroup.vue";
10
10
  import {
11
11
  ref
12
12
  } from "vue";
13
+ import {
14
+ action
15
+ } from "@storybook/addon-actions";
13
16
  const meta = {
14
17
  title: "Inputs/Image Input",
15
18
  component: AntImageInput,
@@ -19,7 +22,7 @@ const meta = {
19
22
  }
20
23
  },
21
24
  argTypes: {
22
- modelValue: {
25
+ src: {
23
26
  table: {
24
27
  type: {
25
28
  summary: "string|null"
@@ -54,18 +57,31 @@ export const Docs = {
54
57
  AntImageInput
55
58
  },
56
59
  setup() {
60
+ function upload(value) {
61
+ console.info("Action upload:", value);
62
+ action("upload")(value);
63
+ args.loading = true;
64
+ setTimeout(() => args.loading = false, 2e3);
65
+ }
66
+ function remove() {
67
+ action("remove")();
68
+ }
57
69
  return {
58
- args
70
+ args,
71
+ upload,
72
+ remove
59
73
  };
60
74
  },
61
75
  template: `
62
76
  <AntImageInput
63
77
  v-bind="args"
64
- v-model="args.modelValue"
78
+ :src="args.src"
79
+ @upload="upload"
80
+ @remove="remove"
65
81
  />`
66
82
  }),
67
83
  args: {
68
- modelValue: "/avatar.jpg",
84
+ src: "/avatar.jpg",
69
85
  label: "Label",
70
86
  description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
71
87
  }
@@ -74,7 +90,7 @@ export const Empty = {
74
90
  render: Docs.render,
75
91
  args: {
76
92
  ...Docs.args,
77
- modelValue: null
93
+ src: null
78
94
  }
79
95
  };
80
96
  export const Skeleton = {
@@ -116,19 +132,19 @@ export const Summary = {
116
132
  <AntFormGroup>
117
133
  <AntFormGroupLabel>Default</AntFormGroupLabel>
118
134
  <AntImageInput
119
- v-model="valuedModelValue"
135
+ :src="valuedModelValue"
120
136
  label="Label"
121
137
  description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
122
138
  />
123
139
  <AntFormGroupLabel>Empty</AntFormGroupLabel>
124
140
  <AntImageInput
125
- v-model="emptyModelValue"
141
+ :src="emptyModelValue"
126
142
  label="Label"
127
143
  description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
128
144
  />
129
145
  <AntFormGroupLabel>Disabled</AntFormGroupLabel>
130
146
  <AntImageInput
131
- v-model="valuedModelValue"
147
+ :src="valuedModelValue"
132
148
  label="Label"
133
149
  description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
134
150
  />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antify/ui",
3
- "version": "2.3.1",
3
+ "version": "2.4.0",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "exports": {