shoelace-rails-ui 0.1.0

data/remote-src/2.0.0.beta64/shoelace-next/src/internal/watch.ts

@@ -0,0 +1,40 @@
+// @watch decorator
+//
+// Runs when an observed property changes, e.g. @property or @state, but before the component updates.
+//
+// To wait for an update to complete after a change occurs, use `await this.updateComplete` in the handler. To start
+// watching after the initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+//
+// Usage:
+//
+//  @watch('propName')
+//  handlePropChange(oldValue, newValue) {
+//    ...
+//  }
+//
+interface WatchOptions {
+  waitUntilFirstUpdate?: boolean;
+}
+
+export function watch(propName: string, options?: WatchOptions) {
+  return (protoOrDescriptor: any, name: string): any => {
+    const { update } = protoOrDescriptor;
+
+    options = Object.assign({ waitUntilFirstUpdate: false }, options) as WatchOptions;
+
+    protoOrDescriptor.update = function (changedProps: Map<string, any>) {
+      if (changedProps.has(propName)) {
+        const oldValue = changedProps.get(propName);
+        const newValue = this[propName];
+
+        if (oldValue !== newValue) {
+          if (!options?.waitUntilFirstUpdate || this.hasUpdated) {
+            this[name].call(this, oldValue, newValue);
+          }
+        }
+      }
+
+      update.call(this, changedProps);
+    };
+  };
+}

data/remote-src/2.0.0.beta64/shoelace-next/src/shoelace.ts

@@ -0,0 +1,58 @@
+// Components
+export { default as SlAlert } from './components/alert/alert';
+export { default as SlAnimatedImage } from './components/animated-image/animated-image';
+export { default as SlAnimation } from './components/animation/animation';
+export { default as SlAvatar } from './components/avatar/avatar';
+export { default as SlBadge } from './components/badge/badge';
+export { default as SlBreadcrumb } from './components/breadcrumb/breadcrumb';
+export { default as SlBreadcrumbItem } from './components/breadcrumb-item/breadcrumb-item';
+export { default as SlButton } from './components/button/button';
+export { default as SlButtonGroup } from './components/button-group/button-group';
+export { default as SlCard } from './components/card/card';
+export { default as SlCheckbox } from './components/checkbox/checkbox';
+export { default as SlColorPicker } from './components/color-picker/color-picker';
+export { default as SlDetails } from './components/details/details';
+export { default as SlDialog } from './components/dialog/dialog';
+export { default as SlDivider } from './components/divider/divider';
+export { default as SlDrawer } from './components/drawer/drawer';
+export { default as SlDropdown } from './components/dropdown/dropdown';
+export { default as SlFormatBytes } from './components/format-bytes/format-bytes';
+export { default as SlFormatDate } from './components/format-date/format-date';
+export { default as SlFormatNumber } from './components/format-number/format-number';
+export { default as SlIcon } from './components/icon/icon';
+export { default as SlIconButton } from './components/icon-button/icon-button';
+export { default as SlImageComparer } from './components/image-comparer/image-comparer';
+export { default as SlInclude } from './components/include/include';
+export { default as SlInput } from './components/input/input';
+export { default as SlMenu } from './components/menu/menu';
+export { default as SlMenuItem } from './components/menu-item/menu-item';
+export { default as SlMenuLabel } from './components/menu-label/menu-label';
+export { default as SlMutationObserver } from './components/mutation-observer/mutation-observer';
+export { default as SlProgressBar } from './components/progress-bar/progress-bar';
+export { default as SlProgressRing } from './components/progress-ring/progress-ring';
+export { default as SlQrCode } from './components/qr-code/qr-code';
+export { default as SlRadio } from './components/radio/radio';
+export { default as SlRadioGroup } from './components/radio-group/radio-group';
+export { default as SlRange } from './components/range/range';
+export { default as SlRating } from './components/rating/rating';
+export { default as SlRelativeTime } from './components/relative-time/relative-time';
+export { default as SlResizeObserver } from './components/resize-observer/resize-observer';
+export { default as SlResponsiveMedia } from './components/responsive-media/responsive-media';
+export { default as SlSelect } from './components/select/select';
+export { default as SlSkeleton } from './components/skeleton/skeleton';
+export { default as SlSpinner } from './components/spinner/spinner';
+export { default as SlSplitPanel } from './components/split-panel/split-panel';
+export { default as SlSwitch } from './components/switch/switch';
+export { default as SlTab } from './components/tab/tab';
+export { default as SlTabGroup } from './components/tab-group/tab-group';
+export { default as SlTabPanel } from './components/tab-panel/tab-panel';
+export { default as SlTag } from './components/tag/tag';
+export { default as SlTextarea } from './components/textarea/textarea';
+export { default as SlTooltip } from './components/tooltip/tooltip';
+export { default as SlVisuallyHidden } from './components/visually-hidden/visually-hidden';
+/* plop:component */
+
+// Utilities
+export * from './utilities/animation';
+export * from './utilities/base-path';
+export * from './utilities/icon-library';

data/remote-src/2.0.0.beta64/shoelace-next/src/styles/component.styles.ts

@@ -0,0 +1,23 @@
+import { css } from 'lit';
+import utilityStyles from '../styles/utility.styles';
+
+export default css`
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+`;
+
+// All components import this file, so it's a good place to ensure utility styles are applied to the light DOM
+const style = document.createElement('style');
+style.textContent = utilityStyles.toString();
+document.head.append(style);

data/remote-src/2.0.0.beta64/shoelace-next/src/styles/form-control.styles.ts

@@ -0,0 +1,52 @@
+import { css } from 'lit';
+
+export default css`
+  .form-control .form-control__label {
+    display: none;
+  }
+
+  .form-control .form-control__help-text {
+    display: none;
+  }
+
+  /* Label */
+  .form-control--has-label .form-control__label {
+    display: inline-block;
+    color: var(--sl-input-label-color);
+    margin-bottom: var(--sl-spacing-3x-small);
+  }
+
+  .form-control--has-label.form-control--small .form-control__label {
+    font-size: var(--sl-input-label-font-size-small);
+  }
+
+  .form-control--has-label.form-control--medium .form-control__label {
+    font-size: var(--sl-input-label-font-size-medium);
+  }
+
+  .form-control--has-label.form-control--large .form-control_label {
+    font-size: var(--sl-input-label-font-size-large);
+  }
+
+  /* Help text */
+  .form-control--has-help-text .form-control__help-text {
+    display: block;
+    color: var(--sl-input-help-text-color);
+  }
+
+  .form-control--has-help-text .form-control__help-text ::slotted(*) {
+    margin-top: var(--sl-spacing-3x-small);
+  }
+
+  .form-control--has-help-text.form-control--small .form-control__help-text {
+    font-size: var(--sl-input-help-text-font-size-small);
+  }
+
+  .form-control--has-help-text.form-control--medium .form-control__help-text {
+    font-size: var(--sl-input-help-text-font-size-medium);
+  }
+
+  .form-control--has-help-text.form-control--large .form-control__help-text {
+    font-size: var(--sl-input-help-text-font-size-large);
+  }
+`;

data/remote-src/2.0.0.beta64/shoelace-next/src/styles/utility.styles.ts

@@ -0,0 +1,23 @@
+import { css } from 'lit';
+
+export default css`
+  .sl-scroll-lock {
+    overflow: hidden !important;
+  }
+
+  .sl-toast-stack {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: var(--sl-z-index-toast);
+    width: 28rem;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: auto;
+  }
+
+  .sl-toast-stack sl-alert {
+    --box-shadow: var(--sl-shadow-large);
+    margin: var(--sl-spacing-medium);
+  }
+`;