ollionorg / flow-core Goto Github PK

Is your feature request related to a problem? Please describe.
When the number of rows is empty, we need a way to use custom components to showcase empty and empty filtered states.

Describe the solution you'd like
A slot to insert a custom component when rows are empty

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Review and fix the findings below.

Link: https://github.com/cldcvr/flow-core/blob/22feb358f2543611f4f43110ec03c0d286b40eff/packages/flow-core/.env
Commit: 22feb35
Email: mayankfulera [email protected]
File: packages/flow-core/.env
Line: 1
Detector: FigmaPersonalAccessToken

Describe the bug
The search bar needs to get hidden on setting :show-search-bar="false". It does not happen in Vue 2.7.

To Reproduce
Steps to reproduce the behavior:

1. Version "@cldcvr/flow-table": "^1.2.2"
2. Use snippet below

<f-table-schema
  variant="underlined"
  size="small"
  :data.prop="{ header: colHeaders, rows }"
  :show-search-bar="false"
  part="cell"
  @toggle-row-details="toggleRowDetails"
  >

</f-table-schema>

Expected behavior
Search bar must stay hidden when the prop :show-search-bar="false"

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Bug description

The result-max-height prop doesn't work consistently. Sometimes, it follows the value provided there. Other times, it overflows by a lot.

It appears to occur when we click outside the f-search component

Reproduction steps

<f-search
  :result.prop="options"
  variant="round"
  :loading="loaders.search"
  :result-when.prop="() => true"
  result-max-height="250px"
  @input="searchUpdated"
  @selected="userSelected"
>
  <f-div v-if="!loaders.search" slot="no-data" padding="medium small">
    <f-text weight="regular" size="small"> No users found</f-text>
  </f-div>
</f-search>

const options = ref<FSearchOptionTemplate<User>[]>([]);

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Bug description

• Create a form builder instance with a number of minimum value 5
• Enter 4 as value
• See error message reported

The error should either say "Must be greater than or equal to 5" or something to that sort

Reproduction steps

Reproducible example: https://stackblitz.com/edit/vitejs-vite-pbfwkg?file=src%2FApp.vue

Review and fix the findings below.

Link: https://github.com/cldcvr/flow-core/blob/b645c22a4afb9ceb019d0f089e5244fc5f72e6a4/packages/flow-core/.env
Commit: b645c22
Email: vikas-cldcvr [email protected]
File: packages/flow-core/.env
Line: 1
Detector: FigmaPersonalAccessToken

Bug description

While selecting a value in f-suggest, the value does not get reflected

Reproduction steps

Desktop (please complete the following information):

• OS: [MacOS]
• Browser [chrome]
• Version [latest]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Review and fix the findings below.

Link: https://github.com/cldcvr/flow-core/blob/075d7d26cfe34ebf015a7e490500b5f4617a6166/packages/flow-icon-free/figma/config.js
Commit: 075d7d2
Email: vikas-cldcvr [email protected]
File: packages/flow-icon-free/figma/config.js
Line: 3
Detector: FigmaPersonalAccessToken

Is your feature request related to a problem? Please describe.
We need a countdown component (currently using countdown from flow 1)

Describe the solution you'd like
Need Countdown component in FLow 2

Describe alternatives you've considered
Using Countdown from flow 1

Describe the bug
We need a way to support overflow visible on an f-div. The current options of wrap, scroll, and hidden are not enough!

To Reproduce
Steps to reproduce the behavior:

1. Observe:
   

2. Use a floating box with Multiselect inputs with many options

3. The options get hidden underneath the f-div container

Expected behavior
There should be an easier way to set overflow x or y to visible

Screenshots
If applicable, add screenshots to help explain your problem.
Setting Overflow Y to visible on Chrome Dev tools allows fixes the problem:

Desktop (please complete the following information):

• Mac Book Pro, 13inches
• Browser Chrome
• Version v1.1.6

Additional context
Add any other context about the problem here.

Expected behavior
We want to recreate the feature of MultiSelect @search-change input. Refer: https://vue-multiselect.js.org/#sub-asynchronous-select

Screenshots

Bug description

When using an async validator to determine if validity is true or false, for newly created options, the option list gets appended BEFORE the return of the async validator to determine the validity.

Expected behaviour

When creating new options, and a custom async validator is present, the list of options should get appended AFTER the validation is true.

Video

Fields passed to form builder:

{
  "type": "object",
  "direction": "vertical",
  "fields": {
    "domain": {
      "label": { "title": "Domain" },
      "type": "select",
      "searchable": true,
      "placeholder": "Select Domain",
      "validationRules": [{ "name": "required" }],
      "options": [
        {
          "title": "UX design",
          "data": {
            "name": "ux_design",
            "key": "cef7e730-f50c-4a2d-9827-db9adc2b1da0://ux_design",
            "schemas": [
              { "key": "athena://awsdatacatalog.dataset9", "name": "dataset9" },
              { "key": "athena://awsdatacatalog.dataset7", "name": "dataset7" },
              {
                "key": "athena://awsdatacatalog.dataset_6",
                "name": "dataset_6"
              },
              {
                "key": "athena://awsdatacatalog.dataset_5",
                "name": "dataset_5"
              },
              {
                "key": "athena://awsdatacatalog.dataset_3",
                "name": "dataset_3"
              },
              {
                "key": "athena://awsdatacatalog.new_dataset",
                "name": "new_dataset"
              },
              { "key": "athena://awsdatacatalog.datetime", "name": "datetime" },
              {
                "key": "snowflake://ingestionteam.datetime",
                "name": "datetime"
              }
            ],
            "display_name": "UX design"
          }
        }
      ],
      "optionTemplate": {
        "_custom": {
          "type": "function",
          "display": "<span style=\"opacity:.5;\">function</span> optionTemplate(option)",
          "tooltip": "<pre>function(option) {\n        option = option;\n        const dom = option.data;\n        const isDo = userOwnedDomains.value.some((ownedDom) => ownedDom.key === dom.key);\n        const htmlStr = isDo ? html`<f-div align=\"middle-left\" gap=\"x-small\">\n\t\t\t\t\t<f-text weight=\"medium\" inline> ${dom.display_name} </f-text>\n\t\t\t\t\t<f-icon source=\"i-crown\" />\n\t\t\t  </f-div>` : html`<f-div align=\"middle-left\" gap=\"x-small\">\n\t\t\t\t\t<f-text weight=\"medium\" inline> ${dom.display_name} </f-text>\n\t\t\t  </f-div>`;\n        return htmlStr;\n      }</pre>",
          "_reviveId": 94
        }
      }
    },
    "dataset": {
      "label": { "title": "Dataset" },
      "type": "select",
      "searchable": true,
      "loading": false,
      "createOption": true,
      "placeholder": "Enter your dataset name",
      "options": [
        "dataset9",
        "dataset7",
        "dataset_6",
        "dataset_5",
        "dataset_3",
        "new_dataset",
        "datetime",
        "datetime"
      ],
      "validationRules": [
        { "name": "required" },
        {
          "name": "custom",
          "validate": {
            "_custom": {
              "type": "function",
              "display": "<span style=\"opacity:.5;\">function</span> customValidator(datasetName, _)",
              "tooltip": "<pre>async function(datasetName, _) {\n      const domainName = formValues.value.domain?.data.name;\n      const destId = selectedDest.value?.destination_id;\n      if (!domainName || !destId || !datasetName || typeof datasetName !== \"string\")\n        return true;\n      debugger;\n      if (datasets.value.includes(datasetName))\n        return true;\n      const validity = await pipelineCreateStore.VALIDATE_DATASET_NAME({\n        datasetName,\n        domainName,\n        destId\n      });\n      datasetValidity.isValid = validity.is_name_allowed;\n      datasetValidity.msg = validity.message ?? \"\";\n      return datasetValidity.isValid;\n    }</pre>",
              "_reviveId": 95
            }
          },
          "message": ""
        },
        {
          "name": "regex",
          "params": { "regex": "[native RegExp /^(?![0-9])[\\w\\s]+$/]" },
          "message": "Dataset name cannot begin with a number"
        }
      ],
      "clear": true
    }
  }
}

Custom async validator

const customValidator: FormBuilderAsyncValidatorFunction = async function (datasetName, _) {
	const domainName = formValues.value.domain?.data.name;
	const destId = selectedDest.value?.destination_id;

	if (!domainName || !destId || !datasetName || typeof datasetName !== "string") return true;
	debugger;
	if (datasets.value.includes(datasetName)) return true;

	const validity = await pipelineCreateStore.VALIDATE_DATASET_NAME({
		datasetName,
		domainName,
		destId
	});

	datasetValidity.isValid = validity.is_name_allowed;
	datasetValidity.msg = validity.message ?? "";
	return datasetValidity.isValid;
};

Reproducible example: flow2-vue-starter-kit

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Review and fix the findings below.

Link: https://github.com/cldcvr/flow-core/blob/075d7d26cfe34ebf015a7e490500b5f4617a6166/packages/flow-icon-free/figma/config.js
Commit: 075d7d2
Email: vikas-cldcvr [email protected]
File: packages/flow-icon-free/figma/config.js
Line: 3
Detector: FigmaPersonalAccessToken

Bug description

• When we provide async validation with backend API then it is getting called 3 times for the first value.

Reproduction steps

• create a field with an async validator and check the network tab in the console.

Desktop (please complete the following information):

• OS: [e.g. iOS] ✔️
• Browser [e.g. chrome, safari] ✔️
• Version [e.g. 22] ✔️

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Review and fix the findings below.

Link: https://github.com/cldcvr/flow-core/blob/661580910043382c2bce67ba00765613e0e0690c/packages/flow-core/package.json
Commit: 6615809
Email: vikas-cldcvr [email protected]
File: packages/flow-core/package.json
Line: 15
Detector: FigmaPersonalAccessToken

Is your feature request related to a problem? Please describe.
currently, we need to provide the same template for all column headers.

Describe the solution you'd like
Can we have a common header template if we have the same template for all column headers?

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context

Right now f-log hijacks all keystrokes after mounting and stops their propagation. The logic above should only stop the propagation if the key was handled i.e. one of those if conditions was met. This causes issues like unable to close a dialog on press of escape key if f-log is rendered

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

We need a way to have a maxWidth on f-tag that will make the inner label collapse into ellipsis when it overflows the max Width

Describe alternatives you've considered

Right now, using a parent f-div or setting inline css max width cuts the tag abruptly

Additional context

Add any other context or screenshots about the feature request here.

Review and fix the findings below.

Link: https://github.com/cldcvr/flow-core/blob/dda30de62a4c5f6f91de50dcf1cc969b2a08db9a/packages/flow-core/package.json
Commit: dda30de
Email: vikas-cldcvr [email protected]
File: packages/flow-core/package.json
Line: 13
Detector: FigmaPersonalAccessToken

Review and fix the findings below.

Link: https://github.com/cldcvr/flow-core/blob/22feb358f2543611f4f43110ec03c0d286b40eff/packages/flow-core/.env
Commit: 22feb35
Email: mayankfulera [email protected]
File: packages/flow-core/.env
Line: 1
Detector: FigmaPersonalAccessToken

Bug description

f-popover overlay-click is not working
and after scrolling to the bottom of the table in the f-table-schema the f-popover is flickering a lot after opening

Reproduction steps

Reproducible example: flow2-vue-starter-kit

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

We need a way to make the icon tooltip closeable from the f-form-builder fields. For use cases where there is an accesible link ithe tooltip, one would want to access it, and currently there is no way.

Refer: https://jam.dev/c/6ccd8965-6182-4ebb-a77f-ba70922ace4f

Review and fix the findings below.

Link: https://github.com/cldcvr/flow-core/blob/d47c4c1c26d28c3d191281e2801a3c81def56fdd/packages/flow-core/package.json
Commit: d47c4c1
Email: Mayank fulera [email protected]
File: packages/flow-core/package.json
Line: 16
Detector: FigmaPersonalAccessToken

Bug description

When using the f-log, the scrollbar to the side cannot be clicked and moved by the mouse. The only way to scroll with a mouse is with a scroll wheel.

Reproduction steps

Reproducible example: Visible on the Playground

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Review and fix the findings below.

Link: https://github.com/cldcvr/flow-core/blob/661580910043382c2bce67ba00765613e0e0690c/packages/flow-core/package.json
Commit: 6615809
Email: vikas-cldcvr [email protected]
File: packages/flow-core/package.json
Line: 15
Detector: FigmaPersonalAccessToken

In Vue

Expected behaviour
We need a way to explicitly define a way to show how and option should look, and how a tag should look when selected in a multi select mode. Something similar to Vue MultiSelect "tagging".

Right now, the option-template prop is the same for the option and the selected Option.

	<f-select
		searchable
		category="transparent"
		clear
		:options.prop="options"
		:option-template.prop="optionTemplate"
		type="multiple"
		@input="onPipelineSelected"
		@search-input="onSearch"
	>
		<!-- <f-div slot="label" padding="none" gap="none">
			<f-text size="small" state="secondary">Run Pipeline</f-text>
		</f-div> -->
	</f-select>


const optionTemplate: FSelectOptionTemplate = function (option: FSelectSingleOption) {
	option = option as FSelectOptionObject;
	const user = option.data as any as User;

	const htmlStr = html` <f-div align="middle-left" gap="small" overflow="hidden" width="300">
		<f-pictogram variant="circle" source="${user.email}"></f-pictogram>

		<f-div align="middle-left" gap="x-small" direction="column" overflow="hidden">
			<f-text inline> ${user.first_name || ""} ${user.last_name || ""} </f-text>
			<f-text state="subtle" inline> ${user.email} </f-text>
		</f-div>
	</f-div>`;

	return htmlStr;
};

Review and fix the findings below.

Link: https://github.com/cldcvr/flow-core/blob/4b570c42e542bdd3f880c69b01f7876e736a64e1/packages/flow-core/package.json
Commit: 4b570c4
Email: Mayank fulera [email protected]
File: packages/flow-core/package.json
Line: 16
Detector: FigmaPersonalAccessToken

Review and fix the findings below.

Link: https://github.com/cldcvr/flow-core/blob/661580910043382c2bce67ba00765613e0e0690c/packages/flow-core/package.json
Commit: 6615809
Email: vikas-cldcvr [email protected]
File: packages/flow-core/package.json
Line: 15
Detector: FigmaPersonalAccessToken

Bug description

When we create f-tooltip with closable="true", it is not displaying with close icon.

Reproduction steps

CReate f-tooltip with id="test" and closable="true", provide that id to any button or icon as tooltip
e.g. <f-button tooltip="#test" label="button"></f-button>

Reproducible example: flow2-vue-starter-kit

It can be reproduced by following the steps outlined above, and it is reproducible in all browsers.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Bug description

• Create f-log with log lines beyond the screen size
• Try to scroll

Reproduction steps

Open the playground example and scroll - https://flow.ollion.com/v2/index.html?path=/story/ollion-flow-log-f-log--playground

Desktop (please complete the following information):

All

Smartphone (please complete the following information):

All

Additional context

N/A

Bug description

f-date-time-picker : if clear="true" it does not clear the value on the first click, it takes 2 clicks to clear the value.

Reproduction steps

Attaching video of its behaviour

Desktop (please complete the following information):
It will replicate in all browsers, however above video is created on following specs

• OS: MacOs 14.0 (23A344)
• Browser: Chrome
• Version: 117.0.5938.149

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Describe the solution you'd like

It will be really useful to the users if we could have dropdowns inside breadcrumbs. Here is a dribble example and a demo codepen implementation

Describe alternatives you've considered

f-breadcrumb doesn't allow embedding slots, or else I would have composed breadcrumb with another component. I can always create my own otherwise.

Additional context

There seems to be some support for dropdowns when the breadcrumb list is too big

Is your feature request related to a problem? Please describe.

f-select has no ability to have the dropdown expand bigger than it's parent. This means that larger options become squished

Describe the solution you'd like

f-select should provide a max-dropdown-width property so that it can be controlled by the consumer. It's default width should ideally be calculated based on the parent width multiplied by some number. This will allow the consumer to let the options expand as needed

Describe alternatives you've considered

None. It seems to be a limitation in the current solution, the alternative is to implement the dropdown manually.

Additional context

N/A

at the right side more action icon can be disable for some cases

Review and fix the findings below.

Link: https://github.com/cldcvr/flow-core/blob/dda30de62a4c5f6f91de50dcf1cc969b2a08db9a/packages/flow-core/package.json
Commit: dda30de
Email: vikas-cldcvr [email protected]
File: packages/flow-core/package.json
Line: 13
Detector: FigmaPersonalAccessToken

Review and fix the findings below.

Link: https://github.com/cldcvr/flow-core/blob/4b570c42e542bdd3f880c69b01f7876e736a64e1/packages/flow-core/package.json
Commit: 4b570c4
Email: Mayank fulera [email protected]
File: packages/flow-core/package.json
Line: 16
Detector: FigmaPersonalAccessToken

Review and fix the findings below.

Link: https://github.com/cldcvr/flow-core/blob/661580910043382c2bce67ba00765613e0e0690c/packages/flow-core/package.json
Commit: 6615809
Email: vikas-cldcvr [email protected]
File: packages/flow-core/package.json
Line: 15
Detector: FigmaPersonalAccessToken

Bug description

When using a custom async validator, the validation error message is not picked up correctly on the first call. Future subsequent calls it picks it up correctly.

Reproduction steps

Use the same data as provided here #160

Expected behaviour

The error message must also be shown on the first validation call

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Currently, we are documenting stories for properties, but we have yet to provide documentation for the custom events and slots that we are emitting.

Therefore, we need to create additional stories for custom slots and custom events, making it easier for developers to understand and use them.

Review and fix the findings below.

Link: https://github.com/cldcvr/flow-core/blob/d47c4c1c26d28c3d191281e2801a3c81def56fdd/packages/flow-core/package.json
Commit: d47c4c1
Email: Mayank fulera [email protected]
File: packages/flow-core/package.json
Line: 16
Detector: FigmaPersonalAccessToken