feat(text randomizer): implement text randomizer and toggle between wheel #14
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,260 @@ | ||
| diff --git a/node_modules/wired-elements/lib/wired-item.d.ts b/node_modules/wired-elements/lib/wired-item.d.ts | ||
| index b2ee940..c6d4465 100644 | ||
| --- a/node_modules/wired-elements/lib/wired-item.d.ts | ||
| +++ b/node_modules/wired-elements/lib/wired-item.d.ts | ||
| @@ -3,6 +3,7 @@ import { TemplateResult, CSSResultArray } from 'lit'; | ||
| export declare class WiredItem extends WiredBase { | ||
| value: string; | ||
| name: string; | ||
| + disabled: boolean; | ||
| selected: boolean; | ||
| static get styles(): CSSResultArray; | ||
| render(): TemplateResult; | ||
| diff --git a/node_modules/wired-elements/lib/wired-item.js b/node_modules/wired-elements/lib/wired-item.js | ||
| index e9c5d3c..a07b161 100644 | ||
| --- a/node_modules/wired-elements/lib/wired-item.js | ||
| +++ b/node_modules/wired-elements/lib/wired-item.js | ||
| @@ -16,6 +16,7 @@ let WiredItem = class WiredItem extends WiredBase { | ||
| super(...arguments); | ||
| this.value = ''; | ||
| this.name = ''; | ||
| + this.disabled = false; | ||
| this.selected = false; | ||
| } | ||
| static get styles() { | ||
| @@ -69,6 +70,12 @@ let WiredItem = class WiredItem extends WiredBase { | ||
| button:active span { | ||
| transform: scale(1.02); | ||
| } | ||
| + button[disabled] { | ||
| + opacity: 0.6 !important; | ||
| + background: rgba(0, 0, 0, 0.07); | ||
| + cursor: default; | ||
| + pointer-events: none; | ||
| + } | ||
| #overlay { | ||
| display: none; | ||
| } | ||
| @@ -91,7 +98,7 @@ let WiredItem = class WiredItem extends WiredBase { | ||
| } | ||
| render() { | ||
| return html ` | ||
| - <button class="${this.selected ? 'selected' : ''}"> | ||
| + <button class="${this.selected ? 'selected' : ''}" ?disabled="${this.disabled}"> | ||
| <div id="overlay"><svg></svg></div> | ||
| <span><slot></slot></span> | ||
| </button>`; | ||
| @@ -122,6 +129,10 @@ __decorate([ | ||
| property({ type: Boolean }), | ||
| __metadata("design:type", Object) | ||
| ], WiredItem.prototype, "selected", void 0); | ||
| +__decorate([ | ||
| + property({ type: Boolean }), | ||
| + __metadata("design:type", Object) | ||
| +], WiredItem.prototype, "disabled", void 0); | ||
| WiredItem = __decorate([ | ||
| customElement('wired-item') | ||
| ], WiredItem); | ||
| diff --git a/node_modules/wired-elements/lib/wired-lib.js b/node_modules/wired-elements/lib/wired-lib.js | ||
|
There was a problem hiding this comment. cara bikinnya ini gimana ji? BIkin file perubahannya, terus di diff sendiri dan hasil diffnya masukkin sini? There was a problem hiding this comment. o ini ada caranya, maap, habis ini saya tambahin di READMEnya |
||
| index 5b1d153..9d3ec39 100644 | ||
| --- a/node_modules/wired-elements/lib/wired-lib.js | ||
| +++ b/node_modules/wired-elements/lib/wired-lib.js | ||
| @@ -90,7 +90,7 @@ export function ellipse(parent, x, y, width, height, seed) { | ||
| } | ||
| export function hachureFill(points, seed) { | ||
| const hf = new ZigZagFiller(fillHelper); | ||
| - const ops = hf.fillPolygon(points, options(seed)); | ||
| + const ops = hf.fillPolygons([points], options(seed)); | ||
| return createPathNode(ops, null); | ||
| } | ||
| export function hachureEllipseFill(cx, cy, width, height, seed) { | ||
| diff --git a/node_modules/wired-elements/lib/wired-tab.d.ts b/node_modules/wired-elements/lib/wired-tab.d.ts | ||
| index 0ba5fe7..45270d9 100644 | ||
| --- a/node_modules/wired-elements/lib/wired-tab.d.ts | ||
| +++ b/node_modules/wired-elements/lib/wired-tab.d.ts | ||
| @@ -4,6 +4,8 @@ import './wired-item.js'; | ||
| export declare class WiredTab extends WiredBase { | ||
| name: string; | ||
| label: string; | ||
| + disabled?: boolean; | ||
| + hasBorder?: boolean; | ||
| private resizeObserver?; | ||
| private windowResizeHandler?; | ||
| constructor(); | ||
| diff --git a/node_modules/wired-elements/lib/wired-tab.js b/node_modules/wired-elements/lib/wired-tab.js | ||
| index 505dc90..ac69e4d 100644 | ||
| --- a/node_modules/wired-elements/lib/wired-tab.js | ||
| +++ b/node_modules/wired-elements/lib/wired-tab.js | ||
| @@ -17,6 +17,8 @@ let WiredTab = class WiredTab extends WiredBase { | ||
| super(); | ||
| this.name = ''; | ||
| this.label = ''; | ||
| + this.disabled = false; | ||
| + this.hasBorder = true; | ||
| if (window.ResizeObserver) { | ||
| this.resizeObserver = new window.ResizeObserver(() => { | ||
| if (this.svg) { | ||
| @@ -74,7 +76,9 @@ let WiredTab = class WiredTab extends WiredBase { | ||
| return [s.width, s.height]; | ||
| } | ||
| draw(svg, s) { | ||
| - rectangle(svg, 2, 2, s[0] - 4, s[1] - 4, this.seed); | ||
| + if (this.hasBorder) { | ||
|
|
||
| + rectangle(svg, 2, 2, s[0] - 4, s[1] - 4, this.seed); | ||
| + } | ||
| } | ||
| }; | ||
| __decorate([ | ||
| @@ -85,6 +89,14 @@ __decorate([ | ||
| property({ type: String }), | ||
| __metadata("design:type", Object) | ||
| ], WiredTab.prototype, "label", void 0); | ||
| +__decorate([ | ||
| + property({ type: Boolean }), | ||
| + __metadata("design:type", Object) | ||
| +], WiredTab.prototype, "hasBorder", void 0); | ||
| +__decorate([ | ||
| + property({ type: Boolean }), | ||
| + __metadata("design:type", Object) | ||
| +], WiredTab.prototype, "disabled", void 0); | ||
| WiredTab = __decorate([ | ||
| customElement('wired-tab'), | ||
| __metadata("design:paramtypes", []) | ||
| diff --git a/node_modules/wired-elements/lib/wired-tabs.d.ts b/node_modules/wired-elements/lib/wired-tabs.d.ts | ||
| index cb2b68f..138f4a5 100644 | ||
| --- a/node_modules/wired-elements/lib/wired-tabs.d.ts | ||
| +++ b/node_modules/wired-elements/lib/wired-tabs.d.ts | ||
| @@ -1,6 +1,7 @@ | ||
| import { TemplateResult, CSSResultArray, LitElement } from 'lit'; | ||
| export declare class WiredTabs extends LitElement { | ||
| selected?: string; | ||
| + alignment?: string; | ||
| private slotElement?; | ||
| private pages; | ||
| private pageMap; | ||
| diff --git a/node_modules/wired-elements/lib/wired-tabs.js b/node_modules/wired-elements/lib/wired-tabs.js | ||
| index f9dfb28..aa4f88a 100644 | ||
| --- a/node_modules/wired-elements/lib/wired-tabs.js | ||
| +++ b/node_modules/wired-elements/lib/wired-tabs.js | ||
| @@ -7,14 +7,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, | ||
| var __metadata = (this && this.__metadata) || function (k, v) { | ||
| if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); | ||
| }; | ||
| -import { BaseCSS } from './wired-base'; | ||
| +import { fireEvent, BaseCSS } from './wired-base'; | ||
| import { css, html, LitElement } from 'lit'; | ||
| import { customElement, property, query } from 'lit/decorators.js'; | ||
| +import { classMap } from 'lit-html/directives/class-map'; | ||
| + | ||
| let WiredTabs = class WiredTabs extends LitElement { | ||
| constructor() { | ||
| super(...arguments); | ||
| this.pages = []; | ||
| this.pageMap = new Map(); | ||
| + this.alignment = 'left'; | ||
| } | ||
| static get styles() { | ||
| return [ | ||
| @@ -39,15 +42,33 @@ let WiredTabs = class WiredTabs extends LitElement { | ||
| -webkit-flex-direction: row; | ||
| flex-direction: row; | ||
| } | ||
| + | ||
| + .left { | ||
| + justify-content: flex-start; | ||
| + } | ||
| + .center { | ||
| + justify-content: center; | ||
| + } | ||
| + .right { | ||
| + justify-content: flex-end; | ||
| + } | ||
| ` | ||
| ]; | ||
| } | ||
| + onTabClick(page) { | ||
| + if (page.__disabled) { | ||
| + return; | ||
| + } | ||
| + | ||
| + this.selected = page.name; | ||
| + this.fireSelected(); | ||
| + } | ||
| render() { | ||
| return html ` | ||
| - <div id="bar"> | ||
| + <div id="bar" class=${classMap({ [this.alignment]: true })}> | ||
| ${this.pages.map((p) => html ` | ||
| - <wired-item role="tab" .value="${p.name}" .selected="${p.name === this.selected}" ?aria-selected="${p.name === this.selected}" | ||
| - @click="${() => this.selected = p.name}">${p.label || p.name}</wired-item> | ||
| + <wired-item role="tab" .disabled="${p.__disabled}" .value="${p.name}" .selected="${p.name === this.selected}" ?aria-selected="${p.name === this.selected}" | ||
| + @click="${() => this.onTabClick(p)}">${p.label || p.name}</wired-item> | ||
| `)} | ||
| </div> | ||
| <div> | ||
| @@ -66,7 +87,10 @@ let WiredTabs = class WiredTabs extends LitElement { | ||
| if (n.nodeType === Node.ELEMENT_NODE && n.tagName.toLowerCase() === 'wired-tab') { | ||
| const e = n; | ||
| this.pages.push(e); | ||
| - const name = e.getAttribute('name') || ''; | ||
| + // PATCHNOTE(imballinst): I don't know what's going on, but | ||
| + // there is no `name` attribute, nor is `__name` (in the DOM), | ||
| + // but we can access `__name` directly. | ||
| + const name = e.__name || ''; | ||
| if (name) { | ||
| name.trim().split(' ').forEach((nameSegment) => { | ||
| if (nameSegment) { | ||
| @@ -105,6 +129,11 @@ let WiredTabs = class WiredTabs extends LitElement { | ||
| } | ||
| updated() { | ||
| const newPage = this.getElement(); | ||
| + | ||
| + if (newPage.__disabled) { | ||
| + return; | ||
| + } | ||
| + | ||
| for (let i = 0; i < this.pages.length; i++) { | ||
| const p = this.pages[i]; | ||
| if (p === newPage) { | ||
| @@ -148,7 +177,13 @@ let WiredTabs = class WiredTabs extends LitElement { | ||
| else { | ||
| index--; | ||
| } | ||
| + | ||
| + if (list[index].__disabled) { | ||
| + return; | ||
| + } | ||
| + | ||
| this.selected = list[index].name || ''; | ||
| + this.fireSelected(); | ||
| } | ||
| } | ||
| selectNext() { | ||
| @@ -170,14 +205,27 @@ let WiredTabs = class WiredTabs extends LitElement { | ||
| else { | ||
| index++; | ||
| } | ||
| + | ||
| + if (list[index].__disabled) { | ||
| + return; | ||
| + } | ||
| + | ||
| this.selected = list[index].name || ''; | ||
| + this.fireSelected(); | ||
| } | ||
| } | ||
| + fireSelected() { | ||
| + fireEvent(this, 'selected', { selected: this.selected }); | ||
| + } | ||
|
Comment on lines
+246
to
+248
There was a problem hiding this comment. @ans-4175 begini kurang lebih cara saya nambahin event emitter (?) di komponennya There was a problem hiding this comment. okay, berarti nanti dibacanya di atasnya |
||
| }; | ||
| __decorate([ | ||
| property({ type: String }), | ||
| __metadata("design:type", String) | ||
| ], WiredTabs.prototype, "selected", void 0); | ||
| +__decorate([ | ||
| + property({ type: String }), | ||
| + __metadata("design:type", String) | ||
| +], WiredTabs.prototype, "alignment", void 0); | ||
| __decorate([ | ||
| query('slot'), | ||
| __metadata("design:type", HTMLSlotElement) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| diff --git a/node_modules/wired-elements-react/lib/WiredItem.d.ts b/node_modules/wired-elements-react/lib/WiredItem.d.ts | ||
| index 65b8bcd..2bf7b3e 100644 | ||
| --- a/node_modules/wired-elements-react/lib/WiredItem.d.ts | ||
| +++ b/node_modules/wired-elements-react/lib/WiredItem.d.ts | ||
| @@ -1,5 +1,6 @@ | ||
| import * as React from 'react'; | ||
| import { WiredItem as _WiredItem } from 'wired-elements/lib/wired-item.js'; | ||
| export declare const WiredItem: React.ForwardRefExoticComponent<Partial<_WiredItem> & {} & { | ||
| + disabled?: boolean; | ||
| children?: React.ReactNode; | ||
| } & React.RefAttributes<unknown>>; | ||
| diff --git a/node_modules/wired-elements-react/lib/WiredTab.d.ts b/node_modules/wired-elements-react/lib/WiredTab.d.ts | ||
| index 9c3d248..d1e1ab9 100644 | ||
| --- a/node_modules/wired-elements-react/lib/WiredTab.d.ts | ||
| +++ b/node_modules/wired-elements-react/lib/WiredTab.d.ts | ||
| @@ -2,4 +2,5 @@ import * as React from 'react'; | ||
| import { WiredTab as CE } from 'wired-elements/lib/wired-tab.js'; | ||
| export declare const WiredTab: React.ForwardRefExoticComponent<Partial<CE> & {} & { | ||
| children?: React.ReactNode; | ||
| + disabled?: boolean; | ||
| } & React.RefAttributes<unknown>>; | ||
| diff --git a/node_modules/wired-elements-react/lib/WiredTabs.d.ts b/node_modules/wired-elements-react/lib/WiredTabs.d.ts | ||
| index cbafd3d..3299a2a 100644 | ||
| --- a/node_modules/wired-elements-react/lib/WiredTabs.d.ts | ||
| +++ b/node_modules/wired-elements-react/lib/WiredTabs.d.ts | ||
| @@ -1,5 +1,8 @@ | ||
| import * as React from 'react'; | ||
| import { WiredTabs as CE } from 'wired-elements/lib/wired-tabs.js'; | ||
| -export declare const WiredTabs: React.ForwardRefExoticComponent<Partial<CE> & {} & { | ||
| +export declare const WiredTabs: React.ForwardRefExoticComponent<Partial<CE> & { | ||
| + onselected?: ((e: Event) => unknown) | undefined; | ||
| +} & { | ||
| + alignment?: string; | ||
| children?: React.ReactNode; | ||
| } & React.RefAttributes<unknown>>; | ||
| diff --git a/node_modules/wired-elements-react/lib/WiredTabs.js b/node_modules/wired-elements-react/lib/WiredTabs.js | ||
| index 6c93459..461610a 100644 | ||
| --- a/node_modules/wired-elements-react/lib/WiredTabs.js | ||
| +++ b/node_modules/wired-elements-react/lib/WiredTabs.js | ||
| @@ -1,4 +1,6 @@ | ||
| import * as React from 'react'; | ||
| import { createComponent } from '@lit-labs/react'; | ||
| import { WiredTabs as CE } from 'wired-elements/lib/wired-tabs.js'; | ||
| -export const WiredTabs = createComponent(React, 'wired-tabs', CE); | ||
| +export const WiredTabs = createComponent(React, 'wired-tabs', CE, { | ||
| + onselected: 'selected' | ||
ans-4175 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| +}); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hoo baru tahu begini, berarti ini auto jalan?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
iyak, jadi urutannya:
yarn-->node_modulesterinstall (raw) -->patch-package(apply diff dari patches yang ada)