mirror of
https://github.com/penpot/penpot.git
synced 2025-05-29 10:46:12 +02:00
✨ Add slots feature to DS input component
This commit is contained in:
parent
d9f98008f4
commit
887fa6b77b
5 changed files with 27 additions and 42 deletions
|
@ -36,7 +36,7 @@
|
|||
{::mf/props :obj
|
||||
::mf/forward-ref true
|
||||
::mf/schema schema:input}
|
||||
[{:keys [id class label is-optional type max-length variant hint-message hint-type children] :rest props} ref]
|
||||
[{:keys [id class label is-optional type max-length variant hint-message hint-type] :rest props} ref]
|
||||
(let [id (or id (mf/use-id))
|
||||
variant (d/nilv variant "dense")
|
||||
is-optional (d/nilv is-optional false)
|
||||
|
@ -58,7 +58,7 @@
|
|||
:has-hint has-hint))}
|
||||
(when has-label
|
||||
[:> label* {:for id :is-optional is-optional} label])
|
||||
[:> input-field* props children]
|
||||
[:> input-field* props]
|
||||
(when has-hint
|
||||
[:> hint-message* {:id id
|
||||
:message hint-message
|
||||
|
|
|
@ -25,13 +25,15 @@
|
|||
[:hint-type {:optional true} [:maybe [:enum "hint" "error" "warning"]]]
|
||||
[:type {:optional true} :string]
|
||||
[:max-length {:optional true} :int]
|
||||
[:variant {:optional true} [:enum "seamless" "dense" "comfortable"]]])
|
||||
[:variant {:optional true} [:enum "seamless" "dense" "comfortable"]]
|
||||
[:slot-start {:optional true} [:maybe some?]]
|
||||
[:slot-end {:optional true} [:maybe some?]]])
|
||||
|
||||
(mf/defc input-field*
|
||||
{::mf/props :obj
|
||||
::mf/forward-ref true
|
||||
::mf/schema schema:input-field}
|
||||
[{:keys [id icon has-hint hint-type class type max-length variant children] :rest props} ref]
|
||||
[{:keys [id icon has-hint hint-type class type max-length variant slot-start slot-end] :rest props} ref]
|
||||
(let [input-ref (mf/use-ref)
|
||||
type (d/nilv type "text")
|
||||
variant (d/nilv variant "dense")
|
||||
|
@ -65,8 +67,10 @@
|
|||
:variant-seamless (= variant "seamless")
|
||||
:variant-dense (= variant "dense")
|
||||
:variant-comfortable (= variant "comfortable")))}
|
||||
(when (some? slot-start)
|
||||
slot-start)
|
||||
(when (some? icon)
|
||||
[:> icon* {:icon-id icon :class (stl/css :icon) :on-click on-icon-click}])
|
||||
[:> "input" props]
|
||||
(when (some? children)
|
||||
[:div {:class (stl/css :input-actions)} children])]))
|
||||
(when (some? slot-end)
|
||||
slot-end)]))
|
||||
|
|
|
@ -11,6 +11,7 @@
|
|||
[app.common.data.macros :as dm]
|
||||
[app.main.ui.ds.controls.utilities.input-field :refer [input-field*]]
|
||||
[app.main.ui.ds.controls.utilities.label :refer [label*]]
|
||||
[app.main.ui.workspace.tokens.components.controls.input-token-color-bullet :refer [input-token-color-bullet*]]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def ^:private schema::input-tokens-value
|
||||
|
@ -19,15 +20,25 @@
|
|||
[:placeholder {:optional true} :string]
|
||||
[:value {:optional true} [:maybe :string]]
|
||||
[:class {:optional true} :string]
|
||||
[:color {:optional true} [:maybe :string]]
|
||||
[:display-colorpicker {:optional true} fn?]
|
||||
[:error {:optional true} :boolean]])
|
||||
|
||||
|
||||
(mf/defc input-tokens-value*
|
||||
{::mf/props :obj
|
||||
::mf/forward-ref true
|
||||
::mf/schema schema::input-tokens-value}
|
||||
[{:keys [class label placeholder error value children] :rest props} ref]
|
||||
[{:keys [class label placeholder error value color display-colorpicker] :rest props} ref]
|
||||
(let [id (mf/use-id)
|
||||
input-ref (mf/use-ref)
|
||||
swatch
|
||||
(when color
|
||||
(mf/html [:> input-token-color-bullet*
|
||||
{:color color
|
||||
:class (stl/css :slot-start)
|
||||
:on-click display-colorpicker}]))
|
||||
|
||||
props (mf/spread-props props {:id id
|
||||
:type "text"
|
||||
:class (stl/css :input)
|
||||
|
@ -35,11 +46,9 @@
|
|||
:value (d/nilv value "")
|
||||
:variant "comfortable"
|
||||
:hint-type (when error "error")
|
||||
:slot-start swatch
|
||||
:ref (or ref input-ref)})]
|
||||
[:div {:class (dm/str class " " (stl/css-case :wrapper true
|
||||
:input-error error))}
|
||||
[:> label* {:for id} label]
|
||||
[:div {:class (stl/css :input-wrapper)}
|
||||
(when (some? children)
|
||||
[:div {:class (stl/css :input-swatch)} children])
|
||||
[:> input-field* props]]]))
|
||||
[:> input-field* props]]))
|
||||
|
|
|
@ -31,28 +31,3 @@
|
|||
@include textEllipsis;
|
||||
color: var(--label-color);
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
|
||||
&:has(.input-swatch) {
|
||||
position: relative;
|
||||
|
||||
& .input {
|
||||
--input-text-indent: var(--sp-xxl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-swatch {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
inset-inline-start: var(--sp-s);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
|
@ -31,7 +31,6 @@
|
|||
[app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
|
||||
[app.main.ui.workspace.colorpicker :as colorpicker]
|
||||
[app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector*]]
|
||||
[app.main.ui.workspace.tokens.components.controls.input-token-color-bullet :refer [input-token-color-bullet*]]
|
||||
[app.main.ui.workspace.tokens.components.controls.input-tokens-value :refer [input-tokens-value*]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.functions :as uf]
|
||||
|
@ -563,13 +562,11 @@
|
|||
:label (tr "workspace.token.token-value")
|
||||
:value (mf/ref-val value-ref)
|
||||
:ref value-input-ref
|
||||
:color color
|
||||
:on-change on-update-value
|
||||
:error (not (nil? (:errors token-resolve-result)))
|
||||
:on-blur on-update-value}
|
||||
(when color?
|
||||
[:> input-token-color-bullet*
|
||||
{:color color
|
||||
:on-click on-display-colorpicker'}])]
|
||||
:display-colorpicker on-display-colorpicker'
|
||||
:on-blur on-update-value}]
|
||||
(when color-ramp-open?
|
||||
[:> ramp* {:color (some-> color (tinycolor/valid-color))
|
||||
:on-change on-update-color}])
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue