shoelace-rails-ui 0.1.0 → 0.1.1

data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/code-block/code-block.css

@@ -1,228 +0,0 @@
-.code-block {
-  position: relative;
-  border-radius: 3px;
-  background-color: var(--sl-color-neutral-50);
-  margin-bottom: 1.5rem;
-}
-
-.code-block__preview {
-  position: relative;
-  border: solid 1px var(--sl-color-neutral-200);
-  border-bottom: none;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-  background-color: var(--sl-color-neutral-0);
-  min-width: 20rem;
-  max-width: 100%;
-  padding: 1.5rem 3.25rem 1.5rem 1.5rem;
-}
-
-/* Block the preview while dragging to prevent iframes from intercepting drag events */
-.code-block__preview--dragging:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: ew-resize;
-}
-
-.code-block__resizer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 1.75rem;
-  font-size: 20px;
-  color: var(--sl-color-neutral-600);
-  background-color: var(--sl-color-neutral-0);
-  border-left: solid 1px var(--sl-color-neutral-200);
-  border-top-right-radius: 3px;
-  cursor: ew-resize;
-  transition: 250ms background-color;
-}
-
-@media screen and (max-width: 600px) {
-  .code-block__preview {
-    padding-right: 1.5rem;
-  }
-
-  .code-block__resizer {
-    display: none;
-  }
-}
-
-.code-block__source {
-  border: solid 1px var(--sl-color-neutral-200);
-  border-bottom: none;
-  border-radius: 0 !important;
-  display: none;
-}
-
-.code-block--expanded .code-block__source {
-  display: block;
-}
-
-.code-block__source pre {
-  margin: 0;
-}
-
-.code-block__buttons {
-  position: relative;
-  border: solid 1px var(--sl-color-neutral-200);
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-  display: flex;
-}
-
-.code-block__button {
-  flex: 0 0 auto;
-  height: 2.5rem;
-  min-width: 2.5rem;
-  border: none;
-  border-radius: 0;
-  background: var(--sl-color-neutral-0);
-  font: inherit;
-  font-size: 0.7rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: var(--sl-color-neutral-600);
-  padding: 0 1rem;
-  cursor: pointer;
-}
-
-.code-block__button:not(:last-of-type) {
-  border-right: solid 1px var(--sl-color-neutral-200);
-}
-
-.code-block__button--html,
-.code-block__button--react {
-  width: 70px;
-  display: flex;
-  place-items: center;
-  justify-content: center;
-}
-
-.code-block__button--selected {
-  font-weight: 700;
-  color: var(--sl-color-primary-600);
-}
-
-.code-block__button--codepen {
-  display: flex;
-  place-items: center;
-  width: 6rem;
-}
-
-.code-block__button:first-of-type {
-  border-bottom-left-radius: 3px;
-}
-
-.code-block__button:last-of-type {
-  border-bottom-right-radius: 3px;
-}
-
-.code-block__button:hover,
-.code-block__button:active {
-  box-shadow: 0 0 0 1px var(--sl-color-primary-400);
-  border-right-color: transparent;
-  background-color: var(--sl-color-primary-50);
-  color: var(--sl-color-primary-700);
-  z-index: 1;
-}
-
-.code-block__button:focus-visible {
-  outline: none;
-  color: var(--sl-color-primary-600);
-  border-color: var(--sl-color-primary-400);
-  border-right-color: transparent;
-  background-color: var(--sl-color-primary-50);
-  box-shadow: 0 0 0 1px var(--sl-color-primary-400), var(--sl-focus-ring);
-  z-index: 2;
-}
-
-.code-block__toggle {
-  position: relative;
-  display: flex;
-  flex: 1 1 auto;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  color: var(--sl-color-neutral-600);
-  cursor: pointer;
-  -webkit-appearance: none;
-}
-
-.code-block__toggle svg {
-  width: 1em;
-  height: 1em;
-  margin-left: 0.25rem;
-}
-
-.code-block--expanded .code-block__toggle svg {
-  transform: rotate(180deg);
-}
-
-/* Copy button styles */
-.markdown-section .docsify-copy-code-button {
-  top: 4px;
-  right: 4px;
-  background-color: var(--sl-color-neutral-500);
-  border-radius: var(--sl-border-radius-medium);
-  font-family: var(--sl-font-sans);
-  font-size: var(--sl-font-size-x-small);
-  font-weight: var(--sl-font-weight-semibold);
-  text-transform: uppercase;
-  padding: 8px;
-  user-select: none;
-  transition: 0.1s all;
-}
-
-.markdown-section .docsify-copy-code-button.copied {
-  animation: pulse 0.75s;
-  --pulse-color: var(--sl-color-neutral-600);
-}
-
-@keyframes pulse {
-  0% {
-    box-shadow: 0 0 0 0 var(--pulse-color);
-  }
-  70% {
-    box-shadow: 0 0 0 0.5rem transparent;
-  }
-  100% {
-    box-shadow: 0 0 0 0 transparent;
-  }
-}
-
-.markdown-section .docsify-copy-code-button .label {
-  transition: none;
-}
-
-.markdown-section .docsify-copy-code-button .success,
-.markdown-section .docsify-copy-code-button .error {
-  display: none;
-}
-
-.markdown-section .docsify-copy-code-button:focus-visible {
-  box-shadow: var(--sl-focus-ring);
-}
-
-.markdown-section .docsify-copy-code-button:active {
-  background-color: var(--sl-color-neutral-600);
-  transform: scale(0.92);
-}
-
-/* We can apply data-flavor="html|react" to any element on the page to toggle it when the user's flavor changes */
-body.flavor-html [data-flavor]:not([data-flavor='html']) {
-  display: none;
-}
-
-body.flavor-react [data-flavor]:not([data-flavor='react']) {
-  display: none;
-}

data/remote-src/2.0.0.beta64/shoelace-next/docs/assets/plugins/code-block/code-block.js

@@ -1,376 +0,0 @@
-(() => {
-  const reactVersion = '17.0.2';
-  let flavor = getFlavor();
-  let count = 1;
-
-  // Sync flavor UI on page load
-  setFlavor(getFlavor());
-
-  if (!window.$docsify) {
-    throw new Error('Docsify must be loaded before installing this plugin.');
-  }
-
-  function convertModuleLinks(html) {
-    const version = sessionStorage.getItem('sl-version');
-
-    html = html
-      .replace(/@shoelace-style\/shoelace/g, `https://cdn.skypack.dev/@shoelace-style/shoelace@${version}`)
-      .replace(/from 'react'/g, `from 'https://cdn.skypack.dev/react@${reactVersion}'`)
-      .replace(/from "react"/g, `from "https://cdn.skypack.dev/react@${reactVersion}"`);
-
-    return html;
-  }
-
-  function getAdjacentExample(name, pre) {
-    let currentPre = pre.nextElementSibling;
-
-    while (currentPre?.tagName.toLowerCase() === 'pre') {
-      if (currentPre?.getAttribute('data-lang').split(' ').includes(name)) {
-        return currentPre;
-      }
-
-      currentPre = currentPre.nextElementSibling;
-    }
-
-    return null;
-  }
-
-  function runScript(script) {
-    const newScript = document.createElement('script');
-
-    if (script.type === 'module') {
-      newScript.type = 'module';
-      newScript.textContent = script.innerHTML;
-    } else {
-      newScript.appendChild(document.createTextNode(`(() => { ${script.innerHTML} })();`));
-    }
-
-    script.parentNode.replaceChild(newScript, script);
-  }
-
-  function getFlavor() {
-    return localStorage.getItem('flavor') || 'html';
-  }
-
-  function setFlavor(newFlavor) {
-    flavor = ['html', 'react'].includes(newFlavor) ? newFlavor : 'html';
-    localStorage.setItem('flavor', flavor);
-
-    // Set the flavor class on the body
-    document.body.classList.toggle('flavor-html', flavor === 'html');
-    document.body.classList.toggle('flavor-react', flavor === 'react');
-  }
-
-  function wrap(el, wrapper) {
-    el.parentNode.insertBefore(wrapper, el);
-    wrapper.appendChild(el);
-  }
-
-  window.$docsify.plugins.push((hook, vm) => {
-    // Convert code blocks to previews
-    hook.afterEach(function (html, next) {
-      const domParser = new DOMParser();
-      const doc = domParser.parseFromString(html, 'text/html');
-
-      const htmlButton = `
-        <button
-          type="button"
-          title="Show HTML code"
-          class="code-block__button code-block__button--html ${flavor === 'html' ? 'code-block__button--selected' : ''}"
-        >
-          HTML
-        </button>
-      `;
-
-      const reactButton = `
-        <button
-          type="button"
-          title="Show React code"
-          class="code-block__button code-block__button--react ${
-            flavor === 'react' ? 'code-block__button--selected' : ''
-          }"
-        >
-          React
-        </button>
-      `;
-
-      const codePenButton = `
-        <button type="button" class="code-block__button code-block__button--codepen" title="Edit on CodePen">
-          <svg
-            width="138"
-            height="26"
-            viewBox="0 0 138 26"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.3"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z" />
-          </svg>
-        </button>
-      `;
-
-      [...doc.querySelectorAll('code[class^="lang-"]')].map(code => {
-        if (code.classList.contains('preview')) {
-          const isExpanded = code.classList.contains('expanded');
-          const pre = code.closest('pre');
-          const sourceGroupId = `code-block-source-group-${count}`;
-          const toggleId = `code-block-toggle-${count}`;
-          const reactPre = getAdjacentExample('react', pre);
-          const hasReact = reactPre !== null;
-          const examples = [
-            {
-              name: 'HTML',
-              codeBlock: pre
-            }
-          ];
-
-          pre.setAttribute('data-lang', pre.getAttribute('data-lang').replace(/ preview$/, ''));
-          pre.setAttribute('aria-labelledby', toggleId);
-
-          const codeBlock = `
-            <div class="code-block ${isExpanded ? 'code-block--expanded' : ''}">
-              <div class="code-block__preview">
-                ${code.textContent}
-                <div class="code-block__resizer">
-                  <sl-icon name="grip-vertical"></sl-icon>
-                </div>
-              </div>
-
-              <div class="code-block__source-group" id="${sourceGroupId}">
-                <div class="code-block__source code-block__source--html" ${hasReact ? 'data-flavor="html"' : ''}>
-                  ${pre.outerHTML}
-                </div>
-
-                ${
-                  hasReact
-                    ? `
-                  <div class="code-block__source code-block__source--react" data-flavor="react">
-                    ${reactPre.outerHTML}
-                  </div>
-                `
-                    : ''
-                }
-              </div>
-
-              <div class="code-block__buttons">
-                ${hasReact ? ` ${htmlButton} ${reactButton} ` : ''}
-
-                <button
-                  type="button"
-                  class="code-block__button code-block__toggle"
-                  aria-expanded="${isExpanded ? 'true' : 'false'}"
-                  aria-controls="${sourceGroupId}"
-                >
-                  Source
-                  <svg
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <polyline points="6 9 12 15 18 9"></polyline>
-                  </svg>
-                </button>
-
-                ${!code.classList.contains('no-codepen') ? codePenButton : ''}
-              </div>
-            </div>
-          `;
-
-          pre.replaceWith(domParser.parseFromString(codeBlock, 'text/html').body);
-          if (reactPre) reactPre.remove();
-
-          count++;
-        }
-      });
-
-      // Force the highlighter to run again so JSX fields get highlighted properly
-      requestAnimationFrame(() => Prism.highlightAll());
-
-      next(doc.body.innerHTML);
-    });
-
-    // After the page is done loading, force scripts in previews to execute
-    hook.doneEach(() => {
-      [...document.querySelectorAll('.code-block__preview script')].map(script => runScript(script));
-    });
-
-    // Horizontal resizing
-    hook.doneEach(() => {
-      [...document.querySelectorAll('.code-block__preview')].map(preview => {
-        const resizer = preview.querySelector('.code-block__resizer');
-        let startX;
-        let startWidth;
-
-        const dragStart = event => {
-          startX = event.changedTouches ? event.changedTouches[0].pageX : event.clientX;
-          startWidth = parseInt(document.defaultView.getComputedStyle(preview).width, 10);
-          preview.classList.add('code-block__preview--dragging');
-          event.preventDefault();
-          document.documentElement.addEventListener('mousemove', dragMove, false);
-          document.documentElement.addEventListener('touchmove', dragMove, false);
-          document.documentElement.addEventListener('mouseup', dragStop, false);
-          document.documentElement.addEventListener('touchend', dragStop, false);
-        };
-
-        const dragMove = event => {
-          setWidth(startWidth + (event.changedTouches ? event.changedTouches[0].pageX : event.pageX) - startX);
-        };
-
-        const dragStop = event => {
-          preview.classList.remove('code-block__preview--dragging');
-          document.documentElement.removeEventListener('mousemove', dragMove, false);
-          document.documentElement.removeEventListener('touchmove', dragMove, false);
-          document.documentElement.removeEventListener('mouseup', dragStop, false);
-          document.documentElement.removeEventListener('touchend', dragStop, false);
-        };
-
-        const setWidth = width => (preview.style.width = width + 'px');
-
-        resizer.addEventListener('mousedown', dragStart);
-        resizer.addEventListener('touchstart', dragStart);
-      }, false);
-    });
-  });
-
-  // Toggle source mode
-  document.addEventListener('click', event => {
-    const button = event.target.closest('button');
-    const codeBlock = button?.closest('.code-block');
-
-    if (button?.classList.contains('code-block__button--html')) {
-      setFlavor('html');
-    } else if (button?.classList.contains('code-block__button--react')) {
-      setFlavor('react');
-    } else {
-      return;
-    }
-
-    // Update flavor buttons
-    [...document.querySelectorAll('.code-block')].map(codeBlock => {
-      codeBlock
-        .querySelector('.code-block__button--html')
-        ?.classList.toggle('code-block__button--selected', flavor === 'html');
-      codeBlock
-        .querySelector('.code-block__button--react')
-        ?.classList.toggle('code-block__button--selected', flavor === 'react');
-    });
-  });
-
-  // Expand and collapse code blocks
-  document.addEventListener('click', event => {
-    const toggle = event.target.closest('.code-block__toggle');
-    if (toggle) {
-      const codeBlock = event.target.closest('.code-block');
-      codeBlock.classList.toggle('code-block--expanded');
-      event.target.setAttribute('aria-expanded', codeBlock.classList.contains('code-block--expanded'));
-    }
-  });
-
-  // Show pulse when copying
-  document.addEventListener('click', event => {
-    const button = event.target.closest('.docsify-copy-code-button');
-    if (button) {
-      button.classList.remove('copied');
-      requestAnimationFrame(() => {
-        button.addEventListener('animationend', () => button.classList.remove('copied'), { once: true });
-        button.classList.add('copied');
-      });
-    }
-  });
-
-  // Open in CodePen
-  document.addEventListener('click', event => {
-    const button = event.target.closest('button');
-    const version = sessionStorage.getItem('sl-version');
-
-    if (button?.classList.contains('code-block__button--codepen')) {
-      const codeBlock = button.closest('.code-block');
-      const htmlExample = codeBlock.querySelector('.code-block__source--html > pre > code')?.textContent;
-      const reactExample = codeBlock.querySelector('.code-block__source--react > pre > code')?.textContent;
-      const isReact = flavor === 'react' && typeof reactExample === 'string';
-      const theme = localStorage.getItem('theme');
-      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      const isDark = theme === 'dark' || (theme === 'auto' && prefersDark);
-      const editors = isReact ? '0010' : '1000';
-      let htmlTemplate = '';
-      let jsTemplate = '';
-      let cssTemplate = '';
-
-      const form = document.createElement('form');
-      form.action = 'https://codepen.io/pen/define';
-      form.method = 'POST';
-      form.target = '_blank';
-
-      // HTML templates
-      if (!isReact) {
-        htmlTemplate =
-          `<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${version}/dist/shoelace.js"></script>\n` +
-          '\n' +
-          htmlExample;
-        jsTemplate = '';
-      }
-
-      // React templates
-      if (isReact) {
-        htmlTemplate = '<div id="root"></div>';
-        jsTemplate =
-          `import React from 'https://cdn.skypack.dev/react@${reactVersion}';\n` +
-          `import ReactDOM from 'https://cdn.skypack.dev/react-dom@${reactVersion}';\n` +
-          `import { setBasePath } from 'https://cdn.skypack.dev/@shoelace-style/shoelace@${version}/dist/utilities/base-path';\n` +
-          '\n' +
-          `// Set the base path for Shoelace assets\n` +
-          `setBasePath('https://cdn.skypack.dev/@shoelace-style/shoelace@${version}/dist/')\n` +
-          '\n' +
-          convertModuleLinks(reactExample) +
-          '\n' +
-          '\n' +
-          `ReactDOM.render(<App />, document.getElementById('root'));`;
-      }
-
-      // CSS templates
-      cssTemplate =
-        `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${version}/dist/themes/${
-          isDark ? 'dark' : 'light'
-        }.css';\n` +
-        '\n' +
-        'body {\n' +
-        '  font: 16px sans-serif;\n' +
-        '  background-color: var(--sl-color-neutral-0);\n' +
-        '  color: var(--sl-color-neutral-900);\n' +
-        '  padding: 1rem;\n' +
-        '}';
-
-      // Docs: https://blog.codepen.io/documentation/prefill/
-      const data = {
-        title: '',
-        description: '',
-        tags: ['shoelace', 'web components'],
-        editors,
-        head: `<meta name="viewport" content="width=device-width">`,
-        html_classes: `sl-theme-${isDark ? 'dark' : 'light'}`,
-        css_external: ``,
-        js_external: ``,
-        js_module: true,
-        js_pre_processor: isReact ? 'babel' : 'none',
-        html: htmlTemplate,
-        css: cssTemplate,
-        js: jsTemplate
-      };
-
-      const input = document.createElement('input');
-      input.type = 'hidden';
-      input.name = 'data';
-      input.value = JSON.stringify(data);
-      form.append(input);
-
-      document.body.append(form);
-      form.submit();
-      form.remove();
-    }
-  });
-})();