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

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 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.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

@@ -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.1",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -68,5 +68,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "gitHead": "d5b28a2e9deb632c0dc80132f6a7196dd6fe4220"
 }

package/.editorconfig

@@ -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

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

package/.storybook/preview.js

@@ -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

@@ -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/src/index.ts

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

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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
-});