Release 20241025125249

src/components/ContentLoader/ContentLoader.vue

@@ -76,14 +76,14 @@ const lines = computed(() => {
 }
 
 .line {
-  background-color: #ccc;
+  background-color: $line-color-light;
   animation: pulse 1.5s ease-in-out infinite;
   border-radius: 0.25rem;
   flex-grow: 1;
 }
 
 .circle {
-  background-color: #ccc;
+  background-color: $line-color-light;
   border-radius: 50%;
   animation: pulse 1.5s ease-in-out infinite;
 }

src/components/TextInput/TextInput.vue

@@ -92,29 +92,33 @@ export default defineComponent({
 <style lang="scss" scoped>
 .text-input {
   font: inherit;
-  font-size: 14px;
+  // mobile safariでのfocus時の拡大を防ぐため16px以上が必要
+  font-size: 16px;
   box-sizing: border-box;
   width: 100%;
   margin: 0;
   color: $text-base;
   border: 0;
-  outline: 0;
+  padding: 0.5rem 0.65rem;
+  border: 1px solid $line-color;
 
   &.has-error {
     border-color: $red;
+    background-color: $red-100;
+  }
+
+  @include mq-up(md) {
+    font-size: 14px;
   }
 }
 
 .is-single-line {
   line-height: 1;
-  padding: 7px 2px;
-  border-bottom: 1px solid $line-color;
+  border-radius: $corner-r;
 }
 
 .is-multi-line {
   line-height: 1.5;
-  padding: 7px 9px;
-  border: 1px solid $line-color;
   border-radius: $corner-r;
 }
 

src/main.ts

@@ -16,3 +16,4 @@ export { default as TextInput } from '@/components/TextInput/TextInput.vue'
 export { default as ToggleLabelSet } from '@/components/ToggleLabelSet/ToggleLabelSet.vue'
 export { default as ToggleSwitch } from '@/components/ToggleSwitch/ToggleSwitch.vue'
 export { default as Tooltip } from '@/components/Tooltip/Tooltip.vue'
+export { default as ContentLoader } from '@/components/ContentLoader/ContentLoader.vue'

src/stylesheets/variables/_index.scss

@@ -37,6 +37,7 @@ $black-000: #FFFFFF;
 $blue-green: #18B0A8;
 $green: #18BF69;
 $red: #FF5A5F;
+$red-100: #FDEEEE;
 $yellow: #FFD600;
 $gold: #AE9301;
 $gold-100: #F7F4E6;
@@ -90,25 +91,24 @@ $font-family-en: 'Roboto', 'Noto Sans JP', sans-serif;
 // `md`: iPad幅（ポートレート・縦）
 // `lg`: iPad幅（ランドスケープ・横）
 // `xl`: デスクトップ想定
-$breakpoint-up: (
-  'sm': 'print, screen and (min-width: 300px)',
-  'md': 'print, screen and (min-width: 768px)',
-  'lg': 'print, screen and (min-width: 1024px)',
-  'xl': 'print, screen and (min-width: 1440px)',
+$breakpoints: (
+  'sm': '300px',
+  'md': '768px',
+  'lg': '1024px',
+  'xl': '1440px',
 ) !default;
 
 @mixin mq-up($breakpoint) {
-  @if map-has-key($breakpoint-up, $breakpoint) {
-    @media #{inspect(map-get($breakpoint-up, $breakpoint))} {
+  @if map-has-key($breakpoints, $breakpoint) {
+    @media print, screen and (min-width: #{map-get($breakpoints, $breakpoint)}) {
       @content;
     }
   } @else {
     @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
-    + "Please make sure it is defined in `$breakpoint-up` map.";
+    + "Please make sure it is defined in `$breakpoints` map.";
   }
 }
 
-
 // ==========================================================================
 // Layout
 // ==========================================================================

types/components/ContentLoader/ContentLoader.vue.d.ts

@@ -1,28 +1,33 @@
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     type?: "PARAGRAPH" | "BULLET_LIST" | "CIRCLE";
-    height?: number;
-    baseLineHeight?: number;
+    lineCount?: number;
+    lineHeight?: number;
+    randomLineWidth?: boolean;
     gap?: number;
 }>, {
     type: string;
-    height: number;
-    baseLineHeight: number;
+    lineCount: number;
+    lineHeight: number;
+    randomLineWidth: boolean;
     gap: number;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     type?: "PARAGRAPH" | "BULLET_LIST" | "CIRCLE";
-    height?: number;
-    baseLineHeight?: number;
+    lineCount?: number;
+    lineHeight?: number;
+    randomLineWidth?: boolean;
     gap?: number;
 }>, {
     type: string;
-    height: number;
-    baseLineHeight: number;
+    lineCount: number;
+    lineHeight: number;
+    randomLineWidth: boolean;
     gap: number;
 }>>>, {
     type: "PARAGRAPH" | "BULLET_LIST" | "CIRCLE";
-    height: number;
     gap: number;
-    baseLineHeight: number;
+    lineHeight: number;
+    lineCount: number;
+    randomLineWidth: boolean;
 }, {}>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

types/main.d.ts

@@ -16,3 +16,4 @@ export { default as TextInput } from './components/TextInput/TextInput.vue';
 export { default as ToggleLabelSet } from './components/ToggleLabelSet/ToggleLabelSet.vue';
 export { default as ToggleSwitch } from './components/ToggleSwitch/ToggleSwitch.vue';
 export { default as Tooltip } from './components/Tooltip/Tooltip.vue';
+export { default as ContentLoader } from './components/ContentLoader/ContentLoader.vue';