npm - @operato/pull-to-refresh - Versions diffs - 8.0.0-beta.0 → 8.0.0-beta.2 - Mend

@operato/pull-to-refresh 8.0.0-beta.0 → 8.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/CHANGELOG.md +18 -0
package/package.json +2 -2
package/.editorconfig +0 -29
package/.storybook/main.js +0 -3
package/.storybook/preview.js +0 -52
package/.storybook/server.mjs +0 -8
package/demo/index.html +0 -35
package/src/index.ts +0 -1
package/src/pull-to-refresh-control.ts +0 -211
package/src/pull-to-refresh.ts +0 -180
package/stories/index.stories.ts +0 -60
package/tsconfig.json +0 -24
package/web-dev-server.config.mjs +0 -27
package/web-test-runner.config.mjs +0 -41

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [8.0.0-beta.2](https://github.com/hatiolab/operato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
+### :bug: Bug Fix
+* typo .npmignore ([d9c0c8c](https://github.com/hatiolab/operato/commit/d9c0c8c79abc688c3c2cfb6c37fcb689483a5977))
+## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
+### :bug: Bug Fix
+* missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
 ## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
 **Note:** Version bump only for package @operato/pull-to-refresh

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@operato/pull-to-refresh",
   "description": "Webcomponent pull-to-refresh following open-wc recommendations",
   "author": "heartyoh",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.2",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -68,5 +68,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "gitHead": "ee1b5124995accb99272d3b5854f3df1d8746dda"
 }

package/.editorconfig DELETED Viewed

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-root = true
-[*]
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-[*.md]
-trim_trailing_whitespace = false
-[*.json]
-indent_size = 2
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js DELETED Viewed

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
-};

package/.storybook/preview.js DELETED Viewed

@@ -1,52 +0,0 @@
-import { i18next } from '@operato/i18n'
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'ko', right: '🇰🇷', title: '한국어' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'ja', right: '🇯🇵', title: '日本語' },
-        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
-      ],
-      showName: true
-    }
-  },
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'light', title: 'Light' },
-        { value: 'dark', title: 'Dark' }
-      ],
-      showName: true
-    }
-  }
-}
-export const decorators = [
-  (Story, context) => {
-    const { locale, theme } = context.globals
-    if (locale) {
-      i18next.changeLanguage(locale)
-    }
-    // Set the theme class for the document
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.add('light')
-      document.documentElement.classList.remove('dark')
-    }
-    return Story()
-  }
-]

package/.storybook/server.mjs DELETED Viewed

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});

package/demo/index.html DELETED Viewed

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        display: flex;
-        width: 100vw;
-        height: 100dvh;
-        margin: 0;
-        padding: 0;
-      }
-      #demo {
-        flex: 1;
-        background-color: red;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="demo"></div>
-    <script type="module">
-      import { pulltorefresh } from '../dist/src/pull-to-refresh.js'
-      pulltorefresh({
-        container: document.body,
-        scrollable: document.querySelector('#demo'),
-        refresh: () => {
-          console.log('refreshed...')
-        }
-      })
-    </script>
-  </body>
-</html>

package/src/index.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export * from './pull-to-refresh'

package/src/pull-to-refresh-control.ts DELETED Viewed

@@ -1,211 +0,0 @@
-import { css, html, LitElement } from 'lit'
-import { customElement } from 'lit/decorators.js'
-@customElement('ox-pulltorefresh-control')
-export class PullToRefreshControl extends LitElement {
-  static styles = css`
-    :host {
-      position: absolute;
-      top: -50px;
-      left: 50%;
-      -webkit-transform: translate3d(-50%, 0, 0);
-      transform: translate3d(-50%, 0, 0);
-      width: 40px;
-      height: 40px;
-      justify-content: center;
-      align-items: center;
-      background: #fff;
-      border-radius: 50%;
-      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647), 0 1px 4px rgba(0, 0, 0, 0.117647);
-      display: none;
-      z-index: 10000;
-      will-change: transform;
-    }
-    :host(.pull-to-refresh--pulling),
-    :host(.pull-to-refresh--aborting),
-    :host(.pull-to-refresh--reached),
-    :host(.pull-to-refresh--refreshing),
-    :host(.pull-to-refresh--restoring) {
-      display: flex;
-    }
-    :host(.pull-to-refresh--pulling) .pull-to-refresh-material__spinner,
-    :host(.pull-to-refresh--aborting) .pull-to-refresh-material__spinner,
-    :host(.pull-to-refresh--reached) .pull-to-refresh-material__spinner,
-    :host(.pull-to-refresh--refreshing) .pull-to-refresh-material__icon,
-    :host(.pull-to-refresh--restoring) .pull-to-refresh-material__icon {
-      display: none;
-    }
-    .pull-to-refresh-material__spinner {
-      -webkit-transform-origin: center center;
-      transform-origin: center center;
-      -webkit-animation: pull-to-refresh-material-rotate 2s linear infinite;
-      animation: pull-to-refresh-material-rotate 2s linear infinite;
-    }
-    .pull-to-refresh-material__path {
-      stroke-dasharray: 1, 200;
-      stroke-dashoffset: 0;
-      stroke-linecap: round;
-      -webkit-animation: pull-to-refresh-material-dash 1.5s ease-in-out infinite;
-      animation: pull-to-refresh-material-dash 1.5s ease-in-out infinite;
-    }
-    .pull-to-refresh-material__path--colorful {
-      -webkit-animation: pull-to-refresh-material-dash 1.5s ease-in-out infinite,
-        pull-to-refresh-material-colorful 6s ease-in-out infinite;
-      animation: pull-to-refresh-material-dash 1.5s ease-in-out infinite,
-        pull-to-refresh-material-colorful 6s ease-in-out infinite;
-    }
-    @-webkit-keyframes pull-to-refresh-material-rotate {
-      100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-      }
-    }
-    @keyframes pull-to-refresh-material-rotate {
-      100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-      }
-    }
-    @-webkit-keyframes pull-to-refresh-material-dash {
-      0% {
-        stroke-dasharray: 1, 200;
-        stroke-dashoffset: 0;
-      }
-      50% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -35px;
-      }
-      100% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -124px;
-      }
-    }
-    @keyframes pull-to-refresh-material-dash {
-      0% {
-        stroke-dasharray: 1, 200;
-        stroke-dashoffset: 0;
-      }
-      50% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -35px;
-      }
-      100% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -124px;
-      }
-    }
-    @-webkit-keyframes pull-to-refresh-material-colorful {
-      100%,
-      0% {
-        stroke: #4285f4;
-      }
-      40% {
-        stroke: #ea4335;
-      }
-      66% {
-        stroke: #fbbc05;
-      }
-      80%,
-      90% {
-        stroke: #34a853;
-      }
-    }
-    @keyframes pull-to-refresh-material-colorful {
-      100%,
-      0% {
-        stroke: #4285f4;
-      }
-      40% {
-        stroke: #ea4335;
-      }
-      66% {
-        stroke: #fbbc05;
-      }
-      80%,
-      90% {
-        stroke: #34a853;
-      }
-    }
-  `
-  render() {
-    return html`
-      <svg class="pull-to-refresh-material__icon" fill="#4285f4" width="24" height="24" viewBox="0 0 24 24">
-        <path
-          d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-        />
-        <path d="M0 0h24v24H0z" fill="none" />
-      </svg>
-      <svg class="pull-to-refresh-material__spinner" width="24" height="24" viewBox="25 25 50 50">
-        <circle
-          class="pull-to-refresh-material__path"
-          cx="50"
-          cy="50"
-          r="20"
-          fill="none"
-          stroke="#4285f4"
-          stroke-width="4"
-          stroke-miterlimit="10"
-        />
-      </svg>
-    `
-  }
-  pulling(d: number, opts: any) {
-    const { threshold } = opts
-    let p = d / threshold
-    if (p > 1) p = 1
-    else p = p * p * p
-    const y = d / 2.5
-    this.style.opacity = String(p)
-    this.style.transform = y ? `translate3d(-50%, ${y}px, 0) rotate(${360 * p}deg)` : ''
-  }
-  refreshing({ threshold }: any) {
-    this.style.transition = 'transform 0.2s'
-    this.style.transform = `translate3d(-50%, ${threshold / 2.5}px, 0)`
-  }
-  aborting() {
-    return new Promise<void>(resolve => {
-      if (this.style.transform) {
-        this.style.transition = 'transform 0.3s, opacity 0.15s'
-        this.style.transform = 'translate3d(-50%, 0, 0)'
-        this.style.opacity = '0'
-        this.addEventListener('transitionend', () => {
-          this.style.transition = ''
-          resolve()
-        })
-      } else {
-        resolve()
-      }
-    })
-  }
-  restoring() {
-    return new Promise<void>(resolve => {
-      this.style.transition = 'transform 0.3s'
-      this.style.transform += ' scale(0.01)'
-      this.addEventListener('transitionend', () => {
-        this.style.transition = ''
-        resolve()
-      })
-    })
-  }
-}

package/src/pull-to-refresh.ts DELETED Viewed

@@ -1,180 +0,0 @@
-/**
- * inspired by https://github.com/jiangfengming/pull-to-refresh
- */
-import './pull-to-refresh-control'
-function ontouchpan({
-  element,
-  animates,
-  onpanstart,
-  onpanmove,
-  onpanend
-}: {
-  element: HTMLElement
-  animates: HTMLElement
-  onpanstart?: any
-  onpanmove: any
-  onpanend: any
-}): boolean | (() => void) {
-  let touchId: number, startX: number, startY: number, panstartCalled: boolean
-  function calcMovement(e: any) {
-    const touch = Array.prototype.slice.call(e.changedTouches).filter(touch => touch.identifier === touchId)[0]
-    if (!touch) return false
-    e.deltaX = touch.screenX - startX
-    e.deltaY = touch.screenY - startY
-    return true
-  }
-  function touchstart(e: TouchEvent) {
-    const touch = e.changedTouches[0]
-    touchId = touch.identifier
-    startX = touch.screenX
-    startY = touch.screenY
-  }
-  function touchmove(e: TouchEvent) {
-    if (calcMovement(e)) {
-      if (onpanstart && !panstartCalled) {
-        onpanstart(e)
-        panstartCalled = true
-      }
-      onpanmove(e)
-    }
-  }
-  function touchend(e: TouchEvent) {
-    if (calcMovement(e)) onpanend(e)
-  }
-  element.addEventListener('touchstart', touchstart)
-  if (onpanmove) element.addEventListener('touchmove', touchmove)
-  if (onpanend) element.addEventListener('touchend', touchend)
-  return function () {
-    element.removeEventListener('touchstart', touchstart)
-    if (onpanmove) element.removeEventListener('touchmove', touchmove)
-    if (onpanend) element.removeEventListener('touchend', touchend)
-    animates && animates.remove()
-  }
-}
-export function pulltorefresh(opts: any) {
-  opts = Object.assign(
-    {
-      // https://bugs.chromium.org/p/chromium/issues/detail?id=766938
-      scrollable: document.body,
-      threshold: 150,
-      onStateChange(/* state, opts */) {
-        /* noop */
-      }
-    },
-    opts
-  )
-  var { container, scrollable, threshold, refresh, onStateChange, animates } = opts
-  if (!animates) {
-    animates = document.createElement('ox-pulltorefresh-control')
-    container.appendChild(animates)
-  }
-  let distance: number = -1,
-    offset: number = -1,
-    state: string // state: pulling, aborting, reached, refreshing, restoring
-  function addClass(cls: string) {
-    animates.classList.add('pull-to-refresh--' + cls)
-  }
-  function removeClass(cls: string) {
-    animates.classList.remove('pull-to-refresh--' + cls)
-  }
-  function scrollTop() {
-    if (!scrollable || [window, document, document.body, document.documentElement].includes(scrollable)) {
-      return document.documentElement.scrollTop || document.body.scrollTop
-    } else {
-      return scrollable.scrollTop
-    }
-  }
-  return ontouchpan({
-    element: container,
-    animates,
-    onpanmove(e: any) {
-      let d = e.deltaY
-      if (scrollTop() > 0 || (d < 0 && !state) || state in { aborting: 1, refreshing: 1, restoring: 1 }) return
-      if (e.cancelable) {
-        e.preventDefault()
-      }
-      if (distance == -1) {
-        offset = d
-        state = 'pulling'
-        addClass(state)
-        onStateChange(state, opts)
-      }
-      d = d - offset
-      if (d < 0) d = 0
-      distance = d
-      if ((d >= threshold && state !== 'reached') || (d < threshold && state !== 'pulling')) {
-        removeClass(state)
-        state = state === 'reached' ? 'pulling' : 'reached'
-        addClass(state)
-        onStateChange(state, opts)
-      }
-      animates.pulling(d, opts)
-    },
-    async onpanend() {
-      if (state == '') return
-      if (state === 'pulling') {
-        removeClass(state)
-        state = 'aborting'
-        onStateChange(state)
-        addClass(state)
-        await animates.aborting(opts)
-        removeClass(state)
-        distance = -1
-        state = ''
-        offset = -1
-        onStateChange(state)
-      } else if (state === 'reached') {
-        removeClass(state)
-        state = 'refreshing'
-        addClass(state)
-        onStateChange(state, opts)
-        animates.refreshing(opts)
-        await refresh()
-        removeClass(state)
-        state = 'restoring'
-        addClass(state)
-        onStateChange(state)
-        await animates.restoring(opts)
-        removeClass(state)
-        distance = -1
-        state = ''
-        offset = -1
-        onStateChange(state)
-      }
-    }
-  })
-}

package/stories/index.stories.ts DELETED Viewed

@@ -1,60 +0,0 @@
-import { html, TemplateResult } from 'lit';
-import '../src/pull-to-refresh.js';
-export default {
-  title: 'PullToRefresh',
-  component: 'pull-to-refresh',
-  argTypes: {
-    title: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' },
-  }
-};
-interface Story<T> {
-  (args: T): TemplateResult;
-  args?: Partial<T>;
-  argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-  title?: string;
-  counter?: number;
-  textColor?: string;
-  slot?: TemplateResult;
-}
-const Template: Story<ArgTypes> = ({
-  title = 'Hello world',
-  counter = 5,
-  textColor,
-  slot,
-}: ArgTypes) => html`
-  <pull-to-refresh
-    style="--pull-to-refresh-text-color: ${textColor || 'black'}"
-    .title=${title}
-    .counter=${counter}
-  >
-    ${slot}
-  </pull-to-refresh>
-`;
-export const Regular = Template.bind({});
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-  title: 'My title',
-};
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-  counter: 123456,
-};
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`,
-};
-SlottedContent.argTypes = {
-  slot: { table: { disable: true } },
-};

package/tsconfig.json DELETED Viewed

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "incremental": true,
-    "skipLibCheck": true,
-    "types": ["node", "mocha"]
-  },
-  "include": ["**/*.ts", "*.d.ts"]
-}

package/web-dev-server.config.mjs DELETED Viewed

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-  // See documentation for all available options
-});

package/web-test-runner.config.mjs DELETED Viewed

@@ -1,41 +0,0 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-  // See documentation for all available options
-});