From 8c2044c934554b1ec7d74802a68ef12dce5e666b Mon Sep 17 00:00:00 2001 From: Chris Blanquera Date: Tue, 17 Sep 2024 22:55:24 +0800 Subject: [PATCH] ui preview --- packages/temple-web/package.json | 4 +- .../src/pages/ui/components/index.dtml | 224 +++++++- .../temple-web/src/pages/ui/fields/index.dtml | 44 -- .../temple-web/src/pages/ui/form/index.dtml | 498 ++++++++++++++++++ .../src/pages/ui/formats/index.dtml | 277 ++++++++++ yarn.lock | 28 + 6 files changed, 1016 insertions(+), 59 deletions(-) delete mode 100644 packages/temple-web/src/pages/ui/fields/index.dtml create mode 100644 packages/temple-web/src/pages/ui/form/index.dtml diff --git a/packages/temple-web/package.json b/packages/temple-web/package.json index cf85c56..78a8f93 100644 --- a/packages/temple-web/package.json +++ b/packages/temple-web/package.json @@ -11,14 +11,12 @@ }, "dependencies": { "@ossph/temple": "0.1.6", - "express": "4.19.2", - "prismjs": "1.29.0" + "express": "4.19.2" }, "devDependencies": { "@ossph/temple-dev": "0.1.6", "@types/express": "4.17.21", "@types/node": "22.1.0", - "@types/prismjs": "1.26.4", "fast-glob": "3.3.2", "nodemon": "3.1.2", "ts-loader": "9.5.1", diff --git a/packages/temple-web/src/pages/ui/components/index.dtml b/packages/temple-web/src/pages/ui/components/index.dtml index ea4d8d9..27e90b8 100644 --- a/packages/temple-web/src/pages/ui/components/index.dtml +++ b/packages/temple-web/src/pages/ui/components/index.dtml @@ -41,6 +41,10 @@ const toggle = () => { document.querySelector('panel-layout').toggle('left'); }; + const crumbs = [ + { icon: 'home', label: 'Home', href: '/temple/index.html' }, + { icon: 'book', label: 'Docs' } + ]; @@ -54,21 +58,217 @@ {_('Components')}
-
-
-
Alert
+
+
+ + + Good News! + +
+ + Alerts +
-
-
-
Badge
+
+
+ 999 +
+ + Badges +
-
-
-
Crumbs
+
+
+ +
+ + Crumbs +
-
-
-
Icon
+
+
+ + + + +
+ + Icons + +
+
+
+ + + + +
+ + Loaders + +
+
+
+ + + Errors on Submit + +
+ + Notify + +
+
+
+ +
+ + Pagers + +
+
+
+
+
Head
+ + +
Main
+
+
+ + Panels + +
+
+
+ +
+ + Progress Bars + +
+
+
+ + Tab 1 + + + Tab 2 + + + Tab 3 + +
+ + Tabs + +
+
+
+
+ + + John Doe + 21 + + Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Duis laoreet lectus eget enim rhoncus, vel + volutpat eros tincidunt. In molestie nunc ut pulvinar + sollicitudin. + + + + + + + + +
+
+ + Tables + +
+
+
+ This is the first and last name +
+ + Tooltips +
diff --git a/packages/temple-web/src/pages/ui/fields/index.dtml b/packages/temple-web/src/pages/ui/fields/index.dtml deleted file mode 100644 index 86b4df1..0000000 --- a/packages/temple-web/src/pages/ui/fields/index.dtml +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - - - - - - -
- -
- -

- {_('Fields')} -

- -
- - - \ No newline at end of file diff --git a/packages/temple-web/src/pages/ui/form/index.dtml b/packages/temple-web/src/pages/ui/form/index.dtml new file mode 100644 index 0000000..2a2f504 --- /dev/null +++ b/packages/temple-web/src/pages/ui/form/index.dtml @@ -0,0 +1,498 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +

+ {_('Form')} +

+
+
+
+ + Buttons + +
+
+
+ + Control + +
+
+
+ + Fieldset + +
+
+

+ {_('Fields')} +

+
+
+
+ +
+ + Checkbox + +
+
+
+ +
+ + Color + +
+
+
+ console.log('open', e)} + close={(e) => console.log('close', e)} + filter={(e) => console.log('filter', e)} + select={(e) => console.log('select', e)} + remove={(e) => console.log('remove', e)} + add={(e) => console.log('add', e)} + clear={(e) => console.log('clear', e)} + change={(e) => console.log('change', e)} + update={(e) => console.log('update', e)} + /> +
+ + Country + +
+
+
+ console.log('open', e)} + close={(e) => console.log('close', e)} + filter={(e) => console.log('filter', e)} + select={(e) => console.log('select', e)} + remove={(e) => console.log('remove', e)} + add={(e) => console.log('add', e)} + clear={(e) => console.log('clear', e)} + change={(e) => console.log('change', e)} + update={(e) => console.log('update', e)} + /> +
+ + Currency + +
+
+
+ +
+ + Date + +
+
+
+ +
+ + Datetime + +
+
+
+ + Editor + +
+
+
+ + File + +
+
+
+ + Filelist + +
+
+
+ + Image + +
+
+
+ + Imagelist + +
+
+
+ +
+ + Input + +
+
+
+ + JSON + +
+
+
+ + Knob + +
+
+
+ + Markdown + +
+
+
+ +
+ + Mask + +
+
+
+ + Metadata + +
+
+
+ + Number + +
+
+
+ +
+ + Password + +
+
+
+ + +
+ + Radio + +
+
+
+ + Range + +
+
+
+ + Rating + +
+
+
+ console.log('open', e)} + close={(e) => console.log('close', e)} + filter={(e) => console.log('filter', e)} + select={(e) => console.log('select', e)} + remove={(e) => console.log('remove', e)} + add={(e) => console.log('add', e)} + clear={(e) => console.log('clear', e)} + change={(e) => console.log('change', e)} + update={(e) => console.log('update', e)} + > + + + + + +
+ + Select + +
+
+
+ +
+ + Slug + +
+
+
+ +
+ + Switch + +
+
+
+ + Taglist + +
+
+
+ Some Text +
+ + Textarea + +
+
+
+ + Textlist + +
+
+
+ +
+ + Time + +
+
+
+ + WYSIWYG + +
+
+ +
+ + + \ No newline at end of file diff --git a/packages/temple-web/src/pages/ui/formats/index.dtml b/packages/temple-web/src/pages/ui/formats/index.dtml index e6c36ea..05a9ef9 100644 --- a/packages/temple-web/src/pages/ui/formats/index.dtml +++ b/packages/temple-web/src/pages/ui/formats/index.dtml @@ -3,6 +3,7 @@ + @@ -43,6 +44,19 @@ const toggle = () => { document.querySelector('panel-layout').toggle('left'); }; + const json = { icon: 'book', label: 'Docs' }; + const variables = { x: 10, y: 20 }; + const html = '

Hello World

'; + const images = [ + 'https://images.wsj.net/im-580612/8SR', + 'https://images.wsj.net/im-580612/8SR' + ]; + const list = [ 'Item 1', 'Item 2' ]; + const metadata = { name: 'John Doe' }; + const table = [ + { id: 2, name: 'Jane Doe', age: 25 } + ]; + const stripes = [ 'bg-t-2', 'bg-t-3' ]; @@ -55,6 +69,269 @@

{_('Formats')}

+
+
+
+ compiler.render('./page.tml') +
+ + Code + +
+
+
+ +
+ + Color + +
+
+
+ +
+ + Country + +
+
+
+ +
+ + Currency + +
+
+
+ +
+ + Date + +
+
+
+ +
+ + Email + +
+
+
+ 10 + 29 + 20 = + +
+ + Formula + +
+
+
+ +
+ + HTML + +
+
+
+ +
+ + Image + +
+
+
+ +
+ + Imagelist + +
+
+
+ +
+ + JSON + +
+
+
+ + Link + +
+
+
+ +
+ + List + +
+
+
+ + Markdown + +
+
+
+ +
+ + Metadata + +
+
+
+ +
+ + Number + +
+
+
+ +
+ + Overflow + +
+
+
+ +
+ + Phone + +
+
+
+ +
+ + Rating + +
+
+
+ +
+ + Separated + +
+
+
+ +
+ + Table + +
+
+
+ +
+ + Taglist + +
+
+
+ +
+ + Text + +
+
+
+ +
+ + Yesno + +
+
diff --git a/yarn.lock b/yarn.lock index b311851..39d53aa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1281,6 +1281,14 @@ resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31" integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA== +"@simonwep/pickr@1.9.1": + version "1.9.1" + resolved "https://registry.yarnpkg.com/@simonwep/pickr/-/pickr-1.9.1.tgz#10d86dab514b8888b2d6b90299a477f254067c43" + integrity sha512-fR3qmfAcPf/HSFS7GEnTmZLM3+xERv1+jyMBbzT63ilRRM8veYjI7ELvkHHKk0/du3lHp7uh/FqatjM3646X1g== + dependencies: + core-js "3.37.0" + nanopop "2.4.2" + "@sinclair/typebox@^0.27.8": version "0.27.8" resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e" @@ -1523,6 +1531,11 @@ dependencies: "@types/node" "*" +"@types/inputmask@5.0.7": + version "5.0.7" + resolved "https://registry.yarnpkg.com/@types/inputmask/-/inputmask-5.0.7.tgz#ae1afdbb0a7b825b90703e0b08b4ef5be7d2c34e" + integrity sha512-uojbVPWzBQ/n/0jc/d16fLqmGasFIptbrLD2WrCPWArlk+5PgblOqH4EDkI3AoobXLAlOK5yF01V8jMmvMG5qg== + "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1": version "2.0.6" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7" @@ -3239,6 +3252,11 @@ cookies@~0.9.0: depd "~2.0.0" keygrip "~1.1.0" +core-js@3.37.0: + version "3.37.0" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.37.0.tgz#d8dde58e91d156b2547c19d8a4efd5c7f6c426bb" + integrity sha512-fu5vHevQ8ZG4og+LXug8ulUtVxjOcEYvifJr7L5Bfq9GOztVqsKd9/59hUk2ZSbCrS3BqUr3EpaYGIYzq7g3Ug== + core-util-is@1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" @@ -5023,6 +5041,11 @@ inherits@2.0.3: resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de" integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw== +inputmask@5.0.9: + version "5.0.9" + resolved "https://registry.yarnpkg.com/inputmask/-/inputmask-5.0.9.tgz#7bf4e83f5e199c88c0edf28545dc23fa208ef4be" + integrity sha512-s0lUfqcEbel+EQXtehXqwCJGShutgieOaIImFKC/r4reYNvX3foyrChl6LOEvaEgxEbesePIrw1Zi2jhZaDZbQ== + inquirer@8.2.6: version "8.2.6" resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-8.2.6.tgz#733b74888195d8d400a67ac332011b5fae5ea562" @@ -6509,6 +6532,11 @@ nanoid@^3.3.7: resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8" integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g== +nanopop@2.4.2: + version "2.4.2" + resolved "https://registry.yarnpkg.com/nanopop/-/nanopop-2.4.2.tgz#b55482135be7e64f2d0f5aa8ef51a58104ac7b13" + integrity sha512-NzOgmMQ+elxxHeIha+OG/Pv3Oc3p4RU2aBhwWwAqDpXrdTbtRylbRLQztLy8dMMwfl6pclznBdfUhccEn9ZIzw== + natural-compare-lite@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"