Merge pull request #20 from GrabarzUndPartner/feature/update-2

fix(update): add fonts and prepare for lighthouse
GrabarzUndPartner · Feb 11, 2022 · 221768b · 221768b
2 parents ed2b2b4 + 74cc2e2
commit 221768b
Show file tree

Hide file tree

Showing 102 changed files with 622 additions and 267 deletions.
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,4 @@ logs
 sw.*
 env/cert/*
 !env/cert/README.md
+.env
diff --git a/README.md b/README.md
@@ -17,12 +17,12 @@
 - Headline ([index](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Headline/index.vue)) | ([default](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Headline/default.vue))
 - Icon ([index](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Icon/index.vue)) | ([default](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Icon/default.vue))
 - Link ([index](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Link/index.vue)) | ([default](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Link/default.vue))
-- RichText ([index](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/RichText/index.vue)) | | ([default](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/RichText/default.vue))
-- Slider ([index](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Slider/index.vue)) | | ([default](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Slider/default.vue))
- - Slide ([index](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Slider/Slide/index.vue)) | | ([default](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Slider/Slide/default.vue))
+- RichText ([index](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/RichText/index.vue)) | ([default](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/RichText/default.vue))
+- Slider ([index](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Slider/index.vue)) | ([default](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Slider/default.vue))
+ - Slide ([index](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Slider/Slide/index.vue)) | ([default](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Slider/Slide/default.vue))
 - Svg ([index](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Svg/index.vue))
-- Toggle ([index](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Toggle/index.vue)) | | ([default](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Toggle/default.vue))
-- Toggle ([index](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Toggle/index.vue)) | | ([default](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Toggle/default.vue))
+- Toggle ([index](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Toggle/index.vue)) | ([default](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Toggle/default.vue))
+- Toggle ([index](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Toggle/index.vue)) | ([default](https://github.com/GrabarzUndPartner/foundation/blob/main/packages/core/Toggle/default.vue))
 
 
 ### Mutations

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/core/Headline/index.vue b/packages/core/Headline/index.vue
@@ -1,5 +1,5 @@
 <template>
- <component :is="`h${level}`" v-bind="$attrs" v-on="$listeners">
+ <component :is="`h${level}`" v-font="font" v-bind="$attrs" v-on="$listeners">
  <slot />
  </component>
 </template>
@@ -12,6 +12,12 @@ export default {
  level: {
  type: Number,
  default: 1
+ },
+ font: {
+ type: [Object, Array],
+ default () {
+ return [];
+ }
  }
  }
 };

diff --git a/packages/core/RichText/index.vue b/packages/core/RichText/index.vue
@@ -1,8 +1,8 @@
 <template>
- <div v-if="$slots.default">
+ <div v-if="$slots.default" v-font="font">
  <slot :value="value" />
  </div>
- <div v-else v-html="value" />
+ <div v-else v-font="font" v-html="value" />
 </template>
 
 <script>
@@ -12,6 +12,12 @@ export default {
  value: {
  type: String,
  default: null
+ },
+ font: {
+ type: [Object, Array],
+ default () {
+ return [];
+ }
  }
  }
 };

diff --git a/packages/core/Slider/Slide/index.vue b/packages/core/Slider/Slide/index.vue
@@ -1,5 +1,5 @@
 <template>
- <component :is="component" class="splide__slide">
+ <component :is="component" :id="`${splideId}-slide${String(index + 1).padStart(2, '0')}`" class="splide__slide">
  <slot />
  </component>
 </template>
@@ -11,6 +11,14 @@ export default {
  component: {
  type: [String, Function, Object],
  default: 'div'
+ },
+ splideId: {
+ type: String,
+ required: true
+ },
+ index: {
+ type: Number,
+ required: true
  }
  }
 };

diff --git a/packages/core/Slider/default.vue b/packages/core/Slider/default.vue
@@ -1,36 +1,42 @@
 <template>
  <base-slider class="design-default" v-bind="$attrs" v-on="$listeners">
- <template #default>
+ <template #default="{splideId}">
  <slot>
- <default-slide>Default Slide 1</default-slide>
- <default-slide>Default Slide 2</default-slide>
- <default-slide>Default Slide 3</default-slide>
+ <default-slide :index="0" :splide-id="splideId">
+ Default Slide 1
+ </default-slide>
+ <default-slide :index="1" :splide-id="splideId">
+ Default Slide 2
+ </default-slide>
+ <default-slide :index="2" :splide-id="splideId">
+ Default Slide 3
+ </default-slide>
  </slot>
  </template>
 
- <template #afterList="{go, hasNext, hasPrev}">
- <base-button class="navigation" :disabled="!hasPrev" :aria-label="ariaLabel.prev" :aria-controls="`Slider${_uid}-track`" @click="go('<')">
+ <template #afterList="{splideId, go, hasNext, hasPrev}">
+ <base-button class="navigation" :disabled="!hasPrev" :aria-label="ariaLabel.prev" :aria-controls="`${splideId}-track`" @click="go('<')">
  Prev
  </base-button>
- <base-button class="navigation prev" :disabled="!hasNext" :aria-label="ariaLabel.next" :aria-controls="`Slider${_uid}-track`" @click="go('>')">
+ <base-button class="navigation prev" :disabled="!hasNext" :aria-label="ariaLabel.next" :aria-controls="`${splideId}-track`" @click="go('>')">
  Next
  </base-button>
  </template>
 
- <template #afterTrack="{length, index:currentIndex, go, hasNext, hasPrev}">
+ <template #afterTrack="{splideId, length, index:currentIndex, go, hasNext, hasPrev}">
  <div class="pagination">
- <base-button :disabled="!hasPrev" :aria-label="ariaLabel.prev" :aria-controls="`Slider${_uid}-track`" @click="go('<')">
+ <base-button :disabled="!hasPrev" :aria-label="ariaLabel.prev" :aria-controls="`${splideId}-track`" @click="go('<')">
  Prev
  </base-button>
  <ul>
  <li v-for="index in length" :key="index">
- <base-button :disabled="(index-1) === currentIndex" :aria-label="`${ariaLabel.slide}${(index-1)}`" :aria-controls="`Slider${_uid}-slide${(index-1)}`" @click="go((index-1))">
+ <base-button :disabled="(index-1) === currentIndex" :aria-label="`${ariaLabel.slide}${(index-1)}`" :aria-controls="`${splideId}-slide${(index-1)}`" @click="go((index-1))">
  {{ index }}
  </base-button>
  </li>
  </ul>
  <span>{{ currentIndex + 1 }} / {{ length }}</span>
- <base-button :disabled="!hasNext" :aria-label="ariaLabel.next" :aria-controls="`Slider${_uid}-track`" @click="go('>')">
+ <base-button :disabled="!hasNext" :aria-label="ariaLabel.next" :aria-controls="`${splideId}-track`" @click="go('>')">
  Next
  </base-button>
  </div>

diff --git a/packages/core/Slider/index.vue b/packages/core/Slider/index.vue
@@ -1,19 +1,25 @@
 <template>
  <div>
  <div ref="slider">
- <slot name="beforeTrack" v-bind="{index, length, go, hasNext, hasPrev}" />
- <div class="splide__track">
- <slot name="beforeList" v-bind="{index, length, go, hasNext, hasPrev}" />
+ <slot name="beforeTrack" v-bind="{splideId, index, length, go, hasNext, hasPrev}" />
+ <div :id="`${splideId}-track`" class="splide__track">
+ <slot name="beforeList" v-bind="{splideId, index, length, go, hasNext, hasPrev}" />
  <component :is="listTag" class="splide__list">
- <slot v-bind="{index, length, go, hasNext, hasPrev}">
- <base-slide>Slide 1</base-slide>
- <base-slide>Slide 2</base-slide>
- <base-slide>Slide 3</base-slide>
+ <slot v-bind="{splideId, index, length, go, hasNext, hasPrev}">
+ <base-slide :index="0" :splide-id="splideId">
+ Slide 1
+ </base-slide>
+ <base-slide :index="1" :splide-id="splideId">
+ Slide 2
+ </base-slide>
+ <base-slide :index="2" :splide-id="splideId">
+ Slide 3
+ </base-slide>
  </slot>
  </component>
- <slot name="afterList" v-bind="{index, length, go, hasNext, hasPrev}" />
+ <slot name="afterList" v-bind="{splideId, index, length, go, hasNext, hasPrev}" />
  </div>
- <slot name="afterTrack" v-bind="{index, length, go, hasNext, hasPrev}" />
+ <slot name="afterTrack" v-bind="{splideId, index, length, go, hasNext, hasPrev}" />
  </div>
  </div>
 </template>
@@ -22,15 +28,15 @@
 import { getSplide } from './utils';
 import BaseSlide from './Slide';
 
+let sliderIndex = 1;
 export default {
  components: { BaseSlide },
  props: {
  // https://splidejs.com/guides/options/
  options: {
  type: Object,
  default () {
- return {
- };
+ return {};
  }
  },
  // https://splidejs.com/extensions/
@@ -54,6 +60,7 @@ export default {
  go: null,
  states: null,
  splide: null,
+ splideId: null,
  splideWrapper: { splide: null }
  };
  },
@@ -76,10 +83,16 @@ export default {
  }
  },
 
+ created () {
+ this.splideId = `splide${String(sliderIndex).padStart(2, '0')}`;
+ sliderIndex++;
+ },
+
  async mounted () {
  const { Splide, STATES, extensions } = await getSplide();
  const { Intersection } = extensions;
  this.states = STATES;
+
  this.splide = new Splide(this.$refs.slider, {
  ...this.options,
  pagination: false,
@@ -94,11 +107,15 @@ export default {
  }
  }
  });
+
  this.go = this.splide.go.bind(this.splide);
+
  this.splide.on('moved', index => (this.index = index));
  this.splide.on('mounted', () => {
+ this.splideId = this.splide.root.id;
  this.ready = true;
  });
+
  this.$nextTick(() => {
  this.splide.mount({ ...extensions, Intersection });
  });

diff --git a/packages/core/base/Select.vue b/packages/core/base/Select.vue
@@ -80,6 +80,7 @@ const isChecked = (context) => {
 
 <style lang="postcss" scoped>
 input.hidden {
+ position: absolute;
  width: 0;
  height: 0;
  opacity: 0;

diff --git a/packages/sample/ImageText/index.vue b/packages/sample/ImageText/index.vue