Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Release 0.1.0 #53

Merged
merged 5 commits into from
Apr 17, 2024
Merged

Release 0.1.0 #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
809d4c6
feat: diff functions
WilcoSp Apr 17, 2024
1b5d333
docs: adds diffs to docs
justin-schroeder Apr 17, 2024
5874536
chore: bumps tests to latest actions
justin-schroeder Apr 17, 2024
d42a114
feat: existing "Z" token is now "ZZ" adds "Z" token style (#52)
Toru-Takagi Apr 17, 2024
d38b8c1
chore: adjusts time format < full to be ZZ
justin-schroeder Apr 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .github/workflows/release.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ jobs:
permissions:
contents: write
steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4
with:
fetch-depth: 0

- uses: actions/setup-node@v3
- uses: actions/setup-node@v4
with:
node-version: lts/*

Expand Down
6 changes: 2 additions & 4 deletions .github/workflows/tests.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ jobs:
vitest-run:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: pnpm/action-setup@v2
with:
version: 8
- uses: actions/checkout@v4
- run: corepack enable
- run: pnpm install
- run: pnpm test
208 changes: 124 additions & 84 deletions docs/components/content/Format.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,25 @@ import sizes from "../../assets/func-sizes.json"
/>
</div>

<FunctionReference function="format" :arguments="[
{
name: 'date',
type: 'Date | string',
comment: 'strings must be ISO 8601',
},
{ name: 'format', type: 'string | object' },
{ name: 'locale?', type: 'string' },
]" :overload="[
{
name: 'options',
type: 'FormatOptions',
},
]" return="string" />
<FunctionReference
function="format"
:arguments="[
{
name: 'date',
type: 'Date | string',
comment: 'strings must be ISO 8601',
},
{ name: 'format', type: 'string | object' },
{ name: 'locale?', type: 'string' },
]"
:overload="[
{
name: 'options',
type: 'FormatOptions',
},
]"
return="string"
/>
<p>Tempo’s <code>format()</code> function outputs dates in two ways:</p>
<ul class="jump-list">
<li>
Expand Down Expand Up @@ -83,11 +88,14 @@ import sizes from "../../assets/func-sizes.json"
</td>
<td>
<code>en</code>
<ClientOnly>{{ format(new Date(), "full", "en") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "full", "en") }}</ClientOnly
><br />
<code>de</code>
<ClientOnly>{{ format(new Date(), "full", "de") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "full", "de") }}</ClientOnly
><br />
<code>zh</code>
<ClientOnly>{{ format(new Date(), "full", "zh") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "full", "zh") }}</ClientOnly
><br />
</td>
</tr>
<tr>
Expand All @@ -96,11 +104,14 @@ import sizes from "../../assets/func-sizes.json"
</td>
<td>
<code>en</code>
<ClientOnly>{{ format(new Date(), "long", "en") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "long", "en") }}</ClientOnly
><br />
<code>de</code>
<ClientOnly>{{ format(new Date(), "long", "de") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "long", "de") }}</ClientOnly
><br />
<code>zh</code>
<ClientOnly>{{ format(new Date(), "long", "zh") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "long", "zh") }}</ClientOnly
><br />
</td>
</tr>
<tr>
Expand All @@ -109,11 +120,14 @@ import sizes from "../../assets/func-sizes.json"
</td>
<td>
<code>en</code>
<ClientOnly>{{ format(new Date(), "medium", "en") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "medium", "en") }}</ClientOnly
><br />
<code>de</code>
<ClientOnly>{{ format(new Date(), "medium", "de") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "medium", "de") }}</ClientOnly
><br />
<code>zh</code>
<ClientOnly>{{ format(new Date(), "medium", "zh") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "medium", "zh") }}</ClientOnly
><br />
</td>
</tr>
<tr>
Expand All @@ -122,11 +136,14 @@ import sizes from "../../assets/func-sizes.json"
</td>
<td>
<code>en</code>
<ClientOnly>{{ format(new Date(), "short", "en") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "short", "en") }}</ClientOnly
><br />
<code>de</code>
<ClientOnly>{{ format(new Date(), "short", "de") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "short", "de") }}</ClientOnly
><br />
<code>zh</code>
<ClientOnly>{{ format(new Date(), "short", "zh") }}</ClientOnly><br />
<ClientOnly>{{ format(new Date(), "short", "zh") }}</ClientOnly
><br />
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -155,15 +172,18 @@ import sizes from "../../assets/func-sizes.json"
<code>en</code>
<ClientOnly>{{
format(new Date(), { time: "full" }, "en")
}}</ClientOnly><br />
}}</ClientOnly
><br />
<code>de</code>
<ClientOnly>{{
format(new Date(), { time: "full" }, "de")
}}</ClientOnly><br />
}}</ClientOnly
><br />
<code>zh</code>
<ClientOnly>{{
format(new Date(), { time: "full" }, "zh")
}}</ClientOnly><br />
}}</ClientOnly
><br />
</td>
</tr>
<tr>
Expand All @@ -174,15 +194,18 @@ import sizes from "../../assets/func-sizes.json"
<code>en</code>
<ClientOnly>{{
format(new Date(), { time: "long" }, "en")
}}</ClientOnly><br />
}}</ClientOnly
><br />
<code>de</code>
<ClientOnly>{{
format(new Date(), { time: "long" }, "de")
}}</ClientOnly><br />
}}</ClientOnly
><br />
<code>zh</code>
<ClientOnly>{{
format(new Date(), { time: "long" }, "zh")
}}</ClientOnly><br />
}}</ClientOnly
><br />
</td>
</tr>
<tr>
Expand All @@ -193,15 +216,18 @@ import sizes from "../../assets/func-sizes.json"
<code>en</code>
<ClientOnly>{{
format(new Date(), { time: "medium" }, "en")
}}</ClientOnly><br />
}}</ClientOnly
><br />
<code>de</code>
<ClientOnly>{{
format(new Date(), { time: "medium" }, "de")
}}</ClientOnly><br />
}}</ClientOnly
><br />
<code>zh</code>
<ClientOnly>{{
format(new Date(), { time: "medium" }, "zh")
}}</ClientOnly><br />
}}</ClientOnly
><br />
</td>
</tr>
<tr>
Expand All @@ -212,15 +238,18 @@ import sizes from "../../assets/func-sizes.json"
<code>en</code>
<ClientOnly>{{
format(new Date(), { time: "short" }, "en")
}}</ClientOnly><br />
}}</ClientOnly
><br />
<code>de</code>
<ClientOnly>{{
format(new Date(), { time: "short" }, "de")
}}</ClientOnly><br />
}}</ClientOnly
><br />
<code>zh</code>
<ClientOnly>{{
format(new Date(), { time: "short" }, "zh")
}}</ClientOnly><br />
}}</ClientOnly
><br />
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -351,8 +380,13 @@ import sizes from "../../assets/func-sizes.json"
</tr>
<tr>
<td><code>Z</code></td>
<td>+08:00, +05:30, -13:45</td>
<td>The timezone offset from GMT (<code>[+-]HH:mm</code>)</td>
</tr>
<tr>
<td><code>ZZ</code></td>
<td>+0800, +0530, -1345</td>
<td>The timezone offset from GMT</td>
<td>The timezone offset from GMT (<code>[+-]HHmm</code>)</td>
</tr>
</tbody>
</table>
Expand All @@ -362,50 +396,53 @@ import sizes from "../../assets/func-sizes.json"
The <code>format()</code> function can accept an object of options as its
argument to provide more control over the output.
</p>
<ObjectReference type="FormatOptions" :properties="[
{
name: 'date',
type: 'string | Date',
jsdoc: ['An ISO 8601 date string or a Date object.'],
},
{
name: 'format',
type: 'string | { date?: string, time?: string }',
jsdoc: ['The format can be either format styles or format tokens.'],
},
{
name: 'locale?',
type: 'string',
jsdoc: ['The locale to use when formatting.'],
},
{
name: 'tz?',
type: 'string',
jsdoc: [
'Converts the given date option to the timezone provided.',
'For example, if the provided date option is 2021-01-01T00:00:00Z',
'and the tz option is America/New_York and the format option is',
'YYYY-MM-DD HH:mm:ss, the output will be 2020-12-31 19:00:00',
],
},
{
name: 'genitive?',
type: 'boolean',
jsdoc: [
'When true, the month and weekday names will be in the',
'genitive case for locales where it is applicable.',
],
},
{
name: 'partFilter?',
type: '(part: Part) => boolean',
jsdoc: [
'A function that filters the parts of the formatted date.',
'The function is called with each part of the formatted date',
'and should return true to include the part in the output.',
],
},
]" />
<ObjectReference
type="FormatOptions"
:properties="[
{
name: 'date',
type: 'string | Date',
jsdoc: ['An ISO 8601 date string or a Date object.'],
},
{
name: 'format',
type: 'string | { date?: string, time?: string }',
jsdoc: ['The format can be either format styles or format tokens.'],
},
{
name: 'locale?',
type: 'string',
jsdoc: ['The locale to use when formatting.'],
},
{
name: 'tz?',
type: 'string',
jsdoc: [
'Converts the given date option to the timezone provided.',
'For example, if the provided date option is 2021-01-01T00:00:00Z',
'and the tz option is America/New_York and the format option is',
'YYYY-MM-DD HH:mm:ss, the output will be 2020-12-31 19:00:00',
],
},
{
name: 'genitive?',
type: 'boolean',
jsdoc: [
'When true, the month and weekday names will be in the',
'genitive case for locales where it is applicable.',
],
},
{
name: 'partFilter?',
type: '(part: Part) => boolean',
jsdoc: [
'A function that filters the parts of the formatted date.',
'The function is called with each part of the formatted date',
'and should return true to include the part in the output.',
],
},
]"
/>
<h3 id="format-timezone">Timezone</h3>
<p>
The <code>tz</code> option allows you to format the provided date from the
Expand All @@ -415,7 +452,10 @@ import sizes from "../../assets/func-sizes.json"
<h3 id="format-part-filter">Part filter</h3>
<p>
The <code>partFilter</code> option allows you to filter out
<a href="https://tc39.es/ecma402/#table-datetimeformat-resolvedoptions-properties">parts</a>
<a
href="https://tc39.es/ecma402/#table-datetimeformat-resolvedoptions-properties"
>parts</a
>
of the formatted date. The function is called with each "part" of the
formatted date and should return a boolean indicating whether or not to
include that part in final formatted string.
Expand Down
Loading