From 36ad49b90eab8001e7ba893aa7f73dd7fcdd4d93 Mon Sep 17 00:00:00 2001 From: Gao Sun Date: Fri, 19 Jul 2024 10:42:03 +0800 Subject: [PATCH 1/2] feat(elements): init modal and input --- packages/elements/README.md | 8 +- packages/elements/package.json | 7 +- .../elements/src/components/logto-button.ts | 2 +- .../src/components/logto-card-section.ts | 6 +- .../src/components/logto-form-card.ts | 6 +- .../src/components/logto-icon-button.ts | 51 +++++++++++ .../src/components/logto-modal-layout.ts | 62 +++++++++++++ .../src/components/logto-modal.context.ts | 16 ++++ .../elements/src/components/logto-modal.ts | 88 +++++++++++++++++++ .../src/components/logto-text-input.ts | 85 ++++++++++++++++++ .../src/elements/logto-profile-card.ts | 36 +++++++- packages/elements/src/icons/close.svg | 5 ++ packages/elements/src/icons/index.d.ts | 4 + packages/elements/src/index.ts | 4 + packages/elements/src/utils/theme.ts | 21 +++++ packages/elements/tsup.config.ts | 15 ++++ packages/elements/web-dev-server.config.js | 12 +++ packages/elements/xliff/de.xlf | 19 ++-- packages/elements/xliff/es.xlf | 19 ++-- packages/elements/xliff/fr.xlf | 19 ++-- packages/elements/xliff/it.xlf | 19 ++-- packages/elements/xliff/ja.xlf | 19 ++-- packages/elements/xliff/ko.xlf | 25 ++++-- packages/elements/xliff/pl-PL.xlf | 19 ++-- packages/elements/xliff/pt-BR.xlf | 19 ++-- packages/elements/xliff/pt-PT.xlf | 19 ++-- packages/elements/xliff/ru.xlf | 19 ++-- packages/elements/xliff/tr-TR.xlf | 19 ++-- packages/elements/xliff/zh-CN.xlf | 19 ++-- packages/elements/xliff/zh-HK.xlf | 19 ++-- packages/elements/xliff/zh-TW.xlf | 19 ++-- pnpm-lock.yaml | 13 +++ 32 files changed, 627 insertions(+), 86 deletions(-) create mode 100644 packages/elements/src/components/logto-icon-button.ts create mode 100644 packages/elements/src/components/logto-modal-layout.ts create mode 100644 packages/elements/src/components/logto-modal.context.ts create mode 100644 packages/elements/src/components/logto-modal.ts create mode 100644 packages/elements/src/components/logto-text-input.ts create mode 100644 packages/elements/src/icons/close.svg create mode 100644 packages/elements/src/icons/index.d.ts diff --git a/packages/elements/README.md b/packages/elements/README.md index 81b2c6464..f52f12edb 100644 --- a/packages/elements/README.md +++ b/packages/elements/README.md @@ -31,11 +31,11 @@ When using `msg()`, a human-readable ID should be used, and it is highly recomme ```ts // ✅ Good -msg('Not available', { - id: 'form-card.fallback-title', - desc: 'The fallback title of a form card when the title is not provided.', +msg('Not set', { + id: 'general.fallback-title', + desc: 'A fallback title when the title or heading of a component is not provided.', }) // ❌ Bad -msg('Not available') +msg('Not set') ``` diff --git a/packages/elements/package.json b/packages/elements/package.json index 3599cd569..d1bcbded3 100644 --- a/packages/elements/package.json +++ b/packages/elements/package.json @@ -28,14 +28,15 @@ }, "scripts": { "precommit": "lint-staged", - "build": "pnpm check && lit-localize build && tsup", + "build:only": "lit-localize build && tsup", + "build": "pnpm check && pnpm build:only", "start": "web-dev-server", "dev": "lit-localize build && tsup --watch --no-splitting", "lint": "eslint --ext .ts src", "lint:report": "pnpm lint --format json --output-file report.json", "test": "echo \"No tests yet.\"", "test:ci": "pnpm run test --silent --coverage", - "prepack": "pnpm build", + "prepack": "pnpm build:only", "localize": "lit-localize", "check": "if command -v git &> /dev/null; then lit-localize extract && git add . -N && git diff --exit-code; fi" }, @@ -46,6 +47,7 @@ "url": "https://github.com/logto-io/logto/issues" }, "dependencies": { + "@lit/context": "^1.1.2", "@lit/localize": "^0.12.1", "@lit/react": "^1.0.5", "@silverhand/essentials": "^2.9.1", @@ -55,6 +57,7 @@ "@lit/localize-tools": "^0.7.2", "@silverhand/eslint-config": "6.0.1", "@silverhand/ts-config": "6.0.0", + "@types/node": "^20.9.5", "@web/dev-server": "^0.4.6", "@web/dev-server-esbuild": "^1.0.2", "eslint": "^8.56.0", diff --git a/packages/elements/src/components/logto-button.ts b/packages/elements/src/components/logto-button.ts index 78972cfbe..5f6d7c4a0 100644 --- a/packages/elements/src/components/logto-button.ts +++ b/packages/elements/src/components/logto-button.ts @@ -32,7 +32,7 @@ export class LogtoButton extends LitElement { :host([type='text']) { background: none; - border-color: none; + border-color: transparent; font: ${vars.fontLabel2}; color: ${vars.colorTextLink}; padding: ${unit(0.5, 1)}; diff --git a/packages/elements/src/components/logto-card-section.ts b/packages/elements/src/components/logto-card-section.ts index 3ce9da6af..2f3a365d1 100644 --- a/packages/elements/src/components/logto-card-section.ts +++ b/packages/elements/src/components/logto-card-section.ts @@ -21,9 +21,9 @@ export class LogtoCardSection extends LitElement { `; @property() - heading = msg('Not available', { - id: 'form-card.fallback-title', - desc: 'The fallback title of a form card when the title is not provided.', + heading = msg('Not set', { + id: 'general.fallback-title', + desc: 'A fallback title when the title or heading of a component is not provided.', }); render() { diff --git a/packages/elements/src/components/logto-form-card.ts b/packages/elements/src/components/logto-form-card.ts index 6252d8393..329295ca2 100644 --- a/packages/elements/src/components/logto-form-card.ts +++ b/packages/elements/src/components/logto-form-card.ts @@ -57,9 +57,9 @@ export class LogtoFormCard extends LitElement { `; @property() - heading = msg('Not available', { - id: 'form-card.fallback-title', - desc: 'The fallback title of a form card when the title is not provided.', + heading = msg('Not set', { + id: 'general.fallback-title', + desc: 'A fallback title when the title or heading of a component is not provided.', }); @property() diff --git a/packages/elements/src/components/logto-icon-button.ts b/packages/elements/src/components/logto-icon-button.ts new file mode 100644 index 000000000..9f363bc51 --- /dev/null +++ b/packages/elements/src/components/logto-icon-button.ts @@ -0,0 +1,51 @@ +import { LitElement, html, css } from 'lit'; +import { customElement } from 'lit/decorators.js'; + +import { unit } from '../utils/css.js'; +import { vars } from '../utils/theme.js'; + +const tagName = 'logto-icon-button'; + +@customElement(tagName) +export class LogtoIconButton extends LitElement { + static tagName = tagName; + + static styles = css` + :host { + all: unset; + border-radius: ${unit(1.5)}; + transition: background 0.2s ease-in-out; + padding: ${unit(1)}; + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + } + + :host(:disabled) { + cursor: not-allowed; + } + + :host(:focus-visible) { + background: ${vars.colorFocused}; + } + + :host(:not(:disabled):hover) { + background: ${vars.colorHover}; + } + + ::slotted(svg) { + color: ${vars.colorTextSecondary}; + } + `; + + connectedCallback(): void { + super.connectedCallback(); + this.role = 'button'; + this.tabIndex = 0; + } + + render() { + return html``; + } +} diff --git a/packages/elements/src/components/logto-modal-layout.ts b/packages/elements/src/components/logto-modal-layout.ts new file mode 100644 index 000000000..0035ffa86 --- /dev/null +++ b/packages/elements/src/components/logto-modal-layout.ts @@ -0,0 +1,62 @@ +import { consume } from '@lit/context'; +import { localized, msg } from '@lit/localize'; +import { cond, noop } from '@silverhand/essentials'; +import { LitElement, html, css } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; + +import closeIcon from '../icons/close.svg'; +import { unit } from '../utils/css.js'; +import { vars } from '../utils/theme.js'; + +import { ModalContext, type ModalContextType } from './logto-modal.context.js'; + +const tagName = 'logto-modal-layout'; + +/** + * A typical layout for a modal. It includes a header, a footer, and a slot for the content. + * + * Note: A consumable modal context ({@link ModalContext}) is required to use this component. + */ +@customElement(tagName) +@localized() +export class LogtoModalLayout extends LitElement { + static tagName = tagName; + + static styles = css` + header { + font: ${vars.fontTitle1}; + color: ${vars.colorTextPrimary}; + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: ${unit(6)}; + } + + h1 { + all: unset; + } + `; + + @property({ reflect: true }) + heading = msg('Not set', { + id: 'general.fallback-title', + desc: 'A fallback title when the title or heading of a component is not provided.', + }); + + @consume({ context: ModalContext }) + context!: ModalContextType; + + render() { + return html` +
+

${this.heading}

+ ${cond( + this.context.onClose !== noop && + html`${closeIcon}` + )} +
+ + + `; + } +} diff --git a/packages/elements/src/components/logto-modal.context.ts b/packages/elements/src/components/logto-modal.context.ts new file mode 100644 index 000000000..099560e84 --- /dev/null +++ b/packages/elements/src/components/logto-modal.context.ts @@ -0,0 +1,16 @@ +import { createContext } from '@lit/context'; +import { noop } from '@silverhand/essentials'; + +/** @see {@link ModalContext} */ +export type ModalContextType = { onClose: () => void }; + +/** + * Context for the modal component. It's useful for operating the modal from deep in the component + * tree. For example, closing the modal from a child component. + */ +export const ModalContext = createContext('modal-context'); + +/** The default value for the modal context. */ +export const modalContext: ModalContextType = { + onClose: noop, +}; diff --git a/packages/elements/src/components/logto-modal.ts b/packages/elements/src/components/logto-modal.ts new file mode 100644 index 000000000..925da1e67 --- /dev/null +++ b/packages/elements/src/components/logto-modal.ts @@ -0,0 +1,88 @@ +import { provide } from '@lit/context'; +import { noop } from '@silverhand/essentials'; +import { LitElement, html, css, type PropertyValues } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { type Ref, createRef, ref } from 'lit/directives/ref.js'; + +import { unit } from '../utils/css.js'; +import { vars } from '../utils/theme.js'; + +import { ModalContext, modalContext } from './logto-modal.context.js'; + +const tagName = 'logto-modal'; + +@customElement(tagName) +export class LogtoModal extends LitElement { + static tagName = tagName; + + static styles = css` + dialog { + padding: 0; + border: none; + color: ${vars.colorTextPrimary}; + background: ${vars.colorLayer1}; + border-radius: ${unit(4)}; + padding: ${unit(6)}; + width: 95%; + max-width: 600px; + min-width: 300px; + } + + dialog::backdrop { + background-color: ${vars.colorOverlay}; + } + `; + + @property({ type: Boolean, reflect: true }) + open = false; + + @property() + onClose = noop; + + @provide({ context: ModalContext }) + context = modalContext; + + protected dialogRef: Ref = createRef(); + + render() { + return html` { + // The "right" way should be to use the `@cancel` event, but it doesn't always work and the + // browser support is unknown. See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/cancel_event#browser_compatibility + if (event.key === 'Escape') { + event.preventDefault(); + this.onClose(); + } + }} + > + + `; + } + + protected toggleDialog() { + if (this.open) { + this.dialogRef.value?.showModal(); + } else { + this.dialogRef.value?.close(); + } + } + + protected handlePropertiesChange(changedProperties: PropertyValues) { + if (changedProperties.has('open')) { + this.toggleDialog(); + } + + if (changedProperties.has('onClose')) { + this.context.onClose = this.onClose; + } + } + + protected firstUpdated(changedProperties: PropertyValues): void { + this.handlePropertiesChange(changedProperties); + } + + protected updated(changedProperties: PropertyValues): void { + this.handlePropertiesChange(changedProperties); + } +} diff --git a/packages/elements/src/components/logto-text-input.ts b/packages/elements/src/components/logto-text-input.ts new file mode 100644 index 000000000..e915648ce --- /dev/null +++ b/packages/elements/src/components/logto-text-input.ts @@ -0,0 +1,85 @@ +import { LitElement, css, html } from 'lit'; +import { customElement, property, queryAssignedElements } from 'lit/decorators.js'; + +import { unit } from '../utils/css.js'; +import { vars } from '../utils/theme.js'; + +const tagName = 'logto-text-input'; + +@customElement(tagName) +export class LogtoTextInput extends LitElement { + static tagName = tagName; + static styles = css` + :host { + display: flex; + position: relative; + border-radius: ${unit(1.5)}; + border: 1px solid ${vars.colorBorder}; + outline: 3px solid transparent; + transition-property: outline, border; + transition-timing-function: ease-in-out; + transition-duration: 0.2s; + height: 36px; + background: ${vars.colorLayer1}; + font: ${vars.fontBody2}; + padding: 0 ${unit(3)}; + } + + :host(:focus-within) { + border-color: ${vars.colorPrimary}; + outline-color: ${vars.colorFocusedVariant}; + } + + :host([disabled]) { + background: ${vars.colorDisabledBackground}; + color: ${vars.colorTextSecondary}; + border-color: ${vars.colorBorder}; + cursor: not-allowed; + } + + :host([readonly]) { + background: ${vars.colorLayer2}; + } + + :host([readonly]:focus-within) { + border-color: ${vars.colorBorder}; + outline-color: transparent; + } + + ::slotted(input) { + all: unset; + flex: 1; + color: ${vars.colorTextPrimary}; + } + + ::slotted(input::placeholder) { + color: ${vars.colorPlaceholder}; + } + + ::slotted(input:webkit-autofill) { + box-shadow: 0 0 0 ${unit(6)} ${vars.colorLayer1} inset; + -webkit-text-fill-color: ${vars.colorTextPrimary}; + caret-color: ${vars.colorTextPrimary}; + } + `; + + @property({ type: Boolean, reflect: true }) + disabled = false; + + @property({ type: Boolean, reflect: true }) + readonly = false; + + @queryAssignedElements({ selector: 'input' }) + slotInputs!: HTMLInputElement[]; + + render() { + return html``; + } + + protected handleSlotChange() { + if (this.slotInputs[0] && this.slotInputs.length === 1) { + this.disabled = this.slotInputs[0].disabled; + this.readonly = this.slotInputs[0].readOnly; + } + } +} diff --git a/packages/elements/src/elements/logto-profile-card.ts b/packages/elements/src/elements/logto-profile-card.ts index 31fcc9bd3..abe1baaa8 100644 --- a/packages/elements/src/elements/logto-profile-card.ts +++ b/packages/elements/src/elements/logto-profile-card.ts @@ -1,6 +1,6 @@ import { localized, msg } from '@lit/localize'; import { LitElement, css, html } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import { customElement, state } from 'lit/decorators.js'; import { vars } from '../utils/theme.js'; @@ -16,6 +16,9 @@ export class LogtoProfileCard extends LitElement { } `; + @state() + updateNameOpened = false; + render() { return html` @@ -49,14 +52,41 @@ export class LogtoProfileCard extends LitElement {
John Doe
- - ${msg('Change', { id: 'general.change' })} + { + this.updateNameOpened = true; + }} + > + ${msg('Update', { id: 'general.update' })}
+ { + this.updateNameOpened = false; + }} + > + + + + + + `; } } diff --git a/packages/elements/src/icons/close.svg b/packages/elements/src/icons/close.svg new file mode 100644 index 000000000..8311c5ecf --- /dev/null +++ b/packages/elements/src/icons/close.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/elements/src/icons/index.d.ts b/packages/elements/src/icons/index.d.ts new file mode 100644 index 000000000..934842437 --- /dev/null +++ b/packages/elements/src/icons/index.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const value: string; + export default value; +} diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts index 9d2edf45a..3817fc0d7 100644 --- a/packages/elements/src/index.ts +++ b/packages/elements/src/index.ts @@ -3,8 +3,12 @@ export * from './components/logto-button.js'; export * from './components/logto-card-section.js'; export * from './components/logto-card.js'; export * from './components/logto-form-card.js'; +export * from './components/logto-icon-button.js'; export * from './components/logto-list-row.js'; export * from './components/logto-list.js'; +export * from './components/logto-modal-layout.js'; +export * from './components/logto-modal.js'; +export * from './components/logto-text-input.js'; export * from './components/logto-theme-provider.js'; export * from './elements/logto-profile-card.js'; export * from './utils/locale.js'; diff --git a/packages/elements/src/utils/theme.ts b/packages/elements/src/utils/theme.ts index 41a72810f..a30d54c46 100644 --- a/packages/elements/src/utils/theme.ts +++ b/packages/elements/src/utils/theme.ts @@ -14,13 +14,21 @@ export type Color = { colorLayer2: string; colorLineDivider: string; colorDisabled: string; + colorDisabledBackground: string; colorHover: string; colorHoverVariant: string; + colorPressed: string; + colorFocused: string; colorFocusedVariant: string; + colorOverlay: string; + colorPlaceholder: string; }; /** All the fonts to be used in the Logto components and elements. */ export type Font = { + fontTitle1: string; + fontTitle2: string; + fontTitle3: string; fontLabel1: string; fontLabel2: string; fontLabel3: string; @@ -38,6 +46,9 @@ export const defaultFontFamily = '-apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji'; export const defaultFont: Readonly = Object.freeze({ + fontTitle1: `600 20px / 28px ${defaultFontFamily}`, + fontTitle2: `600 16px / 24px ${defaultFontFamily}`, + fontTitle3: `600 14px / 20px ${defaultFontFamily}`, fontLabel1: `500 16px / 24px ${defaultFontFamily}`, fontLabel2: `500 14px / 20px ${defaultFontFamily}`, fontLabel3: `500 12px / 16px ${defaultFontFamily}`, @@ -60,9 +71,14 @@ export const defaultTheme: Readonly = Object.freeze({ colorLayer2: '#2d3132', colorLineDivider: '#191c1d1f', colorDisabled: '#5c5f60', + colorDisabledBackground: '#2d3132', colorHover: '#191c1d14', colorHoverVariant: '#5d34f214', + colorPressed: 'rgba(25, 28, 29, 12%)', + colorFocused: 'rgba(25, 28, 29, 16%)', colorFocusedVariant: '#5d34f229', + colorOverlay: '#000000b3', + colorPlaceholder: '#747778', }); export const darkTheme: Readonly = Object.freeze({ @@ -77,9 +93,14 @@ export const darkTheme: Readonly = Object.freeze({ colorLayer2: '#34353f', colorLineDivider: '#f7f8f824', colorDisabled: '#5c5f60', + colorDisabledBackground: '#2d3132', colorHover: '#f7f8f814', colorHoverVariant: '#cabeff14', + colorPressed: 'rgba(247, 248, 248, 12%)', + colorFocused: 'rgba(247, 248, 248, 16%)', colorFocusedVariant: '#cabeff29', + colorOverlay: '#0000003c', + colorPlaceholder: '#747778', }); /** diff --git a/packages/elements/tsup.config.ts b/packages/elements/tsup.config.ts index 6bbc8ee65..dc8124aee 100644 --- a/packages/elements/tsup.config.ts +++ b/packages/elements/tsup.config.ts @@ -1,3 +1,5 @@ +import fs from 'node:fs/promises'; + import { defineConfig } from 'tsup'; export default defineConfig({ @@ -5,4 +7,17 @@ export default defineConfig({ format: 'esm', dts: true, clean: true, + esbuildPlugins: [ + { + name: 'transform-svg', + setup: (build) => { + build.onLoad({ filter: /\.svg$/ }, async (arguments_) => { + const text = await fs.readFile(arguments_.path, 'utf8'); + return { + contents: `import { html } from 'lit';\nexport default html\`${text}\`;`, + }; + }); + }, + }, + ], }); diff --git a/packages/elements/web-dev-server.config.js b/packages/elements/web-dev-server.config.js index ea305a4b8..347bdf57e 100644 --- a/packages/elements/web-dev-server.config.js +++ b/packages/elements/web-dev-server.config.js @@ -15,6 +15,18 @@ const config = { ts: true, tsconfig: fileURLToPath(new URL('tsconfig.json', import.meta.url)), }), + // Transform SVG files into Lit templates + { + name: 'transform-svg', + transform(context) { + if (context.path.endsWith('.svg')) { + return { + body: `import { html } from 'lit';\nexport default html\`${context.body}\`;`, + headers: { 'content-type': 'application/javascript' }, + }; + } + }, + }, ], }; diff --git a/packages/elements/xliff/de.xlf b/packages/elements/xliff/de.xlf index 0e53b134a..fc84a5153 100644 --- a/packages/elements/xliff/de.xlf +++ b/packages/elements/xliff/de.xlf @@ -2,11 +2,6 @@ - - Not available - Nicht verfügbar - The fallback title of a form card when the title is not provided. - Profile @@ -25,6 +20,16 @@ Change + + Update + + + Update name + + + Not set + A fallback title when the title or heading of a component is not provided. + Avatar The avatar of the user. @@ -33,6 +38,10 @@ Name The name of the user. + + Person Doe + The placeholder for the name input field. + diff --git a/packages/elements/xliff/es.xlf b/packages/elements/xliff/es.xlf index 53dd698c9..c8b08b928 100644 --- a/packages/elements/xliff/es.xlf +++ b/packages/elements/xliff/es.xlf @@ -2,11 +2,6 @@ - - Not available - No disponible - The fallback title of a form card when the title is not provided. - Profile @@ -25,6 +20,16 @@ Change + + Update + + + Update name + + + Not set + A fallback title when the title or heading of a component is not provided. + Avatar The avatar of the user. @@ -33,6 +38,10 @@ Name The name of the user. + + Person Doe + The placeholder for the name input field. + diff --git a/packages/elements/xliff/fr.xlf b/packages/elements/xliff/fr.xlf index 9df324b9c..3455ec9cb 100644 --- a/packages/elements/xliff/fr.xlf +++ b/packages/elements/xliff/fr.xlf @@ -2,11 +2,6 @@ - - Not available - Non disponible - The fallback title of a form card when the title is not provided. - Profile @@ -25,6 +20,16 @@ Change + + Update + + + Update name + + + Not set + A fallback title when the title or heading of a component is not provided. + Avatar The avatar of the user. @@ -33,6 +38,10 @@ Name The name of the user. + + Person Doe + The placeholder for the name input field. + diff --git a/packages/elements/xliff/it.xlf b/packages/elements/xliff/it.xlf index ce400acd4..9d77072d1 100644 --- a/packages/elements/xliff/it.xlf +++ b/packages/elements/xliff/it.xlf @@ -2,11 +2,6 @@ - - Not available - Non disponibile - The fallback title of a form card when the title is not provided. - Profile @@ -25,6 +20,16 @@ Change + + Update + + + Update name + + + Not set + A fallback title when the title or heading of a component is not provided. + Avatar The avatar of the user. @@ -33,6 +38,10 @@ Name The name of the user. + + Person Doe + The placeholder for the name input field. + diff --git a/packages/elements/xliff/ja.xlf b/packages/elements/xliff/ja.xlf index 5e0fbaed5..38967b6ff 100644 --- a/packages/elements/xliff/ja.xlf +++ b/packages/elements/xliff/ja.xlf @@ -2,11 +2,6 @@ - - Not available - 利用できません - The fallback title of a form card when the title is not provided. - Profile @@ -25,6 +20,16 @@ Change + + Update + + + Update name + + + Not set + A fallback title when the title or heading of a component is not provided. + Avatar The avatar of the user. @@ -33,6 +38,10 @@ Name The name of the user. + + Person Doe + The placeholder for the name input field. + diff --git a/packages/elements/xliff/ko.xlf b/packages/elements/xliff/ko.xlf index 6cd31a4bb..efe708dd5 100644 --- a/packages/elements/xliff/ko.xlf +++ b/packages/elements/xliff/ko.xlf @@ -2,11 +2,6 @@ - - Not available - 사용할 수 없음 - The fallback title of a form card when the title is not provided. - Profile @@ -25,6 +20,19 @@ Change +<<<<<<< HEAD +======= + + Update + + + Update name + + + Not set + A fallback title when the title or heading of a component is not provided. + +>>>>>>> 70b24bb1b (feat(elements): init modal and input) Avatar The avatar of the user. @@ -33,6 +41,13 @@ Name The name of the user. +<<<<<<< HEAD +======= + + Person Doe + The placeholder for the name input field. + +>>>>>>> 70b24bb1b (feat(elements): init modal and input) diff --git a/packages/elements/xliff/pl-PL.xlf b/packages/elements/xliff/pl-PL.xlf index 8a65abb81..262c41f15 100644 --- a/packages/elements/xliff/pl-PL.xlf +++ b/packages/elements/xliff/pl-PL.xlf @@ -2,11 +2,6 @@ - - Not available - Niedostępne - The fallback title of a form card when the title is not provided. - Profile @@ -25,6 +20,16 @@ Change + + Update + + + Update name + + + Not set + A fallback title when the title or heading of a component is not provided. + Avatar The avatar of the user. @@ -33,6 +38,10 @@ Name The name of the user. + + Person Doe + The placeholder for the name input field. + diff --git a/packages/elements/xliff/pt-BR.xlf b/packages/elements/xliff/pt-BR.xlf index e1574529f..69b9a757b 100644 --- a/packages/elements/xliff/pt-BR.xlf +++ b/packages/elements/xliff/pt-BR.xlf @@ -2,11 +2,6 @@ - - Not available - Não disponível - The fallback title of a form card when the title is not provided. - Profile @@ -25,6 +20,16 @@ Change + + Update + + + Update name + + + Not set + A fallback title when the title or heading of a component is not provided. + Avatar The avatar of the user. @@ -33,6 +38,10 @@ Name The name of the user. + + Person Doe + The placeholder for the name input field. + diff --git a/packages/elements/xliff/pt-PT.xlf b/packages/elements/xliff/pt-PT.xlf index 062a94784..64a34ce90 100644 --- a/packages/elements/xliff/pt-PT.xlf +++ b/packages/elements/xliff/pt-PT.xlf @@ -2,11 +2,6 @@ - - Not available - Não disponível - The fallback title of a form card when the title is not provided. - Profile @@ -25,6 +20,16 @@ Change + + Update + + + Update name + + + Not set + A fallback title when the title or heading of a component is not provided. + Avatar The avatar of the user. @@ -33,6 +38,10 @@ Name The name of the user. + + Person Doe + The placeholder for the name input field. + diff --git a/packages/elements/xliff/ru.xlf b/packages/elements/xliff/ru.xlf index 83f8a10cc..f124ce581 100644 --- a/packages/elements/xliff/ru.xlf +++ b/packages/elements/xliff/ru.xlf @@ -2,11 +2,6 @@ - - Not available - Недоступно - The fallback title of a form card when the title is not provided. - Profile @@ -25,6 +20,16 @@ Change + + Update + + + Update name + + + Not set + A fallback title when the title or heading of a component is not provided. + Avatar The avatar of the user. @@ -33,6 +38,10 @@ Name The name of the user. + + Person Doe + The placeholder for the name input field. + diff --git a/packages/elements/xliff/tr-TR.xlf b/packages/elements/xliff/tr-TR.xlf index 0bb34a455..858133e89 100644 --- a/packages/elements/xliff/tr-TR.xlf +++ b/packages/elements/xliff/tr-TR.xlf @@ -2,11 +2,6 @@ - - Not available - Mevcut değil - The fallback title of a form card when the title is not provided. - Profile @@ -25,6 +20,16 @@ Change + + Update + + + Update name + + + Not set + A fallback title when the title or heading of a component is not provided. + Avatar The avatar of the user. @@ -33,6 +38,10 @@ Name The name of the user. + + Person Doe + The placeholder for the name input field. + diff --git a/packages/elements/xliff/zh-CN.xlf b/packages/elements/xliff/zh-CN.xlf index 38c7b3b59..0ea3ef0f3 100644 --- a/packages/elements/xliff/zh-CN.xlf +++ b/packages/elements/xliff/zh-CN.xlf @@ -2,11 +2,6 @@ - - Not available - 不可用 - The fallback title of a form card when the title is not provided. - Profile @@ -25,6 +20,16 @@ Change + + Update + + + Update name + + + Not set + A fallback title when the title or heading of a component is not provided. + Avatar The avatar of the user. @@ -33,6 +38,10 @@ Name The name of the user. + + Person Doe + The placeholder for the name input field. + diff --git a/packages/elements/xliff/zh-HK.xlf b/packages/elements/xliff/zh-HK.xlf index 62bf69680..c445a2794 100644 --- a/packages/elements/xliff/zh-HK.xlf +++ b/packages/elements/xliff/zh-HK.xlf @@ -2,11 +2,6 @@ - - Not available - 不可用 - The fallback title of a form card when the title is not provided. - Profile @@ -25,6 +20,16 @@ Change + + Update + + + Update name + + + Not set + A fallback title when the title or heading of a component is not provided. + Avatar The avatar of the user. @@ -33,6 +38,10 @@ Name The name of the user. + + Person Doe + The placeholder for the name input field. + diff --git a/packages/elements/xliff/zh-TW.xlf b/packages/elements/xliff/zh-TW.xlf index 5a8191598..ba19a711c 100644 --- a/packages/elements/xliff/zh-TW.xlf +++ b/packages/elements/xliff/zh-TW.xlf @@ -2,11 +2,6 @@ - - Not available - 不可用 - The fallback title of a form card when the title is not provided. - Profile @@ -25,6 +20,16 @@ Change + + Update + + + Update name + + + Not set + A fallback title when the title or heading of a component is not provided. + Avatar The avatar of the user. @@ -33,6 +38,10 @@ Name The name of the user. + + Person Doe + The placeholder for the name input field. + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5624de8d4..8593912e6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3560,6 +3560,9 @@ importers: packages/elements: dependencies: + '@lit/context': + specifier: ^1.1.2 + version: 1.1.2 '@lit/localize': specifier: ^0.12.1 version: 0.12.1 @@ -3582,6 +3585,9 @@ importers: '@silverhand/ts-config': specifier: 6.0.0 version: 6.0.0(typescript@5.5.3) + '@types/node': + specifier: ^20.9.5 + version: 20.12.7 '@web/dev-server': specifier: ^0.4.6 version: 0.4.6 @@ -5374,6 +5380,9 @@ packages: '@lit-labs/ssr-dom-shim@1.2.0': resolution: {integrity: sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==} + '@lit/context@1.1.2': + resolution: {integrity: sha512-S0nw2C6Tkm7fVX5TGYqeROGD+Z9Coa2iFpW+ysYBDH3YvCqOY3wVQvSgwbaliLJkjTnSEYCBe9qFqKV8WUFpVw==} + '@lit/localize-tools@0.7.2': resolution: {integrity: sha512-d5tehVao3Hz1DlTq6jy7TUYrCeyFi/E4BkzWr8MuAMjIM8aoKCR9s3cUw6m++8ZIiqGm2z7+6aHaPc/p1FGHyA==} hasBin: true @@ -15406,6 +15415,10 @@ snapshots: '@lit-labs/ssr-dom-shim@1.2.0': {} + '@lit/context@1.1.2': + dependencies: + '@lit/reactive-element': 2.0.4 + '@lit/localize-tools@0.7.2': dependencies: '@lit/localize': 0.12.1 From a5a8570d7a4c06c4ff58729eee2f5cae6b77583f Mon Sep 17 00:00:00 2001 From: Gao Sun Date: Mon, 22 Jul 2024 11:42:22 +0800 Subject: [PATCH 2/2] refactor: fix phrases --- packages/elements/xliff/de.xlf | 12 ++++++------ packages/elements/xliff/es.xlf | 12 ++++++------ packages/elements/xliff/fr.xlf | 12 ++++++------ packages/elements/xliff/it.xlf | 12 ++++++------ packages/elements/xliff/ja.xlf | 12 ++++++------ packages/elements/xliff/ko.xlf | 18 ++++++------------ packages/elements/xliff/pl-PL.xlf | 12 ++++++------ packages/elements/xliff/pt-BR.xlf | 12 ++++++------ packages/elements/xliff/pt-PT.xlf | 12 ++++++------ packages/elements/xliff/ru.xlf | 12 ++++++------ packages/elements/xliff/tr-TR.xlf | 12 ++++++------ packages/elements/xliff/zh-CN.xlf | 12 ++++++------ packages/elements/xliff/zh-HK.xlf | 12 ++++++------ packages/elements/xliff/zh-TW.xlf | 12 ++++++------ 14 files changed, 84 insertions(+), 90 deletions(-) diff --git a/packages/elements/xliff/de.xlf b/packages/elements/xliff/de.xlf index fc84a5153..44dc02786 100644 --- a/packages/elements/xliff/de.xlf +++ b/packages/elements/xliff/de.xlf @@ -2,12 +2,6 @@ - - Profile - - - Personal information - Title @@ -17,6 +11,12 @@ Actions + + Profile + + + Personal information + Change diff --git a/packages/elements/xliff/es.xlf b/packages/elements/xliff/es.xlf index c8b08b928..e523e4559 100644 --- a/packages/elements/xliff/es.xlf +++ b/packages/elements/xliff/es.xlf @@ -2,12 +2,6 @@ - - Profile - - - Personal information - Title @@ -17,6 +11,12 @@ Actions + + Profile + + + Personal information + Change diff --git a/packages/elements/xliff/fr.xlf b/packages/elements/xliff/fr.xlf index 3455ec9cb..3abe2d129 100644 --- a/packages/elements/xliff/fr.xlf +++ b/packages/elements/xliff/fr.xlf @@ -2,12 +2,6 @@ - - Profile - - - Personal information - Title @@ -17,6 +11,12 @@ Actions + + Profile + + + Personal information + Change diff --git a/packages/elements/xliff/it.xlf b/packages/elements/xliff/it.xlf index 9d77072d1..a80d9c2f9 100644 --- a/packages/elements/xliff/it.xlf +++ b/packages/elements/xliff/it.xlf @@ -2,12 +2,6 @@ - - Profile - - - Personal information - Title @@ -17,6 +11,12 @@ Actions + + Profile + + + Personal information + Change diff --git a/packages/elements/xliff/ja.xlf b/packages/elements/xliff/ja.xlf index 38967b6ff..f2d6614a9 100644 --- a/packages/elements/xliff/ja.xlf +++ b/packages/elements/xliff/ja.xlf @@ -2,12 +2,6 @@ - - Profile - - - Personal information - Title @@ -17,6 +11,12 @@ Actions + + Profile + + + Personal information + Change diff --git a/packages/elements/xliff/ko.xlf b/packages/elements/xliff/ko.xlf index efe708dd5..191b84845 100644 --- a/packages/elements/xliff/ko.xlf +++ b/packages/elements/xliff/ko.xlf @@ -2,12 +2,6 @@ - - Profile - - - Personal information - Title @@ -17,11 +11,15 @@ Actions + + Profile + + + Personal information + Change -<<<<<<< HEAD -======= Update @@ -32,7 +30,6 @@ Not set A fallback title when the title or heading of a component is not provided. ->>>>>>> 70b24bb1b (feat(elements): init modal and input) Avatar The avatar of the user. @@ -41,13 +38,10 @@ Name The name of the user. -<<<<<<< HEAD -======= Person Doe The placeholder for the name input field. ->>>>>>> 70b24bb1b (feat(elements): init modal and input) diff --git a/packages/elements/xliff/pl-PL.xlf b/packages/elements/xliff/pl-PL.xlf index 262c41f15..b358ffe8a 100644 --- a/packages/elements/xliff/pl-PL.xlf +++ b/packages/elements/xliff/pl-PL.xlf @@ -2,12 +2,6 @@ - - Profile - - - Personal information - Title @@ -17,6 +11,12 @@ Actions + + Profile + + + Personal information + Change diff --git a/packages/elements/xliff/pt-BR.xlf b/packages/elements/xliff/pt-BR.xlf index 69b9a757b..5ee50f852 100644 --- a/packages/elements/xliff/pt-BR.xlf +++ b/packages/elements/xliff/pt-BR.xlf @@ -2,12 +2,6 @@ - - Profile - - - Personal information - Title @@ -17,6 +11,12 @@ Actions + + Profile + + + Personal information + Change diff --git a/packages/elements/xliff/pt-PT.xlf b/packages/elements/xliff/pt-PT.xlf index 64a34ce90..c90939caf 100644 --- a/packages/elements/xliff/pt-PT.xlf +++ b/packages/elements/xliff/pt-PT.xlf @@ -2,12 +2,6 @@ - - Profile - - - Personal information - Title @@ -17,6 +11,12 @@ Actions + + Profile + + + Personal information + Change diff --git a/packages/elements/xliff/ru.xlf b/packages/elements/xliff/ru.xlf index f124ce581..ed631df88 100644 --- a/packages/elements/xliff/ru.xlf +++ b/packages/elements/xliff/ru.xlf @@ -2,12 +2,6 @@ - - Profile - - - Personal information - Title @@ -17,6 +11,12 @@ Actions + + Profile + + + Personal information + Change diff --git a/packages/elements/xliff/tr-TR.xlf b/packages/elements/xliff/tr-TR.xlf index 858133e89..14eddb612 100644 --- a/packages/elements/xliff/tr-TR.xlf +++ b/packages/elements/xliff/tr-TR.xlf @@ -2,12 +2,6 @@ - - Profile - - - Personal information - Title @@ -17,6 +11,12 @@ Actions + + Profile + + + Personal information + Change diff --git a/packages/elements/xliff/zh-CN.xlf b/packages/elements/xliff/zh-CN.xlf index 0ea3ef0f3..b4b558b6e 100644 --- a/packages/elements/xliff/zh-CN.xlf +++ b/packages/elements/xliff/zh-CN.xlf @@ -2,12 +2,6 @@ - - Profile - - - Personal information - Title @@ -17,6 +11,12 @@ Actions + + Profile + + + Personal information + Change diff --git a/packages/elements/xliff/zh-HK.xlf b/packages/elements/xliff/zh-HK.xlf index c445a2794..ccec972b9 100644 --- a/packages/elements/xliff/zh-HK.xlf +++ b/packages/elements/xliff/zh-HK.xlf @@ -2,12 +2,6 @@ - - Profile - - - Personal information - Title @@ -17,6 +11,12 @@ Actions + + Profile + + + Personal information + Change diff --git a/packages/elements/xliff/zh-TW.xlf b/packages/elements/xliff/zh-TW.xlf index ba19a711c..718b58ddc 100644 --- a/packages/elements/xliff/zh-TW.xlf +++ b/packages/elements/xliff/zh-TW.xlf @@ -2,12 +2,6 @@ - - Profile - - - Personal information - Title @@ -17,6 +11,12 @@ Actions + + Profile + + + Personal information + Change