✨ Read only (click to copy)

codewithkyle · codewithkyle · commit 5ae7b6f01ae2 · 2023-11-06T16:10:19.000-05:00
diff --git a/src/framework/components/buttons/button/button.scss b/src/framework/components/buttons/button/button.scss
@@ -205,7 +205,6 @@ button-component {
     & > svg {
         width: 20px;
         height: 20px;
-        transform: translateY(-1px);
     }
 
     &[kind="solid"] {
@@ -941,4 +940,11 @@ button-component {
             }
         }
     }
+
+    span {
+        display: inline-block;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
diff --git a/src/framework/components/inputs/date-input/date-input.ts b/src/framework/components/inputs/date-input/date-input.ts
@@ -14,7 +14,6 @@ export interface IDateInput extends IInputBase {
     autocapitalize: "off" | "on";
     icon: string;
     placeholder: string;
-    readOnly: boolean;
     autofocus: boolean;
     value: string;
     dateFormat: string;
@@ -49,7 +48,6 @@ export default class DateInput extends InputBase<IDateInput> {
             },
         };
         this.model = {
-            readOnly: false,
             label: "",
             instructions: null,
             error: null,
@@ -76,7 +74,6 @@ export default class DateInput extends InputBase<IDateInput> {
 
     static get observedAttributes() {
         return [
-            "data-read-only",
             "data-label",
             "data-instructions",
             "data-name",
diff --git a/src/framework/components/inputs/date-input/index.html b/src/framework/components/inputs/date-input/index.html
@@ -2,6 +2,7 @@
     data-label="Example"
     data-icon='<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>'
     data-mode="single"
+    class="mb-2"
 ></date-input-component>
 
 <script>
diff --git a/src/framework/components/inputs/date-input/readme.md b/src/framework/components/inputs/date-input/readme.md
@@ -17,7 +17,6 @@
 | autocapitalize | "on" or "off" | |
 | icon | string | |
 | placeholder | string | |
-| readOnly | boolean | |
 | autofocus | boolean | |
 | value | string | |
 | dateFormat | string | |
diff --git a/src/framework/components/inputs/email-input/email-input.ts b/src/framework/components/inputs/email-input/email-input.ts
@@ -16,7 +16,6 @@ export default class EmailInput extends InputBase<IInput> {
         this.model = {
             label: "",
             instructions: null,
-            readOnly: false,
             error: null,
             name: "",
             required: false,
@@ -47,7 +46,6 @@ export default class EmailInput extends InputBase<IInput> {
             "data-maxlength",
             "data-minlength",
             "data-disabled",
-            "data-read-only",
             "data-datalist",
             "data-autofocus",
         ];
diff --git a/src/framework/components/inputs/input/index.html b/src/framework/components/inputs/input/index.html
@@ -4,9 +4,16 @@
     data-instructions="This is an example input."
     data-icon='<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" /></svg>'S
     data-type="text"
-    data-minlength="2"
-    data-maxlength="5"
+    class="mb-2"
 ></input-component>
+
+<input-component
+    data-label="Example"
+    data-type="text"
+    data-read-only="true"
+    data-value="This is a read-only input."
+></input-component>
+
 <script>
     const inputComponent = document.querySelector('input-component');
     inputComponent.addEventListener('input', (event) => {
diff --git a/src/framework/components/inputs/input/input.scss b/src/framework/components/inputs/input/input.scss
@@ -3,6 +3,14 @@
     width: 100%;
     position: relative;
 
+    &[readonly] {
+        input-container {
+            input {
+                padding-right: 2.5rem;
+            }
+        }
+    }
+
     &[state="DISABLED"] {
         cursor: not-allowed !important;
 
@@ -91,7 +99,7 @@
             color: var(--grey-300);
             background-color: hsl(var(--white-hsl) / 0.05);
 
-            &:focus {
+            &:focus:not(:read-only) {
                 background-color: hsl(var(--white-hsl) / 0);
             }
 
@@ -123,7 +131,7 @@
         border: var(--input-border);
         background-color: var(--white);
         transition: all 80ms var(--ease-in-out);
-        box-shadow: 0 1px 0 hsl(0deg 0% 0% / 0.1);
+        box-shadow: 0 1px 1px hsl(var(--black-hsl) / 0.1);
         outline-offset: 0;
 
         &:focus-within {
diff --git a/src/framework/components/inputs/input/input.ts b/src/framework/components/inputs/input/input.ts
@@ -3,8 +3,9 @@ import { html, render, TemplateResult } from "lit-html";
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
 import env from "~brixi/controllers/env";
 import { InputBase, IInputBase } from "../input-base";
+import alerts from "~brixi/controllers/alerts";
 
-env.css("input");
+env.css(["input", "button", "toast"]);
 
 export interface IInput extends IInputBase {
     label: string;
@@ -15,7 +16,7 @@ export interface IInput extends IInputBase {
     placeholder: string;
     maxlength: number;
     minlength: number;
-    readOnly: boolean;
+    readOnly?: boolean;
     datalist: string[];
     autofocus: boolean;
     value: string;
@@ -137,6 +138,13 @@ export default class Input extends InputBase<IInput> {
         );
     };
 
+    private handleCopyClick: EventListener = (e: Event) => {
+        e.stopImmediatePropagation();
+        window.navigator.clipboard.writeText(this.model.value).then(() => {
+            alerts.toast("Copied to clipboard");
+        });
+    };
+
     private renderCopy(): string | TemplateResult {
         let output: string | TemplateResult = "";
         if (this.state === "IDLING" && this.model.instructions) {
@@ -155,6 +163,32 @@ export default class Input extends InputBase<IInput> {
         return output;
     }
 
+    private renderReadOnlyIcon(): string | TemplateResult {
+        let output: string | TemplateResult = "";
+        if (this.model.readOnly) {
+            output = html`
+                <button class="bttn absolute r-0 b-0" kind="text" color="primary" size="slim" icon="center" dull @click=${this.handleCopyClick} type="button">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        stroke-width="2"
+                        stroke="currentColor"
+                        fill="none"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    >
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                        <path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path>
+                        <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path>
+                    </svg>
+                </button>
+            `;
+        }
+        return output;
+    }
+
     private renderLabel(): string | TemplateResult {
         let output: string | TemplateResult = "";
         if (this.model.label?.length) {
@@ -180,6 +214,9 @@ export default class Input extends InputBase<IInput> {
     render() {
         this.setAttribute("state", this.state);
         this.classList.add("input");
+        if (this.model.readOnly) {
+            this.setAttribute("readonly", `${this.model.readOnly}`);
+        }
         const view = html`
             ${this.renderLabel()} ${this.renderCopy()}
             <input-container>
@@ -201,7 +238,9 @@ export default class Input extends InputBase<IInput> {
                     ?disabled=${this.model.disabled}
                     list="${this.model.datalist.length ? `${this.inputId}-datalist` : ""}"
                     ?autofocus=${this.model.autofocus}
+                    ?readonly=${this.model.readOnly}
                 />
+                ${this.renderReadOnlyIcon()}
             </input-container>
             ${this.renderDatalist()}
         `;
diff --git a/src/framework/components/inputs/number-input/number-input.ts b/src/framework/components/inputs/number-input/number-input.ts
@@ -11,7 +11,6 @@ interface INumberInput extends IInputBase {
     instructions: string;
     icon: string;
     placeholder: string;
-    readOnly: boolean;
     autofocus: boolean;
     value: number | null;
     min: number;
@@ -27,7 +26,6 @@ export default class NumberInput extends InputBase<INumberInput> {
         this.model = {
             label: "",
             instructions: null,
-            readOnly: false,
             error: null,
             name: "",
             required: false,
@@ -56,7 +54,6 @@ export default class NumberInput extends InputBase<INumberInput> {
             "data-autofocus",
             "data-name",
             "data-required",
-            "data-read-only",
         ];
     }
 
diff --git a/src/framework/components/inputs/number-input/readme.md b/src/framework/components/inputs/number-input/readme.md
@@ -26,7 +26,6 @@
 | max | number | |
 | step | number | |
 | disabled | boolean | |
-| readOnly | boolean | |
 | autofocus | boolean | |
 
 Not sure what Data Attributes are? Learn about [Data Attributes on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*).
diff --git a/src/framework/components/inputs/password-input/password-input.ts b/src/framework/components/inputs/password-input/password-input.ts
@@ -14,7 +14,6 @@ interface IPasswordInput extends IInputBase {
     placeholder: string;
     maxlength: number;
     minlength: number;
-    readOnly: boolean;
     autofocus: boolean;
     value: string;
     type: "text" | "password";
@@ -28,7 +27,6 @@ export default class PasswordInput extends InputBase<IPasswordInput> {
         this.model = {
             label: "",
             instructions: null,
-            readOnly: false,
             error: null,
             name: "",
             required: false,
@@ -58,7 +56,6 @@ export default class PasswordInput extends InputBase<IPasswordInput> {
             "data-maxlength",
             "data-minlength",
             "data-autofocus",
-            "data-read-only",
         ];
     }
 
diff --git a/src/framework/components/inputs/password-input/readme.md b/src/framework/components/inputs/password-input/readme.md
@@ -20,7 +20,6 @@
 | placeholder | string | |
 | value | number | |
 | disabled | boolean | |
-| readOnly | boolean | |
 | autofocus | boolean | |
 | maxlength | number | |
 | minlength | number | |
diff --git a/src/framework/components/inputs/phone-input/phone-input.ts b/src/framework/components/inputs/phone-input/phone-input.ts
@@ -12,7 +12,6 @@ interface IPhoneInput extends IInputBase {
     autocomplete: string;
     icon: string;
     placeholder: string;
-    readOnly: boolean;
     datalist: string[];
     autofocus: boolean;
     value: string;
@@ -26,7 +25,6 @@ export default class PhoneInput extends InputBase<IPhoneInput> {
         this.model = {
             label: "",
             instructions: null,
-            readOnly: false,
             error: null,
             name: "",
             required: false,
@@ -41,19 +39,7 @@ export default class PhoneInput extends InputBase<IPhoneInput> {
     }
 
     static get observedAttributes() {
-        return [
-            "data-label",
-            "data-instructions",
-            "data-name",
-            "data-required",
-            "data-icon",
-            "data-placeholder",
-            "data-value",
-            "data-disabled",
-            "data-datalist",
-            "data-autofocus",
-            "data-read-only",
-        ];
+        return ["data-label", "data-instructions", "data-name", "data-required", "data-icon", "data-placeholder", "data-value", "data-disabled", "data-datalist", "data-autofocus"];
     }
 
     override validate(): boolean {
diff --git a/src/framework/components/inputs/phone-input/readme.md b/src/framework/components/inputs/phone-input/readme.md
@@ -18,7 +18,6 @@
 | placeholder | string | |
 | value | string | |
 | disabled | boolean | |
-| readOnly | boolean | |
 | datalist | string[] | |
 | autofocus | boolean | |
 
diff --git a/src/framework/components/inputs/range-slider/range-slider.ts b/src/framework/components/inputs/range-slider/range-slider.ts
@@ -207,6 +207,7 @@ export default class RangeSlider extends InputBase<IRangeSlider> {
                     max=${this.model.max}
                     step=${this.model.step}
                     .value=${this.model.value}
+                    ?readonly=${this.model.readOnly}
                 />
             `;
         }
@@ -259,6 +260,7 @@ export default class RangeSlider extends InputBase<IRangeSlider> {
                     ?required=${this.model.required}
                     ?disalbed=${this.model.disabled}
                     ?autofocus=${this.model.autofocus}
+                    ?readonly=${this.model.readOnly}
                 />
                 ${this.renderManualInput()}
             </input-container>
diff --git a/src/framework/components/textarea/index.html b/src/framework/components/textarea/index.html
@@ -6,6 +6,19 @@
     data-placeholder="Send a message to our support team..."
     data-rows="3"
     data-maxlength="250"
+    class="mb-2"
+></textarea-component>
+
+<textarea-component
+    data-label="Example"
+    data-required="true"
+    data-name="example"
+    data-instructions="This is an <a class='link' href='https://example.com' target='_blank'>example</a> input."
+    data-placeholder="Send a message to our support team..."
+    data-rows="3"
+    data-maxlength="250"
+    data-read-only="true"
+    data-value="This is a read-only input."
 ></textarea-component>
 
 <link href="/css/link.css" rel="stylesheet" />
diff --git a/src/framework/components/textarea/textarea.scss b/src/framework/components/textarea/textarea.scss
diff --git a/src/framework/components/textarea/textarea.ts b/src/framework/components/textarea/textarea.ts

Original file line number	Diff line number	Diff line change
`@@ -205,7 +205,6 @@ button-component {`
`205`	`205`	`& > svg {`
`206`	`206`	`width: 20px;`
`207`	`207`	`height: 20px;`
`208`		`- transform: translateY(-1px);`
`209`	`208`	`}`
`210`	`209`
`211`	`210`	`&[kind="solid"] {`
`@@ -941,4 +940,11 @@ button-component {`
`941`	`940`	`}`
`942`	`941`	`}`
`943`	`942`	`}`
	`943`	`+`
	`944`	`+ span {`
	`945`	`+ display: inline-block;`
	`946`	`+ flex: 1;`
	`947`	`+ overflow: hidden;`
	`948`	`+ text-overflow: ellipsis;`
	`949`	`+ }`
`944`	`950`	`}`