Merge pull request #55 from fleetbase/dev-v0.2.16

v0.2.16
fleetbase · May 30, 2024 · b26f880 · b26f880
2 parents 94bd41f + ed4f0f9
commit b26f880
Show file tree

Hide file tree

Showing 113 changed files with 1,722 additions and 490 deletions.
diff --git a/addon/components/array-input.hbs b/addon/components/array-input.hbs
@@ -9,7 +9,16 @@
         <div class="h-48 overflow-y-scroll rounded">
             {{#each this.data as |datum index|}}
                 <div class="flex text-gray-800 border-b border-gray-200 dark:border-gray-900 dark:text-gray-100 relative">
-                    <Input @type="text" @value={{datum}} aria-label="Data Input" placeholder={{@placeholder}} {{on "change" (fn this.onChange index)}} {{on "paste" (fn this.onPaste index)}} class="form-input w-full flex-1 border-none shadow-none rounded-none pr-24" {{on "keyup" (fn this.inputDatum index)}} />
+                    <Input
+                        @type="text"
+                        @value={{datum}}
+                        aria-label="Data Input"
+                        placeholder={{@placeholder}}
+                        {{on "change" (fn this.onChange index)}}
+                        {{on "paste" (fn this.onPaste index)}}
+                        class="form-input w-full flex-1 border-none shadow-none rounded-none pr-24"
+                        {{on "keyup" (fn this.inputDatum index)}}
+                    />
                     <div class="absolute right-0 py-2.5 px-4">
                         <button type="button" class="rounded-none border-none bg-transparent shadow-none outline-none text-red-500" {{on "click" (fn this.removeData index)}}>Remove</button>
                     </div>

diff --git a/addon/components/aside-item-scroller.hbs b/addon/components/aside-item-scroller.hbs
@@ -6,7 +6,18 @@
         {{/if}}
     </div>
     <div>
-        <DropdownButton @contentClass="w-full" @buttonWrapperClass="w-full" @buttonClass="w-full" @icon="bars" @iconPrefix="fas" @text={{concat "Select " this.resource}} @matchTriggerWidth={{true}} @verticalPosition="below" @renderInPlace={{true}} as |dd|>
+        <DropdownButton
+            @contentClass="w-full"
+            @buttonWrapperClass="w-full"
+            @buttonClass="w-full"
+            @icon="bars"
+            @iconPrefix="fas"
+            @text={{concat "Select " this.resource}}
+            @matchTriggerWidth={{true}}
+            @verticalPosition="below"
+            @renderInPlace={{true}}
+            as |dd|
+        >
             <div class="next-dd-menu w-full h-screen-50 overflow-y-scroll" aria-orientation="vertical" aria-labelledby="user-menu">
                 {{#each-in this.itemsGroupByTitleLetter as |key items|}}
                     <div class="px-1">
@@ -22,12 +33,12 @@
                             </div>
                         </div>
                     {{/each}}
-                    {{else}}
-                        <div class="flex flex-col items-center text-center my-4">
-                            <div class="mb-4">
-                                <h4 class="dark:text-gray-100">No {{pluralize this.resource}}</h4>
-                            </div>
+                {{else}}
+                    <div class="flex flex-col items-center text-center my-4">
+                        <div class="mb-4">
+                            <h4 class="dark:text-gray-100">No {{pluralize this.resource}}</h4>
                         </div>
+                    </div>
                 {{/each-in}}
             </div>
         </DropdownButton>
@@ -39,7 +50,8 @@
             <div class="flex-1">
                 <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{this.title}}</h2>
                 <p class="mt-1 text-sm text-gray-600">
-                    Search {{pluralize @items.length this.resource}}
+                    Search
+                    {{pluralize @items.length this.resource}}
                 </p>
             </div>
             <div>
@@ -67,33 +79,43 @@
                     </ul>
                 {{/if}}
                 {{#each-in this.itemsGroupByTitleLetter as |key items|}}
-                    <div class="z-10 sticky top-0 border-t border-b border-gray-200 bg-gray-50 px-6 py-1 text-sm font-medium text-gray-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100">
+                    <div
+                        class="z-10 sticky top-0 border-t border-b border-gray-200 bg-gray-50 px-6 py-1 text-sm font-medium text-gray-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
+                    >
                         <h3>{{capitalize key}}</h3>
                     </div>
                     <ul class="relative z-0 divide-y divide-gray-200 dark:divide-gray-900">
                         {{#each items as |item|}}
                             <li>
-                                <div class="relative flex items-center space-x-3 hover:bg-gray-50 dark:hover:bg-gray-700 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-400">
+                                <div
+                                    class="relative flex items-center space-x-3 hover:bg-gray-50 dark:hover:bg-gray-700 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-400"
+                                >
                                     <div class="flex-1 min-w-0">
                                         {{yield item}}
                                     </div>
                                 </div>
                             </li>
                         {{/each}}
                     </ul>
-                    {{else}}
-                        <div class="flex flex-col items-center text-center my-4">
-                            <div class="mb-4">
-                                <h4 class="dark:text-gray-100">No {{pluralize this.resource}}</h4>
-                            </div>
+                {{else}}
+                    <div class="flex flex-col items-center text-center my-4">
+                        <div class="mb-4">
+                            <h4 class="dark:text-gray-100">No {{pluralize this.resource}}</h4>
                         </div>
+                    </div>
                 {{/each-in}}
                 {{#if @customBottomItemComponent}}
                     <ul class="relative z-0 divide-y divide-gray-200 dark:divide-gray-900">
                         <li>
                             <div class="relative flex items-center space-x-3 hover:bg-gray-50 dark:hover:bg-gray-700 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-400">
                                 <div class="flex-1 min-w-0">
-                                    {{component @customBottomItemComponent onClick=@customBottomItemOnClick item=@customBottomItem text=@customBottomItemText wrapperClass=@customBottomItemClass}}
+                                    {{component
+                                        @customBottomItemComponent
+                                        onClick=@customBottomItemOnClick
+                                        item=@customBottomItem
+                                        text=@customBottomItemText
+                                        wrapperClass=@customBottomItemClass
+                                    }}
                                 </div>
                             </div>
                         </li>

diff --git a/addon/components/attach/popover.hbs b/addon/components/attach/popover.hbs
@@ -1,13 +1,26 @@
 <div {{did-insert this.setupComponent}}>
     {{#if (and this.currentTarget (or (not this.lazyRender) this.mustRender))}}
-        <Floating id={{this.id}} class="ember-attacher" @ariaRole={{@ariaRole}} @placement={{this.placement}} @container={{this.floatingContainer}} @target={{this.currentTarget}} @registerAPI={{this.registerAPI}} @renderInPlace={{this.renderInPlace}} @arrow={{this.arrow}} @offset={{@offset}} @shiftOptions={{@shiftOptions}} as |floating|>
+        <Floating
+            id={{this.id}}
+            class="ember-attacher"
+            @ariaRole={{@ariaRole}}
+            @placement={{this.placement}}
+            @container={{this.floatingContainer}}
+            @target={{this.currentTarget}}
+            @registerAPI={{this.registerAPI}}
+            @renderInPlace={{this.renderInPlace}}
+            @arrow={{this.arrow}}
+            @offset={{@offset}}
+            @shiftOptions={{@shiftOptions}}
+            as |floating|
+        >
             <div class="{{this.className}} {{@classNames}}" style={{this.computedStyle}}>
                 {{yield floating}}
 
                 {{#if this.arrow}}
                     <div x-arrow></div>
                 {{/if}}
-                {{#if (eq this.animation 'fill')}}
+                {{#if (eq this.animation "fill")}}
                     <div x-circle style={{this.circleTransitionDuration}}></div>
                 {{/if}}
             </div>

diff --git a/addon/components/attach/tooltip.hbs b/addon/components/attach/tooltip.hbs
@@ -1 +1,19 @@
-<Attach::Popover @classNames="ember-attacher-tooltip" @ariaRole="tooltip" @renderInPlace={{@renderInPlace}} @placement={{this.placement}} @arrow={{@arrow}} @offset={{@offset}} @shiftOptions={{@shiftOptions}} @animation={{@animation}} @hideOn={{@hideOn}} @showOn={{@showOn}} @interactive={{@interactive}} @isShown={{@isShown}} @lazyRender={{@lazyRender}} @showDelay={{@showDelay}} @showDuration={{@showDuration}} @transitionDuration={{@transitionDuration}} ...attributes>{{yield}}</Attach::Popover>
+<Attach::Popover
+    @classNames="ember-attacher-tooltip"
+    @ariaRole="tooltip"
+    @renderInPlace={{@renderInPlace}}
+    @placement={{this.placement}}
+    @arrow={{@arrow}}
+    @offset={{@offset}}
+    @shiftOptions={{@shiftOptions}}
+    @animation={{@animation}}
+    @hideOn={{@hideOn}}
+    @showOn={{@showOn}}
+    @interactive={{@interactive}}
+    @isShown={{@isShown}}
+    @lazyRender={{@lazyRender}}
+    @showDelay={{@showDelay}}
+    @showDuration={{@showDuration}}
+    @transitionDuration={{@transitionDuration}}
+    ...attributes
+>{{yield}}</Attach::Popover>
diff --git a/addon/components/autocomplete-input.hbs b/addon/components/autocomplete-input.hbs
@@ -1,14 +1,28 @@
 <div class="fleetbase-autocomplete-input relative {{@wrapperClass}}">
     <div class="relative">
-        <Input @type="text" name="geocoder-autocomplete-search" @value={{@value}} class="form-input" {{on "input" this.onInput}} {{on "blur" this.onBlur}} {{on "focus" this.onFocus}} autocomplete="nope" autofill="nope" ...attributes />
+        <Input
+            @type="text"
+            name="geocoder-autocomplete-search"
+            @value={{@value}}
+            class="form-input"
+            {{on "input" this.onInput}}
+            {{on "blur" this.onBlur}}
+            {{on "focus" this.onFocus}}
+            autocomplete="nope"
+            autofill="nope"
+            ...attributes
+        />
         {{#if this.isLoading}}
             <div class="absolute inset-y-0 right-0 h-full w-10 pr-1 flex items-center justify-center">
                 <Spinner @iconClass="text-sky-500 fa-spin-800ms" />
             </div>
         {{/if}}
     </div>
 
-    <div class="fleetbase-autocomplete-input--results absolute w-full mt-1 rounded-md bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm {{if this.hideResults "hidden"}}">
+    <div
+        class="fleetbase-autocomplete-input--results absolute w-full mt-1 rounded-md bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm
+            {{if this.hideResults 'hidden'}}"
+    >
         {{#if this.isLoading}}
             <div class="fleetbase-autocomplete-input--results-result flex px-4 py-2 text-gray-700 dark:text-gray-100 dark-hover:bg-gray-700 hover:bg-gray-50">
                 <div class="flex text-center items-center justify-center">
@@ -18,7 +32,13 @@
             </div>
         {{/if}}
         {{#each this.results as |result index|}}
-            <a href="javascript:;" {{on "click" (fn this.selectResult result)}} class="{{if (eq index 0) 'rounded-t'}} {{if (eq (add index 1) this.results.length) 'rounded-b border-b-0' 'border-b'}} fleetbase-autocomplete-input--results-result flex px-4 py-2 text-gray-700 dark:text-gray-100 dark:hover:bg-gray-700 hover:bg-gray-50 border-gray-200 dark:border-gray-700">
+            <a
+                href="javascript:;"
+                {{on "click" (fn this.selectResult result)}}
+                class="{{if (eq index 0) 'rounded-t'}}
+                    {{if (eq (add index 1) this.results.length) 'rounded-b border-b-0' 'border-b'}}
+                    fleetbase-autocomplete-input--results-result flex px-4 py-2 text-gray-700 dark:text-gray-100 dark:hover:bg-gray-700 hover:bg-gray-50 border-gray-200 dark:border-gray-700"
+            >
                 {{yield result this.value}}
             </a>
         {{/each}}

diff --git a/addon/components/badge.hbs b/addon/components/badge.hbs
@@ -1,6 +1,6 @@
 <div class="status-badge {{safe-dasherize (or @type @status)}}-status-badge" ...attributes>
-    <span class="inline-flex items-center {{unless @roundedFull "px-2 py-0.5 rounded" "badge-rounded-full"}} text-xs font-medium leading-4 whitespace-no-wrap {{@spanClass}}">
-        <svg class="{{unless @hideText "mr-1.5"}} h-2 w-2 {{if @hideStatusDot "hidden"}}" fill="currentColor" viewBox="0 0 8 8">
+    <span class="inline-flex items-center {{unless @roundedFull 'px-2 py-0.5 rounded' 'badge-rounded-full'}} text-xs font-medium leading-4 whitespace-no-wrap {{@spanClass}}">
+        <svg class="{{unless @hideText 'mr-1.5'}} h-2 w-2 {{if @hideStatusDot 'hidden'}}" fill="currentColor" viewBox="0 0 8 8">
             <circle cx="4" cy="4" r="3"></circle>
         </svg>
         {{#if (has-block)}}
@@ -15,7 +15,7 @@
             {{/unless}}
         {{/if}}
         {{#if @helpText}}
-            <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top" }}>
+            <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
                 <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
             </Attach::Tooltip>
         {{/if}}

diff --git a/addon/components/basic-dropdown-hover.hbs b/addon/components/basic-dropdown-hover.hbs
@@ -1,15 +1,24 @@
-<BasicDropdown @renderInPlace={{@renderInPlace}} @verticalPosition={{@verticalPosition}} @horizontalPosition={{@horizontalPosition}} @matchTriggerWidth={{@matchTriggerWidth}} @triggerComponent={{@triggerComponent}} @contentComponent={{@contentComponent}} @calculatePosition={{@calculatePosition}} @onOpen={{@onOpen}} @onClose={{@onClose}} @onFocus={{@onFocus}} @calculateInPlacePosition={{@calculateInPlacePosition}} as |dd|>
-    {{yield (assign
-    dd
-    (hash
-      Trigger=(component dd.Trigger
-        onMouseDown=this.prevent
-        onMouseEnter=this.open
-        onMouseLeave=this.close)
-      Content=(component dd.Content
-        onMouseEnter=this.open
-        onMouseLeave=this.close
-      )
-    )
-  )}}
+<BasicDropdown
+    @renderInPlace={{@renderInPlace}}
+    @verticalPosition={{@verticalPosition}}
+    @horizontalPosition={{@horizontalPosition}}
+    @matchTriggerWidth={{@matchTriggerWidth}}
+    @triggerComponent={{@triggerComponent}}
+    @contentComponent={{@contentComponent}}
+    @calculatePosition={{@calculatePosition}}
+    @onOpen={{@onOpen}}
+    @onClose={{@onClose}}
+    @onFocus={{@onFocus}}
+    @calculateInPlacePosition={{@calculateInPlacePosition}}
+    as |dd|
+>
+    {{yield
+        (assign
+            dd
+            (hash
+                Trigger=(component dd.Trigger onMouseDown=this.prevent onMouseEnter=this.open onMouseLeave=this.close)
+                Content=(component dd.Content onMouseEnter=this.open onMouseLeave=this.close)
+            )
+        )
+    }}
 </BasicDropdown>
diff --git a/addon/components/button.hbs b/addon/components/button.hbs
@@ -1,13 +1,27 @@
 <span class="btn-wrapper {{@wrapperClass}} inline-flex rounded-md {{if this.isNotSecondary 'shadow-sm'}} {{if @isLoading 'is-loading'}}" {{did-insert this.setupComponent}}>
-    <button class="btn {{if @isLoading 'btn-is-loading'}} {{if @outline 'btn-outline'}} btn-{{or @type 'default'}} btn-{{or @size 'sm'}}" disabled={{this.isDisabled}} ...attributes type={{or @buttonType "button"}} {{on "click" this.onClick}}>
+    <button
+        class="btn {{if @isLoading 'btn-is-loading'}} {{if @outline 'btn-outline'}} btn-{{or @type 'default'}} btn-{{or @size 'sm'}}"
+        disabled={{this.isDisabled}}
+        ...attributes
+        type={{or @buttonType "button"}}
+        {{on "click" this.onClick}}
+    >
         {{#if @isLoading}}
             <span class="btn-icon-wrapper btn-loading-icon-wrapper" data-icon-prefix={{@iconPrefix}}>
                 <Spinner @width={{or @loaderWidth 14}} @height={{or @loaderHeight 14}} />
             </span>
         {{/if}}
         {{#if this.showIcon}}
             <span class="btn-icon-wrapper" data-icon-prefix={{@iconPrefix}}>
-                <FaIcon @prefix={{@iconPrefix}} @icon={{@icon}} @size={{@iconSize}} @rotation={{@iconRotation}} @flip={{@iconFlip}} @spin={{@iconSpin}} class="{{if @text 'mr-2'}} {{@iconClass}}" />
+                <FaIcon
+                    @prefix={{@iconPrefix}}
+                    @icon={{@icon}}
+                    @size={{@iconSize}}
+                    @rotation={{@iconRotation}}
+                    @flip={{@iconFlip}}
+                    @spin={{@iconSpin}}
+                    class="{{if @text 'mr-2'}} {{@iconClass}}"
+                />
             </span>
         {{/if}}
         {{#if @text}}