@opendesign-plus/components 0.0.1-rc.16

package/src/components/events/OEventsList.vue

@@ -0,0 +1,402 @@
+<script setup lang="ts">
+import {
+  OCard,
+  ODivider,
+  OIcon,
+  OIconSearch,
+  OInput, OPagination,
+  ORadio,
+  ORadioGroup,
+  OTag,
+  OToggle,
+} from '@opensig/opendesign';
+import { computed, ref } from 'vue';
+import { type EventsCardItemT, EventsStatusT, type EventsListPropsT, SearchParamsT } from './types';
+import { compareDate } from './utils.ts';
+import { useI18n } from '@/i18n';
+import defaultCover from '@/assets/events/city/default-cover.png';
+import { CITY_MAP } from './config.ts';
+import { useScreen } from '@opendesign-plus/composables';
+
+const { t } = useI18n();
+const { lePadV } = useScreen();
+
+const props = withDefaults(
+  defineProps<EventsListPropsT>(),
+  {
+    data: () => [],
+  },
+);
+
+interface StatusOptionT {
+  label: string;
+  value: EventsStatusT;
+}
+
+const statusOptions: StatusOptionT[] = [
+  {
+    label: t('events.statusAll'),
+    value: EventsStatusT.ALL,
+  },
+  {
+    label: t('events.statusIng'),
+    value: EventsStatusT.ING,
+  },
+  {
+    label: t('events.statusFinish'),
+    value: EventsStatusT.FINISH,
+  },
+];
+
+defineSlots<{
+  empty?: () => any;
+}>();
+
+const emits = defineEmits<{
+  (e: 'search', params: SearchParamsT): void;
+}>();
+const status = ref<EventsStatusT>(EventsStatusT.ALL);
+const input = ref('');
+const keyword = ref('');
+
+const emitSearch = (params = {}) => {
+  emits(
+    'search',
+    Object.assign(
+      {
+        page: props.page,
+        pageSize: props.pageSize,
+        status: status.value,
+        keyword: keyword.value,
+      },
+      params,
+    ),
+  );
+};
+
+const changeStatus = () => {
+  emitSearch();
+};
+const changeKeyword = () => {
+  keyword.value = input.value;
+  emitSearch();
+};
+const list = computed(() => {
+  return props.data
+    .map((v: EventsCardItemT) => {
+      return {
+        ...v,
+        status: !compareDate(new Date(), v.date as string) ? EventsStatusT.ING : EventsStatusT.FINISH,
+      };
+    })
+    .sort((a: EventsCardItemT, b: EventsCardItemT) => (compareDate(a.date as string, b.date as string) ? -1 : 1))
+    .map((v) => {
+      const city = v.city?.replace('市', '')?.replace('中国', '')?.replaceAll(' ', '');
+      let cover = null;
+
+      if (Array.isArray(CITY_MAP[city])) {
+        cover = CITY_MAP[city][v.name.length % CITY_MAP[city].length];
+      } else {
+        cover = CITY_MAP[city];
+      }
+      if (!cover) {
+        cover = defaultCover;
+      }
+      return {
+        ...v,
+        cover,
+      };
+    });
+});
+</script>
+
+<template>
+  <div class="o-events-list">
+    <div class="filter-wrapper">
+      <div class="filter-left">
+        <span>{{ t('events.status') }}</span>
+        <ORadioGroup v-model="status" :style="{ '--radio-group-gap': '8px' }" @change="changeStatus">
+          <ORadio v-for="t in statusOptions" :key="t.value" :value="t.value">
+            <template #radio="{ checked }">
+              <OToggle :checked="checked">{{ t.label }}</OToggle>
+            </template>
+          </ORadio>
+        </ORadioGroup>
+      </div>
+      <OInput
+        v-model="input"
+        :placeholder="t('events.searchPlaceholder')"
+        @pressEnter="changeKeyword"
+        @clear="changeKeyword"
+        clearable>
+        <template #prefix>
+          <OIcon class="input-icon">
+            <OIconSearch />
+          </OIcon>
+        </template>
+      </OInput>
+    </div>
+    <div class="list-content">
+      <OCard v-for="item in list" :key="item.name" :cover="item.cover" :href="item.link">
+        <OTag class="event-status">
+          {{ item.status === EventsStatusT.ING ? t('events.statusIng') : t('events.statusFinish') }}
+        </OTag>
+        <div class="event-name">{{ item.name }}</div>
+        <div class="event-desc">
+          <div class="event-date">{{ item.date }}</div>
+          <ODivider direction="v" />
+          <div class="event-location" v-if="item.city">{{ item.city }}</div>
+        </div>
+      </OCard>
+    </div>
+    <template v-if="!list.length">
+      <slot name="empty"></slot>
+    </template>
+    <OPagination
+      v-if="total > 8"
+      :page="page"
+      :simple="lePadV"
+      :show-total="true"
+      :pageSize="pageSize"
+      :total="total"
+      @change="emitSearch"
+      :pageSizes="[4, 12, 24, 36, 48]"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+.o-events-list {
+  .filter-wrapper {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: var(--o-color-fill2);
+    border-radius: var(--o-radius-xs);
+    padding: var(--o-gap-5) var(--o-gap-6);
+    gap: var(--o-gap-3) var(--o-gap-2);
+    @include respond-to('laptop') {
+      padding: var(--o-gap-4) var(--o-gap-5);
+    }
+    @include respond-to('pad_h') {
+      padding: var(--o-gap-4) var(--o-gap-5);
+    }
+    @include respond-to('pad_v') {
+      padding: var(--o-gap-3) var(--o-gap-4);
+    }
+    @include respond-to('phone') {
+      padding: var(--o-gap-3) var(--o-gap-4);
+    }
+    @include text1;
+
+    .filter-left {
+      display: flex;
+      align-items: center;
+      gap: var(--o-gap-2);
+      flex-wrap: wrap;
+
+      span:first-child {
+        flex-shrink: 0;
+        margin-right: var(--o-gap-5);
+        font-weight: 500;
+        @include respond-to('laptop') {
+          margin-right: var(--o-gap-4);
+        }
+        @include respond-to('pad_h') {
+          margin-right: var(--o-gap-3);
+        }
+        @include respond-to('pad_v') {
+          margin-right: var(--o-gap-4);
+        }
+        @include respond-to('phone') {
+          margin-right: var(--o-gap-4);
+        }
+      }
+
+      .o-toggle {
+        --toggle-size: 32px;
+        --toggle-padding: 3px 15px;
+        --toggle-radius: 4px;
+        max-height: 32px;
+        --toggle-bg-color: var(--o-color-fill1);
+        --toggle-bg-color-hover: var(--o-color-control2-light);
+        --toggle-color: var(--o-color-info1);
+        --toggle-color-hover: var(--o-color-info1);
+        --toggle-color-active: var(--o-color-primary1);
+        --toggle-color-disabled: var(--o-color-info4);
+        @include text1;
+      }
+    }
+
+    .o-input {
+      .o-icon-search {
+        font-size: 24px;
+        @include respond-to('<=pad_v') {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+  .list-content {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--o-gap-6);
+    margin-top: var(--o-gap-6);
+    @include respond-to('<=pad_v') {
+      grid-template-columns: repeat(1, 1fr);
+    }
+    @include respond-to('laptop') {
+      margin-top: var(--o-gap-5);
+      gap: var(--o-gap-5);
+    }
+    @include respond-to('pad_h') {
+      margin-top: var(--o-gap-4);
+      gap: var(--o-gap-4);
+    }
+    @include respond-to('pad_v') {
+      margin-top: var(--o-gap-4);
+      gap: var(--o-gap-3);
+    }
+    @include respond-to('phone') {
+      margin-top: var(--o-gap-4);
+      gap: var(--o-gap-3);
+    }
+
+    .o-card {
+      aspect-ratio: 1 / 1;
+      position: relative;
+      @include respond-to('<=pad_v') {
+        aspect-ratio: 1 / 0.4;
+      }
+
+      .o-card-cover {
+        padding: 0;
+      }
+
+      .o-card-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        overflow: hidden; // 防止内容溢出
+        box-sizing: border-box; // 确保 padding 计入总尺寸
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        color: var(--o-color-white);
+        text-align: center;
+        cursor: pointer;
+        padding: var(--o-gap-6);
+        z-index: 10;
+
+        @include respond-to('laptop') {
+          margin-top: var(--o-gap-5);
+        }
+        @include respond-to('pad_h') {
+          margin-top: var(--o-gap-4);
+        }
+        @include respond-to('pad_v') {
+          margin-top: var(--o-gap-4);
+        }
+        @include respond-to('phone') {
+          margin-top: var(--o-gap-4);
+        }
+
+        .event-status {
+          --tag-color: rgb(var(--o-white));
+          --tag-bg-color: rgba(var(--o-black), 0.25);
+          --tag-padding: var(--o-gap-1) var(--o-gap-3);
+          border: none;
+          position: absolute;
+          top: var(--o-gap-3);
+          right: var(--o-gap-3);
+          @include respond-to('<=pad_v') {
+            --tag-padding: var(--o-gap-1);
+          }
+        }
+
+        .event-name {
+          font-weight: 500;
+          text-align: center;
+          height: 3lh; // 3倍行高
+          @include h2;
+          @include text-truncate(3);
+          @include respond-to('pad_v') {
+            @include h1;
+          }
+          @include respond-to('phone') {
+            height: 2lh;
+            @include text-truncate(2);
+          }
+        }
+
+        .event-desc {
+          text-align: center;
+          font-weight: 500;
+          margin-top: var(--o-gap-5);
+
+          .o-divider {
+            --o-divider-color: var(--o-color-info1-inverse);
+            --o-divider-bd-color: var(--o-color-info1-inverse);
+            display: none;
+          }
+
+          @include text1;
+          @include respond-to('laptop') {
+            margin-top: var(--o-gap-4);
+          }
+          @include respond-to('pad_h') {
+            margin-top: var(--o-gap-3);
+          }
+          @include respond-to('pad_v') {
+            margin-top: var(--o-gap-2);
+          }
+          @include respond-to('phone') {
+            margin-top: var(--o-gap-2);
+          }
+          @include respond-to('<=pad_v') {
+            display: flex;
+            align-items: center;
+            .o-divider {
+              display: block;
+            }
+            @include tip1;
+          }
+        }
+      }
+    }
+
+    .event-card {
+      border-radius: var(--o-radius-xs);
+      color: rgb(var(--o-white));
+      background-size: cover;
+      background-repeat: no-repeat;
+    }
+  }
+
+  .o-pagination {
+    margin-top: var(--o-gap-6);
+
+    @include respond-to('laptop') {
+      margin-top: var(--o-gap-5);
+    }
+    @include respond-to('pad_h') {
+      margin-top: var(--o-gap-4);
+    }
+    @include respond-to('pad_v') {
+      margin-top: var(--o-gap-4);
+    }
+    @include respond-to('phone') {
+      margin-top: var(--o-gap-4);
+    }
+
+    .o-pagination-wrap {
+      justify-content: flex-end;
+    }
+  }
+
+}
+</style>

package/src/components/events/config.ts

@@ -0,0 +1,47 @@
+import IconSummit from '~icons/events/icon-summit.svg';
+import IconEvents from '~icons/events/icon-events.svg';
+import IconCompetition from '~icons/events/icon-competition.svg';
+import IconRelease from '~icons/events/icon-release.svg';
+
+import 上海 from '@/assets/events/city/上海.png';
+import 北京 from '@/assets/events/city/北京.png';
+import 南京 from '@/assets/events/city/南京.png';
+import 天津 from '@/assets/events/city/天津.png';
+import 成都 from '@/assets/events/city/成都.png';
+import 无锡 from '@/assets/events/city/无锡.png';
+import 杭州 from '@/assets/events/city/杭州.png';
+import 深圳1 from '@/assets/events/city/深圳1.png';
+import 深圳2 from '@/assets/events/city/深圳2.png';
+import 苏州 from '@/assets/events/city/苏州.png';
+import 西安 from '@/assets/events/city/西安.png';
+import 郑州 from '@/assets/events/city/郑州.png';
+import 武汉 from '@/assets/events/city/武汉.png';
+
+export const EVENTS_COLOR_MAP = {
+  summit: '--o-orange-6',
+  events: '--o-cyan-6',
+  competition: '--o-blue-6',
+  release: '--o-purple-6',
+};
+
+export const EVENTS_ICON_MAP = {
+  events: IconEvents,
+  competition: IconCompetition,
+  release: IconRelease,
+  summit: IconSummit,
+};
+
+export const CITY_MAP = {
+  上海,
+  北京,
+  南京,
+  天津,
+  成都,
+  无锡,
+  杭州,
+  深圳: [深圳1, 深圳2],
+  苏州,
+  西安,
+  郑州,
+  武汉,
+};

package/src/components/events/index.ts

@@ -0,0 +1,23 @@
+import _OEventsCalendar from './OEventsCalendar.vue';
+import _OEventsList from './OEventsList.vue';
+import _OEventsApply from './OEventsApply.vue';
+import type { App } from 'vue';
+
+const OEventsCalendar = Object.assign(_OEventsCalendar, {
+  install(app: App) {
+    app.component('OEventsCalendar', _OEventsCalendar);
+  },
+});
+const OEventsList = Object.assign(_OEventsList, {
+  install(app: App) {
+    app.component('OEventsList', _OEventsList);
+  },
+});
+const OEventsApply = Object.assign(_OEventsApply, {
+  install(app: App) {
+    app.component('OEventsApply', _OEventsApply);
+  },
+});
+
+export { OEventsCalendar, OEventsList, OEventsApply };
+export * from './types';

package/src/components/events/npmcachae/_cacache/content-v2/sha512/2c/4f/a4140bfbf374a43f7dfe71880c051f79149cd259fb1a154fb692802c7489ef2317b737e7e690a627714ba19317971f29051b3798c246297b425a626a5b7a

@@ -0,0 +1 @@
+{"_id":"composables","_rev":"9-3fcb45434ec45aa3e3827479722148ca","name":"composables","description":"Primitives to compose React component behavior.","dist-tags":{"latest":"1.0.0"},"versions":{"0.1.0-alpha.1":{"name":"composables","version":"0.1.0-alpha.1","main":"lib/composables.js","license":"MIT","scripts":{"build":"webpack","test":"jest"},"jest":{"snapshotSerializers":["enzyme-to-json/serializer"],"setupTestFrameworkScriptFile":"<rootDir>setup-jest.js"},"devDependencies":{"babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.0","jest":"^22.0.4","react":"^16.2.0","react-dom":"^16.2.0","webpack":"^3.10.0"},"peerDependencies":{"react":"^16.2.0"},"dependencies":{"prop-types":"^15.6.0"},"gitHead":"8531e87305b92d35f9fd7374adbc118d40bbe7ae","description":"Primitives to dynamically compose your React component's behavior.","_id":"composables@0.1.0-alpha.1","_shasum":"24a15abda790dce7a8686932361be9a66182bf55","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.8.0","_npmUser":{"name":"lucmartens","email":"lucmartens92@gmail.com"},"dist":{"shasum":"24a15abda790dce7a8686932361be9a66182bf55","tarball":"https://registry.npmjs.org/composables/-/composables-0.1.0-alpha.1.tgz","integrity":"sha512-m1f9t2Lk/h/hG6hunZWBjaRJAVW+1vdNunHh2AKLJ71K9vF3Oi7dOQQS3CLEtj5yqtL29SQMU6X2Aj55X+Li0A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsBRFyQ9o5oVpak6+Q0QoOK4xApdDIU/gK6odphwmXVAIgHKYHagCz9YsKLp1FCYkHTWqK+2U5vinaN4lWAGzdNAw="}]},"maintainers":[{"name":"lucmartens","email":"lucmartens92@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/composables-0.1.0-alpha.1.tgz_1516226419599_0.9537871140055358"},"directories":{}},"0.1.0-alpha.2":{"name":"composables","version":"0.1.0-alpha.2","description":"Compose React component behaviour.","main":"lib/composables.js","files":["lib","src"],"scripts":{"prepublish":"yarn build","build":"webpack","test":"jest"},"jest":{"snapshotSerializers":["enzyme-to-json/serializer"],"setupTestFrameworkScriptFile":"<rootDir>setup-jest.js"},"repository":{"type":"git","url":"git+https://github.com/lucmartens/composables.git"},"license":"MIT","devDependencies":{"babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.0","jest":"^22.0.4","react":"^16.2.0","react-dom":"^16.2.0","webpack":"^3.10.0"},"peerDependencies":{"react":"^16.2.0"},"dependencies":{"prop-types":"^15.6.0"},"gitHead":"dd86d46f1b2b103f22b187e752a15593a966636d","bugs":{"url":"https://github.com/lucmartens/composables/issues"},"homepage":"https://github.com/lucmartens/composables#readme","_id":"composables@0.1.0-alpha.2","_shasum":"83a4d293249d52f9f1fbb9c376bb810799fc1130","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.8.0","_npmUser":{"name":"lucmartens","email":"lucmartens92@gmail.com"},"dist":{"shasum":"83a4d293249d52f9f1fbb9c376bb810799fc1130","tarball":"https://registry.npmjs.org/composables/-/composables-0.1.0-alpha.2.tgz","integrity":"sha512-TGcyC5UFgzXtQwiIXqQgY7fbVIAtqQylMlbVdSqmcyN1pGuHD5zPVqiJfJtCxhU647GJ3hRuIPfAjvUMBATQFg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFtx5Cnbp/PiS8iOOm6qPzOLsRubxP8kY4Hdj/DwmzNJAiEAqPmHhXyZsXhlr/6m1IF5Mxfvg4R6R6RJoVakFZqOw5A="}]},"maintainers":[{"name":"lucmartens","email":"lucmartens92@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/composables-0.1.0-alpha.2.tgz_1516228242251_0.9135034529026598"},"directories":{}},"0.1.0-alpha.4":{"name":"composables","version":"0.1.0-alpha.4","description":"Primitives to compose React component behavior.","main":"lib/composables.js","files":["lib","src"],"scripts":{"prepublish":"yarn build","build":"webpack","test":"jest"},"jest":{"snapshotSerializers":["enzyme-to-json/serializer"],"setupTestFrameworkScriptFile":"<rootDir>setup-jest.js"},"repository":{"type":"git","url":"git+https://github.com/lucmartens/composables.git"},"license":"MIT","devDependencies":{"babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.0","jest":"^22.0.4","react":"^16.2.0","react-dom":"^16.2.0","webpack":"^3.10.0"},"peerDependencies":{"react":"^16.2.0"},"dependencies":{"prop-types":"^15.6.0"},"gitHead":"4bc6e620705694765c0ea77718dd4e2590c0c0b1","bugs":{"url":"https://github.com/lucmartens/composables/issues"},"homepage":"https://github.com/lucmartens/composables#readme","_id":"composables@0.1.0-alpha.4","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"lucmartens","email":"lucmartens92@gmail.com"},"dist":{"integrity":"sha512-K+hh6MBCGRKnSSb7ryU/DshZL1CUHq5fvolxjLsFdeALV+hzSKwTR5FF3iE3ADrl7IMstsJQdI37XzMe+tj0gw==","shasum":"bf6aabf2069d15d366978624f9012a7884e02dcb","tarball":"https://registry.npmjs.org/composables/-/composables-0.1.0-alpha.4.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGX92vdRSfCT6D8GGuVxhGwSpMKMlTx5uf+OnWuwwHdNAiEAgtaHMwq9i3xxTRLqMLo7Fxujc27gbEA+TG1lK03D/ns="}]},"maintainers":[{"name":"lucmartens","email":"lucmartens92@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/composables-0.1.0-alpha.4.tgz_1516230929045_0.05194128840230405"},"directories":{}},"0.1.0":{"name":"composables","version":"0.1.0","description":"Primitives to compose React component behavior.","main":"lib/composables.js","module":"es/index.js","files":["lib","src","es"],"scripts":{"prepublish":"yarn build","build":"yarn run build:commonjs && yarn run build:es","build:commonjs":"webpack","build:es":"babel -d es/ --ignore /__tests__/ src/ ","test":"jest"},"jest":{"snapshotSerializers":["enzyme-to-json/serializer"],"setupTestFrameworkScriptFile":"<rootDir>setup-jest.js"},"repository":{"type":"git","url":"git+https://github.com/lucmartens/composables.git"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.0","jest":"^22.0.4","react":"^16.2.0","react-dom":"^16.2.0","webpack":"^3.10.0"},"peerDependencies":{"react":"^16.2.0"},"dependencies":{"prop-types":"^15.6.0"},"gitHead":"405451ba77d0e7a293b1bedf1997e4b9f829ca51","bugs":{"url":"https://github.com/lucmartens/composables/issues"},"homepage":"https://github.com/lucmartens/composables#readme","_id":"composables@0.1.0","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"lucmartens","email":"lucmartens92@gmail.com"},"dist":{"integrity":"sha512-UXEWlUIz2c/jekqOnRy7eXWvzr90DwFTG7gOovkGAhQ47+7L099+k6TABdvoGzBPV9oGWbrW8eumalV3dBJATQ==","shasum":"b14ef179b8eef9fa9fa3e802de39bbe119b4a68e","tarball":"https://registry.npmjs.org/composables/-/composables-0.1.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHYd6iFhOSIt36Wvkx5CyszPqQFMNFqWv3KnyiZQRftGAiEA6lTgpZOtj/raW1tSTg7LfhEDHP7Y/TFHUK0+G3U4eqs="}]},"maintainers":[{"name":"lucmartens","email":"lucmartens92@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/composables-0.1.0.tgz_1516380289840_0.9476626438554376"},"directories":{}},"0.2.0":{"name":"composables","version":"0.2.0","description":"Primitives to compose React component behavior.","main":"lib/composables.js","module":"es/index.js","files":["lib","src","es"],"scripts":{"prepublish":"yarn build","build":"yarn run build:commonjs && yarn run build:es","build:commonjs":"webpack","build:es":"babel -d es/ --ignore /__tests__/ src/ ","test":"jest"},"jest":{"snapshotSerializers":["enzyme-to-json/serializer"],"setupTestFrameworkScriptFile":"<rootDir>setup-jest.js"},"repository":{"type":"git","url":"git+https://github.com/lucmartens/composables.git"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.0","jest":"^22.0.4","react":"^16.2.0","react-dom":"^16.2.0","webpack":"^3.10.0"},"peerDependencies":{"react":"^16.2.0"},"dependencies":{"prop-types":"^15.6.0"},"gitHead":"f86eb6308b04aa269d8035d9c5c2a26a916d354d","bugs":{"url":"https://github.com/lucmartens/composables/issues"},"homepage":"https://github.com/lucmartens/composables#readme","_id":"composables@0.2.0","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"lucmartens","email":"lucmartens92@gmail.com"},"dist":{"integrity":"sha512-ko8A3klcNqVq0X5gapRHudhhWRe/y407p9Yt4wS9mcbFAhZ8MWgHZ0uYC1Ql+1OecV8KheJ37B3eWXUz6bXC9Q==","shasum":"fd3002bc5632a12cea02f9b395c4951dcb59fc61","tarball":"https://registry.npmjs.org/composables/-/composables-0.2.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICmjOxjizonSSVxEiQGyReB7A855cEFVueVr4I41wmcJAiEAutdeZ+gfXgRJ4rZIM19x/IVOPW8duEICaxqUpwFDzBo="}]},"maintainers":[{"name":"lucmartens","email":"lucmartens92@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/composables-0.2.0.tgz_1516875487953_0.15023943386040628"},"directories":{}},"1.0.0":{"name":"composables","version":"1.0.0","description":"Primitives to compose React component behavior.","main":"lib/composables.js","module":"es/index.js","files":["lib","src","es"],"scripts":{"prepublish":"yarn build","build":"yarn run build:commonjs && yarn run build:es","build:commonjs":"webpack","build:es":"babel -d es/ --ignore /__tests__/ src/ ","test":"jest"},"jest":{"snapshotSerializers":["enzyme-to-json/serializer"],"setupTestFrameworkScriptFile":"<rootDir>setup-jest.js"},"repository":{"type":"git","url":"git+https://github.com/lucmartens/composables.git"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-to-json":"^3.3.0","jest":"^22.0.4","react":"^16.2.0","react-dom":"^16.2.0","webpack":"^3.10.0"},"peerDependencies":{"react":"^16.2.0"},"dependencies":{"prop-types":"^15.6.0"},"gitHead":"f999d8e25095c5ac0490dd7f00049195381d8f2a","bugs":{"url":"https://github.com/lucmartens/composables/issues"},"homepage":"https://github.com/lucmartens/composables#readme","_id":"composables@1.0.0","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"lucmartens","email":"lucmartens92@gmail.com"},"dist":{"integrity":"sha512-0kdRDGXfpsh8A/H8iFkfKdjXNyOPcfwyEmz3sQNmTuXNg7DxU0TxrMP1J4r7ACAEUnxjldtVnA9E1YX1igx3/Q==","shasum":"185979bd729c51c8a73ca60ecb163087fd25c9aa","tarball":"https://registry.npmjs.org/composables/-/composables-1.0.0.tgz","fileCount":20,"unpackedSize":47608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDr7Ejpg+/yZSmgVeSb/yanZedvV8EOejLh0IOoWE1MJAiBBF9VfrAM/foGf1KztQxlM4okFTY6lfV3kFI2zVWlofg=="}]},"maintainers":[{"name":"lucmartens","email":"lucmartens92@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/composables_1.0.0_1520356498971_0.945761267487486"},"_hasShrinkwrap":false}},"readme":"# Composables\n\nPrimitives to compose React component behavior.\n\n# Render prop pattern\n\nThis package makes heavy use of the render prop pattern. See the\n[React docs](https://reactjs.org/docs/render-props.html) for more details.\n\n# Component Reference\n\n## `State`\n\nAdd React state to a component.\n\n### Example\n\n```js\nimport { State } from 'composables';\n\n<State\n  initial={{ open: false }}\n  render={({ open }) => (\n    <Menu>\n      <Button onClick={() => open.set(!open.value)}>Toggle</Button>\n      {open.value && <MenuItems />}\n    </Menu>\n  )}\n/>;\n```\n\n### Props\n\n#### initial - object - required\n\nThe `initial` state.\n\n#### render - function - required\n\nFunction to display or further process the state. `render` is called with\nthe `value` and a `set` function for each entry in the `initial` state object.\n\n## `Result`\n\nConvert a promise to a result. The content of the result object depends on the\nstate of the promise.\n\n### Example\n\n```js\nimport { Result } from 'composables';\n\n<Result\n  promise={promise}\n  render={({ value, pending, error, done }) => (\n    <Page>\n      {pending && <Loader />}\n      {error && <Error error={value} />}\n      {done && <View value={value} />}\n    </Page>\n  )}\n/>;\n```\n\n### Props\n\n#### promise - Promise - required\n\nPromise to convert to a result.\n\n#### render - function - required\n\nFunction to display or further process the `result` object\n\n## `With`\n\nProduce side effects based on the component's lifecycle and props.\n\n### Example\n\n```js\nimport { With } from 'composables';\n\nconst FileImage = ({ file, ...props }) => (\n  <With\n    input={file}\n    enter={input => URL.createObjectURL(input)}\n    exit={output => URL.revokeObjectURL(output)}\n    render={url => <Image src={url} {...props} />}\n  />\n);\n```\n\n### Props\n\n#### input - any\n\nThe `input` arguments for the `enter` function.\n\n#### enter - function(`input`)\n\nThe `enter` function can be used to safely produce side effects. `enter` is\ncalled before the component mounts and when the `input` prop changes. The return\nvalue of this function is used as `output`.\n\n#### exit - function(`output`, `input`)\n\nThe `exit` function is primarily used to cleanup any side effects produced by\nthe `enter` function. `exit` is called when the component will unmount and when\nthe `input` prop changes. Make sure that any side effects you produce in `exit`\ndo not require cleanup.\n\n#### render - function(`output`)\n\nfunction to display or further process the produced `output`.\n\n#### shouldUpdate - function(`previousInput`, `nextInput`)\n\nPredicate function to determine whether a change in the `input` prop constitutes\ncalling `exit` and `enter` again. Defaults to a negative shallow equal check.\n\n#### lazy - boolean\n\nWhen `lazy` is true, the `enter` function will be called after the component has\nmounted. This can be beneficial to the speed of your component's first render\nand is especially useful when your `enter` function performs a slow synchronous\noperation (e.g local storage access). A consequence of delaying the `enter`\nfunction is that `render` can be called with `undefined` output.\n","maintainers":[{"name":"lucmartens","email":"lucmartens92@gmail.com"}],"time":{"modified":"2022-06-13T20:13:45.977Z","created":"2018-01-17T22:00:19.712Z","0.1.0-alpha.1":"2018-01-17T22:00:19.712Z","0.1.0-alpha.2":"2018-01-17T22:30:42.412Z","0.1.0-alpha.4":"2018-01-17T23:15:30.103Z","0.1.0":"2018-01-19T16:44:50.832Z","0.2.0":"2018-01-25T10:18:08.981Z","1.0.0":"2018-03-06T17:14:59.040Z"},"license":"MIT","readmeFilename":"README.md","homepage":"https://github.com/lucmartens/composables#readme","repository":{"type":"git","url":"git+https://github.com/lucmartens/composables.git"},"bugs":{"url":"https://github.com/lucmartens/composables/issues"}}

package/src/components/events/npmcachae/_cacache/index-v5/8e/86/70dc69f1b1592fe14da10d2516ddfaa609af0cd9054a6ebde664acc6ab12

@@ -0,0 +1,2 @@
+
+744bbeb9cbb0a1997ebd979fb2db6e7373c66cfd	{"key":"make-fetch-happen:request-cache:https://registry.npmjs.org/composables","integrity":"sha512-LE+kFAv783SkP33+cYgMBR95FJzSWfsaFU+2koAsdInvIxe3N+fmkKYncUuhkxeXHykFGzeYwkYpe0JaYmpbeg==","time":1774432714520,"size":15612,"metadata":{"time":1774432714502,"url":"https://registry.npmjs.org/composables","reqHeaders":{"accept":"application/json"},"resHeaders":{"cache-control":"public, max-age=300","content-encoding":"gzip","content-type":"application/json","date":"Wed, 25 Mar 2026 09:58:34 GMT","etag":"W/\"1d03adfe8e695182da4a565e7df1d3bd\"","last-modified":"Mon, 13 Jun 2022 20:13:47 GMT","vary":"accept-encoding, accept"},"options":{"compress":true}}}

package/src/components/events/npmcachae/_logs/2026-03-25T09_58_33_134Z-debug-0.log

@@ -0,0 +1,105 @@
+0 verbose cli C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js
+1 info using npm@10.9.3
+2 info using node@v22.18.0
+3 silly config load:file:C:\Users\Administrator\AppData\Roaming\nvm\v22.18.0\node_modules\npm\npmrc
+4 silly config load:file:D:\forks\OpenDesignPlus\packages\components\.npmrc
+5 silly config load:file:C:\Users\Administrator\.npmrc
+6 silly config load:file:C:\Program Files\nodejs\etc\npmrc
+7 verbose title npm info composables
+8 verbose argv "info" "--json" "composables"
+9 verbose logfile logs-max:10 dir:D:\forks\OpenDesignPlus\packages\components\src\components\events\npmcachae\_logs\2026-03-25T09_58_33_134Z-
+10 verbose logfile D:\forks\OpenDesignPlus\packages\components\src\components\events\npmcachae\_logs\2026-03-25T09_58_33_134Z-debug-0.log
+11 silly logfile done cleaning log files
+12 http fetch GET 200 https://registry.npmjs.org/composables 592ms (cache miss)
+13 silly view {
+13 silly view   '1.0.0': {
+13 silly view     _id: 'composables@1.0.0',
+13 silly view     _rev: '9-3fcb45434ec45aa3e3827479722148ca',
+13 silly view     name: 'composables',
+13 silly view     description: 'Primitives to compose React component behavior.',
+13 silly view     'dist-tags': { latest: '1.0.0' },
+13 silly view     versions: [
+13 silly view       '0.1.0-alpha.1',
+13 silly view       '0.1.0-alpha.2',
+13 silly view       '0.1.0-alpha.4',
+13 silly view       '0.1.0',
+13 silly view       '0.2.0',
+13 silly view       '1.0.0'
+13 silly view     ],
+13 silly view     maintainers: [ [Object] ],
+13 silly view     time: {
+13 silly view       modified: '2022-06-13T20:13:45.977Z',
+13 silly view       created: '2018-01-17T22:00:19.712Z',
+13 silly view       '0.1.0-alpha.1': '2018-01-17T22:00:19.712Z',
+13 silly view       '0.1.0-alpha.2': '2018-01-17T22:30:42.412Z',
+13 silly view       '0.1.0-alpha.4': '2018-01-17T23:15:30.103Z',
+13 silly view       '0.1.0': '2018-01-19T16:44:50.832Z',
+13 silly view       '0.2.0': '2018-01-25T10:18:08.981Z',
+13 silly view       '1.0.0': '2018-03-06T17:14:59.040Z'
+13 silly view     },
+13 silly view     license: 'MIT',
+13 silly view     readmeFilename: 'README.md',
+13 silly view     homepage: 'https://github.com/lucmartens/composables#readme',
+13 silly view     repository: {
+13 silly view       type: 'git',
+13 silly view       url: 'git+https://github.com/lucmartens/composables.git'
+13 silly view     },
+13 silly view     bugs: { url: 'https://github.com/lucmartens/composables/issues' },
+13 silly view     version: '1.0.0',
+13 silly view     main: 'lib/composables.js',
+13 silly view     module: 'es/index.js',
+13 silly view     files: [ 'lib', 'src', 'es' ],
+13 silly view     scripts: {
+13 silly view       prepublish: 'yarn build',
+13 silly view       build: 'yarn run build:commonjs && yarn run build:es',
+13 silly view       'build:commonjs': 'webpack',
+13 silly view       'build:es': 'babel -d es/ --ignore /__tests__/ src/ ',
+13 silly view       test: 'jest'
+13 silly view     },
+13 silly view     jest: {
+13 silly view       snapshotSerializers: [Array],
+13 silly view       setupTestFrameworkScriptFile: '<rootDir>setup-jest.js'
+13 silly view     },
+13 silly view     devDependencies: {
+13 silly view       'babel-cli': '^6.26.0',
+13 silly view       'babel-core': '^6.26.0',
+13 silly view       'babel-loader': '^7.1.2',
+13 silly view       'babel-plugin-transform-object-rest-spread': '^6.26.0',
+13 silly view       'babel-preset-env': '^1.6.1',
+13 silly view       'babel-preset-react': '^6.24.1',
+13 silly view       enzyme: '^3.3.0',
+13 silly view       'enzyme-adapter-react-16': '^1.1.1',
+13 silly view       'enzyme-to-json': '^3.3.0',
+13 silly view       jest: '^22.0.4',
+13 silly view       react: '^16.2.0',
+13 silly view       'react-dom': '^16.2.0',
+13 silly view       webpack: '^3.10.0'
+13 silly view     },
+13 silly view     peerDependencies: { react: '^16.2.0' },
+13 silly view     dependencies: { 'prop-types': '^15.6.0' },
+13 silly view     gitHead: 'f999d8e25095c5ac0490dd7f00049195381d8f2a',
+13 silly view     _npmVersion: '5.6.0',
+13 silly view     _nodeVersion: '8.9.4',
+13 silly view     _npmUser: { name: 'lucmartens', email: 'lucmartens92@gmail.com' },
+13 silly view     dist: {
+13 silly view       integrity: 'sha512-0kdRDGXfpsh8A/H8iFkfKdjXNyOPcfwyEmz3sQNmTuXNg7DxU0TxrMP1J4r7ACAEUnxjldtVnA9E1YX1igx3/Q==',
+13 silly view       shasum: '185979bd729c51c8a73ca60ecb163087fd25c9aa',
+13 silly view       tarball: 'https://registry.npmjs.org/composables/-/composables-1.0.0.tgz',
+13 silly view       fileCount: 20,
+13 silly view       unpackedSize: 47608,
+13 silly view       signatures: [Array]
+13 silly view     },
+13 silly view     directories: {},
+13 silly view     _npmOperationalInternal: {
+13 silly view       host: 's3://npm-registry-packages',
+13 silly view       tmp: 'tmp/composables_1.0.0_1520356498971_0.945761267487486'
+13 silly view     },
+13 silly view     _hasShrinkwrap: false
+13 silly view   }
+13 silly view }
+14 verbose cwd D:\forks\OpenDesignPlus\packages\components\src\components\events
+15 verbose os Windows_NT 10.0.17763
+16 verbose node v22.18.0
+17 verbose npm  v10.9.3
+18 verbose exit 0
+19 info ok