Skip to content

Commit a5268e6

Browse files
alexandrdrvnalexandrdrvn
committed
feat: add new components
1 parent 3d96be8 commit a5268e6

File tree

122 files changed

+3934
-3108
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

122 files changed

+3934
-3108
lines changed

‎assets/img/remove-icon.svg

Lines changed: 3 additions & 0 deletions
Loading

‎index.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,10 @@ module.exports = {
102102
component: "molecules/cart-product/cart-product.vue",
103103
css: "molecules/cart-product/cart-product.scss",
104104
},
105+
CartProductTableRow: {
106+
component: "molecules/cart-product-table-row/cart-product-table-row.vue",
107+
css: "molecules/cart-product-table-row/cart-product-table-row.scss",
108+
},
105109
Tabs: {
106110
component: "molecules/tabs/tabs.vue",
107111
css: "molecules/tabs/tabs.scss",
@@ -239,6 +243,27 @@ module.exports = {
239243
css: "molecules/table/table.scss",
240244
component: "molecules/table/table.vue",
241245
},
246+
Thead: {
247+
component: "molecules/table/thead.vue",
248+
},
249+
Tbody: {
250+
component: "molecules/table/tbody.vue",
251+
},
252+
Tfoot: {
253+
component: "molecules/table/tfoot.vue",
254+
},
255+
Th: {
256+
component: "molecules/table/th.vue",
257+
},
258+
Td: {
259+
component: "molecules/table/td.vue",
260+
},
261+
Tr: {
262+
component: "molecules/table/tr.vue",
263+
},
264+
TH: {
265+
component: "molecules/table/th.vue",
266+
},
242267
TableHorizontal: {
243268
css: "molecules/table-horizontal/table-horizontal.scss",
244269
component: "molecules/table-horizontal/table-horizontal.vue",
@@ -262,6 +287,10 @@ module.exports = {
262287
component: "organisms/cart/cart.vue",
263288
css: "organisms/cart/cart.scss",
264289
},
290+
CartSidebar: {
291+
component: "organisms/cart-sidebar/cart-sidebar.vue",
292+
css: "organisms/cart-sidebar/cart-sidebar.scss",
293+
},
265294
Modal: {
266295
css: "organisms/modal/modal.scss",
267296
component: "organisms/modal/modal.vue",

‎lib/components/molecules/button-group/button-group.stories.mjs.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/components/molecules/cart-product copy/cart-product.scss

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.vf-m-cart-product {
2+
@apply flex flex-col items-center overflow-hidden;
3+
@screen md {
4+
@apply flex-row;
5+
}
6+
&__image {
7+
@apply flex items-center;
8+
@screen md {
9+
@apply pl-3;
10+
}
11+
}
12+
&__info {
13+
@apply flex-1;
14+
}
15+
&__name {
16+
@apply vf-a-heading--2 text-center md:text-left mb-0 w-full;
17+
color: #4A942C;
18+
}
19+
&__price {
20+
@apply vf-a-heading--4 text-center md:text-left mb-2;
21+
span {
22+
@apply font-semibold;
23+
}
24+
}
25+
&__product {
26+
@apply flex-1;
27+
}
28+
&__quantity {
29+
@apply mb-3 flex justify-center md:justify-start;
30+
}
31+
&__total {
32+
@apply mx-3 font-semibold text-xl;
33+
}
34+
&__remove {
35+
@apply mx-4 cursor-pointer;
36+
}
37+
&__option {
38+
@apply leading-none text-black;
39+
&__name {
40+
@apply font-semibold text-sm;
41+
}
42+
&__value {
43+
@apply font-normal text-sm;
44+
}
45+
}
46+
&__content {
47+
@apply text-left;
48+
@screen md {
49+
@apply pl-3 flex flex-wrap items-center;
50+
}
51+
}
52+
}

‎lib/components/molecules/cart-product copy/cart-product.stories.mjs

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import VfMCartProduct from "./cart-product.vue.mjs";
2+
import "./cart-product.scss.mjs";
3+
import faker from "faker"; // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4+
5+
export default {
6+
title: "molecule/cart-product",
7+
component: VfMCartProduct,
8+
// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
9+
argTypes: {}
10+
}; // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
11+
12+
const Template = args => ({
13+
// Components used in your story `template` are defined in the `components` object
14+
components: {
15+
VfMCartProduct
16+
},
17+
18+
// The story's `args` need to be mapped into the template through the `setup()` method
19+
setup() {
20+
return {
21+
args
22+
};
23+
},
24+
25+
// And then the `args` are bound to your component with `v-bind="args"`
26+
template: '<vf-m-cart-product v-bind="args"/>'
27+
});
28+
29+
export const Default = Template.bind({}); // More on args: https://storybook.js.org/docs/vue/writing-stories/args
30+
31+
Default.args = {
32+
cartProduct: {
33+
key: 1,
34+
price: faker.commerce.price() + "$",
35+
product: {
36+
id: 1,
37+
name: "Product title",
38+
model: "Product model",
39+
shortDescription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur convallis arcu ac nibh rutrum efficitur.",
40+
rating: 4,
41+
price: "20$",
42+
special: "10$",
43+
image: "https://via.placeholder.com/300x300",
44+
imageBig: "https://via.placeholder.com/825x825?text=Big image",
45+
imageLazy: "https://via.placeholder.com/10x10",
46+
images: [{
47+
image: "https://via.placeholder.com/825x825?text=Image 1",
48+
imageBig: "https://via.placeholder.com/825x825?text=Image 1",
49+
imageLazy: "https://via.placeholder.com/10x10?text=Image 1"
50+
}, {
51+
image: "https://via.placeholder.com/825x825?text=Image 2",
52+
imageBig: "https://via.placeholder.com/825x825?text=Image 2",
53+
imageLazy: "https://via.placeholder.com/10x10?text=Image 2"
54+
}, {
55+
image: "https://via.placeholder.com/825x825?text=Image 3",
56+
imageBig: "https://via.placeholder.com/825x825?text=Image 3",
57+
imageLazy: "https://via.placeholder.com/10x10?text=Image 3"
58+
}]
59+
},
60+
quantity: 2,
61+
total: faker.commerce.price() + "$"
62+
}
63+
};
64+
//# sourceMappingURL=cart-product.stories.mjs.map

‎lib/components/molecules/cart-product copy/cart-product.stories.mjs.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/components/molecules/cart-product copy/cart-product.vue

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<template>
2+
<vf-m-media no-body class="vf-m-cart-product">
3+
<vf-m-media-aside class="vf-m-cart-product__image">
4+
<vf-a-image
5+
:lazy-src="imageLazy"
6+
:src="image"
7+
:width-amp="$vuefront.images.productThumb.width"
8+
:height-amp="$vuefront.images.productThumb.height"
9+
:width="160"
10+
/>
11+
</vf-m-media-aside>
12+
<vf-m-media-body class="vf-m-cart-product__content">
13+
<div class="vf-m-cart-product__name">
14+
<span>{{ cartProduct.product.name }}</span>
15+
</div>
16+
<div class="vf-m-cart-product__info">
17+
<div class="vf-m-cart-product__price">
18+
<span>{{ $t("molecules.productThumbInline.textPrice") }}:</span
19+
>{{ cartProduct.product.price }}
20+
</div>
21+
<div class="vf-m-cart-product__quantity">
22+
<vf-m-product-quantity
23+
size="sm"
24+
:quantity="cartProduct.quantity"
25+
@change="handleChangeQuantity"
26+
/>
27+
</div>
28+
<span
29+
v-for="(value, index) in cartProduct.option"
30+
:key="index"
31+
class="vf-m-cart-product__option"
32+
>
33+
<div>
34+
<span
35+
class="vf-m-cart-product__option__name"
36+
v-html="value.name"
37+
></span
38+
>:
39+
<span
40+
class="vf-m-cart-product__option__value"
41+
v-html="value.value"
42+
></span>
43+
</div>
44+
</span>
45+
</div>
46+
<div class="vf-m-cart-product__total">
47+
{{ cartProduct.total }}
48+
</div>
49+
<div class="vf-m-cart-product__remove" @click="handleRemove">
50+
<vf-a-icon :icon="mdiTrashCanOutline" :size="16" />
51+
</div>
52+
</vf-m-media-body>
53+
</vf-m-media>
54+
</template>
55+
<script lang="ts" setup>
56+
import { mdiTrashCanOutline } from "@mdi/js";
57+
import { PropType, computed } from "vue";
58+
import { CartProduct } from "vuefront-api";
59+
import placeholder from "../../../../assets/img/placeholder.png";
60+
const props = defineProps({
61+
cartProduct: {
62+
type: Object as PropType<CartProduct>,
63+
default() {
64+
return null;
65+
},
66+
},
67+
short: {
68+
type: Boolean,
69+
default() {
70+
return false;
71+
},
72+
},
73+
});
74+
const emits = defineEmits(["remove", "change-quantity"]);
75+
76+
const image = computed(() =>
77+
props.cartProduct?.product?.image && props.cartProduct.product.image !== ""
78+
? props.cartProduct.product.image
79+
: placeholder
80+
);
81+
const imageLazy = computed(() =>
82+
props.cartProduct?.product?.imageLazy &&
83+
props.cartProduct.product.imageLazy !== ""
84+
? props.cartProduct.product.imageLazy
85+
: placeholder
86+
);
87+
const handleRemove = () => {
88+
emits("remove", props.cartProduct.key);
89+
};
90+
const handleChangeQuantity = (e: number) => {
91+
emits("change-quantity", e);
92+
};
93+
</script>

‎lib/components/molecules/cart-product-table-row/cart-product-table-row.scss

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.vf-m-cart-product-table-row {
2+
&__product {
3+
@apply flex flex-row;
4+
}
5+
&__quantity {
6+
@apply inline-block;
7+
}
8+
&__image {
9+
10+
}
11+
&__price {
12+
@apply vf-a-heading--4 font-semibold;
13+
}
14+
&__total {
15+
@apply vf-a-heading--4 font-semibold;
16+
}
17+
&__info {
18+
@apply pl-8;
19+
}
20+
&__option {
21+
&__name {
22+
@apply text-sm;
23+
}
24+
&__value {
25+
26+
}
27+
}
28+
&__name {
29+
@apply vf-a-heading--4 font-semibold;
30+
}
31+
}

‎lib/components/molecules/cart-product-table-row/cart-product-table-row.stories.mjs

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import VfMCartProductTableRow from "./cart-product-table-row.vue.mjs";
2+
import "./cart-product-table-row.scss.mjs";
3+
import faker from "faker"; // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4+
5+
export default {
6+
title: "molecule/cart-product-table-row",
7+
component: VfMCartProductTableRow,
8+
// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
9+
argTypes: {}
10+
}; // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
11+
12+
const Template = args => ({
13+
// Components used in your story `template` are defined in the `components` object
14+
components: {
15+
VfMCartProductTableRow
16+
},
17+
18+
// The story's `args` need to be mapped into the template through the `setup()` method
19+
setup() {
20+
return {
21+
args
22+
};
23+
},
24+
25+
// And then the `args` are bound to your component with `v-bind="args"`
26+
template: '<vf-m-cart-product-table-row v-bind="args"/>'
27+
});
28+
29+
export const Default = Template.bind({}); // More on args: https://storybook.js.org/docs/vue/writing-stories/args
30+
31+
Default.args = {
32+
cartProduct: {
33+
key: 1,
34+
price: faker.commerce.price() + "$",
35+
product: {
36+
id: 1,
37+
name: "Product title",
38+
model: "Product model",
39+
shortDescription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur convallis arcu ac nibh rutrum efficitur.",
40+
rating: 4,
41+
price: "20$",
42+
special: "10$",
43+
image: "https://via.placeholder.com/300x300",
44+
imageBig: "https://via.placeholder.com/825x825?text=Big image",
45+
imageLazy: "https://via.placeholder.com/10x10",
46+
images: [{
47+
image: "https://via.placeholder.com/825x825?text=Image 1",
48+
imageBig: "https://via.placeholder.com/825x825?text=Image 1",
49+
imageLazy: "https://via.placeholder.com/10x10?text=Image 1"
50+
}, {
51+
image: "https://via.placeholder.com/825x825?text=Image 2",
52+
imageBig: "https://via.placeholder.com/825x825?text=Image 2",
53+
imageLazy: "https://via.placeholder.com/10x10?text=Image 2"
54+
}, {
55+
image: "https://via.placeholder.com/825x825?text=Image 3",
56+
imageBig: "https://via.placeholder.com/825x825?text=Image 3",
57+
imageLazy: "https://via.placeholder.com/10x10?text=Image 3"
58+
}]
59+
},
60+
quantity: 2,
61+
total: faker.commerce.price() + "$"
62+
}
63+
};
64+
//# sourceMappingURL=cart-product-table-row.stories.mjs.map

0 commit comments

Comments
 (0)