@muenchen/muc-patternlab-vue 1.8.0-beta.6 → 1.8.0-beta.7

package/dist/components/BuisnessHours/BusinessHourType.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Shorthand notation of all seven days in german.
+ *
+ * @typedef {"Mo" | "Di" | "Mi" | "Do" | "Fr" | "Sa" | "So"} WeekDays
+ */
+type WeekDays = "Mo" | "Di" | "Mi" | "Do" | "Fr" | "Sa" | "So";
+/**
+ * @typedef {Object} OpeningHour
+ * @property {string} from - The start time of the opening period (in 'HH:mm' format).
+ * @property {string} to - The end time of the opening period (in 'HH:mm' format).
+ */
+type OpeningHour = {
+    from: string;
+    to: string;
+};
+/**
+ * @typedef {Object} BusinessHourType
+ * @property {WeekDays} weekDay - The day of the week for which the opening hours apply.
+ * @property {OpeningHour[]} openingHours - A list of opening hours for the specified day of the week.
+ */
+type BusinessHourType = {
+    weekDay: WeekDays;
+    openingHours: OpeningHour[];
+};
+export type { BusinessHourType, OpeningHour, WeekDays };

package/dist/components/BuisnessHours/BusinessHours.stories.d.ts

@@ -0,0 +1,116 @@
+declare const _default: {
+    component: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstance<Readonly<import('vue').ExtractPropTypes<{
+            icon: {
+                type: import('vue').PropType<string>;
+                default: string;
+            };
+            businessHours: {
+                type: import('vue').PropType<import('./BusinessHourType').BusinessHourType[]>;
+                required: true;
+            };
+            toggleable: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
+        }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
+            icon: {
+                type: import('vue').PropType<string>;
+                default: string;
+            };
+            businessHours: {
+                type: import('vue').PropType<import('./BusinessHourType').BusinessHourType[]>;
+                required: true;
+            };
+            toggleable: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
+        }>>, {
+            icon: string;
+            toggleable: boolean;
+        }, true, {}, {}, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('vue').ExtractPropTypes<{
+            icon: {
+                type: import('vue').PropType<string>;
+                default: string;
+            };
+            businessHours: {
+                type: import('vue').PropType<import('./BusinessHourType').BusinessHourType[]>;
+                required: true;
+            };
+            toggleable: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
+        }>>, {}, {}, {}, {}, {
+            icon: string;
+            toggleable: boolean;
+        }>;
+        __isFragment?: undefined;
+        __isTeleport?: undefined;
+        __isSuspense?: undefined;
+    } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+        icon: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        businessHours: {
+            type: import('vue').PropType<import('./BusinessHourType').BusinessHourType[]>;
+            required: true;
+        };
+        toggleable: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+    }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+        icon: string;
+        toggleable: boolean;
+    }, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: Readonly<{
+            hint(): any;
+        }> & {
+            hint(): any;
+        };
+    });
+    title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        businessHours: {
+            weekDay: string;
+            openingHours: {
+                from: string;
+                to: string;
+            }[];
+        }[];
+        toggleable: boolean;
+    };
+};
+export declare const Fixed: {
+    args: {
+        toggleable: boolean;
+        businessHours: {
+            weekDay: string;
+            openingHours: {
+                from: string;
+                to: string;
+            }[];
+        }[];
+    };
+};

package/dist/types/components/BuisnessHours/BusinessHourType.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Shorthand notation of all seven days in german.
+ *
+ * @typedef {"Mo" | "Di" | "Mi" | "Do" | "Fr" | "Sa" | "So"} WeekDays
+ */
+type WeekDays = "Mo" | "Di" | "Mi" | "Do" | "Fr" | "Sa" | "So";
+/**
+ * @typedef {Object} OpeningHour
+ * @property {string} from - The start time of the opening period (in 'HH:mm' format).
+ * @property {string} to - The end time of the opening period (in 'HH:mm' format).
+ */
+type OpeningHour = {
+    from: string;
+    to: string;
+};
+/**
+ * @typedef {Object} BusinessHourType
+ * @property {WeekDays} weekDay - The day of the week for which the opening hours apply.
+ * @property {OpeningHour[]} openingHours - A list of opening hours for the specified day of the week.
+ */
+type BusinessHourType = {
+    weekDay: WeekDays;
+    openingHours: OpeningHour[];
+};
+export type { BusinessHourType, OpeningHour, WeekDays };

package/dist/types/components/BuisnessHours/BusinessHours.stories.d.ts

@@ -0,0 +1,116 @@
+declare const _default: {
+    component: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
+            icon: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            businessHours: {
+                type: import("vue").PropType<import("./BusinessHourType.js").BusinessHourType[]>;
+                required: true;
+            };
+            toggleable: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+        }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
+            icon: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            businessHours: {
+                type: import("vue").PropType<import("./BusinessHourType.js").BusinessHourType[]>;
+                required: true;
+            };
+            toggleable: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+        }>>, {
+            icon: string;
+            toggleable: boolean;
+        }, true, {}, {}, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("vue").ExtractPropTypes<{
+            icon: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            businessHours: {
+                type: import("vue").PropType<import("./BusinessHourType.js").BusinessHourType[]>;
+                required: true;
+            };
+            toggleable: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+        }>>, {}, {}, {}, {}, {
+            icon: string;
+            toggleable: boolean;
+        }>;
+        __isFragment?: undefined;
+        __isTeleport?: undefined;
+        __isSuspense?: undefined;
+    } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+        icon: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        businessHours: {
+            type: import("vue").PropType<import("./BusinessHourType.js").BusinessHourType[]>;
+            required: true;
+        };
+        toggleable: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+    }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+        icon: string;
+        toggleable: boolean;
+    }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: Readonly<{
+            hint(): any;
+        }> & {
+            hint(): any;
+        };
+    });
+    title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        businessHours: {
+            weekDay: string;
+            openingHours: {
+                from: string;
+                to: string;
+            }[];
+        }[];
+        toggleable: boolean;
+    };
+};
+export declare const Fixed: {
+    args: {
+        toggleable: boolean;
+        businessHours: {
+            weekDay: string;
+            openingHours: {
+                from: string;
+                to: string;
+            }[];
+        }[];
+    };
+};

package/dist/types/components/BuisnessHours/MucBusinessHours.vue.d.ts

@@ -0,0 +1,72 @@
+import { BusinessHourType } from "./BusinessHourType";
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    /**
+     * This array includes all the opening hours for all days of the week.
+     */
+    businessHours: BusinessHourType[];
+    /**
+     * Lets you choose between the toggleable and fixed state of the component.
+     * In the fixed state, no toggle button will be shown.
+     */
+    toggleable?: boolean | undefined;
+    /**
+     * Choose an icon for the toggle button. The default if none is given is the time icon.
+     */
+    icon?: string | undefined;
+}>, {
+    icon: string;
+    toggleable: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    /**
+     * This array includes all the opening hours for all days of the week.
+     */
+    businessHours: BusinessHourType[];
+    /**
+     * Lets you choose between the toggleable and fixed state of the component.
+     * In the fixed state, no toggle button will be shown.
+     */
+    toggleable?: boolean | undefined;
+    /**
+     * Choose an icon for the toggle button. The default if none is given is the time icon.
+     */
+    icon?: string | undefined;
+}>, {
+    icon: string;
+    toggleable: boolean;
+}>>>, {
+    icon: string;
+    toggleable: boolean;
+}, {}>, Readonly<{
+    /**
+     * Display a hint beneath all the opening hours.
+     */
+    hint(): any;
+}> & {
+    /**
+     * Display a hint beneath all the opening hours.
+     */
+    hint(): any;
+}>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/package.json

@@ -3,7 +3,7 @@
   "author": "FabianWilms",
   "description": "A vue component library of some of the components available from https://patternlab.muenchen.space",
   "license": "MIT",
-  "version": "1.8.0-beta.6",
+  "version": "1.8.0-beta.7",
   "private": false,
   "module": "./dist/muc-patternlab-vue.es.js",
   "types": "./dist/types/index.d.ts",

package/src/components/BuisnessHours/BusinessHourType.ts

@@ -0,0 +1,28 @@
+/**
+ * Shorthand notation of all seven days in german.
+ *
+ * @typedef {"Mo" | "Di" | "Mi" | "Do" | "Fr" | "Sa" | "So"} WeekDays
+ */
+type WeekDays = "Mo" | "Di" | "Mi" | "Do" | "Fr" | "Sa" | "So";
+
+/**
+ * @typedef {Object} OpeningHour
+ * @property {string} from - The start time of the opening period (in 'HH:mm' format).
+ * @property {string} to - The end time of the opening period (in 'HH:mm' format).
+ */
+type OpeningHour = {
+  from: string;
+  to: string;
+};
+
+/**
+ * @typedef {Object} BusinessHourType
+ * @property {WeekDays} weekDay - The day of the week for which the opening hours apply.
+ * @property {OpeningHour[]} openingHours - A list of opening hours for the specified day of the week.
+ */
+type BusinessHourType = {
+  weekDay: WeekDays;
+  openingHours: OpeningHour[];
+};
+
+export type { BusinessHourType, OpeningHour, WeekDays };

package/src/components/BuisnessHours/BusinessHours.stories.ts

@@ -0,0 +1,108 @@
+import MucBusinessHours from "./MucBusinessHours.vue";
+
+export default {
+  component: MucBusinessHours,
+  title: "MucBusinessHours",
+  tags: ["autodocs"],
+  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The businessHours component is used to display the business hours for each day of the week. 
+The current day is highlighted as well as the days that are closed. 
+In the toggleable variant, the current day and the opening hours are also displayed on the toggle button.
+
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-components-business-hours)
+`,
+      },
+    },
+  },
+};
+
+const businessHours = [
+  {
+    weekDay: "Mo",
+    openingHours: [
+      {
+        from: "08:00",
+        to: "12:00",
+      },
+      {
+        from: "14:00",
+        to: "18:00",
+      },
+    ],
+  },
+  {
+    weekDay: "Di",
+    openingHours: [
+      {
+        from: "09:00",
+        to: "13:00",
+      },
+    ],
+  },
+  {
+    weekDay: "Mi",
+    openingHours: [
+      {
+        from: "10:00",
+        to: "14:00",
+      },
+    ],
+  },
+  {
+    weekDay: "Do",
+    openingHours: [
+      {
+        from: "08:00",
+        to: "12:00",
+      },
+      {
+        from: "15:00",
+        to: "19:00",
+      },
+    ],
+  },
+  {
+    weekDay: "Fr",
+    openingHours: [
+      {
+        from: "08:00",
+        to: "12:00",
+      },
+      {
+        from: "13:00",
+        to: "17:00",
+      },
+    ],
+  },
+  {
+    weekDay: "Sa",
+    openingHours: [
+      {
+        from: "10:00",
+        to: "13:00",
+      },
+    ],
+  },
+  {
+    weekDay: "So",
+    openingHours: [],
+  },
+];
+
+export const Default = {
+  args: {
+    businessHours: businessHours,
+    toggleable: true,
+  },
+};
+
+export const Fixed = {
+  args: {
+    ...Default.args,
+    toggleable: false,
+  },
+};

package/src/components/BuisnessHours/MucBusinessHours.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="m-business-hours-toggle">
+    <h3 class="m-business-hours-toggle__title visually-hidden">
+      Öffnungszeiten
+    </h3>
+    <button
+      v-if="toggleable"
+      @click="toggleCollapsable"
+      class="m-business-hours-toggle__trigger is-open"
+      :class="collapsedClass"
+      type="button"
+      data-bs-toggle="collapse"
+      :aria-expanded="!collapsed"
+    >
+      <svg
+        aria-hidden="true"
+        class="icon icon--before"
+      >
+        <use :xlink:href="'#icon-' + icon"></use>
+      </svg>
+      <div v-if="todaysBusinessHours">
+        <span> {{ todaysBusinessHours.weekDay }} geöffnet </span>
+        <span
+          v-for="(time, index) in todaysBusinessHours.openingHours"
+          :key="index"
+        >
+          {{ time.from }} bis {{ time.to }}
+          <span v-if="index < todaysBusinessHours.openingHours.length - 1">
+            und
+          </span>
+        </span>
+      </div>
+
+      <svg
+        aria-hidden="true"
+        class="icon icon--after"
+      >
+        <use xlink:href="#icon-chevron-down"></use>
+      </svg>
+    </button>
+    <div
+      class="m-business-hours-toggle__content"
+      :class="collapseClass"
+    >
+      <ul class="ml-0">
+        <li
+          v-for="day in businessHours"
+          :key="day.weekDay"
+          :class="highlightBusinessDay(day)"
+        >
+          <span class="weekday">{{ day.weekDay }}</span>
+          <span class="hours">
+            <div v-if="day.openingHours.length === 0">geschlossen</div>
+            <div
+              v-else
+              v-for="time in day.openingHours"
+              :key="time.from"
+            >
+              {{ time.from }} - {{ time.to }}
+            </div>
+          </span>
+        </li>
+      </ul>
+      <div
+        v-if="slots['hint']"
+        class="hint"
+      >
+        <slot name="hint" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+import { BusinessHourType } from "./BusinessHourType";
+
+const LOCALES = "de-DE";
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * This array includes all the opening hours for all days of the week.
+     */
+    businessHours: BusinessHourType[];
+
+    /**
+     * Lets you choose between the toggleable and fixed state of the component.
+     * In the fixed state, no toggle button will be shown.
+     */
+    toggleable?: boolean;
+
+    /**
+     * Choose an icon for the toggle button. The default if none is given is the time icon.
+     */
+    icon?: string;
+  }>(),
+  {
+    icon: "time",
+    toggleable: false,
+  }
+);
+
+let collapsed = ref(props.toggleable);
+
+const slots = defineSlots<{
+  /**
+   * Display a hint beneath all the opening hours.
+   */
+  hint(): any;
+}>();
+
+/**
+ * Toggles the collapsed state of the business hours section.
+ */
+const toggleCollapsable = () => {
+  collapsed.value = !collapsed.value;
+};
+
+/**
+ * Computes the CSS class for the collapse state.
+ *
+ * @returns {string} The CSS class for the collapse state.
+ */
+const collapseClass = computed(() => (collapsed.value ? "collapse" : ""));
+
+/**
+ * Computes the CSS class for the collapsed state.
+ *
+ * @returns {string} The CSS class for the collapsed state.
+ */
+const collapsedClass = computed(() => (collapsed.value ? "collapsed" : ""));
+
+/**
+ * Computes the short name of today's day.
+ *
+ * @returns {string} The short name of today's day (e.g., "Mo", "Di").
+ */
+const todaysDayShortName = computed(() => {
+  const today = new Date();
+  return today.toLocaleDateString(LOCALES, { weekday: "short" });
+});
+
+/**
+ * Highlights the business day based on whether it has opening hours and if it is today's day.
+ *
+ * @param {BusinessHourType} businessHour - The business hour object to check.
+ * @returns {string} The CSS class indicating if the business is open or closed.
+ */
+const highlightBusinessDay = (businessHour: BusinessHourType) => {
+  if (businessHour.openingHours.length === 0) return "is-closed";
+  if (businessHour.weekDay === todaysDayShortName.value) return "is-open";
+};
+
+/**
+ * Computes today's business hours from the provided business hours.
+ *
+ * @returns {BusinessHourType | undefined} The business hours for today, if available.
+ */
+const todaysBusinessHours = computed(() =>
+  props.businessHours.find((curr) => curr.weekDay === todaysDayShortName.value)
+);
+</script>
+
+<style scoped></style>