Merge branch 'master' into pico-v2

.env.example

@@ -2,4 +2,4 @@ VITE_APP_NAME="App Name"
 VITE_PUSHER_KEY=
 VITE_GA_MEASUREMENT_ID=
 VITE_API_URL=http://192.168.10.17/
-VITE_STRIPE_KEY=
+VITE_STRIPE_KEY=sk-test-01

.storybook/main.ts

@@ -6,6 +6,7 @@ const config: StorybookConfig = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "@storybook/addon-a11y"
   ],
   framework: {
     name: "@storybook/vue3-vite",

README.md

@@ -5,7 +5,7 @@ Arguably the most important parts of an app (authentication and handling payment
 ![Screenshot](screenshot.png)
 
 ## Demo
-https://vue3-starter-demo.netlify.app **(Note: this is a pure clien-side demo so there is no backend - you won't be able to login)**
+https://vue3-starter-demo.netlify.app **(Note: this is a pure client-side demo so there is no backend - you won't be able to login or test payment methods)**
 
 See the components below for a more detailed preview.
 

package.json

@@ -36,13 +36,15 @@
   "devDependencies": {
     "@pinia/testing": "^0.0.14",
     "@rushstack/eslint-patch": "^1.1.4",
+    "@storybook/addon-a11y": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",
     "@storybook/blocks": "^7.6.17",
     "@storybook/test": "^7.6.17",
     "@storybook/vue3": "^7.6.17",
     "@storybook/vue3-vite": "^7.6.17",
+    "@storybook/web-components": "^7.6.17",
     "@types/jsdom": "^20.0.0",
     "@types/node": "^16.11.68",
     "@vitejs/plugin-basic-ssl": "^1.0.2",
@@ -85,4 +87,4 @@
     "translation-key-check",
     "test:unit:coverage"
   ]
-}
+}

src/assets/main.css

@@ -40,6 +40,72 @@ article>footer>* {
   margin-bottom: 0px;
 }
 
+/* If the articles last child is not a footer, remove margin-bottom */
+article>:last-child:not(footer) {
+  margin-bottom: 0;
+}
+
+/* If the last child is the header,  */
+article>:last-child:is(header) {
+  margin-bottom: calc(var(--block-spacing-vertical)* -2);
+}
+
+/* If the .images are the first child, remove margin-top and add a margin-bottom */
+article>:first-child:is(.images) {
+  margin-top: calc(var(--block-spacing-vertical)* -1);
+  margin-bottom: var(--block-spacing-vertical);
+  margin-left: calc(var(--block-spacing-horizontal)* -1);
+  margin-right: calc(var(--block-spacing-horizontal)* -1);
+
+  width: calc(100% + var(--block-spacing-horizontal)* 2);
+}
+
+/* If the last child is images, remove margin-bottom */
+article>:last-child:is(.images) {
+  margin-bottom: calc(var(--block-spacing-vertical)* -1);
+}
+
+/* If the last child is the footer, remove the margin-top */
+article>:first-child:is(footer) {
+  margin-top: calc(var(--block-spacing-vertical)* -1);
+}
+
+/* make a simple slider with flex */
+.images {
+  width: 100%;
+  overflow-y: scroll;
+  display: flex;
+  max-height: 400px;
+
+  /* Scroll snap */
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+  scroll-padding: 0 10px;
+
+}
+
+.images>img {
+  width: 90%;
+  height: auto;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+a:has(>article),
+a:has(>article):is([aria-current]) {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  --color: var(--text-color);
+}
+
+a:has(>article):hover {
+  text-decoration: none;
+  color: inherit;
+  --color: var(--text-color);
+}
+
 main~footer ul {
   display: flex;
   align-items: center;
@@ -81,4 +147,16 @@ nav form {
 .v-enter-from,
 .v-leave-to {
   opacity: 0;
+}
+
+/* If there's an label and the next element is a required input/select, add a star to the label */
+label:has(+input:required)::after,
+label:has(+textarea:required)::after,
+label:has(+select:required)::after,
+/* If label has child checkbox, the text will be after the child input */
+label:has(>input[type="checkbox"]:required)::after,
+label:has(>input[type="radio"]:required)::after {
+  content: "*";
+  color: var(--del-color);
+  margin-left: calc(var(--nav-link-spacing-vertical) / 2);
 }

src/components/BaseButton.vue

@@ -7,22 +7,35 @@ defineProps({
     type: String,
     required: false,
   },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 </script>
 <template>
-  <a role="button" v-if="$attrs.href">
+  <a
+    role="button"
+    v-if="$attrs.href"
+    :disabled="disabled ? disabled : undefined"
+  >
     <!-- @slot This is the text or content that is clickable and navigates. This is the slot inside the `<a>` tag if href is present. This component automatically sets the href or to attributes for navigation for you. It renders as an `<a>` tag with a `role=button` if its `href`, otherwise its a button if `to` is passed. -->
     <slot />
   </a>
 
   <router-link v-else-if="to" :to="to" custom v-slot="{ navigate }">
-    <button v-bind="$attrs" @click="navigate">
+    <button
+      v-bind="$attrs"
+      @click="navigate"
+      :disabled="disabled ? disabled : undefined"
+    >
       <!-- @slot This is the default slot which contains the text.  -->
       <slot />
     </button>
   </router-link>
 
-  <button v-else>
+  <button v-else :disabled="disabled ? disabled : undefined">
     <slot />
   </button>
 </template>