npm - @digitalwalletcorp/vue-core - Versions diffs - 1.2.0 → 1.3.0 - Mend

@digitalwalletcorp/vue-core 1.2.0 → 1.3.0

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.

Files changed (188) hide show

package/README.md +95 -8
package/lib/accordion-fieldset.d.cts +14 -4
package/lib/accordion-fieldset.d.ts +14 -4
package/lib/accordion-section.d.cts +20 -10
package/lib/accordion-section.d.ts +20 -10
package/lib/components-2zQ2SZuY.js +26 -0
package/lib/components-HaiHcseF.cjs +1 -0
package/lib/components.d.cts +10 -0
package/lib/components.d.ts +10 -0
package/lib/copy-button.d.cts +34 -0
package/lib/copy-button.d.ts +34 -0
package/lib/dark-mode-selector.d.cts +32 -0
package/lib/dark-mode-selector.d.ts +32 -0
package/lib/data-table.d.cts +30 -0
package/lib/data-table.d.ts +30 -0
package/lib/help-button.d.cts +39 -0
package/lib/help-button.d.ts +39 -0
package/lib/help-popper.d.cts +39 -0
package/lib/help-popper.d.ts +39 -0
package/lib/helpers/data-table-csv.d.cts +17 -0
package/lib/helpers/data-table-csv.d.ts +17 -0
package/lib/helpers/show-floating-component.d.cts +82 -0
package/lib/helpers/show-floating-component.d.ts +82 -0
package/lib/helpers/show-modal-dialog.d.cts +73 -0
package/lib/helpers/show-modal-dialog.d.ts +73 -0
package/lib/helpers/show-overlay-box.d.cts +53 -0
package/lib/helpers/show-overlay-box.d.ts +53 -0
package/lib/helpers/show-screen-loading.d.cts +20 -0
package/lib/helpers/show-screen-loading.d.ts +20 -0
package/lib/helpers/show-snackbar.d.cts +47 -0
package/lib/helpers/show-snackbar.d.ts +47 -0
package/lib/hourglass-loading.d.cts +1 -1
package/lib/hourglass-loading.d.ts +1 -1
package/lib/index.cjs +1 -1
package/lib/index.d.cts +34 -0
package/lib/index.d.ts +34 -0
package/lib/index.js +445 -18
package/lib/internal/anchored-popover.d.cts +35 -0
package/lib/internal/anchored-popover.d.ts +35 -0
package/lib/internal/anchored-position.d.cts +50 -0
package/lib/internal/anchored-position.d.ts +50 -0
package/lib/internal/data-table-controls.d.cts +42 -0
package/lib/internal/data-table-controls.d.ts +42 -0
package/lib/internal/data-table-value.d.cts +32 -0
package/lib/internal/data-table-value.d.ts +32 -0
package/lib/internal/floating-component.d.cts +52 -0
package/lib/internal/floating-component.d.ts +52 -0
package/lib/internal/icon-popper.d.cts +32 -0
package/lib/internal/icon-popper.d.ts +32 -0
package/lib/internal/mount-window.d.cts +39 -0
package/lib/internal/mount-window.d.ts +39 -0
package/lib/internal/movable-window.d.cts +55 -0
package/lib/internal/movable-window.d.ts +55 -0
package/lib/internal/opened-overlay-boxes.d.cts +2 -0
package/lib/internal/opened-overlay-boxes.d.ts +2 -0
package/lib/internal/pagination.d.cts +22 -0
package/lib/internal/pagination.d.ts +22 -0
package/lib/internal/snackbar-container.d.cts +20 -0
package/lib/internal/snackbar-container.d.ts +20 -0
package/lib/internal/snackbar-item.d.cts +17 -0
package/lib/internal/snackbar-item.d.ts +17 -0
package/lib/internal/tab-group-context.d.cts +4 -2
package/lib/internal/tab-group-context.d.ts +4 -2
package/lib/internal/use-movable-window.d.cts +44 -0
package/lib/internal/use-movable-window.d.ts +44 -0
package/lib/internal/window-order.d.cts +6 -0
package/lib/internal/window-order.d.ts +6 -0
package/lib/intersection-lazy-component.d.cts +32 -0
package/lib/intersection-lazy-component.d.ts +32 -0
package/lib/label-button.d.cts +2 -2
package/lib/label-button.d.ts +2 -2
package/lib/label-icon.d.cts +2 -2
package/lib/label-icon.d.ts +2 -2
package/lib/modal-dialog.d.cts +67 -0
package/lib/modal-dialog.d.ts +67 -0
package/lib/nuxt.cjs +1 -1
package/lib/nuxt.js +1 -1
package/lib/overlay-box.d.cts +52 -0
package/lib/overlay-box.d.ts +52 -0
package/lib/page-section.d.cts +2 -2
package/lib/page-section.d.ts +2 -2
package/lib/page-title.d.cts +2 -2
package/lib/page-title.d.ts +2 -2
package/lib/register.cjs +1 -1
package/lib/register.js +1 -1
package/lib/screen-loading.d.cts +7 -0
package/lib/screen-loading.d.ts +7 -0
package/lib/style.css +1 -1
package/lib/tab-content.d.cts +5 -5
package/lib/tab-content.d.ts +5 -5
package/lib/tab-group.d.cts +7 -10
package/lib/tab-group.d.ts +7 -10
package/lib/types/data-table.d.cts +185 -0
package/lib/types/data-table.d.ts +185 -0
package/lib/types/modal-dialog.d.cts +13 -0
package/lib/types/modal-dialog.d.ts +13 -0
package/lib/types/movable-window.d.cts +16 -0
package/lib/types/movable-window.d.ts +16 -0
package/lib/warning-popper.d.cts +39 -0
package/lib/warning-popper.d.ts +39 -0
package/lib/warning-popper.vue_vue_type_style_index_0_lang-CxVzqsbn.cjs +1 -0
package/lib/warning-popper.vue_vue_type_style_index_0_lang-zt-jCsvz.js +1833 -0
package/package.json +43 -16
package/src/accordion-fieldset.vue +29 -19
package/src/accordion-section.vue +41 -26
package/src/components.ts +10 -0
package/src/copy-button.vue +89 -0
package/src/dark-mode-selector.vue +212 -0
package/src/data-table.vue +643 -0
package/src/help-button.vue +128 -0
package/src/help-popper.vue +70 -0
package/src/helpers/data-table-csv.ts +55 -0
package/src/helpers/show-floating-component.ts +169 -0
package/src/helpers/show-modal-dialog.ts +121 -0
package/src/helpers/show-overlay-box.ts +106 -0
package/src/helpers/show-screen-loading.ts +37 -0
package/src/helpers/show-snackbar.ts +153 -0
package/src/hourglass-loading.vue +1 -1
package/src/index.ts +34 -0
package/src/internal/anchored-popover.vue +192 -0
package/src/internal/anchored-position.ts +135 -0
package/src/internal/data-table-controls.vue +203 -0
package/src/internal/data-table-value.ts +99 -0
package/src/internal/floating-component.vue +202 -0
package/src/internal/icon-popper.vue +185 -0
package/src/internal/mount-window.ts +110 -0
package/src/internal/movable-window.vue +315 -0
package/src/internal/opened-overlay-boxes.ts +2 -0
package/src/internal/pagination.vue +325 -0
package/src/internal/snackbar-container.vue +258 -0
package/src/internal/snackbar-item.ts +20 -0
package/src/internal/tab-group-context.ts +4 -2
package/src/internal/use-movable-window.ts +208 -0
package/src/internal/window-order.ts +11 -0
package/src/intersection-lazy-component.vue +84 -0
package/src/label-button.vue +37 -3
package/src/label-icon.vue +2 -2
package/src/modal-dialog.vue +287 -0
package/src/overlay-box.vue +218 -0
package/src/page-section.vue +7 -7
package/src/page-title.vue +5 -5
package/src/screen-loading.vue +90 -0
package/src/tab-content.vue +17 -16
package/src/tab-group.vue +55 -46
package/src/types/data-table.ts +196 -0
package/src/types/modal-dialog.ts +16 -0
package/src/types/movable-window.ts +18 -0
package/src/warning-popper.vue +70 -0
package/lib/accordion-fieldset.cjs +0 -1
package/lib/accordion-fieldset.js +0 -4
package/lib/accordion-fieldset.vue_vue_type_style_index_0_lang-n-IZxUiu.js +0 -66
package/lib/accordion-fieldset.vue_vue_type_style_index_0_lang-t9NqmoZW.cjs +0 -1
package/lib/accordion-section.cjs +0 -1
package/lib/accordion-section.js +0 -4
package/lib/accordion-section.vue_vue_type_style_index_0_lang-CFDdUEnn.cjs +0 -1
package/lib/accordion-section.vue_vue_type_style_index_0_lang-Gvjjx02P.js +0 -78
package/lib/components-CNOeuZPu.cjs +0 -1
package/lib/components-DBK8NUBh.js +0 -24
package/lib/hourglass-loading.cjs +0 -1
package/lib/hourglass-loading.js +0 -4
package/lib/hourglass-loading.vue_vue_type_style_index_0_lang-C72UVA9W.cjs +0 -1
package/lib/hourglass-loading.vue_vue_type_style_index_0_lang-DkUGIxQ2.js +0 -22
package/lib/label-button.cjs +0 -1
package/lib/label-button.js +0 -4
package/lib/label-button.vue_vue_type_script_setup_true_lang-BwVOxaJP.cjs +0 -1
package/lib/label-button.vue_vue_type_script_setup_true_lang-DorC4pKz.js +0 -44
package/lib/label-icon.cjs +0 -1
package/lib/label-icon.js +0 -4
package/lib/label-icon.vue_vue_type_style_index_0_lang-D9Cimu20.cjs +0 -1
package/lib/label-icon.vue_vue_type_style_index_0_lang-me52HE2V.js +0 -38
package/lib/page-section.cjs +0 -1
package/lib/page-section.js +0 -4
package/lib/page-section.vue_vue_type_style_index_0_lang-DEAkTLxd.cjs +0 -1
package/lib/page-section.vue_vue_type_style_index_0_lang-DpVQe_rV.js +0 -54
package/lib/page-title.cjs +0 -1
package/lib/page-title.js +0 -4
package/lib/page-title.vue_vue_type_style_index_0_lang-BqIsIks5.cjs +0 -1
package/lib/page-title.vue_vue_type_style_index_0_lang-ChZot85K.js +0 -36
package/lib/tab-content.cjs +0 -1
package/lib/tab-content.js +0 -4
package/lib/tab-content.vue_vue_type_style_index_0_lang-BeCi7Xkp.cjs +0 -1
package/lib/tab-content.vue_vue_type_style_index_0_lang-CcQLHmIF.js +0 -44
package/lib/tab-group.cjs +0 -1
package/lib/tab-group.js +0 -4
package/lib/tab-group.vue_vue_type_style_index_0_lang-C84mDEOC.js +0 -103
package/lib/tab-group.vue_vue_type_style_index_0_lang-CMaufRJV.cjs +0 -1
package/lib/use-shrinkable-CS2bmsJJ.js +0 -17
package/lib/use-shrinkable-Cu9JQZll.cjs +0 -1

package/src/dark-mode-selector.vue ADDED Viewed

@@ -0,0 +1,212 @@
+<!--
+ライトモードとダークモードを切り替えるスイッチ
+選んだモードを <html> の class(light / dark)に反映し、localStorage に保存する。
+保存値が無ければ OS の設定に従う。OS の設定が変わったとき、およびモードを切り替えたときは同一サイトのすべてのタブ、ウィンドウが追随する。
+SSRではライトの状態で描画されるため、一瞬ちらつきが発生することがある。
+これを回避するには dark-mode-selector.md に記載されている回避ロジックを実装する。
+-->
+<template>
+  <button
+    type="button"
+    role="switch"
+    class="dwui-dark-mode-selector"
+    :aria-label="props.label"
+    :aria-checked="isDark"
+    @click="onClickToggle"
+  >
+    <span class="dwui-dark-mode-selector-track">
+      <span class="dwui-dark-mode-selector-icon-light"><slot name="icon-light"><SvgHighBrightness /></slot></span>
+      <span class="dwui-dark-mode-selector-icon-dark"><slot name="icon-dark"><SvgMoonPhases :moon-age="3.85" /></slot></span>
+    </span>
+    <span class="dwui-dark-mode-selector-handle" />
+  </button>
+</template>
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { SvgHighBrightness, SvgMoonPhases } from '@digitalwalletcorp/vue-svg-icons';
+type ColorScheme = 'light' | 'dark';
+export interface Props {
+  /** 選んだモードを保存する localStorage のキー */
+  storageKey?: string;
+  /** スイッチの読み上げ名 */
+  label?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  storageKey: 'dwui-color-scheme',
+  label: 'Dark mode'
+});
+export interface Emits {
+  /** マウント時に決まったモードと、その後モードが変わるたびに、新しいモードを発行する */
+  (e: 'emit:change', value: ColorScheme): void;
+}
+const emit = defineEmits<Emits>();
+export interface Slots {
+  'icon-light'?(): unknown;
+  'icon-dark'?(): unknown;
+}
+defineSlots<Slots>();
+const isDark = ref<boolean>(false);
+let applied: ColorScheme | null = null;
+let mediaQuery: MediaQueryList | null = null;
+const isColorScheme = (value: unknown): value is ColorScheme => value === 'light' || value === 'dark';
+/** OS の設定から得られるモード */
+const osScheme = (): ColorScheme => mediaQuery?.matches ? 'dark' : 'light';
+/** 保存されているモード。無い場合や localStorage が使えない場合は null */
+const storedScheme = (): ColorScheme | null => {
+  try {
+    const value = localStorage.getItem(props.storageKey);
+    return isColorScheme(value) ? value : null;
+  } catch {
+    return null;
+  }
+};
+/** モードを <html> の class に反映する。変わったときだけ change を発行する */
+const applyScheme = (scheme: ColorScheme): void => {
+  const classList = document.documentElement.classList;
+  classList.remove(scheme === 'dark' ? 'light' : 'dark');
+  classList.add(scheme);
+  isDark.value = scheme === 'dark';
+  if (applied !== scheme) {
+    applied = scheme;
+    emit('emit:change', scheme);
+  }
+};
+/** モードを保存して反映する */
+const selectScheme = (scheme: ColorScheme): void => {
+  try {
+    localStorage.setItem(props.storageKey, scheme);
+  } catch {
+    // 保存できなくても表示の切り替えは行う
+  }
+  applyScheme(scheme);
+};
+const onClickToggle = (): void => {
+  selectScheme(isDark.value ? 'light' : 'dark');
+};
+const onChangeOsScheme = (event: MediaQueryListEvent): void => {
+  selectScheme(event.matches ? 'dark' : 'light');
+};
+// 別のタブで切り替えたとき。保存値が消されたときは OS の設定に戻る
+const onStorage = (event: StorageEvent): void => {
+  if (event.key !== props.storageKey) {
+    return;
+  }
+  applyScheme(isColorScheme(event.newValue) ? event.newValue : osScheme());
+};
+onMounted(() => {
+  mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  applyScheme(storedScheme() ?? osScheme());
+  mediaQuery.addEventListener('change', onChangeOsScheme);
+  window.addEventListener('storage', onStorage);
+});
+onBeforeUnmount(() => {
+  mediaQuery?.removeEventListener('change', onChangeOsScheme);
+  window.removeEventListener('storage', onStorage);
+});
+</script>
+<style>
+:where(.dwui-dark-mode-selector) {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  width: 3.85em;
+  height: 1.65em;
+  padding: 0;
+  border: none;
+  border-radius: 0.85em;
+  background-color: transparent;
+  background-image: none;
+  color: inherit;
+  font: inherit;
+  line-height: 0;
+  cursor: pointer;
+}
+:where(.dwui-dark-mode-selector-track) {
+  position: relative;
+  display: block;
+  height: inherit;
+  border-radius: inherit;
+  background: var(--dwui-background-dark-mode-selector, azure);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
+  font-size: 0.85em;
+  transition: background 0.15s ease-out;
+}
+:where(.dwui-dark-mode-selector[aria-checked='true'] > .dwui-dark-mode-selector-track) {
+  background: var(--dwui-background-dark-mode-selector-checked, darkslategray);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
+}
+:where(.dwui-dark-mode-selector-icon-light, .dwui-dark-mode-selector-icon-dark) {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+  transition: opacity 0.15s ease-out;
+}
+:where(.dwui-dark-mode-selector-icon-light) {
+  right: 0.6em;
+}
+:where(.dwui-dark-mode-selector-icon-dark) {
+  left: 0.6em;
+  opacity: 0;
+}
+:where(.dwui-dark-mode-selector[aria-checked='true'] .dwui-dark-mode-selector-icon-light) {
+  opacity: 0;
+}
+:where(.dwui-dark-mode-selector[aria-checked='true'] .dwui-dark-mode-selector-icon-dark) {
+  opacity: 1;
+}
+:where(.dwui-dark-mode-selector-handle) {
+  position: absolute;
+  top: 0.075em;
+  left: 0;
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 0.75em;
+  background: var(--dwui-background-dark-mode-selector-handle, linear-gradient(0.25turn, #888484 0%, #b4abab 50%, #888484 100%));
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+  transition: left 0.15s ease-out;
+}
+:where(.dwui-dark-mode-selector[aria-checked='true'] > .dwui-dark-mode-selector-handle) {
+  left: calc(3.85em - 1.5em - 0.075em);
+  box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
+}
+:where(.dwui-dark-mode-selector:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+:where(.dwui-dark-mode-selector:focus-visible) {
+  outline: var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);
+  outline-offset: var(--dwui-outline-offset-focus-ring, 2px);
+}
+</style>