@vcita/design-system 1.3.2 → 1.3.4

package/src/components/VcTextField/VcTextField.vue

@@ -20,7 +20,10 @@
                 :single-line="singleLine"
                 :hide-details="hideDetails"
                 :readonly="readonly"
+                :autofocus="autofocus"
                 @click="$emit('click')"
+                @blur="$emit('blur')"
+                @keydown.enter="onKeydownEnter"
                 @input="(data) => $emit('input',data)">
     <template v-slot:prepend-inner>
       <slot name="prepend-inner">
@@ -138,6 +141,10 @@ export default {
       type: Boolean,
       default: false
     },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
   },
   mounted() {
     if (this.googleAddressAutoComplete) {
@@ -211,6 +218,10 @@ export default {
         }
       }
       this.$emit('onPlaceSelected', {...selectedPlace, googlePlace})
+    },
+    onKeydownEnter(event) {
+      event.preventDefault();
+      this.$emit('onKeydownEnter');
     }
   }
 }

package/src/components/VcTooltip/VcTooltip.stories.js

@@ -18,6 +18,7 @@ const baseProps = {
     disabled: false,
     dataQa: 'VcTooltip',
     defaultSlot: `<v-icon>$info</v-icon>`,
+    closeDelay: 0,
 };
 
 const GeneralTemplate = (args, {argTypes}) => ({
@@ -41,7 +42,8 @@ const GeneralTemplate = (args, {argTypes}) => ({
             :flavor="flavor"
             :dark="dark"
             :disabled="disabled"
-            :data-qa="dataQa">
+            :data-qa="dataQa"
+            :close-delay="closeDelay">
           <template>
             ${args.defaultSlot}
           </template>

package/src/components/VcTooltip/VcTooltip.vue

@@ -9,7 +9,8 @@
         :nudge-left="nudgeLeft"
         :nudge-right="nudgeRight"
         :disabled="disabled"
-        :data-qa="dataQa">
+        :data-qa="dataQa"
+        :close-delay="closeDelay">
 
       <template v-slot:activator="{ on, attrs }">
         <span v-bind="attrs"
@@ -97,6 +98,10 @@ export default {
       type: String,
       default: 'vc-tooltip'
     },
+    closeDelay: {
+      type: Number,
+      default: 0
+    },
   },
   computed: {
     enableHeader() {

package/src/components/index.js

@@ -70,3 +70,7 @@ export {default as VcGalleryItem} from './VcGalleryItem/VcGalleryItem.vue';
 export {default as VcGalleryList} from './VcGalleryList/VcGalleryList.vue';
 export {default as VcBreadcrumbs} from './VcBreadcrumbs/VcBreadcrumbs.vue';
 export {default as VcPageHeader} from './page/elements/VcPageHeader.vue';
+export {default as VcMenu} from './VcMenu/VcMenu.vue';
+export {default as VcDropdown} from './VcMenu/VcDropdown.vue';
+export {default as VcGroupedItems} from './VcGroupedItems/VcGroupedItems.vue';
+export {default as VcColorPicker} from './VcColorPicker/VcColorPicker.vue';

package/src/components/list/VcBaseListItem/VcBaseListItem.stories.js

@@ -1,5 +1,5 @@
 import VcBaseListItem from './VcBaseListItem';
-import {VcCheckbox} from '@/components/index';
+import {VcCheckbox, VcLayout} from '@/components/index';
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 
 const params = {
@@ -9,7 +9,7 @@ const params = {
 }
 
 const Template = (args, {argTypes}) => ({
-    components: {VcBaseListItem: VcBaseListItem, VcCheckbox},
+    components: {VcBaseListItem: VcBaseListItem, VcCheckbox, VcLayout},
     props: Object.keys(argTypes),
     data: () => ({
         avatar: {
@@ -32,21 +32,27 @@ const Template = (args, {argTypes}) => ({
                       :selected="selected"
                       :data-qa="dataQa"
                       @click="onClick">
-        <template>
-          <VcCheckbox :avatar="avatar"
-                      :label="avatar.name"
-                      :checked="selected"
-                      :disabled="disabled"
-                      style="padding: 0; margin: 0; flex: 1 1 auto"/>
-        </template>
+          ${args.default}
       </VcBaseListItem>
       </div>`,
 })
 
+export const Playground = Template.bind({});
+Playground.args = {
+    ...params,
+    default: `<VcLayout align-center justify-center
+                  :style="{ minHeight: '25px', backgroundColor: 'var(--green-lighten-2)', padding: '12px'}">
+          Your content goes here
+        </VcLayout>`,
+}
+
 export const WithCheckbox = Template.bind({});
 
 // Set default values
-WithCheckbox.args = params
+WithCheckbox.args = {
+    ...params,
+    default: `<VcCheckbox :avatar='avatar' :label='avatar.name' :checked='selected' :disabled='disabled' style='padding: 0; margin: 0; flex: 1 1 auto'/>`,
+}
 
 const labelTemplate = (args, {argTypes}) => ({
     components: {VcBaseListItem: VcBaseListItem},
@@ -66,7 +72,7 @@ const labelTemplate = (args, {argTypes}) => ({
                       :selected="selected"
                       :data-qa="dataQa"
                       @click="onClick">
-          <span>List item content in slot</span>
+        ${args.default}
       </VcBaseListItem>
       </div>`,
 })
@@ -74,7 +80,10 @@ const labelTemplate = (args, {argTypes}) => ({
 export const WithLabel = labelTemplate.bind({});
 
 // Set default values
-WithLabel.args = params
+WithLabel.args = {
+    ...params,
+    default: `<span>List item content in slot</span>`
+}
 
 export default {
     title: 'containers / list / VcBaseListItem', // This will control the story sidebar position
@@ -89,7 +98,7 @@ export default {
     parameters: {
         design: {
             type: 'figma',
-            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=7293%3A70645',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=164%3A8728',
         },
         status: {
             type: 'releaseCandidate', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'

package/src/components/list/VcBaseListItem/VcBaseListItem.vue

@@ -15,6 +15,9 @@ export default {
     prop: 'selected',
   },
   props: {
+    /**
+     * The effect of this class can be seen when the items is in selected mode
+     */
     selectedClass: {
       type: String,
       default: 'multiple',
@@ -55,7 +58,7 @@ export default {
 <style lang="scss" scoped>
 
 .vc-base-list-item {
-  padding: var(--size-value4) var(--size-value0);
+  padding: var(--size-value4);
   cursor: pointer;
   transition: background 0.8s;
 

package/src/components/list/VcList/VcList.stories.js

@@ -2,12 +2,155 @@ import VcList from './VcList';
 import {VcCheckbox, VcIcon} from '@/components/index';
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 
+const checkboxItems = [
+    {
+        disabled: true,
+        avatar:
+            {
+                name: 'Person One',
+                path: require('@/stories/assets/pics/avatar4.png'),
+            },
+        identifier: 0
+    },
+    {
+        disabled: true,
+        avatar: {
+            name: 'Person Two',
+            path: require('@/stories/assets/pics/avatar2.png'),
+        },
+        identifier: 1
+    },
+    {
+        selected: true,
+        avatar: {
+            name: 'Person Three',
+            path: require('@/stories/assets/pics/avatar1.png'),
+        },
+        identifier: 2
+    },
+    {
+        selected: true,
+        avatar: {
+            name: 'Person Four',
+            colorId: 3,
+        },
+        identifier: 3
+    },
+    {
+        avatar: {
+            name: 'Person Five',
+            colorId: 4,
+        },
+        identifier: 4
+    },
+    {
+        avatar: {
+            name: 'Person Six',
+            path: require('@/stories/assets/pics/avatar2.png'),
+        },
+        identifier: 5
+    },
+    {
+        avatar: {
+            name: 'Person Seven',
+            colorId: 6,
+        },
+        identifier: 6
+    },
+    {
+        avatar: {
+            name: 'Person Eight',
+            colorId: 7,
+        },
+        identifier: 7
+    },
+    {
+        avatar: {
+            name: 'Person Nine',
+            colorId: 8,
+        },
+        identifier: 8
+    },
+    {
+        avatar: {
+            name: 'Person Ten',
+            path: require('@/stories/assets/pics/avatar3.png'),
+        },
+        identifier: 9
+    },
+    {
+        avatar: {
+            name: 'Person Eleven',
+            colorId: 10,
+        },
+        identifier: 10
+    },
+    {
+        avatar: {
+            name: 'Person Twelve',
+            colorId: 11,
+        },
+        identifier: 11
+    },
+    {
+        avatar: {
+            name: 'Person Thirteen',
+            colorId: 12,
+        },
+        identifier: 12
+    },
+    {
+        avatar: {
+            name: 'Person Fourteen',
+            colorId: 14,
+        },
+        identifier: 14
+    },
+    {
+        avatar: {
+            name: 'Person Fifteen',
+            colorId: 13,
+        },
+        identifier: 13
+    },
+    {
+        avatar: {
+            name: 'Person Sixteen',
+            colorId: 15,
+        },
+        identifier: 15
+    },
+    {
+        avatar: {
+            name: 'Person Seventeen',
+            colorId: 16,
+        },
+        identifier: 16
+    },
+    {
+        avatar: {
+            name: 'Person Eighteen',
+            colorId: 17,
+        },
+        identifier: 17
+    },
+    {
+        avatar: {
+            name: 'Person Nineteen',
+            colorId: 18,
+        },
+        identifier: 18
+    }
+];
+
+
 const baseProps = {
     emptyListTitle: 'No result found',
     emptyListMsg: 'We can’t find any item matching your search',
     imagePath: require('@/stories/assets/pics/avatar1.png'),
     multiple: false,
     dataQa: 'vc-list',
+    items : checkboxItems.slice(0, 5),
 }
 
 const Template = (args, {argTypes}) => ({
@@ -46,148 +189,109 @@ MultipleWithCheckbox.args = {
                       :disabled="item.disabled"
                       show-border="false"
                       style="padding: 0; margin: 0; flex: 1 1 auto"/>`,
-    items: [
-        {
-            disabled: true,
-            avatar:
-                {
-                    name: 'Person One',
-                    path: require('@/stories/assets/pics/avatar4.png'),
-                },
-            identifier: 0
-        },
-        {
-            disabled: true,
-            avatar: {
-                name: 'Person Two',
-                path: require('@/stories/assets/pics/avatar2.png'),
-            },
-            identifier: 1
-        },
-        {
-            selected: true,
-            avatar: {
-                name: 'Person Three',
-                path: require('@/stories/assets/pics/avatar1.png'),
-            },
-            identifier: 2
-        },
-        {
-            selected: true,
-            avatar: {
-                name: 'Person Four',
-                colorId: 3,
-            },
-            identifier: 3
-        },
-        {
-            avatar: {
-                name: 'Person Five',
-                colorId: 4,
-            },
-            identifier: 4
-        },
-        {
-            avatar: {
-                name: 'Person Six',
-                path: require('@/stories/assets/pics/avatar2.png'),
-            },
-            identifier: 5
-        },
-        {
-            avatar: {
-                name: 'Person Seven',
-                colorId: 6,
-            },
-            identifier: 6
-        },
-        {
-            avatar: {
-                name: 'Person Eight',
-                colorId: 7,
-            },
-            identifier: 7
-        },
-        {
-            avatar: {
-                name: 'Person Nine',
-                colorId: 8,
-            },
-            identifier: 8
-        },
-        {
-            avatar: {
-                name: 'Person Ten',
-                path: require('@/stories/assets/pics/avatar3.png'),
-            },
-            identifier: 9
-        },
-        {
-            avatar: {
-                name: 'Person Eleven',
-                colorId: 10,
-            },
-            identifier: 10
-        },
-        {
-            avatar: {
-                name: 'Person Twelve',
-                colorId: 11,
-            },
-            identifier: 11
-        },
-        {
-            avatar: {
-                name: 'Person Thirteen',
-                colorId: 12,
-            },
-            identifier: 12
-        },
-        {
-            avatar: {
-                name: 'Person Fourteen',
-                colorId: 14,
-            },
-            identifier: 14
-        },
-        {
-            avatar: {
-                name: 'Person Fifteen',
-                colorId: 13,
-            },
-            identifier: 13
-        },
-        {
-            avatar: {
-                name: 'Person Sixteen',
-                colorId: 15,
-            },
-            identifier: 15
-        },
-        {
-            avatar: {
-                name: 'Person Seventeen',
-                colorId: 16,
-            },
-            identifier: 16
-        },
-        {
-            avatar: {
-                name: 'Person Eighteen',
-                colorId: 17,
-            },
-            identifier: 17
-        },
-        {
-            avatar: {
-                name: 'Person Nineteen',
-                colorId: 18,
-            },
-            identifier: 18
-        }
-    ],
 }
 
+const iconItems = [
+    {
+        disabled: true,
+        icon: 'flag',
+        label: '(GMT-10:00) America/Adak',
+        identifier: 0
+    },
+    {
+        disabled: true,
+        icon: 'customer',
+        label: '(GMT-09:00) Alaska',
+        identifier: 1
+    },
+    {
+        selected: true,
+        icon: 'inactive',
+        label: '(GMT-07:00) Arizona',
+        identifier: 2
+    },
+    {
+        icon: 'vip',
+        label: '(GMT-06:00) Central Time (US & Canada)',
+        identifier: 3
+    },
+    {
+        icon: 'success',
+        label: '(GMT-05:00) Eastern Time (US & Canada)',
+        identifier: 4
+    },
+    {
+        icon: 'close_button',
+        label: '(GMT-12:00) International Date Line West',
+        identifier: 5
+    },
+    {
+        icon: 'plus',
+        label: '(GMT-11:00) American Samoa',
+        identifier: 6
+    },
+    {
+        icon: 'arrow_right',
+        label: '(GMT-08:00) Tijuana',
+        identifier: 7
+    },
+    {
+        icon: 'warning',
+        label: '(GMT-07:00) Chihuahua',
+        identifier: 8
+    },
+    {
+        icon: 'warning_fill',
+        label: '(GMT-06:00) Mexico City',
+        identifier: 9
+    },
+    {
+        icon: 'check_button',
+        label: '(GMT-05:00) Lima',
+        identifier: 10
+    },
+    {
+        icon: 'check_circle',
+        label: '(GMT-04:00) La Paz',
+        identifier: 11
+    },
+    {
+        icon: 'check_fill',
+        label: '(GMT-03:00) Greenland',
+        identifier: 12
+    },
+    {
+        icon: 'info',
+        label: '(GMT-02:00) Mid-Atlantic',
+        identifier: 14
+    },
+    {
+        icon: 'information',
+        label: '(GMT-01:00) Cape Verde Is.',
+        identifier: 13
+    },
+    {
+        icon: 'info_fill',
+        label: '(GMT+00:00) London',
+        identifier: 15
+    },
+    {
+        icon: 'error',
+        label: '(GMT+01:00) Berlin',
+        identifier: 16
+    },
+    {
+        icon: 'question',
+        label: '(GMT+02:00) Jerusalem',
+        identifier: 17
+    },
+    {
+        icon: 'attention',
+        label: '(GMT+02:00) Sofia',
+        identifier: 18
+    }
+];
+
 export const SingleIconAndText = Template.bind({});
 
 // Set default values
@@ -195,106 +299,7 @@ SingleIconAndText.args = {
     ...baseProps,
     slotContent: `<VcIcon small style="margin-inline-end: 12px">{{ '$' + item.icon }}</VcIcon>
           <span>{{ item.label }}</span>`,
-    items: [
-        {
-            disabled: true,
-            icon: 'flag',
-            label: '(GMT-10:00) America/Adak',
-            identifier: 0
-        },
-        {
-            disabled: true,
-            icon: 'customer',
-            label: '(GMT-09:00) Alaska',
-            identifier: 1
-        },
-        {
-            selected: true,
-            icon: 'inactive',
-            label: '(GMT-07:00) Arizona',
-            identifier: 2
-        },
-        {
-            icon: 'vip',
-            label: '(GMT-06:00) Central Time (US & Canada)',
-            identifier: 3
-        },
-        {
-            icon: 'success',
-            label: '(GMT-05:00) Eastern Time (US & Canada)',
-            identifier: 4
-        },
-        {
-            icon: 'close_button',
-            label: '(GMT-12:00) International Date Line West',
-            identifier: 5
-        },
-        {
-            icon: 'plus',
-            label: '(GMT-11:00) American Samoa',
-            identifier: 6
-        },
-        {
-            icon: 'arrow_right',
-            label: '(GMT-08:00) Tijuana',
-            identifier: 7
-        },
-        {
-            icon: 'warning',
-            label: '(GMT-07:00) Chihuahua',
-            identifier: 8
-        },
-        {
-            icon: 'warning_fill',
-            label: '(GMT-06:00) Mexico City',
-            identifier: 9
-        },
-        {
-            icon: 'check_button',
-            label: '(GMT-05:00) Lima',
-            identifier: 10
-        },
-        {
-            icon: 'check_circle',
-            label: '(GMT-04:00) La Paz',
-            identifier: 11
-        },
-        {
-            icon: 'check_fill',
-            label: '(GMT-03:00) Greenland',
-            identifier: 12
-        },
-        {
-            icon: 'info',
-            label: '(GMT-02:00) Mid-Atlantic',
-            identifier: 14
-        },
-        {
-            icon: 'information',
-            label: '(GMT-01:00) Cape Verde Is.',
-            identifier: 13
-        },
-        {
-            icon: 'info_fill',
-            label: '(GMT+00:00) London',
-            identifier: 15
-        },
-        {
-            icon: 'error',
-            label: '(GMT+01:00) Berlin',
-            identifier: 16
-        },
-        {
-            icon: 'question',
-            label: '(GMT+02:00) Jerusalem',
-            identifier: 17
-        },
-        {
-            icon: 'attention',
-            label: '(GMT+02:00) Sofia',
-            identifier: 18
-        }
-    ]
+    items: iconItems.slice(0, 5),
 }
 
 export default {