morya-ui 0.1.1 → 0.2.2

package/dist/components/Select/styles.css

@@ -1,240 +1,240 @@
-.m-select__control {
-    position: relative;
-    width: 100%;
-}
-
-.m-select {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    font-size: var(--m-control-font-medium);
-    min-height: var(--m-control-height-medium);
-    padding: 0 var(--m-control-padding-x-medium);
-    padding-right: var(--m-control-end-padding);
-    position: relative;
-    text-align: left;
-}
-
-.m-select--small,
-.m-select--sm {
-    font-size: var(--m-control-font-small);
-    min-height: var(--m-control-height-small);
-    padding-left: var(--m-control-padding-x-small);
-    padding-right: var(--m-control-end-padding);
-}
-
-.m-select--normal {
-    font-size: var(--m-control-font-medium);
-    min-height: var(--m-control-height-medium);
-}
-
-.m-select--large,
-.m-select--lg {
-    font-size: var(--m-control-font-large);
-    min-height: var(--m-control-height-large);
-    padding-left: var(--m-control-padding-x-large);
-    padding-right: var(--m-control-end-padding);
-}
-
-.m-select--multiple {
-    align-items: center;
-    gap: var(--m-space-1);
-    padding-bottom: var(--m-space-1);
-    padding-top: var(--m-space-1);
-}
-
-.m-select__tags {
-    display: flex;
-    flex: 1 1 auto;
-    flex-wrap: wrap;
-    gap: var(--m-space-1);
-    min-width: 0;
-}
-
-.m-select__spinner {
-    border: 2px solid
-        color-mix(in srgb, var(--m-color-text-muted) 35%, transparent);
-    border-radius: 50%;
-    border-top-color: var(--m-color-primary);
-    flex: 0 0 auto;
-    height: 0.85rem;
-    width: 0.85rem;
-    animation: wk-select-spin var(--m-motion-spin-medium) linear infinite;
-}
-
-@keyframes wk-select-spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) .m-select__spinner {
-        animation: none;
-        border-top-color: var(--m-color-text-muted);
-    }
-}
-
-.m-select:hover:not(:disabled):not(.m-select--disabled):not(
-        .m-select--open
-    ) {
-    border-color: var(--m-color-primary-hover);
-}
-
-.m-select--open,
-.m-select:focus-visible {
-    border-color: var(--m-color-primary-hover);
-    box-shadow: var(--m-focus-shadow);
-    outline: none;
-}
-
-.m-select--placeholder .m-select__value {
-    color: var(--m-color-text-muted);
-}
-
-.m-select__value {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.m-select__menu {
-    --m-select-menu-max-height: min(18rem, 45vh);
-    --m-select-list-max-height: var(--m-select-menu-max-height);
-    background: var(--m-color-surface);
-    border: var(--m-border-width) solid var(--m-color-border);
-    border-radius: var(--m-radius-md);
-    box-shadow: var(--m-shadow-md);
-    display: flex;
-    flex-direction: column;
-    margin-top: var(--m-space-2);
-    max-height: var(--m-select-menu-max-height);
-    min-width: 100%;
-    overflow: hidden;
-    padding: var(--m-space-1);
-    position: absolute;
-    width: max-content;
-    z-index: var(--m-z-popper);
-}
-
-.m-select__menu:has(.m-select__filter) {
-    --m-select-list-max-height: calc(var(--m-select-menu-max-height) - 2.75rem);
-}
-
-.m-select__filter {
-    background: var(--m-color-surface);
-    border: 0;
-    border-bottom: var(--m-border-width) solid var(--m-color-border);
-    border-radius: var(--m-radius-sm);
-    color: var(--m-color-text);
-    flex: 0 0 auto;
-    font: inherit;
-    margin: calc(var(--m-space-1) * -1) calc(var(--m-space-1) * -1) 0;
-    padding: var(--m-space-2) var(--m-space-3);
-    width: calc(100% + var(--m-space-1) * 2);
-}
-
-.m-select__list {
-    max-height: var(--m-select-list-max-height);
-    min-height: 0;
-}
-
-.m-select__list-view {
-    display: grid;
-    gap: var(--m-space-1);
-}
-
-.m-select__filter:focus-visible {
-    box-shadow: var(--m-focus-shadow);
-    outline: none;
-}
-
-.m-select__empty {
-    color: var(--m-color-text-muted);
-    font-size: var(--m-font-size-md);
-    padding: var(--m-space-3);
-    text-align: center;
-}
-
-.m-select__menu--bottom-start {
-    left: 0;
-}
-
-.m-select__menu--bottom-end {
-    right: 0;
-}
-
-.m-select__menu--teleported {
-    margin-top: 0;
-    position: fixed;
-    z-index: var(--m-z-dropdown);
-}
-
-.m-select__option {
-    align-items: center;
-    background: transparent;
-    border: 0;
-    border-radius: var(--m-radius-sm);
-    color: var(--m-color-text);
-    cursor: pointer;
-    display: flex;
-    font: inherit;
-    font-size: var(--m-control-font-medium);
-    gap: var(--m-space-3);
-    justify-content: space-between;
-    min-height: var(--m-control-height-medium);
-    padding: 0 var(--m-control-padding-x-medium);
-    text-align: left;
-    white-space: nowrap;
-}
-
-.m-select__option:hover:not(:disabled),
-.m-select__option--highlighted:not(:disabled) {
-    background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
-    color: var(--m-color-primary);
-}
-
-.m-select__option--selected {
-    font-weight: 600;
-}
-
-.m-select__option:disabled {
-    color: var(--m-color-text-muted);
-    cursor: not-allowed;
-    opacity: var(--m-opacity-disabled);
-}
-
-.m-select__check {
-    color: var(--m-color-primary);
-    flex: 0 0 auto;
-}
-
-.m-select__required-input {
-    clip: rect(0, 0, 0, 0);
-    clip-path: inset(50%);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-}
-
-.m-select--invalid {
-    border-color: var(--m-color-danger);
-}
-
-.m-select__option:focus-visible {
-    background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
-    box-shadow: none;
-    outline: none;
-}
-
-.m-select__option--create {
-    color: var(--m-color-primary);
-    font-style: italic;
-}
+.m-select__control {
+    position: relative;
+    width: 100%;
+}
+
+.m-select {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    font-size: var(--m-control-font-medium);
+    min-height: var(--m-control-height-medium);
+    padding: 0 var(--m-control-padding-x-medium);
+    padding-right: var(--m-control-end-padding);
+    position: relative;
+    text-align: left;
+}
+
+.m-select--small,
+.m-select--sm {
+    font-size: var(--m-control-font-small);
+    min-height: var(--m-control-height-small);
+    padding-left: var(--m-control-padding-x-small);
+    padding-right: var(--m-control-end-padding);
+}
+
+.m-select--normal {
+    font-size: var(--m-control-font-medium);
+    min-height: var(--m-control-height-medium);
+}
+
+.m-select--large,
+.m-select--lg {
+    font-size: var(--m-control-font-large);
+    min-height: var(--m-control-height-large);
+    padding-left: var(--m-control-padding-x-large);
+    padding-right: var(--m-control-end-padding);
+}
+
+.m-select--multiple {
+    align-items: center;
+    gap: var(--m-space-1);
+    padding-bottom: var(--m-space-1);
+    padding-top: var(--m-space-1);
+}
+
+.m-select__tags {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    gap: var(--m-space-1);
+    min-width: 0;
+}
+
+.m-select__spinner {
+    border: 2px solid
+        color-mix(in srgb, var(--m-color-text-muted) 35%, transparent);
+    border-radius: 50%;
+    border-top-color: var(--m-color-primary);
+    flex: 0 0 auto;
+    height: 0.85rem;
+    width: 0.85rem;
+    animation: m-select-spin var(--m-motion-spin-medium) linear infinite;
+}
+
+@keyframes m-select-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html:not([data-m-ignore-reduced-motion]) .m-select__spinner {
+        animation: none;
+        border-top-color: var(--m-color-text-muted);
+    }
+}
+
+.m-select:hover:not(:disabled):not(.m-select--disabled):not(
+        .m-select--open
+    ) {
+    border-color: var(--m-color-primary-hover);
+}
+
+.m-select--open,
+.m-select:focus-visible {
+    border-color: var(--m-color-primary-hover);
+    box-shadow: var(--m-focus-shadow);
+    outline: none;
+}
+
+.m-select--placeholder .m-select__value {
+    color: var(--m-color-text-muted);
+}
+
+.m-select__value {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.m-select__menu {
+    --m-select-menu-max-height: min(18rem, 45vh);
+    --m-select-list-max-height: var(--m-select-menu-max-height);
+    background: var(--m-color-surface);
+    border: var(--m-border-width) solid var(--m-color-border);
+    border-radius: var(--m-radius-md);
+    box-shadow: var(--m-shadow-md);
+    display: flex;
+    flex-direction: column;
+    margin-top: var(--m-space-2);
+    max-height: var(--m-select-menu-max-height);
+    min-width: 100%;
+    overflow: hidden;
+    padding: var(--m-space-1);
+    position: absolute;
+    width: max-content;
+    z-index: var(--m-z-popper);
+}
+
+.m-select__menu:has(.m-select__filter) {
+    --m-select-list-max-height: calc(var(--m-select-menu-max-height) - 2.75rem);
+}
+
+.m-select__filter {
+    background: var(--m-color-surface);
+    border: 0;
+    border-bottom: var(--m-border-width) solid var(--m-color-border);
+    border-radius: var(--m-radius-sm);
+    color: var(--m-color-text);
+    flex: 0 0 auto;
+    font: inherit;
+    margin: calc(var(--m-space-1) * -1) calc(var(--m-space-1) * -1) 0;
+    padding: var(--m-space-2) var(--m-space-3);
+    width: calc(100% + var(--m-space-1) * 2);
+}
+
+.m-select__list {
+    max-height: var(--m-select-list-max-height);
+    min-height: 0;
+}
+
+.m-select__list-view {
+    display: grid;
+    gap: var(--m-space-1);
+}
+
+.m-select__filter:focus-visible {
+    box-shadow: var(--m-focus-shadow);
+    outline: none;
+}
+
+.m-select__empty {
+    color: var(--m-color-text-muted);
+    font-size: var(--m-font-size-md);
+    padding: var(--m-space-3);
+    text-align: center;
+}
+
+.m-select__menu--bottom-start {
+    left: 0;
+}
+
+.m-select__menu--bottom-end {
+    right: 0;
+}
+
+.m-select__menu--teleported {
+    margin-top: 0;
+    position: fixed;
+    z-index: var(--m-z-dropdown);
+}
+
+.m-select__option {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--m-radius-sm);
+    color: var(--m-color-text);
+    cursor: pointer;
+    display: flex;
+    font: inherit;
+    font-size: var(--m-control-font-medium);
+    gap: var(--m-space-3);
+    justify-content: space-between;
+    min-height: var(--m-control-height-medium);
+    padding: 0 var(--m-control-padding-x-medium);
+    text-align: left;
+    white-space: nowrap;
+}
+
+.m-select__option:hover:not(:disabled),
+.m-select__option--highlighted:not(:disabled) {
+    background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
+    color: var(--m-color-primary);
+}
+
+.m-select__option--selected {
+    font-weight: 600;
+}
+
+.m-select__option:disabled {
+    color: var(--m-color-text-muted);
+    cursor: not-allowed;
+    opacity: var(--m-opacity-disabled);
+}
+
+.m-select__check {
+    color: var(--m-color-primary);
+    flex: 0 0 auto;
+}
+
+.m-select__required-input {
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
+.m-select--invalid {
+    border-color: var(--m-color-danger);
+}
+
+.m-select__option:focus-visible {
+    background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
+    box-shadow: none;
+    outline: none;
+}
+
+.m-select__option--create {
+    color: var(--m-color-primary);
+    font-style: italic;
+}

package/dist/components/Select/types.d.ts

@@ -1,4 +1,6 @@
 import { MAppendTo } from '../../shared/overlay';
+import { MNativeComboboxFieldProps } from '../../shared/nativeControlProps';
+import { FieldPassThrough } from '../../shared/passThrough';
 import { MSizeInput } from '../../shared/types';
 export type SelectValue = string | number;
 export type SelectSize = MSizeInput;
@@ -9,7 +11,7 @@ export interface SelectOption {
     value: SelectValue;
     disabled?: boolean;
 }
-export interface SelectProps {
+export interface SelectProps extends MNativeComboboxFieldProps {
     modelValue?: SelectModelValue;
     options: SelectOption[];
     label?: string;
@@ -18,7 +20,6 @@ export interface SelectProps {
     /** Error copy under the field; implies invalid when set. */
     errorMessage?: string;
     id?: string;
-    placeholder?: string;
     disabled?: boolean;
     required?: boolean;
     size?: SelectSize;
@@ -52,6 +53,8 @@ export interface SelectProps {
     /** Mount target. Defaults to `'body'`. */
     appendTo?: MAppendTo;
     placement?: 'bottom-start' | 'bottom-end';
+    /** Pass-through attrs/classes/styles per DOM part. */
+    pt?: FieldPassThrough;
 }
 export interface SelectEmits {
     (event: 'update:modelValue', value: SelectModelValue): void;

package/dist/components/Select/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,CAAA;AACzC,MAAM,MAAM,UAAU,GAAG,UAAU,CAAA;AACnC,2DAA2D;AAC3D,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,WAAW,EAAE,GAAG,SAAS,CAAA;AAEtE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,WAAW,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,WAAW;IAC1B,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,GAAG,CAAC,EAAE,OAAO,CAAA;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,oFAAoF;IACpF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yFAAyF;IACzF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,CAAA;CAC1C;AAED,MAAM,WAAW,WAAW;IAC1B,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC3D,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAChD,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IACtB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACtC,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;CAC9C"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAA;AAChF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,CAAA;AACzC,MAAM,MAAM,UAAU,GAAG,UAAU,CAAA;AACnC,2DAA2D;AAC3D,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,WAAW,EAAE,GAAG,SAAS,CAAA;AAEtE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,WAAW,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,yBAAyB;IAC5D,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,GAAG,CAAC,EAAE,OAAO,CAAA;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,oFAAoF;IACpF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yFAAyF;IACzF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,CAAA;IACzC,sDAAsD;IACtD,EAAE,CAAC,EAAE,gBAAgB,CAAA;CACtB;AAED,MAAM,WAAW,WAAW;IAC1B,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC3D,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAChD,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IACtB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACtC,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;CAC9C"}

package/dist/components/SelectButton/SelectButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/SelectButton/SelectButton.vue"],"names":[],"mappings":";AAiGA,OAAO,KAAK,EAAsB,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AA2IvF,QAAA,MAAM,YAAY;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"SelectButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/SelectButton/SelectButton.vue"],"names":[],"mappings":";AAyGA,OAAO,KAAK,EAAsB,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAiJvF,QAAA,MAAM,YAAY;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}