yuyeon 0.1.2-rc.2 → 0.2.0

package/lib/components/input/YInput.scss

@@ -1,254 +1,258 @@
-
-
-@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 {
-    height: 100%; // auto
-    flex: 1;
-    flex-wrap: wrap;
-    min-width: 0;
-    width: 100%;
-  }
-
-  &__display {
-    display: inline-flex;
-    position: relative;
-    cursor: text;
-    flex: 1 1 auto;
-    border-radius: $input-border-radius;
-    width: 100%;
-  }
-
-  &__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 {
-    display: block;
-    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;
-      }
-    }
-
-    &:not(.y-input--disabled) .y-input__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/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 {
+    height: 100%; // auto
+    flex: 1;
+    flex-wrap: wrap;
+    min-width: 0;
+    width: 100%;
+  }
+
+  &__display {
+    display: inline-flex;
+    position: relative;
+    cursor: text;
+    flex: 1 1 auto;
+    border-radius: $input-border-radius;
+    width: 100%;
+  }
+
+  &__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 {
+    display: block;
+    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;
+      }
+    }
+
+    &:not(.y-input--disabled) .y-input__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/input/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/input/index.ts"],"sourcesContent":["export * from './YInput';\r\n"],"mappings":""}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/input/index.ts"],"sourcesContent":["export * from './YInput';\n"],"mappings":""}

package/lib/components/ip-field/YIpField.scss

@@ -1,74 +1,74 @@
-.y-ip-field {
-  font-size: 1rem;
-  max-width: 12.8em;
-  color: var(--y-theme-on-background);
-
-  &.y-input--rounded .y-input__plate {
-    border-radius: calc(var(--display-height) / 2);
-  }
-
-  &--text {
-    color: inherit;
-    pointer-events: none;
-
-    input {
-      color: inherit;
-    }
-  }
-
-  .y-input {
-    &__display {
-      cursor: default;
-    }
-  }
-
-  &.y-input--error {
-    input {
-      color: inherit;
-    }
-  }
-
-  &__field {
-    flex: 1 1;
-    min-width: 0;
-    display: flex;
-    position: relative;
-    padding: 2px 16px;
-  }
-
-  &__part {
-    flex: 1 1;
-    display: flex;
-    align-items: center;
-    outline: none;
-
-    &-input {
-      position: relative;
-      flex: 1 1;
-      width: 2em;
-      text-align: center;
-      padding: 4px 0;
-      color: var(--y-theme-on-background);
-
-      &:focus {
-        outline: none;
-      }
-
-      &--fixed {
-        opacity: 0.4;
-      }
-    }
-  }
-
-  &__part-delimiter {
-    flex: 0 0 auto;
-    font-size: inherit;
-    padding: 0 0.2em;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  .y-input__leading {
-    padding-right: 0;
-  }
-}
+.y-ip-field {
+  font-size: 1rem;
+  max-width: 12.8em;
+  color: var(--y-theme-on-background);
+
+  &.y-input--rounded .y-input__plate {
+    border-radius: calc(var(--display-height) / 2);
+  }
+
+  &--text {
+    color: inherit;
+    pointer-events: none;
+
+    input {
+      color: inherit;
+    }
+  }
+
+  .y-input {
+    &__display {
+      cursor: default;
+    }
+  }
+
+  &.y-input--error {
+    input {
+      color: inherit;
+    }
+  }
+
+  &__field {
+    flex: 1 1;
+    min-width: 0;
+    display: flex;
+    position: relative;
+    padding: 2px 16px;
+  }
+
+  &__part {
+    flex: 1 1;
+    display: flex;
+    align-items: center;
+    outline: none;
+
+    &-input {
+      position: relative;
+      flex: 1 1;
+      width: 2em;
+      text-align: center;
+      padding: 4px 0;
+      color: var(--y-theme-on-background);
+
+      &:focus {
+        outline: none;
+      }
+
+      &--fixed {
+        opacity: 0.4;
+      }
+    }
+  }
+
+  &__part-delimiter {
+    flex: 0 0 auto;
+    font-size: inherit;
+    padding: 0 0.2em;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .y-input__leading {
+    padding-right: 0;
+  }
+}

package/lib/components/ip-field/YIpv4Field.mjs

@@ -1,8 +1,8 @@
 import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
-import { computed, defineComponent, mergeProps, nextTick, reactive, ref, toRef, watch } from 'vue';
+import { computed, mergeProps, nextTick, reactive, ref, toRef, watch } from 'vue';
 import { useModelDuplex } from "../../composables/communication.mjs";
 import { useRender } from "../../composables/component.mjs";
-import { chooseProps } from "../../util/vue-component.mjs";
+import { chooseProps, defineComponent } from "../../util/component/index.mjs";
 import { YInput, pressYInputPropsOptions } from "../input/index.mjs";
 import "./YIpField.scss";
 const INHERIT_NAME = 'y-ip-field';