@lism-css/ui 0.0.0-dev.2 → 0.0.0-dev.3

package/dist/components/Accordion/AccIcon.d.ts

@@ -0,0 +1,6 @@
+export default function AccIcon({ icon, viewBox, children, ...props }: {
+    [x: string]: any;
+    icon?: string | undefined;
+    viewBox: any;
+    children?: null | undefined;
+}): import("react").JSX.Element;

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export function Accordion({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): React.JSX.Element;
+export function Header({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): React.JSX.Element;
+export function Label({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): React.JSX.Element;
+export function Body({ children, flow, innerProps, ...props }: {
+    [x: string]: any;
+    children: any;
+    flow: any;
+    innerProps: any;
+}): React.JSX.Element;
+export function HeaderLabel({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): React.JSX.Element;

package/dist/components/Accordion/astro/__setEvent.d.ts

@@ -0,0 +1 @@
+export default setEvent;

package/dist/components/Accordion/astro/index.d.ts

@@ -0,0 +1,9 @@
+declare namespace _default {
+    export { Root };
+    export { Header };
+    export { HeaderLabel };
+    export { Body };
+    export { Icon };
+    export { Label };
+}
+export default _default;

package/dist/components/Accordion/getProps.d.ts

@@ -0,0 +1,31 @@
+export function getAccProps({ lismClass, ...props }: {
+    [x: string]: any;
+    lismClass: any;
+}): {
+    [x: string]: any;
+};
+export function getAccIconProps({ isTrigger, ...props }: {
+    [x: string]: any;
+    isTrigger: any;
+}): {
+    lismClass: string;
+    tag: string;
+};
+export namespace defaultProps {
+    namespace header {
+        let lismClass: string;
+    }
+    namespace label {
+        let lismClass_1: string;
+        export { lismClass_1 as lismClass };
+        export let tag: string;
+    }
+    namespace body {
+        let lismClass_2: string;
+        export { lismClass_2 as lismClass };
+    }
+    namespace inner {
+        let lismClass_3: string;
+        export { lismClass_3 as lismClass };
+    }
+}

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,11 @@
+import { Accordion as Root, Header, Label, Body, HeaderLabel } from './Accordion';
+import { default as Icon } from './AccIcon';
+declare namespace _default {
+    export { Root };
+    export { Header };
+    export { Label };
+    export { Icon };
+    export { Body };
+    export { HeaderLabel };
+}
+export default _default;

package/dist/components/Accordion/script.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Accordion/setAccordion.d.ts

@@ -0,0 +1,3 @@
+export function setEvent(currentRef: any): (() => void) | undefined;
+export default setAccordion;
+declare function setAccordion(): void;

package/dist/components/Accordion/setAccordion.js

@@ -0,0 +1,37 @@
+const s = (t) => Promise.all(t.getAnimations().map((e) => e.finished)), d = async (t, e = !1) => {
+  if (t.dataset.animating && !e) return;
+  t.dataset.animating = "1";
+  const n = t.querySelector(".d--accordion_body");
+  t.open ? t.open && (t.removeAttribute("data-opened"), await s(n), delete t.dataset.animating, t.open = !1) : (t.open = !0, setTimeout(async () => {
+    t.setAttribute("data-opened", ""), await s(n), delete t.dataset.animating;
+  }, 5));
+}, u = (t, e) => {
+  const n = e.open, o = e.hasAttribute("data-opened");
+  n && !o && e.setAttribute("data-opened", ""), !n && o && e.removeAttribute("data-opened");
+}, p = (t) => {
+  const e = t, n = e.querySelector('[data-role="trigger"]') || e.querySelector("summary");
+  if (!n) return;
+  let o = !1;
+  const r = e.parentNode;
+  r != null && (o = r.dataset.accordionMultiple !== "disallow");
+  const c = (a) => {
+    if (a.preventDefault(), !o && !e.open) {
+      const l = r.querySelector("[data-opened]");
+      l != null && d(l, !0);
+    }
+    d(e);
+  }, i = (a) => {
+    u(a, e);
+  };
+  return n.addEventListener("click", c), e.addEventListener("toggle", i), () => {
+    n.removeEventListener("click", c), e.removeEventListener("toggle", i);
+  };
+}, m = () => {
+  document.querySelectorAll(".d--accordion").forEach((e) => {
+    p(e);
+  });
+};
+export {
+  m as default,
+  p as setEvent
+};

package/dist/components/Modal/Body.d.ts

@@ -0,0 +1,4 @@
+export default function ModalBody({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;

package/dist/components/Modal/CloseBtn.d.ts

@@ -0,0 +1,7 @@
+export default function CloseBtn({ children, modalId, icon, srText, ...props }: {
+    [x: string]: any;
+    children: any;
+    modalId?: string | undefined;
+    icon: any;
+    srText?: string | undefined;
+}): import("react").JSX.Element;

package/dist/components/Modal/Inner.d.ts

@@ -0,0 +1,4 @@
+export default function ModalInner({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export default Modal;
+declare function Modal({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): React.JSX.Element;

package/dist/components/Modal/OpenBtn.d.ts

@@ -0,0 +1,5 @@
+export default function OpenBtn({ children, modalId, ...props }: {
+    [x: string]: any;
+    children: any;
+    modalId?: string | undefined;
+}): import("react").JSX.Element;

package/dist/components/Modal/getProps.d.ts

@@ -0,0 +1,41 @@
+export function getProps({ lismClass, duration, style, ...props }: {
+    [x: string]: any;
+    lismClass?: string | undefined;
+    duration: any;
+    style?: {} | undefined;
+}): {
+    style: {};
+    lismClass: any;
+    setPlain: boolean;
+    tag: string;
+};
+export function getInnerProps({ lismClass, offset, style, ...props }: {
+    [x: string]: any;
+    lismClass?: string | undefined;
+    offset: any;
+    style?: {} | undefined;
+}): {
+    lismClass: any;
+    style: {};
+};
+export namespace defaultProps {
+    namespace body {
+        let lismClass: string;
+    }
+    namespace closeBtn {
+        let tag: string;
+        let setPlain: boolean;
+        let hov: string;
+        let d: string;
+    }
+    namespace openBtn {
+        let tag_1: string;
+        export { tag_1 as tag };
+        let setPlain_1: boolean;
+        export { setPlain_1 as setPlain };
+        let hov_1: string;
+        export { hov_1 as hov };
+        let d_1: string;
+        export { d_1 as d };
+    }
+}

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,13 @@
+import { default as Root } from './Modal';
+import { default as Inner } from './Inner';
+import { default as Body } from './Body';
+import { default as CloseBtn } from './CloseBtn';
+import { default as OpenBtn } from './OpenBtn';
+declare namespace _default {
+    export { Root };
+    export { Inner };
+    export { Body };
+    export { CloseBtn };
+    export { OpenBtn };
+}
+export default _default;

package/dist/components/Modal/script.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Modal/setModal.d.ts

@@ -0,0 +1,3 @@
+export declare function setEvent(modal: HTMLDialogElement): void;
+declare const setModal: () => void;
+export default setModal;

package/dist/components/Modal/setModal.js

@@ -0,0 +1,42 @@
+let s = null;
+const o = async (e) => {
+  const n = e.getAnimations();
+  n.length > 0 && await Promise.allSettled(n.map((c) => c.finished));
+};
+async function d(e) {
+  e.open && e.dataset.isOpen || (e.showModal(), requestAnimationFrame(() => {
+    e.dataset.isOpen = "1";
+  }));
+}
+async function a(e) {
+  e.dataset.isOpen !== void 0 && (delete e.dataset.isOpen, await o(e), e.close());
+}
+function l(e) {
+  if (!e || !e.id) return;
+  const n = document.querySelectorAll(`[data-modal-open="${e.id}"]`), c = e.querySelectorAll(`[data-modal-close="${e.id}"]`);
+  e.addEventListener("click", (t) => {
+    t.target === e && a(e);
+  }), e.addEventListener("close", (t) => {
+    s && (delete s.dataset.targetOpened, s = null), a(e);
+  }), n.forEach((t) => {
+    t == null || t.addEventListener("click", (i) => {
+      t.dataset.targetOpened = "1", s = t, d(e);
+    });
+  }), c.forEach((t) => {
+    t == null || t.addEventListener("click", (i) => {
+      a(e);
+    });
+  }), e.addEventListener("cancel", (t) => {
+    t.preventDefault(), a(e);
+  });
+}
+const u = () => {
+  const e = document.querySelectorAll(".d--modal");
+  e == null || e.forEach((n) => {
+    l(n);
+  });
+};
+export {
+  u as default,
+  l as setEvent
+};

package/dist/components/Tabs/Tab.d.ts

@@ -0,0 +1,6 @@
+export default function Tab({ tabId, index, isActive, ...props }: {
+    [x: string]: any;
+    tabId?: string | undefined;
+    index?: number | undefined;
+    isActive?: boolean | undefined;
+}): import("react").JSX.Element;

package/dist/components/Tabs/TabItem.d.ts

@@ -0,0 +1,4 @@
+export default function TabItem({ isTabItem, children }: {
+    isTabItem?: boolean | undefined;
+    children: any;
+}): import("react").JSX.Element;

package/dist/components/Tabs/TabList.d.ts

@@ -0,0 +1 @@
+export default function TabList(props: any): import("react").JSX.Element;

package/dist/components/Tabs/TabPanel.d.ts

@@ -0,0 +1,6 @@
+export default function TabPanel({ tabId, isActive, index, ...props }: {
+    [x: string]: any;
+    tabId?: string | undefined;
+    isActive?: boolean | undefined;
+    index?: number | undefined;
+}): import("react").JSX.Element;

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export default function Tabs({ tabId, defaultIndex, listProps, children, ...props }: {
+    [x: string]: any;
+    tabId?: string | undefined;
+    defaultIndex?: number | undefined;
+    listProps?: {} | undefined;
+    children: any;
+}): React.JSX.Element;

package/dist/components/Tabs/getProps.d.ts

@@ -0,0 +1,6 @@
+export default function getTabsProps({ lismClass, ...props }: {
+    [x: string]: any;
+    lismClass: any;
+}): {
+    lismClass: any;
+};

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,13 @@
+import { default as Root } from './Tabs';
+import { default as List } from './TabList';
+import { default as Panel } from './TabPanel';
+import { default as Item } from './TabItem';
+import { default as Tab } from './Tab';
+declare namespace _default {
+    export { Root };
+    export { List };
+    export { Panel };
+    export { Item };
+    export { Tab };
+}
+export default _default;

package/dist/components/Tabs/script.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Tabs/setEvent.d.ts

@@ -0,0 +1,2 @@
+export default setEvent;
+declare function setEvent(tabs: any): void;

package/dist/components/Tabs/setEvent.js

@@ -0,0 +1,29 @@
+function b(t) {
+  t.preventDefault();
+  const r = t.currentTarget;
+  c(r);
+}
+const c = (t) => {
+  if (t.getAttribute("aria-selected") === "true") return;
+  const e = t.getAttribute("aria-controls"), n = document.getElementById(e);
+  if (n === null) return;
+  const s = t.parentNode.parentNode.querySelector('[aria-selected="true"]'), o = s.getAttribute("aria-controls"), a = document.getElementById(o);
+  t.setAttribute("aria-selected", "true"), s.setAttribute("aria-selected", "false"), a.setAttribute("aria-hidden", "true"), n.setAttribute("aria-hidden", "false");
+};
+function f(t) {
+  var i;
+  t.querySelectorAll('button[role="tab"]').forEach((d) => {
+    d.addEventListener("click", function(u) {
+      b(u);
+    });
+  });
+  const e = (i = window == null ? void 0 : window.location) == null ? void 0 : i.href;
+  if (!e || !(e.indexOf("?lism-tab=") !== -1)) return;
+  const o = new URL(e).searchParams.get("lism-tab"), a = t.querySelector(`[aria-controls="${o}"]`);
+  a && (t.dataset.hasTabLink = "1", c(a), setTimeout(() => {
+    delete t.dataset.hasTabLink;
+  }, 10));
+}
+export {
+  f as default
+};

package/dist/components/__contexts.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export const LayoutContext: React.Context<null>;

package/dist/components/astro.d.ts

@@ -0,0 +1 @@
+export { default as Accordion } from './Accordion/astro';

package/dist/components/react.d.ts

@@ -0,0 +1 @@
+export { default as Accordion } from './Accordion';

package/dist/scripts/accordion.js

@@ -0,0 +1,4 @@
+import n from "../components/Accordion/setAccordion.js";
+document.addEventListener("DOMContentLoaded", function() {
+  n();
+});

package/dist/scripts/modal.js

@@ -0,0 +1,4 @@
+import t from "../components/Modal/setModal.js";
+document.addEventListener("DOMContentLoaded", function() {
+  t();
+});

package/dist/scripts/tabs.js

@@ -0,0 +1,6 @@
+import e from "../components/Tabs/setEvent.js";
+document.addEventListener("DOMContentLoaded", function() {
+  document.querySelectorAll(".d--tabs").forEach((t) => {
+    e(t);
+  });
+});

package/dist/style.css

@@ -0,0 +1 @@
+.d--accordion{--duration:var(--acc-duration,0.4s)}.d--accordion[data-opened]{--_notOpen: }.d--accordion:not([data-opened]){--_isOpen: }.d--accordion_header{align-items:center;display:grid;gap:.5em;grid:auto/1fr auto;outline-offset:-1px;&::-webkit-details-marker{display:none}}.d--accordion_body{display:grid;grid:1fr/auto;transition-duration:var(--duration);transition-property:margin-block,padding-block,opacity,grid-template}.d--accordion_inner{overflow:hidden}.d--accordion:not([data-opened])>.d--accordion_body{grid:0fr/auto;margin-block:0!important;padding-block:0!important}.d--accordion_icon{display:grid}.d--accordion_icon .a--icon{rotate:var(--_isOpen,-180deg);transition-duration:var(--duration)}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lism-css/ui",
-  "version": "0.0.0-dev.2",
-  "description": "A layout-first CSS framework for websites.",
+  "version": "0.0.0-dev.3",
+  "description": "UI components by lism-css.",
   "author": {
     "name": "ddryo",
     "url": "https://github.com/ddryo"
@@ -30,7 +30,8 @@
       "import": "./src/components/astro.js",
       "types": "./dist/components/index.d.ts"
     },
-    "./*.css": "./dist/css/*.css"
+    "./scripts/*": "./dist/scripts/*.js",
+    "./style.css": "./dist/style.css"
   },
   "homepage": "https://www.lism.style",
   "repository": {
@@ -66,10 +67,6 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build && pnpm build:css",
-    "build:vite": "vite build",
-    "build:css": "node bin/script-build-css.js",
-    "lint": "pnpm lint:style",
-    "lint:style": "stylelint '**/*.{css,scss}'",
-    "preview": "vite preview"
+    "build:css": "node build-css.js"
   }
 }

package/src/components/Accordion/Accordion.jsx

@@ -5,6 +5,8 @@ import { getAccProps, defaultProps } from './getProps';
 import { setEvent } from './setAccordion';
 import AccIcon from './AccIcon';
 
+import './_style.css';
+
 // import { AccContext } from './context';
 
 // duration: [s]

package/src/components/Accordion/_style.css

@@ -0,0 +1,52 @@
+.d--accordion {
+	--duration: var(--acc-duration, 0.4s);
+}
+.d--accordion[data-opened] {
+	--_notOpen: ;
+}
+.d--accordion:not([data-opened]) {
+	--_isOpen: ;
+}
+
+.d--accordion_header {
+	display: grid;
+	grid: auto / 1fr auto;
+	gap: 0.5em;
+	align-items: center;
+	outline-offset: -1px; /* overflow:clip|hidden; で見えなくなってしまうのを防ぐ */
+
+	/* Safariで表示されるデフォルトの三角形アイコンを消す */
+	&::-webkit-details-marker {
+		display: none;
+	}
+}
+
+.d--accordion_body {
+	display: grid;
+	grid: 1fr / auto;
+	transition-property: margin-block, padding-block, opacity, grid-template;
+	transition-duration: var(--duration);
+}
+
+/* ※ 正常な animation には必須 */
+.d--accordion_inner {
+	overflow: hidden;
+}
+
+/* 閉じている時 */
+.d--accordion:not([data-opened]) > .d--accordion_body {
+	grid: 0fr / auto;
+	padding-block: 0 !important;
+	margin-block: 0 !important;
+}
+
+/* アコーディオンブロックのネスト時、別のアイコンタイプにすると表示が崩れるがそこまでは考慮しない。 */
+.d--accordion_icon {
+	display: grid;
+}
+
+/* .d--accordion_icon 自体にborderつけたりすると回転が見えてしまうので、中にある .a--icon を回転させる。 */
+.d--accordion_icon .a--icon {
+	transition-duration: var(--duration);
+	rotate: var(--_isOpen, -180deg);
+}

package/src/components/Accordion/astro/Accordion.astro

@@ -3,6 +3,8 @@
 import getLismProps from 'lism-css/lib/getLismProps';
 import { getAccProps } from '../getProps';
 
+import '../_style.css';
+
 // Propsの定義
 // interface Props extends LismProps {
 // 	duration?: string | number;

package/src/style.scss

@@ -0,0 +1 @@
+@use './components/Accordion/_style.css';

package/src/components/Accordion/_style.scss

@@ -1,54 +0,0 @@
-.d--accordion {
-	--duration: var(--acc-duration, 0.4s);
-	&[data-opened] {
-		--_notOpen: ;
-	}
-	&:not([data-opened]) {
-		--_isOpen: ;
-	}
-}
-
-.d--accordion_header {
-	display: grid;
-	grid: auto / 1fr auto;
-	gap: 0.5em;
-	align-items: center;
-	outline-offset: -1px; // overflow:clip|hidden; で見えなくなってしまうのを防ぐ
-
-	/* Safariで表示されるデフォルトの三角形アイコンを消す */
-	&::-webkit-details-marker {
-		display: none;
-	}
-}
-
-.d--accordion_body {
-	display: grid;
-	grid: 1fr / auto;
-	transition-property: margin-block, padding-block, opacity, grid-template;
-	transition-duration: var(--duration);
-}
-
-// ※ 正常な animation には必須
-.d--accordion_inner {
-	overflow: hidden;
-}
-
-// 閉じている時
-.d--accordion:not([data-opened]) {
-	> .d--accordion_body {
-		grid: 0fr / auto;
-		padding-block: 0 !important;
-		margin-block: 0 !important;
-	}
-}
-
-// アコーディオンブロックのネスト時、別のアイコンタイプにすると表示が崩れるがそこまでは考慮しない。
-.d--accordion_icon {
-	display: grid;
-
-	// __icon 自体にborderつけたりすると回転が見えてしまうので、 icon自体を回転させる。
-	> .a--icon {
-		transition-duration: var(--duration);
-		rotate: var(--_isOpen, -180deg);
-	}
-}