yuyeon 0.0.23 → 0.0.24

package/lib/components/input/YInput.scss

@@ -1,245 +1,256 @@
-
-@use '../../styles/palette';
-@use '../../styles/variables';
-
-$input-border-radius: variables.$border-radius-root !default;
-
-.y-input {
-  font-size: 14px;
-  flex: 1 1 auto;
-  display: flex;
-  align-items: flex-start;
-  letter-spacing: normal;
-  text-align: left;
-
-  --y-input-focused-color: var(--y-theme-primary);
-
-  &__prepend,
-  &__append {
-    height: 100%;
-  }
-
-  &__stack {
-    display: flex;
-    flex-direction: column;
-    height: 100%; // auto
-    flex: 1;
-    flex-wrap: wrap;
-    min-width: 0;
-    width: 100%;
-  }
-
-  &__display {
-    display: flex;
-    position: relative;
-    cursor: text;
-    flex: 1 1 auto;
-    border-radius: $input-border-radius;
-  }
-
-  &__plate {
-    position: absolute;
-    inset: 0;
-    border-bottom: 1px solid transparent;
-    contain: paint;
-    border-radius: $input-border-radius;
-    outline: 0 solid rgba(0, 0, 0, 0);
-    transition: 140ms ease;
-  }
-
-  &__value {
-    position: relative;
-    flex: 1 0 auto;
-    padding: 0.5rem 0.875rem;
-    display: flex;
-    align-items: center;
-    line-height: 1em;
-  }
-
-  &__helper-text {
-    font-size: 14px;
-    font-weight: 320;
-    color: #444;
-  }
-
-  @keyframes label-float {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(-26px) scale(0.74);
-    }
-  }
-
-  @keyframes label-sink {
-    0% {
-      opacity: 1;
-      transform: translateY(-26px) scale(0.74);
-    }
-    30% {
-      opacity: 0;
-    }
-    80% {
-      opacity: 0;
-      transform: translateY(-8px) scale(1);
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-
-  &__label {
-    position: absolute;
-    color: #5e5e5e;
-    max-width: 90%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    pointer-events: none;
-    left: 0;
-    top: 6px;
-    transform-origin: left center;
-
-    &--floated {
-      animation: label-float 200ms ease-in-out forwards;
-    }
-
-    &:not(&--floated) {
-      animation: label-sink 200ms linear;
-    }
-  }
-
-  &__leading {
-    position: relative;
-    display: inline-flex;
-    margin-top: 10px;
-    padding-right: 4px;
-    align-self: flex-start;
-
-    > * {
-      width: 24px;
-      height: 24px;
-      user-select: none;
-    }
-  }
-
-  &__trailing {
-    position: relative;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  &--labeled {
-    padding-top: 12px;
-    margin-top: 4px;
-  }
-
-  &--filled {
-    --y-input-default-filled: 242, 242, 242;
-    --y-input-filled-opacity: 0.04;
-    --y-input-filled-opacity-hover: 0.08;
-
-    .y-input {
-      &__prepend {
-        padding-left: 12px;
-      }
-      //
-      &__plate {
-        background: rgba(var(--y-theme-on-surface-rgb, var(--y-input-default-filled)), var(--y-input-filled-opacity));
-      }
-
-      &__display:hover {
-        --y-input-filled-opacity: var(--y-input-filled-opacity-hover);
-      }
-    }
-  }
-
-  &--outlined {
-    --y-input-outlined-opacity: 0.64;
-    --y-input-outlined-opacity-hover: 0.87;
-
-    .y-input {
-      &__plate {
-        border: 1px solid rgba(var(--y-theme-outline-rgb), var(--y-input-outlined-opacity));
-        box-sizing: border-box;
-        inset: 0;
-
-        &:before {
-          top: 0;
-          height: 100%;
-          background: transparent;
-          border-radius: inherit;
-        }
-      }
-
-      &__display:hover {
-        --y-input-outlined-opacity: var(--y-input-outlined-opacity-hover);
-      }
-    }
-  }
-
-  &--ceramic {
-    .y-input__plate {
-      border: 1px solid #e4e4e4;
-      box-sizing: border-box;
-      inset: 0;
-      border-top-color: transparent;
-      border-left-width: 0;
-      border-right-width: 0;
-      box-shadow: 1px 2px 8px -1px rgb(0 0 0 / 12%), -1px -1px 2px 1px rgba(0, 0, 0, 0.04),
-        inset 1px 1px 8px -4px rgb(0 0 0 / 11%);
-      outline: 0 solid rgba(0, 0, 0, 0);
-    }
-
-    .y-input__plate:before {
-      inset: -1px;
-      height: 100%;
-      background: transparent;
-      border-radius: inherit;
-    }
-  }
-
-  &--focused {
-    .y-input__value {
-      outline: none;
-    }
-
-    .y-input__plate {
-      outline: 1px solid rgba(var(--y-theme-primary, #4f97dc), 0.1);
-      border-color: var(--y-input-focused-color);
-    }
-
-    .y-input__leading {
-      color: currentColor;
-    }
-
-    &.y-input--outlined {
-      //
-    }
-  }
-
-  &--error {
-    &.y-input--outlined {
-      .y-input__plate {
-        border-color: var(--y-palette-negative) !important;
-      }
-    }
-    .y-input__helper-text {
-      color: var(--y-palette-negative);
-    }
-  }
-
-  &--success {
-    &.y-input--outlined {
-      .y-input__plate {
-        border-color: var(--y-palette-positive) !important;
-      }
-    }
-    .y-input__helper-text {
-      color: var(--y-palette-positive);
-    }
-  }
-}
+
+@use '../../styles/palette';
+@use '../../styles/variables';
+
+$input-border-radius: variables.$border-radius-root !default;
+
+.y-input {
+  font-size: 14px;
+  flex: 1 1 auto;
+  display: flex;
+  align-items: flex-start;
+  letter-spacing: normal;
+  text-align: left;
+
+  --y-input-focused-color: var(--y-theme-primary);
+  --y-input-label-color: var(--y-theme-on-surface-variant);
+
+  &__prepend,
+  &__append {
+    height: 100%;
+  }
+
+  &__stack {
+    display: flex;
+    flex-direction: column;
+    height: 100%; // auto
+    flex: 1;
+    flex-wrap: wrap;
+    min-width: 0;
+    width: 100%;
+  }
+
+  &__display {
+    display: flex;
+    position: relative;
+    cursor: text;
+    flex: 1 1 auto;
+    border-radius: $input-border-radius;
+  }
+
+  &__plate {
+    position: absolute;
+    inset: 0;
+    border-bottom: 1px solid transparent;
+    contain: paint;
+    border-radius: $input-border-radius;
+    outline: 0 solid rgba(0, 0, 0, 0);
+    transition: 140ms ease;
+  }
+
+  &__value {
+    position: relative;
+    flex: 1 0 auto;
+    padding: 0.5rem 0.875rem;
+    display: flex;
+    align-items: center;
+    line-height: 1em;
+  }
+
+  &__helper-text {
+    font-size: 14px;
+    font-weight: 320;
+    color: #444;
+  }
+
+  @keyframes label-float {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(-26px) scale(0.94);
+    }
+  }
+
+  @keyframes label-sink {
+    0% {
+      opacity: 1;
+      transform: translateY(-26px) scale(0.74);
+    }
+    30% {
+      opacity: 0;
+    }
+    80% {
+      opacity: 0;
+      transform: translateY(-8px) scale(1);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  &__label {
+    color: var(--y-input-label-color);
+    padding-bottom: 4px;
+    font-weight: 500;
+  }
+
+  &__floating-label {
+    position: absolute;
+    max-width: 90%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none;
+    padding-bottom: unset;
+    left: 0;
+    top: 6px;
+    transform-origin: left center;
+
+    &--floated {
+      animation: label-float 200ms ease-in-out forwards;
+    }
+
+    &:not(&--floated) {
+      animation: label-sink 200ms linear;
+    }
+  }
+
+  &__leading {
+    position: relative;
+    display: inline-flex;
+    margin-top: 10px;
+    padding-right: 4px;
+    align-self: flex-start;
+
+    > * {
+      width: 24px;
+      height: 24px;
+      user-select: none;
+    }
+  }
+
+  &__required-mark {
+    color: var(--y-theme-error);
+  }
+
+  &__trailing {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &--labeled {
+    padding-top: 12px;
+    margin-top: 4px;
+  }
+
+  &--filled {
+    --y-input-default-filled: 242, 242, 242;
+    --y-input-filled-opacity: 0.04;
+    --y-input-filled-opacity-hover: 0.08;
+
+    .y-input {
+      &__prepend {
+        padding-left: 12px;
+      }
+      //
+      &__plate {
+        background: rgba(var(--y-theme-on-surface-rgb, var(--y-input-default-filled)), var(--y-input-filled-opacity));
+      }
+
+      &__display:hover {
+        --y-input-filled-opacity: var(--y-input-filled-opacity-hover);
+      }
+    }
+  }
+
+  &--outlined {
+    --y-input-outlined-opacity: 0.64;
+    --y-input-outlined-opacity-hover: 0.87;
+
+    .y-input {
+      &__plate {
+        border: 1px solid rgba(var(--y-theme-outline-rgb), var(--y-input-outlined-opacity));
+        box-sizing: border-box;
+        inset: 0;
+
+        &:before {
+          top: 0;
+          height: 100%;
+          background: transparent;
+          border-radius: inherit;
+        }
+      }
+
+      &__display:hover {
+        --y-input-outlined-opacity: var(--y-input-outlined-opacity-hover);
+      }
+    }
+  }
+
+  &--ceramic {
+    .y-input__plate {
+      border: 1px solid #e4e4e4;
+      box-sizing: border-box;
+      inset: 0;
+      border-top-color: transparent;
+      border-left-width: 0;
+      border-right-width: 0;
+      box-shadow: 1px 2px 8px -1px rgb(0 0 0 / 12%), -1px -1px 2px 1px rgba(0, 0, 0, 0.04),
+        inset 1px 1px 8px -4px rgb(0 0 0 / 11%);
+      outline: 0 solid rgba(0, 0, 0, 0);
+    }
+
+    .y-input__plate:before {
+      inset: -1px;
+      height: 100%;
+      background: transparent;
+      border-radius: inherit;
+    }
+  }
+
+  &--focused {
+    .y-input__value {
+      outline: none;
+    }
+
+    .y-input__plate {
+      outline: 1px solid rgba(var(--y-theme-primary, #4f97dc), 0.1);
+      border-color: var(--y-input-focused-color);
+    }
+
+    .y-input__leading {
+      color: currentColor;
+    }
+
+    &.y-input--outlined {
+      //
+    }
+  }
+
+  &--error {
+    &.y-input--outlined {
+      .y-input__plate {
+        border-color: var(--y-palette-negative) !important;
+      }
+    }
+    .y-input__helper-text {
+      color: var(--y-palette-negative);
+    }
+  }
+
+  &--success {
+    &.y-input--outlined {
+      .y-input__plate {
+        border-color: var(--y-palette-positive) !important;
+      }
+    }
+    .y-input__helper-text {
+      color: var(--y-palette-positive);
+    }
+  }
+}

package/lib/components/layer/YLayer.scss

@@ -1,33 +1,33 @@
-.y-layer-group {
-  contain: layout;
-  left: 0;
-  top: 0;
-  pointer-events: none;
-  position: absolute;
-  display: contents;
-}
-
-.y-layer {
-  border-radius: inherit;
-  display: flex;
-  inset: 0;
-  position: fixed;
-  color: var(--y-theme-on-background);
-
-  &__scrim {
-    pointer-events: auto;
-    background: rgb(var(--y-layer-scrim, 0, 0, 0));
-    border-radius: inherit;
-    inset: 0;
-    opacity: 0.4;
-    position: fixed;
-  }
-
-  &__content {
-    outline: none;
-    position: absolute;
-    pointer-events: auto;
-    contain: layout;
-    transform-style: preserve-3d;
-  }
-}
+.y-layer-group {
+  contain: layout;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  position: absolute;
+  display: contents;
+}
+
+.y-layer {
+  border-radius: inherit;
+  display: flex;
+  inset: 0;
+  position: fixed;
+  color: var(--y-theme-on-background);
+
+  &__scrim {
+    pointer-events: auto;
+    background: rgb(var(--y-layer-scrim, 0, 0, 0));
+    border-radius: inherit;
+    inset: 0;
+    opacity: 0.4;
+    position: fixed;
+  }
+
+  &__content {
+    outline: none;
+    position: absolute;
+    pointer-events: auto;
+    contain: layout;
+    transform-style: preserve-3d;
+  }
+}

package/lib/components/menu/YMenu.scss

@@ -1,22 +1,22 @@
-.y-menu {
-  font-size: 0.875rem;
-  $elevation-fallback: 1px 1px 8px -1px rgba(0, 0, 0, 0.14), 4px 4px 24px -4px rgba(0, 0, 0, 0.28), -2px -2px 8px -2px rgba(0, 0, 0, 0.14);
-
-  --y-menu__border-radius: 8px;
-  --y-menu__elevation: var(--y-elevation--level2);
-
-  &__content {
-    box-shadow: var(--y-menu__elevation, #{$elevation-fallback});
-    border-radius: var(--y-menu__border-radius);
-    background: var(--y-theme-surface);
-    display: flex;
-    flex-direction: column;
-
-    > .y-card {
-      background: rgb(var(--y-theme-surface));
-      border-radius: inherit;
-      overflow: auto;
-      height: 100%;
-    }
-  }
-}
+.y-menu {
+  font-size: 0.875rem;
+  $elevation-fallback: 1px 1px 8px -1px rgba(0, 0, 0, 0.14), 4px 4px 24px -4px rgba(0, 0, 0, 0.28), -2px -2px 8px -2px rgba(0, 0, 0, 0.14);
+
+  --y-menu__border-radius: 8px;
+  --y-menu__elevation: var(--y-elevation--level2);
+
+  &__content {
+    box-shadow: var(--y-menu__elevation, #{$elevation-fallback});
+    border-radius: var(--y-menu__border-radius);
+    background: var(--y-theme-surface);
+    display: flex;
+    flex-direction: column;
+
+    > .y-card {
+      background: rgb(var(--y-theme-surface));
+      border-radius: inherit;
+      overflow: auto;
+      height: 100%;
+    }
+  }
+}

package/lib/components/progress-bar/YProgressBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YProgressBar.mjs","names":["defineComponent","useProgress","isColorValue","YProgressBar","name","props","value","type","Number","rounded","Boolean","height","noRewindTransition","outlined","innerText","color","String","default","textColor","outlineColor","indeterminate","reverse","setup","numValue","data","delta","computed","classes","noTransition","leadColor","styles","minWidth","transform","render","slots","$slots","_createVNode","undefined","_createTextVNode"],"sources":["../../../src/components/progress-bar/YProgressBar.tsx"],"sourcesContent":["import { PropType, StyleValue, defineComponent } from 'vue';\n\nimport { useProgress } from '../../composables/progress';\nimport './YProgressBar.scss';\nimport { isColorValue } from \"../../util/color\";\n\nexport const YProgressBar = defineComponent({\n  name: 'YProgressBar',\n  props: {\n    value: {\n      type: Number as PropType<number>,\n    },\n    rounded: {\n      type: Boolean as PropType<boolean>,\n    },\n    height: {\n      type: Number as PropType<number>,\n    },\n    noRewindTransition: {\n      type: Boolean as PropType<boolean>,\n    },\n    outlined: {\n      type: Boolean as PropType<boolean>,\n    },\n    innerText: {\n      type: Boolean as PropType<boolean>,\n    },\n    color: {\n      type: String as PropType<string>,\n      default: 'primary',\n    },\n    textColor: {\n      type: String as PropType<string>,\n    },\n    outlineColor: {\n      type: String as PropType<string>,\n    },\n    indeterminate: Boolean,\n    reverse: Boolean,\n  },\n  setup(props) {\n    const { numValue } = useProgress(props);\n\n    return {\n      numValue,\n    };\n  },\n  data() {\n    return {\n      delta: 0,\n    };\n  },\n  computed: {\n    classes(): Record<string, boolean> {\n      let noTransition = false;\n      if (this.noRewindTransition && this.delta < 0) {\n        noTransition = true;\n      }\n      return {\n        'y-progress--no-trans': noTransition,\n        'y-progress--outlined': !!this.outlined,\n        'y-progress--indeterminate': !!this.indeterminate,\n        'y-progress-bar--rounded': !!this.rounded,\n        'y-progress-bar--reverse': !!this.reverse,\n      };\n    },\n    leadColor(): string {\n      let color = this.color ?? '';\n      if (!isColorValue(color)) {\n        color = `var(--y-theme-${color})`;\n      }\n      return color;\n    },\n    styles(): StyleValue {\n      let minWidth;\n      if (this.innerText && this.numValue < 5 && this.numValue > 0) {\n        minWidth = '2rem';\n      }\n      return {\n        transform: `scaleX(${this.numValue / 100})`,\n        minWidth,\n      };\n    },\n  },\n  render() {\n    const {\n      classes,\n      numValue,\n      height,\n      outlineColor,\n      textColor,\n      styles,\n      innerText,\n    } = this;\n    const slots = this.$slots;\n    return (\n      <div\n        class={{ 'y-progress y-progress-bar': true, ...classes }}\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={numValue}\n        style={{\n          '--y-progress-bar__height':\n            height !== undefined ? `${height}px` : undefined,\n          '--y-progress-bar__outline-color':\n            outlineColor !== undefined ? outlineColor : undefined,\n          '--y-progress-bar__color': this.leadColor,\n        }}\n      >\n        <div class=\"y-progress__track\"></div>\n        <div class=\"y-progress__tube\">\n          <div class=\"y-progress__lead\" style={styles}>\n            {slots['lead-inner']\n              ? slots['lead-inner']()\n              : innerText && (\n                  <div\n                    class={{\n                      'y-progress__lead-inner': true,\n                      'y-progress__lead-inner--fixed': numValue < 3,\n                    }}\n                    style={{ color: textColor }}\n                  >\n                    <span>{numValue} %</span>\n                  </div>\n                )}\n          </div>\n        </div>\n      </div>\n    );\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"YProgressBar.mjs","names":["defineComponent","useProgress","isColorValue","YProgressBar","name","props","value","type","Number","rounded","Boolean","height","noRewindTransition","outlined","innerText","color","String","default","textColor","outlineColor","indeterminate","reverse","setup","numValue","data","delta","computed","classes","noTransition","leadColor","styles","minWidth","transform","render","slots","$slots","_createVNode","undefined","_createTextVNode"],"sources":["../../../src/components/progress-bar/YProgressBar.tsx"],"sourcesContent":["import { PropType, StyleValue, defineComponent } from 'vue';\r\n\r\nimport { useProgress } from '../../composables/progress';\r\nimport './YProgressBar.scss';\r\nimport { isColorValue } from \"../../util/color\";\r\n\r\nexport const YProgressBar = defineComponent({\r\n  name: 'YProgressBar',\r\n  props: {\r\n    value: {\r\n      type: Number as PropType<number>,\r\n    },\r\n    rounded: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    height: {\r\n      type: Number as PropType<number>,\r\n    },\r\n    noRewindTransition: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    outlined: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    innerText: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    color: {\r\n      type: String as PropType<string>,\r\n      default: 'primary',\r\n    },\r\n    textColor: {\r\n      type: String as PropType<string>,\r\n    },\r\n    outlineColor: {\r\n      type: String as PropType<string>,\r\n    },\r\n    indeterminate: Boolean,\r\n    reverse: Boolean,\r\n  },\r\n  setup(props) {\r\n    const { numValue } = useProgress(props);\r\n\r\n    return {\r\n      numValue,\r\n    };\r\n  },\r\n  data() {\r\n    return {\r\n      delta: 0,\r\n    };\r\n  },\r\n  computed: {\r\n    classes(): Record<string, boolean> {\r\n      let noTransition = false;\r\n      if (this.noRewindTransition && this.delta < 0) {\r\n        noTransition = true;\r\n      }\r\n      return {\r\n        'y-progress--no-trans': noTransition,\r\n        'y-progress--outlined': !!this.outlined,\r\n        'y-progress--indeterminate': !!this.indeterminate,\r\n        'y-progress-bar--rounded': !!this.rounded,\r\n        'y-progress-bar--reverse': !!this.reverse,\r\n      };\r\n    },\r\n    leadColor(): string {\r\n      let color = this.color ?? '';\r\n      if (!isColorValue(color)) {\r\n        color = `var(--y-theme-${color})`;\r\n      }\r\n      return color;\r\n    },\r\n    styles(): StyleValue {\r\n      let minWidth;\r\n      if (this.innerText && this.numValue < 5 && this.numValue > 0) {\r\n        minWidth = '2rem';\r\n      }\r\n      return {\r\n        transform: `scaleX(${this.numValue / 100})`,\r\n        minWidth,\r\n      };\r\n    },\r\n  },\r\n  render() {\r\n    const {\r\n      classes,\r\n      numValue,\r\n      height,\r\n      outlineColor,\r\n      textColor,\r\n      styles,\r\n      innerText,\r\n    } = this;\r\n    const slots = this.$slots;\r\n    return (\r\n      <div\r\n        class={{ 'y-progress y-progress-bar': true, ...classes }}\r\n        role=\"progressbar\"\r\n        aria-valuemin=\"0\"\r\n        aria-valuemax=\"100\"\r\n        aria-valuenow={numValue}\r\n        style={{\r\n          '--y-progress-bar__height':\r\n            height !== undefined ? `${height}px` : undefined,\r\n          '--y-progress-bar__outline-color':\r\n            outlineColor !== undefined ? outlineColor : undefined,\r\n          '--y-progress-bar__color': this.leadColor,\r\n        }}\r\n      >\r\n        <div class=\"y-progress__track\"></div>\r\n        <div class=\"y-progress__tube\">\r\n          <div class=\"y-progress__lead\" style={styles}>\r\n            {slots['lead-inner']\r\n              ? slots['lead-inner']()\r\n              : innerText && (\r\n                  <div\r\n                    class={{\r\n                      'y-progress__lead-inner': true,\r\n                      'y-progress__lead-inner--fixed': numValue < 3,\r\n                    }}\r\n                    style={{ color: textColor }}\r\n                  >\r\n                    <span>{numValue} %</span>\r\n                  </div>\r\n                )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  },\r\n});\r\n"],"mappings":"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"}