@eos-ui/vue 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Avatar/EAvatar.js.map +1 -1
- package/dist/components/Avatar/EAvatar.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/BookingCard/EBookingCard.js.map +1 -1
- package/dist/components/BookingCard/EBookingCard.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/Select/ESelectControl.js.map +1 -1
- package/dist/components/Select/ESelectControl.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/style.css +11 -17
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EAvatar.js","names":["_sfc_main","EAvatar_vue_vue_type_script_setup_true_lang_default","EAvatar_default"],"sources":["../../../src/components/Avatar/EAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n defineProps<{\n /** The person's name. Screen readers read it; the initials come from it. */\n name: string;\n /** A photo URL. If it fails to load, the initials appear. */\n src?: string;\n /** 28px, for rows. */\n small?: boolean;\n /** 56px, for a practitioner on an appointment card or a profile. */\n large?: boolean;\n /** `button` makes it a control named by `name`, such as the trigger of an account menu. Default `span`. */\n as?: \"span\" | \"button\";\n }>(),\n { as: \"span\" },\n);\n\nconst failed = ref(false);\nwatch(\n () => props.src,\n () => (failed.value = false),\n);\n\nconst initials = computed(() => {\n const parts = String(props.name || \"?\")\n .split(/\\s+/)\n .filter(Boolean);\n const first = [...(parts[0] ?? \"?\")][0] ?? \"?\";\n const last = parts.length > 1 ? ([...parts[parts.length - 1]!][0] ?? \"\") : \"\";\n return (first + last).toUpperCase();\n});\n</script>\n\n<template>\n <component\n :is=\"as\"\n class=\"e-avatar\"\n :class=\"{ 'e-avatar--s': small, 'e-avatar--l': large, 'e-avatar--button': as === 'button' }\"\n :type=\"as === 'button' ? 'button' : undefined\"\n :role=\"as === 'button' ? undefined : 'img'\"\n :aria-label=\"as === 'button' ? undefined : name\"\n >\n <img v-if=\"src && !failed\" class=\"e-avatar-img\" :src=\"src\" alt=\"\" @error=\"failed = true\" />\n <span v-else-if=\"as === 'button'\" aria-hidden=\"true\">{{ initials }}</span>\n <template v-else>{{ initials }}</template>\n <span v-if=\"as === 'button'\" class=\"e-sr\">{{ name }}</span>\n </component>\n</template>\n\n<style>\n@layer e.primitives {\n .e-avatar {\n display: inline-grid;\n place-items: center;\n flex: none;\n width:
|
|
1
|
+
{"version":3,"file":"EAvatar.js","names":["_sfc_main","EAvatar_vue_vue_type_script_setup_true_lang_default","EAvatar_default"],"sources":["../../../src/components/Avatar/EAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n defineProps<{\n /** The person's name. Screen readers read it; the initials come from it. */\n name: string;\n /** A photo URL. If it fails to load, the initials appear. */\n src?: string;\n /** 28px, for rows. */\n small?: boolean;\n /** 56px, for a practitioner on an appointment card or a profile. */\n large?: boolean;\n /** `button` makes it a control named by `name`, such as the trigger of an account menu. Default `span`. */\n as?: \"span\" | \"button\";\n }>(),\n { as: \"span\" },\n);\n\nconst failed = ref(false);\nwatch(\n () => props.src,\n () => (failed.value = false),\n);\n\nconst initials = computed(() => {\n const parts = String(props.name || \"?\")\n .split(/\\s+/)\n .filter(Boolean);\n const first = [...(parts[0] ?? \"?\")][0] ?? \"?\";\n const last = parts.length > 1 ? ([...parts[parts.length - 1]!][0] ?? \"\") : \"\";\n return (first + last).toUpperCase();\n});\n</script>\n\n<template>\n <component\n :is=\"as\"\n class=\"e-avatar\"\n :class=\"{ 'e-avatar--s': small, 'e-avatar--l': large, 'e-avatar--button': as === 'button' }\"\n :type=\"as === 'button' ? 'button' : undefined\"\n :role=\"as === 'button' ? undefined : 'img'\"\n :aria-label=\"as === 'button' ? undefined : name\"\n >\n <img v-if=\"src && !failed\" class=\"e-avatar-img\" :src=\"src\" alt=\"\" @error=\"failed = true\" />\n <span v-else-if=\"as === 'button'\" aria-hidden=\"true\">{{ initials }}</span>\n <template v-else>{{ initials }}</template>\n <span v-if=\"as === 'button'\" class=\"e-sr\">{{ name }}</span>\n </component>\n</template>\n\n<style>\n@layer e.primitives {\n .e-avatar {\n display: inline-grid;\n place-items: center;\n flex: none;\n box-sizing: border-box;\n width: 44px;\n height: 44px;\n overflow: hidden;\n border: var(--e-stroke-edge) solid var(--e-border-strong);\n border-radius: var(--e-radius-md);\n background: var(--e-surface-tint);\n color: var(--e-primary);\n font: 600 var(--e-text-sm) / 1 var(--e-font-mono);\n letter-spacing: 0.02em;\n }\n\n .e-avatar--button {\n position: relative;\n padding: 0;\n cursor: pointer;\n transition: border-color var(--e-duration-tap) var(--e-easing-out);\n }\n\n .e-avatar--button:hover {\n border-color: var(--e-ink);\n }\n\n .e-avatar--button:focus-visible {\n outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n outline-offset: var(--e-focus-gap);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .e-avatar--button {\n transition: none;\n }\n }\n\n .e-avatar--s {\n width: 32px;\n height: 32px;\n font-size: var(--e-text-xs);\n border-radius: var(--e-radius-sm);\n }\n\n .e-avatar--l {\n width: 64px;\n height: 64px;\n font-size: var(--e-text-lg);\n }\n\n .e-avatar-img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n</style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EAvatar.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_createElementBlock","_toDisplayString","_Fragment","_createTextVNode","_createCommentVNode","_hoisted_1","_hoisted_2","_hoisted_3","EAvatar_vue_vue_type_script_setup_true_lang_default","props","__props","failed","ref","initials","computed","parts","openBlock","createBlock","resolveDynamicComponent","normalizeClass","withCtx","createElementBlock","_cache","toDisplayString","Fragment","createTextVNode","createCommentVNode"],"sources":["../../../src/components/Avatar/EAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n defineProps<{\n /** The person's name. Screen readers read it; the initials come from it. */\n name: string;\n /** A photo URL. If it fails to load, the initials appear. */\n src?: string;\n /** 28px, for rows. */\n small?: boolean;\n /** 56px, for a practitioner on an appointment card or a profile. */\n large?: boolean;\n /** `button` makes it a control named by `name`, such as the trigger of an account menu. Default `span`. */\n as?: \"span\" | \"button\";\n }>(),\n { as: \"span\" },\n);\n\nconst failed = ref(false);\nwatch(\n () => props.src,\n () => (failed.value = false),\n);\n\nconst initials = computed(() => {\n const parts = String(props.name || \"?\")\n .split(/\\s+/)\n .filter(Boolean);\n const first = [...(parts[0] ?? \"?\")][0] ?? \"?\";\n const last = parts.length > 1 ? ([...parts[parts.length - 1]!][0] ?? \"\") : \"\";\n return (first + last).toUpperCase();\n});\n</script>\n\n<template>\n <component\n :is=\"as\"\n class=\"e-avatar\"\n :class=\"{ 'e-avatar--s': small, 'e-avatar--l': large, 'e-avatar--button': as === 'button' }\"\n :type=\"as === 'button' ? 'button' : undefined\"\n :role=\"as === 'button' ? undefined : 'img'\"\n :aria-label=\"as === 'button' ? undefined : name\"\n >\n <img v-if=\"src && !failed\" class=\"e-avatar-img\" :src=\"src\" alt=\"\" @error=\"failed = true\" />\n <span v-else-if=\"as === 'button'\" aria-hidden=\"true\">{{ initials }}</span>\n <template v-else>{{ initials }}</template>\n <span v-if=\"as === 'button'\" class=\"e-sr\">{{ name }}</span>\n </component>\n</template>\n\n<style>\n@layer e.primitives {\n .e-avatar {\n display: inline-grid;\n place-items: center;\n flex: none;\n width:
|
|
1
|
+
{"version":3,"file":"EAvatar.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_createElementBlock","_toDisplayString","_Fragment","_createTextVNode","_createCommentVNode","_hoisted_1","_hoisted_2","_hoisted_3","EAvatar_vue_vue_type_script_setup_true_lang_default","props","__props","failed","ref","initials","computed","parts","openBlock","createBlock","resolveDynamicComponent","normalizeClass","withCtx","createElementBlock","_cache","toDisplayString","Fragment","createTextVNode","createCommentVNode"],"sources":["../../../src/components/Avatar/EAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n defineProps<{\n /** The person's name. Screen readers read it; the initials come from it. */\n name: string;\n /** A photo URL. If it fails to load, the initials appear. */\n src?: string;\n /** 28px, for rows. */\n small?: boolean;\n /** 56px, for a practitioner on an appointment card or a profile. */\n large?: boolean;\n /** `button` makes it a control named by `name`, such as the trigger of an account menu. Default `span`. */\n as?: \"span\" | \"button\";\n }>(),\n { as: \"span\" },\n);\n\nconst failed = ref(false);\nwatch(\n () => props.src,\n () => (failed.value = false),\n);\n\nconst initials = computed(() => {\n const parts = String(props.name || \"?\")\n .split(/\\s+/)\n .filter(Boolean);\n const first = [...(parts[0] ?? \"?\")][0] ?? \"?\";\n const last = parts.length > 1 ? ([...parts[parts.length - 1]!][0] ?? \"\") : \"\";\n return (first + last).toUpperCase();\n});\n</script>\n\n<template>\n <component\n :is=\"as\"\n class=\"e-avatar\"\n :class=\"{ 'e-avatar--s': small, 'e-avatar--l': large, 'e-avatar--button': as === 'button' }\"\n :type=\"as === 'button' ? 'button' : undefined\"\n :role=\"as === 'button' ? undefined : 'img'\"\n :aria-label=\"as === 'button' ? undefined : name\"\n >\n <img v-if=\"src && !failed\" class=\"e-avatar-img\" :src=\"src\" alt=\"\" @error=\"failed = true\" />\n <span v-else-if=\"as === 'button'\" aria-hidden=\"true\">{{ initials }}</span>\n <template v-else>{{ initials }}</template>\n <span v-if=\"as === 'button'\" class=\"e-sr\">{{ name }}</span>\n </component>\n</template>\n\n<style>\n@layer e.primitives {\n .e-avatar {\n display: inline-grid;\n place-items: center;\n flex: none;\n box-sizing: border-box;\n width: 44px;\n height: 44px;\n overflow: hidden;\n border: var(--e-stroke-edge) solid var(--e-border-strong);\n border-radius: var(--e-radius-md);\n background: var(--e-surface-tint);\n color: var(--e-primary);\n font: 600 var(--e-text-sm) / 1 var(--e-font-mono);\n letter-spacing: 0.02em;\n }\n\n .e-avatar--button {\n position: relative;\n padding: 0;\n cursor: pointer;\n transition: border-color var(--e-duration-tap) var(--e-easing-out);\n }\n\n .e-avatar--button:hover {\n border-color: var(--e-ink);\n }\n\n .e-avatar--button:focus-visible {\n outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n outline-offset: var(--e-focus-gap);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .e-avatar--button {\n transition: none;\n }\n }\n\n .e-avatar--s {\n width: 32px;\n height: 32px;\n font-size: var(--e-text-xs);\n border-radius: var(--e-radius-sm);\n }\n\n .e-avatar--l {\n width: 64px;\n height: 64px;\n font-size: var(--e-text-lg);\n }\n\n .e-avatar-img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAIA,IAAMc,IAAQC,GAgBRC,IAASC,EAAI,EAAK;EACxB,QACQH,EAAM,WACL,EAAO,QAAQ,EACxB;EAEA,IAAMI,IAAWC,QAAe;GAC9B,IAAMC,IAAQ,OAAON,EAAM,QAAQ,GAAG,CAAA,CACnC,MAAM,KAAK,CAAA,CACX,OAAO,OAAO;GAGjB,SAFc,CAAC,GAAIM,EAAM,MAAM,GAAI,CAAC,CAAC,MAAM,QAC9BA,EAAM,SAAS,IAAK,CAAC,GAAGA,EAAMA,EAAM,SAAS,EAAG,CAAC,CAAC,MAAM,KAAM,IAAA,CACrD,YAAY;EACpC,CAAC;E,kBAICpB,EAAA,GAAAC,EAYYC,EAXLa,EAAA,EAAE,GAAA;GACP,OAAKZ,EAAA,CAAC,YAAU;IAAA,eACSY,EAAA;IAAK,eAAiBA,EAAA;IAAK,oBAAsBA,EAAA,OAAE;GAAA,CAAA,CAAA;GAC3E,MAAMA,EAAA,OAAE,WAAA,WAA2B,KAAA;GACnC,MAAMA,EAAA,OAAE,WAAgB,KAAA,IAAS;GACjC,cAAYA,EAAA,OAAE,WAAgB,KAAA,IAAYA,EAAA;;GAE3C,SAAAX,QAA2F,CAAhFW,EAAA,OAAG,CAAKC,EAAA,SAAnBhB,EAAA,GAAAK,EAA2F,OAAA;;IAAhE,OAAM;IAAgB,KAAKU,EAAA;IAAK,KAAI;IAAI,SAAK,AAAAY,EAAA,QAAA,MAAE,EAAA,QAAM;G,mBAC/DZ,EAAA,OAAE,YAAnBf,EAAA,GAAAK,EAA0E,QAA1EM,GAA0EL,EAAlBY,EAAA,KAAQ,GAAA,CAAA,MAChElB,EAAA,GAAAK,EAA0CE,GAAA,EAAA,KAAA,EAAA,GAAA,CAAtBC,EAAAF,EAAAY,EAAA,KAAQ,GAAA,CAAA,C,SAChBH,EAAA,OAAE,YAAdf,EAAA,GAAAK,EAA2D,QAA3DO,GAA2DN,EAAdS,EAAA,IAAI,GAAA,CAAA,K"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EBookingCard.js","names":["_sfc_main","EBookingCard_vue_vue_type_script_setup_true_lang_default","EBookingCard_default"],"sources":["../../../src/components/BookingCard/EBookingCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport ESurface from \"../Surface/ESurface.vue\";\nimport EAvatar from \"../Avatar/EAvatar.vue\";\nimport EStamp from \"../Stamp/EStamp.vue\";\nimport EMetaList from \"../MetaList/EMetaList.vue\";\nimport type { StampStatus, StampTone } from \"../Stamp/EStamp.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useLocale } from \"../../composables/useLocale.js\";\nimport \"../../styles/base.css\";\n\nexport interface BookingProvider {\n /** Who leads the card. Also the photo's accessible name and the source of the initials. */\n name: string;\n /** Their role, on the line under the name. */\n role?: string;\n /** A photo URL. Initials show without one. */\n photo?: string;\n}\n\nconst props = withDefaults(\n defineProps<{\n /** The day, as a Date. Shown in the date tile and in words in the list of facts. */\n date: Date;\n /** The time, as you want it read: \"9:30 am\". */\n time: string;\n /** The kind of booking. With a provider it sits at the end of the role line; without, it takes the name's line. */\n title: string;\n /** A line under the title when there is no provider. */\n subtitle?: string;\n /** Who the booking is with: photo, name and role lead the card. Without one, the date tile leads. */\n provider?: BookingProvider;\n /** Where it happens. */\n location?: string;\n /** A preset for the stamp at the end of the title line. */\n status?: StampStatus;\n /** Overrides the status's tone. */\n tone?: StampTone;\n /** The stamp's word. Overrides the status's; on its own it shows a stamp too. */\n label?: string;\n /** The heading level of the name or title, 1 to 4. */\n headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n }>(),\n { headingLevel: 3 },\n);\n\ndefineSlots<{\n /** Buttons for the tinted bar at the foot. The bar is left out when there are none. */\n actions?(): unknown;\n}>();\n\nconst t = useMessages();\nconst { monthsShort, formatLong } = useLocale();\nconst who = computed(() => props.provider?.name);\nconst facts = computed(() => [\n { icon: \"calendar\", text: t(\"dateAtTime\", { date: formatLong(props.date), time: props.time }) },\n props.location ? { icon: \"pin\", text: props.location } : null,\n]);\n</script>\n\n<template>\n <ESurface as=\"article\" class=\"e-appt\">\n <div class=\"e-appt-main\">\n <EAvatar v-if=\"who\" :name=\"who\" :src=\"provider?.photo\" large />\n <div v-else class=\"e-appt-date\" aria-hidden=\"true\">\n <span class=\"e-appt-month\">{{ monthsShort[date.getMonth()] }}</span>\n <span class=\"e-appt-day\">{{ date.getDate() }}</span>\n </div>\n <div class=\"e-appt-body\">\n <div class=\"e-appt-head\">\n <component :is=\"`h${headingLevel}`\" class=\"e-appt-title\">{{ who || title }}</component>\n <EStamp v-if=\"status || label\" :status=\"status\" :tone=\"tone\" :label=\"label\" small />\n </div>\n <p class=\"e-appt-sub\">\n <template v-if=\"who\">\n <span v-if=\"provider?.role\" class=\"e-appt-role\">{{ provider.role }}</span>\n <span class=\"e-appt-kind\">{{ title }}</span>\n </template>\n <span v-else-if=\"subtitle\" class=\"e-appt-role\">{{ subtitle }}</span>\n </p>\n </div>\n <EMetaList class=\"e-appt-facts\" :items=\"facts\" />\n </div>\n <template v-if=\"$slots.actions\" #actions><slot name=\"actions\" /></template>\n </ESurface>\n</template>\n\n<style>\n@layer e.account {\n .e-appt {\n container: e-appt / inline-size;\n overflow: hidden;\n }\n\n .e-appt .e-appt-main {\n height: 100%;\n }\n\n .e-appt-main {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n grid-template-rows: minmax(
|
|
1
|
+
{"version":3,"file":"EBookingCard.js","names":["_sfc_main","EBookingCard_vue_vue_type_script_setup_true_lang_default","EBookingCard_default"],"sources":["../../../src/components/BookingCard/EBookingCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport ESurface from \"../Surface/ESurface.vue\";\nimport EAvatar from \"../Avatar/EAvatar.vue\";\nimport EStamp from \"../Stamp/EStamp.vue\";\nimport EMetaList from \"../MetaList/EMetaList.vue\";\nimport type { StampStatus, StampTone } from \"../Stamp/EStamp.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useLocale } from \"../../composables/useLocale.js\";\nimport \"../../styles/base.css\";\n\nexport interface BookingProvider {\n /** Who leads the card. Also the photo's accessible name and the source of the initials. */\n name: string;\n /** Their role, on the line under the name. */\n role?: string;\n /** A photo URL. Initials show without one. */\n photo?: string;\n}\n\nconst props = withDefaults(\n defineProps<{\n /** The day, as a Date. Shown in the date tile and in words in the list of facts. */\n date: Date;\n /** The time, as you want it read: \"9:30 am\". */\n time: string;\n /** The kind of booking. With a provider it sits at the end of the role line; without, it takes the name's line. */\n title: string;\n /** A line under the title when there is no provider. */\n subtitle?: string;\n /** Who the booking is with: photo, name and role lead the card. Without one, the date tile leads. */\n provider?: BookingProvider;\n /** Where it happens. */\n location?: string;\n /** A preset for the stamp at the end of the title line. */\n status?: StampStatus;\n /** Overrides the status's tone. */\n tone?: StampTone;\n /** The stamp's word. Overrides the status's; on its own it shows a stamp too. */\n label?: string;\n /** The heading level of the name or title, 1 to 4. */\n headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n }>(),\n { headingLevel: 3 },\n);\n\ndefineSlots<{\n /** Buttons for the tinted bar at the foot. The bar is left out when there are none. */\n actions?(): unknown;\n}>();\n\nconst t = useMessages();\nconst { monthsShort, formatLong } = useLocale();\nconst who = computed(() => props.provider?.name);\nconst facts = computed(() => [\n { icon: \"calendar\", text: t(\"dateAtTime\", { date: formatLong(props.date), time: props.time }) },\n props.location ? { icon: \"pin\", text: props.location } : null,\n]);\n</script>\n\n<template>\n <ESurface as=\"article\" class=\"e-appt\">\n <div class=\"e-appt-main\">\n <EAvatar v-if=\"who\" :name=\"who\" :src=\"provider?.photo\" large />\n <div v-else class=\"e-appt-date\" aria-hidden=\"true\">\n <span class=\"e-appt-month\">{{ monthsShort[date.getMonth()] }}</span>\n <span class=\"e-appt-day\">{{ date.getDate() }}</span>\n </div>\n <div class=\"e-appt-body\">\n <div class=\"e-appt-head\">\n <component :is=\"`h${headingLevel}`\" class=\"e-appt-title\">{{ who || title }}</component>\n <EStamp v-if=\"status || label\" :status=\"status\" :tone=\"tone\" :label=\"label\" small />\n </div>\n <p class=\"e-appt-sub\">\n <template v-if=\"who\">\n <span v-if=\"provider?.role\" class=\"e-appt-role\">{{ provider.role }}</span>\n <span class=\"e-appt-kind\">{{ title }}</span>\n </template>\n <span v-else-if=\"subtitle\" class=\"e-appt-role\">{{ subtitle }}</span>\n </p>\n </div>\n <EMetaList class=\"e-appt-facts\" :items=\"facts\" />\n </div>\n <template v-if=\"$slots.actions\" #actions><slot name=\"actions\" /></template>\n </ESurface>\n</template>\n\n<style>\n@layer e.account {\n .e-appt {\n container: e-appt / inline-size;\n overflow: hidden;\n }\n\n .e-appt .e-appt-main {\n height: 100%;\n }\n\n .e-appt-main {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n grid-template-rows: minmax(4rem, auto) auto;\n gap: var(--e-space-3) var(--e-space-4);\n align-items: start;\n padding: var(--e-space-4);\n }\n\n .e-appt-date {\n display: grid;\n grid-template-rows: auto 1fr;\n justify-items: stretch;\n width: 64px;\n overflow: hidden;\n border: 1.5px solid var(--e-border-strong);\n border-radius: var(--e-radius-md);\n background: var(--e-surface);\n text-align: center;\n }\n\n .e-appt-month {\n padding: 4px 0 3px;\n background: var(--e-surface-tint);\n border-bottom: 1.5px solid var(--e-border-strong);\n font: 600 var(--e-text-xs) / 1.2 var(--e-font-mono);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--e-primary);\n }\n\n .e-appt-day {\n padding: 5px 0 7px;\n font: 500 var(--e-text-2xl) / 1 var(--e-font-mono);\n font-variant-numeric: tabular-nums;\n }\n\n .e-appt-body {\n display: grid;\n gap: var(--e-space-1);\n min-width: 0;\n }\n\n .e-appt-head {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--e-space-1) var(--e-space-3);\n }\n\n .e-appt-head:empty {\n display: none;\n }\n\n .e-appt-head .e-appt-title {\n flex: 1 1 8rem;\n }\n\n .e-appt-sub {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n justify-content: space-between;\n gap: 0 var(--e-space-4);\n min-height: calc(var(--e-text-md) * 1.4);\n margin: 0;\n font: 400 var(--e-text-sm) / 1.4 var(--e-font-sans);\n }\n\n .e-appt-head .e-stamp {\n margin-inline-start: auto;\n }\n\n .e-appt-title {\n margin: 0;\n font: 500 var(--e-text-2xl) / 1.25 var(--e-font-sans);\n text-wrap: balance;\n overflow-wrap: anywhere;\n }\n\n .e-appt-role {\n margin: 0;\n font: 400 var(--e-text-sm) / 1.4 var(--e-font-sans);\n color: var(--e-muted);\n }\n\n .e-appt-facts {\n grid-column: 2;\n margin: 0;\n padding: var(--e-space-3) 0 0;\n border-top: var(--e-stroke-hair) solid var(--e-border);\n }\n\n .e-appt-kind {\n margin-inline-start: auto;\n color: var(--e-ink);\n font-size: var(--e-text-md);\n font-weight: 500;\n }\n\n @container e-appt (max-width: 24rem) {\n .e-appt-head {\n display: contents;\n }\n\n .e-appt-head .e-appt-title {\n flex: none;\n }\n\n .e-appt-head .e-stamp {\n order: 1;\n justify-self: start;\n margin-inline-start: 0;\n }\n\n .e-appt-facts {\n grid-column: 1 / -1;\n }\n }\n\n @media print {\n .e-appt {\n box-shadow: none;\n border: 1px solid #000;\n break-inside: avoid;\n }\n }\n}\n</style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EBookingCard.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","ESurface","_createSlots","_withCtx","_createElementVNode","EAvatar","_createElementBlock","_toDisplayString","_unref","_resolveDynamicComponent","_createTextVNode","EStamp","_createCommentVNode","_Fragment","_createVNode","EMetaList","_renderSlot","EAvatar_default","ESurface_default","EStamp_default","EMetaList_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","EBookingCard_vue_vue_type_script_setup_true_lang_default","props","__props","t","useMessages","useLocale","who","computed","facts","formatLong","openBlock","createBlock","createSlots","withCtx","createElementVNode","createElementBlock","toDisplayString","unref","monthsShort","resolveDynamicComponent","createTextVNode","createCommentVNode","Fragment","createVNode","_ctx","renderSlot"],"sources":["../../../src/components/BookingCard/EBookingCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport ESurface from \"../Surface/ESurface.vue\";\nimport EAvatar from \"../Avatar/EAvatar.vue\";\nimport EStamp from \"../Stamp/EStamp.vue\";\nimport EMetaList from \"../MetaList/EMetaList.vue\";\nimport type { StampStatus, StampTone } from \"../Stamp/EStamp.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useLocale } from \"../../composables/useLocale.js\";\nimport \"../../styles/base.css\";\n\nexport interface BookingProvider {\n /** Who leads the card. Also the photo's accessible name and the source of the initials. */\n name: string;\n /** Their role, on the line under the name. */\n role?: string;\n /** A photo URL. Initials show without one. */\n photo?: string;\n}\n\nconst props = withDefaults(\n defineProps<{\n /** The day, as a Date. Shown in the date tile and in words in the list of facts. */\n date: Date;\n /** The time, as you want it read: \"9:30 am\". */\n time: string;\n /** The kind of booking. With a provider it sits at the end of the role line; without, it takes the name's line. */\n title: string;\n /** A line under the title when there is no provider. */\n subtitle?: string;\n /** Who the booking is with: photo, name and role lead the card. Without one, the date tile leads. */\n provider?: BookingProvider;\n /** Where it happens. */\n location?: string;\n /** A preset for the stamp at the end of the title line. */\n status?: StampStatus;\n /** Overrides the status's tone. */\n tone?: StampTone;\n /** The stamp's word. Overrides the status's; on its own it shows a stamp too. */\n label?: string;\n /** The heading level of the name or title, 1 to 4. */\n headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n }>(),\n { headingLevel: 3 },\n);\n\ndefineSlots<{\n /** Buttons for the tinted bar at the foot. The bar is left out when there are none. */\n actions?(): unknown;\n}>();\n\nconst t = useMessages();\nconst { monthsShort, formatLong } = useLocale();\nconst who = computed(() => props.provider?.name);\nconst facts = computed(() => [\n { icon: \"calendar\", text: t(\"dateAtTime\", { date: formatLong(props.date), time: props.time }) },\n props.location ? { icon: \"pin\", text: props.location } : null,\n]);\n</script>\n\n<template>\n <ESurface as=\"article\" class=\"e-appt\">\n <div class=\"e-appt-main\">\n <EAvatar v-if=\"who\" :name=\"who\" :src=\"provider?.photo\" large />\n <div v-else class=\"e-appt-date\" aria-hidden=\"true\">\n <span class=\"e-appt-month\">{{ monthsShort[date.getMonth()] }}</span>\n <span class=\"e-appt-day\">{{ date.getDate() }}</span>\n </div>\n <div class=\"e-appt-body\">\n <div class=\"e-appt-head\">\n <component :is=\"`h${headingLevel}`\" class=\"e-appt-title\">{{ who || title }}</component>\n <EStamp v-if=\"status || label\" :status=\"status\" :tone=\"tone\" :label=\"label\" small />\n </div>\n <p class=\"e-appt-sub\">\n <template v-if=\"who\">\n <span v-if=\"provider?.role\" class=\"e-appt-role\">{{ provider.role }}</span>\n <span class=\"e-appt-kind\">{{ title }}</span>\n </template>\n <span v-else-if=\"subtitle\" class=\"e-appt-role\">{{ subtitle }}</span>\n </p>\n </div>\n <EMetaList class=\"e-appt-facts\" :items=\"facts\" />\n </div>\n <template v-if=\"$slots.actions\" #actions><slot name=\"actions\" /></template>\n </ESurface>\n</template>\n\n<style>\n@layer e.account {\n .e-appt {\n container: e-appt / inline-size;\n overflow: hidden;\n }\n\n .e-appt .e-appt-main {\n height: 100%;\n }\n\n .e-appt-main {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n grid-template-rows: minmax(
|
|
1
|
+
{"version":3,"file":"EBookingCard.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","ESurface","_createSlots","_withCtx","_createElementVNode","EAvatar","_createElementBlock","_toDisplayString","_unref","_resolveDynamicComponent","_createTextVNode","EStamp","_createCommentVNode","_Fragment","_createVNode","EMetaList","_renderSlot","EAvatar_default","ESurface_default","EStamp_default","EMetaList_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","EBookingCard_vue_vue_type_script_setup_true_lang_default","props","__props","t","useMessages","useLocale","who","computed","facts","formatLong","openBlock","createBlock","createSlots","withCtx","createElementVNode","createElementBlock","toDisplayString","unref","monthsShort","resolveDynamicComponent","createTextVNode","createCommentVNode","Fragment","createVNode","_ctx","renderSlot"],"sources":["../../../src/components/BookingCard/EBookingCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport ESurface from \"../Surface/ESurface.vue\";\nimport EAvatar from \"../Avatar/EAvatar.vue\";\nimport EStamp from \"../Stamp/EStamp.vue\";\nimport EMetaList from \"../MetaList/EMetaList.vue\";\nimport type { StampStatus, StampTone } from \"../Stamp/EStamp.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useLocale } from \"../../composables/useLocale.js\";\nimport \"../../styles/base.css\";\n\nexport interface BookingProvider {\n /** Who leads the card. Also the photo's accessible name and the source of the initials. */\n name: string;\n /** Their role, on the line under the name. */\n role?: string;\n /** A photo URL. Initials show without one. */\n photo?: string;\n}\n\nconst props = withDefaults(\n defineProps<{\n /** The day, as a Date. Shown in the date tile and in words in the list of facts. */\n date: Date;\n /** The time, as you want it read: \"9:30 am\". */\n time: string;\n /** The kind of booking. With a provider it sits at the end of the role line; without, it takes the name's line. */\n title: string;\n /** A line under the title when there is no provider. */\n subtitle?: string;\n /** Who the booking is with: photo, name and role lead the card. Without one, the date tile leads. */\n provider?: BookingProvider;\n /** Where it happens. */\n location?: string;\n /** A preset for the stamp at the end of the title line. */\n status?: StampStatus;\n /** Overrides the status's tone. */\n tone?: StampTone;\n /** The stamp's word. Overrides the status's; on its own it shows a stamp too. */\n label?: string;\n /** The heading level of the name or title, 1 to 4. */\n headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n }>(),\n { headingLevel: 3 },\n);\n\ndefineSlots<{\n /** Buttons for the tinted bar at the foot. The bar is left out when there are none. */\n actions?(): unknown;\n}>();\n\nconst t = useMessages();\nconst { monthsShort, formatLong } = useLocale();\nconst who = computed(() => props.provider?.name);\nconst facts = computed(() => [\n { icon: \"calendar\", text: t(\"dateAtTime\", { date: formatLong(props.date), time: props.time }) },\n props.location ? { icon: \"pin\", text: props.location } : null,\n]);\n</script>\n\n<template>\n <ESurface as=\"article\" class=\"e-appt\">\n <div class=\"e-appt-main\">\n <EAvatar v-if=\"who\" :name=\"who\" :src=\"provider?.photo\" large />\n <div v-else class=\"e-appt-date\" aria-hidden=\"true\">\n <span class=\"e-appt-month\">{{ monthsShort[date.getMonth()] }}</span>\n <span class=\"e-appt-day\">{{ date.getDate() }}</span>\n </div>\n <div class=\"e-appt-body\">\n <div class=\"e-appt-head\">\n <component :is=\"`h${headingLevel}`\" class=\"e-appt-title\">{{ who || title }}</component>\n <EStamp v-if=\"status || label\" :status=\"status\" :tone=\"tone\" :label=\"label\" small />\n </div>\n <p class=\"e-appt-sub\">\n <template v-if=\"who\">\n <span v-if=\"provider?.role\" class=\"e-appt-role\">{{ provider.role }}</span>\n <span class=\"e-appt-kind\">{{ title }}</span>\n </template>\n <span v-else-if=\"subtitle\" class=\"e-appt-role\">{{ subtitle }}</span>\n </p>\n </div>\n <EMetaList class=\"e-appt-facts\" :items=\"facts\" />\n </div>\n <template v-if=\"$slots.actions\" #actions><slot name=\"actions\" /></template>\n </ESurface>\n</template>\n\n<style>\n@layer e.account {\n .e-appt {\n container: e-appt / inline-size;\n overflow: hidden;\n }\n\n .e-appt .e-appt-main {\n height: 100%;\n }\n\n .e-appt-main {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n grid-template-rows: minmax(4rem, auto) auto;\n gap: var(--e-space-3) var(--e-space-4);\n align-items: start;\n padding: var(--e-space-4);\n }\n\n .e-appt-date {\n display: grid;\n grid-template-rows: auto 1fr;\n justify-items: stretch;\n width: 64px;\n overflow: hidden;\n border: 1.5px solid var(--e-border-strong);\n border-radius: var(--e-radius-md);\n background: var(--e-surface);\n text-align: center;\n }\n\n .e-appt-month {\n padding: 4px 0 3px;\n background: var(--e-surface-tint);\n border-bottom: 1.5px solid var(--e-border-strong);\n font: 600 var(--e-text-xs) / 1.2 var(--e-font-mono);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--e-primary);\n }\n\n .e-appt-day {\n padding: 5px 0 7px;\n font: 500 var(--e-text-2xl) / 1 var(--e-font-mono);\n font-variant-numeric: tabular-nums;\n }\n\n .e-appt-body {\n display: grid;\n gap: var(--e-space-1);\n min-width: 0;\n }\n\n .e-appt-head {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--e-space-1) var(--e-space-3);\n }\n\n .e-appt-head:empty {\n display: none;\n }\n\n .e-appt-head .e-appt-title {\n flex: 1 1 8rem;\n }\n\n .e-appt-sub {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n justify-content: space-between;\n gap: 0 var(--e-space-4);\n min-height: calc(var(--e-text-md) * 1.4);\n margin: 0;\n font: 400 var(--e-text-sm) / 1.4 var(--e-font-sans);\n }\n\n .e-appt-head .e-stamp {\n margin-inline-start: auto;\n }\n\n .e-appt-title {\n margin: 0;\n font: 500 var(--e-text-2xl) / 1.25 var(--e-font-sans);\n text-wrap: balance;\n overflow-wrap: anywhere;\n }\n\n .e-appt-role {\n margin: 0;\n font: 400 var(--e-text-sm) / 1.4 var(--e-font-sans);\n color: var(--e-muted);\n }\n\n .e-appt-facts {\n grid-column: 2;\n margin: 0;\n padding: var(--e-space-3) 0 0;\n border-top: var(--e-stroke-hair) solid var(--e-border);\n }\n\n .e-appt-kind {\n margin-inline-start: auto;\n color: var(--e-ink);\n font-size: var(--e-text-md);\n font-weight: 500;\n }\n\n @container e-appt (max-width: 24rem) {\n .e-appt-head {\n display: contents;\n }\n\n .e-appt-head .e-appt-title {\n flex: none;\n }\n\n .e-appt-head .e-stamp {\n order: 1;\n justify-self: start;\n margin-inline-start: 0;\n }\n\n .e-appt-facts {\n grid-column: 1 / -1;\n }\n }\n\n @media print {\n .e-appt {\n box-shadow: none;\n border: 1px solid #000;\n break-inside: avoid;\n }\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,IAAMkC,IAAQC,GA+BRC,IAAIC,EAAY,GAChB,EAAE,gBAAa,kBAAeC,EAAU,GACxCC,IAAMC,QAAeN,EAAM,UAAU,IAAI,GACzCO,IAAQD,QAAe,CAC3B;GAAE,MAAM;GAAY,MAAMJ,EAAE,cAAc;IAAE,MAAMM,EAAWR,EAAM,IAAI;IAAG,MAAMA,EAAM;GAAK,CAAC;EAAE,GAC9FA,EAAM,WAAW;GAAE,MAAM;GAAO,MAAMA,EAAM;EAAS,IAAI,IAC3D,CAAC;E,kBAICjC,EAAA,GAAAC,EAuBWC,GAAA;GAvBD,IAAG;GAAU,OAAM;;GAC3B,SAAAE,QAoBM,CApBNC,EAoBM,OApBNiB,GAoBM;IAnBWgB,EAAA,SAAftC,EAAA,GAAAC,EAA+DK,GAAA;;KAA1C,MAAMgC,EAAA;KAAM,KAAKJ,EAAA,UAAU;KAAO,OAAA;I,iCACvDlC,EAAA,GAAAO,EAGM,OAHNgB,GAGM,CAFJlB,EAAoE,QAApEmB,GAAoEhB,EAAtCC,EAAAyC,CAAA,CAAW,CAAChB,EAAA,KAAK,SAAQ,EAAA,GAAA,CAAA,GACvD7B,EAAoD,QAApDoB,GAAoDjB,EAAxB0B,EAAA,KAAK,QAAO,CAAA,GAAA,CAAA,C;IAE1C7B,EAYM,OAZNqB,GAYM,CAXJrB,EAGM,OAHNsB,GAGM,EAFJ3B,EAAA,GAAAC,EAAuFS,EAAA,IAAnEwB,EAAA,cAAY,GAAA,EAAI,OAAM,eAAc,GAAA;KAAC,SAAA9B,QAAkB,CAAfO,EAAAH,EAAA8B,EAAA,SAAOJ,EAAA,KAAK,GAAA,CAAA,C;;I,KAC1DA,EAAA,UAAUA,EAAA,SAAxBlC,EAAA,GAAAC,EAAoFW,GAAA;;KAApD,QAAQsB,EAAA;KAAS,MAAMA,EAAA;KAAO,OAAOA,EAAA;KAAO,OAAA;;;;;I,mBAE9E7B,EAMI,KANJuB,GAMI,CALcU,EAAA,SAAhBtC,EAAA,GAAAO,EAGWO,GAAA,EAAA,KAAA,EAAA,GAAA,CAFGoB,EAAA,UAAU,QAAtBlC,EAAA,GAAAO,EAA0E,QAA1EsB,GAA0ErB,EAAvB0B,EAAA,SAAS,IAAI,GAAA,CAAA,K,WAChE7B,EAA4C,QAA5CyB,GAA4CtB,EAAf0B,EAAA,KAAK,GAAA,CAAA,C,UAEnBA,EAAA,YAAjBlC,EAAA,GAAAO,EAAoE,QAApEwB,GAAoEvB,EAAlB0B,EAAA,QAAQ,GAAA,CAAA,K;IAG9DnB,EAAiDC,GAAA;KAAtC,OAAM;KAAgB,OAAOwB,EAAA;;;;E,IAE1BzC,EAAAA,OAAO,U;GAAU,MAAA;GAAQ,IAAAK,QAAuB,CAAvBa,EAAuBuC,EAAA,QAAA,SAAA,C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ESelectControl.js","names":["_sfc_main","ESelectControl_vue_vue_type_script_setup_true_lang_default","ESelectControl_default"],"sources":["../../../src/components/Select/ESelectControl.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, watch } from \"vue\";\nimport {\n SelectContent,\n SelectGroup,\n SelectLabel,\n SelectPortal,\n SelectRoot,\n SelectTrigger,\n SelectViewport,\n} from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESelectOption from \"./ESelectOption.vue\";\nimport { sectionOptions, type EOption } from \"./options.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useQuietFocus } from \"./quietFocus.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"./panel.css\";\n\nconst props = defineProps<{\n /** The normalised options. */\n options: EOption[];\n placeholder?: string | undefined;\n disabled?: boolean | undefined;\n required?: boolean | undefined;\n name?: string | undefined;\n /** Names the list. */\n label?: string | undefined;\n /** Attributes for the button: id, aria-*, data-*, listeners. */\n triggerAttrs: Record<string, unknown>;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\n\nconst sections = computed(() => sectionOptions(props.options));\nconst selected = computed(() => props.options.find((o) => o.value === model.value));\n\nlet typed = \"\";\nlet typedAt = 0;\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst isOpen = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(isOpen, (el) => !!el.closest(\"[role=listbox]\"));\nwatch(\n isOpen,\n (now) => {\n if (now && !quiet.personOpened()) quiet.undoFocusSteal();\n },\n { immediate: true, flush: \"post\" },\n);\nfunction closeFocus(e: Event) {\n if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction keydown(e: KeyboardEvent) {\n quiet.intent();\n typeahead(e);\n}\nfunction typeahead(e: KeyboardEvent) {\n if (props.disabled || isOpen.value || e.ctrlKey || e.metaKey || e.altKey || e.key.length !== 1) return;\n if (e.key === \" \" && !typed) return;\n const now = Date.now();\n typed = (now - typedAt > 700 ? \"\" : typed) + e.key.toLowerCase();\n typedAt = now;\n const list = props.options;\n const from = list.findIndex((o) => o.value === model.value);\n for (let j = 0; j < list.length; j++) {\n const o = list[(from + j + (typed.length === 1 ? 1 : 0) + list.length) % list.length];\n if (o && !o.disabled && o.label.toLowerCase().startsWith(typed)) {\n model.value = o.value;\n break;\n }\n }\n}\n</script>\n\n<template>\n <div class=\"e-sel\">\n <SelectRoot v-model=\"model\" :open=\"isOpen\" :disabled=\"disabled\" :required=\"required\" @update:open=\"open = $event\">\n <SelectTrigger\n class=\"e-input e-sel-trigger\"\n :tabindex=\"isOpen ? -1 : undefined\"\n v-bind=\"triggerAttrs\"\n @pointerdown=\"quiet.intent\"\n @keydown=\"keydown\"\n >\n <span v-if=\"selected\" class=\"e-sel-value\">\n <EIcon v-if=\"selected.icon\" :name=\"selected.icon\" />{{ selected.label }}\n </span>\n <span v-else class=\"e-sel-placeholder\">{{ placeholder || t(\"select\") }}</span>\n <EIcon name=\"chevron-down\" bold />\n </SelectTrigger>\n <SelectPortal :to=\"portal\">\n <SelectContent\n position=\"popper\"\n align=\"start\"\n :side-offset=\"6\"\n :collision-padding=\"8\"\n :body-lock=\"false\"\n class=\"e-popover e-listpanel e-root\"\n :aria-label=\"label\"\n @close-auto-focus=\"closeFocus\"\n >\n <SelectViewport>\n <template v-for=\"(section, i) in sections\" :key=\"i\">\n <SelectGroup v-if=\"section.group\" class=\"e-opt-set\">\n <SelectLabel class=\"e-opt-group\">{{ section.group }}</SelectLabel>\n <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n </SelectGroup>\n <template v-else>\n <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n </template>\n </template>\n </SelectViewport>\n </SelectContent>\n </SelectPortal>\n </SelectRoot>\n <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n </div>\n</template>\n\n<style>\n@layer e.controls {\n .e-sel {\n position: relative;\n }\n\n .e-sel-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--e-space-2);\n padding-inline-end: var(--e-space-3);\n text-align: start;\n cursor: pointer;\n }\n\n .e-sel-trigger[aria-expanded=\"true\"] {\n border-color: var(--e-ink);\n background-color: var(--e-surface);\n }\n\n .e-sel-value {\n display: inline-flex;\n align-items: center;\n gap: var(--e-space-2);\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .e-sel-placeholder {\n color: var(--e-muted);\n }\n\n .e-sel-trigger > .e-icon {\n flex: none;\n }\n}\n</style>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"ESelectControl.js","names":["_sfc_main","ESelectControl_vue_vue_type_script_setup_true_lang_default","ESelectControl_default"],"sources":["../../../src/components/Select/ESelectControl.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, watch } from \"vue\";\nimport {\n SelectContent,\n SelectGroup,\n SelectLabel,\n SelectPortal,\n SelectRoot,\n SelectTrigger,\n SelectViewport,\n} from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESelectOption from \"./ESelectOption.vue\";\nimport { sectionOptions, type EOption } from \"./options.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useQuietFocus } from \"./quietFocus.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"./panel.css\";\n\nconst props = defineProps<{\n /** The normalised options. */\n options: EOption[];\n placeholder?: string | undefined;\n disabled?: boolean | undefined;\n required?: boolean | undefined;\n name?: string | undefined;\n /** Names the list. */\n label?: string | undefined;\n /** Attributes for the button: id, aria-*, data-*, listeners. */\n triggerAttrs: Record<string, unknown>;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\n\nconst sections = computed(() => sectionOptions(props.options));\nconst selected = computed(() => props.options.find((o) => o.value === model.value));\n\nlet typed = \"\";\nlet typedAt = 0;\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst isOpen = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(isOpen, (el) => !!el.closest(\"[role=listbox]\"));\nwatch(\n isOpen,\n (now) => {\n if (now && !quiet.personOpened()) quiet.undoFocusSteal();\n },\n { immediate: true, flush: \"post\" },\n);\nfunction closeFocus(e: Event) {\n if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction keydown(e: KeyboardEvent) {\n quiet.intent();\n typeahead(e);\n}\nfunction typeahead(e: KeyboardEvent) {\n if (props.disabled || isOpen.value || e.ctrlKey || e.metaKey || e.altKey || e.key.length !== 1) return;\n if (e.key === \" \" && !typed) return;\n const now = Date.now();\n typed = (now - typedAt > 700 ? \"\" : typed) + e.key.toLowerCase();\n typedAt = now;\n const list = props.options;\n const from = list.findIndex((o) => o.value === model.value);\n for (let j = 0; j < list.length; j++) {\n const o = list[(from + j + (typed.length === 1 ? 1 : 0) + list.length) % list.length];\n if (o && !o.disabled && o.label.toLowerCase().startsWith(typed)) {\n model.value = o.value;\n break;\n }\n }\n}\n</script>\n\n<template>\n <div class=\"e-sel\">\n <SelectRoot v-model=\"model\" :open=\"isOpen\" :disabled=\"disabled\" :required=\"required\" @update:open=\"open = $event\">\n <SelectTrigger\n class=\"e-input e-sel-trigger\"\n :tabindex=\"isOpen ? -1 : undefined\"\n v-bind=\"triggerAttrs\"\n @pointerdown=\"quiet.intent\"\n @keydown=\"keydown\"\n >\n <span v-if=\"selected\" class=\"e-sel-value\">\n <EIcon v-if=\"selected.icon\" :name=\"selected.icon\" />{{ selected.label }}\n </span>\n <span v-else class=\"e-sel-placeholder\">{{ placeholder || t(\"select\") }}</span>\n <EIcon name=\"chevron-down\" bold />\n </SelectTrigger>\n <SelectPortal :to=\"portal\">\n <SelectContent\n position=\"popper\"\n align=\"start\"\n :side-offset=\"6\"\n :collision-padding=\"8\"\n :body-lock=\"false\"\n class=\"e-popover e-listpanel e-root\"\n :aria-label=\"label\"\n @close-auto-focus=\"closeFocus\"\n >\n <SelectViewport>\n <template v-for=\"(section, i) in sections\" :key=\"i\">\n <SelectGroup v-if=\"section.group\" class=\"e-opt-set\">\n <SelectLabel class=\"e-opt-group\">{{ section.group }}</SelectLabel>\n <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n </SelectGroup>\n <template v-else>\n <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n </template>\n </template>\n </SelectViewport>\n </SelectContent>\n </SelectPortal>\n </SelectRoot>\n <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n </div>\n</template>\n\n<style>\n@layer e.controls {\n .e-sel {\n position: relative;\n }\n\n .e-sel-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--e-space-2);\n padding-inline-end: var(--e-space-3);\n text-align: start;\n cursor: pointer;\n }\n\n .e-sel-trigger[aria-expanded=\"true\"] {\n border-color: var(--e-ink);\n background-color: var(--e-surface);\n }\n\n .e-sel-value {\n display: inline-flex;\n align-items: center;\n gap: var(--e-space-2);\n min-width: 0;\n overflow: hidden;\n line-height: 1.4;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .e-sel-placeholder {\n color: var(--e-muted);\n }\n\n .e-sel-trigger > .e-icon {\n flex: none;\n }\n}\n</style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ESelectControl.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","_unref","_withCtx","_mergeProps","_createBlock","EIcon","_createCommentVNode","_createTextVNode","_toDisplayString","_Fragment","_renderList","ESelectOption","EIcon_default","ESelectOption_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESelectControl_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"open\"","\"openModifiers\"","props","__props","model","useModel","t","useMessages","portal","usePortalTarget","sections","computed","sectionOptions","selected","o","typed","typedAt","open","isOpen","quiet","useQuietFocus","el","now","closeFocus","keydown","typeahead","list","from","j","openBlock","createElementBlock","createVNode","unref","SelectRoot","_cache","$event","withCtx","SelectTrigger","mergeProps","createBlock","createCommentVNode","createTextVNode","toDisplayString","SelectPortal","SelectContent","SelectViewport","Fragment","renderList","i","section","SelectGroup","SelectLabel"],"sources":["../../../src/components/Select/ESelectControl.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, watch } from \"vue\";\nimport {\n SelectContent,\n SelectGroup,\n SelectLabel,\n SelectPortal,\n SelectRoot,\n SelectTrigger,\n SelectViewport,\n} from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESelectOption from \"./ESelectOption.vue\";\nimport { sectionOptions, type EOption } from \"./options.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useQuietFocus } from \"./quietFocus.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"./panel.css\";\n\nconst props = defineProps<{\n /** The normalised options. */\n options: EOption[];\n placeholder?: string | undefined;\n disabled?: boolean | undefined;\n required?: boolean | undefined;\n name?: string | undefined;\n /** Names the list. */\n label?: string | undefined;\n /** Attributes for the button: id, aria-*, data-*, listeners. */\n triggerAttrs: Record<string, unknown>;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\n\nconst sections = computed(() => sectionOptions(props.options));\nconst selected = computed(() => props.options.find((o) => o.value === model.value));\n\nlet typed = \"\";\nlet typedAt = 0;\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst isOpen = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(isOpen, (el) => !!el.closest(\"[role=listbox]\"));\nwatch(\n isOpen,\n (now) => {\n if (now && !quiet.personOpened()) quiet.undoFocusSteal();\n },\n { immediate: true, flush: \"post\" },\n);\nfunction closeFocus(e: Event) {\n if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction keydown(e: KeyboardEvent) {\n quiet.intent();\n typeahead(e);\n}\nfunction typeahead(e: KeyboardEvent) {\n if (props.disabled || isOpen.value || e.ctrlKey || e.metaKey || e.altKey || e.key.length !== 1) return;\n if (e.key === \" \" && !typed) return;\n const now = Date.now();\n typed = (now - typedAt > 700 ? \"\" : typed) + e.key.toLowerCase();\n typedAt = now;\n const list = props.options;\n const from = list.findIndex((o) => o.value === model.value);\n for (let j = 0; j < list.length; j++) {\n const o = list[(from + j + (typed.length === 1 ? 1 : 0) + list.length) % list.length];\n if (o && !o.disabled && o.label.toLowerCase().startsWith(typed)) {\n model.value = o.value;\n break;\n }\n }\n}\n</script>\n\n<template>\n <div class=\"e-sel\">\n <SelectRoot v-model=\"model\" :open=\"isOpen\" :disabled=\"disabled\" :required=\"required\" @update:open=\"open = $event\">\n <SelectTrigger\n class=\"e-input e-sel-trigger\"\n :tabindex=\"isOpen ? -1 : undefined\"\n v-bind=\"triggerAttrs\"\n @pointerdown=\"quiet.intent\"\n @keydown=\"keydown\"\n >\n <span v-if=\"selected\" class=\"e-sel-value\">\n <EIcon v-if=\"selected.icon\" :name=\"selected.icon\" />{{ selected.label }}\n </span>\n <span v-else class=\"e-sel-placeholder\">{{ placeholder || t(\"select\") }}</span>\n <EIcon name=\"chevron-down\" bold />\n </SelectTrigger>\n <SelectPortal :to=\"portal\">\n <SelectContent\n position=\"popper\"\n align=\"start\"\n :side-offset=\"6\"\n :collision-padding=\"8\"\n :body-lock=\"false\"\n class=\"e-popover e-listpanel e-root\"\n :aria-label=\"label\"\n @close-auto-focus=\"closeFocus\"\n >\n <SelectViewport>\n <template v-for=\"(section, i) in sections\" :key=\"i\">\n <SelectGroup v-if=\"section.group\" class=\"e-opt-set\">\n <SelectLabel class=\"e-opt-group\">{{ section.group }}</SelectLabel>\n <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n </SelectGroup>\n <template v-else>\n <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n </template>\n </template>\n </SelectViewport>\n </SelectContent>\n </SelectPortal>\n </SelectRoot>\n <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n </div>\n</template>\n\n<style>\n@layer e.controls {\n .e-sel {\n position: relative;\n }\n\n .e-sel-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--e-space-2);\n padding-inline-end: var(--e-space-3);\n text-align: start;\n cursor: pointer;\n }\n\n .e-sel-trigger[aria-expanded=\"true\"] {\n border-color: var(--e-ink);\n background-color: var(--e-surface);\n }\n\n .e-sel-value {\n display: inline-flex;\n align-items: center;\n gap: var(--e-space-2);\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .e-sel-placeholder {\n color: var(--e-muted);\n }\n\n .e-sel-trigger > .e-icon {\n flex: none;\n }\n}\n</style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ESelectControl.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","_unref","_withCtx","_mergeProps","_createBlock","EIcon","_createCommentVNode","_createTextVNode","_toDisplayString","_Fragment","_renderList","ESelectOption","EIcon_default","ESelectOption_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESelectControl_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"open\"","\"openModifiers\"","props","__props","model","useModel","t","useMessages","portal","usePortalTarget","sections","computed","sectionOptions","selected","o","typed","typedAt","open","isOpen","quiet","useQuietFocus","el","now","closeFocus","keydown","typeahead","list","from","j","openBlock","createElementBlock","createVNode","unref","SelectRoot","_cache","$event","withCtx","SelectTrigger","mergeProps","createBlock","createCommentVNode","createTextVNode","toDisplayString","SelectPortal","SelectContent","SelectViewport","Fragment","renderList","i","section","SelectGroup","SelectLabel"],"sources":["../../../src/components/Select/ESelectControl.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, watch } from \"vue\";\nimport {\n SelectContent,\n SelectGroup,\n SelectLabel,\n SelectPortal,\n SelectRoot,\n SelectTrigger,\n SelectViewport,\n} from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESelectOption from \"./ESelectOption.vue\";\nimport { sectionOptions, type EOption } from \"./options.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useQuietFocus } from \"./quietFocus.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"./panel.css\";\n\nconst props = defineProps<{\n /** The normalised options. */\n options: EOption[];\n placeholder?: string | undefined;\n disabled?: boolean | undefined;\n required?: boolean | undefined;\n name?: string | undefined;\n /** Names the list. */\n label?: string | undefined;\n /** Attributes for the button: id, aria-*, data-*, listeners. */\n triggerAttrs: Record<string, unknown>;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\n\nconst sections = computed(() => sectionOptions(props.options));\nconst selected = computed(() => props.options.find((o) => o.value === model.value));\n\nlet typed = \"\";\nlet typedAt = 0;\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst isOpen = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(isOpen, (el) => !!el.closest(\"[role=listbox]\"));\nwatch(\n isOpen,\n (now) => {\n if (now && !quiet.personOpened()) quiet.undoFocusSteal();\n },\n { immediate: true, flush: \"post\" },\n);\nfunction closeFocus(e: Event) {\n if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction keydown(e: KeyboardEvent) {\n quiet.intent();\n typeahead(e);\n}\nfunction typeahead(e: KeyboardEvent) {\n if (props.disabled || isOpen.value || e.ctrlKey || e.metaKey || e.altKey || e.key.length !== 1) return;\n if (e.key === \" \" && !typed) return;\n const now = Date.now();\n typed = (now - typedAt > 700 ? \"\" : typed) + e.key.toLowerCase();\n typedAt = now;\n const list = props.options;\n const from = list.findIndex((o) => o.value === model.value);\n for (let j = 0; j < list.length; j++) {\n const o = list[(from + j + (typed.length === 1 ? 1 : 0) + list.length) % list.length];\n if (o && !o.disabled && o.label.toLowerCase().startsWith(typed)) {\n model.value = o.value;\n break;\n }\n }\n}\n</script>\n\n<template>\n <div class=\"e-sel\">\n <SelectRoot v-model=\"model\" :open=\"isOpen\" :disabled=\"disabled\" :required=\"required\" @update:open=\"open = $event\">\n <SelectTrigger\n class=\"e-input e-sel-trigger\"\n :tabindex=\"isOpen ? -1 : undefined\"\n v-bind=\"triggerAttrs\"\n @pointerdown=\"quiet.intent\"\n @keydown=\"keydown\"\n >\n <span v-if=\"selected\" class=\"e-sel-value\">\n <EIcon v-if=\"selected.icon\" :name=\"selected.icon\" />{{ selected.label }}\n </span>\n <span v-else class=\"e-sel-placeholder\">{{ placeholder || t(\"select\") }}</span>\n <EIcon name=\"chevron-down\" bold />\n </SelectTrigger>\n <SelectPortal :to=\"portal\">\n <SelectContent\n position=\"popper\"\n align=\"start\"\n :side-offset=\"6\"\n :collision-padding=\"8\"\n :body-lock=\"false\"\n class=\"e-popover e-listpanel e-root\"\n :aria-label=\"label\"\n @close-auto-focus=\"closeFocus\"\n >\n <SelectViewport>\n <template v-for=\"(section, i) in sections\" :key=\"i\">\n <SelectGroup v-if=\"section.group\" class=\"e-opt-set\">\n <SelectLabel class=\"e-opt-group\">{{ section.group }}</SelectLabel>\n <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n </SelectGroup>\n <template v-else>\n <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n </template>\n </template>\n </SelectViewport>\n </SelectContent>\n </SelectPortal>\n </SelectRoot>\n <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n </div>\n</template>\n\n<style>\n@layer e.controls {\n .e-sel {\n position: relative;\n }\n\n .e-sel-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--e-space-2);\n padding-inline-end: var(--e-space-3);\n text-align: start;\n cursor: pointer;\n }\n\n .e-sel-trigger[aria-expanded=\"true\"] {\n border-color: var(--e-ink);\n background-color: var(--e-surface);\n }\n\n .e-sel-value {\n display: inline-flex;\n align-items: center;\n gap: var(--e-space-2);\n min-width: 0;\n overflow: hidden;\n line-height: 1.4;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .e-sel-placeholder {\n color: var(--e-muted);\n }\n\n .e-sel-trigger > .e-icon {\n flex: none;\n }\n}\n</style>\n"],"mappings":"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"}
|
package/dist/style.css
CHANGED
|
@@ -694,11 +694,7 @@
|
|
|
694
694
|
}
|
|
695
695
|
|
|
696
696
|
.e-input[type="password"] {
|
|
697
|
-
padding-
|
|
698
|
-
line-height: 1;
|
|
699
|
-
font-family: system-ui, sans-serif;
|
|
700
|
-
font-size: calc(var(--e-text-xl) * 1.8);
|
|
701
|
-
letter-spacing: 0.02em;
|
|
697
|
+
padding-top: 0.3em;
|
|
702
698
|
}
|
|
703
699
|
|
|
704
700
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -889,6 +885,7 @@
|
|
|
889
885
|
gap: var(--e-space-2);
|
|
890
886
|
min-width: 0;
|
|
891
887
|
overflow: hidden;
|
|
888
|
+
line-height: 1.4;
|
|
892
889
|
text-overflow: ellipsis;
|
|
893
890
|
white-space: nowrap;
|
|
894
891
|
}
|
|
@@ -1156,10 +1153,6 @@ to {
|
|
|
1156
1153
|
padding-inline: var(--e-space-4) var(--e-space-2);
|
|
1157
1154
|
}
|
|
1158
1155
|
|
|
1159
|
-
.e-input-wrap .e-input[type="password"] {
|
|
1160
|
-
height: calc(var(--e-control-height) - 2 * var(--e-stroke-edge));
|
|
1161
|
-
}
|
|
1162
|
-
|
|
1163
1156
|
.e-combo-btn {
|
|
1164
1157
|
display: inline-grid;
|
|
1165
1158
|
place-items: center;
|
|
@@ -1287,8 +1280,9 @@ to {
|
|
|
1287
1280
|
display: inline-grid;
|
|
1288
1281
|
place-items: center;
|
|
1289
1282
|
flex: none;
|
|
1290
|
-
|
|
1291
|
-
|
|
1283
|
+
box-sizing: border-box;
|
|
1284
|
+
width: 44px;
|
|
1285
|
+
height: 44px;
|
|
1292
1286
|
overflow: hidden;
|
|
1293
1287
|
border: var(--e-stroke-edge) solid var(--e-border-strong);
|
|
1294
1288
|
border-radius: var(--e-radius-md);
|
|
@@ -1316,14 +1310,14 @@ to {
|
|
|
1316
1310
|
}
|
|
1317
1311
|
}
|
|
1318
1312
|
.e-avatar--s {
|
|
1319
|
-
width:
|
|
1320
|
-
height:
|
|
1313
|
+
width: 32px;
|
|
1314
|
+
height: 32px;
|
|
1321
1315
|
font-size: var(--e-text-xs);
|
|
1322
1316
|
border-radius: var(--e-radius-sm);
|
|
1323
1317
|
}
|
|
1324
1318
|
.e-avatar--l {
|
|
1325
|
-
width:
|
|
1326
|
-
height:
|
|
1319
|
+
width: 64px;
|
|
1320
|
+
height: 64px;
|
|
1327
1321
|
font-size: var(--e-text-lg);
|
|
1328
1322
|
}
|
|
1329
1323
|
.e-avatar-img {
|
|
@@ -1534,7 +1528,7 @@ to {
|
|
|
1534
1528
|
.e-appt-main {
|
|
1535
1529
|
display: grid;
|
|
1536
1530
|
grid-template-columns: auto minmax(0, 1fr);
|
|
1537
|
-
grid-template-rows: minmax(
|
|
1531
|
+
grid-template-rows: minmax(4rem, auto) auto;
|
|
1538
1532
|
gap: var(--e-space-3) var(--e-space-4);
|
|
1539
1533
|
align-items: start;
|
|
1540
1534
|
padding: var(--e-space-4);
|
|
@@ -1543,7 +1537,7 @@ to {
|
|
|
1543
1537
|
display: grid;
|
|
1544
1538
|
grid-template-rows: auto 1fr;
|
|
1545
1539
|
justify-items: stretch;
|
|
1546
|
-
width:
|
|
1540
|
+
width: 64px;
|
|
1547
1541
|
overflow: hidden;
|
|
1548
1542
|
border: 1.5px solid var(--e-border-strong);
|
|
1549
1543
|
border-radius: var(--e-radius-md);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eos-ui/vue",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Eos: accessible Vue 3 components for the Eos portal.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
}
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@eos-ui/tokens": "0.1.
|
|
60
|
+
"@eos-ui/tokens": "0.1.1",
|
|
61
61
|
"@tanstack/vue-table": "^9.3.1",
|
|
62
62
|
"@tanstack/vue-virtual": "^3.13.47",
|
|
63
63
|
"@vueuse/core": "^15.0.0",
|