ui formats

OSSPhilippines · Sep 14, 2024 · 149448a · 149448a
1 parent 5c9fc4f
commit 149448a
Show file tree

Hide file tree

Showing 29 changed files with 2,758 additions and 3 deletions.
diff --git a/packages/temple-ui-src/package.json b/packages/temple-ui-src/package.json
@@ -12,7 +12,11 @@
   },
   "devDependencies": {
     "@ossph/temple": "0.1.6",
+    "@types/dompurify": "3.0.5",
     "@types/node": "22.1.0",
+    "dompurify": "3.1.6",
+    "marked": "14.1.2",
+    "moment": "2.30.1",
     "typescript": "5.5.4"
   }
 }
diff --git a/packages/temple-ui-src/package.live.json b/packages/temple-ui-src/package.live.json
@@ -7,5 +7,16 @@
   "homepage": "https://github.com/OSSPhilippines/temple",
   "bugs": "https://github.com/OSSPhilippines/temple/issues",
   "repository": "OSSPhilippines/temple",
-  "main": "index.js"
+  "main": "index.js",
+  "dependencies": {
+    "@ossph/temple": "0.1.6",
+    "dompurify": "3.1.6",
+    "marked": "14.1.2",
+    "moment": "2.30.1"
+  },
+  "devDependencies": {
+    "@types/dompurify": "3.0.5",
+    "@types/node": "22.1.0",
+    "typescript": "5.5.4"
+  }
 }
diff --git a/packages/temple-ui-src/src/compiler/data/definitions.ts b/packages/temple-ui-src/src/compiler/data/definitions.ts
@@ -146,8 +146,9 @@ export function literals(): LiteralToken[] {
     literal('tx-verdana', { 'font-family': [ 'Verdana, sans-serif' ] }),
     literal('tx-inherit', { 'font-family': [ 'inherit' ] }),
     literal('tx-underline', { 'text-decoration': [ 'underline' ] }),
-    literal('tx-lowercase', { 'text-transform': [ 'lowercase' ] }),
-    literal('tx-uppercase', { 'text-transform': [ 'uppercase' ] }),
+    literal('tx-lower', { 'text-transform': [ 'lowercase' ] }),
+    literal('tx-upper', { 'text-transform': [ 'uppercase' ] }),
+    literal('tx-capital', { 'text-transform': [ 'capitalize' ] }),
     literal('tx-word-wrap', { 'word-wrap': [ 'break-word' ] }),
     literal('tx-nowrap', { 'white-space': [ 'nowrap' ] }),
     literal('tx-prewrap', { 'white-space': [ 'pre-wrap' ] }),

diff --git a/packages/temple-ui-src/src/components/format/code.tml b/packages/temple-ui-src/src/components/format/code.tml
@@ -0,0 +1,148 @@
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism.min.css" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism-tomorrow.min.css" />
+<style>
+  :host {
+    display: block;
+    font-size: 14px;
+    line-height: 20px;
+  }
+  :host([inline]) {
+    display: inline !important;
+  }
+  :host([inline]),
+  :host([inline]) > pre,
+  :host([inline]) > pre > code {
+    display: inline !important;
+  }
+  .snippet {
+    background-color: #000000;
+    color: #ABB2BF;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  .line-numbers {
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber;
+  }
+  :host([inline]) .line-numbers {
+    position: static;
+    padding-left: 0;
+  }
+
+  .line-numbers > code {
+    position: relative;
+    white-space: inherit;
+  }
+
+  .line-numbers .line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    font-size: 100%;
+    left: -3.8em;
+    width: 3em; /* works for line-numbers below 1000 lines */
+    letter-spacing: -1px;
+    border-right: 1px solid #999;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+  }
+
+  :host([inline]) .line-numbers .line-numbers-rows {
+    display: none;
+  }
+
+  .line-numbers-rows > span {
+    display: block;
+    counter-increment: linenumber;
+  }
+
+  .line-numbers-rows > span:before {
+    content: counter(linenumber);
+    color: #999;
+    display: block;
+    padding-right: 0.8em;
+    text-align: right;
+  }
+  .pad {
+    padding: 5px;
+  }
+
+  .terminal {
+    background-color: #000000;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 15px;
+    height: 100%;
+    padding: 10px;
+  }
+  .terminal span {
+    color: #00FF00;
+  }
+</style>
+<script>
+  import Prism from 'prismjs';
+  //extract props
+  const { 
+    lang = 'markup', 
+    numbers = false, 
+    inline = false,
+    trim = false,
+    ltrim = false,
+    rtrim = false,
+    detab = 0,
+    value
+  } = this.props;
+  //get children
+  const children = this.originalChildren;
+  //determine snippet
+  let snippet = value || children[0]?.textContent || '';
+  //detab snippet
+  if (detab) {
+    snippet = snippet.replace(
+      new RegExp(`\\n {${detab}}`, 'g'), '\n'
+    );
+  }
+  //determine trim strategy
+  if (trim) {
+    snippet = snippet.trim();
+  } else if (ltrim) {
+    snippet = snippet.replace(/^\s+/, '');
+  } else if (rtrim) {
+    snippet = snippet.replace(/\s+$/, '');
+  }
+  //on mount, highlight
+  const highlight = event => {
+    if (!snippet) {
+      return;
+    }
+    const code = Prism.highlight(snippet, Prism.languages[lang], lang);
+
+    event.detail.target.innerHTML = code;
+    if (numbers) {
+      const match = code.match(/\n(?!$)/g);
+      const total = match ? match.length + 1 : 1;
+      const lines = new Array(total + 1).join('<span></span>');
+      const wrapper = document.createElement('span');
+      wrapper.setAttribute('aria-hidden', 'true');
+      wrapper.className = 'line-numbers-rows';
+      wrapper.innerHTML = lines;
+      event.detail.target.appendChild(wrapper);
+    }
+  };
+</script>
+<if true={lang === 'bash'}>
+  <div class="terminal"><span>$</span> {childlist}</div>
+<elif true={snippet} />
+  <if true={numbers}>
+    <pre class="snippet line-numbers"><code mount=highlight></code></pre>
+  <else />
+    <pre class="snippet pad"><code mount=highlight></code></pre>
+  </if>
+</if>
+
diff --git a/packages/temple-ui-src/src/components/format/color.tml b/packages/temple-ui-src/src/components/format/color.tml
@@ -0,0 +1,37 @@
+<script>
+  const { value, sm, md, lg, box = true, text = true } = this.props;
+  //build host class names
+  this.classList.add('flex', 'flex-center-y');
+  //determine host class display
+  if (!this.classList.contains('block') 
+    && !this.classList.contains('flex')
+    && !this.classList.contains('none')
+    && !this.classList.contains('inline')
+    && !this.classList.contains('inline-block')
+  ) {
+    this.classList.add('inline-block');
+  }
+  //build box class list
+  const classList = [ 'inline-block', 'curved', 'bda-black' ];
+  //determine box class size
+  if (sm) {
+    classList.push('w-8', 'h-8');
+  } else if (md) {
+    classList.push('w-12', 'h-12');
+  } else if (lg) {
+    classList.push('w-16', 'h-16');
+  } else {
+    classList.push('w-12', 'h-12');
+  }
+  //if there is a text, add margin 
+  //right to the box class list
+  if (text) {
+    classList.push('mr-5');
+  }
+</script>
+<if true={box}>
+  <span class={classList.join(' ')} style={`background-color: ${value};`}></span>
+</if>
+<if true={text}>
+  <span>{value}</span>
+</if>
diff --git a/packages/temple-ui-src/src/components/format/country.tml b/packages/temple-ui-src/src/components/format/country.tml
@@ -0,0 +1,49 @@
+<script>
+  import intl from '../intl.json';
+  //extract props
+  const { value, sm, md, lg, flag = true, text = true } = this.props;
+  //get lower case country code
+  const code = value.toLowerCase();
+  //find the country in question
+  const country = intl.find(
+    country => country.countryCode.toLowerCase() === code
+  );
+  //build host class names
+  this.classList.add('flex', 'flex-center-y');
+  //determine host class display
+  if (!this.classList.contains('block') 
+    && !this.classList.contains('flex')
+    && !this.classList.contains('none')
+    && !this.classList.contains('inline')
+    && !this.classList.contains('inline-block')
+  ) {
+    this.classList.add('inline-block');
+  }
+  //build flag class list
+  const classList = [ 'inline-block', 'curved', 'bda-black' ];
+  //determine flag class size
+  if (sm) {
+    classList.push('w-40');
+  } else if (md) {
+    classList.push('w-60');
+  } else if (lg) {
+    classList.push('w-100');
+  } else {
+    classList.push('w-60');
+  }
+  //if there is a text, add margin to the flag class list
+  if (text) {
+    classList.push('mr-5');
+  }
+</script>
+<if true={country}>
+  <if true={flag}>
+    <img 
+      class={classList.join(' ')} 
+      src={`https://flagcdn.com/w80/${code}.png`}
+    />
+  </if>
+  <if true={text}>
+    <span>{country.countryName}</span>
+  </if>
+</if>
diff --git a/packages/temple-ui-src/src/components/format/currency.tml b/packages/temple-ui-src/src/components/format/currency.tml
@@ -0,0 +1,53 @@
+<script>
+  import intl from '../intl.json';
+  //extract props
+  const { value, sm, md, lg, flag = true, text = true } = this.props;
+  //get lower case currency code
+  const currency = value.toLowerCase();
+  //find the country currency in question
+  const country = intl.find(
+    country => (
+      currency !== 'usd' && country.currencyCode.toLowerCase() === currency
+    ) || (
+      currency === 'usd' && country.countryCode === 'US'
+    )
+  );
+  //build host class names
+  this.classList.add('flex', 'flex-center-y');
+  //determine host class display
+  if (!this.classList.contains('block') 
+    && !this.classList.contains('flex')
+    && !this.classList.contains('none')
+    && !this.classList.contains('inline')
+    && !this.classList.contains('inline-block')
+  ) {
+    this.classList.add('inline-block');
+  }
+  //build flag class list
+  const classList = [ 'inline-block', 'curved', 'bda-black' ];
+  //determine flag class size
+  if (sm) {
+    classList.push('w-40');
+  } else if (md) {
+    classList.push('w-60');
+  } else if (lg) {
+    classList.push('w-100');
+  } else {
+    classList.push('w-60');
+  }
+  //if there is a text, add margin to the flag class list
+  if (text) {
+    classList.push('mr-5');
+  }
+</script>
+<if true={country}>
+  <if true={flag}>
+    <img 
+      class={classList.join(' ')} 
+      src={`https://flagcdn.com/w80/${country.countryCode.toLowerCase()}.png`}
+    />
+  </if>
+  <if true={text}>
+    <span>{country.currencyName}</span>
+  </if>
+</if>
diff --git a/packages/temple-ui-src/src/components/format/date.tml b/packages/temple-ui-src/src/components/format/date.tml
@@ -0,0 +1,37 @@
+<script>
+  import moment from 'moment';
+  //moment configuration
+  moment.locale('short', { 
+    parentLocale: 'en',
+    relativeTime: { 
+      future: "-%s",  past: "%s", s: 'now', ss: 'now',
+      m: "1m",        mm: "%dm",  h:  "1h", hh: "%dh",
+      d: "1d",        dd: "%dd",  w:  "1w", ww: "%dw",
+      M: "1M",        MM: "%dM",  y:  "1y", yy: "%dy"
+    }
+  });
+  //extract props
+  const { 
+    value, 
+    locale = 'en',
+    format = 'MMMM Do YYYY, h:mm:ss a' 
+  } = this.props;
+  //determine display
+  if (!this.classList.contains('block') 
+    && !this.classList.contains('flex')
+    && !this.classList.contains('none')
+    && !this.classList.contains('inline')
+    && !this.classList.contains('inline-block')
+  ) {
+    this.classList.add('inline-block');
+  }
+  //make date object
+  const date = value ? new Date(value): new Date();
+  //format date
+  const output = format === 'ago' 
+    ? moment(date, format).locale(locale).fromNow()
+    : format === 'a'
+    ? moment(date, format).locale('short').fromNow()
+    : moment(date).locale(locale).format(format);
+</script>
+{output}
diff --git a/packages/temple-ui-src/src/components/format/email.tml b/packages/temple-ui-src/src/components/format/email.tml
@@ -0,0 +1,13 @@
+<script>
+  const { value, label, link = '' } = this.props;
+  //determine host class display
+  if (!this.classList.contains('block') 
+    && !this.classList.contains('flex')
+    && !this.classList.contains('none')
+    && !this.classList.contains('inline')
+    && !this.classList.contains('inline-block')
+  ) {
+    this.classList.add('inline-block');
+  }
+</script>
+<a class=link href={`mailto:${value}`}>{label || value}</a>