@opendesign-plus/components 0.0.1-rc.5 → 0.0.1-rc.50

package/dist/treeshaking/components/events/OEventsList.css

@@ -0,0 +1,486 @@
+.hover-icon-rotate .o-icon {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon {
+    transform: rotate(-180deg);
+}
+}
+.o-events-list {
+  --events-card-radius: var(--o-radius-xs);
+  --events-tag-radius: var(--o-radius-xs);
+}
+.o-events-list .filter-slot-wrapper {
+  background-color: var(--o-color-fill2);
+  border-radius: var(--events-card-radius);
+  padding: var(--o-gap-5) var(--o-gap-6);
+  gap: var(--o-gap-3) var(--o-gap-2);
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .filter-slot-wrapper {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .filter-slot-wrapper {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .filter-slot-wrapper {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-events-list .filter-slot-wrapper {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .filter-slot-wrapper {
+    padding: var(--o-gap-4) var(--o-gap-5);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .filter-slot-wrapper {
+    padding: var(--o-gap-4) var(--o-gap-5);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .filter-slot-wrapper {
+    padding: var(--o-gap-3) var(--o-gap-4);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .filter-slot-wrapper {
+    padding: var(--o-gap-3) var(--o-gap-4);
+}
+}
+.o-events-list .filter-wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: var(--o-gap-4);
+}
+.o-events-list .filter-wrapper .filter-left {
+  display: flex;
+  align-items: center;
+  gap: var(--o-gap-2);
+  flex-wrap: wrap;
+}
+.o-events-list .filter-wrapper .filter-left span:first-child {
+  flex-shrink: 0;
+  margin-right: var(--o-gap-5);
+  font-weight: 500;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .filter-wrapper .filter-left span:first-child {
+    margin-right: var(--o-gap-4);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .filter-wrapper .filter-left span:first-child {
+    margin-right: var(--o-gap-3);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .filter-wrapper .filter-left span:first-child {
+    margin-right: var(--o-gap-4);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .filter-wrapper .filter-left span:first-child {
+    margin-right: var(--o-gap-4);
+}
+}
+.o-events-list .filter-wrapper .filter-left .o-toggle {
+  --toggle-size: 32px;
+  --toggle-padding: 3px 15px;
+  --toggle-radius: var(--events-tag-radius);
+  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);
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .filter-wrapper .filter-left .o-toggle {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .filter-wrapper .filter-left .o-toggle {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .filter-wrapper .filter-left .o-toggle {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-events-list .filter-wrapper .filter-left .o-toggle {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-events-list .filter-wrapper .o-input .o-icon-search {
+  font-size: 24px;
+}
+.o-events-list .list-content {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--o-gap-6);
+  margin-top: var(--o-gap-6);
+}
+@media screen and (max-width: 1000px) {
+.o-events-list .list-content {
+    grid-template-columns: repeat(3, 1fr);
+}
+}
+@media (max-width: 840px) {
+.o-events-list .list-content {
+    grid-template-columns: repeat(1, 1fr);
+    container-type: inline-size;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content {
+    margin-top: var(--o-gap-5);
+    gap: var(--o-gap-5);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content {
+    margin-top: var(--o-gap-4);
+    gap: var(--o-gap-4);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content {
+    margin-top: var(--o-gap-4);
+    gap: var(--o-gap-3);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content {
+    margin-top: var(--o-gap-4);
+    gap: var(--o-gap-3);
+}
+}
+.o-events-list .list-content .o-card {
+  aspect-ratio: 1/1;
+  position: relative;
+  --card-radius: var(--events-card-radius);
+}
+@media (max-width: 840px) {
+.o-events-list .list-content .o-card {
+    aspect-ratio: 1/0.4;
+}
+}
+@container (max-width: 300px) {
+.o-events-list .list-content .o-card {
+    height: 140px;
+    width: 100%;
+    aspect-ratio: unset;
+}
+}
+.o-events-list .list-content .o-card .o-card-cover {
+  padding: 0;
+  height: 100%;
+}
+.o-events-list .list-content .o-card .o-card-main {
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+  box-sizing: border-box;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.o-events-list .list-content .o-card .o-card-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--o-color-white);
+  text-align: center;
+  padding: var(--o-gap-6);
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content {
+    margin-top: var(--o-gap-4);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content {
+    margin-top: var(--o-gap-4);
+}
+}
+.o-events-list .list-content .o-card .o-card-content .tags-wrapper {
+  position: absolute;
+  top: var(--o-gap-3);
+  right: var(--o-gap-3);
+  display: flex;
+  align-items: center;
+  column-gap: var(--o-gap-2);
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .tags-wrapper {
+    top: var(--o-gap-2);
+    right: var(--o-gap-2);
+}
+}
+.o-events-list .list-content .o-card .o-card-content .tags-wrapper .o-tag {
+  --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);
+  --tag-text-size: 12px;
+  --tag-text-height: 18px;
+  --tag-height: 24px;
+  border: none;
+  border-radius: var(--events-tag-radius);
+}
+@media (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .tags-wrapper .o-tag {
+    --tag-padding: var(--o-gap-1);
+}
+}
+.o-events-list .list-content .o-card .o-card-content .tags-wrapper .o-tag .o-tag-icon {
+  height: 16px;
+}
+.o-events-list .list-content .o-card .o-card-content .tags-wrapper .o-tag .o-tag-icon svg {
+  width: 16px;
+  height: 16px;
+}
+.o-events-list .list-content .o-card .o-card-content .event-name {
+  font-weight: 500;
+  text-align: center;
+  height: 3lh;
+  font-size: 24px;
+  line-height: 32px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+.o-events-list .list-content .o-card .o-card-content .event-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 32px;
+    line-height: 44px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) and (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) and (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) and (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) and (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-name {
+    height: 2lh;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+}
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+  text-align: center;
+  font-weight: 500;
+  margin-top: var(--o-gap-5);
+}
+.o-events-list .list-content .o-card .o-card-content .event-desc .o-divider {
+  --o-divider-color: var(--o-color-info1-inverse);
+  --o-divider-bd-color: var(--o-color-info1-inverse);
+  display: none;
+}
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    margin-top: var(--o-gap-4);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    margin-top: var(--o-gap-3);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    margin-top: var(--o-gap-2);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    margin-top: var(--o-gap-2);
+}
+}
+@media (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    display: flex;
+    align-items: center;
+}
+.o-events-list .list-content .o-card .o-card-content .event-desc .o-divider {
+    display: block;
+}
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 840px) and (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 840px) and (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 840px) and (min-width: 601px) and (max-width: 840px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 840px) and (max-width: 600px) {
+.o-events-list .list-content .o-card .o-card-content .event-desc {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-events-list .list-content .event-card {
+  border-radius: var(--events-card-radius);
+  color: rgb(var(--o-white));
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.o-events-list .o-pagination {
+  margin-top: var(--o-gap-6);
+  --pagination-item-bg-color-current: var(--o-color-primary1);
+  --pagination-item-color-current: #fff;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-events-list .o-pagination {
+    margin-top: var(--o-gap-5);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-events-list .o-pagination {
+    margin-top: var(--o-gap-4);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-events-list .o-pagination {
+    margin-top: var(--o-gap-4);
+}
+}
+@media (max-width: 600px) {
+.o-events-list .o-pagination {
+    margin-top: var(--o-gap-4);
+}
+}
+.o-events-list .o-pagination .o-pagination-wrap {
+  justify-content: flex-end;
+}

package/dist/treeshaking/components/events/OEventsList.vue.d.ts

@@ -0,0 +1,28 @@
+import { EventsCardItemT, EventsListPropsT, SearchParamsT } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        empty?: () => any;
+        filter?: () => any;
+    }> & {
+        empty?: () => any;
+        filter?: () => any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<EventsListPropsT, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    search: (params: SearchParamsT) => any;
+}, string, import('vue').PublicProps, Readonly<EventsListPropsT> & Readonly<{
+    onSearch?: ((params: SearchParamsT) => any) | undefined;
+}>, {
+    data: EventsCardItemT[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};