@sula-tech/webcomponents 0.11.0 → 0.11.2

package/dist/collection/components/sula-dropdown/sula-dropdown.stories.js

@@ -42,6 +42,14 @@ export default {
                 required: false,
             },
         },
+        menuMaxHeight: {
+            control: 'number',
+            defaultValue: 260,
+            description: 'Altura máxima do menu em pixels (afeta o cálculo de auto-posicionamento)',
+            type: {
+                required: false,
+            },
+        },
         dropdownClicked: {
             action: 'dropdownClicked',
             description: 'Evento emitido quando o dropdown é clicado',
@@ -77,6 +85,8 @@ const Template = args => {
     el.setAttribute('disabled', args.disabled.toString());
     if (args.searchable)
         el.setAttribute('searchable', args.searchable.toString());
+    if (args.menuMaxHeight)
+        el.setAttribute('menu-max-height', args.menuMaxHeight.toString());
     if (args.items && args.items.length > 0) {
         el.items = args.items;
     }
@@ -205,4 +215,88 @@ SearchableWithSelectedValue.args = {
     ],
     value: { id: '1', title: 'Brasil' },
 };
+const AutoPositioningTemplate = args => {
+    const container = document.createElement('div');
+    container.style.display = 'flex';
+    container.style.gap = '2rem';
+    container.style.margin = '20px';
+    container.style.marginTop = '100px';
+    container.style.marginBottom = '1000px';
+    // Dropdown padrão
+    const defaultWrapper = document.createElement('div');
+    defaultWrapper.style.width = '300px';
+    const defaultTitle = document.createElement('h4');
+    defaultTitle.textContent = 'Padrão (260px)';
+    defaultTitle.style.marginBottom = '8px';
+    defaultTitle.style.fontSize = '14px';
+    defaultTitle.style.fontWeight = 'bold';
+    const defaultDesc = document.createElement('p');
+    defaultDesc.textContent = 'Abre para cima quando há < 320px abaixo';
+    defaultDesc.style.fontSize = '12px';
+    defaultDesc.style.color = '#666';
+    defaultDesc.style.marginBottom = '8px';
+    const defaultDropdown = document.createElement('sula-dropdown');
+    defaultDropdown.setAttribute('label', 'Dropdown Padrão');
+    defaultDropdown.setAttribute('searchable', 'true');
+    defaultDropdown.items = args.items;
+    defaultDropdown.addEventListener('menuItemSelected', args.menuItemSelected);
+    defaultWrapper.appendChild(defaultTitle);
+    defaultWrapper.appendChild(defaultDesc);
+    defaultWrapper.appendChild(defaultDropdown);
+    // Dropdown custom
+    const customWrapper = document.createElement('div');
+    customWrapper.style.width = '300px';
+    const customTitle = document.createElement('h4');
+    customTitle.textContent = 'Custom (600px)';
+    customTitle.style.marginBottom = '8px';
+    customTitle.style.fontSize = '14px';
+    customTitle.style.fontWeight = 'bold';
+    const customDesc = document.createElement('p');
+    customDesc.textContent = 'Abre para cima quando há < 660px abaixo';
+    customDesc.style.fontSize = '12px';
+    customDesc.style.color = '#666';
+    customDesc.style.marginBottom = '8px';
+    const customDropdown = document.createElement('sula-dropdown');
+    customDropdown.setAttribute('label', 'Dropdown Custom');
+    customDropdown.setAttribute('searchable', 'true');
+    customDropdown.setAttribute('menu-max-height', '600');
+    customDropdown.items = args.items;
+    customDropdown.addEventListener('menuItemSelected', args.menuItemSelected);
+    customWrapper.appendChild(customTitle);
+    customWrapper.appendChild(customDesc);
+    customWrapper.appendChild(customDropdown);
+    // Instrução
+    const instruction = document.createElement('p');
+    instruction.textContent = 'Role a página para ter ~400-500px abaixo dos dropdowns. O Custom abrirá para CIMA, o Padrão para BAIXO.';
+    instruction.style.fontSize = '12px';
+    instruction.style.color = '#999';
+    instruction.style.marginTop = '1rem';
+    instruction.style.gridColumn = '1 / -1';
+    container.appendChild(defaultWrapper);
+    container.appendChild(customWrapper);
+    const wrapper = document.createElement('div');
+    wrapper.appendChild(container);
+    wrapper.appendChild(instruction);
+    return wrapper;
+};
+export const AutoPositioning = AutoPositioningTemplate.bind({});
+AutoPositioning.args = {
+    items: [
+        { id: '1', title: 'Opção 1' },
+        { id: '2', title: 'Opção 2' },
+        { id: '3', title: 'Opção 3' },
+        { id: '4', title: 'Opção 4' },
+        { id: '5', title: 'Opção 5' },
+        { id: '6', title: 'Opção 6' },
+        { id: '7', title: 'Opção 7' },
+        { id: '8', title: 'Opção 8' },
+    ],
+};
+AutoPositioning.parameters = {
+    docs: {
+        description: {
+            story: 'Demonstra o auto-posicionamento do dropdown. O dropdown com menuMaxHeight maior (600px) é mais sensível e abre para cima com mais antecedência do que o padrão (260px). Role a página para observar o comportamento diferente.',
+        },
+    },
+};
 //# sourceMappingURL=sula-dropdown.stories.js.map

package/dist/collection/components/sula-dropdown/sula-dropdown.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"sula-dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/sula-dropdown/sula-dropdown.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/sula-dropdown',\n  tags: ['autodocs'],\n  argTypes: {\n    label: {\n      control: 'text',\n      defaultValue: 'Selecione uma opção',\n      description: 'Label do dropdown',\n      type: {\n        required: false,\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      defaultValue: false,\n      description: 'Define se o dropdown está desabilitado',\n      type: {\n        required: false,\n      },\n    },\n    items: {\n      control: 'object',\n      defaultValue: [],\n      description: 'Lista de itens para o dropdown',\n      type: {\n        required: false,\n      },\n    },\n    value: {\n      control: 'object',\n      defaultValue: null,\n      description: 'Valor selecionado do dropdown',\n      type: {\n        required: false,\n      },\n    },\n    searchable: {\n      control: 'boolean',\n      defaultValue: false,\n      description: 'Define se o dropdown permite busca',\n      type: {\n        required: false,\n      },\n    },\n    dropdownClicked: {\n      action: 'dropdownClicked',\n      description: 'Evento emitido quando o dropdown é clicado',\n    },\n    dropdownFocused: {\n      action: 'dropdownFocused',\n      description: 'Evento emitido quando o dropdown recebe foco',\n    },\n    dropdownFocusedOut: {\n      action: 'dropdownFocusedOut',\n      description: 'Evento emitido quando o dropdown perde o foco',\n    },\n    menuItemSelected: {\n      action: 'menuItemSelected',\n      description: 'Evento emitido quando um item é selecionado',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'O componente Dropdown Sula Design System é utilizado para exibição de opções de escolha. Seu intuito é ser usado junto com o botton sheet para selecionar opções variadas de itens em uma lista.',\n      },\n    },\n  },\n};\n\nconst Template = args => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n  container.style.width = '300px'; // Define uma largura para melhor visualização\n\n  const el = document.createElement('sula-dropdown');\n\n  if (args.label) el.setAttribute('label', args.label);\n  el.setAttribute('disabled', args.disabled.toString());\n  if (args.searchable) el.setAttribute('searchable', args.searchable.toString());\n\n  if (args.items && args.items.length > 0) {\n    el.items = args.items;\n  }\n\n  if (args.value) {\n    el.value = args.value;\n  }\n\n  // Adiciona os event listeners\n  el.addEventListener('dropdownClicked', args.dropdownClicked);\n  el.addEventListener('dropdownFocused', args.dropdownFocused);\n  el.addEventListener('dropdownFocusedOut', args.dropdownFocusedOut);\n  el.addEventListener('menuItemSelected', args.menuItemSelected);\n\n  container.appendChild(el);\n\n  return container;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  label: 'Selecione uma opção',\n  disabled: false,\n  items: [\n    { id: '1', title: 'Opção 1' },\n    { id: '2', title: 'Opção 2' },\n    { id: '3', title: 'Opção 3' },\n    { id: '4', title: 'Opção 4' },\n  ],\n  value: null,\n};\n\nexport const WithSelectedValue = Template.bind({});\nWithSelectedValue.args = {\n  label: 'País',\n  disabled: false,\n  items: [\n    { id: '1', title: 'Brasil' },\n    { id: '2', title: 'Argentina' },\n    { id: '3', title: 'Chile' },\n    { id: '4', title: 'Uruguai' },\n  ],\n  value: { id: '1', title: 'Brasil' },\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  label: 'Dropdown desabilitado',\n  disabled: true,\n  items: [\n    { id: '1', title: 'Opção 1' },\n    { id: '2', title: 'Opção 2' },\n    { id: '3', title: 'Opção 3' },\n  ],\n  value: null,\n};\n\nexport const DisabledWithValue = Template.bind({});\nDisabledWithValue.args = {\n  label: 'Estado',\n  disabled: true,\n  items: [\n    { id: '1', title: 'São Paulo' },\n    { id: '2', title: 'Rio de Janeiro' },\n    { id: '3', title: 'Minas Gerais' },\n  ],\n  value: { id: '1', title: 'São Paulo' },\n};\n\nexport const EmptyItems = Template.bind({});\nEmptyItems.args = {\n  label: 'Sem itens disponíveis',\n  disabled: false,\n  items: [],\n  value: null,\n};\n\nexport const LongItemsList = Template.bind({});\nLongItemsList.args = {\n  label: 'Lista com muitos itens',\n  disabled: false,\n  items: [\n    { id: '1', title: 'Item 1' },\n    { id: '2', title: 'Item 2' },\n    { id: '3', title: 'Item 3' },\n    { id: '4', title: 'Item 4' },\n    { id: '5', title: 'Item 5' },\n    { id: '6', title: 'Item 6' },\n    { id: '7', title: 'Item 7' },\n    { id: '8', title: 'Item 8' },\n    { id: '9', title: 'Item 9' },\n    { id: '10', title: 'Item 10' },\n  ],\n  value: null,\n};\n\nexport const Searchable = Template.bind({});\nSearchable.args = {\n  label: 'Selecione um país',\n  disabled: false,\n  searchable: true,\n  items: [\n    { id: '1', title: 'Brasil' },\n    { id: '2', title: 'Argentina' },\n    { id: '3', title: 'Chile' },\n    { id: '4', title: 'Uruguai' },\n    { id: '5', title: 'Paraguai' },\n    { id: '6', title: 'Bolívia' },\n    { id: '7', title: 'Peru' },\n    { id: '8', title: 'Colômbia' },\n    { id: '9', title: 'Venezuela' },\n    { id: '10', title: 'Equador' },\n    { id: '11', title: 'México' },\n    { id: '12', title: 'Estados Unidos' },\n    { id: '13', title: 'Canadá' },\n    { id: '14', title: 'Portugal' },\n    { id: '15', title: 'Espanha' },\n  ],\n  value: null,\n};\n\nexport const SearchableWithSelectedValue = Template.bind({});\nSearchableWithSelectedValue.args = {\n  label: 'País de nascimento',\n  disabled: false,\n  searchable: true,\n  items: [\n    { id: '1', title: 'Brasil' },\n    { id: '2', title: 'Argentina' },\n    { id: '3', title: 'Chile' },\n    { id: '4', title: 'Uruguai' },\n    { id: '5', title: 'Paraguai' },\n    { id: '6', title: 'Bolívia' },\n    { id: '7', title: 'Peru' },\n    { id: '8', title: 'Colômbia' },\n    { id: '9', title: 'Venezuela' },\n    { id: '10', title: 'Equador' },\n  ],\n  value: { id: '1', title: 'Brasil' },\n};\n"]}
+{"version":3,"file":"sula-dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/sula-dropdown/sula-dropdown.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/sula-dropdown',\n  tags: ['autodocs'],\n  argTypes: {\n    label: {\n      control: 'text',\n      defaultValue: 'Selecione uma opção',\n      description: 'Label do dropdown',\n      type: {\n        required: false,\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      defaultValue: false,\n      description: 'Define se o dropdown está desabilitado',\n      type: {\n        required: false,\n      },\n    },\n    items: {\n      control: 'object',\n      defaultValue: [],\n      description: 'Lista de itens para o dropdown',\n      type: {\n        required: false,\n      },\n    },\n    value: {\n      control: 'object',\n      defaultValue: null,\n      description: 'Valor selecionado do dropdown',\n      type: {\n        required: false,\n      },\n    },\n    searchable: {\n      control: 'boolean',\n      defaultValue: false,\n      description: 'Define se o dropdown permite busca',\n      type: {\n        required: false,\n      },\n    },\n    menuMaxHeight: {\n      control: 'number',\n      defaultValue: 260,\n      description: 'Altura máxima do menu em pixels (afeta o cálculo de auto-posicionamento)',\n      type: {\n        required: false,\n      },\n    },\n    dropdownClicked: {\n      action: 'dropdownClicked',\n      description: 'Evento emitido quando o dropdown é clicado',\n    },\n    dropdownFocused: {\n      action: 'dropdownFocused',\n      description: 'Evento emitido quando o dropdown recebe foco',\n    },\n    dropdownFocusedOut: {\n      action: 'dropdownFocusedOut',\n      description: 'Evento emitido quando o dropdown perde o foco',\n    },\n    menuItemSelected: {\n      action: 'menuItemSelected',\n      description: 'Evento emitido quando um item é selecionado',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'O componente Dropdown Sula Design System é utilizado para exibição de opções de escolha. Seu intuito é ser usado junto com o botton sheet para selecionar opções variadas de itens em uma lista.',\n      },\n    },\n  },\n};\n\nconst Template = args => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n  container.style.width = '300px'; // Define uma largura para melhor visualização\n\n  const el = document.createElement('sula-dropdown');\n\n  if (args.label) el.setAttribute('label', args.label);\n  el.setAttribute('disabled', args.disabled.toString());\n  if (args.searchable) el.setAttribute('searchable', args.searchable.toString());\n  if (args.menuMaxHeight) el.setAttribute('menu-max-height', args.menuMaxHeight.toString());\n\n  if (args.items && args.items.length > 0) {\n    el.items = args.items;\n  }\n\n  if (args.value) {\n    el.value = args.value;\n  }\n\n  // Adiciona os event listeners\n  el.addEventListener('dropdownClicked', args.dropdownClicked);\n  el.addEventListener('dropdownFocused', args.dropdownFocused);\n  el.addEventListener('dropdownFocusedOut', args.dropdownFocusedOut);\n  el.addEventListener('menuItemSelected', args.menuItemSelected);\n\n  container.appendChild(el);\n\n  return container;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  label: 'Selecione uma opção',\n  disabled: false,\n  items: [\n    { id: '1', title: 'Opção 1' },\n    { id: '2', title: 'Opção 2' },\n    { id: '3', title: 'Opção 3' },\n    { id: '4', title: 'Opção 4' },\n  ],\n  value: null,\n};\n\nexport const WithSelectedValue = Template.bind({});\nWithSelectedValue.args = {\n  label: 'País',\n  disabled: false,\n  items: [\n    { id: '1', title: 'Brasil' },\n    { id: '2', title: 'Argentina' },\n    { id: '3', title: 'Chile' },\n    { id: '4', title: 'Uruguai' },\n  ],\n  value: { id: '1', title: 'Brasil' },\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  label: 'Dropdown desabilitado',\n  disabled: true,\n  items: [\n    { id: '1', title: 'Opção 1' },\n    { id: '2', title: 'Opção 2' },\n    { id: '3', title: 'Opção 3' },\n  ],\n  value: null,\n};\n\nexport const DisabledWithValue = Template.bind({});\nDisabledWithValue.args = {\n  label: 'Estado',\n  disabled: true,\n  items: [\n    { id: '1', title: 'São Paulo' },\n    { id: '2', title: 'Rio de Janeiro' },\n    { id: '3', title: 'Minas Gerais' },\n  ],\n  value: { id: '1', title: 'São Paulo' },\n};\n\nexport const EmptyItems = Template.bind({});\nEmptyItems.args = {\n  label: 'Sem itens disponíveis',\n  disabled: false,\n  items: [],\n  value: null,\n};\n\nexport const LongItemsList = Template.bind({});\nLongItemsList.args = {\n  label: 'Lista com muitos itens',\n  disabled: false,\n  items: [\n    { id: '1', title: 'Item 1' },\n    { id: '2', title: 'Item 2' },\n    { id: '3', title: 'Item 3' },\n    { id: '4', title: 'Item 4' },\n    { id: '5', title: 'Item 5' },\n    { id: '6', title: 'Item 6' },\n    { id: '7', title: 'Item 7' },\n    { id: '8', title: 'Item 8' },\n    { id: '9', title: 'Item 9' },\n    { id: '10', title: 'Item 10' },\n  ],\n  value: null,\n};\n\nexport const Searchable = Template.bind({});\nSearchable.args = {\n  label: 'Selecione um país',\n  disabled: false,\n  searchable: true,\n  items: [\n    { id: '1', title: 'Brasil' },\n    { id: '2', title: 'Argentina' },\n    { id: '3', title: 'Chile' },\n    { id: '4', title: 'Uruguai' },\n    { id: '5', title: 'Paraguai' },\n    { id: '6', title: 'Bolívia' },\n    { id: '7', title: 'Peru' },\n    { id: '8', title: 'Colômbia' },\n    { id: '9', title: 'Venezuela' },\n    { id: '10', title: 'Equador' },\n    { id: '11', title: 'México' },\n    { id: '12', title: 'Estados Unidos' },\n    { id: '13', title: 'Canadá' },\n    { id: '14', title: 'Portugal' },\n    { id: '15', title: 'Espanha' },\n  ],\n  value: null,\n};\n\nexport const SearchableWithSelectedValue = Template.bind({});\nSearchableWithSelectedValue.args = {\n  label: 'País de nascimento',\n  disabled: false,\n  searchable: true,\n  items: [\n    { id: '1', title: 'Brasil' },\n    { id: '2', title: 'Argentina' },\n    { id: '3', title: 'Chile' },\n    { id: '4', title: 'Uruguai' },\n    { id: '5', title: 'Paraguai' },\n    { id: '6', title: 'Bolívia' },\n    { id: '7', title: 'Peru' },\n    { id: '8', title: 'Colômbia' },\n    { id: '9', title: 'Venezuela' },\n    { id: '10', title: 'Equador' },\n  ],\n  value: { id: '1', title: 'Brasil' },\n};\n\nconst AutoPositioningTemplate = args => {\n  const container = document.createElement('div');\n  container.style.display = 'flex';\n  container.style.gap = '2rem';\n  container.style.margin = '20px';\n  container.style.marginTop = '100px';\n  container.style.marginBottom = '1000px';\n\n  // Dropdown padrão\n  const defaultWrapper = document.createElement('div');\n  defaultWrapper.style.width = '300px';\n  const defaultTitle = document.createElement('h4');\n  defaultTitle.textContent = 'Padrão (260px)';\n  defaultTitle.style.marginBottom = '8px';\n  defaultTitle.style.fontSize = '14px';\n  defaultTitle.style.fontWeight = 'bold';\n  const defaultDesc = document.createElement('p');\n  defaultDesc.textContent = 'Abre para cima quando há < 320px abaixo';\n  defaultDesc.style.fontSize = '12px';\n  defaultDesc.style.color = '#666';\n  defaultDesc.style.marginBottom = '8px';\n  \n  const defaultDropdown = document.createElement('sula-dropdown');\n  defaultDropdown.setAttribute('label', 'Dropdown Padrão');\n  defaultDropdown.setAttribute('searchable', 'true');\n  defaultDropdown.items = args.items;\n  defaultDropdown.addEventListener('menuItemSelected', args.menuItemSelected);\n  \n  defaultWrapper.appendChild(defaultTitle);\n  defaultWrapper.appendChild(defaultDesc);\n  defaultWrapper.appendChild(defaultDropdown);\n\n  // Dropdown custom\n  const customWrapper = document.createElement('div');\n  customWrapper.style.width = '300px';\n  const customTitle = document.createElement('h4');\n  customTitle.textContent = 'Custom (600px)';\n  customTitle.style.marginBottom = '8px';\n  customTitle.style.fontSize = '14px';\n  customTitle.style.fontWeight = 'bold';\n  const customDesc = document.createElement('p');\n  customDesc.textContent = 'Abre para cima quando há < 660px abaixo';\n  customDesc.style.fontSize = '12px';\n  customDesc.style.color = '#666';\n  customDesc.style.marginBottom = '8px';\n  \n  const customDropdown = document.createElement('sula-dropdown');\n  customDropdown.setAttribute('label', 'Dropdown Custom');\n  customDropdown.setAttribute('searchable', 'true');\n  customDropdown.setAttribute('menu-max-height', '600');\n  customDropdown.items = args.items;\n  customDropdown.addEventListener('menuItemSelected', args.menuItemSelected);\n  \n  customWrapper.appendChild(customTitle);\n  customWrapper.appendChild(customDesc);\n  customWrapper.appendChild(customDropdown);\n\n  // Instrução\n  const instruction = document.createElement('p');\n  instruction.textContent = 'Role a página para ter ~400-500px abaixo dos dropdowns. O Custom abrirá para CIMA, o Padrão para BAIXO.';\n  instruction.style.fontSize = '12px';\n  instruction.style.color = '#999';\n  instruction.style.marginTop = '1rem';\n  instruction.style.gridColumn = '1 / -1';\n\n  container.appendChild(defaultWrapper);\n  container.appendChild(customWrapper);\n\n  const wrapper = document.createElement('div');\n  wrapper.appendChild(container);\n  wrapper.appendChild(instruction);\n\n  return wrapper;\n};\n\nexport const AutoPositioning = AutoPositioningTemplate.bind({});\nAutoPositioning.args = {\n  items: [\n    { id: '1', title: 'Opção 1' },\n    { id: '2', title: 'Opção 2' },\n    { id: '3', title: 'Opção 3' },\n    { id: '4', title: 'Opção 4' },\n    { id: '5', title: 'Opção 5' },\n    { id: '6', title: 'Opção 6' },\n    { id: '7', title: 'Opção 7' },\n    { id: '8', title: 'Opção 8' },\n  ],\n};\nAutoPositioning.parameters = {\n  docs: {\n    description: {\n      story:\n        'Demonstra o auto-posicionamento do dropdown. O dropdown com menuMaxHeight maior (600px) é mais sensível e abre para cima com mais antecedência do que o padrão (260px). Role a página para observar o comportamento diferente.',\n    },\n  },\n};\n"]}