@weni/unnnic-system 2.0.0 → 2.0.2

package/src/stories/SelectSmart.stories.js

@@ -1,137 +1,164 @@
 import unnnicSelectSmart from '../components/SelectSmart/SelectSmart.vue';
 
 export default {
-  title: 'select/SelectSmart',
+  title: 'Select/SelectSmart',
   component: unnnicSelectSmart,
-  argTypes: {
-    size: { control: { type: 'select', options: ['md', 'sm'] } },
-    type: { control: { type: 'select', options: ['normal', 'error'] } },
-    orderedByIndex: { control: { type: 'boolean' } },
-    autocomplete: { control: { type: 'boolean' } },
-    autocompleteIconLeft: { control: { type: 'boolean' } },
-    autocompleteClearOnFocus: { control: { type: 'boolean' } },
-  },
+  argTypes: {},
+  render: (args) => ({
+    components: {
+      unnnicSelectSmart,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        exampleValue: [],
+      };
+    },
+    template: `
+      <unnnicSelectSmart v-bind="args" v-model="exampleValue"/>
+    `,
+  }),
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicSelectSmart },
-  data() {
-    return {
-      exampleValue: '',
-    };
+export const Default = {
+  args: {
+    options: [
+      { value: '', label: 'Select some option' },
+      { value: '5', label: 'Option 5' },
+      { value: '3', label: 'Option 3' },
+      { value: '1', label: 'Option 1' },
+      { value: '4', label: 'Option 4' },
+      { value: '2', label: 'Option 2' },
+      { value: '6', label: 'Option 6' },
+      { value: '7', label: 'Option 7' },
+    ],
   },
-
-  methods: {
-    addDynamicOption() {
-      const value = Math.floor(Math.random() * 1e3);
-
-      this.exampleOptions.push({
-        value: `option${value}`,
-        label: `Option ${value}`,
-      });
-    },
-  },
-
-  template: `
-    <div>
-      <unnnic-select-smart
-        v-model="exampleValue"
-        :options="exampleOptions"
-        v-bind="$props"
-      />
-
-      <button v-if="!(disabled || autocomplete)" @click="addDynamicOption">Add dynamic option</button>
-    </div>
-  `,
-});
-
-const exampleOptionsDefault = [
-  { value: '', label: 'Select some option' },
-  { value: '5', label: 'Option 5' },
-  { value: '3', label: 'Option 3' },
-  { value: '1', label: 'Option 1' },
-  { value: '4', label: 'Option 4' },
-  { value: '2', label: 'Option 2' },
-];
-
-const exampleOptionsWithDescriptions = [
-  { value: '', label: 'Select some option' },
-  { value: '1', label: 'Option 1', description: 'This is the first option' },
-  { value: '2', label: 'Option 2', description: 'Another alternative you can consider' },
-  { value: '3', label: 'Option 3', description: 'A third option for your consideration' },
-  { value: '4', label: 'Option 4', description: 'Yet another choice among the options' },
-  { value: '5', label: 'Option 5', description: 'The last option available for selection' },
-];
-
-const exampleOptionsCountries = [
-  { value: '', label: 'Select some option' },
-  { value: 'united_states', label: 'Estados Unidos' },
-  { value: 'brazil', label: 'Brasil' },
-  { value: 'china', label: 'China' },
-  { value: 'india', label: 'Índia' },
-  { value: 'russia', label: 'Rússia' },
-  { value: 'japan', label: 'Japão' },
-  { value: 'germany', label: 'Alemanha' },
-  { value: 'france', label: 'França' },
-  { value: 'canada', label: 'Canadá' },
-  { value: 'australia', label: 'Austrália' },
-  { value: 'south_korea', label: 'Coreia do Sul' },
-  { value: 'mexico', label: 'México' },
-  { value: 'egypt', label: 'Egito' },
-  { value: 'south_africa', label: 'África do Sul' },
-  { value: 'turkey', label: 'Turquia' },
-  { value: 'nigeria', label: 'Nigéria' },
-  { value: 'argentina', label: 'Argentina' },
-  { value: 'italy', label: 'Itália' },
-  { value: 'spain', label: 'Espanha' },
-  { value: 'saudi_arabia', label: 'Arábia Saudita' },
-];
-
-const exampleOptionsFirstSelected = [
-  { value: '1', label: 'Option 1' },
-  { value: '2', label: 'Option 2' },
-  { value: '3', label: 'Option 3' },
-  { value: '4', label: 'Option 4' },
-  { value: '5', label: 'Option 5' },
-  { value: '5', label: 'Option 5' },
-];
-
-export const Default = Template.bind({});
-Default.args = {
-  exampleOptions: exampleOptionsDefault,
 };
 
-export const FirstSelected = Template.bind({});
-FirstSelected.args = {
-  exampleOptions: exampleOptionsFirstSelected,
+export const FirstSelected = {
+  args: {
+    options: [
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+      { value: '3', label: 'Option 3' },
+      { value: '4', label: 'Option 4' },
+      { value: '5', label: 'Option 5' },
+    ],
+  },
 };
 
-export const OrderedByIndex = Template.bind({});
-OrderedByIndex.args = {
-  exampleOptions: exampleOptionsDefault,
-  orderedByIndex: true,
+export const OrderedByIndex = {
+  args: {
+    options: [
+      { value: '5', label: 'Option 5' },
+      { value: '3', label: 'Option 3' },
+      { value: '1', label: 'Option 1' },
+      { value: '4', label: 'Option 4' },
+      { value: '2', label: 'Option 2' },
+    ],
+    orderedByIndex: true,
+  },
 };
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
+export const Disabled = {
+  args: {
+    options: [{ value: '', label: 'Select some option' }],
+    disabled: true,
+  },
 };
 
-export const WithDescriptions = Template.bind({});
-WithDescriptions.args = {
-  exampleOptions: exampleOptionsWithDescriptions,
+export const WithDescriptions = {
+  args: {
+    options: [
+      { value: '', label: 'Select some option' },
+      {
+        value: '1',
+        label: 'Option 1',
+        description: 'This is the first option',
+      },
+      {
+        value: '2',
+        label: 'Option 2',
+        description: 'Another alternative you can consider',
+      },
+      {
+        value: '3',
+        label: 'Option 3',
+        description: 'A third option for your consideration',
+      },
+      {
+        value: '4',
+        label: 'Option 4',
+        description: 'Yet another choice among the options',
+      },
+      {
+        value: '5',
+        label: 'Option 5',
+        description: 'The last option available for selection',
+      },
+    ],
+  },
 };
 
-export const Autocomplete = Template.bind({});
-Autocomplete.args = {
-  exampleOptions: exampleOptionsCountries,
-  autocomplete: true,
+export const Autocomplete = {
+  args: {
+    options: [
+      { value: '', label: 'Select some option' },
+      { value: 'united_states', label: 'Estados Unidos' },
+      { value: 'brazil', label: 'Brasil' },
+      { value: 'china', label: 'China' },
+      { value: 'india', label: 'Índia' },
+      { value: 'russia', label: 'Rússia' },
+      { value: 'japan', label: 'Japão' },
+      { value: 'germany', label: 'Alemanha' },
+      { value: 'france', label: 'França' },
+      { value: 'canada', label: 'Canadá' },
+      { value: 'australia', label: 'Austrália' },
+      { value: 'south_korea', label: 'Coreia do Sul' },
+      { value: 'mexico', label: 'México' },
+      { value: 'egypt', label: 'Egito' },
+      { value: 'south_africa', label: 'África do Sul' },
+      { value: 'turkey', label: 'Turquia' },
+      { value: 'nigeria', label: 'Nigéria' },
+      { value: 'argentina', label: 'Argentina' },
+      { value: 'italy', label: 'Itália' },
+      { value: 'spain', label: 'Espanha' },
+      { value: 'saudi_arabia', label: 'Arábia Saudita' },
+    ],
+    autocomplete: true,
+    autocompleteClearOnFocus: true,
+    autocompleteIconLeft: true,
+  },
 };
 
-export const Multiple = Template.bind({});
-Multiple.args = {
-  exampleOptions: exampleOptionsCountries,
-  autocomplete: true,
-  multiple: true,
+export const Multiple = {
+  args: {
+    options: [
+      { value: '', label: 'Select some countries' },
+      { value: 'united_states', label: 'Estados Unidos' },
+      { value: 'brazil', label: 'Brasil' },
+      { value: 'china', label: 'China' },
+      { value: 'india', label: 'Índia' },
+      { value: 'russia', label: 'Rússia' },
+      { value: 'japan', label: 'Japão' },
+      { value: 'germany', label: 'Alemanha' },
+      { value: 'france', label: 'França' },
+      { value: 'canada', label: 'Canadá' },
+      { value: 'australia', label: 'Austrália' },
+      { value: 'south_korea', label: 'Coreia do Sul' },
+      { value: 'mexico', label: 'México' },
+      { value: 'egypt', label: 'Egito' },
+      { value: 'south_africa', label: 'África do Sul' },
+      { value: 'turkey', label: 'Turquia' },
+      { value: 'nigeria', label: 'Nigéria' },
+      { value: 'argentina', label: 'Argentina' },
+      { value: 'italy', label: 'Itália' },
+      { value: 'spain', label: 'Espanha' },
+      { value: 'saudi_arabia', label: 'Arábia Saudita' },
+    ],
+    multiple: true,
+    multipleWithoutSelectsMessage: 'No country selected yet :(',
+  },
 };

package/src/stories/Sidebar.stories.js

@@ -8,14 +8,15 @@ export default {
   title: 'Example/Sidebar',
   component: unnnicSidebar,
   argTypes: {
-    expanded: { control: { type: 'select', options: [true, false] } },
+    expanded: { control: { type: 'boolean' } },
   },
 };
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { unnnicSidebar, unnnicSidebarItem, unnnicSidebarMenu },
-  template: '<unnnic-sidebar v-bind="$props"> \
+  template:
+    '<unnnic-sidebar v-bind="$props"> \
                 <p slot="header"> Title </p> \
                 <unnnic-sidebar-item icon="expand-8-1" text="footer" slot="footer" /> \
                 <unnnic-sidebar-menu text="Submenu"> \

package/src/stories/SidebarPrimary.stories.js

@@ -40,44 +40,58 @@ Normal.args = {
   expanded: true,
   language: 'pt-br',
   hideText: 'Encolher',
-  items: [{
-    label: 'Menu principal',
-    items: [{
-      label: 'Início',
-      active: true,
-      icon: 'house-1-1',
-      // eslint-disable-next-line no-param-reassign
-      click(option) { option.active = !option.active; },
-    }],
-  }, {
-    label: 'Sistemas',
-    items: [{
-      id: 'flows',
-      label: 'Fluxos',
-      active: false,
-      icon: 'hierarchy-3-2',
-      click() {},
-    }, {
-      id: 'ia',
-      label: 'Inteligência Artificial',
-      active: false,
-      icon: 'science-fiction-robot-2',
-      click() {},
-    }, {
-      id: 'chats',
-      label: 'Agentes',
-      active: false,
-      icon: 'messaging-we-chat-3',
-      click() {},
-      notify: true,
-    }],
-  }, {
-    label: 'Perfil',
-    items: [{
-      label: 'Conta',
-      active: false,
-      icon: 'single-neutral-actions-1',
-      click() {},
-    }],
-  }],
+  items: [
+    {
+      label: 'Menu principal',
+      items: [
+        {
+          label: 'Início',
+          active: true,
+          icon: 'house-1-1',
+          // eslint-disable-next-line no-param-reassign
+          click(option) {
+            option.active = !option.active;
+          },
+        },
+      ],
+    },
+    {
+      label: 'Sistemas',
+      items: [
+        {
+          id: 'flows',
+          label: 'Fluxos',
+          active: false,
+          icon: 'hierarchy-3-2',
+          click() {},
+        },
+        {
+          id: 'ia',
+          label: 'Inteligência Artificial',
+          active: false,
+          icon: 'science-fiction-robot-2',
+          click() {},
+        },
+        {
+          id: 'chats',
+          label: 'Agentes',
+          active: false,
+          icon: 'messaging-we-chat-3',
+          click() {},
+          notify: true,
+        },
+      ],
+    },
+    {
+      label: 'Perfil',
+      items: [
+        {
+          label: 'Conta',
+          active: false,
+          icon: 'single-neutral-actions-1',
+          click() {},
+        },
+      ],
+    },
+  ],
 };

package/src/stories/SkeletonLoading.stories.js

@@ -6,6 +6,11 @@ export default {
   argTypes: {
     width: { control: { type: 'text' } },
     height: { control: { type: 'text' } },
+    loading: { control: { type: 'boolean' } },
+    prefix: { control: { type: 'text' } },
+    tag: { control: { type: 'text' } },
+    circle: { control: { type: 'boolean' } },
+    duration: { control: { type: 'number' } },
   },
 };
 
@@ -21,14 +26,20 @@ const Template = (args, { argTypes }) => ({
   },
   template: `
     <div>
-    <h3>Default</h3>
-      <unnnic-skeletonLoading  v-bind="$props" />
+      <h3>Default</h3>
+      <unnnic-skeleton-loading  v-bind="$props" />
     </div>
   `,
 });
 
 export const Default = Template.bind({});
 Default.args = {
-  width: '1024px',
-  height: '300px',
+  width: '500px',
+  height: '200px',
+  prefix: 'unnnic',
+  tag: 'span',
+  duration: 1.5,
+  count: 1,
+  circle: false,
+  loading: true,
 };

package/src/stories/Slider.stories.js

@@ -3,19 +3,17 @@ import unnnicSlider from '../components/Slider/Slider.vue';
 export default {
   title: 'Form/Slider',
   component: unnnicSlider,
-  argTypes: {
-    size: { control: { type: 'select', options: ['small', 'medium'] } },
-    textLeft: { control: { type: 'text' } },
-    textRight: { control: { type: 'text' } },
-    disabled: { control: { type: 'boolean' } },
-  },
 };
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { unnnicSlider },
-  template:
-    '<unnnicSlider v-bind="$props"/>',
+  template: '<unnnicSlider v-bind="$props" @valueChange="onChange"/>',
+  methods: {
+    onChange: (value) => {
+      console.log(value);
+    },
+  },
 });
 
 export const Default = Template.bind({});

package/src/stories/StarRating.stories.js

@@ -3,7 +3,9 @@ import unnnicStarRating from '../components/StarRating/StarRating.vue';
 export default {
   title: 'Rating/StarRating',
   component: unnnicStarRating,
-  argTypes: {},
+  argTypes: {
+    value: { control: { type: 'number', min: 0, max: 5, step: 0.1 } },
+  },
 };
 
 const Template = (args, { argTypes }) => ({
@@ -13,16 +15,10 @@ const Template = (args, { argTypes }) => ({
     unnnicStarRating,
   },
 
-  data() {
-    return {
-      rating: 3.6,
-    };
-  },
-
   template: `
     <div>
-      <!--<pre>v-model: {{ rating }}</pre>-->
-      <unnnic-star-rating v-bind="$props" v-model="rating">
+      <pre>v-model: {{ value }}</pre>
+      <unnnic-star-rating v-bind="$props">
       </unnnic-star-rating>
     </div>
   `,
@@ -33,6 +29,7 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 
 Default.args = {
+  value: 3.6,
   showValue: true,
   readonly: true,
 };

package/src/stories/Switch.stories.js

@@ -19,7 +19,8 @@ const Template = (args, { argTypes }) => ({
       val: true,
     };
   },
-  template: '<div><unnnicSwitch v-bind="$props" v-model="val"/> <div>{{val}}</div></div>',
+  template:
+    '<div><unnnicSwitch v-bind="$props" v-model="val"/> <div>{{val}}</div></div>',
 });
 
 export const Default = Template.bind({});

package/src/stories/Table.stories.js

@@ -27,7 +27,7 @@ const Template = (args, { argTypes }) => ({
         <template v-slot:header>
           <unnnic-table-row :headers="table.headers">
             <template v-slot:checkarea>
-              <unnnic-checkbox :value="generalValue" @change="changeGeneralCheckbox" :style="{margin: '4px'}"/>
+              <unnnic-checkbox :modelValue="generalValue" @change="changeGeneralCheckbox" :style="{margin: '4px'}"/>
             </template>
           </unnnic-table-row>
         </template>

package/src/stories/TabsExpanded.stories.js

@@ -3,7 +3,12 @@ import UnnnicTabsExpanded from '../components/TabsExpanded/TabsExpanded.vue';
 export default {
   title: 'tabs/TabsExpanded',
   component: UnnnicTabsExpanded,
-  argTypes: {},
+  argTypes: {
+    'on-update:model-value': { action: '@update:model-value' },
+    'on-back': { action: '@back' },
+    'on-add': { action: '@add' },
+    'on-close-tab': { action: '@close-tab' },
+  },
 };
 
 const Template = (args, { argTypes }) => ({
@@ -32,37 +37,35 @@ const Template = (args, { argTypes }) => ({
 
       this.v = this.lItems[index]?.value || this.lItems[index - 1]?.value;
     },
-
-    lBack() {
-      console.log('clicked back');
-    },
-
-    lAdd() {
-      console.log('clicked add');
-    },
   },
 
-  template: '<div><pre>v-model: {{ v }}</pre><unnnic-tabs-expanded v-model="v" @close-tab="lCloseTab" @back="lBack" @add="lAdd" v-bind="$props"></unnnic-tabs-expanded></div>',
+  template:
+    '<div><pre>v-model: {{ v }}</pre><unnnic-tabs-expanded  v-bind="$props" v-model="v" @close-tab="lCloseTab"></unnnic-tabs-expanded></div>',
 });
 
 export const Default = Template.bind({});
 
 Default.args = {
-  items: [{
-    title: 'Suporte',
-    description: 'Última edição há 5 minutos',
-    value: 'uuid1',
-  }, {
-    title: 'Boas vindas',
-    description: 'Última edição agora há pouco',
-    value: 'uuid2',
-  }, {
-    title: 'Atendimento',
-    description: 'Última edição em 4 de janeiro',
-    value: 'uuid3',
-  }, {
-    title: 'Texto grande texto grande texto grande',
-    description: 'Texto grande texto grande texto grande',
-    value: 'uuid4',
-  }],
+  items: [
+    {
+      title: 'Suporte',
+      description: 'Última edição há 5 minutos',
+      value: 'uuid1',
+    },
+    {
+      title: 'Boas vindas',
+      description: 'Última edição agora há pouco',
+      value: 'uuid2',
+    },
+    {
+      title: 'Atendimento',
+      description: 'Última edição em 4 de janeiro',
+      value: 'uuid3',
+    },
+    {
+      title: 'Texto grande texto grande texto grande',
+      description: 'Texto grande texto grande texto grande',
+      value: 'uuid4',
+    },
+  ],
 };

package/src/stories/Tag.stories.js

@@ -6,7 +6,9 @@ export default {
   component: unnnicTag,
   argTypes: {
     text: { control: { type: 'text' } },
-    type: { control: { type: 'select', options: ['default', 'indicator', 'brand'] } },
+    type: {
+      control: { type: 'select', options: ['default', 'indicator', 'brand'] },
+    },
     scheme: {
       control: {
         type: 'select',
@@ -16,31 +18,28 @@ export default {
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicTag },
-  template: '<unnnic-tag v-bind="$props"/>',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  text: 'Label',
-  type: 'default',
+export const Default = {
+  args: {
+    text: 'Label',
+    type: 'default',
+  },
 };
 
-export const Indicator = Template.bind({});
-Indicator.args = {
-  text: 'Tag Name',
-  type: 'indicator',
-  count: 100,
-  clickable: true,
-  hasBackButton: false,
-  enableTooltip: true,
-  tooltipText: 'This is the amount',
+export const Indicator = {
+  args: {
+    text: 'Tag Name',
+    type: 'indicator',
+    count: 100,
+    clickable: true,
+    hasBackButton: false,
+    enableTooltip: true,
+    tooltipText: 'This is the amount',
+  },
 };
 
-export const Brand = Template.bind({});
-Brand.args = {
-  text: 'Settings',
-  type: 'brand',
+export const Brand = {
+  args: {
+    text: 'Settings',
+    type: 'brand',
+  },
 };