@operato/event-view 1.0.0-beta.12 → 1.0.0-beta.15

package/stories/index.stories.ts

@@ -1,60 +1,39 @@
-import { html, TemplateResult } from 'lit';
-import '../src/event-view.js';
+import '../src/event-view.js'
+
+import { html, TemplateResult } from 'lit'
 
 export default {
   title: 'EventView',
   component: 'event-view',
   argTypes: {
-    title: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' },
+    format: { control: 'select', options: ['monthly', 'weekly'], description: 'set event view format' }
   }
-};
+}
 
 interface Story<T> {
-  (args: T): TemplateResult;
-  args?: Partial<T>;
-  argTypes?: Record<string, unknown>;
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
 }
 
 interface ArgTypes {
-  title?: string;
-  counter?: number;
-  textColor?: string;
-  slot?: TemplateResult;
+  format?: string
 }
 
-const Template: Story<ArgTypes> = ({
-  title = 'Hello world',
-  counter = 5,
-  textColor,
-  slot,
-}: ArgTypes) => html`
-  <event-view
-    style="--event-view-text-color: ${textColor || 'black'}"
-    .title=${title}
-    .counter=${counter}
-  >
-    ${slot}
-  </event-view>
-`;
-
-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 } },
-};
+const Template: Story<ArgTypes> = ({ format = 'monthly' }: ArgTypes) =>
+  html`
+    <link rel="stylesheet" href="/themes/app-theme.css" />
+    <link rel="stylesheet" href="/themes/calendar-theme.css" />
+
+    <event-view format=${format}> </event-view>
+  `
+
+export const Regular = Template.bind({})
+Regular.args = {
+  format: 'monthly'
+}
+
+export const WeeklyEventView = Template.bind({})
+WeeklyEventView.args = {
+  format: 'weekly'
+}

package/themes/calendar-theme.css

@@ -25,6 +25,27 @@ body {
   --calendar-monthly-event-padding: 2px var(--padding-default);
   --calendar-monthly-event-border: 3px solid #ccc;
   --calendar-monthly-event-border-width: 0 0 0 3px;
+
+  /* weekly layout */
+  --calendar-weekly-ol-margin: var(--margin-default) 0;
+  --calendar-weekly-ol-top-border: 2px solid rgba(var(--secondary-color-rgb), 0.7);
+  --calendar-current-week-background-color: var(--theme-white-color);
+  --calendar-weekly-label-align: center;
+  --calendar-weekly-label-padding: var(--padding-narrow) 0;
+  --calendar-weekly-label-color: rgba(var(--secondary-color-rgb), 0.8);
+  --calendar-weekly-opacity: 0.5;
+  --calendar-weekly-date-label-background-color: var(--status-danger-color);
+  --calendar-weekly-date-label-margin: var(--margin-narrow);
+  --calendar-weekly-date-label-padding: 5px var(--padding-narrow);
+  --calendar-weekly-date-label-color: var(--theme-white-color);
+
+  --calendar-weekly-background-color: #f4f4f4;
+  --calendar-weekly-event-border-radius: var(--border-radius);
+  --calendar-weekly-event-margin: var(--padding-narrow) 0 0 0;
+  --calendar-weekly-event-padding: 2px var(--padding-default);
+  --calendar-weekly-event-border: 3px solid #ccc;
+  --calendar-weekly-event-border-width: 0 0 0 3px;
+
 }
 
 @media only screen and (max-width: 460px) {

package/tsconfig.json

@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
-    "target": "es2018",
+    "target": "esnext",
     "module": "esnext",
     "moduleResolution": "node",
+    "resolveJsonModule": true,
     "noEmitOnError": true,
     "lib": ["es2017", "dom"],
     "strict": true,