I like the readability of TypeScript and the functionalities of Crystal.

I was wondering if, since Mint is written in Crystal, it could not be used to build a Mint-to-Crystal transpiler ?

I've been using Mint for a while, and in pretty much every project I ended up having to deal with the same problem. The most common scenario is when creating a Search Box. Seems pretty simple, create a <Ui.Input >, define a state to hold its value (Shouldn't be needed but let's roll with it), define an onChange event that updates the state, and now I have to submit it... onIconClick makes for half of the solution, but a reasonable search box will also trigger when the user hits the Enter key, and that's not so easy in mint.

Right now I'm using this slight aberration to make this work:

onChange={(newValue : String) : Promise(Never,Void) {
  next { fieldValue = newValue }
}}
onKeyDown={(e : Html.Event) : Promise(Never,Void) {
  if (e.key == "Enter") {
    "someUrl/#{`encodeURI(#{fieldValue})`}"
    |> Window.navigate
  } else {
    Promise.never()
    }
}}
onIconClick={(e : Html.Event) : Promise(Never,Void) {
  "someUrl/#{`encodeURI(#{fieldValue})`}"
  |> Window.navigate
}}

The else branch is irrelevant boilerplate, and the e.key == "Enter" doesn't check for modifiers like Ctrl or Shift or pretty much anything. It's be a lot easier to have something like:

onSubmit={(fieldValue : String) : Promise(Never,Void){
  "someUrl/#{`encodeURI(#{fieldValue})`}"
  |> Window.navigate
}}

which could actually replace all three handlers above, with the added benefit of doing away with having a state.

Am I the only one who thinks this is a good idea, or are there others who agree we could use something like this?

I did everything as written in the instructions https://ui.mint-lang.com/documentation/installation. The prompt shows an error:

The type of the default value of the formatter property does not match its type annotation.
(screenshot https://imgur.com/a/HCsldMy)
I was expecting:

Function(
String,
Time,
String)
Instead it is:

Function(
Time.Format.Language(
toOrdinalSuffix:
Function(
Number,
String),
toMonthName:
Function(
Month,
String),
toMonthAbbreviation:
Function(
Month,
String),
toWeekdayName:
Function(
Weekday,
String),
toWeekdayAbbreviation:
Function(
Weekday,
String),
amPm:
Function(
Number,
String),
someSecondsAgo:
Function(
Number,
String),
someMinutesAgo:
Function(
Number,
String),
someHoursAgo:
Function(
Number,
String),
someDaysAgo:
Function(
Number,
String),
someMonthsAgo:
Function(
Number,
String),
someYearsAgo:
Function(
Number,
String),
inSomeSeconds:
Function(
Number,
String),
inSomeMinutes:
Function(
Number,
String),
inSomeHours:
Function(
Number,
String),
inSomeDays:
Function(
Number,
String),
inSomeMonths:
Function(
Number,
String),
inSomeYears:
Function(
Number,
String),
rightNow: String),
String,
Time,
String)
Here is the relevant code snippet:

/home/---/Desktop/mint-learning/tests-project/.mint/packages/mint-ui/source/DatePicker.mint

https://ui.mint-lang.com/examples/checkout

The country select is partially cut-off.

Tested with Firefox Developer Edition (88.0b9) and Chrome (90.0.4430.85) on MacOS Big Sur (11.2.3).

BTW: Selecting a country on such lists is always really annoying. If I want to select "Germany" (sometimes they also translate it, then I would have to search for "Deutschland"), I need to find the item somewhere in the list. Luckily - at least with a native select - I can press "G" on my keyboard which brings me to that section. But unfortunately, that doesn't seem to be supported with Ui.Select.

Hi,
This is not an issue per se. I just would like to know more about mint as this looks very interesting and somewhat in line with some thoughts I've been having about creating gui's. The thing that peeks my interest, is the fact that your using svg for common elements. That leads me to think that animation will be a first-class citizen of the library, which is usually just an afterthought.
Am I right?
If so, is there some way I can contribute?
Btw: the language looks nice to 👍

This is a screenshot (after resizing to 100px to make it more obvious) - looks like something is not right:

Address: https://ui.mint-lang.com/components/ui-image-crop
Browser: Firefox 99

Native selectboxes support selecting elements by typing their first letters, especially relevant for eg. selecting countries.
The Ui.Select component does nothing when letters are entered, making picking items from a long list a very frustrating and non-native feeling experience.

URL: https://ui.mint-lang.com/examples/checkout
Browser: Firefox 99

When I add UI as a dependency of a basic project (mint init ...), run mint install, and mint start, error shows up on the main page saying:

Syntax Error

I was looking for a branch of a case expression but found Maybe::Just instead.

Here is the relevant code snippet:
mint/packages/mint-ui/source/Modal.mint
      () {
        case (base) {
          Maybe::Just comp => comp.focusFirst()
          Maybe::Nothing => next {  }
        }
      })
  }

Any hints? Thanks.

Hi!

I'm getting familiar with mint and mint-ui, and as a first step I read through the docs/examples.
I noticed that Ui.Tab is not working on https://ui.mint-lang.com/documentation/tabs, when I click the other tab the content remains the same. I tried it out locally (checked with the develop branch as well) and got the same result.

I haven't looked into it, but I thought I'd point it out.
Keep up the good work!

the format currently used is "YYYY-MM-DD". The format property would make possible the inputs have the formats:

• "YYYY-MM-DD"
• "YYYY-DD-MM"
• "MM-DD-YYYY"
• "MM-YYYY-DD"
• "DD-MM-YYYY"
• "DD-YYYY-MM"

• "YYYY/MM/DD"
• "YYYY/DD/MM"
• "MM/DD/YYYY"
• "MM/YYYY/DD"
• "DD/MM/YYYY"
• "DD/YYYY/MM"

First of all, I’m amazed at the quality & quantity of the components. That's really astonishing 🎉

When dragging around the color handle on the Color Picker, the hex value changes. Since not all characters are rendered with the same width, the overall width of the button changes.

Expected: Button & Popup keep the same width, regardless of the button content.

Actual: The button changes the width and then the popup also changes the width.

One way this could be fixed is by changing the font family to a monospaced font on the span. Then the individual characters would be the same width regardless of the actual character.

Tested with Firefox Developer Edition (88.0b9) and Chrome (90.0.4430.85) on MacOS Big Sur (11.2.3).

I'm just trying mint and I initialised a new project, added the dependency, ran install and now when I run start I get this error.

I was looking for a branch of a case expression but found Maybe::Just instead.
Here is the relevant code snippet:
.mint/packages/mint-ui/source/ActionSheet.mint

      Timer.timeout(100, "")

      case (container) {
        Maybe::Just element => Dom.focusFirst(element)
        Maybe::Nothing => next {  }
      }

      case (scrollContainer) {
        Maybe::Just element => Dom.scrollTo(element, 0, 0)